:root {
  /* ShineUp Moto2 light: wspolna paleta calego ekosystemu. */
  --bg: #f5f6f8;
  --bg-soft: #eef0f3;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-2: #f0f2f5;
  --surface-3: #e7eaee;
  --text: #17191e;
  --text-soft: #6a6f7a;
  --text-faint: #9298a2;
  --line: #e2e5e9;
  --line-strong: #cfd4da;
  --gold: #e9c889;
  --gold-bright: #f3dcae;
  --gold-deep: #9a7133;
  --gold-wash: #fbf5e9;
  --danger: #c74c56;
  --success: #32745a;
  --shadow: 0 14px 46px rgba(21, 32, 49, .075);
  --shadow-soft: 0 7px 24px rgba(21, 32, 49, .055);
  --accent: #e9c889;
  --accent-hover: #f3dcae;
  --soft: #f0f2f5;
  --muted: #6a6f7a;
  --su-gold-ink: #201b13;
  --radius: 22px;
  --topbar-h: 74px;
  --sidebar-w: 254px;
  --rail-w: 330px;
  --font-body: "Manrope", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Manrope", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
 * ShineUp Dark 2026
 * Chlodny, techniczny wariant ciemnego motywu inspirowany ShineUp Moto.
 * Calosc jest ograniczona do data-theme="dark", dlatego osobna warstwa
 * Moto2 dla jasnego motywu nie zmienia gotowego wariantu ciemnego.
 */
html[data-theme="dark"] {
  --gold-light: #f2d392;
  --su-dark-bg: #0b0f12;
  --su-dark-chrome: #12171b;
  --su-dark-panel: #171c20;
  --su-dark-panel-raised: #1d2328;
  --su-dark-panel-hover: #242b31;
  --su-dark-border: rgba(184, 197, 208, .15);
  --su-dark-border-strong: rgba(198, 209, 218, .24);
  --su-gold-ink: #101316;
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 50% -18rem, rgba(255, 255, 255, .045), transparent 42rem),
    var(--su-dark-bg);
}

html[data-theme="dark"] :is(.topbar,.m-messenger-appbar,.m-chat-header) {
  background: color-mix(in srgb, var(--su-dark-chrome) 94%, transparent);
  border-color: var(--su-dark-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .015);
  backdrop-filter: blur(18px) saturate(112%);
}

html[data-theme="dark"] :is(.sidebar,.guest-sidebar) {
  background: color-mix(in srgb, var(--su-dark-chrome) 97%, transparent);
  border-color: var(--su-dark-border);
}

html[data-theme="dark"] .main-nav a {
  color: var(--text-soft);
}

html[data-theme="dark"] .main-nav a:hover {
  color: var(--text);
  background: var(--su-dark-panel-raised);
}

html[data-theme="dark"] .main-nav a.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(229, 190, 112, .11), rgba(229, 190, 112, .025) 62%, transparent);
}

html[data-theme="dark"] .main-nav a.active::before {
  background: var(--gold-bright);
  box-shadow: none;
}

html[data-theme="dark"] :is(.global-search,.search-large,.conversation-search,.profile-connections-search) {
  color: var(--text-soft);
  background: var(--su-dark-panel-raised);
  border-color: var(--su-dark-border);
  box-shadow: none;
}

html[data-theme="dark"] :is(.global-search,.search-large,.conversation-search,.profile-connections-search):focus-within {
  border-color: color-mix(in srgb, var(--gold) 64%, var(--su-dark-border-strong));
  box-shadow: 0 0 0 3px rgba(229, 190, 112, .08);
}

html[data-theme="dark"] :is(.rail-card,.lux-card,.dashboard-card,.dashboard-stat,.section-card,.post-card,.search-panel,.stat-box,.garage-car,.settings-layout,.views-group,.editor-shell,.notice-list,.legal-hero,.legal-nav,.legal-article,.faq-item,.how-step,.how-area-card,.roadmap-item,.online-person-card,.profile-edit-panel,.profile-settings-panel,.profile-connections-dialog,.company-simple-dialog,.company-admin-modal-dialog,.account-menu-panel) {
  background-color: var(--su-dark-panel);
  border-color: var(--su-dark-border);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .20);
}

html[data-theme="dark"] :is(.search-autocomplete-results,.desktop-create-menu,.service-filter-panel,.chat-emoji-picker,.comment-emoji-picker,.profile-lightbox-dialog,.fuel-chart-tooltip,.company-notification-detail,.dashboard-people-arrow,.dashboard-carousel-arrow,.mobile-create-panel) {
  border-color: var(--su-dark-border);
  box-shadow: 0 20px 56px rgba(0, 0, 0, .38);
}

html[data-theme="dark"] :is(.dashboard-stat,.stat-box,.dashboard-person-card,.dashboard-fuel-grid > div,.dashboard-empty,.profile-edit-choice,.profile-edit-toggle,.company-contact-upload,.company-contact-vehicle) {
  background: var(--su-dark-panel-raised);
  border-color: var(--su-dark-border);
}

html[data-theme="dark"] :is(.dashboard-stat-icon,.dashboard-zone-links > :is(a,button) > span,.dashboard-activity-list article > span,.tool-icon,.how-step-icon,.account-menu-group > a > i:first-child,.account-menu-group > button > i:first-child) {
  border-color: rgba(229, 190, 112, .18);
}

html[data-theme="dark"] :is(.outline-btn,.soft-btn,.text-btn,.chip,.profile-action,.dashboard-icon-btn) {
  border-color: var(--su-dark-border);
}

html[data-theme="dark"] :is(.outline-btn,.soft-btn,.chip,.profile-action):hover {
  color: var(--text);
  background: var(--su-dark-panel-hover);
  border-color: var(--su-dark-border-strong);
}

html[data-theme="dark"] .dashboard-welcome {
  background:
    linear-gradient(90deg, rgba(8, 12, 15, .98) 0%, rgba(12, 17, 20, .95) 43%, rgba(12, 17, 20, .58) 72%, rgba(12, 17, 20, .28) 100%),
    url("../images/feed-mustang.webp") center 56% / cover;
  border-color: var(--su-dark-border-strong);
  box-shadow: 0 20px 58px rgba(0, 0, 0, .30);
}

html[data-theme="dark"] .dashboard-welcome::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 44%, rgba(0, 0, 0, .18));
}

html[data-theme="dark"] .dashboard-profile-summary {
  background: rgba(16, 21, 25, .78);
  border-color: rgba(205, 216, 225, .18);
  box-shadow: inset 0 1px rgba(255, 255, 255, .025);
}

html[data-theme="dark"] .dashboard-tip-card {
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(224, 184, 105, .11), transparent 55%),
    var(--su-dark-panel);
  border-color: rgba(229, 190, 112, .20);
}

html[data-theme="dark"] .home-hero {
  background: var(--su-dark-bg);
}

html[data-theme="dark"] .home-hero::before {
  background: radial-gradient(circle at 18% 15%, rgba(229, 190, 112, .10), transparent 34rem);
}

html[data-theme="dark"] .home-hero-media > img {
  opacity: .82;
  filter: saturate(.72) brightness(.72) contrast(1.12);
}

html[data-theme="dark"] .home-hero-media::after {
  background:
    linear-gradient(90deg, var(--su-dark-bg) 0%, rgba(11, 15, 18, .78) 17%, transparent 43%),
    linear-gradient(0deg, rgba(5, 8, 10, .78), transparent 48%);
}

html[data-theme="dark"] :is(.home-cta,.reward-hero,.how-area-card,.how-cta,.roadmap-idea) {
  background: linear-gradient(135deg, var(--su-dark-panel), var(--su-dark-panel-raised));
  border-color: var(--su-dark-border);
}

html[data-theme="dark"] .how-hero {
  background:
    radial-gradient(circle at 92% 12%, rgba(229, 190, 112, .08), transparent 34%),
    linear-gradient(135deg, var(--su-dark-panel), var(--su-dark-panel-raised));
}

html[data-theme="dark"] :is(.standalone-auth,.auth-page) {
  background:
    radial-gradient(circle at 12% 8%, rgba(229, 190, 112, .08), transparent 28rem),
    radial-gradient(circle at 92% 90%, rgba(255, 255, 255, .025), transparent 30rem),
    var(--su-dark-bg);
}

html[data-theme="dark"] .standalone-auth-panel {
  background: linear-gradient(145deg, var(--su-dark-panel), var(--su-dark-chrome));
}

html[data-theme="dark"] .standalone-auth-shell {
  background: var(--su-dark-panel);
  border-color: var(--su-dark-border-strong);
  box-shadow: 0 34px 100px rgba(0, 0, 0, .48);
}

html[data-theme="dark"] :is(.standalone-social-login button,.standalone-social-login a,.standalone-google-login,.standalone-auth-field,input.field,select.field,textarea.field,.wizard-field input,.wizard-field select,.wizard-field textarea) {
  color: var(--text);
  background-color: var(--su-dark-panel-raised);
  border-color: var(--su-dark-border);
}

html[data-theme="dark"] :is(input,textarea,select)::placeholder {
  color: var(--text-faint);
  opacity: 1;
}

html[data-theme="dark"] :is(.account-menu-user,.conversation-head,.chat-details-head,.m-chat-composer,.m-bottom-nav,.bottom-nav) {
  background-color: var(--su-dark-chrome);
  border-color: var(--su-dark-border);
}

html[data-theme="dark"] .account-menu-user {
  background:
    linear-gradient(135deg, rgba(229, 190, 112, .075), transparent 62%),
    var(--su-dark-panel);
}

html[data-theme="dark"] :is(.account-menu-group > a,.account-menu-group > button):hover {
  background: var(--su-dark-panel-hover);
}

html[data-theme="dark"] .chat-body {
  background:
    radial-gradient(circle at 12% 0%, rgba(229, 190, 112, .055), transparent 32rem),
    #101519;
}

html[data-theme="dark"] :is(.chat-message:not(.mine),.chat-media-message,.msg-chat__row--in .msg-chat__bubble) {
  background: var(--su-dark-panel-raised);
  border-color: var(--su-dark-border);
}

html[data-theme="dark"] .msg-chat__jumpdown {
  color: var(--gold-bright);
  background: var(--su-dark-panel-hover);
  border-color: rgba(229, 190, 112, .36);
}

html[data-theme="dark"] :is(.post-card,.dashboard-person-card,.garage-car,.su-search-company,.su-search-post,.su-search-action-post) {
  border-color: var(--su-dark-border);
}

html[data-theme="dark"] :is(.feed-filter button.active,.conversation-item.active,.notice-item.unread) {
  background: linear-gradient(90deg, rgba(229, 190, 112, .10), rgba(229, 190, 112, .025));
}

/* Pelne zlote CTA zawsze maja ciemny tekst oraz ikony. */
html[data-theme="dark"] :is(
  .premium-btn,
  .create-btn,
  .guest-register-link,
  .chip.active,
  .post-follow-btn.following,
  .notification-accept,
  .dashboard-push-prompt-action,
  .chat-send,
  .chat-empty-copy button,
  .watch-comment-submit,
  .profile-action-primary,
  .profile-tabs button.active,
  .segmented-control button.active,
  .fuel-chip-group button.active,
  .bottom-create i,
  .m-bottom-create i,
  .m-compose-button,
  .m-composer-send,
  .msg-chat__row--out .msg-chat__bubble
) {
  color: var(--su-gold-ink) !important;
}

html[data-theme="dark"] :is(
  .premium-btn,
  .create-btn,
  .guest-register-link,
  .notification-accept,
  .dashboard-push-prompt-action,
  .profile-action-primary,
  .section-create-cta,
  .watch-comment-submit,
  .wizard-button.is-primary,
  .wizard-complete-actions a,
  .home-creator-follow,
  .discover-section-tabs button.active,
  .discover-tabs button.active,
  .discover-media-kinds button.active,
  .discover-follow-action:not(.following),
  .discover-company-follow:not(.following),
  .discover-rail-cta,
  .company-notifications-summary > button.active,
  .company-notification-person-actions .company-notification-call,
  .company-admin-tabs button.active,
  .company-variant-track button.active,
  .company-tabs button.active,
  .referrals-rewards-link,
  .referrals-field-control button
) :is(i,span,strong,small,b) {
  color: inherit !important;
}

html[data-theme="dark"] :is(
  .premium-btn,
  .create-btn,
  .guest-register-link,
  .notification-accept,
  .dashboard-push-prompt-action,
  .profile-action-primary
) :is(i,span,strong,small) {
  color: inherit !important;
}

html[data-theme="dark"] :is(.premium-btn,.create-btn,.guest-register-link,.notification-accept,.dashboard-push-prompt-action) {
  border-color: rgba(242, 211, 146, .46);
  box-shadow: 0 9px 24px rgba(0, 0, 0, .24);
}

html[data-theme="dark"] :is(.premium-btn,.create-btn,.guest-register-link,.notification-accept,.dashboard-push-prompt-action):hover {
  color: var(--su-gold-ink) !important;
  filter: brightness(1.06);
}

html[data-theme="dark"] * {
  scrollbar-color: rgba(229, 190, 112, .52) transparent;
}

html[data-theme="dark"] *::-webkit-scrollbar-thumb {
  background: rgba(229, 190, 112, .48);
  border-radius: 999px;
}

html[data-theme="dark"] *::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 767.98px) {
  html[data-theme="dark"] :is(.topbar,.bottom-nav,.m-bottom-nav,.m-messenger-appbar,.m-chat-composer) {
    background: color-mix(in srgb, var(--su-dark-chrome) 96%, transparent);
  }

  html[data-theme="dark"] :is(.post-card,.profile-hero,.profile-tabs,.section-card,.legal-hero,.legal-nav,.legal-article,.dashboard-card) {
    box-shadow: none;
  }
}

/* Blokada powiększania całego interfejsu na urządzeniach dotykowych. */
html.su-mobile-zoom-locked,
html.su-mobile-zoom-locked body {
  touch-action: pan-x pan-y;
}

/* Profil firmy: wspólny kontrakt danych, interakcji oraz jasnego i ciemnego motywu. */
body[data-route="company"] .company-quick :is(button,a) {
  min-width:0;
  min-height:64px;
  padding:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:var(--text);
  background:var(--surface-solid);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-soft);
  font-size:12px;
  font-weight:800;
  text-align:center;
  text-decoration:none;
}
body[data-route="company"] .company-quick :is(button,a):hover {
  color:var(--gold-deep);
  background:var(--gold-wash);
  border-color:var(--gold);
}
body[data-route="company"] .company-quick button:disabled { opacity:.48; cursor:not-allowed; }
body[data-route="company"] .company-open-badge.is-closed i { color:var(--danger); }
body[data-route="company"] .company-status-open.is-closed { color:var(--danger) !important; background:color-mix(in srgb,var(--danger) 10%,transparent); }
body[data-route="company"] .company-wide-button { display:flex;align-items:center;justify-content:center;gap:7px;text-decoration:none; }
body[data-route="company"] .company-section-copy { margin:6px 0 0;color:var(--text-faint);font-size:11px;line-height:1.55; }
body[data-route="company"] .company-full-button { display:flex;align-items:center;justify-content:center;gap:7px; }

body[data-route="company"] :is(.company-empty-state,.company-empty-page) {
  min-height:220px;
  padding:30px 18px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  color:var(--text-faint);
  text-align:center;
}
body[data-route="company"] .company-empty-page { min-height:clamp(420px,65vh,700px); }
body[data-route="company"] :is(.company-empty-state,.company-empty-page) > i { width:52px;height:52px;display:grid;place-items:center;color:var(--gold-deep);background:var(--gold-wash);border-radius:50%;font-size:19px; }
body[data-route="company"] :is(.company-empty-state,.company-empty-page) strong { color:var(--text);font-size:14px; }
body[data-route="company"] :is(.company-empty-state,.company-empty-page) span { max-width:390px;font-size:11px;line-height:1.55; }
body[data-route="company"] .company-empty-inline { padding:18px 8px;color:var(--text-faint);font-size:11px;line-height:1.5; }

body[data-route="company"] .company-review-avatar { width:42px;height:42px;display:grid;place-items:center;color:var(--gold-deep);background:var(--gold-wash);border:1px solid var(--line);border-radius:50%; }
body[data-route="company"] .company-review-list > article > .company-review-avatar { width:46px;height:46px; }
body[data-route="company"] .company-social-links { margin-top:18px;display:flex;flex-wrap:wrap;gap:8px; }
body[data-route="company"] .company-social-links a { min-height:38px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;color:var(--text-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;font-size:10px;font-weight:800;text-decoration:none; }
body[data-route="company"] .company-social-links a:hover { color:var(--gold-deep);border-color:var(--gold); }
body[data-route="company"] .company-map { position:relative;overflow:hidden;background:linear-gradient(145deg,var(--gold-wash),var(--surface-2)) center/cover; }
body[data-route="company"] .company-map::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(5,5,4,.58)); }
body[data-route="company"] .company-map > span { position:absolute;z-index:1;left:15px;right:15px;bottom:14px;padding:10px 12px;display:flex;align-items:center;gap:8px;color:#fff;background:rgba(8,8,7,.58);border:1px solid rgba(255,255,255,.18);border-radius:12px;backdrop-filter:blur(8px);font-size:11px;font-weight:800; }

body[data-route="company"] :is(.company-gallery-grid,.company-team-grid) { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px; }
body[data-route="company"] :is(.company-gallery-grid,.company-team-grid) button { position:relative;min-width:0;padding:0;overflow:hidden;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:13px;text-align:left; }
body[data-route="company"] .company-gallery-grid button { aspect-ratio:1; }
body[data-route="company"] .company-gallery-grid img { width:100%;height:100%;display:block;object-fit:cover;transition:transform .25s ease; }
body[data-route="company"] .company-gallery-grid button:hover img { transform:scale(1.035); }
body[data-route="company"] .company-team-grid button { min-height:205px; }
body[data-route="company"] .company-team-grid img { width:100%;height:155px;display:block;object-fit:cover; }
body[data-route="company"] .company-team-grid button > span { padding:11px;display:block; }
body[data-route="company"] .company-team-grid b,body[data-route="company"] .company-team-grid small { display:block; }
body[data-route="company"] .company-team-grid b { font-size:12px; }
body[data-route="company"] .company-team-grid small { margin-top:3px;color:var(--text-faint);font-size:9px; }

body[data-route="company"] .company-page-modal { display:grid;place-items:center;padding:16px; }
body[data-route="company"] .company-page-modal > .modal-backdrop { background:rgba(12,10,7,.62);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px); }
body[data-route="company"] .company-page-modal > :not(.modal-backdrop) { position:relative;z-index:1;transform:translateY(10px) scale(.985);transition:transform .2s ease; }
body[data-route="company"] .company-page-modal.open > :not(.modal-backdrop) { transform:none; }
body[data-route="company"] .company-simple-dialog,body[data-route="company"] .company-admin-modal-dialog {
  width:min(680px,calc(100vw - 32px));
  max-height:min(820px,90dvh);
  color:var(--text);
  background:var(--surface-solid);
  border:1px solid var(--line-strong);
  border-radius:22px;
  box-shadow:0 30px 100px rgba(0,0,0,.35);
}
body[data-route="company"] .company-simple-dialog { overflow:hidden; }
body[data-route="company"] :is(.company-simple-dialog,.company-admin-modal-dialog) > header { min-height:82px;padding:22px 20px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;background:var(--surface-solid);border-bottom:1px solid var(--line); }
body[data-route="company"] :is(.company-simple-dialog,.company-admin-modal-dialog) > header h2 { margin:3px 0 0;font-size:25px;line-height:1.1; }
body[data-route="company"] :is(.company-simple-dialog,.company-admin-modal-dialog) > header h2 small { color:var(--text-faint);font:750 12px var(--font-body); }
body[data-route="company"] :is(.company-simple-dialog,.company-admin-modal-dialog) > header p { margin:6px 0 0;color:var(--text-faint);font-size:11px;line-height:1.45; }
body[data-route="company"] .company-page-modal .modal-close { flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:50%;font-size:17px; }

body[data-route="company"] .company-admin-modal-dialog { display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden; }
body[data-route="company"] .company-admin-modal-form { min-height:0;padding:0;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden; }
body[data-route="company"] .company-admin-modal-form > .company-admin-fields { min-height:0;padding:20px;display:grid;gap:14px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--gold) var(--gold-wash); }
body[data-route="company"] .company-contact-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
body[data-route="company"] :is(.company-contact-grid,.company-contact-message,.company-contact-upload) label,body[data-route="company"] :is(.company-contact-message,.company-contact-upload) { display:grid;gap:6px; }
body[data-route="company"] .company-contact-grid > label { align-content:start;grid-template-rows:auto 48px; }
body[data-route="company"] :is(.company-contact-grid label,.company-contact-message,.company-contact-upload) > span { color:var(--text-soft);font-size:11px;font-weight:800; }
body[data-route="company"] :is(.company-contact-grid input,.company-contact-grid select,.company-contact-message textarea,.company-share-row input,.company-modal-search) { color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:12px;outline:0; }
body[data-route="company"] :is(.company-contact-grid input,.company-contact-grid select,.company-share-row input) { width:100%;min-height:48px;padding:0 13px;font:650 13px var(--font-body); }
body[data-route="company"] .company-contact-message textarea { width:100%;min-height:130px;padding:12px;resize:vertical;font-size:13px;line-height:1.5; }
body[data-route="company"] .company-contact-message > span { width:max-content;max-width:100%;display:inline-flex;align-items:baseline;justify-content:flex-start;gap:3px; }
body[data-route="company"] :is(.company-contact-grid input,.company-contact-grid select,.company-contact-message textarea,.company-share-row input):focus { border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash); }
body[data-route="company"] .company-contact-grid small,body[data-route="company"] .company-contact-upload small { color:var(--text-faint);font-size:9px; }
body[data-route="company"] .required-mark { color:#d14343;font:850 12px var(--font-body); }
body[data-route="company"] .company-contact-phone { display:grid;grid-template-columns:64px minmax(0,1fr);align-items:stretch; }
body[data-route="company"] .company-contact-phone > b { display:grid;place-items:center;color:#211507;background:linear-gradient(135deg,var(--gold-bright),var(--gold));border:1px solid var(--gold-deep);border-right:0;border-radius:12px 0 0 12px;font-size:12px; }
body[data-route="company"] .company-contact-phone > input { border-radius:0 12px 12px 0; }
body[data-route="company"] .company-contact-vehicle { padding:15px;display:grid;gap:14px;background:linear-gradient(135deg,var(--gold-wash),var(--surface-2));border:1px solid var(--line);border-radius:16px; }
body[data-route="company"] .company-contact-vehicle[hidden] { display:none; }
body[data-route="company"] .company-contact-vehicle > header { display:flex;align-items:center;gap:11px; }
body[data-route="company"] .company-contact-vehicle > header > span { width:38px;height:38px;display:grid;flex:0 0 auto;place-items:center;color:var(--gold-deep);background:var(--surface-solid);border:1px solid var(--line);border-radius:12px; }
body[data-route="company"] .company-contact-vehicle > header strong,body[data-route="company"] .company-contact-vehicle > header small { display:block; }
body[data-route="company"] .company-contact-vehicle > header strong { font-size:12px; }
body[data-route="company"] .company-contact-vehicle > header small { margin-top:2px;color:var(--text-faint);font-size:9px; }
body[data-route="company"] .company-contact-upload { padding:14px;display:grid;gap:10px;background:var(--surface-2);border:1px dashed var(--line-strong);border-radius:15px; }
body[data-route="company"] .company-contact-upload[hidden] { display:none; }
body[data-route="company"] .company-contact-upload > span { display:flex;align-items:center;gap:7px;color:var(--text-soft);font-size:10px;font-weight:800; }
body[data-route="company"] .company-contact-upload > span > i { color:var(--gold-deep); }
body[data-route="company"] .company-contact-upload > span em { color:var(--text-faint);font-style:normal;font-weight:650; }
body[data-route="company"] .company-contact-file-input { position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important; }
body[data-route="company"] .company-contact-upload-picker { min-height:68px;padding:10px 11px;display:grid!important;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:11px;cursor:pointer;background:var(--surface-solid);border:1px solid var(--line);border-radius:13px;transition:border-color .18s ease,background .18s ease; }
body[data-route="company"] .company-contact-upload-picker:hover { background:var(--gold-wash);border-color:var(--gold); }
body[data-route="company"] .company-contact-upload-picker.is-dragover { background:var(--gold-wash);border-color:var(--gold-deep);box-shadow:0 0 0 3px var(--gold-wash); }
body[data-route="company"] .company-contact-upload-picker > i { width:38px;height:38px;display:grid;place-items:center;color:var(--gold-deep);background:var(--gold-wash);border-radius:11px;font-size:16px; }
body[data-route="company"] .company-contact-upload-picker span strong,body[data-route="company"] .company-contact-upload-picker span small { display:block; }
body[data-route="company"] .company-contact-upload-picker span strong { color:var(--text);font-size:11px; }
body[data-route="company"] .company-contact-upload-picker span small { margin-top:3px;font-size:9px; }
body[data-route="company"] .company-contact-upload-picker > b { min-height:34px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;color:var(--gold-deep);background:var(--gold-wash);border:1px solid var(--line);border-radius:10px;font-size:10px; }
body[data-route="company"] .company-contact-upload > small { display:flex;justify-content:space-between;gap:10px;line-height:1.45; }
body[data-route="company"] .company-contact-upload > small b { flex:0 0 auto;color:var(--gold-deep); }
body[data-route="company"] .company-upload-preview { display:flex;flex-wrap:wrap;gap:9px; }
body[data-route="company"] .company-upload-preview[hidden] { display:none; }
body[data-route="company"] .company-upload-item { position:relative;min-width:0;display:flex;align-items:center;gap:8px;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:12px; }
body[data-route="company"] .company-upload-item.image { width:76px;height:76px;overflow:hidden; }
body[data-route="company"] .company-upload-item.image img { width:100%;height:100%;object-fit:cover; }
body[data-route="company"] .company-upload-item.file { max-width:100%;min-height:48px;padding:8px 42px 8px 12px; }
body[data-route="company"] .company-upload-item.file > i { color:var(--gold-deep);font-size:18px; }
body[data-route="company"] .company-upload-item.file b { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px; }
body[data-route="company"] .company-upload-item button { position:absolute;top:5px;right:5px;width:27px;height:27px;display:grid;place-items:center;color:#fff;background:rgba(18,16,13,.76);border:1px solid rgba(255,255,255,.18);border-radius:50%; }
body[data-route="company"] .company-contact-consent { position:relative;min-height:48px;padding:11px 13px;display:grid;grid-template-columns:19px minmax(0,1fr);gap:10px;align-items:center;color:var(--text-soft);background:var(--surface-2);border:1px solid var(--line);border-radius:13px;font-size:10px;line-height:1.45;cursor:pointer; }
body[data-route="company"] .company-contact-consent input { position:absolute!important;width:1px!important;height:1px!important;min-width:1px!important;min-height:1px!important;max-width:1px!important;max-height:1px!important;margin:0!important;padding:0!important;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none; }
body[data-route="company"] .company-contact-check { box-sizing:border-box;width:19px;height:19px;min-width:19px;display:grid;place-items:center;justify-content:center;gap:0;color:transparent;background:var(--surface-solid);border:1px solid var(--line-strong);border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:.18s ease; }
body[data-route="company"] .company-contact-check i { display:block;font-size:10px;line-height:1; }
body[data-route="company"] .company-contact-consent > span:last-child { min-width:0;display:block; }
body[data-route="company"] :is(.company-contact-message,.company-contact-consent) .required-mark { display:inline;margin-left:2px; }
body[data-route="company"] .company-contact-consent input:checked + .company-contact-check { color:#211507;background:linear-gradient(135deg,var(--gold-bright),var(--gold));border-color:var(--gold-deep); }
body[data-route="company"] .company-contact-consent:has(input:focus-visible) { border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash); }
body[data-route="company"] .company-honeypot { position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important; }
body[data-route="company"] .company-form-status { min-height:0;color:var(--text-faint);font-size:10px;font-weight:750; }
body[data-route="company"] .company-form-status:not(:empty) { padding:11px 12px;background:var(--surface-2);border-radius:11px; }
body[data-route="company"] .company-form-status.success { color:var(--success);background:color-mix(in srgb,var(--success) 10%,transparent); }
body[data-route="company"] .company-form-status.error { color:var(--danger);background:color-mix(in srgb,var(--danger) 10%,transparent); }
body[data-route="company"] .company-admin-modal-form footer { margin:0;padding:10px 20px;display:flex;justify-content:flex-end;gap:9px;background:var(--surface-solid);border-top:1px solid var(--line); }
body[data-route="company"] .company-admin-modal-form footer button { min-height:42px;padding:0 16px;justify-content:center; }

body[data-route="company"] .company-share-row { padding:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px; }
body[data-route="company"] .company-share-row button { min-height:44px;padding:0 16px; }
body[data-route="company"] .company-modal-search { min-height:46px;margin:16px 20px 8px;padding:0 13px;display:flex;align-items:center;gap:9px; }
body[data-route="company"] .company-modal-search i { color:var(--text-faint); }
body[data-route="company"] .company-modal-search input { min-width:0;flex:1;color:var(--text);background:transparent;border:0;outline:0;font-size:11px; }
body[data-route="company"] .company-followers-dialog { width:min(560px,calc(100vw - 32px)); }
body[data-route="company"] .company-followers-list { max-height:min(570px,65dvh);padding:5px 20px 20px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gold) transparent; }
body[data-route="company"] .company-followers-list > a { min-height:65px;padding:8px;display:grid;grid-template-columns:48px minmax(0,1fr) 24px;gap:10px;align-items:center;color:var(--text);border-radius:13px;text-decoration:none; }
body[data-route="company"] .company-followers-list > a:hover { background:var(--gold-wash); }
body[data-route="company"] .company-followers-list img { width:48px;height:48px;object-fit:cover;border-radius:50%; }
body[data-route="company"] .company-followers-list b,body[data-route="company"] .company-followers-list small { display:block; }
body[data-route="company"] .company-followers-list b { font-size:12px; }
body[data-route="company"] .company-followers-list small { margin-top:3px;color:var(--text-faint);font-size:9px; }
body[data-route="company"] .company-followers-list > a > i { color:var(--text-faint);font-size:10px; }
body[data-route="company"] .company-team-dialog { width:min(620px,calc(100vw - 32px)); }
body[data-route="company"] .company-team-profile { padding:22px;display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;align-items:start; }
body[data-route="company"] .company-team-profile > img { width:190px;aspect-ratio:4/5;object-fit:cover;border-radius:16px; }
body[data-route="company"] .company-team-profile h2 { margin:3px 0;font-size:24px; }
body[data-route="company"] .company-team-profile strong { color:var(--gold-deep);font-size:11px; }
body[data-route="company"] .company-team-profile p { color:var(--text-soft);font-size:11px;line-height:1.6; }
body[data-route="company"] .company-team-profile a { display:block;margin-top:7px;color:var(--gold-deep);font-size:10px;font-weight:750; }
body[data-route="company"] .company-team-profile nav { margin-top:12px;display:flex;flex-wrap:wrap;gap:9px; }
body[data-route="company"] .company-event-actions { display:flex;align-items:center;justify-content:flex-end;gap:7px; }
body[data-route="company"] .company-event-actions .company-event-share { width:38px;min-width:38px;height:38px;padding:0;display:grid;place-items:center;border-radius:50%; }
body[data-route="company"] [data-company-event-id] { transition:border-color .2s ease,box-shadow .2s ease; }
body[data-route="company"] .company-event-highlight { border-color:var(--gold)!important;box-shadow:0 0 0 3px var(--gold-wash),var(--shadow)!important; }
body[data-route="company"] .company-latest-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
body[data-route="company"] .company-latest-grid > button { display:grid;grid-template-rows:132px auto;min-width:0;padding:0;overflow:hidden;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:18px;text-align:left;transition:transform .18s ease,border-color .18s ease; }
body[data-route="company"] .company-latest-grid > button:hover { transform:translateY(-2px);border-color:var(--gold); }
body[data-route="company"] .company-latest-grid img,body[data-route="company"] .company-latest-placeholder { display:grid;width:100%;height:132px;place-items:center;object-fit:cover;color:var(--gold-deep);background:linear-gradient(135deg,var(--surface-3),var(--surface-2));font-size:32px; }
body[data-route="company"] .company-latest-copy { display:grid;gap:5px;padding:13px 14px 15px; }
body[data-route="company"] .company-latest-copy small { color:var(--gold-deep);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em; }
body[data-route="company"] .company-latest-copy b { font-size:14px;line-height:1.25; }
body[data-route="company"] .company-latest-copy em { overflow:hidden;color:var(--text-faint);font-size:12px;font-style:normal;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; }

body[data-route="company"] .company-media-modal { display:grid;place-items:center;padding:18px; }
body[data-route="company"] .company-media-backdrop { position:absolute;inset:0;width:100%;height:100%;background:rgba(2,2,2,.9);backdrop-filter:blur(10px); }
body[data-route="company"] .company-media-modal > section { position:relative;z-index:1;width:min(1240px,calc(100vw - 36px));height:min(860px,calc(100dvh - 36px));display:grid;place-items:center; }
body[data-route="company"] .company-media-modal figure { width:100%;height:100%;margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;overflow:hidden; }
body[data-route="company"] .company-media-modal figure img { max-width:100%;max-height:100%;object-fit:contain;border-radius:16px; }
body[data-route="company"] .company-media-modal figcaption { min-width:min(540px,80vw);max-width:80vw;margin-top:10px;padding:10px 14px;color:#fff;background:rgba(20,20,18,.75);border:1px solid rgba(255,255,255,.14);border-radius:12px;text-align:center;backdrop-filter:blur(8px); }
body[data-route="company"] .company-media-modal figcaption b,body[data-route="company"] .company-media-modal figcaption span { display:block; }
body[data-route="company"] .company-media-modal figcaption b { font-size:12px; }
body[data-route="company"] .company-media-modal figcaption span { margin-top:3px;color:rgba(255,255,255,.68);font-size:10px; }
body[data-route="company"] :is(.company-media-close,.company-media-nav) { position:absolute;z-index:2;width:46px;height:46px;display:grid;place-items:center;color:#fff;background:rgba(24,24,22,.72);border:1px solid rgba(255,255,255,.2);border-radius:50%;backdrop-filter:blur(8px); }
body[data-route="company"] .company-media-close { top:0;right:0; }
body[data-route="company"] .company-media-nav { top:50%;transform:translateY(-50%);font-size:17px; }
body[data-route="company"] .company-media-nav.prev { left:0; }
body[data-route="company"] .company-media-nav.next { right:0; }
body[data-route="company"] .company-media-nav:disabled { display:none; }

@media (max-width:700px) {
  body[data-route="company"] .company-quick :is(button,a) { min-height:61px;padding:7px 3px;flex-direction:column;gap:5px;border-radius:12px;font-size:9px; }
  body[data-route="company"] :is(.company-gallery-grid,.company-team-grid) { grid-template-columns:repeat(2,minmax(0,1fr));gap:5px; }
  body[data-route="company"] .company-team-grid button { min-height:180px; }
  body[data-route="company"] .company-team-grid img { height:132px; }
  body[data-route="company"] .company-page-modal { place-items:end center;padding:0; }
  body[data-route="company"] .company-simple-dialog,body[data-route="company"] .company-admin-modal-dialog { width:100%;max-height:92dvh;border-left:0;border-right:0;border-bottom:0;border-radius:22px 22px 0 0; }
  body[data-route="company"] :is(.company-simple-dialog,.company-admin-modal-dialog) > header { min-height:72px;padding:18px 16px 15px; }
  body[data-route="company"] :is(.company-simple-dialog,.company-admin-modal-dialog) > header h2 { font-size:21px; }
  body[data-route="company"] .company-contact-grid { grid-template-columns:1fr;gap:11px; }
  body[data-route="company"] .company-upload-item.image { width:66px;height:66px; }
  body[data-route="company"] .company-admin-modal-form > .company-admin-fields { padding:15px; }
  body[data-route="company"] .company-admin-modal-form footer { display:grid;grid-template-columns:1fr 1.35fr;padding:10px 15px calc(10px + env(safe-area-inset-bottom)); }
  body[data-route="company"] .company-share-row { grid-template-columns:1fr;padding:16px; }
  body[data-route="company"] .company-share-row button { justify-content:center; }
  body[data-route="company"] .company-modal-search { margin:13px 15px 7px; }
  body[data-route="company"] .company-followers-list { padding:4px 15px calc(15px + env(safe-area-inset-bottom)); }
  body[data-route="company"] .company-team-profile { grid-template-columns:1fr;padding:17px;text-align:center; }
  body[data-route="company"] .company-team-profile > img { width:min(210px,62vw);margin:auto; }
  body[data-route="company"] .company-team-profile nav { justify-content:center; }
  body[data-route="company"] .company-media-modal { inset:var(--su-visual-viewport-top,0) 0 auto;height:var(--su-visual-viewport-height,100dvh);padding:0; }
  body[data-route="company"] .company-media-modal > section { width:100%;height:100%; }
  body[data-route="company"] .company-media-modal figure { padding:58px 0 15px; }
  body[data-route="company"] .company-media-modal figure img { max-width:100%;border-radius:0; }
  body[data-route="company"] .company-media-modal figcaption { max-width:calc(100vw - 24px);min-width:0;margin:8px 12px 0; }
  body[data-route="company"] .company-media-close { top:12px;right:12px; }
  body[data-route="company"] .company-media-nav { width:42px;height:42px; }
  body[data-route="company"] .company-media-nav.prev { left:8px; }
  body[data-route="company"] .company-media-nav.next { right:8px; }
  body[data-route="company"] .company-latest-grid { grid-template-columns:1fr 1fr;gap:9px; }
  body[data-route="company"] .company-latest-grid > button { grid-template-rows:104px auto;border-radius:14px; }
  body[data-route="company"] .company-latest-grid img,body[data-route="company"] .company-latest-placeholder { height:104px; }
  body[data-route="company"] .company-latest-copy { padding:10px; }
  body[data-route="company"] .company-latest-copy em { display:none; }
}

/* ================================================================
   Mobile ShineChat — dedicated contacts and conversation screens
   These views intentionally do not reuse the desktop messenger grid.
   ================================================================ */
.m-messenger-contacts-page,
.m-messenger-chat-page {
  min-width: 0;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.m-messenger-contacts-page *,
.m-messenger-chat-page * {
  box-sizing: border-box;
}

.m-messenger-contacts-page button,
.m-messenger-chat-page button,
.m-messenger-contacts-page a,
.m-messenger-chat-page a {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none !important;
}

.m-messenger-contacts-page button:focus,
.m-messenger-chat-page button:focus,
.m-messenger-contacts-page a:focus,
.m-messenger-chat-page a:focus,
.m-messenger-contacts-page input:focus,
.m-messenger-chat-page input:focus,
.m-messenger-chat-page textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

.m-messenger-app,
.m-chat-app {
  width: 100%;
  max-width: 520px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
}

.m-messenger-contacts-page .m-friends-layer {
  z-index: 1700;
}

.m-messenger-appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 76px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(18px);
}

.m-appbar-button,
.m-appbar-actions > a,
.m-appbar-actions > button,
.m-compose-button,
.m-chat-back,
.m-chat-header-actions button,
.m-drawer header button,
.m-friends-sheet header button,
.m-chat-details > header button,
.m-details-media-view > header button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

.m-appbar-logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  border: 0 !important;
}

.m-appbar-logo img {
  display: block;
  width: 144px;
  max-height: 46px;
  object-fit: contain;
}

.m-appbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.m-appbar-actions > a {
  position: relative;
}

.m-appbar-actions .badge,
.m-appbar-actions [class*="badge"] {
  position: absolute;
  top: -4px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.m-appbar-avatar {
  width: 42px !important;
  height: 42px !important;
  padding: 3px !important;
  border: 2px solid var(--gold) !important;
  border-radius: 50% !important;
  background: var(--surface) !important;
}

.m-appbar-avatar img,
.m-contact-avatar img,
.m-chat-avatar img,
.m-message-avatar img,
.m-friends-sheet img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.m-contacts-main {
  height: 100%;
  min-height: 0;
  padding: 22px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.m-contacts-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.m-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--gold-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.2;
}

.m-contacts-heading h1,
.m-chat-details h2,
.m-friends-sheet h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 8vw, 38px);
  font-weight: 750;
  letter-spacing: -.04em;
  line-height: 1.05;
}

.m-contacts-heading p {
  max-width: 330px;
  margin: 7px 0 0;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.45;
}

.m-compose-button {
  width: 48px;
  height: 48px;
  border-color: color-mix(in srgb, var(--gold) 44%, var(--line));
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #211708;
}

.m-contacts-search,
.m-friends-sheet > label,
.m-emoji-picker > label {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface-2);
  color: var(--text-soft);
}

.m-contacts-search {
  width: auto;
  margin-inline: 16px;
}

.m-contacts-search input,
.m-friends-sheet input,
.m-emoji-picker input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 15px;
}

.m-contacts-search input::placeholder,
.m-friends-sheet input::placeholder,
.m-emoji-picker input::placeholder,
.m-chat-composer textarea::placeholder {
  color: var(--text-faint);
}

.m-contacts-tabs {
  display: flex;
  gap: 7px;
  margin: 14px 16px 12px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface-2);
  scrollbar-width: none;
}

.m-contacts-tabs::-webkit-scrollbar { display: none; }

.m-contacts-tabs button {
  flex: 1 0 auto;
  min-height: 39px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}

.m-contacts-tabs button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 5px 18px rgba(56, 38, 12, .08);
}

.m-contacts-tabs b {
  display: inline-grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  margin-left: 4px;
  border-radius: 999px;
  background: var(--gold);
  color: #211708;
  font-size: 11px;
}

.m-contact-list {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: 0 8px 30px rgba(70, 46, 9, .04);
}

.m-contact-row {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.m-contact-row:last-child { border-bottom: 0; }
.m-contact-row[hidden] { display: none !important; }
.m-contact-row.unread { background: var(--gold-wash); }

.m-contact-avatar,
.m-chat-avatar,
.m-message-avatar {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
}

.m-contact-avatar.online::after,
.m-chat-avatar.online::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--success);
}

.m-contact-copy {
  min-width: 0;
}

.m-contact-copy strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-contact-copy strong .fa-circle-check { margin-left:3px; color:var(--gold); font-size:12px; vertical-align:-.04em; }

.m-contact-copy span {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.m-contact-meta {
  display: flex;
  min-width: 44px;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  color: var(--text-faint);
  font-size: 11px;
}

.m-contact-meta b {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--gold);
  color: #211708;
  font-size: 11px;
}

.m-contact-empty {
  padding: 42px 18px;
  text-align: center;
  color: var(--text-soft);
}

.m-bottom-nav {
  position: fixed;
  z-index: 45;
  right: max(0px, calc((100vw - 520px) / 2));
  bottom: 0;
  left: max(0px, calc((100vw - 520px) / 2));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  min-height: 76px;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(18px);
}

.m-bottom-nav a {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 55px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
}

.m-bottom-nav a i { font-size: 18px; }
.m-bottom-nav a.active { color: var(--gold-deep); }
.m-bottom-create i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -20px;
  border: 4px solid var(--surface);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #211708;
  box-shadow: 0 7px 22px rgba(142, 91, 11, .25);
}

.m-drawer,
.m-friends-layer,
.m-confirm-layer {
  position: fixed;
  z-index: 100;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility .2s ease;
}

.m-drawer.open,
.m-friends-layer.open,
.m-confirm-layer.open {
  visibility: visible;
  opacity: 1;
}

.m-drawer-backdrop,
.m-sheet-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(19, 15, 10, .46);
  backdrop-filter: blur(3px);
}

.m-drawer > section {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  max-width: 520px;
  flex-direction: column;
  gap: 5px;
  padding: 20px 22px;
  overflow-y: auto;
  background: var(--surface);
  transform: translateX(-102%);
  transition: transform .25s ease;
}

.m-drawer.open > section { transform: translateX(0); }

.m-drawer header,
.m-friends-sheet header,
.m-chat-details > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.m-drawer header {
  margin-bottom: 14px;
  color: var(--gold-deep);
  font-size: 18px;
  letter-spacing: .06em;
}

.m-drawer a,
.m-drawer [data-theme-control] {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 53px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: 650;
  text-align: left;
}

.m-drawer a i,
.m-drawer [data-theme-control] i {
  width: 22px;
  color: var(--gold-deep);
  text-align: center;
}

.m-friends-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: min(100%, 520px);
  max-height: min(82dvh, 720px);
  margin: auto;
  padding: 20px 18px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  border-radius: 26px 26px 0 0;
  background: var(--surface);
  box-shadow: 0 -22px 65px rgba(20, 14, 6, .22);
  transform: translateY(105%);
  transition: transform .25s ease;
}

.m-friends-layer.open .m-friends-sheet { transform: translateY(0); }
.m-friends-sheet > label { margin: 18px 0 10px; }

.m-friends-sheet > div:last-child {
  display: grid;
  gap: 3px;
}

.m-friends-sheet > div:last-child a {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 9px 6px;
  color: var(--text);
}

.m-friends-sheet img { width: 48px; height: 48px; }
.m-friends-sheet span { min-width: 0; }
.m-friends-sheet b { display: block; font-size: 14px; }
.m-friends-sheet small { display: block; overflow: hidden; color: var(--text-soft); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* Dedicated mobile conversation */
.m-messenger-chat-page {
  overscroll-behavior: none;
}

.m-chat-app {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}

.m-chat-header {
  position: relative;
  z-index: 30;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 72px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.m-chat-back { width: 40px; height: 40px; }

.m-chat-person {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin: -4px 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background-color .18s ease;
}

.m-chat-person:hover,
.m-chat-person:active { background: var(--gold-wash); }

.m-chat-person .m-chat-avatar { width: 44px; height: 44px; }
.m-chat-person > span:last-child { min-width: 0; }
.m-chat-person strong { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.m-chat-person small { display: block; margin-top: 2px; color: var(--success); font-size: 11px; font-weight: 650; }

.m-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.m-chat-header-actions button {
  width: 36px;
  height: 36px;
  border-color: transparent;
  background: transparent;
  font-size: 16px;
}

.m-chat-header-actions .m-chat-info-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(70, 46, 9, .06);
}

.m-chat-header-actions .m-chat-account-button {
  display: inline-grid;
  width: 40px;
  height: 40px;
  padding: 2px;
  border: 0;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
}

.m-chat-account-button img {
  width: 100%;
  height: 100%;
  border: 2px solid var(--surface-solid);
  border-radius: 50%;
  object-fit: cover;
}

.m-chat-thread {
  min-height: 0;
  padding: 18px 14px 20px;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 12% 10%, color-mix(in srgb, var(--gold-wash) 52%, transparent), transparent 32%),
    var(--surface);
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--gold) 56%, transparent) transparent;
  scrollbar-width: thin;
}

.m-chat-profile-intro {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 20px 10px 30px;
  text-align: center;
}

.m-chat-profile-intro .m-chat-avatar { width: 78px; height: 78px; }
.m-chat-profile-intro h1 { margin: 12px 0 2px; font-size: 21px; font-weight: 760; }
.m-chat-profile-intro p { margin: 0; color: var(--text-soft); font-size: 13px; }

.m-chat-date {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.m-chat-date::before,
.m-chat-date::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.m-message {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  margin: 8px 0;
}

.m-message.incoming { justify-content: flex-start; }
.m-message.outgoing { justify-content: flex-end; }
.m-message-avatar { width: 30px; height: 30px; margin-bottom: 4px; }

.m-message-content {
  display: flex;
  max-width: min(78%, 390px);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}

.m-message.outgoing .m-message-content {
  width: min(90%, 425px);
  max-width: none;
  align-items: flex-end;
}

.m-message-outgoing-row {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}

.m-message-outgoing-row .m-message-bubble {
  max-width: calc(100% - 35px);
}

.m-message-bubble {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 5px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  line-height: 1.42;
  word-break: break-word;
}

.m-message.outgoing .m-message-bubble {
  border-color: color-mix(in srgb, var(--gold-deep) 24%, transparent);
  border-radius: 18px 18px 5px 18px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #211708;
}

.m-message-content time {
  margin: 4px 5px 0;
  color: var(--text-faint);
  font-size: 10px;
}

.m-message-delete {
  display: grid;
  place-items: center;
  align-self: flex-end;
  width: 27px;
  height: 27px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--danger) 12%, var(--surface));
  color: var(--danger);
  font-size: 12px;
  opacity: .72;
}

.m-message.deleted .m-message-bubble {
  border-style: dashed;
  background: transparent;
  color: var(--text-faint);
  font-style: italic;
}

.m-message-media {
  display: block;
  width: min(74%, 320px);
  margin: 12px 0 16px 38px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
  color: var(--text);
  text-align: left;
}

.m-message-media > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 17px 17px 0 0;
  object-fit: cover;
}

.m-message-media > span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px 11px;
}

.m-message-media b { font-size: 13px; font-weight: 650; }
.m-message-media b i { margin-right: 6px; color: var(--gold-deep); }
.m-message-media time { color: var(--text-faint); font-size: 10px; }

.m-chat-composer {
  position: relative;
  z-index: 35;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.m-composer-field {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 34px;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  padding: 0 6px 0 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}

.m-chat-composer button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  font-size: 17px;
}

.m-chat-composer textarea {
  width: 100%;
  min-height: 46px;
  max-height: 116px;
  padding: 12px 6px;
  resize: none;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
}

.m-chat-composer .m-composer-send {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #211708;
  box-shadow: 0 5px 16px rgba(142, 91, 11, .22);
}

.m-chat-details {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(100%, 520px);
  overflow: hidden;
  border-left: 1px solid var(--line);
  background: var(--surface);
  box-shadow: -22px 0 65px rgba(20, 14, 6, .2);
  transform: translateX(102%);
  transition: transform .26s ease;
}

.m-chat-details.open { transform: translateX(0); }
.m-chat-details > header {
  min-height: 76px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.m-chat-details > header h2 { font-size: 26px; }
.m-details-scroll,
.m-details-media-view {
  height: calc(100dvh - 76px);
  overflow-y: auto;
}

.m-details-person {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 26px 18px 22px;
  text-align: center;
}

.m-details-person .m-chat-avatar { width: 88px; height: 88px; }
.m-details-person h3 { margin: 12px 0 2px; font-size: 21px; }
.m-details-person p { margin: 0; color: var(--text-soft); font-size: 13px; }
.m-details-person a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  margin-top: 14px;
  padding: 0 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #211708;
  font-size: 13px;
  font-weight: 750;
}

.m-details-section {
  padding: 19px 18px;
  border-top: 1px solid var(--line);
}

.m-details-section h3,
.m-details-media-view h3,
.m-details-media-view h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 750;
}

.m-details-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 12px;
}

.m-details-actions button {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
}

.m-details-actions i { color: var(--gold-deep); font-size: 20px; }
.m-details-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.m-details-title button { border: 0; background: transparent; color: var(--gold-deep); font-size: 12px; font-weight: 750; }

.m-shared-media,
.m-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin-top: 12px;
}

.m-shared-media button,
.m-media-grid button {
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
}

.m-shared-media img,
.m-media-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.m-details-links { border-top: 1px solid var(--line); }
.m-details-links button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 55px;
  padding: 0 20px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-size: 14px;
  text-align: left;
}

.m-details-links button > i:first-child { color: var(--gold-deep); text-align: center; }
.m-details-links button > i:last-child { color: var(--text-faint); }
.m-details-links .danger { color: var(--danger); }

.m-details-media-view > header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.m-details-media-tabs {
  display: flex;
  gap: 24px;
  padding: 12px 18px 0;
}

.m-details-media-tabs button {
  padding: 8px 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 700;
}

.m-details-media-tabs button.active { border-color: var(--gold); color: var(--gold-deep); }
.m-details-media-view h4 { padding: 18px 18px 0; }
.m-details-media-view .m-media-grid { padding: 0 18px 24px; }

.m-emoji-picker {
  position: fixed;
  z-index: 110;
  right: max(10px, calc((100vw - 500px) / 2));
  bottom: calc(70px + env(safe-area-inset-bottom));
  left: max(10px, calc((100vw - 500px) / 2));
  max-height: min(54dvh, 430px);
  padding: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 18px 55px rgba(20, 14, 6, .26);
}

.m-emoji-picker[hidden] { display: none !important; }
.m-emoji-list {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-height: min(39dvh, 310px);
  margin-top: 0;
  overflow-y: auto;
  scrollbar-color: color-mix(in srgb, var(--gold) 52%, transparent) transparent;
  scrollbar-width: thin;
}

.m-emoji-list button {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 25px;
}

.m-confirm-layer {
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 16, 10, .52);
  backdrop-filter: blur(4px);
}

.m-confirm-layer > section {
  width: min(100%, 390px);
  padding: 22px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 15px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(20, 14, 6, .3);
}

.m-confirm-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 11%, var(--surface-2));
  border-radius: 14px;
  font-size: 19px;
}
.m-confirm-copy { min-width: 0; }
.m-confirm-eyebrow {
  display: block;
  margin: 1px 0 7px;
  color: var(--gold-deep);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .16em;
}
.m-confirm-layer h2 { margin: 0 0 8px; font-size: 22px; }
.m-confirm-layer p { margin: 0; color: var(--text-soft); font-size: 14px; line-height: 1.45; }
.m-confirm-layer footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; margin-top: 5px; }
.m-confirm-layer footer button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 750;
}
.m-confirm-layer footer .danger { border-color: var(--danger); background: var(--danger); color: #fff; }
.m-confirm-layer.is-unblock .m-confirm-icon { color:var(--gold-deep); background:var(--gold-wash); }
.m-confirm-layer.is-unblock footer .danger { color:#211507; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:var(--gold); }

.m-chat-composer.is-blocked .m-composer-field {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--line));
  background: color-mix(in srgb, var(--danger) 13%, var(--surface-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 8%, transparent);
}
.m-chat-composer.is-blocked textarea:disabled {
  color: var(--danger);
  opacity: 1;
  -webkit-text-fill-color: var(--danger);
}
.m-chat-composer.is-blocked textarea:disabled::placeholder {
  color: var(--danger);
  opacity: 1;
}
.m-chat-composer.is-blocked button:disabled {
  cursor: not-allowed;
  opacity: .42;
}
.m-chat-composer.is-blocked .m-composer-send:disabled {
  color: color-mix(in srgb, var(--danger) 72%, #211708);
  background: color-mix(in srgb, var(--danger) 17%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
  box-shadow: none;
}

html[data-theme="dark"] .m-messenger-appbar,
html[data-theme="dark"] .m-bottom-nav,
html[data-theme="dark"] .m-chat-header,
html[data-theme="dark"] .m-chat-composer,
html[data-theme="dark"] .m-chat-details,
html[data-theme="dark"] .m-friends-sheet,
html[data-theme="dark"] .m-drawer > section {
  background: color-mix(in srgb, var(--surface) 96%, #000);
}

html[data-theme="dark"] .m-message.outgoing .m-message-bubble,
html[data-theme="dark"] .m-compose-button,
html[data-theme="dark"] .m-composer-send,
html[data-theme="dark"] .m-details-person a,
html[data-theme="dark"] .m-bottom-create i {
  color: #171006;
}

@media (min-width: 521px) {
  .m-messenger-contacts-page,
  .m-messenger-chat-page {
    padding: 18px 0;
    background: color-mix(in srgb, var(--bg) 82%, #2b2925);
  }

  .m-messenger-app,
  .m-chat-app {
    min-height: calc(100dvh - 36px);
    border: 1px solid var(--line);
    box-shadow: 0 25px 70px rgba(20, 14, 6, .22);
  }

  .m-chat-app { height: calc(100dvh - 36px); }
  .m-bottom-nav { bottom: 18px; }
  .m-drawer > section { top: 18px; bottom: 18px; left: calc((100vw - 520px) / 2); height: auto; }
}

@media (max-width: 389.98px) {
  .m-messenger-appbar { grid-template-columns: 42px minmax(0, 1fr) auto; padding-inline: 10px; }
  .m-appbar-logo img { width: 124px; }
  .m-appbar-actions { gap: 5px; }
  .m-appbar-actions > a,
  .m-appbar-actions > button,
  .m-appbar-avatar { width: 38px !important; height: 38px !important; }
  .m-contacts-search { margin-inline: 11px; }
  .m-contacts-tabs { margin-inline: 11px; }
  .m-chat-composer { grid-template-columns: minmax(0, 1fr) 44px; gap: 7px; padding-inline: 8px; }
  .m-composer-field { grid-template-columns: 34px minmax(0, 1fr) 30px; padding-right: 4px; }
  .m-chat-composer .m-composer-send { width: 44px; height: 44px; }
  .m-emoji-list { grid-template-columns: repeat(7, 1fr); }
}

/* Panel firmy: lista przyjętych aut i pełna karta klienta. */
.company-intake-view { display:none; }
.company-intake-view.active { display:block; }
.company-intake-summary {
  margin-bottom:14px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.company-intake-summary article {
  min-height:88px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:14px;
}
.company-intake-summary article > i {
  flex:0 0 46px;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  color:var(--gold-deep);
  background:var(--gold-wash);
  border:1px solid var(--line);
  border-radius:14px;
  font-size:17px;
}
.company-intake-summary small,
.company-intake-summary strong { display:block; }
.company-intake-summary small { margin-bottom:4px; color:var(--text-faint); font-size:10px; font-weight:700; }
.company-intake-summary strong { color:var(--text); font-size:17px; }
.company-intake-list { display:grid; gap:10px; }
.company-intake-row {
  min-height:116px;
  padding:12px;
  display:grid;
  grid-template-columns:126px minmax(220px,1fr) minmax(165px,.62fr) minmax(155px,.55fr) auto;
  align-items:center;
  gap:16px;
}
.company-intake-row > img {
  width:126px;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:14px;
}
.company-intake-row-main,
.company-intake-client,
.company-intake-date { min-width:0; }
.company-intake-row-main h3 { margin:4px 0 5px; color:var(--text); font-size:16px; line-height:1.2; }
.company-intake-row-main p { margin:0; color:var(--text-faint); font-size:10px; }
.company-intake-client small,
.company-intake-client strong,
.company-intake-client a,
.company-intake-date small,
.company-intake-date strong { display:block; }
.company-intake-client small,
.company-intake-date small { margin-bottom:4px; color:var(--text-faint); font-size:9px; font-weight:700; }
.company-intake-client strong,
.company-intake-date strong { overflow:hidden; color:var(--text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.company-intake-client a { margin-top:6px; color:var(--gold-deep); font-size:10px; font-weight:750; }
.company-intake-date .status-pill { margin-top:7px; }
.company-intake-row .content-row-actions { justify-content:flex-end; }
.company-intake-back {
  min-height:34px;
  margin:0 0 11px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--gold-deep);
  background:var(--gold-wash);
  border:1px solid var(--line);
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}
.company-invoice-toggle { width:max-content; max-width:100%; margin-top:16px; }
.company-invoice-fields { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.company-invoice-fields[hidden] { display:none !important; }

@media (max-width: 1180px) and (min-width: 701px) {
  .company-intake-row { grid-template-columns:112px minmax(190px,1fr) minmax(150px,.7fr) auto; }
  .company-intake-row > img { width:112px; }
  .company-intake-date { grid-column:2 / 3; }
  .company-intake-row .content-row-actions { grid-column:3 / -1; }
}

@media (max-width: 700px) {
  .company-intake-summary { margin:0 10px 8px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .company-intake-summary article { min-height:82px; padding:13px; border-radius:15px; }
  .company-intake-summary article:last-child { grid-column:1 / -1; }
  .company-intake-summary article > i { flex-basis:40px; width:40px; height:40px; border-radius:12px; }
  .company-intake-summary small { font-size:9px; }
  .company-intake-summary strong { font-size:15px; }
  .company-intake-list { gap:8px; }
  .company-intake-row {
    min-height:0;
    padding:13px 14px;
    grid-template-columns:96px minmax(0,1fr);
    align-items:start;
    gap:9px 11px;
    border-left:0;
    border-right:0;
    border-radius:0;
    box-shadow:none;
  }
  .company-intake-row > img { width:96px; border-radius:12px; }
  .company-intake-row-main h3 { font-size:14px; }
  .company-intake-row-main p { font-size:9px; line-height:1.4; }
  .company-intake-client,
  .company-intake-date { grid-column:2; }
  .company-intake-client strong,
  .company-intake-date strong { font-size:12px; }
  .company-intake-row .content-row-actions { grid-column:1 / -1; }
  .company-intake-row .content-row-actions button { width:100%; min-height:40px; justify-content:center; }
  .company-intake-back { min-height:36px; margin-bottom:12px; font-size:11px; }
  .company-invoice-toggle { width:100%; margin-top:14px; }
  .company-invoice-fields { margin-top:12px; padding-top:12px; }
}

/* Bazodanowy feed: zachowanie aktualnego interfejsu dla treści doładowywanych AJAX-em. */
body[data-route="feed"] .feed-live-root { min-width:0; }

body[data-page="feed-tags"] .feed-tag-page-intro {
  align-items:center;
}
body[data-page="feed-tags"] .feed-tag-page-intro > div:first-child {
  min-width:0;
}
body[data-page="feed-tags"] .feed-tag-page-intro h1 {
  max-width:720px;
  overflow-wrap:anywhere;
}
body[data-page="feed-tags"] .feed-tag-back {
  width:max-content;
  margin:0 0 13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text-soft);
  font-size:11px;
  font-weight:800;
}
body[data-page="feed-tags"] .feed-tag-back:hover {
  color:var(--gold-deep);
}
body[data-page="feed-tags"] .feed-tag-count {
  min-height:42px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex:0 0 auto;
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:14px;
  font-size:11px;
  font-weight:800;
}
body[data-page="feed-tags"] .feed-tag-count i {
  color:var(--gold-deep);
}

@media (max-width:700px) {
  body[data-page="user-profile"] .profile-avatar {
    margin-right:auto;
    margin-left:auto;
  }
  body[data-page="feed-tags"] .feed-tag-page-intro {
    padding-top:14px;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:10px;
  }
  body[data-page="feed-tags"] .feed-tag-page-intro > div:first-child {
    flex:1 1 230px;
  }
  body[data-page="feed-tags"] .feed-tag-page-intro h1 {
    font-size:30px;
    line-height:1.02;
  }
  body[data-page="feed-tags"] .feed-tag-back {
    margin-bottom:10px;
  }
  body[data-page="feed-tags"] .feed-tag-count {
    min-height:36px;
    padding:0 11px;
    border-radius:11px;
    font-size:10px;
  }
}
body[data-route="feed"] .stories-head a { color:var(--gold-deep); font-size:9px; font-weight:800; }
body[data-route="feed"] .composer-trigger {
  display:flex;
  align-items:center;
  text-decoration:none;
}
body[data-route="feed"] .composer-actions a {
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-soft);
  border-right:1px solid var(--line);
  font-size:9px;
  font-weight:750;
  text-decoration:none;
}
body[data-route="feed"] .composer-actions a:last-child { border-right:0; }
body[data-route="feed"] .post-head > a:first-child {
  width:44px;
  min-width:44px;
  height:44px;
  padding:0;
  display:block;
  align-self:center;
  justify-self:start;
  overflow:hidden;
  border-radius:50%;
}
body[data-route="feed"] .post-author,
body[data-route="feed"] .full-comment-bubble a,
body[data-route="feed"] .connection-person a,
body[data-route="feed"] .suggest a { color:inherit; text-decoration:none; }
body[data-route="feed"] .feed-youtube-embed {
  position:relative;
  isolation:isolate;
  background:#050505;
}
body[data-route="feed"] .feed-youtube-embed.is-short { aspect-ratio:4 / 5; }
body[data-route="feed"] .feed-youtube-embed.is-video,
body[data-route="feed"] .feed-youtube-embed.is-video.landscape { aspect-ratio:16 / 9; }
body[data-route="feed"] .feed-youtube-thumb,
body[data-route="feed"] .feed-youtube-host,
body[data-route="feed"] .feed-youtube-host iframe {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
body[data-route="feed"] .feed-youtube-thumb {
  z-index:2;
  object-fit:cover;
  opacity:1;
  visibility:visible;
  transition:opacity .2s ease,visibility .2s ease;
}
body[data-route="feed"] .feed-youtube-host { z-index:1; pointer-events:none; }
body[data-route="feed"] .feed-youtube-embed.is-playing .feed-youtube-thumb { opacity:0; visibility:hidden; }
body[data-route="feed"] .feed-youtube-play {
  position:absolute;
  left:50%;
  top:50%;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  color:#201505;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  border-radius:50%;
  box-shadow:0 12px 32px rgba(0,0,0,.3);
  transform:translate(-50%,-50%);
  z-index:4;
  transition:opacity .18s ease,transform .18s ease;
}
body[data-route="feed"] .feed-youtube-play i.fa-play { margin-left:3px; }
body[data-route="feed"] .feed-youtube-embed.is-playing .feed-youtube-play { opacity:0; }
body[data-route="feed"] .feed-youtube-embed.is-playing.is-controls-visible .feed-youtube-play,
body[data-route="feed"] .feed-youtube-embed .feed-youtube-play:focus-visible { opacity:1; }
body[data-route="feed"] .feed-youtube-sound {
  position:absolute;
  left:12px;
  top:12px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:#fff;
  background:rgba(8,8,8,.68);
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  box-shadow:0 7px 18px rgba(0,0,0,.22);
  backdrop-filter:blur(10px);
  z-index:5;
}
body[data-route="feed"] .feed-youtube-progress {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:20px;
  overflow:visible;
  background:transparent;
  cursor:pointer;
  touch-action:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  z-index:6;
}
body[data-route="feed"] .feed-youtube-progress::before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:4px;
  background:rgba(255,255,255,.3);
}
body[data-route="feed"] .feed-youtube-progress span {
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:4px;
  display:block;
  background:var(--gold);
  transition:width .08s linear;
  pointer-events:none;
}
body[data-route="feed"] .feed-youtube-progress span::after {
  content:"";
  position:absolute;
  top:50%;
  right:0;
  width:12px;
  height:12px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 2px 8px rgba(0,0,0,.38);
  opacity:0;
  transform:translate(50%,-50%) scale(.72);
  transition:opacity .16s ease,transform .16s ease;
}
body[data-route="feed"] .feed-youtube-progress:hover::before,
body[data-route="feed"] .feed-youtube-progress:focus-visible::before,
body[data-route="feed"] .feed-youtube-progress.is-seeking::before,
body[data-route="feed"] .feed-youtube-progress:hover span,
body[data-route="feed"] .feed-youtube-progress:focus-visible span,
body[data-route="feed"] .feed-youtube-progress.is-seeking span {
  height:6px;
}
body[data-route="feed"] .feed-youtube-progress:hover span::after,
body[data-route="feed"] .feed-youtube-progress:focus-visible span::after,
body[data-route="feed"] .feed-youtube-progress.is-seeking span::after {
  opacity:1;
  transform:translate(50%,-50%) scale(1);
}
body[data-route="feed"] .feed-youtube-progress:focus-visible {
  outline:2px solid var(--gold-bright);
  outline-offset:-2px;
}
:is(body[data-route="feed"],body[data-route="posts"]) .feed-live-empty { padding:32px 18px; color:var(--text-faint); text-align:center; font-size:12px; }
:is(body[data-route="feed"],body[data-route="posts"]) .feed-live-loader {
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--text-faint);
}
:is(body[data-route="feed"],body[data-route="posts"]) .feed-live-loader[hidden] { display:none; }
:is(body[data-route="feed"],body[data-route="posts"]) .feed-live-loader span,
:is(body[data-route="feed"],body[data-route="posts"]) .watch-modal-loading span { width:7px; height:7px; background:var(--gold-deep); border-radius:50%; animation:watch-data-loading .9s ease-in-out infinite; }
:is(body[data-route="feed"],body[data-route="posts"]) .feed-live-loader span:nth-child(2),
:is(body[data-route="feed"],body[data-route="posts"]) .watch-modal-loading span:nth-child(2) { animation-delay:.12s; }
:is(body[data-route="feed"],body[data-route="posts"]) .feed-live-loader span:nth-child(3),
:is(body[data-route="feed"],body[data-route="posts"]) .watch-modal-loading span:nth-child(3) { animation-delay:.24s; }
:is(body[data-route="feed"],body[data-route="posts"]) .feed-live-loader p { margin:0 0 0 6px; font-size:10px; font-weight:700; }
:is(body[data-route="feed"],body[data-route="posts"]) .feed-live-sentinel { height:1px; }
:is(body[data-route="feed"],body[data-route="posts"]) .watch-modal-loading { min-height:76px; display:flex; align-items:center; justify-content:center; gap:6px; }
:is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .watch-modal-empty { padding:34px 14px; color:var(--text-faint); text-align:center; font-size:12px; }
:is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .comments-panel { height:100dvh; min-height:0; grid-template-rows:auto auto minmax(0,1fr) auto auto; }
:is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .comments-panel > header { grid-row:1; }
:is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .comments-panel > .watch-modal-notice { grid-row:2; }
:is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .comments-panel > .modal-comments { grid-row:3; min-height:0; }
:is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .comments-panel > .watch-modal-more { grid-row:4; }
:is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .comments-panel > .comment-composer { grid-row:5; align-self:end; width:100%; }
:is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .comments-panel > .watch-modal-login { grid-row:5; align-self:end; width:100%; }
:is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .watch-modal-notice { margin:10px 14px 0; padding:10px 12px; color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--surface-2)); border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line)); border-radius:11px; font-size:11px; line-height:1.45; }
:is(body[data-route="feed"],body[data-route="posts"]) .watch-modal-more { min-height:38px; margin:0 14px 10px; color:var(--gold-deep); border:1px solid var(--line); border-radius:10px; font-size:11px; font-weight:800; }
:is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .watch-modal-login { padding:13px; border-top:1px solid var(--line); background:var(--surface); }
:is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .watch-modal-login .premium-btn { width:100%; min-height:42px; display:flex; align-items:center; justify-content:center; }
:is(body[data-route="feed"],body[data-route="posts"]) .comment-tools button { color:inherit; font:inherit; font-weight:800; }
:is(body[data-route="feed"],body[data-route="posts"]) .comment-tools button:hover { color:var(--gold-deep); }
:is(body[data-route="feed"],body[data-route="posts"]) .comment-composer button:disabled,
:is(body[data-route="feed"],body[data-route="posts"]) [data-feed-like]:disabled { opacity:.55; cursor:wait; }
:is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .feed-likes-modal .profile-connections-dialog { grid-template-rows:auto auto minmax(0,1fr) auto; }
:is(body[data-route="feed"],body[data-route="posts"]) .feed-likes-list .connection-person > a { width:50px; height:50px; display:block; }
:is(body[data-route="feed"],body[data-route="posts"]) .feed-likes-list .connection-person > a img { width:100%; height:100%; object-fit:cover; border:1px solid var(--line); border-radius:50%; }
:is(body[data-route="feed"],body[data-route="posts"]) .watch-share-dialog { width:min(560px,calc(100vw - 32px)); height:auto; grid-template-rows:auto auto; }
:is(body[data-route="feed"],body[data-route="posts"]) .watch-share-body { padding:18px; }
:is(body[data-route="feed"],body[data-route="posts"]) .watch-share-body > p:first-child { margin:0 0 12px; color:var(--text-soft); font-size:11px; }
:is(body[data-route="feed"],body[data-route="posts"]) .watch-share-copy-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:center; }
:is(body[data-route="feed"],body[data-route="posts"]) .watch-share-copy-row input { width:100%; min-width:0; height:46px; padding:0 13px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:12px; outline:0; font:650 12px/1.2 var(--font-body); }
:is(body[data-route="feed"],body[data-route="posts"]) .watch-share-copy-row input:focus { border-color:var(--gold-deep); box-shadow:0 0 0 3px var(--gold-wash); }
:is(body[data-route="feed"],body[data-route="posts"]) .watch-share-copy-row .premium-btn { min-width:112px; min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
:is(body[data-route="feed"],body[data-route="posts"]) .watch-share-status { min-height:18px; margin:7px 0 0; color:var(--success); font-size:10.5px; font-weight:750; }
body[data-route="posts"] .posts-report-dialog {
  width:min(560px,calc(100vw - 32px));
  height:auto;
  max-height:min(650px,78dvh);
  grid-template-rows:auto minmax(0,1fr);
}
body[data-route="posts"] .posts-report-form {
  min-height:0;
  padding:18px;
  display:grid;
  gap:13px;
  overflow-y:auto;
}
body[data-route="posts"] .posts-report-form label {
  display:grid;
  gap:6px;
  color:var(--text-soft);
  font-size:11px;
  font-weight:800;
}
body[data-route="posts"] .posts-report-form input,
body[data-route="posts"] .posts-report-form textarea {
  width:100%;
  padding:11px 12px;
  resize:vertical;
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:11px;
  outline:0;
  font:600 12px/1.5 var(--font-body);
}
body[data-route="posts"] .posts-report-form input:focus,
body[data-route="posts"] .posts-report-form textarea:focus {
  border-color:var(--gold-deep);
  box-shadow:0 0 0 3px var(--gold-wash);
}
body[data-route="posts"] .posts-report-form .premium-btn {
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
body[data-route="posts"] .posts-report-note {
  margin:0;
  color:var(--text-faint);
  font-size:10.5px;
  line-height:1.45;
}
body[data-route="posts"] .posts-report-message {
  margin:0;
  padding:10px 12px;
  color:var(--danger);
  background:color-mix(in srgb,var(--danger) 8%,var(--surface-2));
  border-radius:10px;
  font-size:11px;
}
body[data-route="posts"] .posts-report-message.success {
  color:var(--success);
  background:color-mix(in srgb,var(--success) 9%,var(--surface-2));
}
body[data-route="posts"] .posts-report-honeypot {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.right-rail .feed-rail-empty { margin:0; color:var(--text-faint); font-size:10px; }
body[data-route="feed"] .suggest > a { width:38px; height:38px; display:block; }

@media (max-width:700px) {
  body[data-route="feed"] .composer-actions a { font-size:0; }
  body[data-route="feed"] .composer-actions a i { margin:0; font-size:15px; }
  :is(body[data-route="feed"],body[data-route="posts"]) .feed-likes-list .connection-person > a { width:48px; height:48px; }
  :is(body[data-route="feed"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .watch-share-modal .watch-share-dialog { width:100%; height:auto; }
  :is(body[data-route="feed"],body[data-route="posts"]) .watch-share-copy-row { grid-template-columns:minmax(0,1fr); }
  :is(body[data-route="feed"],body[data-route="posts"]) .watch-share-copy-row .premium-btn { width:100%; }
  body[data-route="posts"] .posts-report-dialog {
    width:100%;
    max-height:82dvh;
    border-right:0;
    border-bottom:0;
    border-left:0;
    border-radius:22px 22px 0 0;
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f12;
  --bg-soft: #11161a;
  --surface: rgba(23, 28, 32, .96);
  --surface-solid: #171c20;
  --surface-2: #1d2328;
  --surface-3: #252c32;
  --text: #f4f6f7;
  --text-soft: #b6bec6;
  --text-faint: #818b95;
  --line: rgba(178, 191, 202, .14);
  --line-strong: rgba(190, 202, 212, .24);
  --gold: #d5aa58;
  --gold-bright: #edcb87;
  --gold-deep: #dfb96d;
  --gold-wash: rgba(225, 185, 108, .10);
  --danger: #ef6b78;
  --success: #51c59a;
  --shadow: 0 22px 58px rgba(0, 0, 0, .34);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .24);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 15% 0%, var(--gold-wash), transparent 28rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .28s ease, color .28s ease;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a, a:hover, a:focus, a:active, a:visited { color: inherit; text-decoration: none !important; }
button { border: 0; background: transparent; cursor: pointer; }
:is(a,button,input,textarea,select,[role="button"],summary):focus,
:is(a,button,input,textarea,select,[role="button"],summary):focus-visible {
  outline: none !important;
  -webkit-focus-ring-color: transparent;
}
img { max-width: 100%; display: block; }
textarea { resize: none; }
::selection { color: #19130a; background: var(--gold-bright); }

.app-shell { min-height: 100vh; }
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--topbar-h);
  background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(20px) saturate(140%);
}
.topbar-inner {
  width: 100%; height: 100%; margin: 0 auto; padding: 0 26px;
  display: grid; grid-template-columns: var(--sidebar-w) minmax(260px, 560px) 1fr;
  position: relative; align-items: center; gap: 30px;
}
[data-global-header="guest"] .topbar-inner {
  grid-template-columns: 190px minmax(260px, 560px) minmax(0, 1fr);
  gap: 18px;
}
.brand { width: 176px; display: inline-flex; align-items: center; }
.brand img { width: 176px; height: auto; }
.brand-compact { display: none; }
.global-search {
  position: relative; width: 100%; height: 44px; padding: 0 13px 0 17px;
  display: flex; align-items: center; gap: 12px;
  color: var(--text-soft); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 999px; text-align: left;
  transition: .2s ease;
}
.global-search:hover { border-color: var(--line-strong); box-shadow: 0 0 0 4px var(--gold-wash); }
.global-search i { color: var(--gold-deep); }
.global-search > button { flex:0 0 auto; padding:0; display:grid; place-items:center; color:var(--gold-deep); background:transparent; border:0; }
.global-search > input { min-width:0; width:100%; height:100%; padding:0; color:var(--text); background:transparent; border:0; outline:0; font:inherit; }
.global-search > input::placeholder { color:var(--text-soft); opacity:1; }
.global-search:focus-within { border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-wash); }
.global-search-autocomplete {
  position:absolute; top:calc(100% + 10px); left:0; z-index:1200; width:100%; padding:10px;
  visibility:hidden; opacity:0; transform:translateY(-7px); pointer-events:none;
  color:var(--text); background:var(--surface-solid); border:1px solid var(--line); border-radius:20px;
  box-shadow:0 24px 70px rgba(46,30,7,.18); transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.global-search-autocomplete.open { visibility:visible; opacity:1; transform:none; pointer-events:auto; }
.search-autocomplete-heading { padding:7px 9px 10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.search-autocomplete-heading span { color:var(--gold-deep); font-size:10px; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.search-autocomplete-heading small { color:var(--text-faint); font-size:10px; }
.search-autocomplete-results { display:grid; }
.search-autocomplete-results > a { min-height:64px; padding:8px 10px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:11px; color:var(--text); border-radius:13px; }
.search-autocomplete-results > a:hover,.search-autocomplete-results > a.is-keyboard-active { background:var(--surface-2); }
.search-autocomplete-results > a > img,.search-autocomplete-results > a > i:first-child { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.search-autocomplete-results > a > i:first-child { display:grid; place-items:center; color:#241704; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); font-size:17px; }
.search-autocomplete-results > a > span { min-width:0; display:block; }
.search-autocomplete-results > a b,.search-autocomplete-results > a small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.search-autocomplete-results > a b { font-size:13px; }
.search-autocomplete-results > a small { margin-top:2px; color:var(--text-faint); font-size:10px; }
.search-autocomplete-results > a em { color:var(--gold-deep); font-size:10px; font-style:normal; font-weight:800; }
.search-autocomplete-empty,.search-autocomplete-loading { min-height:74px; margin:0; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--text-faint); font-size:12px; }
.search-autocomplete-empty[hidden],.search-autocomplete-loading[hidden] { display:none; }
.search-autocomplete-all { width:100%; min-height:43px; margin-top:5px; padding:0 12px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; color:var(--gold-deep); background:var(--gold-wash); border:0; border-radius:12px; text-align:left; font-size:12px; font-weight:800; }
.search-autocomplete-all:hover { background:color-mix(in srgb,var(--gold-wash) 78%,var(--gold)); }
.top-actions { grid-column:3; justify-self: end; display: flex; align-items: center; gap: 9px; }
.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  display: inline-grid; place-items: center; font-size: 17px;
  color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line);
  transition: transform .2s ease, color .2s ease, border-color .2s ease;
}
.icon-btn:hover { color: var(--gold-deep); border-color: var(--line-strong); transform: translateY(-1px); }
.notice-dot { position: absolute; z-index:2; top: -4px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; color: white; background: var(--danger); border: 2px solid var(--surface-solid); font-size: 10px; font-weight: 900; line-height:1; }
.top-actions .mobile-header-notifications:hover,
.top-actions .mobile-header-notifications:focus,
.top-actions .mobile-header-notifications:focus-visible,
.top-actions .mobile-header-notifications:active { transform:none; }
.theme-switch { height: 42px; padding: 4px 13px 4px 4px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; }
.theme-orb { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #2a1c06; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); box-shadow: 0 5px 15px rgba(157, 100, 16, .2); }
.theme-label { color: var(--text-soft); font-size: 12px; font-weight: 700; }
.avatar-button { width: 42px; height: 42px; padding: 2px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); }
.avatar-button img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; border: 2px solid var(--surface-solid); }
.topbar a:focus,
.topbar a:focus-visible,
.topbar button:focus,
.topbar button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
.mobile-only { display: none; }

.sidebar {
  position: fixed; inset: var(--topbar-h) auto 0 0; z-index: 900;
  width: var(--sidebar-w); padding: 22px 18px 20px 26px;
  border-right: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.sidebar-scroll { height: 100%; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; }
.main-nav { display: flex; flex-direction: column; gap: 5px; }
.main-nav a {
  position: relative; min-height: 45px; padding: 0 14px; display: flex; align-items: center; gap: 14px;
  border-radius: 13px; color: var(--text-soft); font-size: 13px; font-weight: 650; transition: .2s ease;
}
.main-nav a i { width: 21px; text-align: center; font-size: 16px; }
.main-nav a:hover { color: var(--text); background: var(--gold-wash); }
.main-nav a:focus,
.main-nav a:focus-visible,
.bottom-nav a:focus,
.bottom-nav a:focus-visible {
  outline: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.main-nav a:focus-visible { color: var(--text); background: var(--gold-wash); }
.main-nav a.active { color: var(--text); background: linear-gradient(100deg, var(--gold-wash), transparent); }
.main-nav a.active::before { content: ""; position: absolute; left: 0; width: 3px; height: 22px; border-radius: 2px; background: linear-gradient(var(--gold-bright), var(--gold-deep)); box-shadow: 0 0 12px var(--gold); }
.main-nav a.active i { color: var(--gold-deep); }
.nav-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; color: #251704; background: var(--gold-bright); font-size: 10px; }
.nav-divider { height: 1px; margin: 17px 12px; background: var(--line); }
.nav-label { margin: 0 14px 9px; color: var(--text-faint); font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.secondary-nav a { min-height: 41px; font-size: 12px; }
.secondary-nav a i { font-size: 14px; }
.create-btn { width:100%; min-height:48px; margin-top:18px; padding:0 12px; display:flex; align-items:center; justify-content:center; gap:9px; color:#251704; background:linear-gradient(135deg,#f3d487,var(--gold)); border:1px solid rgba(116,71,5,.2); border-radius:14px; box-shadow:0 9px 25px rgba(156,103,21,.18); font-size:13px; font-weight:800; line-height:1; white-space:nowrap; transition:.2s ease; }
.create-btn span { min-width:0; white-space:nowrap; }
.create-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(156, 103, 21, .26); }
.sidebar-create { position:relative; }
.desktop-create-menu { position:fixed; z-index:650; left:18px; top:18px; width:max(220px,calc(var(--sidebar-w) - 36px)); padding:8px; visibility:hidden; opacity:0; transform:translateY(10px) scale(.985); transform-origin:left bottom; color:var(--text); background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:18px; box-shadow:0 24px 65px rgba(31,21,5,.22); pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s ease; }
.desktop-create-menu.open { visibility:visible; opacity:1; transform:none; pointer-events:auto; }
.desktop-create-menu-head { min-height:42px; padding:2px 7px 6px 11px; display:flex; align-items:center; justify-content:space-between; color:var(--gold-deep); font-size:10px; font-weight:900; letter-spacing:.14em; }
.desktop-create-menu-head button { width:34px; height:34px; display:grid; place-items:center; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:50%; }
.desktop-create-menu > a { min-height:60px; padding:8px 10px; display:grid; grid-template-columns:40px minmax(0,1fr) 10px; align-items:center; gap:10px; color:var(--text); border-radius:13px; }
.desktop-create-menu > a:hover { background:var(--gold-wash); }
.desktop-create-menu > a > i:first-child { width:40px; height:40px; display:grid; place-items:center; color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-radius:12px; font-size:16px; }
.desktop-create-menu b,.desktop-create-menu small { display:block; }
.desktop-create-menu b { font-size:13px; line-height:1.2; }
.desktop-create-menu small { margin-top:3px; color:var(--text-faint); font-size:10px; line-height:1.25; }
.desktop-create-menu > a > i:last-child { color:var(--text-faint); font-size:9px; }
@media (max-width:700px) {
  .sidebar-create,
  .desktop-create-menu { display:none; }
}
.sidebar-foot { margin-top: auto; padding: 26px 12px 0; }
.sidebar-foot button, .sidebar-foot a { display: block; margin: 0 0 9px; padding: 0; color: var(--text-faint); font-size: 11px; }
.sidebar-foot button i, .sidebar-foot a i { width: 20px; }
.sidebar-foot p { margin: 15px 0 0; color: var(--text-faint); font-size: 9px; line-height: 1.8; }
.sidebar-backdrop { display: none; }

.main-area { min-height: 100vh; padding: calc(var(--topbar-h) + 24px) calc(var(--rail-w) + 34px) 60px calc(var(--sidebar-w) + 34px); outline: 0; }
#viewRoot { width: min(100%, 720px); margin: 0 auto; }
body[data-page="user-profile"] #viewRoot { width:min(100%,900px); }
.right-rail { position: fixed; inset: calc(var(--topbar-h) + 24px) 24px 20px auto; z-index: 50; width: var(--rail-w); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; background: transparent; scrollbar-width: none; }
body[data-route="create"] .right-rail,
body[data-route="messages"] .right-rail,
body[data-route="business"] .right-rail,
body[data-route="auth"] .right-rail { display: none; }
body[data-route="create"] .main-area,
body[data-route="messages"] .main-area,
body[data-route="business"] .main-area,
body[data-route="auth"] .main-area { padding-right: 34px; }
body[data-route="create"] #viewRoot,
body[data-route="messages"] #viewRoot,
body[data-route="business"] #viewRoot,
body[data-route="auth"] #viewRoot { width: min(100%, 1100px); }
.bottom-nav { display: none; }
.route-loader { position: fixed; z-index: 1100; top: 0; left: 0; right: 0; height: 3px; overflow:hidden; opacity: 0; pointer-events: none; background:color-mix(in srgb,var(--gold) 10%,transparent); }
.route-loader span { display: block; width: 35%; height: 100%; background: linear-gradient(90deg, transparent, var(--gold-bright), var(--gold)); transform: translateX(-100%); }
.route-loader.loading { opacity: 1; }
.route-loader.loading span { animation: routeLoad 1s ease-in-out infinite; }
.route-loader.loading.finishing span { width:100%; transform:translateX(0); animation:none; transition:width .14s ease; }
@keyframes routeLoad { to { transform: translateX(300%); } }

.rail-card, .lux-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.rail-card { padding: 18px; }
.profile-mini-top { display: grid; grid-template-columns: 46px 1fr auto; gap: 11px; align-items: center; }
.profile-mini-top img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.profile-mini-top strong, .profile-mini-top span { display: block; }
.profile-mini-top strong { font-size: 12px; }
.profile-mini-top span { margin-top: 2px; color: var(--text-faint); font-size: 10px; }
.quiet-btn, .rail-head button, .rail-head a { color: var(--gold-deep); font-size: 10px; font-weight: 800; }
.mini-stats { margin-top: 14px; padding-top: 12px; display: flex; gap: 20px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 9px; }
.mini-stats b { color: var(--text); font-size: 11px; }
.rail-head { margin-bottom: 15px; display: flex; align-items: flex-end; justify-content: space-between; }
.eyebrow { display: block; margin-bottom: 2px; color: var(--gold-deep); font-size: 8px; font-weight: 800; letter-spacing: .17em; }
.rail-head h3 { margin: 0; font: 700 21px/1 var(--font-display); }
.online-row { display: flex; align-items: center; }
.online-row > button,.online-row > a { position: relative; width: 42px; height: 42px; padding: 0; margin-right: -6px; display:block; border-radius: 50%; border: 2px solid var(--surface-solid); }
.online-row img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.online-row .online-status { position: absolute; right: 0; bottom: 0; width: auto; height: auto; color: var(--success); background: var(--surface-solid); border: 2px solid var(--surface-solid); border-radius: 50%; font-size: 9px; line-height:1; }
.online-row .more-online { margin-left: 12px; display:grid; place-items:center; border: 1px solid var(--line); color: var(--text-soft); background: var(--surface-2); font-size: 9px; font-weight: 800; line-height:1; text-align:center; }
.suggest-list { display: flex; flex-direction: column; gap: 15px; }
.suggest { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; }
.suggest img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.suggest strong, .suggest span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.suggest strong { font-size: 10px; }
.suggest strong i { margin-left:3px; color:var(--gold); font-size:12px; vertical-align:-.04em; }
.suggest span { margin-top: 2px; max-width: 145px; color: var(--text-faint); font-size: 8px; }
.follow-chip { padding: 6px 9px; color: var(--gold-deep); border: 1px solid var(--line-strong); border-radius: 999px; font-size: 8px; font-weight: 800; }
.follow-chip.following { color: var(--text-faint); border-color: var(--line); }
.right-rail .suggest .follow-chip {
  min-height:34px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.right-rail .suggest .follow-chip span {
  max-width:none;
  margin:0;
  color:inherit;
  font:inherit;
  line-height:1;
}
.trend-card > button, .trend-card > a { width: 100%; padding: 11px 0; display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 9px; text-align: left; border-top: 1px solid var(--line); }
.trend-card > button > span, .trend-card > a > span { color: var(--gold); font: 700 16px var(--font-display); }
.trend-card strong, .trend-card small { display: block; }
.trend-card strong { font-size: 10px; }
.trend-card small { margin-top: 2px; color: var(--text-faint); font-size: 8px; }
.trend-card > button i, .trend-card > a i { color: var(--text-faint); font-size: 9px; }

.page-intro { margin: 0 0 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.page-intro h1 { margin: 2px 0 0; font: 700 clamp(31px, 4vw, 44px)/.95 var(--font-display); letter-spacing: -.02em; }
.page-intro p { max-width: 480px; margin: 7px 0 0; color: var(--text-soft); font-size: 11px; }
.page-actions { display: flex; gap: 8px; }
.premium-btn, .outline-btn, .soft-btn, .text-btn {
  min-height: 40px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  transition: .2s ease;
}
.premium-btn > i, .premium-btn > span,
.outline-btn > i, .outline-btn > span,
.soft-btn > i, .soft-btn > span,
.text-btn > i, .text-btn > span { line-height: 1; }
.premium-btn { color: #211507; background: linear-gradient(135deg, #f0d181, var(--gold)); border: 1px solid rgba(113, 70, 11, .18); box-shadow: 0 7px 20px rgba(156, 103, 21, .16); }
.premium-btn:hover { transform: translateY(-1px); }
.outline-btn { color: var(--gold-deep); border: 1px solid var(--line-strong); }
.soft-btn { color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line); }
.text-btn { min-height: auto; padding: 0; color: var(--gold-deep); }
.full-btn { width: 100%; }

.stories-card { margin-bottom: 15px; padding: 16px 14px 14px; overflow: hidden; }
.stories-head { padding: 0 4px 11px; display: flex; justify-content: space-between; align-items: center; }
.stories-head strong { font: 700 19px var(--font-display); }
.stories-head button { color: var(--gold-deep); font-size: 9px; font-weight: 800; }
.stories-row { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.story { min-width: 68px; text-align: center; }
.story-ring { position: relative; width: 62px; height: 62px; aspect-ratio: 1; margin: 0 auto 7px; padding: 2px; display: block; flex: 0 0 62px; overflow: hidden; border-radius: 50% !important; background: linear-gradient(140deg, var(--gold-bright), var(--gold-deep)); }
.story-ring::after { content: ""; position: absolute; inset: 4px; border: 2px solid var(--surface-solid); border-radius: inherit; }
.story img { width: 100%; height: 100%; aspect-ratio: 1; border-radius: 50% !important; object-fit: cover; }
.story span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); font-size: 8px; }
.add-story .story-ring { display: grid; place-items: center; color: var(--gold-deep); background: var(--surface-2); border: 1px dashed var(--line-strong); }
.add-story .story-ring i { font-size: 16px; }

.composer-card { margin-bottom: 15px; padding: 15px; }
.composer-top { display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; }
.composer-top img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; }
.composer-trigger { height: 42px; padding: 0 16px; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; text-align: left; font-size: 11px; }
.composer-actions { margin-top: 13px; padding-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.composer-actions button { min-height: 34px; color: var(--text-soft); font-size: 9px; font-weight: 750; border-right: 1px solid var(--line); }
.composer-actions button:last-child { border: 0; }
.composer-actions i { margin-right: 7px; color: var(--gold-deep); }

.feed-filter { margin: 0 0 15px; padding: 5px; display: flex; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; }
.feed-filter button { flex: 1; min-height: 34px; padding: 0 10px; color: var(--text-faint); border-radius: 9px; font-size: 9px; font-weight: 800; }
.feed-filter button.active { color: var(--text); background: var(--surface); box-shadow: 0 4px 13px rgba(74, 44, 6, .08); }
body[data-route="feed"] .stories-card,
body[data-route="feed"] .composer-card { display:none; }
body[data-route="feed"] .feed-filter { margin-top:0; }

.post-card { margin-bottom: 16px; overflow: hidden; }
.post-head { position: relative; z-index: 6; padding: 15px 16px 12px; display: grid; grid-template-columns: 43px 1fr auto; gap: 11px; align-items: center; }
.post-avatar { width: 43px; height: 43px; border-radius: 50%; object-fit: cover; }
.post-author strong, .post-author span { display: block; }
.post-author strong { font-size: 11px; }
.post-author strong i { margin-left:3px; color:var(--gold); font-size:12px; vertical-align:-.04em; }
.post-author span { margin-top: 3px; color: var(--text-faint); font-size: 8px; }
.post-menu { color: var(--text-faint); width: 32px; height: 32px; border-radius: 50%; }
.post-menu:hover { background: var(--surface-2); }
.post-head-actions { display: flex; align-items: center; justify-self: end; gap: 5px; }
.post-follow-btn {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--gold-deep);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.post-follow-btn:hover { background: var(--surface-2); }
.post-follow-btn.following { border-color: var(--gold); background: var(--gold); color: #17120a; }
.post-options { position: relative; }
.post-options-menu {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 40;
  width: 220px;
  max-width: calc(100vw - 28px);
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(26, 18, 7, .18);
  transform-origin: top right;
}
.post-options-menu[hidden] { display: none; }
.post-options-item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
}
.post-options-item:hover { background: var(--surface-2); color: var(--text); }
.post-options-item i { width: 18px; color: var(--gold-deep); font-size: 13px; text-align: center; }
.post-options-item.danger,
.post-options-item.danger i { color: #c94050; }
.post-options-item:focus-visible,
.post-follow-btn:focus-visible,
.post-menu:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(218, 164, 55, .35); }
html[data-theme="dark"] .post-options-menu { box-shadow: 0 22px 54px rgba(0, 0, 0, .48); }
.post-copy { padding: 0 16px 13px; color: var(--text-soft); font-size: 11px; line-height: 1.7; }
.post-copy strong { color: var(--text); }
.post-copy a { color: var(--gold-deep); font-weight: 800; }
.post-media { position: relative; overflow: hidden; background: #0c0b09; aspect-ratio: 4/5; }
.post-media.landscape { aspect-ratio: 16/10; }
.post-media img { width: 100%; height: 100%; object-fit: cover; transform: none; }
.post-media:hover img { transform: none; }
.post-media-badge { position: absolute; top: 12px; right: 12px; padding: 5px 9px; color: white; background: rgba(13, 11, 8, .68); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: 8px; font-weight: 800; }
.feed-ai-badge {
  position:absolute;
  z-index:7;
  top:12px;
  right:12px;
  min-height:27px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#f7d67e;
  background:rgba(13,15,17,.76);
  border:1px solid rgba(244,199,91,.42);
  border-radius:999px;
  box-shadow:0 5px 16px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  line-height:1;
  pointer-events:none;
}
.feed-ai-badge i { font-size:8px; }
.post-media.has-ai .post-media-badge { top:47px; }
.feed-gallery-track { width:100%; height:100%; display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-inline:contain; }
.feed-gallery-track::-webkit-scrollbar { display:none; }
.feed-gallery-track > img { flex:0 0 100%; width:100%; height:100%; scroll-snap-align:start; scroll-snap-stop:always; object-fit:cover; }
.feed-gallery-arrow { position:absolute; z-index:4; top:50%; width:34px; height:34px; display:none; place-items:center; transform:translateY(-50%); color:#18120a; background:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.48); border-radius:50%; box-shadow:0 5px 14px rgba(0,0,0,.17); backdrop-filter:blur(7px); font-size:11px; }
.feed-gallery-arrow.previous { left:10px; }
.feed-gallery-arrow.next { right:10px; }
.feed-gallery-arrow:disabled { visibility:hidden; opacity:0; pointer-events:none; }
.feed-gallery-dots { position:absolute; z-index:4; left:50%; bottom:14px; display:flex; align-items:center; gap:5px; transform:translateX(-50%); }
.feed-gallery-dots button { width:6px; height:6px; padding:0; background:rgba(255,255,255,.5); border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:.18s ease; }
.feed-gallery-dots button.active { width:7px; height:7px; background:#fff; }
@media (min-width:701px) { .feed-gallery-arrow { display:grid; } }
.double-heart { position: absolute; left: 50%; top: 50%; opacity: 0; transform: translate(-50%, -50%) scale(.5); color: white; font-size: 72px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.3)); pointer-events: none; }
.double-heart.pop { animation: heartPop .8s ease; }
@keyframes heartPop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.4)} 35%{opacity:1;transform:translate(-50%,-50%) scale(1.15)} 70%{opacity:1;transform:translate(-50%,-50%) scale(.95)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1)} }
.post-actions { padding: 12px 15px 8px; display: flex; align-items: center; gap:3px; }
.post-action-cluster { display:inline-flex; align-items:center; gap:2px; }
.post-action { width: 37px; height: 37px; display: grid; place-items: center; color: var(--text); font-size: 19px; border-radius: 50%; transition: .18s ease; }
.post-action-number { min-width:28px; min-height:37px; margin-left:0; padding:0 6px 0 2px; color:var(--text); font-size:12px; font-weight:850; line-height:1; border-radius:8px; }
.post-action-with-count { width:auto; min-width:58px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.post-action-with-count span { font-size:12px; font-weight:850; line-height:1; }
.post-action-number:hover,.post-action-with-count:hover { background:transparent; }
.post-action:hover { background: var(--surface-2); transform: translateY(-1px); }
body[data-route="feed"] .post-action:hover { background:transparent; transform:none; }
.post-action.like.active { color: var(--danger); }
.post-action.save { margin-left: auto; }
.post-action.save.active { color: var(--gold-deep); }
.post-meta { padding: 0 16px 15px; }
.like-summary { display: flex; align-items: center; gap: 8px; font-size: 9px; }
.like-faces { display: flex; }
.like-faces img { width: 21px; height: 21px; margin-right: -6px; border-radius: 50%; border: 2px solid var(--surface-solid); object-fit: cover; }
.like-summary b { font-size: 10px; }
.view-comments { margin-top: 10px; padding: 0; color: var(--text-faint); font-size: 9px; font-weight: 700; }
.comment-preview { margin-top: 9px; display: flex; gap: 8px; }
.comment-preview img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.comment-bubble { flex: 1; padding: 8px 10px; background: var(--surface-2); border-radius: 4px 13px 13px 13px; font-size: 9px; line-height: 1.5; }
.comment-bubble strong { margin-right: 5px; }
.post-time { display: block; margin-top: 10px; color: var(--text-faint); font-size: 7px; letter-spacing: .06em; text-transform: uppercase; }

.hero-card { position: relative; min-height: 260px; margin-bottom: 16px; overflow: hidden; display: flex; align-items: flex-end; background: #111; color: white; }
.hero-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(20deg, rgba(5,4,3,.92), rgba(5,4,3,.15) 75%), var(--hero) center/cover; }
.hero-content { position: relative; z-index: 1; width: 100%; padding: 28px; }
.hero-content h1 { max-width: 480px; margin: 4px 0 8px; font: 700 43px/.94 var(--font-display); }
.hero-content p { max-width: 430px; margin: 0 0 18px; color: rgba(255,255,255,.72); font-size: 11px; }
.hero-content .eyebrow { color: var(--gold-bright); }

.grid-2, .grid-3, .metric-grid, .tool-grid, .service-grid, .video-grid { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.section-card { padding: 20px; }
.section-head { margin-bottom: 16px; display: flex; justify-content: space-between; align-items: flex-end; gap: 15px; }
.section-head h2 { margin: 2px 0 0; font: 700 27px/1 var(--font-display); }
.section-head p { margin: 4px 0 0; color: var(--text-faint); font-size: 9px; }
.section-head button { color: var(--gold-deep); font-size: 9px; font-weight: 800; }
.stat-box { min-height: 110px; padding: 17px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; }
.stat-box i { color: var(--gold-deep); }
.stat-box b { display: block; margin: 10px 0 2px; font: 700 27px var(--font-display); }
.stat-box span { color: var(--text-faint); font-size: 8px; }

.search-panel { margin-bottom: 16px; padding: 18px; }
.search-large { height: 52px; padding: 0 18px; display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 15px; }
.search-large i { color: var(--gold-deep); }
.search-large input { flex: 1; min-width: 0; color: var(--text); background: transparent; border: 0; outline: 0; }
.search-large input::placeholder { color: var(--text-faint); }
.chip-row { margin-top: 12px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.chip { min-height: 34px; padding: 0 13px; white-space: nowrap; color: var(--text-soft); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; font-size: 9px; font-weight: 800; }
.chip.active { color: #241704; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-color: transparent; }
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; overflow: hidden; border-radius: var(--radius); }
.explore-tile { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface-2); }
.explore-tile.tall { grid-row: span 2; aspect-ratio: auto; }
.explore-tile img { width: 100%; height: 100%; object-fit: cover; transition: .35s ease; }
.explore-tile:hover img { transform: scale(1.04); }
.explore-tile span { position: absolute; inset: auto 9px 8px; color: white; font-size: 8px; font-weight: 800; text-shadow: 0 2px 8px #000; }
.explore-tile i { margin-right: 4px; }

.service-card { overflow: hidden; }
.service-cover { position: relative; height: 150px; }
.service-cover > .service-cover-image { position:relative; z-index:1; width:100%; height:100%; display:block; object-fit:cover; }
.service-cover::after { content: ""; position: absolute; z-index:2; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.65)); pointer-events:none; }
.service-distance { position: absolute; z-index: 2; left: 11px; bottom: 10px; padding: 5px 9px; color: white; background: rgba(0,0,0,.48); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; font-size: 8px; }
.service-info { padding: 15px; }
.service-info h3 { margin: 0; font: 700 21px var(--font-display); }
.service-info p { margin: 5px 0 12px; color: var(--text-faint); font-size: 9px; }
.rating { color: var(--gold); font-size: 9px; }
.rating b { margin-left: 5px; color: var(--text); }
.map-mock { position: relative; min-height: 290px; overflow: hidden; background-color: var(--surface-2); background-image: linear-gradient(30deg, transparent 49%, var(--line) 50%, transparent 51%), linear-gradient(150deg, transparent 49%, var(--line) 50%, transparent 51%); background-size: 90px 60px; }
.map-mock::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, var(--surface-3) 0 4%, transparent 5%), radial-gradient(circle at 70% 60%, var(--surface-3) 0 5%, transparent 6%); opacity: .8; }
.map-pin { position: absolute; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; color: #211507; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border: 3px solid var(--surface-solid); border-radius: 50% 50% 50% 12%; transform: rotate(-45deg); box-shadow: var(--shadow); }
.map-pin i { transform: rotate(45deg); }

body[data-page="search"] #viewRoot { width:min(100%,920px); max-width:none; }
.services-search-panel { margin:0 0 10px; padding:0 0 10px; border-bottom:1px solid var(--line); }
.services-search-panel .search-large { padding-right:7px; }
.services-filter-trigger { min-width:104px; gap:8px; }
.services-geo-reload { flex:0 0 40px; width:40px; min-width:40px; height:40px; padding:0; justify-content:center; }
.services-geo-reload.is-loading i { animation:services-geo-spin .8s linear infinite; }
@keyframes services-geo-spin { to { transform:rotate(360deg); } }
.services-subcategory-row { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.services-subcategory-row[hidden],.services-route-search[hidden] { display:none!important; }
.services-map { min-height:245px; margin-bottom:22px; }
.services-results-head { margin:0 2px 14px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.services-results-head h2 { margin:3px 0 0; font:750 27px/1.05 var(--font-display); }
.services-results-head p { margin:0; color:var(--text-faint); font-size:12px; }
.services-results-head p b { color:var(--text); }
.services-directory { grid-template-columns:minmax(0,1fr); gap:16px; }
.su-search-filter-btn[hidden] { display:none !important; }
.services-directory .service-card { display:block; overflow:visible; border-radius:22px; }
.services-directory .service-card[hidden] { display:none; }
.services-directory .service-cover { width:100%; height:auto; min-height:0; aspect-ratio:3/1; isolation:isolate; border-bottom:1px solid var(--line); }
.services-directory .service-cover-media { position:absolute; z-index:0; inset:0; display:block; overflow:hidden; border-radius:21px 21px 0 0; }
.services-directory .service-cover-media > .service-cover-image { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; object-position:center; border-radius:inherit; }
.services-directory .service-cover-placeholder { position:absolute; z-index:0; inset:0; display:grid; place-items:center; color:var(--gold-deep); background:linear-gradient(135deg,var(--surface-2),var(--gold-wash)); border-radius:21px 21px 0 0; font-size:42px; }
.services-directory .service-company-logo { position:absolute; z-index:5; left:28px; bottom:-62px; width:126px; height:126px; padding:8px; display:grid; place-items:center; overflow:hidden; background:var(--surface-solid); border:3px solid var(--gold); border-radius:50%; box-shadow:0 12px 30px rgba(34,24,11,.2); }
.services-directory .service-company-logo .service-company-logo-image { width:100%; height:100%; display:block; object-fit:cover; border-radius:50%; }
.services-directory .service-cover.has-logo .service-distance { left:14px; }
.services-directory .service-distance { z-index:6; top:14px; bottom:auto; left:14px; padding:8px 12px; font-size:12px; font-weight:850; }
.service-open { position:absolute; z-index:6; right:11px; top:11px; padding:6px 9px; color:#173c2d; background:rgba(237,255,247,.92); border:1px solid rgba(255,255,255,.55); border-radius:999px; font-size:9px; font-weight:800; backdrop-filter:blur(8px); }
.service-open i { margin-right:4px; color:var(--success); font-size:7px; }
.service-open.is-closed { color:#5f5344; background:rgba(250,245,235,.92); }
.service-open.is-closed i { color:var(--text-faint); }
.services-directory .service-info { padding:20px 22px 22px; display:flex; flex-direction:column; }
.services-directory .service-info.has-company-logo { padding-top:84px; }
.service-title { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:13px; align-items:start; }
.services-directory .service-info h3 { font-size:20px; line-height:1.2; }
.services-directory .service-info h3 i { margin-left:3px; color:var(--gold); font-size:14px; vertical-align:-.04em; }
.services-directory .service-info p { font-size:11px; }
.service-title .rating { min-width:66px; display:grid; grid-template-columns:auto auto; justify-content:end; align-items:center; gap:3px; font-size:11px; }
.service-title .rating b { margin:0; }
.service-title .rating span { grid-column:1/-1; color:var(--text-faint); font-size:8px; text-align:right; }
.service-description { min-height:0; margin:2px 0 12px!important; color:var(--text-soft)!important; font-size:11px!important; line-height:1.55; }
.service-tags { margin-bottom:14px; display:flex; flex-wrap:wrap; gap:6px; }
.service-tags span { min-height:28px; padding:0 9px; display:inline-flex; align-items:center; color:var(--gold-deep); background:var(--gold-wash); border:1px solid var(--line); border-radius:999px; font-size:9px; font-weight:750; }
.service-contact { margin-top:0; padding-top:13px; display:grid; gap:7px; border-top:1px solid var(--line); }
body[data-page="search"] .service-contact { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; }
.service-contact span,.service-contact a { display:flex; align-items:center; gap:8px; color:var(--text-soft); font-size:10px; }
.service-contact i { width:14px; color:var(--gold-deep); text-align:center; }
.service-actions { margin-top:15px; display:grid; grid-template-columns:1fr auto; gap:8px; }
.service-actions .outline-btn,.service-actions .premium-btn { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:13px; font-size:11px; }
.service-filter-layer { position:fixed; inset:0; z-index:10000; isolation:isolate; visibility:hidden; pointer-events:none; }
.service-filter-layer.open { visibility:visible; pointer-events:auto; }
.service-filter-backdrop { position:absolute; inset:0; width:100%; height:100%; padding:0; background:rgba(28,20,10,.12); border:0; opacity:0; transition:opacity .24s ease; }
.service-filter-layer.open .service-filter-backdrop { opacity:1; }
.service-filter-panel { position:absolute; inset:0 0 0 auto; width:min(440px,100vw); min-height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr); color:var(--text); background:var(--surface-solid); border-left:1px solid var(--line); box-shadow:-20px 0 70px rgba(39,27,10,.15); transform:translateX(102%); transition:transform .28s cubic-bezier(.2,.8,.2,1); }
.service-filter-layer.open .service-filter-panel { transform:none; }
.service-filter-panel > header { min-height:92px; padding:18px 22px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.service-filter-panel h2 { margin:3px 0 0; font:750 30px/1 var(--font-display); }
.service-filter-panel .round-close { width:43px; height:43px; display:grid; place-items:center; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:50%; font-size:18px; }
.service-filter-panel form { min-height:0; padding:20px 22px 0; display:flex; flex-direction:column; gap:22px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold) transparent; }
.service-filter-panel form[hidden] { display:none!important; }
.service-filter-panel fieldset { padding:0; border:0; }
.service-filter-panel legend { margin-bottom:12px; color:var(--text); font-size:13px; font-weight:850; }
.service-location-current { min-height:58px; padding:11px 12px; display:flex; align-items:center; gap:11px; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:13px; }
.service-location-current > i { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; color:var(--gold-deep); background:var(--gold-wash); border-radius:10px; }
.service-location-current span,.service-location-current b,.service-location-current small { display:block; min-width:0; }
.service-location-current b { color:var(--text); font-size:12px; }
.service-location-current small { margin-top:2px; color:var(--text-faint); font-size:9px; line-height:1.35; }
.service-location-current.is-geo-active { border-color:var(--gold); box-shadow:inset 3px 0 0 var(--gold); }
.service-location-actions { margin-top:9px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.service-location-actions button { min-height:40px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border-radius:11px; font-size:10px; }
.service-location-disable:not(.is-active),.service-location-disable[hidden] { display:none!important; }
.service-location-selects { margin-top:10px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.service-location-selects label { color:var(--text-soft); font-size:9px; font-weight:750; }
.service-location-selects select { width:100%; height:42px; margin-top:5px; padding:0 28px 0 10px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:11px; font:650 10px var(--font-body); }
.service-location-selects select:disabled { opacity:.55; cursor:not-allowed; }
.service-filter-options { display:grid; gap:8px; }
.service-filter-options label { min-height:44px; padding:0 12px; display:flex; align-items:center; gap:11px; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; cursor:pointer; font-size:12px; font-weight:650; }
.service-filter-options input { width:19px; height:19px; flex:0 0 19px; margin:0; padding:0; appearance:none; border:1px solid var(--line-strong); border-radius:5px; background-color:var(--surface-solid); background-image:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); cursor:pointer; transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease; }
.service-filter-options input:checked { background-color:var(--gold); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23241704' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3.2 8.3 3 3 6.6-6.7'/%3E%3C/svg%3E"),linear-gradient(135deg,var(--gold-bright),var(--gold)); background-position:center,center; background-repeat:no-repeat; background-size:12px 12px,100% 100%; border-color:var(--gold-deep); box-shadow:0 4px 12px rgba(179,119,10,.2); }
.service-filter-options input:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.service-distance-control { display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; }
.service-distance-control input { accent-color:var(--gold-deep); }
.service-distance-control b { min-width:68px; padding:8px 10px; color:var(--gold-deep); background:var(--gold-wash); border-radius:10px; text-align:center; font-size:12px; }
.service-rating-options { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.service-rating-options input { position:absolute; opacity:0; pointer-events:none; }
.service-rating-options span { min-height:40px; display:flex; align-items:center; justify-content:center; gap:5px; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:11px; font-size:11px; font-weight:750; cursor:pointer; }
.service-rating-options input:checked + span { color:#241704; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:transparent; }
.service-open-toggle { min-height:68px; padding:12px 14px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; cursor:pointer; }
.service-open-toggle span b,.service-open-toggle span small { display:block; }
.service-open-toggle span b { font-size:12px; }
.service-open-toggle span small { margin-top:3px; color:var(--text-faint); font-size:10px; }
.service-open-toggle input { position:absolute; opacity:0; }
.service-open-toggle > i { width:43px; height:24px; padding:3px; background:var(--line-strong); border-radius:999px; transition:.2s ease; }
.service-open-toggle > i::before { content:""; width:18px; height:18px; display:block; background:var(--surface-solid); border-radius:50%; transition:.2s ease; }
.service-open-toggle input:checked + i { background:var(--gold-deep); }
.service-open-toggle input:checked + i::before { transform:translateX(19px); }
.service-filter-panel footer { position:sticky; bottom:0; z-index:6; margin:0 -22px; margin-top:auto; padding:14px 22px max(14px,env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 1.5fr; gap:9px; background:var(--surface-solid); border-top:1px solid var(--line); box-shadow:0 -12px 28px color-mix(in srgb,var(--surface-solid) 92%,transparent); }
.service-filter-panel footer button { min-height:46px; border-radius:13px; }
body.service-filters-open { overflow:hidden; }

@media (min-width: 1101px) {
  .global-search { position:absolute; left:50%; width:min(560px,calc(100vw - 760px)); transform:translateX(-50%); }
}

@media (max-width: 700px) {
  body[data-page="search"] #viewRoot { max-width:none; }
  body[data-page="search"] .main-area { padding-left:0; padding-right:0; }
  .services-page-intro { padding:18px 18px 6px; }
  .services-page-intro h1 { font-size:34px; }
  .services-page-intro .page-actions { width:100%; }
  .services-page-intro .page-actions .premium-btn { width:100%; }
  .services-search-panel { margin:0 0 9px; padding:0 0 9px; }
  .services-search-panel .search-large { height:auto; min-height:50px; padding:8px 8px 8px 13px; flex-wrap:wrap; }
  .services-search-panel .search-large input { min-width:190px; min-height:34px; }
  .services-filter-trigger { min-width:96px; min-height:38px; }
  .services-map { min-height:210px; margin:0 14px 18px; border-radius:18px!important; }
  .services-results-head { margin:0 18px 12px; }
  .services-results-head h2 { font-size:26px; }
  .services-directory { padding:0 14px; gap:12px; }
  .services-directory .service-card { display:block; border-radius:18px; }
  .services-directory .service-cover { height:auto; min-height:0; aspect-ratio:16/9; }
  .services-directory .service-info { padding:16px; }
  .services-directory .service-info.has-company-logo { padding-top:68px; }
  .services-directory .service-company-logo { left:16px; bottom:-48px; width:96px; height:96px; padding:6px; border-radius:50%; }
  .services-directory .service-company-logo .service-company-logo-image { border-radius:50%; }
  .services-directory .service-cover.has-logo .service-distance { left:10px; }
  .services-directory .service-distance { top:10px; bottom:auto; left:10px; padding:7px 10px; font-size:11px; }
  .service-title { grid-template-columns:minmax(0,1fr); }
  .service-title .rating { justify-content:start; }
  .service-title .rating span { grid-column:auto; margin-left:4px; text-align:left; }
  .service-description { min-height:0; font-size:12px!important; }
  body[data-page="search"] .service-contact { grid-template-columns:1fr; }
  .service-contact span,.service-contact a { font-size:11px; }
  .service-filter-panel { inset:0; width:100%; border-left:0; }
  .service-filter-panel > header { min-height:76px; padding:14px 18px; }
  .service-filter-panel h2 { font-size:27px; }
  .service-filter-panel form { padding:18px 18px 0; gap:20px; }
  .service-filter-panel footer { margin-right:-18px; margin-left:-18px; padding:12px 18px max(12px,env(safe-area-inset-bottom)); }
  .service-location-actions { grid-template-columns:1fr; }
  .service-location-selects { grid-template-columns:1fr; }
  .service-filter-options label { min-height:48px; font-size:13px; }
}

.video-grid { grid-template-columns: repeat(2, 1fr); }
.video-card { overflow: hidden; }
.video-thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; }
.play-btn { position: absolute; inset: 50% auto auto 50%; width: 48px; height: 48px; display: grid; place-items: center; transform: translate(-50%,-50%); color: #251704; background: rgba(238,195,101,.92); border: 1px solid rgba(255,255,255,.3); border-radius: 50%; backdrop-filter: blur(8px); }
.video-duration { position: absolute; right: 8px; bottom: 8px; padding: 3px 6px; color: white; background: rgba(0,0,0,.7); border-radius: 5px; font-size: 7px; }
.video-info { padding: 14px; }
.video-info h3 { margin: 0 0 7px; font-size: 11px; line-height: 1.5; }
.video-info p { margin: 0; color: var(--text-faint); font-size: 8px; }
.shorts-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.short-card { position: relative; aspect-ratio: 9/16; overflow: hidden; border-radius: 16px; background: #111; }
.short-card img { width: 100%; height: 100%; object-fit: cover; }
.short-card::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.82)); }
.short-card div { position: absolute; z-index: 2; inset: auto 10px 10px; color: white; }
.short-card strong { display: block; font-size: 8px; line-height: 1.35; }
.short-card span { font-size: 7px; opacity: .7; }

body[data-route="messages"] { overflow: hidden; }
body[data-route="messages"] .main-area { height: 100dvh; min-height: 0; padding: var(--topbar-h) 0 0 var(--sidebar-w); }
body[data-route="messages"] #viewRoot { width: 100%; max-width: none; height: 100%; margin: 0; }
.messages-layout { --chat-details-width: 350px; position:relative; height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; transition: grid-template-columns .26s cubic-bezier(.2,.8,.2,1); }
.messages-layout.details-open { grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) var(--chat-details-width); }
.conversation-list { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; background: var(--surface); border-right: 1px solid var(--line); }
.conversation-head { position: relative; z-index: 2; padding: 22px 20px 17px; background: var(--surface); border-bottom: 1px solid var(--line); }
.conversation-title { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.conversation-title h2 { margin: 2px 0 0; font: 800 29px/1.1 var(--font-display); letter-spacing: -.035em; }
.new-chat-btn { width: 42px; height: 42px; display: grid; place-items: center; color: var(--text); border: 1px solid var(--line); border-radius: 50%; font-size: 17px; }
.new-chat-btn:hover { color: var(--gold-deep); background: var(--gold-wash); }
.conversation-search { height: 46px; padding: 0 15px; display: flex; align-items: center; gap: 11px; color: var(--text-faint); background: var(--surface-2); border: 1px solid transparent; border-radius: 13px; }
.conversation-search:focus-within { color: var(--gold-deep); border-color: var(--line-strong); box-shadow: 0 0 0 4px var(--gold-wash); }
.conversation-search input { min-width: 0; width: 100%; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 14px; }
.conversation-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.conversation-item { width: 100%; min-height: 78px; padding: 12px 17px; display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 12px; align-items: center; text-align: left; border-bottom: 1px solid var(--line); transition: background .18s ease; }
.conversation-item:hover { background: var(--surface-2); }
.conversation-item.active { background: linear-gradient(90deg, var(--gold-wash), color-mix(in srgb,var(--gold-wash) 45%,transparent)); }
.conversation-avatar { position: relative; display: block; width: 52px; height: 52px; }
.conversation-avatar img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.conversation-avatar i { position: absolute; right: 0; bottom: 1px; color: var(--success); background: var(--surface); border: 2px solid var(--surface); border-radius: 50%; font-size: 9px; }
.conversation-copy { min-width: 0; }
.conversation-copy strong, .conversation-copy > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.conversation-copy strong { color: var(--text); font-size: 14px; font-weight: 800; }
.conversation-copy > span { margin-top: 4px; color: var(--text-faint); font-size: 12px; }
.conversation-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.conversation-meta time { color: var(--text-faint); font-size: 10px; }
.conversation-meta b { min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; color: #221705; background: var(--gold-bright); border-radius: 999px; font-size: 10px; }
.chat-empty-state { min-width:0; min-height:0; display:none; place-items:center; overflow:hidden; background:radial-gradient(circle at 50% 42%,var(--gold-wash),transparent 25rem),var(--surface-solid); }
.messages-layout.no-conversation .chat-empty-state { display:grid; }
.messages-layout.no-conversation .chat-pane { display:none; }
.chat-empty-copy { width:min(100%,520px); padding:32px; display:flex; flex-direction:column; align-items:center; color:var(--text); text-align:center; }
.chat-empty-icon { width:92px; height:92px; display:grid; place-items:center; color:var(--text); border:2px solid var(--text); border-radius:50%; font-size:36px; }
.chat-empty-copy h2 { margin:20px 0 6px; font:800 23px/1.15 var(--font-display); letter-spacing:-.03em; }
.chat-empty-copy p { max-width:430px; margin:0; color:var(--text-soft); font-size:14px; line-height:1.55; }
.chat-empty-copy button { min-height:44px; margin-top:19px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; color:#211507; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-radius:12px; box-shadow:0 10px 24px rgba(156,103,21,.18); font-size:13px; font-weight:800; }
.chat-empty-copy button:hover { background:linear-gradient(135deg,#f6dc8d,var(--gold-bright)); }
.chat-pane { min-width: 0; min-height: 0; display: block; overflow: hidden; background: var(--surface-solid); }
.chat-pane > .msg-chat { position:relative; width:100%; height:100%; min-height:0; display:grid; grid-template-rows:74px minmax(0,1fr) auto; overflow:hidden; }
.chat-head { position: relative; z-index: 3; min-width: 0; padding: 0 21px; display: flex; align-items: center; gap: 12px; background: color-mix(in srgb,var(--surface-solid) 94%,transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.chat-head-person { min-width:0; flex:1; padding:0; display:flex; align-items:center; gap:12px; color:inherit; text-align:left; border-radius:13px; }
.chat-head-person:hover .chat-head-profile strong { color:var(--gold-deep); }
.chat-head-avatar { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.chat-head-profile { min-width: 0; flex: 1; }
.chat-head-profile strong, .chat-head-profile span { display: block; }
.chat-head-profile strong { overflow: hidden; color: var(--text); font-size: 15px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.chat-head-company { width:100%; margin-top:1px; display:block; overflow:hidden; color:var(--text-faint); font-size:10px; font-weight:600; line-height:1.2; white-space:nowrap; text-overflow:ellipsis; }
.chat-head-profile span { margin-top: 2px; color: var(--success); font-size: 11px; font-weight: 700; }
.chat-head-profile span i { font-size: 7px; vertical-align: 1px; }
.chat-head-actions { display: flex; align-items: center; gap: 3px; }
.chat-head-actions button, .chat-head-actions > a, .chat-back { width: 42px; height: 42px; display: grid; place-items: center; color: var(--text-soft); border-radius: 50%; font-size: 17px; }
.chat-head-actions button:hover, .chat-head-actions > a:hover, .chat-back:hover { color: var(--gold-deep); background: var(--gold-wash); }
.chat-head-actions button[aria-expanded="true"] { color: #211507; background: var(--gold-bright); }
.chat-head-unread { position:relative; display:none !important; background:var(--surface-2); border:1px solid var(--line); }
.chat-head-unread .notice-dot { top:-5px; right:-5px; }
.chat-head-actions .chat-head-account { display:none; overflow:hidden; padding:2px; border:2px solid var(--gold); }
.chat-head-account img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.chat-back { display: none; }
.chat-body { min-height: 0; padding: 28px clamp(20px,4vw,52px) 24px; overflow-y: auto; outline: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; background: radial-gradient(circle at 12% 0%,var(--gold-wash),transparent 33rem),var(--surface-solid); scroll-behavior: smooth; }
.chat-body:focus,.chat-body:focus-visible { outline: 0; box-shadow: none; }
.chat-security-intro { width:min(100%,470px); min-height:min(480px,calc(100dvh - 230px)); margin:0 auto; padding:34px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text); text-align:center; }
.chat-security-intro__icon { width:54px; height:54px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border:1px solid var(--line-strong); border-radius:50%; box-shadow:0 10px 28px rgba(139,91,14,.12); font-size:19px; }
.chat-security-intro strong { display:block; margin-top:16px; font:800 16px/1.2 var(--font-display); }
.chat-security-intro p { max-width:410px; margin:7px 0 0; color:var(--text-faint); font-size:12px; line-height:1.6; }
.chat-day { margin: 8px 0 24px; display: flex; align-items: center; gap: 14px; color: var(--text-faint); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.chat-day::before, .chat-day::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.chat-bubble-row { width: 100%; margin-bottom: 9px; display: flex; align-items: flex-end; gap: 9px; }
.chat-bubble-row.mine { justify-content: flex-end; }
.chat-bubble-row.mine .chat-message.mine { margin-left: 0; }
.chat-message-delete { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; opacity: 0; transform: translateX(6px) scale(.92); pointer-events: none; font-size: 11px; transition: opacity .16s ease,transform .18s ease,color .16s ease,background-color .16s ease; }
.chat-bubble-row.mine:hover .chat-message-delete, .chat-bubble-row.mine:focus-within .chat-message-delete { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.msg-chat__row--out:hover .chat-message-delete,.msg-chat__row--out:focus-within .chat-message-delete,.msg-chat__row--out.is-delete-open .chat-message-delete { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; }
.chat-message-delete:hover { color: white; background: var(--danger); border-color: var(--danger); }
.chat-bubble-row.received > img { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.chat-message { width: fit-content; max-width: min(68%,620px); margin: 0; padding: 12px 15px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px 18px 18px 5px; box-shadow: 0 4px 14px rgba(76,49,10,.035); font-size: 15px; line-height: 1.48; }
.chat-message.mine { margin-left: auto; color: #231705; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color: color-mix(in srgb,var(--gold) 65%,transparent); border-radius: 18px 18px 5px 18px; }
.chat-message time { display: block; margin-top: 5px; color: currentColor; opacity: .58; font-size: 10px; line-height: 1; text-align: right; }
.chat-message time i { margin-left: 3px; }
.chat-message.deleted { color: var(--text-faint); background: color-mix(in srgb,var(--surface-2) 76%,transparent); border-style: dashed; font-style: italic; }
.chat-message.deleted > span { display: inline-flex; align-items: center; gap: 7px; }
.chat-message.deleted > span i { font-size: 12px; }
.chat-media-message { width: min(280px,62vw); margin:0; padding:0; overflow: hidden; background: var(--surface-2); border: 0; border-radius: 17px 17px 17px 6px; box-shadow: 0 8px 22px rgba(53,36,10,.09),0 0 0 1px var(--line); }
.chat-media-open { width: 100%; margin:0; padding:0; display: block; overflow: hidden; background: transparent; border:0; border-radius: 17px 17px 0 0; cursor: zoom-in; }
.chat-media-open img { width: 100%; aspect-ratio: 16/9; margin:0; display: block; object-fit: cover; background: var(--surface-2); border-radius:17px 17px 0 0; }
.chat-media-caption { padding: 10px 12px; display: grid; gap: 4px; color: var(--text-soft); font-size: 12px; }
.chat-media-caption span { display: flex; align-items: center; gap: 8px; }
.chat-media-caption span i { color: var(--gold-deep); }
.chat-media-caption time { color: var(--text-faint); font-size: 10px; }
.chat-compose { position: relative; z-index: 3; min-height: 76px; padding: 13px 18px; display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: 10px; align-items: center; background: var(--surface); border-top: 1px solid var(--line); }
.msg-chat__file { display:none !important; }
.chat-compose-shell { min-width: 0; height: 48px; padding: 0 5px; display: flex; align-items: center; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }
.chat-compose-shell:focus-within { border-color: var(--line-strong); box-shadow: 0 0 0 4px var(--gold-wash); }
.chat-compose-shell input { min-width: 0; flex: 1; height: 100%; padding: 0 9px; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 14px; }
.chat-compose-shell textarea { min-width:0; width:100%; height:38px; min-height:38px; max-height:38px; flex:1; margin:0; padding:9px; resize:none; overflow:hidden !important; color:var(--text); background:transparent; border:0; border-radius:0; outline:0; box-shadow:none; font:500 14px/20px var(--font-display); scrollbar-width:none; }
.chat-compose-shell textarea::-webkit-scrollbar { display:none; }
.chat-compose-shell button { width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; color: var(--text-soft); border-radius: 50%; font-size: 16px; }
.chat-compose-shell button:hover { color: var(--gold-deep); background: var(--gold-wash); }
.chat-send { width: 48px; height: 48px; display: grid; place-items: center; color: #211507; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); border-radius: 50%; box-shadow: 0 8px 20px rgba(156,103,21,.22); font-size: 17px; }
.chat-compose.is-blocked .chat-compose-shell {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--line));
  background: color-mix(in srgb, var(--danger) 13%, var(--surface-2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 8%, transparent);
}
.chat-compose.is-blocked .chat-compose-shell:focus-within { border-color:color-mix(in srgb,var(--danger) 54%,var(--line)); box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 8%,transparent); }
.chat-compose.is-blocked .chat-compose-shell textarea:disabled {
  color: var(--danger);
  opacity: 1;
  -webkit-text-fill-color: var(--danger);
}
.chat-compose.is-blocked .chat-compose-shell textarea:disabled::placeholder {
  color: var(--danger);
  opacity: 1;
}
.chat-compose.is-blocked button:disabled {
  cursor: not-allowed;
  opacity: .42;
}
.chat-compose.is-blocked .chat-send:disabled {
  color:color-mix(in srgb,var(--danger) 72%,#211708);
  background:color-mix(in srgb,var(--danger) 17%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--danger) 35%,var(--line));
  box-shadow:none;
}
.chat-emoji-picker { position: absolute; z-index: 12; left: 18px; bottom: calc(100% + 10px); width: min(360px,calc(100vw - 32px)); max-height: 390px; padding: 14px; display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 12px; color: var(--text); background: var(--surface-solid); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(35,24,8,.22); visibility: hidden; opacity: 0; transform: translateY(10px) scale(.98); transform-origin: left bottom; pointer-events: none; transition: opacity .18s ease,transform .2s ease,visibility .2s ease; }
.chat-emoji-picker.open { visibility: visible; opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chat-emoji-picker header { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chat-emoji-picker header strong { font-size: 17px; }
.chat-emoji-picker header button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-soft); background: var(--surface-2); border-radius: 50%; font-size: 14px; }
.chat-emoji-search { height: 42px; padding: 0 13px; display: flex; align-items: center; gap: 10px; color: var(--text-faint); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.chat-emoji-search input { min-width: 0; width: 100%; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 13px; }
.chat-emoji-category { color: var(--text-faint); font-size: 11px; font-weight: 800; }
.chat-emoji-grid { min-height: 0; max-height: 248px; padding-right: 8px; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--gold) var(--surface-2); }
.chat-emoji-grid::-webkit-scrollbar { width: 7px; }
.chat-emoji-grid::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 999px; }
.chat-emoji-grid::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 999px; }
.chat-emoji-grid button { aspect-ratio: 1/1; display: grid; place-items: center; border-radius: 9px; font-size: 26px; line-height: 1; }
.chat-emoji-grid button:hover { background: var(--gold-wash); }

.comment-composer,
.watch-comment-form,
.profile-lightbox-comment-form { position:relative; }
.comment-emoji-picker {
  position:absolute;
  z-index:140;
  left:50%;
  bottom:calc(100% + 10px);
  width:min(360px,calc(100vw - 28px));
  max-height:min(50dvh,390px);
  padding:14px;
  overflow:hidden;
  color:var(--text);
  background:var(--surface-solid);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(35,24,8,.22);
  opacity:0;
  transform:translate(-50%,10px) scale(.98);
  transform-origin:center bottom;
  transition:opacity .18s ease,transform .2s ease;
}
.comment-emoji-picker[hidden] { display:none !important; }
.comment-emoji-picker.open { opacity:1; transform:translate(-50%,0) scale(1); }
.watch-comment-form .comment-emoji-picker {
  right:calc(112px + 10px);
  left:auto;
  transform:translateY(10px) scale(.98);
  transform-origin:right bottom;
}
.watch-comment-form .comment-emoji-picker.open {
  transform:translateY(0) scale(1);
}
.comment-emoji-picker > header {
  min-height:32px;
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.comment-emoji-picker > header strong { font-size:17px; }
.comment-emoji-picker > header button {
  width:32px;
  height:32px;
  padding:0;
  display:grid;
  place-items:center;
  color:var(--text-soft);
  background:var(--surface-2);
  border-radius:50%;
  font-size:14px;
  line-height:1;
}
.comment-emoji-grid {
  min-height:0;
  max-height:min(38dvh,280px);
  padding-right:7px;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:var(--gold) var(--surface-2);
}
.comment-emoji-grid::-webkit-scrollbar { width:7px; }
.comment-emoji-grid::-webkit-scrollbar-track { background:var(--surface-2); border-radius:999px; }
.comment-emoji-grid::-webkit-scrollbar-thumb { background:var(--gold); border-radius:999px; }
.comment-emoji-grid button {
  aspect-ratio:1;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:9px;
  font-size:26px;
  line-height:1;
}
.comment-emoji-grid button:hover { background:var(--gold-wash); }
.chat-delete-modal { position: fixed; z-index: 2500; inset: 0; padding: 20px; display: grid; place-items: center; background: rgba(12,10,8,.54); backdrop-filter: blur(5px); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .18s ease,visibility .18s ease; }
.chat-delete-modal.open { visibility: visible; opacity: 1; pointer-events: auto; }
.chat-delete-modal > section { width: min(430px,calc(100vw - 32px)); padding: 24px; display: grid; grid-template-columns: 48px minmax(0,1fr); gap: 16px; color: var(--text); background: var(--surface-solid); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 26px 80px rgba(0,0,0,.3); transform: translateY(8px) scale(.98); transition: transform .2s ease; }
.chat-delete-modal.open > section { transform: translateY(0) scale(1); }
.chat-delete-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--danger); background: color-mix(in srgb,var(--danger) 10%,var(--surface-2)); border-radius: 14px; font-size: 19px; }
.chat-delete-modal h2 { margin: 3px 0 7px; font: 800 22px/1.15 var(--font-display); letter-spacing: -.025em; }
.chat-delete-modal p { margin: 0; color: var(--text-soft); font-size: 13px; line-height: 1.55; }
.chat-delete-actions { grid-column: 1/-1; padding-top: 4px; display: flex; justify-content: flex-end; gap: 9px; }
.chat-delete-actions button { min-height: 42px; padding: 0 17px; display:inline-flex; align-items:center; justify-content:center; gap:7px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; font-size: 13px; font-weight: 800; }
.chat-delete-actions button.danger { color: white; background: var(--danger); border-color: var(--danger); }
.chat-delete-actions button[aria-busy="true"] { cursor:wait; opacity:.78; }
.chat-delete-error { margin-top:9px !important; color:var(--danger) !important; font-weight:750; }
body.shinechat-modal-open { overflow:hidden; }
.chat-block-modal.is-unblock .chat-delete-icon { color:var(--gold-deep); background:var(--gold-wash); }
.chat-block-modal.is-unblock .chat-delete-actions button.danger { color:#211507; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:var(--gold); }
html[data-theme="dark"] .chat-body { background:radial-gradient(circle at 12% 0%,rgba(229,190,112,.055),transparent 32rem),#101519; }
html[data-theme="dark"] .chat-message:not(.mine), html[data-theme="dark"] .chat-media-message { background:#1d2328; }
.msg-chat__row { width:100%; margin:8px 0; display:flex; align-items:flex-end; gap:9px; }
.msg-chat__row--in { justify-content:flex-start; }
.msg-chat__row--out { justify-content:flex-end; }
.msg-chat__avatar { width:28px; height:28px; flex:0 0 28px; border-radius:50%; object-fit:cover; }
.msg-chat__delete { order:0; }
.msg-chat__row--out .msg-chat__bubble { order:1; }
.msg-chat__row[data-message-deleted="1"] .chat-message-delete { display:none !important; pointer-events:none !important; }
.msg-chat__bubble { position:relative; max-width:min(68%,620px); padding:11px 14px; overflow-wrap:anywhere; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:18px 18px 18px 5px; box-shadow:0 4px 14px rgba(76,49,10,.035); font-size:14px; line-height:1.48; }
.msg-chat__row--out .msg-chat__bubble { color:#231705; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:color-mix(in srgb,var(--gold) 65%,transparent); border-radius:18px 18px 5px 18px; }
.msg-chat__meta { margin-top:5px; display:flex; align-items:center; justify-content:flex-end; gap:5px; color:currentColor; opacity:.58; font-size:9px; line-height:1; white-space:nowrap; }
.msg-chat__check { width:16px; height:13px; display:inline-grid; place-items:center; font-size:10px; }
.msg-chat__meta--read .msg-chat__check { color:#087847; opacity:1; filter:drop-shadow(0 1px 0 rgba(255,255,255,.45)); }
.msg-chat__meta--read .msg-chat__check i { font-size:11px; font-weight:900; }
html[data-theme="dark"] .msg-chat__meta--read .msg-chat__check { color:#5ce0a0; filter:drop-shadow(0 1px 1px rgba(0,0,0,.9)); }
.messages-layout.is-chat-loading .chat-pane,.messages-layout.is-chat-loading .chat-empty-state { visibility:hidden; opacity:0; pointer-events:none; transition:none; }
.messages-layout.is-chat-loading::after { content:none; }
.chat-recipient-results { position:relative; min-height:120px; }
.chat-recipient-state { margin:36px 20px; color:var(--text-faint); text-align:center; font-size:13px; }
.chat-recipient-state i { margin-right:7px; color:var(--gold-deep); }
.msg-chat__link { color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; }
.msg-chat__row--out .msg-chat__link { color:#352104; }
.msg-chat__img { margin:-5px -8px 5px; overflow:hidden; border-radius:13px; cursor:zoom-in; }
.msg-chat__img img { width:100%; max-height:min(440px,56dvh); display:block; object-fit:cover; border-radius:13px; }
.msg-chat__bubble:has(.msg-chat__img) { width:min(360px,70vw); padding:8px; }
.msg-chat__bubble--media { width:min(280px,72vw) !important; max-width:min(280px,72vw) !important; padding:0 !important; overflow:hidden; background:var(--surface-2) !important; border:1px solid var(--line-strong) !important; border-radius:18px 18px 18px 6px !important; box-shadow:0 8px 22px rgba(53,36,10,.09) !important; }
.msg-chat__row--out .msg-chat__bubble--media { border-color:color-mix(in srgb,var(--gold) 70%,var(--line)) !important; border-radius:18px 18px 6px 18px !important; }
.msg-chat__bubble--media .msg-chat__img { width:100%; margin:0; overflow:hidden; border-radius:17px 17px 0 0; background:#111; }
.msg-chat__bubble--media .msg-chat__img img { width:100%; height:auto; aspect-ratio:auto 16/9; max-height:none; display:block; object-fit:contain; border-radius:17px 17px 0 0; }
.msg-chat__bubble--media .msg-chat__img { position:relative; }
.msg-chat__image-retry { position:absolute; inset:0; display:grid; place-items:center; width:100%; padding:20px; border:0; border-radius:inherit; background:var(--surface); color:var(--text); font:inherit; text-align:center; cursor:pointer; }
.msg-chat__image-retry:disabled { cursor:wait; opacity:1; background:transparent; }
.msg-chat__image-retry .msg-chat__upload-spinner { width:32px; height:32px; border-width:3px; }
.msg-chat__media-caption { padding:6px 13px 0; display:flex; flex-direction:column; gap:3px; color:var(--text-soft); background:var(--surface-2); font-style:normal; }
.msg-chat__media-caption span { display:flex; align-items:center; gap:8px; overflow:hidden; font-size:12px; line-height:1.35; white-space:nowrap; text-overflow:ellipsis; }
.msg-chat__media-caption span i { flex:0 0 auto; color:var(--gold-deep); }
.msg-chat__bubble--media > .msg-chat__meta { margin-top:0; padding:3px 13px 7px; color:var(--text-faint); background:var(--surface-2); opacity:1; }
.msg-chat__bubble--emoji { padding:5px 3px; color:var(--text) !important; background:transparent !important; border:0 !important; box-shadow:none !important; font-size:42px; line-height:1.15; }
.msg-chat__bubble--emoji .msg-chat__meta { margin-top:7px; font-size:9px; }
.msg-chat__bubble--deleted { color:var(--text-faint) !important; background:color-mix(in srgb,var(--surface-2) 75%,transparent) !important; border-style:dashed !important; font-style:italic; }
.msg-chat__deleted-text { display:inline-flex; align-items:center; gap:7px; }
.msg-chat__daybar { margin:17px 0; display:flex; align-items:center; gap:13px; color:var(--text-faint); font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.msg-chat__daybar::before,.msg-chat__daybar::after { content:""; height:1px; flex:1; background:var(--line); }
.msg-chat__og-preview:not(.is-ready) { display:none; }
.msg-chat__og-card { width:min(310px,100%); margin-top:9px; display:flex; overflow:hidden; color:var(--text); background:color-mix(in srgb,var(--surface-solid) 74%,transparent); border:1px solid color-mix(in srgb,var(--line-strong) 76%,transparent); border-radius:11px; text-decoration:none; }
.msg-chat__og-img { width:76px; min-height:76px; flex:0 0 76px; background:#090909; }
.msg-chat__og-img img { width:100%; height:100%; display:block; object-fit:cover; }
.msg-chat__og-body { min-width:0; padding:8px 9px; display:flex; flex-direction:column; gap:3px; }
.msg-chat__og-host { overflow:hidden; color:var(--gold-deep); font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.msg-chat__og-title { display:-webkit-box; overflow:hidden; color:var(--text); font-size:11px; font-weight:800; line-height:1.3; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.msg-chat__og-desc { display:-webkit-box; overflow:hidden; color:var(--text-soft); font-size:10px; line-height:1.3; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.msg-chat__older-loader { position:sticky; z-index:2; top:7px; width:max-content; margin:0 auto 8px; padding:6px 10px; display:none; align-items:center; gap:7px; color:var(--text-soft); background:var(--surface); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); font-size:10px; }
.msg-chat__older-loader.is-show { display:flex; }
.msg-chat__older-spinner { width:12px; height:12px; border:2px solid var(--line-strong); border-top-color:var(--gold-deep); border-radius:50%; animation:su-chat-spin .75s linear infinite; }
.msg-chat__upload-toast { position:absolute; z-index:2500; left:50%; bottom:96px; padding:10px 14px; display:none; align-items:center; gap:9px; transform:translateX(-50%); color:#fff; background:rgba(29,132,81,.96); border-radius:12px; box-shadow:0 14px 35px rgba(0,0,0,.28); font-size:12px; }
.msg-chat__block-toast { position:fixed; z-index:2500; left:50%; bottom:96px; padding:10px 14px; display:none; align-items:center; gap:9px; transform:translateX(-50%); color:#fff; background:rgba(29,132,81,.96); border-radius:12px; box-shadow:0 14px 35px rgba(0,0,0,.28); font-size:12px; }
.msg-chat__upload-toast.is-show,.msg-chat__block-toast.is-show { display:flex; }
.msg-chat__block-toast.is-error { background:rgba(181,44,56,.97); }
.msg-chat__upload-spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:su-chat-spin .75s linear infinite; }
.msg-chat__jumpdown { position:absolute; z-index:7; right:20px; bottom:92px; width:46px; height:46px; padding:0; display:grid; place-items:center; visibility:hidden; opacity:0; transform:translateY(8px); pointer-events:none; color:var(--gold-deep); background:color-mix(in srgb,var(--surface-solid) 93%,var(--gold) 7%); border:1px solid color-mix(in srgb,var(--gold) 62%,var(--line-strong)); border-radius:50%; box-shadow:0 10px 26px rgba(67,43,7,.18); font-size:16px; transition:opacity .18s ease,transform .18s ease,background-color .18s ease,border-color .18s ease; }
.msg-chat__jumpdown.is-show { visibility:visible; opacity:1; transform:none; pointer-events:auto; }
.msg-chat__jumpdown:hover { color:#211507; background:var(--gold-bright); border-color:var(--gold-deep); }
.msg-chat__jumpdown-badge { position:absolute; z-index:2; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 4px; display:none; place-items:center; color:#211507; background:var(--gold-bright); border:2px solid var(--surface-solid); border-radius:999px; box-shadow:0 4px 10px rgba(40,25,3,.26); font-size:9px; font-weight:900; line-height:1; transform:translate(18%,-18%); }
.msg-chat__jumpdown-badge.is-on { display:grid; }
html[data-theme="dark"] .msg-chat__jumpdown { color:var(--gold-bright); background:#242b31; border-color:rgba(229,190,112,.36); box-shadow:0 10px 26px rgba(0,0,0,.42); }
html[data-theme="dark"] .msg-chat__jumpdown:hover { color:#211507; background:var(--gold-bright); }
.msg-chat.is-remove-mode #chatHdrRemove { display:flex !important; }
.msg-chat.is-remove-mode #chatHdrDefault { display:none !important; }
.msg-chat.is-remove-mode .msg-chat__row { cursor:pointer; transition:opacity .16s ease,background-color .18s ease,box-shadow .18s ease; }
.msg-chat.is-remove-mode .msg-chat__row--out:not(.is-selected) { opacity:.66; }
.msg-chat.is-remove-mode .msg-chat__row--out.is-selected { position:relative; background:color-mix(in srgb,var(--gold) 11%,transparent); border-radius:18px; box-shadow:inset 3px 0 0 var(--gold); }
.msg-chat.is-remove-mode .msg-chat__row--out.is-selected::before { content:"✓"; position:absolute; z-index:3; left:8px; top:50%; width:28px; height:28px; display:grid; place-items:center; transform:translateY(-50%); color:#211507; background:var(--gold-bright); border:2px solid var(--surface-solid); border-radius:50%; box-shadow:0 5px 16px rgba(70,45,6,.22); font-size:15px; font-weight:900; line-height:1; pointer-events:none; }
.msg-chat.is-remove-mode .msg-chat__row.is-selected .msg-chat__bubble { outline:2px solid var(--gold-deep); outline-offset:2px; box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 18%,transparent); }
.msg-chat.is-remove-mode .chat-message-delete { opacity:0 !important; pointer-events:none !important; }
.msg-chat__hdr-remove { display:none; align-items:center; gap:3px; }
.msg-chat__selected-count { min-width:28px; height:28px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; color:#211507; background:var(--gold-bright); border:1px solid var(--gold); border-radius:999px; font-size:12px; font-weight:900; line-height:1; }
.msg-chat__selected-count[hidden] { display:none !important; }
.msg-chat__notice { min-height:56px; padding:11px 16px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--surface)); border-top:1px solid var(--line); font-size:12px; font-weight:700; }
.shinechat-contacts-loader,.shinechat-contacts-empty { margin:16px; color:var(--text-faint); text-align:center; font-size:11px; }
html[data-theme="dark"] .msg-chat__row--in .msg-chat__bubble { background:#1d2328; }
@keyframes su-chat-spin { to { transform:rotate(360deg); } }
.chat-details { min-width: 0; min-height: 0; width: 100%; display: grid; grid-template-rows: auto minmax(0,1fr); overflow: hidden; color: var(--text); background: var(--surface-solid); border-left: 0 solid var(--line); visibility: hidden; opacity: 0; transform: translateX(18px); pointer-events: none; transition: opacity .2s ease, transform .26s cubic-bezier(.2,.8,.2,1), visibility .26s ease, border-width .26s ease; }
.messages-layout.details-open .chat-details { visibility: visible; opacity: 1; transform: translateX(0); border-left-width: 1px; pointer-events: auto; }
.chat-details-screen { min-width:0; min-height:0; height:100%; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
.chat-details-screen[hidden] { display:none !important; }
.chat-details-head { min-height: 74px; padding: 0 18px 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: color-mix(in srgb,var(--surface-solid) 94%,transparent); border-bottom: 1px solid var(--line); }
.chat-details-head h2 { margin: 2px 0 0; font: 800 24px/1.08 var(--font-display); letter-spacing: -.03em; }
.chat-details-head button { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; font-size: 18px; }
.chat-details-head button:hover { color: var(--gold-deep); background: var(--gold-wash); }
.chat-details-scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.chat-contact-card { padding: 28px 20px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; border-bottom: 1px solid var(--line); }
.chat-contact-avatar { position: relative; width: 88px; height: 88px; }
.chat-contact-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; border: 3px solid var(--surface-solid); border-radius: 50%; box-shadow: 0 0 0 2px var(--gold); }
.chat-contact-avatar i { position: absolute; right: 3px; bottom: 5px; color: var(--success); background: var(--surface-solid); border: 3px solid var(--surface-solid); border-radius: 50%; font-size: 12px; }
.chat-contact-card h3 { margin: 15px 0 2px; font-size: 19px; line-height: 1.2; }
.chat-contact-card p { margin: 0; color: var(--text-faint); font-size: 13px; }
.chat-contact-profile { min-height: 42px; margin-top: 17px; padding: 0 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #211507; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); border-radius: 12px; font-size: 13px; font-weight: 800; }
.chat-contact-actions { width:100%; margin-top:17px; display:flex; align-items:center; justify-content:center; gap:8px; }
.chat-contact-actions .chat-contact-profile { margin-top:0; }
.chat-contact-company { color:var(--gold-deep); background:var(--surface-2); border:1px solid var(--line-strong); }
.chat-contact-company:hover { background:var(--gold-wash); border-color:var(--gold); }
.chat-detail-section { padding: 20px; border-bottom: 1px solid var(--line); }
.chat-detail-section > h3, .chat-detail-section-title h3 { margin: 0; font-size: 14px; font-weight: 800; }
.chat-detail-quick-actions { margin-top: 15px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.chat-detail-quick-actions button { min-width: 0; min-height: 78px; padding: 10px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; font-size: 11px; font-weight: 750; }
.chat-detail-quick-actions button i { color: var(--gold-deep); font-size: 19px; }
.chat-detail-quick-actions button:hover { background: var(--gold-wash); border-color: var(--line-strong); }
.chat-detail-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chat-detail-section-title button { color: var(--gold-deep); font-size: 11px; font-weight: 800; }
.chat-shared-media { margin-top: 14px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.chat-shared-media button,
.chat-media-library-grid button {
  position:relative;
  aspect-ratio:1/1;
  min-width:0;
  padding:0;
  overflow:hidden;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:11px;
  box-shadow:0 4px 12px rgba(58,38,8,.06);
  isolation:isolate;
  cursor:zoom-in;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.chat-media-zoom {
  position:absolute;
  z-index:2;
  right:7px;
  bottom:7px;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  color:#211507;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(255,255,255,.9);
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.28);
  opacity:0;
  transform:translateY(4px) scale(.9);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.chat-media-zoom svg { width:14px; height:14px; display:block; fill:currentColor; }
.chat-shared-media button:hover,
.chat-media-library-grid button:hover { transform:translateY(-2px); border-color:var(--gold); box-shadow:0 9px 20px rgba(76,49,10,.14); }
.chat-shared-media button:hover .chat-media-zoom,
.chat-media-library-grid button:hover .chat-media-zoom,
.chat-shared-media button:focus-visible .chat-media-zoom,
.chat-media-library-grid button:focus-visible .chat-media-zoom { opacity:1; transform:none; }
.chat-shared-media img,
.chat-media-library-grid img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .24s ease,filter .18s ease; }
.chat-shared-media button:hover img,
.chat-media-library-grid button:hover img { transform:scale(1.035); filter:brightness(.9); }
.chat-media-library-head { justify-content:flex-start; padding-left:12px; }
.chat-media-library-head .chat-details-back { width:40px; height:40px; background:transparent; border-color:transparent; }
.chat-media-library-head .chat-details-back:hover { background:var(--surface-2); border-color:var(--line); }
.chat-media-library-head h2 { font-size:19px; }
.chat-media-library-scroll { padding:16px 18px 24px; }
.chat-media-library-tabs { position:sticky; z-index:2; top:0; margin:0 -18px 13px; padding:0 18px; display:flex; gap:24px; background:var(--surface-solid); border-bottom:1px solid var(--line); }
.chat-media-library-tabs button { min-height:54px; position:relative; color:var(--text-faint); font-size:13px; font-weight:800; }
.chat-media-library-tabs button.active { color:var(--gold-deep); }
.chat-media-library-tabs button.active::after { content:""; position:absolute; right:0; bottom:-1px; left:0; height:3px; background:var(--gold); border-radius:3px 3px 0 0; }
.chat-media-month + .chat-media-month { margin-top:22px; }
.chat-media-month h3 { margin:0 0 9px; color:var(--text); font-size:15px; line-height:1.2; }
.chat-media-library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; align-content:start; }
.chat-media-library-grid button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
html[data-theme="dark"] .chat-shared-media button,
html[data-theme="dark"] .chat-media-library-grid button { box-shadow:0 5px 15px rgba(0,0,0,.24); }
.chat-media-library-loader,
.chat-media-library-empty { grid-column:1/-1; min-height:112px; display:grid; place-items:center; padding:22px 12px; color:var(--text-faint); font-size:13px; text-align:center; }
.chat-media-library-loader i { margin-right:8px; color:var(--gold-deep); }
.chat-detail-links { padding: 6px 0 18px; border-bottom: 0; }
.chat-detail-links > button { width: 100%; min-height: 52px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; color: var(--text); text-align: left; font-size: 13px; font-weight: 750; }
.chat-detail-links > button:hover { background: var(--surface-2); }
.chat-detail-links > button span { display: inline-flex; align-items: center; gap: 12px; }
.chat-detail-links > button span i { width: 18px; color: var(--text-soft); text-align: center; }
.chat-detail-links > button span b { color:inherit; font:inherit; }
.chat-detail-links > button > i, .chat-detail-links > button strong { color: var(--text-faint); font-size: 11px; }
.chat-detail-links > button.danger, .chat-detail-links > button.danger span i { color: var(--danger); }

.notice-list { overflow: hidden; }
.notice-item { padding: 16px; display: grid; grid-template-columns: 43px 1fr auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
.notice-item:last-child { border: 0; }
.notice-item.unread { background: linear-gradient(90deg, var(--gold-wash), transparent); }
.notice-icon { position: relative; }
.notice-icon img { width: 43px; height: 43px; border-radius: 50%; object-fit: cover; }
.notice-icon i { position: absolute; right: -4px; bottom: -2px; width: 20px; height: 20px; display: grid; place-items: center; color: #211507; background: var(--gold-bright); border: 2px solid var(--surface-solid); border-radius: 50%; font-size: 8px; }
.notice-copy p { margin: 0; color: var(--text-soft); font-size: 9px; line-height: 1.55; }
.notice-copy p strong { color: var(--text); }
.notice-copy time { color: var(--text-faint); font-size: 7px; }
.notice-item > i { color: var(--gold); font-size: 7px; }

.profile-hero { margin-bottom: 15px; overflow: hidden; }
.profile-cover { position: relative; height: 245px; background: #15110d; }
.profile-cover img { width: 100%; height: 100%; object-fit: cover; opacity: .84; }
.profile-cover::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(transparent, rgba(13,10,7,.8)); }
.cover-edit { position: absolute; z-index: 2; right: 15px; bottom: 15px; min-height: 35px; padding: 0 12px; color: white; background: rgba(0,0,0,.46); border: 1px solid rgba(255,255,255,.22); border-radius: 10px; backdrop-filter: blur(10px); font-size: 8px; font-weight: 800; }
.profile-body { position: relative; padding: 0 22px 18px; }
.profile-avatar { width: 105px; height: 105px; margin-top: -54px; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--gold-bright), var(--gold-deep)); position: relative; z-index: 3; }
.profile-avatar img { width: 100%; height: 100%; border: 4px solid var(--surface-solid); border-radius: inherit; object-fit: cover; }
.profile-primary { margin-top: -45px; padding-left: 123px; min-height: 50px; display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.profile-name-heading { display:flex; align-items:center; gap:9px; }
.profile-name h1 { margin: 0; font: 700 27px/1.08 var(--font-display); }
.profile-name span { color: var(--text-faint); font-size: 9px; }
.profile-name-edit { display:none; }
.profile-cta { flex:0 0 auto; display:flex; align-items:center; gap:8px; }
.profile-action { min-height:42px; padding:0 15px; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; border:1px solid transparent; border-radius:12px; font-size:12px; font-weight:800; line-height:1; transition:transform .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease; }
.profile-action[hidden] { display:none !important; }
.profile-action-primary,
.profile-action-secondary { border-radius:999px; }
.profile-action i { width:15px; flex:0 0 15px; text-align:center; font-size:12px; }
.profile-action-primary { color:#211507; background:linear-gradient(135deg,#f3d787,var(--gold)); border-color:rgba(113,70,11,.18); box-shadow:0 8px 20px rgba(156,103,21,.16); }
.profile-action-primary:hover { transform:translateY(-1px); box-shadow:0 11px 24px rgba(156,103,21,.22); }
.profile-action-secondary { color:var(--text); background:var(--surface-2); border-color:var(--line-strong); }
.profile-action-secondary:hover { color:var(--gold-deep); background:var(--gold-wash); border-color:var(--gold); }
.profile-action-share { width:42px; min-width:42px; padding:0; color:var(--gold-deep); background:var(--surface-2); border-color:var(--line); border-radius:50%; }
.profile-action-share i { width:auto; flex:0 0 auto; font-size:14px; }
.profile-action-share:hover { color:var(--text); background:var(--gold-wash); border-color:var(--line-strong); }
.profile-action-message span { display:none; }
.profile-more-menu { display:none; }
.profile-visitor-action { display:none; }
#viewRoot[data-profile-owner="false"] .profile-owner-action { display:none; }
#viewRoot[data-profile-owner="false"] .profile-visitor-action { display:inline-flex; }
.profile-bio { max-width: 720px; margin: 19px 0 13px; color: var(--text-soft); font-size: 10px; line-height: 1.7; }
.profile-details { display: flex; flex-wrap: wrap; gap: 15px; color: var(--text-faint); font-size: 8px; }
.profile-details i { margin-right: 5px; color: var(--gold-deep); }
.profile-stats { width:100%; margin-top:16px; padding-top:14px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--line); }
.profile-stats > button,.profile-stats > a { min-width:0; padding:2px 14px; display:block; text-align:center; color:var(--text-faint); font-size:8px; text-decoration:none; border-radius:8px; transition:background-color .16s ease,color .16s ease; }
.profile-stats > * + * { position:relative; border-left:0; }
.profile-stats > * + *::before { content:""; position:absolute; top:0; bottom:0; left:0; width:1px; background:var(--line); border-radius:0; pointer-events:none; }
.profile-stats > button:hover,.profile-stats > a:hover { color:var(--text); background:var(--surface-2); }
.profile-stats b { display: block; color: var(--text); font-size: 12px; }
.profile-stats span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-tabs { margin-bottom:15px; padding:4px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; overflow-x:auto; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; scrollbar-width:none; }
.profile-tabs button { width:100%; min-width:0; min-height:40px; padding:0 8px; white-space:nowrap; color:var(--text-faint); border-radius:9px; font-size:12px; font-weight:800; }
.profile-tabs button.active { color:#171107 !important; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); box-shadow:0 6px 18px rgba(156,103,21,.18); }
.profile-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; overflow:hidden; border-radius:4px; }
@media (min-width:701px) {
  body[data-page="user-profile"] .profile-gallery { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.profile-gallery button { position:relative; width:100%; min-width:0; aspect-ratio:4/5; margin:0; padding:0; overflow:hidden; background:var(--surface-2); }
.profile-gallery img { width:100%; height:100%; object-fit:cover; transition:none; }
.profile-gallery button:hover img { transform:none; }
.profile-gallery-meta { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:22px; color:#fff; background:rgba(5,6,8,.56); opacity:0; transition:opacity .2s ease; font-size:12px; font-weight:800; }
.profile-gallery-meta span { display:inline-flex; align-items:center; gap:6px; }
.profile-gallery button:hover .profile-gallery-meta,
.profile-gallery button:focus-visible .profile-gallery-meta { opacity:1; }

.user-profile-tab-panel { display:none; }
.user-profile-tab-panel.active { display:block; animation:userProfilePanelIn .2s ease both; }
@keyframes userProfilePanelIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.user-profile-tab-heading { min-height:66px; margin-bottom:10px; padding:14px 17px; display:flex; align-items:center; justify-content:space-between; gap:18px; background:var(--surface-solid); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-soft); }
.user-profile-tab-heading h2 { margin:3px 0 0; font-size:20px; }
.user-profile-tab-heading > span { color:var(--text-faint); font-size:10px; font-weight:750; }

.user-profile-shorts-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
.user-profile-shorts-grid article { position:relative; min-width:0; aspect-ratio:9/16; overflow:visible; border-radius:14px; background:var(--surface-2); box-shadow:var(--shadow-soft); }
.user-profile-shorts-grid .user-profile-media-open { position:relative; width:100%; height:100%; min-width:0; display:block; overflow:hidden; border-radius:inherit; background:transparent; }
.user-profile-shorts-grid img { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; }
.user-profile-shorts-grid .user-profile-media-open::after { content:""; position:absolute; inset:38% 0 0; background:linear-gradient(transparent,rgba(4,5,7,.9)); }
.user-profile-media-count { position:absolute; z-index:2; top:8px; left:8px; min-height:24px; padding:0 8px; display:inline-flex; align-items:center; gap:5px; color:#fff; background:rgba(7,8,10,.66); border-radius:999px; font-size:8px; font-weight:800; backdrop-filter:blur(5px); }
.user-profile-media-copy { position:absolute; z-index:2; left:10px; right:10px; bottom:10px; color:#fff; text-align:left; }
.user-profile-media-copy b,.user-profile-media-copy small { display:block; }
.user-profile-media-copy b { font-size:10px; line-height:1.35; }
.user-profile-media-copy small { margin-top:3px; color:rgba(255,255,255,.7); font-size:8px; }

.user-profile-video-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.user-profile-video-grid article { position:relative; min-width:0; }
.user-profile-video-grid .user-profile-media-open { width:100%; padding:0 0 13px; overflow:hidden; text-align:left; color:var(--text); background:var(--surface-solid); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-soft); }
.user-profile-video-cover { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); }
.user-profile-video-cover img { width:100%; height:100%; object-fit:cover; }
.user-profile-video-cover > i { position:absolute; top:50%; left:50%; width:46px; height:46px; display:grid; place-items:center; color:#251704; background:var(--gold-bright); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 8px 25px rgba(0,0,0,.28); }
.user-profile-video-cover > small { position:absolute; right:8px; bottom:8px; padding:4px 6px; color:#fff; background:rgba(5,6,8,.8); border-radius:5px; font-size:8px; font-weight:800; }
.user-profile-video-copy { display:block; padding:12px 13px 0; }
.user-profile-video-copy b,.user-profile-video-copy small { display:block; }
.user-profile-video-copy b { min-height:38px; font-size:12px; line-height:1.45; }
.user-profile-video-copy small { margin-top:5px; color:var(--text-faint); font-size:9px; }

.user-profile-post-list { width:100%; max-width:none; margin:0; display:grid; gap:10px; }
.user-profile-post-list > article { padding:17px; }
.user-profile-post-list header { display:grid; grid-template-columns:43px minmax(0,1fr) 34px; gap:10px; align-items:center; }
.user-profile-post-list header img { width:43px; height:43px; object-fit:cover; border-radius:50%; }
.user-profile-post-list header > div:not(.user-profile-post-options) strong,
.user-profile-post-list header > div:not(.user-profile-post-options) > span { display:block; }
.user-profile-post-list header > div:not(.user-profile-post-options) strong { font-size:12px; }
.user-profile-post-list header > div:not(.user-profile-post-options) > span { margin-top:2px; color:var(--text-faint); font-size:9px; }
.user-profile-post-list .user-profile-post-options > .post-menu {
  width:28px;
  height:28px;
  padding:0;
  display:grid;
  place-items:center;
  color:var(--text-faint);
  background:transparent;
  border:0;
  border-radius:8px;
  box-shadow:none;
  backdrop-filter:none;
}
.user-profile-post-list .user-profile-post-options > .post-menu:hover { color:var(--text); background:var(--surface-2); }
.user-profile-post-list p { margin:15px 0; color:var(--text-soft); font-size:12px; line-height:1.65; }
.user-profile-post-media { position:relative; width:auto; margin:0 -17px 14px; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface-2); }
.user-profile-post-media img { width:100%; max-height:520px; aspect-ratio:16/9; display:block; object-fit:cover; }
.user-profile-post-list footer { padding-top:12px; display:flex; align-items:center; gap:22px; border-top:1px solid var(--line); }
.user-profile-post-list footer button { display:inline-flex; align-items:center; gap:6px; color:var(--text-faint); font-size:10px; font-weight:750; }
.user-profile-post-list footer i { font-size:14px; }

.user-profile-media-options { position:absolute; z-index:20; top:8px; right:8px; }
.user-profile-media-options.open { z-index:90; }
.user-profile-media-options > .post-menu { width:24px; height:24px; padding:0; display:grid; place-items:center; color:#fff; background:rgba(7,8,10,.68); border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 4px 12px rgba(0,0,0,.2); backdrop-filter:blur(7px); }
.user-profile-media-options > .post-menu:hover { color:#fff; background:rgba(7,8,10,.82); }
.user-profile-media-options > .post-menu i,
.user-profile-post-options > .post-menu i {
  width:auto;
  height:auto;
  display:block;
  font-size:11px;
  line-height:1;
  transform:none;
}
.user-profile-media-options > .post-menu .fa-ellipsis::before,
.user-profile-post-options > .post-menu .fa-ellipsis::before {
  display:block;
  line-height:1;
}
.user-profile-post-list .user-profile-post-options > .post-menu i { font-size:14px; }
.user-profile-media-options .post-options-menu,
.user-profile-post-options .post-options-menu { top:calc(100% + 7px); right:0; left:auto; }
.user-profile-post-options { justify-self:end; }
.user-profile-post-list header .user-profile-post-options .post-options-menu { width:220px; padding:7px; }
.user-profile-post-list header .user-profile-post-options .post-options-item {
  min-height:42px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 11px;
  color:var(--text);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
}
.user-profile-post-list header .user-profile-post-options .post-options-item > span {
  margin:0;
  color:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
}
.user-profile-post-list header .user-profile-post-options .post-options-item > i {
  width:18px;
  flex:0 0 18px;
  font-size:13px;
  line-height:1;
  text-align:center;
}
.user-profile-post-list header .user-profile-post-options .post-options-item.danger,
.user-profile-post-list header .user-profile-post-options .post-options-item.danger > i {
  color:#c94050;
}
body[data-page="user-profile"] .post-options-menu { right:0; left:auto; }

.user-profile-about-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.user-profile-about-grid > section,.user-profile-about-grid > article { min-width:0; padding:20px; }
.user-profile-about-grid h2,.user-profile-about-grid h3 { margin:5px 0 10px; font-size:20px; }
.user-profile-about-grid p { margin:0; color:var(--text-soft); font-size:12px; line-height:1.7; }
.user-profile-about-grid dl { margin:6px 0 0; }
.user-profile-about-grid dl > div { min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--line); }
.user-profile-about-grid dt,.user-profile-about-grid dd { font-size:10px; }
.user-profile-about-grid dt { color:var(--text-faint); }
.user-profile-about-grid dt i { width:21px; color:var(--gold-deep); }
.user-profile-about-grid dd { margin:0; color:var(--text); font-weight:800; text-align:right; }
.user-profile-about-wide { grid-column:1/-1; }
.user-profile-interest-list { margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.user-profile-interest-list span { min-height:38px; padding:0 12px; display:inline-flex; align-items:center; gap:8px; color:var(--text-soft); background:var(--gold-wash); border:1px solid var(--line); border-radius:999px; font-size:10px; font-weight:750; }
.user-profile-interest-list i { color:var(--gold-deep); }

/* Dynamiczny profil uzytkownika */
.profile-empty-state { grid-column:1/-1; min-height:210px; padding:34px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text-faint); text-align:center; background:var(--surface-solid); border:1px solid var(--line); border-radius:16px; }
.profile-empty-state > i { width:48px; height:48px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:50%; font-size:19px; }
.profile-empty-state strong { color:var(--text); font-size:15px; }
.profile-empty-state span { max-width:420px; font-size:11px; line-height:1.55; }
.user-profile-load-more { min-height:42px; margin:15px auto 0; padding:0 18px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--gold-deep); background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:999px; font-size:11px; font-weight:800; box-shadow:var(--shadow-soft); }
.user-profile-load-more:hover { color:var(--text); border-color:var(--gold); background:var(--gold-wash); }
.user-profile-load-more.is-loading i { animation:spin .8s linear infinite; }
.user-profile-infinite-status { min-height:44px; margin:14px auto 0; padding:0 18px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--text-faint); font-size:10.5px; font-weight:750; }
.user-profile-infinite-status[hidden] { display:none !important; }
.user-profile-infinite-status i { color:var(--gold-deep); }
.user-profile-infinite-status.is-loading i { animation:spin .8s linear infinite; }
.user-profile-infinite-status.is-complete i { color:var(--success); }
.profile-comments-infinite-status { min-height:40px; padding:8px 12px 12px; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--text-faint); font-size:10px; font-weight:750; text-align:center; }
.profile-comments-infinite-status[hidden] { display:none; }
.profile-comments-infinite-status.is-loading i { color:var(--gold-deep); animation:spin .8s linear infinite; }
.profile-comments-infinite-status.is-complete i { color:var(--success); }
.profile-comments-empty { min-height:150px; padding:32px 18px; display:grid; place-items:center; color:var(--text-faint); text-align:center; font-size:12px; line-height:1.55; }
.profile-blocked-state { min-height:160px; padding:25px; display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:16px; align-items:center; }
.profile-blocked-state > i { width:52px; height:52px; display:grid; place-items:center; color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,transparent); border-radius:50%; font-size:19px; }
.profile-blocked-state strong,.profile-blocked-state span { display:block; }
.profile-blocked-state strong { color:var(--text); font-size:15px; }
.profile-blocked-state span { margin-top:4px; color:var(--text-faint); font-size:11px; line-height:1.5; }
.profile-blocked-state button { min-height:40px; padding:0 15px; color:#211507; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-radius:999px; font-size:11px; font-weight:800; }
.profile-blocked-state.profile-blocked-by-profile { grid-template-columns:52px minmax(0,1fr); }
.user-profile-post-list footer > span,.user-profile-post-list footer > a { display:inline-flex; align-items:center; gap:6px; color:var(--text-faint); font-size:10px; font-weight:750; }
.user-profile-post-list footer > a { margin-left:auto; color:var(--gold-deep); }
.profile-connections-empty { min-height:180px; padding:24px; display:grid; place-items:center; color:var(--text-faint); text-align:center; font-size:12px; }
.connection-person > a:first-child { width:50px; height:50px; display:block; }
.connection-person > a:first-child img { width:100%; height:100%; object-fit:cover; border:1px solid var(--line); border-radius:50%; }
.profile-share-dialog { width:min(460px,calc(100vw - 32px)); height:auto; grid-template-rows:auto auto; }
.profile-share-body { padding:17px; }
.profile-share-body > label { display:block; margin-bottom:8px; color:var(--text-faint); font-size:10px; font-weight:750; }
.profile-share-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:center; }
.profile-share-row input { width:100%; min-width:0; height:46px; padding:0 13px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:12px; outline:0; font:650 12px/1.2 var(--font-body); }
.profile-share-row input:focus { border-color:var(--gold-deep); box-shadow:0 0 0 3px var(--gold-wash); }
.profile-share-row .premium-btn { min-width:112px; min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.profile-share-body > p { min-height:18px; margin:7px 0 0; color:var(--success); font-size:10.5px; font-weight:750; }
.user-profile-car-card { grid-column:1/-1; }
.user-profile-car-specs { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.user-profile-car-specs span { min-height:40px; padding:8px 14px; display:inline-flex; align-items:center; gap:9px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:700; }
.user-profile-car-specs i { color:var(--gold-deep); }

.profile-lightbox { position:fixed; inset:0; z-index:2400; padding:28px; display:grid; place-items:center; visibility:hidden; opacity:0; pointer-events:none; transition:opacity .2s ease,visibility .2s ease; }
.profile-lightbox.open { visibility:visible; opacity:1; pointer-events:auto; }
.profile-lightbox-backdrop { position:absolute; inset:0; width:100%; height:100%; background:rgba(35,27,16,.74); backdrop-filter:blur(9px); }
html[data-theme="dark"] .profile-lightbox-backdrop { background:rgba(4,6,9,.88); }
.profile-lightbox-dialog { position:relative; z-index:1; width:min(1080px,calc(80dvh + 355px),calc(100vw - 56px)); height:min(850px,calc(100dvh - 56px)); min-height:560px; overflow:hidden; display:grid; grid-template-columns:minmax(0,min(680px,calc(80dvh - 45px))) minmax(360px,400px); color:var(--text); background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:8px; box-shadow:0 30px 100px rgba(46,30,8,.34); transform:scale(.98); transition:transform .22s ease; }
html[data-theme="dark"] .profile-lightbox-dialog { box-shadow:0 30px 100px rgba(0,0,0,.58); }
.profile-lightbox.open .profile-lightbox-dialog { transform:scale(1); }
.profile-lightbox-close { position:absolute; z-index:3; top:8px; right:8px; width:42px; height:42px; display:grid; place-items:center; color:var(--text); background:color-mix(in srgb,var(--surface-solid) 88%,transparent); border:1px solid var(--line-strong); border-radius:50%; font-size:22px; box-shadow:var(--shadow-soft); backdrop-filter:blur(8px); }
.profile-lightbox-media { position:relative; width:auto; height:100%; max-width:100%; min-width:0; min-height:0; aspect-ratio:4/5; justify-self:center; display:grid; place-items:center; overflow:hidden; background:#07090c; }
.profile-lightbox-media > img { width:100%; height:100%; object-fit:contain; opacity:1; transition:opacity .16s ease; }
.profile-lightbox-media.is-image-loading > img,.profile-lightbox-media.has-image-error > img { opacity:0; }
.profile-lightbox-image-status { position:absolute; z-index:1; inset:0; display:grid; place-content:center; justify-items:center; gap:14px; padding:24px; color:#fff; background:#07090c; opacity:0; visibility:hidden; pointer-events:none; text-align:center; transition:opacity .16s ease,visibility .16s ease; }
.profile-lightbox-media.is-image-loading .profile-lightbox-image-status,.profile-lightbox-media.has-image-error .profile-lightbox-image-status { opacity:1; visibility:visible; }
.profile-lightbox-image-status > span { display:grid; justify-items:center; gap:11px; font-size:12px; font-weight:700; }
.profile-lightbox-image-status > span i { color:var(--gold); font-size:25px; }
.profile-lightbox-media.is-image-loading .profile-lightbox-image-status > span i { animation:profile-lightbox-image-spin .75s linear infinite; }
.profile-lightbox-image-status button { min-height:39px; padding:0 15px; display:inline-flex; align-items:center; gap:8px; color:#17120a; background:var(--gold); border:1px solid rgba(255,255,255,.22); border-radius:999px; font-size:11px; font-weight:800; pointer-events:auto; }
.profile-lightbox-image-status button[hidden] { display:none; }
@keyframes profile-lightbox-image-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .profile-lightbox-media > img { transition:none; }.profile-lightbox-media.is-image-loading .profile-lightbox-image-status > span i { animation:none; } }
.profile-lightbox-nav { position:absolute; z-index:2; top:50%; width:40px; height:40px; display:grid; place-items:center; color:#11151a; background:rgba(255,255,255,.92); border-radius:50%; transform:translateY(-50%); box-shadow:0 8px 20px rgba(0,0,0,.28); }
.profile-lightbox-prev { left:14px; }.profile-lightbox-next { right:14px; }
.profile-lightbox-details { min-width:0; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; border-left:1px solid var(--line); background:var(--surface-solid); }
.profile-lightbox-head { min-height:64px; padding:11px 15px; display:grid; grid-template-columns:40px minmax(0,1fr) 34px; gap:10px; align-items:center; border-bottom:1px solid var(--line); }
.profile-lightbox-head img,.profile-lightbox-caption img { border-radius:50%; object-fit:cover; }
.profile-lightbox-head img { width:40px; height:40px; }
.profile-lightbox-head strong,.profile-lightbox-head span { display:block; }
.profile-lightbox-head strong { color:var(--text); font-size:12px; }.profile-lightbox-head span { color:var(--text-faint); font-size:9px; }
.profile-lightbox-head strong .verified {
  display:inline-block;
  margin-left:4px;
  color:var(--gold-deep);
  font-size:13px;
  line-height:1;
  vertical-align:-.06em;
  filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--surface-solid) 70%,transparent));
}
.profile-lightbox-head > button { width:34px; height:34px; color:var(--text); font-size:17px; }
.profile-lightbox-scroll { min-height:0; padding:16px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.profile-lightbox-caption { display:grid; grid-template-columns:36px minmax(0,1fr); gap:10px; }
.profile-lightbox-caption img { width:36px; height:36px; }
.profile-lightbox-caption p { margin:0; color:var(--text-soft); font-size:11px; line-height:1.55; }
.profile-lightbox-caption strong { color:var(--text); }.profile-lightbox-caption a { color:var(--gold-deep); }
.profile-lightbox-comments { margin-top:22px; }
.profile-lightbox-comments .full-comment:last-child { margin-bottom:0; }
.profile-lightbox-footer { border-top:1px solid var(--line); background:var(--surface-solid); }
.profile-lightbox-actions { padding:11px 13px 4px; display:flex; align-items:center; gap:3px; }
.profile-lightbox-actions > button { width:auto; min-width:38px; height:38px; padding:0 5px; display:inline-flex; align-items:center; justify-content:center; gap:7px; color:var(--text); font-size:22px; }
.profile-lightbox-actions button:hover { color:var(--gold-deep); }.profile-lightbox-actions .profile-lightbox-save { margin-left:auto; }
.profile-lightbox-like.active { color:#f3536e; }.profile-lightbox-like.active i { font-weight:900; }
.profile-lightbox-action-count { min-width:24px; color:var(--text); font-size:11.5px; line-height:1; font-weight:800; text-align:left; white-space:nowrap; }
.profile-lightbox-like.active .profile-lightbox-action-count { color:#f3536e; }
.profile-lightbox-like-count,.profile-lightbox-time { padding:0 16px; display:block; }
.profile-lightbox-like-count { color:var(--text); font-size:11px; }.profile-lightbox-time { margin-top:3px; color:var(--text-faint); font-size:8px; text-transform:uppercase; }
.profile-lightbox-comment-form { min-height:54px; margin-top:10px; }

@media (max-width:1100px) {
  .profile-lightbox { padding:18px; }
  .profile-lightbox-dialog { width:min(calc(80dvh + 351px),calc(100vw - 36px)); height:calc(100dvh - 36px); grid-template-columns:minmax(0,min(680px,calc(80dvh - 29px))) minmax(330px,380px); }
}

.company-cover.profile-cover { height: 280px; }
.company-logo.profile-avatar { border-radius: 24px; }
.company-logo.profile-avatar img { border-radius: 19px; }
.verified { color: var(--gold); font-size: .55em; vertical-align: middle; }
.company-quick { margin-bottom: 15px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.company-quick button { min-height: 74px; padding: 10px; color: var(--text-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-soft); font-size: 8px; font-weight: 800; }
.company-quick i { display: block; margin-bottom: 8px; color: var(--gold-deep); font-size: 17px; }
.service-list-row { padding: 13px 0; display: grid; grid-template-columns: 39px 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--line); }
.service-list-row i { width: 39px; height: 39px; display: grid; place-items: center; color: var(--gold-deep); background: var(--gold-wash); border-radius: 11px; }
.service-list-row strong, .service-list-row span { display: block; }
.service-list-row strong { font-size: 10px; }
.service-list-row span { color: var(--text-faint); font-size: 8px; }
.service-list-row b { color: var(--gold-deep); font-size: 9px; }

.metric-grid { grid-template-columns: repeat(4, 1fr); margin-bottom: 14px; }
.metric { padding: 17px; }
.metric-head { display: flex; justify-content: space-between; color: var(--text-faint); font-size: 8px; }
.metric-head i { color: var(--gold-deep); }
.metric strong { display: block; margin: 11px 0 3px; font: 700 26px var(--font-display); }
.metric small { color: var(--success); font-size: 7px; }
.chart-mock { height: 220px; padding: 24px 20px 18px; display: flex; align-items: flex-end; gap: 8px; border-top: 1px solid var(--line); }
.chart-mock span { flex: 1; position: relative; min-height: 12px; height: var(--h); background: linear-gradient(to top, var(--gold-deep), var(--gold-bright)); border-radius: 5px 5px 2px 2px; opacity: .74; }
.chart-mock span:hover { opacity: 1; }
.chart-mock span::after { content: attr(data-day); position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); color: var(--text-faint); font-size: 6px; }
.task-list { display: flex; flex-direction: column; }
.task-row { padding: 13px 0; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; border-top: 1px solid var(--line); }
.task-row > i { width: 34px; height: 34px; display: grid; place-items: center; color: var(--gold-deep); background: var(--gold-wash); border-radius: 10px; }
.task-row strong, .task-row span { display: block; }
.task-row strong { font-size: 9px; }
.task-row span { color: var(--text-faint); font-size: 7px; }
.status-pill { padding: 5px 8px; color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border-radius: 999px; font-size: 7px; }

.garage-car { overflow: hidden; }
.garage-media { position: relative; height: 220px; background: #111; }
.garage-media img { width: 100%; height: 100%; object-fit: cover; }
.garage-media::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.72)); }
.garage-badge { position: absolute; z-index: 2; left: 14px; top: 14px; padding: 6px 9px; color: #251704; background: var(--gold-bright); border-radius: 999px; font-size: 7px; font-weight: 800; }
.garage-copy { padding: 18px; }
.garage-copy h2 { margin: 0; font: 700 28px var(--font-display); }
.garage-copy p { margin: 3px 0 13px; color: var(--text-faint); font-size: 9px; }
.car-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.car-facts div { padding: 10px; background: var(--surface-2); border-radius: 11px; }
.car-facts span, .car-facts b { display: block; }
.car-facts span { color: var(--text-faint); font-size: 7px; }
.car-facts b { margin-top: 3px; font-size: 9px; }
.timeline { padding: 0; margin: 0; list-style: none; }
.timeline li { position: relative; margin-left: 15px; padding: 0 0 19px 28px; border-left: 1px solid var(--line-strong); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 3px; width: 9px; height: 9px; border: 2px solid var(--surface-solid); border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); }
.timeline strong, .timeline span { display: block; }
.timeline strong { font-size: 9px; }
.timeline span { color: var(--text-faint); font-size: 7px; }

.reward-hero { padding: 26px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-solid) 89%, var(--gold)), var(--surface)); }
.reward-top { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 20px; }
.reward-program-pill { width:max-content; margin-bottom:14px; padding:7px 11px; display:flex; align-items:center; gap:7px; color:var(--gold-deep); background:var(--gold-wash); border:1px solid var(--line-strong); border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.04em; }
.reward-top .eyebrow { display:block; }
.reward-top h1 { margin: 6px 0 9px; font: 800 38px/1.05 var(--font-display); }
.reward-top p { max-width: 620px; margin: 0; color: var(--text-soft); font-size: 14px; line-height:1.55; }
.gem-orb { width: 85px; height: 85px; display: grid; place-items: center; color: #281806; background: radial-gradient(circle at 30% 25%, #fff0bb, var(--gold-bright) 35%, var(--gold-deep)); border-radius: 50%; box-shadow: 0 12px 35px rgba(175, 116, 27, .28); font-size: 32px; }
.reward-balance-panel { margin-top:24px; padding:18px 0; display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.reward-balance-value,.reward-target-value { display:flex; flex-direction:column; }
.reward-target-value { padding-left:28px; align-items:flex-end; border-left:1px solid var(--line); }
.reward-balance-panel span { color:var(--text-faint); font-size:10px; font-weight:700; letter-spacing:.04em; }
.reward-balance-panel strong { margin-top:3px; color:var(--text); font:800 30px/1.15 var(--font-display); }
.reward-balance-panel small { margin-top:3px; color:var(--text-faint); font-size:10px; }
.reward-progress-head { margin-top:16px; display:flex; align-items:center; justify-content:space-between; color:var(--text-soft); font-size:12px; font-weight:700; }
.reward-progress-head strong { color:var(--gold-deep); }
.progress-gold { width: 100%; margin-top:9px; }
.progress-gold div { height: 8px; overflow: hidden; background: var(--surface-3); border-radius: 999px; }
.progress-gold i { display: block; width: clamp(0%, var(--reward-progress, 0%), 100%); height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); border-radius: inherit; box-shadow:0 0 14px color-mix(in srgb,var(--gold-bright) 42%,transparent); transition:width .45s ease; }
.reward-progress-scale { margin-top:8px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; color:var(--text-faint); font-size:10px; font-weight:700; }
.reward-progress-scale span:nth-child(2) { color:var(--text-soft); text-align:center; }
.reward-progress-scale span:last-child { text-align:right; }
.reward-status-note { margin-top:14px; padding:16px 18px; display:flex; align-items:flex-start; gap:12px; color:var(--text-soft); background:color-mix(in srgb, #15a674 8%, var(--surface-solid)); border:1px solid color-mix(in srgb, #15a674 38%, transparent); border-radius:18px; }
.reward-status-note > i { width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; color:#fff; background:#179b70; border-radius:50%; }
.reward-status-note strong { display:block; color:var(--text); font-size:14px; }
.reward-status-note p { margin:3px 0 0; font-size:12px; line-height:1.5; }
.reward-section { margin-top:14px; }
.reward-section-head p { margin:5px 0 0; color:var(--text-faint); font-size:12px; }
.reward-earn-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.reward-earn-item { position:relative; min-height:88px; padding:14px 14px 14px 16px; display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:12px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; }
.reward-earn-item::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; background:linear-gradient(var(--gold-bright),var(--gold-deep)); border-radius:0 4px 4px 0; }
.reward-earn-icon { width:46px; height:46px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border:1px solid var(--line-strong); border-radius:14px; font-size:18px; }
.reward-earn-item h3 { margin:0 0 3px; font-size:14px; font-weight:800; }
.reward-earn-item p { margin:0; color:var(--text-faint); font-size:11px; line-height:1.4; }
.reward-earn-item > strong { min-width:82px; padding:9px 10px; color:var(--gold-deep); background:var(--gold-wash); border:1px solid var(--line-strong); border-radius:13px; font-size:12px; text-align:center; white-space:nowrap; }
.reward-earn-item > strong small { display:block; margin-top:1px; font-size:8px; letter-spacing:.08em; }
.reward-catalog-count { color:var(--text-faint); font-size:11px; font-weight:700; }
.reward-prize-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.reward-prize-card { overflow:hidden; background:var(--surface-2); border:1px solid var(--line-strong); border-radius:18px; }
.reward-prize-art { height:100px; display:grid; place-items:center; color:var(--gold-bright); background:linear-gradient(135deg,#2c281b,#16140f); font-size:32px; }
.reward-prize-body { position:relative; padding:16px; }
.reward-prize-state { position:absolute; top:15px; right:15px; padding:5px 8px; color:var(--text-faint); background:var(--surface-3); border:1px solid var(--line); border-radius:999px; font-size:8px; font-weight:800; }
.reward-prize-body h3 { max-width:68%; margin:0 0 6px; font-size:16px; }
.reward-prize-body p { min-height:34px; margin:0 0 14px; color:var(--text-soft); font-size:11px; line-height:1.45; }
.reward-prize-body button { width:100%; min-height:39px; color:var(--text-faint); background:var(--surface-3); border:1px solid var(--line); border-radius:12px; font-size:10px; font-weight:800; }
.reward-prize-body button i { margin-right:6px; }
.reward-bottom-grid { margin-top:14px; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.reward-how,.reward-history { padding:18px; }
.reward-how summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; list-style:none; color:var(--text); font-size:15px; font-weight:800; }
.reward-how summary::-webkit-details-marker { display:none; }
.reward-how summary span { display:flex; align-items:center; gap:9px; }
.reward-how summary span i { color:var(--gold-deep); }
.reward-how[open] summary > i { transform:rotate(180deg); }
.reward-how ol { margin:15px 0 0; padding:0; list-style:none; }
.reward-how li { padding:11px 0; display:grid; grid-template-columns:30px 1fr; align-items:start; gap:10px; border-top:1px solid var(--line); }
.reward-how li b { width:28px; height:28px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border:1px solid var(--line-strong); border-radius:50%; font-size:11px; }
.reward-how li p { margin:3px 0 0; color:var(--text-soft); font-size:11px; line-height:1.45; }
.reward-history .section-head { margin-bottom:8px; }
.reward-history ul { margin:0; padding:0; list-style:none; }
.reward-history li { padding:11px 0; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; border-top:1px solid var(--line); }
.reward-history li > i { width:34px; height:34px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:10px; }
.reward-history li strong,.reward-history li span { display:block; }
.reward-history li strong { font-size:11px; }
.reward-history li span { margin-top:2px; color:var(--text-faint); font-size:9px; }
.reward-history li b { color:#15986d; font-size:11px; }
.reward-footnote { margin:14px 0 2px; padding:15px 18px; display:flex; align-items:center; gap:11px; color:var(--text-soft); background:color-mix(in srgb,var(--gold) 5%,var(--surface)); border:1px dashed var(--line-strong); border-radius:16px; }
.reward-footnote i { color:var(--gold-deep); font-size:16px; }
.reward-footnote p { margin:0; font-size:11px; line-height:1.5; }

.tool-grid { grid-template-columns: repeat(2, 1fr); }
.tool-card { padding: 20px; text-align: left; }
.tool-icon { width: 44px; height: 44px; display: grid; place-items: center; color: #231606; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-radius: 13px; font-size: 17px; }
.tool-card h3 { margin: 16px 0 5px; font: 700 24px var(--font-display); }
.tool-card p { min-height: 39px; margin: 0 0 15px; color: var(--text-faint); font-size: 8px; }
.fuel-prices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.fuel-prices div { padding: 12px; background: var(--surface-2); border-radius: 11px; }
.fuel-prices span, .fuel-prices b { display: block; }
.fuel-prices span { color: var(--text-faint); font-size: 7px; }
.fuel-prices b { margin-top: 4px; font-size: 11px; }

/* Shine Tools: dedykowane kalkulatory i osobny widok cen paliw */
body[data-page^="widgets-"] #viewRoot { width:min(100%,1020px); }
.tools-page-intro {
  margin-bottom:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
}
.tools-page-intro h1 { margin:3px 0 0; font:800 clamp(32px,4vw,48px)/1.02 var(--font-display); letter-spacing:-.045em; }
.tools-page-intro p { max-width:650px; margin:8px 0 0; color:var(--text-soft); font-size:14px; }
.tools-page-intro > a { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:14px; }
.tools-fuel-link i:last-child { margin-left:4px; }
.tools-calculator-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.tools-calculator-grid.single-tool-view { grid-template-columns:minmax(0,700px); justify-content:center; }
.calculator-panel { padding:24px; overflow:hidden; }
.calculator-panel-head { display:flex; align-items:flex-start; gap:15px; margin-bottom:22px; }
.calculator-panel-head .tool-icon { flex:0 0 52px; width:52px; height:52px; border-radius:15px; font-size:19px; }
.calculator-panel-head h2 { margin:2px 0 4px; font:800 24px/1.1 var(--font-display); letter-spacing:-.025em; }
.calculator-panel-head p { margin:0; color:var(--text-soft); font-size:13px; line-height:1.55; }
.calculator-form { display:grid; gap:15px; }
.calculator-field { display:grid; gap:7px; min-width:0; }
.calculator-field > span:first-child { color:var(--text-soft); font-size:12px; font-weight:800; }
.calculator-field input,.calculator-field select,.input-with-unit,.ratio-input {
  width:100%; min-width:0; height:50px; color:var(--text); background:var(--surface-2); border:1px solid var(--line-strong); border-radius:13px;
}
.calculator-field input,.calculator-field select { padding:0 14px; outline:0; }
.calculator-field input:focus,.calculator-field select:focus,.input-with-unit:focus-within,.ratio-input:focus-within { border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-wash); }
.input-with-unit,.ratio-input { display:flex; align-items:center; overflow:hidden; }
.input-with-unit input,.ratio-input input { height:100%; border:0; background:transparent; box-shadow:none !important; }
.input-with-unit b { padding:0 15px; color:var(--gold-deep); font-size:13px; }
.ratio-input b { height:100%; padding:0 17px; display:grid; place-items:center; color:#211507; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); font-size:18px; }
.calculator-form .premium-btn { min-height:48px; margin-top:2px; border-radius:13px; }
.converter-row { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:10px; }
.calculator-result,.converter-result {
  margin-top:18px; padding:15px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:15px;
}
.calculator-result > div,.converter-result > div { min-width:0; display:grid; gap:2px; }
.calculator-result > div:last-child,.converter-result > div:last-child { text-align:right; }
.calculator-result span,.converter-result span { color:var(--text-soft); font-size:11px; }
.calculator-result strong { font-size:12px; white-space:nowrap; }
.calculator-result strong > span {
  color:var(--text);
  font-size:20px;
  font-weight:850;
  line-height:1;
}
.converter-result strong { font-size:12px; white-space:nowrap; }
.converter-result strong > span { color:var(--text); font-size:20px; font-weight:850; line-height:1; }
.calculator-result > i,.converter-result > i { flex:0 0 auto; color:var(--gold-deep); }
.calculator-note { margin:12px 0 0; padding:13px 14px; color:var(--text-soft); background:color-mix(in srgb,var(--surface-2) 55%,transparent); border:1px dashed var(--line-strong); border-radius:13px; font-size:12px; line-height:1.55; }
.tools-fuel-teaser { margin-top:18px; padding:20px 22px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:17px; }
.tools-fuel-teaser h2 { margin:2px 0 3px; font:800 21px/1.1 var(--font-display); }
.tools-fuel-teaser p { margin:0; color:var(--text-soft); font-size:12px; }
.tools-fuel-teaser .premium-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; white-space:nowrap; }

.fuel-dashboard { display:grid; gap:18px; }
.fuel-controls-card,.fuel-chart-card { padding:22px; }
.fuel-control-block { display:grid; grid-template-columns:150px minmax(300px,1fr) minmax(240px,.8fr); align-items:end; gap:14px; }
.control-label { display:block; margin-bottom:7px; color:var(--gold-deep); font-size:10px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.fuel-control-block > .control-label { align-self:center; margin:0; }
.segmented-control { min-height:46px; padding:4px; display:grid; grid-template-columns:repeat(2,1fr); gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; }
.segmented-control button,.fuel-chip-group button { border:1px solid transparent; border-radius:10px; font-size:11px; font-weight:800; }
.segmented-control button.active,.fuel-chip-group button.active { color:#211507; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); box-shadow:0 6px 16px rgba(156,103,21,.12); }
.fuel-region-select { height:46px; margin:0; padding:0 14px; display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; }
.fuel-region-select i { color:var(--gold-deep); }
.fuel-region-select select { min-width:0; width:100%; color:var(--text); background:transparent; border:0; outline:0; font-size:12px; font-weight:700; }
.fuel-region-select.is-disabled { opacity:.5; pointer-events:none; }
.fuel-summary-grid { margin-top:18px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:hidden; border:1px solid var(--line); border-radius:16px; }
.fuel-summary { min-width:0; padding:15px 12px; display:grid; gap:2px; border-right:1px solid var(--line); background:var(--surface-2); }
.fuel-summary:last-child { border-right:0; }
.fuel-summary span { font-size:10px; font-weight:850; }
.fuel-summary strong { font:800 21px/1.25 var(--font-display); white-space:nowrap; }
.fuel-summary small { color:var(--success); font-size:9px; white-space:nowrap; }
.fuel-summary small .fa-arrow-up { color:var(--danger); }
.fuel-summary small.is-up { color:var(--danger); }
.fuel-summary small.is-down { color:var(--success); }
.fuel-summary small.is-flat { color:var(--text-faint); }
.fuel-summary.pb95 { box-shadow:inset 0 4px #36a267; }.fuel-summary.pb98 { box-shadow:inset 0 4px #75c78b; }.fuel-summary.diesel { box-shadow:inset 0 4px #d5a43d; }.fuel-summary.diesel-plus { box-shadow:inset 0 4px #9b7a42; }.fuel-summary.lpg { box-shadow:inset 0 4px #45add2; }
.fuel-filter-row { margin-top:18px; display:grid; grid-template-columns:.85fr 1.15fr; gap:20px; }
.fuel-chip-group { display:flex; flex-wrap:wrap; gap:7px; }
.fuel-chip-group button { min-height:36px; padding:0 13px; color:var(--text-soft); background:var(--surface-2); border-color:var(--line); }
.fuel-chart-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.fuel-chart-head h2 { margin:2px 0 2px; font:800 27px/1.1 var(--font-display); }
.fuel-chart-head p { margin:0; color:var(--text-soft); font-size:12px; }
.fuel-date-range { padding:9px 12px; display:flex; align-items:center; gap:8px; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:11px; font-size:10px; }
.fuel-date-range i { color:var(--gold-deep); }
.fuel-chart-legend { margin:18px 0 8px; display:flex; flex-wrap:wrap; gap:15px; }
.fuel-chart-legend span { display:inline-flex; align-items:center; gap:6px; color:var(--text-soft); font-size:10px; font-weight:750; }
.fuel-chart-legend i { width:16px; height:4px; border-radius:999px; }.fuel-chart-legend i.pb95 { background:#36a267; }.fuel-chart-legend i.pb98 { background:#75c78b; }.fuel-chart-legend i.diesel { background:#d5a43d; }.fuel-chart-legend i.dieselPlus { background:#9b7a42; }.fuel-chart-legend i.lpg { background:#45add2; }
.fuel-chart-legend span.is-hidden { opacity:.3; }
.fuel-chart-wrap { position:relative; width:100%; min-width:0; min-height:220px; overflow:hidden; touch-action:pan-y; }
.fuel-chart[hidden] { display:none !important; }
.fuel-chart-state { position:absolute; z-index:3; inset:0; min-height:220px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:9px; color:var(--text-soft); background:color-mix(in srgb,var(--surface-solid) 90%,transparent); border-radius:14px; font-size:11px; font-weight:750; backdrop-filter:blur(5px); }
.fuel-chart-state[hidden] { display:none !important; }
.fuel-chart-state i { color:var(--gold-deep); font-size:20px; }
.fuel-chart { width:100%; min-width:0; max-width:100%; height:auto; display:block; }
.fuel-chart-grid line { stroke:var(--line); stroke-width:1; }
.fuel-chart-axis text { fill:var(--text-faint); font:11px var(--font-body); }
.fuel-line { fill:none; stroke-width:2.35; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.fuel-line.pb95 { stroke:#36a267; }.fuel-line.pb98 { stroke:#75c78b; }.fuel-line.diesel { stroke:#d5a43d; }.fuel-line.dieselPlus { stroke:#9b7a42; }.fuel-line.lpg { stroke:#45add2; }
.fuel-dot { stroke:var(--surface-solid); stroke-width:2; vector-effect:non-scaling-stroke; }.fuel-dot.pb95 { fill:#36a267; }.fuel-dot.pb98 { fill:#75c78b; }.fuel-dot.diesel { fill:#d5a43d; }.fuel-dot.dieselPlus { fill:#9b7a42; }.fuel-dot.lpg { fill:#45add2; }
.fuel-chart-guide { stroke:color-mix(in srgb,var(--text) 38%,transparent); stroke-width:1; stroke-dasharray:4 5; vector-effect:non-scaling-stroke; pointer-events:none; }
.fuel-chart-tooltip { position:absolute; z-index:4; width:max-content; min-width:160px; max-width:min(220px,calc(100% - 18px)); padding:11px 12px; color:var(--text); background:color-mix(in srgb,var(--surface-solid) 94%,transparent); border:1px solid var(--line-strong); border-radius:12px; box-shadow:0 12px 30px rgba(39,25,8,.18); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .14s ease,visibility .14s ease; backdrop-filter:blur(10px); }
.fuel-chart-tooltip.is-visible { opacity:1; visibility:visible; }
.fuel-chart-tooltip > strong { display:block; margin-bottom:7px; font-size:12px; }
.fuel-tooltip-values { display:grid; gap:4px; }
.fuel-tooltip-row { display:grid; grid-template-columns:9px 1fr auto; align-items:center; gap:6px; color:var(--text-soft); font-size:11px; }
.fuel-tooltip-row i { width:8px; height:8px; border-radius:50%; }
.fuel-tooltip-row i.pb95 { background:#36a267; }.fuel-tooltip-row i.pb98 { background:#75c78b; }.fuel-tooltip-row i.diesel { background:#d5a43d; }.fuel-tooltip-row i.dieselPlus { background:#9b7a42; }.fuel-tooltip-row i.lpg { background:#45add2; }
.fuel-tooltip-row b { color:var(--text); font-size:11px; }
.fuel-chart-note { margin:8px 0 0; color:var(--text-faint); font-size:10px; }.fuel-chart-note i { margin-right:5px; color:var(--gold-deep); }
.fuel-insights-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.fuel-insight { padding:18px; display:flex; align-items:center; gap:13px; }
.fuel-insight .tool-icon { flex:0 0 44px; }
.fuel-insight h3 { margin:2px 0; font:800 16px/1.2 var(--font-display); }
.fuel-insight p { margin:0; color:var(--text-soft); font-size:10px; }

html[data-theme="dark"] .calculator-field input,
html[data-theme="dark"] .calculator-field select,
html[data-theme="dark"] .fuel-region-select select { color:#f4f6f7; color-scheme:dark; }
html[data-theme="dark"] .fuel-region-select select option { color:#f4f6f7; background:#171c20; }
html[data-theme="dark"] .fuel-region-select select option:checked { color:#101316; background:#d5aa58; }

@media (max-width:1180px) {
  body[data-page^="widgets-"] #viewRoot { width:min(100%,820px); }
  .tools-calculator-grid { grid-template-columns:1fr; }
  .fuel-control-block { grid-template-columns:1fr 1.4fr; }
  .fuel-control-block > .control-label { grid-column:1/-1; }
  .fuel-summary-grid { grid-template-columns:repeat(3,1fr); }
  .fuel-summary:nth-child(3) { border-right:0; }
  .fuel-summary:nth-child(n+4) { border-top:1px solid var(--line); }
  .fuel-filter-row { grid-template-columns:1fr; }
}

@media (max-width:700px) {
  body[data-page^="widgets-"] { width:100%; min-width:0; overflow-x:hidden; }
  body[data-page^="widgets-"] .app-shell,
  body[data-page^="widgets-"] .main-area,
  body[data-page^="widgets-"] #viewRoot { width:100%; min-width:0; max-width:100%; overflow-x:hidden; }
  body[data-page^="widgets-"] .main-area { padding-bottom:92px; }
  body[data-page^="widgets-"] .mobile-bottom-nav { width:100vw; min-width:0; grid-template-columns:repeat(5,minmax(0,1fr)); }
  body[data-page^="widgets-"] .mobile-bottom-nav > * { min-width:0; }
  .tools-page-intro { margin:0; padding:18px 16px 14px; align-items:flex-start; }
  .tools-page-intro h1 { max-width:300px; font-size:31px; line-height:1.02; }
  .tools-page-intro p { display:block; font-size:13px; line-height:1.5; }
  .tools-page-intro > a { min-width:46px; min-height:46px; padding:0 13px; }
  .tools-page-intro > a span,.fuel-page-heading > a { font-size:0; }
  .fuel-page-heading > a i { font-size:14px; }
  .tools-page-intro > a span + i { margin:0; }
  .tools-calculator-grid,.fuel-dashboard { width:100%; min-width:0; padding:0 12px; }
  .fuel-dashboard > * { min-width:0; max-width:100%; }
  .calculator-panel { padding:18px 16px; border-radius:20px; }
  .calculator-panel-head { gap:12px; }
  .calculator-panel-head .tool-icon { flex-basis:46px; width:46px; height:46px; }
  .calculator-panel-head h2 { font-size:21px; }
  .calculator-panel-head p { font-size:12px; }
  .converter-row { grid-template-columns:.8fr 1.2fr; }
  .calculator-field input,.calculator-field select,.input-with-unit,.ratio-input { height:48px; }
  .calculator-result strong { font-size:11px; }
  .calculator-result strong > span { font-size:18px; }
  .converter-result strong { font-size:11px; }
  .converter-result strong > span { font-size:18px; }
  .tools-fuel-teaser { margin:14px 12px 0; padding:17px; grid-template-columns:auto 1fr; border-radius:20px; }
  .tools-fuel-teaser .premium-btn { grid-column:1/-1; width:100%; }
  .fuel-controls-card,.fuel-chart-card { width:100%; min-width:0; padding:16px; overflow:hidden; border-radius:20px; }
  .fuel-control-block { grid-template-columns:1fr; }
  .fuel-control-block > .control-label { grid-column:auto; }
  .segmented-control { min-height:44px; }
  .fuel-summary-grid { width:100%; min-width:0; margin-top:14px; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fuel-summary { min-width:0; padding:15px 12px; overflow:hidden; }
  .fuel-summary strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  .fuel-summary:nth-child(2n) { border-right:0; }
  .fuel-summary:nth-child(3) { border-right:1px solid var(--line); }
  .fuel-summary:nth-child(n+3) { border-top:1px solid var(--line); }
  .fuel-summary:last-child { grid-column:1/-1; border-right:0; }
  .fuel-summary strong { font-size:19px; }
  .fuel-filter-row,.fuel-filter-row > div { min-width:0; }
  .fuel-chip-group { width:100%; max-width:100%; flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-inline:contain; padding-bottom:5px; scrollbar-width:none; }
  .fuel-chip-group button { flex:0 0 auto; min-height:38px; font-size:11px; }
  .fuel-chart-head { display:block; }
  .fuel-chart-head h2 { font-size:23px; }
  .fuel-date-range { margin-top:12px; width:max-content; max-width:100%; }
  .fuel-chart-legend { gap:10px; }
  .fuel-chart-wrap { width:100%; max-width:100%; overflow:hidden; }
  .fuel-chart { width:100%; min-width:0; max-width:100%; }
  .fuel-chart-axis text { font-size:15px; }
  .fuel-chart-note { max-width:100%; line-height:1.45; overflow-wrap:anywhere; }
  .fuel-chart-tooltip { min-width:150px; padding:9px 10px; }
  .fuel-insights-grid { grid-template-columns:1fr; }
  .fuel-insight { border-radius:18px; }
}

.settings-layout { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 18px; }
.settings-nav { padding: 12px; align-self: start; }
.settings-nav button,.settings-nav a { width: 100%; min-height: 46px; padding: 0 14px; display: flex; align-items: center; gap: 11px; color: var(--text-soft); border-radius: 12px; text-align: left; font-size: 13px; font-weight: 750; }
.settings-nav button.active,.settings-nav a.active { color: var(--text); background: var(--gold-wash); }
.settings-nav i { width: 15px; color: var(--gold-deep); }
.settings-panel { padding: 22px; }
body[data-page="user-profile-settings"] #viewRoot { width:min(100%,1060px); }
.settings-anchor-section { margin-top:26px; padding-top:18px; scroll-margin-top:calc(var(--topbar-h) + 22px); border-top:1px solid var(--line); }
.settings-security-grid { display:grid; gap:8px; }
.settings-action-card { min-height:66px; padding:12px 14px; display:grid; grid-template-columns:40px minmax(0,1fr) 14px; align-items:center; gap:12px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:14px; text-align:left; }
.settings-action-card > i:first-child { width:40px; height:40px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:12px; }
.settings-action-card strong,.settings-action-card span { display:block; }
.settings-action-card strong { font-size:12px; }
.settings-action-card span { margin-top:3px; color:var(--text-faint); font-size:10px; }
.settings-action-card > i:last-child { color:var(--text-faint); font-size:10px; }
.field-row { margin-bottom: 16px; }
.field-row label { display: block; margin-bottom: 6px; color: var(--text-soft); font-size: 8px; font-weight: 800; }
.field { width: 100%; height: 42px; padding: 0 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; outline: 0; font-size: 9px; }
.field:focus { border-color: var(--line-strong); box-shadow: 0 0 0 3px var(--gold-wash); }
.toggle-row { padding: 13px 0; display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); }
.toggle-row strong, .toggle-row span { display: block; }
.toggle-row strong { font-size: 9px; }
.toggle-row span { margin-top: 2px; color: var(--text-faint); font-size: 7px; }
.switch { position: relative; flex: 0 0 39px; width: 39px; height: 22px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--line); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-faint); transition: .2s ease; }
.switch.on { background: var(--gold); }
.switch.on::after { left: 20px; background: #241704; }

.views-group { padding: 19px; margin-bottom: 12px; }
.views-group h2 { margin: 0 0 5px; font: 700 25px var(--font-display); }
.views-group > p { margin: 0 0 14px; color: var(--text-faint); font-size: 8px; }
.views-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }
.view-map-item { min-height: 48px; padding: 8px 10px; display: flex; align-items: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; text-align: left; }
.view-map-item i { width: 27px; height: 27px; display: grid; place-items: center; color: var(--gold-deep); background: var(--gold-wash); border-radius: 8px; }
.view-map-item strong, .view-map-item span { display: block; }
.view-map-item strong { font-size: 8px; }
.view-map-item span { color: var(--text-faint); font: 7px ui-monospace, SFMono-Regular, Consolas, monospace; }
.view-map-item b { margin-left: auto; padding: 4px 6px; color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); border-radius: 999px; font-size: 6px; }

.create-layout { width: min(100%, 960px); margin-left: 50%; transform: translateX(-50%); }
.create-steps { margin-bottom: 14px; padding: 5px; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.create-step { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-faint); border-radius: 10px; font-size: 8px; font-weight: 800; }
.create-step b { width: 20px; height: 20px; display: grid; place-items: center; background: var(--surface-3); border-radius: 50%; font-size: 7px; }
.create-step.active { color: var(--text); background: var(--surface); box-shadow: 0 4px 14px rgba(63,41,8,.08); }
.create-step.active b { color: #241704; background: var(--gold-bright); }
.editor-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(310px, .85fr); overflow: hidden; }
.editor-preview { min-height: 620px; padding: 18px; display: flex; flex-direction: column; background: #0b0a08; }
.preview-top { margin-bottom: 13px; display: flex; justify-content: space-between; align-items: center; color: #fff; }
.preview-top strong { font: 700 19px var(--font-display); }
.preview-top span { color: rgba(255,255,255,.5); font-size: 8px; }
.photo-stage { flex: 1; position: relative; min-height: 460px; overflow: hidden; display: grid; place-items: center; background: #15130f; border-radius: 16px; }
.photo-stage img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter, none); transition: filter .15s ease; }
.upload-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: rgba(255,255,255,.65); background: #15130f; }
.upload-empty.hidden { display: none; }
.upload-empty i { display: block; margin-bottom: 14px; color: var(--gold-bright); font-size: 36px; }
.upload-empty strong { display: block; color: white; font: 700 27px var(--font-display); }
.upload-empty p { max-width: 260px; margin: 5px auto 15px; font-size: 9px; }
.upload-empty label { min-height: 39px; padding: 0 15px; display: inline-flex; align-items: center; color: #241704; background: var(--gold-bright); border-radius: 11px; font-size: 8px; font-weight: 800; cursor: pointer; }
.preview-thumbs { height: 58px; margin-top: 12px; display: flex; gap: 8px; }
#photoUpload { display: none !important; }
.preview-thumb { width: 58px; padding: 2px; border: 1px solid var(--gold); border-radius: 10px; }
.preview-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.add-thumb { width: 58px; display: grid; place-items: center; color: rgba(255,255,255,.5); border: 1px dashed rgba(255,255,255,.25); border-radius: 10px; }
.editor-controls { min-width: 0; background: var(--surface); border-left: 1px solid var(--line); }
.editor-tabs { padding: 9px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-bottom: 1px solid var(--line); }
.editor-tab { min-height: 39px; color: var(--text-faint); border-radius: 10px; font-size: 8px; font-weight: 800; }
.editor-tab.active { color: var(--text); background: var(--gold-wash); }
.editor-panel { display: none; padding: 18px; }
.editor-panel.active { display: block; }
.editor-panel h3 { margin: 0; font: 700 24px var(--font-display); }
.editor-panel > p { margin: 4px 0 15px; color: var(--text-faint); font-size: 8px; }
.crop-preview { aspect-ratio: 1; overflow: hidden; border-radius: 13px; background: #111; }
.crop-preview img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo-filter, none); }
.ratio-row { margin-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ratio-row button { min-height: 33px; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; font-size: 7px; font-weight: 800; }
.ratio-row button.active { color: #241704; background: var(--gold-bright); }
.filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.filter-preset { padding: 0; color: var(--text-soft); font-size: 7px; font-weight: 800; }
.filter-preset span { display: block; aspect-ratio: 1; margin-bottom: 5px; overflow: hidden; border: 2px solid transparent; border-radius: 11px; }
.filter-preset img { width: 100%; height: 100%; object-fit: cover; }
.filter-preset.active span { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); }
.slider-list { display: flex; flex-direction: column; gap: 15px; }
.slider-row header { margin-bottom: 6px; display: flex; justify-content: space-between; color: var(--text-soft); font-size: 8px; font-weight: 800; }
.slider-row output { color: var(--gold-deep); }
.slider-row input { width: 100%; height: 4px; accent-color: var(--gold); }
.editor-bottom { padding: 14px 18px; display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); }
.details-form { display: none; padding: 19px; border-top: 1px solid var(--line); background: var(--surface); }
.details-form.open { display: block; }
.details-form textarea { min-height: 100px; padding-top: 11px; }
.details-actions { display: flex; justify-content: flex-end; gap: 8px; }

.app-modal { position: fixed; inset: 0; z-index: 2000; visibility: hidden; opacity: 0; transition: .2s ease; }
.app-modal.open { visibility: visible; opacity: 1; }
.app-modal > .modal-backdrop { position:absolute; inset:0; z-index:0; width:100%; height:100%; background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.comments-panel { position: absolute; z-index:1; top: 0; right: 0; width: min(440px, 100%); height: 100%; display: grid; grid-template-rows: auto 1fr auto; background: var(--surface-solid); box-shadow: -20px 0 60px rgba(0,0,0,.22); transform: translateX(100%); transition: .28s cubic-bezier(.2,.8,.2,1); }
.app-modal.open .comments-panel { transform: translateX(0); }
.modal-handle { display: none; }
.comments-panel > header { padding: 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.comments-panel h2 { margin: 2px 0 0; font: 700 28px var(--font-display); }
.comments-panel h2 span { color: var(--text-faint); font: 700 12px var(--font-body); }
.modal-comments { padding: 17px; overflow-y: auto; }
.full-comment { margin-bottom: 17px; display: grid; grid-template-columns: 35px 1fr; gap: 9px; }
.full-comment img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.full-comment-bubble { padding: 10px 12px; background: var(--surface-2); border-radius: 4px 15px 15px 15px; }
.full-comment-bubble strong { display: block; margin-bottom: 2px; font-size: 9px; }
.full-comment-bubble p { margin: 0; color: var(--text-soft); font-size: 9px; line-height: 1.55; }
.comment-tools { margin: 5px 0 0 3px; display: flex; gap: 12px; color: var(--text-faint); font-size: 7px; font-weight: 700; }
.comment-tools button.liked { color: var(--danger); }
.comment-tools .comment-like-toggle { min-width:0; padding:0; display:inline-flex; align-items:center; gap:4px; color:inherit; background:transparent; border:0; border-radius:6px; font:inherit; font-weight:800; line-height:1; cursor:pointer; }
.comment-tools .comment-like-toggle:hover { color:var(--danger); }
.comment-tools .comment-like-toggle.is-liked,
.comment-tools .comment-like-toggle[aria-pressed="true"] { color:var(--danger); }
.comment-tools .comment-like-toggle:disabled { opacity:.55; cursor:wait; }
.comment-tools .comment-like-toggle i { font-size:1.05em; }
.comment-reply { margin: 10px 0 0 12px; padding-left: 12px; border-left: 1px solid var(--line-strong); }
.comment-composer { padding: 13px; display: grid; grid-template-columns: 35px 1fr 38px; gap: 8px; align-items: center; border-top: 1px solid var(--line); background: var(--surface); }
.comment-composer > img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; }
.comment-composer > div { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; }
.comment-composer textarea { flex: 1; min-width: 0; max-height: 100px; padding: 9px 4px 9px 11px; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 9px; }
.comment-composer > div button {
  flex:0 0 38px;
  width:38px;
  height:38px;
  padding:0;
  display:grid;
  place-items:center;
  align-self:center;
  color:var(--text-faint);
  line-height:1;
}
.comment-composer > div button i,
.watch-comment-input button i { display:block; line-height:1; }
.send-comment { width: 38px; height: 38px; display: grid; place-items: center; color: #251704; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-radius: 50%; }
.comment-composer.is-blocked > div {
  background:color-mix(in srgb,var(--danger) 10%,var(--surface-2));
  border-color:color-mix(in srgb,var(--danger) 58%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 7%,transparent);
}
.comment-composer.is-blocked textarea:disabled,
.comment-composer.is-blocked textarea:disabled::placeholder { color:var(--danger); opacity:1; cursor:not-allowed; }
.comment-composer.is-blocked button:disabled { cursor:not-allowed; opacity:.45; }
.comment-composer.is-blocked .send-comment:disabled {
  color:color-mix(in srgb,var(--danger) 45%,var(--surface));
  background:color-mix(in srgb,var(--danger) 9%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--danger) 24%,var(--line));
}

.toast-stack { position: fixed; z-index: 3000; top: calc(var(--topbar-h) + 15px); right: 20px; display: flex; flex-direction: column; gap: 8px; }
.app-toast { min-width: 240px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; color: var(--text); background: var(--surface-solid); border: 1px solid var(--line-strong); border-radius: 13px; box-shadow: var(--shadow); font-size: 9px; animation: toastIn .25s ease; }
.app-toast i { color: var(--gold-deep); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }

.auth-wrap { min-height: calc(100vh - var(--topbar-h) - 50px); display: grid; grid-template-columns: 1.05fr .95fr; overflow: hidden; }
.auth-visual { position: relative; min-height: 590px; padding: 34px; display: flex; align-items: flex-end; color: white; background: linear-gradient(20deg, rgba(3,3,2,.9), rgba(3,3,2,.1)), url("../images/hero-detailing.jpg") center/cover; }
.auth-visual h1 { max-width: 380px; margin: 4px 0 8px; font: 700 46px/.95 var(--font-display); }
.auth-visual p { max-width: 370px; color: rgba(255,255,255,.68); font-size: 10px; }
.auth-form { padding: 45px; display: flex; flex-direction: column; justify-content: center; }
.auth-form > img { width: 180px; margin-bottom: 35px; }
.auth-form h2 { margin: 0; font: 700 34px var(--font-display); }
.auth-form > p { margin: 4px 0 22px; color: var(--text-faint); font-size: 9px; }
.social-login { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.social-login button,
.social-login a { min-height: 41px; display:flex; align-items:center; justify-content:center; gap:7px; color: var(--text-soft); background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; font-size: 8px; font-weight: 800; text-decoration:none; }
.auth-divider { margin: 0 0 18px; display: flex; align-items: center; gap: 10px; color: var(--text-faint); font-size: 7px; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }

/* Strona główna / publiczna.
   Elementy gościa są renderowane wyłącznie przez warianty notlogged,
   dlatego nie wolno ich domyślnie ukrywać w bazowym arkuszu. */
.guest-top-link,
.guest-auth-link,
.guest-register-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
}
.guest-sidebar { display: block; }
.guest-top-link { padding: 0 8px; color: var(--text-soft); }
.guest-top-link:hover { color: var(--gold-deep); }
.guest-auth-link {
  padding: 0 15px;
  gap: 7px;
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
}
.guest-auth-link:hover { color: var(--gold-deep); background: var(--gold-wash); }
.guest-register-link {
  padding: 0 17px;
  gap: 7px;
  color: #241704;
  background: linear-gradient(135deg,var(--gold-bright),var(--gold));
  border-radius: 12px;
  box-shadow: 0 7px 18px rgba(143,91,11,.16);
}
.guest-drawer-actions { margin: 24px 0 0; display: grid; gap: 10px; }
.guest-drawer-actions button, .guest-drawer-actions a { width: 100%; min-height: 46px; display:flex; align-items:center; justify-content:center; }
.guest-drawer-actions .guest-drawer-action {
  gap:10px;
  border-radius:13px;
  line-height:1;
  text-decoration:none;
}
.guest-drawer-actions .guest-drawer-action i {
  width:16px;
  flex:0 0 16px;
  display:grid;
  place-items:center;
  margin:0;
  font-size:13px;
  line-height:1;
}
.guest-drawer-actions .guest-drawer-action span { display:block; }
body[data-route="home"] .sidebar,
body[data-route="home"] .right-rail,
body[data-route="home"] .bottom-nav { display: none; }
body[data-route="home"] .main-area { padding: var(--topbar-h) 0 60px; }
body[data-route="home"] #viewRoot { width: 100%; max-width: none; margin: 0; }
body[data-route="home"] .top-actions > .icon-btn,
body[data-route="home"] .avatar-button { display: none; }
body[data-route="home"] .guest-top-link,
body[data-route="home"] .guest-auth-link,
body[data-route="home"] .guest-register-link { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-size: 12px; font-weight: 800; }
body[data-route="home"] .guest-top-link { padding: 0 8px; color: var(--text-soft); }
body[data-route="home"] .guest-top-link:hover { color: var(--gold-deep); }
body[data-route="home"] .guest-auth-link { padding: 0 15px; gap: 7px; color: var(--text); border: 1px solid var(--line-strong); border-radius: 12px; }
body[data-route="home"] .guest-auth-link:hover { color: var(--gold-deep); background: var(--gold-wash); }
body[data-route="home"] .guest-register-link { padding: 0 17px; gap: 7px; color: #241704; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); border-radius: 12px; box-shadow: 0 7px 18px rgba(143,91,11,.16); }
.home-hero { position: relative; min-height: calc(100dvh - var(--topbar-h)); overflow: hidden; display: grid; grid-template-columns: 1.05fr .95fr; color: var(--text); background: linear-gradient(135deg,#fffdf8 0%,#f3e8d4 58%,#d6a84e 140%); border: 0; border-radius: 0; box-shadow: none; transition: background .28s ease,color .28s ease; }
.home-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 15%, rgba(210,154,51,.25), transparent 35rem); pointer-events: none; }
.home-hero-copy { position: relative; z-index: 2; padding: clamp(58px,7vw,110px) 38px clamp(54px,6vw,96px) max(52px,calc((100vw - 1440px)/2 + 70px)); display: flex; flex-direction: column; justify-content: center; }
.home-hero-copy h1 { max-width: 700px; margin: 10px 0 18px; font: 800 clamp(46px, 6vw, 84px)/.98 var(--font-display); letter-spacing: -.055em; }
.home-hero-copy h1 span { color: var(--gold-deep); }
.home-hero-copy > p { max-width: 610px; margin: 0 0 28px; color: var(--text-soft); font-size: 16px; line-height: 1.75; }
.home-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.home-actions .premium-btn, .home-actions .outline-btn { min-height: 50px; padding: 0 22px; }
.home-actions .outline-btn { color: var(--gold-deep); border-color: var(--line-strong); }
.home-proof { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 25px; }
.home-proof div { display: flex; align-items: center; gap: 9px; color: var(--text-soft); font-size: 12px; }
.home-proof i { color: var(--gold-deep); }
.home-hero-media { position: relative; min-height: calc(100dvh - var(--topbar-h)); overflow: hidden; }
.home-hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .94; filter: saturate(.82) contrast(1.04); transition: opacity .28s ease,filter .28s ease; }
.home-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,#f3e8d4 0%,rgba(243,232,212,0) 32%), linear-gradient(0deg,rgba(50,31,5,.38),transparent 46%); transition: background .28s ease; }
.home-float-card { position: absolute; z-index: 3; right: 30px; bottom: 30px; width: min(330px, calc(100% - 60px)); padding: 18px; color: #fff; background: rgba(17,15,11,.78); border: 1px solid rgba(238,201,121,.3); border-radius: 20px; backdrop-filter: blur(18px); }
.home-float-card strong, .home-float-card span { display: block; }
.home-float-card strong { margin-top: 5px; font-size: 15px; }
.home-float-card span { color: rgba(255,255,255,.62); font-size: 11px; }
.home-weekly-pulse { overflow:hidden; box-shadow:0 18px 46px rgba(0,0,0,.22); }
.home-weekly-slide { min-height:78px; }
.home-weekly-slide[hidden] { display:none; }
.home-weekly-slide.is-active { animation:homeWeeklySlideIn .32s ease both; }
.home-weekly-slide .eyebrow { color:var(--gold-bright); font-size:9px; letter-spacing:.14em; }
.home-weekly-slide strong { min-height:36px; line-height:1.28; }
.home-weekly-slide > span:last-child { margin-top:4px; line-height:1.4; }
.home-weekly-value { color:var(--gold-bright); font:800 22px/1 var(--font-display); }
.home-weekly-dots { min-height:16px; margin-top:8px; display:flex; align-items:center; gap:1px; }
.home-weekly-dot { width:20px; height:16px; padding:0; position:relative; background:transparent; border:0; border-radius:999px; cursor:pointer; }
.home-weekly-dot::before { content:""; width:6px; height:4px; position:absolute; top:6px; left:7px; background:rgba(255,255,255,.34); border-radius:999px; transition:width .18s ease,left .18s ease,background-color .18s ease; }
.home-weekly-dot.is-active::before { width:16px; left:2px; background:var(--gold-bright); }
.home-weekly-dot:focus-visible { outline:2px solid var(--gold-bright); outline-offset:1px; }
@keyframes homeWeeklySlideIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.home-section { width: min(calc(100% - 48px),1220px); margin: 0 auto; padding: 72px 0 0; }
.home-feed-showcase { width:100%; margin:0; padding:36px max(24px,calc((100% - 1220px)/2)) 42px; position:relative; overflow:hidden; background:radial-gradient(circle at 18% 0,rgba(210,154,51,.09),transparent 30%),linear-gradient(180deg,var(--bg) 0%,var(--surface-2) 18%,var(--surface-2) 82%,var(--bg) 100%); border:0; border-radius:0; box-shadow:none; }
.home-feed-showcase .dashboard-section-head { margin-bottom:21px; }
.home-feed-showcase .dashboard-section-head h2 { font-size:clamp(24px,2.3vw,31px); }
.home-feed-showcase .dashboard-section-head p { font-size:13px; line-height:1.55; }
html[data-theme="dark"] .home-feed-showcase { background:radial-gradient(circle at 18% 0,rgba(229,190,112,.08),transparent 31%),linear-gradient(180deg,var(--bg) 0%,#11171b 19%,#11171b 81%,var(--bg) 100%); }
.home-feed-showcase + .home-section { padding-top:54px; }
.home-section-heading { max-width: 700px; margin: 0 auto 30px; text-align: center; }
.home-section-heading h2 { margin: 7px 0 10px; font: 800 clamp(34px,5vw,52px)/1.05 var(--font-display); letter-spacing: -.04em; }
.home-section-heading p { margin: 0; color: var(--text-soft); font-size: 15px; }
.home-platform-intro { padding-bottom:30px; }
.home-platform-intro .home-section-heading { margin-bottom:0; }
.home-app-showcase { width:100%; position:relative; isolation:isolate; margin:0; padding:30px 24px 38px; overflow:hidden; color:var(--text); background:radial-gradient(circle at 76% 4%,rgba(210,154,51,.19),transparent 34%),linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 72%,var(--bg) 100%); border:0; border-radius:0; box-shadow:inset 0 1px rgba(143,105,39,.06); }
.home-app-showcase::before { content:""; position:absolute; z-index:-1; width:760px; height:760px; top:-520px; right:7%; background:radial-gradient(circle,rgba(210,154,51,.19),rgba(210,154,51,0) 69%); pointer-events:none; }
.home-app-showcase::after { content:""; position:absolute; z-index:-1; inset:0; opacity:.28; background-image:linear-gradient(rgba(143,105,39,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(143,105,39,.075) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 92%); mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 92%); pointer-events:none; }
.home-app-showcase-copy { position:relative; z-index:2; display:grid; justify-items:center; text-align:center; }
.home-app-showcase-copy > span { min-height:31px; padding:0 12px; display:inline-flex; align-items:center; gap:8px; color:var(--gold-deep); background:var(--gold-wash); border:1px solid rgba(180,130,40,.24); border-radius:999px; font-size:10px; font-weight:800; letter-spacing:.12em; }
.home-app-showcase-copy > strong { margin-top:12px; font:800 clamp(22px,3vw,32px)/1.12 var(--font-display); letter-spacing:-.03em; }
.home-app-showcase-copy > small { max-width:620px; margin-top:7px; color:var(--text-soft); font-size:13px; line-height:1.55; }
.home-app-showcase-media { width:min(100%,1180px); margin:-18px auto -14px; position:relative; z-index:1; }
.home-app-showcase-image { width:100%; height:auto; display:block; filter:drop-shadow(0 22px 24px rgba(16,13,8,.18)); }
.home-app-showcase-image-dark { display:none; }
html[data-theme="dark"] .home-app-showcase { background:radial-gradient(circle at 76% 4%,rgba(229,190,112,.13),transparent 35%),linear-gradient(180deg,#141a1e 0%,#101519 76%,var(--bg) 100%); box-shadow:inset 0 1px rgba(231,191,108,.08); }
html[data-theme="dark"] .home-app-showcase::before { background:radial-gradient(circle,rgba(229,190,112,.18),rgba(229,190,112,0) 70%); }
html[data-theme="dark"] .home-app-showcase::after { opacity:.28; background-image:linear-gradient(rgba(229,190,112,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(229,190,112,.08) 1px,transparent 1px); }
html[data-theme="dark"] .home-app-showcase-copy > span { color:var(--gold-bright); border-color:rgba(231,191,108,.24); }
html[data-theme="dark"] .home-app-showcase-image-light { display:none; }
html[data-theme="dark"] .home-app-showcase-image-dark { display:block; }
.home-platform-features { position:relative; z-index:3; margin-top:-34px; padding-top:0; }
.home-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.home-feature { min-height: 245px; padding: 25px; position: relative; overflow: hidden; }
.home-feature::after { content: ""; position: absolute; width: 120px; height: 120px; right: -35px; bottom: -45px; background: var(--gold-wash); border-radius: 50%; }
.home-feature-heading { position: relative; z-index: 1; margin-bottom: 16px; display: flex; align-items: center; gap: 14px; }
.home-feature-icon { width: 50px; height: 50px; flex: 0 0 50px; display: grid; place-items: center; color: #241704; background: linear-gradient(135deg,var(--gold-bright),var(--gold)); border-radius: 15px; font-size: 18px; }
.home-feature h3 { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; }
.home-feature p { margin: 0 0 18px; color: var(--text-soft); font-size: 13px; line-height: 1.7; }
.home-split { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.home-split-media { min-height: 420px; }
.home-split-media img { width: 100%; height: 100%; object-fit: cover; }
.home-split-copy { padding: 44px; display: flex; flex-direction: column; justify-content: center; }
.home-split-copy h2 { margin: 6px 0 12px; font: 800 42px/1.05 var(--font-display); letter-spacing: -.035em; }
.home-split-copy p { color: var(--text-soft); font-size: 14px; line-height: 1.75; }
.home-split-list { margin: 12px 0 24px; display: grid; gap: 13px; }
.home-split-list div { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; }
.home-split-list i { width: 29px; height: 29px; display: grid; place-items: center; color: var(--gold-deep); background: var(--gold-wash); border-radius: 9px; }
.home-cta { width: min(calc(100% - 48px),1220px); margin: 72px auto 0; padding: 48px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 25px; background: linear-gradient(120deg,var(--surface),var(--surface-2)); }
.home-cta h2 { margin: 4px 0 8px; font: 800 38px/1.06 var(--font-display); }
.home-cta p { margin: 0; color: var(--text-soft); font-size: 14px; }
.home-footer { width:min(calc(100% - 48px),1220px); margin:38px auto 18px; padding:30px 8px 10px; display:grid; grid-template-columns:1.35fr 1fr 1fr auto; gap:30px; color:var(--text-soft); border-top:1px solid var(--line); }
.home-hero { isolation:isolate; }
html[data-theme="dark"] .home-hero { color:#fff; background:#0b0f12; }
html[data-theme="dark"] .home-hero::before { background:radial-gradient(circle at 18% 15%,rgba(229,190,112,.10),transparent 34rem); }
html[data-theme="dark"] .home-hero-copy > p { color:rgba(255,255,255,.72); }
html[data-theme="dark"] .home-actions .outline-btn { color:#f0d79e; border-color:rgba(231,191,108,.42); }
html[data-theme="dark"] .home-proof div { color:rgba(255,255,255,.64); }
html[data-theme="dark"] .home-proof i { color:var(--gold-bright); }
html[data-theme="dark"] .home-hero-media > img { opacity:.82; filter:saturate(.72) brightness(.72) contrast(1.12); }
html[data-theme="dark"] .home-hero-media::after { background:linear-gradient(90deg,#0b0f12 0%,rgba(11,15,18,.78) 17%,transparent 43%),linear-gradient(0deg,rgba(5,8,10,.78),transparent 48%); }
.home-footer img { width:170px; }
.home-footer p { max-width:330px; margin:12px 0 0; color:var(--text-faint); font-size:12px; line-height:1.7; }
.home-footer nav { display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
.home-footer nav button { color:var(--text-soft); font-size:12px; font-weight:700; }
.home-footer nav button:hover { color:var(--gold-deep); }
.home-footer > span { align-self:end; color:var(--text-faint); font-size:10px; white-space:nowrap; }

/* Dokumenty i strony informacyjne */
body[data-route="privacy"] .right-rail, body[data-route="terms"] .right-rail,
body[data-route="cookies"] .right-rail, body[data-route="rodo"] .right-rail,
body[data-route="faq"] .right-rail, body[data-route="how"] .right-rail,
body[data-route="contact"] .right-rail, body[data-route="notice"] .right-rail,
body[data-route="ads"] .right-rail, body[data-route="roadmap"] .right-rail { display:none; }
body[data-route="privacy"] .main-area, body[data-route="terms"] .main-area,
body[data-route="cookies"] .main-area, body[data-route="rodo"] .main-area,
body[data-route="faq"] .main-area, body[data-route="how"] .main-area,
body[data-route="contact"] .main-area, body[data-route="notice"] .main-area,
body[data-route="ads"] .main-area, body[data-route="roadmap"] .main-area { padding-right:34px; }
body[data-route="privacy"] #viewRoot, body[data-route="terms"] #viewRoot,
body[data-route="cookies"] #viewRoot, body[data-route="rodo"] #viewRoot,
body[data-route="faq"] #viewRoot, body[data-route="how"] #viewRoot,
body[data-route="contact"] #viewRoot, body[data-route="notice"] #viewRoot,
body[data-route="ads"] #viewRoot, body[data-route="roadmap"] #viewRoot { width:min(100%,1040px); }
.legal-hero { padding: 42px; margin-bottom: 14px; background: linear-gradient(135deg,var(--surface),var(--surface-2)); }
.legal-hero h1 { margin: 6px 0 11px; font: 800 clamp(38px,5vw,56px)/1 var(--font-display); letter-spacing: -.04em; }
.legal-hero p { max-width: 700px; margin: 0; color: var(--text-soft); font-size: 14px; }
.legal-meta { margin-top: 22px; display:flex; flex-wrap:wrap; gap:16px; color:var(--text-faint); font-size:11px; }
.legal-meta i { margin-right:6px; color:var(--gold-deep); }
.legal-layout { display:grid; grid-template-columns:230px 1fr; gap:14px; }
.legal-nav { padding:12px; align-self:start; position:sticky; top:calc(var(--topbar-h) + 20px); }
.legal-nav button,.legal-nav a { width:100%; min-height:42px; padding:0 12px; display:flex; align-items:center; gap:10px; color:var(--text-soft); border-radius:10px; text-align:left; font-size:12px; font-weight:700; }
.legal-nav button.active,.legal-nav button:hover,.legal-nav a.active,.legal-nav a:hover { color:var(--text); background:var(--gold-wash); }
.legal-nav i { width:17px; color:var(--gold-deep); }
.legal-article { padding:36px; }
.legal-article h2 { margin:32px 0 10px; font-size:24px; font-weight:800; }
.legal-article h2:first-child { margin-top:0; }
.legal-article h3 { margin:22px 0 8px; font-size:17px; font-weight:800; }
.legal-article p, .legal-article li { color:var(--text-soft); font-size:14px; line-height:1.82; }
.legal-article ul { padding-left:20px; }
.legal-callout { margin:22px 0; padding:17px; display:flex; gap:12px; background:var(--gold-wash); border:1px solid var(--line-strong); border-radius:14px; }
.legal-callout i { margin-top:3px; color:var(--gold-deep); }
.legal-tabs-layout { align-items:start; }
.legal-tab-list a {
  position:relative;
  border:1px solid transparent;
  text-decoration:none;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.legal-tab-list a:hover { transform:translateX(2px); }
.legal-tab-list a.active {
  border-color:var(--line-strong);
  box-shadow:inset 3px 0 0 var(--gold-deep);
}
.legal-panel { min-width:0; }
.legal-admin-content { min-width:0; overflow-wrap:anywhere; }
.legal-admin-content .su-legal-section + .su-legal-section {
  margin-top:30px;
  padding-top:30px;
  border-top:1px solid var(--line);
}
.legal-admin-content .su-legal-section > h2:first-child {
  margin-top:0;
  color:var(--text);
}
.legal-admin-content p { margin:0 0 12px; }
.legal-admin-content p:last-child { margin-bottom:0; }
.legal-admin-content ul,.legal-admin-content ol { margin:12px 0 0; padding-left:22px; }
.legal-admin-content li + li { margin-top:6px; }
.legal-admin-content strong { color:var(--text); font-weight:800; }
.legal-admin-content a { color:var(--gold-deep); font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.legal-admin-content blockquote {
  margin:20px 0;
  padding:16px 18px;
  color:var(--text-soft);
  background:var(--gold-wash);
  border-left:3px solid var(--gold-deep);
  border-radius:0 14px 14px 0;
}
.legal-admin-content table { width:100%; margin:20px 0; border-collapse:separate; border-spacing:0; font-size:13px; }
.legal-admin-content th,.legal-admin-content td { padding:12px; text-align:left; border-bottom:1px solid var(--line); }
.legal-admin-content th { color:var(--text); background:var(--surface-2); font-weight:800; }
.legal-empty-state { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.legal-empty-state > span { width:54px; height:54px; display:grid; place-items:center; margin-bottom:16px; color:var(--gold-deep); background:var(--gold-wash); border-radius:16px; font-size:20px; }
.legal-empty-state h2 { margin:0 0 8px; font-size:22px; }
.legal-empty-state p { margin:0 0 18px; }
.faq-list { display:grid; gap:8px; }
.faq-item { overflow:hidden; border:1px solid var(--line); border-radius:14px; }
.faq-item h4 { margin:0; }
.faq-question { width:100%; min-height:58px; padding:0 17px; display:flex; justify-content:space-between; align-items:center; text-align:left; font-size:14px; font-weight:800; }
.faq-question i { color:var(--gold-deep); transition:.2s ease; }
.faq-answer { display:none; padding:0 17px 17px; color:var(--text-soft); font-size:13px; line-height:1.7; }
.faq-item.open .faq-answer { display:block; }
.faq-item.open .faq-question i { transform:rotate(180deg); }
.faq-shell { min-width:0; padding:32px; }
.faq-tools { margin-bottom:18px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.faq-tools h2 { margin:5px 0 0; font:800 27px/1.15 var(--font-display); letter-spacing:-.025em; }
.faq-result-count { flex:0 0 auto; padding:7px 11px; color:var(--gold-deep); background:var(--gold-wash); border:1px solid var(--line-strong); border-radius:999px; font-size:11px; font-weight:800; }
.faq-search { margin-bottom:26px; }
.faq-search:focus-within { border-color:var(--gold-deep); box-shadow:0 0 0 3px var(--gold-wash); }
.faq-search-clear { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; color:var(--text-soft); background:var(--surface); border:1px solid var(--line); border-radius:50%; }
.faq-search-clear:hover { color:var(--text); border-color:var(--line-strong); }
.faq-groups { display:grid; gap:27px; }
.faq-group-title { margin-bottom:10px; display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:10px; }
.faq-group-title > span { width:36px; height:36px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:11px; }
.faq-group-title h3 { margin:0; font-size:15px; font-weight:800; }
.faq-group-title b { min-width:27px; height:27px; display:grid; place-items:center; color:var(--text-faint); background:var(--surface-2); border-radius:999px; font-size:10px; }
.faq-item { background:var(--surface-2); transition:border-color .2s ease,background-color .2s ease; }
.faq-item:hover,.faq-item.open { border-color:var(--line-strong); }
.faq-item.open { background:var(--surface); }
.faq-question:focus-visible { outline:2px solid var(--gold-deep); outline-offset:-3px; }
.faq-answer p { margin:0; }
.faq-contact-card { margin-top:28px; padding:20px; display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:15px; background:linear-gradient(135deg,var(--gold-wash),var(--surface-2)); border:1px solid var(--line-strong); border-radius:16px; }
.faq-contact-card > span { width:48px; height:48px; display:grid; place-items:center; color:var(--gold-deep); background:var(--surface); border:1px solid var(--line); border-radius:14px; font-size:18px; }
.faq-contact-card small { display:block; margin-bottom:3px; color:var(--gold-deep); font-size:9px; font-weight:800; letter-spacing:.14em; }
.faq-contact-card strong { display:block; color:var(--text); font-size:14px; }
.faq-contact-card p { margin:4px 0 0; color:var(--text-soft); font-size:11px; }
.faq-contact-card .premium-btn { min-width:116px; }
.faq-empty-state { min-height:270px; padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.faq-empty-state > span { width:50px; height:50px; display:grid; place-items:center; margin-bottom:14px; color:var(--gold-deep); background:var(--gold-wash); border-radius:15px; font-size:19px; }
.faq-empty-state h3 { margin:0 0 7px; font-size:19px; font-weight:800; }
.faq-empty-state p { max-width:450px; margin:0 0 18px; color:var(--text-soft); font-size:12px; line-height:1.65; }
.faq-item[hidden],.faq-group[hidden],.faq-answer[hidden],.faq-empty-state[hidden],.faq-search-clear[hidden] { display:none !important; }
body[data-route="how"] #viewRoot { width:min(100%,1120px); }
.how-hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-bottom:28px;
  padding:clamp(34px,5vw,58px);
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  align-items:center;
  gap:clamp(34px,6vw,72px);
  background:
    radial-gradient(circle at 92% 12%,rgba(224,171,57,.23),transparent 32%),
    linear-gradient(135deg,var(--surface-solid),var(--surface-2));
}
.how-hero::before,
.how-hero::after {
  content:"";
  position:absolute;
  z-index:-1;
  border:1px solid var(--line-strong);
  border-radius:50%;
  pointer-events:none;
}
.how-hero::before { width:290px; height:290px; right:-112px; top:-145px; }
.how-hero::after { width:180px; height:180px; right:124px; bottom:-132px; }
.how-hero-copy h1 {
  max-width:690px;
  margin:8px 0 18px;
  font:800 clamp(40px,5.4vw,66px)/.98 var(--font-display);
  letter-spacing:-.055em;
}
.how-hero-copy > p {
  max-width:650px;
  margin:0;
  color:var(--text-soft);
  font-size:15px;
  line-height:1.75;
}
.how-hero-actions { margin-top:26px; display:flex; flex-wrap:wrap; gap:10px; }
.how-action-btn {
  min-height:48px;
  padding:0 19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:13px;
  font-size:11px;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
}
.how-action-btn i {
  width:16px;
  flex:0 0 16px;
  display:grid;
  place-items:center;
  margin:0;
  font-size:12px;
  line-height:1;
}
.how-action-btn span { display:block; }
.how-action-btn .fa-arrow-right { transition:transform .2s ease; }
.how-action-btn:hover .fa-arrow-right { transform:translateX(2px); }
.how-hero-path { position:relative; display:grid; gap:12px; }
.how-hero-path::before {
  content:"";
  position:absolute;
  top:34px;
  bottom:34px;
  left:27px;
  width:2px;
  background:linear-gradient(var(--gold-bright),var(--gold-deep));
  opacity:.55;
}
.how-hero-path > div {
  position:relative;
  min-height:72px;
  padding:12px 16px 12px 11px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:12px;
  background:color-mix(in srgb,var(--surface-solid) 88%,transparent);
  border:1px solid var(--line-strong);
  border-radius:17px;
  box-shadow:0 14px 30px rgba(57,39,10,.06);
}
.how-hero-path > div:nth-child(2) { transform:translateX(24px); }
.how-hero-path i {
  position:relative;
  z-index:1;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:#211606;
  background:linear-gradient(145deg,var(--gold-light),var(--gold));
  border-radius:13px;
  font-size:17px;
}
.how-hero-path small,
.how-hero-path strong { display:block; }
.how-hero-path small { margin-bottom:2px; color:var(--gold-deep); font-size:9px; font-weight:900; letter-spacing:.16em; }
.how-hero-path strong { font-size:14px; }
.how-section-head {
  margin:0 2px 18px;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
}
.how-section-head h2 { margin:5px 0 0; font-size:clamp(27px,3vw,36px); line-height:1.12; letter-spacing:-.035em; }
.how-section-head > p { max-width:410px; margin:0; color:var(--text-soft); font-size:13px; line-height:1.65; text-align:right; }
.how-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.how-step {
  position:relative;
  overflow:hidden;
  min-height:238px;
  padding:24px;
  display:flex;
  flex-direction:column;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.how-step::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(var(--gold-bright),var(--gold-deep));
  opacity:.82;
}
.how-step:hover { transform:translateY(-3px); border-color:var(--line-strong); box-shadow:0 18px 42px rgba(57,39,10,.1); }
.how-step-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.how-number {
  min-width:44px;
  height:30px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#241704;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  border-radius:9px;
  font-size:11px;
  font-weight:900;
}
.how-stage { color:var(--gold-deep); font-size:9px; font-weight:900; letter-spacing:.16em; }
.how-step-main { margin-top:22px; display:grid; grid-template-columns:52px minmax(0,1fr); align-items:start; gap:15px; }
.how-step-icon {
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  color:var(--gold-deep);
  background:var(--gold-wash);
  border:1px solid var(--line-strong);
  border-radius:16px;
  font-size:20px;
}
.how-step h3 { margin:0 0 7px; font-size:19px; line-height:1.3; }
.how-step p { margin:0; color:var(--text-soft); font-size:13px; line-height:1.65; }
.how-result {
  margin:20px 0 0 67px;
  padding-top:13px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-faint);
  border-top:1px solid var(--line);
  font-size:10.5px;
  font-weight:700;
}
.how-result i {
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--success);
  border-radius:50%;
  font-size:8px;
}
.how-areas-head { margin-top:44px; }
.how-areas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.how-area-card {
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:25px;
  background:linear-gradient(145deg,var(--surface-solid),var(--surface-2));
}
.how-area-card::after {
  content:"";
  position:absolute;
  right:-62px;
  bottom:-76px;
  width:160px;
  height:160px;
  background:var(--gold-wash);
  border-radius:50%;
  pointer-events:none;
  opacity:.75;
}
.how-area-wide { grid-column:1 / -1; }
.how-area-heading { position:relative; z-index:1; display:flex; align-items:center; gap:14px; }
.how-area-icon {
  width:50px;
  height:50px;
  flex:0 0 50px;
  display:grid;
  place-items:center;
  color:#241704;
  background:linear-gradient(145deg,var(--gold-light),var(--gold));
  border-radius:15px;
  font-size:18px;
}
.how-area-heading h3 { margin:4px 0 0; font-size:21px; line-height:1.2; letter-spacing:-.025em; }
.how-area-card > p { position:relative; z-index:1; max-width:820px; margin:17px 0 0; color:var(--text-soft); font-size:13px; line-height:1.7; }
.how-feature-tags { position:relative; z-index:1; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.how-feature-tags li {
  min-height:34px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  color:var(--text-soft);
  background:var(--surface-solid);
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-size:10.5px;
  font-weight:750;
}
.how-feature-list { position:relative; z-index:1; margin:17px 0 0; padding:0; display:grid; gap:8px; list-style:none; }
.how-feature-list li {
  min-height:43px;
  padding:8px 11px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:9px;
  color:var(--text-soft);
  background:color-mix(in srgb,var(--surface-solid) 84%,transparent);
  border:1px solid var(--line);
  border-radius:12px;
  font-size:11px;
  font-weight:700;
}
.how-feature-list i { width:30px; height:30px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:9px; font-size:11px; }
.how-area-coming { isolation:isolate; border-style:dashed; }
.how-area-coming::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:repeating-linear-gradient(135deg,transparent 0 18px,color-mix(in srgb,var(--gold-wash) 42%,transparent) 18px 19px);
  opacity:.65;
}
.how-soon-badge {
  position:absolute;
  z-index:2;
  top:20px;
  right:20px;
  min-height:30px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#241704;
  background:linear-gradient(135deg,var(--gold-light),var(--gold));
  border-radius:999px;
  font-size:9px;
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.how-cta {
  margin-top:18px;
  padding:28px 30px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  background:linear-gradient(120deg,var(--surface-solid),var(--gold-wash));
}
.how-cta-icon {
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  color:#211606;
  background:linear-gradient(145deg,var(--gold-light),var(--gold));
  border-radius:18px;
  font-size:21px;
}
.how-cta h2 { margin:4px 0 4px; font-size:23px; letter-spacing:-.025em; }
.how-cta p { margin:0; color:var(--text-soft); font-size:12px; }
.how-cta > .how-action-btn { min-height:48px; padding-inline:19px; white-space:nowrap; }
html[data-theme="dark"] .how-hero {
  background:
    radial-gradient(circle at 92% 12%,rgba(229,190,112,.08),transparent 32%),
    linear-gradient(135deg,var(--surface-solid),var(--surface-2));
}
@media (max-width: 940px) {
  .how-hero { grid-template-columns:1fr; }
  .how-hero-path { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .how-hero-path::before { top:34px; right:34px; bottom:auto; left:34px; width:auto; height:2px; }
  .how-hero-path > div { min-height:82px; grid-template-columns:40px minmax(0,1fr); }
  .how-hero-path > div:nth-child(2) { transform:none; }
}
@media (max-width: 767.98px) {
  body[data-route="how"] #viewRoot { width:100%; }
  .how-hero { margin-bottom:28px; padding:34px 18px; gap:30px; border-right:0; border-left:0; border-radius:0; }
  .how-hero-copy h1 { max-width:560px; font-size:clamp(39px,11.2vw,51px); }
  .how-hero-copy > p { font-size:14px; line-height:1.7; }
  .how-hero-actions { display:grid; grid-template-columns:1fr; }
  .how-hero-actions .how-action-btn { width:100%; justify-content:center; }
  .how-hero-path { grid-template-columns:1fr; }
  .how-hero-path::before { top:31px; right:auto; bottom:31px; left:30px; width:2px; height:auto; }
  .how-hero-path > div { min-height:66px; padding-block:10px; }
  .how-section-head { margin:0; padding:0 18px 16px; display:block; }
  .how-section-head h2 { font-size:30px; }
  .how-section-head > p { margin-top:10px; font-size:12.5px; text-align:left; }
  .how-grid { padding:0 12px; gap:10px; }
  .how-step { min-height:0; padding:20px 18px 18px; }
  .how-step-main { grid-template-columns:46px minmax(0,1fr); gap:13px; }
  .how-step-icon { width:46px; height:46px; border-radius:14px; font-size:18px; }
  .how-step h3 { font-size:18px; }
  .how-step p { font-size:12.5px; }
  .how-result { margin-left:59px; }
  .how-areas-head { margin-top:34px; }
  .how-areas { padding:0 12px; grid-template-columns:1fr; gap:10px; }
  .how-area-wide { grid-column:auto; }
  .how-area-card { padding:20px 18px; }
  .how-area-icon { width:46px; height:46px; flex-basis:46px; border-radius:14px; font-size:17px; }
  .how-area-heading h3 { font-size:19px; }
  .how-area-card > p { margin-top:14px; font-size:12.5px; }
  .how-feature-tags { margin-top:15px; gap:6px; }
  .how-feature-tags li { min-height:32px; padding-inline:10px; font-size:10px; }
  .how-soon-badge { top:17px; right:17px; }
  .how-area-coming .how-area-heading { padding-right:82px; }
  .how-cta { margin-top:14px; padding:26px 18px calc(26px + env(safe-area-inset-bottom)); grid-template-columns:48px minmax(0,1fr); border-right:0; border-left:0; border-radius:0; }
  .how-cta-icon { width:48px; height:48px; border-radius:15px; font-size:18px; }
  .how-cta h2 { font-size:21px; }
  .how-cta > .how-action-btn { grid-column:1 / -1; width:100%; justify-content:center; }
}
.contact-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:14px; }
.contact-card { padding:28px; }
.contact-method { padding:15px 0; display:grid; grid-template-columns:40px 1fr; gap:11px; border-top:1px solid var(--line); }
.contact-method i { width:40px; height:40px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:12px; }
.contact-method strong,.contact-method span { display:block; }
.contact-method strong { font-size:13px; }
.contact-method span { color:var(--text-soft); font-size:11px; }

/* Rejestracja i onboarding */
body[data-route="register"] .right-rail, body[data-route="profile-create"] .right-rail,
body[data-route="company-create"] .right-rail, body[data-route="password"] .right-rail,
body[data-route="account-active"] .right-rail, body[data-route="system"] .right-rail { display:none; }
body[data-route="register"] .main-area, body[data-route="profile-create"] .main-area,
body[data-route="company-create"] .main-area, body[data-route="password"] .main-area,
body[data-route="account-active"] .main-area, body[data-route="system"] .main-area { padding-right:34px; }
body[data-route="register"] #viewRoot, body[data-route="profile-create"] #viewRoot,
body[data-route="company-create"] #viewRoot, body[data-route="password"] #viewRoot,
body[data-route="account-active"] #viewRoot, body[data-route="system"] #viewRoot { width:min(100%,1040px); }
.account-shell { min-height:calc(100vh - var(--topbar-h) - 48px); display:grid; grid-template-columns:.92fr 1.08fr; overflow:hidden; }
.account-aside { padding:45px; color:#fff; background:linear-gradient(20deg,rgba(5,4,3,.9),rgba(5,4,3,.18)),url("../images/hero-detailing.jpg") center/cover; }
.account-aside h1 { margin:10px 0 13px; font:800 47px/1 var(--font-display); letter-spacing:-.045em; }
.account-aside p { color:rgba(255,255,255,.68); font-size:13px; line-height:1.7; }
.account-benefits { margin-top:30px; display:grid; gap:14px; }
.account-benefits div { display:flex; align-items:center; gap:11px; font-size:12px; font-weight:700; }
.account-benefits i { width:31px; height:31px; display:grid; place-items:center; color:#251704; background:var(--gold-bright); border-radius:10px; }
.account-form { padding:42px; }
.account-form h2 { margin:6px 0 8px; font-size:32px; font-weight:800; letter-spacing:-.03em; }
.account-form > p { margin:0 0 24px; color:var(--text-soft); font-size:13px; }
.form-check-row { display:flex; align-items:flex-start; gap:9px; color:var(--text-soft); font-size:11px; line-height:1.5; }
.form-check-row input { margin-top:3px; accent-color:var(--gold); }
.onboarding-shell { overflow:hidden; }
.onboarding-head { padding:27px; display:flex; justify-content:space-between; gap:20px; align-items:center; border-bottom:1px solid var(--line); }
.onboarding-head h1 { margin:4px 0 0; font-size:29px; font-weight:800; }
.onboarding-progress { min-width:230px; }
.onboarding-progress div { height:7px; background:var(--surface-3); border-radius:99px; overflow:hidden; }
.onboarding-progress i { display:block; width:34%; height:100%; background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright)); border-radius:inherit; }
.onboarding-progress span { display:block; margin-top:5px; color:var(--text-faint); font-size:10px; text-align:right; }
.onboarding-body { display:grid; grid-template-columns:1fr 310px; }
.onboarding-form { padding:30px; }
.avatar-upload { display:flex; align-items:center; gap:16px; margin-bottom:24px; }
.avatar-upload img { width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--gold); }
.avatar-upload strong,.avatar-upload span { display:block; }
.avatar-upload strong { font-size:14px; }
.avatar-upload span { color:var(--text-faint); font-size:11px; }
.onboarding-preview { padding:25px; background:var(--surface-2); border-left:1px solid var(--line); }
.mini-profile-preview { overflow:hidden; }
.mini-profile-cover { height:110px; background:url("../images/feed-mustang.webp") center/cover; }
.mini-profile-copy { padding:0 15px 17px; }
.mini-profile-copy img { width:70px; height:70px; margin-top:-35px; border:3px solid var(--surface-solid); border-radius:50%; object-fit:cover; }
.mini-profile-copy h3 { margin:10px 0 2px; font-size:17px; }
.mini-profile-copy span,.mini-profile-copy p { color:var(--text-faint); font-size:10px; }
.system-hero { max-width:820px; margin-inline:auto; padding:clamp(32px,6vw,70px); text-align:center; }
.system-hero .home-actions { justify-content:center; }
.system-icon { width:72px; height:72px; margin:0 auto 22px; display:grid; place-items:center; color:#23190a; background:linear-gradient(145deg,var(--gold-light),var(--gold)); border-radius:50%; box-shadow:0 16px 36px rgba(177,130,44,.24); font-size:28px; }

/* Przerwa techniczna — samodzielny ekran systemowy dla desktopu i mobile. */
body[data-page="maintenance"] {
  --maintenance-accent-start:#f2cb6c;
  --maintenance-accent-end:#cf962f;
  --maintenance-accent-ink:#211506;
  min-width:320px;
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
  color:var(--text);
  background:
    radial-gradient(circle at 14% 16%,color-mix(in srgb,var(--gold) 18%,transparent) 0,transparent 31rem),
    radial-gradient(circle at 88% 82%,color-mix(in srgb,var(--gold-bright) 24%,transparent) 0,transparent 27rem),
    var(--bg);
}
.maintenance-shell { width:100%; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.maintenance-header { width:100%; min-height:92px; padding:calc(14px + env(safe-area-inset-top)) clamp(24px,3vw,48px) 14px; flex:0 0 auto; background:color-mix(in srgb,var(--surface-solid) 88%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); }
.maintenance-header-inner { width:min(1160px,100%); min-height:63px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.maintenance-brand { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:flex-start; line-height:0; }
.maintenance-brand img { width:176px; height:auto; display:block; }
.maintenance-theme { min-width:112px; min-height:44px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:9px; color:var(--text); background:var(--surface); border:1px solid var(--line-strong); border-radius:999px; box-shadow:var(--shadow-soft); font-size:12px; font-weight:800; }
.maintenance-theme i { width:26px; height:26px; display:grid; place-items:center; color:var(--maintenance-accent-ink); background:linear-gradient(145deg,var(--maintenance-accent-start),var(--maintenance-accent-end)); border-radius:50%; box-shadow:0 4px 12px rgba(201,146,52,.2); }
.maintenance-main { width:100%; padding:clamp(28px,4vw,56px); flex:1 1 auto; display:grid; place-items:center; }
.maintenance-card { width:min(1160px,100%); min-height:min(650px,calc(100dvh - 196px)); overflow:hidden; display:grid; grid-template-columns:minmax(0,.96fr) minmax(420px,1.04fr); background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:30px; box-shadow:0 30px 80px rgba(76,52,17,.16); }
.maintenance-visual { position:relative; min-height:100%; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:30px; color:#fff; background:linear-gradient(18deg,rgba(7,6,4,.94),rgba(7,6,4,.2) 70%),url("../images/hero-detailing.jpg") center/cover; isolation:isolate; }
.maintenance-visual::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg,rgba(223,168,61,.18),transparent 45%); }
.maintenance-visual::after { content:""; width:360px; height:360px; position:absolute; right:-170px; bottom:-190px; z-index:-1; border:1px solid rgba(229,180,83,.36); border-radius:50%; box-shadow:0 0 0 58px rgba(218,162,52,.04),0 0 0 116px rgba(218,162,52,.025); }
.maintenance-visual-badge { width:max-content; min-height:36px; padding:0 13px; display:inline-flex; align-items:center; gap:8px; background:rgba(14,12,8,.66); border:1px solid rgba(255,255,255,.25); border-radius:999px; backdrop-filter:blur(10px); font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.maintenance-visual-badge i { width:8px; height:8px; background:#2bc493; border-radius:50%; box-shadow:0 0 0 5px rgba(43,196,147,.14); animation:maintenancePulse 1.8s ease-in-out infinite; }
.maintenance-visual-copy { position:relative; z-index:1; }
.maintenance-visual-copy span { display:block; margin-bottom:10px; color:#e7b74e; font-size:11px; font-weight:800; letter-spacing:.18em; }
.maintenance-visual-copy strong { display:block; max-width:440px; font-size:clamp(38px,4vw,58px); line-height:.98; letter-spacing:-.045em; text-wrap:balance; }
.maintenance-content { min-width:0; padding:clamp(42px,5vw,76px); display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.maintenance-icon { width:66px; height:66px; margin-bottom:25px; display:grid; place-items:center; color:var(--maintenance-accent-ink); background:linear-gradient(145deg,var(--maintenance-accent-start),var(--maintenance-accent-end)); border:1px solid rgba(111,70,8,.22); border-radius:20px; box-shadow:0 16px 34px rgba(177,130,44,.24); font-size:25px; transform:rotate(-3deg); }
.maintenance-content .eyebrow { margin-bottom:10px; }
.maintenance-content h1 { max-width:580px; margin:0; color:var(--text); font-size:clamp(42px,4vw,62px); line-height:1.01; letter-spacing:-.052em; text-wrap:balance; }
.maintenance-content > p:not(.maintenance-help) { max-width:590px; margin:20px 0 0; color:var(--text-soft); font-size:15px; line-height:1.72; }
.maintenance-status { width:100%; max-width:590px; min-height:78px; margin-top:28px; padding:15px 17px; display:grid; grid-template-columns:12px minmax(0,1fr); gap:13px; align-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:17px; }
.maintenance-status-dot { width:10px; height:10px; background:var(--maintenance-accent-end); border-radius:50%; box-shadow:0 0 0 6px rgba(207,150,47,.14); animation:maintenancePulse 1.8s ease-in-out infinite; }
.maintenance-status strong,.maintenance-status small { display:block; }
.maintenance-status strong { color:var(--text); font-size:12px; line-height:1.35; }
.maintenance-status small { margin-top:4px; color:var(--text-soft); font-size:10px; line-height:1.45; }
.maintenance-reload { min-width:205px; min-height:52px; margin-top:24px; padding:0 21px; display:inline-flex; align-items:center; justify-content:center; gap:10px; color:var(--maintenance-accent-ink); background:linear-gradient(135deg,var(--maintenance-accent-start),var(--maintenance-accent-end)); border:1px solid rgba(111,70,8,.3); border-radius:14px; box-shadow:0 14px 28px rgba(177,130,44,.22); font-size:12px; font-weight:850; }
.maintenance-reload i,.maintenance-reload span { color:inherit; }
.maintenance-reload:hover { transform:translateY(-1px); box-shadow:0 18px 34px rgba(177,130,44,.28); }
.maintenance-reload:active { transform:translateY(0); }
.maintenance-help { margin:18px 0 0; color:var(--text-soft); font-size:10.5px; }
.maintenance-help a { color:var(--gold-deep); font-weight:800; }
.maintenance-footer { width:min(1160px,calc(100% - clamp(48px,6vw,96px))); min-height:56px; margin:0 auto; padding:0 0 max(8px,env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:space-between; gap:20px; color:var(--text-soft); font-size:9.5px; font-weight:700; letter-spacing:.03em; }
html[data-theme="dark"] body[data-page="maintenance"] { background:radial-gradient(circle at 15% 18%,rgba(229,190,112,.08),transparent 32rem),radial-gradient(circle at 88% 82%,rgba(255,255,255,.025),transparent 28rem),#0b0f12; }
html[data-theme="dark"] .maintenance-card { border-color:rgba(190,202,212,.24); box-shadow:0 34px 90px rgba(0,0,0,.42); }
html[data-theme="dark"] .maintenance-status { background:color-mix(in srgb,var(--surface-2) 92%,#000); }
html[data-theme="dark"] :is(.maintenance-theme i,.maintenance-icon,.maintenance-reload) { color:#101316; }
html[data-theme="dark"] .maintenance-theme { color:var(--text); background:#171c20; border-color:rgba(190,202,212,.24); }
html[data-theme="dark"] .maintenance-reload { box-shadow:0 16px 34px rgba(0,0,0,.34),0 0 0 1px rgba(240,204,121,.08); }
@keyframes maintenancePulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.55; transform:scale(.78); } }

@media (max-width:760px) {
  body[data-page="maintenance"] { background:var(--bg); }
  .maintenance-header { min-height:76px; padding:calc(10px + env(safe-area-inset-top)) 16px 10px; }
  .maintenance-header-inner { min-height:55px; }
  .maintenance-brand img { width:148px; }
  .maintenance-theme { min-width:42px; width:42px; min-height:42px; padding:0; }
  .maintenance-theme i { width:30px; height:30px; }
  .maintenance-theme span { display:none; }
  .maintenance-main { padding:14px 14px 20px; place-items:center; }
  .maintenance-card { min-height:0; grid-template-columns:1fr; border-radius:23px; }
  .maintenance-visual { min-height:220px; padding:19px; }
  .maintenance-visual::after { width:230px; height:230px; right:-120px; bottom:-135px; }
  .maintenance-visual-badge { min-height:31px; padding:0 11px; font-size:8px; }
  .maintenance-visual-copy span { margin-bottom:7px; font-size:8px; }
  .maintenance-visual-copy strong { max-width:290px; font-size:34px; line-height:1; }
  .maintenance-content { padding:29px 23px 26px; align-items:stretch; }
  .maintenance-icon { width:54px; height:54px; margin-bottom:20px; border-radius:17px; font-size:21px; }
  .maintenance-content h1 { max-width:390px; font-size:clamp(34px,10vw,44px); line-height:1.02; }
  .maintenance-content > p:not(.maintenance-help) { margin-top:15px; font-size:13px; line-height:1.62; }
  .maintenance-status { min-height:72px; margin-top:21px; padding:13px 14px; border-radius:15px; }
  .maintenance-status strong { font-size:11px; }
  .maintenance-status small { font-size:9px; }
  .maintenance-reload { width:100%; min-height:50px; margin-top:18px; }
  .maintenance-help { margin-top:15px; text-align:center; }
  .maintenance-footer { width:calc(100% - 34px); min-height:50px; padding:0 0 max(9px,env(safe-area-inset-bottom)); font-size:8.5px; }
}

@media (max-width:420px) and (max-height:760px) {
  .maintenance-main { padding-top:10px; }
  .maintenance-visual { min-height:168px; }
  .maintenance-visual-copy strong { font-size:29px; }
  .maintenance-content { padding:22px 20px 20px; }
  .maintenance-icon { width:46px; height:46px; margin-bottom:15px; font-size:18px; }
  .maintenance-content h1 { font-size:31px; }
  .maintenance-content > p:not(.maintenance-help) { font-size:12px; }
  .maintenance-status { margin-top:16px; }
  .maintenance-reload { margin-top:15px; }
}

@media (prefers-reduced-motion:reduce) {
  .maintenance-visual-badge i,.maintenance-status-dot { animation:none; }
  .maintenance-reload { transition:none; }
}

/* Wideo i Shorts — układ inspirowany ergonomią YouTube */
body[data-route="watch"] .right-rail,
body[data-route="short"] .right-rail { display:none; }
body[data-route="watch"] .main-area,
body[data-route="short"] .main-area { padding-right:30px; }
body[data-route="videos"] #viewRoot, body[data-route="watch"] #viewRoot,
body[data-route="shorts"] #viewRoot { width:min(100%,1180px); }
body[data-route="short"] #viewRoot { width:min(100%,900px); }
.yt-filter-row { margin-bottom:18px; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; }
.yt-filter-row button { min-height:38px; padding:0 14px; white-space:nowrap; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:10px; font-size:12px; font-weight:700; }
.yt-filter-row button.active { color:#241704; background:var(--gold-bright); border-color:transparent; }
.yt-video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px 16px; }
.yt-video-card { text-align:left; }
.yt-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:#0b0a08; border-radius:14px; }
.yt-thumb img { width:100%; height:100%; object-fit:cover; transition:.3s ease; }
.yt-video-card:hover .yt-thumb img { transform:scale(1.025); }
.yt-duration { position:absolute; right:7px; bottom:7px; padding:3px 6px; color:#fff; background:rgba(0,0,0,.78); border-radius:5px; font-size:9px; font-weight:800; }
.yt-play-hover { position:absolute; inset:50% auto auto 50%; width:46px; height:46px; display:grid; place-items:center; transform:translate(-50%,-50%); opacity:0; color:#241704; background:var(--gold-bright); border-radius:50%; transition:.2s ease; }
.yt-video-card:hover .yt-play-hover { opacity:1; }
.yt-video-meta { padding:12px 3px 0; display:grid; grid-template-columns:39px 1fr auto; gap:10px; }
.yt-video-meta img { width:39px; height:39px; border-radius:50%; object-fit:cover; }
.yt-video-meta h3 { margin:0 0 5px; font-size:14px; line-height:1.45; font-weight:800; }
.yt-video-meta span { display:block; color:var(--text-faint); font-size:11px; }
.yt-video-meta > i { color:var(--text-faint); }
.yt-shorts-strip { margin:32px 0; padding-top:24px; border-top:1px solid var(--line); }
.yt-media-stream { width:100%; }
.yt-shorts-title { margin-bottom:15px; display:flex; align-items:center; gap:10px; }
.yt-shorts-title i { color:var(--gold-deep); font-size:20px; }
.yt-shorts-title h2 { margin:0; font-size:22px; }
.yt-shorts-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.yt-short-tile { min-width:0; text-align:left; }
.yt-short-cover { aspect-ratio:9/16; overflow:hidden; border-radius:14px; background:#111; }
.yt-short-cover img { width:100%; height:100%; object-fit:cover; }
.yt-short-tile strong { display:block; margin:8px 2px 3px; font-size:12px; line-height:1.4; }
.yt-short-tile span { color:var(--text-faint); font-size:10px; }

body[data-route="videos"] .yt-video-toolbar {
  margin-bottom:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

body[data-route="videos"] .yt-video-toolbar .yt-filter-row {
  flex:0 0 auto;
  margin:0;
  padding:0;
}

body[data-route="videos"] .yt-video-search {
  width:min(100%,430px);
  min-height:42px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-faint);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:13px;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

body[data-route="videos"] .yt-video-search:focus-within {
  color:var(--gold-deep);
  background:var(--surface-solid);
  border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(204,145,31,.13);
}

body[data-route="videos"] .yt-video-search input {
  min-width:0;
  width:100%;
  height:40px;
  padding:0;
  color:var(--text);
  background:transparent;
  border:0;
  outline:0;
  font-size:12px;
  font-weight:600;
}

body[data-route="videos"] .yt-video-search input::placeholder { color:var(--text-faint); opacity:1; }

body[data-route="videos"] .yt-video-search-hint {
  margin:-10px 2px 16px;
  color:var(--gold-deep);
  font-size:11px;
  font-weight:700;
}

body[data-route="videos"] .yt-video-card a,
body[data-route="videos"] .yt-short-tile {
  color:inherit;
  text-decoration:none;
}

body[data-route="videos"] .yt-video-card .yt-thumb,
body[data-route="videos"] .yt-video-title,
body[data-route="videos"] .yt-short-tile { display:block; }

body[data-route="videos"] .yt-video-channel { display:inline-block; color:var(--text-faint); text-decoration:none; }
body[data-route="videos"] .yt-video-channel:hover,
body[data-route="videos"] .yt-video-title:hover { color:var(--gold-deep); }
body[data-route="videos"] .yt-video-channel .fa-circle-check { color:var(--gold-deep); font-size:.82em; }

body[data-route="videos"] .yt-listing-loader {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

body[data-route="videos"] .yt-listing-loader[hidden] { display:none; }

body[data-route="videos"] .yt-listing-loader span {
  width:8px;
  height:8px;
  background:var(--gold-deep);
  border-radius:50%;
  animation:yt-listing-loader 1s ease-in-out infinite;
}

body[data-route="videos"] .yt-listing-loader span:nth-child(2) { animation-delay:.12s; }
body[data-route="videos"] .yt-listing-loader span:nth-child(3) { animation-delay:.24s; }

@keyframes yt-listing-loader {
  0%,60%,100% { opacity:.35; transform:translateY(0); }
  30% { opacity:1; transform:translateY(-5px); }
}

body[data-route="videos"] .yt-listing-status {
  margin:18px 0 26px;
  padding:15px 18px;
  color:var(--text-soft);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:13px;
  font-size:12px;
  font-weight:700;
  text-align:center;
}

body[data-route="videos"] .yt-listing-status[hidden] { display:none; }
body[data-route="videos"] .yt-listing-status.is-error { color:var(--text); border-color:rgba(204,145,31,.46); }

body[data-route="videos"] .yt-listing-status button {
  padding:2px 0;
  color:var(--gold-deep);
  background:transparent;
  border:0;
  font:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}

body[data-route="videos"] .yt-listing-sentinel { width:100%; height:1px; }

body[data-route="shorts"] .yt-short-tile {
  display:block;
  color:inherit;
  text-decoration:none;
}

body[data-route="shorts"] .yt-listing-loader {
  min-height:82px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
}

body[data-route="shorts"] .yt-listing-loader[hidden] { display:none; }

body[data-route="shorts"] .yt-listing-loader span {
  width:8px;
  height:8px;
  background:var(--gold-deep);
  border-radius:50%;
  animation:yt-listing-loader 1s ease-in-out infinite;
}

body[data-route="shorts"] .yt-listing-loader span:nth-child(2) { animation-delay:.12s; }
body[data-route="shorts"] .yt-listing-loader span:nth-child(3) { animation-delay:.24s; }

body[data-route="shorts"] .yt-listing-status {
  margin:18px 0 26px;
  padding:15px 18px;
  color:var(--text-soft);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:13px;
  font-size:12px;
  font-weight:700;
  text-align:center;
}

body[data-route="shorts"] .yt-listing-status[hidden] { display:none; }
body[data-route="shorts"] .yt-listing-status.is-error { color:var(--text); border-color:rgba(204,145,31,.46); }

body[data-route="shorts"] .yt-listing-status button {
  padding:2px 0;
  color:var(--gold-deep);
  background:transparent;
  border:0;
  font:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}

body[data-route="shorts"] .yt-listing-sentinel { width:100%; height:1px; }

@media (max-width:767.98px) {
  body[data-route="videos"] .yt-video-toolbar {
    margin:0;
    padding:0 12px 14px;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  body[data-route="videos"] .yt-video-search { width:100%; }
  body[data-route="videos"] .yt-video-toolbar .yt-filter-row { margin:0; padding:0; }
  body[data-route="videos"] .yt-video-search-hint { margin:-7px 14px 14px; }
  body[data-route="videos"] .yt-listing-loader { min-height:70px; }
  body[data-route="videos"] .yt-listing-status { margin:12px 12px 88px; }
  body[data-route="shorts"] .yt-listing-loader { min-height:70px; }
  body[data-route="shorts"] .yt-listing-status { margin:12px 12px 88px; }
}

@media (prefers-reduced-motion:reduce) {
  body[data-route="videos"] .yt-listing-loader span { animation:none; }
  body[data-route="shorts"] .yt-listing-loader span { animation:none; }
}

.watch-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:20px; }
.watch-player { position:relative; aspect-ratio:16/9; overflow:hidden; background:#050505; border-radius:16px; }
.watch-player > img { width:100%; height:100%; object-fit:cover; opacity:.82; }
.watch-player::after { content:""; position:absolute; inset:60% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.75)); }
.watch-big-play { position:absolute; z-index:2; inset:50% auto auto 50%; width:72px; height:72px; display:grid; place-items:center; transform:translate(-50%,-50%); color:#241704; background:var(--gold-bright); border-radius:50%; font-size:24px; }
.watch-controls { position:absolute; z-index:3; inset:auto 17px 13px; display:flex; align-items:center; gap:13px; color:#fff; }
.watch-controls button { color:#fff; }
.watch-progress { flex:1; height:4px; background:rgba(255,255,255,.3); border-radius:99px; }
.watch-progress i { display:block; width:37%; height:100%; background:var(--gold-bright); border-radius:inherit; }
.watch-title { margin:16px 0 11px; font-size:21px; line-height:1.35; font-weight:800; }
.watch-action-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--line); }
.watch-channel { margin:14px 0; display:grid; grid-template-columns:46px 1fr auto; gap:11px; align-items:center; }
.watch-channel img { width:46px; height:46px; border-radius:50%; object-fit:cover; }
.watch-channel strong,.watch-channel span { display:block; }
.watch-channel strong { font-size:13px; }
.watch-channel span { color:var(--text-faint); font-size:10px; }
.watch-description { padding:16px; background:var(--surface-2); border-radius:14px; color:var(--text-soft); font-size:12px; line-height:1.7; }
.watch-comments { margin-top:20px; }
.watch-comments h2 { font-size:18px; }
.watch-comment-form { margin:0 0 10px; padding:14px 0 16px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:10px; align-items:center; border-bottom:1px solid var(--line); }
.watch-comment-form > img { width:42px; height:42px; object-fit:cover; border-radius:50%; }
.watch-comment-input { min-height:44px; padding:0 7px 0 14px; display:flex; align-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; }
.watch-comment-input:focus-within { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash); }
.watch-comment-input textarea { flex:1; min-width:0; max-height:110px; padding:11px 7px 10px 0; resize:none; color:var(--text); background:transparent; border:0; outline:0; font:500 13px/1.45 var(--font-body); }
.watch-comment-input textarea::placeholder { color:var(--text-faint); opacity:1; }
.watch-comment-input button { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; color:var(--text-faint); border-radius:50%; font-size:15px; }
.watch-comment-submit { min-width:112px; min-height:44px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:8px; color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border:1px solid var(--gold-deep); border-radius:13px; font-size:11.5px; font-weight:850; box-shadow:0 8px 18px rgba(168,108,14,.16); }
.watch-comment-submit i { font-size:13px; line-height:1; }
.watch-comment-list { display:block; }
.yt-comment { padding:14px 0; display:grid; grid-template-columns:38px 1fr; gap:10px; border-top:1px solid var(--line); }
.yt-comment img { width:38px; height:38px; border-radius:50%; object-fit:cover; }
.yt-comment strong { font-size:11px; }
.yt-comment p { margin:4px 0 7px; color:var(--text-soft); font-size:12px; }
.yt-comment-actions { display:flex; gap:13px; color:var(--text-faint); font-size:10px; }
.watch-next { display:grid; gap:11px; align-self:start; }
.watch-next-card { display:grid; grid-template-columns:165px 1fr; gap:10px; text-align:left; }
.watch-next-card img { width:165px; aspect-ratio:16/9; object-fit:cover; border-radius:10px; }
.watch-next-card strong { display:block; font-size:11px; line-height:1.45; }
.watch-next-card span { display:block; margin-top:4px; color:var(--text-faint); font-size:9px; }
.short-viewer-shell { min-height:calc(100vh - var(--topbar-h) - 48px); display:flex; justify-content:center; align-items:center; gap:15px; }
.short-player { position:relative; height:min(760px,calc(100vh - var(--topbar-h) - 64px)); aspect-ratio:9/16; overflow:hidden; background:#050505; border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.28); }
.short-player > img { width:100%; height:100%; object-fit:cover; }
.short-player::after { content:""; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.88)); }
.short-top { position:absolute; z-index:3; inset:14px 14px auto; display:flex; justify-content:space-between; color:#fff; }
.short-center-play { position:absolute; z-index:3; left:50%; top:50%; width:58px; height:58px; display:grid; place-items:center; transform:translate(-50%,-50%); color:#241704; background:rgba(239,199,110,.9); border-radius:50%; }
.short-copy { position:absolute; z-index:3; inset:auto 18px 18px; color:#fff; }
.short-author { display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.short-author img { width:37px; height:37px; border-radius:50%; object-fit:cover; border:2px solid #fff; }
.short-author strong { font-size:12px; }
.short-copy p { margin:0 0 10px; font-size:12px; line-height:1.55; }
.short-copy span { color:rgba(255,255,255,.72); font-size:10px; }
.short-action-rail { align-self:flex-end; padding-bottom:18px; display:flex; flex-direction:column; gap:14px; }
.short-action-rail button { width:54px; display:flex; flex-direction:column; align-items:center; gap:5px; color:var(--text-soft); font-size:9px; font-weight:700; }
.short-action-rail i { width:48px; height:48px; display:grid; place-items:center; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:50%; font-size:18px; }
.short-action-rail button.active i { color:var(--danger); }
.short-nav { align-self:center; display:flex; flex-direction:column; gap:10px; }
.short-nav button { width:42px; height:42px; display:grid; place-items:center; color:var(--text-soft); background:var(--surface); border:1px solid var(--line); border-radius:50%; }

/* Czytelność desktop/tablet: minimalne rozmiary tekstu zamiast mikrotypografii. */
@media (min-width: 701px) {
  body { font-size: 16px; line-height: 1.65; }
  .global-search { font-size: 14px; }
  .main-nav a { font-size: 15px; }
  .secondary-nav a { font-size: 14px; }
  .nav-label, .eyebrow { font-size: 11px; }
  .sidebar-foot button, .sidebar-foot a { font-size: 13px; }
  .sidebar-foot p { font-size: 11px; }
  .premium-btn, .outline-btn, .soft-btn, .text-btn { font-size: 14px; }
  .page-intro p { font-size: 15px; }
  .stories-head button, .rail-head button, .rail-head a, .quiet-btn { font-size: 11px; }
  .story span { font-size: 11px; }
  .composer-trigger { font-size: 14px; }
  .composer-actions button, .feed-filter button { font-size: 13px; }
  .post-author strong { font-size: 15px; }
  .post-author span { font-size: 12px; }
  .post-copy { font-size: 15px; line-height: 1.72; }
  .like-summary, .view-comments, .comment-bubble { font-size: 13px; }
  .like-summary b { font-size: 13px; }
  .post-time { font-size: 10px; }
  .profile-mini-top strong { font-size: 13px; }
  .profile-mini-top span, .suggest strong { font-size: 11px; }
  .suggest span, .mini-stats, .trend-card small { font-size: 10px; }
  .follow-chip { font-size: 10px; }
  .trend-card strong { font-size: 12px; }
  .section-head p, .service-info p, .video-info p, .profile-name span, .profile-details, .profile-stats > button, .profile-stats > a { font-size: 13px; }
  .section-head button, .rating, .service-list-row b { font-size: 12px; }
  .service-info h3, .video-info h3 { line-height: 1.45; }
  .video-info h3 { font-size: 14px; }
  .profile-bio { font-size: 14px; }
  .service-list-row strong, .task-row strong, .notice-copy p, .full-comment-bubble p, .full-comment-bubble strong { font-size: 13px; }
  .service-list-row span, .task-row span, .notice-copy time, .comment-tools { font-size: 11px; }
  .field-row label, .toggle-row strong { font-size: 13px; }
  .field, .toggle-row span { font-size: 14px; }
  .view-map-item strong { font-size: 13px; }
  .view-map-item span { font-size: 11px; }
  .home-hero-copy > p, .home-section-heading p, .home-feature p, .home-split-copy > p, .home-cta p,
  .legal-hero p, .legal-article p, .how-step p, .contact-card > p, .account-aside p, .account-form > p,
  .auth-visual p, .auth-form > p, .watch-description, .short-copy p { font-size:15px; }
  .home-proof, .home-split-list, .account-benefits div, .legal-meta, .legal-nav button, .legal-nav a, .faq-answer,
  .contact-method strong, .contact-method span, .form-check-row { font-size:13px; }
  .legal-article li { font-size:15px; }
  .editor-panel > p, .upload-empty p, .yt-video-copy span, .yt-short-copy span, .watch-channel span,
  .watch-next-copy span, .short-copy span { font-size:13px; }
  .editor-tab, .slider-row header { font-size:13px; }
  .ratio-row button, .filter-preset, .preview-top span, .auth-divider { font-size:12px; }
  .social-login button, .yt-filter-row button, .yt-video-copy h3, .yt-short-copy strong,
  .watch-channel strong, .watch-next-copy strong { font-size:14px; }
  .full-comment-bubble p { line-height:1.65; }
  .comment-composer textarea, .app-toast { font-size:13px; }
  .home-footer p, .home-footer nav button { font-size:13px; }
}

@media (max-width: 1120px) {
  body[data-route="home"] .guest-top-link { display: none; }
}

@media (max-width: 1250px) {
  :root { --sidebar-w: 92px; --rail-w: 300px; }
  .topbar-inner { grid-template-columns: var(--sidebar-w) minmax(240px, 520px) 1fr; gap: 20px; }
  .brand { width: 50px; }
  .brand img { display: none; }
  .brand-compact { display: grid; width: 44px; height: 44px; place-items: center; position: relative; color: #161006; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border-radius: 13px; font: 800 25px var(--font-display); }
  .brand-compact em { position: absolute; bottom: 2px; font: normal 700 5px var(--font-body); letter-spacing: .12em; }
  .sidebar { padding-left: 15px; padding-right: 15px; }
  .main-nav a { justify-content: center; padding: 0; }
  .main-nav a span, .main-nav .nav-count, .nav-label, .create-btn span, .sidebar-foot { display: none; }
  .main-nav a i { width: auto; font-size: 17px; }
  .create-btn { width: 48px; height: 48px; min-height: 48px; margin: 18px auto 0; padding: 0; border-radius: 50%; }
  .right-rail { width: var(--rail-w); }
  .suggest span { max-width: 110px; }
}

@media (max-width: 1020px) {
  :root { --sidebar-w: 82px; }
  .topbar-inner { grid-template-columns: var(--sidebar-w) minmax(220px, 1fr) auto; padding: 0 18px; }
  .right-rail { display: none; }
  .main-area { padding-right: 30px; }
  #viewRoot { width: min(100%, 760px); }
  .theme-label { display: none; }
  .theme-switch { padding-right: 4px; }
  .create-layout { width: 100%; margin: 0; transform: none; }
  body[data-route="messages"] .main-area { padding-right: 0; }
  .messages-layout { --chat-details-width: 300px; grid-template-columns: 290px minmax(0, 1fr) 0; }
  .messages-layout.details-open { grid-template-columns: 260px minmax(0, 1fr) var(--chat-details-width); }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .home-footer { grid-template-columns:1fr 1fr; }
  .home-footer > div, .home-footer > span { grid-column:1 / -1; }
}

@media (max-width: 700px) {
  :root { --topbar-h: 62px; }
  body { background: var(--bg); }
  .topbar-inner { padding: 0 13px; grid-template-columns: 39px 1fr auto; gap: 10px; }
  .mobile-only { display: inline-grid; width: 38px; height: 38px; }
  .brand { width: 138px; justify-self: center; }
  .brand img { display: block; width: 138px; }
  .brand-compact, .global-search, .top-actions .icon-btn, .theme-label { display: none; }
  .top-actions { gap: 7px; }
  .theme-switch { width: 38px; height: 38px; padding: 3px; }
  .theme-orb { width: 30px; height: 30px; }
  .avatar-button { display: none; }
  .sidebar { inset: 0; z-index: 1600; width: 100vw; max-width: none; padding: 20px 18px; border-right: 0; background: var(--surface-solid); transform: translateX(-103%); transition: .28s cubic-bezier(.2,.8,.2,1); }
  .sidebar.open { transform: translateX(0); }
  .mobile-sidebar-close { position:absolute; top:20px; right:18px; z-index:2; width:40px; height:40px; display:grid; place-items:center; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:50%; font-size:19px; }
  .sidebar-scroll::before { content: "SHINEUP.ZONE"; height: 45px; display: flex; align-items: center; margin: 0 12px 18px; color: var(--gold-deep); font: 700 18px var(--font-display); letter-spacing: .08em; }
  .main-nav a { justify-content: flex-start; min-height: 46px; padding: 0 14px; }
  .main-nav a span, .nav-label, .create-btn span, .sidebar-foot { display: block; }
  .main-nav .nav-count { display:grid; place-items:center; margin-left:auto; }
  .main-nav a i { width: 21px; }
  .secondary-nav a { min-height: 42px; }
  .create-btn { width: 100%; height: auto; margin-top: 18px; border-radius: 14px; }
  .sidebar-foot { margin-top: 22px; }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 1500; display: block; visibility: hidden; opacity: 0; background: rgba(7,6,4,.52); backdrop-filter: blur(3px); transition: .2s ease; }
  .sidebar-backdrop.open { visibility: visible; opacity: 1; }
  .main-area { min-height: 100vh; padding: calc(var(--topbar-h) + 12px) 0 90px; }
  #viewRoot { width: 100%; }
  body[data-route="privacy"] .main-area,
  body[data-route="terms"] .main-area,
  body[data-route="cookies"] .main-area,
  body[data-route="rodo"] .main-area,
  body[data-route="faq"] .main-area,
  body[data-route="how"] .main-area,
  body[data-route="contact"] .main-area,
  body[data-route="notice"] .main-area,
  body[data-route="ads"] .main-area,
  body[data-route="roadmap"] .main-area {
    width: 100%;
    max-width: none;
    padding-right: 0;
    padding-left: 0;
    overflow-x: hidden;
  }
  body[data-route="privacy"] #viewRoot,
  body[data-route="terms"] #viewRoot,
  body[data-route="cookies"] #viewRoot,
  body[data-route="rodo"] #viewRoot,
  body[data-route="faq"] #viewRoot,
  body[data-route="how"] #viewRoot,
  body[data-route="contact"] #viewRoot,
  body[data-route="notice"] #viewRoot,
  body[data-route="ads"] #viewRoot,
  body[data-route="roadmap"] #viewRoot {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }
  .bottom-nav { position: fixed; inset: auto 0 0; z-index: 1000; height: calc(68px + env(safe-area-inset-bottom)); padding: 7px 8px env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--surface-solid) 94%, transparent); border-top: 1px solid var(--line); backdrop-filter: blur(18px); }
  .bottom-nav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-faint); font-size: 7px; font-weight: 700; }
  .bottom-nav i { font-size: 17px; }
  .bottom-nav a.active { color: var(--gold-deep); }
  .bottom-create i { width: 43px; height: 43px; margin-top: -25px; display: grid; place-items: center; color: #241704; background: linear-gradient(135deg, var(--gold-bright), var(--gold)); border: 4px solid var(--surface-solid); border-radius: 50%; box-shadow: 0 9px 24px rgba(157,104,21,.25); }
  .bottom-create span { margin-top: -4px; }

  body:is([data-route="feed"], [data-route="posts"], [data-route="groups"], [data-route="watch"], [data-page="feed-add"], [data-page="user-profile"]) .comments-panel h2 { font-size: 28px; }
  body:is([data-route="feed"], [data-route="posts"], [data-route="groups"], [data-route="watch"], [data-page="feed-add"], [data-page="user-profile"]) .comments-panel h2 span { font-size: 13px; }
  body:is([data-route="feed"], [data-route="posts"], [data-route="groups"], [data-route="watch"], [data-page="feed-add"], [data-page="user-profile"]) .modal-comments { padding: 18px 16px; }
  body:is([data-route="feed"], [data-route="posts"], [data-route="groups"], [data-route="watch"], [data-page="feed-add"], [data-page="user-profile"]) .full-comment { grid-template-columns: 40px minmax(0, 1fr); gap: 11px; margin-bottom: 20px; }
  body:is([data-route="feed"], [data-route="posts"], [data-route="groups"], [data-route="watch"], [data-page="feed-add"], [data-page="user-profile"]) .full-comment img { width: 40px; height: 40px; }
  body:is([data-route="feed"], [data-route="posts"], [data-route="groups"], [data-route="watch"], [data-page="feed-add"], [data-page="user-profile"]) .full-comment-bubble { padding: 12px 14px; }
  body:is([data-route="feed"], [data-route="posts"], [data-route="groups"], [data-route="watch"], [data-page="feed-add"], [data-page="user-profile"]) .full-comment-bubble strong { margin-bottom: 4px; font-size: 13px; }
  body:is([data-route="feed"], [data-route="posts"], [data-route="groups"], [data-route="watch"], [data-page="feed-add"], [data-page="user-profile"]) .full-comment-bubble p { font-size: 13px; line-height: 1.55; }
  body:is([data-route="feed"], [data-route="posts"], [data-route="groups"], [data-route="watch"], [data-page="feed-add"], [data-page="user-profile"]) .comment-tools { margin-top: 7px; gap: 15px; font-size: 10px; }
  body:is([data-route="feed"], [data-route="posts"], [data-route="groups"], [data-route="watch"], [data-page="feed-add"], [data-page="user-profile"]) .comment-reply { margin-top: 12px; margin-left: 5px; padding-left: 11px; }
  body:is([data-route="feed"], [data-route="posts"], [data-route="groups"], [data-route="watch"], [data-page="feed-add"], [data-page="user-profile"]) .comment-composer textarea { font-size: 13px; }
  .page-intro, .stories-card, .composer-card, .post-card, .search-panel, .hero-card, .profile-hero, .profile-tabs, .section-card, .garage-car, .reward-hero, .settings-layout, .views-group, .editor-shell, .messages-layout, .notice-list, .auth-wrap { border-left: 0; border-right: 0; border-radius: 0; }
  .page-intro { padding: 8px 16px 0; align-items: center; }
  .page-intro h1 { font-size: 34px; }
  .page-intro p { display: none; }
  .page-actions .soft-btn { display: none; }
  .stories-card { margin-bottom: 9px; padding-left: 12px; padding-right: 0; box-shadow: none; }
  .story { min-width: 63px; }
  .story-ring { width: 57px; height: 57px; }
  .composer-card { margin-bottom: 9px; box-shadow: none; }
  .feed-filter { margin: 0 10px 9px; }
  .post-card { margin-bottom: 9px; box-shadow: none; }
  .post-head { padding-left: 13px; padding-right: 13px; }
  .post-copy, .post-meta { padding-left: 13px; padding-right: 13px; }
  .post-media, .post-media.landscape { aspect-ratio: 4/5; }
  .hero-card { min-height: 330px; }
  .hero-content { padding: 22px 17px; }
  .hero-content h1 { font-size: 38px; }
  .grid-2, .grid-3, .tool-grid, .video-grid, .service-grid { grid-template-columns: 1fr; }
  .explore-grid { border-radius: 0; gap: 3px; }
  .service-grid, .video-grid, .tool-grid, .grid-2, .grid-3 { padding: 0 10px; }
  .shorts-row { grid-template-columns: repeat(2, 1fr); padding: 0 10px; }
  .company-quick { padding: 0 10px; grid-template-columns: repeat(2, 1fr); }
  .profile-cover, .company-cover.profile-cover { height: 205px; }
  .profile-body { padding: 0 15px 17px; }
  .profile-avatar { width: 88px; height: 88px; margin-top: -45px; }
  .profile-primary { margin-top:10px; padding-left:0; min-height:0; flex-direction:column; align-items:flex-start; gap:13px; }
  .profile-name h1 { font-size: 25px; }
  .profile-cta { width:100%; gap:7px; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; touch-action:pan-x; scrollbar-width:none; }
  .profile-cta::-webkit-scrollbar { display:none; }
  .profile-cta > * { flex:0 0 auto; }
  .profile-action { min-height:43px; padding:0 12px; font-size:11px; }
  .profile-action-primary { flex:1 1 auto; }
  .profile-action-secondary { flex:0 0 auto; }
  .profile-action-share { width:43px; min-width:43px; padding:0; }
  .profile-details { flex-wrap:nowrap; gap:9px; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; touch-action:pan-x; scrollbar-width:none; }
  .profile-details::-webkit-scrollbar { display:none; }
  .profile-details > span,.profile-details > a { flex:0 0 auto; white-space:nowrap; }
  .profile-stats { margin-left:-15px; margin-right:-15px; width:calc(100% + 30px); display:flex; gap:0; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; touch-action:pan-x; scrollbar-width:none; }
  .profile-stats::-webkit-scrollbar { display:none; }
  .profile-stats > button,.profile-stats > a { flex:0 0 118px; padding:2px 12px; }
  .profile-tabs { width:100%; max-width:100%; margin-bottom:3px; padding:3px 10px; display:flex; gap:3px; overflow-x:auto; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; touch-action:pan-x; scrollbar-width:none; border-left:0; border-right:0; border-radius:0; }
  .profile-tabs::-webkit-scrollbar { display:none; }
  .profile-tabs button { flex:0 0 auto; width:auto; min-height:43px; padding:0 16px; font-size:12px; }
  .profile-gallery { width:100%; border-radius:0; gap:2px; }
  .profile-gallery-meta { display:none; }
  .user-profile-tab-heading { min-height:62px; margin-bottom:3px; padding:12px 14px; border-left:0; border-right:0; border-radius:0; box-shadow:none; }
  .user-profile-tab-heading h2 { font-size:18px; }
  .user-profile-shorts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; }
  .user-profile-shorts-grid article { border-radius:0; box-shadow:none; }
  .user-profile-shorts-grid .user-profile-media-open { border-radius:0; }
  .user-profile-media-count { top:6px; left:6px; padding:0 6px; font-size:7px; }
  .user-profile-media-copy { left:7px; right:7px; bottom:8px; }
  .user-profile-media-copy b { font-size:9px; }
  .user-profile-video-grid { grid-template-columns:1fr; gap:7px; padding:0 9px; }
  .user-profile-video-grid .user-profile-media-open { border-radius:12px; }
  body[data-page="user-profile"] .post-options-menu { right:0; left:auto; width:min(220px,calc(100vw - 28px)); }
  .user-profile-media-options { top:7px; right:7px; }
  .user-profile-video-copy b { min-height:0; }
  .user-profile-post-list { max-width:none; gap:7px; }
  .user-profile-post-list > article { padding:15px 14px; border-left:0; border-right:0; border-radius:0; }
  .user-profile-post-list p { font-size:11px; }
  .user-profile-post-media { margin:0 -14px 13px; }
  .user-profile-about-grid { grid-template-columns:1fr; gap:7px; }
  .user-profile-about-grid > section,.user-profile-about-grid > article { padding:17px 14px; border-left:0; border-right:0; border-radius:0; }
  .user-profile-about-wide { grid-column:auto; }
  .user-profile-interest-list { gap:6px; }
  .user-profile-interest-list span { min-height:35px; padding:0 10px; font-size:9px; }
  .profile-lightbox { padding:0; }
  .profile-lightbox-dialog { width:100vw; height:100dvh; min-height:0; grid-template-columns:1fr; grid-template-rows:minmax(250px,min(125vw,62dvh)) minmax(0,1fr); border:0; border-radius:0; }
  .profile-lightbox-close { position:absolute; top:10px; right:10px; width:38px; height:38px; font-size:19px; }
  .profile-lightbox-media { grid-row:1; }
  .profile-lightbox-details { grid-row:2; border-left:0; border-top:1px solid var(--line); }
  .profile-lightbox-head { min-height:56px; padding:8px 12px; grid-template-columns:36px minmax(0,1fr) 32px; }
  .profile-lightbox-head img { width:36px; height:36px; }
  .profile-lightbox-scroll { padding:13px; }
  .profile-lightbox-comments { margin-top:16px; }
  .profile-lightbox-comments .full-comment { grid-template-columns:40px minmax(0,1fr); gap:11px; margin-bottom:20px; }
  .profile-lightbox-comments .full-comment img { width:40px; height:40px; }
  .profile-lightbox-comments .full-comment-bubble { padding:12px 14px; }
  .profile-lightbox-comments .full-comment-bubble strong { margin-bottom:4px; font-size:13px; }
  .profile-lightbox-comments .full-comment-bubble p { font-size:13px; line-height:1.55; }
  .profile-lightbox-comments .comment-tools { margin-top:7px; gap:15px; font-size:10px; }
  .profile-lightbox-comments .comment-reply { margin-top:12px; margin-left:5px; padding-left:11px; }
  .profile-lightbox-footer { padding-bottom:env(safe-area-inset-bottom); }
  .profile-lightbox-actions { padding-top:6px; }
  .profile-lightbox-comment-form { min-height:50px; margin-top:7px; }
  .profile-lightbox-comment-form textarea { font-size:13px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); padding: 0 10px; gap: 9px; }
  .metric { padding: 14px; }
  .garage-car + .section-card, .garage-car { margin-bottom: 9px; }
  .reward-top { grid-template-columns: 1fr 64px; }
  .gem-orb { width: 64px; height: 64px; font-size: 25px; }
  .reward-top h1 { font-size: 33px; }
  .reward-earn-list,.reward-prize-grid,.reward-bottom-grid { grid-template-columns:1fr; }
  .settings-layout { display: block; background: transparent; border: 0; box-shadow: none; }
  .settings-nav { margin-bottom: 9px; display: flex; overflow-x: auto; border-radius: 0; }
  .settings-nav button,.settings-nav a { min-width: max-content; }
  .settings-panel { border-radius: 0; }
  .views-list { grid-template-columns: 1fr; }
  .create-layout .page-intro { padding-left: 16px; }
  .create-steps { margin: 0 10px 9px; }
  .create-step { font-size: 0; }
  .create-step b { font-size: 7px; }
  .editor-shell { display: block; }
  .editor-preview { min-height: 480px; padding: 12px; }
  .photo-stage { min-height: 390px; }
  .editor-controls { border-left: 0; border-top: 1px solid rgba(221,178,91,.15); }
  .crop-preview { display: none; }
  .editor-bottom { padding-bottom: 18px; }
  body[data-route="messages"] .main-area { height: 100dvh; min-height: 0; padding: var(--topbar-h) 0 calc(68px + env(safe-area-inset-bottom)); }
  body[data-page="priv-messages"][data-route="messages"] .topbar { display:none; }
  /* Po przejściu z listy kontaktów footer pozostaje w DOM. W aktywnej
     rozmowie musi ustąpić miejsca formularzowi wysyłania wiadomości. */
  body[data-page="priv-messages"][data-route="messages"] .bottom-nav { display:none !important; }
  html:has(body[data-page="priv-messages"][data-route="messages"]),
  body[data-page="priv-messages"][data-route="messages"] { width:100%; height:100%; overflow:hidden; overscroll-behavior:none; }
  body[data-page="priv-messages"][data-route="messages"] .main-area {
    position:fixed;
    z-index:1;
    top:var(--vv-top,0px);
    right:0;
    bottom:auto;
    left:0;
    width:100%;
    height:var(--app-h,100dvh);
    min-height:0;
    padding:0;
    overflow:hidden;
  }
  body[data-page="priv-messages"][data-route="messages"] .app-shell { height:100%; min-height:0; overflow:hidden; }
  body[data-page="priv-messages"][data-route="messages"] #viewRoot,
  body[data-page="priv-messages"][data-route="messages"] .messages-layout,
  body[data-page="priv-messages"][data-route="messages"] .chat-pane,
  body[data-page="priv-messages"][data-route="messages"] .chat-pane > .msg-chat { height:100%; min-height:0; }
  body[data-route="messages"] #viewRoot { height: 100%; max-width: none; }
  .messages-layout { height: 100%; min-height: 0; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; }
  .messages-layout.details-open { grid-template-columns: 1fr; }
  .conversation-list { display: none; border-right: 0; }
  .contacts-mode .conversation-list { display: grid; }
  .contacts-mode .chat-empty-state { display: none !important; }
  .contacts-mode .chat-pane { display: none; }
  .chat-details { display: none; border-left: 0; transform: none; }
  .messages-layout.details-open .chat-pane { display: none; }
  .messages-layout.details-open .chat-details { display: grid; visibility: visible; opacity: 1; transform: none; border-left: 0; }
  .chat-details-head { min-height: 66px; padding: 0 13px 0 18px; }
  .chat-details-head h2 { font-size: 23px; }
  .chat-media-library-head { padding-left:7px; }
  .chat-media-library-head h2 { font-size:19px; }
  .chat-media-library-scroll { padding:12px 12px 20px; }
  .chat-media-library-tabs { margin:0 -10px 13px; padding:0 15px; gap:27px; }
  .chat-media-library-tabs button { min-height:52px; font-size:14px; }
  .chat-media-library-grid { gap:7px; }
  .chat-shared-media { gap:7px; }
  .chat-media-zoom { display:none; }
  .chat-shared-media button:hover,
  .chat-media-library-grid button:hover { transform:none; }
  .chat-contact-card { padding: 23px 18px 21px; }
  .chat-contact-avatar { width: 82px; height: 82px; }
  .chat-detail-section { padding: 18px; }
  .chat-detail-links > button { min-height: 56px; padding: 0 18px; font-size: 14px; }
  .conversation-head { padding: 18px 16px 14px; }
  .conversation-title { margin-bottom: 13px; }
  .conversation-title h2 { font-size: 27px; }
  .conversation-search { height: 44px; }
  .conversation-item { min-height: 76px; padding: 11px 15px; }
  .chat-pane > .msg-chat { grid-template-rows: 66px minmax(0,1fr) auto; }
  .chat-head { padding: 0 9px; gap: 8px; }
  .chat-back { display: grid; width: 36px; height: 36px; }
  .chat-head-person { gap:8px; }
  .chat-head-avatar { width: 42px; height: 42px; }
  .chat-head-profile strong { font-size: 14px; }
  .chat-head-company { font-size:9px; }
  .chat-head-actions { gap: 0; }
  .chat-head-actions button { width: 42px; height: 42px; font-size: 17px; }
  .chat-head-actions .chat-details-trigger { display:none; }
  .chat-head-actions .chat-head-unread { margin-right:7px; display:grid !important; font-size:18px; }
  .chat-head-actions .chat-head-account { display:grid; }
  .msg-chat.is-remove-mode .chat-head-unread,
  .msg-chat.is-remove-mode .chat-head-account { display:none !important; }
  .chat-body { padding: 20px 12px 17px; }
  .chat-security-intro { min-height:calc(100dvh - 210px); padding:28px 18px; }
  .chat-security-intro__icon { width:50px; height:50px; }
  .chat-security-intro strong { font-size:16px; }
  .chat-security-intro p { font-size:13px; }
  .chat-day { margin: 5px 0 18px; }
  .chat-bubble-row.received > img { width: 27px; height: 27px; }
  .chat-message { max-width: 84%; padding: 11px 13px; font-size: 14px; line-height: 1.48; }
  .chat-message-delete { width: 28px; height: 28px; opacity:0 !important; transform:translateX(6px) scale(.92) !important; pointer-events:none !important; font-size: 11px; }
  .msg-chat__row--out.is-delete-open .chat-message-delete { opacity:1 !important; transform:none !important; pointer-events:auto !important; }
  .msg-chat__row,.msg-chat__row .msg-chat__bubble,.msg-chat__row .msg-chat__bubble * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  .msg-chat__row { touch-action:pan-y; }
  .msg-chat.is-remove-mode .msg-chat__row--out.is-selected { min-height:46px; }
  .msg-chat.is-remove-mode .msg-chat__row--out.is-selected::before { left:6px; width:30px; height:30px; font-size:16px; }
  .chat-media-message { width: min(250px,72vw); }
  .chat-compose { min-height: 66px; padding: 9px 10px; grid-template-columns: minmax(0,1fr) 44px; gap: 7px; }
  .chat-compose-shell { height: 46px; }
  .chat-compose-shell input { padding: 0 6px; font-size: 14px; }
  .chat-compose-shell button { width: 34px; height: 34px; font-size: 14px; }
  .chat-send { width: 44px; height: 44px; }
  .chat-emoji-picker { position: fixed; z-index: 1800; left: 0; right: 0; bottom: 0; width: 100%; max-height: min(68dvh,560px); padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); border-left: 0; border-right: 0; border-bottom: 0; border-radius: 24px 24px 0 0; transform: translateY(100%); transform-origin: center bottom; }
  .chat-emoji-picker.open { transform: translateY(0); }
  .chat-emoji-picker header strong { font-size: 20px; }
  .chat-emoji-search { height: 46px; }
  .chat-emoji-category { font-size: 13px; }
  .chat-emoji-grid { grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; }
  .chat-emoji-grid button { font-size: clamp(25px,7vw,31px); }
  .chat-delete-modal > section { padding: 21px 18px; grid-template-columns: 44px minmax(0,1fr); gap: 13px; border-radius: 18px; }
  .chat-delete-icon { width: 44px; height: 44px; }
  .chat-delete-modal h2 { font-size: 21px; }
  .chat-delete-modal p { font-size: 14px; }
  .chat-delete-actions button { flex: 1; min-height: 46px; }
  .notice-list { box-shadow: none; }
  .notice-item { padding-left: 13px; padding-right: 13px; }
  .comments-panel { inset: auto 0 0; width: 100%; height: min(82vh, 720px); border-radius: 22px 22px 0 0; transform: translateY(100%); }
  .app-modal.open .comments-panel { transform: translateY(0); }
  .modal-handle { display: block; position: absolute; z-index: 2; top: 8px; left: 50%; width: 36px; height: 4px; transform: translateX(-50%); background: var(--line-strong); border-radius: 99px; }
  .comments-panel > header { padding-top: 25px; }
  .toast-stack { top: calc(var(--topbar-h) + 8px); left: 10px; right: 10px; }
  .app-toast { width: 100%; min-width: 0; }
  .auth-wrap { grid-template-columns: 1fr; min-height: auto; }
  .auth-visual { display: none; }
  .auth-form { padding: 35px 20px; min-height: 600px; }
  body[data-route="home"] .sidebar { display:block; }
  body[data-route="home"] .authenticated-sidebar { display:none; }
  body[data-route="home"] .guest-sidebar { display:block; }
  body[data-route="home"] .guest-top-link,
  body[data-route="home"] .guest-auth-link,
  body[data-route="home"] .guest-register-link { display:none; }
  body[data-route="home"] .top-actions .theme-switch { display:flex; }
  body[data-route="home"] .main-area { padding-left:0; padding-right:0; }
  .home-hero { min-height:auto; grid-template-columns:1fr; border-radius:0; border-left:0; border-right:0; }
  .home-hero-copy { padding:42px 18px 36px; }
  .home-hero-copy h1 { font-size:44px; }
  .home-hero-copy > p { font-size:14px; }
  .home-proof { gap:12px; }
  .home-proof div { width:100%; font-size:11px; }
  .home-hero-media { min-height:420px; }
  .home-hero-media::after { background:linear-gradient(0deg,rgba(5,4,3,.76),transparent 55%); }
  .home-float-card { right:15px; bottom:15px; width:calc(100% - 30px); }
  .home-section { width:100%; padding:50px 14px 0; }
  .home-feed-showcase { width:100%; margin:0; padding:26px 14px 30px; border:0; border-radius:0; box-shadow:none; }
  .home-feed-showcase + .home-section { padding-top:44px; }
  .home-feed-showcase .dashboard-section-head { margin-bottom:17px; }
  .home-feed-showcase .dashboard-section-head h2 { font-size:24px; }
  .home-feed-showcase .dashboard-section-head p { max-width:285px; font-size:11px; line-height:1.5; }
  .home-section-heading h2 { font-size:34px; }
  .home-platform-intro { padding-bottom:22px; }
  .home-app-showcase { margin:0; padding:22px 0 30px; border-radius:0; }
  .home-app-showcase::before { width:430px; height:430px; top:-285px; right:-165px; }
  .home-app-showcase-copy { padding:0 16px; }
  .home-app-showcase-copy > strong { max-width:310px; font-size:23px; }
  .home-app-showcase-copy > small { max-width:315px; font-size:12px; }
  .home-app-showcase-media { width:134%; max-width:none; margin:0 -17% -5px; }
  .home-platform-features { margin-top:-22px; padding-top:0; }
  .home-feature-grid { grid-template-columns:1fr; }
  .home-split { grid-template-columns:1fr; }
  .home-split-media { min-height:280px; }
  .home-split-copy { padding:26px 20px; }
  .home-split-copy h2 { font-size:32px; }
  .home-cta { width:100%; margin-top:50px; padding:28px 20px; grid-template-columns:1fr; border-radius:0; }
  .home-cta h2 { font-size:31px; }
  .home-footer { width:auto; margin:28px 18px 10px; padding:28px 0 8px; gap:24px; }
  .home-footer img { width:150px; }
  .home-footer > span { align-self:start; }
  .legal-hero { padding:27px 18px; border-radius:0; }
  .legal-layout { grid-template-columns:1fr; }
  .legal-nav { position:static; display:flex; overflow-x:auto; border-radius:0; }
  .legal-nav button,.legal-nav a { min-width:max-content; }
  .legal-tab-list { gap:6px; padding:10px 14px; scrollbar-width:none; scroll-snap-type:x proximity; }
  .legal-tab-list::-webkit-scrollbar { display:none; }
  .legal-tab-list a { width:auto; scroll-snap-align:start; }
  .legal-tab-list a:hover { transform:none; }
  .legal-tab-list a.active { box-shadow:inset 0 -3px 0 var(--gold-deep); }
  .legal-article { padding:25px 18px; border-radius:0; }
  .legal-article p,.legal-article li { font-size:13px; }
  .legal-admin-content .su-legal-section + .su-legal-section { margin-top:24px; padding-top:24px; }
  .legal-admin-content .su-legal-section > h2:first-child { font-size:21px; line-height:1.25; }
  .faq-shell { padding:24px 14px; border-radius:0; }
  .faq-tools { padding:0 4px; align-items:start; }
  .faq-tools h2 { font-size:23px; }
  .faq-result-count { margin-top:2px; }
  .faq-search { margin:0 4px 23px; }
  .faq-groups { gap:24px; }
  .faq-group-title { padding:0 4px; }
  .faq-question { min-height:62px; padding:0 14px; font-size:13px; line-height:1.35; }
  .faq-answer { padding:0 14px 16px; }
  .faq-contact-card { grid-template-columns:42px 1fr; padding:17px 14px; }
  .faq-contact-card > span { width:42px; height:42px; }
  .faq-contact-card .premium-btn { grid-column:1 / -1; width:100%; }
  .how-grid,.contact-grid { grid-template-columns:1fr; }
  .account-shell { grid-template-columns:1fr; border-radius:0; }
  .account-aside { min-height:340px; padding:34px 20px; }
  .account-aside h1 { font-size:38px; }
  .account-form { padding:30px 18px; }
  .onboarding-shell { border-radius:0; }
  .onboarding-head { padding:22px 17px; display:block; }
  .onboarding-progress { min-width:0; margin-top:15px; }
  .onboarding-body { grid-template-columns:1fr; }
  .onboarding-form { padding:22px 17px; }
  .onboarding-preview { padding:20px 17px; border-left:0; border-top:1px solid var(--line); }
  .yt-video-grid { grid-template-columns:1fr; gap:20px; padding:0 10px; }
  .yt-filter-row { padding:0 10px; }
  .yt-shorts-strip { padding:20px 10px 0; }
  .yt-shorts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .watch-layout { grid-template-columns:1fr; }
  .watch-main { min-width:0; }
  .watch-player { border-radius:0; }
  .watch-title,.watch-action-row,.watch-channel,.watch-description,.watch-comments { margin-left:13px; margin-right:13px; }
  .watch-next { padding:0 13px; }
  .short-viewer-shell { min-height:calc(100vh - var(--topbar-h) - 80px); padding:0 8px; gap:7px; align-items:flex-start; }
  .short-player { height:calc(100vh - var(--topbar-h) - 88px); max-width:calc(100vw - 70px); border-radius:14px; }
  .short-action-rail { padding-bottom:10px; }
  .short-action-rail button { width:47px; font-size:8px; }
  .short-action-rail i { width:42px; height:42px; }
  .short-nav { display:none; }
}

/* Centrum powiadomień firmy */
body[data-page="company-notifications"] .right-rail { display:none; }
body[data-page="company-notifications"] .main-area { padding-right:24px; }
body[data-page="company-notifications"] #viewRoot { width:100%; max-width:1420px; margin:0 auto; }
.company-notifications-workspace { min-width:0; }
.company-notifications-hero { margin-bottom:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.company-notifications-hero h1 { margin:4px 0 5px; font-size:42px; line-height:1.06; letter-spacing:-.045em; }
.company-notifications-hero p { max-width:720px; margin:0; color:var(--text-soft); font-size:13px; }
.company-notifications-back { width:max-content; margin-bottom:15px; display:flex; align-items:center; gap:8px; color:var(--gold-deep); font-size:10px; font-weight:850; }
.company-notifications-actions { display:flex; align-items:center; gap:9px; }
.company-notifications-actions .soft-btn { min-height:42px; }
.company-notifications-actions .icon-btn { flex:0 0 auto; }
.company-notifications-advanced-filters { max-height:0; margin:0 0 0 auto; overflow:hidden; opacity:0; color:var(--text); background:var(--surface); border:0 solid var(--line); border-radius:18px; box-shadow:0 18px 48px rgba(42,28,7,.09); transform:translateY(-8px); transition:max-height .28s ease,opacity .2s ease,transform .2s ease,margin .2s ease,border-width .2s ease; }
.company-notifications-advanced-filters.open { max-height:420px; margin-bottom:16px; opacity:1; border-width:1px; transform:none; }
.company-notifications-advanced-filters > header { padding:18px 20px 13px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); }
.company-notifications-advanced-filters > header h2 { margin:3px 0 0; font-size:22px; }.company-notifications-advanced-filters > header button { width:38px; height:38px; display:grid; place-items:center; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:50%; font-size:16px; }
.company-notifications-filter-grid { padding:16px 20px; display:grid; grid-template-columns:2fr 1fr; gap:18px; }
.company-notifications-filter-grid fieldset { min-width:0; margin:0; padding:0; display:flex; flex-wrap:wrap; align-content:flex-start; gap:9px; border:0; }.company-notifications-filter-grid legend { width:100%; margin-bottom:8px; color:var(--text-soft); font-size:12px; font-weight:800; }
.company-notifications-filter-grid label { cursor:pointer; }.company-notifications-filter-grid input { position:absolute; opacity:0; pointer-events:none; }.company-notifications-filter-grid label span { min-height:40px; padding:0 13px; display:flex; align-items:center; gap:8px; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:11px; font-size:12px; font-weight:750; transition:.18s ease; }.company-notifications-filter-grid input:checked + span { color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:transparent; box-shadow:0 8px 22px rgba(176,116,16,.14); }
.company-notifications-advanced-filters > footer { padding:13px 20px 17px; display:flex; justify-content:flex-end; gap:9px; border-top:1px solid var(--line); }.company-notifications-advanced-filters > footer > * { min-height:42px; }
.company-notifications-summary { margin-bottom:14px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.company-notifications-summary > button { min-width:0; min-height:106px; padding:16px 17px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:center; gap:7px 12px; text-align:left; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:17px; box-shadow:0 8px 25px rgba(40,27,8,.045); }
.company-notifications-summary > button span { min-width:0; display:flex; align-items:center; gap:9px; color:var(--text-soft); font-size:13px; font-weight:800; white-space:nowrap; }
.company-notifications-summary > button span i { color:var(--gold-deep); }.company-notifications-summary > button strong { grid-row:1 / 3; grid-column:2; align-self:center; font-size:28px; }.company-notifications-summary > button small { color:var(--text-faint); font-size:10px; }
.company-notifications-summary > button.active { color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:transparent; box-shadow:0 12px 28px rgba(176,116,16,.18); }
.company-notifications-summary > button.active span,.company-notifications-summary > button.active span i,.company-notifications-summary > button.active small { color:#211606; }
.company-notifications-toolbar { margin-bottom:14px; padding:10px; display:grid; grid-template-columns:minmax(260px,1fr) 180px 165px; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:16px; }
.company-notifications-toolbar label { min-width:0; min-height:42px; padding:0 13px; display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:11px; }
.company-notifications-toolbar label i { color:var(--gold-deep); }.company-notifications-toolbar input { width:100%; min-width:0; border:0; outline:0; color:var(--text); background:transparent; font-size:13px; }.company-notifications-toolbar select { min-width:0; min-height:42px; padding:0 12px; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:11px; font-size:12px; font-weight:700; }
.company-notifications-layout { display:grid; grid-template-columns:minmax(0,1fr) 390px; gap:14px; align-items:start; }
.company-notifications-list { min-width:0; padding:6px 18px 18px; background:var(--surface); border:1px solid var(--line); border-radius:20px; }
.company-notifications-group-title { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); }
.company-notifications-group-title h2 { margin:0; font-size:19px; }.company-notifications-group-title span { color:var(--text-faint); font-size:11px; }
.company-notification-item { position:relative; width:100%; min-height:118px; padding:16px 10px; display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:14px; text-align:left; color:var(--text); border-bottom:1px solid var(--line); }
.company-notification-item:last-child { border-bottom:0; }.company-notification-item.active { margin:0 -8px; width:calc(100% + 16px); padding-left:18px; padding-right:18px; background:var(--gold-wash); border-bottom-color:transparent; border-radius:15px; }
.company-notification-item.unread::before { content:none; }
.company-notification-icon { flex:0 0 auto; width:48px; height:48px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; font-size:17px; }
.company-notification-icon.training { color:#9a6307; background:color-mix(in srgb,var(--gold-bright) 18%,var(--surface-2)); }.company-notification-icon.job { color:#2867a5; background:color-mix(in srgb,#4a9ce8 13%,var(--surface-2)); }.company-notification-icon.event { color:#7b4cad; background:color-mix(in srgb,#9a66d2 13%,var(--surface-2)); }.company-notification-icon.contact { color:#16856c; background:color-mix(in srgb,#20aa89 13%,var(--surface-2)); }
.company-notification-copy,.company-notification-copy > * { min-width:0; display:block; }.company-notification-copy .company-notification-kicker { margin-bottom:6px; color:var(--gold-deep); font-size:9px; font-weight:900; letter-spacing:.13em; }.company-notification-copy > strong { overflow:hidden; font-size:14px; line-height:1.42; text-overflow:ellipsis; white-space:nowrap; }.company-notification-copy > small { margin-top:5px; overflow:hidden; color:var(--text-faint); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.company-notification-copy > span:last-child { margin-top:10px; display:flex; align-items:center; gap:9px; }.company-notification-copy > span:last-child b { padding:5px 8px; color:var(--gold-deep); background:var(--gold-wash); border-radius:99px; font-size:9px; }.company-notification-copy time { color:var(--text-faint); font-size:10px; }
.company-notification-avatar { position:relative; width:42px; height:42px; display:grid; place-items:center; color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-radius:50%; font-size:10px; font-weight:900; }.company-notification-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }.company-notification-avatar > i { position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; background:var(--gold); border:2px solid var(--surface); border-radius:50%; }
.company-notification-stack { min-width:75px; display:flex; justify-content:flex-end; }.company-notification-stack img,.company-notification-stack b { width:34px; height:34px; margin-left:-10px; object-fit:cover; border:3px solid var(--surface); border-radius:50%; }.company-notification-stack b { display:grid; place-items:center; color:#211606; background:var(--gold-bright); font-size:8px; }
.company-notifications-empty { min-height:280px; display:grid; place-content:center; justify-items:center; text-align:center; color:var(--text-faint); }.company-notifications-empty[hidden] { display:none; }.company-notifications-empty i { margin-bottom:12px; font-size:28px; }.company-notifications-empty strong { color:var(--text); font-size:15px; }.company-notifications-empty p { margin:5px 0 0; font-size:10px; }
.company-notification-detail { position:sticky; top:calc(var(--topbar-h) + 18px); min-width:0; min-height:540px; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:0 14px 40px rgba(42,28,7,.07); }
.company-notification-detail-close { display:none; }.company-notification-detail-panel { display:none; }.company-notification-detail-panel.active { display:block; }
.company-notification-detail-panel > header { min-height:91px; padding:18px; display:flex; align-items:center; gap:13px; background:linear-gradient(135deg,var(--gold-wash),transparent); border-bottom:1px solid var(--line); }.company-notification-detail-panel > header h2 { margin:2px 0 1px; font-size:22px; }.company-notification-detail-panel > header p { margin:0; color:var(--text-faint); font-size:8px; }
.company-notification-person { min-height:76px; margin:16px 17px 0; padding-bottom:14px; display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:11px; border-bottom:1px solid var(--line); }.company-notification-person img,.person-initials { width:44px; height:44px; object-fit:cover; border-radius:50%; }.person-initials { display:grid; place-items:center; color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); font-size:10px; font-weight:900; }.company-notification-person strong,.company-notification-person span { display:block; }.company-notification-person strong { font-size:11px; }.company-notification-person span { margin-top:3px; overflow:hidden; color:var(--text-faint); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.company-notification-person > a,.company-notification-person > button { width:34px; height:34px; display:grid; place-items:center; color:var(--gold-deep); background:var(--surface-2); border:1px solid var(--line); border-radius:10px; }
.company-notification-data { margin:4px 17px 0; }.company-notification-data > div { min-height:58px; padding:11px 0; display:grid; grid-template-columns:94px minmax(0,1fr); gap:10px; border-bottom:1px solid var(--line); }.company-notification-data dt { color:var(--text-faint); font-size:8px; font-weight:750; }.company-notification-data dd { margin:0; color:var(--text-soft); font-size:10px; font-weight:700; line-height:1.45; }.company-notification-data dd a { color:var(--gold-deep); }
.company-notification-note { margin:15px 17px; padding:12px; display:grid; grid-template-columns:28px minmax(0,1fr); gap:9px; color:var(--text-soft); background:var(--gold-wash); border-radius:12px; }.company-notification-note i { width:28px; height:28px; display:grid; place-items:center; color:var(--gold-deep); background:var(--surface); border-radius:8px; }.company-notification-note p { margin:0; font-size:9px; line-height:1.5; }
.company-notification-detail-panel > footer { padding:16px 17px; display:flex; justify-content:flex-end; gap:8px; border-top:1px solid var(--line); }.company-notification-detail-panel > footer > * { min-height:40px; justify-content:center; }
.company-notification-attachment { min-height:64px; margin:15px 17px; padding:11px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:10px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:13px; }.company-notification-attachment > i:first-child { width:38px; height:38px; display:grid; place-items:center; color:#b62f2f; background:color-mix(in srgb,#e45b5b 12%,var(--surface)); border-radius:10px; }.company-notification-attachment strong,.company-notification-attachment small { display:block; font-size:9px; }.company-notification-attachment small { margin-top:3px; color:var(--text-faint); font-size:8px; }.company-notification-attachment > i:last-child { color:var(--gold-deep); }
.company-notification-message { margin:16px 17px; padding:14px; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:14px; }.company-notification-message span { color:var(--gold-deep); font-size:8px; font-weight:850; }.company-notification-message p { margin:8px 0 0; font-size:10px; line-height:1.6; }
.company-notification-reply { margin:0 17px 16px; display:block; }.company-notification-reply > span { display:block; margin-bottom:7px; font-size:9px; font-weight:800; }.company-notification-reply textarea { width:100%; padding:12px; resize:vertical; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:12px; font-size:10px; }
.company-event-capacity { margin:17px; padding:15px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 12px; background:var(--gold-wash); border:1px solid var(--line); border-radius:14px; }.company-event-capacity strong,.company-event-capacity span { display:block; }.company-event-capacity strong { font-size:11px; }.company-event-capacity span { margin-top:3px; color:var(--text-faint); font-size:8px; }.company-event-capacity > b { align-self:center; color:var(--gold-deep); font-size:15px; }.company-event-capacity > i { grid-column:1 / -1; height:6px; overflow:hidden; background:var(--surface-2); border-radius:9px; }.company-event-capacity > i span { height:100%; display:block; background:linear-gradient(90deg,var(--gold-bright),var(--gold)); border-radius:inherit; }
.company-event-attendees { margin:0 17px 16px; }.company-event-attendees article { min-height:60px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:9px; border-bottom:1px solid var(--line); }.company-event-attendees img,.company-event-attendees .person-initials { width:38px; height:38px; }.company-event-attendees strong,.company-event-attendees small { display:block; font-size:9px; }.company-event-attendees small { margin-top:3px; color:var(--text-faint); font-size:7px; }.company-event-attendees button { color:var(--gold-deep); font-size:8px; font-weight:800; }

/* Uporządkowany modal administracyjny: przewija się formularz, nie cały dialog. */
.company-admin-modal-dialog { display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
.company-admin-modal-dialog > header { position:relative; z-index:2; background:var(--surface-solid); }
.company-admin-modal-form { min-height:0; padding:0; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; }
.company-admin-modal-form > .company-admin-fields,.company-admin-modal-form > .review-request-info + .company-admin-fields { min-height:0; padding:20px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--gold) transparent; }
.company-admin-modal-form > .company-admin-fields::-webkit-scrollbar { width:7px; }.company-admin-modal-form > .company-admin-fields::-webkit-scrollbar-track { background:transparent; }.company-admin-modal-form > .company-admin-fields::-webkit-scrollbar-thumb { background:linear-gradient(var(--gold-bright),var(--gold-deep)); border:2px solid var(--surface-solid); border-radius:999px; }
.company-admin-modal-form footer { position:relative; z-index:2; margin:0; padding:14px 20px; background:var(--surface-solid); box-shadow:0 -12px 28px rgba(45,29,7,.05); }
.review-request-dialog .company-admin-modal-form { display:block; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold) transparent; }.review-request-dialog .review-request-info { margin:20px 20px 0; }.review-request-dialog .company-admin-fields { overflow:visible; }.review-request-dialog .company-admin-modal-form footer { position:sticky; bottom:0; }

/* Czytelniejsza typografia i szybki kontakt w centrum powiadomień. */
.company-notification-detail-panel > header { min-height:96px; }.company-notification-detail-panel > header h2 { font-size:23px; }.company-notification-detail-panel > header p { font-size:10px; }
.company-notification-person { min-height:82px; grid-template-columns:46px minmax(0,1fr) auto; }.company-notification-person img,.company-notification-person .person-initials { width:46px; height:46px; }.company-notification-person > div > strong { display:block; font-size:13px; }.company-notification-person > div > span { display:block; margin-top:4px; overflow:hidden; color:var(--text-faint); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.company-notification-person .company-notification-person-actions { margin:0; display:flex; align-items:center; gap:7px; overflow:visible; color:inherit; white-space:normal; }.company-notification-person-actions > a,.company-notification-person-actions > button { min-width:36px; height:36px; padding:0 10px; display:flex; align-items:center; justify-content:center; gap:7px; color:var(--gold-deep); background:var(--surface-2); border:1px solid var(--line); border-radius:10px; font-size:11px; font-weight:850; white-space:nowrap; }.company-notification-person-actions .company-notification-call { color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:transparent; box-shadow:0 8px 20px rgba(176,116,16,.13); }
.company-notification-data > div { min-height:62px; padding-top:12px; padding-bottom:12px; }.company-notification-data dt { font-size:10px; }.company-notification-data dd { font-size:12px; line-height:1.5; }
.company-notification-note { grid-template-columns:30px minmax(0,1fr); }.company-notification-note i { width:30px; height:30px; }.company-notification-note p { font-size:11px; line-height:1.55; }
.company-notification-attachment strong { font-size:11px; }.company-notification-attachment small { font-size:9px; }.company-notification-message span { font-size:10px; }.company-notification-message p { font-size:12px; }.company-notification-reply > span { font-size:11px; }.company-notification-reply textarea { font-size:12px; }
.company-event-capacity strong { font-size:13px; }.company-event-capacity span { font-size:10px; }.company-event-attendees strong { font-size:11px; }.company-event-attendees small { font-size:9px; }.company-event-attendees button { font-size:10px; }

@media (max-width: 1100px) {
  .company-notifications-summary { grid-template-columns:repeat(5,170px); overflow-x:auto; scrollbar-width:none; }.company-notifications-summary::-webkit-scrollbar { display:none; }
  .company-notifications-layout { grid-template-columns:minmax(0,1fr) 350px; }
}

@media (max-width: 820px) {
  body[data-page="company-notifications"] .main-area { padding-right:15px; }
  .company-notifications-layout { grid-template-columns:1fr; }
  .company-notification-detail { position:fixed; z-index:2100; inset:var(--topbar-h) 0 0; min-height:0; overflow-y:auto; visibility:hidden; opacity:0; transform:translateX(100%); border:0; border-radius:0; transition:.22s ease; }.company-notification-detail.open.mobile-open { visibility:visible; opacity:1; transform:none; }
  .company-notification-detail-close { position:fixed; z-index:5; top:calc(var(--topbar-h) + 14px); right:14px; width:42px; height:42px; display:grid; place-items:center; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:50%; font-size:17px; }
  .company-notification-detail-panel > header { padding-right:70px; }
}

@media (max-width: 700px) {
  body[data-page="company-notifications"] { width:100%; max-width:100vw; overflow-x:hidden; }
  body[data-page="company-notifications"] .app-shell,body[data-page="company-notifications"] .main-area,body[data-page="company-notifications"] #viewRoot { width:100%; max-width:100%; min-width:0; margin:0; }
  body[data-page="company-notifications"] .main-area { padding:0 0 calc(76px + env(safe-area-inset-bottom)); overflow-x:hidden; }
  .company-notifications-workspace { width:100%; }
  .company-notifications-hero { margin:0; padding:18px 16px; align-items:flex-start; flex-direction:column; gap:15px; background:var(--surface); border-bottom:1px solid var(--line); }.company-notifications-hero h1 { font-size:34px; }.company-notifications-hero p { font-size:12px; line-height:1.5; }.company-notifications-back { margin-bottom:11px; }.company-notifications-actions { width:100%; }.company-notifications-actions .soft-btn { flex:1; justify-content:center; font-size:10px; }
  .company-notifications-advanced-filters { margin:0; border-radius:0; box-shadow:none; }.company-notifications-advanced-filters.open { max-height:620px; margin:0; border-left:0; border-right:0; }.company-notifications-advanced-filters > header { padding:16px; }.company-notifications-filter-grid { padding:15px 16px; grid-template-columns:1fr; gap:16px; }.company-notifications-filter-grid label span { min-height:42px; font-size:12px; }.company-notifications-advanced-filters > footer { padding:12px 16px 16px; }.company-notifications-advanced-filters > footer > * { flex:1; justify-content:center; }
  .company-notifications-summary { margin:0; padding:10px 12px; grid-template-columns:repeat(5,164px); gap:8px; background:var(--bg); }.company-notifications-summary > button { min-height:94px; border-radius:14px; }.company-notifications-summary > button span { font-size:13px; }.company-notifications-summary > button strong { font-size:24px; }.company-notifications-summary > button small { font-size:10px; }
  .company-notifications-toolbar { margin:0; padding:10px 12px; grid-template-columns:1fr 1fr; border-left:0; border-right:0; border-radius:0; }.company-notifications-toolbar label { grid-column:1 / -1; }.company-notifications-toolbar input { font-size:12px; }.company-notifications-toolbar select { font-size:10px; }
  .company-notifications-list { padding:5px 13px 18px; border-left:0; border-right:0; border-radius:0; }.company-notifications-group-title { min-height:56px; }.company-notifications-group-title h2 { font-size:19px; }.company-notifications-group-title span { font-size:11px; }.company-notification-item { min-height:126px; padding:15px 5px; grid-template-columns:44px minmax(0,1fr); gap:12px; }.company-notification-item.active { margin:0 -5px; width:calc(100% + 10px); padding-left:10px; padding-right:10px; }.company-notification-item.unread::before { left:-6px; }.company-notification-icon { width:44px; height:44px; }.company-notification-copy .company-notification-kicker { font-size:9px; }.company-notification-copy > strong { font-size:14px; line-height:1.45; white-space:normal; }.company-notification-copy > small { font-size:11px; white-space:normal; line-height:1.45; }.company-notification-copy > span:last-child b,.company-notification-copy time { font-size:10px; }.company-notification-avatar,.company-notification-stack { display:none; }
  .company-notification-detail { inset:0; padding-top:0; padding-bottom:calc(72px + env(safe-area-inset-bottom)); background:var(--surface-solid); }.company-notification-detail-close { top:14px; right:14px; }.company-notification-detail-panel > header { min-height:104px; padding:18px 70px 18px 16px; }.company-notification-detail-panel > header h2 { font-size:25px; }.company-notification-detail-panel > header p { font-size:10px; }.company-notification-person { margin-left:16px; margin-right:16px; }.company-notification-person strong { font-size:13px; }.company-notification-person span { font-size:10px; }.company-notification-data { margin-left:16px; margin-right:16px; }.company-notification-data > div { grid-template-columns:90px minmax(0,1fr); }.company-notification-data dt { font-size:9px; }.company-notification-data dd { font-size:12px; }.company-notification-note,.company-notification-message,.company-notification-attachment,.company-event-capacity { margin-left:16px; margin-right:16px; }.company-notification-message p { font-size:12px; }.company-notification-reply { margin-left:16px; margin-right:16px; }.company-notification-reply textarea { font-size:13px; }.company-notification-detail-panel > footer { position:sticky; bottom:0; padding:12px 14px; background:var(--surface-solid); box-shadow:0 -10px 28px rgba(0,0,0,.08); }.company-notification-detail-panel > footer > * { flex:1; }
  .company-admin-modal-dialog { max-height:94dvh; }.company-admin-modal-form > .company-admin-fields { padding:17px 15px; }.company-admin-modal-form footer { padding:12px 15px calc(12px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  .brand, .brand img { width: 122px; }
  .composer-actions button { font-size: 0; }
  .composer-actions i { margin: 0; font-size: 15px; }
  .profile-name h1 { font-size: 25px; }
  .premium-btn, .outline-btn, .soft-btn { padding-left: 11px; padding-right: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Dashboard użytkownika */
body[data-route="dashboard"] .right-rail { display: none; }
body[data-route="dashboard"] .main-area { padding-right: 26px; padding-left: calc(var(--sidebar-w) + 26px); }
body[data-route="dashboard"] #viewRoot { width: 100%; max-width: 1560px; }

/* Directory: users currently online */
body[data-page="now-online"] #viewRoot { width:100%; max-width:1050px; }
.online-directory { display:grid; gap:16px; }
.online-directory-hero {
  padding:30px 32px; display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  background:var(--surface-solid); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-soft);
}
.online-directory-hero h1 { margin:5px 0 8px; font:800 clamp(34px,3.4vw,48px)/1.04 var(--font-display); letter-spacing:-.045em; }
.online-directory-hero p { max-width:680px; margin:0; color:var(--text-soft); font-size:14px; line-height:1.55; }
.online-directory-count { flex:0 0 auto; min-height:42px; padding:0 16px; display:inline-flex; align-items:center; gap:8px; color:var(--gold-deep); background:var(--gold-wash); border:1px solid var(--line-strong); border-radius:999px; font-size:12px; font-weight:800; }
.online-directory-count i { color:var(--success); font-size:9px; }
.online-directory-tools { padding:12px; display:flex; align-items:center; gap:12px; background:var(--surface-solid); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-soft); }
.online-directory-tools > label { min-width:0; flex:1; min-height:48px; padding:0 16px; display:flex; align-items:center; gap:10px; color:var(--text-faint); background:var(--surface-2); border:1px solid var(--line); border-radius:14px; }
.online-directory-tools input { width:100%; min-width:0; color:var(--text); background:transparent; border:0; outline:0; font:600 13px/1.2 var(--font-body); }
.online-directory-filters { display:flex; gap:6px; }
.online-directory-filters button { min-height:44px; padding:0 16px; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:13px; font-size:11px; font-weight:800; }
.online-directory-filters button.active { color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:var(--gold); }
.online-directory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:stretch; }
.online-person-card { min-width:0; height:100%; padding:18px; overflow:hidden; display:grid; grid-template-columns:64px minmax(0,1fr); gap:14px 16px; align-items:center; background:var(--surface-solid); border:1px solid var(--line); border-radius:19px; box-shadow:var(--shadow-soft); }
.online-person-avatar { position:relative; width:64px; height:64px; grid-row:span 2; }
.online-person-avatar img { width:100%; height:100%; display:block; object-fit:cover; border:2px solid var(--surface-solid); border-radius:50%; box-shadow:0 0 0 2px var(--gold-bright); }
.online-person-avatar i { position:absolute; right:1px; bottom:2px; width:13px; height:13px; background:var(--success); border:3px solid var(--surface-solid); border-radius:50%; }
.online-person-card > div { min-width:0; overflow:hidden; }
.online-person-card > div > a,.online-person-card > div > span,.online-person-card > div > small { display:block; }
.online-person-card strong { color:var(--text); font-size:14px; line-height:1.25; }
.online-person-card strong .verified { margin-left:3px; color:var(--gold); font-size:12px; vertical-align:-.04em; }
.online-person-card > div > a { line-height:1.15; }
.online-person-card > div > span { margin-top:0; color:var(--text-faint); font-size:10px; line-height:1.2; }
.online-person-card > div > small { margin-top:7px; color:var(--text-soft); font-size:10px; }
.online-person-card > div > small b { color:var(--success); }
.online-person-card .online-person-meta { min-width:0; display:flex; align-items:center; gap:5px; overflow:hidden; white-space:nowrap; }
.online-person-card .online-person-activity { min-width:0; flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; }
.online-person-card .online-person-company { min-width:0; flex:1 1 0; display:inline-flex; align-items:center; gap:4px; overflow:hidden; color:var(--gold-deep); font-weight:800; white-space:nowrap; }
.online-person-card .online-person-company::before { content:"·"; flex:0 0 auto; color:var(--text-soft); font-weight:500; }
.online-person-card .online-person-company span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.online-person-card .online-person-company i { font-size:8px; }
.online-person-card nav { grid-column:2; display:flex; flex-wrap:wrap; gap:7px; }
.online-person-card nav a,.online-person-card nav button { min-height:36px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:6px; color:var(--gold-deep); border:1px solid var(--line-strong); border-radius:11px; font-size:9.5px; font-weight:800; white-space:nowrap; }
.online-person-card nav a[hidden] { display:none !important; }
.online-person-card nav a:nth-child(2) { color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:var(--gold); }
.online-person-card nav button { color:var(--text-soft); background:var(--surface-2); }
.online-person-card nav button.active { color:var(--success); background:color-mix(in srgb,var(--success) 10%,var(--surface-solid)); border-color:color-mix(in srgb,var(--success) 42%,var(--line)); }
.online-person-card nav button.pending { color:var(--gold-deep); background:var(--gold-wash); border-color:var(--gold); }
.online-person-card.is-recent > div > small b { color:var(--text-soft); }
.online-person-card[hidden] { display:none; }
.online-directory-empty { padding:42px 20px; text-align:center; color:var(--text-soft); background:var(--surface-solid); border:1px solid var(--line); border-radius:18px; }
.online-directory-empty i { margin-right:7px; color:var(--gold); }
.online-directory-sentinel { min-height:46px; padding:0 18px; display:inline-flex; align-items:center; justify-content:center; gap:9px; justify-self:center; color:var(--gold-deep); background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:14px; font-size:11px; font-weight:800; box-shadow:var(--shadow-soft); }
.online-directory-sentinel:hover { color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:var(--gold); }
.online-directory-sentinel[hidden] { display:none; }
.online-directory.is-loading .online-directory-sentinel i { animation:online-directory-spin .75s linear infinite; }
@keyframes online-directory-spin { to { transform:rotate(360deg); } }

@media (min-width: 701px) {
  .online-directory-grid { grid-auto-rows:1fr; }
  .online-person-card { min-height:142px; }
}

@media (max-width: 700px) {
  body[data-page="now-online"] .main-area { padding:var(--topbar-h) 0 calc(78px + env(safe-area-inset-bottom)); }
  body[data-page="now-online"] #viewRoot { width:100%; max-width:100%; }
  .online-directory { width:100%; gap:8px; }
  .online-directory-hero { padding:22px 16px; align-items:flex-start; flex-direction:column; gap:15px; border-left:0; border-right:0; border-radius:0; box-shadow:none; }
  .online-directory-hero h1 { font-size:31px; }
  .online-directory-hero p { font-size:12px; }
  .online-directory-count { min-height:36px; padding:0 13px; font-size:10px; }
  .online-directory-tools { padding:10px 12px; align-items:stretch; flex-direction:column; border-left:0; border-right:0; border-radius:0; box-shadow:none; }
  .online-directory-tools > label { min-height:44px; }
  .online-directory-filters { width:100%; }
  .online-directory-filters button { min-width:0; flex:1; min-height:40px; padding:0 8px; }
  .online-directory-grid { grid-template-columns:1fr; gap:8px; }
  .online-person-card { height:auto; padding:15px 13px; grid-template-columns:56px minmax(0,1fr); gap:12px; border-left:0; border-right:0; border-radius:0; box-shadow:none; }
  .online-person-avatar { width:56px; height:56px; }
  .online-person-card nav { grid-column:1 / -1; }
  .online-person-card nav a,.online-person-card nav button { flex:1 1 auto; min-height:38px; padding:0 9px; font-size:9px; }
  .online-directory-sentinel { min-height:42px; border-radius:12px; box-shadow:none; }
}
.user-dashboard { display: grid; gap: 18px; }
.dashboard-welcome {
  position: relative; min-height: 250px; padding: clamp(28px,3vw,46px); overflow: hidden;
  display: grid; grid-template-columns: minmax(0,1fr) minmax(290px,390px); gap: 42px; align-items: center;
  color: #fff; background:
    radial-gradient(circle at 78% 35%, rgba(232,190,96,.25), transparent 25rem),
    linear-gradient(115deg,rgba(10,8,4,.98),rgba(28,21,11,.94) 58%,rgba(99,63,12,.82)),
    url("../images/feed-mustang.webp") center 56%/cover;
  border: 1px solid rgba(230,189,97,.25); border-radius: 24px; box-shadow: 0 20px 55px rgba(65,41,7,.18);
}
.dashboard-welcome::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,4,2,.24),transparent 60%); pointer-events:none; }
.dashboard-welcome-copy,.dashboard-profile-summary { position: relative; z-index: 1; }
.dashboard-welcome .eyebrow { color: #e6bd61; }
.dashboard-welcome h1 { margin: 7px 0 10px; font: 800 clamp(32px,3vw,48px)/1.05 var(--font-display); letter-spacing: -.045em; }
.dashboard-welcome-copy > p { max-width: 680px; margin: 0; color: rgba(255,255,255,.73); font-size: 14px; line-height: 1.7; }
.dashboard-welcome-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.dashboard-welcome-actions button { min-height: 47px; }
.dashboard-welcome .outline-btn { color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.06); }
.dashboard-profile-summary { padding: 20px; background: rgba(10,8,5,.54); border: 1px solid rgba(230,189,97,.25); border-radius: 18px; backdrop-filter: blur(16px); }
.dashboard-profile-head { display:grid; grid-template-columns:52px 1fr 36px; gap:12px; align-items:center; }
.dashboard-avatar { position:relative; }
.dashboard-avatar img { width:52px; height:52px; object-fit:cover; border:2px solid rgba(255,255,255,.75); border-radius:50%; }
.dashboard-avatar i { position:absolute; right:0; bottom:2px; color:#2fba83; font-size:10px; border:2px solid #171108; border-radius:50%; }
.dashboard-profile-head strong { display:block; color:#fff; font-size:15px; }
.dashboard-profile-head div span { color:rgba(255,255,255,.55); font-size:11px; }
.dashboard-icon-btn { width:36px; height:36px; display:grid; place-items:center; color:#ebc56d; border:1px solid rgba(235,197,109,.25); border-radius:11px; }
.dashboard-completion-copy { margin:18px 0 8px; display:flex; justify-content:space-between; color:rgba(255,255,255,.65); font-size:11px; }
.dashboard-completion-copy strong { color:#efca74; }
.dashboard-progress { height:6px; overflow:hidden; background:rgba(255,255,255,.12); border-radius:99px; }
.dashboard-progress span { display:block; height:100%; background:linear-gradient(90deg,#c79234,#f0cc79); border-radius:inherit; }
.dashboard-completion-link { width:100%; margin-top:13px; display:flex; justify-content:space-between; color:#fff; font-size:11px; font-weight:700; }

.dashboard-stat-grid { display:grid; grid-template-columns:repeat(6,minmax(145px,1fr)); gap:10px; }
.dashboard-stat { min-width:0; padding:17px 15px; display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow-soft); }
.dashboard-stat-icon { width:42px; height:42px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border:1px solid var(--line); border-radius:13px; font-size:16px; }
.dashboard-stat small,.dashboard-stat strong,.dashboard-stat em { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-stat small { color:var(--text-faint); font-size:11px; font-weight:700; }
.dashboard-stat strong { margin:2px 0; color:var(--text); font-size:20px; letter-spacing:-.04em; }
.dashboard-stat em { color:var(--text-faint); font-size:10px; font-style:normal; }
.dashboard-stat .is-up { color:var(--success); }
.dashboard-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,350px); gap:18px; align-items:start; }
.dashboard-primary,.dashboard-secondary { min-width:0; display:flex; flex-direction:column; gap:18px; }
.dashboard-card { min-width:0; padding:22px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-soft); }
.dashboard-section-head { margin-bottom:18px; display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.dashboard-section-head h2 { margin:2px 0 2px; font:800 20px/1.2 var(--font-display); letter-spacing:-.035em; }
.dashboard-section-head p { margin:0; color:var(--text-faint); font-size:12px; }
.dashboard-section-head > button,
.dashboard-section-head > a { flex:none; min-height:34px; display:inline-flex; align-items:center; gap:8px; color:var(--gold-deep); font-size:11px; font-weight:800; }
.dashboard-section-head > button:hover,
.dashboard-section-head > a:hover { color:var(--gold); }

.dashboard-online-row { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); align-items:start; justify-items:center; gap:8px; overflow:hidden; }
.dashboard-online-person { width:100%; min-width:0; padding:4px 2px; display:flex; flex-direction:column; align-items:center; }
.dashboard-online-person > span { position:relative; width:64px; height:64px; margin-bottom:8px; }
.dashboard-online-person img { width:64px; height:64px; object-fit:cover; border:2px solid var(--surface); border-radius:50%; box-shadow:0 0 0 2px var(--gold-bright); }
.dashboard-online-person span i { position:absolute; right:1px; bottom:2px; width:12px; height:12px; background:#25ae78; border:3px solid var(--surface); border-radius:50%; }
.dashboard-online-person strong { width:100%; max-width:100%; overflow:hidden; color:var(--text); font-size:11px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-online-person small { width:100%; overflow:hidden; color:var(--text); font-size:9px; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-online-person.is-online small { color:var(--success); }
.dashboard-online-more > span { display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border:1px dashed var(--gold); border-radius:50%; transition:transform .18s ease,background-color .18s ease,color .18s ease; }
.dashboard-online-more > span b { font-size:15px; }
.dashboard-online-more strong { color:var(--gold-deep); }
.dashboard-online-more small { color:var(--text-faint); }
.dashboard-online-more:hover > span { color:#241704; background:var(--gold); transform:translateX(2px); }

.dashboard-carousel-shell { position:relative; min-width:0; }
.dashboard-feed-grid,.dashboard-shorts-grid { min-width:0; padding:2px 2px 7px; display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.dashboard-feed-grid::-webkit-scrollbar,.dashboard-shorts-grid::-webkit-scrollbar,.dashboard-video-grid::-webkit-scrollbar { display:none; }
.dashboard-feed { position:relative; flex:0 0 clamp(136px,11.5vw,172px); width:clamp(136px,11.5vw,172px); min-height:0; aspect-ratio:4/5; overflow:hidden; scroll-snap-align:start; color:#fff; background:#15120d; border-radius:16px; }
.dashboard-feed > img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .28s ease; }
.dashboard-feed:hover > img { transform:scale(1.035); }
.dashboard-feed-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.14),transparent 40%,rgba(0,0,0,.9)); }
.dashboard-feed-engagement { position:absolute; top:9px; left:9px; padding:5px 8px; display:inline-flex; align-items:center; gap:4px; color:#fff!important; background:rgba(0,0,0,.64); border:1px solid rgba(255,255,255,.22); border-radius:999px; font-size:9px; font-weight:800; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.65); backdrop-filter:blur(6px); }
.dashboard-feed-engagement i { color:#fff!important; }
.dashboard-feed-type { left:auto; right:9px; }
.dashboard-feed-author { position:absolute; left:10px; right:8px; bottom:10px; display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:7px; text-align:left; }
.dashboard-feed-author img { grid-row:1/3; width:28px; height:28px; object-fit:cover; border:1px solid rgba(255,255,255,.6); border-radius:50%; }
.dashboard-feed-author b { overflow:hidden; color:#fff; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-feed-author small { overflow:hidden; color:rgba(255,255,255,.68); font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-short { position:relative; flex:0 0 clamp(142px,12.5vw,180px); width:clamp(142px,12.5vw,180px); min-height:0; aspect-ratio:9/16; overflow:hidden; scroll-snap-align:start; color:#fff; background:#15120d; border-radius:16px; }
.dashboard-short > img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .28s ease; }
.dashboard-short:hover > img { transform:scale(1.035); }
.dashboard-short-shade { position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.18),transparent 42%,rgba(0,0,0,.88)); }
.dashboard-short-views { position:absolute; top:10px; left:10px; padding:5px 8px; display:inline-flex;align-items:center;gap:4px;color:#fff !important;background:rgba(0,0,0,.64); border:1px solid rgba(255,255,255,.22); border-radius:999px; font-size:9px;font-weight:800;line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.65);backdrop-filter:blur(6px); }
.dashboard-short-views i { color:#fff !important; }
.dashboard-short-author { position:absolute; left:11px; right:9px; bottom:11px; display:grid; grid-template-columns:30px 1fr; column-gap:8px; text-align:left; }
.dashboard-short-author img { grid-row:1/3; width:30px; height:30px; object-fit:cover; border:1px solid rgba(255,255,255,.6); border-radius:50%; }
.dashboard-short-author b { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-short-author small { color:rgba(255,255,255,.62); font-size:9px; }

.dashboard-people-carousel { position:relative; min-width:0; }
.dashboard-people-grid { min-width:0; padding:2px 2px 7px; display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.dashboard-people-grid::-webkit-scrollbar { display:none; }
body[data-page="user-profile"] .user-profile-people-card { margin-bottom:15px; }
.dashboard-person-card { position:relative; flex:0 0 clamp(205px,21vw,238px); width:clamp(205px,21vw,238px); min-width:0; overflow:hidden; display:flex; flex-direction:column; scroll-snap-align:start; color:var(--text); background:var(--surface-2); border:1px solid var(--line-strong); border-radius:16px; box-shadow:0 8px 24px rgba(72,47,12,.06); }
html[data-theme="dark"] .dashboard-person-card { box-shadow:0 10px 26px rgba(0,0,0,.24); }
.dashboard-person-cover { width:100%; height:118px; overflow:hidden; display:block; background:var(--surface-3); }
.dashboard-person-cover img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.dashboard-person-card:hover .dashboard-person-cover img { transform:scale(1.025); }
.dashboard-person-avatar { position:relative; z-index:1; width:70px; height:70px; margin:-35px auto 0; object-fit:cover; border:3px solid var(--surface-2); border-radius:50%; box-shadow:0 0 0 1px var(--line-strong); }
.dashboard-person-copy { min-width:0; padding:8px 13px 0; display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.dashboard-person-copy strong,.dashboard-person-copy span,.dashboard-person-copy small { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-person-copy strong { color:var(--text); font-size:12px; }
.dashboard-person-copy strong .verified { margin-left:3px; font-size:12px; vertical-align:-.04em; }
.dashboard-person-copy span { margin-top:2px; color:var(--text-faint); font-size:9px; }
.dashboard-person-copy small { margin-top:8px; color:var(--text-soft); font-size:9px; }
.dashboard-person-card .follow-chip { width:calc(100% - 24px); min-height:38px; margin:13px 12px 12px; padding:0 10px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--gold-deep); background:var(--surface); border-color:var(--line-strong); border-radius:11px; box-shadow:0 5px 14px rgba(72,47,12,.06); font-size:9px; font-weight:800; }
.dashboard-person-card .follow-chip:hover { color:#241704; background:var(--gold); border-color:var(--gold-deep); transform:translateY(-1px); }
.dashboard-person-card .follow-chip i { font-size:12px; line-height:1; }
.dashboard-dismiss { position:absolute; z-index:3; top:8px; right:8px; width:30px; height:30px; display:grid; place-items:center; color:#fff; background:rgba(12,11,9,.56); border:1px solid rgba(255,255,255,.24); border-radius:50%; backdrop-filter:blur(7px); }
.dashboard-dismiss:hover { color:#fff; background:rgba(12,11,9,.78); }
.dashboard-people-arrow { position:absolute; z-index:4; top:50%; width:44px; height:44px; display:grid; place-items:center; color:var(--text); background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:50%; box-shadow:0 10px 28px rgba(55,35,8,.18); transform:translateY(-50%); transition:opacity .18s ease,transform .18s ease,background-color .18s ease; }
.dashboard-people-arrow:hover { color:var(--gold-deep); background:var(--surface-2); transform:translateY(-50%) scale(1.04); }
.dashboard-people-arrow:disabled { visibility:hidden; opacity:0; pointer-events:none; }
.dashboard-people-prev { left:-18px; }
.dashboard-people-next { right:-18px; }

.dashboard-carousel-arrow { position:absolute; z-index:4; top:50%; width:44px; height:44px; display:grid; place-items:center; color:var(--text); background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:50%; box-shadow:0 10px 28px rgba(55,35,8,.18); transform:translateY(-50%); transition:opacity .18s ease,transform .18s ease,background-color .18s ease; }
.dashboard-carousel-arrow:hover { color:var(--gold-deep); background:var(--surface-2); transform:translateY(-50%) scale(1.04); }
.dashboard-carousel-arrow:disabled { visibility:hidden; opacity:0; pointer-events:none; }
.dashboard-carousel-prev { left:-18px; }
.dashboard-carousel-next { right:-18px; }
.dashboard-videos-card .dashboard-section-head { margin-bottom:13px; }
.dashboard-video-grid { min-width:0; padding:2px 2px 5px; display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; }
.dashboard-video { flex:0 0 clamp(260px,31%,360px); width:clamp(260px,31%,360px); min-width:0; scroll-snap-align:start; }
.dashboard-video-media { position:relative; display:block; width:100%; aspect-ratio:16/9; padding:0; overflow:hidden; isolation:isolate; background:#0b0a08; border:0; border-radius:14px; box-shadow:none; transform:translateZ(0); }
.dashboard-video-media > img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; opacity:1; border-radius:inherit; transform:none; }
.dashboard-video-media:hover > img { opacity:1; transform:none; }
.dashboard-video-media > span { position:absolute; inset:50% auto auto 50%; width:38px; height:38px; display:grid; place-items:center; color:#241704; background:rgba(240,204,121,.94); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 8px 25px rgba(0,0,0,.25); }
.dashboard-video-media time { position:absolute; right:7px; bottom:7px; padding:3px 6px; color:#fff; background:rgba(0,0,0,.78); border:0; border-radius:5px; font-size:9px; line-height:1; font-weight:800; box-shadow:none; }
.dashboard-video > div { padding:4px 2px 0; }
.dashboard-video > div strong { display:block; margin:0 0 4px; color:var(--text); font-size:12px; line-height:1.35; }
.dashboard-video > div span,.dashboard-video > div small { display:block; color:var(--text-faint); font-size:10px; line-height:1.35; }
.dashboard-video > div small { margin-top:1px; }
.dashboard-video > div span i,.dashboard-verified { color:var(--gold-deep); }

.dashboard-visitor-list { display:grid; }
.dashboard-visitor-list article { min-width:0; min-height:65px; padding:10px 0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:11px; align-items:center; border-top:1px solid var(--line); }
.dashboard-visitor-list article:first-child { border-top:0; }
.dashboard-visitor-profile { min-width:0; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:11px; align-items:center; color:inherit; border-radius:11px; }
.dashboard-visitor-avatar { position:relative; }
.dashboard-visitor-avatar img { width:44px; height:44px; object-fit:cover; border-radius:50%; }
.dashboard-visitor-avatar i { position:absolute; right:0; bottom:1px; width:10px; height:10px; background:#25ae78; border:2px solid var(--surface); border-radius:50%; }
.dashboard-visitor-identity strong,.dashboard-visitor-identity small { display:block; }
.dashboard-visitor-identity strong { color:var(--text); font-size:12px; transition:color .18s ease; }
.dashboard-visitor-identity small,.dashboard-visitor-profile time { color:var(--text-faint); font-size:10px; }
.dashboard-visitor-profile:hover .dashboard-visitor-identity strong { color:var(--gold-deep); }
.dashboard-visitor-list article > button { min-width:94px; min-height:36px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; gap:7px; color:var(--gold-deep); background:var(--surface-2); border:1px solid var(--line-strong); border-radius:11px; box-shadow:0 4px 12px rgba(72,47,12,.05); font-size:10px; font-weight:800; }
.dashboard-visitor-list article > button:hover { color:#241704; background:var(--gold); border-color:var(--gold-deep); transform:translateY(-1px); }
.dashboard-visitor-list article > button i { font-size:12px; line-height:1; }
.dashboard-visitors-more { width:100%; min-height:43px; margin-top:11px; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--gold-deep); background:var(--surface-2); border:1px solid var(--line-strong); border-radius:12px; font-size:11px; font-weight:850; transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease; }
.dashboard-visitors-more:hover { color:#241704; background:var(--gold); border-color:var(--gold-deep); transform:translateY(-1px); }
.dashboard-visitors-more:disabled { cursor:wait; opacity:.72; transform:none; }
.dashboard-visitors-more[aria-busy="true"] i { animation:dashboardVisitorsSpin .75s linear infinite; }
@keyframes dashboardVisitorsSpin { to { transform:rotate(360deg); } }
.dashboard-empty { flex:1 0 100%; min-height:96px; padding:20px; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--text-faint); background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:14px; font-size:11px; text-align:center; }
.dashboard-online-row .dashboard-empty,.dashboard-visitor-list .dashboard-empty { grid-column:1/-1; }
.dashboard-empty i { color:var(--gold-deep); font-size:17px; }
[data-dashboard-stream].is-loading::after { content:""; flex:0 0 24px; width:24px; height:24px; align-self:center; border:2px solid var(--line-strong); border-top-color:var(--gold-deep); border-radius:50%; animation:spin .7s linear infinite; }
[data-dashboard-load-more][hidden] { display:none !important; }
[data-profile-friend][aria-busy="true"] { cursor:wait; opacity:.68; }
[data-profile-friend].active { color:var(--text); background:var(--gold-wash); border-color:var(--gold); }
[data-profile-friend].pending { cursor:pointer; }
[data-profile-friend].pending:hover { color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--surface)); border-color:color-mix(in srgb,var(--danger) 46%,var(--line)); }
[data-profile-friend].incoming { color:#201707; background:var(--gold); border-color:var(--gold-deep); }
[data-profile-friend].confirming { color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,var(--surface)); border-color:color-mix(in srgb,var(--danger) 58%,var(--line)); }
html[data-theme="dark"] [data-profile-friend].active { color:var(--gold-bright); background:var(--gold-wash); border-color:color-mix(in srgb,var(--gold) 62%,var(--line-strong)); }
html[data-theme="dark"] [data-profile-friend].incoming { color:#171006; background:var(--gold); border-color:var(--gold-bright); }
html[data-theme="dark"] .dashboard-person-card .follow-chip,
html[data-theme="dark"] .dashboard-visitor-list article > button { box-shadow:0 5px 15px rgba(0,0,0,.18); }

.dashboard-zone-links { display:grid; gap:7px; }
.dashboard-zone-links > :is(a,button) { width:100%; min-height:58px; padding:8px 3px; display:grid; grid-template-columns:38px 1fr 20px; gap:10px; align-items:center; color:inherit; background:transparent; text-align:left; text-decoration:none; border:0; border-bottom:1px solid var(--line); }
.dashboard-zone-links > :is(a,button):last-child { border-bottom:0; }
.dashboard-zone-links > :is(a,button) > span { width:38px; height:38px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:11px; }
.dashboard-zone-links > :is(a,button) div strong,.dashboard-zone-links > :is(a,button) div small { display:block; }
.dashboard-zone-links > :is(a,button) div strong { color:var(--text); font-size:12px; }
.dashboard-zone-links > :is(a,button) div small { color:var(--text-faint); font-size:10px; }
.dashboard-zone-links > :is(a,button) > i { color:var(--text-faint); font-size:9px; }
.dashboard-zone-links > :is(a,button):hover > i { color:var(--gold-deep); transform:translateX(2px); }
.dashboard-fuel-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.dashboard-fuel-card .eyebrow { text-transform:uppercase; }
.dashboard-fuel-grid > div { position:relative; min-height:95px; padding:12px; display:grid; grid-template-columns:32px 1fr; column-gap:8px; align-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; }
.fuel-dot { grid-row:1/4; width:32px; height:32px; display:grid; place-items:center; color:#fff; background:#269568; border-radius:50%; font-size:8px; font-weight:800; }
.fuel-98 { background:#2767a1; }.fuel-on { background:#191919; }.fuel-lpg { background:#b64646; font-size:7px; }
.dashboard-fuel-grid small,.dashboard-fuel-grid strong,.dashboard-fuel-grid em { display:block; }
.dashboard-fuel-grid small { color:var(--text-faint); font-size:10px; }
.dashboard-fuel-grid strong { font-size:14px; }
.dashboard-fuel-grid em { font-size:9px; font-style:normal; }
.dashboard-fuel-grid .is-down { color:var(--success); }.dashboard-fuel-grid .is-up { color:var(--danger); }.dashboard-fuel-grid .is-flat { color:var(--text-faint); }
.dashboard-activity-list { display:grid; }
.dashboard-activity-list article { min-height:64px; display:grid; grid-template-columns:36px 1fr auto; gap:10px; align-items:center; border-top:1px solid var(--line); }
.dashboard-activity-list article:first-child { border-top:0; }
.dashboard-activity-list article > span { width:36px; height:36px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:11px; }
.dashboard-activity-list strong,.dashboard-activity-list small { display:block; }
.dashboard-activity-list strong { font-size:11px; }.dashboard-activity-list small,.dashboard-activity-list time { color:var(--text-faint); font-size:9px; }
.dashboard-activity-list time { white-space:nowrap; }
.dashboard-activity-list .dashboard-activity-empty { min-height:124px; margin-top:2px; }
.dashboard-follow-card .dashboard-section-head { margin-bottom:15px; }
.dashboard-follow-card .suggest { min-width:0; }
.dashboard-follow-card .suggest > div { min-width:0; }
.dashboard-follow-card .suggest strong,
.dashboard-follow-card .suggest strong a,
.dashboard-follow-card .suggest span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-follow-card .suggest .follow-chip { min-width:76px; min-height:34px; padding:0 11px; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.dashboard-follow-card .suggest .follow-chip span { max-width:none; margin:0; overflow:visible; color:inherit; font:inherit; line-height:1; }
.dashboard-tip-card { position:relative; overflow:hidden; color:#f8edda; background:linear-gradient(145deg,#1b160e,#302311); border-color:rgba(230,189,97,.22); }
.dashboard-tip-card > i { position:absolute; right:-8px; top:-6px; color:rgba(230,189,97,.09); font-size:92px; transform:rotate(-12deg); }
.dashboard-tip-card .eyebrow { color:#e6bd61; }.dashboard-tip-card h2 { margin:4px 0 8px; font-size:19px; }.dashboard-tip-card p { position:relative; color:rgba(255,255,255,.62); font-size:12px; line-height:1.6; }
.dashboard-tip-card button { margin-top:8px; color:#fff; border-color:rgba(255,255,255,.18); }

/* Samodzielne ekrany logowania i rejestracji */
.standalone-auth-body { min-height:100dvh; overflow-x:hidden; background:var(--bg); }
.standalone-auth-body #viewRoot { width:100%; max-width:none; margin:0; }
.standalone-auth { position:relative; width:100%; min-height:100dvh; padding:40px; display:flex; align-items:center; justify-content:center; background:
  radial-gradient(circle at 12% 8%,rgba(220,168,68,.2),transparent 28rem),
  radial-gradient(circle at 92% 90%,rgba(150,94,14,.12),transparent 30rem),var(--bg); }
.standalone-auth-tools { position:fixed; z-index:20; top:18px; left:22px; right:22px; display:flex; justify-content:space-between; pointer-events:none; }
.standalone-auth-tool { min-height:40px; padding:0 13px; display:inline-flex; align-items:center; gap:8px; color:var(--text-soft); background:color-mix(in srgb,var(--surface-solid) 88%,transparent); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-soft); backdrop-filter:blur(14px); pointer-events:auto; font-size:10px; font-weight:700; }
.standalone-auth-tool:hover { color:var(--gold-deep); border-color:var(--line-strong); }
.standalone-auth-shell { width:min(100%,1240px); min-height:720px; margin-inline:auto; overflow:hidden; flex:0 1 1240px; display:grid; grid-template-columns:minmax(420px,.92fr) minmax(520px,1.08fr); background:var(--surface); border:1px solid var(--line-strong); border-radius:28px; box-shadow:0 30px 90px rgba(70,43,6,.16); }
html[data-theme="dark"] .standalone-auth-shell { box-shadow:0 34px 100px rgba(0,0,0,.48); }
.standalone-auth-visual { position:relative; min-height:720px; padding:38px; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; color:#fff; background:
  linear-gradient(180deg,rgba(4,4,3,.28),rgba(4,3,2,.42) 35%,rgba(4,3,2,.94)),url("../images/hero-detailing.jpg") 58% center/cover; }
.standalone-auth-visual::after { content:""; position:absolute; inset:0; border:1px solid rgba(230,189,97,.13); border-radius:inherit; pointer-events:none; }
.standalone-auth-brand { position:relative; z-index:2; width:190px; }
.standalone-auth-visual-copy { position:relative; z-index:2; margin:auto 0 28px; }
.standalone-auth-visual-copy .eyebrow { color:#e8bd5b; }
.standalone-auth-visual-copy h1 { max-width:490px; margin:9px 0 15px; font:800 clamp(38px,3.4vw,57px)/.98 var(--font-display); letter-spacing:-.055em; }
.standalone-auth-visual-copy > p { max-width:500px; margin:0 0 25px; color:rgba(255,255,255,.69); font-size:13px; line-height:1.7; }
.standalone-auth-proof { display:grid; gap:10px; }
.standalone-auth-proof span { display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.86); font-size:11px; font-weight:650; }
.standalone-auth-proof i { width:28px; height:28px; display:grid; place-items:center; color:#241704; background:linear-gradient(135deg,#f2d17f,#c79234); border-radius:9px; }
.standalone-auth-visual-stat { position:relative; z-index:2; padding-top:18px; display:flex; align-items:baseline; gap:9px; border-top:1px solid rgba(255,255,255,.17); }
.standalone-auth-visual-stat strong { font-size:17px; }.standalone-auth-visual-stat span { color:rgba(255,255,255,.5); font-size:9px; }
.standalone-auth-panel { min-width:0; padding:52px clamp(42px,5vw,74px) 24px; display:flex; flex-direction:column; background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 32%,var(--surface))); }
.standalone-auth-mobile-brand { display:none; width:170px; }
.standalone-auth-form { width:100%; max-width:560px; margin:auto; }
.standalone-auth-form > .eyebrow { color:var(--gold-deep); }
.standalone-auth-form h2 { margin:6px 0 6px; font:800 38px/1.1 var(--font-display); letter-spacing:-.045em; }
.standalone-auth-form > p { margin:0 0 24px; color:var(--text-faint); font-size:13px; }
.standalone-social-login { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.standalone-social-login button,
.standalone-social-login a { min-height:46px; padding:0 12px; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:12px; font-size:12px; font-weight:800; text-decoration:none; }
.standalone-social-login button:hover,
.standalone-social-login a:hover { color:var(--text); border-color:var(--line-strong); background:var(--gold-wash); }
.standalone-social-login i { font-size:15px; }
.standalone-google-login {
  position:relative;
  min-height:64px;
  padding:8px 14px 8px 9px;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 32px;
  align-items:center;
  gap:12px;
  color:var(--text);
  background:linear-gradient(135deg,var(--surface-solid),var(--surface-2));
  border:1px solid var(--line-strong);
  border-radius:16px;
  box-shadow:0 10px 28px rgba(75,49,14,.07);
  text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
}
.standalone-google-login:hover {
  color:var(--text);
  background:linear-gradient(135deg,var(--surface-solid),var(--gold-wash));
  border-color:var(--gold);
  box-shadow:0 14px 34px rgba(132,84,11,.14);
  transform:translateY(-4px);
}
.standalone-google-login:focus-visible {
  outline:0;
  border-color:var(--gold);
  box-shadow:0 0 0 4px var(--gold-wash),0 14px 34px rgba(132,84,11,.14);
}
.standalone-google-icon {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid rgba(66,66,66,.12);
  border-radius:12px;
  box-shadow:0 5px 14px rgba(30,30,30,.08);
}
.standalone-google-icon svg { width:22px; height:22px; display:block; }
.standalone-google-copy { min-width:0; display:grid; gap:2px; }
.standalone-google-copy strong { color:var(--text); font-size:13px; line-height:1.25; }
.standalone-google-copy small { color:var(--text-faint); font-size:9px; line-height:1.3; }
.standalone-google-arrow {
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  color:var(--gold-deep);
  background:var(--gold-wash);
  border-radius:10px;
  font-size:11px;
  transition:transform .2s ease;
}
.standalone-google-login:hover .standalone-google-arrow { transform:translateX(2px); }
.standalone-auth-divider { margin:21px 0; display:flex; align-items:center; gap:12px; color:var(--text-faint); font-size:8px; }
.standalone-auth-divider::before,.standalone-auth-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.standalone-field-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.standalone-field { margin-bottom:14px; display:grid; gap:7px; }
.standalone-field > span:first-child { color:var(--text-soft); font-size:12px; font-weight:750; }
.standalone-input { min-height:49px; padding:0 14px; display:flex; align-items:center; gap:10px; color:var(--text-faint); background:var(--surface-2); border:1px solid var(--line); border-radius:12px; transition:.2s ease; }
.standalone-input:focus-within { color:var(--gold-deep); border-color:var(--line-strong); box-shadow:0 0 0 4px var(--gold-wash); }
.standalone-input input { min-width:0; width:100%; color:var(--text); background:transparent; border:0; outline:0; font-size:14px; }
.standalone-input input::placeholder { color:var(--text-faint); }
.standalone-password-toggle { width:31px; height:31px; flex:none; display:grid; place-items:center; padding:0; color:var(--text-faint); background:transparent; border:0; border-radius:9px; }
.standalone-password-toggle:hover,.standalone-password-toggle:focus-visible { color:var(--gold-deep); background:var(--gold-wash); outline:0; }
.standalone-input.is-ok { color:#379a67; border-color:color-mix(in srgb,#379a67 58%,var(--line)); }
.standalone-input.is-bad { color:#cf5c5c; border-color:color-mix(in srgb,#cf5c5c 62%,var(--line)); }
.standalone-field-message { height:14px; min-height:14px; margin-top:-2px; overflow:hidden; color:var(--text-faint); font-size:9px; line-height:14px; white-space:nowrap; text-overflow:ellipsis; }
.standalone-field-message:empty { visibility:hidden; }
.standalone-field-message.is-ok { color:#2d9661; }
.standalone-field-message.is-bad { color:#c64f4f; }
.standalone-rules-message { display:block; margin:-3px 0 7px 25px; }
.standalone-auth-register .standalone-check-copy { margin:3px 0; font-size:12px; }
.standalone-auth-register .standalone-rules-message { height:12px; min-height:12px; margin:-1px 0 0 25px; line-height:12px; }
.standalone-auth-alert { margin:0 0 16px; padding:11px 12px; display:flex; align-items:flex-start; gap:9px; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:12px; font-size:10px; font-weight:650; line-height:1.5; }
.standalone-auth-alert > i { margin-top:2px; color:var(--gold-deep); }
.standalone-auth-alert.success { background:color-mix(in srgb,#3ca66c 9%,var(--surface-2)); border-color:color-mix(in srgb,#3ca66c 35%,var(--line)); }
.standalone-auth-alert.success > i { color:#329460; }
.standalone-auth-alert.danger { background:color-mix(in srgb,#d25252 8%,var(--surface-2)); border-color:color-mix(in srgb,#d25252 34%,var(--line)); }
.standalone-auth-alert.danger > i { color:#c44d4d; }
.standalone-google-hint { margin:-3px 0 12px; padding:10px 12px; display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:9px; color:var(--text-soft); background:var(--gold-wash); border:1px solid var(--line); border-radius:12px; font-size:9px; line-height:1.4; }
.standalone-google-hint[hidden] { display:none; }
.standalone-google-hint > i { width:26px; height:26px; display:grid; place-items:center; color:#4285f4; background:var(--surface-solid); border-radius:8px; }
.standalone-google-hint strong { display:block; color:var(--text); font-size:10px; }
.standalone-google-hint a { color:var(--gold-deep); font-weight:800; }
.standalone-auth-submit:disabled { cursor:not-allowed; filter:saturate(.45); opacity:.58; transform:none; box-shadow:none; }
.standalone-auth-options { margin:0 0 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.standalone-check { position:relative; display:flex; align-items:center; gap:8px; color:var(--text-soft); font-size:11px; cursor:pointer; }
.standalone-check > input { position:absolute; opacity:0; pointer-events:none; }
.standalone-check > span { flex:none; width:17px; height:17px; display:grid; place-items:center; color:transparent; border:1px solid var(--line-strong); border-radius:4px; font-size:9px; }
.standalone-check > input:checked + span { color:#241704; background:var(--gold-bright); border-color:var(--gold); }
.standalone-check-copy { margin:9px 0; align-items:flex-start; line-height:1.5; }
.standalone-check-copy b { font-weight:600; }.standalone-check-copy button,.standalone-check-copy a,.standalone-auth-link { padding:0; color:var(--gold-deep); font-weight:800; }
.standalone-auth-submit { width:100%; min-height:49px; margin-top:3px; font-size:12px; }
.standalone-auth-switch { margin:20px 0 0 !important; text-align:center; color:var(--text-soft) !important; font-size:12px !important; }
.standalone-auth-switch button,.standalone-auth-switch a { padding:0; color:var(--gold-deep); font-weight:800; }
.standalone-auth-footer { margin-top:auto; padding-top:24px; display:flex; justify-content:center; gap:16px; color:var(--text-faint); font-size:8px; }
.standalone-auth-footer button,.standalone-auth-footer a { padding:0; color:inherit; }
.standalone-auth-register .standalone-auth-shell { min-height:760px; }
.standalone-auth-register .standalone-auth-visual { min-height:760px; }
.standalone-auth-register .standalone-auth-panel { padding-top:42px; }
.standalone-auth-register .standalone-auth-form h2 { font-size:34px; }
.standalone-auth-register .standalone-auth-form > p { margin-bottom:18px; }
.standalone-auth-register .standalone-auth-divider { margin:17px 0; }
.standalone-auth-register .standalone-field { margin-bottom:11px; }
.standalone-auth-register .standalone-input { min-height:45px; }

@media (max-width: 1420px) {
  .dashboard-stat-grid { grid-template-columns:repeat(3,1fr); }
  .dashboard-shorts-grid { grid-template-columns:repeat(6,minmax(145px,1fr)); overflow-x:auto; scrollbar-width:none; }
}

@media (max-width: 1180px) {
  body[data-route="dashboard"] .main-area { padding-right:18px; padding-left:calc(var(--sidebar-w) + 18px); }
  .dashboard-welcome { grid-template-columns:1fr 310px; gap:24px; }
  .dashboard-layout { grid-template-columns:1fr; }
  .dashboard-secondary { display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .dashboard-tip-card { min-height:100%; }
  .standalone-auth { padding:22px; }
  .standalone-auth-shell { grid-template-columns:minmax(360px,.82fr) minmax(480px,1.18fr); }
  .standalone-auth-panel { padding-left:38px; padding-right:38px; }
}

@media (max-width: 900px) {
  .standalone-auth { padding:0; display:block; }
  .standalone-auth-tools { top:14px; left:14px; right:14px; }
  .standalone-auth-tool span { display:none; }
  .standalone-auth-tool { width:42px; height:42px; padding:0; justify-content:center; border-radius:50%; }
  .standalone-auth-shell,.standalone-auth-register .standalone-auth-shell { width:100%; min-height:100dvh; grid-template-columns:1fr; border:0; border-radius:0; box-shadow:none; }
  .standalone-auth-visual { display:none; }
  .standalone-auth-panel { min-height:100dvh; padding:78px clamp(22px,8vw,70px) 24px; justify-content:center; }
  .standalone-auth-mobile-brand { display:block; margin:0 auto 42px; }
  .standalone-auth-register .standalone-auth-panel { padding-top:72px; }
  .standalone-auth-register .standalone-auth-mobile-brand { margin-bottom:28px; }
  .standalone-auth-footer { margin-top:35px; }
}

/* Menu konta w nagłówku — dropdown desktop / pełny panel mobile */
.account-menu-layer {
  position: fixed;
  inset: 0;
  z-index: 2300;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.account-menu-layer.open { visibility: visible; opacity: 1; pointer-events: auto; }
.account-menu-backdrop { position:absolute; inset:0; width:100%; height:100%; background:transparent; }
.account-menu-panel {
  position: absolute;
  top: calc(var(--topbar-h) + 8px);
  right: 22px;
  width: min(360px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--topbar-h) - 20px);
  overflow: hidden;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(73,49,15,.18);
  transform: translateY(-8px) scale(.98);
  transform-origin: top right;
  transition: transform .2s cubic-bezier(.2,.8,.2,1);
}
.account-menu-layer.open .account-menu-panel { transform:none; }
html[data-theme="dark"] .account-menu-panel { box-shadow:0 28px 80px rgba(0,0,0,.58); }
.account-menu-user {
  min-height: 92px;
  padding: 17px;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 34px;
  gap: 12px;
  align-items: center;
  background: linear-gradient(135deg,var(--gold-wash),transparent 68%),var(--surface-solid);
  border-bottom: 1px solid var(--line);
}
.account-menu-user > img { width:52px; height:52px; border-radius:50%; object-fit:cover; border:2px solid var(--gold-bright); }
.account-menu-user > div { min-width:0; }
.account-menu-user strong,.account-menu-user span,.account-menu-user a { display:block; }
.account-menu-user strong { overflow:hidden; color:var(--text); font-size:14px; text-overflow:ellipsis; white-space:nowrap; }
.account-menu-user span { margin-top:1px; color:var(--text-faint); font-size:10px; }
.account-menu-user a { width:max-content; margin-top:5px; color:var(--gold-deep); font-size:10px; font-weight:800; }
.account-menu-close { width:34px; height:34px; display:none; place-items:center; color:var(--text); border-radius:50%; background:var(--surface-2); }
.account-menu-scroll { max-height:calc(100dvh - var(--topbar-h) - 114px); padding:5px 0 8px; overflow-y:auto; overscroll-behavior:contain; }
.account-menu-group { margin:0; padding:7px 8px; border-top:1px solid var(--line); }
.account-menu-group:first-child { border-top:0; }
.account-menu-group > a,.account-menu-group > button {
  width:100%;
  min-height:50px;
  padding:7px 10px;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 14px;
  gap:9px;
  align-items:center;
  color:var(--text-soft);
  text-align:left;
  border-radius:12px;
  transition:background-color .16s ease,color .16s ease;
}
.account-menu-group > a:hover,.account-menu-group > button:hover { color:var(--text); background:var(--surface-2); }
.account-menu-group > a > i:first-child,.account-menu-group > button > i:first-child {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--gold-deep);
  border-radius:10px;
  background:var(--gold-wash);
  font-size:14px;
}
.account-menu-group > a > span,.account-menu-group > button > span { min-width:0; font-size:11px; font-weight:750; }
.account-menu-group > a > span b,.account-menu-group > a > span small,
.account-menu-group > button > span b,.account-menu-group > button > span small { display:block; }
.account-menu-group > a > span b,.account-menu-group > button > span b { color:var(--text); font-size:11px; }
.account-menu-group > a > span small,.account-menu-group > button > span small { margin-top:1px; color:var(--text-faint); font-size:8px; font-weight:600; }
.account-menu-group > a > i:last-child,.account-menu-group > button > i:last-child { color:var(--text-faint); font-size:9px; }
.account-menu-group.account-menu-logout a { color:var(--danger); }
.account-menu-group.account-menu-logout a > i:first-child { color:var(--danger); background:color-mix(in srgb,var(--danger) 10%,transparent); }

/* Listy obserwujących, obserwowanych i znajomych */
.profile-connections {
  position:fixed;
  inset:0;
  z-index:2450;
  display:grid;
  place-items:center;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,visibility .2s ease;
}
.profile-connections.open { visibility:visible; opacity:1; pointer-events:auto; }
.profile-connections-backdrop { position:absolute; inset:0; width:100%; height:100%; background:rgba(35,27,16,.46); }
html[data-theme="dark"] .profile-connections-backdrop { background:rgba(3,5,8,.74); }
.profile-connections-dialog {
  position:relative;
  z-index:1;
  width:min(540px,calc(100vw - 32px));
  height:min(650px,78dvh);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  overflow:hidden;
  color:var(--text);
  background:var(--surface-solid);
  border:1px solid var(--line-strong);
  border-radius:20px;
  box-shadow:var(--shadow);
  transform:translateY(10px) scale(.985);
  transition:transform .2s cubic-bezier(.2,.8,.2,1);
}
.profile-connections.open .profile-connections-dialog { transform:none; }
.profile-connections-head { min-height:73px; padding:15px 17px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.profile-connections-head h2 { margin:2px 0 0; font-size:24px; line-height:1.15; }
.feed-likes-total { margin-left:5px; color:var(--text-faint); font-size:13px; font-weight:750; }
.feed-likes-modal .profile-connections-dialog { height:min(610px,76dvh); }
.profile-connections-close { width:38px; height:38px; display:grid; place-items:center; color:var(--text); border-radius:50%; background:var(--surface-2); }
.profile-connections-search { min-height:46px; margin:12px 16px 7px; padding:0 14px; display:grid; grid-template-columns:18px minmax(0,1fr); gap:9px; align-items:center; color:var(--text-faint); background:var(--surface-2); border:1px solid var(--line); border-radius:13px; }
.profile-connections-search input { min-width:0; width:100%; color:var(--text); background:transparent; border:0; font-size:13px; font-weight:650; }
.profile-connections-search input::placeholder { color:var(--text-faint); }
.profile-connections-lists { position:relative; min-height:0; height:100%; overflow:hidden; }
.profile-connections-list { position:relative; z-index:1; width:100%; height:100%; min-height:0; padding:7px 10px 15px; display:none; overflow-y:auto; overscroll-behavior:contain; box-sizing:border-box; }
.profile-connections-list.active { display:block; }
.connection-person { min-height:76px; padding:9px 8px; display:grid; grid-template-columns:50px minmax(0,1fr) auto; gap:12px; align-items:center; border-radius:14px; transition:background-color .16s ease; }
.profile-connections-list .connection-person[hidden] { display:none !important; }
.connection-person:hover { background:var(--surface-2); }
.connection-person > img { width:50px; height:50px; object-fit:cover; border-radius:50%; border:1px solid var(--line); }
.connection-person > div { min-width:0; }
.connection-person > div strong,.connection-person > div span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.connection-person > div strong { color:var(--text); font-size:13px; line-height:1.3; }
.connection-person > div strong .verified { margin-left:3px; font-size:13px; vertical-align:-.04em; }
.connection-person > div span { margin-top:3px; color:var(--text-faint); font-size:11px; line-height:1.35; }
.feed-likes-list .connection-person { min-height:64px; padding:5px 8px; }
.connection-action { min-height:38px; padding:0 14px; color:var(--gold-deep); background:transparent; border:1px solid var(--line-strong); border-radius:999px; font-size:11px; font-weight:850; white-space:nowrap; }
.connection-action:hover { background:var(--gold-wash); border-color:var(--gold); }
.connection-action.active { color:var(--gold-deep); background:var(--surface-2); border-color:var(--line-strong); }
.profile-stats button[data-profile-connections] { border-radius:8px; transition:background-color .16s ease; }
.profile-stats button[data-profile-connections]:hover { background:transparent; }
.profile-connections-dialog.profile-share-dialog { width:min(460px,calc(100vw - 32px)); height:auto; max-height:min(360px,calc(100dvh - 32px)); grid-template-rows:auto auto; }

.create-btn,.create-btn:link,.create-btn:visited,.create-btn:hover,.create-btn:focus,
html[data-theme="dark"] .create-btn,html[data-theme="dark"] .create-btn * { color:#171107 !important; }

@media (max-width:700px) {
  .top-actions .avatar-button { width:38px; height:38px; display:inline-grid; }
  .account-menu-panel {
    top:0;
    right:0;
    width:100%;
    height:100dvh;
    max-height:none;
    border:0;
    border-radius:0;
    box-shadow:none;
    transform:translateX(100%);
    transform-origin:right center;
  }
  .account-menu-layer.open .account-menu-panel { transform:translateX(0); }
  .account-menu-user { min-height:86px; padding:calc(13px + env(safe-area-inset-top)) 15px 13px; grid-template-columns:50px minmax(0,1fr) 38px; background:linear-gradient(135deg,var(--gold-wash),transparent 72%),var(--surface-solid); }
  .account-menu-user > img { width:50px; height:50px; }
  .account-menu-close { display:grid; }
  .account-menu-scroll { max-height:none; height:calc(100dvh - 86px - env(safe-area-inset-top)); padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  .account-menu-group { padding:7px 10px; }
  .account-menu-group > a,.account-menu-group > button { min-height:55px; }
  .account-menu-group > a > span,.account-menu-group > button > span { font-size:12px; }

  .profile-connections { place-items:end center; }
  .profile-connections-dialog { width:100%; height:min(82dvh,720px); border-right:0; border-bottom:0; border-left:0; border-radius:22px 22px 0 0; transform:translateY(100%); }
  .profile-connections.open .profile-connections-dialog { transform:translateY(0); }
  .profile-connections-head { min-height:68px; }
  .connection-person { grid-template-columns:48px minmax(0,1fr) auto; gap:10px; padding:8px 5px; }
  .connection-person > img { width:48px; height:48px; }
  .connection-person > div strong { font-size:12px; }
  .connection-person > div span { font-size:10px; }
  .feed-likes-list .connection-person { min-height:58px; padding:4px 5px; }
  .connection-action { min-height:36px; padding:0 11px; font-size:10px; }
  .connection-person > a:first-child { width:48px; height:48px; }
  .profile-blocked-state { min-height:0; margin:0 12px; padding:18px; grid-template-columns:44px minmax(0,1fr); }
  .profile-blocked-state.profile-blocked-by-profile { grid-template-columns:44px minmax(0,1fr); }
  .profile-blocked-state > i { width:44px; height:44px; }
  .profile-blocked-state button { grid-column:1/-1; width:100%; }
  .profile-empty-state { min-height:170px; margin:0 12px; border-radius:14px; }
  .user-profile-load-more { margin-top:12px; }
  .profile-connections-dialog.profile-share-dialog { width:100%; height:auto; max-height:min(420px,70dvh); }
  .profile-share-row { grid-template-columns:minmax(0,1fr); }
  .profile-share-row .premium-btn { width:100%; }
  .user-profile-car-specs { gap:8px; }
  .user-profile-car-specs span { min-height:36px; padding:7px 11px; font-size:12px; }
}

/* Checkbox godzin otwarcia korzysta z tego samego języka wizualnego co logowanie. */
.company-hours-toggle { position:relative; min-height:32px; cursor:pointer; user-select:none; }
.company-hours-editor .company-hours-toggle > input[type="checkbox"] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.company-hours-toggle > span { flex:0 0 19px; width:19px; height:19px; display:grid; place-items:center; color:transparent; background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:5px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); font-size:10px; transition:.18s ease; }
.company-hours-toggle > em { color:var(--text-soft); font-style:normal; font-size:11px; font-weight:750; }
.company-hours-toggle > input:checked + span { color:#241704; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:var(--gold-deep); box-shadow:0 4px 11px rgba(155,101,19,.18); }
.company-hours-toggle:hover > span { border-color:var(--gold); }
.company-hours-toggle > input:focus-visible + span { outline:3px solid var(--gold-wash); outline-offset:2px; }

/* Mobilne centrum tworzenia — arkusz od dołu, osadzony bezpośrednio w HTML. */
.mobile-create-layer { display:none; }
@media (max-width:700px) {
  body.mobile-create-open { overflow:hidden; }
  .mobile-create-layer {
    position:fixed; inset:0; z-index:1700; display:block; visibility:hidden;
    opacity:0; pointer-events:none; transition:opacity .2s ease,visibility .2s ease;
  }
  .mobile-create-layer.open { visibility:visible; opacity:1; pointer-events:auto; }
  .mobile-create-backdrop {
    position:absolute; inset:0; width:100%; height:100%;
    background:rgba(18,14,8,.54); backdrop-filter:blur(3px);
  }
  .mobile-create-sheet {
    position:absolute; left:0; right:0; bottom:0; width:100%; max-height:min(78dvh,650px);
    padding:8px 18px calc(20px + env(safe-area-inset-bottom)); overflow-y:auto;
    color:var(--text); background:var(--surface-solid); border:1px solid var(--line);
    border-bottom:0; border-radius:26px 26px 0 0;
    box-shadow:0 -24px 70px rgba(35,24,8,.24); transform:translateY(102%);
    transition:transform .26s cubic-bezier(.2,.8,.2,1); scrollbar-width:thin;
    scrollbar-color:var(--gold) transparent;
  }
  .mobile-create-layer.open .mobile-create-sheet { transform:translateY(0); }
  .mobile-create-handle { width:44px; height:4px; margin:1px auto 12px; background:var(--line-strong); border-radius:999px; }
  .mobile-create-sheet > header { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); }
  .mobile-create-sheet > header h2 { margin:2px 0 0; font:800 28px/1 var(--font-display); letter-spacing:-.03em; }
  .mobile-create-sheet > header .eyebrow { font-size:9px; }
  .mobile-create-close { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:50%; font-size:20px; }
  .mobile-create-options { padding:5px 0 0; }
  .mobile-create-options > a {
    min-height:76px; display:grid; grid-template-columns:48px minmax(0,1fr) 18px;
    align-items:center; gap:13px; color:var(--text); border-bottom:1px solid var(--line);
  }
  .mobile-create-options > a:last-child { border-bottom:0; }
  .mobile-create-options > a > i:first-child { width:46px; height:46px; display:grid; place-items:center; color:#201505; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-radius:15px; font-size:19px; }
  .mobile-create-options > a > span { min-width:0; }
  .mobile-create-options b,.mobile-create-options small { display:block; }
  .mobile-create-options b { font-size:15px; line-height:1.25; }
  .mobile-create-options small { margin-top:3px; color:var(--text-faint); font-size:11px; line-height:1.35; }
  .mobile-create-options > a > i:last-child { color:var(--text-faint); font-size:11px; }

  /* Czytelniejsze prywatne powiadomienia na telefonie. */
  body[data-route="notifications"] #viewRoot { padding-bottom:84px; }
  body[data-route="notifications"] .page-intro { min-height:88px; padding:18px 16px 10px; align-items:center; }
  body[data-route="notifications"] .page-intro .eyebrow { font-size:10px; letter-spacing:.15em; }
  body[data-route="notifications"] .page-intro h1 { font-size:35px; line-height:1; }
  body[data-route="notifications"] .page-intro .page-actions { flex:0 0 122px; }
  body[data-route="notifications"] .page-intro .text-btn { padding:7px 0; color:var(--gold-deep); font-size:11px; font-weight:850; line-height:1.35; text-align:right; }
  body[data-route="notifications"] .feed-filter { min-height:48px; margin:0 12px 10px; padding:5px; border-radius:14px; }
  body[data-route="notifications"] .feed-filter button { min-height:37px; padding:0 8px; font-size:11px; }
  body[data-route="notifications"] .notice-list { margin:0; }
  body[data-route="notifications"] .notice-item { min-height:82px; padding:16px 14px; grid-template-columns:48px minmax(0,1fr) 8px; gap:13px; }
  body[data-route="notifications"] .notice-icon img { width:48px; height:48px; }
  body[data-route="notifications"] .notice-icon i { right:-3px; bottom:-2px; width:22px; height:22px; font-size:9px; }
  body[data-route="notifications"] .notice-copy p { font-size:12.5px; line-height:1.5; }
  body[data-route="notifications"] .notice-copy p strong { font-size:13px; font-weight:850; }
  body[data-route="notifications"] .notice-copy time { display:block; margin-top:5px; font-size:10px; line-height:1.2; }
  body[data-route="notifications"] .notice-item > i { font-size:7px; }

  /* Etykiety stopki są częścią nawigacji, dlatego nie mogą wyglądać jak podpis techniczny. */
  .bottom-nav a { font-size:10.5px; }
  .bottom-nav a > i { font-size:19px; }
  .bottom-nav-badge { min-width:19px; height:19px; font-size:10px; }
}

@media (max-width: 700px) {
  body[data-route="dashboard"] { width:100%; max-width:100vw; overflow-x:hidden; }
  body[data-route="dashboard"] .app-shell,
  body[data-route="dashboard"] .main-area { width:100%; max-width:100vw; min-width:0; }
  body[data-route="dashboard"] .topbar { left:0; right:auto; width:100%; max-width:100vw; }
  body[data-route="dashboard"] .topbar-inner { width:100%; min-width:0; grid-template-columns:39px minmax(0,1fr) auto; }
  body[data-route="dashboard"] .brand { width:138px; max-width:100%; display:inline-flex; justify-self:center; }
  body[data-route="dashboard"] .brand img { width:138px; display:block; }
  body[data-route="dashboard"] .top-actions { min-width:38px; }
  body[data-route="dashboard"] .top-actions .theme-switch { display:flex; }
  body[data-route="dashboard"] .bottom-nav { left:0; right:auto; width:100%; max-width:100vw; display:grid; }
  body[data-route="dashboard"] .main-area { padding:calc(var(--topbar-h) + 10px) 0 calc(86px + env(safe-area-inset-bottom)); overflow:hidden; }
  body[data-route="dashboard"] #viewRoot { width:100%; max-width:100%; min-width:0; overflow:hidden; }
  .user-dashboard { width:100%; max-width:100%; min-width:0; grid-template-columns:minmax(0,1fr); gap:10px; overflow:hidden; }
  .user-dashboard > * { min-width:0; max-width:100%; }
  .dashboard-welcome { width:100%; min-width:0; min-height:auto; padding:23px 16px; grid-template-columns:minmax(0,1fr); gap:17px; border-left:0; border-right:0; border-radius:0; background-position:60% 56%; }
  .dashboard-welcome-copy,.dashboard-profile-summary { min-width:0; }
  .dashboard-welcome h1 { max-width:100%; margin-top:6px; font-size:31px; line-height:1.08; overflow-wrap:anywhere; }
  .dashboard-welcome-copy > p { max-width:100%; font-size:12px; line-height:1.55; }
  .dashboard-welcome-actions { width:100%; margin-top:18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .dashboard-welcome-actions button { width:100%; min-width:0; min-height:44px; padding:0 9px; font-size:9px; }
  .dashboard-profile-summary { width:100%; padding:15px; }
  .dashboard-stat-grid { width:100%; max-width:100%; min-width:0; padding:0 12px 2px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; overflow:visible; }
  .dashboard-stat { min-width:0; padding:13px 10px; grid-template-columns:36px minmax(0,1fr); gap:8px; border-radius:15px; scroll-snap-align:none; }
  .dashboard-stat-icon { width:36px; height:36px; border-radius:11px; font-size:14px; }
  .dashboard-stat small { font-size:9px; }
  .dashboard-stat strong { font-size:18px; }
  .dashboard-stat em { font-size:8px; }
  .dashboard-layout { width:100%; max-width:100%; min-width:0; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
  .dashboard-primary,.dashboard-secondary { width:100%; max-width:100%; min-width:0; display:flex; flex-direction:column; gap:10px; }
  .dashboard-card { width:100%; max-width:100%; min-width:0; padding:18px 14px; overflow:hidden; border-left:0; border-right:0; border-radius:0; box-shadow:none; }
  .dashboard-online-card { order:0; }
  .dashboard-feeds-card { order:1; }
  .dashboard-people-card { order:2; }
  .dashboard-shorts-card { order:3; }
  .dashboard-videos-card { order:4; }
  .dashboard-visitors-card { order:5; }
  .dashboard-zone-card { order:5; }
  .dashboard-activity-card { order:6; }
  .dashboard-follow-card { order:7; }
  .dashboard-fuel-card { order:8; }
  .dashboard-tip-card { order:9; min-height:0; margin:0; border:1px solid rgba(230,189,97,.22); border-radius:0; }
  .dashboard-section-head { margin-bottom:15px; }
  .dashboard-section-head > div { min-width:0; }
  .dashboard-section-head h2 { font-size:19px; }
  .dashboard-section-head p { font-size:9px; }
  .dashboard-section-head > button,
  .dashboard-section-head > a { font-size:0; }
  .dashboard-section-head > button i,
  .dashboard-section-head > a i { font-size:11px; }
  .dashboard-online-row { width:calc(100% + 14px); max-width:calc(100% + 14px); margin-right:-14px; padding:2px 14px 5px 2px; display:flex; gap:9px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:none; }
  .dashboard-online-person { flex:0 0 72px; width:72px; min-width:72px; scroll-snap-align:start; }
  .dashboard-online-person > span { width:58px; height:58px; }
  .dashboard-online-person img { width:58px; height:58px; }
  .dashboard-feed-grid,.dashboard-shorts-grid { width:calc(100% + 14px); max-width:calc(100% + 14px); margin-right:-14px; padding-right:14px; display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .dashboard-feed { flex:0 0 min(41vw,150px); width:min(41vw,150px); scroll-snap-align:start; }
  .dashboard-short { flex:0 0 min(42vw,158px); width:min(42vw,158px); scroll-snap-align:start; }
  .dashboard-people-grid { width:calc(100% + 14px); max-width:calc(100% + 14px); margin-right:-14px; padding-right:14px; display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .dashboard-person-card { flex:0 0 min(72vw,245px); width:min(72vw,245px); scroll-snap-align:start; }
  .dashboard-people-arrow { display:none; }
  .dashboard-video-grid { width:calc(100% + 14px); max-width:calc(100% + 14px); margin-right:-14px; padding-right:14px; display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }
  .dashboard-video { flex:0 0 min(78vw,285px); width:min(78vw,285px); scroll-snap-align:start; }
  .dashboard-carousel-arrow { display:none; }
  .dashboard-visitor-list article { grid-template-columns:minmax(0,1fr) auto; }
  .dashboard-visitor-profile { grid-template-columns:42px minmax(0,1fr); }
  .dashboard-visitor-profile time { display:none; }
  .dashboard-visitor-list article > button { width:40px; min-width:40px; padding:0; gap:0; flex:0 0 40px; font-size:0; }
  .dashboard-visitor-list article > button span { display:none; }
  .dashboard-visitor-list article > button i { width:auto; margin:0; display:block; font-size:12px; line-height:1; }
  .dashboard-fuel-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dashboard-fuel-grid > div { min-height:84px; }
}

@media (max-width: 520px) {
  .standalone-auth-panel { padding-left:18px; padding-right:18px; }
  .standalone-auth-mobile-brand { width:155px; margin-bottom:34px; }
  .standalone-auth-form h2 { font-size:34px; }
  .standalone-social-login { grid-template-columns:1fr; }
  .standalone-google-login { min-height:62px; border-radius:15px; }
  .standalone-google-copy strong { font-size:12px; }
  .standalone-google-copy small { font-size:8.5px; }
  .standalone-field-grid { grid-template-columns:1fr; gap:0; }
  .standalone-google-hint { grid-template-columns:26px minmax(0,1fr); }
  .standalone-google-hint a { grid-column:2; }
  .standalone-auth-options { align-items:flex-start; }
  .standalone-auth-register .standalone-auth-panel { justify-content:flex-start; }
  .standalone-auth-register .standalone-auth-form h2 { font-size:32px; }
  .standalone-auth-register .standalone-auth-mobile-brand { margin-bottom:24px; }
}

/* Feed w proporcjach i układzie inspirowanym Instagramem */
body[data-route="feed"] .feed-stream,
body[data-route="feed"] .feed-filter {
  width: min(100%, clamp(460px, calc(80dvh - 128px), 540px));
  margin-left: auto;
  margin-right: auto;
}
body[data-route="feed"] .post-card { width:100%; }
body[data-route="feed"] .post-head {
  min-height: 66px;
  padding: 11px 13px;
  grid-template-columns: 44px minmax(0,1fr) auto;
  gap: 11px;
  text-align: left;
}
body[data-route="feed"] .post-head > button:first-child {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  display: block;
  align-self: center;
  justify-self: start;
  overflow: hidden;
  border-radius: 50%;
}
body[data-route="feed"] .post-avatar {
  width: 44px !important;
  min-width: 44px;
  max-width: 44px;
  height: 44px !important;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
  border-radius: 50% !important;
}
body[data-route="feed"] .post-author {
  min-width: 0;
  width: 100%;
  padding: 0;
  display: block;
  align-self: center;
  justify-self: stretch;
  text-align: left !important;
}
body[data-route="feed"] .post-author strong { font-size: 13px; line-height: 1.3; }
body[data-route="feed"] .post-author span { margin-top: 2px; font-size: 11px; line-height: 1.35; }
body[data-route="feed"] .post-menu { padding:0; justify-self:end; }
body[data-route="feed"] .post-media:not(.landscape) { aspect-ratio: 4 / 5; }
body[data-route="feed"] .post-meta .post-copy {
  margin-top: 2px;
  padding: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.55;
}
body[data-route="feed"] .like-summary { font-size: 11px; }
body[data-route="feed"] .view-comments { font-size: 11px; }

html[data-theme="dark"] body[data-route="feed"],
html[data-theme="dark"] body[data-route="feed"] .main-area {
  background:var(--bg);
}
html[data-theme="dark"] body[data-route="feed"] .post-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow: none;
}
html[data-theme="dark"] body[data-route="feed"] .post-author strong,
html[data-theme="dark"] body[data-route="feed"] .post-action { color:#f4f6f8; }
html[data-theme="dark"] body[data-route="feed"] .post-author span,
html[data-theme="dark"] body[data-route="feed"] .post-time,
html[data-theme="dark"] body[data-route="feed"] .view-comments { color:#9299a1; }

@media (max-width: 700px) {
  body[data-route="feed"] .main-area { padding-top:var(--topbar-h); }
  body[data-route="feed"] .post-head {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 8px;
  }
  body[data-route="feed"] .post-head-actions { gap: 2px; }
  body[data-route="feed"] .post-follow-btn { min-height: 30px; padding: 0 10px; font-size: 11px; }
  body[data-route="feed"] .post-options-menu { right: 0; left: auto; width: min(220px, calc(100vw - 28px)); }
  body[data-route="feed"] .feed-stream,
  body[data-route="feed"] .feed-filter { width:100%; }
  body[data-route="feed"] .post-head { padding-left:13px; padding-right:13px; }
  html[data-theme="dark"] body[data-route="feed"] .post-card { border-left:0; border-right:0; border-radius:0; }
}

/* Twarde centrowanie standalone auth względem całego viewportu */
html:has(body.standalone-auth-body) {
  width: 100%;
  min-width: 100%;
  overflow-x: hidden;
}
body.standalone-auth-body {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}
body.standalone-auth-body #viewRoot {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
}
body.standalone-auth-body .standalone-auth {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: none !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 40px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center !important;
}
body.standalone-auth-body .standalone-auth-shell {
  width: min(1240px, calc(100vw - 80px)) !important;
  max-width: calc(100vw - 80px) !important;
  margin: 0 !important;
  justify-self: center !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

@media (max-width: 900px) {
  body.standalone-auth-body .standalone-auth {
    padding: 0 !important;
    display: block !important;
  }
  body.standalone-auth-body .standalone-auth-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100dvh !important;
  }
}

/* Pojedynczy Short: akcje na filmie, desktopowe informacje i responsywne komentarze */
body[data-route="short"] .main-area {
  padding-top: calc(var(--topbar-h) + 14px);
  padding-bottom: 24px;
  overflow-x: hidden;
}

body[data-route="short"] #viewRoot {
  width: 100%;
  max-width: none;
  margin: 0;
}

body[data-route="short"] .short-viewer-stage {
  /* Desktop/tablet: Short wykorzystuje całą dostępną wysokość viewportu.
     Widok mobilny ma własne wymiary w regułach poniżej. */
  --short-player-height: calc(100dvh - var(--topbar-h) - 38px);
  position: relative;
  width: 100%;
  height: var(--short-player-height);
  min-height: 0;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

body[data-route="short"] .short-desktop-info {
  position: absolute;
  z-index: 2;
  top: auto;
  bottom: 0;
  right: auto;
  left: 0;
  width: 310px;
  min-width: 0;
  padding: 26px;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: none;
  overflow: hidden;
  transform: none;
  transition: opacity .18s ease;
}

body[data-route="short"] .short-desktop-info h1 {
  margin: 8px 0 10px;
  font: 760 clamp(20px, 1.45vw, 23px)/1.16 var(--font-display);
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

body[data-route="short"] .short-desktop-info > p {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.6;
}

body[data-route="short"] .short-desktop-author {
  margin-top: 22px;
  padding-top: 18px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  border-top: 1px solid var(--line);
}

body[data-route="short"] .short-desktop-author img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border: 2px solid var(--gold);
  border-radius: 50%;
}

body[data-route="short"] .short-desktop-author strong,
body[data-route="short"] .short-desktop-author span { display: block; }
body[data-route="short"] .short-desktop-author strong { font-size: 13px; }
body[data-route="short"] .short-desktop-author span {
  margin-top: 2px;
  overflow: hidden;
  color: var(--text-faint);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-route="short"] .short-desktop-author .outline-btn {
  min-height: 34px;
  padding: 0 12px;
  border-color: var(--gold-line);
  font-size: 11px;
}

body[data-route="short"] .short-desktop-meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
}

body[data-route="short"] .short-desktop-meta i {
  margin-right: 5px;
  color: var(--gold-deep);
}

body[data-route="short"] .short-viewer-shell {
  position: relative;
  width: max-content;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  transition: transform .32s cubic-bezier(.2,.8,.2,1);
}

body[data-route="short"] .short-player {
  width: auto;
  height: var(--short-player-height);
  max-width: none;
  aspect-ratio: 9 / 16;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
}

body[data-route="short"] .short-player::after { inset: 48% 0 0; }

body[data-route="short"] .short-top {
  inset: 15px 14px auto;
  font-size: 18px;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
}

body[data-route="short"] .short-top button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(8,8,8,.38);
  border-radius: 50%;
}

body[data-route="short"] .short-center-play {
  width: 62px;
  height: 62px;
  font-size: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.26);
}

body[data-route="short"] .short-action-rail {
  position: absolute;
  z-index: 5;
  right: -66px;
  bottom: 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

body[data-route="short"] .short-action-rail button {
  width: 50px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 800;
  text-shadow: none;
}

body[data-route="short"] .short-action-rail i {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--surface-solid);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 19px;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body[data-route="short"] .short-action-rail .short-heart.active i {
  color: #ff365f;
  background: rgba(38,8,15,.78);
  border-color: rgba(255,90,120,.62);
}

body[data-route="short"] .short-copy {
  inset: auto 18px 18px 16px;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
}

body[data-route="short"] .short-author { margin-bottom: 9px; }
body[data-route="short"] .short-author img { width: 39px; height: 39px; }
body[data-route="short"] .short-author strong { font-size: 13px; }
body[data-route="short"] .short-author .outline-btn {
  min-height: 31px;
  padding: 0 11px;
  color: var(--gold-light);
  background: rgba(8,8,8,.38);
  border-color: rgba(239,199,110,.52);
  font-size: 10px;
}

body[data-route="short"] .short-author .outline-btn:hover,
body[data-route="short"] .short-author .outline-btn:focus-visible {
  color: #211507 !important;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  border-color: var(--gold-bright) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,.3) !important;
  transform: translateY(-1px);
}
body[data-route="short"] .short-copy p { margin-bottom: 9px; font-size: 13px; line-height: 1.45; }
body[data-route="short"] .short-copy > span { color: rgba(255,255,255,.8); font-size: 11px; }

body[data-route="short"] .short-nav button {
  width: 44px;
  height: 44px;
  background: var(--surface-solid);
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

body[data-route="short"] .short-nav {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
}

/* Otwarcie komentarzy zwalnia prawą część ekranu i przesuwa Short w lewo. */
@media (min-width: 701px) {
  body[data-route="short"].short-comments-open .short-viewer-shell {
    transform: translateX(-225px);
  }

  body[data-route="short"].short-comments-open .short-desktop-info {
    width: 252px;
    padding: 18px;
  }

  body[data-route="short"].short-comments-open .short-desktop-info h1 {
    margin: 6px 0 0;
    font-size: 20px;
    line-height: 1.15;
  }

  body[data-route="short"].short-comments-open .short-desktop-info > p { display: none; }

  body[data-route="short"].short-comments-open .short-desktop-author {
    margin-top: 14px;
    padding-top: 14px;
    grid-template-columns: 40px minmax(0,1fr);
  }

  body[data-route="short"].short-comments-open .short-desktop-author img {
    width: 40px;
    height: 40px;
  }

  body[data-route="short"].short-comments-open .short-desktop-author .outline-btn { display: none; }

  body[data-route="short"].short-comments-open .short-desktop-meta {
    margin-top: 13px;
    gap: 6px 12px;
    font-size: 10px;
  }

  body[data-route="short"] .comments-panel { width: min(450px, 38vw); }
  body[data-route="short"] .modal-comments { padding: 20px; }
  body[data-route="short"] .full-comment { grid-template-columns: 40px 1fr; gap: 11px; margin-bottom: 20px; }
  body[data-route="short"] .full-comment img { width: 40px; height: 40px; }
  body[data-route="short"] .full-comment-bubble { padding: 12px 14px; }
  body[data-route="short"] .full-comment-bubble strong { font-size: 13px; }
  body[data-route="short"] .full-comment-bubble p { font-size: 13px; line-height: 1.55; }
  body[data-route="short"] .comment-tools { margin-top: 7px; gap: 16px; font-size: 11px; }
  body[data-route="short"] .comment-composer textarea { font-size: 13px; }
}

/* Ostateczny układ modali panelu firmy — stały nagłówek i stopka, przewijane pola. */
.company-admin-modal-dialog {
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}
.company-admin-modal-dialog > header {
  position:relative;
  z-index:3;
  background:var(--surface-solid);
}
.company-admin-modal-form {
  min-height:0;
  padding:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  overflow:hidden;
}
.company-admin-modal-form > .company-admin-fields {
  min-height:0;
  padding:20px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:thin;
  scrollbar-color:var(--gold) transparent;
}
.company-admin-modal-form > .company-admin-fields::-webkit-scrollbar { width:7px; }
.company-admin-modal-form > .company-admin-fields::-webkit-scrollbar-track { background:transparent; }
.company-admin-modal-form > .company-admin-fields::-webkit-scrollbar-thumb {
  background:linear-gradient(var(--gold-bright),var(--gold-deep));
  border:2px solid var(--surface-solid);
  border-radius:999px;
}
.company-admin-modal-form footer {
  position:relative;
  z-index:3;
  margin:0;
  padding:14px 20px;
  background:var(--surface-solid);
  box-shadow:0 -12px 28px rgba(45,29,7,.06);
}
.review-request-dialog .company-admin-modal-form { display:block; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold) transparent; }
.review-request-dialog .review-request-info { margin:20px 20px 0; }
.review-request-dialog .company-admin-fields { overflow:visible; }
.review-request-dialog .company-admin-modal-form footer { position:sticky; bottom:0; }
@media (max-width:700px) {
  .company-admin-modal-dialog { max-height:94dvh; }
  .company-admin-modal-form > .company-admin-fields { padding:17px 15px; }
  .company-admin-modal-form footer { padding:12px 15px calc(12px + env(safe-area-inset-bottom)); }
}

/* Company dashboard management workspace */
body[data-page="company-dashboard"] #viewRoot { width:min(100%,1220px); }
body[data-page="company-dashboard"] #viewRoot > .page-intro,
body[data-page="company-dashboard"] #viewRoot > .metric-grid,
body[data-page="company-dashboard"] #viewRoot > .grid-2,
body[data-page="company-dashboard"] #viewRoot > .section-card { display:none; }
@media (min-width:1021px) {
  body[data-page="company-dashboard"] .main-area { padding-left:calc(var(--sidebar-w) + 18px); padding-right:332px; }
  body[data-page="company-dashboard"] #viewRoot { width:100%; max-width:none; margin:0; }
  body[data-page="company-dashboard"] .company-admin-rail { position:fixed; inset:calc(var(--topbar-h) + 18px) 18px 20px auto; z-index:50; width:300px; display:flex; flex-direction:column; gap:14px; overflow-y:auto; }
}
.company-admin-workspace { width:100%; }
.company-admin-hero { margin-bottom:16px; padding:3px 2px 0; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.company-admin-hero h1 { margin:4px 0 7px; font-size:clamp(34px,3.2vw,48px); line-height:1; letter-spacing:-.035em; }
.company-admin-hero p { max-width:720px; margin:0; color:var(--text-soft); font-size:14px; line-height:1.55; }
.company-admin-hero-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.company-admin-hero-actions .soft-btn,.company-admin-hero-actions .premium-btn { min-height:43px; padding:0 17px; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; border-radius:999px; font-size:12px; }
.company-admin-tabs { position:sticky; top:calc(var(--topbar-h) + 8px); z-index:80; margin-bottom:16px; padding:6px; display:flex; gap:4px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:none; background:color-mix(in srgb,var(--surface-solid) 94%,transparent); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 35px rgba(52,35,8,.08); backdrop-filter:blur(18px); }
.company-admin-tabs::-webkit-scrollbar { display:none; }
.company-admin-tabs button { flex:1 0 auto; min-width:max-content; min-height:44px; padding:0 14px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--text-faint); border-radius:999px; font-size:11.5px; font-weight:800; }
.company-admin-tabs button > i { color:var(--gold-deep); font-size:13px; }
.company-admin-tabs button b { min-width:22px; height:22px; padding:0 6px; display:grid; place-items:center; color:var(--text-faint); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; font-size:10px; }
.company-admin-tabs button.active { color:#1b1205; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); box-shadow:0 8px 22px rgba(157,104,21,.2); }
.company-admin-tabs button.active > i,.company-admin-tabs button.active b { color:#1b1205; }
.company-admin-tabs button.active b { background:rgba(255,255,255,.28); border-color:rgba(75,47,5,.16); }
.company-admin-panel { display:none; }
.company-admin-panel.active { display:block; animation:companyAdminPanelIn .22s ease both; }
@keyframes companyAdminPanelIn { from { opacity:0; transform:translateY(6px); } }
.company-admin-metrics { gap:12px; }
.company-admin-metrics .metric { min-height:130px; padding:20px; }
.company-admin-metrics .metric-head { font-size:11px; }
.company-admin-metrics .metric strong { margin:13px 0 4px; font-size:30px; }
.company-admin-metrics .metric small { font-size:9px; }
.company-admin-overview-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:14px; }
.company-admin-card { padding:22px; }
.company-admin-card + .company-admin-card,.company-admin-form > .company-admin-card + .company-admin-card,.company-intake-form > .company-admin-card + .company-admin-card { margin-top:14px; }
.company-admin-card-head { margin-bottom:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:18px; }
.company-admin-card-head h2,.company-admin-section-heading h2 { margin:3px 0 0; font-size:27px; line-height:1.1; letter-spacing:-.02em; }
.company-admin-card-head p,.company-admin-section-heading p { margin:5px 0 0; color:var(--text-faint); font-size:12px; line-height:1.5; }
.company-admin-analytics .chart-mock { height:245px; }
.company-admin-card .task-row strong { font-size:12px; }
.company-admin-card .task-row span { margin-top:3px; font-size:10px; }
.company-admin-card .status-pill { padding:6px 9px; border-radius:999px; font-size:10px; }
.status-pill.muted { color:var(--text-faint); background:var(--surface-2); }
.status-pill.warning { color:#7a4c00; background:#fff0c6; }
[data-theme="dark"] .status-pill.warning { color:var(--gold-bright); background:rgba(214,158,50,.15); }
.company-admin-shortcuts { margin-top:14px; }
.company-admin-shortcut-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.company-admin-shortcut-grid button { min-height:88px; padding:15px; display:grid; grid-template-columns:42px minmax(0,1fr) 16px; gap:11px; align-items:center; text-align:left; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:14px; }
.company-admin-shortcut-grid button > i:first-child { width:42px; height:42px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:12px; font-size:16px; }
.company-admin-shortcut-grid button > i:last-child { color:var(--text-faint); font-size:10px; }
.company-admin-shortcut-grid strong,.company-admin-shortcut-grid small { display:block; }
.company-admin-shortcut-grid strong { font-size:12px; }
.company-admin-shortcut-grid small { margin-top:4px; color:var(--text-faint); font-size:9px; }
.company-admin-section-heading { min-height:86px; margin-bottom:14px; padding:2px 3px 12px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }
.company-admin-section-heading > .premium-btn { min-height:42px; padding:0 17px; white-space:nowrap; border-radius:999px; font-size:12px; }
.company-admin-form,.company-intake-form { display:block; }
.company-admin-profile-preview { margin-bottom:24px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); border-radius:20px; }
.company-admin-cover-preview { position:relative; height:245px; display:block; overflow:hidden; cursor:pointer; }
.company-admin-cover-preview > input,.company-admin-logo-preview input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.company-admin-cover-preview > img { width:100%; height:100%; object-fit:cover; filter:brightness(.7); }
.company-admin-preview-badge,.company-admin-preview-open,.company-admin-cover-edit { position:absolute; min-height:34px; padding:0 13px; display:flex; align-items:center; gap:7px; color:#fff; background:rgba(10,9,7,.72); border:1px solid rgba(255,255,255,.25); border-radius:999px; font-size:10px; font-weight:800; backdrop-filter:blur(8px); }
.company-admin-preview-badge { top:14px; left:14px; }.company-admin-preview-open { top:14px; right:14px; }.company-admin-preview-open i { color:#2dd19a; font-size:8px; }
.company-admin-cover-edit { right:14px; bottom:14px; border-radius:10px; }
.company-admin-preview-body { min-height:92px; padding:0 18px 16px 132px; display:flex; align-items:center; }
.company-admin-logo-preview { position:relative; width:96px; height:96px; margin:-48px 0 0 -112px; flex:0 0 auto; }
.company-admin-logo-preview > img { width:100%; height:100%; object-fit:cover; background:var(--surface-solid); border:3px solid var(--gold); border-radius:23px; box-shadow:0 0 0 5px var(--surface-solid); }
.company-admin-logo-preview > label { position:absolute; right:-7px; bottom:-7px; width:36px; height:36px; display:grid; place-items:center; color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border:4px solid var(--surface-solid); border-radius:50%; cursor:pointer; }
.company-admin-preview-name { min-width:0; margin-left:16px; padding-top:8px; }.company-admin-preview-name strong,.company-admin-preview-name span { display:block; }.company-admin-preview-name strong { font-size:20px; }.company-admin-preview-name span { margin-top:3px; color:var(--text-faint); font-size:11px; }
.company-admin-fields { display:grid; grid-template-columns:1fr; gap:14px; }
.company-admin-fields.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.company-admin-fields.three-columns { grid-template-columns:repeat(3,minmax(0,1fr)); }
.company-admin-fields .field-full { grid-column:1 / -1; }
.company-admin-fields-title { min-height:45px; margin-top:5px; padding:11px 13px; display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; color:var(--text); background:var(--gold-wash); border:1px solid var(--line); border-radius:12px; }
.company-admin-fields-title > i { width:28px; height:28px; display:grid; place-items:center; color:var(--gold-deep); background:var(--surface-solid); border-radius:9px; }.company-admin-fields-title > span { font-size:11px; font-weight:850; }.company-admin-fields-title > small { color:var(--text-faint); font-size:9px; }
.company-admin-fields > label { min-width:0; display:flex; flex-direction:column; gap:7px; color:var(--text-soft); font-size:11px; font-weight:750; }
.company-admin-fields > label > span { display:flex; justify-content:space-between; gap:8px; }
.company-admin-fields > label > span small { color:var(--text-faint); font-weight:600; }
.company-admin-fields input,.company-admin-fields select,.company-admin-fields textarea,.company-hours-editor input[type="time"],.checklist-type-select select { width:100%; min-height:46px; padding:0 13px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:12px; outline:0; font:600 13px var(--font-body); }
.company-admin-fields textarea { min-height:105px; padding-top:12px; resize:vertical; line-height:1.55; }
.company-admin-fields input:focus,.company-admin-fields select:focus,.company-admin-fields textarea:focus,.company-hours-editor input:focus,.checklist-type-select select:focus { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash); }
.company-admin-fields label > small { margin-top:-2px; color:var(--text-faint); font-size:9px; text-align:right; }
.company-hours-editor { display:flex; flex-direction:column; }
.company-hours-editor > div { min-height:58px; padding:8px 0; display:grid; grid-template-columns:minmax(130px,1fr) 105px 120px 15px 120px; gap:10px; align-items:center; border-top:1px solid var(--line); }
.company-hours-editor > div:first-child { border-top:0; }
.company-hours-editor strong { font-size:12px; }
.company-hours-editor label { display:flex; align-items:center; gap:7px; color:var(--text-soft); font-size:10px; }
.company-hours-editor input[type="checkbox"] { width:17px; height:17px; accent-color:var(--gold); }
.company-hours-editor input[type="time"] { min-height:39px; padding:0 9px; font-size:11px; }
.company-hours-editor .closed { opacity:.58; }
.company-admin-form-actions { margin-top:14px; padding:13px 0 0; display:flex; justify-content:flex-end; gap:9px; }
.company-admin-form-actions .soft-btn,.company-admin-form-actions .premium-btn { min-height:44px; padding:0 17px; }
.company-content-list { display:flex; flex-direction:column; gap:10px; }
.company-content-row { min-height:118px; padding:12px; display:grid; grid-template-columns:130px minmax(0,1fr) auto auto; gap:15px; align-items:center; }
.company-content-row.compact { grid-template-columns:58px minmax(0,1fr) auto auto; }
.company-content-row > img { width:130px; height:92px; object-fit:cover; border-radius:12px; }
.content-icon,.company-content-date { width:52px; height:52px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border:1px solid var(--line); border-radius:14px; }
.content-icon { font-size:18px; }
.company-content-date { align-content:center; text-align:center; }
.company-content-date b,.company-content-date small { display:block; }
.company-content-date b { font-size:17px; line-height:1; }.company-content-date small { margin-top:3px; font-size:8px; }
.content-type { color:var(--gold-deep); font-size:9px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.company-content-row h3 { margin:4px 0 5px; font-size:15px; line-height:1.3; }
.company-content-row p { margin:0; color:var(--text-faint); font-size:10px; }
.content-row-actions { display:flex; gap:6px; }
.content-row-actions button { min-height:38px; padding:0 14px; display:inline-flex; align-items:center; gap:6px; color:var(--gold-deep); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; font-size:10.5px; font-weight:800; }
.content-row-actions button.danger,.company-review-admin-item button.danger { color:var(--danger); }
.company-review-admin-summary { margin-bottom:12px; padding:22px; display:grid; grid-template-columns:230px minmax(0,1fr); gap:30px; align-items:center; }
.company-review-admin-summary > div:first-child { text-align:center; }
.company-review-admin-summary > div:first-child > strong { display:block; font-size:48px; line-height:1; }
.company-stars { color:var(--gold); letter-spacing:2px; }
.company-review-admin-summary .company-stars { display:block; margin:8px 0; }
.company-review-admin-summary small { color:var(--text-faint); font-size:10px; }
.company-review-bars p { margin:6px 0; display:grid; grid-template-columns:12px minmax(0,1fr) 28px; gap:9px; align-items:center; color:var(--text-faint); font-size:9px; }
.company-review-bars p > i { height:6px; overflow:hidden; background:var(--surface-2); border-radius:99px; }
.company-review-bars p > i b { display:block; height:100%; background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright)); border-radius:inherit; }
.company-review-admin-list { display:flex; flex-direction:column; gap:10px; }
.company-review-admin-item { padding:17px; display:grid; grid-template-columns:48px minmax(0,1fr); gap:13px; }
.company-review-admin-item > img { width:48px; height:48px; object-fit:cover; border-radius:50%; }
.company-review-admin-item header { display:flex; justify-content:space-between; gap:12px; }
.company-review-admin-item header strong { display:block; font-size:12px; }.company-review-admin-item header .company-stars { display:block; margin-top:4px; font-size:9px; }.company-review-admin-item time { color:var(--text-faint); font-size:9px; }
.company-review-admin-item p { margin:11px 0; color:var(--text-soft); font-size:12px; line-height:1.55; }
.company-review-admin-item footer { display:flex; align-items:center; gap:12px; color:var(--text-faint); font-size:9px; }.company-review-admin-item footer > span { margin-right:auto; color:var(--success); }.company-review-admin-item footer button { color:var(--gold-deep); font-size:9px; font-weight:800; }
.company-draft-state,.intake-number,.photo-counter { color:var(--text-faint); font-size:10px; font-weight:750; }
.input-suffix { display:grid; grid-template-columns:minmax(0,1fr) 42px; align-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; }
.input-suffix input { border:0; background:transparent; }
.input-suffix > span { color:var(--text-faint); font-size:10px; text-align:center; }
.intake-photo-layout { display:grid; grid-template-columns:280px minmax(0,1fr); gap:13px; }
.intake-photo-drop { min-height:190px; padding:22px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--text-soft); background:var(--gold-wash); border:1px dashed var(--gold); border-radius:16px; cursor:pointer; }
.intake-photo-drop input,.company-content-cover input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.intake-photo-drop > i { margin-bottom:11px; color:var(--gold-deep); font-size:30px; }.intake-photo-drop strong { font-size:13px; }.intake-photo-drop span { margin-top:5px; font-size:10px; }.intake-photo-drop small { margin-top:9px; color:var(--text-faint); font-size:8px; }
.intake-photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.intake-photo-grid figure { position:relative; min-width:0; margin:0; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; }
.intake-photo-grid img { width:100%; height:145px; object-fit:cover; }.intake-photo-grid figcaption { padding:9px 10px; color:var(--text-soft); font-size:9px; font-weight:700; }
.intake-photo-grid button { position:absolute; top:7px; right:7px; width:28px; height:28px; padding:0; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(10,8,5,.72); border:1px solid rgba(255,255,255,.3); border-radius:50%; line-height:1; appearance:none; }
.intake-photo-grid button > i,.intake-photo-grid button > i::before { display:block; line-height:1; }
.checklist-type-select { min-width:230px; display:flex; flex-direction:column; gap:5px; color:var(--text-faint); font-size:9px; }.checklist-type-select select { min-height:40px; font-size:10px; }
.intake-checklist { display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.intake-checklist.active { display:grid; }
.intake-checklist label { min-height:48px; padding:10px 12px; display:flex; align-items:center; gap:10px; color:var(--text-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:12px; font-size:10px; line-height:1.4; }
.intake-check-option,.intake-consent-option { position:relative; cursor:pointer; }
.intake-check-option > input,.intake-consent-option > input { position:absolute; width:1px !important; height:1px !important; opacity:0; pointer-events:none; }
.intake-check-option > span,.intake-consent-option > span { flex:0 0 19px; width:19px; height:19px; display:grid; place-items:center; color:transparent; background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:5px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); font-size:10px; transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease; }
.intake-check-option > em,.intake-consent-option > em { min-width:0; color:inherit; font-style:normal; }
.intake-check-option > em { font-size:12px; font-weight:650; line-height:1.45; }
.intake-check-option > input:checked + span,.intake-consent-option > input:checked + span { color:#241704; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:var(--gold-deep); box-shadow:0 4px 12px rgba(179,119,10,.2); }
.intake-check-option:has(input:checked) { color:var(--text); background:var(--gold-wash); border-color:var(--line-strong); }
.intake-check-option:has(input:focus-visible),.intake-consent-option:has(input:focus-visible) { outline:2px solid var(--gold); outline-offset:3px; }
.intake-consents { margin-top:14px; display:flex; flex-direction:column; gap:0; }
.intake-consent-option { min-height:34px; padding:3px 0; display:flex; align-items:center !important; gap:11px; color:var(--text-soft); font-size:13px !important; font-weight:650; line-height:1.45; }
.intake-consent-option > em { flex:1; }
.sticky-actions { position:sticky; bottom:12px; z-index:25; padding:12px; background:color-mix(in srgb,var(--surface-solid) 94%,transparent); border:1px solid var(--line); border-radius:15px; box-shadow:var(--shadow); backdrop-filter:blur(16px); }
.company-admin-modal { position:fixed; inset:0; z-index:2200; visibility:hidden; opacity:0; display:grid; place-items:center; transition:.2s ease; }
.company-admin-modal.open { visibility:visible; opacity:1; }
.company-admin-modal-backdrop { position:absolute; inset:0; width:100%; height:100%; background:rgba(10,8,5,.58); backdrop-filter:blur(7px); }
.company-admin-modal-dialog { position:relative; z-index:1; width:min(720px,calc(100vw - 32px)); max-height:min(820px,90dvh); overflow:auto; color:var(--text); background:var(--surface-solid); border:1px solid var(--line-strong); border-radius:22px; box-shadow:0 30px 100px rgba(0,0,0,.35); transform:translateY(10px) scale(.985); transition:.2s ease; }
.company-admin-modal.open .company-admin-modal-dialog { transform:none; }
.company-admin-modal-dialog > header { min-height:82px; padding:18px 20px; display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); }.company-admin-modal-dialog > header h2 { margin:3px 0 0; font-size:25px; }.company-admin-modal-dialog > header p { margin:6px 0 0; color:var(--text-faint); font-size:11px; }
.company-admin-modal-close { flex:0 0 auto; width:40px; height:40px; display:grid; place-items:center; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:50%; font-size:16px; }
.company-admin-modal-form { padding:20px; }.company-admin-modal-form footer { margin-top:18px; padding-top:16px; display:flex; justify-content:flex-end; gap:9px; border-top:1px solid var(--line); }.company-admin-modal-form footer button { min-height:42px; padding:0 15px; }
.company-content-cover { min-height:86px; padding:14px; display:flex !important; flex-direction:row !important; align-items:center; gap:13px !important; color:var(--text-soft); background:var(--gold-wash); border:1px dashed var(--gold); border-radius:13px; cursor:pointer; }.company-content-cover > i { width:42px; height:42px; display:grid; place-items:center; color:var(--gold-deep); background:var(--surface-solid); border-radius:11px; font-size:16px; }.company-content-cover strong,.company-content-cover small { display:block; }.company-content-cover small { margin-top:3px; color:var(--text-faint); font-size:9px; }
.review-request-dialog { width:min(590px,calc(100vw - 32px)); }.review-request-info { margin-bottom:17px; padding:15px; display:grid; grid-template-columns:42px minmax(0,1fr); gap:12px; color:var(--text-soft); background:var(--gold-wash); border:1px solid var(--line); border-radius:14px; }.review-request-info > i { width:42px; height:42px; display:grid; place-items:center; color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-radius:12px; }.review-request-info strong { font-size:12px; }.review-request-info p { margin:4px 0 0; color:var(--text-faint); font-size:10px; line-height:1.5; }
.company-admin-rail { display:none; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
.company-admin-rail .rail-card { padding:16px; border-radius:18px; }
.company-rail-summary { min-height:116px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; background:linear-gradient(145deg,var(--surface),var(--gold-wash)); }.company-rail-summary h2 { margin:3px 0 3px; font-size:22px; }.company-rail-summary p { margin:0; color:var(--text-faint); font-size:9px; line-height:1.45; }.company-rail-summary > strong { min-width:58px; height:58px; display:grid; place-content:center; text-align:center; color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-radius:18px; font-size:22px; }.company-rail-summary > strong span { display:block; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.company-rail-head { margin-bottom:11px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px; }.company-rail-head h3 { margin:2px 0 0; font-size:17px; }.company-rail-head button,.company-rail-head > a { padding:0; color:var(--gold-deep); font-size:9px; font-weight:800; }
.company-rail-events { display:flex; flex-direction:column; }.company-rail-events > button,.company-rail-events > a { min-height:62px; padding:9px 0; display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; text-align:left; border-top:1px solid var(--line); }.company-rail-events > :first-child { border-top:0; }.company-rail-events > button > i:first-child,.company-rail-events > a > i:first-child { width:34px; height:34px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:10px; }.company-rail-events strong,.company-rail-events small { display:block; }.company-rail-events strong { font-size:10px; }.company-rail-events small { margin-top:3px; color:var(--text-faint); font-size:8px; line-height:1.35; }.company-rail-events b { min-width:22px; height:22px; display:grid; place-items:center; color:#211606; background:var(--gold-bright); border-radius:50%; font-size:10px; }.company-rail-events > button > i:last-child { color:var(--text-faint); font-size:9px; }
.company-training-signups { display:flex; flex-direction:column; }.company-training-signups article { min-height:52px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:9px; border-top:1px solid var(--line); }.company-training-signups article:first-child { border-top:0; }.company-training-signups img { width:38px; height:38px; object-fit:cover; border-radius:50%; }.company-training-signups strong,.company-training-signups span { display:block; }.company-training-signups strong { font-size:9px; }.company-training-signups span,.company-training-signups time { color:var(--text-faint); font-size:7px; }.company-training-capacity { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }.company-training-capacity > span { color:var(--text-soft); font-size:8px; }.company-training-capacity > div { height:5px; margin-top:7px; overflow:hidden; background:var(--surface-2); border-radius:9px; }.company-training-capacity i { height:100%; display:block; background:linear-gradient(90deg,var(--gold-bright),var(--gold)); border-radius:inherit; }
.company-rail-review > div { display:grid; grid-template-columns:40px minmax(0,1fr); gap:9px; align-items:center; }.company-rail-review img { width:40px; height:40px; object-fit:cover; border-radius:50%; }.company-rail-review strong,.company-rail-review small { display:block; }.company-rail-review strong { font-size:10px; }.company-rail-review small { margin-top:3px; color:var(--gold); font-size:8px; letter-spacing:1px; }.company-rail-review p { margin:11px 0 6px; color:var(--text-soft); font-size:9px; line-height:1.5; }.company-rail-review time { color:var(--text-faint); font-size:7px; }

@media (max-width: 1020px) {
  .company-admin-shortcut-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .company-admin-fields.three-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .company-content-row { grid-template-columns:105px minmax(0,1fr) auto; }.company-content-row.compact { grid-template-columns:58px minmax(0,1fr) auto; }.content-row-actions { grid-column:2 / -1; justify-content:flex-end; }
  .intake-photo-layout { grid-template-columns:220px minmax(0,1fr); }.intake-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.intake-photo-grid figure:last-child { display:none; }
}

@media (max-width: 700px) {
  body[data-page="company-dashboard"] { width:100%; max-width:100vw; overflow-x:hidden; }
  body[data-page="company-dashboard"] .app-shell,
  body[data-page="company-dashboard"] .main-area { width:100%; max-width:100vw; min-width:0; margin:0; }
  body[data-page="company-dashboard"] .topbar { left:0; right:auto; width:100%; max-width:100vw; }
  body[data-page="company-dashboard"] .topbar-inner { width:100%; min-width:0; grid-template-columns:38px minmax(0,1fr) auto; }
  body[data-page="company-dashboard"] .bottom-nav { left:0; right:auto; width:100%; max-width:100vw; }
  body[data-page="company-dashboard"] .main-area { padding-left:0; padding-right:0; overflow-x:hidden; }
  body[data-page="company-dashboard"] #viewRoot,
  body[data-page="company-dashboard"] .company-admin-workspace { width:100%; max-width:100%; min-width:0; margin:0; overflow-x:hidden; }
  body[data-page="company-dashboard"] .company-admin-rail { position:static; inset:auto; width:100%; max-width:100%; padding:0 9px calc(88px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:9px; overflow:visible; }
  body[data-page="company-dashboard"] .company-admin-rail .rail-card { width:100%; border-radius:16px; }
  .company-admin-hero { padding:6px 15px 0; align-items:flex-start; flex-direction:column; gap:15px; }.company-admin-hero h1 { font-size:33px; }.company-admin-hero p { font-size:13px; }.company-admin-hero-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }.company-admin-hero-actions .premium-btn { grid-column:1 / -1; }.company-admin-hero-actions a,.company-admin-hero-actions button { justify-content:center; }
  .company-admin-tabs { top:var(--topbar-h); margin:0 0 8px; padding:5px 9px; border-left:0; border-right:0; border-radius:0; box-shadow:0 8px 24px rgba(35,22,4,.08); }.company-admin-tabs button { min-height:45px; padding:0 14px; font-size:11px; }.company-admin-tabs button b { display:none; }
  .company-admin-panel { padding:0; }.company-admin-metrics { padding:0 9px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.company-admin-metrics .metric { min-height:112px; padding:15px; border-radius:15px; }.company-admin-metrics .metric-head { font-size:9px; }.company-admin-metrics .metric strong { font-size:25px; }
  .company-admin-overview-grid { grid-template-columns:1fr; gap:8px; }.company-admin-card { padding:17px 15px; border-left:0; border-right:0; border-radius:0; box-shadow:none; }.company-admin-card + .company-admin-card,.company-admin-form > .company-admin-card + .company-admin-card,.company-intake-form > .company-admin-card + .company-admin-card { margin-top:8px; }.company-admin-card-head { align-items:flex-start; flex-direction:column; gap:10px; }.company-admin-card-head h2,.company-admin-section-heading h2 { font-size:23px; }.company-admin-analytics .chart-mock { height:220px; }
  .company-admin-shortcuts { margin-top:8px; }.company-admin-shortcut-grid { grid-template-columns:1fr; }.company-admin-shortcut-grid button { min-height:76px; }
  .company-admin-section-heading { min-height:0; margin:0; padding:18px 15px; align-items:flex-start; flex-direction:column; gap:13px; background:var(--surface); border-top:1px solid var(--line); }.company-admin-section-heading > button { width:100%; justify-content:center; }.company-admin-section-heading > .company-draft-state { align-self:flex-start; }
  .company-admin-profile-preview { margin:0 -15px 19px; border-left:0; border-right:0; border-radius:0; }.company-admin-cover-preview { height:185px; }.company-admin-preview-badge,.company-admin-preview-open { min-height:30px; padding:0 10px; font-size:8px; }.company-admin-preview-badge { top:10px; left:10px; }.company-admin-preview-open { top:10px; right:10px; }.company-admin-cover-edit { right:10px; bottom:10px; min-height:34px; padding:0 11px; font-size:9px; }.company-admin-preview-body { min-height:82px; padding:0 13px 13px 100px; }.company-admin-logo-preview { width:76px; height:76px; margin:-38px 0 0 -87px; }.company-admin-logo-preview > img { border-radius:19px; box-shadow:0 0 0 4px var(--surface-solid); }.company-admin-logo-preview > label { right:-6px; bottom:-6px; width:33px; height:33px; }.company-admin-preview-name { margin-left:12px; }.company-admin-preview-name strong { font-size:16px; }.company-admin-preview-name span { font-size:9px; }
  .company-admin-fields.two-columns,.company-admin-fields.three-columns { grid-template-columns:1fr; }.company-admin-fields input,.company-admin-fields select,.company-admin-fields textarea { font-size:14px; }.company-admin-fields > label { font-size:12px; }
  .company-admin-fields-title { grid-template-columns:28px minmax(0,1fr); }.company-admin-fields-title > small { grid-column:2; }
  .company-hours-editor > div { grid-template-columns:minmax(105px,1fr) 92px; gap:7px; }.company-hours-editor > div > input,.company-hours-editor > div > span { display:none; }
  .company-admin-form-actions { padding:11px 12px; display:grid; grid-template-columns:1fr 1fr; }.company-admin-form-actions button { justify-content:center; }
  .company-content-list { gap:8px; }.company-content-row,.company-content-row.compact { min-height:0; padding:12px; grid-template-columns:76px minmax(0,1fr) auto; gap:10px; border-left:0; border-right:0; border-radius:0; box-shadow:none; }.company-content-row > img { width:76px; height:76px; }.content-icon,.company-content-date { width:48px; height:48px; }.company-content-row h3 { font-size:13px; }.company-content-row p { font-size:9px; line-height:1.45; }.company-content-row > .status-pill { grid-column:3; grid-row:1; align-self:start; }.content-row-actions { grid-column:1 / -1; justify-content:stretch; }.content-row-actions button { flex:1; justify-content:center; min-height:40px; font-size:10px; }
  .company-review-admin-summary { margin:8px 10px; padding:17px; grid-template-columns:1fr; gap:18px; border-radius:16px; }.company-review-admin-item { padding:14px; grid-template-columns:42px minmax(0,1fr); border-left:0; border-right:0; border-radius:0; box-shadow:none; }.company-review-admin-item > img { width:42px; height:42px; }.company-review-admin-item p { font-size:12px; }.company-review-admin-item footer { flex-wrap:wrap; }.company-review-admin-item footer > span { flex-basis:100%; }
  .intake-photo-layout { grid-template-columns:1fr; }.intake-photo-drop { min-height:145px; }.intake-photo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.intake-photo-grid figure:last-child { display:block; }.intake-photo-grid img { height:105px; }.intake-photo-grid figcaption { font-size:8px; }
  .checklist-type-select { width:100%; min-width:0; }.intake-checklist { grid-template-columns:1fr; }.intake-checklist label { font-size:11px; }.intake-consents label { font-size:11px; }
  .sticky-actions { bottom:calc(72px + env(safe-area-inset-bottom)); margin:0 8px 8px; grid-template-columns:1fr 1fr; border-radius:15px; }.sticky-actions .premium-btn { grid-column:1 / -1; }
  .company-admin-modal { align-items:end; }.company-admin-modal-dialog,.review-request-dialog { width:100%; max-height:92dvh; border-left:0; border-right:0; border-bottom:0; border-radius:24px 24px 0 0; }.company-admin-modal-dialog > header { padding:20px 17px; }.company-admin-modal-form { padding:17px 15px calc(17px + env(safe-area-inset-bottom)); }.company-admin-modal-form footer { display:grid; grid-template-columns:1fr 1fr; }.company-admin-modal-form footer button { justify-content:center; }
}

/* Pasek przewijania sidebara pojawia się dopiero po najechaniu. */
.company-review-invite-dialog { width:min(620px,calc(100vw - 32px)); }
.company-review-rating { margin:0; padding:14px; display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:5px; background:var(--gold-wash); border:1px solid var(--line); border-radius:14px; }
.company-review-rating legend { width:100%; margin:0 0 8px; color:var(--text-soft); font-size:11px; font-weight:750; }
.company-review-rating input { position:absolute; width:1px!important; height:1px!important; opacity:0; pointer-events:none; }
.company-review-rating label { width:42px; height:42px; display:grid; place-items:center; color:var(--text-faint); background:var(--surface-solid); border:1px solid var(--line); border-radius:11px; cursor:pointer; font-size:18px; transition:.18s ease; }
.company-review-rating label:hover,.company-review-rating label:hover ~ label,.company-review-rating input:checked ~ label { color:var(--gold); border-color:var(--gold); transform:translateY(-1px); }
.company-review-token-error,.company-review-submit-success { min-height:210px; padding:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.company-review-token-error > i,.company-review-submit-success > i { width:58px; height:58px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:18px; font-size:23px; }
.company-review-token-error p,.company-review-submit-success p { max-width:390px; margin:12px 0 0; color:var(--text-faint); font-size:11px; line-height:1.55; }
.company-review-submit-success strong { margin-top:14px; font-size:18px; }
.company-review-invite-dialog .company-form-status { min-height:20px; color:var(--text-faint); font-size:10px; }
.company-review-invite-dialog .company-form-status.error { color:var(--danger); }
.company-review-invite-dialog .company-form-status.success { color:var(--success); }
.company-review-company-reply { margin-top:12px; padding:12px 14px; color:var(--text-soft); background:var(--gold-wash); border-left:3px solid var(--gold); border-radius:0 11px 11px 0; }
.company-review-company-reply strong { display:block; color:var(--gold-deep); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.company-review-company-reply p { margin:6px 0 0!important; font-size:10px!important; line-height:1.55; }

@media (min-width: 701px) {
  .sidebar { padding-right: 0; }
  .sidebar .sidebar-scroll { padding-right: 18px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent; }
  .sidebar:hover .sidebar-scroll { scrollbar-color: var(--gold) transparent; }
  .sidebar .sidebar-scroll::-webkit-scrollbar { width: 6px; }
  .sidebar .sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
  .sidebar .sidebar-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
  .sidebar:hover .sidebar-scroll::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-bright),var(--gold-deep)); }
  .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }
}

/* Rozbudowany profil firmy */
body[data-route="company"] #viewRoot { width: min(100%,1040px); }
body[data-route="company"] .company-profile-hero { margin-bottom: 12px; }
body[data-route="company"] .company-cover.profile-cover { height: 300px; }

.company-premium-badge,.company-open-badge {
  position:absolute;
  z-index:2;
  top:15px;
  min-height:30px;
  padding:0 11px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#fff;
  background:rgba(8,8,8,.55);
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  font-size:10px;
  font-weight:850;
  backdrop-filter:blur(10px);
}
.company-premium-badge { left:15px; }
.company-open-badge { right:15px; }
.company-open-badge i { color:#2bc58c; font-size:8px; }

.company-profile-cta .follow-chip { min-width:125px; }
.company-profile-cta .follow-chip.following { color:var(--gold-deep); background:var(--surface-2); border-color:var(--line-strong); box-shadow:none; }
.company-scope-chips { margin:14px 0 13px; display:flex; flex-wrap:wrap; gap:7px; }
.company-scope-chips span { min-height:31px; padding:0 10px; display:inline-flex; align-items:center; gap:6px; color:var(--text-soft); background:var(--gold-wash); border:1px solid var(--line); border-radius:999px; font-size:11px; font-weight:750; }
.company-scope-chips i { color:var(--gold-deep); }
.company-profile-details { gap:10px 17px; }
.company-profile-stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
.company-profile-stats .fa-star { color:var(--gold); font-size:10px; }

body[data-route="company"] .company-quick { margin-bottom:12px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
body[data-route="company"] .company-quick button { min-height:64px; padding:9px; display:flex; align-items:center; justify-content:center; gap:9px; color:var(--text); background:var(--surface-solid); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-soft); font-size:12px; font-weight:800; }
body[data-route="company"] .company-quick button:hover { color:var(--gold-deep); background:var(--gold-wash); border-color:var(--gold); }
body[data-route="company"] .company-quick i { margin:0; color:var(--gold-deep); font-size:16px; }

.company-variant-picker { margin-bottom:12px; padding:17px; overflow:hidden; }
.company-variant-heading { margin-bottom:13px; display:flex; align-items:end; justify-content:space-between; gap:20px; }
.company-variant-heading h2 { margin:3px 0 0; font-size:19px; }
.company-variant-heading p { margin:0; color:var(--text-faint); font-size:11px; }
.company-variant-track { display:grid; grid-auto-flow:column; grid-auto-columns:112px; gap:8px; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; scroll-snap-type:x proximity; }
.company-variant-track button { min-height:72px; padding:9px 7px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; scroll-snap-align:start; color:var(--text-faint); background:var(--surface-2); border:1px solid var(--line); border-radius:13px; font-size:10px; font-weight:800; }
.company-variant-track button i { color:var(--gold-deep); font-size:18px; }
.company-variant-track button.active { color:#171107; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-color:transparent; box-shadow:0 8px 18px rgba(156,103,21,.16); }
.company-variant-track button.active i { color:#171107; }

.company-tabs { position:sticky; top:calc(var(--topbar-h) + 8px); z-index:45; margin-bottom:12px; padding:4px; display:grid; grid-template-columns:repeat(8,minmax(92px,1fr)); gap:3px; overflow-x:auto; background:color-mix(in srgb,var(--surface-solid) 94%,transparent); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-soft); scrollbar-width:none; backdrop-filter:blur(14px); }
.company-tabs button { min-height:42px; padding:0 10px; color:var(--text-faint); border-radius:10px; white-space:nowrap; font-size:11px; font-weight:850; }
.company-tabs button.active { color:#171107; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); box-shadow:0 6px 16px rgba(156,103,21,.16); }
.company-panel { display:none; }
.company-panel.active { display:block; animation:companyPanelIn .22s ease both; }
@keyframes companyPanelIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
.company-content-card { margin-bottom:12px; padding:20px; }
.company-content-card .section-head { margin-bottom:10px; }
.company-content-card .section-head > span { color:var(--text-faint); font-size:11px; }
.company-overview-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(270px,.8fr); gap:12px; }

.company-scope-list { display:grid; gap:3px; }
.company-scope-list article { padding:12px 0; display:grid; grid-template-columns:43px minmax(0,1fr); gap:11px; align-items:center; border-top:1px solid var(--line); }
.company-scope-list article > i { width:43px; height:43px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:12px; }
.company-scope-list strong,.company-scope-list span { display:block; }
.company-scope-list strong { font-size:13px; }
.company-scope-list span { margin-top:2px; color:var(--text-faint); font-size:11px; line-height:1.45; }
.company-status-open { padding:6px 9px; color:var(--success) !important; background:color-mix(in srgb,var(--success) 11%,transparent); border-radius:999px; font-size:10px !important; font-weight:850; }
.company-hours { margin:0; display:grid; }
.company-hours div { min-height:38px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); }
.company-hours dt { color:var(--text-soft); font-size:11px; }
.company-hours dd { margin:0; color:var(--text); font-size:11px; font-weight:800; }
.company-address { margin-top:14px; padding:13px; display:grid; grid-template-columns:34px minmax(0,1fr); gap:9px; color:var(--text-soft); background:var(--surface-2); border-radius:12px; }
.company-address > i { width:34px; height:34px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:10px; }
.company-address strong,.company-address span { display:block; }
.company-address strong { font-size:11px; }.company-address span { margin-top:2px; color:var(--text-faint); font-size:9px; line-height:1.4; }
.company-wide-button { width:100%; min-height:42px; margin-top:10px; color:#171107; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border-radius:11px; font-size:11px; font-weight:850; }

.company-realization-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-flow:row; align-items:stretch; gap:8px; overflow:visible; border-radius:0; }
.company-realization-grid button { position:relative; width:100%; min-width:0; aspect-ratio:1 / 1; padding:0; display:block; overflow:hidden; line-height:0; background:var(--surface-2); border:1px solid var(--line); border-radius:12px; }
.company-realization-grid img { width:100%; height:100%; display:block; object-fit:cover; }
.company-realization-grid button::after { content:""; position:absolute; inset:48% 0 0; background:linear-gradient(transparent,rgba(4,5,6,.82)); }
.company-realization-grid button > span { position:absolute; z-index:2; left:12px; right:12px; bottom:10px; color:#fff; text-align:left; line-height:1.35; }
.company-realization-grid b,.company-realization-grid small { display:block; }
.company-realization-grid b { font-size:12px; }.company-realization-grid small { margin-top:2px; color:rgba(255,255,255,.68); font-size:9px; }
.company-realization-preview button { aspect-ratio:4/3; }
.company-realization-lightbox .profile-lightbox-head img,.company-realization-lightbox .profile-lightbox-caption img { border-radius:11px; }

.company-review-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.company-review-cards article { padding:14px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; }
.company-review-cards header { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:9px; align-items:center; }
.company-review-cards header img { width:38px;height:38px;object-fit:cover;border-radius:50%; }
.company-review-cards header strong,.company-review-cards header span { display:block; }
.company-review-cards header strong { font-size:11px; }.company-review-cards header span { color:var(--text-faint);font-size:9px; }
.company-review-cards p { margin:11px 0 0; color:var(--text-soft); font-size:11px; line-height:1.55; }
.company-stars { display:inline-flex; gap:2px; color:var(--gold); font-size:9px; white-space:nowrap; }

.company-services-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.company-services-grid article { min-height:146px; padding:16px; display:grid; grid-template-columns:44px minmax(0,1fr); gap:12px; background:var(--surface-2); border:1px solid var(--line); border-radius:15px; }
.company-services-grid article > i { width:44px;height:44px;display:grid;place-items:center;color:var(--gold-deep);background:var(--gold-wash);border-radius:12px;font-size:17px; }
.company-services-grid strong { font-size:13px; }.company-services-grid p { min-height:38px;margin:4px 0 9px;color:var(--text-faint);font-size:10px;line-height:1.5; }
.company-services-grid span { color:var(--gold-deep);font-size:11px;font-weight:850; }

.company-reviews-layout { display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:12px; }
.company-rating-summary { text-align:center; }
.company-rating-number { margin:8px 0 0;font:800 64px/1 var(--font-display);letter-spacing:-.06em; }
.company-stars-large { margin:9px 0;font-size:18px; }
.company-rating-summary > p { margin:0 0 17px;color:var(--text-faint);font-size:10px; }
.company-rating-bars { display:grid;gap:7px; }
.company-rating-bars > div { display:grid;grid-template-columns:12px minmax(0,1fr) 26px;gap:8px;align-items:center;color:var(--text-faint);font-size:9px; }
.company-rating-bars i { height:6px;overflow:hidden;background:var(--surface-2);border-radius:99px; }
.company-rating-bars i b { height:100%;display:block;background:linear-gradient(90deg,var(--gold),var(--gold-bright));border-radius:inherit; }
.company-rating-bars em { font-style:normal;text-align:right; }
.company-review-form h2 { margin:4px 0 4px;font-size:24px; }.company-review-form > p { margin:0;color:var(--text-faint);font-size:11px; }
.company-rating-input { margin:18px 0 13px;display:flex;align-items:center;gap:4px; }
.company-rating-input button { width:37px;height:37px;color:var(--gold);font-size:22px; }
.company-rating-input > span { margin-left:7px;color:var(--text-faint);font-size:10px;font-weight:700; }
.company-review-form textarea { width:100%;padding:13px;resize:vertical;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:13px;font-size:12px;line-height:1.5; }
.company-review-form .premium-btn { width:100%;min-height:44px;margin-top:10px; }
.company-review-list { display:grid; }
.company-review-list > article { padding:17px 0;display:grid;grid-template-columns:46px minmax(0,1fr);gap:11px;border-top:1px solid var(--line); }
.company-review-list > article > img { width:46px;height:46px;object-fit:cover;border-radius:50%; }
.company-review-list header { display:flex;align-items:center;justify-content:space-between;gap:10px; }.company-review-list header strong { font-size:12px; }
.company-review-list small { display:block;margin-top:2px;color:var(--text-faint);font-size:9px; }.company-review-list p { margin:8px 0;color:var(--text-soft);font-size:12px;line-height:1.55; }
.company-review-list footer { display:flex;gap:14px; }.company-review-list footer button { color:var(--text-faint);font-size:9px;font-weight:750; }

.company-about-layout { display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:12px; }
.company-about-layout h2 { margin:5px 0 10px;font-size:25px; }.company-about-layout p { margin:0;color:var(--text-soft);font-size:12px;line-height:1.7; }
.company-about-features { margin-top:17px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.company-about-features span { min-height:43px;padding:8px 10px;display:flex;align-items:center;gap:8px;color:var(--text-soft);background:var(--surface-2);border-radius:11px;font-size:10px;font-weight:750; }.company-about-features i { color:var(--gold-deep); }
.company-hours-full div { min-height:34px; }
.company-location-card { display:grid;grid-template-columns:minmax(0,.8fr) minmax(330px,1.2fr);gap:18px;align-items:stretch; }
.company-location-card h2 { margin:5px 0 6px;font-size:23px; }.company-location-card p { margin:0;color:var(--text-soft);font-size:11px;line-height:1.6; }
.company-location-actions { margin-top:15px;display:flex;flex-wrap:wrap;gap:8px; }.company-location-actions button { min-height:40px; }
.company-map { min-height:245px;border-radius:14px; }

.company-listing-cards,.company-education-grid,.company-event-grid { display:grid;gap:10px; }
.company-listing-cards article { padding:16px;display:grid;grid-template-columns:48px minmax(0,1fr);gap:13px;background:var(--surface-2);border:1px solid var(--line);border-radius:15px; }
.company-listing-cards article > i { width:48px;height:48px;display:grid;place-items:center;color:var(--gold-deep);background:var(--gold-wash);border-radius:13px;font-size:18px; }
.company-listing-cards span,.company-education-grid article > div:last-child > span,.company-event-grid article > div > span { color:var(--gold-deep);font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.08em; }
.company-listing-cards h3,.company-education-grid h3,.company-event-grid h3 { margin:3px 0 4px;font-size:15px; }.company-listing-cards p,.company-education-grid p,.company-event-grid p { margin:0;color:var(--text-faint);font-size:10px;line-height:1.5; }
.company-listing-cards footer,.company-education-grid footer,.company-event-grid footer { margin-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px; }.company-listing-cards footer b,.company-education-grid footer b,.company-event-grid footer b { color:var(--text-soft);font-size:10px; }.company-listing-cards footer button,.company-education-grid footer button,.company-event-grid footer button { min-height:32px;padding:0 11px;color:var(--gold-deep);border:1px solid var(--line-strong);border-radius:999px;font-size:9px;font-weight:850; }
.company-education-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.company-education-grid article { padding:15px;display:grid;grid-template-columns:47px minmax(0,1fr);gap:11px;background:var(--surface-2);border:1px solid var(--line);border-radius:15px; }
.company-date { width:47px;height:53px;display:grid;place-content:center;text-align:center;color:#171107;background:linear-gradient(135deg,var(--gold-bright),var(--gold));border-radius:12px; }.company-date b,.company-date span { display:block; }.company-date b { font-size:17px;line-height:1; }.company-date span { margin-top:3px;font-size:8px;text-transform:uppercase; }
.company-event-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.company-event-grid article { overflow:hidden;background:var(--surface-2);border:1px solid var(--line);border-radius:15px; }.company-event-grid img { width:100%;aspect-ratio:16/9;object-fit:cover; }.company-event-grid article > div { padding:14px; }

@media (max-width: 700px) {
  body[data-route="company"] #viewRoot { width:100%;max-width:none; }
  body[data-route="company"] .main-area { overflow-x:hidden; }
  body[data-route="company"] .company-cover.profile-cover { height:220px; }
  .company-premium-badge,.company-open-badge { top:12px;min-height:28px;font-size:9px; }.company-premium-badge{left:12px}.company-open-badge{right:12px}
  .company-profile-hero .profile-body { padding-left:15px;padding-right:15px; }
  .company-profile-hero .profile-primary { align-items:stretch; }
  .company-profile-cta { align-self:stretch; }
  .company-profile-cta .follow-chip { flex:1; }
  .company-scope-chips { flex-wrap:nowrap;overflow-x:auto;margin-right:-15px;padding-right:15px;scrollbar-width:none; }
  .company-scope-chips span { flex:0 0 auto; }
  .company-profile-details { display:grid;grid-template-columns:1fr;gap:7px; }
  .company-profile-stats button { flex-basis:112px; }
  body[data-route="company"] .company-quick { padding:0 9px;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px; }
  body[data-route="company"] .company-quick button { min-height:61px;padding:7px 3px;flex-direction:column;gap:5px;border-radius:12px;font-size:9px; }
  body[data-route="company"] .company-quick i { font-size:15px; }
  .company-variant-picker { margin-bottom:8px;padding:14px 0 13px;border-left:0;border-right:0;border-radius:0; }
  .company-variant-heading { padding:0 14px;align-items:start; }.company-variant-heading h2 { font-size:17px; }.company-variant-heading p { display:none; }
  .company-variant-track { padding:0 14px;grid-auto-columns:102px; }.company-variant-track button { min-height:68px; }
  .company-tabs { top:var(--topbar-h);margin:0 0 7px;padding:3px 9px;display:flex;gap:3px;border-left:0;border-right:0;border-radius:0; }
  .company-tabs button { flex:0 0 auto;min-height:43px;padding:0 15px;font-size:11px; }
  .company-content-card { margin-bottom:8px;padding:16px 14px;border-left:0;border-right:0;border-radius:0; }
  .company-overview-grid,.company-reviews-layout,.company-about-layout,.company-location-card { grid-template-columns:1fr;gap:8px; }
  .company-scope-list article { grid-template-columns:40px minmax(0,1fr);gap:9px; }.company-scope-list article > i { width:40px;height:40px; }
  .company-realization-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;border-radius:5px; }.company-realization-preview { display:flex;overflow-x:auto;scroll-snap-type:x mandatory; }.company-realization-preview button { flex:0 0 82%;aspect-ratio:4/3;scroll-snap-align:center; }
  .company-review-cards { grid-template-columns:1fr; }.company-review-cards article:nth-child(n+2) { display:none; }
  .company-services-grid { grid-template-columns:1fr;gap:8px; }.company-services-grid article { min-height:0;padding:14px; }
  .company-rating-summary { border-radius:16px !important;margin:0 10px 8px;border-left:1px solid var(--line) !important;border-right:1px solid var(--line) !important; }.company-review-form { border-radius:16px !important;margin:0 10px 8px;border-left:1px solid var(--line) !important;border-right:1px solid var(--line) !important; }
  .company-rating-input { flex-wrap:wrap; }.company-rating-input > span { flex-basis:100%;margin:5px 0 0; }
  .company-review-list > article { grid-template-columns:40px minmax(0,1fr); }.company-review-list > article > img { width:40px;height:40px; }.company-review-list header { align-items:flex-start;flex-direction:column;gap:4px; }
  .company-about-features { grid-template-columns:1fr; }.company-location-card { gap:12px; }.company-map { min-height:220px;grid-row:1; }.company-location-actions { display:grid;grid-template-columns:1fr; }
  .company-education-grid,.company-event-grid { grid-template-columns:1fr; }.company-listing-cards article { grid-template-columns:43px minmax(0,1fr);padding:14px; }.company-listing-cards article > i { width:43px;height:43px; }
  .company-listing-cards footer,.company-education-grid footer,.company-event-grid footer { align-items:flex-end; }
}

@media (min-width: 1600px) {
  body[data-route="short"] .short-desktop-info { right: auto; left: 0; }
}

@media (min-width: 701px) and (max-width: 1399px) {
  body[data-route="short"] .short-desktop-info { display: none; }
  body[data-route="short"].short-comments-open .short-viewer-shell { transform: translateX(-190px); }
}

@media (max-width: 700px) {
  body[data-route="short"] .main-area {
    padding: calc(var(--topbar-h) + 12px) 0 calc(76px + env(safe-area-inset-bottom));
    overflow: hidden;
  }

  body[data-route="short"] .short-viewer-stage {
    width: 100%;
    height: auto;
    min-height: calc(100dvh - var(--topbar-h) - 88px);
    display: block;
  }

  body[data-route="short"] .short-desktop-info { display: none; }

  body[data-route="short"] .short-viewer-shell {
    width: max-content;
    min-height: 0;
    margin: 0 auto;
    padding: 0;
    align-items: flex-start;
    transform: none !important;
  }

  body[data-route="short"] .short-player {
    width: min(calc(100vw - 20px), calc((100dvh - var(--topbar-h) - 92px) * .5625));
    height: auto;
    max-width: calc(100vw - 20px);
    aspect-ratio: 9 / 16;
    border-radius: 16px;
  }

  body[data-route="short"] .short-center-play { width: 58px; height: 58px; }
  body[data-route="short"] .short-action-rail { right: 9px; bottom: 112px; gap: 11px; }
  body[data-route="short"] .short-action-rail button { width: 45px; color:#fff; font-size: 9px; text-shadow:0 1px 5px rgba(0,0,0,.7); }
  body[data-route="short"] .short-action-rail i {
    width: 43px;
    height: 43px;
    color:#fff;
    background:rgba(10,10,10,.62);
    border-color:rgba(255,255,255,.38);
    font-size:18px;
  }
  body[data-route="short"] .short-copy { inset: auto 62px 15px 14px; }
  body[data-route="short"] .short-copy p { font-size: 13px; line-height: 1.4; }
  body[data-route="short"] .short-copy > span { font-size: 10px; }
  body[data-route="short"] .short-author strong { font-size: 12px; }

  body[data-route="short"] .comments-panel {
    inset: auto 0 0;
    width: 100%;
    height: min(84dvh, 760px);
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -24px 70px rgba(0,0,0,.25);
    transform: translateY(100%);
  }

  body[data-route="short"] .app-modal.open .comments-panel { transform: translateY(0); }
  body[data-route="short"] .comments-panel > header { padding: 28px 18px 16px; }
  body[data-route="short"] .comments-panel h2 { font-size: 27px; }
  body[data-route="short"] .comments-panel h2 span { font-size: 13px; }
  body[data-route="short"] .modal-comments { padding: 17px 16px; }
  body[data-route="short"] .full-comment { grid-template-columns: 38px 1fr; gap: 10px; margin-bottom: 19px; }
  body[data-route="short"] .full-comment img { width: 38px; height: 38px; }
  body[data-route="short"] .full-comment-bubble { padding: 11px 13px; }
  body[data-route="short"] .full-comment-bubble strong { font-size: 13px; }
  body[data-route="short"] .full-comment-bubble p { font-size: 13px; line-height: 1.5; }
  body[data-route="short"] .comment-tools { margin-top: 7px; gap: 14px; font-size: 11px; }
  body[data-route="short"] .comment-reply { margin-left: 5px; padding-left: 10px; }
  body[data-route="short"] .comment-composer { padding: 11px 12px calc(11px + env(safe-area-inset-bottom)); }
  body[data-route="short"] .comment-composer textarea { font-size: 13px; }
}

/* Końcowy kontrakt modali panelu firmy: nagłówek i akcje są stałe, przewija się wyłącznie treść formularza. */
.company-admin-modal-dialog { display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; }
.company-admin-modal-dialog > header { position:relative; z-index:2; background:var(--surface-solid); }
.company-admin-modal-form { min-height:0; padding:0; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; }
.company-admin-modal-form > .company-admin-fields { min-height:0; padding:20px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; scrollbar-color:var(--gold) var(--gold-wash); }
.company-admin-modal-form > .company-admin-fields::-webkit-scrollbar { width:9px; }.company-admin-modal-form > .company-admin-fields::-webkit-scrollbar-track { margin:8px 0; background:var(--gold-wash); border-radius:999px; }.company-admin-modal-form > .company-admin-fields::-webkit-scrollbar-thumb { background:linear-gradient(var(--gold-bright),var(--gold-deep)); border:2px solid var(--gold-wash); border-radius:999px; }
.company-admin-modal-form footer { position:relative; z-index:2; margin:0; padding:14px 20px; background:var(--surface-solid); border-top:1px solid var(--line); box-shadow:0 -12px 28px rgba(45,29,7,.06); }
.review-request-dialog .company-admin-modal-form { display:block; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--gold) var(--gold-wash); }.review-request-dialog .review-request-info { margin:20px 20px 0; }.review-request-dialog .company-admin-fields { overflow:visible; }.review-request-dialog .company-admin-modal-form footer { position:sticky; bottom:0; }
@media (max-width:700px) {
  .company-admin-modal-dialog { max-height:94dvh; }.company-admin-modal-form > .company-admin-fields { padding:17px 15px; }.company-admin-modal-form footer { padding:12px 15px calc(12px + env(safe-area-inset-bottom)); }
}

/* Mobilny nagłówek i dolna nawigacja. Motyw zmieniany jest z panelu konta. */
@media (max-width:700px) {
  .top-actions .theme-switch { display:none !important; }
  .top-actions .mobile-header-notifications { position:relative; width:38px; height:38px; display:grid !important; place-items:center; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:50%; }
  .top-actions .mobile-header-notifications > i { font-size:17px; }
  .top-actions .mobile-header-notifications .notice-dot { top:-6px; right:-6px; min-width:20px; height:20px; font-size:10px; }
  .bottom-nav a { gap:4px; font-size:9.5px; font-weight:750; line-height:1; }
  .bottom-nav a > i { font-size:18px; }
  .bottom-nav .bottom-chat-link { isolation:isolate; }
  .bottom-nav-badge { position:absolute; z-index:2; top:5px; left:calc(50% + 4px); min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center; color:#211606; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border:2px solid var(--surface-solid); border-radius:999px; box-shadow:0 5px 14px rgba(168,108,14,.24); font-size:9px; font-weight:900; line-height:1; }

  .bottom-nav a { font-size:10.5px; }
  .bottom-nav a > i { font-size:19px; }
  .bottom-nav-badge { min-width:19px; height:19px; font-size:10px; }

  body[data-route="notifications"] #viewRoot { padding-bottom:84px; }
  body[data-route="notifications"] .page-intro { min-height:88px; padding:18px 16px 10px; align-items:center; }
  body[data-route="notifications"] .page-intro .eyebrow { font-size:10px; letter-spacing:.15em; }
  body[data-route="notifications"] .page-intro h1 { font-size:35px; line-height:1; }
  body[data-route="notifications"] .page-intro .page-actions { flex:0 0 122px; }
  body[data-route="notifications"] .page-intro .text-btn { padding:7px 0; color:var(--gold-deep); font-size:11px; font-weight:850; line-height:1.35; text-align:right; }
  body[data-route="notifications"] .feed-filter { min-height:48px; margin:0 12px 10px; padding:5px; border-radius:14px; }
  body[data-route="notifications"] .feed-filter button { min-height:37px; padding:0 8px; font-size:11px; }
  body[data-route="notifications"] .notice-list { margin:0; }
  body[data-route="notifications"] .notice-item { min-height:82px; padding:16px 14px; grid-template-columns:48px minmax(0,1fr) 8px; gap:13px; }
  body[data-route="notifications"] .notice-icon img { width:48px; height:48px; }
  body[data-route="notifications"] .notice-icon i { right:-3px; bottom:-2px; width:22px; height:22px; font-size:9px; }
  body[data-route="notifications"] .notice-copy p { font-size:12.5px; line-height:1.5; }
  body[data-route="notifications"] .notice-copy p strong { font-size:13px; font-weight:850; }
  body[data-route="notifications"] .notice-copy time { display:block; margin-top:5px; font-size:10px; line-height:1.2; }
  body[data-route="notifications"] .notice-item > i { font-size:7px; }
}

/* Ostateczny układ mobilny list wideo, Shorts i pojedynczego filmu. */
.company-profile-cta [data-follow-mode].following {
  color:var(--gold-deep);
  background:var(--surface-2);
  border-color:var(--line-strong);
  box-shadow:none;
}
.watch-like.active { color:var(--danger); }
.watch-like.active i { color:var(--danger); }
.watch-like { display:inline-flex; align-items:center; justify-content:center; gap:11px; }
.watch-like-count { display:inline-flex; align-items:center; min-height:24px; padding-left:1px; color:inherit; font-weight:850; cursor:pointer; }

@media (max-width:700px) {
  body[data-route="notifications"],
  body[data-route="videos"],
  body[data-route="shorts"],
  body[data-route="watch"] { overflow-x:hidden; }

  body[data-route="videos"] .main-area,
  body[data-route="shorts"] .main-area,
  body[data-route="watch"] .main-area {
    padding-left:0;
    padding-right:0;
    overflow-x:hidden;
  }
  body[data-route="videos"] #viewRoot,
  body[data-route="shorts"] #viewRoot,
  body[data-route="watch"] #viewRoot {
    width:100%;
    max-width:none;
    overflow:hidden;
    padding-bottom:84px;
  }

  body[data-route="videos"] .page-intro,
  body[data-route="shorts"] .page-intro {
    min-height:122px;
    padding:21px 14px 13px;
    align-items:center;
    gap:10px;
  }
  body[data-route="videos"] .page-intro > div:first-child,
  body[data-route="shorts"] .page-intro > div:first-child { min-width:0; }
  body[data-route="videos"] .page-intro .eyebrow,
  body[data-route="shorts"] .page-intro .eyebrow { font-size:9px; letter-spacing:.15em; }
  body[data-route="videos"] .page-intro h1,
  body[data-route="shorts"] .page-intro h1 {
    max-width:270px;
    margin-top:3px;
    font-size:30px;
    line-height:1.02;
    letter-spacing:-.045em;
  }
  body[data-route="videos"] .page-intro p,
  body[data-route="shorts"] .page-intro p { display:none; }
  body[data-route="videos"] .page-intro .page-actions,
  body[data-route="shorts"] .page-intro .page-actions { flex:0 0 90px; }
  body[data-route="videos"] .page-intro .premium-btn,
  body[data-route="shorts"] .page-intro .premium-btn {
    width:100%;
    min-height:56px;
    padding:8px 9px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    border-radius:14px;
    font-size:11px;
    line-height:1.15;
    text-align:center;
    white-space:normal;
  }
  body[data-route="videos"] .yt-filter-row,
  body[data-route="shorts"] .yt-filter-row {
    margin:0;
    padding:0 13px 14px;
    gap:8px;
    scroll-snap-type:x proximity;
  }
  body[data-route="videos"] .yt-filter-row button,
  body[data-route="shorts"] .yt-filter-row button {
    min-height:42px;
    padding:0 14px;
    flex:0 0 auto;
    border-radius:12px;
    scroll-snap-align:start;
    font-size:12px;
  }

  body[data-route="shorts"] .yt-shorts-grid {
    padding:0 12px 92px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  body[data-route="shorts"] .yt-short-tile,
  body[data-route="videos"] .yt-shorts-grid .yt-short-tile {
    position:relative;
    aspect-ratio:9 / 16;
    min-width:0;
    overflow:hidden;
    color:#fff;
    background:#111;
    border-radius:15px;
    box-shadow:0 10px 26px rgba(35,24,7,.12);
    text-align:left;
    isolation:isolate;
  }
  body[data-route="shorts"] .yt-short-tile::after,
  body[data-route="videos"] .yt-shorts-grid .yt-short-tile::after {
    content:"";
    position:absolute;
    z-index:1;
    inset:44% 0 0;
    pointer-events:none;
    background:linear-gradient(transparent,rgba(0,0,0,.9));
  }
  body[data-route="shorts"] .yt-short-cover,
  body[data-route="videos"] .yt-shorts-grid .yt-short-cover {
    position:absolute;
    inset:0;
    aspect-ratio:auto;
    border-radius:inherit;
  }
  body[data-route="shorts"] .yt-short-tile strong,
  body[data-route="videos"] .yt-shorts-grid .yt-short-tile strong {
    position:absolute;
    z-index:2;
    right:10px;
    bottom:27px;
    left:10px;
    margin:0;
    overflow:hidden;
    color:#fff;
    font-size:12.5px;
    font-weight:850;
    line-height:1.25;
    text-shadow:0 2px 8px rgba(0,0,0,.72);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  body[data-route="shorts"] .yt-short-tile span,
  body[data-route="videos"] .yt-shorts-grid .yt-short-tile span {
    position:absolute;
    z-index:2;
    right:10px;
    bottom:10px;
    left:10px;
    color:rgba(255,255,255,.8);
    font-size:9.5px;
    line-height:1;
    text-shadow:0 2px 8px rgba(0,0,0,.72);
  }

  body[data-route="videos"] .yt-video-grid {
    padding:0 12px 18px;
    display:grid;
    grid-template-columns:1fr;
    gap:15px;
  }
  body[data-route="videos"] .yt-video-card {
    min-width:0;
    overflow:hidden;
    color:var(--text);
    background:var(--surface-solid);
    border:1px solid var(--line);
    border-radius:17px;
    box-shadow:var(--shadow-soft);
    text-align:left;
  }
  body[data-route="videos"] .yt-video-card .yt-thumb {
    aspect-ratio:16 / 9;
    border-radius:0;
  }
  body[data-route="videos"] .yt-video-card:hover .yt-thumb img { transform:none; }
  body[data-route="videos"] .yt-video-card .yt-play-hover {
    width:46px;
    height:46px;
    opacity:1;
    box-shadow:0 8px 22px rgba(0,0,0,.2);
  }
  body[data-route="videos"] .yt-video-card .yt-duration { right:9px; bottom:9px; font-size:10px; }
  body[data-route="videos"] .yt-video-meta {
    padding:13px 12px 15px;
    grid-template-columns:44px minmax(0,1fr) 18px;
    gap:10px;
    align-items:start;
  }
  body[data-route="videos"] .yt-video-meta img { width:44px; height:44px; }
  body[data-route="videos"] .yt-video-meta h3 {
    margin:0 0 5px;
    overflow:hidden;
    font-size:15.5px;
    line-height:1.34;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  body[data-route="videos"] .yt-video-meta span { font-size:11.5px; line-height:1.45; }
  body[data-route="videos"] .yt-video-meta > i { padding-top:3px; }
  body[data-route="videos"] .yt-shorts-strip {
    margin:7px 0 0;
    padding:20px 12px 92px;
  }
  body[data-route="videos"] .yt-media-stream .yt-shorts-strip { padding-bottom:20px; }
  body[data-route="videos"] .yt-media-stream .yt-shorts-strip:last-child { padding-bottom:92px; }
  body[data-route="videos"] .yt-shorts-title { margin-bottom:13px; }
  body[data-route="videos"] .yt-shorts-title h2 { font-size:21px; }
  body[data-route="videos"] .yt-shorts-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  body[data-route="videos"] .yt-shorts-grid > :nth-child(n + 5) { display:none; }

  body[data-route="watch"] .watch-layout { display:block; padding-bottom:8px; }
  body[data-route="watch"] .watch-main {
    min-width:0;
    padding-top:56.25vw;
  }
  body[data-route="watch"] .main-area {
    padding-top:var(--topbar-h);
    overflow:visible;
  }
  body[data-route="watch"] #viewRoot {
    padding-bottom:0;
    overflow:visible;
  }
  body[data-route="watch"] .watch-player {
    position:fixed;
    inset:var(--topbar-h) 0 auto;
    z-index:90;
    width:100%;
    aspect-ratio:16 / 9;
    background:#050505;
    border-radius:0;
    box-shadow:0 10px 24px rgba(20,14,6,.14);
  }
  body[data-route="watch"] .watch-big-play { width:62px; height:62px; font-size:21px; }
  body[data-route="watch"] .watch-controls {
    inset:auto 10px 9px;
    gap:9px;
    font-size:11px;
  }
  body[data-route="watch"] .watch-controls button { flex:0 0 auto; }
  body[data-route="watch"] .watch-progress { min-width:42px; }
  body[data-route="watch"] .watch-title {
    margin:17px 15px 12px;
    font-size:22px;
    line-height:1.27;
    letter-spacing:-.025em;
  }
  body[data-route="watch"] .watch-action-row {
    margin:0 15px;
    padding:0 0 15px;
    display:flex;
    flex-wrap:nowrap;
    gap:7px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  body[data-route="watch"] .watch-action-row::-webkit-scrollbar { display:none; }
  body[data-route="watch"] .watch-action-row .soft-btn {
    flex:0 0 auto;
    min-height:40px;
    padding:0 13px;
    border-radius:999px;
    font-size:11.5px;
    white-space:nowrap;
  }
  body[data-route="watch"] .watch-like.active {
    color:var(--danger);
    background:color-mix(in srgb,var(--danger) 9%,var(--surface-2));
  }
  body[data-route="watch"] .watch-channel {
    margin:0;
    padding:15px;
    grid-template-columns:48px minmax(0,1fr) auto;
    gap:10px;
    border-bottom:1px solid var(--line);
  }
  body[data-route="watch"] .watch-channel img { width:48px; height:48px; }
  body[data-route="watch"] .watch-channel strong { font-size:14px; }
  body[data-route="watch"] .watch-channel span { margin-top:3px; font-size:11px; }
  body[data-route="watch"] .watch-channel .premium-btn {
    min-height:40px;
    padding:0 13px;
    border-radius:12px;
    font-size:11px;
  }
  body[data-route="watch"] .watch-description {
    margin:12px;
    padding:15px;
    border:1px solid var(--line);
    border-radius:15px;
    font-size:13.5px;
    line-height:1.55;
  }
  body[data-route="watch"] .watch-comments { margin:20px 15px 0; }
  body[data-route="watch"] .watch-comments h2 { margin-bottom:8px; font-size:20px; }
  body[data-route="watch"] .watch-comment-form {
    padding:12px 0 15px;
    grid-template-columns:40px minmax(0,1fr) 42px;
    gap:8px;
  }
  body[data-route="watch"] .watch-comment-form > img { width:40px; height:40px; }
  body[data-route="watch"] .watch-comment-input { min-height:42px; padding-left:12px; }
  body[data-route="watch"] .watch-comment-input textarea { font-size:13px; }
  body[data-route="watch"] .watch-comment-submit { width:44px; min-width:44px; height:44px; min-height:44px; padding:0; border-radius:50%; }
  body[data-route="watch"] .watch-comment-submit span { display:none; }
  body[data-route="watch"] .yt-comment {
    padding:17px 0;
    grid-template-columns:42px minmax(0,1fr);
    gap:11px;
  }
  body[data-route="watch"] .yt-comment img { width:42px; height:42px; }
  body[data-route="watch"] .yt-comment strong { font-size:12.5px; line-height:1.35; }
  body[data-route="watch"] .yt-comment p { margin:6px 0 8px; font-size:13px; line-height:1.5; }
  body[data-route="watch"] .yt-comment-actions { gap:16px; font-size:11px; }
  body[data-route="watch"] .watch-next {
    margin-top:18px;
    padding:18px 12px 0;
    border-top:1px solid var(--line);
  }
  body[data-route="watch"] .watch-next .yt-filter-row { padding:0; }
  body[data-route="watch"] .watch-next-card {
    grid-template-columns:148px minmax(0,1fr);
    gap:11px;
  }
  body[data-route="watch"] .watch-next-card img { width:148px; }
  body[data-route="watch"] .watch-next-card strong { font-size:12.5px; }
  body[data-route="watch"] .watch-next-card span { font-size:10px; }
}

/* Mobilny profil firmy: czytelny nagłówek i równy układ realizacji. */
@media (max-width:700px) {
  body[data-route="company"] .company-profile-hero .profile-name h1 {
    font-size:27px;
    line-height:1.08;
  }
  body[data-route="company"] .company-profile-hero .profile-name span {
    margin-top:5px;
    display:block;
    font-size:12px;
    line-height:1.35;
  }
  body[data-route="company"] .company-profile-hero .profile-bio {
    margin-top:17px;
    font-size:13.5px;
    line-height:1.58;
  }
  body[data-route="company"] .company-scope-chips span {
    min-height:36px;
    padding:0 12px;
    font-size:12px;
  }
  body[data-route="company"] .company-profile-details {
    gap:9px;
    font-size:11.5px;
    line-height:1.4;
  }
  body[data-route="company"] .company-profile-details i {
    width:14px;
    margin-right:7px;
    text-align:center;
  }
  body[data-route="company"] .company-panel[data-company-panel="realizations"] .company-content-card {
    padding:17px 12px 90px;
  }
  body[data-route="company"] .company-panel[data-company-panel="realizations"] .section-head {
    padding:0 2px;
  }
  body[data-route="company"] .company-panel[data-company-panel="realizations"] .company-realization-grid {
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-flow:row;
    gap:7px;
    overflow:visible;
    border-radius:0;
  }
  body[data-route="company"] .company-panel[data-company-panel="realizations"] .company-realization-grid button {
    width:100%;
    min-width:0;
    aspect-ratio:1 / 1;
    overflow:hidden;
    border-radius:12px;
  }
  body[data-route="company"] .company-panel[data-company-panel="realizations"] .company-realization-grid img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  body[data-route="company"] .company-panel[data-company-panel="realizations"] .company-realization-grid button > span {
    right:10px;
    bottom:10px;
    left:10px;
    min-width:0;
  }
  body[data-route="company"] .company-panel[data-company-panel="realizations"] .company-realization-grid b {
    overflow:hidden;
    font-size:12px;
    line-height:1.25;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body[data-route="company"] .company-panel[data-company-panel="realizations"] .company-realization-grid small {
    overflow:hidden;
    font-size:9.5px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

/* Mobilne centrum powiadomień firmy. */
@media (max-width:700px) {
  body[data-page="company-notifications"] #viewRoot { padding-bottom:82px; }
  body[data-page="company-notifications"] .company-notifications-hero {
    padding:20px 15px 16px;
    gap:14px;
  }
  body[data-page="company-notifications"] .company-notifications-hero h1 {
    font-size:34px;
    line-height:1.04;
  }
  body[data-page="company-notifications"] .company-notifications-hero p {
    font-size:13px;
    line-height:1.5;
  }
  body[data-page="company-notifications"] .company-notifications-actions .soft-btn {
    min-height:44px;
    font-size:11.5px;
  }
  body[data-page="company-notifications"] .company-notifications-actions .icon-btn {
    width:44px;
    height:44px;
  }
  body[data-page="company-notifications"] .company-notifications-summary {
    padding:11px 12px;
    grid-template-columns:repeat(5,174px);
    gap:9px;
    scroll-snap-type:x proximity;
  }
  body[data-page="company-notifications"] .company-notifications-summary > button {
    min-height:98px;
    scroll-snap-align:start;
  }
  body[data-page="company-notifications"] .company-notifications-toolbar {
    padding:11px 12px;
    gap:8px;
  }
  body[data-page="company-notifications"] .company-notifications-toolbar label,
  body[data-page="company-notifications"] .company-notifications-toolbar select {
    min-height:44px;
  }
  body[data-page="company-notifications"] .company-notifications-toolbar input,
  body[data-page="company-notifications"] .company-notifications-toolbar select { font-size:12px; }
  body[data-page="company-notifications"] .company-notifications-list {
    padding:3px 10px 18px;
    background:var(--bg);
  }
  body[data-page="company-notifications"] .company-notifications-group-title {
    min-height:58px;
    padding:0 5px;
  }
  body[data-page="company-notifications"] .company-notifications-group-title h2 { font-size:21px; }
  body[data-page="company-notifications"] .company-notifications-group-title span { font-size:11px; }
  body[data-page="company-notifications"] .company-notification-item,
  body[data-page="company-notifications"] .company-notification-item.active {
    width:100%;
    min-height:132px;
    margin:0 0 8px;
    padding:16px 13px;
    grid-template-columns:48px minmax(0,1fr);
    gap:13px;
    background:var(--surface-solid);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 7px 22px rgba(43,29,7,.045);
  }
  body[data-page="company-notifications"] .company-notification-item.active {
    background:var(--gold-wash);
    border-color:var(--line-strong);
  }
  body[data-page="company-notifications"] .company-notification-item.unread::before { content:none; }
  body[data-page="company-notifications"] .company-notification-icon {
    width:48px;
    height:48px;
    border-radius:14px;
    font-size:16px;
  }
  body[data-page="company-notifications"] .company-notification-copy .company-notification-kicker {
    margin-bottom:6px;
    font-size:9.5px;
  }
  body[data-page="company-notifications"] .company-notification-copy > strong {
    font-size:14.5px;
    line-height:1.42;
  }
  body[data-page="company-notifications"] .company-notification-copy > small {
    margin-top:5px;
    font-size:11.5px;
    line-height:1.45;
  }
  body[data-page="company-notifications"] .company-notification-copy > span:last-child {
    margin-top:9px;
    gap:10px;
  }
  body[data-page="company-notifications"] .company-notification-copy > span:last-child b,
  body[data-page="company-notifications"] .company-notification-copy time { font-size:10.5px; }
body[data-page="company-notifications"] .company-notification-detail {
    width:100%;
    max-width:none;
  }
}

/* Widoki przyjęcia auta pozostają rozdzielone także od ogólnych reguł formularzy. */
body[data-page="company-dashboard"] .company-intake-view { display:none; }
body[data-page="company-dashboard"] .company-intake-view.active { display:block; }
body[data-page="company-dashboard"] .company-invoice-fields[hidden] { display:none !important; }

/* Prawa kolumna nie tworzy własnego pasa tła — pomiędzy kartami widać tło aplikacji. */
body .right-rail {
  background-color: transparent !important;
  background-image: none !important;
}

/* Cienie kart nie mogą łączyć się w ciemniejszy pas pod prawą kolumną. */
body .right-rail .rail-card {
  box-shadow: none;
}

/* Spójne nagłówki i łączenia sekcji na telefonach. */
@media (max-width:700px) {
  body[data-route="feed"] .page-intro {
    min-height:92px;
    margin:0;
    padding:20px 15px 14px;
    align-items:flex-end;
    gap:12px;
    background:var(--bg);
    border-bottom:1px solid var(--line);
  }
  body[data-route="feed"] .page-intro h1 {
    margin-top:4px;
    font-size:32px;
    line-height:1;
    letter-spacing:-.035em;
  }
  body[data-route="feed"] .page-intro .premium-btn {
    min-width:82px;
    min-height:46px;
    padding:0 15px;
    border-radius:14px;
    font-size:12px;
  }

  body[data-page="search"] .services-page-intro {
    min-height:0;
    margin:0;
    padding:4px 14px 5px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    background:var(--bg);
  }
  body[data-page="search"] .services-page-intro > div:first-child {
    width:100%;
    margin:0;
    padding:0;
  }
  body[data-page="search"] .services-page-intro h1 {
    max-width:none;
    margin-top:1px;
    font-size:clamp(22px,6vw,24px);
    line-height:1.04;
    letter-spacing:-.035em;
  }
  body[data-page="search"] .services-page-intro .page-actions {
    width:100%;
  }
  body[data-page="search"] .services-page-intro .premium-btn {
    width:100%;
    min-height:48px;
    justify-content:center;
    border-radius:14px;
    font-size:12px;
  }

  body[data-page="video-listing"] .page-intro,
  body[data-page="video-shorts-listing"] .page-intro {
    min-height:118px;
    margin:0;
    padding:20px 14px 14px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 94px;
    align-items:end;
    gap:12px;
    background:var(--bg);
  }
  body[data-page="video-listing"] .page-intro h1,
  body[data-page="video-shorts-listing"] .page-intro h1 {
    max-width:270px;
    margin-top:5px;
    font-size:29px;
    line-height:1.01;
    letter-spacing:-.045em;
  }
  body[data-page="video-listing"] .page-intro .page-actions,
  body[data-page="video-shorts-listing"] .page-intro .page-actions {
    width:94px;
  }
  body[data-page="video-listing"] .page-intro .premium-btn,
  body[data-page="video-shorts-listing"] .page-intro .premium-btn {
    width:94px;
    min-height:54px;
    padding:7px 9px;
    justify-content:center;
    border-radius:15px;
    font-size:11px;
    line-height:1.2;
  }

  body[data-page="user-profile"] .main-area {
    padding-top:var(--topbar-h);
  }
  body[data-page="user-profile"] .profile-hero {
    margin-top:0;
  }
  body[data-page="user-profile"] .profile-cover {
    display:block;
    border-radius:0;
  }

  body[data-page="company-profile"] .main-area {
    padding-top:var(--topbar-h);
  }
  body[data-page="company-profile"] .company-profile-hero {
    margin-top:0;
  }

  body[data-page="company-dashboard"] .company-admin-hero {
    margin-bottom:14px;
    padding:18px 15px 0;
    gap:13px;
  }
  body[data-page="company-dashboard"] .company-admin-hero h1 {
    margin:4px 0 7px;
    max-width:390px;
    font-size:30px;
    line-height:1.04;
    letter-spacing:-.04em;
  }
  body[data-page="company-dashboard"] .company-admin-hero p {
    max-width:390px;
    font-size:13px;
    line-height:1.48;
  }
  body[data-page="company-dashboard"] .company-admin-hero-actions {
    gap:8px;
  }
  body[data-page="company-dashboard"] .company-admin-hero-actions .soft-btn,
  body[data-page="company-dashboard"] .company-admin-hero-actions .premium-btn {
    min-height:44px;
    border-radius:14px;
    font-size:11.5px;
  }

  body[data-page="points-rewards"] .reward-hero {
    padding:22px 16px 20px;
  }
  body[data-page="points-rewards"] .reward-top h1 {
    margin-top:7px;
    font-size:31px;
    line-height:1.02;
    letter-spacing:-.04em;
  }
  body[data-page="points-rewards"] .reward-how,
  body[data-page="points-rewards"] .reward-history {
    border-left:0;
    border-right:0;
    border-radius:0;
    box-shadow:none;
  }
  body[data-page="points-rewards"] .reward-how summary {
    min-height:38px;
    font-size:16px;
  }
  body[data-page="points-rewards"] .reward-history .section-head h2 {
    font-size:25px;
    line-height:1.05;
  }
}

/* ================================================================
   Posts — wider community stream based on profile post cards
   ================================================================ */
body[data-route="posts"] #viewRoot {
  width:min(100%,820px);
}

.posts-page-intro {
  align-items:flex-end;
}

.posts-page-intro .page-actions {
  flex:0 0 auto;
}

.posts-page-intro .premium-btn {
  min-height:44px;
  padding:0 18px;
}

.posts-composer {
  margin-bottom:14px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:12px;
  align-items:center;
}

.posts-composer > img {
  width:46px;
  height:46px;
  display:block;
  object-fit:cover;
  border:2px solid var(--surface);
  border-radius:50%;
  box-shadow:0 0 0 1px var(--line-strong);
}

.posts-composer > a {
  min-width:0;
  min-height:46px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--text-soft);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:15px;
  font-size:13px;
  font-weight:700;
  transition:border-color .18s ease, background .18s ease, color .18s ease;
}

.posts-composer > a:hover {
  color:var(--text);
  background:var(--gold-wash);
  border-color:var(--line-strong);
}

.posts-composer > a i {
  color:var(--gold-deep);
}

.posts-filter {
  width:100%;
  margin-bottom:14px;
}

.posts-filter button {
  font-size:12px;
}

.posts-stream {
  display:grid;
  gap:16px;
}

.social-post-card {
  width:100%;
  margin:0;
  padding:20px 22px 0;
  overflow:visible;
}

.social-post-head {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
}

.social-post-head > :is(a,button):first-child {
  width:48px;
  height:48px;
  padding:0;
  overflow:hidden;
  border-radius:50%;
}

.social-post-head > :is(a,button):first-child img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.social-post-author {
  min-width:0;
  padding:0;
  display:grid;
  gap:3px;
  color:var(--text);
  text-align:left;
}

.social-post-author strong {
  min-width:0;
  overflow:hidden;
  font-size:14px;
  font-weight:800;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.social-post-author span {
  color:var(--text-faint);
  font-size:10.5px;
  font-weight:600;
}

.social-post-author .verified {
  margin-left:3px;
  color:var(--gold);
  font-size:13px;
  vertical-align:-.04em;
}

.social-post-copy {
  margin:17px 0 18px;
  color:var(--text-soft);
  font-size:14px;
  line-height:1.72;
}

.social-post-copy a {
  color:var(--gold-deep);
  font-weight:800;
}

.social-post-media {
  margin:0 -22px;
  overflow:hidden;
  background:var(--surface-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.social-post-media img {
  width:100%;
  max-height:560px;
  aspect-ratio:16 / 9;
  display:block;
  object-fit:cover;
}

.social-post-actions {
  min-height:60px;
  display:flex;
  align-items:center;
  gap:22px;
  border-top:1px solid var(--line);
}

.social-post-media + .social-post-actions {
  border-top:0;
}

.social-post-actions button,
.social-post-like {
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.social-post-actions button {
  min-width:0;
  padding:0;
  color:var(--text-soft);
  font-size:11px;
  font-weight:700;
}

.social-post-actions button:hover,
.social-post-actions .like.active {
  color:var(--gold-deep);
}

.social-post-actions button > i {
  font-size:18px;
}

.social-post-actions .like-count {
  font-variant-numeric:tabular-nums;
}

.social-post-card .post-options-menu {
  z-index:140;
}

@media (max-width:700px) {
  body[data-route="posts"] .main-area {
    padding-top:var(--topbar-h);
    padding-right:0;
    padding-left:0;
  }

  body[data-route="posts"] #viewRoot {
    width:100%;
    max-width:none;
  }

  .posts-page-intro {
    padding:18px 14px 12px;
    align-items:center;
  }

  .posts-page-intro h1 {
    font-size:31px;
  }

  .posts-page-intro .premium-btn {
    min-height:41px;
    padding:0 13px;
    border-radius:13px;
    font-size:11px;
  }

  .posts-composer {
    margin:0 12px 10px;
    padding:11px 12px;
    grid-template-columns:40px minmax(0,1fr);
    gap:10px;
    border-radius:15px;
  }

  .posts-composer > img {
    width:40px;
    height:40px;
  }

  .posts-composer > a {
    min-height:42px;
    padding:0 13px;
    font-size:11px;
  }

  .posts-filter {
    width:auto;
    margin:0 12px 10px;
  }

  .posts-filter button {
    min-height:36px;
    font-size:10.5px;
  }

  .posts-stream {
    gap:8px;
  }

  .social-post-card {
    padding:15px 14px 0;
    overflow:visible;
    border-right:0;
    border-left:0;
    border-radius:0;
    box-shadow:none;
  }

  .social-post-head {
    grid-template-columns:42px minmax(0,1fr) auto;
    gap:9px;
  }

  .social-post-head > :is(a,button):first-child {
    width:42px;
    height:42px;
  }

  .social-post-author strong {
    font-size:12.5px;
  }

  .social-post-author span {
    font-size:9.5px;
  }

  .social-post-head .post-follow-btn {
    min-height:31px;
    padding:0 10px;
    font-size:9.5px;
  }

  .social-post-copy {
    margin:13px 0 14px;
    font-size:13px;
    line-height:1.62;
  }

  .social-post-media {
    margin:0 -14px;
  }

  .social-post-media img {
    max-height:none;
    aspect-ratio:16 / 10;
  }

  .social-post-actions {
    min-height:55px;
    gap:14px;
  }

  .social-post-actions button {
    gap:5px;
    font-size:10px;
  }

  .social-post-actions button > i {
    font-size:17px;
  }

  .social-post-actions .share span {
    display:none;
  }
}

/* ================================================================
   Shared create CTA for Feed, Shorts, Video and Posts
   ================================================================ */
.page-intro .page-actions .section-create-cta {
  width:auto;
  min-width:0;
  min-height:44px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#211604;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  border:1px solid rgba(142,91,11,.28);
  border-radius:13px;
  box-shadow:0 10px 24px rgba(157,104,21,.16);
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.page-intro .page-actions .section-create-cta:hover {
  color:#211604;
  filter:brightness(1.035);
  transform:translateY(-4px);
}

.page-intro .page-actions .section-create-cta i {
  font-size:13px;
}

/* ================================================================
   Shorts vertical carousel
   ================================================================ */
body[data-route="short"] .short-carousel {
  width:100%;
  height:100%;
  min-height:0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body[data-route="short"] .short-carousel::before,
body[data-route="short"] .short-carousel::after {
  content:none !important;
  display:none !important;
  background:none !important;
  box-shadow:none !important;
  filter:none !important;
}

body[data-route="short"] {
  background:var(--bg);
}

body[data-route="short"] .main-area,
body[data-route="short"] #viewRoot,
body[data-route="short"] .short-viewer-stage,
body[data-route="short"] .short-carousel,
body[data-route="short"] .short-slide {
  background:transparent;
  box-shadow:none;
}

body[data-route="short"] .short-player {
  box-shadow:none;
}

body[data-route="short"] .short-carousel::-webkit-scrollbar {
  display:none;
}

body[data-route="short"] .short-slide {
  position:relative;
  width:100%;
  height:100%;
  min-height:100%;
  display:grid;
  place-items:center;
  overflow:hidden;
  contain:paint;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

body[data-route="short"] .short-slide:not(.active) .short-center-play {
  opacity:.72;
}

body[data-route="short"] .short-nav {
  right:auto;
  left:calc(50% - (var(--short-player-height) * .28125) - 58px);
  top:50%;
  z-index:12;
  transform:translateY(-50%);
}

body[data-route="short"] .short-nav button {
  transition:opacity .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

body[data-route="short"] .short-nav button:not(:disabled):hover {
  color:var(--gold-deep);
  border-color:var(--gold);
  transform:scale(1.05);
}

body[data-route="short"] .short-nav button:disabled {
  cursor:not-allowed;
  opacity:.32;
  box-shadow:none;
}

/* Desktop: nawigacja karuzeli podaza za playerem po otwarciu komentarzy,
   dzieki czemu pozostaje po jego lewej stronie zamiast nachodzic na film. */
@media (min-width:701px) {
  body[data-route="short"].short-comments-open .short-nav {
    transform:translate(-225px,-50%);
  }
}

@media (min-width:701px) and (max-width:1399px) {
  body[data-route="short"].short-comments-open .short-nav {
    transform:translate(-190px,-50%);
  }
}

@media (max-width:700px) {
  .page-intro .page-actions .section-create-cta {
    width:auto !important;
    min-height:40px !important;
    padding:0 13px !important;
    border-radius:12px !important;
    font-size:10.5px !important;
  }

  body[data-route="short"] .short-viewer-stage {
    width:100vw;
    height:calc(100dvh - var(--topbar-h) - 68px - env(safe-area-inset-bottom));
    min-height:0;
  }

  body[data-route="short"] .short-carousel {
    height:100%;
  }

  body[data-route="short"] .main-area {
    padding:var(--topbar-h) 0 calc(68px + env(safe-area-inset-bottom));
  }

  body[data-route="short"] .short-slide {
    place-items:stretch;
  }

  body[data-route="short"] .short-viewer-shell {
    width:100%;
    height:100%;
    margin:0;
  }

  body[data-route="short"] .short-player {
    width:100vw;
    height:100%;
    max-width:none;
    aspect-ratio:auto;
    border-radius:0;
  }

  body[data-route="short"] .short-nav {
    display:none;
  }
}

@media (prefers-reduced-motion:reduce) {
  body[data-route="short"] .short-carousel {
    scroll-behavior:auto;
  }
}

/* Nagłówek feedu korzysta z tej samej osi co filtry i karty. */
@media (min-width:701px) {
  body[data-route="feed"] .page-intro {
    width:min(100%,clamp(460px,calc(80dvh - 128px),540px));
    margin-right:auto;
    margin-left:auto;
  }
}

/* ================================================================
   One action bar for Feed, Posts, profile posts and Video
   ================================================================ */
.content-action-row {
  min-height:54px;
  padding:0;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:18px;
  color:var(--text-soft);
}

.post-actions.content-action-row {
  padding:9px 18px;
}

body[data-route="feed"] .post-actions.content-action-row {
  min-height:48px;
  padding:4px 18px 1px;
}

.watch-action-row.content-action-row {
  margin:0;
  padding:0 0 14px;
  border-bottom:0;
}

.user-profile-post-list footer.content-action-row {
  min-height:58px;
  padding-top:0;
}

.content-action-row .content-action-like {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:7px;
}

.content-action-row .content-action-button,
.content-action-row .content-action-count {
  width:auto;
  min-width:0;
  height:auto;
  min-height:40px;
  margin:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--text-soft);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-size:12px;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
}

.content-action-row .content-action-button:hover,
.content-action-row .content-action-count:hover {
  color:var(--text);
  background:transparent;
  box-shadow:none;
  transform:none;
}

.content-action-row .content-action-button > i {
  font-size:21px;
}

.content-action-row .content-action-count {
  min-height:40px;
  font-variant-numeric:tabular-nums;
}

:is(.like,.watch-like,.short-heart,.profile-lightbox-like).active,
:is(.like,.watch-like,.short-heart,.profile-lightbox-like).active i {
  color:#e3264f !important;
}

/* Rzeczywiste osoby, które ostatnio polubiły feed. Cały wiersz otwiera
   ten sam modal co licznik przy sercu. */
body[data-route="feed"] .post-meta {
  display:flex;
  flex-direction:column;
  gap:10px;
}

body[data-route="feed"] .like-summary {
  width:fit-content;
  max-width:100%;
  min-height:25px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--text-soft);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  font:500 11px/1.35 var(--font-body);
  text-align:left;
}

body[data-route="feed"] .like-summary:hover,
body[data-route="feed"] .like-summary:focus-visible {
  color:var(--text);
  background:transparent;
  box-shadow:none;
  transform:none;
}

body[data-route="feed"] .like-summary b {
  color:var(--text);
  font-size:11px;
  font-weight:800;
}

body[data-route="feed"] .like-faces {
  min-width:0;
  width:max-content;
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

body[data-route="feed"] .like-faces img {
  width:22px;
  height:22px;
  margin-right:-8px;
  display:block;
  object-fit:cover;
  border:2px solid var(--surface-solid);
  border-radius:50%;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--line-strong) 55%,transparent);
}

body[data-route="feed"] .like-faces img:last-child { margin-right:0; }

/* Wspólny wiersz ostatnich polubień dla feedu, postów i oglądanego filmu.
   Grupa zdjęć ma naturalną szerokość, dlatego jedna lub dwie osoby nie
   rezerwują pustego miejsca przewidzianego dla trzech avatarów. */
:is(body[data-route="watch"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .like-summary {
  width:fit-content;
  max-width:100%;
  min-height:25px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--text-soft);
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  font:500 11px/1.35 var(--font-body);
  text-align:left;
}

:is(body[data-route="watch"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .like-summary:hover,
:is(body[data-route="watch"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .like-summary:focus-visible {
  color:var(--text);
  background:transparent;
  box-shadow:none;
  transform:none;
}

:is(body[data-route="watch"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .like-summary b {
  color:var(--text);
  font-size:11px;
  font-weight:800;
}

:is(body[data-route="watch"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .like-faces {
  min-width:0;
  width:max-content;
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

:is(body[data-route="watch"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .like-faces img {
  width:22px;
  height:22px;
  margin-right:-8px;
  display:block;
  object-fit:cover;
  border:2px solid var(--surface-solid);
  border-radius:50%;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--line-strong) 55%,transparent);
}

:is(body[data-route="watch"],body[data-route="posts"],body[data-route="groups"],body[data-page="user-profile"]) .like-faces img:last-child { margin-right:0; }

body[data-route="watch"] .watch-like-summary {
  margin:-5px 0 12px;
}

body[data-route="posts"] .social-post-like-summary {
  padding:0 0 15px;
}

body[data-page="user-profile"] .user-profile-post-like-summary {
  padding:0 0 15px;
}

@media (max-width:700px) {
  .watch-comment-form .comment-emoji-picker {
    right:calc(44px + 8px);
  }

  .content-action-row {
    min-height:54px;
    gap:18px;
  }

  .post-actions.content-action-row {
    padding:7px 14px;
  }

  body[data-route="feed"] .post-actions.content-action-row {
    min-height:48px;
    padding:4px 14px 1px;
  }

  .content-action-row .content-action-button,
  .content-action-row .content-action-count {
    min-height:40px;
    gap:6px;
    font-size:12px;
  }

  .content-action-row .content-action-button > i {
    font-size:21px;
  }

  .content-action-row .share span {
    display:inline;
  }
}

/* Jeden stan obserwowania we wszystkich widokach aplikacji. */
.global-follow-button {
  color:var(--gold-deep) !important;
  background:var(--surface-solid) !important;
  border-color:var(--gold) !important;
  box-shadow:none !important;
}
.global-follow-button:hover {
  color:var(--gold-deep) !important;
  background:var(--gold-wash) !important;
  border-color:var(--gold-deep) !important;
}
.global-follow-button.following,
.global-follow-button.active {
  color:#111 !important;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold)) !important;
  border-color:var(--gold) !important;
  box-shadow:0 7px 18px color-mix(in srgb,var(--gold) 22%,transparent) !important;
}
.global-follow-button.following:hover,
.global-follow-button.active:hover {
  background:linear-gradient(135deg,var(--gold-bright),var(--gold-deep)) !important;
}
.global-follow-button i,
.global-follow-button span {
  color:inherit !important;
}

/* Weryfikacja kanału przy filmie musi być czytelnym znakiem, nie kropką. */
.watch-channel strong .verified {
  display:inline-block;
  margin-left:3px;
  color:var(--gold);
  font-size:13px;
  line-height:1;
  vertical-align:-1px;
}

/* Dostęp do akcji społecznościowych dla gościa. */
body.auth-required-open {
  overflow:hidden;
}

.auth-required-modal > .modal-backdrop {
  background:rgba(18,15,11,.66);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.auth-required-dialog {
  position:absolute;
  z-index:1;
  top:50%;
  left:50%;
  width:min(540px,calc(100% - 36px));
  padding:26px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:18px;
  color:var(--text);
  background:var(--surface-solid);
  border:1px solid var(--line-strong);
  border-radius:25px;
  box-shadow:0 32px 90px rgba(20,15,8,.28);
  transform:translate(-50%,-46%) scale(.98);
  transition:transform .2s ease;
}

.auth-required-modal.open .auth-required-dialog {
  transform:translate(-50%,-50%) scale(1);
}

.auth-required-icon {
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#d72e4e;
  background:rgba(227,38,79,.1);
  border-radius:16px;
  font-size:20px;
}

.auth-required-content .eyebrow {
  display:block;
  margin:2px 0 5px;
}

.auth-required-content h2 {
  margin:0;
  font-size:26px;
  line-height:1.12;
  letter-spacing:-.035em;
}

.auth-required-content p {
  margin:9px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.auth-required-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px;
}

.auth-required-actions a {
  min-height:44px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  text-decoration:none;
  white-space:nowrap;
}

@media (max-width:700px) {
  .auth-required-dialog {
    width:calc(100% - 28px);
    padding:21px 18px;
    grid-template-columns:48px minmax(0,1fr);
    gap:13px;
    border-radius:22px;
  }

  .auth-required-icon {
    width:48px;
    height:48px;
    border-radius:14px;
    font-size:18px;
  }

  .auth-required-content h2 {
    font-size:20px;
  }

  .auth-required-content p {
    margin-top:7px;
    font-size:12.5px;
    line-height:1.48;
  }

  .auth-required-actions {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-top:16px;
  }

  .auth-required-actions a {
    width:100%;
    min-height:42px;
    padding:0 9px;
    font-size:12px;
  }

  /* Wspólny, pełnoszerokowy listing mobilny dla gościa i zalogowanego. */
  body[data-route="videos"] .main-area {
    padding-left:0 !important;
    padding-right:0 !important;
    background:var(--bg);
  }

  body[data-route="videos"] #viewRoot {
    width:100%;
    max-width:none;
    margin:0;
    padding:0 0 76px;
    color:var(--text);
    background:var(--bg);
  }

  body[data-route="videos"] .yt-video-toolbar .yt-filter-row {
    width:100%;
    margin:0;
    padding:9px 5px 10px;
    gap:7px;
    background:var(--bg);
    scroll-padding-inline:5px;
    scrollbar-width:none;
  }

  body[data-route="videos"] .yt-video-toolbar .yt-filter-row::-webkit-scrollbar {
    display:none;
  }

  body[data-route="videos"] .yt-video-toolbar .yt-filter-row button {
    min-height:32px;
    padding:0 11px;
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--text-soft);
    background:var(--surface-2);
    box-shadow:none;
    font-size:10.5px;
    font-weight:700;
  }

  body[data-route="videos"] .yt-video-toolbar .yt-filter-row button.active {
    color:#241704;
    background:var(--gold-bright);
    border-color:transparent;
  }

  body[data-route="videos"] .yt-video-grid {
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    gap:0;
  }

  body[data-route="videos"] .yt-video-card {
    display:block;
    width:100%;
    max-width:none;
    margin:0 0 13px;
    padding:0;
    color:var(--text);
    background:var(--bg);
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible;
  }

  body[data-route="videos"] .yt-thumb {
    border-radius:0;
  }

  body[data-route="videos"] .yt-video-card .yt-play-hover {
    width:40px;
    height:40px;
    font-size:15px;
  }

  body[data-route="videos"] .yt-video-meta {
    padding:9px 12px 14px;
    grid-template-columns:38px minmax(0,1fr) 16px;
    gap:9px;
  }

  body[data-route="videos"] .yt-video-meta img {
    width:38px;
    height:38px;
  }

  body[data-route="videos"] .yt-video-meta h3 {
    margin:0 0 3px;
    color:var(--text);
    font-size:13.5px;
    line-height:1.28;
  }

  body[data-route="videos"] .yt-video-meta span,
  body[data-route="videos"] .yt-video-meta > i {
    color:var(--text-faint);
  }

  body[data-route="videos"] .yt-video-meta span {
    font-size:10.5px;
    line-height:1.35;
  }

  body[data-route="videos"] .yt-shorts-strip {
    margin:0;
    padding:13px 10px 88px;
    color:var(--text);
    background:var(--bg);
    border-top:1px solid var(--line);
  }

  body[data-route="videos"] .yt-media-stream .yt-shorts-strip { padding-bottom:18px; }
  body[data-route="videos"] .yt-media-stream .yt-shorts-strip:last-child { padding-bottom:88px; }

  body[data-route="videos"] .yt-shorts-title {
    margin:0 2px 11px;
  }

  body[data-route="videos"] .yt-shorts-title h2 {
    color:var(--text);
    font-size:17px;
  }

  body[data-route="videos"] .yt-shorts-title .text-btn {
    color:var(--text-soft);
    font-size:10px;
  }

body[data-route="videos"] .yt-shorts-grid {
    padding:0;
  }
}

/* Czytelny tekst na złotych CTA w ciemnym motywie. */
html[data-theme="dark"] .premium-btn,
html[data-theme="dark"] .premium-btn:visited,
html[data-theme="dark"] .premium-btn:hover,
html[data-theme="dark"] .premium-btn:focus-visible {
  color:#211507 !important;
}

html[data-theme="dark"] .premium-btn i,
html[data-theme="dark"] .premium-btn span {
  color:inherit;
}

/* Przycisk obserwowania kanału pod filmem musi zachować kontrast w ciemnym motywie. */
html[data-theme="dark"] body[data-route="watch"] .watch-channel .premium-btn:not(.following):not(.active) {
  color:#211507 !important;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold)) !important;
  border-color:var(--gold-bright) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.32) !important;
}

html[data-theme="dark"] body[data-route="watch"] .watch-channel .premium-btn:not(.following):not(.active):hover,
html[data-theme="dark"] body[data-route="watch"] .watch-channel .premium-btn:not(.following):not(.active):focus-visible {
  color:#211507 !important;
  background:linear-gradient(135deg,#f8d98c,var(--gold-bright)) !important;
  border-color:#f8d98c !important;
}

html[data-theme="dark"] body[data-route="watch"] .watch-channel .premium-btn.following,
html[data-theme="dark"] body[data-route="watch"] .watch-channel .premium-btn.active {
  color:var(--gold-bright) !important;
  background:var(--gold-wash) !important;
  border-color:var(--gold) !important;
  box-shadow:none !important;
}

/* Większy player i sugerowane filmy na Full HD oraz szerokich monitorach. */
@media (min-width:1600px) {
  body[data-route="watch"] #viewRoot {
    width:min(100%,1420px);
  }

  body[data-route="watch"] .watch-layout {
    grid-template-columns:minmax(0,1fr) 360px;
    gap:24px;
  }

  body[data-route="watch"] .watch-next {
    gap:12px;
  }

  body[data-route="watch"] .watch-next-card {
    grid-template-columns:180px minmax(0,1fr);
    gap:11px;
  }

  body[data-route="watch"] .watch-next-card img {
    width:180px;
  }

  body[data-route="watch"] .watch-next-card strong {
    font-size:12.5px;
  }

  body[data-route="watch"] .watch-next-card span {
    font-size:10px;
  }
}

@media (min-width:2200px) {
  body[data-route="watch"] #viewRoot {
    width:min(100%,2100px);
  }

  body[data-route="watch"] .watch-layout {
    grid-template-columns:minmax(0,1fr) 420px;
    gap:28px;
  }

  body[data-route="watch"] .watch-next {
    gap:15px;
  }

  body[data-route="watch"] .watch-next .yt-filter-row {
    margin-bottom:20px;
  }

  body[data-route="watch"] .watch-next-card {
    grid-template-columns:200px minmax(0,1fr);
    gap:14px;
  }

  body[data-route="watch"] .watch-next-card img {
    width:200px;
  }

  body[data-route="watch"] .watch-next-card strong {
    font-size:14px;
  }

  body[data-route="watch"] .watch-next-card span {
    font-size:11px;
  }
}

/* =========================================================
   WATCH — prawdziwy odtwarzacz YouTube pod własną warstwą UI
   ========================================================= */
body[data-route="watch"] .watch-player[data-shineup-player="true"] {
  isolation:isolate;
  color:#fff;
  outline:0;
  cursor:pointer;
  background:#050505;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

body[data-route="watch"] .watch-player[data-shineup-player="true"]::after {
  z-index:2;
  inset:42% 0 0;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(0,0,0,.22) 38%,rgba(0,0,0,.88));
  opacity:1;
  transition:opacity .24s ease;
}

body[data-route="watch"] .watch-player-media,
body[data-route="watch"] .watch-player-media iframe,
body[data-route="watch"] .watch-youtube-host,
body[data-route="watch"] .watch-player-poster {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

body[data-route="watch"] .watch-player-media {
  z-index:0;
  overflow:hidden;
  background:#000;
}

body[data-route="watch"] .watch-player-media iframe,
body[data-route="watch"] .watch-youtube-host {
  display:block;
  border:0;
  pointer-events:none;
}

body[data-route="watch"] .watch-player-poster {
  z-index:1;
  background-color:#111;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  opacity:.84;
  transition:opacity .34s ease,visibility .34s ease;
}

body[data-route="watch"] .watch-player.has-started .watch-player-poster {
  opacity:0;
  visibility:hidden;
}

body[data-route="watch"] .watch-player-hitarea {
  position:absolute;
  z-index:3;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:inherit;
}

body[data-route="watch"] .watch-player-loader {
  position:absolute;
  z-index:4;
  inset:50% auto auto 50%;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,visibility .16s ease;
}

body[data-route="watch"] .watch-player-loader span {
  width:34px;
  height:34px;
  border:3px solid rgba(255,255,255,.35);
  border-top-color:var(--gold-bright);
  border-radius:50%;
  animation:watch-player-spin .72s linear infinite;
}

body[data-route="watch"] .watch-player.is-loading .watch-player-loader {
  opacity:1;
  visibility:visible;
}

body[data-route="watch"] .watch-player.is-loading .watch-big-play {
  opacity:0;
  visibility:hidden;
}

@keyframes watch-player-spin {
  to { transform:rotate(360deg); }
}

body[data-route="watch"] .watch-player[data-shineup-player="true"] .watch-big-play {
  z-index:5;
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 14px 38px rgba(0,0,0,.34);
  transition:transform .18s ease,opacity .2s ease,visibility .2s ease,filter .18s ease;
}

body[data-route="watch"] .watch-player[data-shineup-player="true"] .watch-big-play:hover,
body[data-route="watch"] .watch-player[data-shineup-player="true"] .watch-big-play:focus-visible {
  transform:translate(-50%,-50%) scale(1.08);
  filter:brightness(1.05);
}

body[data-route="watch"] .watch-player.is-playing .watch-big-play {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

body[data-route="watch"] .watch-player.has-error .watch-player-hitarea,
body[data-route="watch"] .watch-player.has-error::after {
  display:none;
}

body[data-route="watch"] .watch-player[data-shineup-player="true"] .watch-controls {
  z-index:6;
  inset:auto 0 0;
  width:100%;
  min-height:64px;
  display:block;
  padding:15px 14px 7px;
  background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.2) 16%,rgba(0,0,0,.82) 100%);
  opacity:1;
  transform:translateY(0);
  transition:opacity .2s ease,transform .2s ease;
}

body[data-route="watch"] .watch-controls-row,
body[data-route="watch"] .watch-controls-left,
body[data-route="watch"] .watch-controls-right,
body[data-route="watch"] .watch-volume-group,
body[data-route="watch"] .watch-volume-panel {
  display:flex;
  align-items:center;
}

body[data-route="watch"] .watch-controls-row {
  justify-content:space-between;
  gap:10px;
}

body[data-route="watch"] .watch-controls-left,
body[data-route="watch"] .watch-controls-right {
  gap:2px;
}

body[data-route="watch"] .watch-player.controls-hidden {
  cursor:none;
}

body[data-route="watch"] .watch-player.controls-hidden::after,
body[data-route="watch"] .watch-player.controls-hidden .watch-controls {
  opacity:0;
}

body[data-route="watch"] .watch-player.controls-hidden .watch-controls {
  transform:translateY(7px);
  pointer-events:none;
}

body[data-route="watch"] .watch-control {
  position:relative;
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  color:#fff;
  border-radius:3px;
  background:transparent;
  font-size:17px;
  line-height:1;
  text-shadow:0 1px 4px rgba(0,0,0,.75);
  transition:background .14s ease,opacity .14s ease;
}

body[data-route="watch"] .watch-control:hover,
body[data-route="watch"] .watch-control:focus-visible,
body[data-route="watch"] .watch-control.active {
  color:#fff;
  background:rgba(255,255,255,.13);
  transform:none;
}

body[data-route="watch"] .watch-captions-toggle.active::after {
  content:"";
  position:absolute;
  right:7px;
  bottom:5px;
  left:7px;
  height:2px;
  background:#ff0033;
}

body[data-route="watch"] .watch-control:focus-visible,
body[data-route="watch"] .watch-big-play:focus-visible,
body[data-route="watch"] .watch-player-rates button:focus-visible {
  outline:2px solid var(--gold-bright);
  outline-offset:2px;
}

body[data-route="watch"] .watch-control.is-unavailable {
  opacity:.42;
}

body[data-route="watch"] .watch-time {
  flex:0 0 auto;
  min-width:94px;
  padding:0 4px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}

body[data-route="watch"] .watch-progress-wrap {
  position:absolute;
  z-index:2;
  top:4px;
  right:12px;
  left:12px;
  height:16px;
  display:flex;
  align-items:center;
  margin:0;
  cursor:pointer;
}

body[data-route="watch"] input.watch-progress {
  --watch-played:0%;
  --watch-buffered:0%;
  appearance:none;
  -webkit-appearance:none;
  flex:1 1 auto;
  width:100%;
  height:3px;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:999px;
  outline:0;
  cursor:pointer;
  background:linear-gradient(90deg,
    var(--gold-bright) 0 var(--watch-played),
    rgba(255,255,255,.52) var(--watch-played) var(--watch-buffered),
    rgba(255,255,255,.28) var(--watch-buffered) 100%);
  transition:height .12s ease;
}

body[data-route="watch"] .watch-progress-wrap:hover input.watch-progress,
body[data-route="watch"] input.watch-progress:focus-visible,
body[data-route="watch"] input.watch-progress:active {
  height:5px;
}

body[data-route="watch"] input.watch-progress::-webkit-slider-runnable-track {
  height:5px;
  border-radius:999px;
  background:transparent;
}

body[data-route="watch"] input.watch-progress::-moz-range-track {
  height:5px;
  border-radius:999px;
  background:transparent;
}

body[data-route="watch"] input.watch-progress::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:13px;
  height:13px;
  margin-top:-4px;
  border:0;
  border-radius:50%;
  background:var(--gold-bright);
  box-shadow:0 2px 7px rgba(0,0,0,.45);
  opacity:0;
  transform:scale(.75);
  transition:opacity .14s ease,transform .14s ease;
}

body[data-route="watch"] input.watch-progress::-moz-range-thumb {
  width:11px;
  height:11px;
  border:0;
  border-radius:50%;
  background:var(--gold-bright);
  box-shadow:0 2px 7px rgba(0,0,0,.45);
  opacity:0;
}

body[data-route="watch"] .watch-progress-wrap:hover input.watch-progress::-webkit-slider-thumb,
body[data-route="watch"] input.watch-progress:focus-visible::-webkit-slider-thumb,
body[data-route="watch"] input.watch-progress:active::-webkit-slider-thumb {
  opacity:1;
  transform:scale(1);
}

body[data-route="watch"] .watch-progress-wrap:hover input.watch-progress::-moz-range-thumb,
body[data-route="watch"] input.watch-progress:focus-visible::-moz-range-thumb,
body[data-route="watch"] input.watch-progress:active::-moz-range-thumb {
  opacity:1;
}

body[data-route="watch"] input.watch-progress:focus-visible {
  box-shadow:0 0 0 3px rgba(238,186,69,.34);
}

body[data-route="watch"] .watch-volume-group {
  min-width:38px;
  gap:0;
}

body[data-route="watch"] .watch-volume-panel {
  width:126px;
  min-height:32px;
  gap:8px;
  padding:5px 9px 5px 5px;
  color:#fff;
  background:rgba(20,20,20,.88);
  border-radius:999px;
}

body[data-route="watch"] .watch-volume-panel[hidden] {
  display:none;
}

body[data-route="watch"] .watch-volume-panel:not([hidden]) {
  animation:watch-volume-panel-in .14s ease-out both;
}

@keyframes watch-volume-panel-in {
  from { opacity:0; transform:translateX(-4px); }
  to { opacity:1; transform:translateX(0); }
}

body[data-route="watch"] input.watch-volume-slider {
  --watch-volume:100%;
  appearance:none;
  -webkit-appearance:none;
  width:72px;
  height:3px;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  outline:0;
  cursor:pointer;
  background:linear-gradient(90deg,#fff 0 var(--watch-volume),rgba(255,255,255,.35) var(--watch-volume) 100%);
}

body[data-route="watch"] input.watch-volume-slider::-webkit-slider-runnable-track {
  height:3px;
  background:transparent;
}

body[data-route="watch"] input.watch-volume-slider::-moz-range-track {
  height:3px;
  background:transparent;
}

body[data-route="watch"] input.watch-volume-slider::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:12px;
  height:12px;
  margin-top:-4.5px;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.5);
}

body[data-route="watch"] input.watch-volume-slider::-moz-range-thumb {
  width:12px;
  height:12px;
  border:0;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.5);
}

body[data-route="watch"] input.watch-volume-slider:focus-visible {
  box-shadow:0 0 0 2px rgba(255,255,255,.55);
}

body[data-route="watch"] .watch-volume-output {
  min-width:31px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-4px);
  color:rgba(255,255,255,.86);
  font-size:9px;
  font-weight:800;
  line-height:1;
  text-align:center;
}

body[data-route="watch"] .watch-audio-notice {
  position:absolute;
  z-index:9;
  left:14px;
  bottom:70px;
  max-width:min(390px,calc(100% - 28px));
  padding:10px 13px;
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:#fff;
  background:rgba(15,15,15,.94);
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.42);
  font-size:11px;
  font-weight:650;
  line-height:1.42;
  backdrop-filter:blur(12px);
}

body[data-route="watch"] .watch-audio-notice[hidden] {
  display:none;
}

body[data-route="watch"] .watch-audio-notice i {
  margin-top:2px;
  color:#ff0033;
}

body[data-route="watch"] .watch-player-settings {
  position:absolute;
  z-index:8;
  right:48px;
  bottom:62px;
  width:255px;
  max-height:min(370px,calc(100% - 62px));
  padding:0;
  overflow:hidden;
  color:#fff;
  background:rgba(12,12,12,.92);
  border:1px solid rgba(255,255,255,.14);
  border-radius:13px;
  box-shadow:0 16px 36px rgba(0,0,0,.38);
  backdrop-filter:blur(14px);
}

body[data-route="watch"] .watch-player-settings[hidden] {
  display:none;
}

body[data-route="watch"] .watch-settings-panel {
  max-height:min(370px,calc(100% - 2px));
  padding:10px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.52) transparent;
}

body[data-route="watch"] .watch-settings-panel::-webkit-scrollbar {
  width:6px;
}

body[data-route="watch"] .watch-settings-panel::-webkit-scrollbar-thumb {
  background:rgba(255,255,255,.5);
  border-radius:999px;
}

body[data-route="watch"] .watch-settings-panel[hidden] {
  display:none;
}

body[data-route="watch"] .watch-settings-title {
  display:block;
  margin:0;
  padding:5px 8px 9px;
  font-size:12px;
  letter-spacing:.02em;
}

body[data-route="watch"] .watch-settings-row {
  width:100%;
  min-height:43px;
  padding:0 8px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 10px;
  align-items:center;
  gap:8px;
  color:#fff;
  border-radius:9px;
  text-align:left;
  transition:background .16s ease,color .16s ease;
}

body[data-route="watch"] .watch-settings-row:hover,
body[data-route="watch"] .watch-settings-row:focus-visible {
  color:var(--gold-bright);
  background:rgba(255,255,255,.09);
}

body[data-route="watch"] .watch-settings-row > span {
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:11px;
  font-weight:750;
}

body[data-route="watch"] .watch-settings-row > span > i {
  width:16px;
  text-align:center;
  color:var(--gold-bright);
}

body[data-route="watch"] .watch-settings-row > em {
  max-width:105px;
  overflow:hidden;
  color:rgba(255,255,255,.64);
  font-size:9.5px;
  font-style:normal;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body[data-route="watch"] .watch-settings-row > i:last-child {
  color:rgba(255,255,255,.5);
  font-size:9px;
}

body[data-route="watch"] .watch-settings-back {
  position:sticky;
  z-index:2;
  top:-10px;
  width:100%;
  min-height:45px;
  padding:0 8px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  background:rgba(12,12,12,.96);
  border-bottom:1px solid rgba(255,255,255,.13);
  font-size:11px;
  font-weight:800;
  text-align:left;
}

body[data-route="watch"] .watch-settings-back:hover,
body[data-route="watch"] .watch-settings-back:focus-visible {
  color:var(--gold-bright);
}

body[data-route="watch"] .watch-quality-note {
  display:block;
  padding:10px 8px 6px;
  color:rgba(255,255,255,.52);
  font-size:8.5px;
  line-height:1.45;
}

body[data-route="watch"] .watch-player-options {
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-top:5px;
}

body[data-route="watch"] .watch-player-options button {
  width:100%;
  min-height:39px;
  padding:0 9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:rgba(255,255,255,.78);
  background:transparent;
  border:1px solid transparent;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  text-align:left;
}

body[data-route="watch"] .watch-player-options button span small {
  margin-left:3px;
  color:rgba(255,255,255,.5);
  font-size:7.5px;
  font-weight:800;
  vertical-align:top;
}

body[data-route="watch"] .watch-player-options button > i {
  color:var(--gold-bright);
  font-size:10px;
  opacity:0;
}

body[data-route="watch"] .watch-player-options button:hover,
body[data-route="watch"] .watch-player-options button:focus-visible {
  color:#fff;
  background:rgba(255,255,255,.09);
}

body[data-route="watch"] .watch-player-options button.active {
  color:var(--gold-bright);
  background:rgba(238,186,69,.11);
  border-color:rgba(238,186,69,.17);
}

body[data-route="watch"] .watch-player-options button.active > i {
  opacity:1;
}

body[data-route="watch"] .watch-player-message {
  position:absolute;
  z-index:9;
  inset:0;
  padding:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#fff;
  text-align:center;
  background:rgba(5,5,5,.88);
}

body[data-route="watch"] .watch-player-message[hidden] {
  display:none;
}

body[data-route="watch"] .watch-player-message > i {
  margin-bottom:3px;
  color:var(--gold-bright);
  font-size:30px;
}

body[data-route="watch"] .watch-player-message strong {
  font-size:16px;
}

body[data-route="watch"] .watch-player-message span {
  max-width:460px;
  color:rgba(255,255,255,.72);
  font-size:12px;
}

body[data-route="watch"] .watch-player-message a {
  margin-top:7px;
  padding:9px 14px;
  color:#241704;
  background:var(--gold-bright);
  border-radius:9px;
  font-size:11px;
  font-weight:800;
}

body.watch-player-fullscreen-open {
  overflow:hidden !important;
}

body[data-route="watch"] .watch-player:fullscreen,
body[data-route="watch"] .watch-player:-webkit-full-screen,
body[data-route="watch"] .watch-player.is-visual-fullscreen {
  position:fixed !important;
  z-index:999999 !important;
  inset:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  border:0 !important;
  border-radius:0 !important;
  background:#000 !important;
}

body[data-route="watch"] .watch-player:fullscreen .watch-controls,
body[data-route="watch"] .watch-player:-webkit-full-screen .watch-controls,
body[data-route="watch"] .watch-player.is-visual-fullscreen .watch-controls {
  inset:auto 0 0;
  padding-right:max(24px,env(safe-area-inset-right));
  padding-bottom:max(14px,env(safe-area-inset-bottom));
  padding-left:max(24px,env(safe-area-inset-left));
}

@media (max-width:767.98px) {
  body[data-route="watch"] .watch-player[data-shineup-player="true"] .watch-controls {
    inset:auto 0 0;
    min-height:54px;
    padding:12px 7px 4px;
  }

  body[data-route="watch"] .watch-player[data-shineup-player="true"] .watch-big-play {
    width:58px;
    height:58px;
    font-size:19px;
  }

  body[data-route="watch"] .watch-control {
    flex-basis:32px;
    width:32px;
    height:32px;
    font-size:14px;
  }

  body[data-route="watch"] .watch-time {
    min-width:74px;
    padding-inline:2px;
    font-size:10px;
  }

  body[data-route="watch"] .watch-progress-wrap {
    top:2px;
    right:7px;
    left:7px;
  }

  body[data-route="watch"] .watch-volume-group {
    min-width:32px;
  }

  body[data-route="watch"] .watch-volume-panel {
    width:92px;
    gap:4px;
    padding:5px 7px 5px 3px;
  }

  body[data-route="watch"] input.watch-volume-slider {
    width:66px;
  }

  body[data-route="watch"] .watch-volume-output {
    display:none;
  }

  body[data-route="watch"] .watch-audio-notice {
    left:8px;
    bottom:59px;
    max-width:calc(100% - 16px);
    padding:9px 11px;
    font-size:10px;
  }

  body[data-route="watch"] .watch-player-settings {
    left:8px;
    right:8px;
    bottom:8px;
    width:auto;
    max-height:calc(100% - 16px);
    border-radius:11px;
  }

  body[data-route="watch"] .watch-settings-panel {
    max-height:calc(100% - 2px);
    padding:8px;
    scrollbar-gutter:stable;
  }

  body[data-route="watch"] .watch-settings-back {
    top:-8px;
    min-height:36px;
    padding-inline:7px;
    gap:9px;
    font-size:10px;
  }

  body[data-route="watch"] .watch-quality-note {
    padding:6px 7px 3px;
    overflow:hidden;
    font-size:7.5px;
    line-height:1.35;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body[data-route="watch"] .watch-player-settings[data-active-panel="rate"] .watch-player-options,
  body[data-route="watch"] .watch-player-settings[data-active-panel="quality"] .watch-player-options {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:4px;
    padding-top:4px;
  }

  body[data-route="watch"] .watch-player-settings[data-active-panel="rate"] .watch-player-options button,
  body[data-route="watch"] .watch-player-settings[data-active-panel="quality"] .watch-player-options button {
    min-height:31px;
    padding:0 8px;
    border-radius:7px;
    font-size:10px;
  }

  body[data-route="watch"] .watch-player-settings[data-active-panel="rate"] .watch-player-options button > i,
  body[data-route="watch"] .watch-player-settings[data-active-panel="quality"] .watch-player-options button > i {
    font-size:9px;
  }
}

@media (max-width:399.98px) {
  body[data-route="watch"] .watch-control {
    flex-basis:29px;
    width:29px;
    height:29px;
    font-size:13px;
  }

  body[data-route="watch"] .watch-time {
    min-width:65px;
    font-size:9px;
  }

  body[data-route="watch"] .watch-controls-left,
  body[data-route="watch"] .watch-controls-right {
    gap:0;
  }

  body[data-route="watch"] .watch-volume-panel {
    position:absolute;
    bottom:35px;
    left:34px;
    width:96px;
    box-shadow:0 8px 24px rgba(0,0,0,.4);
  }
}

@media (prefers-reduced-motion:reduce) {
  body[data-route="watch"] .watch-player-poster,
  body[data-route="watch"] .watch-player[data-shineup-player="true"]::after,
  body[data-route="watch"] .watch-player[data-shineup-player="true"] .watch-big-play,
  body[data-route="watch"] .watch-player[data-shineup-player="true"] .watch-controls {
    transition:none;
  }
}

/* Formularz kontaktowy na telefonie zachowuje typografię reszty aplikacji. */
@media (max-width:767.98px) {
  body[data-route="contact"] .contact-card {
    padding:24px 20px;
  }

  body[data-route="contact"] .field-row {
    margin-bottom:18px;
  }

  body[data-route="contact"] .field-row label {
    margin-bottom:8px;
    font-size:12px;
    line-height:1.35;
  }

  body[data-route="contact"] .field {
    min-height:50px;
    padding-inline:14px;
    font-size:14px;
    line-height:1.45;
  }

  body[data-route="contact"] textarea.field {
    min-height:168px !important;
    padding:14px !important;
  }

  body[data-route="contact"] .form-check-row {
    gap:10px;
    font-size:12.5px;
    line-height:1.5;
  }

  body[data-route="contact"] .form-check-row input {
    width:18px;
    height:18px;
    flex:0 0 18px;
    margin-top:1px;
  }

  body[data-route="contact"] .contact-send {
    min-height:48px;
    gap:8px;
    font-size:13px;
  }
}
/* Mobile comment panels: keep the composer above the on-screen keyboard. */
@media (max-width: 767px) {
  html.su-comment-keyboard-open .app-modal.open {
    inset: var(--su-visual-viewport-top, 0px) 0 auto;
    width: 100%;
    height: var(--su-visual-viewport-height, 100dvh);
    min-height: 0;
  }

  html.su-comment-keyboard-open .app-modal.open .comments-panel {
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    transform: none;
  }

html.su-comment-keyboard-open .app-modal.open .comments-panel .modal-comments {
    min-height: 0;
    overscroll-behavior: contain;
  }

  html.su-comment-keyboard-open .app-modal.open .comments-panel .comment-composer {
    position: relative;
    z-index: 2;
  }
}

/* Bazodanowy moduł oglądania filmu. */
body[data-route="watch"] .watch-main,
body[data-route="watch"] .watch-next,
body[data-route="watch"] .watch-next-list { min-width:0; }
body[data-route="watch"] .watch-channel a,
body[data-route="watch"] .watch-next-card,
body[data-route="watch"] .full-comment-bubble a,
body[data-route="watch"] .connection-person a { color:inherit; text-decoration:none; }
body[data-route="watch"] .watch-next-list { display:grid; gap:11px; }
body[data-route="watch"] .watch-next-card { width:100%; color:var(--text); }
body[data-route="watch"] .watch-next-card .yt-thumb { min-width:0; aspect-ratio:16/9; overflow:hidden; border-radius:10px; background:#111; }
body[data-route="watch"] .watch-next-card .yt-thumb img { width:100%; height:100%; border-radius:inherit; }
body[data-route="watch"] .watch-next-more { min-height:38px; justify-self:start; padding:0 12px; border:1px solid var(--line); border-radius:10px; }
body[data-route="watch"] .watch-next-empty { padding:20px 12px; color:var(--text-faint); text-align:center; font-size:12px; }

body[data-route="watch"] .watch-description { padding:12px 14px; line-height:1.5; }
body[data-route="watch"] .watch-description > strong { display:block; margin-bottom:4px; color:var(--text); line-height:1.35; }
body[data-route="watch"] .watch-description-copy { max-height:3em; overflow:hidden; overflow-wrap:anywhere; line-height:1.5; }
body[data-route="watch"] .watch-description-copy p { margin:0 0 .42em; }
body[data-route="watch"] .watch-description-copy p:last-child { margin-bottom:0; }
body[data-route="watch"] .watch-description-copy .watch-description-section-title { margin:.25em 0 .35em; color:var(--text); font-weight:800; }
body[data-route="watch"] .watch-description.expanded .watch-description-copy { max-height:none; overflow:visible; }
body[data-route="watch"] .watch-description-copy a { color:var(--gold-deep); text-decoration:underline; text-underline-offset:2px; }
body[data-route="watch"] .watch-description [data-watch-description-toggle] { min-height:28px; margin-top:3px; padding:0; color:var(--gold-deep); font-weight:800; }

body[data-route="watch"] .watch-channel .premium-btn {
  min-width:118px;
  min-height:42px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap:7px;
  line-height:1;
  white-space:nowrap;
}
body[data-route="watch"] .watch-channel .premium-btn i { flex:0 0 auto; line-height:1; }
body[data-route="watch"] .watch-channel .premium-btn span { display:inline; margin:0; color:inherit; font-size:inherit; line-height:1; }
body[data-route="watch"] .watch-channel .premium-btn.following,
body[data-route="watch"] .watch-channel .premium-btn.active {
  color:var(--gold-deep);
  background:var(--gold-wash);
  border-color:var(--gold);
  box-shadow:none;
}
body[data-route="watch"] .watch-channel .premium-btn.following:hover,
body[data-route="watch"] .watch-channel .premium-btn.active:hover { color:var(--text); background:color-mix(in srgb,var(--gold) 18%,var(--surface-solid)); }

body[data-route="watch"] .watch-youtube-card {
  margin-top:13px;
  overflow:hidden;
  color:var(--text);
  background:linear-gradient(145deg,var(--surface-solid),color-mix(in srgb,var(--gold) 5%,var(--surface-solid)));
  border:1px solid var(--line-strong);
  border-radius:17px;
  box-shadow:var(--shadow);
}
body[data-route="watch"] .watch-youtube-card.no-banner { border-top:3px solid var(--gold); }
body[data-route="watch"] .watch-youtube-banner { height:138px; position:relative; display:block; overflow:hidden; background:var(--surface-2); }
body[data-route="watch"] .watch-youtube-banner::after { content:""; position:absolute; inset:40% 0 0; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--surface-solid) 58%,transparent)); pointer-events:none; }
body[data-route="watch"] .watch-youtube-banner img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; transition:transform .25s ease; }
body[data-route="watch"] .watch-youtube-banner:hover img { transform:scale(1.015); }
body[data-route="watch"] .watch-youtube-body { padding:15px 17px 17px; display:grid; grid-template-columns:68px minmax(0,1fr); gap:14px; align-items:start; }
body[data-route="watch"] .watch-youtube-card:not(.no-banner) .watch-youtube-body { padding-top:0; }
body[data-route="watch"] .watch-youtube-avatar { width:68px; height:68px; margin-top:-20px; position:relative; z-index:1; display:block; overflow:hidden; background:var(--surface-solid); border:3px solid var(--surface-solid); border-radius:50%; box-shadow:0 0 0 2px var(--gold),0 10px 24px rgba(27,20,10,.18); }
body[data-route="watch"] .watch-youtube-card.no-banner .watch-youtube-avatar { margin-top:0; }
body[data-route="watch"] .watch-youtube-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
body[data-route="watch"] .watch-youtube-content { min-width:0; }
body[data-route="watch"] .watch-youtube-heading { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:14px; }
body[data-route="watch"] .watch-youtube-card:not(.no-banner) .watch-youtube-heading { padding-top:10px; }
body[data-route="watch"] .watch-youtube-identity { min-width:0; }
body[data-route="watch"] .watch-youtube-identity > a { max-width:100%; display:block; overflow:hidden; color:var(--text); font-size:16px; font-weight:850; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
body[data-route="watch"] .watch-youtube-identity > span { margin-top:4px; display:flex; align-items:center; gap:6px; color:var(--text-soft); font-size:10.5px; font-weight:750; }
body[data-route="watch"] .watch-youtube-identity .fa-youtube { color:#f20d2f; font-size:14px; }
body[data-route="watch"] .watch-youtube-subscribe { min-height:39px; padding:0 16px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; color:#211507; background:linear-gradient(135deg,var(--gold-bright),var(--gold)); border:1px solid color-mix(in srgb,var(--gold-deep) 45%,var(--gold)); border-radius:999px; box-shadow:0 8px 20px color-mix(in srgb,var(--gold) 25%,transparent); font-size:10.5px; font-weight:850; }
body[data-route="watch"] .watch-youtube-subscribe:hover { color:#211507; filter:brightness(1.04); transform:translateY(-1px); }
body[data-route="watch"] .watch-youtube-stats { margin-top:10px; display:flex; flex-wrap:wrap; gap:5px 14px; color:var(--text-soft); font-size:10.5px; line-height:1.4; }
body[data-route="watch"] .watch-youtube-stats span { position:relative; }
body[data-route="watch"] .watch-youtube-stats span + span::before { content:""; width:3px; height:3px; position:absolute; top:50%; left:-8px; background:var(--gold); border-radius:50%; transform:translateY(-50%); }
body[data-route="watch"] .watch-youtube-stats b { color:var(--gold-deep); font-weight:850; }
body[data-route="watch"] .watch-youtube-content > p { margin:10px 0 0; color:var(--text-soft); font-size:11.5px; line-height:1.58; }
html[data-theme="dark"] body[data-route="watch"] .watch-youtube-card { background:linear-gradient(145deg,color-mix(in srgb,var(--surface-solid) 93%,#000),color-mix(in srgb,var(--gold) 7%,var(--surface-solid))); border-color:color-mix(in srgb,var(--gold) 38%,var(--line)); }
html[data-theme="dark"] body[data-route="watch"] .watch-youtube-stats b { color:var(--gold-bright); }

body[data-route="watch"] .comments-panel { height:100dvh; min-height:0; grid-template-rows:auto auto minmax(0,1fr) auto auto; }
body[data-route="watch"] .comments-panel > header { grid-row:1; }
body[data-route="watch"] .comments-panel > .watch-modal-notice { grid-row:2; }
body[data-route="watch"] .comments-panel > .modal-comments { grid-row:3; min-height:0; }
body[data-route="watch"] .comments-panel > .watch-modal-more { grid-row:4; }
body[data-route="watch"] .comments-panel > .comment-composer,
body[data-route="watch"] .comments-panel > .watch-modal-login { grid-row:5; align-self:end; width:100%; }
body[data-route="watch"] .watch-modal-notice { margin:10px 14px 0; padding:10px 12px; color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--surface-2)); border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line)); border-radius:11px; font-size:11px; line-height:1.45; }
body[data-route="watch"] .watch-modal-more { min-height:38px; margin:0 14px 10px; color:var(--gold-deep); border:1px solid var(--line); border-radius:10px; font-size:11px; font-weight:800; }
body[data-route="watch"] .watch-modal-login { padding:13px; border-top:1px solid var(--line); background:var(--surface); }
body[data-route="watch"] .watch-modal-login .premium-btn { width:100%; min-height:42px; display:flex; align-items:center; justify-content:center; }
body[data-route="watch"] .watch-share-dialog { width:min(560px,calc(100vw - 32px)); height:auto; grid-template-rows:auto auto; }
body[data-route="watch"] .watch-share-body { padding:18px; }
body[data-route="watch"] .watch-share-body > label { display:block; margin-bottom:8px; color:var(--text-soft); font-size:11px; font-weight:800; }
body[data-route="watch"] .watch-share-copy-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:center; }
body[data-route="watch"] .watch-share-copy-row input { width:100%; min-width:0; height:46px; padding:0 13px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:12px; outline:0; font:650 12px/1.2 var(--font-body); }
body[data-route="watch"] .watch-share-copy-row input:focus { border-color:var(--gold-deep); box-shadow:0 0 0 3px var(--gold-wash); }
body[data-route="watch"] .watch-share-copy-row .premium-btn { min-width:112px; min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
body[data-route="watch"] .watch-share-status { min-height:18px; margin:7px 0 0; color:var(--success); font-size:10.5px; font-weight:750; }
body[data-route="watch"] .watch-modal-empty { padding:34px 14px; color:var(--text-faint); text-align:center; font-size:12px; }
body[data-route="watch"] .watch-modal-loading { min-height:76px; display:flex; align-items:center; justify-content:center; gap:6px; }
body[data-route="watch"] .watch-modal-loading span { width:7px; height:7px; background:var(--gold-deep); border-radius:50%; animation:watch-data-loading .9s ease-in-out infinite; }
body[data-route="watch"] .watch-modal-loading span:nth-child(2) { animation-delay:.12s; }
body[data-route="watch"] .watch-modal-loading span:nth-child(3) { animation-delay:.24s; }
@keyframes watch-data-loading { 0%,60%,100% { opacity:.3; transform:translateY(0); } 30% { opacity:1; transform:translateY(-4px); } }
body[data-route="watch"] .comment-tools button { color:inherit; font:inherit; font-weight:800; }
body[data-route="watch"] .comment-tools button:hover { color:var(--gold-deep); }
body[data-route="watch"] .comment-composer button:disabled,
body[data-route="watch"] [data-watch-like]:disabled,
[data-profile-follow]:disabled { opacity:.55; cursor:wait; }
body[data-route="watch"] .feed-likes-modal .profile-connections-dialog { grid-template-rows:auto auto minmax(0,1fr) auto; }
body[data-route="watch"] .feed-likes-list .connection-person > a { width:50px; height:50px; display:block; }
body[data-route="watch"] .feed-likes-list .connection-person > a img { width:100%; height:100%; object-fit:cover; border:1px solid var(--line); border-radius:50%; }

body[data-route="watch"] .watch-report-dialog { height:auto; max-height:min(650px,78dvh); grid-template-rows:auto minmax(0,1fr); }
body[data-route="watch"] .watch-report-form { min-height:0; padding:18px; display:grid; gap:13px; overflow-y:auto; }
body[data-route="watch"] .watch-report-form label { display:grid; gap:6px; color:var(--text-soft); font-size:11px; font-weight:800; }
body[data-route="watch"] .watch-report-form input,
body[data-route="watch"] .watch-report-form textarea { width:100%; padding:11px 12px; resize:vertical; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:11px; outline:0; font:600 12px/1.5 var(--font-body); }
body[data-route="watch"] .watch-report-form input:focus,
body[data-route="watch"] .watch-report-form textarea:focus { border-color:var(--gold-deep); box-shadow:0 0 0 3px var(--gold-wash); }
body[data-route="watch"] .watch-report-form .premium-btn { min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; }
body[data-route="watch"] .watch-report-message { margin:0; padding:10px 12px; color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--surface-2)); border-radius:10px; font-size:11px; }
body[data-route="watch"] .watch-report-message.success { color:var(--success); background:color-mix(in srgb,var(--success) 9%,var(--surface-2)); }
body.watch-modal-open { overflow:hidden; }

@media (max-width:700px) {
  body[data-page="video-listing"] .page-intro {
    min-height:0;
    margin:0;
    padding:7px 14px 9px;
    display:block;
    background:var(--bg);
  }
  body[data-page="video-listing"] .page-intro .eyebrow {
    font-size:8.5px;
    letter-spacing:.15em;
  }
  body[data-page="video-listing"] .page-intro h1 {
    max-width:none;
    margin-top:4px;
    font-size:25px;
    line-height:1.08;
    letter-spacing:-.035em;
  }
  body[data-page="video-listing"] .page-intro .page-actions {
    display:none;
  }
  body[data-route="videos"] .yt-shorts-grid > :nth-child(n + 3) {
    display:none;
  }
  body[data-route="watch"] .watch-title { margin:17px 15px 12px; }
  body[data-route="watch"] .watch-action-row.content-action-row { margin:0 15px; padding:0 0 15px; gap:15px; }
  body[data-route="watch"] .watch-action-row .content-action-button > i { font-size:21px; }
  body[data-route="watch"] .watch-action-row .content-action-button,
  body[data-route="watch"] .watch-action-row .content-action-count { font-size:12px; }
  body[data-route="watch"] .watch-action-row .content-action-button.comment-open { gap:8px; }
  body[data-route="watch"] [data-watch-like-summary-slot] { margin:0 15px; }
  body[data-route="watch"] .watch-like.active,
  body[data-route="watch"] .watch-like.active:hover { color:var(--danger); background:transparent; border:0; box-shadow:none; }
  body[data-route="watch"] .watch-channel { margin:0; padding:15px; }
  body[data-route="watch"] .watch-description { margin:12px; padding:15px; font-size:13.5px; line-height:1.55; }
  body[data-route="watch"] .comments-panel { height:min(82dvh,720px); }
  body[data-route="watch"] .watch-share-modal .watch-share-dialog { width:100%; height:auto; }
  body[data-route="watch"] .watch-share-copy-row { grid-template-columns:minmax(0,1fr); }
  body[data-route="watch"] .watch-share-copy-row .premium-btn { width:100%; }
  body[data-route="watch"] .watch-youtube-card { margin:0 12px 14px; border-radius:16px; box-shadow:0 11px 26px rgba(27,20,10,.11); }
  body[data-route="watch"] .watch-youtube-banner { height:104px; }
  body[data-route="watch"] .watch-youtube-body { padding:12px 13px 14px; grid-template-columns:56px minmax(0,1fr); gap:11px; }
  body[data-route="watch"] .watch-youtube-card:not(.no-banner) .watch-youtube-body { padding-top:0; }
  body[data-route="watch"] .watch-youtube-avatar { width:56px; height:56px; margin-top:-16px; border-width:2px; }
  body[data-route="watch"] .watch-youtube-card:not(.no-banner) .watch-youtube-heading { padding-top:8px; }
  body[data-route="watch"] .watch-youtube-heading { align-items:flex-start; gap:8px; }
  body[data-route="watch"] .watch-youtube-identity > a { font-size:13.5px; }
  body[data-route="watch"] .watch-youtube-identity > span { margin-top:3px; font-size:9px; }
  body[data-route="watch"] .watch-youtube-identity .fa-youtube { font-size:12px; }
  body[data-route="watch"] .watch-youtube-subscribe { min-height:34px; padding:0 11px; font-size:9px; }
  body[data-route="watch"] .watch-youtube-stats { margin-top:8px; gap:4px 12px; font-size:9px; }
  body[data-route="watch"] .watch-youtube-stats span + span::before { left:-7px; }
  body[data-route="watch"] .watch-youtube-content > p { margin-top:8px; font-size:10.5px; line-height:1.5; }
  body[data-route="watch"] .watch-next-list { gap:13px; }
  body[data-route="watch"] .watch-next-more { width:100%; justify-self:stretch; }
  body[data-route="watch"] .feed-likes-list .connection-person > a { width:48px; height:48px; }
  body[data-route="watch"] .watch-report-dialog { width:100%; max-height:82dvh; border-right:0; border-bottom:0; border-left:0; border-radius:22px 22px 0 0; }
}

@media (prefers-reduced-motion:reduce) {
  body[data-route="watch"] .watch-modal-loading span { animation:none; }
}

/* Live Shorts: uproszczony player (dźwięk, play/pauza i progres) oraz dane z AJAX. */
body[data-route="short"] .short-video-player.watch-player {
  position:absolute;
  z-index:auto;
  inset:0;
  width:100%;
  height:100%;
  aspect-ratio:auto;
  overflow:hidden;
  background:#050505;
  border:0;
  border-radius:inherit;
  box-shadow:none;
}

body[data-route="short"] .short-video-player.watch-player::after { display:none; }

body[data-route="short"] .short-video-player .watch-player-media,
body[data-route="short"] .short-video-player .watch-player-media iframe,
body[data-route="short"] .short-video-player .watch-youtube-host,
body[data-route="short"] .short-video-player .watch-player-poster,
body[data-route="short"] .short-video-player .watch-player-hitarea {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

body[data-route="short"] .short-video-player .watch-player-media { z-index:0; overflow:hidden; }
body[data-route="short"] .short-video-player .watch-player-media iframe,
body[data-route="short"] .short-video-player .watch-youtube-host { display:block; border:0; }
body[data-route="short"] .short-video-player .watch-player-poster {
  z-index:1;
  background:#111 center/cover no-repeat;
  opacity:1;
  visibility:visible;
  transition:opacity .24s ease,visibility .24s ease;
}
body[data-route="short"] .short-video-player.has-started .watch-player-poster { opacity:0; visibility:hidden; }
body[data-route="short"] .short-video-player .watch-player-hitarea { z-index:3; cursor:pointer; }

body[data-route="short"] .short-video-player .watch-player-loader {
  position:absolute;
  z-index:7;
  left:50%;
  top:50%;
  width:42px;
  height:42px;
  display:none;
  place-items:center;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
body[data-route="short"] .short-video-player.is-loading .watch-player-loader { display:grid; }
body[data-route="short"] .short-video-player .watch-player-loader span {
  width:28px;
  height:28px;
  border:3px solid rgba(255,255,255,.28);
  border-top-color:var(--gold-bright);
  border-radius:50%;
  animation:short-player-spin .8s linear infinite;
}
@keyframes short-player-spin { to { transform:rotate(360deg); } }

body[data-route="short"] .short-video-player .watch-big-play {
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  color:#241704;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
  font-size:19px;
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease;
}
body[data-route="short"] .short-video-player.is-playing .watch-big-play { opacity:0; visibility:hidden; pointer-events:none; }
body[data-route="short"] .short-video-player.is-loading .watch-big-play { opacity:0; visibility:hidden; }

body[data-route="short"] .short-video-player .watch-controls {
  position:absolute;
  z-index:6;
  inset:auto 0 0;
  width:100%;
  height:12px;
  padding:0;
  display:block;
  color:#fff;
  background:transparent;
  opacity:1 !important;
  transform:none !important;
  pointer-events:none;
}
body[data-route="short"] .short-video-player .watch-controls-row,
body[data-route="short"] .short-video-player .watch-player-settings,
body[data-route="short"] .short-video-player .watch-audio-notice,
body[data-route="short"] .short-video-player .watch-player-message { display:none !important; }
body[data-route="short"] .short-video-player .watch-progress-wrap {
  position:absolute;
  z-index:2;
  inset:auto 0 0;
  width:100%;
  height:12px;
  display:flex;
  align-items:flex-end;
  pointer-events:auto;
  cursor:pointer;
}
body[data-route="short"] .short-video-player input.watch-progress {
  --watch-played:0%;
  --watch-buffered:0%;
  width:100%;
  height:4px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  outline:0;
  cursor:pointer;
  background:linear-gradient(90deg,var(--gold-bright) 0 var(--watch-played),rgba(255,255,255,.48) var(--watch-played) var(--watch-buffered),rgba(255,255,255,.22) var(--watch-buffered) 100%);
}
body[data-route="short"] .short-video-player input.watch-progress::-webkit-slider-runnable-track { height:4px; background:transparent; }
body[data-route="short"] .short-video-player input.watch-progress::-moz-range-track { height:4px; background:transparent; }
body[data-route="short"] .short-video-player input.watch-progress::-webkit-slider-thumb {
  width:10px;
  height:10px;
  margin-top:-3px;
  appearance:none;
  -webkit-appearance:none;
  opacity:0;
  background:var(--gold-bright);
  border:0;
  border-radius:50%;
}
body[data-route="short"] .short-video-player input.watch-progress::-moz-range-thumb {
  width:10px;
  height:10px;
  opacity:0;
  background:var(--gold-bright);
  border:0;
  border-radius:50%;
}
body[data-route="short"] .short-video-player .watch-progress-wrap:hover input.watch-progress::-webkit-slider-thumb,
body[data-route="short"] .short-video-player input.watch-progress:focus-visible::-webkit-slider-thumb { opacity:1; }
body[data-route="short"] .short-video-player .watch-progress-wrap:hover input.watch-progress::-moz-range-thumb,
body[data-route="short"] .short-video-player input.watch-progress:focus-visible::-moz-range-thumb { opacity:1; }

body[data-route="short"] .short-player::after { z-index:1; pointer-events:none; }
body[data-route="short"] .short-top,
body[data-route="short"] .short-copy { z-index:4; }
body[data-route="short"] .short-copy { bottom:20px; }
body[data-route="short"] .short-top { justify-content:flex-start; pointer-events:none; }
body[data-route="short"] .short-top [data-short-sound] { pointer-events:auto; }
body[data-route="short"] .short-author a,
body[data-route="short"] .short-desktop-author a { color:inherit; text-decoration:none; }
body[data-route="short"] .short-desktop-meta button {
  padding:0;
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:inherit;
  font:inherit;
  font-weight:inherit;
}
body[data-route="short"] .short-desktop-meta button i { margin-right:0; }
body[data-route="short"] .short-author .outline-btn.following,
body[data-route="short"] .short-author .outline-btn.active {
  color:#211507;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold));
  border-color:var(--gold-bright);
}

body[data-route="short"] .short-ajax-loader {
  position:absolute;
  z-index:20;
  left:50%;
  bottom:14px;
  display:flex;
  gap:5px;
  transform:translateX(-50%);
  pointer-events:none;
}
body[data-route="short"] .short-ajax-loader[hidden] { display:none; }
body[data-route="short"] .short-ajax-loader span { width:6px; height:6px; background:var(--gold-deep); border-radius:50%; animation:watch-data-loading .9s ease-in-out infinite; }
body[data-route="short"] .short-ajax-loader span:nth-child(2) { animation-delay:.12s; }
body[data-route="short"] .short-ajax-loader span:nth-child(3) { animation-delay:.24s; }
body[data-route="short"] .short-ajax-status { position:absolute; z-index:20; left:50%; bottom:15px; max-width:320px; padding:8px 12px; transform:translateX(-50%); color:var(--text-soft); background:var(--surface-solid); border:1px solid var(--line); border-radius:999px; box-shadow:var(--shadow); font-size:10px; font-weight:750; text-align:center; }
body[data-route="short"] .short-ajax-status[hidden] { display:none; }

body[data-route="short"] .comments-panel { min-height:0; grid-template-rows:auto auto minmax(0,1fr) auto auto; }
body[data-route="short"] .comments-panel > header { grid-row:1; }
body[data-route="short"] .comments-panel > .watch-modal-notice { grid-row:2; }
body[data-route="short"] .comments-panel > .modal-comments { grid-row:3; min-height:0; }
body[data-route="short"] .comments-panel > .watch-modal-more { grid-row:4; }
body[data-route="short"] .comments-panel > .comment-composer,
body[data-route="short"] .comments-panel > .watch-modal-login { grid-row:5; align-self:end; width:100%; }
body[data-route="short"] .watch-modal-notice { margin:10px 14px 0; padding:10px 12px; color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--surface-2)); border:1px solid color-mix(in srgb,var(--danger) 28%,var(--line)); border-radius:11px; font-size:11px; line-height:1.45; }
body[data-route="short"] .watch-modal-more { min-height:38px; margin:0 14px 10px; color:var(--gold-deep); border:1px solid var(--line); border-radius:10px; font-size:11px; font-weight:800; }
body[data-route="short"] .watch-modal-login { padding:13px; border-top:1px solid var(--line); background:var(--surface); }
body[data-route="short"] .watch-modal-login .premium-btn { width:100%; min-height:42px; display:flex; align-items:center; justify-content:center; }
body[data-route="short"] .watch-modal-empty { padding:34px 14px; color:var(--text-faint); text-align:center; font-size:12px; }
body[data-route="short"] .watch-modal-loading { min-height:76px; display:flex; align-items:center; justify-content:center; gap:6px; }
body[data-route="short"] .watch-modal-loading span { width:7px; height:7px; background:var(--gold-deep); border-radius:50%; animation:watch-data-loading .9s ease-in-out infinite; }
body[data-route="short"] .watch-modal-loading span:nth-child(2) { animation-delay:.12s; }
body[data-route="short"] .watch-modal-loading span:nth-child(3) { animation-delay:.24s; }
body[data-route="short"] .comment-tools button { color:inherit; font:inherit; font-weight:800; }
body[data-route="short"] [data-watch-like]:disabled { opacity:.55; cursor:wait; }

body[data-route="short"] .watch-share-dialog { width:min(560px,calc(100vw - 32px)); height:auto; grid-template-rows:auto auto; }
body[data-route="short"] .watch-share-body { padding:18px; }
body[data-route="short"] .watch-share-body > label { display:block; margin-bottom:8px; color:var(--text-soft); font-size:11px; font-weight:800; }
body[data-route="short"] .watch-share-copy-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; align-items:center; }
body[data-route="short"] .watch-share-copy-row input { width:100%; min-width:0; height:46px; padding:0 13px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:12px; outline:0; font:650 12px/1.2 var(--font-body); }
body[data-route="short"] .watch-share-copy-row input:focus { border-color:var(--gold-deep); box-shadow:0 0 0 3px var(--gold-wash); }
body[data-route="short"] .watch-share-copy-row .premium-btn { min-width:112px; min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:7px; }
body[data-route="short"] .watch-share-status { min-height:18px; margin:7px 0 0; color:var(--success); font-size:10.5px; font-weight:750; }
body[data-route="short"] .watch-report-dialog { height:auto; max-height:min(650px,78dvh); grid-template-rows:auto minmax(0,1fr); }
body[data-route="short"] .watch-report-form { min-height:0; padding:18px; display:grid; gap:13px; overflow-y:auto; }
body[data-route="short"] .watch-report-form label { display:grid; gap:6px; color:var(--text-soft); font-size:11px; font-weight:800; }
body[data-route="short"] .watch-report-form input,
body[data-route="short"] .watch-report-form textarea { width:100%; padding:11px 12px; resize:vertical; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:11px; outline:0; font:600 12px/1.5 var(--font-body); }
body[data-route="short"] .watch-report-form .premium-btn { min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; }
body[data-route="short"] .watch-report-message { margin:0; padding:10px 12px; color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--surface-2)); border-radius:10px; font-size:11px; }
body[data-route="short"] .watch-report-message.success { color:var(--success); background:color-mix(in srgb,var(--success) 9%,var(--surface-2)); }
body[data-route="short"] .feed-likes-modal .profile-connections-dialog { grid-template-rows:auto minmax(0,1fr) auto; }
body[data-route="short"] .feed-likes-list .connection-person > a { width:50px; height:50px; display:block; }
body[data-route="short"] .feed-likes-list .connection-person > a img { width:100%; height:100%; object-fit:cover; border:1px solid var(--line); border-radius:50%; }

@media (max-width:700px) {
  body[data-route="short"] .short-video-player .watch-big-play { width:58px; height:58px; }
  body[data-route="short"] .watch-share-modal .watch-share-dialog { width:100%; height:auto; }
  body[data-route="short"] .watch-share-copy-row { grid-template-columns:minmax(0,1fr); }
  body[data-route="short"] .watch-share-copy-row .premium-btn { width:100%; }
  body[data-route="short"] .watch-report-dialog { width:100%; max-height:82dvh; border-right:0; border-bottom:0; border-left:0; border-radius:22px 22px 0 0; }
}

@media (prefers-reduced-motion:reduce) {
  body[data-route="short"] .short-video-player .watch-player-loader span,
  body[data-route="short"] .short-ajax-loader span,
  body[data-route="short"] .watch-modal-loading span { animation:none; }
}

.sidebar-foot .sidebar-pwa-install {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sidebar-foot .sidebar-pwa-install[hidden] {
  display: none !important;
}

/* User profile edit ----------------------------------------------------- */
body[data-page="user-profile-edit"] #viewRoot { width:min(100%,1120px); }
.profile-edit-page { width:100%; }
.profile-edit-page [data-photo-input] { display:none !important; }
.profile-edit-intro { min-height:0; margin-bottom:16px; padding:2px 0 0; align-items:center; }
.profile-edit-intro .eyebrow { font-size:9px; letter-spacing:.16em; }
.profile-edit-intro h1 { margin-top:3px; font-size:clamp(32px,2.7vw,37px); line-height:1; letter-spacing:-.025em; }
.profile-edit-intro p { max-width:540px; margin-top:6px; font-size:12px; line-height:1.45; }
.profile-edit-save-all { min-width:144px; min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.profile-edit-save-all.is-loading i,.profile-photo-button.is-loading i { animation:suProfileEditSpin .8s linear infinite; }
.profile-edit-save-all.is-loading i::before,.profile-photo-button.is-loading i::before { content:"\f110"; }
@keyframes suProfileEditSpin { to { transform:rotate(360deg); } }
.profile-edit-notice { margin:0 0 14px; padding:11px 14px; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:13px; font-size:12px; font-weight:700; }
.profile-edit-notice.is-success { color:var(--success); border-color:color-mix(in srgb,var(--success) 38%,var(--line)); background:color-mix(in srgb,var(--success) 8%,var(--surface)); }
.profile-edit-notice.is-error { color:var(--danger); border-color:color-mix(in srgb,var(--danger) 38%,var(--line)); background:color-mix(in srgb,var(--danger) 8%,var(--surface)); }
.profile-edit-notice.is-saving { color:var(--gold-deep); border-color:var(--line-strong); background:var(--gold-wash); }
.profile-edit-layout { align-items:start; }
.profile-edit-nav { position:sticky; top:calc(var(--topbar-h) + 18px); }
.profile-edit-workspace { min-width:0; display:grid; gap:18px; }
.profile-edit-preview { overflow:hidden; }
.profile-edit-cover { position:relative; min-height:180px; overflow:hidden; background:linear-gradient(125deg,var(--surface-3),var(--gold-wash) 60%,color-mix(in srgb,var(--gold) 26%,var(--surface-2))); }
.profile-edit-cover::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to top,rgba(14,10,5,.38),transparent 58%); }
.profile-edit-cover img { width:100%; height:100%; min-height:180px; position:absolute; inset:0; object-fit:cover; }
.profile-photo-actions { position:absolute; z-index:2; right:14px; bottom:13px; display:flex; align-items:center; gap:7px; }
.profile-photo-button,.profile-photo-remove,.profile-avatar-edit,.profile-avatar-remove { display:grid; place-items:center; color:#fff; background:rgba(15,12,8,.72); border:1px solid rgba(255,255,255,.22); box-shadow:0 5px 18px rgba(0,0,0,.18); backdrop-filter:blur(10px); }
.profile-photo-button { min-height:38px; padding:0 13px; grid-auto-flow:column; gap:8px; border-radius:11px; font-size:11px; font-weight:800; }
.profile-photo-remove { width:38px; height:38px; border-radius:11px; }
.profile-edit-preview-body { min-height:120px; padding:0 18px 18px 132px; position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:14px; }
.profile-edit-avatar-wrap { width:92px; height:92px; position:absolute; left:20px; top:-42px; z-index:3; }
.profile-edit-avatar { width:92px; height:92px; object-fit:cover; background:var(--surface-2); border:4px solid var(--surface); border-radius:50%; }
.profile-avatar-edit,.profile-avatar-remove { width:30px; height:30px; position:absolute; border-radius:50%; font-size:10px; }
.profile-avatar-edit { right:-2px; bottom:3px; color:#211507; background:var(--gold); border-color:var(--surface); }
.profile-avatar-remove { left:-2px; bottom:3px; }
.profile-edit-preview-copy { min-width:0; padding-top:15px; }
.profile-edit-preview-copy strong,.profile-edit-preview-copy span { display:block; }
.profile-edit-preview-copy strong { overflow:hidden; color:var(--text); font:800 20px/1.18 var(--font-display); text-overflow:ellipsis; white-space:nowrap; }
.profile-edit-preview-copy span { margin-top:3px; color:var(--text-faint); font-size:11px; }
.profile-edit-preview-copy p { max-width:620px; margin:9px 0 0; display:-webkit-box; overflow:hidden; color:var(--text-soft); font-size:11px; line-height:1.5; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.profile-edit-open-profile { min-height:38px; display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.profile-edit-panel { min-width:0; }
.profile-edit-section[hidden] { display:none !important; }
.profile-edit-section { animation:suProfileEditReveal .18s ease both; }
@keyframes suProfileEditReveal { from { opacity:.25; transform:translateY(4px); } }
.profile-edit-section-head { margin-bottom:20px; }
.profile-edit-section-head h2 { margin:2px 0 0; font:800 25px/1.05 var(--font-display); letter-spacing:-.02em; }
.profile-edit-section-head p { margin:7px 0 0; color:var(--text-faint); font-size:11px; }
.profile-edit-fields { align-items:start; }
.profile-edit-panel .field-row label { font-size:11px; text-transform:none; }
.profile-edit-panel .field { min-height:45px; height:45px; font-size:12px; }
.profile-edit-panel input.field[readonly] { color:var(--text-faint); cursor:not-allowed; opacity:.82; }
.profile-edit-panel select.field { padding-right:34px; }
.profile-edit-panel textarea.field { height:190px; min-height:150px; padding:13px 14px; resize:vertical; line-height:1.55; }
.profile-edit-date-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.profile-field-status { min-height:16px; margin-top:5px; display:block; color:var(--text-faint); font-size:10px; line-height:1.4; }
.profile-field-status.is-success { color:var(--success); }
.profile-field-status.is-error { color:var(--danger); }
.profile-field-status.is-saving { color:var(--gold-deep); }
.profile-field-bottom { margin-top:7px; display:flex; justify-content:space-between; gap:15px; color:var(--text-faint); }
.profile-field-bottom small { font-size:10px; }
.profile-edit-panel .field.is-saving { border-color:var(--gold); }
.profile-edit-panel .field.is-valid { border-color:color-mix(in srgb,var(--success) 58%,var(--line)); }
.profile-edit-panel .field.is-invalid { border-color:color-mix(in srgb,var(--danger) 62%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 8%,transparent); }
.profile-edit-choice { min-width:0; margin:2px 0 0; padding:14px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; }
.profile-edit-choice legend { width:auto; max-width:100%; float:none; grid-column:1/-1; margin:0 0 2px; padding:0 8px 0 0; color:var(--text-soft); border:0; font-size:11px; font-weight:800; line-height:1.25; }
.profile-edit-choice label { min-width:0; padding:11px 12px; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:11px; cursor:pointer; }
.profile-edit-choice label:has(input:checked) { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-wash); }
.profile-edit-choice input { accent-color:var(--gold-deep); }
.profile-edit-choice b,.profile-edit-choice small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-edit-choice b { color:var(--text); font-size:11px; }
.profile-edit-choice small { margin-top:2px; color:var(--text-faint); font-size:9px; }
.profile-edit-choice label:has(input:disabled) { opacity:.45; cursor:not-allowed; }
.profile-social-grid .field-row label i { width:15px; color:var(--gold-deep); }
.profile-edit-toggle { min-height:68px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:15px; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; cursor:pointer; }
.profile-edit-toggle strong,.profile-edit-toggle small { display:block; }
.profile-edit-toggle strong { color:var(--text); font-size:11px; }
.profile-edit-toggle small { margin-top:3px; color:var(--text-faint); font-size:9px; }
.profile-edit-toggle input { position:absolute; opacity:0; pointer-events:none; }
.profile-edit-toggle > i { width:42px; height:24px; position:relative; flex:0 0 42px; background:var(--surface-3); border:1px solid var(--line); border-radius:999px; transition:.2s ease; }
.profile-edit-toggle > i::after { content:""; width:16px; height:16px; position:absolute; left:3px; top:3px; background:var(--text-faint); border-radius:50%; transition:.2s ease; }
.profile-edit-toggle input:checked + i { background:var(--gold); border-color:var(--gold-deep); }
.profile-edit-toggle input:checked + i::after { left:21px; background:#211507; }
html[data-theme="dark"] .profile-edit-panel select.field option { color:var(--text); background:var(--surface); }
html[data-theme="dark"] .profile-photo-button,html[data-theme="dark"] .profile-photo-remove { color:#fff; }

/* 404: na telefonie komunikat zajmuje całą przestrzeń pomiędzy nagłówkiem i nawigacją. */
@media (max-width:700px) {
  body[data-page="404"] {
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
  }

  body[data-page="404"] .main-area {
    width:100%;
    height:100vh;
    height:100dvh;
    min-height:0;
    padding:var(--topbar-h) 0 calc(68px + env(safe-area-inset-bottom));
    overflow:hidden;
  }

  body[data-page="404"] #viewRoot {
    width:100%;
    max-width:none;
    height:100%;
    margin:0;
    display:grid;
    place-items:center;
  }

  body[data-page="404"] .system-hero {
    width:100%;
    max-width:none;
    height:100%;
    min-height:0;
    margin:0;
    padding:clamp(24px,5.5vh,44px) 22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:
      radial-gradient(circle at 50% 42%, color-mix(in srgb,var(--gold-wash) 78%,transparent) 0, transparent 42%),
      var(--bg);
  }

  body[data-page="404"] .system-icon {
    width:68px;
    height:68px;
    margin:0 auto 20px;
    flex:0 0 68px;
    font-size:26px;
  }

  body[data-page="404"] .system-hero h1 {
    max-width:350px;
    margin:8px auto 13px;
    font-size:clamp(32px,9vw,40px);
    line-height:1.02;
    letter-spacing:-.045em;
  }

  body[data-page="404"] .system-hero > p {
    max-width:340px;
    margin:0 auto;
    font-size:14px;
    line-height:1.6;
  }

  body[data-page="404"] .system-hero .home-actions {
    width:min(100%,320px);
    margin-top:24px;
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:9px;
  }

  body[data-page="404"] .system-hero .home-actions > * {
    width:100%;
    min-width:0;
    min-height:48px;
    padding:0 12px;
    justify-content:center;
    font-size:11px;
  }
}

@media (max-width:720px) {
  body[data-page="user-profile-edit"] #viewRoot { width:100%; }
  body[data-page="user-profile-edit"] .main-area { padding-top:calc(var(--topbar-h) + 4px); padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  .profile-edit-intro { min-height:0; margin:0; padding:10px 16px 11px; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
  .profile-edit-intro .eyebrow { font-size:7px; letter-spacing:.15em; }
  .profile-edit-intro h1 { margin-top:2px; font-size:24px; line-height:1.04; letter-spacing:-.025em; }
  .profile-edit-intro .page-actions { flex:0 0 auto; }
  .profile-edit-save-all { width:38px; min-width:38px; min-height:38px; height:38px; padding:0; border-radius:11px; box-shadow:0 5px 14px rgba(156,103,21,.14); }
  .profile-edit-save-all i { font-size:13px; }
  .profile-edit-save-all span { display:none; }
  .profile-edit-notice { margin:0 12px 10px; border-radius:12px; font-size:11px; }
  .profile-edit-layout { margin:0; }
  .profile-edit-nav { position:static; margin-bottom:7px; padding:7px 10px; gap:3px; scroll-behavior:smooth; scrollbar-width:none; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; }
  .profile-edit-nav::-webkit-scrollbar { display:none; }
  .profile-edit-nav button { min-height:38px; padding:0 10px; font-size:10px; }
  .profile-edit-workspace { gap:9px; }
  .profile-edit-preview { border-radius:0; }
  .profile-edit-cover,.profile-edit-cover img { min-height:145px; }
  .profile-photo-actions { right:10px; bottom:10px; }
  .profile-photo-button { min-height:35px; padding:0 10px; }
  .profile-photo-button span { display:none; }
  .profile-photo-remove { width:35px; height:35px; }
  .profile-edit-preview-body { min-height:126px; padding:0 14px 14px 103px; grid-template-columns:minmax(0,1fr); gap:10px; }
  .profile-edit-avatar-wrap,.profile-edit-avatar { width:76px; height:76px; }
  .profile-edit-avatar-wrap { left:14px; top:-35px; }
  .profile-edit-avatar { border-width:3px; }
  .profile-avatar-edit,.profile-avatar-remove { width:27px; height:27px; }
  .profile-edit-preview-copy { padding-top:12px; }
  .profile-edit-preview-copy strong { font-size:17px; }
  .profile-edit-preview-copy p { margin-top:6px; font-size:10px; }
  .profile-edit-open-profile { width:max-content; min-height:34px; font-size:10px; }
  .profile-edit-panel { padding:18px 15px 22px; }
  .profile-edit-panel .field { font-size:14px; }
  .profile-edit-panel .field-row label { font-size:12px; }
  .profile-edit-section-head { margin-bottom:17px; }
  .profile-edit-section-head h2 { font-size:23px; }
  .profile-edit-section-head p { font-size:11px; line-height:1.5; }
  .profile-edit-panel .profile-edit-fields { padding:0; }
  .profile-edit-date-grid { grid-template-columns:1fr; gap:8px; }
  .profile-edit-choice { grid-template-columns:1fr; }
  .profile-edit-toggle { align-items:flex-start; }
}

/* User profile settings ------------------------------------------------- */
body[data-page="user-profile-settings"] #viewRoot { width:min(100%,1120px); }
.profile-settings-page { width:100%; }
.profile-settings-intro { min-height:0; margin-bottom:16px; padding:2px 0; align-items:center; }
.profile-settings-intro h1 { margin-top:3px; font-size:clamp(32px,2.7vw,38px); line-height:1; letter-spacing:-.03em; }
.profile-settings-intro p { max-width:620px; margin-top:7px; font-size:12px; line-height:1.5; }
.profile-settings-save-state { min-height:34px; padding:0 13px; display:flex; align-items:center; color:var(--text-faint); background:transparent; border:1px solid transparent; border-radius:999px; font-size:11px; font-weight:800; }
.profile-settings-save-state:empty { display:none; }
.profile-settings-save-state.is-saving { color:var(--gold-deep); background:var(--gold-wash); border-color:var(--line-strong); }
.profile-settings-save-state.is-success { color:var(--success); background:color-mix(in srgb,var(--success) 8%,var(--surface)); border-color:color-mix(in srgb,var(--success) 30%,var(--line)); }
.profile-settings-save-state.is-error { color:var(--danger); background:color-mix(in srgb,var(--danger) 8%,var(--surface)); border-color:color-mix(in srgb,var(--danger) 30%,var(--line)); }
.profile-settings-layout { grid-template-columns:250px minmax(0,1fr); align-items:start; }
.profile-settings-nav { position:sticky; top:calc(var(--topbar-h) + 18px); }
.profile-settings-nav button { border:0; background:transparent; }
.profile-settings-workspace { min-width:0; display:grid; }
.profile-settings-panel { min-width:0; padding:24px; animation:profileSettingsReveal .18s ease both; }
.profile-settings-panel[hidden] { display:none !important; }
@keyframes profileSettingsReveal { from { opacity:.35; transform:translateY(4px); } }
.profile-settings-section-head { margin-bottom:20px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.profile-settings-section-head h2 { margin:3px 0 0; font:800 26px/1.08 var(--font-display); letter-spacing:-.02em; }
.profile-settings-section-head p { max-width:660px; margin:7px 0 0; color:var(--text-faint); font-size:11px; line-height:1.5; }
.profile-settings-device { min-height:33px; padding:0 11px; display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; color:var(--text-faint); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; font-size:9px; font-weight:800; white-space:nowrap; }
.profile-settings-device.is-active { color:var(--success); border-color:color-mix(in srgb,var(--success) 30%,var(--line)); }
.profile-settings-group { margin-top:12px; padding:17px; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; }
.profile-settings-group-featured { margin-top:0; background:linear-gradient(120deg,var(--gold-wash),var(--surface-2)); border-color:var(--line-strong); }
.profile-settings-group-head { margin-bottom:8px; }
.profile-settings-group-head h3 { margin:3px 0 0; color:var(--text); font:800 18px/1.15 var(--font-display); }
.profile-settings-group-head p { margin:6px 0 0; color:var(--text-faint); font-size:10px; line-height:1.5; }
.profile-settings-toggle { min-height:58px; padding:11px 2px; position:relative; display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); cursor:pointer; }
.profile-settings-group .profile-settings-toggle:first-child,.profile-settings-group-head + .profile-settings-toggle { border-top:0; }
.profile-settings-toggle-copy { min-width:0; display:flex; align-items:center; gap:11px; }
.profile-settings-toggle-copy > i { width:34px; height:34px; display:grid; place-items:center; flex:0 0 34px; color:var(--gold-deep); background:var(--gold-wash); border-radius:10px; font-size:12px; }
.profile-settings-toggle-copy strong,.profile-settings-toggle-copy small { display:block; }
.profile-settings-toggle-copy strong { color:var(--text); font-size:12px; }
.profile-settings-toggle-copy small { margin-top:3px; color:var(--text-faint); font-size:9.5px; line-height:1.4; }
.profile-settings-toggle > input { position:absolute; opacity:0; pointer-events:none; }
.profile-settings-switch { width:43px; height:24px; position:relative; flex:0 0 43px; background:var(--surface-3); border:1px solid var(--line); border-radius:999px; transition:.2s ease; }
.profile-settings-switch::after { content:""; width:16px; height:16px; position:absolute; left:3px; top:3px; background:var(--text-faint); border-radius:50%; transition:.2s ease; }
.profile-settings-toggle input:checked + .profile-settings-switch { background:var(--gold); border-color:var(--gold-deep); }
.profile-settings-toggle input:checked + .profile-settings-switch::after { left:22px; background:#211507; }
.profile-settings-toggle input:focus-visible + .profile-settings-switch { box-shadow:0 0 0 3px var(--gold-wash); }
.profile-settings-toggle input:disabled + .profile-settings-switch { opacity:.5; }
.profile-settings-ios-hint { margin-top:9px; padding:11px 12px; display:flex; align-items:flex-start; gap:10px; color:var(--text-soft); background:var(--surface); border:1px solid var(--line); border-radius:12px; font-size:10px; line-height:1.5; }
.profile-settings-ios-hint[hidden] { display:none; }
.profile-settings-ios-hint i { margin-top:1px; color:var(--gold-deep); font-size:15px; }
.profile-settings-time-grid,.profile-settings-sound-grid { margin-top:8px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; transition:.2s ease; }
.profile-settings-time-grid.is-disabled,.profile-settings-sound-grid.is-disabled { opacity:.5; }
.profile-settings-time-grid label,.profile-settings-sound-grid > label { min-width:0; color:var(--text-soft); font-size:10px; font-weight:800; }
.profile-settings-time-grid label > span,.profile-settings-sound-grid > label > span { margin-bottom:6px; display:block; }
.profile-settings-time-grid .field,.profile-settings-sound-grid .field { height:44px; font-size:12px; }
.profile-settings-sound-grid > label > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.profile-settings-sound-grid .soft-btn { min-width:72px; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
html[data-theme="dark"] .profile-settings-panel select.field option { color:var(--text); background:var(--surface); }
.profile-settings-provider { padding:17px; display:grid; grid-template-columns:45px minmax(0,1fr) auto; align-items:center; gap:13px; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; }
.profile-settings-provider > span { width:45px; height:45px; display:grid; place-items:center; color:#4285f4; background:var(--surface); border:1px solid var(--line); border-radius:13px; font-size:18px; }
.profile-settings-provider strong,.profile-settings-provider p { display:block; }
.profile-settings-provider strong { font-size:12px; }
.profile-settings-provider p { margin:4px 0 0; color:var(--text-faint); font-size:10px; line-height:1.45; }
.profile-settings-provider .outline-btn { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.profile-settings-form { padding:18px; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; }
.profile-settings-form .field-row > span,.profile-settings-danger-zone .field-row > span { margin-bottom:6px; display:block; color:var(--text-soft); font-size:10px; font-weight:800; }
.profile-settings-form .field-row small { min-height:15px; margin-top:5px; display:block; color:var(--text-faint); font-size:9px; }
.profile-settings-form .field-row small.is-success { color:var(--success); }
.profile-settings-form .field-row small.is-error { color:var(--danger); }
.profile-settings-password { position:relative; }
.profile-settings-password .field { height:45px; padding-right:43px; font-size:13px; }
.profile-settings-password button { width:42px; height:100%; position:absolute; right:0; top:0; display:grid; place-items:center; color:var(--text-faint); border:0; background:transparent; }
.profile-settings-submit { min-height:43px; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.profile-settings-submit.is-loading i { animation:suProfileEditSpin .8s linear infinite; }
.profile-settings-submit.is-loading i::before { content:"\f110"; }
.profile-settings-form-message { min-height:18px; margin:9px 0 0; color:var(--text-faint); font-size:10px; font-weight:700; }
.profile-settings-form-message.is-success { color:var(--success); }
.profile-settings-form-message.is-error { color:var(--danger); }
.profile-settings-danger-zone { margin-top:18px; padding:18px; background:color-mix(in srgb,var(--danger) 5%,var(--surface-2)); border:1px solid color-mix(in srgb,var(--danger) 26%,var(--line)); border-radius:16px; }
.profile-settings-confirm { margin:10px 0 13px; display:flex; align-items:flex-start; gap:9px; color:var(--text-soft); font-size:10px; line-height:1.45; cursor:pointer; }
.profile-settings-confirm input { margin-top:2px; accent-color:var(--danger); }
.danger-btn { min-height:40px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; color:#fff; background:var(--danger); border:1px solid color-mix(in srgb,var(--danger) 75%,#000); border-radius:12px; font-size:11px; font-weight:800; }
.danger-btn:disabled { opacity:.45; cursor:not-allowed; }
.profile-settings-search { height:44px; margin-bottom:12px; padding:0 13px; display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; }
.profile-settings-search:focus-within { border-color:var(--line-strong); box-shadow:0 0 0 3px var(--gold-wash); }
.profile-settings-search i { color:var(--gold-deep); }
.profile-settings-search input { min-width:0; width:100%; color:var(--text); border:0; outline:0; background:transparent; font-size:12px; }
.profile-settings-search input::placeholder { color:var(--text-faint); }
.profile-settings-people { min-height:160px; display:grid; align-content:start; }
.profile-settings-person { min-width:0; min-height:66px; padding:9px 2px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.profile-settings-person > a { min-width:0; display:flex; align-items:center; gap:11px; color:var(--text); }
.profile-settings-person img { width:46px; height:46px; flex:0 0 46px; object-fit:cover; background:var(--surface-2); border:1px solid var(--line); border-radius:50%; }
.profile-settings-person a span { min-width:0; }
.profile-settings-person strong,.profile-settings-person small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-settings-person strong { font-size:12px; }
.profile-settings-person small { margin-top:3px; color:var(--text-faint); font-size:9.5px; }
.profile-settings-person .outline-btn { min-height:36px; padding:0 12px; display:inline-flex; align-items:center; gap:7px; }
.profile-settings-list-loader,.profile-settings-empty { min-height:160px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:7px; color:var(--text-faint); text-align:center; }
.profile-settings-list-loader i { animation:suProfileEditSpin .8s linear infinite; }
.profile-settings-empty > i { width:46px; height:46px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:50%; font-size:16px; }
.profile-settings-empty strong { color:var(--text); font-size:12px; }
.profile-settings-empty span { font-size:10px; }
.profile-settings-empty.is-error > i { color:var(--danger); background:color-mix(in srgb,var(--danger) 9%,var(--surface)); }
.profile-settings-list-sentinel { min-height:34px; display:grid; place-items:center; color:var(--gold-deep); }
.profile-settings-list-sentinel[hidden] { display:none; }
.profile-settings-list-sentinel i { animation:suProfileEditSpin .8s linear infinite; }
.profile-billing-plan { padding:18px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#fff; background:linear-gradient(120deg,#171109,#2e1e0e 65%,#5d3d14); border:1px solid rgba(231,191,108,.35); border-radius:17px; }
.profile-billing-plan > div:first-child { min-width:0; display:flex; align-items:center; gap:13px; }
.profile-billing-icon { width:48px; height:48px; display:grid; place-items:center; flex:0 0 48px; color:#211507; background:var(--gold); border-radius:14px; }
.profile-billing-plan small,.profile-billing-plan strong,.profile-billing-plan p,.profile-billing-price span,.profile-billing-price b { display:block; }
.profile-billing-plan small { color:#eac46e; font-size:8px; font-weight:800; letter-spacing:.14em; }
.profile-billing-plan > div > div > strong { margin-top:3px; font:800 20px/1.15 var(--font-display); }
.profile-billing-plan p { margin:5px 0 0; color:rgba(255,255,255,.62); font-size:10px; }
.profile-billing-price { flex:0 0 auto; text-align:right; }
.profile-billing-price > strong { font:800 22px/1 var(--font-display); }
.profile-billing-price span { margin-top:4px; color:rgba(255,255,255,.58); font-size:9px; }
.profile-billing-price b { margin-top:9px; color:#84d8a7; font-size:9px; }
.profile-billing-meta { margin-top:10px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.profile-billing-meta > div { min-width:0; padding:12px; display:flex; align-items:center; gap:10px; background:var(--surface-2); border:1px solid var(--line); border-radius:13px; }
.profile-billing-meta > div > i { width:30px; height:30px; display:grid; place-items:center; flex:0 0 30px; color:var(--gold-deep); background:var(--gold-wash); border-radius:9px; }
.profile-billing-meta small,.profile-billing-meta strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-billing-meta small { color:var(--text-faint); font-size:8px; }
.profile-billing-meta strong { margin-top:3px; color:var(--text); font-size:9.5px; }
.profile-billing-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.profile-billing-features .profile-settings-group-head { grid-column:1/-1; }
.profile-billing-feature { min-width:0; padding:11px; display:grid; grid-template-columns:34px minmax(0,1fr) 14px; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.profile-billing-feature > i:first-child { width:34px; height:34px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:10px; }
.profile-billing-feature > i:last-child { color:var(--success); font-size:10px; }
.profile-billing-feature strong,.profile-billing-feature small { display:block; }
.profile-billing-feature strong { font-size:10px; }
.profile-billing-feature small { margin-top:2px; color:var(--text-faint); font-size:8px; line-height:1.35; }
.profile-billing-options { display:grid; gap:8px; }
.profile-billing-option { min-width:0; padding:12px; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.profile-billing-option > i { width:36px; height:36px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:10px; }
.profile-billing-option span,.profile-billing-option strong,.profile-billing-option small { min-width:0; display:block; }
.profile-billing-option strong { color:var(--text); font-size:10.5px; }
.profile-billing-option small { margin-top:3px; color:var(--text-faint); font-size:8.5px; line-height:1.4; }
.profile-billing-option b { padding:6px 9px; color:var(--text-faint); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; font-size:8px; white-space:nowrap; }
.profile-billing-option.is-active { border-color:color-mix(in srgb,var(--success) 32%,var(--line)); }
.profile-billing-option.is-active > i,.profile-billing-option.is-active b { color:var(--success); background:color-mix(in srgb,var(--success) 8%,var(--surface)); border-color:color-mix(in srgb,var(--success) 25%,var(--line)); }
.profile-billing-empty { min-height:95px; padding:15px; display:flex; align-items:center; gap:13px; background:var(--surface); border:1px dashed var(--line-strong); border-radius:13px; }
.profile-billing-empty > i { width:42px; height:42px; display:grid; place-items:center; flex:0 0 42px; color:var(--gold-deep); background:var(--gold-wash); border-radius:12px; }
.profile-billing-empty strong { font-size:11px; }
.profile-billing-empty p { margin:4px 0 0; color:var(--text-faint); font-size:9px; line-height:1.4; }
.profile-billing-information > p { margin:0; padding:8px 0; display:flex; align-items:flex-start; gap:9px; color:var(--text-soft); border-top:1px solid var(--line); font-size:9.5px; line-height:1.45; }
.profile-billing-information > p:first-of-type { border-top:0; }
.profile-billing-information > p i { width:20px; height:20px; display:grid; place-items:center; flex:0 0 20px; color:var(--success); background:color-mix(in srgb,var(--success) 8%,var(--surface)); border-radius:50%; font-size:8px; }
.profile-billing-help { min-height:48px; margin-top:12px; display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:9px; }
body[data-page="user-profile-settings"] .profile-billing-help.outline-btn {
  width:100%; padding:14px 16px; gap:12px; color:var(--text);
  background:var(--surface); border-color:var(--line-strong); border-radius:14px;
  font-size:13px; line-height:1.45; text-align:left; white-space:normal; text-decoration:none;
}
body[data-page="user-profile-settings"] .profile-billing-help > i { color:var(--gold-deep); font-size:18px; }
body[data-page="user-profile-settings"] .profile-billing-help > span { line-height:1.45; }
body[data-page="user-profile-settings"] .profile-billing-help > strong {
  padding:10px 14px; color:#211507; background:linear-gradient(135deg,#f0d181,var(--gold));
  border:1px solid rgba(113,70,11,.18); border-radius:10px; font-size:12px; line-height:1.3;
}
body[data-page="user-profile-settings"] .profile-billing-help.outline-btn:hover { background:var(--gold-wash); border-color:var(--gold-deep); }
body[data-page="user-profile-settings"] .profile-billing-help.outline-btn:focus-visible { outline:2px solid var(--gold-deep) !important; outline-offset:3px; }
.profile-settings-confirm-modal { position:fixed; inset:0; z-index:1600; display:none; place-items:center; padding:18px; }
.profile-settings-confirm-modal.open { display:grid; }
.profile-settings-confirm-backdrop { position:absolute; inset:0; background:rgba(9,7,4,.66); border:0; backdrop-filter:blur(5px); }
.profile-settings-confirm-modal > section { width:min(430px,100%); padding:24px; position:relative; z-index:1; color:var(--text); background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.28); text-align:center; }
.profile-settings-confirm-icon { width:50px; height:50px; margin:0 auto 12px; display:grid; place-items:center; color:var(--gold-deep); background:var(--gold-wash); border-radius:50%; }
.profile-settings-confirm-modal h2 { margin:0; font:800 22px/1.15 var(--font-display); }
.profile-settings-confirm-modal p { margin:9px 0 0; color:var(--text-faint); font-size:11px; line-height:1.55; }
.profile-settings-confirm-modal footer { margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }

@media (max-width:700px) {
  body[data-page="user-profile-settings"] #viewRoot { width:100%; }
  body[data-page="user-profile-settings"] .main-area { padding-top:calc(var(--topbar-h) + 4px); padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  .profile-settings-intro { margin:0; padding:12px 16px; border-bottom:1px solid var(--line); }
  .profile-settings-intro h1 { font-size:25px; }
  .profile-settings-intro p { margin-top:5px; font-size:10.5px; }
  .profile-settings-save-state { min-height:30px; padding:0 9px; font-size:9px; }
  .profile-settings-layout { display:block; margin:0; }
  .profile-settings-nav { margin:0; padding:7px 10px; position:sticky; top:var(--topbar-h); z-index:20; gap:3px; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:0 7px 18px rgba(25,17,8,.05); }
  .profile-settings-nav button { min-height:38px; padding:0 10px; font-size:10px; }
  .profile-settings-panel { padding:19px 15px 24px; border:0; border-radius:0; }
  .profile-settings-section-head { display:block; }
  .profile-settings-section-head h2 { font-size:23px; }
  .profile-settings-section-head p { font-size:10.5px; }
  .profile-settings-device { margin-top:11px; }
  .profile-settings-group { padding:14px; border-radius:15px; }
  .profile-settings-toggle { min-height:64px; }
  .profile-settings-toggle-copy { align-items:flex-start; }
  .profile-settings-toggle-copy strong { font-size:13px; }
  .profile-settings-toggle-copy small { font-size:10.5px; }
  .profile-settings-time-grid,.profile-settings-sound-grid { grid-template-columns:1fr; }
  .profile-settings-time-grid label,.profile-settings-sound-grid > label { font-size:11px; }
  .profile-settings-time-grid .field,.profile-settings-sound-grid .field { font-size:14px; }
  .profile-settings-provider { grid-template-columns:42px minmax(0,1fr); }
  .profile-settings-provider > span { width:42px; height:42px; }
  .profile-settings-provider .outline-btn { grid-column:1/-1; justify-content:center; }
  .profile-settings-form,.profile-settings-danger-zone { padding:15px; }
  .profile-settings-form .grid-2 { grid-template-columns:1fr; gap:0; }
  .profile-settings-form .field-row > span,.profile-settings-danger-zone .field-row > span { font-size:12px; }
  .profile-settings-password .field { font-size:15px; }
  .profile-settings-submit,.profile-settings-delete { width:100%; }
  .profile-settings-search { height:47px; }
  .profile-settings-search input { font-size:14px; }
  .profile-settings-person { min-height:72px; }
  .profile-settings-person img { width:49px; height:49px; flex-basis:49px; }
  .profile-settings-person strong { font-size:13px; }
  .profile-settings-person small { font-size:10px; }
  .profile-settings-person .outline-btn span { display:none; }
  .profile-settings-person .outline-btn { width:38px; padding:0; justify-content:center; }
  .profile-billing-plan { align-items:flex-start; flex-direction:column; }
  .profile-billing-price { width:100%; padding-top:13px; display:grid; grid-template-columns:1fr auto; align-items:end; text-align:left; border-top:1px solid rgba(255,255,255,.14); }
  .profile-billing-price span { grid-column:1; }
  .profile-billing-price b { grid-column:2; grid-row:1/3; align-self:center; margin:0; }
  .profile-billing-meta,.profile-billing-features { grid-template-columns:1fr; }
  .profile-billing-features .profile-settings-group-head { grid-column:auto; }
  .profile-billing-feature strong { font-size:11px; }
  .profile-billing-feature small { font-size:9px; }
  .profile-billing-option { grid-template-columns:38px minmax(0,1fr); }
  .profile-billing-option b { grid-column:2; justify-self:start; }
  .profile-billing-option strong { font-size:11.5px; }
  .profile-billing-option small,.profile-billing-information > p { font-size:10px; }
  .profile-billing-help { grid-template-columns:22px minmax(0,1fr); }
  .profile-billing-help strong { grid-column:1/-1; text-align:center; }
  .profile-settings-confirm-modal { align-items:end; padding:0; }
  .profile-settings-confirm-modal > section { width:100%; padding:22px 18px calc(20px + env(safe-area-inset-bottom)); border-right:0; border-bottom:0; border-left:0; border-radius:22px 22px 0 0; }
  .profile-settings-confirm-modal h2 { font-size:21px; }
  .profile-settings-confirm-modal p { font-size:12px; }
}

/* User profile: czytelne akcje relacji oraz uporządkowane dane profilu. */
body[data-page="user-profile"] .profile-detail-row {
  min-width:0;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 18px;
}
body[data-page="user-profile"] .profile-detail-meta > span,
body[data-page="user-profile"] .profile-detail-social > a {
  min-width:0;
  display:inline-flex;
  align-items:center;
  color:inherit;
  line-height:1.4;
  text-decoration:none;
}
body[data-page="user-profile"] .profile-detail-meta > span > span,
body[data-page="user-profile"] .profile-detail-social > a > span {
  min-width:0;
}
body[data-page="user-profile"] .profile-detail-social > a {
  transition:color .16s ease;
}
body[data-page="user-profile"] .profile-detail-social > a:hover {
  color:var(--gold-deep);
}
body[data-page="user-profile"] .connection-message-action {
  min-width:116px;
  min-height:40px;
  padding:0 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  color:var(--gold-deep);
  background:var(--surface-solid);
  border-color:var(--line);
  box-shadow:none;
  font-size:11.5px;
  line-height:1;
  transition:color .16s ease,background-color .16s ease,border-color .16s ease;
}
body[data-page="user-profile"] .connection-message-action i {
  font-size:11px;
}
body[data-page="user-profile"] .connection-message-action:hover {
  color:var(--gold-deep);
  background:var(--surface-2);
  border-color:var(--line-strong);
}
body[data-page="user-profile"] .profile-stats > button:hover,
body[data-page="user-profile"] .profile-stats > a:hover {
  color:var(--text-faint);
  background:transparent;
}
body[data-page="user-profile"] .profile-connections-list .connection-person {
  min-height:64px;
  padding:5px 8px;
}

@media (max-width:700px) {
  body[data-page="user-profile"] .profile-cover {
    overflow:visible;
  }
  body[data-page="user-profile"] .profile-more-menu {
    position:absolute;
    z-index:8;
    top:12px;
    right:12px;
    display:block;
  }
  body[data-page="user-profile"] .profile-more-menu > summary {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    color:#fff;
    background:rgba(15,12,9,.58);
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    box-shadow:0 7px 20px rgba(0,0,0,.2);
    backdrop-filter:blur(10px);
    cursor:pointer;
    list-style:none;
  }
  body[data-page="user-profile"] .profile-more-menu > summary::-webkit-details-marker {
    display:none;
  }
  body[data-page="user-profile"] .profile-more-menu > summary i {
    font-size:16px;
  }
  body[data-page="user-profile"] .profile-more-menu-popover {
    position:absolute;
    top:46px;
    right:0;
    width:170px;
    padding:6px;
    display:grid;
    gap:3px;
    color:var(--text);
    background:var(--surface-solid);
    border:1px solid var(--line);
    border-radius:13px;
    box-shadow:var(--shadow);
  }
  body[data-page="user-profile"] .profile-more-menu-popover button {
    min-height:40px;
    padding:0 11px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--text);
    border-radius:9px;
    font-size:11px;
    font-weight:750;
    text-align:left;
  }
  body[data-page="user-profile"] .profile-more-menu-popover button:hover {
    background:var(--surface-2);
  }
  body[data-page="user-profile"] .profile-more-menu-popover button i {
    width:17px;
    color:var(--gold-deep);
    text-align:center;
  }
  body[data-page="user-profile"] .profile-primary {
    align-items:center;
    gap:15px;
  }
  body[data-page="user-profile"] .profile-name {
    width:100%;
    text-align:center;
  }
  body[data-page="user-profile"] .profile-name-heading {
    justify-content:center;
    gap:10px;
  }
  body[data-page="user-profile"] #viewRoot[data-profile-owner="true"] .profile-name-edit {
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:inline-grid;
    place-items:center;
    color:#211507;
    background:linear-gradient(135deg,#f3d787,var(--gold));
    border:1px solid rgba(113,70,11,.2);
    border-radius:50%;
    box-shadow:0 7px 18px rgba(156,103,21,.18);
    text-decoration:none;
  }
  body[data-page="user-profile"] #viewRoot[data-profile-owner="true"] .profile-name-edit i {
    font-size:12px;
  }
  body[data-page="user-profile"] #viewRoot[data-profile-owner="true"] .profile-cta {
    display:none;
  }
  body[data-page="user-profile"] .profile-cta {
    gap:6px;
  }
  body[data-page="user-profile"] .profile-action {
    min-height:38px;
    padding-inline:10px;
    gap:6px;
    font-size:10px;
  }
  body[data-page="user-profile"] #viewRoot[data-profile-owner="true"] .profile-cta .profile-action-primary {
    min-width:142px;
    flex:0 1 170px;
    padding-inline:14px;
  }
  body[data-page="user-profile"] .profile-action-inline-more {
    display:none;
  }
  body[data-page="user-profile"] #viewRoot[data-profile-owner="false"] .profile-cta {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(105px,1fr));
    gap:8px;
    overflow:visible;
  }
  body[data-page="user-profile"] #viewRoot[data-profile-owner="false"] .profile-cta [data-profile-friend] {
    order:1;
    width:100%;
    min-width:0;
  }
  body[data-page="user-profile"] #viewRoot[data-profile-owner="false"] .profile-action-message {
    order:2;
    width:100%;
    min-width:0;
    color:var(--text);
    border-radius:999px;
  }
  body[data-page="user-profile"] .profile-action-message span {
    display:inline;
  }
  body[data-page="user-profile"] #viewRoot[data-profile-owner="false"] .profile-cta [data-profile-follow] {
    order:3;
    width:100%;
    min-width:0;
  }
  body[data-page="user-profile"] #viewRoot[data-profile-owner="false"] .profile-cta [data-profile-friend],
  body[data-page="user-profile"] #viewRoot[data-profile-owner="false"] .profile-cta [data-profile-follow],
  body[data-page="user-profile"] #viewRoot[data-profile-owner="false"] .profile-action-message {
    min-height:44px;
    padding-inline:12px;
    gap:7px;
    font-size:11.5px;
  }
  body[data-page="user-profile"] .profile-stats > button,
  body[data-page="user-profile"] .profile-stats > a {
    font-size:10.5px;
    line-height:1.25;
  }
  body[data-page="user-profile"] .profile-stats b {
    margin-bottom:2px;
    font-size:14px;
  }
  body[data-page="user-profile"] .profile-primary + .profile-details {
    margin-top:18px;
  }
  body[data-page="user-profile"] .profile-bio {
    margin:18px 0 0;
    font-size:13px;
    line-height:1.6;
  }
  body[data-page="user-profile"] .profile-bio + .profile-details {
    margin-top:12px;
  }
  body[data-page="user-profile"] .profile-details {
    width:100%;
    display:grid;
    gap:6px;
    overflow:visible;
    color:var(--text-soft);
    font-size:10px;
    line-height:1.35;
    scrollbar-width:auto;
  }
  body[data-page="user-profile"] .profile-detail-row {
    width:100%;
    flex-wrap:nowrap;
    gap:13px;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
  }
  body[data-page="user-profile"] .profile-detail-meta {
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }
  body[data-page="user-profile"] .profile-detail-meta > span {
    min-width:0;
    white-space:nowrap;
  }
  body[data-page="user-profile"] .profile-detail-meta > span:first-child {
    overflow:hidden;
  }
  body[data-page="user-profile"] .profile-detail-meta > span:first-child > span {
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body[data-page="user-profile"] .profile-detail-social {
    gap:14px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-x;
    scrollbar-width:none;
  }
  body[data-page="user-profile"] .profile-detail-social::-webkit-scrollbar {
    display:none;
  }
  body[data-page="user-profile"] .profile-detail-social > a {
    min-height:24px;
    padding:0;
    flex:0 0 auto;
    gap:5px;
    color:var(--text-soft);
    background:transparent;
    border:0;
    border-radius:0;
    font-size:10px;
    font-weight:650;
    white-space:nowrap;
  }
  body[data-page="user-profile"] .profile-details i {
    margin-right:5px;
    flex:0 0 auto;
    font-size:10px;
  }
  body[data-page="user-profile"] .profile-detail-social i {
    margin-right:0;
  }
  body[data-page="user-profile"] .connection-message-action {
    min-width:105px;
    min-height:39px;
    padding:0 12px;
    font-size:10.5px;
  }
  body[data-page="user-profile"] .profile-connections-list .connection-person {
    min-height:58px;
    padding:4px 5px;
  }
  body[data-page="user-profile"] .profile-lightbox-dialog {
    width:100%;
    height:100%;
    grid-template-rows:minmax(205px,min(92vw,40dvh,360px)) minmax(0,1fr);
    background:#07090c;
  }
  body[data-page="user-profile"] .profile-lightbox-media {
    width:100%;
    max-height:min(40dvh,360px);
    aspect-ratio:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  body[data-page="user-profile"] .profile-lightbox-media > img {
    width:auto;
    height:auto;
    max-width:calc(100% - 84px);
    max-height:100%;
    aspect-ratio:4/5;
    object-fit:contain;
  }
  body[data-page="user-profile"] .profile-lightbox-nav {
    top:50%;
    width:36px;
    height:36px;
  }
  body[data-page="user-profile"] .profile-lightbox-prev {
    left:7px;
  }
  body[data-page="user-profile"] .profile-lightbox-next {
    right:7px;
  }
  body[data-page="user-profile"] .profile-lightbox-details {
    background:var(--surface-solid);
  }
  body[data-page="user-profile"] .profile-lightbox-like-count,
  body[data-page="user-profile"] .profile-lightbox-time {
    display:none;
  }
  body[data-page="user-profile"] .profile-lightbox-actions {
    padding:5px 12px 1px;
  }
  body[data-page="user-profile"] .profile-lightbox-comment-form {
    min-height:60px;
    margin-top:1px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    grid-template-columns:38px minmax(0,1fr) 42px;
  }
  body[data-page="user-profile"] .profile-lightbox-comment-form > img {
    width:38px;
    height:38px;
  }
  body[data-page="user-profile"] .profile-lightbox-comment-form > div {
    min-height:42px;
  }
  body[data-page="user-profile"] .profile-lightbox-comment-form .send-comment {
    width:42px;
    height:42px;
  }
  body[data-page="user-profile"] .profile-comments-empty {
    min-height:0;
    padding:12px 2px 18px;
    place-items:start;
    text-align:left;
  }
  body[data-page="user-profile"] .profile-lightbox.open {
    inset:var(--su-visual-viewport-top,0px) 0 auto;
    width:100%;
    height:var(--su-visual-viewport-height,100dvh);
    min-height:0;
  }
  html.su-comment-keyboard-open body[data-page="user-profile"] .profile-lightbox-dialog {
    grid-template-rows:clamp(96px,24dvh,140px) minmax(0,1fr);
  }
  html.su-comment-keyboard-open body[data-page="user-profile"] .profile-lightbox-media {
    max-height:140px;
  }
}

/* ================================================================
   Moto dark: finalna warstwa tras spolecznosciowych i ShineChat.
   Trzymamy ja na koncu pliku, aby starsze selektory widokow nie mogly
   ponownie wprowadzic brazowo-czarnej palety po zwyklym odswiezeniu.
   ================================================================ */
html[data-theme="dark"] body:is(
  [data-route="feed"],
  [data-route="posts"],
  [data-route="messages"],
  [data-route="notifications"],
  [data-route="create"],
  [data-route="search"]
) .main-area {
  background: var(--su-dark-bg);
}

html[data-theme="dark"] body[data-route="feed"] :is(.feed-filter,.post-card),
html[data-theme="dark"] body[data-route="posts"] :is(.posts-composer,.posts-filter,.social-post-card),
html[data-theme="dark"] body[data-page="feed-tags"] :is(.feed-tag-page-intro,.feed-filter,.post-card),
html[data-theme="dark"] body[data-route="notifications"] :is(.notifications-filters,.notifications-list-card),
html[data-theme="dark"] body[data-route="messages"] :is(.conversation-list,.chat-pane,.chat-empty-state,.chat-details,.m-messenger-app,.m-chat-app) {
  background-color: var(--su-dark-panel);
  border-color: var(--su-dark-border);
  box-shadow: none;
}

html[data-theme="dark"] body[data-route="messages"] :is(.conversation-head,.chat-header,.chat-details-head,.m-messenger-appbar,.m-chat-header,.m-chat-composer) {
  background-color: var(--su-dark-chrome);
  border-color: var(--su-dark-border);
}

html[data-theme="dark"] body[data-route="messages"] :is(.conversation-search,.conversation-item:hover,.m-contacts-search,.m-contact-row:hover) {
  background-color: var(--su-dark-panel-raised);
}

html[data-theme="dark"] body[data-route="messages"] :is(.conversation-item.active,.m-contact-row.active),
html[data-theme="dark"] body[data-route="notifications"] .notification-row.unread,
html[data-theme="dark"] body:is([data-route="feed"],[data-route="posts"]) :is(.feed-filter,.posts-filter) button.active {
  background: linear-gradient(90deg, rgba(229,190,112,.10), rgba(229,190,112,.025));
}

html[data-theme="dark"] body[data-route="messages"] :is(.chat-body,.m-chat-thread) {
  background:
    radial-gradient(circle at 12% 0%, rgba(229,190,112,.045), transparent 32rem),
    #101519;
}

html[data-theme="dark"] body[data-route="messages"] :is(.msg-chat__bubble,.m-message-bubble) {
  box-shadow: 0 5px 16px rgba(0,0,0,.20);
}

html[data-theme="dark"] body[data-route="messages"] :is(.msg-chat__row--out .msg-chat__bubble,.m-message.outgoing .m-message-bubble) {
  color: var(--su-gold-ink) !important;
}

/* Profil firmy: obrysowe "Obserwuj" nie jest pelnym zlotym CTA.
   Selektor musi wygrac ze wspolna regula .profile-action-primary powyzej. */
html[data-theme="dark"] body[data-page="company-profile"]
  .company-profile-cta [data-company-follow]:not(.following) {
  color: var(--gold-bright) !important;
  background: var(--su-dark-panel-raised) !important;
  border-color: color-mix(in srgb, var(--gold) 72%, var(--su-dark-border-strong)) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body[data-page="company-profile"]
  .company-profile-cta [data-company-follow]:not(.following):is(:hover,:focus-visible) {
  color: var(--gold-light) !important;
  background: color-mix(in srgb, var(--gold) 10%, var(--su-dark-panel-hover)) !important;
  border-color: var(--gold-bright) !important;
}

html[data-theme="dark"] body[data-page="company-profile"]
  .company-profile-cta [data-company-follow].following {
  color: var(--su-gold-ink) !important;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] body[data-page="company-profile"]
  .company-profile-cta [data-company-follow] :is(i,span) {
  color: inherit !important;
}

/* Linki w komentarzach: ten sam wyglad w listach i lightboxie publikacji. */
body:is([data-page="feed"], [data-page="feed-tags"], [data-page="video-short"], [data-page="video-watch"], [data-page="posts"], [data-page="user-profile"])
  :is(.full-comment, .full-comment > div, .full-comment-bubble) {
  min-width: 0;
}

body:is([data-page="feed"], [data-page="feed-tags"], [data-page="video-short"], [data-page="video-watch"], [data-page="posts"], [data-page="user-profile"])
  .full-comment-bubble .su-comment-text {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

body:is([data-page="feed"], [data-page="feed-tags"], [data-page="video-short"], [data-page="video-watch"], [data-page="posts"], [data-page="user-profile"])
  .full-comment-bubble .su-comment-link {
  color: color-mix(in srgb, var(--gold-deep) 80%, var(--text));
  font-weight: 600;
  /* Nadpisuje globalny reset text-decoration: none !important. */
  text-decoration: underline solid currentColor 1px !important;
  text-underline-offset: .15em;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

body:is([data-page="feed"], [data-page="feed-tags"], [data-page="video-short"], [data-page="video-watch"], [data-page="posts"], [data-page="user-profile"])
  .full-comment-bubble .su-comment-link:is(:hover, :focus-visible) {
  color: var(--text);
}

body:is([data-page="feed"], [data-page="feed-tags"], [data-page="video-short"], [data-page="video-watch"], [data-page="posts"], [data-page="user-profile"])
  .full-comment-bubble .su-comment-link:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
  border-radius: 2px;
}