/* YesOnline — modern UI */
:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --accent: #06b6d4;
    --bg: #0f172a;
    --bg-soft: #1e293b;
    --page-bg: #f8fafc;
    --surface: #ffffff;
    --surface-alt: #f1f5f9;
    --surface-muted: #f1f5f9;
    --surface-glass: rgba(255, 255, 255, 0.92);
    --text: #3d4f63;
    --muted: #6b7c93;
    --border: #e2e8f0;
    --hover-bg: #f8fafc;
    --nav-active-bg: #eff6ff;
    --workzone-bg: #eef2f7;
    --success: #10b981;
    --error: #ef4444;
    --danger: #ef4444;
    --warning: #f59e0b;
    --turmeric-dark: #7a4f08;
    --info: #3b82f6;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
    /* UI_CRUD_STANDARDS theme aliases */
    --primary-color: var(--primary);
    --secondary-color: var(--primary-dark);
    --accent-color: var(--accent);
    --background-color: var(--page-bg);
    --surface-color: var(--surface);
    --text-color: var(--text);
    --border-color: var(--border);
}

/* Font sizing — medium matches current default (html 100%, body 0.875rem) */
html[data-font-size="small"] { font-size: 87.5%; }
html[data-font-size="medium"],
html:not([data-font-size]) { font-size: 100%; }
html[data-font-size="large"] { font-size: 112.5%; }
html[data-font-size="x-large"] { font-size: 125%; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    width: 100%;
    overflow-x: clip;
}

body {
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--page-bg);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 400;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    line-height: 1.55;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Site header — goodwill + navbar (dashboard + home use fixed via body class) */
.site-header-sticky {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    width: 100%;
    /* Keep the logo below the camera/status bar when the page is edge-to-edge. */
    padding-top: env(safe-area-inset-top, 0px);
}
.site-header-sticky .site-goodwill-bar {
    position: relative;
    top: auto;
    z-index: 1;
}
.site-header-sticky .navbar {
    position: relative;
    top: auto;
    z-index: 2;
}

/* Home / landing — fixed header (goodwill + navbar stay on screen) */
body.landing-page .site-header-sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 400;
    width: 100%;
    background: var(--page-bg);
    box-shadow: 0 1px 0 var(--border);
}
body.landing-page .site-goodwill-bar {
    position: relative !important;
    top: auto !important;
}
body.landing-page .navbar {
    position: relative !important;
    top: auto !important;
}
body.landing-page .main-content {
    max-width: 100%;
    padding: 0;
    padding-top: var(--site-sticky-top, var(--dash-sticky-top, 7rem)) !important;
}
body.landing-page {
    scroll-padding-top: calc(var(--site-sticky-top, var(--dash-sticky-top, 7rem)) + 0.75rem);
    overflow-x: clip;
    max-width: 100%;
}
body.landing-page .site-goodwill-inner {
    max-width: min(1200px, 100%);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}
body.landing-page .site-header-sticky .navbar-inner {
    max-width: min(1200px, 100%);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
html {
    scroll-padding-top: calc(var(--site-sticky-top, var(--dash-sticky-top, 7rem)) + 0.75rem);
}
body.landing-page .hero-section,
body.landing-page .section-block,
body.landing-page .home-site-stats,
body.landing-page #app-review {
    scroll-margin-top: calc(var(--site-sticky-top, var(--dash-sticky-top, 7rem)) + 0.75rem);
}
body.site-nav-open .site-header-sticky {
    /* Above site-nav-backdrop (710) so mobile nav links receive clicks */
    z-index: 800 !important;
}
body.user-menu-mobile-active .site-header-sticky,
body.impersonation-menu-mobile-active .site-header-sticky {
    /* Above menu backdrop (1000); dropdown itself is on body at 1020 */
    z-index: 1010 !important;
}

/* Site goodwill bar (header top) */
.site-goodwill-bar {
    background: linear-gradient(90deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
    color: #f8fafc;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    z-index: 110;
    overflow: hidden;
}
.site-goodwill-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.35rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.site-goodwill-scores {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}
.site-goodwill-degree {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    transition: transform 0.35s ease, font-size 0.35s ease, opacity 0.35s ease;
}
.site-goodwill-bar.is-intro:not(.is-compact) .site-goodwill-degree {
    /* Static start size so WebView / reduced-motion still shows the intro look */
    transform: scale(1.35);
    font-size: 1.05rem;
    opacity: 1;
    animation: site-goodwill-degree-intro 2.5s ease forwards;
}
@keyframes site-goodwill-degree-intro {
    0%, 18% {
        transform: scale(1.35);
        font-size: 1.05rem;
        opacity: 1;
    }
    100% {
        transform: scale(1);
        font-size: 0.78rem;
        opacity: 0.95;
    }
}
.site-goodwill-bar.is-compact .site-goodwill-degree {
    animation: none;
    transform: scale(1);
    font-size: 0.78rem;
    opacity: 0.95;
}
.site-goodwill-trophy { font-size: 1.1em; filter: drop-shadow(0 0 6px rgba(251,191,36,0.45)); }
.site-goodwill-degree.is-degree-1 .site-goodwill-trophy { color: #fbbf24; }
.site-goodwill-degree.is-degree-2 .site-goodwill-trophy { color: #cbd5e1; }
.site-goodwill-degree.is-degree-3 .site-goodwill-trophy { color: #d97706; }
.site-goodwill-label { opacity: 0.85; font-size: 0.92em; }
.site-goodwill-amount { letter-spacing: 0.01em; }
.site-goodwill-sep { opacity: 0.35; margin: 0 0.15rem; font-weight: 400; }
.site-goodwill-credit {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.site-goodwill-credit-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.2;
}
.site-goodwill-credit-link:hover { color: #fff; text-decoration: none; }
.site-goodwill-credit-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.site-goodwill-credit-icon {
    font-size: 1.05em;
    line-height: 1;
    animation: site-goodwill-icon-pulse 2.4s ease-in-out infinite;
}
.site-goodwill-icon-credits { filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.55)); }
.site-goodwill-icon-booster { filter: drop-shadow(0 0 5px rgba(147, 197, 253, 0.5)); animation-delay: 0.4s; }
.site-goodwill-icon-live { filter: drop-shadow(0 0 5px rgba(134, 239, 172, 0.45)); animation-delay: 0.8s; }
@keyframes site-goodwill-icon-pulse {
    0%, 100% { transform: scale(1); opacity: 0.92; }
    50% { transform: scale(1.12); opacity: 1; }
}
.site-goodwill-credit-val {
    color: #fde68a;
    font-size: 1.02em;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.site-goodwill-booster .site-goodwill-credit-val { color: #bbf7d0; }
.site-goodwill-live .site-goodwill-credit-val { color: #e9d5ff; }
.site-goodwill-booster { position: relative; }
.site-goodwill-booster-fly {
    position: fixed;
    z-index: 12000;
    font-weight: 800;
    color: #bbf7d0;
    text-shadow: 0 0 12px rgba(187, 247, 208, 0.85);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1.1s ease, font-size 1.1s ease;
}
.site-goodwill-booster-fly.is-animating {
    transform: translate(calc(50vw - 4rem), calc(-50vh + 2rem)) scale(0.55);
    opacity: 1;
    font-size: 0.85rem;
}
.site-goodwill-booster strong { color: #93c5fd; }
.site-goodwill-live { opacity: 0.95; font-size: inherit; }
@media (max-width: 768px) {
    .site-goodwill-inner { padding: 0.3rem 0.65rem; row-gap: 0.15rem; }
    .site-goodwill-credit { gap: 0.35rem 0.55rem; }
    .site-goodwill-credit-link { gap: 0.35rem 0.55rem; font-size: 0.82rem; line-height: 1.05; }
    .site-goodwill-scores { line-height: 1.1; }
}

/* Credit wallet panel — compact stats (00203) */
.credit-wallet-stats {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.4rem 0 0.55rem;
}
.cw-stats-main {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.35rem;
}
.cw-stats-aux {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.45rem;
}
.cw-stats-aux .credit-stat-pill--adv {
    flex: 0 1 9.5rem;
    max-width: 11rem;
}
.cw-stats-aux .credit-stat-pill--absence {
    flex: 0 0 auto;
    min-width: 5.5rem;
    margin-left: auto;
}
.credit-stat-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.32rem 0.35rem 0.28rem;
    border-radius: 0.45rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    color: var(--text);
    min-width: 0;
    text-align: center;
    line-height: 1.15;
}
.credit-stat-pill strong {
    font-size: 0.95rem;
    font-weight: 750;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}
.credit-stat-pill span {
    font-size: 0.62rem;
    color: var(--muted);
    margin-top: 0.08rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.credit-stat-pill--live {
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-alt));
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.credit-stat-pill--live strong { font-size: 1.05rem; }
.cw-pfn-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}
.cw-pfn-split-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.28rem 0.4rem;
    border-radius: 0.45rem;
    border: 1px solid var(--border);
    background: var(--surface-alt);
    min-width: 0;
}
.cw-pfn-split-block strong {
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.cw-pfn-split-block span {
    font-size: 0.62rem;
    color: var(--muted);
    text-align: center;
}
.cw-pfn-split-block[data-credit-stat="will-verified"] {
    border-color: color-mix(in srgb, var(--success, #16a34a) 45%, var(--border));
    background: color-mix(in srgb, var(--success, #16a34a) 10%, var(--surface-alt));
}
.cw-pfn-split-block[data-credit-stat="unverified"] {
    border-color: color-mix(in srgb, var(--warning, #d97706) 45%, var(--border));
    background: color-mix(in srgb, var(--warning, #d97706) 12%, var(--surface-alt));
}
.credit-stat-pill--btn {
    cursor: pointer;
    font: inherit;
    appearance: none;
    color: inherit;
}
.credit-stat-pill--btn:hover,
.credit-stat-pill--btn.is-selected {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 18%, transparent);
}
.credit-stat-pill--absence strong { color: var(--danger); }
.credit-stat-pill--absence.has-absence {
    background: color-mix(in srgb, var(--danger) 12%, var(--surface-alt));
}
.credit-stat-pill--positive strong { color: var(--success, #16a34a); }
@media (max-width: 900px) {
    .cw-stats-main {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 520px) {
    .cw-stats-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.3rem;
    }
    .cw-stats-main .credit-stat-pill--live {
        grid-column: 1 / -1;
    }
    .credit-stat-pill { padding: 0.28rem 0.3rem; }
    .credit-stat-pill strong { font-size: 0.9rem; }
    .credit-stat-pill span { font-size: 0.58rem; }
    .cw-stats-aux .credit-stat-pill--adv { flex: 1 1 auto; max-width: none; }
}
.credit-log-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.45rem;
}
.credit-log-tabs {
    display: inline-flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.credit-log-tab {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 8px;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}
.credit-log-tab.is-active {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary);
}
.credit-log-table {
    width: max-content;
    min-width: 46rem;
    table-layout: auto;
}
#credit-log-card .table-wrap.users-table-shell {
    overflow: visible;
    max-width: 100%;
    min-width: 0;
}
#credit-log-card .table-wrap .credit-log-table.admin-table {
    min-width: 46rem;
    width: max-content;
}
.credit-log-table .cl-col-date { min-width: 7.5rem; white-space: nowrap; }
.credit-log-table .cl-col-booster { min-width: 5rem; text-align: center; white-space: nowrap; }
.credit-log-table .cl-col-num {
    min-width: 6.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.credit-log-table .cl-col-note {
    min-width: 10rem;
    white-space: nowrap;
}
.credit-log-table--login .cl-col-num { min-width: 6rem; }
.credit-log-table--absence { min-width: 40rem; }
.credit-log-pager {
    margin: 0.65rem 0 0;
    gap: 0.75rem;
}
.credit-log-pager .pagination-link {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font: inherit;
}
.credit-log-pager .pagination-link:disabled,
.credit-log-pager .pagination-link.is-disabled {
    opacity: 0.45;
    cursor: default;
    text-decoration: none;
    pointer-events: none;
}
.credit-absence-minus { color: var(--danger); font-weight: 600; }
.credit-activity-list { list-style: none; padding: 0; margin: 0.35rem 0 0; }
.credit-activity-list li { padding: 0.25rem 0; opacity: 0.65; }
.credit-activity-list li.is-done { opacity: 1; color: var(--success, #16a34a); }
.credit-activity-list li.is-done::before { content: "✓ "; }
.credit-activity-list li.credit-referral-block { opacity: 1; }
.credit-activity-list li.credit-referral-block:not(.is-done) .credit-referral-toggle { opacity: 0.65; }
.credit-act-ratio { margin-left: 0.35rem; font-weight: 650; }
.credit-today-tasks {
    margin: 0.85rem 0 0.35rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius, 0.65rem);
    background: color-mix(in srgb, var(--accent, var(--primary)) 8%, var(--surface, var(--bg)));
}
.credit-today-tasks-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
}
.credit-today-tasks-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.credit-today-tasks-progress {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent, var(--primary));
    letter-spacing: 0.02em;
}
.credit-today-tasks-nudge {
    margin: 0.45rem 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.65rem;
}
.credit-today-tasks-nudge[hidden] {
    display: none !important;
}
.credit-today-tasks-nudge.is-complete {
    color: var(--success, #16a34a);
}
.credit-session-timer {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 0.2rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    color: var(--accent, var(--primary));
    white-space: nowrap;
}
.credit-session-countdown {
    font-size: calc(0.88rem + 2px);
    font-weight: 800;
}
.credit-session-end-wrap {
    font-size: 0.88rem;
    font-weight: 400;
    color: var(--muted);
}
.credit-session-end-at {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.credit-stat-pill--adv {
    position: relative;
}
.credit-stat-pill--adv.is-complete {
    border-color: color-mix(in srgb, var(--success, #16a34a) 45%, var(--border));
    background: color-mix(in srgb, var(--success, #16a34a) 14%, var(--surface, var(--bg)));
}
.credit-stat-pill--adv.is-complete strong {
    color: var(--success, #16a34a);
}
.credit-stat-tick {
    position: absolute;
    top: 0.25rem;
    right: 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--success, #16a34a);
}
.credit-referral-triple { letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.credit-referral-cap { font-weight: 600; white-space: nowrap; }
.credit-referral-block { list-style: none; margin: 0; padding: 0; }
.credit-referral-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
}
.credit-referral-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
}
.credit-my-tree-btn {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    opacity: 1;
}
.credit-my-tree-btn:hover {
    background: color-mix(in srgb, var(--primary) 22%, var(--surface));
    text-decoration: none;
}
.credit-referral-toggle:hover .credit-referral-triple { color: var(--primary); text-decoration: underline; }
.credit-referral-collapse {
    margin-top: 0.45rem;
    padding: 0.55rem 0.35rem 0.15rem;
    border-top: 1px dashed var(--border);
}
.credit-referral-collapse[hidden] { display: none !important; }
.credit-referral-collapse-hint { margin: 0 0 0.45rem; font-size: 0.78rem; }
.credit-referral-wrap { margin-top: 0.15rem; }
.credit-referral-table .cte-col-refcred,
.credit-referral-table .cte-col-login-status {
    min-width: 5.5rem;
    vertical-align: middle;
}
.credit-referral-table th.cte-col-refcred,
.credit-referral-table th.cte-col-login-status {
    font-size: 0.72rem;
    line-height: 1.25;
    font-weight: 600;
}
.credit-referral-table .cte-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
.credit-referral-table .cte-login-line {
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.25;
    white-space: nowrap;
}
.credit-referral-table .cte-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
}
.credit-referral-table .cte-status-pill.is-active {
    background: color-mix(in srgb, var(--success, #16a34a) 16%, transparent);
    color: var(--success, #15803d);
}
.credit-referral-table .cte-status-pill.is-inactive {
    background: color-mix(in srgb, var(--warning, #d97706) 16%, transparent);
    color: var(--warning, #b45309);
}
.credit-referral-table .cte-status-pill.is-passive {
    background: color-mix(in srgb, var(--muted, #64748b) 18%, transparent);
    color: var(--muted, #64748b);
}
.credit-wallet-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* 00203 — Office goodwill degree track (turmeric) */
.cw-goodwill-card {
    --cw-gw-turmeric: #d4a017;
    --cw-gw-turmeric-deep: #b8860b;
    --cw-gw-turmeric-soft: color-mix(in srgb, #d4a017 18%, transparent);
    --cw-gw-rail: color-mix(in srgb, var(--cw-gw-turmeric) 28%, var(--border));
    margin-bottom: 0.75rem;
    padding-top: 0.7rem;
    padding-bottom: 0.55rem;
}
[data-theme="dim"] .cw-goodwill-card,
[data-theme="dark"] .cw-goodwill-card {
    --cw-gw-turmeric: #e6b422;
    --cw-gw-turmeric-deep: #f0c14a;
    --cw-gw-turmeric-soft: color-mix(in srgb, #e6b422 22%, transparent);
}
.cw-goodwill-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}
.cw-goodwill-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.01em;
}
.cw-goodwill-total {
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--cw-gw-turmeric-deep);
}
.cw-goodwill-track {
    position: relative;
    width: 100%;
    padding: 0.15rem 0 0.1rem;
}
.cw-goodwill-rail {
    position: absolute;
    left: 0.35rem;
    right: 0.35rem;
    top: 0.72rem;
    height: 0.28rem;
    border-radius: 999px;
    background: var(--cw-gw-rail);
    overflow: hidden;
    z-index: 0;
}
.cw-goodwill-rail-fill {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cw-gw-turmeric), var(--cw-gw-turmeric-deep));
    transition: width 0.45s ease;
}
.cw-goodwill-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    position: relative;
    z-index: 1;
}
.cw-goodwill-step {
    flex: 0 0 auto;
    width: 4.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.12rem;
}
.cw-goodwill-dot {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    background: var(--surface, #fff);
    border: 2px solid var(--cw-gw-rail);
    box-shadow: 0 0 0 3px var(--cw-gw-turmeric-soft);
    margin-top: 0.42rem;
}
.cw-goodwill-step.is-reached .cw-goodwill-dot,
.cw-goodwill-step.is-degree.is-reached .cw-goodwill-dot {
    background: var(--cw-gw-turmeric);
    border-color: var(--cw-gw-turmeric-deep);
}
.cw-goodwill-step.is-bridge .cw-goodwill-dot {
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.5rem;
    border-style: dashed;
    opacity: 0.85;
}
.cw-goodwill-deg {
    font-size: 0.68rem;
    font-weight: 750;
    color: var(--muted);
    line-height: 1.1;
}
.cw-goodwill-step.is-reached .cw-goodwill-deg {
    color: var(--cw-gw-turmeric-deep);
}
.cw-goodwill-amt {
    font-size: 0.66rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    line-height: 1.15;
    white-space: nowrap;
}
.cw-goodwill-bridge-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.cw-goodwill-step.is-bridge {
    position: relative;
    width: 3.2rem;
}
.cw-goodwill-step.is-bridge:hover .cw-goodwill-bridge-hint,
.cw-goodwill-step.is-bridge:focus-within .cw-goodwill-bridge-hint {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0.15rem;
    width: auto;
    height: auto;
    clip: auto;
    overflow: visible;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--cw-gw-turmeric-deep);
    background: var(--cw-gw-turmeric-soft);
    border: 1px solid color-mix(in srgb, var(--cw-gw-turmeric) 40%, var(--border));
    white-space: nowrap;
    z-index: 2;
}
.cw-goodwill-note {
    margin: 0.4rem 0 0;
    font-size: 0.7rem;
    line-height: 1.35;
    color: var(--muted);
}
.cw-goodwill-note strong {
    color: var(--cw-gw-turmeric-deep);
    font-weight: 700;
}
.cw-gdp {
    margin: 0.75rem 0 0.35rem;
    text-align: center;
    /* Base size = amount; caption uses 50% of this */
    font-size: clamp(1.45rem, 4.2vw, 2rem);
}
.cw-gdp-caption {
    margin: 0;
    font-size: 50%;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    color: var(--muted);
}
.cw-gdp-amount {
    margin: 0.12rem 0 0;
    font-size: 1em;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--cw-gw-turmeric-deep, var(--text));
}
.cw-gdp-label {
    margin: 0.28rem 0 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted);
    line-height: 1.3;
}
@media (max-width: 560px) {
    .cw-goodwill-step.is-degree { width: 3.6rem; }
    .cw-goodwill-amt { font-size: 0.6rem; }
    .cw-goodwill-total { font-size: 0.7rem; }
    .cw-gdp { font-size: 1.35rem; }
    .cw-gdp-label { font-size: 0.66rem; }
}

.my-finance-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    margin: 0.45rem 0 0;
}
.my-finance-filter-panel {
    margin: 0 0 0.7rem;
    border: 1px solid color-mix(in srgb, var(--border) 88%, var(--text) 12%);
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--surface-alt, var(--bg-elevated)) 70%, transparent);
    padding: 0.15rem 0.55rem 0.45rem;
}
.my-finance-filter-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    list-style: none;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    padding: 0.35rem 0.1rem;
    user-select: none;
}
.my-finance-filter-summary::-webkit-details-marker { display: none; }
.my-finance-filter-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--muted);
    transform: rotate(-90deg);
    transition: transform 0.15s ease;
}
.my-finance-filter-panel[open] > .my-finance-filter-summary .my-finance-filter-chevron {
    transform: rotate(90deg);
}
.my-finance-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted, var(--text));
}
.my-finance-filter-field select {
    min-width: 7.5rem;
    max-width: 12rem;
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.28rem 0.45rem;
}
@media (max-width: 768px) {
    .my-finance-filter-panel:not([open]) {
        padding-bottom: 0.15rem;
    }
    .my-finance-filter-field select {
        min-width: 0;
        max-width: none;
        width: 100%;
    }
    .my-finance-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .my-finance-filters .btn {
        align-self: stretch;
    }
}
/* Native <details> collapse: closed = chevron down, open = chevron up */
details.settings-section-collapsible > summary.settings-section-toggle {
    list-style: none;
}
details.settings-section-collapsible > summary.settings-section-toggle::-webkit-details-marker {
    display: none;
}
details.settings-section-collapsible:not([open]) > summary .settings-section-chevron {
    transform: rotate(-90deg);
}
details.settings-section-collapsible[open] > summary .settings-section-chevron {
    transform: rotate(90deg);
}

#my-finance-history-card .table-wrap {
    border-radius: 0.4rem;
    border-color: color-mix(in srgb, var(--border) 85%, var(--text) 15%);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
}
#my-finance-history-card .my-finance-table.admin-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: 0.72rem;
    border-collapse: separate;
    border-spacing: 0;
}
#my-finance-history-card .my-finance-table th,
#my-finance-history-card .my-finance-table td {
    padding: 0.32rem 0.4rem;
    vertical-align: middle;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    line-height: 1.3;
}
#my-finance-history-card .my-finance-table thead th {
    background: color-mix(in srgb, var(--surface-alt, var(--bg-elevated)) 88%, var(--accent) 12%);
    color: var(--text-muted, var(--text));
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
#my-finance-history-card .my-finance-table tbody tr:nth-child(even) {
    background: color-mix(in srgb, var(--surface-alt, var(--bg)) 55%, transparent);
}
#my-finance-history-card .my-finance-table tbody tr:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.my-finance-table .mf-col-sn { width: 2.1rem; text-align: center; color: var(--text-muted, var(--text)); }
.my-finance-table .mf-col-dt { width: 7.2rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.my-finance-table .mf-col-particular {
    width: 18%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.my-finance-table .mf-col-remarks {
    width: 22%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted, var(--text));
}
.my-finance-table .mf-col-num {
    width: 4.4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.my-finance-table .mf-col-stat { width: 3.2rem; text-align: center; }
.my-finance-table .mf-col-paid { width: 3.4rem; text-align: center; }
.my-finance-table .mf-col-status { width: 9.5rem; }
.mf-paid-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 750;
    color: var(--primary);
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.mf-pay-status {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.3;
    color: var(--muted);
}
.mf-pay-status.is-pending {
    color: var(--warning, #b45309);
}
.mf-pay-status.is-complete {
    color: var(--primary);
}
.my-finance-pager { margin-top: 0.55rem; }
#my-finance-history-card .field-hint { font-size: 0.75rem; margin-bottom: 0.55rem; }
#my-finance-history-card .acc-status {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    border-radius: 0.2rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
#my-finance-history-card .acc-status--on {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
}
#my-finance-history-card .acc-status--off {
    background: color-mix(in srgb, var(--text) 10%, transparent);
    color: var(--text-muted, var(--text));
}
.credit-act-boost { color: var(--success, #16a34a); font-weight: 600; margin-left: 0.25rem; }
.credit-stat-pill--positive strong { color: var(--success, #16a34a); }
.credit-top-earners-modal { width: min(960px, 100%); max-height: min(88vh, 42rem); overflow: auto; }
.credit-top-earners-wrap { margin-top: 0.35rem; border-radius: var(--radius-lg); overflow: hidden; }
.credit-top-earners-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.82rem;
}
.credit-top-earners-table thead th {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, #312e81 12%), color-mix(in srgb, var(--primary-dark) 92%, #0f172a 8%));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.65rem 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--primary-dark) 70%, #000 30%);
    white-space: nowrap;
}
.credit-top-earners-table tbody td {
    padding: 0.72rem 0.55rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
    line-height: 1.35;
}
.credit-top-earners-table tbody tr:last-child td { border-bottom: none; }
.cte-col-rank { width: 2.1rem; text-align: center; padding-inline: 0.25rem !important; }
.cte-col-user { min-width: 9.5rem; }
.cte-col-credit { min-width: 5.5rem; text-align: right; }
.cte-col-ref { width: 4.6rem; text-align: center; }
.cte-col-fb { width: 4.8rem; text-align: center; }
.cte-col-quality { min-width: 6.8rem; }
.cte-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    background: color-mix(in srgb, var(--surface) 82%, var(--primary) 18%);
    color: var(--primary-dark);
    border: 1px solid color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
}
.cte-row--gold { background: linear-gradient(90deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.04)); }
.cte-row--silver { background: linear-gradient(90deg, rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.05)); }
.cte-row--bronze { background: linear-gradient(90deg, rgba(217, 119, 6, 0.14), rgba(217, 119, 6, 0.04)); }
.cte-row--alt-a { background: color-mix(in srgb, var(--primary) 4%, var(--surface) 96%); }
.cte-row--alt-b { background: color-mix(in srgb, var(--accent) 5%, var(--surface) 95%); }
.cte-row--gold .cte-rank-badge { background: #fbbf24; color: #78350f; border-color: #f59e0b; }
.cte-row--silver .cte-rank-badge { background: #cbd5e1; color: #334155; border-color: #94a3b8; }
.cte-row--bronze .cte-rank-badge { background: #fdba74; color: #7c2d12; border-color: #ea580c; }
.cte-user-cell { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.cte-avatar {
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid color-mix(in srgb, var(--primary) 35%, var(--border) 65%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}
.cte-avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cte-avatar--placeholder {
    background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 72%, #fff 28%), var(--primary-dark));
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}
.cte-user-meta { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.cte-user-name { font-weight: 700; color: var(--text); font-size: 0.84rem; line-height: 1.25; word-break: break-word; }
.cte-user-id { font-size: 0.68rem; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.02em; word-break: break-all; }
.cte-credit-pill {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 3rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--surface) 86%), color-mix(in srgb, var(--accent) 10%, var(--surface) 90%));
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border) 72%);
    color: var(--primary-dark);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.cte-ref-val, .cte-fb-count { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.cte-fb-count { color: color-mix(in srgb, var(--primary-dark) 80%, var(--text) 20%); }
.cte-quality { display: flex; flex-direction: column; align-items: center; gap: 0.12rem; }
.cte-stars { display: inline-flex; gap: 0.05rem; line-height: 1; }
.cte-star { color: #cbd5e1; font-size: 0.92rem; }
.cte-star.is-on { color: #f59e0b; text-shadow: 0 0 0.35rem rgba(245, 158, 11, 0.35); }
.cte-star.is-half {
    position: relative;
    display: inline-block;
    color: #cbd5e1;
}
.cte-star.is-half::before {
    content: '★';
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    overflow: hidden;
    color: #f59e0b;
    text-shadow: 0 0 0.35rem rgba(245, 158, 11, 0.35);
}
.credit-top-earners-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.65rem 0 0.35rem;
}
.credit-top-earners-tab {
    border: 1px solid var(--border);
    background: var(--surface-alt);
    color: var(--text);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.credit-top-earners-tab.is-active {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    color: var(--primary);
}
.credit-top-earners-tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.cte-quality-num { font-size: 0.64rem; font-weight: 700; color: var(--muted); }
.cte-quality-empty { color: var(--muted); font-size: 0.82rem; }
[data-theme="dark"] .credit-top-earners-table tbody td { border-bottom-color: var(--border); }
[data-theme="dark"] .cte-row--alt-a { background: color-mix(in srgb, var(--primary) 8%, var(--surface) 92%); }
[data-theme="dark"] .cte-row--alt-b { background: color-mix(in srgb, var(--accent) 7%, var(--surface) 93%); }
[data-theme="dark"] .cte-credit-pill {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface) 82%);
    color: #e0e7ff;
}
.profile-kyc-badge--verified { color: #16a34a; border-color: #86efac; }
.profile-kyc-badge--incomplete { color: #b45309; border-color: #fcd34d; }
.profile-hero-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.2rem;
    font-size: 1.35rem;
}
.profile-name-kyc {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    vertical-align: middle;
}
.profile-name-kyc--verified { color: #15803d; background: #ecfdf5; border-color: #86efac; }
.member-id-status--ok { color: var(--success); font-weight: 600; }
.member-id-status--wait {
    margin: 0.85rem 0 0;
    text-align: center;
    color: var(--turmeric-dark);
    font-weight: 600;
}
.member-id-photos { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.75rem 0 1rem; }
.member-id-photos figure { margin: 0; }
.member-id-photos figcaption { margin-bottom: 0.35rem; }
.member-id-photos img { display: block; max-width: 280px; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; }
.member-id-list-card { padding: 0; overflow: hidden; }
.member-id-list-card .empty-msg { padding: 1rem 1.15rem; }
.member-id-table { min-width: 0; }
.member-id-table tbody tr:nth-child(even) { background: var(--surface-alt); }
.member-id-table td { vertical-align: middle; }
.member-id-view-cell { text-align: right; white-space: nowrap; }
.member-id-wait-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--turmeric-dark);
    background: color-mix(in srgb, var(--turmeric-dark) 14%, var(--surface));
}
.member-id-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.member-id-modal[hidden] { display: none !important; }
.member-id-modal-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--bg) 35%, transparent);
}
.member-id-modal-card {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    margin: 0;
    padding: 1.25rem 1.35rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}
.member-id-modal-card h2 { margin: 0 2rem 0.15rem 0; font-size: 1.15rem; }
.member-id-modal-close {
    position: absolute;
    top: 0.45rem;
    right: 0.55rem;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}
.member-id-modal-card .member-id-photos img {
    max-height: 220px;
    object-fit: contain;
    background: var(--surface-alt);
}
.member-id-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin-top: 0.25rem;
}
.member-id-reject-form { flex: 1; min-width: 16rem; display: flex; flex-direction: column; gap: 0.45rem; }
.member-id-reason-label { font-weight: 600; font-size: 0.85rem; }
.member-id-reject-form textarea {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font: inherit;
    color: var(--text);
    background: var(--surface);
}
.member-id-reject-form .btn-danger {
    align-self: flex-start;
    border: 1px solid var(--danger);
    background: var(--danger);
    color: #fff;
}
.member-id-cause-menu {
    position: fixed;
    z-index: 90;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    width: min(320px, calc(100vw - 16px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
}
.member-id-cause-menu[hidden] { display: none !important; }
.member-id-cause-menu button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
}
.member-id-cause-menu button:hover { background: var(--hover-bg); }
.profile-name-kyc--incomplete { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
.profile-kyc-note-btn {
    cursor: pointer;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.profile-kyc-note-btn:hover,
.profile-kyc-note-btn:focus-visible {
    background: #fef3c7;
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.35);
    outline: none;
}
.user-menu-email-banner { display: block; }
.user-menu-kyc-line {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.74rem;
    font-weight: 700;
    color: #b45309;
    line-height: 1.25;
}
.dash-promo-slot { margin: 0.65rem 0; }
.dash-promo-slot--sidebar-top { margin-top: 0.35rem; }
.dash-promo-slot--sidebar-bottom { margin-bottom: 0.5rem; }
.dash-promo-slot--workzone-top {
    margin: 0 0 0.75rem;
    padding-bottom: 0.35rem;
}
.dash-promo-inner { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.dash-promo-slot--sidebar-top .dash-promo-inner,
.dash-promo-slot--sidebar-bottom .dash-promo-inner { flex-direction: column; }
.dash-promo-slot .promo-card-social,
.dash-promo-slot .ad-card-social {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    margin: 0;
}
.dash-promo-slot--workzone-top .dash-promo-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}
.dash-promo-slot--workzone-top .promo-card-social,
.dash-promo-slot--workzone-top .ad-card-social { min-width: 0; }
.dash-promo-slot--sidebar-top .promo-card-media,
.dash-promo-slot--sidebar-top .ad-card-media,
.dash-promo-slot--sidebar-bottom .promo-card-media,
.dash-promo-slot--sidebar-bottom .ad-card-media { height: 110px; }
.dash-promo-slot--right-top .promo-card-media,
.dash-promo-slot--right-top .ad-card-media,
.dash-promo-slot--right-bottom .promo-card-media,
.dash-promo-slot--right-bottom .ad-card-media { height: 120px; }
.dash-promo-slot--sidebar-top .promo-card-social .promo-card-title,
.dash-promo-slot--sidebar-top .ad-card-social .ad-card-title,
.dash-promo-slot--right-top .promo-card-social .promo-card-title,
.dash-promo-slot--right-top .ad-card-social .ad-card-title,
.dash-promo-slot--right-bottom .promo-card-social .promo-card-title,
.dash-promo-slot--right-bottom .ad-card-social .ad-card-title { font-size: 0.88rem; }
.dash-promo-slot--sidebar-top .promo-card-social .promo-card-desc,
.dash-promo-slot--sidebar-top .ad-card-social .ad-card-desc,
.dash-promo-slot--right-top .promo-card-social .promo-card-desc,
.dash-promo-slot--right-top .ad-card-social .ad-card-desc,
.dash-promo-slot--right-bottom .promo-card-social .promo-card-desc,
.dash-promo-slot--right-bottom .ad-card-social .ad-card-desc {
    font-size: 0.78rem;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dash-promo-slot .promo-card-static,
.dash-promo-slot .ad-card-static { cursor: default; }
.dash-promo-slot .promo-card-media,
.dash-promo-slot .ad-card-media { cursor: pointer; }
.right-promo-grid--cards {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.right-promo-grid--cards .promo-card-social,
.right-promo-grid--cards .ad-card-social { width: 100%; }
.dash-promo-placeholder {
    width: 100%;
    padding: 0.45rem 0.55rem;
    font-size: 0.72rem;
    color: var(--muted, #64748b);
    border: 1px dashed var(--border, #cbd5e1);
    border-radius: 0.45rem;
    text-align: center;
}
.right-promo-block + .right-promo-block { margin-top: 0.75rem; }
.right-promo-header--compact { margin-bottom: 0.35rem; }
.right-promo-header--compact .right-promo-title { font-size: 0.85rem; }
.profile-kyc-missing { margin-top: 0.35rem; }
.profile-kyc-missing .field-hint { margin: 0; }
.kyc-section-heading {
    margin: 1rem 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 700;
}
.kyc-section-heading:first-child { margin-top: 0; }
.kyc-req-label { display: block; margin: 0.35rem 0; }

/* Navbar */
.navbar {
    background: var(--surface-glass);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.site-goodwill-bar.is-compact ~ .navbar,
.site-goodwill-bar:not(.is-intro) ~ .navbar {
    top: 0;
}
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 2rem;
    max-width: min(1200px, 100%);
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
    position: relative;
    box-sizing: border-box;
}

.navbar-start {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.navbar-start-leading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    min-width: 0;
}
.navbar-start-brand-group {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    min-width: 0;
}
body:not(.dashboard-body) .navbar-start,
body:not(.dashboard-body) .navbar-start-leading {
    display: contents;
}
body:not(.dashboard-body) .navbar-start-brand-group {
    order: 1;
    flex-shrink: 0;
}
body:not(.dashboard-body) .navbar-links {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}
body:not(.dashboard-body) .navbar-actions {
    order: 3;
    flex-shrink: 0;
    min-width: 0;
}

.site-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}
.site-nav-toggle:hover,
.site-nav-toggle:focus-visible {
    border-color: var(--primary);
    color: var(--primary);
}
body.site-nav-open .site-nav-toggle {
    border-color: var(--primary);
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.site-nav-toggle-dots {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    width: 1rem;
    height: 1rem;
}
.site-nav-toggle-dots span {
    display: block;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 999px;
    background: currentColor;
}
.site-nav-backdrop {
    display: none;
}

.navbar-brand {
    padding: 0;
    margin: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.navbar-brand a {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.navbar-brand span { color: var(--primary); }

/* Dashboard mobile menu — hidden by default; shown only on dashboard + narrow screens */
.dash-sidebar-toggle {
    display: none;
}

/* Site logo (Site_Logo.jpg) */
.site-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: var(--text);
    line-height: 1;
}
.site-logo-link:hover {
    text-decoration: none;
    color: var(--text);
}
.site-logo-mark {
    display: block;
    flex-shrink: 0;
    width: auto;
    height: 3.15rem;
    padding: 0;
    margin: 0;
    line-height: 0;
    font-size: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}
.site-logo-img {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    width: auto;
    height: 3.15rem;
    max-height: 3.15rem;
    max-width: 3.35rem;
    object-fit: cover;
    object-position: center center;
    border-radius: 0;
    vertical-align: top;
    background: transparent;
    transform: scale(1.18);
    transform-origin: center center;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--text) 18%, transparent));
}
.site-logo-text {
    display: none;
}
.site-logo-accent { color: var(--primary); }
.site-logo-link--auth {
    flex-direction: column;
    gap: 0.25rem;
    justify-content: center;
    padding: 0;
}
.site-logo-mark--auth {
    padding: 0;
    margin: 0;
    border-radius: 0;
    width: auto;
    height: 5.5rem;
}
.site-logo-img--auth {
    width: auto;
    height: 5.5rem;
    max-height: 5.5rem;
    max-width: 5.8rem;
}
.site-logo-text--auth {
    font-size: 1.15rem;
}
.site-logo-link--compact {
    gap: 0.3rem;
    padding: 0;
}
.site-logo-mark--compact {
    border-radius: 0;
    padding: 0;
    margin: 0;
    width: auto;
    height: 2.7rem;
}
.site-logo-img--compact {
    width: auto;
    height: 2.7rem;
    max-height: 2.7rem;
    max-width: 2.9rem;
    border-radius: 0;
}
.site-logo-text--compact {
    font-size: 1rem;
}
@media (max-width: 768px) {
    .site-header-sticky {
        overflow: visible;
    }
    .site-logo-link {
        gap: 0;
        padding: 0;
    }
    .navbar-brand .site-logo-text {
        display: none;
    }
    .site-logo-img {
        width: auto;
        height: 2.65rem;
        max-height: 2.65rem;
        max-width: 2.85rem;
        background: transparent;
        transform: scale(1.22);
    }
    .site-logo-mark {
        height: 2.65rem;
        overflow: hidden;
    }
    .site-nav-toggle {
        display: inline-flex;
        flex-shrink: 0;
    }
    .navbar {
        width: 100%;
        max-width: 100%;
        overflow: visible;
        box-sizing: border-box;
    }
    .navbar-inner {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.6rem max(0.75rem, env(safe-area-inset-right, 0px)) 0.6rem max(0.75rem, env(safe-area-inset-left, 0px));
        position: relative;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Keep logo + user/actions on one horizontal row (home + dashboard) */
    .navbar-start,
    .navbar-start-leading {
        display: flex !important;
        flex: 1 1 auto;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem 0.5rem;
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }
    .navbar-start-brand-group {
        display: flex !important;
        flex-shrink: 0;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
        order: 0 !important;
    }
    .navbar-actions {
        display: flex !important;
        flex: 0 1 auto;
        flex-shrink: 1;
        flex-wrap: nowrap !important;
        align-items: center;
        justify-content: flex-end;
        gap: 0.35rem;
        margin-left: auto;
        min-width: 0;
        width: auto;
        max-width: none;
        order: 0 !important;
        position: static !important;
        grid-area: unset !important;
        justify-self: unset !important;
        overflow: visible;
    }
    .navbar-links,
    #site-nav-links {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: fixed;
        top: calc(var(--site-sticky-top, var(--dash-sticky-top, 7rem)) + 0.35rem);
        left: max(0.85rem, env(safe-area-inset-left, 0px));
        right: auto;
        flex: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        padding: 0.35rem;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
        width: min(12.5rem, calc(100vw - 1.7rem));
        z-index: 720;
        order: 0 !important;
    }
    body.site-nav-open .navbar-links,
    body.site-nav-open #site-nav-links {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 810;
    }
    #site-nav-links a {
        position: relative;
        z-index: 811;
        touch-action: manipulation;
        pointer-events: auto;
    }
    .navbar-links a {
        width: 100%;
        box-sizing: border-box;
        padding: 0.55rem 0.75rem;
        font-size: 0.88rem;
    }
    .site-nav-backdrop {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: var(--site-sticky-top, var(--dash-sticky-top, 7rem));
        z-index: 710;
        background: rgba(15, 23, 42, 0.28);
    }
    .site-nav-backdrop[hidden] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    .notification-menu,
    .nav-presence-group,
    .impersonation-menu,
    .pincode-toggle {
        flex-shrink: 0;
    }
    .notification-menu-trigger {
        padding: 0.15rem;
    }
    .navbar-actions > :not(.company-switcher):not(.user-menu) {
        flex-shrink: 1;
        min-width: 0;
    }
    .company-switcher {
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;
        margin-left: 0;
        overflow: visible;
    }
    .user-menu {
        flex: 0 0 auto;
        min-width: max-content;
        max-width: none;
        overflow: visible;
    }
    .user-menu-trigger {
        gap: 0.15rem;
        max-width: none;
        min-width: max-content;
        padding: 0.2rem 0.25rem;
        justify-content: flex-end;
    }
    .user-menu-id {
        overflow: visible;
        text-overflow: unset;
        white-space: nowrap;
        max-width: none;
        display: inline;
        vertical-align: bottom;
    }
    .impersonation-menu-trigger span:not([aria-hidden]) {
        display: none;
    }
    .impersonation-menu-trigger {
        padding: 0.25rem 0.35rem;
    }
}

@media (min-width: 769px) {
    .navbar-links {
        display: flex;
        gap: 0.25rem;
        flex: 1;
        justify-content: center;
    }
}

.navbar-links a {
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    transition: all 0.15s;
}

.navbar-links a.active,
.navbar-links a:hover {
    color: var(--primary);
    background: #eef2ff;
    text-decoration: none;
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

/* Text-style auth links (no button chrome) */
.nav-auth-link {
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
}
.nav-auth-link:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
    text-decoration: none;
}

.text-link-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.text-link-btn:hover {
    color: var(--primary-dark);
}

.login-submit-row {
    margin-top: 1.25rem;
    text-align: left;
}

/* Notification bell (separate from user menu) */
.notification-menu {
    position: relative;
}
.notification-menu-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25rem;
}
.notification-menu-trigger:hover,
.notification-menu-open .notification-menu-trigger {
    opacity: 0.85;
}
.notification-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: var(--error);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Online presence counters (header, left of notifications) */
.nav-presence-group {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.nav-presence-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    cursor: default;
}
.nav-presence-glow {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
    animation: nav-presence-pulse 2.4s ease-in-out infinite;
}
.nav-presence-glow-users {
    background: radial-gradient(circle at 35% 35%, #f5deb3, #8b5e34 72%);
}
.nav-presence-glow-friends {
    background: radial-gradient(circle at 35% 35%, #93c5fd, #1d4ed8 72%);
}
@keyframes nav-presence-pulse {
    0%, 100% { transform: scale(1); opacity: 0.92; }
    50% { transform: scale(1.08); opacity: 1; }
}
.nav-presence-badge {
    position: absolute;
    top: -0.38rem;
    right: -0.42rem;
    min-width: 1.05rem;
    height: 1.05rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.65);
}
.nav-presence-badge[hidden] {
    display: none !important;
}
.nav-presence-item[hidden] {
    display: none !important;
}
.nav-presence-badge-brown { background: #8b5e34; }
.nav-presence-badge-blue { background: #1d4ed8; }

.notification-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    width: 300px;
    max-width: 90vw;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0;
    z-index: 220;
}
.notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.65rem 0.35rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}
.notification-dropdown-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}
.notification-dropdown-close {
    position: relative;
    z-index: 5;
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    border-radius: var(--radius-sm, 4px);
    pointer-events: auto;
    touch-action: manipulation;
}
.notification-dropdown-close:hover {
    color: var(--text);
    background: var(--surface-alt, #f1f5f9);
}
.notification-menu-dropdown .notification-section-title:first-of-type,
.notification-menu-dropdown .notification-task-row:first-of-type,
.notification-menu-dropdown .notification-list:first-of-type {
    margin-top: 0;
}
.notification-menu-dropdown .notification-section-title,
.notification-menu-dropdown .notification-task-row,
.notification-menu-dropdown .notification-list,
.notification-menu-dropdown .notification-empty,
.notification-menu-dropdown .notification-divider {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}
.notification-menu-open .notification-menu-dropdown {
    display: block;
}

/* Mobile: dropdown teleported to #notification-mobile-host (see nav.js) — true screen center */
.notification-mobile-host {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 21000;
    pointer-events: none;
}
.notification-mobile-host.is-open {
    display: block;
    pointer-events: auto;
}
.notification-mobile-scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
}
.notification-mobile-host .notification-menu-dropdown {
    display: block !important;
    position: fixed;
    left: 50%;
    top: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(340px, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    max-height: min(75vh, 520px);
    overflow-y: auto;
    z-index: 21001;
    margin: 0;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
}
body.notification-mobile-active {
    overflow: hidden;
}
.notification-mobile-host .notification-dropdown-header {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--surface);
}
.notification-mobile-host .notification-dropdown-close {
    position: relative;
    z-index: 7;
    min-width: 2.75rem;
    min-height: 2.75rem;
    touch-action: manipulation;
}

/* Mobile: user menu backdrop + fixed dropdown (see nav.js) */
.user-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.42);
}
.user-menu-backdrop[hidden] {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
body.user-menu-mobile-active {
    overflow: hidden;
}
@media (max-width: 768px) {
    /* Navbar backdrop-filter would trap position:fixed. JS parks these on body.
       Horizontal center under the header — not vertical screen center. */
    body.user-menu-mobile-active .user-menu-dropdown,
    body.impersonation-menu-mobile-active .impersonation-menu-dropdown {
        display: block !important;
        position: fixed;
        left: 50%;
        right: auto;
        top: calc(var(--site-sticky-top, var(--dash-sticky-top, 7rem)) + 0.45rem);
        bottom: auto;
        transform: translateX(-50%);
        width: min(420px, calc(100vw - 1.5rem));
        max-width: calc(100vw - 1.5rem);
        max-height: min(70vh, 520px);
        overflow-y: auto;
        z-index: 1020;
        margin: 0;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
        pointer-events: auto;
        touch-action: manipulation;
    }
    body.user-menu-mobile-active .user-menu-dropdown {
        width: min(320px, calc(100vw - 1.5rem));
    }
    body.user-menu-mobile-active .user-menu-dropdown a,
    body.user-menu-mobile-active .user-menu-dropdown button {
        position: relative;
        z-index: 1;
        touch-action: manipulation;
    }
}

@media (max-width: 768px) {
    .notification-menu-open:not(:has(.notification-menu-dropdown)) .notification-menu-trigger {
        position: relative;
        z-index: 1002;
    }
}
.pincode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-muted, var(--text));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    flex-shrink: 0;
    white-space: nowrap;
}
.pincode-toggle-text-sm { display: none; }
.pincode-toggle:hover,
.pincode-toggle:has(input:checked) {
    border-color: var(--primary);
    color: var(--primary);
}
.pincode-toggle input {
    width: 0.85rem;
    height: 0.85rem;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}
.pincode-toggle-text,
.pincode-toggle-text-sm {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (max-width: 900px) {
    .pincode-toggle {
        padding: 0.28rem 0.4rem;
    }
    .pincode-toggle-text { display: none; }
    .pincode-toggle-text-sm { display: inline; }
}
.impersonation-menu {
    position: relative;
}
.impersonation-menu-trigger {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: 0.3rem 0.65rem;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
}
.impersonation-menu-trigger:hover,
.impersonation-menu-open .impersonation-menu-trigger {
    border-color: var(--primary);
    color: var(--primary);
}
.impersonation-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.45rem);
    width: min(420px, 94vw);
    max-height: 70vh;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0.6rem;
    z-index: 220;
}
.impersonation-menu-open .impersonation-menu-dropdown {
    display: block;
}
.impersonation-title {
    font-size: 0.84rem;
    font-weight: 700;
    margin-bottom: 0.45rem;
}
.impersonation-recent {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
    margin: 0 0 0.55rem;
}
.impersonation-recent-form {
    margin: 0;
    display: inline;
}
.impersonation-recent-chip {
    display: inline-flex;
    align-items: center;
    max-width: 7.5rem;
    padding: 0.22rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-alt, var(--bg-elevated)) 70%, var(--accent) 30%);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.impersonation-recent-chip:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--surface, var(--bg)) 82%);
    color: var(--accent);
}
.impersonation-recent:empty {
    display: none;
}
.impersonation-table-wrap {
    overflow: auto;
    max-height: calc(70vh - 2.1rem);
}
.impersonation-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    table-layout: fixed;
}
.impersonation-table th,
.impersonation-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.45rem 0.4rem;
    text-align: left;
    vertical-align: middle;
}
.impersonation-table th:first-child,
.impersonation-table td.impersonation-user-cell {
    width: auto;
    white-space: normal;
    word-break: break-word;
}
.impersonation-table th:last-child,
.impersonation-table td.impersonation-action-cell {
    width: 4.5rem;
    white-space: nowrap;
    text-align: right;
}
.impersonation-user-line {
    display: inline;
    line-height: 1.35;
}
.impersonation-table th {
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
}
.impersonation-th-user-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 0;
}
.impersonation-th-user-row > span {
    flex: 0 0 auto;
}
.impersonation-user-find {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 11rem;
    margin-left: auto;
    padding: 0.22rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-alt, var(--surface));
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 500;
}
.impersonation-user-find:focus {
    outline: none;
    border-color: var(--primary);
}
.impersonation-form {
    margin: 0;
    display: inline-flex;
}
.notification-task-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    text-decoration: none;
    color: var(--text);
}
.notification-task-row:hover {
    background: #f8fafc;
    text-decoration: none;
}
.notification-task-label {
    font-size: 0.88rem;
}
.notification-task-count {
    font-size: 0.82rem;
    color: var(--error);
    font-weight: 600;
}
.notification-divider {
    height: 1px;
    background: var(--border);
    margin: 0.25rem 0;
}
.notification-section-title {
    padding: 0.35rem 1rem 0.25rem;
    font-size: 0.78rem;
    color: var(--muted);
}
.notification-list {
    max-height: 260px;
    overflow: auto;
}
.notification-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid #f1f5f9;
}
.notification-item-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.82rem;
}
.notification-item-title {
    color: var(--text);
}
.notification-item-copy span {
    color: var(--muted);
}
.notification-social-list {
    max-height: 220px;
}
.notification-view-post-link {
    display: inline-block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
}
.notification-view-post-link:hover {
    text-decoration: underline;
}
.notification-view-content-disabled {
    color: var(--muted);
    font-weight: 600;
    cursor: default;
    pointer-events: none;
    text-decoration: none;
}
.notification-view-content-disabled:hover {
    text-decoration: none;
}
.social-post-highlight,
.social-moderation-item.social-post-highlight {
    animation: social-post-highlight-pulse 2.2s ease-out;
}
@keyframes social-post-highlight-pulse {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
    35% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35); }
    100% { box-shadow: none; }
}
.notification-ok-btn {
    border: 1px solid var(--primary);
    border-radius: 4px;
    background: #fff;
    color: var(--primary);
    padding: 0.12rem 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.notification-read-tag {
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
}
.notification-empty {
    margin: 0.25rem 1rem 0.5rem;
    font-size: 0.82rem;
    color: var(--muted);
}

/* User menu dropdown */
.user-menu {
    position: relative;
}
.user-menu-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--text);
    padding: 0.25rem 0;
}
.user-menu-trigger:hover,
.user-menu-open .user-menu-trigger {
    color: var(--primary);
}
.user-menu-id {
    color: var(--muted);
    font-size: 0.82rem;
}
.user-menu-id::before { content: "\00b7"; margin-right: 0.35rem; }
.user-menu-caret {
    font-size: 0.7rem;
    color: var(--muted);
}
.user-menu-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    min-width: 240px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 0;
    z-index: 210;
    overflow: hidden;
}
.user-menu-open .user-menu-dropdown {
    display: block;
}
.user-menu-identity {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--surface)), color-mix(in srgb, var(--primary) 6%, var(--surface)));
    border-bottom: 1px solid var(--border);
}
.user-menu-email-banner {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem 0.85rem;
    text-decoration: none;
    color: var(--text);
    min-width: 0;
}
.user-menu-email-banner:hover {
    text-decoration: none;
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.user-menu-email-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}
.user-menu-email-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    word-break: break-all;
    line-height: 1.3;
}
.user-menu-profile-word {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: 0.01em;
}
.user-menu-settings-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    flex-shrink: 0;
    border-left: 1px solid var(--border);
    color: var(--primary);
    text-decoration: none;
    font-size: 1.1rem;
}
.user-menu-settings-link:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    text-decoration: none;
}
.user-menu-header {
    color: var(--muted);
    font-size: 0.8rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.2rem;
    padding-bottom: 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.user-menu-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.55rem 1rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}
.user-menu-item:hover {
    background: var(--hover-bg);
    color: var(--primary);
    text-decoration: none;
}
.user-menu-dropdown .user-menu-item,
.user-menu-dropdown .user-menu-logout {
    padding: 0.35rem 0;
}
.user-menu-dropdown .user-menu-item,
.user-menu-dropdown .user-menu-item-btn {
    padding-left: 1rem;
    padding-right: 1rem;
}
.user-menu-logout { margin: 0; }
.user-menu-item-btn { font: inherit; }

.profile-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 480px;
    box-shadow: var(--shadow);
}
.profile-layout { display: flex; flex-direction: column; gap: 1.25rem; max-width: 720px; }
.profile-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.profile-android-app {
    padding: 1.2rem 1.35rem 1.35rem;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 48%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.profile-app-head h3 {
    margin: 0 0 0.3rem;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text);
}
.profile-app-head .field-hint {
    margin: 0 0 0.65rem;
    max-width: 40rem;
}
.profile-app-install-steps {
    margin: 0 0 1rem;
    padding: 0 0 0 1.15rem;
    max-width: 40rem;
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
}
.profile-app-install-steps li {
    margin: 0.2rem 0;
}
.profile-app-stores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.85rem;
}
.profile-app-store {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.95rem 1rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    min-width: 0;
}
.profile-app-store--soon {
    background: color-mix(in srgb, var(--muted) 6%, var(--surface));
}
.profile-app-store-top {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
}
.profile-app-store-icon {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 0.9rem;
    background: var(--surface);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}
.profile-app-store-icon--ios {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    background: color-mix(in srgb, var(--text) 6%, var(--surface));
}
.profile-app-store-copy {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.profile-app-store-os {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--text);
    letter-spacing: -0.02em;
}
.profile-app-store-status {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}
.profile-app-store-status--live {
    color: var(--success);
}
.profile-app-store-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
}
.profile-app-store-btn--soon,
.profile-app-store-btn--soon:disabled {
    background: color-mix(in srgb, var(--muted) 16%, var(--surface));
    color: var(--muted);
    border: 1px solid var(--border);
    cursor: not-allowed;
    opacity: 1;
    box-shadow: none;
    pointer-events: none;
}
@media (max-width: 640px) {
    .profile-app-stores {
        grid-template-columns: 1fr;
    }
}
.profile-membership-card {
    padding: 1.15rem 1.35rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, transparent) 0%, transparent 55%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.profile-membership-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.profile-membership-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
.profile-membership-panel {
    min-width: 0;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--text) 3%, var(--surface));
}
.profile-membership-monthly-label {
    margin: 0.7rem 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.profile-membership-amounts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.profile-membership-amounts li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.65rem;
    font-size: 0.88rem;
}
.profile-membership-amounts li.is-none {
    opacity: 0.45;
    color: var(--muted);
}
.profile-membership-amounts li.is-none strong {
    font-weight: 500;
}
.profile-membership-amounts li.is-partial strong {
    display: inline-block;
    padding: 0.08rem 0.42rem;
    border: 1px solid var(--border);
    border-radius: 0.32rem;
    background: color-mix(in srgb, var(--warning) 14%, var(--surface));
    color: var(--text);
}
.profile-membership-amounts li.is-full strong {
    color: var(--primary);
    font-weight: 800;
}
.profile-membership-amounts strong {
    font-variant-numeric: tabular-nums;
    font-weight: 750;
}
.profile-membership-cycle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.profile-membership-cycle.is-green {
    background: color-mix(in srgb, var(--success) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--success) 40%, var(--border));
}
.profile-membership-cycle.is-yellow {
    background: color-mix(in srgb, var(--warning) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--warning) 45%, var(--border));
}
.profile-membership-cycle.is-red {
    background: color-mix(in srgb, var(--danger) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--danger) 42%, var(--border));
}
.profile-membership-cycle-count {
    margin: 0;
    font-size: 2.35rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.profile-membership-cycle.is-green .profile-membership-cycle-count { color: var(--success); }
.profile-membership-cycle.is-yellow .profile-membership-cycle-count { color: var(--warning); }
.profile-membership-cycle.is-red .profile-membership-cycle-count { color: var(--danger); }
.profile-membership-cycle-caption {
    margin: 0.4rem 0 0;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--text);
}
.profile-membership-gap-warning {
    margin: 0.55rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text);
    text-align: left;
}
@media (max-width: 720px) {
    .profile-membership-panels { grid-template-columns: 1fr; }
}
.profile-membership-eyebrow {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.profile-membership-start {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}
.profile-membership-start-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}
.profile-membership-ticks {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex-shrink: 0;
}
.profile-membership-tick {
    --mem-tick-size: 1.35rem;
    margin-left: 0;
}
.profile-membership-renew {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.profile-membership-renew:hover {
    text-decoration: underline;
}
.profile-membership-cta {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    align-items: flex-start;
}
.profile-membership-cta-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.35;
}
.profile-membership-cta-body {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.45;
    max-width: 36rem;
}
.profile-membership-cta-btn {
    margin-top: 0.35rem;
}
.profile-photo-wrap { flex-shrink: 0; }
.profile-photo-link {
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.profile-photo-link:hover {
    transform: scale(1.03);
}
.profile-photo-link:focus-visible {
    outline: 2px solid var(--primary, #2563eb);
    outline-offset: 3px;
}
.profile-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 3px solid #e2e8f0;
}
.profile-photo-placeholder {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #6366f1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
}
.profile-hero-email-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
    margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9rem;
}
.profile-hero-email-text { color: var(--text); font-weight: 500; }
.profile-hero-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.profile-social-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.25rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.profile-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 3.5rem;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius);
    padding: 0.15rem 0.35rem;
    transition: background 0.15s ease;
}

a.profile-stat-item:hover {
    background: rgba(99, 102, 241, 0.08);
}

.profile-stat-item strong {
    font-size: 1rem;
    color: var(--text);
    line-height: 1.2;
}

.profile-stat-item span {
    font-size: 0.72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.profile-stat-item--static {
    cursor: default;
}
.profile-tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
}
.profile-section h3 { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.profile-section-collapsible .profile-section-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0;
}
.profile-section-collapsible.is-open .profile-section-bar { margin-bottom: 0.5rem; }
.profile-section-bar-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}
.profile-section-toggle {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.profile-section-toggle:hover { border-color: var(--primary); color: var(--primary); }
.profile-section-chevron {
    display: inline-block;
    font-size: 1.15rem;
    line-height: 1;
    transform: rotate(90deg);
    transition: transform 0.15s ease;
}
.profile-section-collapsible.is-open .profile-section-chevron { transform: rotate(-90deg); }
.profile-section-body[hidden] { display: none !important; }
.profile-section-body { margin-top: 0.35rem; }
.profile-devices-table-wrap {
    overflow: auto;
    margin-top: 0.5rem;
    max-height: 11.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}
.profile-devices-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.profile-devices-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
}
.profile-devices-table th,
.profile-devices-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.45rem 0.5rem;
    text-align: left;
    vertical-align: middle;
}
.profile-devices-table th { font-weight: 600; color: var(--muted); }
.profile-device-row--current { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.profile-device-current-tag {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary);
}
.profile-device-actions { text-align: right; white-space: nowrap; }
/* Profile — My Activity Log (00278) */
.profile-activity-section {
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--primary) 12%, transparent);
}
.profile-activity-wrap {
    margin-top: 0.45rem;
    max-height: 14rem;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
}
.profile-activity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.profile-activity-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface);
    font-weight: 600;
    color: var(--muted);
}
.profile-activity-table th,
.profile-activity-table td {
    border-bottom: 1px solid var(--border);
    padding: 0.4rem 0.5rem;
    text-align: left;
    vertical-align: top;
}
.profile-activity-table .profile-activity-when {
    white-space: nowrap;
    color: var(--muted);
    font-size: 0.75rem;
    width: 7.5rem;
}
.profile-activity-table .profile-activity-action {
    font-weight: 600;
    white-space: nowrap;
}
.profile-activity-table .profile-activity-desc {
    word-break: break-word;
    color: var(--text);
}
.profile-activity-empty,
.profile-activity-status {
    margin: 0.65rem 0.75rem;
    font-size: 0.82rem;
    color: var(--muted);
}
.profile-activity-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin: 0.55rem 0 0;
    padding-top: 0.35rem;
}
.profile-activity-pager[hidden] { display: none !important; }
.profile-activity-pager .pagination-info {
    font-size: 0.78rem;
    color: var(--muted);
}
.profile-section-census { border-top: 3px solid #eef2ff; padding-top: 1.25rem; }
.profile-form { margin-top: 0.75rem; }
.profile-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
    min-width: 0;
    max-width: 100%;
}
.profile-form-grid-wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.profile-form-grid-span-2,
.profile-form-grid .form-group-full { grid-column: 1 / -1; }
.wifi-id-controls { display: flex; gap: 0.5rem; align-items: center; }
.wifi-id-controls input { flex: 1; min-width: 0; }
.wifi-id-controls .btn { flex-shrink: 0; white-space: nowrap; }
.office-wifi-current { margin: 0.35rem 0 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.office-wifi-label { margin: 0; font-size: 0.9rem; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.office-wifi-label .muted-dash { min-width: 3.2rem; }
.office-wifi-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.65rem; }
.apm-deadline-block { margin-top: 1.1rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }
.apm-deadline-heading { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 600; }
.apm-deadline-table { min-width: 420px; max-width: 720px; }
.apm-deadline-table .users-col-user { min-width: 200px; }
.apm-deadline-input {
    min-width: 7.5rem;
    padding: 0.35rem 0.45rem;
    font-size: 0.9rem;
}
.apm-facility-select {
    max-width: 7.5rem;
    font-size: 0.8rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
}
.facility-form { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.facility-form select { max-width: 7rem; font-size: 0.8rem; padding: 0.25rem 0.35rem; }
.profile-form-grid .form-group { margin-bottom: 0; min-width: 0; }
.profile-form-grid .form-group-full,
.profile-form-grid-span-2 { grid-column: 1 / -1; }
.profile-form .form-group label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.25rem; }
.profile-readonly-field {
    background: var(--surface-alt, #f1f5f9);
    color: var(--muted, #64748b);
    cursor: default;
}
.profile-form input[type="text"],
.profile-form input[type="tel"],
.profile-form input[type="number"],
.profile-form input[type="date"],
.profile-form input[type="file"],
.profile-form input[type="search"],
.profile-form select,
.profile-form textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.86rem;
    font-family: inherit;
}
.profile-census-done { margin-top: 0.65rem; margin-bottom: 0; }
@media (max-width: 560px) {
    .profile-form-grid, .profile-form-grid-wide { grid-template-columns: 1fr; }
    .profile-hero { flex-direction: column; text-align: center; }
}
.profile-list { display: grid; grid-template-columns: 120px 1fr; gap: 0.65rem 1rem; }
.profile-list dt { font-weight: 600; color: var(--muted); font-size: 0.85rem; }
.profile-list dd { margin: 0; }
.profile-actions { margin-top: 1.25rem; display: flex; gap: 1rem; }

.logout-form { display: inline; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); text-decoration: none; color: #fff; }
.btn-secondary { background: #475569; color: #fff; }
.btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline:hover { background: #eff6ff; text-decoration: none; }
.btn-block { width: 100%; text-align: center; margin-top: 0.5rem; }

/* Main */
.main-content {
    flex: 1;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

.hero {
    text-align: center;
    margin-bottom: 2.5rem;
}

.hero h1 { font-size: 2rem; margin-bottom: 0.5rem; }
.hero p { color: var(--muted); }

.section-block { margin-top: 1rem; }

.section-title {
    font-size: 1.5rem;
    margin-bottom: 0.35rem;
}

.section-subtitle {
    color: var(--muted);
    margin-bottom: 1.5rem;
}

/* Ad cards grid */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.ad-card,
.promo-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.15s, box-shadow 0.15s;
    color: inherit;
    text-decoration: none;
    display: block;
}

.promo-card-social, .ad-card-social {
    cursor: default;
}

.promo-card-social:hover,
.ad-card-social:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.1);
}

.promo-card-image, .ad-card-image {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
}

.promo-card-image--social, .ad-card-image--social { background: linear-gradient(135deg, #fce7f3, #fdf2f8); }
.promo-card-image--brochure, .ad-card-image--brochure { background: linear-gradient(135deg, #d1fae5, #ecfdf5); }
.promo-card-image--email, .ad-card-image--email { background: linear-gradient(135deg, #fef3c7, #fffbeb); }
.promo-card-image--video, .ad-card-image--video { background: linear-gradient(135deg, #ede9fe, #f5f3ff); }
.promo-card-image--billboard, .ad-card-image--billboard { background: linear-gradient(135deg, #cffafe, #ecfeff); }

.image-placeholder {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.promo-card-body, .ad-card-body { padding: 0.45rem 0.75rem 0.5rem; }
.promo-card-body h3, .ad-card-body h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.promo-card-body p, .ad-card-body p { font-size: 0.9rem; color: var(--muted); line-height: 1.4; }

.promo-card-social .ad-badge,
.ad-card-social .ad-badge {
    display: inline-block;
    margin-bottom: 0;
    font-size: 0.62rem;
    padding: 0.1rem 0.4rem;
    flex-shrink: 0;
}
.promo-card-meta-row, .ad-card-meta-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.12rem;
    min-width: 0;
}
.promo-card-meta-row .ad-stats-row,
.ad-card-meta-row .ad-stats-row {
    margin-left: auto;
    flex-shrink: 0;
    justify-content: flex-end;
}
.promo-card-social .promo-card-title,
.ad-card-social .ad-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0 0 0.12rem;
    line-height: 1.25;
    color: var(--text);
}
.promo-card-social .promo-card-desc,
.ad-card-social .ad-card-desc {
    margin: 0.15rem 0 0;
    font-size: 0.76rem;
    line-height: 1.32;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.promo-card-social .ad-body-link,
.ad-card-social .ad-body-link {
    display: inline-block;
    margin-top: 0.2rem;
    font-size: 0.76rem;
    line-height: 1.2;
}

.ad-stats-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
}
.social-post-card .ad-card-meta-row,
.social-post-card .ad-stats-row {
    width: 100%;
    max-width: 100%;
}
.social-post-card .ad-card-meta-row .ad-stats-row {
    margin-left: 0;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.2rem;
}

/* Like / comment / share / save — larger, rem-based (Settings small–x-large) */
.social-post-card .ad-stat-item {
    font-size: calc(0.88rem + 1pt);
    font-weight: 650;
    gap: 0.32em;
    padding: 0.28em 0.52em;
}
.social-post-card .ad-stat-item svg {
    width: 1.2em;
    height: 1.2em;
}
.social-post-card .ad-reaction-emoji {
    font-size: 1.2em;
}
.social-post-card .ad-stat-likes,
.social-post-card .ad-stat-comments,
.social-post-card .ad-stat-shares,
.social-post-card .ad-stat-saves {
    font-size: 1em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.social-post-card .ad-reaction-choice {
    font-size: 1.35rem;
}
.ad-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: #f8fafc;
    border: 1px solid #eef2f7;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}
.ad-stat-views-wrap {
    cursor: default;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
}
.ad-stat-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.ad-icon-eye { opacity: 0.85; }

.ad-engage-btn {
    border: 1px solid transparent;
    background: #f8fafc;
    cursor: pointer;
    font: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ad-engage-btn:hover { background: #eef2ff; color: var(--primary); }
.ad-engage-like.is-active {
    background: color-mix(in srgb, var(--success, #10b981) 18%, var(--surface, #fff));
    color: #047857;
    border-color: transparent;
}
.ad-reaction-cluster { display: inline-flex; align-items: center; gap: 0.2rem; }
.ad-reaction-primary-wrap { position: relative; display: inline-flex; }
.ad-reaction-emoji { font-size: 0.95rem; line-height: 1; }
.ad-reaction-picker {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    display: flex;
    gap: 0.15rem;
    padding: 0.3rem 0.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    z-index: 12;
}
.ad-reaction-picker[hidden] { display: none !important; }
.ad-reaction-choice {
    border: none;
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.15rem 0.2rem;
    border-radius: 999px;
    transition: transform 0.12s ease, background 0.12s ease;
}
.ad-reaction-choice:hover { transform: scale(1.15); background: rgba(37, 99, 235, 0.1); }
.ad-reaction-faces {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin-left: auto;
    flex: 0 0 auto;
    max-width: none;
    min-height: 1.45rem;
    padding: 0.08rem 0.12rem;
    border-radius: 999px;
    cursor: pointer;
}
.ad-reaction-faces[hidden],
.ad-reaction-faces.is-empty { display: none !important; }
.ad-reaction-type-stack {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
}
.ad-reaction-type-chip {
    display: inline-flex;
    width: 1.28rem;
    height: 1.28rem;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    margin-right: -0.32rem;
    padding: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    line-height: 1;
    color: inherit;
}
.ad-reaction-type-chip:last-child { margin-right: 0; }
.ad-reaction-face-pile { display: none !important; }
.ad-reaction-face-pile {
    display: inline-flex;
    align-items: center;
    direction: rtl;
}
.ad-reaction-face {
    position: relative;
    width: 1.55rem;
    height: 1.55rem;
    margin-left: -0.45rem;
    padding: 0;
    border: 2px solid var(--surface, #fff);
    border-radius: 999px;
    background: var(--surface-2, #f1f5f9);
    overflow: visible;
    cursor: pointer;
    flex: 0 0 auto;
}
.ad-reaction-face:first-child { margin-left: 0; }
.ad-reaction-face img,
.ad-reaction-face-fallback {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 999px;
}
.ad-reaction-face-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}
.ad-reaction-face-badge {
    position: absolute;
    right: -0.2rem;
    bottom: -0.25rem;
    font-size: 0.55rem;
    line-height: 1;
    background: var(--surface, #fff);
    border-radius: 999px;
    box-shadow: 0 0 0 1px var(--border, #e2e8f0);
}
.ad-reaction-face-tip {
    position: fixed;
    z-index: 1200;
    max-width: min(240px, calc(100vw - 16px));
    padding: 0.28rem 0.5rem;
    border-radius: 0.4rem;
    background: rgba(15, 23, 42, 0.92);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.3;
    white-space: pre-line;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
}
.ad-reaction-people-modal {
    position: fixed;
    inset: 0;
    z-index: 1180;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    padding: 0;
}
.ad-reaction-people-sheet {
    width: min(420px, 100%);
    max-height: min(78vh, 560px);
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.22);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.ad-reaction-people-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.35rem;
}
.ad-reaction-people-head h3 {
    margin: 0;
    font-size: 1rem;
}
.ad-reaction-people-close {
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    padding: 0.1rem 0.35rem;
}
.ad-reaction-people-tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem 0.55rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ad-reaction-people-tab {
    flex: 0 0 auto;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--surface-2, #f8fafc);
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    font-size: 0.8rem;
    cursor: pointer;
    color: var(--text, #0f172a);
}
.ad-reaction-people-tab.is-active {
    background: color-mix(in srgb, var(--primary, #2563eb) 16%, var(--surface, #fff));
    border-color: color-mix(in srgb, var(--primary, #2563eb) 40%, var(--border, #e2e8f0));
    color: var(--primary, #2563eb);
    font-weight: 600;
}
.ad-reaction-people-list {
    overflow: auto;
    padding: 0.25rem 0.5rem 1rem;
    flex: 1 1 auto;
}
.ad-reaction-people-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.4rem;
    border-radius: 0.55rem;
}
.ad-reaction-people-av {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--surface-2, #e2e8f0);
}
.ad-reaction-people-av--ph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-muted, #64748b);
}
.ad-reaction-people-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ad-reaction-people-rx { font-size: 1rem; }
.ad-reaction-people-empty {
    margin: 1rem;
    text-align: center;
    color: var(--text-muted, #64748b);
    font-size: 0.9rem;
}
@media (min-width: 768px) {
    .ad-reaction-people-modal {
        align-items: center;
        padding: 1rem;
    }
    .ad-reaction-people-sheet {
        border-radius: 0.9rem;
        max-height: min(70vh, 520px);
    }
}
@media (max-width: 640px) {
    .social-post-card .ad-stats-row {
        flex-wrap: nowrap;
    }
    .ad-reaction-faces {
        max-width: none;
    }
    .ad-reaction-type-chip {
        width: 1.2rem;
        height: 1.2rem;
        font-size: 0.72rem;
    }
}
.ad-reaction-choice.is-selected { background: rgba(5, 150, 105, 0.15); transform: scale(1.1); }
.ad-reaction-you {
    margin: 0 0 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary);
}
.ad-engage-like.is-saving,
.ad-engage-dislike.is-saving { opacity: 0.72; }
.ad-engage-dislike.is-active { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.ad-engage-comments.is-active,
.ad-engage-comments[aria-expanded="true"] { background: #eef2ff; color: var(--primary); border-color: #c7d2fe; }
.ad-engage-share.is-disabled,
.ad-engage-share:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.ad-engage-save.is-active {
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
    color: var(--primary);
    border-color: transparent;
}
.ad-engage-save .ad-engage-save-filled { display: none; }
.ad-engage-save.is-active .ad-engage-save-outline { display: none; }
.ad-engage-save.is-active .ad-engage-save-filled { display: inline; }

.promo-card-head, .ad-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.promo-card-head-main, .ad-card-head-main { min-width: 0; flex: 1; }

.ad-comments-panel {
    margin-top: 0.55rem;
    padding: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
}
.ad-comments-list { max-height: 280px; overflow-y: auto; margin-top: 0.65rem; margin-bottom: 0; }
.ad-comments-empty { font-size: 0.82rem; color: var(--muted); margin: 0; }
.ad-comment-node { margin-bottom: 0.65rem; }
.ad-comment-replies { margin-left: 0.85rem; padding-left: 0.75rem; border-left: 2px solid #e2e8f0; }
.ad-comment-head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.78rem;
    margin-bottom: 0.15rem;
}
.ad-comment-head strong { color: var(--text); }
.ad-comment-time { color: var(--muted); font-size: 0.72rem; }
.ad-comment-body { margin: 0 0 0.35rem; font-size: 0.84rem; line-height: 1.45; color: #334155; }
.ad-comment-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
/* Post feed only: tighten 3 lines inside one comment; keep node→node gap */
.social-feed .ad-comment-head,
.social-post-card .ad-comment-head {
    margin-bottom: 0.02rem;
}
.social-feed .ad-comment-head strong,
.social-post-card .ad-comment-head strong,
.social-feed .ad-comment-time,
.social-post-card .ad-comment-time {
    font-style: italic;
}
.social-feed .ad-comment-body,
.social-post-card .ad-comment-body {
    margin: 0 0 0.06rem;
    line-height: 1.22;
}
.social-feed .ad-comment-actions,
.social-post-card .ad-comment-actions {
    margin-top: 0;
    padding-top: 0;
    line-height: 1.15;
}
.social-post-card .ad-comments-panel {
    background: color-mix(in srgb, var(--surface-alt) 88%, var(--surface));
    border-color: var(--border);
}
.social-post-card .ad-comments-list {
    max-height: 420px;
}
.social-post-card .ad-comment-bubble {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px 16px 16px 6px;
    padding: 0.42rem 0.72rem 0.38rem;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
}
.social-post-card .ad-comment-reply .ad-comment-bubble {
    border-radius: 16px 16px 6px 16px;
}
.social-post-card .ad-comment-body {
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}
.social-post-card .ad-comment-replies {
    border-left-color: var(--border);
}
.ad-comment-edited {
    color: var(--muted);
    font-size: 0.7rem;
    font-style: italic;
}
.ad-comment-media {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.4rem 0 0.25rem;
}
.ad-comment-media-item {
    width: 112px;
    height: 112px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-alt);
    cursor: zoom-in;
}
.ad-comment-media-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ad-comment-attach-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}
.ad-comment-attach-preview[hidden] {
    display: none !important;
}
.ad-comment-attach-chip {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-alt);
}
.ad-comment-attach-chip img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ad-comment-attach-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 1.15rem;
    height: 1.15rem;
    border: none;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text) 72%, transparent);
    color: var(--surface);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.ad-comment-edit-form {
    margin: 0.2rem 0 0.15rem;
}
.ad-comment-edit-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.ad-comment-edit-cancel {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ad-comment-edit-cancel:hover { color: var(--primary); }
.ad-comment-edit-btn:hover { color: var(--primary); }
.ad-comment-like,
.ad-comment-reply-btn,
.ad-comment-edit-btn,
.ad-comment-delete-btn {
    border: none;
    background: none;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}
.ad-comment-delete-btn { color: #b45309; }
.ad-comment-delete-btn:hover { color: #c2410c; text-decoration: underline; }
.ad-comment-reply-form { margin: 0.35rem 0 0.25rem; }
.ad-comment-compose--reply { margin-top: 0; }
.ad-comment-like.is-active { color: #e11d48; }
.ad-likers-tooltip {
    position: fixed;
    z-index: 1300;
    transform: translate(0, -100%);
    background: rgba(15, 23, 42, 0.94);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.35rem 0.55rem;
    border-radius: 6px;
    max-width: min(240px, calc(100vw - 1rem));
    pointer-events: none;
    white-space: normal;
    line-height: 1.35;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.28);
    word-break: break-word;
    box-sizing: border-box;
}
.ad-likers-tooltip[hidden] { display: none !important; }
.ad-share-menu {
    position: fixed;
    z-index: 1310;
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    width: min(360px, calc(100vw - 2rem));
    padding: 0.75rem;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
}
.ad-share-menu--centered {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%);
}
.ad-share-menu[hidden] { display: none !important; }
.ad-share-menu-title {
    margin: 0 0 0.25rem;
    font-size: 0.92rem;
    font-weight: 700;
}
.ad-share-menu-hint {
    margin: 0 0 0.55rem;
    font-size: 0.75rem;
    color: var(--muted, #64748b);
    line-height: 1.35;
}
.ad-share-copy-link { width: 100%; margin-bottom: 0.5rem; }
.ad-share-friends-list {
    max-height: 200px;
    overflow-y: auto;
    margin: 0.35rem 0 0.5rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
}
.ad-share-friends-empty {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted, #64748b);
}
.ad-share-friend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.84rem;
    cursor: pointer;
}
.ad-share-friend-row.is-filter-hidden {
    display: none !important;
}
.ad-share-picker-tools {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.35rem;
}
.ad-share-select-all {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    color: var(--text, #0f172a);
}
.ad-share-find {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}
.ad-share-find-icon {
    position: absolute;
    left: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    color: var(--muted, #64748b);
    pointer-events: none;
    line-height: 0;
    z-index: 1;
}
.ad-share-find-icon svg { display: block; }
.ad-share-find-input {
    width: 100%;
    min-width: 0;
    padding: 0.28rem 1.6rem 0.28rem 1.7rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    font-size: 0.78rem;
}
.ad-share-find-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
.ad-share-find-clear {
    position: absolute;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted, #64748b);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.ad-share-find-clear:hover {
    color: var(--text, #0f172a);
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
.ad-share-find-clear[hidden] { display: none !important; }
.ad-share-selected-count {
    margin: 0 0 0.45rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted, #64748b);
}
.ad-share-menu-status {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    color: var(--primary, #4f46e5);
}
.ad-share-menu-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
}
.ad-share-message-label {
    display: block;
    margin: 0.45rem 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted, #64748b);
}
.ad-share-message {
    width: 100%;
    min-height: 3rem;
    resize: vertical;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-size: 0.8rem;
    margin-bottom: 0.55rem;
}
.ad-share-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.45rem;
}
.ad-share-tab {
    flex: 1;
    padding: 0.35rem 0.4rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px;
    background: var(--surface-alt, #f8fafc);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
}
.ad-share-tab.is-active {
    background: color-mix(in srgb, var(--primary, #4f46e5) 12%, #fff);
    border-color: color-mix(in srgb, var(--primary, #4f46e5) 35%, #e2e8f0);
    color: var(--primary, #4f46e5);
}
.ad-share-groups-list {
    max-height: 180px;
    overflow-y: auto;
    margin-bottom: 0.45rem;
}
.ad-share-timeline-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0.25rem 0 0.35rem;
}
.social-share-toast {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%) translateY(12px);
    opacity: 0;
    pointer-events: none;
    z-index: 1400;
    background: #14532d;
    color: #fff;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.social-share-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.social-shared-card .social-shared-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.45rem;
}
.social-shared-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.35rem;
    flex: 1;
    min-width: 0;
}
.social-shared-label {
    font-size: 0.78rem;
    color: var(--muted, #64748b);
    font-weight: 600;
}
.social-shared-message {
    margin: 0 0 0.55rem;
    font-size: 0.84rem;
    color: var(--text, #0f172a);
}
.social-shared-embed {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 0.65rem;
    background: var(--surface, #fff);
    overflow: hidden;
}
.social-shared-embed .social-post-media,
.social-shared-embed .social-post-media-grid {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.social-shared-open-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary, #4f46e5);
    text-decoration: none;
}
.social-shared-open-link:hover { text-decoration: underline; }
.ad-comment-reply-btn:hover { color: var(--primary); }
.ad-comment-form { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0; }
.ad-comment-guest {
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
}
.ad-comment-compose { display: flex; gap: 0.45rem; align-items: flex-end; }
.ad-comment-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
}
.ad-comment-input,
.ad-comment-reply-input,
.ad-comment-edit-input {
    flex: 1;
    min-width: 0;
    min-height: 2.1rem;
    max-height: calc(1.4em * 3 + 0.9rem);
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.84rem;
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
    box-sizing: border-box;
    field-sizing: fixed;
}
.ad-comment-form[aria-busy="true"] {
    opacity: 0.72;
    pointer-events: none;
}
.ad-comment-form[aria-busy="true"] button[type="submit"] {
    opacity: 0.9;
}

/* APM — Attendance / Performance */
.apm-wrap { display: flex; flex-direction: column; gap: 0.85rem; }
.apm-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.25rem; }
.apm-tabs a {
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    background: #f8fafc;
    border: 1px solid var(--border);
    text-decoration: none;
}
.apm-tabs a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.apm-entry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
}
.apm-entry-grid-compact { margin-bottom: 0.65rem; }
.apm-user-cell { font-size: 0.8rem; line-height: 1.35; white-space: nowrap; }
.apm-user-id { display: block; font-weight: 700; color: var(--text); }
.apm-by-line { display: block; font-size: 0.72rem; color: var(--muted); }
.apm-time-tag {
    display: inline-block;
    margin-right: 0.35rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.apm-out-cell { font-size: 0.8rem; font-weight: 600; color: #4338ca; white-space: nowrap; }
.apm-admin-details {
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}
.apm-admin-details:not(.is-collapsed) {
    border-color: color-mix(in srgb, #f59e0b 35%, var(--border));
    background: color-mix(in srgb, #f59e0b 8%, var(--surface));
}
.apm-form-inline { margin-top: 0.55rem; max-width: 420px; }
.apm-card h3 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.apm-form { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.5rem; }
.apm-wifi-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.apm-helper-status { margin: 0; }
.apm-helper-install { font-size: 0.8rem; }
.apm-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
}
.apm-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.apm-form select,
.apm-form textarea {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 400;
    font-family: inherit;
    color: var(--text);
    background: var(--surface);
    box-sizing: border-box;
}
.apm-form select {
    appearance: auto;
    -webkit-appearance: menulist;
}
.apm-form textarea { min-height: 4.5rem; resize: vertical; line-height: 1.4; }
.apm-form input:focus,
.apm-form select:focus,
.apm-form textarea:focus {
    outline: none;
    border-color: var(--primary-light);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.apm-status { font-size: 0.82rem; margin: 0.35rem 0; }
.apm-status.ok { color: #059669; }
.apm-status.warn { color: #b45309; }
.apm-saved-preview { margin-top: 0.55rem; font-size: 0.82rem; }
.apm-saved-preview p { margin: 0.25rem 0 0; color: #334155; }
.apm-pre, .apm-pre-inline {
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.82rem;
    color: #334155;
}
.apm-pre-inline { display: inline; }
.apm-today-card h3, .apm-report-card h3 { margin-top: 0; }
.apm-table .apm-cell-text { max-width: 220px; font-size: 0.82rem; line-height: 1.4; }
.apm-report-filters { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.75rem 0; }
.apm-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; }
.apm-filter-row label { font-size: 0.8rem; font-weight: 600; min-width: 5.5rem; }
.apm-filter-row input[type="search"],
.apm-filter-row input[type="date"],
.apm-filter-row select {
    flex: 1;
    min-width: 140px;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
}
.apm-keyword-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.apm-keyword-chip {
    display: inline-block;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: #eef2ff;
    color: var(--primary);
    text-decoration: none;
    border: 1px solid #c7d2fe;
}
.apm-keyword-chip.active { background: var(--primary); color: #fff; }
.apm-analytics {
    margin-top: 0.75rem;
    padding: 0.55rem 0.75rem;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    font-size: 0.84rem;
    color: #166534;
}
.apm-admin-card { border-color: #fde68a; background: #fffbeb; }

/* Simple pages */
.page-simple h1 { margin-bottom: 1rem; }
.page-simple p { color: var(--muted); line-height: 1.6; margin-bottom: 0.75rem; }

.simple-list { margin: 1rem 0 0 1.25rem; color: var(--muted); }
.simple-list li { margin-bottom: 0.4rem; }

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.faq-item h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.faq-item p { color: var(--muted); font-size: 0.95rem; }

/* Login */
.login-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 3rem;
}

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem;
    width: 100%;
    max-width: 420px;
}

.login-card h1 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.login-subtitle { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.25rem; }

.login-form label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.75rem 0 0.3rem;
}

.login-form input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
}

.login-form input:focus {
    outline: 2px solid #bfdbfe;
    border-color: var(--primary);
}

.login-hint {
    margin-top: 1.25rem;
    font-size: 0.82rem;
    color: var(--muted);
    line-height: 1.5;
}

.back-link {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.9rem;
}

/* Dashboard */
.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.dashboard-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
}

.dashboard-card h3 { margin-bottom: 0.5rem; font-size: 1rem; }
.dashboard-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

/* Alerts */
.alert {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.page-alert { max-width: 900px; margin: 0 auto 1rem; }

/* Footer */
.site-footer {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}
.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.85rem;
}
.footer-links { display: flex; gap: 1.25rem; }
.footer-links a { color: var(--muted); font-size: 0.85rem; }
.footer-links a:hover { color: var(--primary); }

@media (max-width: 768px) {
    .navbar { padding: 0; }
    .hero h1 { font-size: 1.5rem; }
    .dashboard-shell { grid-template-columns: 1fr; }
}

/* CTA */
.cta-section {
    text-align: center;
    margin-top: 2rem;
    padding: 1.25rem;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    color: var(--muted);
}

.ad-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    background: #eff6ff;
    color: var(--primary);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.35rem;
}

.ad-img, .promo-img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.promo-card-static, .ad-card-static { cursor: default; }
.promo-card-static:hover, .ad-card-static:hover { transform: none; }

/* Dashboard — fixed header; window scroll only (no L/R column scrollbars) */
body.dashboard-body {
    display: block;
}

.dashboard-body {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    overflow-x: clip;
    display: block;
}

.dashboard-body > .dashboard-shell {
    width: 100%;
    padding-top: var(--site-sticky-top, var(--dash-sticky-top, 7rem));
}

.dashboard-body .site-header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    width: 100%;
    background: var(--page-bg);
    box-shadow: 0 1px 0 var(--border);
    font-size: 0.875rem;
}

.dashboard-body .site-header-sticky .site-goodwill-bar,
.dashboard-body .site-header-sticky .navbar {
    position: relative;
    top: auto;
}

.dashboard-body .main-content { max-width: none; }

/* Dashboard header base — detail in dashboard-header.css */
.dashboard-body .site-header-sticky .site-goodwill-inner {
    max-width: none;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .dashboard-body .dashboard-center.dashboard-workzone,
    .dashboard-body .dash-workzone-feed,
    .dashboard-body .dash-panel.workzone-inner {
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }
}

.dashboard-shell {
    display: grid;
    /* minmax(0,1fr) — center can shrink; prevents middle column spilling into right panel */
    grid-template-columns: 220px minmax(0, 1fr) minmax(280px, 340px);
    gap: 0;
    width: 100%;
    max-width: 100%;
    align-items: start;
    box-sizing: border-box;
}
.dashboard-shell.dashboard-unified {
    grid-template-columns: 220px minmax(0, 1fr) minmax(280px, 340px);
}
.dashboard-shell.dashboard-unified.dashboard-no-right,
.dashboard-shell.dashboard-unified.dashboard-right-user-hidden {
    grid-template-columns: 220px minmax(0, 1fr);
}
/* Explicit tracks — ignore scripts/comments between columns */
.dashboard-shell > .dashboard-sidebar {
    grid-column: 1;
    min-width: 0;
}
.dashboard-shell > .dashboard-center {
    grid-column: 2;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
}
.dashboard-shell > .dashboard-right,
.dashboard-shell > #dashboard-right {
    grid-column: 3;
    min-width: 0;
    max-width: 100%;
    position: relative;
    /* Above center sticky (z-index 25) so spilled center content cannot cover R panel */
    z-index: 30;
    background: var(--surface);
    isolation: isolate;
}
.dashboard-shell.dashboard-unified.dashboard-no-right > .dashboard-right,
.dashboard-shell.dashboard-unified.dashboard-no-right > #dashboard-right,
.dashboard-shell.dashboard-unified.dashboard-right-user-hidden > .dashboard-right,
.dashboard-shell.dashboard-unified.dashboard-right-user-hidden > #dashboard-right {
    grid-column: unset;
}
.dashboard-shell.dashboard-unified .dashboard-center {
    padding: 0.75rem;
    background: var(--workzone-bg);
    min-width: 0;
}
.dash-workzone-feed {
    display: block;
}
.dash-promo-footer {
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.dash-promo-footer-head { margin-bottom: 0.5rem; }
.dash-promo-footer-title { margin: 0 0 0.2rem; font-size: 0.92rem; }
.dash-promo-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.65rem;
}
.dash-promo-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--muted);
    margin-bottom: 0.25rem;
}
.dash-promo-slot--footer .dash-promo-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.manage-ads-viewer-analysis {
    margin-top: 0.35rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
}
.manage-ads-impact-zones {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.5rem 0;
}
.manage-ads-impact-zone {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
}
.manage-ads-impact-zone.is-active {
    border-color: var(--primary);
}
.manage-ads-zone-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.manage-ads-zone-user-count {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--text-muted, var(--muted));
}
.manage-ads-zone-user-count strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.manage-ads-zone-actions { margin: 0.35rem 0 0.75rem; }
.manage-ads-layer-heading {
    margin: 0.5rem 0 0.25rem;
    font-size: 0.92rem;
    font-weight: 600;
}
.manage-ads-layer-table { font-size: 0.82rem; margin-top: 0.35rem; }
.manage-ads-cost-stats {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    margin: 0.5rem 0;
}
.manage-ads-cost-total-label { font-weight: 700; }
.manage-ads-cost-total { font-weight: 700; font-size: 1.05rem; color: var(--primary); }
.manage-ads-form-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

.dashboard-sidebar {
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--primary) 5%, var(--surface)) 0%,
            var(--surface) 7.5rem,
            var(--surface) 100%
        );
    border-right: 1px solid color-mix(in srgb, var(--border) 88%, var(--primary) 12%);
    padding: 0;
    min-width: 0;
    box-sizing: border-box;
}
.dashboard-sidebar > .dashboard-column-rail {
    padding: 0.77rem 0.85rem 0.95rem;
    box-sizing: border-box;
}

.sidebar-user { margin-bottom: 0.66rem; }
.sidebar-company-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    gap: 0.28rem 0.5rem;
    line-height: 1.25;
    padding: 0.38rem 0.65rem;
    border-radius: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--border) 80%, var(--primary) 20%);
    background: color-mix(in srgb, var(--surface) 72%, var(--bg, var(--surface)) 28%);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}
.company-badge {
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 750;
    background: color-mix(in srgb, var(--primary) 16%, var(--surface));
    color: var(--primary);
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.company-name {
    flex: 1;
    min-width: 0;
    font-size: 0.74rem;
    font-weight: 550;
    color: var(--text);
    line-height: 1.3;
    text-align: left;
    word-break: break-word;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    margin-bottom: 0.77rem;
}
.sidebar-nav a,
.sidebar-nav-group-toggle {
    position: relative;
    transition:
        background 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease,
        transform 0.12s ease;
}
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.29rem 0.6rem;
    border-radius: 0.5rem;
    color: color-mix(in srgb, var(--text) 92%, var(--muted) 8%);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 525;
    letter-spacing: 0.01em;
}
.sidebar-nav a:hover {
    background: color-mix(in srgb, var(--nav-active-bg) 82%, transparent);
    color: var(--primary);
}
.sidebar-nav a.active {
    background: var(--nav-active-bg);
    color: var(--primary);
    font-weight: 650;
    box-shadow: inset 2px 0 0 var(--primary);
}
.sidebar-nav a:active {
    transform: scale(0.992);
}
.sidebar-nav .menu-unreplied-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.28rem;
    margin-left: auto;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    flex: 0 0 auto;
}
.ptr-general-user-note {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
}
.sidebar-nav a.placeholder { color: var(--muted); pointer-events: none; }
.sidebar-nav-suspended {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.29rem 0.6rem;
    border-radius: 0.5rem;
    color: var(--muted);
    opacity: 0.62;
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;
    font-size: 0.8125rem;
}
.sidebar-nav-suspended-group { width: 100%; box-sizing: border-box; }
.sidebar-nav-suspended-caption {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: 0.95;
    white-space: nowrap;
}
.sidebar-nav-group { display: flex; flex-direction: column; gap: 0.08rem; }
.sidebar-nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.29rem 0.6rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: color-mix(in srgb, var(--text) 92%, var(--muted) 8%);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 525;
    text-align: left;
    cursor: pointer;
}
.sidebar-nav-group-toggle:hover,
.sidebar-nav-group-open > .sidebar-nav-group-toggle,
.sidebar-nav-group-active > .sidebar-nav-group-toggle {
    background: color-mix(in srgb, var(--nav-active-bg) 82%, transparent);
    color: var(--primary);
}
.sidebar-nav-group-active > .sidebar-nav-group-toggle {
    font-weight: 650;
    box-shadow: inset 2px 0 0 var(--primary);
}
.sidebar-nav-chevron {
    margin-left: auto;
    font-size: 0.68rem;
    opacity: 0.55;
    transition: transform 0.2s ease, opacity 0.16s ease;
}
.sidebar-nav-group-open .sidebar-nav-chevron,
.sidebar-nav-group-toggle:hover .sidebar-nav-chevron {
    opacity: 0.85;
}
.sidebar-nav-group-open .sidebar-nav-chevron { transform: rotate(180deg); }
.sidebar-nav-sub {
    display: flex;
    flex-direction: column;
    gap: 0.07rem;
    padding: 0.1rem 0 0.14rem 0.2rem;
    margin: 0.03rem 0 0.1rem 0.7rem;
    border-left: 2px solid color-mix(in srgb, var(--primary) 28%, var(--border));
}
.sidebar-nav-sub a {
    padding: 0.22rem 0.5rem;
    font-size: 0.78rem;
    border-radius: 0.45rem;
}
.sidebar-nav-sub .menu-icon {
    width: 1.05rem;
    height: 1.05rem;
    font-size: 0.72em;
}

.sidebar-menu-find {
    position: sticky;
    top: 0;
    z-index: 4;
    width: 100%;
    margin: 0 0 0.32rem;
    padding: 0 0 0.28rem;
    background: var(--surface);
    box-sizing: border-box;
}
.sidebar-menu-find-field {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    width: 100%;
    box-sizing: border-box;
    min-height: 1.7rem;
    padding: 0.12rem 0.32rem;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: var(--hover-bg, var(--surface-alt));
    color: var(--text);
}
.sidebar-menu-find-field:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
}
.sidebar-menu-find-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--muted);
    line-height: 0;
}
.sidebar-menu-find-field input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    padding: 0.1rem 0;
    outline: none;
    box-shadow: none;
}
.sidebar-menu-find-field input::placeholder {
    color: var(--muted);
    opacity: 1;
}
.sidebar-menu-find-clear {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    line-height: 0;
}
.sidebar-menu-find-clear:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 8%, transparent);
}
.sidebar-menu-find-clear[hidden] {
    display: none !important;
}
.sidebar-nav .is-filter-hidden {
    display: none !important;
}

.completed-widget {
    background: linear-gradient(160deg, #f8fafc 0%, #ffffff 55%, #f1f5f9 100%);
    border: 1px solid color-mix(in srgb, var(--border) 88%, #6366f1 12%);
    border-radius: 10px;
    padding: 0.55rem 0.85rem 0.5rem;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.completed-widget h4 {
    font-size: 0.72rem;
    margin: 0 0 0.4rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.task-summary-link {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    width: 100%;
}
.task-summary-link:hover .count,
.task-summary-link:hover .label { opacity: 0.88; }

.task-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.28rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 90%, transparent);
    font-size: 0.82rem;
}
.task-count:last-child { border-bottom: none; padding-bottom: 0; }
.task-count .count {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    min-width: 1.5rem;
}
.task-count .label {
    color: var(--muted);
    font-weight: 500;
    text-align: right;
    flex: 1;
}
.task-count-red .count { color: #dc2626; }
.task-count-blue .count { color: #2563eb; }
.task-count-green .count { color: #16a34a; }

.dashboard-center {
    padding: 1rem;
    background: var(--workzone-bg);
    min-width: 0;
}
.dashboard-center h1 { font-size: 1.35rem; margin-bottom: 1rem; }

.dashboard-workzone { padding: 0.75rem; }
.workzone-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.35rem;
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
#panel-users,
#panel-credit-wallet,
#credit-log-card {
    min-width: 0;
    max-width: 100%;
}
.workzone-header { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.workzone-header h1 { font-size: 1.12rem; font-weight: 600; margin: 0 0 0.25rem; color: var(--text); }
.workzone-sub { font-size: 0.78rem; color: var(--muted); margin: 0; font-weight: 400; }

/* SA Ops Dashboard (00220) — remaining work palette */
.ops-dash-header { margin-bottom: 1.15rem; }
.ops-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 0.15rem;
}
.ops-dash-card {
    --ops-accent: var(--primary);
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0.85rem;
    min-height: 8.5rem;
    padding: 1.05rem 1.1rem 1rem;
    border: 1px solid color-mix(in srgb, var(--ops-accent) 22%, var(--border));
    border-radius: var(--radius-lg, 16px);
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--ops-accent) 10%, var(--surface)) 0%,
            var(--surface) 48%,
            color-mix(in srgb, var(--accent) 6%, var(--surface)) 100%);
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ops-dash-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--ops-accent);
}
.ops-dash-card[data-ops-key="verify-address"] { --ops-accent: var(--info); }
.ops-dash-card[data-ops-key="post-censor"] { --ops-accent: var(--warning); }
.ops-dash-card[data-ops-key="reported-posts"] { --ops-accent: var(--danger); }
.ops-dash-card[data-ops-key="feedbacks"] { --ops-accent: var(--accent); }
.ops-dash-card[data-ops-key="membership-verify"] { --ops-accent: var(--primary); }
.ops-dash-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--ops-accent) 55%, var(--border));
    box-shadow: var(--shadow-lg);
    text-decoration: none;
    color: var(--text);
}
.ops-dash-card:focus-visible {
    outline: 2px solid var(--ops-accent);
    outline-offset: 2px;
}
.ops-dash-card-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 14px;
    font-size: 1.2rem;
    line-height: 1;
    background: color-mix(in srgb, var(--ops-accent) 16%, var(--surface));
    color: var(--ops-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ops-accent) 25%, transparent);
}
.ops-dash-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    flex: 1;
}
.ops-dash-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.55rem;
}
.ops-dash-card-title {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.ops-dash-card-count {
    min-width: 2rem;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--ops-accent) 14%, var(--surface-alt, var(--surface)));
    color: var(--ops-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ops-accent) 20%, transparent);
}
.ops-dash-card[data-ops-key="membership-verify"] .ops-dash-card-count {
    min-width: 2.6rem;
    letter-spacing: 0.02em;
}
.ops-dash-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.15rem 0 0.2rem;
}
.ops-dash-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    border: 1px solid var(--border);
    color: var(--muted);
    background: color-mix(in srgb, var(--surface, #fff) 90%, var(--text) 10%);
}
.ops-dash-pill--ok {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.ops-dash-pill--wait {
    color: var(--warning, #b45309);
    border-color: color-mix(in srgb, var(--warning, #b45309) 35%, var(--border));
    background: color-mix(in srgb, var(--warning, #b45309) 10%, transparent);
}
.ops-dash-pill--cancel {
    color: var(--muted);
}
.ops-dash-card--hot .ops-dash-card-count {
    background: var(--ops-accent);
    color: #fff;
    box-shadow: none;
}
.ops-dash-card--hot .ops-dash-card-icon {
    background: color-mix(in srgb, var(--ops-accent) 22%, var(--surface));
}
.ops-dash-card--clear {
    opacity: 0.92;
}
.ops-dash-card--clear .ops-dash-card-count {
    color: var(--muted);
    background: var(--surface-alt, var(--border));
    box-shadow: none;
}
.ops-dash-card-desc {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.4;
    flex: 1;
}
.ops-dash-card-go {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ops-accent);
}
.ops-dash-card-go::after {
    content: "→";
    transition: transform 0.15s ease;
}
.ops-dash-card:hover .ops-dash-card-go::after {
    transform: translateX(3px);
}
[data-theme="dark"] .ops-dash-card,
[data-theme="dim"] .ops-dash-card {
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--ops-accent) 14%, var(--surface)) 0%,
            var(--surface) 55%,
            color-mix(in srgb, var(--ops-accent) 8%, var(--surface)) 100%);
}

/* SA Ops growth chart (00241) — under membership-verify 00238 */
.ops-growth {
    margin-top: 1.35rem;
    width: 100%;
    padding: 1.1rem 1.15rem 1.2rem;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
    background:
        linear-gradient(165deg,
            color-mix(in srgb, var(--primary) 8%, var(--surface)) 0%,
            var(--surface) 42%,
            color-mix(in srgb, var(--success) 6%, var(--surface)) 100%);
    box-shadow: var(--shadow);
}
.ops-growth-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}
.ops-growth-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.ops-growth-sub {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
    max-width: 42rem;
}
.ops-growth-ranges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-alt, var(--border)) 55%, transparent);
    border: 1px solid var(--border);
}
.ops-growth-range {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
}
.ops-growth-range.is-active {
    background: var(--primary);
    color: #fff;
}
.ops-growth-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
}
.ops-growth-legend-item {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 600;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0.55;
}
.ops-growth-legend-item.is-on {
    opacity: 1;
    color: var(--text);
    border-color: color-mix(in srgb, var(--swatch, var(--primary)) 35%, var(--border));
    background: color-mix(in srgb, var(--swatch, var(--primary)) 10%, var(--surface));
}
.ops-growth-swatch {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: var(--swatch, var(--primary));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch, var(--primary)) 25%, transparent);
}
.ops-growth-canvas-wrap {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
}
#ops-growth-canvas {
    display: block;
    width: 100%;
    height: auto;
    cursor: crosshair;
}
.ops-growth-tooltip {
    position: absolute;
    z-index: 2;
    min-width: 9rem;
    max-width: 14rem;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.35;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg, 0 8px 24px color-mix(in srgb, var(--text) 12%, transparent));
    pointer-events: none;
}
.ops-growth-empty { margin: 0.75rem 0 0; }

.c-red { color: #dc2626; font-weight: 600; }
.c-blue { color: #2563eb; font-weight: 600; }
.c-green { color: #16a34a; font-weight: 600; }

.task-messages-panel { display: flex; flex-direction: column; gap: 0.65rem; }
.task-messages-block { margin-bottom: 0; }
.task-messages-to { border-top: none; padding-top: 0; margin-top: 0; }

/* From / To section banners */
.task-section-banner {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.65rem;
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--border);
    border-bottom: none;
}
.task-section-banner-from {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 55%, #bfdbfe 100%);
    border-color: #93c5fd;
}
.task-section-banner-to {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 55%, #bbf7d0 100%);
    border-color: #86efac;
}
.task-section-banner .task-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0;
}
.task-section-banner .task-section-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.task-section-banner-from .task-section-title { color: #1e40af; }
.task-section-banner-to .task-section-title { color: #166534; }
.task-section-banner-from .task-public-link {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid #93c5fd;
    color: #1d4ed8;
}
.task-section-banner-from .task-public-link:hover { background: #fff; }
.task-section-body {
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 0.4rem 0.45rem 0.5rem;
    background: #fff;
}
.task-messages-from .task-section-body { border-color: #93c5fd; }
.task-messages-to .task-section-body { border-color: #86efac; }

/* Right panel hide / show — floating >> / << toggle (PIN 00014) */
.dash-rpanel-toggle {
    position: fixed !important;
    top: calc(var(--dash-sticky-top, 7rem) + 0.55rem) !important;
    right: 0.45rem !important;
    left: auto !important;
    z-index: 20000 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.4rem 0.35rem;
    min-width: 2rem;
    min-height: 2.4rem;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.01);
    box-shadow: none;
    cursor: pointer;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.1em;
    opacity: 0.72;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto !important;
    isolation: isolate;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.95), 0 1px 3px rgba(15, 23, 42, 0.45);
    transition: opacity 0.15s ease;
}
.dash-rpanel-toggle:hover,
.dash-rpanel-toggle:focus-visible {
    opacity: 0.95;
    outline: none;
    background: rgba(255, 255, 255, 0.01);
}
.dash-rpanel-toggle--dragging {
    opacity: 1;
    cursor: grabbing;
}
.dash-rpanel-toggle-glyph {
    display: inline-block;
    pointer-events: none !important;
    transform: scaleY(1.35) scaleX(0.95);
    transform-origin: center;
    line-height: 1;
}
.dash-rpanel-toggle .pincode-section-label,
.dash-rpanel-toggle .pincode-section-label--control {
    pointer-events: none !important;
}
.dash-rpanel-toggle.is-collapsed .dash-rpanel-toggle-glyph--hide { display: none; }
.dash-rpanel-toggle:not(.is-collapsed) .dash-rpanel-toggle-glyph--show { display: none; }
.dash-rpanel-toggle.is-messenger-obscured {
    display: none !important;
    pointer-events: none !important;
}
/* Desktop: hide PIN 00014 while Messenger popup/chat is open so it cannot cover Close */
@media (min-width: 769px) {
    .dashboard-body.yo-messenger-popup-open #dash-rpanel-toggle,
    body.yo-messenger-popup-open #dash-rpanel-toggle {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }
}
/* Mobile: right panel is stacked/fullscreen — hide >> toggle (PIN 00014) */
@media (max-width: 768px) {
    .dash-rpanel-toggle,
    .dashboard-body .dash-rpanel-toggle {
        display: none !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }
}
.dashboard-shell.dashboard-right-user-hidden #dashboard-right {
    display: none !important;
}

/* Right panel — advertisement zone (below task messages) */
.right-promo-section {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 2px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 8px;
    padding: 0.55rem 0.45rem 0.6rem;
}
.right-promo-section--solo {
    margin-top: 0;
    padding-top: 0.55rem;
    border-top: none;
}
.right-promo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    padding: 0 0.1rem;
}
.right-promo-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
}
.right-promo-badge {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #94a3b8;
}
.right-promo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}
.right-promo-plate {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.right-promo-plate-media {
    display: block;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #fff;
}
.right-promo-plate-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.right-promo-plate-caption {
    margin: 0;
    font-size: 0.58rem;
    line-height: 1.25;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    flex: 1;
    min-width: 0;
}
.right-promo-plate-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    padding: 0.15rem 0.2rem 0;
}
.right-promo-plate-views {
    font-size: 0.58rem;
    font-weight: 600;
    color: #6366f1;
    flex-shrink: 0;
}
.right-promo-plate[data-ad-id] {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.right-promo-plate[data-ad-id]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}
.right-promo-plate--empty {
    aspect-ratio: 1;
    border-radius: 6px;
    border: 1.5px dashed #cbd5e1;
    background: #fff;
    box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.12);
}
.right-promo-plate--empty .right-promo-plate-inner {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.35rem;
    color: #94a3b8;
}
.right-promo-plate-num {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    color: #cbd5e1;
}
.right-promo-plate-label {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.task-section { margin-bottom: 0.65rem; }
.task-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.task-section-head .task-section-title { margin-bottom: 0; }
.task-section-to { border-top: 1px dashed var(--border); padding-top: 0.5rem; margin-top: 0.35rem; }
.task-section-title { font-size: 0.78rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.task-public-link { font-size: 0.78rem; color: var(--primary); text-decoration: none; flex-shrink: 0; white-space: nowrap; }
.task-public-note { margin: 0; font-size: 0.78rem; color: var(--muted); }
.task-section-hint { font-weight: 400; color: var(--muted); font-size: 0.72rem; }
.task-list { display: flex; flex-direction: column; gap: 0.35rem; }
.task-more { font-size: 0.78rem; margin-top: 0.25rem; color: var(--muted); }

.task-msg-item {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.35rem 0.45rem;
    background: #fafbfc;
}
.task-msg-head { margin-bottom: 0.1rem; line-height: 1.2; }
.task-msg-audience { font-size: 0.65rem; font-weight: 700; display: block; color: var(--text); margin-bottom: 0.05rem; }
.task-msg-title { font-size: 0.62rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: var(--muted); }

.task-msg-body { font-size: 0.82rem; line-height: 1.3; margin: 0.1rem 0; font-weight: 400; white-space: pre-wrap; word-break: break-word; }
.task-msg-red .task-msg-body { color: #dc2626; }
.task-msg-blue .task-msg-body { color: #2563eb; }
.task-msg-green .task-msg-body { color: #16a34a; }

.task-msg-dates { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.2rem; margin: 0.1rem 0 0.15rem; font-size: 0.58rem; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.date-sep { color: #cbd5e1; font-size: 0.55rem; }
.date-red { color: #dc2626; }
.date-blue { color: #2563eb; }
.date-green { color: #16a34a; }

.task-msg-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; justify-content: flex-end; margin-top: 0.15rem; }
.link-form { display: inline; margin: 0; padding: 0; }

.bracket-link {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; cursor: pointer; font-weight: 600; letter-spacing: 0.02em;
}
.bracket-link:hover { text-decoration: underline; }
.bracket-blue { color: #2563eb; }
.bracket-green { color: #16a34a; }
.bracket-red { color: #dc2626; }
.bracket-neutral { color: var(--muted); }

.task-chat-thread { margin-top: 0.15rem; padding-left: 0.4rem; border-left: 2px solid var(--border); }
.task-chat-line { font-size: 0.65rem; line-height: 1.25; margin: 0.08rem 0; }
.chat-post { color: #92400e; }
.chat-read { color: #4b5563; }

/* Public thread panel — chat +2px */
#panel-public-thread .task-chat-line { font-size: calc(0.65rem + 2px); line-height: 1.3; }
#panel-public-thread .task-chat-compose .chat-input { font-size: calc(0.72rem + 2px); }
#panel-public-thread .task-msg-body { font-size: calc(0.82rem + 2px); }

/* Right panel — chat +1px */
.dashboard-right .task-chat-line { font-size: calc(0.65rem + 1px); }
.dashboard-right .task-chat-compose .chat-input { font-size: calc(0.72rem + 1px); }

.task-chat-compose { margin-top: 0.15rem; margin-bottom: 0.1rem; }
.task-chat-compose[hidden] { display: none !important; }
.chat-input {
    width: 100%; padding: 0.25rem 0.4rem; border: 1px solid var(--border);
    border-radius: 4px; font-size: 0.72rem; font-family: inherit; box-sizing: border-box;
}
.bracket-link { font-size: 0.62rem; }

/* —— Public Thread (00072) artistic conversation —— */
.pt-zone { width: 100%; max-width: none; }
.pt-list { display: flex; flex-direction: column; gap: 1.25rem; width: 100%; }
.pt-card {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface, #fff);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.pt-card-base {
    background: color-mix(in srgb, var(--surface, #fff) 96%, var(--primary));
}
.pt-card-alt {
    background: color-mix(in srgb, var(--surface, #fff) 94%, var(--muted));
    border-color: color-mix(in srgb, var(--border) 70%, var(--muted));
}
.pt-agenda {
    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 0.95rem 1.15rem 0.7rem;
    border-bottom: 1px solid var(--border);
    /* Soft artistic wash — low contrast so body text stays clear */
    background:
        radial-gradient(ellipse 90% 70% at 8% -10%,
            color-mix(in srgb, var(--primary) 16%, transparent), transparent 58%),
        radial-gradient(ellipse 75% 55% at 96% 110%,
            color-mix(in srgb, var(--muted) 14%, transparent), transparent 52%),
        repeating-linear-gradient(
            -18deg,
            transparent,
            transparent 11px,
            color-mix(in srgb, var(--text) 3.5%, transparent) 11px,
            color-mix(in srgb, var(--text) 3.5%, transparent) 12px),
        linear-gradient(168deg,
            color-mix(in srgb, var(--surface, #fff) 88%, var(--primary)) 0%,
            var(--surface, #fff) 42%,
            color-mix(in srgb, var(--surface, #fff) 92%, var(--muted)) 100%);
}
.pt-card-alt .pt-agenda {
    background:
        radial-gradient(ellipse 85% 65% at 92% -8%,
            color-mix(in srgb, var(--muted) 18%, transparent), transparent 55%),
        radial-gradient(ellipse 70% 50% at 4% 108%,
            color-mix(in srgb, var(--primary) 10%, transparent), transparent 50%),
        repeating-linear-gradient(
            16deg,
            transparent,
            transparent 11px,
            color-mix(in srgb, var(--text) 3%, transparent) 11px,
            color-mix(in srgb, var(--text) 3%, transparent) 12px),
        linear-gradient(172deg,
            color-mix(in srgb, var(--surface, #fff) 90%, var(--muted)) 0%,
            var(--surface, #fff) 48%,
            color-mix(in srgb, var(--surface, #fff) 92%, var(--primary)) 100%);
}
.pt-card-alt .pt-agenda::before {
    inset: auto auto 0.55rem 0.7rem;
    background: color-mix(in srgb, var(--muted) 10%, transparent);
}
.pt-card-alt .pt-bubble-mine {
    background: color-mix(in srgb, var(--text) 11%, var(--surface, #fff));
}
.pt-agenda.is-mine {
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, var(--text) 5.5%, transparent);
}
.pt-agenda.is-mine .pt-agenda-body {
    background: color-mix(in srgb, var(--text) 8%, var(--surface, #fff));
}
.pt-thread-body {
    width: 91.666%;
    margin: 0 0 0.35rem auto;
    padding: 0.15rem 0 0.55rem;
    box-sizing: border-box;
    border-left: 3px solid transparent;
}
.pt-card-base .pt-thread-body {
    border-left-color: color-mix(in srgb, var(--primary) 28%, transparent);
}
.pt-card-alt .pt-thread-body {
    border-left-color: color-mix(in srgb, var(--muted) 35%, transparent);
}
.pt-thread-body > .pt-chat-rail {
    width: 100%;
    margin-left: 0;
    border-left: none;
    padding-top: 0.85rem;
    padding-bottom: 0.15rem;
}
.pt-thread-body > .pt-compose {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0.25rem;
}
.ptr-hidden-intro {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
}
.pt-agenda::before {
    content: "";
    position: absolute;
    inset: 0.65rem 0.75rem auto auto;
    width: min(38%, 11rem);
    height: 3.2rem;
    border-radius: 40% 60% 55% 45%;
    background: color-mix(in srgb, var(--primary) 7%, transparent);
    pointer-events: none;
    z-index: 0;
}
.pt-agenda-meta,
.pt-agenda-body,
.pt-agenda-actions {
    position: relative;
    z-index: 1;
}
.pt-agenda-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    margin-bottom: 0.65rem;
    font-size: 0.72rem;
    color: var(--muted);
}
.pt-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 14%, var(--surface, #fff));
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.pt-member-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35em;
    height: 1.35em;
    padding: 0 0.22em;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    font-size: 0.82em;
    font-weight: 750;
    line-height: 1;
    box-sizing: border-box;
}
.pt-tip {
    position: relative;
    cursor: help;
}
.pt-tip[data-tip]:hover::after,
.pt-tip[data-tip]:focus-visible::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 60;
    left: 0;
    bottom: calc(100% + 0.4rem);
    min-width: 14rem;
    max-width: min(24rem, 85vw);
    max-height: 16rem;
    overflow: auto;
    padding: 0.55rem 0.7rem;
    border-radius: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--border) 65%, var(--primary) 35%);
    background: color-mix(in srgb, var(--surface, #fff) 94%, var(--primary) 6%);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 550;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    white-space: pre-line;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent),
        0 10px 28px color-mix(in srgb, var(--text) 18%, transparent);
    animation: pt-tip-flash 0.38s ease;
    pointer-events: none;
}
@keyframes pt-tip-flash {
    0% { opacity: 0; transform: translateY(4px) scale(0.98); }
    55% { opacity: 1; transform: translateY(0) scale(1.015); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.pt-pill-muted {
    background: color-mix(in srgb, var(--muted) 12%, transparent);
    font-weight: 600;
}
.pt-from { color: var(--muted); }
.pt-from strong { color: var(--text); font-weight: 700; }
.pt-time { margin-left: auto; opacity: 0.85; }
.pt-agenda-body {
    width: 100%;
    font-size: 1.05rem;
    line-height: 1.55;
    font-weight: 400;
    color: var(--text);
    white-space: pre-wrap;
    margin: 0;
    /* Light scrim so pattern never fights the agenda text */
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface, #fff) 82%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 55%, transparent);
}
.pt-agenda-body strong,
.pt-bubble-body strong,
.ptr-agenda strong { font-weight: 700; }
.pt-agenda-body em,
.pt-bubble-body em,
.ptr-agenda em { font-style: italic; }
/* Council meeting threads: slightly smaller than public for denser reading */
.pt-card-council .pt-agenda-body {
    font-size: calc(1.05rem - 1px);
}
.pt-card-council .pt-bubble-body {
    font-size: calc(0.9rem - 1px);
}
.ptr-card-council .ptr-agenda {
    font-size: calc(0.95rem - 1px);
}
.pt-agenda-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-top: 0.55rem;
}
.pt-chat-rail {
    width: 91.666%; /* ~11/12 */
    margin-left: auto;
    margin-right: 0;
    padding: 1rem 1rem 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    box-sizing: border-box;
}
.pt-bubble-row {
    width: 100%;
    display: flex;
}
.pt-align-left { justify-content: flex-start; }
.pt-align-right { justify-content: flex-end; }
.pt-bubble {
    width: 90.9%; /* ~10/11 of rail ≈ 10/12 of full */
    max-width: 42rem;
    border-radius: 16px;
    padding: 0.7rem 0.85rem 0.55rem;
    border: 1px solid var(--border);
    box-sizing: border-box;
}
.pt-bubble-other {
    background: color-mix(in srgb, var(--muted) 10%, var(--surface, #fff));
    border-bottom-left-radius: 6px;
}
.pt-bubble-mine {
    background: color-mix(in srgb, var(--text) 10%, var(--surface, #fff));
    border-bottom-right-radius: 6px;
    border-color: color-mix(in srgb, var(--border) 65%, var(--text));
}
.pt-bubble-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    color: var(--muted);
    margin-bottom: 0.35rem;
}
.pt-author { font-weight: 700; color: var(--text); }
.pt-dot { opacity: 0.5; }
.pt-bubble-body {
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}
.pt-react-bar,
.pt-star-bar {
    margin-top: 0.55rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
}
.pt-like-total {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
}
.pt-star-row {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
}
.pt-star-btn {
    appearance: none;
    border: none;
    background: transparent;
    padding: 0.05rem 0.12rem;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1;
    color: color-mix(in srgb, var(--muted) 65%, var(--text) 35%);
    cursor: pointer;
    opacity: 0.45;
    transition: color 0.12s ease, opacity 0.12s ease, transform 0.12s ease;
}
.pt-star-btn:hover,
.pt-star-btn.is-hover {
    color: color-mix(in srgb, #ca8a04 78%, var(--text) 22%);
    opacity: 0.95;
    transform: translateY(-1px);
}
/* Undo window: only filled stars yellow */
.pt-star-btn.is-filled,
.pt-star-bar.is-undoable .pt-star-btn.is-filled {
    color: #ca8a04;
    opacity: 1;
}
/* Locked: only filled stars blue; empty stay muted grey */
.pt-star-bar.is-locked .pt-star-btn {
    cursor: default;
    pointer-events: none;
    color: color-mix(in srgb, var(--muted) 70%, var(--text) 30%);
    opacity: 0.4;
}
.pt-star-bar.is-locked .pt-star-btn.is-filled {
    color: var(--primary);
    opacity: 1;
}
.pt-star-undo {
    border: 1px solid color-mix(in srgb, var(--border) 70%, #ca8a04 30%);
    background: color-mix(in srgb, #ca8a04 12%, var(--surface, #fff));
    color: var(--text);
    border-radius: 999px;
    padding: 0.1rem 0.5rem;
    font-size: 0.68rem;
    font-weight: 650;
    cursor: pointer;
}
.pt-star-undo[hidden] { display: none !important; }
.pt-star-caption {
    width: 100%;
    font-size: 0.68rem;
    color: var(--muted);
    min-height: 0.9em;
}
.pt-leading-chat .pt-bubble {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent);
    background: color-mix(in srgb, var(--primary) 6%, var(--surface, #fff));
}
.pt-react-btns {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}
.pt-react-form { display: inline; margin: 0; }
.pt-react-btn {
    border: 1px solid color-mix(in srgb, var(--text) 22%, transparent);
    background: color-mix(in srgb, var(--surface, #fff) 70%, transparent);
    color: var(--text);
    border-radius: 999px;
    padding: 0.12rem 0.4rem;
    font-size: 0.85rem;
    line-height: 1.2;
    cursor: pointer;
    filter: grayscale(1);
    opacity: 0.78;
    transition: transform 0.12s ease, border-color 0.12s ease, background 0.12s ease,
        filter 0.12s ease, opacity 0.12s ease;
}
.pt-react-btn:hover {
    transform: translateY(-1px);
    opacity: 0.95;
    border-color: color-mix(in srgb, var(--text) 40%, transparent);
}
.pt-react-btn.is-active {
    filter: none;
    opacity: 1;
    background: color-mix(in srgb, var(--primary) 18%, var(--surface, #fff));
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.pt-react-summary {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    width: 100%;
}
.pt-react-chip {
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 12%, transparent);
    filter: grayscale(1);
    opacity: 0.85;
}
.pt-react-chip.is-mine {
    filter: none;
    opacity: 1;
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    font-weight: 700;
}
.pt-compose {
    width: 91.666%;
    margin: 0.35rem 0 1rem auto;
    padding: 0 1rem 0.25rem;
    box-sizing: border-box;
}
.pt-compose-form {
    width: 90.9%;
    max-width: 42rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.pt-align-right + .pt-compose .pt-compose-form,
.pt-compose .pt-compose-form { margin-left: 0; }
.pt-compose-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.pt-compose-input {
    width: 100%;
    min-height: 5.5rem;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.45;
    background: var(--surface, #fff);
    color: var(--text);
    box-sizing: border-box;
}
.pt-compose-input:focus {
    outline: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
    outline-offset: 1px;
}
.pt-compose-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
.pt-post-toggle {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    width: 90.9%;
    max-width: 42rem;
    border: none;
    background: transparent;
    padding: 0.15rem 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
}
.pt-post-toggle-label {
    margin: 0;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.pt-post-toggle-hint {
    font-size: 0.72rem;
    color: var(--muted);
    font-weight: 500;
}
.pt-post-toggle.is-open .pt-post-toggle-hint { opacity: 0.55; }
.pt-post-panel {
    width: 90.9%;
    max-width: 42rem;
    margin-top: 0.45rem;
}
.pt-post-panel[hidden] { display: none !important; }
.pt-compose-footer {
    width: 90.9%;
    max-width: 42rem;
    margin-top: 0.75rem;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.pt-vote-summary {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: min(100%, 16rem);
    flex: 1;
    width: 100%;
}
.pt-vote-conclusion {
    gap: 0.45rem;
    padding: 0.65rem 0.8rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
    border-radius: 0.75rem;
    background:
        linear-gradient(165deg,
            color-mix(in srgb, var(--primary) 7%, var(--surface, #fff)) 0%,
            var(--surface, #fff) 55%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}
.pt-vote-conclusion-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 1.75rem;
}
.pt-vote-conclusion-label {
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
}
.pt-vote-conclusion-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0.55rem 1rem;
    align-items: start;
}
.pt-vote-col {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}
.pt-vote-col-outcome {
    padding-right: 0.15rem;
}
.pt-vote-col-turnout {
    padding-left: 0.15rem;
    border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.pt-vote-max {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    white-space: normal;
    overflow-wrap: anywhere;
}
.pt-vote-chats,
.pt-vote-turnout,
.pt-vote-leading-avg,
.pt-vote-slots {
    font-size: 0.7rem;
    color: var(--muted);
}
.pt-vote-chats { font-weight: 650; color: var(--text); }
.pt-my-star-label {
    font-size: 0.68rem;
    font-weight: 650;
    color: color-mix(in srgb, var(--primary) 70%, var(--text) 30%);
}
.pt-vote-unvoted-chats {
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--muted);
}
.pt-vote-unvoted-chats.is-pending {
    color: color-mix(in srgb, var(--primary) 75%, var(--text) 25%);
}
.pt-vote-unvoted-chats.is-done {
    color: color-mix(in srgb, var(--muted) 80%, var(--text) 20%);
    font-weight: 550;
}
.pt-vote-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.12em;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}
.pt-vote-conclusion .pt-done-form {
    margin-left: auto;
    flex-shrink: 0;
}
.pt-done-form { margin-left: auto; }
.pt-done-btn { font-weight: 700; }
@media (max-width: 640px) {
    .pt-vote-conclusion-grid {
        grid-template-columns: 1fr;
        gap: 0.55rem;
    }
    .pt-vote-col-turnout {
        padding-left: 0;
        border-left: none;
        padding-top: 0.35rem;
        border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    }
}
.pt-chat-flash .pt-bubble {
    outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 18%, transparent);
}
.fmt-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.25rem 0 0.4rem;
}
.fmt-btn {
    border: 1px solid var(--border);
    background: var(--surface, #fff);
    color: var(--text);
    border-radius: 8px;
    min-width: 2rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.3;
}
.fmt-btn-italic { font-style: italic; font-weight: 600; }
.fmt-btn:hover {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--surface, #fff));
}

[data-theme="dim"] .pt-card,
[data-theme="dark"] .pt-card {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
[data-theme="dim"] .pt-agenda-body,
[data-theme="dark"] .pt-agenda-body {
    background: color-mix(in srgb, var(--surface, #111) 78%, transparent);
}
[data-theme="dim"] .pt-agenda.is-mine .pt-agenda-body,
[data-theme="dark"] .pt-agenda.is-mine .pt-agenda-body {
    background: color-mix(in srgb, #000 22%, var(--surface, #111));
}
[data-theme="dim"] .pt-agenda.is-mine,
[data-theme="dark"] .pt-agenda.is-mine {
    box-shadow: inset 0 0 0 9999px color-mix(in srgb, #000 12%, transparent);
}
[data-theme="dark"] .pt-bubble-other {
    background: color-mix(in srgb, #fff 6%, var(--surface, #111));
}
[data-theme="dim"] .pt-bubble-mine,
[data-theme="dark"] .pt-bubble-mine {
    background: color-mix(in srgb, #000 26%, var(--surface, #111));
    border-color: color-mix(in srgb, var(--border) 70%, #000);
}

@media (max-width: 720px) {
    .pt-thread-body,
    .pt-chat-rail,
    .pt-compose { width: 100%; margin-left: 0; }
    .pt-bubble,
    .pt-compose-form { width: 100%; max-width: none; }
}

/* —— Social Public Thread archive (00197) —— */
.ptr-zone { width: 100%; max-width: 52rem; }
.ptr-flow {
    margin: 0 0 1rem;
    padding: 0.75rem 0.9rem 0.75rem 1.4rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--muted) 6%, var(--surface, #fff));
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.45;
}
.ptr-flow li { margin: 0.2rem 0; }
.ptr-flow strong { color: var(--text); }
.ptr-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.85rem;
}
.ptr-tab {
    border: 1px solid var(--border);
    background: var(--surface, #fff);
    color: var(--text);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 650;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.ptr-tab.active,
.ptr-tab[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 12%, var(--surface, #fff));
}
.ptr-tab-count {
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 1.25rem;
    text-align: center;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 14%, transparent);
}
.ptr-tab-panel[hidden] { display: none !important; }
.ptr-toolbar { margin: 0 0 0.85rem; }
.ptr-list { display: flex; flex-direction: column; gap: 0.9rem; }
.ptr-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface, #fff);
    overflow: hidden;
}
.ptr-head { padding: 0.9rem 1.05rem 0.85rem; }
.ptr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    margin-bottom: 0.55rem;
    font-size: 0.72rem;
    color: var(--muted);
}
.ptr-status {
    font-weight: 700;
    color: color-mix(in srgb, var(--text) 70%, transparent);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.68rem;
}
.ptr-agenda {
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
    margin: 0 0 0.55rem;
}
.ptr-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 0.65rem;
}
.ptr-majority { font-weight: 700; color: var(--text); }
.ptr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.ptr-panel {
    border-top: 1px solid var(--border);
    padding: 0.75rem 1.05rem 0.95rem;
    background: color-mix(in srgb, var(--muted) 5%, var(--surface, #fff));
}
.ptr-panel[hidden] { display: none !important; }
.ptr-panel-hint {
    margin: 0 0 0.55rem;
    font-size: 0.75rem;
    color: var(--muted);
}
.ptr-analyse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.65rem 0.85rem;
    margin: 0;
}
.ptr-analyse-grid dt {
    margin: 0;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-weight: 700;
}
.ptr-analyse-grid dd {
    margin: 0.15rem 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}
.ptr-leading {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}
.ptr-actions .btn.is-active {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 12%, var(--surface, #fff));
}

.task-msg-content { margin-top: 0.05rem; }
.task-msg-content .task-msg-body { margin-top: 0; }
.task-msg-content .task-msg-actions { margin-top: 0.1rem; }
.ad-link-media {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%; background: var(--surface-muted, var(--surface));
    color: var(--primary); text-decoration: none; gap: 0.35rem;
}
.ad-link-media:hover { background: #dbeafe; text-decoration: none; }
.ad-link-icon { font-size: 1.75rem; }
.ad-link-label { font-size: 0.85rem; font-weight: 600; }
.ad-body-link { display: inline-block; margin-top: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--primary); }
.ad-list-link { color: var(--primary); font-size: 0.78rem; word-break: break-all; text-decoration: none; }
.ad-list-link:hover { text-decoration: underline; }
.ad-thumb-wrap, .promo-thumb-wrap {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
}
.ad-thumb-wrap .ad-img,
.ad-thumb-wrap .promo-img,
.promo-thumb-wrap .ad-img,
.promo-thumb-wrap .promo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}
.ad-play-badge, .promo-play-badge {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: #fff; background: rgba(15,23,42,0.35); pointer-events: none;
}
.promo-open-badge {
    position: absolute;
    left: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.7rem;
    height: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(15, 23, 42, 0.48);
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
}
.promo-open-badge svg {
    width: 0.95rem;
    height: 0.95rem;
    display: block;
}
.ad-video-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 100%; height: 100%; min-height: 100%; background: linear-gradient(135deg, #1e293b, #334155); color: #fff; text-decoration: none;
}
.ad-table-thumb { width: 56px; height: 40px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); }
.cell-thumb { width: 64px; }
.cell-link { max-width: 180px; }
.muted-dash { color: var(--muted); font-size: 0.78rem; }

.task-compose-form {
    background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0.85rem 1rem; margin-bottom: 0;
}
.task-compose-block { margin-bottom: 0.75rem; }
.task-compose-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.35rem;
}
.task-compose-bar-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.task-compose-toggle-btn {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--primary);
    color: #fff;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.task-compose-toggle-btn.is-open {
    background: var(--surface);
    color: var(--text);
}
.task-compose-collapse[hidden] { display: none !important; }
.task-compose-collapse { margin-top: 0.35rem; }
.task-entry-center { max-width: 100%; margin: 0; }
.task-crud-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.65rem 0.75rem;
}
.task-crud-grid { display: flex; flex-direction: column; gap: 0.45rem; }
.task-crud-actions { margin-top: 0.45rem; padding-top: 0; border-top: none; }
.compose-row-inline { display: grid; grid-template-columns: 72px 1fr; gap: 0.4rem; align-items: center; }
.compose-row-inline label { margin: 0; font-size: 0.72rem; }
.compose-row-inline select { padding: 0.3rem 0.4rem; font-size: 0.8rem; }
.compose-row-full label { font-size: 0.72rem; margin-bottom: 0.15rem; }
.compose-row-full textarea { min-height: 90px; padding: 0.35rem 0.45rem; font-size: 0.85rem; line-height: 1.35; }
.compose-row-full textarea.task-compose-input {
    min-height: 8.5rem;
    resize: vertical;
    white-space: pre-wrap;
    line-height: 1.5;
    font-size: 0.92rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface, #fff);
    color: var(--text);
    font-family: inherit;
    box-sizing: border-box;
}
.compose-row-full textarea.task-compose-input:focus {
    outline: 2px solid color-mix(in srgb, var(--primary) 35%, transparent);
    outline-offset: 1px;
}
.workzone-header-compact { margin-bottom: 0.5rem; padding-bottom: 0.4rem; }
.workzone-header-compact h1 { font-size: 1.05rem; }
.dash-panel-compact.workzone-inner { padding: 0.75rem 0.85rem; }
.dashboard-right-compact { padding: 0; box-sizing: border-box; }
.dashboard-right-compact > .dashboard-column-rail {
    padding: 0.5rem 0.55rem;
    box-sizing: border-box;
}
.empty-msg-sm { font-size: 0.78rem; margin: 0; }
.compose-row { margin-bottom: 0.65rem; }
.compose-row label { display: block; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--muted); }
.compose-row select, .compose-row textarea {
    width: 100%; padding: 0.45rem 0.6rem; border: 1px solid var(--border);
    border-radius: 6px; font-size: 0.88rem; font-family: inherit; box-sizing: border-box;
}
.compose-send { margin-top: 0.25rem; }

.card-grid-compact { grid-template-columns: 1fr; gap: 0.75rem; }
.promo-card-sm, .ad-card-sm { box-shadow: none; }
.promo-card-media-sm, .ad-card-media-sm { height: 100px; }
.promo-card-media-sm .ad-video, .promo-card-media-sm .ad-img, .promo-card-media-sm .promo-img,
.ad-card-media-sm .ad-video, .ad-card-media-sm .ad-img, .ad-card-media-sm .promo-img { height: 100%; }

@media (max-width: 1024px) {
    .dashboard-shell,
    .dashboard-shell.dashboard-unified,
    .dashboard-shell.dashboard-unified.dashboard-no-right,
    .dashboard-shell.dashboard-unified.dashboard-right-user-hidden {
        grid-template-columns: 1fr !important;
    }
    .dashboard-shell > .dashboard-sidebar,
    .dashboard-shell > .dashboard-center,
    .dashboard-shell > .dashboard-right,
    .dashboard-shell > #dashboard-right {
        grid-column: 1 !important;
    }
    .dashboard-sidebar, .dashboard-right { border: none; border-bottom: 1px solid var(--border); }
    .dashboard-center.dashboard-workzone {
        padding-top: 0.75rem;
    }
    .dashboard-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(260px, 86vw);
        z-index: 1180;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        overflow-y: auto;
        background: var(--surface);
        box-shadow: var(--shadow-lg);
        border-right: 1px solid var(--border);
        border-bottom: none;
        padding-top: 3.5rem;
    }
    .dashboard-sidebar-open .dashboard-sidebar,
    body.dashboard-sidebar-open .dashboard-sidebar,
    #dashboard-sidebar.is-open {
        transform: translateX(0) !important;
        visibility: visible !important;
    }
    body.dashboard-sidebar-open {
        overflow: hidden;
    }
    .dash-sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1170;
        background: rgba(15, 23, 42, 0.45);
    }
    .dash-sidebar-backdrop[hidden] {
        display: none !important;
    }
    body.dashboard-body .dash-sidebar-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: calc(var(--dash-sticky-top, 7rem) + 0.35rem);
        left: 0.65rem;
        z-index: 12050;
        flex-shrink: 0;
        margin: 0;
        padding: 0.35rem;
        min-width: 2.25rem;
        min-height: 2.25rem;
        border: none;
        border-radius: 6px;
        background: transparent;
        box-shadow: none;
        cursor: pointer;
        color: var(--text);
        opacity: 0.85;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        pointer-events: auto !important;
        text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 23, 42, 0.35);
    }
    .dash-sidebar-toggle:hover,
    .dash-sidebar-toggle:focus-visible {
        opacity: 1;
        background: transparent;
        outline: none;
    }
    .dash-sidebar-toggle.is-open {
        background: transparent;
        color: var(--primary);
        opacity: 1;
    }
    .dash-sidebar-toggle-bars {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 5px;
        width: 1.25rem;
        pointer-events: none;
    }
    .dash-sidebar-toggle-bars span {
        display: block;
        width: 100%;
        height: 2.5px;
        border-radius: 2px;
        background: currentColor;
        box-shadow: none;
    }
    .dash-sidebar-backdrop:not([hidden]) {
        display: block;
    }
}

@media (min-width: 1025px) {
    .dash-sidebar-toggle,
    .dash-sidebar-backdrop {
        display: none !important;
    }
}

.dashboard-right {
    background: var(--surface);
    border-left: 1px solid var(--border);
    padding: 0;
    min-width: 0;
    box-sizing: border-box;
}
.dashboard-right > .dashboard-column-rail {
    padding: 0.5rem 0.55rem;
    box-sizing: border-box;
}
@media (min-width: 1025px) {
    /*
     * Rail keeps padding forever. Mover (.dashboard-column-sticky) only translateY —
     * never changes position/width (PIN 00015, 00016).
     */
    .dashboard-body .dashboard-sidebar,
    .dashboard-body .dashboard-right {
        align-self: stretch;
        position: relative;
        max-height: none;
        height: auto;
        overflow: visible;
    }
    .dashboard-body .dashboard-column-rail {
        position: relative;
        height: 100%;
        min-height: 100%;
        box-sizing: border-box;
        overflow: visible;
    }
    .dashboard-body .dashboard-column-sticky {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        z-index: 25;
        will-change: transform;
    }
}
.dashboard-right h2 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.panel-sub { font-size: 0.85rem; color: var(--muted); margin-bottom: 1rem; }

.send-message-form {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem;
    margin-bottom: 1.25rem;
}
.send-message-form h3 { font-size: 0.9rem; margin-bottom: 0.65rem; }
.send-message-form label { display: block; font-size: 0.78rem; font-weight: 600; margin: 0.45rem 0 0.2rem; }
.send-message-form input, .send-message-form select, .send-message-form textarea {
    width: 100%;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.85rem;
}

.task-panel-item {
    display: flex;
    gap: 0.65rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.88rem;
}
.task-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 0.35rem;
    flex-shrink: 0;
}
.dot-red { background: #dc2626; }
.dot-blue { background: #2563eb; }
.dot-green { background: #16a34a; }

.task-meta { font-size: 0.78rem; color: var(--muted); margin: 0.2rem 0; }
.task-body { font-size: 0.82rem; color: var(--muted); margin: 0.25rem 0 0.5rem; }
.task-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.btn-sm { padding: 0.3rem 0.6rem; font-size: 0.78rem; }
.btn-blue { background: #2563eb; color: #fff; }
.btn-green { background: #16a34a; color: #fff; }
.btn-danger { background: #dc2626; color: #fff; }

.empty-msg { color: var(--muted); font-size: 0.9rem; font-style: italic; }

/* Admin pages (legacy cards — home only) */
.admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.admin-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
    display: block;
}
.admin-card:hover { border-color: var(--primary); text-decoration: none; }
.admin-card h3 { margin-bottom: 0.4rem; }
.admin-card p { color: var(--muted); font-size: 0.9rem; }

.inline-form { display: inline-flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.action-cell { white-space: nowrap; }

.status-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
}
.status-disabled { background: #fee2e2; color: #991b1b; }
.status-active { background: #dcfce7; color: #166534; }

.admin-form-section { margin: 1.5rem 0; }
.admin-form label { display: block; font-size: 0.85rem; font-weight: 600; margin: 0.5rem 0 0.25rem; }
.admin-form input, .admin-form select, .admin-form textarea {
    width: 100%;
    max-width: 480px;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
}

/* Landing page (one-page) — header rules live near .site-header-sticky (body.landing-page) */
.hero-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    color: #fff; padding: 3rem 2rem; text-align: left;
}
.hero-split-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr; gap: 0; align-items: center;
    transition: grid-template-columns 0.45s ease, gap 0.45s ease;
}
.hero-auth-open .hero-split-inner {
    grid-template-columns: 2fr 1fr; gap: 2rem;
}
.hero-welcome {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: text-align 0.45s ease;
}
.hero-auth-open .hero-welcome {
    text-align: center;
    align-items: center;
}
.hero-welcome h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    margin-bottom: 0.5rem;
    transition: font-size 0.45s ease;
}
.hero-auth-open .hero-welcome h1 {
    font-size: clamp(1.4rem, 2.8vw, 2.1rem);
}
.hero-lead-sm {
    font-size: 1rem; color: rgba(255,255,255,0.75);
    max-width: 640px; margin: 0 auto;
    transition: max-width 0.45s ease, font-size 0.45s ease;
}
.hero-auth-open .hero-lead-sm {
    max-width: 360px; margin: 0 auto; font-size: 0.95rem;
}
.hero-logged-in-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}
.hero-auth {
    background: color-mix(in srgb, var(--surface, #fff) 96%, var(--primary) 4%);
    color: var(--text);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem 1rem;
    box-shadow: var(--shadow-lg);
    border: 1px solid color-mix(in srgb, var(--border) 70%, var(--primary) 30%);
    animation: heroAuthIn 0.4s ease;
}
@keyframes heroAuthIn {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}
.hero-auth .auth-tabs {
    display: flex;
    gap: 0.2rem;
    margin: 0 0 0.55rem;
    padding: 0.18rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg, #f8fafc) 88%, var(--primary) 12%);
    border-bottom: 1px solid var(--border);
}
.hero-auth .auth-tabs a {
    flex: 1 1 0;
    text-align: center;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    border-bottom: none;
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.hero-auth .auth-tabs a:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.hero-auth .auth-tabs a.active {
    color: #fff;
    background: var(--primary);
    border-bottom: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
}
/* Compact field stack: labels glued to their controls; ~50% less vertical padding */
.hero-auth .auth-form label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    margin: 0.28rem 0 0.06rem;
    color: var(--muted);
}
.hero-auth .auth-form > label:first-of-type {
    margin-top: 0;
}
.hero-auth .auth-form input {
    width: 100%;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 0.88rem;
    line-height: 1.25;
    box-sizing: border-box;
    background: var(--surface);
    color: var(--text);
}
.hero-auth .auth-form input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--primary) 65%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 16%, transparent);
}
.hero-auth .auth-form .password-field-wrap {
    margin: 0;
}
.hero-auth .auth-form .btn {
    margin-top: 0.42rem;
    padding: 0.42rem 0.85rem;
}
.hero-auth .auth-form .field-hint {
    margin: 0.05rem 0 0;
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--muted);
}
.auth-referrer-status {
    margin: 0.2rem 0 0;
    font-size: 0.76rem;
    line-height: 1.3;
}
.auth-referrer-status.is-ok { color: var(--success, #16a34a); }
.auth-referrer-status.is-error { color: var(--danger, #dc2626); }
.auth-form input.is-referrer-invalid,
.login-form input.is-referrer-invalid {
    border-color: var(--danger, #dc2626);
}
.auth-referral-row {
    display: flex;
    align-items: stretch;
    gap: 0.45rem;
    width: 100%;
}
.auth-no-ref-check {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 0 0.55rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: color-mix(in srgb, var(--surface, #fff) 92%, var(--muted, #64748b));
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
.auth-no-ref-check input {
    width: auto !important;
    margin: 0;
    padding: 0;
    accent-color: var(--primary, #4f46e5);
}
.auth-referral-row > input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
}
.auth-referral-row > input[type="text"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.login-form input.is-readonly,
.auth-form input.is-readonly {
    opacity: 0.85;
    cursor: default;
    background: var(--surface-muted, var(--bg-elevated, transparent));
}
.google-complete-card .auth-referrer-status {
    margin-top: 0.35rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}
.hero-auth .auth-panel .alert {
    margin: 0 0 0.4rem;
    padding: 0.35rem 0.55rem;
    font-size: 0.78rem;
}
.hero-auth .auth-recovery-links {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    text-align: center;
}
.hero-auth .auth-recovery-links a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.hero-auth .auth-recovery-links a:hover { text-decoration: underline; }
/* Base (non-hero) auth-tabs kept for other pages */
.auth-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.65rem; }
.auth-tabs a { color: var(--muted); font-weight: 600; font-size: 0.9rem; text-decoration: none; padding: 0.25rem 0.5rem; }
.auth-tabs a.active { color: var(--primary); border-bottom: 2px solid var(--primary); }
.auth-form label { display: block; font-size: 0.78rem; font-weight: 600; margin: 0.55rem 0 0.25rem; color: var(--muted); }
.auth-form input { width: 100%; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 6px; font-size: 0.9rem; box-sizing: border-box; }
.auth-form .btn { margin-top: 0.85rem; }
.auth-recovery-links { margin: 0.65rem 0 0; font-size: 0.82rem; text-align: center; }
.auth-recovery-links a { color: var(--primary); text-decoration: none; font-weight: 600; }
.auth-recovery-links a:hover { text-decoration: underline; }

.auth-social-login {
    margin-top: 0.85rem;
}
.auth-social-divider {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    text-align: center;
}
.auth-social-divider::before,
.auth-social-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.auth-social-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}
.auth-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.45rem;
    padding: 0.45rem 0.55rem;
    border-radius: 0.55rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}
.auth-social-btn:hover:not(:disabled) {
    border-color: var(--primary);
    background: var(--surface-2, var(--surface));
}
.auth-social-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.auth-social-btn--google {
    border-color: color-mix(in srgb, #EA4335 35%, var(--border));
}
.auth-social-btn--apple {
    border-color: color-mix(in srgb, #111 25%, var(--border));
}
.auth-social-icon {
    display: inline-flex;
    width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.auth-social-icon--google {
    font-weight: 800;
    color: #EA4335;
}
.auth-social-icon svg {
    display: block;
}
.auth-social-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.auth-social-hint {
    margin: 0.55rem 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.35;
}
@media (max-width: 420px) {
    .auth-social-buttons {
        grid-template-columns: 1fr;
    }
}

.profile-email-verify-btn {
    margin-left: 0.35rem;
}
.profile-recovery-questions { display: grid; gap: 1rem; margin: 1rem 0; }
.profile-recovery-answer-label { margin-top: 0.45rem; font-size: 0.78rem; }
.profile-recovery-select { width: 100%; padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: 6px; }
.hero-content { max-width: 720px; margin: 0 auto; }
.hero-badge {
    display: inline-block; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
    padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 1.25rem;
}
.hero-section h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: 1rem; }
.gradient-text { background: linear-gradient(90deg, #818cf8, #06b6d4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-lead { font-size: 1.1rem; color: rgba(255,255,255,0.75); max-width: 560px; margin: 0 auto; }

/* Home page — live site statistics strip (3-row depth) */
.home-site-stats {
    position: relative;
    overflow: visible;
    background:
        radial-gradient(ellipse 75% 50% at 12% 0%, rgba(129, 140, 248, 0.22), transparent 58%),
        radial-gradient(ellipse 70% 45% at 88% 8%, rgba(56, 189, 248, 0.18), transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #f1f5f9 42%, #eef2ff 72%, #ffffff 100%);
    padding: 2.5rem 1.25rem 2.75rem;
    border-bottom: 1px solid rgba(203, 213, 225, 0.85);
    transition: padding 2s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-site-stats.home-site-stats-compact {
    padding: 1rem 1.25rem 0.65rem;
}
.home-site-stats.home-site-stats-hover-expand {
    padding: 2.15rem 1.25rem 2.35rem;
    transition: padding 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-site-stats::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.28) 45%, rgba(255,255,255,0.55) 100%);
    pointer-events: none;
}
.home-site-stats-viewport {
    max-width: 1180px;
    margin: 0 auto;
    overflow: visible;
    transition: height 2s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-site-stats.home-site-stats-hover-expand .home-site-stats-viewport {
    transition-duration: 0.55s;
}
.home-site-stats-stage {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    perspective: 1400px;
    perspective-origin: 50% 20%;
    transform-origin: center top;
    will-change: transform;
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}
.home-site-stats.home-site-stats-hover-expand .home-site-stats-stage {
    transition-duration: 0.55s;
}
.home-site-stats-stage.home-site-stats-compact {
    transform: scale(0.5);
}
.home-site-stats.home-site-stats-hover-expand .home-site-stats-stage.home-site-stats-compact {
    transform: scale(1);
}
.home-site-stats-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    transform-style: preserve-3d;
}
.home-stat-row-2 + .home-stat-row-3,
.home-stat-row-3 + .home-stat-row-4 {
    margin-top: -0.4rem;
}
.home-stat-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    width: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, filter 0.45s ease, box-shadow 0.45s ease;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    padding: 0.18rem 0.35rem;
    border-radius: 18px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 100%);
    border: 1px solid rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(12px) saturate(1.25);
    -webkit-backdrop-filter: blur(12px) saturate(1.25);
    box-shadow:
        0 10px 36px rgba(15, 23, 42, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
    margin: 0;
}
.home-site-stats-compact .home-stat-row:not(.home-stat-row-shattered) {
    cursor: default;
}
.home-site-stats-compact .home-stat-card:not(.home-stat-card-shattered) {
    cursor: crosshair;
}
.home-stat-card.home-stat-card-cracking {
    animation: homeStatCardCrack 0.32s ease-out;
}
@keyframes homeStatCardCrack {
    0% { filter: brightness(1); transform: scale(1); }
    20% { filter: brightness(1.6) saturate(1.2); transform: scale(1.04); }
    45% { filter: brightness(1.2); transform: scale(0.97) rotate(-0.8deg); }
    70% { filter: brightness(1.45); transform: scale(1.02) rotate(0.7deg); }
    100% { filter: brightness(1); transform: scale(1); }
}
.home-stat-card.home-stat-card-shattered {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    min-height: 0;
}
.home-stat-row.home-stat-row-cracking {
    animation: homeStatRowCrack 0.28s ease-out;
}
@keyframes homeStatRowCrack {
    0% { filter: brightness(1); transform: scale(1); }
    25% { filter: brightness(1.35); transform: scale(1.02); }
    50% { filter: brightness(1.1); transform: scale(0.98) rotate(-0.6deg); }
    75% { filter: brightness(1.25); transform: scale(1.01) rotate(0.5deg); }
    100% { filter: brightness(1); transform: scale(1); }
}
.home-stat-row.home-stat-row-shattered {
    visibility: hidden;
    pointer-events: none;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    opacity: 0;
}
.home-stats-shatter-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 12000;
    overflow: hidden;
}
.home-stat-glass-shard {
    position: fixed;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background: linear-gradient(135deg, rgba(255,255,255,0.88) 0%, rgba(186,230,253,0.62) 45%, rgba(255,255,255,0.42) 100%);
    box-shadow:
        inset 0 0 14px rgba(255, 255, 255, 0.75),
        0 6px 18px rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transform-origin: center center;
    will-change: transform, opacity;
    z-index: 12001;
}
.home-stat-glass-flash {
    position: fixed;
    pointer-events: none;
    z-index: 12000;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.45) 40%, transparent 72%);
    animation: homeStatGlassFlash 0.32s ease-out forwards;
}
@keyframes homeStatGlassFlash {
    0% { opacity: 0.95; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.12); }
}
.home-stats-mute-badge {
    position: absolute;
    right: 1rem;
    bottom: 0.65rem;
    z-index: 5;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
    background: rgba(255,255,255,0.88);
    border: 1px solid rgba(148,163,184,0.45);
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    box-shadow: 0 4px 14px rgba(15,23,42,0.08);
}
.home-site-stats.home-site-stats-shatter-mode .home-stat-card:not(.home-stat-card-shattered) {
    cursor: crosshair;
}
.home-site-stats.home-site-stats-dismissed {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    opacity: 0;
    overflow: hidden;
    border-bottom-width: 0;
    pointer-events: none;
    transition:
        max-height 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        padding 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.45s ease,
        border-width 0.4s ease;
}
.home-stat-row-1 {
    transform: scale(1) rotateX(0deg) translateZ(40px);
    transform-origin: center center;
    z-index: 1;
}
.home-stat-row-2 {
    transform: scale(0.9) rotateX(8deg) translateZ(20px);
    transform-origin: center center;
    z-index: 2;
    opacity: 0.98;
}
.home-stat-row-3 {
    transform: scale(0.8) rotateX(12deg) translateZ(0);
    transform-origin: center center;
    z-index: 3;
    opacity: 0.96;
}
.home-stat-row-4 {
    transform: scale(0.7) rotateX(14deg) translateZ(-20px);
    transform-origin: center center;
    z-index: 10;
    opacity: 0.94;
    pointer-events: auto;
}
.home-stat-row-4 .home-stat-card {
    z-index: 12;
    position: relative;
}
.home-stat-row-1 .home-stat-card,
.home-stat-row-2 .home-stat-card,
.home-stat-row-3 .home-stat-card,
.home-stat-row-4 .home-stat-card {
    transform: none;
}
.home-stat-row.home-stat-row-collapsed {
    display: none !important;
}
.home-stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 1.15rem 1rem 1rem;
    text-align: center;
    pointer-events: auto;
    z-index: 2;
    transform-style: preserve-3d;
    transition: transform 0.32s ease, box-shadow 0.32s ease, z-index 0s;
    border: 1px solid var(--stat-glass-edge, rgba(255, 255, 255, 0.55));
    background: var(--stat-bg, linear-gradient(145deg, rgba(255,255,255,0.72) 0%, rgba(248,250,252,0.38) 100%));
    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -12px 28px rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(1.45);
    -webkit-backdrop-filter: blur(18px) saturate(1.45);
}
.home-stat-row-3 .home-stat-card { z-index: 6; }
.home-stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 16px 16px 0 0;
    background: var(--stat-stripe, #6366f1);
    opacity: 0.95;
    z-index: 2;
}
.home-stat-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0.52) 0%,
        rgba(255, 255, 255, 0.08) 38%,
        transparent 55%,
        rgba(255, 255, 255, 0.14) 100%
    );
    pointer-events: none;
    z-index: 1;
}
.home-stat-row:hover .home-stat-card,
.home-stat-card:hover,
.home-stat-card.home-stat-card-hover {
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -10px 24px rgba(255, 255, 255, 0.12);
}
.home-stat-row-1 .home-stat-card:hover,
.home-stat-row-1 .home-stat-card.home-stat-card-hover {
    transform: scale(1.08) translateY(-5px) translateZ(32px);
}
.home-stat-row-2 .home-stat-card:hover,
.home-stat-row-2 .home-stat-card.home-stat-card-hover {
    transform: scale(1.08) translateY(-5px) translateZ(28px);
}
.home-stat-row-3 .home-stat-card:hover,
.home-stat-row-3 .home-stat-card.home-stat-card-hover {
    transform: scale(1.08) translateY(-5px) translateZ(24px);
}
.home-stat-row-4 .home-stat-card:hover,
.home-stat-row-4 .home-stat-card.home-stat-card-hover {
    transform: scale(1.08) translateY(-5px) translateZ(20px);
}
.home-stat-card.home-stat-card-hover {
    z-index: 24 !important;
}
.home-stat-card-tone-1 { --stat-bg: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(238,242,255,0.52) 100%); --stat-glass-edge: rgba(99,102,241,0.42); --stat-border: rgba(99,102,241,0.32); --stat-stripe: #6366f1; --stat-value: #312e81; --stat-label: #4338ca; --stat-roll-a: #6366f1; --stat-roll-b: #818cf8; }
.home-stat-card-tone-2 { --stat-bg: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(237,233,254,0.52) 100%); --stat-glass-edge: rgba(124,58,237,0.4); --stat-border: rgba(124,58,237,0.3); --stat-stripe: #8b5cf6; --stat-value: #5b21b6; --stat-label: #6d28d9; --stat-roll-a: #7c3aed; --stat-roll-b: #a78bfa; }
.home-stat-card-tone-3 { --stat-bg: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(252,231,243,0.52) 100%); --stat-glass-edge: rgba(219,39,119,0.38); --stat-border: rgba(219,39,119,0.28); --stat-stripe: #ec4899; --stat-value: #9d174d; --stat-label: #be185d; --stat-roll-a: #db2777; --stat-roll-b: #f472b6; }
.home-stat-card-tone-4 { --stat-bg: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(255,228,230,0.52) 100%); --stat-glass-edge: rgba(225,29,72,0.38); --stat-border: rgba(225,29,72,0.28); --stat-stripe: #f43f5e; --stat-value: #9f1239; --stat-label: #be123c; --stat-roll-a: #e11d48; --stat-roll-b: #fb7185; }
.home-stat-card-tone-5 { --stat-bg: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(255,237,213,0.52) 100%); --stat-glass-edge: rgba(234,88,12,0.38); --stat-border: rgba(234,88,12,0.28); --stat-stripe: #f97316; --stat-value: #9a3412; --stat-label: #c2410c; --stat-roll-a: #ea580c; --stat-roll-b: #fb923c; }
.home-stat-card-tone-6 { --stat-bg: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(254,249,195,0.52) 100%); --stat-glass-edge: rgba(202,138,4,0.38); --stat-border: rgba(202,138,4,0.28); --stat-stripe: #eab308; --stat-value: #854d0e; --stat-label: #a16207; --stat-roll-a: #ca8a04; --stat-roll-b: #facc15; }
.home-stat-card-tone-7 { --stat-bg: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(236,252,203,0.52) 100%); --stat-glass-edge: rgba(101,163,13,0.38); --stat-border: rgba(101,163,13,0.28); --stat-stripe: #84cc16; --stat-value: #3f6212; --stat-label: #4d7c0f; --stat-roll-a: #65a30d; --stat-roll-b: #a3e635; }
.home-stat-card-tone-8 { --stat-bg: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(209,250,229,0.52) 100%); --stat-glass-edge: rgba(5,150,105,0.38); --stat-border: rgba(5,150,105,0.28); --stat-stripe: #10b981; --stat-value: #065f46; --stat-label: #047857; --stat-roll-a: #059669; --stat-roll-b: #34d399; }
.home-stat-card-tone-9 { --stat-bg: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(207,250,254,0.52) 100%); --stat-glass-edge: rgba(8,145,178,0.38); --stat-border: rgba(8,145,178,0.28); --stat-stripe: #06b6d4; --stat-value: #0e7490; --stat-label: #0891b2; --stat-roll-a: #0891b2; --stat-roll-b: #22d3ee; }
.home-stat-card-tone-10 { --stat-bg: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(224,242,254,0.52) 100%); --stat-glass-edge: rgba(2,132,199,0.38); --stat-border: rgba(2,132,199,0.28); --stat-stripe: #0ea5e9; --stat-value: #075985; --stat-label: #0284c7; --stat-roll-a: #0284c7; --stat-roll-b: #38bdf8; }
.home-stat-card-tone-11 { --stat-bg: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(219,234,254,0.52) 100%); --stat-glass-edge: rgba(37,99,235,0.38); --stat-border: rgba(37,99,235,0.28); --stat-stripe: #3b82f6; --stat-value: #1e40af; --stat-label: #2563eb; --stat-roll-a: #2563eb; --stat-roll-b: #60a5fa; }
.home-stat-card-tone-12 { --stat-bg: linear-gradient(145deg, rgba(255,255,255,0.78) 0%, rgba(243,232,255,0.52) 100%); --stat-glass-edge: rgba(147,51,234,0.38); --stat-border: rgba(147,51,234,0.28); --stat-stripe: #a855f7; --stat-value: #6b21a8; --stat-label: #7e22ce; --stat-roll-a: #9333ea; --stat-roll-b: #c084fc; }
.home-stat-value {
    position: relative;
    z-index: 1;
    font-size: clamp(1.85rem, 3.8vw, 2.85rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--stat-value, #0f172a);
    margin-bottom: 0.45rem;
    min-height: 1.1em;
}
.home-stat-num {
    font: inherit;
    letter-spacing: inherit;
}
.home-stat-pct {
    font-size: 0.34em;
    font-weight: 700;
    letter-spacing: 0;
    margin-left: 0.12em;
    vertical-align: sub;
    color: var(--stat-label, var(--muted));
    -webkit-text-fill-color: var(--stat-label, var(--muted));
}
.home-stat-value-rolling {
    background: linear-gradient(90deg, var(--stat-roll-a, #6366f1), var(--stat-roll-b, #06b6d4), var(--stat-roll-a, #6366f1));
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: homeStatShimmer 1.8s linear infinite;
}
.home-stat-value-settled {
    background: none !important;
    animation: homeStatPop 0.45s ease;
    color: var(--stat-value, #0f172a) !important;
    -webkit-text-fill-color: var(--stat-value, #0f172a) !important;
}
@keyframes homeStatShimmer {
    0% { background-position: 0% center; }
    100% { background-position: 220% center; }
}
@keyframes homeStatPop {
    0% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
.home-stat-label {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--stat-label, #475569);
}
@media (max-width: 900px) {
    .home-site-stats-stage { perspective: 1000px; }
    .home-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
}
@media (max-width: 520px) {
    .home-site-stats { padding: 1.75rem 0.75rem 2rem; }
    .home-stat-row { grid-template-columns: 1fr; gap: 0.65rem; }
    .home-stat-row-1,
    .home-stat-row-2,
    .home-stat-row-3,
    .home-stat-row-4 {
        transform: none !important;
        margin: 0;
        opacity: 1;
        filter: none;
    }
    .home-stat-card { padding: 0.9rem 0.75rem; }
    .home-stat-label { font-size: 0.66rem; }
    .home-site-stats-stage.home-site-stats-compact { transform: none !important; }
}

.home-site-stats + #promo-zone.home-promo-zone,
.home-site-stats + #promo-zone {
    padding-top: 0;
    margin-top: 0;
}

.section-block { padding: 4rem 2rem; max-width: 1100px; margin: 0 auto; }
.alt-section { background: #f1f5f9; max-width: 100%; }
.alt-section .section-title, .alt-section .section-subtitle, .alt-section .content-grid, .alt-section .faq-list { max-width: 1100px; margin-left: auto; margin-right: auto; }
.workspace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.workspace-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow); }
.workspace-card h3 { font-size: 1rem; margin-bottom: 1rem; color: var(--primary); }
.workspace-card-muted { background: #fef3c7; border-color: #fde68a; }
.task-list { list-style: none; }
.task-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem; }
.task-list a { font-weight: 500; color: var(--text); text-decoration: none; }
.badge-count { background: var(--error); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; }
.ad-zone-placeholder,
.home-promo-placeholder { background: linear-gradient(145deg, #f1f5f9, #e2e8f0); border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 3rem 2rem; text-align: center; width: 100%; max-width: 480px; color: var(--muted); margin: 0 auto; }
.placeholder-icon { font-size: 2.5rem; display: block; margin-bottom: 0.75rem; opacity: 0.5; }
.promo-card-media, .ad-card-media {
    height: 180px;
    background: var(--surface-muted, var(--surface));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.ad-video { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.content-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.download-list { display: flex; flex-direction: column; gap: 0.75rem; }
.download-item { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; }
.download-tag { font-size: 0.78rem; font-weight: 600; color: var(--muted); background: #f1f5f9; padding: 0.3rem 0.65rem; border-radius: 6px; }
.faq-list details.faq-item summary { font-weight: 600; cursor: pointer; }
.feedback-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); max-width: 640px; }
.feedback-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Home — hero CTA + subscription pricing */
.hero-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.25rem;
    margin-top: 1.25rem;
}
.hero-lead-muted {
    margin-top: 0.65rem;
    font-style: italic;
    color: var(--muted);
}
.subscribe-auth-notice {
    margin-bottom: 1rem;
}
.subscription-section .section-subtitle {
    max-width: 52rem;
}
.subscription-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}
.subscription-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    min-height: 100%;
}
.subscription-card-head {
    margin-bottom: 1rem;
}
.subscription-module-code {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--border));
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    margin-bottom: 0.55rem;
}
.subscription-module-name {
    font-size: 1.15rem;
    margin-bottom: 0.45rem;
    color: var(--text);
}
.subscription-module-desc {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.5;
}
.subscription-feature-list {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    flex: 1 1 auto;
}
.subscription-feature-list li {
    position: relative;
    padding: 0.35rem 0 0.35rem 1.15rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: var(--text);
}
.subscription-feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.35rem;
    color: var(--success);
    font-weight: 700;
    font-size: 0.78rem;
}
.subscription-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.subscription-price-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.15rem;
}
.subscription-price-value {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1.1;
}
.subscription-subscribe-btn {
    white-space: nowrap;
    flex-shrink: 0;
}
.subscription-footnote {
    margin-top: 1.75rem;
    font-size: 0.88rem;
    line-height: 1.55;
    max-width: 52rem;
}
.subscription-empty {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--muted) 6%, var(--surface));
}
@media (max-width: 520px) {
    .subscription-card-foot {
        flex-direction: column;
        align-items: stretch;
    }
    .subscription-subscribe-btn {
        width: 100%;
    }
}

.feedback-signed-in-note {
    margin: 0 0 1rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border));
    font-size: 0.9rem;
    color: var(--muted);
}
.feedback-signed-in-note strong { color: var(--text); }

.section-title:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: 4px;
}

.fb-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.65rem;
    align-items: center;
}
.fb-filter-tab {
    border: 1px solid var(--border);
    background: var(--surface, #fff);
    color: var(--muted);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.2;
}
.fb-filter-tab:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.fb-filter-tab.is-active {
    color: var(--primary);
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface, #fff));
}
.feedbacks-table-wrap {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
#panel-feedbacks,
#feedbacks-panel-root {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}
.feedbacks-search-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.55rem 0.65rem;
    margin-bottom: 0.55rem;
}
.feedbacks-search-field { min-width: min(100%, 280px); flex: 1 1 240px; }
.feedbacks-search-wrap { position: relative; }
.feedbacks-search-hint { margin: 0 0 0.65rem; font-size: 0.78rem; }
.feedbacks-search-suggest {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    background: var(--surface, #fff);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text, #0f172a) 12%, transparent);
}
.feedbacks-search-suggest[hidden] { display: none; }
.feedbacks-search-suggest-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    border: 0;
    background: transparent;
    color: var(--text, #0f172a);
    text-align: left;
    padding: 0.45rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
}
.feedbacks-search-suggest-item:hover,
.feedbacks-search-suggest-item.is-active {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.feedbacks-search-suggest-name {
    font-size: 0.86rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.feedbacks-search-suggest-meta {
    font-size: 0.72rem;
    color: var(--muted, #64748b);
}
.feedbacks-search-typo {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    border-radius: 999px;
    padding: 0.05rem 0.35rem;
}
.feedbacks-search-suggest-empty,
.feedbacks-search-suggest-hint {
    padding: 0.45rem 0.55rem;
    font-size: 0.78rem;
    color: var(--muted, #64748b);
}
.pagination-link.is-disabled,
.pagination-link:disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}
.feedbacks-admin-table {
    table-layout: auto;
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
}
.feedbacks-admin-table th,
.feedbacks-admin-table td {
    vertical-align: top;
    padding: 0.4rem 0.5rem;
}
.feedbacks-admin-table tbody tr {
    min-height: 3.25rem;
}
.feedbacks-admin-table .fb-col-from { min-width: 8.5rem; width: auto; }
.feedbacks-admin-table .fb-col-subject { min-width: 6.5rem; max-width: 12rem; width: auto; }
.feedbacks-admin-table .fb-col-message { min-width: 14rem; width: auto; }
.feedbacks-admin-table .fb-col-action { min-width: 10.5rem; max-width: 13.5rem; width: 12rem; }
.fb-action-stack-cell { vertical-align: top; }
.fb-action-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-width: 0;
}
.fb-action-stack .fb-admin-stars { margin: 0; }
.fb-admin-reply {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: stretch;
    width: 100%;
}
.fb-reply-input {
    width: 100%;
    max-width: 100%;
    min-height: 4.8rem;
    font-size: 0.78rem;
    line-height: 1.35;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    resize: vertical;
}
.fb-reply-save { align-self: flex-start; font-size: 0.78rem; }
.fb-reply-save.is-saved { cursor: default; opacity: 0.85; }
.fb-from-cell {
    font-size: 0.82rem;
    line-height: 1.5;
    vertical-align: top;
}
.fb-from-date { color: var(--muted); font-size: 0.78rem; }
.fb-from-name { font-weight: 600; color: var(--text); }
.fb-from-email { color: var(--muted); word-break: break-all; font-size: 0.78rem; }
.fb-subject-cell { word-break: break-word; }
.fb-message-cell {
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.45;
    font-size: 0.84rem;
}
.fb-message-bullets {
    margin: 0;
    padding-left: 1.15rem;
    list-style: disc;
    white-space: pre-wrap;
}
.fb-message-bullets li {
    margin: 0.2rem 0;
}
.fb-message-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 12;
    overflow: hidden;
    max-height: 18em;
}
.fb-actions-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
    white-space: normal;
}
.fb-actions-cell .bracket-link { margin-right: 0; }
.fb-actions-cell .inline-form { display: inline; margin-right: 0.35rem; }
.fb-row-archived { opacity: 0.72; }
.fb-row-marked { background: color-mix(in srgb, var(--warning, #d97706) 8%, var(--surface, #fff)); }
.fb-row-unread { background: color-mix(in srgb, var(--primary) 8%, var(--surface, #fff)); }
.bracket-amber { color: var(--warning, #d97706); }
.feedbacks-page-summary { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--muted); text-align: center; }
#panel-feedbacks .cell-wrap { max-width: none; }
.fb-status-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}
.fb-status-pill.is-new {
    background: color-mix(in srgb, var(--primary) 16%, transparent);
    color: var(--primary);
}
.fb-status-pill.is-read {
    background: color-mix(in srgb, var(--muted) 18%, transparent);
    color: var(--muted);
}
.fb-status-pill.is-archived {
    background: color-mix(in srgb, var(--muted) 14%, transparent);
    color: var(--muted);
}
.fb-status-pill.is-marked {
    background: color-mix(in srgb, var(--warning, #d97706) 16%, transparent);
    color: var(--warning, #b45309);
}
.fb-admin-stars, .fb-mine-stars { display: inline-flex; gap: 0.1rem; align-items: center; flex-wrap: wrap; }
.fb-star-btn, .fb-mine-star {
    border: 0;
    background: transparent;
    color: #cbd5e1;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
.fb-star-btn.is-on, .fb-mine-star.is-on { color: #f59e0b; }
.fb-mine-star-empty { font-size: 0.72rem; color: var(--muted); margin-left: 0.25rem; }
.fb-mine-stars-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted, #64748b);
    margin-right: 0.2rem;
}
.fb-mine-reply {
    margin-top: 0.25rem;
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text, #0f172a);
}
.fb-mine-reply.is-empty { color: var(--muted, #64748b); }
.fb-mine-reply-label { font-weight: 600; color: var(--muted, #64748b); }
.floating-feedback-avg {
    margin: 0 0 0.45rem;
    font-size: 0.84rem;
    color: var(--muted, #64748b);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.floating-feedback-avg.has-rating { color: var(--text, #0f172a); }
.floating-feedback-avg strong { font-weight: 700; }
.fb-avg-stars { display: inline-flex; gap: 0.05rem; align-items: center; }
.fb-avg-star { color: #cbd5e1; font-size: 0.95rem; line-height: 1; }
.fb-avg-star.is-on { color: #f59e0b; }
.floating-feedback-mine-wrap {
    margin-top: 0.85rem;
    border-top: 1px solid var(--border, #e2e8f0);
    padding-top: 0.65rem;
}
.floating-feedback-mine-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
}
.floating-feedback-mine-toggle.is-open .floating-feedback-mine-chevron { transform: rotate(180deg); }
.floating-feedback-mine-panel {
    margin-top: 0.55rem;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    padding: 0.5rem;
    background: color-mix(in srgb, var(--surface, #fff) 92%, var(--primary) 8%);
}
.floating-feedback-mine-panel[hidden] { display: none !important; }
.floating-feedback-mine-hint {
    margin: 0 0 0.45rem;
    font-size: 0.74rem;
    color: var(--muted, #64748b);
}
.floating-feedback-mine-empty {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted, #64748b);
    text-align: center;
    padding: 0.35rem 0;
}
.floating-feedback-mine-item {
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.floating-feedback-mine-item:last-child { border-bottom: 0; }
.floating-feedback-mine-item.is-unread { background: color-mix(in srgb, var(--primary) 6%, transparent); border-radius: 6px; padding-inline: 0.35rem; }
.floating-feedback-mine-item-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.2rem;
}
.fb-mine-status {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.fb-mine-status.is-new { color: #1d4ed8; }
.fb-mine-status.is-read { color: #475569; }
.fb-mine-status.is-archived { color: #94a3b8; }
.fb-mine-time { font-size: 0.68rem; color: var(--muted, #64748b); }
.fb-mine-preview { margin: 0; font-size: 0.78rem; line-height: 1.35; color: var(--text, #0f172a); }
.fb-mine-preview-bullets {
    margin: 0.15rem 0 0;
    padding-left: 1.1rem;
    list-style: disc;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text, #0f172a);
}
.fb-mine-preview-bullets li { margin: 0.12rem 0; }

.password-field-wrap {
    position: relative;
    display: block;
    margin-bottom: 0.85rem;
}
.password-field-wrap input {
    width: 100%;
    padding-right: 2.75rem;
    box-sizing: border-box;
}
.auth-form .password-field-wrap,
.login-form .password-field-wrap {
    margin-bottom: 0;
}
.password-toggle-btn {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.2rem 0.35rem;
    opacity: 0.55;
    color: var(--muted);
}
.password-toggle-btn:hover,
.password-toggle-btn:focus-visible {
    opacity: 1;
    color: var(--primary);
    outline: none;
}
.password-toggle-btn.is-visible {
    opacity: 0.85;
    color: var(--primary);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; }
.form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.6rem 0.85rem; border: 1px solid var(--border); border-radius: 8px; font-size: 0.95rem; font-family: inherit; }
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    max-width: none;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    accent-color: var(--primary);
}
.text-link-em { font-weight: 600; color: var(--primary); }
.text-link-em:hover { text-decoration: underline; }

/* Admin sidebar layout */
.admin-layout-body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #e2e8f0;
    overflow-x: hidden;
}

.admin-shell {
    display: flex;
    min-height: 100vh;
    width: 100%;
}

.admin-sidebar {
    width: 220px;
    min-width: 220px;
    background: #0f172a;
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
}

.admin-sidebar-brand { padding: 1.25rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.admin-sidebar-brand a { color: #fff; font-weight: 800; font-size: 1.1rem; text-decoration: none; display: block; }
.admin-sidebar-brand span { display: block; font-size: 0.72rem; color: rgba(255,255,255,0.5); margin-top: 0.2rem; text-transform: uppercase; letter-spacing: 0.06em; }

.admin-sidebar-nav { flex: 1; padding: 0.75rem 0.5rem; display: flex; flex-direction: column; gap: 0.15rem; overflow-y: auto; }
.admin-sidebar-nav a {
    color: rgba(255,255,255,0.75); text-decoration: none;
    padding: 0.55rem 0.85rem; border-radius: 8px; font-size: 0.88rem; font-weight: 500;
}
.admin-sidebar-nav a:hover, .admin-sidebar-nav a.active { background: rgba(99,102,241,0.3); color: #fff; }

.admin-sidebar-footer { padding: 0.85rem 1rem; border-top: 1px solid rgba(255,255,255,0.1); }
.admin-sidebar-footer .sidebar-user { display: block; font-size: 0.78rem; color: rgba(255,255,255,0.45); margin-bottom: 0.5rem; word-break: break-all; }
.admin-sidebar-footer a { color: rgba(255,255,255,0.55); font-size: 0.82rem; text-decoration: none; }

.admin-workzone {
    flex: 1;
    margin-left: 220px;
    min-height: 100vh;
    padding: 1rem;
    box-sizing: border-box;
    width: calc(100% - 220px);
}

.admin-workzone-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem 1.5rem;
    box-shadow: var(--shadow);
    width: 100%;
    box-sizing: border-box;
}

.admin-zone-header { margin: 0 0 1rem; padding: 0; border-bottom: 1px solid var(--border); padding-bottom: 0.85rem; }
.admin-zone-header h1 { font-size: 1.35rem; font-weight: 700; margin: 0 0 0.25rem; letter-spacing: -0.02em; }
.admin-zone-header p { color: var(--muted); font-size: 0.88rem; margin: 0; }

.admin-zone-section { margin-top: 0.5rem; }
.zone-title { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.25rem; }
.zone-subtitle { color: var(--muted); font-size: 0.88rem; margin-bottom: 1rem; }

.admin-stat-row { display: flex; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.admin-stat-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.25rem; min-width: 160px; color: var(--text); }
.stat-num { display: block; font-size: 1.75rem; font-weight: 800; color: var(--primary); }
.stat-label { font-size: 0.82rem; color: var(--muted); }
.admin-quick-links { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.manage-ads-create { margin-top: 1.25rem; }

.pagination-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1rem 0;
    font-size: 0.88rem;
}
.pagination-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}
.pagination-link:hover { text-decoration: underline; }
.pagination-info { color: var(--muted); }

.feedback-success-msg { margin-bottom: 1rem; }

.admin-form-card { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; color: var(--text); }
.admin-form-card h3 { font-size: 0.95rem; margin-bottom: 0.85rem; }

.admin-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
}
.form-group-full { grid-column: 1 / -1; }
.media-field .field-hint { margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--muted); }
.media-input-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.media-input-row input[type="file"] { flex: 0 1 auto; max-width: 100%; font-size: 0.85rem; }
.media-input-row input[type="text"] { flex: 1 1 220px; min-width: 0; }
.media-or { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.admin-form-grid input, .admin-form-grid select, .admin-form-grid textarea {
    width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--border);
    border-radius: 8px; font-size: 0.9rem; font-family: inherit; box-sizing: border-box;
    background: var(--surface); color: var(--text);
}
.input-sm { padding: 0.35rem 0.5rem; font-size: 0.85rem; border: 1px solid var(--border); border-radius: 6px; min-width: 140px; }

.table-wrap { overflow-x: auto; width: 100%; border: 1px solid var(--border); border-radius: var(--radius); -webkit-overflow-scrolling: touch; }
#panel-users .table-wrap.users-table-shell {
    overflow: visible;
    max-width: 100%;
    min-width: 0;
}
.users-table-scroll-frame {
    position: relative;
    max-width: 100%;
    min-width: 0;
}
.users-table-scroll {
    overflow-x: auto;
    width: 0;
    min-width: 100%;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.users-table-scroll .users-table,
.users-table-scroll .admin-table {
    width: max-content;
    min-width: 100%;
}
.users-scroll-hint {
    position: absolute;
    top: 0.28rem;
    z-index: 6;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--surface);
    color: var(--primary);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 18%, transparent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 800;
}
.users-scroll-hint[hidden] { display: none !important; }
.users-scroll-hint--left { left: 0.35rem; }
.users-scroll-hint--right { right: 0.35rem; }
.users-scroll-hint:hover,
.users-scroll-hint:focus-visible {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    outline: none;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 640px; color: var(--text); }
.admin-table th, .admin-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.admin-table th { background: var(--surface-alt); color: var(--text); font-weight: 600; font-size: 0.8rem; white-space: nowrap; }
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--hover-bg); }

.cell-wrap { word-break: break-word; white-space: normal; max-width: 200px; }
.cell-email {
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cell-roles { white-space: normal; }
.cell-roles .role-chip { display: inline-block; margin: 0.1rem 0.15rem 0.1rem 0; }

.users-table { min-width: 920px; table-layout: auto; }
.users-table-compact { min-width: 640px; }
.users-table th,
.users-table td { vertical-align: middle; padding: 0.5rem 0.65rem; }
.users-table-compact th,
.users-table-compact td { vertical-align: top; padding: 0.4rem 0.5rem; }
.users-table-compact .cell-user-stack,
.users-table-compact .cell-status-stack {
    line-height: 1.35;
    font-size: 0.82rem;
    max-width: 320px;
    word-break: break-word;
}
.users-table .users-col-user { min-width: 220px; width: 28%; }
.users-table-compact .cell-user-stack { min-width: 220px; max-width: 360px; }
.users-table-compact .users-stack-uid { font-weight: 700; color: var(--text); }
.users-table-compact .users-stack-name { color: var(--text); }
.users-table-compact .users-stack-email {
    color: var(--muted);
    font-size: 0.78rem;
    display: inline-block;
    max-width: 100%;
    word-break: break-all;
}
.users-table-compact .users-stack-ref { font-size: 0.78rem; display: inline-block; margin-top: 0.15rem; }
.users-table-compact .cell-status-stack .status-badge { margin-bottom: 0.1rem; }
.users-table .cell-id { width: 2.5rem; color: var(--muted); font-size: 0.8rem; }
.users-table .cell-name { max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.users-table .cell-email { min-width: 150px; max-width: 240px; }
.users-table .cell-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: center;
    max-width: 130px;
}
.users-table .cell-roles .role-chip { margin: 0; }
.users-table .cell-facility { white-space: nowrap; }
.users-table .users-col-company { min-width: 220px; }
.users-table .cell-company { min-width: 220px; max-width: 300px; font-size: 0.82rem; }
.users-table .user-company-form {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: stretch;
    min-width: 0;
    max-width: 280px;
}
.users-table .user-company-form select { width: 100%; padding: 0.3rem 0.4rem; font-size: 0.78rem; }
.user-company-picker { position: relative; width: 100%; }
.user-company-search {
    width: 100%;
    padding: 0.35rem 0.45rem;
    font-size: 0.78rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text);
}
.user-company-search:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}
.user-company-list {
    position: absolute;
    z-index: 40;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    max-height: 11rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.2rem 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--text) 12%, transparent);
}
.user-company-list[hidden] { display: none !important; }
.user-company-option {
    padding: 0.35rem 0.55rem;
    cursor: pointer;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--text);
}
.user-company-option:hover,
.user-company-option:focus,
.user-company-option.is-active {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface));
    outline: none;
}
.user-company-option[hidden] { display: none !important; }
.user-company-empty { margin: 0.25rem 0 0; font-size: 0.72rem; }
.users-table .actions-cell { min-width: 150px; line-height: 1.5; }
.users-table .actions-cell .link-form { display: inline; margin-right: 0.15rem; }
.cell-date { white-space: nowrap; font-size: 0.82rem; color: var(--muted); }

.actions-cell { white-space: normal; min-width: 140px; }
.inline-form { display: inline-flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; margin: 0.15rem 0; }
.stack-form { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; min-width: 130px; }
.stack-form select { width: 100%; padding: 0.35rem 0.5rem; font-size: 0.82rem; border: 1px solid var(--border); border-radius: 6px; }
.cell-company { min-width: 220px; }
.user-company-form { min-width: 200px; max-width: 280px; }

.admin-page { max-width: none; width: 100%; }
.admin-main { /* legacy */ flex: 1; }

.dashboard-shell[data-right-panel="false"] #dashboard-right { display: none !important; }
.dash-panel[hidden] { display: none !important; }

@media (max-width: 768px) {
    .hero-split-inner, .hero-auth-open .hero-split-inner { grid-template-columns: 1fr; gap: 1.25rem; }
    .hero-welcome, .hero-auth-open .hero-welcome { text-align: center; }
    .hero-auth-open .hero-lead-sm { margin: 0 auto; }
    .dashboard-shell.dashboard-unified { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    .admin-sidebar { position: relative; width: 100%; min-width: 0; height: auto; }
    .admin-workzone { margin-left: 0; width: 100%; padding: 0.75rem; }
    .admin-shell { flex-direction: column; }
    .admin-form-grid { grid-template-columns: 1fr; }
}

.role-chip { display: inline-block; background: #eef2ff; color: var(--primary); font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px; }
.role-chip-lg { font-size: 0.85rem; padding: 0.25rem 0.65rem; }
.btn-danger-outline { background: transparent; color: var(--error); border: 1px solid var(--error); padding: 0.3rem 0.6rem; font-size: 0.78rem; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-danger-outline:hover { background: #fee2e2; }
.status-pending_verification { background: #fef3c7; color: #92400e; }
.status-inactive { background: #f1f5f9; color: #475569; }
.status-locked { background: #fee2e2; color: #991b1b; }
.status-suspended { background: #fce7f3; color: #9d174d; }
.status-new { background: #dbeafe; color: #1e40af; }
.status-read { background: #f1f5f9; color: #475569; }
.status-archived { background: #e2e8f0; color: #64748b; }
.info-box { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: var(--radius); padding: 1rem 1.25rem; margin-top: 1rem; font-size: 0.88rem; color: #3730a3; }
.msg-cell { max-width: 240px; word-break: break-word; white-space: normal; }
.alert-info { background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.page-alert { max-width: 900px; margin: 0 auto 1rem; padding: 0 2rem; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-links { display: flex; gap: 1.25rem; }

.mkt-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 1rem; margin-bottom: 0.75rem; }
.mkt-form-grid--nested { margin-bottom: 0; }
.client-password-preview {
    background: var(--surface-muted, #f1f5f9);
    color: var(--muted, #64748b);
    cursor: not-allowed;
}
.client-pre-client-fields[hidden],
.client-user-link-fields[hidden] {
    display: none !important;
}
.mkt-form-grid label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.mkt-form-grid input, .mkt-form-grid textarea { font-weight: 400; }
.mkt-span-2 { grid-column: span 2; }
.mkt-location-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: end; }
.mkt-detail-dl { display: grid; grid-template-columns: 9rem 1fr; gap: 0.35rem 0.75rem; font-size: 0.86rem; margin: 0; }
.mkt-detail-dl dt { font-weight: 600; color: var(--muted); }
.mkt-disc-cell { max-width: 280px; white-space: normal; word-break: break-word; }
.mkt-table td, .mkt-log-table td { font-size: 0.82rem; }
@media (max-width: 640px) {
    .mkt-form-grid { grid-template-columns: 1fr; }
    .mkt-span-2, .mkt-location-row { grid-column: span 1; grid-template-columns: 1fr; }
}

/* Menu icons */
.menu-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 0.4rem;
    text-align: center;
    font-size: 0.78em;
    line-height: 1;
    color: inherit;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    opacity: 0.92;
}
.sidebar-nav a:hover .menu-icon,
.sidebar-nav a.active .menu-icon,
.sidebar-nav-group-toggle:hover .menu-icon,
.sidebar-nav-group-open > .sidebar-nav-group-toggle .menu-icon,
.sidebar-nav-group-active > .sidebar-nav-group-toggle .menu-icon {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    opacity: 1;
}
.menu-label { flex: 1; min-width: 0; }
.user-menu-item-btn { display: flex; align-items: center; }

@media (max-width: 768px) {
    .user-menu-name { display: none; }
    .user-menu-id::before { content: none; margin: 0; }
    .user-menu-id {
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--text);
    }
    .user-menu-caret { flex-shrink: 0; }
}

/* Floating quick feedback (logged-in) */
.floating-feedback-root {
    position: fixed;
    z-index: 1150;
    pointer-events: none;
}
.floating-feedback-root.is-top-left {
    top: calc(3.6rem + env(safe-area-inset-top, 0px));
    left: 0.65rem;
}
.floating-feedback-root.is-top-right {
    top: calc(3.6rem + env(safe-area-inset-top, 0px));
    right: 0.65rem;
}
.floating-feedback-root.is-middle-left {
    top: calc(50% - 1.55rem);
    left: 0.65rem;
}
.floating-feedback-root.is-middle-right {
    top: calc(50% - 1.55rem);
    right: 0.65rem;
}
.floating-feedback-root.is-bottom-left {
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    left: 0.65rem;
}
.floating-feedback-root.is-bottom-right {
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    right: 0.65rem;
}
.floating-feedback-root.is-dragging {
    transform: translate(-50%, -50%);
}
.floating-feedback-root.is-modal-open .floating-feedback-btn {
    opacity: 0;
    pointer-events: none;
}
.floating-feedback-btn {
    pointer-events: auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    min-width: 3.1rem;
    min-height: 3.1rem;
    padding: 0.4rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(100, 116, 139, 0.42);
    background: rgba(148, 163, 184, 0.26);
    color: #334155;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    cursor: pointer;
    touch-action: none;
    user-select: none;
    font: inherit;
    transition: opacity 0.18s ease, transform 0.15s ease;
}
.floating-feedback-btn:active { transform: scale(0.96); }
.floating-feedback-btn-icon { font-size: 1.15rem; line-height: 1; pointer-events: none; }
.floating-feedback-btn-label {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    opacity: 0.88;
    pointer-events: none;
}
.floating-feedback-layer {
    position: fixed;
    inset: 0;
    z-index: 1185;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}
.floating-feedback-layer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.floating-feedback-layer[hidden] {
    display: flex !important;
}
.floating-feedback-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.floating-feedback-modal {
    position: relative;
    z-index: 1;
    width: min(100%, 22rem);
    max-height: min(88vh, 28rem);
    overflow: auto;
    transform: translateY(8px) scale(0.98);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
}
.floating-feedback-layer.is-open .floating-feedback-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}
@media (max-width: 768px) {
    .floating-feedback-layer {
        align-items: flex-start;
        justify-content: center;
        padding: 0.55rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom));
    }
    .floating-feedback-modal {
        width: min(100%, 22rem);
        max-height: min(58vh, calc(100dvh - 4.5rem));
        margin-top: 0.25rem;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .floating-feedback-form-actions {
        position: sticky;
        bottom: 0;
        background: var(--surface);
        padding-top: 0.45rem;
        margin-top: 0.35rem;
        border-top: 1px solid var(--border);
    }
}
@media (max-width: 768px) and (hover: none), (max-width: 768px) and (pointer: coarse) {
    .floating-feedback-layer.is-mobile-viewport {
        align-items: flex-start;
        justify-content: center;
        padding: 0.55rem 0.65rem 0.45rem;
        overflow: hidden;
    }
    .floating-feedback-layer.is-mobile-viewport .floating-feedback-modal {
        width: min(100%, 22rem);
        margin-top: 0;
        transform: none !important;
        opacity: 1;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .floating-feedback-layer.is-mobile-viewport .floating-feedback-form textarea {
        min-height: 4.5rem;
        max-height: 8rem;
    }
}
.floating-feedback-modal.is-keyboard-shift {
    transition: max-height 0.15s ease;
}
.floating-feedback-modal-card {
    position: relative;
    padding: 1.1rem 1rem 1rem;
    margin: 0;
    text-align: left;
}
.floating-feedback-close {
    position: absolute;
    top: 0.45rem;
    right: 0.55rem;
    border: none;
    background: transparent;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 0.15rem 0.35rem;
    z-index: 2;
}
.floating-feedback-modal-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    padding-right: 1.5rem;
}
.floating-feedback-modal-hint {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.4;
}
.floating-feedback-form label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 0.35rem;
}
.floating-feedback-form textarea {
    width: 100%;
    min-height: 6.5rem;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.55rem 0.65rem;
    font: inherit;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
}
.floating-feedback-captcha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin: 0 0 0.65rem;
    padding: 0.55rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface) 94%, var(--primary) 6%);
}
.floating-feedback-captcha-copy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.floating-feedback-captcha-copy > span:last-child {
    display: grid;
    gap: 0.08rem;
}
.floating-feedback-captcha-copy strong {
    color: var(--text);
    font-size: 0.76rem;
    line-height: 1.2;
}
.floating-feedback-captcha-copy small {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.2;
    white-space: nowrap;
}
.floating-feedback-captcha-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--text-on-primary);
    font-size: 0.82rem;
    font-weight: 800;
}
.floating-feedback-captcha-answer {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.floating-feedback-captcha-answer input {
    width: 4.5rem;
    height: 2.1rem;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--surface);
    color: var(--text);
    padding: 0.35rem 0.45rem;
    text-align: center;
    font: inherit;
    font-size: 0.82rem;
}
.floating-feedback-captcha-answer input:focus {
    border-color: var(--primary);
    outline: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
    outline-offset: 1px;
}
.floating-feedback-captcha-refresh {
    display: inline-grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 0.75);
    background: var(--surface);
    color: var(--primary);
    font: inherit;
    font-size: 1.05rem;
    cursor: pointer;
}
.floating-feedback-captcha-refresh:hover,
.floating-feedback-captcha-refresh:focus-visible {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--surface) 90%, var(--primary) 10%);
}
.floating-feedback-captcha-refresh:disabled,
.floating-feedback-captcha-answer input:disabled {
    cursor: wait;
    opacity: 0.6;
}
@media (max-width: 380px) {
    .floating-feedback-captcha {
        align-items: stretch;
        flex-direction: column;
    }
    .floating-feedback-captcha-answer input {
        flex: 1;
    }
}
.floating-feedback-photos {
    margin: 0 0 0.65rem;
    padding: 0.45rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface, #fff) 92%, var(--primary) 8%);
    outline: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
.floating-feedback-photos:focus-visible {
    border-color: var(--primary);
}
.floating-feedback-photo-hint {
    margin: 0;
    font-size: 0.72rem;
    color: var(--muted);
    text-align: center;
    line-height: 1.35;
}
.floating-feedback-photo-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.floating-feedback-photo-item {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.floating-feedback-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.floating-feedback-photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 1.15rem;
    height: 1.15rem;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface, #111) 75%, transparent);
    color: var(--text-on-primary, #fff);
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.fb-mine-thumbs,
.fb-attach-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.35rem 0 0.25rem;
}
.fb-mine-thumb,
.fb-attach-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--border);
    display: block;
}
.home-feedback-photos {
    margin: 0 0 1rem;
    padding: 0.55rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--surface, #fff) 92%, var(--primary) 8%);
    outline: none;
    touch-action: manipulation;
}
.home-feedback-photo-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--muted);
    text-align: center;
}
.home-feedback-photo-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.home-feedback-photo-item {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border);
}
.home-feedback-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.home-feedback-photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 1.2rem;
    height: 1.2rem;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface, #111) 75%, transparent);
    color: var(--text-on-primary, #fff);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.floating-feedback-error {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    color: var(--error);
}
.floating-feedback-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
.floating-feedback-thanks {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: #15803d;
    font-weight: 600;
    text-align: center;
}
body.floating-feedback-open { overflow: hidden; }
[data-theme="dark"] .floating-feedback-btn {
    background: rgba(51, 65, 85, 0.55);
    border-color: rgba(148, 163, 184, 0.35);
    color: #e2e8f0;
}

/* Settings panel typography */
#panel-settings .settings-panel-body .field-hint {
    font-size: 0.78rem;
    font-weight: 400;
}
#panel-settings .settings-panel-body .settings-combo-hint {
    font-size: calc(0.78rem - 3px);
}
#panel-settings .settings-panel-body .profile-form label,
#panel-settings .settings-panel-body .profile-form input,
#panel-settings .settings-panel-body .profile-form select,
#panel-settings .settings-panel-body .profile-form button,
#panel-settings .settings-panel-body .profile-form .btn,
#panel-settings .settings-panel-body .alert {
    font-size: 0.86rem;
}
#panel-settings .settings-panel-body .profile-form label {
    font-weight: 500;
}
#panel-settings .settings-panel-body code {
    font-size: calc(0.8em - 1px);
}

/* Global type — slightly smaller & softer */
h1, h2, h3, h4, h5, h6 { color: var(--text); font-weight: 600; }
strong, b { font-weight: 600; color: var(--text); }
.navbar-links a { font-size: 0.84rem; font-weight: 500; }
.section-title { font-size: 1.35rem; font-weight: 600; }
.admin-table th { font-weight: 500; }
.profile-form .form-group label,
.compose-row label,
.admin-form label,
.form-group label {
    font-weight: 500;
    color: var(--muted);
}
.field-hint {
    font-size: 0.76rem;
    color: var(--muted);
    font-weight: 400;
    line-height: 1.45;
}
.field-hint {
    font-size: 0.76rem;
    color: var(--muted);
    font-weight: 400;
    line-height: 1.45;
}
.btn { font-size: 0.84rem; font-weight: 500; }
.btn-sm { font-size: calc(0.78rem - 1px); }
.empty-msg { font-size: 0.84rem; }

/* Social feed — composer */
.social-composer { margin-bottom: 1rem; }
.social-composer-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.social-composer-card.is-collapsed {
    padding: 0;
    cursor: pointer;
}
.social-composer-card.is-collapsed:hover {
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.09);
}
.social-composer-card.is-drag-hover {
    outline: 2px dashed var(--primary);
    outline-offset: 2px;
}
.social-composer-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
}
.social-composer-card:not(.is-collapsed) .social-composer-head { display: none; }
.social-composer-teaser {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.35rem;
    flex: 1;
    min-width: 0;
}
.social-composer-card:not(.is-collapsed) .social-composer-teaser { display: none; }
.social-composer-expanded { display: block; }
.social-composer-card.is-collapsed .social-composer-expanded { display: none; }
.social-composer-teaser-text {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    text-align: left;
    font: inherit;
    font-size: 1.12rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.2;
    user-select: none;
    cursor: text;
}
.social-composer-teaser-text:hover,
.social-composer-teaser-text:focus-visible {
    color: #64748b;
}
.social-composer-avatar-link {
    display: inline-flex;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 50%;
    line-height: 0;
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 3;
}
.social-composer-avatar-link:focus-visible {
    outline: 2px solid var(--brand-primary, #2563eb);
    outline-offset: 2px;
}
.social-composer-avatar--has-photo {
    background: transparent !important;
    overflow: hidden;
}
.social-composer-avatar--has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    display: block;
    pointer-events: none;
}
.social-composer-avatar--sm {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 0.88rem;
}
.social-composer-body {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1rem 0.5rem;
    align-items: flex-start;
}
.social-composer-avatar {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    pointer-events: none;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}
.social-composer-main {
    flex: 1;
    min-width: 0;
    position: relative;
}
.social-composer-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 8.5rem;
    max-height: 17rem;
    background: #f8fafc;
    border-radius: 12px;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    box-sizing: border-box;
    transition: background 0.15s, box-shadow 0.15s;
    overflow: hidden;
}
.social-composer-stack:focus-within {
    background: #fff;
    box-shadow: inset 0 0 0 2px #c7d2fe;
}
.social-composer-title,
.social-composer-desc {
    width: 100%;
    border: none;
    resize: none;
    font-family: inherit;
    background: transparent;
    color: #1e293b;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 1.45;
}
.social-composer-title {
    font-size: 1.2rem;
    font-weight: 600;
    flex: 0 1 auto;
    min-height: 1.75rem;
    max-height: 45%;
}
.social-composer-title::placeholder {
    color: #94a3b8;
    font-weight: 600;
}
.social-composer-desc {
    font-size: 0.9rem;
    font-weight: 400;
    color: #475569;
    flex: 1 1 auto;
    min-height: 0;
}
.social-composer-desc::placeholder { color: #b0bac9; font-weight: 400; }
.social-composer-desc.is-dormant {
    flex: 0 0 0;
    min-height: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    padding: 0;
}
.social-composer-stack.has-body .social-composer-desc.is-dormant {
    flex: 1 1 auto;
    height: auto;
    min-height: 2.5rem;
    opacity: 1;
    pointer-events: auto;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid #e8edf4;
}
.social-composer-stack.has-body .social-composer-title {
    max-height: 55%;
}
.social-vis-picker { position: relative; flex-shrink: 0; z-index: 2; }
.social-composer-footer .social-vis-menu {
    top: auto;
    bottom: calc(100% + 0.35rem);
    right: 0;
    left: auto;
}
.social-vis-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 1.75rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 600;
    transition: background 0.15s, transform 0.1s;
}
.social-vis-trigger:hover { background: #e0e7ff; }
.social-vis-trigger.is-private { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.social-vis-trigger.is-friends { background: #ecfdf5; color: #047857; border-color: #bbf7d0; }
.social-vis-trigger svg { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }
.social-vis-trigger-label { max-width: 9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.social-vis-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 14rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    padding: 0.35rem;
    z-index: 10;
}
.social-vis-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: #334155;
}
.social-vis-option:hover { background: #f1f5f9; }
.social-vis-option.is-active { background: #eef2ff; }
.social-vis-option svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; color: #6366f1; }
.social-vis-option span { display: flex; flex-direction: column; gap: 0.05rem; }
.social-vis-option strong { font-size: 0.8rem; font-weight: 600; }
.social-vis-option small { font-size: 0.68rem; color: #94a3b8; }
.social-composer-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0 1rem 0.65rem 4.25rem;
}
.social-preview-card {
    position: relative;
    width: 5.25rem;
    flex-shrink: 0;
}
.social-preview-thumb {
    position: relative;
    width: 100%;
    height: 5.25rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #f1f5f9;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
.social-preview-card.is-ready .social-preview-thumb {
    border-color: #c7d2fe;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.18);
}
.social-preview-card.is-ready:hover .social-preview-thumb {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.22);
}
.social-preview-hover-dim {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgba(15, 23, 42, 0);
    pointer-events: none;
    transition: background 0.15s ease;
}
.social-preview-card.is-ready:hover .social-preview-hover-dim {
    background: rgba(15, 23, 42, 0.42);
}
.social-preview-delete {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 5;
    width: 1.55rem;
    height: 1.55rem;
    padding: 0;
    margin: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.12s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.social-preview-delete.is-inactive {
    display: none !important;
}
.social-preview-card.is-ready:hover .social-preview-delete:not(.is-inactive),
.social-preview-card.is-ready:focus-within .social-preview-delete:not(.is-inactive) {
    opacity: 1;
    transform: scale(1);
}
.social-preview-delete:hover,
.social-preview-delete:focus {
    background: #dc2626;
    outline: none;
}
.social-preview-item {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
    border: none;
    background: transparent;
}
.social-preview-compress {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.15rem;
    min-height: 0.7rem;
}
.social-preview-compress[hidden] { display: none !important; }
.social-preview-compress-track {
    flex: 1;
    height: 0.24rem;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.social-preview-compress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6366f1, #22c55e);
    border-radius: 999px;
    transition: width 0.12s ease-out;
}
.social-preview-compress-pct {
    font-size: 0.55rem;
    font-weight: 700;
    color: #6366f1;
    min-width: 1.75rem;
    text-align: right;
    line-height: 1;
    flex-shrink: 0;
}
.social-composer-card:not(.is-posting) .social-composer-media-progress {
    display: none !important;
}
.social-preview-item img,
.social-preview-item video { width: 100%; height: 100%; object-fit: cover; }
.social-preview-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 0.55rem;
    font-weight: 700;
    text-align: center;
    background: rgba(0,0,0,0.55);
    color: #fff;
    padding: 0.1rem;
}
.social-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.55rem 1rem 0.85rem;
    border-top: 1px solid #f1f5f9;
    margin-top: 0.25rem;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.social-composer-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}
.social-composer-tools { display: flex; align-items: center; gap: 0.35rem; }
.social-tool-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    cursor: pointer;
    color: #22c55e;
    transition: background 0.15s, transform 0.1s;
}
.social-tool-btn:hover { background: #f0fdf4; transform: scale(1.08); }
.social-tool-btn--video { color: #ef4444; }
.social-tool-btn--video:hover { background: #fef2f2; }
.social-tool-btn svg { width: 1.25rem; height: 1.25rem; pointer-events: none; }
.social-file-input { position: absolute; width: 0; height: 0; opacity: 0; overflow: hidden; }
/* The native file control is only as tall as its font. A huge font fills the icon so a WebView tap opens the picker. */
.social-tool-btn > .social-file-input {
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0.02;
    z-index: 5;
    cursor: pointer;
    font-size: 100px;
    line-height: 100px;
    pointer-events: auto;
}
.social-tool-count {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    top: -2px;
    right: -2px;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: #6366f1;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-post-btn {
    padding: 0.45rem 1.35rem;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
    transition: transform 0.1s, box-shadow 0.15s;
}
.social-post-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
}
.social-post-btn:active { transform: translateY(0); }
.social-feed-toolbar { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
/* 00045 desktop: less air above sort + Find (composer→toolbar gap) */
@media (min-width: 1025px) {
    #panel-social .social-composer {
        margin-bottom: 0.35rem;
    }
    #panel-social .social-feed-toolbar[data-pincode="00045"] {
        margin-top: 0;
        margin-bottom: 0.5rem;
        padding-top: 0;
    }
}
.social-feed-sort-links { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; min-width: 0; }
.social-feed-user-search {
    margin-left: auto;
    display: flex;
    align-items: center;
    min-width: min(100%, 16rem);
    position: relative;
    flex: 0 0 auto;
}
.social-feed-user-search-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}
.social-feed-user-search-icon {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    pointer-events: none;
    z-index: 1;
    line-height: 0;
}
.social-feed-user-search-icon svg { display: block; }
.social-feed-user-q {
    width: 100%;
    padding: 0.3rem 0.55rem 0.3rem 1.85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.8rem;
}
.social-feed-user-q::-webkit-search-decoration,
.social-feed-user-q::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.social-feed-user-suggest {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 40;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: var(--surface);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 12%, transparent);
}
.social-feed-user-suggest[hidden] { display: none; }
.social-feed-user-suggest-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.7rem;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.social-feed-user-suggest-item:hover,
.social-feed-user-suggest-item.is-active {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}
.social-feed-user-suggest-avatar {
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--primary) 18%, var(--surface));
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
}
.social-feed-user-suggest-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.social-feed-user-suggest-meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}
.social-feed-user-suggest-name {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.social-feed-user-suggest-id {
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.social-feed-user-suggest-empty,
.social-feed-user-suggest-hint {
    padding: 0.55rem 0.7rem;
    font-size: 0.78rem;
    color: var(--muted);
}
.social-feed-user-banner {
    margin: -0.35rem 0 0.75rem;
    font-size: 0.82rem;
    color: var(--muted);
}
.social-feed-user-banner strong { color: var(--text); }
.social-feed-user-banner-clear {
    margin-left: 0.45rem;
    border: 0;
    background: transparent;
    color: var(--primary);
    font: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.social-feed-new-banner {
    display: none;
    position: fixed;
    top: calc(var(--site-sticky-top, var(--dash-sticky-top, 7rem)) + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    width: max-content;
    max-width: calc(100vw - 1rem);
    margin: 0;
    padding: 0.4rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
    color: var(--text);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--text) 12%, transparent);
    align-items: center;
    gap: 0.4rem;
}
.social-feed-new-banner:not([hidden]) {
    display: inline-flex;
}
.social-feed-new-banner:hover,
.social-feed-new-banner:focus-visible {
    background: color-mix(in srgb, var(--primary) 18%, var(--surface));
    outline: none;
}
.social-feed-new-banner-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
    flex: 0 0 auto;
}
.social-feed-new-banner-label { line-height: 1.2; }
.social-feed-empty { text-align: center; padding: 1.5rem; color: var(--muted); }

/* legacy compose — removed */
.social-compose-card { display: none; }
.social-sort-link { padding: 0.25rem 0.65rem; border-radius: 999px; text-decoration: none; color: var(--muted); border: 1px solid var(--border); font-size: 0.78rem; }
.social-sort-link.is-active { background: #eef2ff; color: var(--primary); border-color: #c7d2fe; font-weight: 600; }
.social-feed { display: flex; flex-direction: column; gap: 0.85rem; }
.social-feed-sponsored-wrap { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.5rem 0.65rem 0.65rem; background: var(--surface-elevated); }
.social-sponsored-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 0.35rem; }
.settings-subheading { margin: 1rem 0 0.5rem; font-size: 0.95rem; }
.social-post-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.social-post-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.social-post-author { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.85rem; }
.social-post-author-handle {
    font-weight: 600;
    color: #334155;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: inherit;
    cursor: pointer;
    line-height: 1.2;
}
.social-post-author-handle:hover { color: var(--primary); text-decoration: underline; }
.social-post-author-trigger.is-locked,
.social-post-author-trigger.is-locked:hover {
    cursor: not-allowed;
    opacity: 0.72;
}
.social-post-author-handle.is-locked:hover { color: #334155; text-decoration: none; }
.profile-privacy-item--lock {
    padding-bottom: 0.65rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid var(--border);
}
.social-post-author-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    background: #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.social-post-author-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.social-post-author-avatar-placeholder {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1;
}
.profile-privacy-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.65rem; }
.profile-privacy-item { margin: 0; }
.profile-privacy-label { display: flex; align-items: flex-start; gap: 0.55rem; cursor: pointer; font-size: 0.9rem; line-height: 1.45; }
.profile-privacy-label input { margin-top: 0.2rem; flex-shrink: 0; }
.sfg-profile-public-contact {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    font-size: 0.82rem;
    color: var(--muted);
    display: grid;
    gap: 0.2rem;
}
.social-role-badge { font-size: 0.68rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 4px; background: color-mix(in srgb, var(--muted) 18%, var(--surface)); color: var(--muted); }

/* Membership ticks PIN 00242 — one ladder tick (Twitter shape) + optional Angel star */
.social-mem-tick {
    --mem-tick: var(--primary);
    --mem-tick-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--mem-tick-size);
    height: var(--mem-tick-size);
    margin-left: 0.14rem;
    vertical-align: middle;
    position: relative;
    color: #fff;
}
.social-mem-tick--cup { --mem-tick: #2563EB; } /* Cup Of Tea — blue */
.social-mem-tick--more { --mem-tick: #059669; } /* More Cup — emerald */
.social-mem-tick--jarkar { --mem-tick: #D97706; } /* 1% Jarkar — gold */
.social-mem-tick--cup-jarkar { --mem-tick: #D97706; } /* Cup+Jarkar (no More) — dual */
.social-mem-tick--angel { --mem-tick: #D4A017; } /* Angel — turmeric gold */
.social-mem-tick--s1 { --mem-tick-size: 0.9rem; }
.social-mem-tick--s2 { --mem-tick-size: 1.1rem; }
.social-mem-tick--s3 { --mem-tick-size: 1.35rem; }
.social-mem-tick--s4 { --mem-tick-size: 1.6rem; }

/* Membership ladder — ChatGPT seal: ROUND wave scallops (not sharp star spikes) */
.social-mem-tick--twitter {
    --mem-tick-seal: url("/img/membership/mem-tick-seal.svg?v=4");
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 1px 1.5px color-mix(in srgb, var(--text) 20%, transparent));
}
/* Full-tick (verified): solid seal + white check */
.social-mem-tick--twitter:not(.is-pending) {
    background-color: var(--mem-tick);
    -webkit-mask-image: var(--mem-tick-seal);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: var(--mem-tick-seal);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
.social-mem-tick--twitter:not(.is-pending).social-mem-tick--cup-jarkar {
    background-color: transparent;
    background-image: linear-gradient(135deg, #2563EB 0% 48%, #D97706 52% 100%);
}
.social-mem-tick--twitter:not(.is-pending)::before {
    content: none;
}
.social-mem-tick--twitter:not(.is-pending)::after {
    content: "";
    position: relative;
    z-index: 1;
    width: calc(var(--mem-tick-size) * 0.28);
    height: calc(var(--mem-tick-size) * 0.48);
    border: solid #fff;
    border-width: 0 0.14rem 0.14rem 0;
    border-radius: 0.05rem;
    transform: rotate(45deg) translate(-0.02rem, -0.06rem);
    box-shadow: 0.5px 0.5px 0 color-mix(in srgb, #000 12%, transparent);
}
/* SemiTick (pending): seal with white core + dashed progress + coloured check — ref copy */
.social-mem-tick--twitter.is-pending {
    background:
        radial-gradient(circle at center,
            #fff 0 48%,
            var(--mem-tick) 50% 100%);
    -webkit-mask-image: var(--mem-tick-seal);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: var(--mem-tick-seal);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
.social-mem-tick--twitter.is-pending.social-mem-tick--cup-jarkar {
    background:
        radial-gradient(circle at center, #fff 0 48%, transparent 50%),
        linear-gradient(135deg, #2563EB 0% 48%, #D97706 52% 100%);
}
.social-mem-tick--twitter.is-pending::before {
    content: "";
    position: absolute;
    inset: 22%;
    z-index: 1;
    border-radius: 50%;
    background: transparent;
    border: 1.35px dashed color-mix(in srgb, var(--mem-tick) 78%, #fff);
    box-sizing: border-box;
    opacity: 0.95;
    pointer-events: none;
    -webkit-mask-image: none;
    mask-image: none;
}
.social-mem-tick--twitter.is-pending::after {
    content: "";
    position: relative;
    z-index: 2;
    width: calc(var(--mem-tick-size) * 0.26);
    height: calc(var(--mem-tick-size) * 0.44);
    border: solid var(--mem-tick);
    border-width: 0 0.13rem 0.13rem 0;
    border-radius: 0.05rem;
    transform: rotate(45deg) translate(-0.02rem, -0.05rem);
    box-shadow: none;
}
/* Angel Doner — turmeric gold star */
.social-mem-tick--star,
.social-mem-tick--crown {
    border-radius: 0.2rem;
    background: linear-gradient(145deg, #f6d56a, var(--mem-tick) 42%, #a67c00);
    clip-path: polygon(50% 0%, 63% 28%, 98% 28%, 72% 50%, 82% 90%, 50% 68%, 18% 90%, 28% 50%, 2% 28%, 37% 28%);
    box-shadow: 0 0 0 1px color-mix(in srgb, #a67c00 40%, transparent);
}
.social-mem-tick--star::after,
.social-mem-tick--crown::after {
    content: none;
}
.social-mem-tick--star.is-pending,
.social-mem-tick--crown.is-pending {
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--mem-tick);
    clip-path: none;
    border-radius: 0.25rem;
    border: 2px solid var(--mem-tick);
}
.social-mem-tick.is-verified {
    opacity: 1;
}
.social-company-badge { font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 4px; background: #eef2ff; color: var(--primary); }
.social-post-meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--muted); margin-left: auto; }
.social-post-time,
.social-shared-time {
    font-style: italic;
    font-weight: 500;
    color: var(--muted);
    font-size: 0.75rem;
    white-space: nowrap;
    line-height: 1.2;
}
.social-vis-badge { font-size: 0.65rem; font-weight: 700; padding: 0.1rem 0.35rem; border-radius: 4px; background: #ecfdf5; color: #16a34a; }
.social-vis-badge.is-private { background: #fef3c7; color: #b45309; }
.social-vis-badge.is-friends { background: #dbeafe; color: #1d4ed8; }

.social-vault-status {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    white-space: nowrap;
}
.social-vault-status.is-live { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.social-vault-status.is-deleted { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.social-vault-status.is-accepted { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.social-vault-status.is-rejected { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

.my-vault-feed .social-post-card[data-owner-vault-status="DELETED"],
.my-vault-feed .social-post-card[data-owner-vault-status="REJECTED"] {
    opacity: 0.88;
}
.social-post-title { margin: 0 0 0.35rem; font-size: calc(1rem + 1pt); font-weight: 600; color: #334155; }
.yo-autolink {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 0.12em;
    word-break: break-word;
}
.yo-autolink:hover {
    color: var(--primary-dark);
}
.social-read-body .yo-autolink,
.ad-comment-body .yo-autolink {
    color: var(--primary);
}
.social-post-desc-wrap { margin-bottom: 0.65rem; }
.social-post-desc {
    margin: 0;
    font-size: calc(0.88rem + 2pt);
    line-height: 1.55;
    color: #475569;
    white-space: pre-wrap;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.social-post-desc.is-expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    max-height: none;
}
.social-post-more {
    margin: 0.2rem 0 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--primary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}
.social-post-read-more {
    display: none !important;
}
.social-post-media { margin-bottom: 0.65rem; }
.social-post-media-grid {
    display: grid;
    gap: 0.25rem;
    grid-template-columns: 1fr;
    border-radius: 8px;
    overflow: hidden;
    contain: layout style;
}
.social-post-media-grid.is-count-1 {
    max-height: none;
    display: block;
    background: #111827;
}
.social-post-media-grid.is-count-1 .social-media-tile,
.social-post-media-grid.is-count-1 .social-media-tile.is-stretch,
.social-post-media-grid.is-count-1 .social-media-tile.is-smaller-than-box {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(70vh, 42.5rem);
    background: #111827;
    overflow: hidden;
}
.social-media-blur {
    display: none;
}
/* PIN 00044 computer: Facebook-style — never crop a single photo to fill width.
   Tall/portrait: full image, height-capped, side letterbox with blurred copy. */
.social-post-media-grid.is-count-1 .social-media-blur {
    display: block;
    position: absolute;
    inset: -20%;
    width: 140%;
    height: 140%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    filter: blur(28px) saturate(1.2) brightness(0.62);
    transform: scale(1.08);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.social-post-media-grid.is-count-1 .social-media-img,
.social-post-media-grid.is-count-1 .social-media-video,
.social-post-media-grid.is-count-1 .social-media-tile.is-stretch .social-media-img,
.social-post-media-grid.is-count-1 .social-media-tile.is-smaller-than-box .social-media-img {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(70vh, 42.5rem);
    object-fit: contain;
    object-position: center;
}
@media (max-width: 1024px) {
    /* PIN 00044 phone: Facebook mobile — photo flush to screen width, no side crop/letterbox. */
    .social-post-media-grid.is-count-1 {
        background: transparent;
        border-radius: 0;
    }
    .social-post-media-grid.is-count-1 .social-media-tile,
    .social-post-media-grid.is-count-1 .social-media-tile.is-stretch,
    .social-post-media-grid.is-count-1 .social-media-tile.is-smaller-than-box {
        display: block;
        aspect-ratio: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        background: transparent;
        overflow: hidden;
        border-radius: 0;
    }
    .social-post-media-grid.is-count-1 .social-media-blur {
        display: none;
    }
    .social-post-media-grid.is-count-1 .social-media-img,
    .social-post-media-grid.is-count-1 .social-media-video,
    .social-post-media-grid.is-count-1 .social-media-tile.is-stretch .social-media-img,
    .social-post-media-grid.is-count-1 .social-media-tile.is-smaller-than-box .social-media-img {
        display: block;
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: none;
        object-fit: contain;
        object-position: center;
        flex: none;
        border-radius: 0;
    }
}
.social-post-media-grid.is-count-2 {
    grid-template-columns: 1fr 1fr;
    height: min(240px, 42vw);
    max-height: 260px;
}
.social-post-media-grid.is-count-2 .social-media-tile {
    aspect-ratio: auto;
    height: 100%;
}
.social-post-media-grid.is-count-3plus {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    height: min(300px, 52vw);
    max-height: 320px;
}
.social-post-media-grid.is-count-3plus .social-media-tile {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
}
.social-post-media-grid.is-count-3plus .social-media-tile:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / span 2;
}
.social-post-media-grid.is-count-3plus .social-media-tile:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}
.social-post-media-grid.is-count-3plus .social-media-tile:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
}
.social-post-media-grid.is-count-3plus .social-media-tile:nth-child(n+4) {
    display: none !important;
}
.social-media-more-badge {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.58);
    color: #fff;
    font-size: 1.85rem;
    font-weight: 800;
    pointer-events: none;
    letter-spacing: 0.02em;
}
.social-read-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.social-read-modal[hidden] { display: none !important; }
.social-read-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
}
.social-read-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 32rem);
    max-height: min(80vh, 36rem);
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    padding: 1rem 1rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.social-read-close {
    position: absolute;
    top: 0.45rem;
    right: 0.55rem;
    border: 0;
    background: none;
    font-size: 1.35rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
}
.social-read-title {
    margin: 0;
    padding-right: 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #334155;
}
.social-read-body {
    flex: 1;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #475569;
    padding: 0.65rem 0.75rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-height: 8rem;
    max-height: calc(80vh - 8rem);
}
.social-post-media-grid.is-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.social-media-tile {
    position: relative;
    isolation: isolate;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
    cursor: pointer;
    aspect-ratio: 16 / 10;
}
.social-media-tile .social-media-img,
.social-media-tile .social-media-video {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    border-radius: 0;
    display: block;
}
.social-media-play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: 3rem;
    height: 3rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    font-size: 1.05rem;
    line-height: 1;
    color: #fff;
    background: rgba(15, 23, 42, 0.30);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    pointer-events: none;
    backdrop-filter: blur(2px);
}
.social-media-play-icon::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left: 0.15rem;
    border-style: solid;
    border-width: 0.45rem 0 0.45rem 0.75rem;
    border-color: transparent transparent transparent #fff;
}
.social-media-tile.is-playing .social-media-play-icon,
.social-media-play-icon[hidden] {
    display: none !important;
}
.social-video-chrome {
    position: absolute;
    top: 0.45rem;
    left: 50%;
    right: auto;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transform: translateX(-50%);
    pointer-events: none;
}
.social-video-autoplay-btn,
.social-video-mute-btn {
    pointer-events: auto;
    border: 0;
    border-radius: 999px;
    min-width: 2.15rem;
    height: 2.15rem;
    padding: 0 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #fff;
    background: rgba(15, 23, 42, 0.30);
    backdrop-filter: blur(2px);
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
}
.social-video-autoplay-btn .social-video-chrome-ico,
.social-video-mute-btn .social-video-chrome-ico {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
    display: block;
}
.social-video-autoplay-btn.is-on,
.social-video-mute-btn:not(.is-muted) {
    background: color-mix(in srgb, var(--primary, #4f46e5) 30%, transparent);
}
.social-video-mute-btn {
    margin-left: 0;
}
.social-owner-menu { position: relative; margin-left: 0.35rem; }
.social-owner-menu-btn {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    cursor: pointer;
}
.social-owner-menu-btn:hover { background: #f1f5f9; }
.social-owner-menu-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 20;
    min-width: 9rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.12);
    padding: 0.25rem;
}
.social-owner-action {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
    border-radius: 6px;
    cursor: pointer;
}
.social-owner-action:hover { background: #f8fafc; }
.social-owner-action--danger { color: #dc2626; }
.ad-engage-report {
    font-size: 0.72rem;
    font-weight: 600;
    padding-inline: 0.45rem;
    cursor: pointer;
    color: #64748b;
}
.ad-engage-report:hover { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.social-feed-sentinel { height: 1px; }
.social-feed-loading { text-align: center; color: var(--muted); font-size: 0.82rem; padding: 0.5rem; }
.social-lightbox,
.social-report-modal {
    position: fixed;
    inset: 0;
    z-index: 13000;
}
.social-lightbox {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}
.social-lightbox[hidden] { display: none !important; }
.social-lightbox-backdrop,
.social-report-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--text, #0f172a) 82%, transparent);
}
.social-lightbox-backdrop {
    background: color-mix(in srgb, #020617 88%, transparent);
}
.social-lightbox-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    height: 100dvh;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}
.social-lightbox-stage {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
    padding:
        calc(3.25rem + env(safe-area-inset-top, 0px))
        calc(3.5rem + env(safe-area-inset-right, 0px))
        calc(3.5rem + env(safe-area-inset-bottom, 0px))
        calc(3.5rem + env(safe-area-inset-left, 0px));
    box-sizing: border-box;
}
.social-lightbox-media {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    transition: transform 0.12s ease;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}
.social-lightbox-stage.is-pannable { cursor: grab; }
.social-lightbox-stage.is-pannable.is-dragging { cursor: grabbing; }
.social-lightbox-media.is-zoomed { cursor: grab; }
.social-lightbox-stage.is-dragging .social-lightbox-media.is-zoomed { cursor: grabbing; }
.social-lightbox-stage img.social-lightbox-media { cursor: zoom-in; touch-action: none; }
.social-lightbox-close,
.social-lightbox-nav {
    position: absolute;
    z-index: 3;
    border: 0;
    background: color-mix(in srgb, var(--surface, #fff) 14%, transparent);
    color: var(--surface, #fff);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.social-lightbox-close:hover,
.social-lightbox-nav:hover {
    background: color-mix(in srgb, var(--surface, #fff) 24%, transparent);
}
.social-lightbox-close {
    top: calc(0.65rem + env(safe-area-inset-top, 0px));
    right: calc(0.65rem + env(safe-area-inset-right, 0px));
    width: 2.35rem;
    height: 2.35rem;
    font-size: 1.35rem;
    line-height: 1;
}
.social-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.65rem;
    line-height: 1;
}
.social-lightbox-nav[hidden] { display: none !important; }
.social-lightbox-prev { left: calc(0.5rem + env(safe-area-inset-left, 0px)); }
.social-lightbox-next { right: calc(0.5rem + env(safe-area-inset-right, 0px)); }
.social-lightbox-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding:
        0.65rem
        calc(1rem + env(safe-area-inset-right, 0px))
        calc(0.75rem + env(safe-area-inset-bottom, 0px))
        calc(1rem + env(safe-area-inset-left, 0px));
    color: color-mix(in srgb, var(--surface, #fff) 92%, transparent);
    font-size: 0.82rem;
    background: linear-gradient(to top, color-mix(in srgb, #020617 55%, transparent), transparent);
    border: none;
    pointer-events: none;
}
.social-lightbox-footer > * { pointer-events: auto; }
.social-lightbox-autoplay {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    user-select: none;
}
.social-lightbox-comments {
    border: 0;
    background: color-mix(in srgb, var(--surface, #fff) 16%, transparent);
    color: inherit;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 650;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    cursor: pointer;
}
.social-lightbox-comments[hidden] { display: none !important; }
.social-report-dialog {
    position: relative;
    z-index: 1;
    max-width: 520px;
    margin: 8vh auto;
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 16px 40px rgba(15,23,42,0.2);
}
.social-report-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.35rem;
}
.social-report-head h3 {
    margin: 0;
    font-size: 1rem;
    line-height: 1.3;
    flex: 1 1 auto;
    min-width: 0;
}
.social-report-close {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: var(--muted, #64748b);
    font-size: 1.45rem;
    line-height: 1;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: -0.25rem -0.2rem 0 0;
}
.social-report-close:hover,
.social-report-close:focus-visible {
    background: color-mix(in srgb, var(--muted, #64748b) 14%, transparent);
    color: var(--text, #0f172a);
    outline: none;
}
.social-report-intro { margin: 0 0 0.75rem; font-size: 0.84rem; color: var(--muted); }
.social-report-option {
    display: block;
    padding: 0.35rem 0.2rem;
    font-size: 0.84rem;
    cursor: pointer;
}
.social-report-note {
    width: 100%;
    margin: 0.5rem 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    font-size: 0.84rem;
}
.social-report-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
.social-moderation-panel { margin-bottom: 0.85rem; }
.social-moderation-details summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.5rem;
}
.social-moderation-list { display: flex; flex-direction: column; gap: 0.6rem; }
.social-moderation-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.65rem;
    background: #fff;
}
.social-moderation-item-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 0.35rem;
}
.social-mod-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.12rem 0.4rem;
    border-radius: 999px;
}
.social-mod-badge.is-user { background: #78350f; color: #fff; }
.social-mod-badge.is-auto { background: #dc2626; color: #fff; }
.social-mod-category { font-weight: 600; color: #334155; }
.social-mod-cause-counts { margin-bottom: 0.55rem; }
.social-mod-cause-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.social-mod-cause-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.45rem;
    border-radius: 6px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.8rem;
}
.social-mod-cause-name { color: #334155; flex: 1; }
.social-mod-cause-count {
    min-width: 1.5rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #78350f;
    color: #fff;
}
.social-mod-optional-details {
    margin-bottom: 0.55rem;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
}
.social-mod-optional-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.social-mod-optional-entry {
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #fde68a;
}
.social-mod-optional-entry:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.social-mod-optional-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
}
.social-mod-optional-index {
    font-weight: 700;
    color: #92400e;
    min-width: 1.25rem;
}
.social-mod-user-report-cause {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.08rem 0.35rem;
    border-radius: 999px;
    background: #fef3c7;
    color: #92400e;
}
.social-mod-optional-entry-head time { color: #94a3b8; font-size: 0.72rem; margin-left: auto; }
.social-mod-optional-empty {
    margin: 0;
    font-size: 0.82rem;
    color: #94a3b8;
    font-style: italic;
}
.social-mod-title { margin: 0 0 0.25rem; font-size: 0.86rem; }
.social-mod-desc {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    color: #64748b;
    white-space: pre-wrap;
    word-break: break-word;
}
.social-mod-media { margin-bottom: 0.55rem; }
.social-mod-media-label,
.social-mod-optional-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    margin-bottom: 0.3rem;
}
.social-mod-media .social-post-media-grid {
    margin-top: 0.15rem;
}
.social-mod-reporter {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    color: #475569;
}
.social-mod-optional {
    margin: 0 0 0.55rem;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: #fffbeb;
    border: 1px solid #fde68a;
}
.social-mod-optional-text {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #78350f;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: visible;
    max-height: none;
}
.social-report-optional-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    margin: 0.5rem 0 0.25rem;
}
.social-post-preview-load {
    outline: 2px dashed #f59e0b;
    outline-offset: 2px;
}
.social-post-review-root { min-height: 12rem; }
.social-post-review-page { display: flex; flex-direction: column; gap: 1rem; }
.social-review-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
}
.social-review-toolbar--bottom {
    border-bottom: none;
    border-top: 1px solid var(--border);
    padding-top: 0.65rem;
    padding-bottom: 0;
}
.social-review-toolbar-nav {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}
.social-review-counter {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
    min-width: 3.5rem;
    text-align: center;
}
.social-review-status {
    margin: 0;
    font-size: 0.86rem;
    color: #475569;
}
.social-review-section {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.75rem;
    background: #fff;
}
.social-review-section--admin-before {
    background: #fffbeb;
    border-color: #fde68a;
}
.social-review-section--admin-after {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.social-review-section-title {
    margin: 0 0 0.2rem;
    font-size: 1rem;
}
.social-review-section-sub {
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
    color: #64748b;
}
.social-review-post-card {
    margin: 0;
    box-shadow: none;
}
.social-review-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.45rem;
    margin-top: 0.45rem;
}
.social-review-media-tile {
    display: block;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    aspect-ratio: 4 / 3;
    border: 1px solid #e2e8f0;
}
.social-review-media-tile img,
.social-review-media-tile video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.social-review-report-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.social-review-report-item {
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #fde68a;
}
.social-review-action-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.social-review-action-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.social-review-action-meta {
    font-size: 0.82rem;
    color: #475569;
}
.social-review-auto-note {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    color: #92400e;
}
.social-review-empty-note {
    margin: 0;
    font-size: 0.82rem;
    color: #94a3b8;
    font-style: italic;
}
.social-review-loading {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
}
.social-moderation-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.social-admin-intro { margin: 0 0 0.85rem; }
.social-mod-log-table .social-mod-log-post-id {
    display: inline-block;
    margin-right: 0.35rem;
    font-weight: 700;
    color: #64748b;
    font-size: 0.78rem;
}
.social-mod-log-action {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
}
.social-mod-log-action.is-approve {
    background: #dcfce7;
    color: #166534;
}
.social-mod-log-action.is-censor {
    background: #fee2e2;
    color: #991b1b;
}
.notification-social-count {
    min-width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
}
.notification-social-count--user { background: #92400e; }
.notification-social-count--auto { background: #dc2626; }
.social-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
}
.social-edit-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.72);
}
.social-edit-dialog {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 6vh auto;
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 16px 40px rgba(15,23,42,0.2);
    max-height: 88vh;
    overflow: auto;
}
.social-edit-dialog h3 { margin: 0 0 0.75rem; font-size: 1rem; }
.social-edit-field { display: block; margin-bottom: 0.65rem; }
.social-edit-field span { display: block; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.2rem; color: #64748b; }
.social-edit-field input,
.social-edit-field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    font-size: 0.88rem;
}
.social-edit-label { display: block; font-size: 0.78rem; font-weight: 600; color: #64748b; margin-bottom: 0.35rem; }
.social-edit-media-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.65rem;
}
.social-edit-media-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
    aspect-ratio: 1;
}
.social-edit-media-item img,
.social-edit-media-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.social-edit-media-remove {
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    bottom: 0.25rem;
    border: 0;
    border-radius: 6px;
    background: rgba(15,23,42,0.78);
    color: #fff;
    font-size: 0.68rem;
    padding: 0.2rem;
    cursor: pointer;
}
.social-edit-media-empty { font-size: 0.82rem; color: var(--muted); margin: 0; }
.social-edit-add-media {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 0.65rem;
}
.social-edit-pick-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.95rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #f8fafc;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    width: auto;
    height: auto;
    transition: background 0.15s, border-color 0.15s;
}
.social-edit-pick-btn span { pointer-events: none; }
.social-edit-pick-btn:hover { background: #f1f5f9; }
.social-edit-pick-btn--photo { color: #16a34a; border-color: #bbf7d0; }
.social-edit-pick-btn--photo:hover { background: #f0fdf4; }
.social-edit-pick-btn--video { color: #dc2626; border-color: #fecaca; }
.social-edit-pick-btn--video:hover { background: #fef2f2; }
.social-edit-pending { margin-bottom: 0.65rem; }
.social-edit-pending-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.45rem;
}
.social-edit-pending-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    aspect-ratio: 1;
    border: 1px dashed #cbd5e1;
}
.social-edit-pending-item img,
.social-edit-pending-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
.social-edit-pending-file {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0.35rem;
    font-size: 0.68rem;
    text-align: center;
    color: #64748b;
    word-break: break-word;
}
.social-edit-pending-tag {
    position: absolute;
    left: 0.2rem;
    right: 0.2rem;
    bottom: 0.2rem;
    font-size: 0.62rem;
    font-weight: 700;
    text-align: center;
    color: #fff;
    background: rgba(15, 23, 42, 0.72);
    border-radius: 4px;
    padding: 0.12rem 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.social-edit-pending-remove {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 1.25rem;
    height: 1.25rem;
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.78);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}
.social-edit-upload-wrap { margin-bottom: 0.75rem; }
.social-edit-upload-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.social-edit-upload-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6366f1, #22c55e);
    transition: width 0.12s ease;
}
.social-edit-upload-label { font-size: 0.78rem; color: var(--muted); margin: 0.3rem 0 0; }
.social-edit-actions { display: flex; justify-content: flex-end; gap: 0.4rem; }
.social-post-body { padding: 0; }
.users-subnav { margin-bottom: 0.85rem; }
.users-table-pager {
    margin: 0.65rem 0 0.15rem;
    padding: 0.35rem 0.25rem 0.15rem;
    border-top: 1px solid var(--border);
    gap: 0.85rem;
}
.users-table-pager .pagination-link {
    color: var(--primary);
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
}
.users-table-pager .pagination-link:hover {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    text-decoration: none;
}
.users-table-pager .pagination-info {
    color: var(--muted);
    font-size: 0.82rem;
}
.users-subnav-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.65rem;
}
.users-subnav-row .users-subnav,
.users-subnav-row .users-tabs {
    flex: 1 1 auto;
    margin-bottom: 0;
    min-width: 0;
}
.users-list-count {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-left: 0.2rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}
.users-mix {
    margin-top: 1.35rem;
    padding: 0.95rem 1rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.users-mix-title {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text);
}
.users-mix-heading {
    margin: 0.9rem 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.users-mix-group:first-of-type .users-mix-heading {
    margin-top: 0;
}
.users-mix-row {
    display: grid;
    grid-template-columns: minmax(11rem, 14.5rem) minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    margin-bottom: 0.42rem;
}
.users-mix-label {
    font-size: 0.8rem;
    color: var(--text);
}
.users-mix-track {
    display: block;
    height: 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 18%, transparent);
    overflow: hidden;
}
.users-mix-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--primary);
}
.users-mix-fill.is-sliver {
    min-width: 2px;
}
.users-mix-value {
    font-size: 0.75rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .users-mix-row {
        grid-template-columns: 1fr auto;
    }
    .users-mix-track {
        grid-column: 1 / -1;
    }
}
/* SA Email OTP + Referral Tree — right of Users/Groups tabs (00139 / 00244 / 00290) */
.users-subnav-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
    margin-left: auto;
    z-index: 2;
}
.users-email-otp-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: 0;
    border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--border));
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.users-email-otp-btn:hover {
    background: color-mix(in srgb, var(--primary) 22%, var(--surface));
}
.users-referral-hierarchy-btn {
    border-color: color-mix(in srgb, var(--accent, #06b6d4) 45%, var(--border));
    background: color-mix(in srgb, var(--accent, #06b6d4) 12%, var(--surface));
    color: var(--text);
}
.users-referral-hierarchy-btn:hover {
    background: color-mix(in srgb, var(--accent, #06b6d4) 22%, var(--surface));
}

/* Referral hierarchy page (00290) */
.referral-hierarchy-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1rem 1rem 2.5rem;
}
.referral-hierarchy-shell {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.referral-hierarchy-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.rh-forest {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 2.25rem;
    width: max-content;
}
.rh-forest-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 12rem;
}
.rh-forest-date {
    margin: 0 0 0.65rem;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
}
.referral-hierarchy-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    flex-wrap: wrap;
}
.referral-hierarchy-eyebrow {
    margin: 0;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.referral-hierarchy-head h1 {
    margin: 0.15rem 0;
    font-size: 1.45rem;
}
.referral-hierarchy-sub {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}
.referral-hierarchy-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
}
.referral-hierarchy-orphan-row {
    margin-top: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.referral-hierarchy-orphan-row > .btn {
    flex: 0 0 auto;
    margin-top: 0;
}
.referral-hierarchy-form .form-label {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}
.referral-hierarchy-page .rh-bs-control {
    display: block;
    width: 100%;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.referral-hierarchy-page .rh-bs-control:focus,
.referral-hierarchy-page .rh-token-select:focus-within {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    outline: 0;
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, transparent);
}
.referral-hierarchy-orphan-exclude {
    position: relative;
    flex: 1 1 16rem;
    min-width: 12rem;
}
.referral-hierarchy-orphan-exclude .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.rh-token-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.28rem 0.5rem;
    cursor: text;
}
.rh-token-select-chips {
    display: contents;
}
.rh-token-select-input {
    flex: 1 1 8rem;
    min-width: 7rem;
    width: auto;
    margin: 0;
    padding: 0.12rem 0.15rem;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
}
.rh-token-select-input::placeholder {
    color: var(--muted);
}
.rh-orphan-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    margin: 0;
    padding: 0.18rem 0.32rem 0.18rem 0.5rem;
    border: 0;
    border-radius: 50rem;
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    color: var(--text);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
.rh-orphan-chip:hover,
.rh-orphan-chip:focus-visible {
    background: color-mix(in srgb, var(--danger) 16%, var(--surface));
}
.rh-orphan-chip-uid {
    color: var(--primary);
    font-weight: 700;
}
.rh-orphan-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50rem;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1;
}
.referral-hierarchy-form-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: nowrap;
    align-items: center;
}
.referral-hierarchy-find-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.referral-hierarchy-form-row input {
    width: 100%;
    min-width: 0;
}
.referral-hierarchy-form-row > .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.referral-hierarchy-suggest {
    position: absolute;
    z-index: 50;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    display: block;
    min-width: 100%;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--surface);
    box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--text) 12%, transparent);
}
.referral-hierarchy-suggest[hidden] { display: none !important; }
.referral-hierarchy-suggest-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 0.45rem 0.55rem;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
}
.referral-hierarchy-suggest-item:hover,
.referral-hierarchy-suggest-item.is-active {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.referral-hierarchy-suggest-uid {
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--primary);
}
.referral-hierarchy-suggest-name {
    font-size: 0.75rem;
    color: var(--muted);
}
.referral-hierarchy-suggest-empty,
.referral-hierarchy-suggest-hint {
    padding: 0.45rem 0.55rem;
    font-size: 0.78rem;
    color: var(--muted);
}
.referral-hierarchy-meta {
    font-size: 0.88rem;
    color: var(--muted);
}
.referral-hierarchy-stage {
    display: flex;
    flex-direction: column;
    min-height: min(62vh, 720px);
    height: min(72vh, 860px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--primary) 6%, var(--surface)) 0%,
        var(--surface) 40%);
    overflow: hidden;
    isolation: isolate;
}
.referral-hierarchy-stage[hidden] { display: none !important; }
.rh-tree-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 88%, var(--primary));
    z-index: 2;
}
.rh-zoom-label {
    min-width: 3.1rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
}
.rh-zoom-btn {
    min-width: 2rem;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
    font-weight: 800;
}
.referral-hierarchy-viewport {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.referral-hierarchy-viewport.is-panning { cursor: grabbing; }
.rh-zoom-layer {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    will-change: transform;
}
.referral-hierarchy-canvas {
    width: max-content;
    box-sizing: border-box;
    padding: 1.5rem 2rem 2.25rem;
}
body.rh-tree-fs-open {
    overflow: hidden;
    overscroll-behavior: none;
}
.referral-hierarchy-stage.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 4800;
    height: 100%;
    min-height: 100%;
    max-height: none;
    border-radius: 0;
    border: 0;
}
.rh-meta-tip {
    color: var(--muted);
    font-style: italic;
}
.rh-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: max-content;
    min-width: 280px;
    padding-bottom: 0.5rem;
}
.rh-upline,
.rh-focus-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rh-vlink {
    display: flex;
    justify-content: center;
    padding: 0.15rem 0;
}
.rh-arrow {
    display: inline-block;
    width: 2px;
    height: 1.35rem;
    background: color-mix(in srgb, var(--primary) 55%, var(--border));
    position: relative;
}
.rh-arrow--down::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid color-mix(in srgb, var(--primary) 55%, var(--border));
    transform: translateX(-50%);
}

/* Compact chip: UserID + count badge + Name */
.rh-chip {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
    min-width: 8.5rem;
    max-width: 14rem;
    margin: 0;
    padding: 0.45rem 0.7rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 70%, transparent);
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}
.rh-chip--empty {
    opacity: 0.62;
    border-style: dashed;
    background: color-mix(in srgb, var(--muted) 10%, var(--surface));
    color: var(--muted);
    cursor: default;
    pointer-events: none;
    box-shadow: none;
}
.rh-chip--empty .rh-chip-uid,
.rh-chip--empty .rh-chip-name,
.rh-chip--empty .rh-chip-role {
    color: var(--muted);
}
.rh-tree.is-personal .rh-chip {
    cursor: default;
}
.rh-chip:hover,
.rh-chip:focus-visible,
.rh-chip.is-tip-open {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 18%, transparent);
    outline: none;
    z-index: 2;
}
.rh-chip--focus {
    border-color: color-mix(in srgb, var(--primary) 60%, var(--border));
    outline: 2px solid color-mix(in srgb, var(--primary) 26%, transparent);
    outline-offset: 2px;
    border-radius: 1rem;
    max-width: 15rem;
    padding: 0.55rem 0.85rem 0.6rem;
}
.rh-chip--parent {
    opacity: 0.95;
}
.rh-chip-role {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    line-height: 1.1;
}
.rh-chip-uid-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    min-width: 0;
}
.rh-chip-acct {
    flex: 0 0 auto;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 0.12rem 0.32rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
    background: color-mix(in srgb, var(--surface) 70%, var(--border));
    white-space: nowrap;
}
.rh-chip-country {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    padding: 0.08rem 0.32rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface) 72%, var(--border));
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1.2;
}
.rh-chip-uid {
    font-weight: 800;
    color: var(--primary);
    font-size: 0.92rem;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.rh-count-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.rh-count-chip.is-cap-full {
    background: color-mix(in srgb, color-mix(in srgb, var(--success) 82%, black) 32%, var(--surface));
    border-color: color-mix(in srgb, color-mix(in srgb, var(--success) 82%, black) 52%, var(--border));
    color: color-mix(in srgb, var(--success) 62%, var(--text));
}
.rh-count-chip.is-cap-open {
    background: color-mix(in srgb, color-mix(in srgb, var(--warning) 78%, black) 32%, var(--surface));
    border-color: color-mix(in srgb, color-mix(in srgb, var(--warning) 78%, black) 54%, var(--border));
    color: color-mix(in srgb, var(--warning) 55%, var(--text));
}
.rh-chip-name {
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
/* Activity tint on whole user chip — slightly darker than surface mix */
.rh-chip.is-active {
    background: color-mix(in srgb, color-mix(in srgb, var(--success) 82%, black) 28%, var(--surface));
    border-color: color-mix(in srgb, color-mix(in srgb, var(--success) 82%, black) 52%, var(--border));
}
.rh-chip.is-inactive {
    background: color-mix(in srgb, color-mix(in srgb, var(--warning) 78%, black) 30%, var(--surface));
    border-color: color-mix(in srgb, color-mix(in srgb, var(--warning) 78%, black) 54%, var(--border));
}
.rh-chip.is-passive {
    background: color-mix(in srgb, color-mix(in srgb, var(--danger) 80%, black) 28%, var(--surface));
    border-color: color-mix(in srgb, color-mix(in srgb, var(--danger) 80%, black) 52%, var(--border));
}

/* Hover / long-press info card (rendered in a body portal so tree zoom does not scale it) */
.rh-tip {
    pointer-events: none;
    width: min(300px, calc(100vw - 1.5rem));
    padding: 0;
    border: none;
    background: transparent;
}
.rh-tip[hidden] { display: none !important; }
.rh-tip-portal {
    z-index: 5100;
}
.rh-tip-backdrop {
    position: fixed;
    inset: 0;
    z-index: 5050;
    background: color-mix(in srgb, var(--text) 28%, transparent);
}
.rh-tip-backdrop[hidden] { display: none !important; }
.rh-tip--center {
    width: min(320px, calc(100vw - 2rem));
    pointer-events: auto;
}
.rh-tip-inner {
    pointer-events: none;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.55rem 0.7rem 0.48rem;
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--text) 22%, transparent);
}
.rh-tip--center .rh-tip-inner {
    pointer-events: auto;
}
.rh-tip-uid {
    font-weight: 800;
    color: var(--primary);
    font-size: 1rem;
}
.rh-tip-name {
    font-weight: 600;
    margin: 0.04rem 0 0;
    line-height: 1.2;
}
.rh-tip-country {
    margin: 0.06rem 0 0.18rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.15;
}
.rh-tip-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.16rem 0.4rem;
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.15;
}
.rh-tip-meta dt {
    margin: 0;
    color: var(--muted);
    font-weight: 500;
    line-height: 1.15;
}
.rh-tip-meta dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
    line-height: 1.15;
}
.rh-tip .rh-pill { font-weight: 700; }
.rh-tip-inner.is-active .rh-pill { color: color-mix(in srgb, var(--success) 78%, black); }
.rh-tip-inner.is-inactive .rh-pill { color: color-mix(in srgb, var(--warning) 72%, black); }
.rh-tip-inner.is-passive .rh-pill { color: color-mix(in srgb, var(--danger) 78%, black); }
.rh-tip-hint {
    margin: 0.22rem 0 0;
    font-size: 0.68rem;
    color: var(--muted);
    line-height: 1.15;
}

/* Sibling fan-out graph (1 parent → 2–3+ children side by side) */
.rh-siblings {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    width: max-content;
    max-width: none;
}
.rh-siblings--root {
    margin-top: 0;
}
.rh-branch {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0.85rem 0.65rem 0;
    min-width: 8.25rem;
}
.rh-branch-stem {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 0.85rem;
    background: color-mix(in srgb, var(--primary) 45%, var(--border));
    transform: translateX(-50%);
    z-index: 1;
}
/* Horizontal connector across siblings */
.rh-siblings > .rh-branch:not(:only-child)::before {
    content: '';
    position: absolute;
    top: 0;
    height: 2px;
    background: color-mix(in srgb, var(--primary) 45%, var(--border));
}
.rh-siblings > .rh-branch:first-child:not(:only-child)::before {
    left: 50%;
    right: 0;
}
.rh-siblings > .rh-branch:last-child:not(:only-child)::before {
    left: 0;
    right: 50%;
}
.rh-siblings > .rh-branch:not(:first-child):not(:last-child)::before {
    left: 0;
    right: 0;
}
.rh-branch > .rh-siblings {
    margin-top: 0.15rem;
}
.rh-empty-upline,
.rh-empty-downline {
    text-align: center;
    color: var(--muted);
    font-size: 0.88rem;
    margin: 0.5rem 0;
}

@media (max-width: 720px) {
    .rh-branch {
        min-width: 7rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
    }
    .rh-chip {
        min-width: 6.5rem;
        max-width: 9.5rem;
        padding: 0.4rem 0.55rem 0.45rem;
    }
    .rh-chip-uid { font-size: 0.82rem; }
    .rh-chip-name { font-size: 0.72rem; }
    .referral-hierarchy-page {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }
    .referral-hierarchy-stage {
        height: min(68vh, 760px);
        min-height: 18rem;
    }
    .rh-tree-toolbar .btn {
        font-size: 0.72rem;
        padding: 0.28rem 0.45rem;
        white-space: nowrap;
    }
    #referral-hierarchy-load {
        font-size: 0.8rem;
        padding: 0.42rem 0.6rem;
    }
}
.users-email-otp-modal-backdrop {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 1300;
    align-items: center;
    justify-content: center;
    padding: 0.65rem;
    background: rgba(15, 23, 42, 0.5);
}
.users-email-otp-modal-backdrop[hidden] { display: none !important; }
.users-email-otp-modal {
    display: flex;
    flex-direction: column;
    width: min(420px, 100%);
    max-height: min(88vh, 640px);
    background: var(--surface, #fff);
    color: var(--text);
    border-radius: 0.85rem;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}
.users-email-otp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
}
.users-email-otp-head h2 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}
.users-email-otp-close {
    border: none;
    background: transparent;
    font-size: 1.45rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 0.1rem 0.25rem;
}
.users-email-otp-list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.35rem 0.75rem 0.85rem;
}
.users-email-otp-item {
    padding: 0.65rem 0;
    border-bottom: 1px dashed var(--border);
    line-height: 1.35;
    font-size: 0.82rem;
}
.users-email-otp-item:last-child { border-bottom: 0; }
.users-email-otp-uid { font-weight: 700; color: var(--text); }
.users-email-otp-email,
.users-email-otp-name,
.users-email-otp-ref { color: var(--muted); word-break: break-word; }
.users-email-otp-code {
    margin-top: 0.35rem;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    font-family: ui-monospace, "Cascadia Code", monospace;
    color: var(--primary);
}
.users-email-otp-empty {
    margin: 1rem 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
}
#panel-users .workzone-header-users {
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
}
/* Users filter bar — one line (00274 / 00275) */
.users-filter-bar {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
.users-filter-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.55rem 0.85rem;
}
.users-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.55rem 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}
.users-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 0 0 auto;
    min-width: 0;
}
.users-filter-field > label,
.users-filter-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    white-space: nowrap;
}
.users-filter-search { flex: 1 1 16rem; min-width: 12rem; }
.users-filter-pick { flex: 1 1 18rem; min-width: 14rem; }
#users-list-results.is-filtering { opacity: 0.55; }
.users-filter-pick input[type="text"] { min-width: 12rem; flex: 1 1 12rem; }
.users-origin-hit {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.users-origin-hit:hover .users-stack-uid { text-decoration: underline; }
.users-origin-detail td {
    background: var(--surface);
    white-space: normal;
}
.users-origin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.35rem 1rem;
    margin: 0;
}
.users-origin-grid div { min-width: 0; }
.users-origin-grid dt {
    margin: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}
.users-origin-grid dd {
    margin: 0.1rem 0 0;
    word-break: break-word;
}
.users-filter-search-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
.users-filter-search-inline input[type="text"],
.users-filter-search-inline input[type="email"] {
    min-width: 8.5rem;
    max-width: 14rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}
.users-filter-select {
    min-width: 11rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
}
.users-filter-hint { margin: 0.4rem 0 0; font-size: 0.72rem; }
/* Columns picker — outside filter scroll, roomy panel */
.users-cols-toolbar {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    align-self: flex-end;
}
.users-cols-toggle {
    min-width: 6.5rem;
}
.users-col-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 40;
    width: min(18rem, calc(100vw - 2rem));
    min-width: 14rem;
    padding: 0.75rem 0.85rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.2);
}
.users-col-panel[hidden] { display: none !important; }
.users-col-panel-title {
    margin: 0 0 0.55rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.users-col-panel-list {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.users-col-panel-list label {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 0.45rem 0.4rem;
    border-radius: 6px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.25;
}
.users-col-panel-list label:hover {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.users-col-panel-list input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    accent-color: var(--primary);
}
.users-table .users-col-hidden { display: none !important; }
.users-table .users-col-optional { white-space: nowrap; font-size: 0.8rem; }
@media (max-width: 720px) {
    .users-cols-toolbar { margin-left: 0; width: 100%; }
    .users-cols-toggle { width: 100%; }
    .users-col-panel {
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
    }
    .users-filter-search { flex: 1 1 100%; min-width: 0; }
    .users-filter-search-inline input[type="text"],
    .users-filter-search-inline input[type="email"] {
        max-width: none;
        flex: 1 1 8rem;
    }
}
.users-col-count { width: 5.5rem; text-align: center; white-space: nowrap; }
.users-group-name-cell { min-width: 10rem; }
.users-group-dropdown { position: relative; display: inline-block; }
.users-group-dropdown > summary {
    list-style: none;
    cursor: pointer;
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.users-group-dropdown > summary::-webkit-details-marker { display: none; }
.users-group-dropdown[open] > summary { color: var(--primary-dark, #4338ca); }
.users-group-member-list {
    position: absolute;
    z-index: 20;
    left: 0;
    top: calc(100% + 0.25rem);
    min-width: 12rem;
    max-width: 18rem;
    max-height: 14rem;
    overflow: auto;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.users-group-member-list li { margin: 0; }
.users-member-profile-btn {
    display: block;
    width: 100%;
    padding: 0.4rem 0.75rem;
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    color: var(--text);
    cursor: pointer;
}
.users-member-profile-btn:hover { background: #f1f5f9; color: var(--primary); }
.users-profile-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
}
.users-profile-modal-backdrop[hidden] { display: none !important; }
.users-profile-modal {
    position: relative;
    width: min(420px, 100%);
    max-height: 90vh;
    overflow: auto;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.2);
}
.users-profile-close {
    position: absolute;
    top: 0.5rem;
    right: 0.65rem;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}
.users-profile-summary { font-size: 0.88rem; color: var(--muted); margin: 0.35rem 0 0.75rem; }
.users-profile-meta { font-size: 0.88rem; }
.users-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-top: 0.75rem;
    text-align: center;
    font-size: 0.82rem;
}
.users-profile-stats strong { display: block; font-size: 1rem; color: var(--text); }
.users-profile-stats span { color: var(--muted); }
[data-theme="dark"] .users-group-member-list,
[data-theme="dark"] .users-profile-modal { background: var(--surface, #1e293b); }
[data-theme="dark"] .users-member-profile-btn:hover { background: rgba(255,255,255,0.06); }
.settings-section { margin-bottom: 0.85rem; }
.settings-section-collapsible { padding-top: 0.65rem; }
.settings-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0 0 0.35rem;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
}
.settings-section-toggle:hover .settings-section-heading { color: var(--primary); }
.settings-section-heading {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.settings-section-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--muted);
    transform: rotate(-90deg);
    transition: transform 0.2s ease, color 0.15s ease;
    flex-shrink: 0;
}
.settings-section-collapsible:not(details):not(.is-collapsed) .settings-section-chevron {
    transform: rotate(90deg);
}
.settings-section-body {
    padding-top: 0.35rem;
}
.settings-section-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}
.settings-section-collapsible.is-collapsed .settings-section-toggle {
    padding-bottom: 0;
}
.settings-section-collapsible.is-collapsed .settings-section-body {
    display: none;
}
.settings-module-section > .settings-section-toggle {
    padding: 0.15rem 0 0.45rem;
}
.settings-module-section .settings-subheading {
    margin: 0.35rem 0 0.35rem;
    font-size: 0.95rem;
}
.settings-field-toggles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem 0.85rem;
    margin: 0.35rem 0 0.75rem;
}
.settings-field-toggles label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-size: 0.86rem;
}
.settings-form-actions-end,
.office-wifi-actions.settings-form-actions-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.settings-panel-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.settings-panel-body > .content-card,
.settings-panel-body > details.content-card {
    padding: 0.45rem 0.7rem;
    margin-bottom: 0;
}
.settings-panel-body .settings-section {
    margin-bottom: 0;
}
.settings-panel-body .settings-section-collapsible {
    padding-top: 0.2rem;
}
.settings-panel-body .settings-section-heading {
    font-size: 0.88rem;
}
.settings-panel-body .settings-section-chevron {
    width: 1.2rem;
    height: 1.2rem;
    font-size: 1.1rem;
}
.settings-panel-body .settings-section-body {
    padding-top: 0.2rem;
}
.settings-panel-body .field-hint {
    margin: 0 0 0.4rem;
    line-height: 1.3;
}
.settings-panel-body h3,
.settings-panel-body h4 {
    margin: 0.2rem 0 0.25rem;
    font-size: 0.82rem;
}
.settings-panel-body .table-wrap {
    margin: 0.25rem 0 0.35rem;
}
.settings-panel-body .admin-table th,
.settings-panel-body .admin-table td {
    padding: 0.22rem 0.38rem;
    font-size: 0.78rem;
}
.settings-panel-body .settings-field-toggles {
    gap: 0.18rem 0.55rem;
    margin: 0.15rem 0 0.4rem;
}
.settings-panel-body .settings-field-toggles label {
    font-size: 0.8rem;
}
.settings-panel-body .settings-form-actions-end,
.settings-panel-body .office-wifi-actions {
    margin-top: 0.4rem;
}
.settings-panel-body .alert {
    padding: 0.35rem 0.55rem;
    margin: 0 0 0.15rem;
}
.settings-panel-body .profile-form-grid {
    gap: 0.45rem 0.7rem;
}
.settings-panel-body .empty-msg {
    margin: 0.25rem 0;
    font-size: 0.8rem;
}
@media (max-width: 720px) {
    .settings-field-toggles {
        grid-template-columns: 1fr;
    }
}
.section-access-admin { margin-bottom: 1rem; }
.section-access-form { margin-top: 0.5rem; }
.section-access-target-type {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 0.35rem;
}
.inline-radio {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.92rem;
    cursor: pointer;
}
.is-hidden { display: none !important; }
.section-access-denials-wrap { margin-top: 1rem; }
.section-access-table td { vertical-align: middle; }
.group-member-select { min-height: 8rem; width: 100%; }

/* Theme modes + appearance settings */
[data-theme="dim"] {
    --page-bg: #e2e8f0;
    --surface: #f1f5f9;
    --surface-alt: #e2e8f0;
    --surface-muted: #e2e8f0;
    --surface-glass: rgba(241, 245, 249, 0.95);
    --text: #334155;
    --muted: #64748b;
    --border: #cbd5e1;
    --hover-bg: #e2e8f0;
    --nav-active-bg: #e0e7ff;
    --workzone-bg: #dbe4f0;
    --shadow: 0 4px 24px rgba(15, 23, 42, 0.1);
}

[data-theme="dark"] {
    --page-bg: #0f172a;
    --surface: #1e293b;
    --surface-alt: #0f172a;
    --surface-muted: #0b1220;
    --surface-glass: rgba(30, 41, 59, 0.95);
    --text: #e2e8f0;
    --muted: #94a3b8;
    --border: #334155;
    --hover-bg: #334155;
    --nav-active-bg: #312e81;
    --workzone-bg: #0b1220;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    --turmeric-dark: #c4922a;
}

[data-theme="dark"] .navbar { border-bottom-color: var(--border); }
[data-theme="dark"] .site-logo-img {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
}
[data-theme="dim"] .site-logo-img {
    filter: drop-shadow(0 1px 4px rgba(15, 23, 42, 0.16));
}
[data-theme="dark"] .completed-widget,
[data-theme="dark"] .task-msg-item,
[data-theme="dark"] .task-crud-form,
[data-theme="dark"] .social-post-card,
[data-theme="dark"] .social-composer-card--fb {
    background: #1e293b;
}
[data-theme="dark"] .workzone-header h1,
[data-theme="dark"] .social-post-title { color: var(--text); }
[data-theme="dark"] .social-post-desc { color: #cbd5e1; }
[data-theme="dark"] .social-composer-footer { border-top-color: var(--border); }
[data-theme="dark"] .social-vis-option { color: var(--text); }
[data-theme="dark"] .social-vis-option:hover { background: var(--hover-bg); }
.theme-language-row { display: flex; flex-direction: column; gap: 0.45rem; }
.theme-language-row select {
    max-width: 16rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    background: var(--surface);
}

[data-theme="dark"] .dash-rpanel-toggle { color: var(--text); }
[data-theme="dark"] .dash-rpanel-toggle {
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.55);
}
[data-theme="dark"] .dash-sidebar-toggle {
    background: transparent;
    color: var(--text);
    border: none;
    box-shadow: none;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .dash-sidebar-toggle-bars span {
    box-shadow: none;
}

.theme-settings { display: flex; flex-direction: column; gap: 1rem; }
.theme-mode-fieldset { border: none; padding: 0; margin: 0; }
.theme-legend {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 0.45rem;
}
.theme-mode-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.theme-mode-option {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.82rem;
    cursor: pointer;
    background: var(--surface);
}
.theme-mode-option:has(input:checked) {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
    color: var(--primary);
    font-weight: 600;
}
.theme-option-default {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted);
}
.theme-accent-row { display: flex; flex-direction: column; gap: 0.45rem; }
.theme-accent-controls { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
#theme-accent-color {
    width: 2.75rem;
.company-module-assign-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0;
}
.company-module-assign-form select { min-width: 220px; }
.company-list-toolbar { margin-bottom: 0.75rem; }
.company-new-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.88rem;
    color: var(--muted);
    text-decoration: none;
}
.company-new-link:hover { color: var(--primary); text-decoration: none; }
.company-new-plus {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    line-height: 1;
}
.company-admin-cell { display: flex; flex-direction: column; gap: 0.1rem; min-width: 160px; }
.company-admin-email { font-size: 0.85rem; }
.company-admin-name { font-size: 0.78rem; }
.users-search-form { margin-bottom: 0.85rem; }
.users-search-inline {
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
}
.users-search-inline label {
    min-width: 4.5rem;
}
.users-search-inline input[type="text"],
.users-search-inline input[type="email"] {
    flex: 1 1 140px;
    min-width: 120px;
    max-width: 220px;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    font-family: inherit;
}
.users-search-inline .btn { flex-shrink: 0; }
.users-search-inline .bracket-link { flex-shrink: 0; align-self: center; }
.user-row-search-hit td { background: #fffbeb; }
.cell-user-id { font-size: 0.82rem; font-weight: 600; color: #475569; white-space: nowrap; }
.company-form-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }
.module-form-card.content-card,
.company-form-card.content-card {
    padding: 1.1rem 1.25rem;
}
.module-form-card .profile-form,
.company-form-card .profile-form {
    margin-top: 0.5rem;
}
.company-form-layout {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 280px);
    gap: 1rem;
    align-items: start;
}
.company-form-admin-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.85rem 1rem;
}
.company-form-admin-box h4 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
}
.company-form-admin-box .field-hint {
    margin: 0 0 0.75rem;
    font-size: 0.78rem;
}
@media (max-width: 800px) {
    .company-form-layout { grid-template-columns: 1fr; }
}
.company-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem 1rem;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}
/* —— Company detail view (super admin) —— */
.co-detail-page {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 100%;
}

.co-detail-header-card {
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-color: #e2e8f0;
}

.co-detail-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.co-detail-header-text {
    flex: 1 1 220px;
    min-width: 0;
}

.dashboard-center .company-detail-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.dashboard-center .company-detail-desc {
    margin: 0.15rem 0 0;
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--muted);
}

.co-detail-back-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.co-detail-sub-total {
    flex: 0 1 auto;
    text-align: right;
    padding: 0.15rem 0.75rem;
    border: 1px solid #dbeafe;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fafc 0%, #eff6ff 100%);
    min-width: 11rem;
}

.co-detail-sub-total-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 0.2rem;
}

.co-detail-sub-total-value {
    display: block;
    font-size: 1.65rem;
    font-weight: 800;
    line-height: 1.1;
    color: #1d4ed8;
    letter-spacing: -0.02em;
}

.company-list-table .company-attrs-cell {
    min-width: 220px;
    max-width: 360px;
    vertical-align: top;
}

.co-attr-line {
    display: flex;
    gap: 0.45rem;
    align-items: flex-start;
    line-height: 1.35;
    padding: 0.12rem 0;
}

.co-attr-line + .co-attr-line {
    margin-top: 0.2rem;
    padding-top: 0.22rem;
    border-top: 1px dashed #e2e8f0;
}

.co-attr-label {
    flex: 0 0 4.25rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    text-align: right;
}

.co-attr-value {
    flex: 1 1 auto;
    font-size: 0.82rem;
    color: #0f172a;
    word-break: break-word;
}

.co-list-sub-total-col { width: 8.5rem; text-align: right; }
.co-list-sub-total {
    text-align: right;
    font-weight: 700;
    font-size: 0.86rem;
    color: #1e40af;
    white-space: nowrap;
    vertical-align: middle;
}

.co-list-status-col { width: 7.5rem; }

.co-status-actions-cell {
    vertical-align: middle;
    text-align: center;
}

.co-status-line {
    margin-bottom: 0.35rem;
}

.co-actions-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    justify-content: center;
    align-items: center;
}

.co-list-code {
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .co-detail-header-row {
        flex-direction: column;
        align-items: stretch;
    }
    .co-detail-sub-total {
        text-align: left;
    }
}

.co-detail-section {
    padding: 0;
    overflow: visible;
    border-color: #e2e8f0;
}

.co-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.1rem;
    border-bottom: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.co-section-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #475569;
}

.co-section-hint {
    font-size: 0.72rem;
}

.co-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0.25rem 0;
}

.co-info-item {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.65rem;
    align-items: start;
    padding: 0.55rem 1.1rem;
    border-bottom: 1px solid #f1f5f9;
}

.co-info-item:nth-child(odd) {
    border-right: 1px solid #f1f5f9;
}

.co-info-item-wide {
    grid-column: 1 / -1;
    border-right: none !important;
}

.co-info-label {
    text-align: right;
    font-size: 0.76rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-top: 0.1rem;
}

.co-info-value {
    font-size: 0.86rem;
    color: #0f172a;
    line-height: 1.4;
    word-break: break-word;
}

.co-module-table-wrap {
    overflow: visible;
    padding: 0.65rem 1rem 0.85rem;
}

.co-module-table {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.co-module-table thead th {
    background: #f8fafc !important;
    color: #475569 !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0.55rem 0.75rem !important;
}

.co-mod-col-expand { width: 2.5rem; text-align: center; }
.co-mod-col-status { width: 7rem; text-align: center; }

.co-module-table .module-data-row td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid #f1f5f9;
    background: #fff;
}

.co-module-table .module-data-row.module-row-open td {
    background: #f0f9ff;
    border-bottom-color: #dbeafe;
}

.co-mod-name { font-weight: 600; color: #0f172a; }
.co-mod-code { font-size: 0.78rem; }

.co-module-expand-panel {
    padding: 0.15rem 0.25rem 0.35rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.module-expand-row td {
    background: #f8fafc;
    padding: 0.55rem 0.75rem 0.75rem !important;
    vertical-align: top;
    border-bottom: 1px solid #e2e8f0;
}

.module-expand-row[hidden] { display: none !important; }

@media (max-width: 720px) {
    .co-info-grid { grid-template-columns: 1fr; }
    .co-info-item:nth-child(odd) { border-right: none; }
}
.company-module-detail-panel {
    margin-top: 0.45rem;
    padding: 0.65rem 0.7rem;
    background: #f8fafc;
    border: 1px solid #93c5fd;
    border-radius: 8px;
}
.company-module-detail-panel[hidden] { display: none !important; }
.module-history-title {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
.company-module-detail-panel .module-assignment-history-box {
    margin-top: 0.55rem;
    padding: 0.45rem 0.5rem;
}
.company-module-detail-panel .module-assignment-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
}
.company-module-detail-panel .module-assignment-log-table th,
.company-module-detail-panel .module-assignment-log-table td {
    padding: 0.3rem 0.45rem;
    border-bottom: 1px solid #e2e8f0;
    text-align: left;
}
@media (max-width: 720px) {
    .company-module-table { display: block; overflow-x: auto; }
}
.company-module-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.company-module-toolbar h3 { margin: 0; }
.module-plus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    background: transparent;
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.module-plus-btn:hover { background: #f0f9ff; text-decoration: none; }
.module-expand-row td { background: #f8fafc; padding: 0.45rem 0.65rem 0.65rem; vertical-align: top; }
.module-expand-row[hidden] { display: none !important; }
.module-data-row.module-row-open td { background: #fafbfc; }
.module-subscription-form-horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    width: 100%;
}
.module-subscription-form-horizontal .mod-sub-field {
    flex: 1 1 0;
    min-width: 7rem;
    max-width: 11rem;
    font-size: 0.85rem;
    padding: 0.4rem 0.55rem;
}
.module-subscription-form-horizontal .mod-sub-amount { max-width: 8rem; }
.module-subscription-form-horizontal .mod-sub-readonly {
    background: #f1f5f9;
    cursor: default;
}
.module-subscription-form-horizontal .mod-sub-update-btn {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}
.module-deactivated-hint { margin: 0.35rem 0 0; font-size: 0.78rem; }
.company-module-heading { margin: 0 0 0.75rem; }
.module-assignment-history-box {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    margin-top: 0.5rem;
}
.module-subscription-form-horizontal + .module-assignment-history-box {
    margin-top: 0.65rem;
}
.module-assignment-log-wrap { margin-top: 0.65rem; }
.module-assignment-log-table {
    font-size: 0.78rem;
    min-width: 0;
    width: 100%;
}
.module-assignment-log-table th,
.module-assignment-log-table td {
    padding: 0.35rem 0.5rem;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .module-subscription-form-horizontal { flex-wrap: wrap; }
    .module-subscription-form-horizontal .mod-sub-update-btn { margin-left: 0; width: 100%; }
}
.module-subscription-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.5rem 0.75rem;
    align-items: end;
    margin-bottom: 0.5rem;
}
.module-subscription-actions { display: flex; align-items: flex-end; }
.module-deactivate-form { margin-top: 0.25rem; }
.readonly-field { background: #f1f5f9; cursor: default; }
.module-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.5fr 0.8fr 0.6fr auto;
    gap: 0.5rem;
    align-items: center;
}
.module-edit-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.module-row-editing td { background: #f8fafc; }
@media (max-width: 900px) {
    .module-edit-grid { grid-template-columns: 1fr 1fr; }
}

/* SQL Query Analyser (Super Admin Execute-SQL) */
#panel-execute-sql .sql-workbench {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
}
#panel-execute-sql .sql-codemirror-host {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
}
#panel-execute-sql .sql-codemirror-host .CodeMirror {
    width: 100% !important;
    height: 220px !important;
    min-height: 220px;
    font-family: Consolas, "Courier New", ui-monospace, monospace !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    color: #334155;
    background: #f8fafc !important;
}
#panel-execute-sql .sql-codemirror-host .CodeMirror-scroll {
    min-height: 220px;
}
#panel-execute-sql .sql-codemirror-host .CodeMirror-gutters {
    background: #eef2f7 !important;
    border-right: 1px solid #e2e8f0 !important;
    color: #94a3b8;
}
#panel-execute-sql .sql-codemirror-host .CodeMirror-linenumber {
    color: #94a3b8;
}
#panel-execute-sql .sql-codemirror-host .CodeMirror-cursor {
    border-left-color: #334155;
}
#panel-execute-sql .sql-codemirror-host textarea#sql-editor {
    display: none;
}
.sql-workbench-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.sql-workbench-hint {
    font-size: 0.8rem;
    margin-left: 0.25rem;
}
.sql-btn-execute:not(:disabled) {
    background: #b45309;
    border-color: #b45309;
    color: #fff;
}
.sql-btn-execute:not(:disabled):hover {
    background: #92400e;
    border-color: #92400e;
}
.sql-btn-execute:disabled {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #cbd5e1 !important;
    opacity: 1;
    cursor: not-allowed;
}
.btn-xs {
    padding: 0.15rem 0.45rem;
    font-size: 0.72rem;
    line-height: 1.3;
}
.sql-message-zone,
.sql-results-zone {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    padding: 0.65rem 0.75rem;
}
.sql-zone-title {
    margin: 0 0 0.45rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
}
.sql-message-log {
    margin: 0;
    padding: 0.55rem 0.65rem;
    max-height: 14rem;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.4;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-word;
}
.sql-result-grids {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 24rem;
    overflow: auto;
}
.sql-result-grid-wrap {
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: auto;
}
.sql-result-grid-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.25rem 0.45rem;
}
.sql-result-grid-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.sql-result-grid-title {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
}
.sql-result-table {
    font-size: 0.78rem;
    margin: 0;
}
.sql-result-table th,
.sql-result-table td {
    padding: 0.25rem 0.45rem;
    white-space: nowrap;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ticketing module */
.tkt-wrap { width: 100%; max-width: none; box-sizing: border-box; }
.tkt-wrap .tkt-tabs { flex-wrap: nowrap; margin-bottom: 0; }

/* Top toolbar: Tickets/Report left, setup links far right */
.tkt-wrap .tkt-top-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 1rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
}
.tkt-wrap .tkt-main-tabs { flex: 0 0 auto; }
.tkt-wrap .tkt-top-toolbar__setup {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-left: auto;
    text-align: right;
}
.tkt-wrap a.tkt-setup-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.2;
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tkt-wrap a.tkt-setup-link:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.tkt-wrap a.tkt-setup-link.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.tkt-raise-card { margin-bottom: 0.65rem; }
.tkt-sub-heading { margin: 1rem 0 0.5rem; font-size: 0.9rem; }
.tkt-thread { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0; }
.tkt-thread-item { border-left: 3px solid var(--primary); }
.tkt-thread-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.35rem; font-size: 0.82rem; }
.tkt-inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: 0.65rem; }
.tkt-action-box .btn { margin-top: 0.25rem; }
.tkt-report-summary { margin: 0.75rem 0; font-size: 0.85rem; }
.tkt-analytics-card { margin-top: 0.75rem; }
.tkt-analytics-card h4 { margin: 0 0 0.5rem; font-size: 0.9rem; }

.tkt-list-section { width: 100%; max-width: none; }
.tkt-list-stack { display: flex; flex-direction: column; gap: 0.65rem; width: 100%; }
.tkt-queue-panel { width: 100%; max-width: none; box-sizing: border-box; padding: 0; }

/* Stat filter pills */
.tkt-wrap .tkt-stat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}
.tkt-wrap a.tkt-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.8rem;
    border-radius: 999px;
    border: 1px solid #dee2e6;
    background: #fff;
    color: #212529;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}
.tkt-wrap a.tkt-stat-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.tkt-wrap a.tkt-stat-pill.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}
.tkt-wrap a.tkt-stat-pill.active .tkt-stat-count { background: rgba(255, 255, 255, 0.25); color: #fff; }
.tkt-wrap .tkt-stat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #e9ecef;
    font-size: 0.75rem;
    font-weight: 700;
}
.tkt-wrap a.tkt-stat-open:not(.active) { border-color: #b8daff; color: #0d6efd; }
.tkt-wrap a.tkt-stat-pending:not(.active) { border-color: #ffe5d0; color: #ca6510; }
.tkt-wrap a.tkt-stat-assigned:not(.active) { border-color: #ffe69c; color: #997404; }
.tkt-wrap a.tkt-stat-forwarded:not(.active) { border-color: #c8d6e5; color: #495057; }
.tkt-wrap a.tkt-stat-resolved:not(.active) { border-color: #badbcc; color: #0f5132; }
.tkt-wrap a.tkt-stat-closed:not(.active) { border-color: #ced4da; color: #6c757d; }

/* Filter bar */
.tkt-wrap .tkt-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #f8f9fa;
    width: 100%;
    box-sizing: border-box;
}
.tkt-wrap .tkt-filter-group { display: inline-flex; align-items: center; gap: 0.35rem; }
.tkt-wrap .tkt-filter-sep { color: #6c757d; font-size: 0.85rem; }
.tkt-wrap .tkt-bs-input {
    padding: 0.45rem 0.65rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    font-size: 0.84rem;
    font-family: inherit;
    color: var(--text);
    background: #fff;
    box-sizing: border-box;
    min-height: 2.1rem;
}
.tkt-wrap .tkt-bs-input:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}
.tkt-wrap .tkt-bs-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    padding-right: 1.75rem;
    cursor: pointer;
}
.tkt-wrap .tkt-filter-search { flex: 1 1 120px; min-width: 110px; }
.tkt-wrap .tkt-filter-search-wide { flex: 1.4 1 150px; min-width: 130px; }
.tkt-wrap .tkt-filter-toolbar .tkt-bs-select { flex: 1 1 140px; min-width: 130px; }
.tkt-wrap .tkt-filter-submit { flex: 0 0 auto; border-radius: 0.375rem; padding: 0.45rem 1rem; }

/* Bootstrap-style ticket table */
.tkt-wrap .tkt-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.tkt-wrap .tkt-bs-table {
    width: 100%;
    min-width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.84rem;
    table-layout: auto;
}
.tkt-wrap .tkt-bs-thead th {
    background: #212529;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.7rem 0.85rem;
    border-bottom: 2px solid #343a40;
    white-space: nowrap;
    vertical-align: middle;
}
.tkt-wrap .tkt-bs-tbody td {
    padding: 0.75rem 0.85rem;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    background: #fff;
}
.tkt-wrap .tkt-bs-tbody tr:last-child td { border-bottom: none; }
.tkt-wrap .tkt-bs-tbody tr:nth-child(even) td { background: #f8f9fa; }
.tkt-wrap .tkt-bs-tbody tr:hover td { background: #e7f1ff; }
.tkt-wrap .tkt-bs-table .tkt-col-status { width: 9%; }
.tkt-wrap .tkt-bs-table .tkt-col-client { width: 17%; }
.tkt-wrap .tkt-bs-table .tkt-col-title { width: 14%; }
.tkt-wrap .tkt-bs-table .tkt-desc-col { width: 28%; }
.tkt-wrap .tkt-bs-table .tkt-assign-col { width: 22%; }
.tkt-wrap .tkt-bs-table .tkt-col-action { width: 8%; text-align: center; }

.tkt-wrap .tkt-desc-cell { font-size: 0.82rem; line-height: 1.45; white-space: normal; word-break: break-word; color: #495057; }
.tkt-wrap .tkt-client-cell { font-size: 0.82rem; line-height: 1.4; }
.tkt-wrap .tkt-client-cell .tkt-client-id { font-weight: 700; color: var(--primary); margin-right: 0.25rem; }
.tkt-wrap .tkt-client-cell .tkt-client-name { display: block; font-weight: 600; color: #212529; }
.tkt-wrap .tkt-client-cell .tkt-client-email { display: block; font-size: 0.76rem; color: #6c757d; }
.tkt-wrap .tkt-title-cell { font-weight: 600; color: #212529; white-space: normal; word-break: break-word; }

.tkt-wrap .tkt-status-pill {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.tkt-wrap .tkt-status-open { background: #cfe2ff; color: #084298; }
.tkt-wrap .tkt-status-pending { background: #ffe5d0; color: #984c0c; }
.tkt-wrap .tkt-status-assigned { background: #fff3cd; color: #997404; }
.tkt-wrap .tkt-status-forwarded { background: #e2e3e5; color: #41464b; }
.tkt-wrap .tkt-status-resolved { background: #d1e7dd; color: #0f5132; }
.tkt-wrap .tkt-status-closed { background: #dee2e6; color: #495057; }
.tkt-wrap .tkt-status-unknown { background: #e9ecef; color: #6c757d; }

/* Assign input-group (horizontal) */
.tkt-wrap .tkt-input-group {
    display: inline-flex;
    flex-direction: row;
    align-items: stretch;
    max-width: 100%;
    vertical-align: middle;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    overflow: hidden;
    background: #fff;
}
.tkt-wrap .tkt-form-select {
    flex: 1 1 auto;
    min-width: 7rem;
    max-width: 10rem;
    padding: 0.4rem 1.75rem 0.4rem 0.55rem;
    border: none;
    border-right: 1px solid #ced4da;
    border-radius: 0;
    font-size: 0.8rem;
    font-family: inherit;
    color: #212529;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M4.646 6.646a.5.5 0 0 1 .708 0L8 9.293l2.646-2.647a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") no-repeat right 0.45rem center;
    appearance: none;
    cursor: pointer;
}
.tkt-wrap .tkt-form-select:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.25); }
.tkt-wrap .tkt-input-group-btn {
    flex: 0 0 auto;
    border-radius: 0;
    border: none;
    padding: 0.4rem 0.75rem;
    white-space: nowrap;
    font-size: 0.78rem;
}
.tkt-wrap .tkt-assigned-label { font-size: 0.82rem; color: var(--text); font-weight: 500; }
.tkt-wrap a.tkt-open-btn {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    background: #fff;
    transition: background 0.15s, color 0.15s;
}
.tkt-wrap a.tkt-open-btn:hover { background: var(--primary); color: #fff; }
.tkt-wrap .tkt-empty-msg {
    margin: 0;
    padding: 2rem;
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .tkt-wrap .tkt-top-toolbar { flex-wrap: wrap; }
    .tkt-wrap .tkt-top-toolbar__setup { flex: 1 1 100%; justify-content: flex-end; }
}

.tkt-attachments { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.tkt-attachment-item { flex: 0 0 auto; }
.tkt-attachment-link { display: block; text-decoration: none; color: inherit; }
.tkt-attachment-thumb { max-width: 160px; max-height: 120px; border-radius: 4px; object-fit: cover; border: 1px solid var(--border, #ddd); cursor: pointer; }
.tkt-attachment-video { max-width: 240px; max-height: 160px; border-radius: 4px; border: 1px solid var(--border, #ddd); }
.tkt-attachment-filename { font-size: 0.8rem; color: var(--primary); }

/* Footer layout stack (app rating styles → css/app-review.css) */
/* Footer layout stack (app rating styles in css/app-review.css) */
.footer-inner-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
}
.footer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

/* Email verification modal (center popup) */
.verify-email-screen { min-height: 100vh; }
.verify-email-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.verify-email-modal {
    width: 100%;
    max-width: 340px;
    padding: 1.35rem 1.25rem 1.15rem;
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
    text-align: center;
    animation: verify-email-pop 0.22s ease-out;
}
@keyframes verify-email-pop {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.verify-email-modal-icon {
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.65rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 1.35rem;
    line-height: 2.75rem;
}
.verify-email-modal-title { margin: 0 0 0.45rem; font-size: 1.2rem; font-weight: 700; }
.verify-email-lead { color: var(--muted); margin-bottom: 0.85rem; line-height: 1.45; font-size: 0.88rem; }
.verify-email-target { color: var(--text); font-weight: 600; word-break: break-all; }
.verify-email-form label { display: block; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--muted); text-align: left; }
.verify-email-form input {
    width: 100%; padding: 0.65rem 0.75rem; font-size: 1.45rem; letter-spacing: 0.35em; text-align: center;
    border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.75rem; font-weight: 700;
}
.verify-email-submit { width: 100%; padding: 0.6rem; font-weight: 600; border-radius: 10px; }
.verify-email-resend { margin: 0; }
.verify-email-resend-btn { border-radius: 10px; }
.otp-actions-row .verify-email-submit,
.otp-actions-row .verify-email-resend-btn {
    width: auto;
}
.verify-email-note { margin-bottom: 0.65rem; text-align: left; font-size: 0.82rem; }
.verify-email-dev-hint code { font-size: 0.78rem; }
.verify-email-dev-otp {
    text-align: center;
    font-size: 0.88rem;
    line-height: 1.5;
}
.dev-otp-code {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.15rem 0.55rem;
    font-size: 1.35rem;
    letter-spacing: 0.25em;
    font-weight: 800;
    color: #92400e;
    background: #fffbeb;
    border: 1px dashed #f59e0b;
    border-radius: 8px;
}
.profile-email-status {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
}
.profile-email-status-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.05rem; height: 1.05rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800;
}
.profile-email-status--verified { color: #16a34a; }
.profile-email-status--verified .profile-email-status-icon { background: #dcfce7; color: #16a34a; }
.profile-email-status--unverified { color: #dc2626; text-transform: uppercase; }
.profile-email-status--unverified .profile-email-status-icon { background: #fee2e2; color: #dc2626; }
.profile-email-verified-inline { color: #16a34a; font-weight: 800; }
.profile-email-display-row { margin-top: 0.75rem; }
.profile-email-display-label {
    display: block; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--muted);
}
.profile-email-display-main {
    display: flex; flex-direction: column; gap: 0;
    padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.profile-email-read-view {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
}
.profile-email-display-value { flex: 1; min-width: 0; font-weight: 500; word-break: break-all; }
.profile-email-edit-btn { margin-left: auto; flex-shrink: 0; }
.profile-email-edit-view[hidden] { display: none !important; }
.profile-email-read-view.is-collapsed { display: none; }
.profile-email-edit-view { width: 100%; }
.profile-email-edit-view label {
    display: block; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--muted);
}
.profile-email-edit-view input {
    width: 100%; padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: 8px;
    margin-bottom: 0.65rem;
}
.profile-email-form-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.module-actions-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.module-toggle-form { display: inline; margin: 0; }
.module-toggle-btn {
    background: none; border: none; padding: 0; cursor: pointer; font: inherit;
}
.status-inactive { background: #fee2e2; color: #991b1b; }

/* ── Social composer cancel + media progress (PIN 00043) ── */
.social-composer-cancel-btn {
    background: #fff !important;
    color: #64748b !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    padding: 0.45rem 1rem !important;
    margin-right: 0.15rem;
}
.social-composer-cancel-btn:hover {
    background: #f8fafc !important;
    color: #475569 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}
.social-composer-media-progress {
    flex: 1;
    min-width: 5rem;
    max-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-self: center;
}
.social-composer-media-progress[hidden] { display: none !important; }
.social-composer-media-progress-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: #64748b;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}
.social-composer-queue-status {
    margin: 0;
    padding: 0 1rem 0.5rem 4.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #6366f1;
    line-height: 1.35;
    word-break: break-all;
}
.social-composer-queue-status[hidden] { display: none !important; }
.social-composer-queue-status.is-idle { color: #64748b; font-weight: 500; }
.social-composer-media-progress-label:empty { display: none; }
.social-composer-media-progress-track {
    height: 0.35rem;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.social-composer-media-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6366f1, #22c55e);
    border-radius: 999px;
    transition: none;
}
.social-composer-card.is-posting .social-composer-media-progress-bar {
    transition: width 0.08s linear;
}
.social-composer-card.is-posting .social-composer-preview,
.social-composer-card.is-posting .social-composer-queue-status {
    display: none !important;
}
.social-composer-media-progress.is-upload .social-composer-media-progress-bar {
    background: linear-gradient(90deg, #4f46e5, #6366f1);
}
.social-composer-card.is-posting .social-composer-media-progress {
    flex: 1;
    max-width: none;
}
.social-composer-card.is-posting .social-composer-media-progress-label {
    max-width: none;
}
.social-tool-btn.is-queued .social-tool-count { background: #22c55e; }
.social-tool-btn.is-processing { opacity: 0.85; }
.social-tool-btn.is-processing::after {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: currentColor;
    animation: social-tool-spin 0.75s linear infinite;
}
@keyframes social-tool-spin { to { transform: rotate(360deg); } }
.social-post-btn:disabled,
.social-post-btn.is-busy {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.social-preview-item.is-queued,
.social-preview-item.is-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    background: #eef2ff;
}
.social-preview-item.is-queued img,
.social-preview-item.is-processing img { display: none; }
.social-preview-item-icon {
    font-size: 1.15rem;
    line-height: 1;
    color: #6366f1;
}
.social-preview-item.is-video-queued .social-preview-item-icon { color: #ef4444; }
.social-preview-item-name {
    font-size: 0.48rem;
    font-weight: 600;
    color: #64748b;
    max-width: 100%;
    padding: 0 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.social-preview-item-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.28rem;
    background: rgba(15, 23, 42, 0.12);
}
.social-preview-item-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #6366f1, #22c55e);
    transition: width 0.12s ease-out;
}
.social-preview-item-pct {
    position: absolute;
    top: 0.15rem;
    right: 0.15rem;
    font-size: 0.48rem;
    font-weight: 700;
    color: #fff;
    background: rgba(15, 23, 42, 0.55);
    border-radius: 4px;
    padding: 0.05rem 0.2rem;
    line-height: 1.2;
}
.social-preview-item.is-ready .social-preview-item-progress,
.social-preview-item.is-ready .social-preview-item-pct,
.social-preview-item.is-ready .social-preview-item-icon,
.social-preview-item.is-ready .social-preview-item-name { display: none; }
.social-preview-item.is-ready { background: #f8fafc; }
.social-preview-media-host {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}
.social-preview-media-host img { width: 100%; height: 100%; object-fit: cover; display: block; }
.social-preview-item-pct.is-done {
    background: #22c55e;
    color: #fff;
}
.social-post-media-grid:not(.is-layout-ready) {
    visibility: hidden;
    pointer-events: none;
}
.social-post-media-grid.is-layout-ready {
    visibility: visible;
    pointer-events: auto;
}
.social-preview-video-poster {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.social-preview-video-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.45);
    pointer-events: none;
}
.social-preview-item.is-stretch img,
.social-preview-item.is-stretch .social-preview-video-poster { object-fit: fill; }

.social-preview-size-status {
    font-size: calc(0.78rem * 0.7);
    color: #64748b;
    text-align: center;
    padding: 0.2rem 0.35rem 0.35rem;
    line-height: 1.3;
}
.social-preview-size-status.is-over {
    color: #dc2626;
    font-weight: 600;
}
.social-composer-media-totals {
    font-size: 0.78rem;
    color: #475569;
    margin: 0.35rem 0 0;
    padding: 0 0.25rem;
}
.social-composer-media-totals.is-over {
    color: #dc2626;
    font-weight: 600;
}

/* Lazy-loaded dashboard panels */
.dash-lazy-panel-host {
    min-height: 6rem;
}
.dash-lazy-loading {
    margin: 2rem auto;
    text-align: center;
    color: var(--text-muted, #64748b);
    font-size: 0.9rem;
}
.dash-lazy-error {
    text-align: center;
    margin: 2rem 1rem;
}

/* Add-format address hierarchy (profile + future ad impact zones) */
.add-format-block { margin: 0.5rem 0 1rem; }
.add-format-row { margin-bottom: 0.55rem; }
.add-format-row label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.2rem; }
.add-format-row select,
.add-format-row input[type="text"] {
    width: 100%;
    max-width: 28rem;
    font-size: 0.86rem;
}
.af-level-1 { padding-left: 0.75rem; }
.af-level-2 { padding-left: 1.5rem; }
.af-level-3 { padding-left: 2.25rem; }
.af-level-4 { padding-left: 3rem; }
.af-level-5 { padding-left: 3.75rem; }
.af-level-6 { padding-left: 4.5rem; }
.af-req { color: var(--danger, #c0392b); }
.profile-address-heading { margin: 1rem 0 0.35rem; font-size: 0.95rem; }
.address-fill-combo {
    margin: 0 0 1rem;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
}
.address-fill-combo > summary.address-fill-combo-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    list-style: none;
    width: 100%;
    padding: 0.7rem 1rem;
    border: 0;
    border-radius: 1.25rem;
    background: transparent;
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    user-select: none;
}
.address-fill-combo > summary.address-fill-combo-toggle::-webkit-details-marker {
    display: none;
}
.address-fill-combo > summary.address-fill-combo-toggle::marker {
    content: '';
}
.address-fill-combo > summary.address-fill-combo-toggle:hover {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}
.address-fill-combo[open] > summary.address-fill-combo-toggle {
    border-radius: 1.25rem 1.25rem 0 0;
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}
.address-fill-combo-chevron {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-alt, var(--surface));
    position: relative;
}
.address-fill-combo-chevron::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-15%) rotate(45deg);
    transition: transform 0.15s ease;
}
.address-fill-combo[open] .address-fill-combo-chevron::before {
    transform: translateY(15%) rotate(-135deg);
}
.address-fill-combo-panel {
    margin: 0;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--primary) 5%, var(--surface-alt, var(--surface)));
    border-radius: 0 0 1.25rem 1.25rem;
}
.address-fill-combo-hint {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
}
.address-fill-combo-field {
    position: relative;
}
.address-fill-combo-search-wrap {
    position: relative;
}
.address-fill-combo-field.input-group {
    flex-wrap: nowrap;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface);
}
.address-fill-combo-field .input-group-text {
    background: transparent;
    border: 0;
    color: var(--muted, var(--text));
    font-size: 0.95rem;
    line-height: 1;
    border-radius: 0;
}
.address-fill-combo-input.form-control {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
    color: var(--text);
    font-size: 0.9rem;
    border-radius: 0;
}
.address-fill-combo-field.input-group:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--primary) 20%, transparent);
}
.address-fill-combo-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.35rem);
    z-index: 40;
    max-height: 14rem;
    overflow: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 1rem;
    box-shadow: var(--shadow);
}
.address-fill-combo-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.82rem;
}
.address-fill-combo-item:first-child {
    border-radius: 1rem 1rem 0 0;
}
.address-fill-combo-item:last-child {
    border-radius: 0 0 1rem 1rem;
}
.address-fill-combo-item:only-child {
    border-radius: 1rem;
}
.address-fill-combo-item code {
    flex: 0 0 auto;
    font-size: 0.75rem;
}
.address-fill-combo-item span {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
}
.address-fill-combo-item:hover,
.address-fill-combo-item.is-active {
    background: color-mix(in srgb, var(--primary) 12%, var(--surface));
}
.profile-billing-toggle { margin: 0.75rem 0; }
.profile-address-save-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.85rem;
}
.profile-address-verify-status {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.profile-address-verify-status.is-unverified {
    color: #8b5e3c;
}
.profile-address-verify-status.is-verified {
    color: var(--success);
}
.profile-address-form h4:first-of-type { margin-top: 0; }
.profile-address-geo {
    margin-top: 1.15rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}
.profile-address-geo-grid {
    max-width: 28rem;
}
.profile-address-geo .profile-address-save-row {
    margin-top: 0.55rem;
}

.va-suggest-block {
    margin-top: 0.55rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--primary) 6%, var(--surface-alt, var(--surface)));
}
.va-suggest-title {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: var(--text);
}
.va-suggest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.va-suggest-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.va-suggest-label {
    flex: 1 1 12rem;
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.35;
}
.va-suggest-label code {
    margin-right: 0.35rem;
}

.co-addr-pick-row {
    display: flex;
    align-items: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.co-addr-pick-grow { flex: 1 1 16rem; margin-bottom: 0; }
.co-addr-table-wrap { margin-bottom: 0.85rem; }
.co-addr-custom {
    margin: 0.75rem 0 1rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-alt);
}
.co-addr-custom > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
}
.co-addr-custom-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 0.65rem;
}
#co-addr-picked-table .co-addr-tier {
    min-width: 7.5rem;
}

/* Manage ads */
.status-badge.status-queued { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text); }
.ad-zone-badge { font-family: monospace; font-size: 0.8rem; }
.ad-slot-hint { display: block; font-size: 0.72rem; }
.manage-ads-table .cell-date { font-size: 0.78rem; white-space: nowrap; }
#manage-ads-report-modal.modal-overlay {
    position: fixed; inset: 0; z-index: 1200;
    background: color-mix(in srgb, var(--bg) 30%, rgba(0,0,0,0.45));
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
#manage-ads-report-modal[hidden] { display: none !important; }
.manage-ads-report-card {
    background: var(--card-bg, var(--bg));
    border: 1px solid var(--border);
    border-radius: 8px;
    max-width: 36rem; width: 100%; max-height: 85vh; overflow: auto;
    padding: 1.25rem 1.5rem; position: relative;
}
.manage-ads-report-card .modal-close {
    position: absolute; top: 0.5rem; right: 0.65rem;
    border: none; background: transparent; font-size: 1.4rem; cursor: pointer;
    color: var(--muted);
}
.manage-ads-report-stats { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; margin: 0.75rem 0 1rem; }
.manage-ads-report-stats dt { font-weight: 600; color: var(--muted); font-size: 0.82rem; }
.manage-ads-report-stats dd { margin: 0; }
.manage-ads-email-list { margin: 0.25rem 0 1rem; padding-left: 1.25rem; font-size: 0.86rem; }
.manage-ads-viewers-table { font-size: 0.8rem; margin-top: 0.5rem; }

/* White Paper */
.white-paper-page .main-content { max-width: none; }
.white-paper-main { max-width: 52rem; margin: 0 auto; padding: 0 1rem 2.5rem; }
.white-paper-hero {
    margin: 0 -1rem 1.25rem;
    padding: 2rem 1.25rem 1.75rem;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 18%, var(--page-bg)),
        color-mix(in srgb, var(--accent) 12%, var(--surface)));
    border-bottom: 1px solid var(--border);
}
.white-paper-hero-inner { max-width: 48rem; margin: 0 auto; text-align: center; }
.white-paper-kicker {
    margin: 0 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}
.white-paper-title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.65rem, 4vw, 2.35rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--text);
}
.white-paper-subtitle {
    margin: 0 auto 1.1rem;
    max-width: 40rem;
    font-size: clamp(1rem, 2.4vw, 1.15rem);
    line-height: 1.55;
    color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
.white-paper-lang {
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid var(--border);
}
.white-paper-lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--muted);
    transition: background 0.15s ease, color 0.15s ease;
}
.white-paper-lang-btn:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.white-paper-lang-btn.is-active {
    background: var(--primary);
    color: #fff;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 35%, transparent);
}
.white-paper-fallback-note {
    margin: 0.85rem 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}
.white-paper-body { padding: 1.35rem 1.25rem 1.5rem; }
.white-paper-article { display: flex; flex-direction: column; gap: 1.35rem; }
.white-paper-section {
    padding-bottom: 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.white-paper-section:last-child { border-bottom: 0; padding-bottom: 0; }
.white-paper-section-title {
    margin: 0 0 0.65rem;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.35;
}
.white-paper-paragraph {
    margin: 0 0 0.65rem;
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--text);
}
.white-paper-paragraph:last-child { margin-bottom: 0; }
.white-paper-list {
    margin: 0.35rem 0 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.35rem;
}
.white-paper-list li {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
}
.white-paper-closing { margin-top: 0.25rem; }
.white-paper-quote {
    margin: 1rem 0 0;
    padding: 0.85rem 1rem;
    border-left: 4px solid var(--primary);
    border-radius: 0 10px 10px 0;
    background: color-mix(in srgb, var(--primary) 8%, var(--surface));
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.55;
    color: var(--primary-dark);
}
[data-theme="dark"] .white-paper-hero {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary) 22%, var(--bg-soft)),
        color-mix(in srgb, var(--bg-soft) 90%, #0f172a));
}
[data-theme="dark"] .white-paper-quote {
    background: color-mix(in srgb, var(--primary) 14%, var(--surface));
    color: color-mix(in srgb, #e0e7ff 85%, var(--text));
}
@media (max-width: 640px) {
    .white-paper-body { padding: 1rem 0.85rem 1.15rem; }
    .white-paper-hero { padding: 1.5rem 0.85rem 1.35rem; }
}

/* —— Mobile/tablet social: TRUE edge-to-edge feed (00243) ——
   Dashboard single-column @ 1024px. Escape every ancestor gutter. */
@media (max-width: 1024px) {
    body.dashboard-body .dashboard-shell.dashboard-unified > .dashboard-center.dashboard-workzone,
    body.dashboard-body .dashboard-center.dashboard-workzone,
    body.dashboard-body .dashboard-workzone,
    body.dashboard-body .dashboard-shell.dashboard-unified .dashboard-center {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.dashboard-body #dash-workzone-feed {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Kill focused frame around social / vault */
    body.dashboard-body #panel-social,
    body.dashboard-body #panel-social.workzone-inner,
    body.dashboard-body #panel-social.dash-panel,
    body.dashboard-body #panel-social.dash-panel-compact,
    body.dashboard-body #panel-my-vault,
    body.dashboard-body #panel-my-vault.workzone-inner,
    body.dashboard-body #panel-my-vault.dash-panel,
    body.dashboard-body #panel-my-vault.dash-panel-compact {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    /* Composer / toolbar slight inset only */
    body.dashboard-body #panel-social .social-composer-card,
    body.dashboard-body #panel-social .social-feed-toolbar,
    body.dashboard-body #panel-social .social-feed-user-banner,
    body.dashboard-body #panel-social .social-moderation-panel,
    body.dashboard-body #panel-social > .alert {
        margin-left: 0.4rem !important;
        margin-right: 0.4rem !important;
        width: auto;
        max-width: none;
        box-sizing: border-box;
    }

    /* 00045 — same-line toolbar; keep normal tap height (not squished) */
    body.dashboard-body #panel-social .social-feed-toolbar[data-pincode="00045"],
    body.dashboard-body #panel-social .social-feed-toolbar {
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 0.35rem;
    }
    body.dashboard-body #panel-social .social-feed-sort-links {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    body.dashboard-body #panel-social .social-feed-sort-links::-webkit-scrollbar { display: none; }
    body.dashboard-body #panel-social .social-sort-link {
        flex: 0 0 auto;
        font-size: 0.78rem;
        padding: 0.28rem 0.58rem;
        line-height: 1.25;
    }
    body.dashboard-body #panel-social .social-feed-user-search {
        margin-left: auto !important;
        flex: 0 0 auto !important;
        width: 7.75rem !important;
        min-width: 7.25rem !important;
        max-width: none !important;
    }
    body.dashboard-body #panel-social .social-feed-toolbar:has(.social-feed-user-search:focus-within) .social-feed-sort-links {
        flex: 0 1 auto;
        max-width: 42%;
    }
    body.dashboard-body #panel-social .social-feed-toolbar:has(.social-feed-user-search:focus-within) .social-feed-user-search {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 9.5rem !important;
        max-width: none !important;
    }
    body.dashboard-body #panel-social .social-feed-user-search-icon {
        left: 0.45rem;
    }
    body.dashboard-body #panel-social .social-feed-user-search-icon svg {
        width: 14px;
        height: 14px;
    }
    body.dashboard-body #panel-social .social-feed-user-q {
        font-size: 0.8rem !important;
        line-height: 1.25 !important;
        padding: 0.28rem 0.55rem 0.28rem 1.75rem !important;
    }

    /* Full-bleed feed with a little side padding so cards are not jammed to the glass */
    body.dashboard-body .dashboard-shell,
    body.dashboard-body .dashboard-center,
    body.dashboard-body #dash-workzone-feed,
    body.dashboard-body #panel-social {
        overflow-x: visible !important;
    }
    body.dashboard-body #panel-social .social-feed,
    body.dashboard-body #panel-my-vault .my-vault-feed,
    body.dashboard-body #panel-my-vault .social-feed,
    body.dashboard-body #social-feed {
        gap: 0.45rem !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    body.dashboard-body #panel-social .social-post-card,
    body.dashboard-body #panel-my-vault .social-post-card,
    body.dashboard-body #social-feed .social-post-card,
    body.dashboard-body .social-feed .social-post-card.promo-card-social,
    body.dashboard-body .social-feed .social-post-card.ad-card-social {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        background: color-mix(in srgb, var(--surface, #fff) 88%, var(--page-bg, #f1f5f9) 12%) !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        transform: none !important;
    }

    body.dashboard-body #panel-social .social-post-card:hover,
    body.dashboard-body #social-feed .social-post-card:hover,
    body.dashboard-body .social-feed .social-post-card.promo-card-social:hover,
    body.dashboard-body .social-feed .social-post-card.ad-card-social:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    body.dashboard-body #panel-social .social-post-head,
    body.dashboard-body #panel-my-vault .social-post-head,
    body.dashboard-body #panel-social .social-post-title,
    body.dashboard-body #panel-my-vault .social-post-title,
    body.dashboard-body #panel-social .social-post-desc,
    body.dashboard-body #panel-my-vault .social-post-desc,
    body.dashboard-body #panel-social .social-post-more,
    body.dashboard-body #panel-my-vault .social-post-more,
    body.dashboard-body #panel-social .social-shared-head,
    body.dashboard-body #panel-my-vault .social-shared-head,
    body.dashboard-body #panel-social .social-shared-message,
    body.dashboard-body #panel-my-vault .social-shared-message {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    body.dashboard-body #panel-social .social-shared-embed,
    body.dashboard-body #panel-my-vault .social-shared-embed,
    body.dashboard-body #social-feed .social-shared-embed {
        margin: 0 0.5rem 0.5rem !important;
        background: var(--surface, #fff) !important;
        overflow: hidden !important;
    }
    body.dashboard-body #panel-social .social-shared-embed .social-post-media,
    body.dashboard-body #panel-my-vault .social-shared-embed .social-post-media,
    body.dashboard-body #social-feed .social-shared-embed .social-post-media,
    body.dashboard-body #panel-social .social-shared-embed .social-post-media-grid,
    body.dashboard-body #panel-my-vault .social-shared-embed .social-post-media-grid,
    body.dashboard-body #social-feed .social-shared-embed .social-post-media-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.dashboard-body #panel-social .social-post-media,
    body.dashboard-body #panel-my-vault .social-post-media,
    body.dashboard-body #social-feed .social-post-media,
    body.dashboard-body #panel-social .social-post-media-grid,
    body.dashboard-body #panel-my-vault .social-post-media-grid,
    body.dashboard-body #social-feed .social-post-media-grid {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    body.dashboard-body #panel-social .social-media-tile,
    body.dashboard-body #panel-my-vault .social-media-tile,
    body.dashboard-body #social-feed .social-media-tile,
    body.dashboard-body #panel-social .social-media-img,
    body.dashboard-body #panel-social .social-media-video,
    body.dashboard-body #panel-my-vault .social-media-img,
    body.dashboard-body #social-feed .social-media-img,
    body.dashboard-body #social-feed .social-media-video {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        display: block !important;
    }

    body.dashboard-body #panel-social .social-post-card .promo-card-body,
    body.dashboard-body #panel-social .social-post-card .ad-card-body,
    body.dashboard-body #panel-social .social-post-card .promo-card-body.social-post-body,
    body.dashboard-body #panel-social .social-post-card .ad-card-body.social-post-body,
    body.dashboard-body #panel-my-vault .social-post-card .promo-card-body,
    body.dashboard-body #panel-my-vault .social-post-card .ad-card-body,
    body.dashboard-body #social-feed .social-post-card .promo-card-body,
    body.dashboard-body #social-feed .social-post-card .ad-card-body {
        padding: 0.15rem 0.55rem 0.2rem !important;
    }

    body.dashboard-body #panel-social .ad-stats-row,
    body.dashboard-body #social-feed .ad-stats-row {
        width: 100%;
        justify-content: space-between;
    }

    body.dashboard-body #social-feed #staff-notice-reader.staff-notice-feed-card {
        margin: 0.2rem 0 0.4rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.dashboard-body #panel-social .social-feed-sponsored-wrap,
    body.dashboard-body .social-feed-sponsored-wrap {
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0.15rem 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    [data-theme="dark"] body.dashboard-body #panel-social .social-post-card,
    [data-theme="dark"] body.dashboard-body #social-feed .social-post-card {
        background: color-mix(in srgb, var(--surface) 92%, var(--workzone-bg, #0b1220) 8%) !important;
        border: 0 !important;
    }
}

/* FAB dock: + in dash-dot circle, 80% transparent, top z-order */
@media (max-width: 1024px) {
    .mobile-fab-dock {
        position: fixed !important;
        z-index: 2147483000 !important;
        left: max(0.7rem, env(safe-area-inset-left, 0px)) !important;
        bottom: calc(1.05rem + env(safe-area-inset-bottom, 0px)) !important;
        pointer-events: none;
        display: block !important;
    }
    .mobile-fab-plus {
        pointer-events: auto;
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 3.9rem;
        height: 3.9rem;
        padding: 0;
        border: 0 !important;
        border-radius: 999px;
        /* 80% transparent fill — content behind shows through */
        background: color-mix(in srgb, var(--surface, #fff) 20%, transparent) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none !important;
        color: color-mix(in srgb, var(--text) 72%, transparent);
        cursor: pointer;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        font: inherit;
        overflow: visible;
        transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
    }
    .mobile-fab-plus:active { transform: scale(0.94); }
    .mobile-fab-dock.is-open .mobile-fab-plus {
        background: color-mix(in srgb, var(--surface, #fff) 28%, transparent) !important;
        color: var(--text);
    }
    .mobile-fab-ring {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        color: color-mix(in srgb, var(--text) 55%, transparent);
    }
    .mobile-fab-dock.is-open .mobile-fab-ring {
        color: color-mix(in srgb, var(--text) 75%, transparent);
    }
    .mobile-fab-plus-icon {
        position: relative;
        z-index: 1;
        font-size: 2.2rem;
        font-weight: 300;
        line-height: 1;
        pointer-events: none;
        transform: translateY(-1px);
        opacity: 0.85;
    }

    /* Default: hide Feedback + Messenger launchers */
    html.is-yo-mobile-fab body:not(.is-mobile-fab-open) .floating-feedback-btn,
    html.is-yo-mobile-fab body:not(.is-mobile-fab-open) .messenger-launcher,
    body.is-mobile-fab-collapsed .floating-feedback-btn,
    body.is-mobile-fab-collapsed .messenger-launcher {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(1.25rem) scale(0.82) !important;
    }

    /* Open: park both launchers ABOVE the + (left stack) */
    html.is-yo-mobile-fab body.is-mobile-fab-open .floating-feedback-root,
    body.is-mobile-fab-open .floating-feedback-root {
        top: auto !important;
        left: max(0.7rem, env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
        bottom: calc(5.35rem + env(safe-area-inset-bottom, 0px)) !important;
        transform: none !important;
        z-index: 2147482900 !important;
    }
    html.is-yo-mobile-fab body.is-mobile-fab-open .messenger-root,
    body.is-mobile-fab-open .messenger-root {
        left: max(0.7rem, env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
        bottom: calc(9.05rem + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 2147482950 !important;
    }
    html.is-yo-mobile-fab body.is-mobile-fab-open .floating-feedback-btn,
    html.is-yo-mobile-fab body.is-mobile-fab-open .messenger-launcher,
    body.is-mobile-fab-open .floating-feedback-btn,
    body.is-mobile-fab-open .messenger-launcher {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease !important;
    }
}

@media (min-width: 1025px) {
    .mobile-fab-dock { display: none !important; }
}

.credit-speed-settings {
    margin: 1.25rem 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface);
}

.credit-speed-settings h5 {
    margin: 1rem 0 0.15rem;
    color: var(--text);
}

.credit-activity-list li .credit-act-tiers { display: inline; }
.credit-activity-list .credit-act-suggest { opacity: 0.9; }
.credit-activity-list .credit-act-earned {
    font-weight: 700;
    margin-left: 0.15rem;
}

.credit-facility-settings .credit-facility-tier-heading {
    margin: 0.35rem 0 0.1rem;
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--text);
}
.credit-facility-settings .credit-facility-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-bottom: 0.45rem;
}

.credit-speed-threshold-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(7.5rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.65rem;
}

@media (max-width: 560px) {
    .credit-facility-settings .credit-facility-pair {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .credit-speed-threshold-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 440px) {
    .credit-speed-threshold-grid {
        grid-template-columns: 1fr;
    }
}

body.staff-notice-open {
    overflow: hidden;
}

.staff-notice-urgent-tick {
    font-weight: 800;
    color: var(--danger, #dc2626);
}

.staff-notice-urgent-cell {
    text-align: center;
    font-weight: 700;
}
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.staff-notice-form-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.staff-notice-form.profile-form .staff-notice-form-grid.profile-form-grid-wide,
.staff-notice-form .staff-notice-form-grid {
    grid-template-columns: 1fr !important;
}

.staff-notice-form .staff-notice-date-active-row {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.75rem 1.25rem;
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
}

.staff-notice-form .staff-notice-date-col {
    display: flex !important;
    flex: 1 1 12rem;
    flex-direction: column;
    min-width: 10rem;
    margin-bottom: 0 !important;
}

.staff-notice-form .staff-notice-active-col {
    display: flex !important;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    align-self: flex-end;
    gap: 0.85rem;
    width: max-content !important;
    max-width: max-content !important;
}

.staff-notice-form .staff-notice-active-inline {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.4rem !important;
    width: max-content !important;
    max-width: max-content !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap;
    /* Match .profile-form date input height so the pair sits on the input row */
    min-height: calc(0.86rem * 1.25 + 0.9rem + 2px);
}

.staff-notice-form .staff-notice-active-inline label,
.staff-notice-form .staff-notice-active-col label {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
}

.staff-notice-form #staff-notice-active,
.staff-notice-form .staff-notice-active-inline input[type="checkbox"] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    display: inline-block !important;
    width: 1.05rem !important;
    min-width: 1.05rem !important;
    max-width: 1.05rem !important;
    height: 1.05rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    flex: 0 0 1.05rem !important;
    vertical-align: middle;
    accent-color: var(--primary);
    box-sizing: border-box;
}

.staff-notice-form label .field-optional {
    margin-left: 0.35rem;
    color: var(--muted);
    font-weight: 500;
    font-size: 0.78rem;
}

@media (max-width: 480px) {
    .staff-notice-form .staff-notice-date-active-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.staff-notice-form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

.staff-notice-form-error,
.staff-notice-reader-error {
    color: var(--danger, var(--text));
    margin: 0.5rem 0 0;
}

.staff-notice-image-preview {
    margin-top: 0.5rem;
}

.staff-notice-image-preview img {
    display: block;
    max-width: 100%;
    max-height: 12rem;
    width: auto;
    height: auto;
    object-fit: contain;
    border: none;
    border-radius: 0;
    background: var(--surface);
}

.staff-notice-table .staff-notice-pic-cell,
#staff-notices-root .staff-notice-pic-cell {
    width: 48px !important;
    max-width: 48px !important;
    min-width: 48px !important;
    padding: 4px !important;
    vertical-align: middle !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

.staff-notice-table .staff-notice-list-thumb-wrap,
#staff-notices-root .staff-notice-list-thumb-wrap {
    display: inline-block !important;
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    overflow: hidden !important;
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    background-color: color-mix(in srgb, var(--surface-alt, var(--bg-elevated, var(--surface))) 88%, transparent);
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    cursor: pointer;
}

.staff-notice-table img,
#staff-notices-root .staff-notice-table img {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    object-fit: contain !important;
    object-position: center !important;
}

.staff-notice-creator-name {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
}

.staff-notice-row {
    cursor: pointer;
}

.staff-notice-row.is-selected {
    background: color-mix(in srgb, var(--accent, var(--text)) 10%, var(--surface));
}

.staff-notice-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.staff-notice-log-card h2 {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
}

/* PIN 00314 — official notice card at top of post feed (non-blocking) */
#staff-notice-reader.staff-notice-reader {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    margin: 0;
    border: none;
    box-sizing: border-box;
}

#staff-notice-reader.staff-notice-reader[hidden] {
    display: none !important;
}

#staff-notice-reader.staff-notice-feed-card,
.staff-notice-feed-card {
    margin: 0 0 0.55rem;
    padding: 0.85rem 0.95rem 0.9rem;
    color: var(--text);
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--warning) 16%, var(--surface)) 0%,
            var(--surface) 42%
        );
    border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--border));
    border-left: 4px solid var(--warning, #d97706);
    border-radius: var(--radius, 0.65rem);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 7%, transparent);
}

[data-theme="dark"] #staff-notice-reader.staff-notice-feed-card,
[data-theme="dim"] #staff-notice-reader.staff-notice-feed-card {
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--warning) 22%, var(--surface)) 0%,
            var(--surface) 48%
        );
}

.staff-notice-feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.staff-notice-feed-author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.staff-notice-feed-badge {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--surface);
    background: var(--warning, #d97706);
}
[data-theme="dark"] .staff-notice-feed-badge {
    color: var(--text);
}

.staff-notice-feed-label {
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--muted);
}

.staff-notice-feed-date {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.staff-notice-feed-title {
    margin: 0 0 0.4rem;
    font-size: calc(1rem + 1pt);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

.staff-notice-feed-title[hidden],
.staff-notice-feed-text[hidden],
.staff-notice-feed-media[hidden] {
    display: none !important;
}

.staff-notice-feed-text {
    margin: 0 0 0.65rem;
    line-height: 1.55;
    font-size: calc(0.88rem + 2pt);
    color: var(--text);
}

.staff-notice-feed-media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 16rem;
    margin: 0 0 0.55rem;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    background: color-mix(in srgb, var(--surface-alt, var(--surface)) 92%, transparent);
}

.staff-notice-feed-media img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 16rem !important;
    object-fit: contain !important;
    object-position: center;
    margin: 0 auto;
}

.staff-notice-reader-error {
    margin: 0.35rem 0 0;
    color: var(--danger, #b91c1c);
}

.staff-notice-feed-foot {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.75rem;
    row-gap: 0.5rem;
    margin-top: 0.25rem;
    padding-top: 0.7rem;
    border-top: 1px solid color-mix(in srgb, var(--warning) 22%, var(--border));
}

.staff-notice-feed-foot .staff-notice-skip-btn {
    grid-column: 1;
    justify-self: start;
    margin: 0;
}

.staff-notice-feed-foot .staff-notice-read-btn {
    grid-column: 2;
    justify-self: end;
    margin: 0;
    white-space: nowrap;
}

.staff-notice-reader:not(.is-preview) #staff-notice-reader-close-btn {
    display: none !important;
}

.staff-notice-reader.is-preview #staff-notice-skip-btn,
.staff-notice-reader.is-preview #staff-notice-read-btn {
    display: none !important;
}

.staff-notice-reader.is-preview .staff-notice-feed-foot {
    display: flex;
    justify-content: flex-end;
}

/* Admin View preview only — centered card + dim backdrop; daily notice stays in feed */
body.staff-notice-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 49999;
    background: color-mix(in srgb, var(--text) 45%, transparent);
}

#staff-notice-reader.staff-notice-reader.is-preview,
#staff-notice-reader.staff-notice-reader.is-urgent {
    position: fixed !important;
    top: 4.5rem !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 50000 !important;
    display: block !important;
    width: min(36rem, calc(100vw - 2rem)) !important;
    max-height: calc(100dvh - 5.5rem);
    overflow: auto !important;
    transform: translateX(-50%);
    margin: 0 !important;
    padding: 0.85rem 1rem 0.95rem !important;
}
#staff-notice-reader.staff-notice-reader.is-preview[hidden],
#staff-notice-reader.staff-notice-reader.is-urgent[hidden] {
    display: none !important;
}

body.staff-notice-open {
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .staff-notice-feed-foot {
        grid-template-columns: 1fr;
    }

    .staff-notice-feed-foot .staff-notice-read-btn {
        grid-column: 1;
        grid-row: 1;
        justify-self: stretch;
        width: 100%;
    }

    .staff-notice-feed-foot .staff-notice-skip-btn {
        grid-column: 1;
        grid-row: 2;
        justify-self: stretch;
        width: 100%;
    }
}
.staff-notice-status-modal {
    position: fixed;
    inset: 0;
    z-index: 14100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.staff-notice-status-modal[hidden] {
    display: none !important;
}

.staff-notice-status-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--text) 72%, transparent);
}

.staff-notice-status-dialog {
    position: relative;
    z-index: 1;
    width: min(56rem, 100%);
    max-height: min(88dvh, 44rem);
    overflow: auto;
    padding: 1.1rem 1.15rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: var(--surface);
    color: var(--text);
}

.staff-notice-status-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.staff-notice-status-head h2 {
    margin: 0;
    font-size: 1.1rem;
}

.staff-notice-status-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.staff-notice-status-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 0.85rem;
    margin-bottom: 0.75rem;
}

.staff-notice-status-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.staff-notice-status-field select,
.staff-notice-status-field input {
    min-width: 8rem;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.28rem 0.45rem;
}

.staff-notice-status-search {
    flex: 1 1 12rem;
}

.staff-notice-status-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.7rem;
}

@media (max-width: 900px) {
    .staff-notice-layout {
        grid-template-columns: 1fr;
    }
}

.staff-notice-compose {
    padding: 0.15rem 0.15rem 0.35rem;
}

.staff-notice-compose-head {
    margin: 0 0 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.staff-notice-compose-head h2 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 650;
    color: var(--text);
}

.staff-notice-audience-block {
    margin: 0;
    padding: 0.95rem 1rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--surface-alt, var(--bg-elevated, var(--surface))) 82%, transparent);
}

.staff-notice-audience-block legend {
    float: none;
    width: auto;
    margin: 0 0 0.3rem;
    padding: 0 0.2rem;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text);
}

.staff-notice-audience-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0.7rem 0 1.05rem;
}

.staff-notice-audience-tile {
    margin: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface, var(--bg));
    min-width: 0;
    overflow: hidden;
}

.staff-notice-audience-tile:hover,
.staff-notice-audience-tile:focus-within {
    border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.staff-notice-audience-tile:has(input:checked) {
    border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--surface, var(--bg)));
    box-shadow: inset 3px 0 0 var(--primary);
}

.staff-notice-audience-tile.is-green:has(input:checked) {
    border-color: color-mix(in srgb, var(--success, var(--primary)) 55%, var(--border));
    background: color-mix(in srgb, var(--success, var(--primary)) 10%, var(--surface, var(--bg)));
    box-shadow: inset 3px 0 0 var(--success, var(--primary));
}

.staff-notice-audience-tile.is-gold:has(input:checked) {
    border-color: color-mix(in srgb, var(--warning, var(--accent, var(--primary))) 55%, var(--border));
    background: color-mix(in srgb, var(--warning, var(--accent, var(--primary))) 10%, var(--surface, var(--bg)));
    box-shadow: inset 3px 0 0 var(--warning, var(--accent, var(--primary)));
}

.staff-notice-audience-tile:has(input:disabled) {
    opacity: 0.48;
}

.staff-notice-compose.profile-form .form-group .staff-notice-audience-choice,
.staff-notice-compose .staff-notice-audience-choice {
    display: grid !important;
    grid-template-columns: 1.2rem minmax(0, 1fr) !important;
    grid-template-rows: auto;
    align-items: start !important;
    column-gap: 0.6rem;
    width: 100%;
    margin: 0 !important;
    padding: 0.7rem 0.8rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

.staff-notice-audience-tick {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    padding: 0;
    flex: 0 0 1.2rem;
}

.staff-notice-compose.profile-form .staff-notice-audience-choice input[type="checkbox"],
.staff-notice-compose .staff-notice-audience-choice input[type="checkbox"],
.staff-notice-compose .staff-notice-audience-tick input[type="checkbox"],
.staff-notice-compose .staff-notice-council-option input[type="checkbox"] {
    -webkit-appearance: checkbox;
    appearance: auto;
    display: inline-block !important;
    float: none !important;
    position: static !important;
    width: 1.05rem !important;
    min-width: 1.05rem !important;
    max-width: 1.05rem !important;
    height: 1.05rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    flex: 0 0 1.05rem !important;
    accent-color: var(--primary);
    vertical-align: middle;
    box-sizing: border-box;
}

.staff-notice-audience-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.staff-notice-audience-copy strong {
    display: block;
    font-size: 0.9rem;
    line-height: 1.2rem;
    color: var(--text);
}

.staff-notice-audience-copy small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.35;
}

.staff-notice-council-block h3 {
    margin: 0 0 0.25rem;
    font-size: 0.88rem;
    font-weight: 650;
    color: var(--text);
}

.staff-notice-council-block.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.staff-notice-council-picker {
    display: block;
}

.staff-notice-council-control {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface, var(--bg));
}

.staff-notice-council-control:focus-within {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
}

.staff-notice-council-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.7rem;
    padding: 0.4rem 0.55rem;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
}

.staff-notice-council-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.staff-notice-council-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    max-width: 14rem;
    padding: 0.18rem 0.3rem 0.18rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 12%, var(--surface, var(--bg)));
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
}

.staff-notice-council-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.staff-notice-council-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
}

.staff-notice-council-chip-remove:hover {
    background: color-mix(in srgb, var(--text) 10%, transparent);
    color: var(--text);
}

.staff-notice-compose .staff-notice-council-search {
    flex: 1 1 8rem;
    min-width: 7rem;
    width: auto !important;
    margin: 0;
    padding: 0.28rem 0.2rem !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.staff-notice-council-menu {
    max-height: 12.5rem;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    padding: 0.3rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.staff-notice-council-empty {
    margin: 0.4rem 0.5rem;
}

.staff-notice-compose.profile-form .form-group .staff-notice-council-option,
.staff-notice-compose .staff-notice-council-option {
    display: grid !important;
    grid-template-columns: 1.2rem minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 0.5rem;
    margin: 0 !important;
    padding: 0.42rem 0.5rem;
    border-radius: 0.5rem;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text);
    cursor: pointer;
}

.staff-notice-council-option:hover,
.staff-notice-council-option.is-selected {
    background: color-mix(in srgb, var(--primary) 9%, transparent);
}

.staff-notice-image-box {
    padding: 0.7rem 0.8rem;
    border: 1px dashed var(--border);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--surface-alt, var(--bg-elevated, var(--surface))) 70%, transparent);
}

.staff-notice-audience-cell {
    max-width: 14rem;
    font-size: 0.82rem;
    color: var(--text);
}

@media (max-width: 720px) {
    .staff-notice-audience-tiles {
        grid-template-columns: 1fr;
    }
}

.company-switcher {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    max-width: 16rem;
}
.company-switcher-form { margin: 0; }
.company-chip {
    border: 1px solid var(--border, transparent);
    background: var(--surface, transparent);
    color: var(--text, inherit);
    border-radius: 999px;
    padding: 0.12rem 0.55rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
}
.company-chip.is-active {
    background: color-mix(in srgb, var(--accent, var(--primary)) 22%, var(--surface, transparent));
    border-color: var(--accent, var(--primary));
}
.company-chip.is-primary { border-style: dashed; }
.profile-company-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0.35rem 0;
}