/* ════════════════════════════════════════════════════════════════════════════
   CounselConnect · App Design System v2
   Warm wellness · Mobile-first · DM Sans
   Namespace: `.ac-*` (App Core) so new components can coexist with the
              legacy site.css classes during the page-by-page migration.
   Order: load AFTER site.css so our tokens win on shared pages.
════════════════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
    /* Spacing (4px base) */
    --ac-sp-1: 4px;
    --ac-sp-2: 8px;
    --ac-sp-3: 12px;
    --ac-sp-4: 16px;
    --ac-sp-5: 20px;
    --ac-sp-6: 24px;
    --ac-sp-7: 32px;
    --ac-sp-8: 40px;
    --ac-sp-9: 48px;
    --ac-sp-10: 64px;
    --ac-sp-11: 80px;
    --ac-sp-12: 96px;

    /* Typography — DM Sans for UI + prose, used consistently across the app */
    --ac-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --ac-font-display: 'DM Sans', var(--ac-font-body);

    --ac-fs-xs: 11px;
    --ac-fs-sm: 12.5px;
    --ac-fs-md: 14px;
    --ac-fs-lg: 15.5px;
    --ac-fs-xl: 17px;
    --ac-fs-2xl: 20px;
    --ac-fs-3xl: 26px;
    --ac-fs-4xl: 32px;
    --ac-fs-5xl: 40px;
    --ac-fs-6xl: 52px;

    --ac-lh-tight: 1.12;
    --ac-lh-snug: 1.3;
    --ac-lh-normal: 1.55;
    --ac-lh-relaxed: 1.75;

    --ac-tr-fast: 120ms cubic-bezier(.2,.8,.3,1);
    --ac-tr: 220ms cubic-bezier(.2,.8,.3,1);
    --ac-tr-slow: 360ms cubic-bezier(.2,.8,.3,1);

    --ac-r-sm: 8px;
    --ac-r-md: 12px;
    --ac-r-lg: 16px;
    --ac-r-xl: 20px;
    --ac-r-2xl: 28px;
    --ac-r-full: 999px;

    /* Shadows — warm green-tinted for cohesion on cream backgrounds */
    --ac-sh-xs: 0 1px 2px rgba(30, 69, 48, .05);
    --ac-sh-sm: 0 2px 10px rgba(30, 69, 48, .07);
    --ac-sh-md: 0 8px 22px -6px rgba(30, 69, 48, .12);
    --ac-sh-lg: 0 18px 40px -12px rgba(30, 69, 48, .18);
    --ac-sh-xl: 0 30px 60px -16px rgba(30, 69, 48, .24);
    --ac-sh-focus: 0 0 0 3px rgba(88, 151, 104, .28);

    /* ── Neutrals ── */
    --ac-ink: #1C2A24;                 /* primary text */
    --ac-ink-soft: #3A4D44;            /* secondary text */
    --ac-muted: #6A7A70;               /* tertiary / captions */
    --ac-hint: #9CA89F;                /* placeholders, disabled labels */
    --ac-hairline: #EDE5D3;            /* dividers, subtle borders */
    --ac-line: #DBD1BA;                /* primary borders */
    --ac-sand: #F7F2E4;                /* warm page background */
    --ac-cream: #FDFAF2;               /* elevated surfaces */
    --ac-milk: #FFFFFF;                /* cards / modal body */

    /* ── Brand — Sage / Forest Green ── */
    --ac-brand-50:  #EEF6EF;
    --ac-brand-100: #D7EBD9;
    --ac-brand-200: #B0D5B4;
    --ac-brand-300: #83B88A;
    --ac-brand-400: #589768;
    --ac-brand-500: #3C7850;
    --ac-brand-600: #2D5F3F;
    --ac-brand-700: #1E4530;
    --ac-brand-800: #122E21;
    --ac-brand: var(--ac-brand-500);
    --ac-brand-ink: var(--ac-brand-700);

    /* ── Accent — Warm Terracotta (for primary CTAs and emphasis) ── */
    --ac-acc-50:  #FDF1E9;
    --ac-acc-100: #F9DDC7;
    --ac-acc-200: #F3BD98;
    --ac-acc-300: #EC9866;
    --ac-acc-400: #E27A45;
    --ac-acc-500: #C85F30;
    --ac-accent: var(--ac-acc-400);

    /* ── Semantic ── */
    --ac-success: #2E8A5A;
    --ac-success-bg: #E5F2EA;
    --ac-warning: #B27908;
    --ac-warning-bg: #FBF2DB;
    --ac-danger: #B64438;
    --ac-danger-bg: #FBE7E3;
    --ac-info: #2D6AA0;
    --ac-info-bg: #E0EBF5;

    /* ── Layout ── */
    --ac-page-max: 1200px;
    --ac-topbar-h: 64px;
    --ac-sidebar-w: 264px;
    --ac-bottomnav-h: 68px;
}

/* ── Reset / Base ───────────────────────────────────────────────────────── */
.ac-scope *,
.ac-scope *::before,
.ac-scope *::after {
    box-sizing: border-box;
}

/* Opt-in base styles — apply to elements inside `.ac-scope` so we don't
   regress any legacy page that isn't migrated yet. */
.ac-scope {
    font-family: var(--ac-font-body);
    color: var(--ac-ink);
    background: var(--ac-sand);
    font-size: var(--ac-fs-md);
    line-height: var(--ac-lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "cv02", "cv03", "cv04";
}

    .ac-scope p { margin: 0 0 var(--ac-sp-4); }
    .ac-scope a { color: var(--ac-brand-600); text-decoration: none; transition: color var(--ac-tr-fast); }
    .ac-scope a:hover { color: var(--ac-brand-500); text-decoration: underline; text-underline-offset: 3px; }
    .ac-scope strong, .ac-scope b { font-weight: 600; color: var(--ac-ink); }
    .ac-scope code { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: .88em; background: var(--ac-cream); padding: 1px 6px; border-radius: var(--ac-r-sm); border: 1px solid var(--ac-hairline); }
    .ac-scope hr { border: none; border-top: 1px solid var(--ac-hairline); margin: var(--ac-sp-6) 0; }

/* ── Typography Primitives ──────────────────────────────────────────────── */
.ac-display-1 { font-family: var(--ac-font-display); font-size: var(--ac-fs-6xl); line-height: var(--ac-lh-tight); letter-spacing: -0.025em; font-weight: 700; color: var(--ac-ink); margin: 0; }
.ac-display-2 { font-family: var(--ac-font-display); font-size: var(--ac-fs-5xl); line-height: var(--ac-lh-tight); letter-spacing: -0.022em; font-weight: 700; color: var(--ac-ink); margin: 0; }
.ac-h1 { font-size: var(--ac-fs-4xl); line-height: var(--ac-lh-snug); letter-spacing: -0.018em; font-weight: 700; color: var(--ac-ink); margin: 0; }
.ac-h2 { font-size: var(--ac-fs-3xl); line-height: var(--ac-lh-snug); letter-spacing: -0.012em; font-weight: 700; color: var(--ac-ink); margin: 0; }
.ac-h3 { font-size: var(--ac-fs-2xl); line-height: var(--ac-lh-snug); font-weight: 600; color: var(--ac-ink); margin: 0; }
.ac-h4 { font-size: var(--ac-fs-xl); line-height: var(--ac-lh-snug); font-weight: 600; color: var(--ac-ink); margin: 0; }
.ac-lede { font-size: var(--ac-fs-lg); line-height: var(--ac-lh-relaxed); color: var(--ac-ink-soft); margin: 0; }
.ac-body { font-size: var(--ac-fs-md); line-height: var(--ac-lh-normal); color: var(--ac-ink); margin: 0; }
.ac-caption { font-size: var(--ac-fs-sm); line-height: var(--ac-lh-snug); color: var(--ac-muted); margin: 0; }
.ac-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--ac-fs-xs); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac-brand); }
    .ac-eyebrow::before { content: ""; display: inline-block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; }

.ac-text-muted { color: var(--ac-muted) !important; }
.ac-text-soft  { color: var(--ac-ink-soft) !important; }
.ac-text-brand { color: var(--ac-brand) !important; }
.ac-text-accent { color: var(--ac-accent) !important; }
.ac-text-success { color: var(--ac-success) !important; }
.ac-text-warning { color: var(--ac-warning) !important; }
.ac-text-danger { color: var(--ac-danger) !important; }

/* ── Layout Primitives ─────────────────────────────────────────────────── */
.ac-container { max-width: var(--ac-page-max); margin: 0 auto; padding: 0 var(--ac-sp-5); }
.ac-container-narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--ac-sp-5); }

.ac-stack > * + * { margin-top: var(--ac-sp-4); }
.ac-stack-sm > * + * { margin-top: var(--ac-sp-2); }
.ac-stack-lg > * + * { margin-top: var(--ac-sp-6); }
.ac-stack-xl > * + * { margin-top: var(--ac-sp-8); }

.ac-cluster { display: flex; flex-wrap: wrap; gap: var(--ac-sp-3); align-items: center; }
.ac-cluster-lg { gap: var(--ac-sp-5); }

.ac-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ac-sp-4); }

.ac-grid { display: grid; gap: var(--ac-sp-4); }
.ac-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ac-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ac-page-header { padding: var(--ac-sp-7) 0 var(--ac-sp-6); }
.ac-page-title { font-family: var(--ac-font-display); font-size: var(--ac-fs-4xl); line-height: var(--ac-lh-tight); letter-spacing: -0.02em; font-weight: 700; color: var(--ac-ink); margin: 0; }
.ac-page-sub { color: var(--ac-muted); font-size: var(--ac-fs-md); margin-top: var(--ac-sp-2); }

/* ── Button System ──────────────────────────────────────────────────────── */
.ac-btn {
    --ac-btn-bg: var(--ac-milk);
    --ac-btn-fg: var(--ac-ink);
    --ac-btn-border: var(--ac-line);
    --ac-btn-bg-hover: var(--ac-cream);
    --ac-btn-shadow: var(--ac-sh-xs);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ac-sp-2);
    min-height: 44px;              /* mobile-first tap target */
    padding: 0 var(--ac-sp-5);
    border-radius: var(--ac-r-full);
    border: 1.5px solid var(--ac-btn-border);
    background: var(--ac-btn-bg);
    color: var(--ac-btn-fg);
    font-family: inherit;
    font-size: var(--ac-fs-md);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--ac-btn-shadow);
    transition: transform var(--ac-tr-fast), background var(--ac-tr-fast), border-color var(--ac-tr-fast), box-shadow var(--ac-tr-fast), color var(--ac-tr-fast);
    -webkit-appearance: none;
    appearance: none;
}
    .ac-btn:hover { background: var(--ac-btn-bg-hover); }
    .ac-btn:active { transform: translateY(1px); }
    .ac-btn:focus-visible { outline: none; box-shadow: var(--ac-sh-focus); }
    .ac-btn:disabled,
    .ac-btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }

    .ac-btn > i { font-size: 1.05em; line-height: 1; }

/* Variants */
.ac-btn-primary  { --ac-btn-bg: var(--ac-ink); --ac-btn-fg: #fff; --ac-btn-border: var(--ac-ink); --ac-btn-bg-hover: var(--ac-brand-700); --ac-btn-shadow: var(--ac-sh-sm); }
    .ac-btn-primary:hover { border-color: var(--ac-brand-700); color: #fff; }

.ac-btn-brand    { --ac-btn-bg: var(--ac-brand); --ac-btn-fg: #fff; --ac-btn-border: var(--ac-brand); --ac-btn-bg-hover: var(--ac-brand-600); --ac-btn-shadow: 0 8px 20px -8px rgba(60, 120, 80, .45); }
    .ac-btn-brand:hover { border-color: var(--ac-brand-600); color: #fff; }

.ac-btn-accent   { --ac-btn-bg: var(--ac-accent); --ac-btn-fg: #fff; --ac-btn-border: var(--ac-accent); --ac-btn-bg-hover: var(--ac-acc-500); --ac-btn-shadow: 0 8px 20px -8px rgba(226, 122, 69, .45); }
    .ac-btn-accent:hover { border-color: var(--ac-acc-500); color: #fff; }

.ac-btn-ghost    { --ac-btn-bg: transparent; --ac-btn-fg: var(--ac-ink); --ac-btn-border: transparent; --ac-btn-bg-hover: var(--ac-cream); --ac-btn-shadow: none; }

.ac-btn-outline  { --ac-btn-bg: transparent; --ac-btn-fg: var(--ac-ink); --ac-btn-border: var(--ac-line); --ac-btn-bg-hover: var(--ac-cream); --ac-btn-shadow: none; }

.ac-btn-danger   { --ac-btn-bg: var(--ac-danger); --ac-btn-fg: #fff; --ac-btn-border: var(--ac-danger); --ac-btn-bg-hover: #9C3A30; --ac-btn-shadow: 0 8px 20px -8px rgba(182, 68, 56, .45); }
    .ac-btn-danger:hover { color: #fff; border-color: #9C3A30; }

.ac-btn-danger-outline { --ac-btn-bg: transparent; --ac-btn-fg: var(--ac-danger); --ac-btn-border: var(--ac-danger); --ac-btn-bg-hover: var(--ac-danger-bg); --ac-btn-shadow: none; }

/* Sizes */
.ac-btn-sm { min-height: 36px; padding: 0 var(--ac-sp-4); font-size: var(--ac-fs-sm); }
.ac-btn-lg { min-height: 52px; padding: 0 var(--ac-sp-7); font-size: var(--ac-fs-lg); }
.ac-btn-icon { min-height: 44px; width: 44px; padding: 0; }
    .ac-btn-sm.ac-btn-icon { min-height: 36px; width: 36px; }
    .ac-btn-lg.ac-btn-icon { min-height: 52px; width: 52px; }

.ac-btn-block { width: 100%; }

/* ── Card System ────────────────────────────────────────────────────────── */
.ac-card {
    background: var(--ac-milk);
    border: 1px solid var(--ac-hairline);
    border-radius: var(--ac-r-lg);
    box-shadow: var(--ac-sh-sm);
    overflow: hidden;
    transition: box-shadow var(--ac-tr), border-color var(--ac-tr), transform var(--ac-tr);
}
    .ac-card-interactive { cursor: pointer; }
    .ac-card-interactive:hover { border-color: var(--ac-brand-200); box-shadow: var(--ac-sh-md); transform: translateY(-2px); }

.ac-card-flat { box-shadow: none; background: var(--ac-cream); }
.ac-card-hollow { background: transparent; border-style: dashed; box-shadow: none; }

.ac-card-header {
    padding: var(--ac-sp-5) var(--ac-sp-5) var(--ac-sp-4);
    border-bottom: 1px solid var(--ac-hairline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ac-sp-4);
}
    .ac-card-header h1, .ac-card-header h2, .ac-card-header h3, .ac-card-header h4,
    .ac-card-header .ac-card-title { font-size: var(--ac-fs-lg); font-weight: 600; color: var(--ac-ink); margin: 0; line-height: var(--ac-lh-snug); }
    .ac-card-header .ac-card-sub { font-size: var(--ac-fs-sm); color: var(--ac-muted); margin-top: 2px; }

.ac-card-body { padding: var(--ac-sp-5); }
.ac-card-body-lg { padding: var(--ac-sp-7); }

.ac-card-footer {
    padding: var(--ac-sp-4) var(--ac-sp-5);
    border-top: 1px solid var(--ac-hairline);
    background: var(--ac-cream);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ac-sp-3);
}

/* Elevated hero card (dark ink background — used for emphasis) */
.ac-card-dark {
    background: linear-gradient(145deg, var(--ac-brand-700) 0%, var(--ac-brand-800) 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--ac-sh-lg);
}
    .ac-card-dark .ac-card-header { border-bottom-color: rgba(255,255,255,.1); }
    .ac-card-dark .ac-card-footer { background: rgba(255,255,255,.04); border-top-color: rgba(255,255,255,.1); }

/* ── Form Fields ────────────────────────────────────────────────────────── */
.ac-field { display: flex; flex-direction: column; gap: var(--ac-sp-2); }
.ac-label { font-size: var(--ac-fs-sm); font-weight: 600; color: var(--ac-ink); letter-spacing: 0.005em; }
.ac-label-required::after { content: " *"; color: var(--ac-danger); }

.ac-hint { font-size: var(--ac-fs-sm); color: var(--ac-muted); }
.ac-error { font-size: var(--ac-fs-sm); color: var(--ac-danger); display: flex; align-items: center; gap: 6px; }
    .ac-error::before { content: "⚠"; }

.ac-input,
.ac-textarea,
.ac-select {
    font-family: inherit;
    font-size: var(--ac-fs-md);
    color: var(--ac-ink);
    background: var(--ac-milk);
    border: 1.5px solid var(--ac-line);
    border-radius: var(--ac-r-md);
    padding: 0 var(--ac-sp-4);
    min-height: 48px;
    width: 100%;
    line-height: var(--ac-lh-snug);
    transition: border-color var(--ac-tr-fast), box-shadow var(--ac-tr-fast), background var(--ac-tr-fast);
    -webkit-appearance: none;
    appearance: none;
}
    .ac-input::placeholder, .ac-textarea::placeholder { color: var(--ac-hint); }
    .ac-input:hover, .ac-textarea:hover, .ac-select:hover { border-color: var(--ac-brand-300); }
    .ac-input:focus, .ac-textarea:focus, .ac-select:focus { outline: none; border-color: var(--ac-brand); box-shadow: var(--ac-sh-focus); background: var(--ac-milk); }
    .ac-input:disabled, .ac-textarea:disabled, .ac-select:disabled { background: var(--ac-cream); color: var(--ac-muted); cursor: not-allowed; }
    .ac-input.is-error, .ac-textarea.is-error, .ac-select.is-error { border-color: var(--ac-danger); }
        .ac-input.is-error:focus, .ac-textarea.is-error:focus, .ac-select.is-error:focus { box-shadow: 0 0 0 3px rgba(182, 68, 56, .25); }

.ac-textarea { padding: var(--ac-sp-3) var(--ac-sp-4); min-height: 96px; resize: vertical; line-height: var(--ac-lh-normal); }

.ac-select { padding-right: var(--ac-sp-8); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%236A7A70' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right var(--ac-sp-4) center; }

/* Input with leading icon */
.ac-input-group { position: relative; }
    .ac-input-group > .ac-input-icon { position: absolute; left: var(--ac-sp-4); top: 50%; transform: translateY(-50%); color: var(--ac-muted); pointer-events: none; font-size: 1.05em; }
    .ac-input-group > .ac-input { padding-left: calc(var(--ac-sp-4) + 28px); }

/* Checkbox / Radio */
.ac-check { display: inline-flex; align-items: flex-start; gap: var(--ac-sp-3); font-size: var(--ac-fs-md); color: var(--ac-ink); cursor: pointer; }
    .ac-check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; border: 1.5px solid var(--ac-line); border-radius: 5px; background: var(--ac-milk); cursor: pointer; transition: all var(--ac-tr-fast); flex-shrink: 0; margin-top: 2px; position: relative; }
    .ac-check input[type=radio] { border-radius: 50%; }
    .ac-check input:hover { border-color: var(--ac-brand-400); }
    .ac-check input:checked { background: var(--ac-brand); border-color: var(--ac-brand); }
    .ac-check input[type=checkbox]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 6px; height: 10px; border: 2px solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); }
    .ac-check input[type=radio]:checked::after { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
    .ac-check input:focus-visible { outline: none; box-shadow: var(--ac-sh-focus); }

/* Toggle switch */
.ac-switch { position: relative; display: inline-block; width: 44px; height: 26px; }
    .ac-switch input { opacity: 0; width: 0; height: 0; }
    .ac-switch-track { position: absolute; inset: 0; background: var(--ac-line); border-radius: var(--ac-r-full); transition: background var(--ac-tr); cursor: pointer; }
        .ac-switch-track::before { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,.15); transition: transform var(--ac-tr); }
    .ac-switch input:checked + .ac-switch-track { background: var(--ac-brand); }
        .ac-switch input:checked + .ac-switch-track::before { transform: translateX(18px); }

/* ── Badges, Chips, Pills ──────────────────────────────────────────────── */
.ac-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--ac-r-full);
    font-size: var(--ac-fs-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    background: var(--ac-cream);
    color: var(--ac-ink-soft);
    border: 1px solid var(--ac-hairline);
    white-space: nowrap;
}
.ac-badge-brand   { background: var(--ac-brand-50);   color: var(--ac-brand-700); border-color: var(--ac-brand-100); }
.ac-badge-accent  { background: var(--ac-acc-50);     color: var(--ac-acc-500);   border-color: var(--ac-acc-100); }
.ac-badge-success { background: var(--ac-success-bg); color: var(--ac-success);   border-color: #CDE7D6; }
.ac-badge-warning { background: var(--ac-warning-bg); color: var(--ac-warning);   border-color: #EED8A3; }
.ac-badge-danger  { background: var(--ac-danger-bg);  color: var(--ac-danger);    border-color: #EDC7C1; }
.ac-badge-info    { background: var(--ac-info-bg);    color: var(--ac-info);      border-color: #C3D4E5; }
.ac-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 2px; }

.ac-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--ac-r-full);
    font-size: var(--ac-fs-sm);
    font-weight: 500;
    background: var(--ac-cream);
    color: var(--ac-ink-soft);
    border: 1px solid var(--ac-hairline);
    transition: all var(--ac-tr-fast);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
    .ac-chip:hover { background: var(--ac-sand); border-color: var(--ac-line); color: var(--ac-ink); }
    .ac-chip.is-active { background: var(--ac-ink); color: #fff; border-color: var(--ac-ink); }

/* ── Avatars ───────────────────────────────────────────────────────────── */
.ac-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ac-r-full);
    background: linear-gradient(135deg, var(--ac-brand-500), var(--ac-brand-300));
    color: #fff;
    font-weight: 600;
    font-size: var(--ac-fs-sm);
    letter-spacing: 0.02em;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
    .ac-avatar > img { width: 100%; height: 100%; object-fit: cover; }
    .ac-avatar-sm { width: 32px; height: 32px; font-size: var(--ac-fs-xs); }
    .ac-avatar-lg { width: 56px; height: 56px; font-size: var(--ac-fs-lg); }
    .ac-avatar-xl { width: 88px; height: 88px; font-size: var(--ac-fs-2xl); border-radius: var(--ac-r-2xl); }
    .ac-avatar-xxl { width: 120px; height: 120px; font-size: var(--ac-fs-3xl); border-radius: var(--ac-r-2xl); }

.ac-avatar-dot {
    position: absolute;
    bottom: -2px; right: -2px;
    width: 12px; height: 12px;
    border: 2px solid var(--ac-milk);
    border-radius: 50%;
    background: var(--ac-hint);
}
    .ac-avatar-dot.is-online { background: #2ECC71; }
    .ac-avatar-dot.is-busy { background: var(--ac-warning); }

.ac-avatar-stack { display: inline-flex; }
    .ac-avatar-stack > .ac-avatar { border: 2.5px solid var(--ac-milk); margin-left: -10px; }
    .ac-avatar-stack > .ac-avatar:first-child { margin-left: 0; }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.ac-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ac-fs-md); }
    .ac-table thead th {
        text-align: left;
        font-weight: 600;
        font-size: var(--ac-fs-xs);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ac-muted);
        padding: var(--ac-sp-3) var(--ac-sp-4);
        border-bottom: 1px solid var(--ac-hairline);
        background: var(--ac-cream);
    }
    .ac-table tbody td { padding: var(--ac-sp-4); border-bottom: 1px solid var(--ac-hairline); vertical-align: middle; color: var(--ac-ink); }
    .ac-table tbody tr:last-child td { border-bottom: none; }
    .ac-table tbody tr:hover td { background: var(--ac-cream); }
    .ac-table .ac-table-right { text-align: right; }
    .ac-table .ac-table-center { text-align: center; }

/* Mobile: stack rows as cards */
@media (max-width: 640px) {
    .ac-table.ac-table-responsive thead { display: none; }
    .ac-table.ac-table-responsive tbody tr {
        display: block;
        background: var(--ac-milk);
        border: 1px solid var(--ac-hairline);
        border-radius: var(--ac-r-md);
        padding: var(--ac-sp-3);
        margin-bottom: var(--ac-sp-3);
        box-shadow: var(--ac-sh-xs);
    }
    .ac-table.ac-table-responsive tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--ac-sp-2) 0;
        border-bottom: 1px solid var(--ac-hairline);
    }
        .ac-table.ac-table-responsive tbody td:last-child { border-bottom: none; }
        .ac-table.ac-table-responsive tbody td::before {
            content: attr(data-label);
            font-weight: 600;
            font-size: var(--ac-fs-xs);
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--ac-muted);
            margin-right: var(--ac-sp-3);
        }
}

/* ── Stat Card ──────────────────────────────────────────────────────────── */
.ac-stat {
    display: flex;
    flex-direction: column;
    gap: var(--ac-sp-2);
    padding: var(--ac-sp-5);
    background: var(--ac-milk);
    border: 1px solid var(--ac-hairline);
    border-radius: var(--ac-r-lg);
    box-shadow: var(--ac-sh-sm);
}
    .ac-stat-label { font-size: var(--ac-fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ac-muted); font-weight: 600; display: flex; align-items: center; gap: 6px; }
    .ac-stat-value { font-family: var(--ac-font-display); font-size: var(--ac-fs-3xl); font-weight: 700; color: var(--ac-ink); letter-spacing: -0.02em; line-height: 1; }
    .ac-stat-delta { font-size: var(--ac-fs-sm); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
        .ac-stat-delta.is-up   { color: var(--ac-success); }
        .ac-stat-delta.is-down { color: var(--ac-danger); }
    .ac-stat-footnote { font-size: var(--ac-fs-sm); color: var(--ac-muted); }

/* ── Alert / Inline Notice ─────────────────────────────────────────────── */
.ac-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ac-sp-3);
    padding: var(--ac-sp-4) var(--ac-sp-5);
    border-radius: var(--ac-r-md);
    border: 1px solid var(--ac-hairline);
    background: var(--ac-cream);
    font-size: var(--ac-fs-md);
    line-height: var(--ac-lh-snug);
    color: var(--ac-ink);
}
    .ac-alert > i { font-size: 1.2em; line-height: 1.2; flex-shrink: 0; color: var(--ac-muted); margin-top: 1px; }
    .ac-alert-title { font-weight: 600; display: block; margin-bottom: 2px; }

.ac-alert-success { background: var(--ac-success-bg); border-color: #CDE7D6; color: #195D3C; }
    .ac-alert-success > i { color: var(--ac-success); }
.ac-alert-warning { background: var(--ac-warning-bg); border-color: #EED8A3; color: #7A5303; }
    .ac-alert-warning > i { color: var(--ac-warning); }
.ac-alert-danger  { background: var(--ac-danger-bg); border-color: #EDC7C1; color: #7F2A22; }
    .ac-alert-danger > i { color: var(--ac-danger); }
.ac-alert-info    { background: var(--ac-info-bg); border-color: #C3D4E5; color: #1C4B74; }
    .ac-alert-info > i { color: var(--ac-info); }

/* ── Empty State ───────────────────────────────────────────────────────── */
.ac-empty {
    padding: var(--ac-sp-10) var(--ac-sp-6);
    text-align: center;
    color: var(--ac-muted);
}
    .ac-empty-icon { font-size: 2.4rem; opacity: .35; margin-bottom: var(--ac-sp-3); display: inline-block; color: var(--ac-ink); }
    .ac-empty-title { font-size: var(--ac-fs-lg); font-weight: 600; color: var(--ac-ink); margin-bottom: 6px; }
    .ac-empty-msg { font-size: var(--ac-fs-md); color: var(--ac-muted); margin-bottom: var(--ac-sp-5); max-width: 380px; margin-left: auto; margin-right: auto; }

/* ── Modal ─────────────────────────────────────────────────────────────── */
.ac-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(28, 42, 36, 0.5);
    backdrop-filter: blur(6px);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ac-tr), visibility var(--ac-tr);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--ac-sp-4);
}
.ac-modal-backdrop.is-open { opacity: 1; visibility: visible; }

.ac-modal {
    background: var(--ac-milk);
    border-radius: var(--ac-r-xl) var(--ac-r-xl) 0 0;
    box-shadow: var(--ac-sh-xl);
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(24px);
    transition: transform var(--ac-tr);
}
.ac-modal-backdrop.is-open .ac-modal { transform: none; }

.ac-modal-header {
    padding: var(--ac-sp-5) var(--ac-sp-5) var(--ac-sp-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ac-sp-3);
    border-bottom: 1px solid var(--ac-hairline);
}
    .ac-modal-title { font-size: var(--ac-fs-xl); font-weight: 600; color: var(--ac-ink); margin: 0; }
    .ac-modal-close { width: 36px; height: 36px; border-radius: 50%; background: var(--ac-cream); border: none; color: var(--ac-ink); cursor: pointer; font-size: 18px; line-height: 1; transition: background var(--ac-tr-fast); }
    .ac-modal-close:hover { background: var(--ac-sand); }

.ac-modal-body { padding: var(--ac-sp-5); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ac-modal-footer { padding: var(--ac-sp-4) var(--ac-sp-5); border-top: 1px solid var(--ac-hairline); background: var(--ac-cream); display: flex; gap: var(--ac-sp-3); justify-content: flex-end; flex-wrap: wrap; }

/* Center on larger screens */
@media (min-width: 640px) {
    .ac-modal-backdrop { align-items: center; }
    .ac-modal { border-radius: var(--ac-r-xl); transform: translateY(12px) scale(.98); }
    .ac-modal-backdrop.is-open .ac-modal { transform: none; }
}

/* ── Dividers ──────────────────────────────────────────────────────────── */
.ac-divider { height: 1px; background: var(--ac-hairline); margin: var(--ac-sp-5) 0; border: none; }
.ac-divider-label {
    display: flex; align-items: center; gap: var(--ac-sp-3);
    color: var(--ac-muted); font-size: var(--ac-fs-xs); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
    margin: var(--ac-sp-6) 0;
}
    .ac-divider-label::before, .ac-divider-label::after { content: ""; flex: 1; height: 1px; background: var(--ac-hairline); }

/* ── Toast (rebuild to match new tokens) ───────────────────────────────── */
#toast-container {
    position: fixed;
    /* Sit below the sticky topbar so toasts never cover the online pill,
       notifications bell, or user-account chip. */
    top: calc(var(--ac-topbar-h) + var(--ac-sp-3));
    right: var(--ac-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--ac-sp-2);
    z-index: 10050;
    pointer-events: none;
    max-width: 92vw;
}
@media (max-width: 480px) {
    #toast-container {
        top: calc(var(--ac-topbar-h) + var(--ac-sp-2));
        right: var(--ac-sp-3);
        left: var(--ac-sp-3);
        max-width: none;
    }
    .toast-item { min-width: 0; max-width: none; width: 100%; }
}
.toast-item {
    pointer-events: auto;
    display: flex;
    gap: var(--ac-sp-3);
    min-width: 300px;
    max-width: 420px;
    padding: var(--ac-sp-4);
    padding-right: var(--ac-sp-7);
    background: var(--ac-milk);
    border: 1px solid var(--ac-hairline);
    border-left: 4px solid var(--ac-brand);
    border-radius: var(--ac-r-md);
    box-shadow: var(--ac-sh-lg);
    transform: translateX(120%);
    opacity: 0;
    transition: transform var(--ac-tr), opacity var(--ac-tr);
    position: relative;
    overflow: hidden;
}
.toast-item.show { transform: none; opacity: 1; }
.toast-item.hide { transform: translateX(20px); opacity: 0; }

.toast-icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; background: var(--ac-brand-50); color: var(--ac-brand); }

.toast-title { font-weight: 600; font-size: var(--ac-fs-md); color: var(--ac-ink); margin-bottom: 2px; }
.toast-msg { font-size: var(--ac-fs-sm); color: var(--ac-ink-soft); line-height: var(--ac-lh-snug); word-wrap: break-word; }
.toast-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 22px; height: 22px;
    border: none;
    background: transparent;
    color: var(--ac-muted);
    cursor: pointer;
    font-size: 14px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--ac-tr-fast);
}
.toast-close:hover { background: var(--ac-cream); color: var(--ac-ink); }
.toast-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 2px;
    background: currentColor;
    opacity: .3;
}

.toast-success { border-left-color: var(--ac-success); }
    .toast-success .toast-icon { background: var(--ac-success-bg); color: var(--ac-success); }
.toast-error { border-left-color: var(--ac-danger); }
    .toast-error .toast-icon { background: var(--ac-danger-bg); color: var(--ac-danger); }
.toast-warning { border-left-color: var(--ac-warning); }
    .toast-warning .toast-icon { background: var(--ac-warning-bg); color: var(--ac-warning); }
.toast-info { border-left-color: var(--ac-info); }
    .toast-info .toast-icon { background: var(--ac-info-bg); color: var(--ac-info); }

/* ── Skeleton Loader (for async content) ──────────────────────────────── */
.ac-skeleton {
    background: linear-gradient(90deg, var(--ac-hairline) 0%, var(--ac-sand) 50%, var(--ac-hairline) 100%);
    background-size: 200% 100%;
    animation: acShimmer 1.4s ease-in-out infinite;
    border-radius: var(--ac-r-sm);
    display: block;
    color: transparent;
    user-select: none;
}
@keyframes acShimmer { to { background-position: -200% 0; } }

/* ── Segmented Control / Tabs ─────────────────────────────────────────── */
.ac-segment {
    display: inline-flex;
    padding: 4px;
    background: var(--ac-cream);
    border: 1px solid var(--ac-hairline);
    border-radius: var(--ac-r-full);
    gap: 2px;
}
    .ac-segment-item {
        padding: 8px var(--ac-sp-4);
        font-size: var(--ac-fs-sm);
        font-weight: 600;
        color: var(--ac-muted);
        background: transparent;
        border: none;
        border-radius: var(--ac-r-full);
        cursor: pointer;
        transition: all var(--ac-tr-fast);
    }
    .ac-segment-item:hover { color: var(--ac-ink); }
    .ac-segment-item.is-active { background: var(--ac-milk); color: var(--ac-ink); box-shadow: var(--ac-sh-xs); }

/* ── Utility Classes ───────────────────────────────────────────────────── */
.ac-hidden { display: none !important; }
.ac-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.ac-mt-0 { margin-top: 0 !important; } .ac-mt-2 { margin-top: var(--ac-sp-2) !important; } .ac-mt-3 { margin-top: var(--ac-sp-3) !important; } .ac-mt-4 { margin-top: var(--ac-sp-4) !important; } .ac-mt-6 { margin-top: var(--ac-sp-6) !important; } .ac-mt-8 { margin-top: var(--ac-sp-8) !important; }
.ac-mb-0 { margin-bottom: 0 !important; } .ac-mb-2 { margin-bottom: var(--ac-sp-2) !important; } .ac-mb-3 { margin-bottom: var(--ac-sp-3) !important; } .ac-mb-4 { margin-bottom: var(--ac-sp-4) !important; } .ac-mb-6 { margin-bottom: var(--ac-sp-6) !important; } .ac-mb-8 { margin-bottom: var(--ac-sp-8) !important; }

.ac-w-full { width: 100%; }
.ac-text-center { text-align: center; }
.ac-text-right { text-align: right; }
.ac-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Responsive Breakpoints ────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* All ac-grid layouts collapse to a single column on mobile — wins over
       inline `style="grid-template-columns:..."` set for desktop layouts
       (SessionDetail main+sidebar, Earnings, Profile, etc.) */
    .ac-grid, .ac-grid-2, .ac-grid-3, .ac-grid-4 { grid-template-columns: 1fr !important; }
    .ac-container { padding: 0 var(--ac-sp-4); }
    .ac-page-header { padding: var(--ac-sp-5) 0 var(--ac-sp-4); }
    .ac-page-title { font-size: var(--ac-fs-3xl); }
    .ac-display-1 { font-size: var(--ac-fs-5xl); }
    .ac-display-2 { font-size: var(--ac-fs-4xl); }
    .ac-btn-lg { min-height: 48px; padding: 0 var(--ac-sp-5); }
    .ac-card-body-lg { padding: var(--ac-sp-5); }
}

/* ── Safe-area support for installed PWAs on iOS ──────────────────────── */
@supports (padding: max(0px)) {
    .ac-safe-top    { padding-top: max(var(--ac-sp-4), env(safe-area-inset-top)); }
    .ac-safe-bottom { padding-bottom: max(var(--ac-sp-4), env(safe-area-inset-bottom)); }
}

/* ════════════════════════════════════════════════════════════════════════════
   INSTALL PROMPT positioning — clears the bottom-nav on mobile for
   authenticated users so the banner never overlaps navigation.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
    body.ac-shell-active #acInstallPrompt {
        bottom: calc(var(--ac-bottomnav-h) + 12px + env(safe-area-inset-bottom, 0px)) !important;
        left: 12px !important;
        right: 12px !important;
        max-width: none !important;
    }
    #acInstallPrompt {
        left: 12px !important;
        right: 12px !important;
        max-width: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   AUTH SHELL · Login / Register / Forgot / Reset pages
   Warm cream canvas with a centered card. Two-panel split on desktop
   collapses to a single column on tablet/mobile.
══════════════════════════════════════════════════════════════════════════ */
.ac-auth {
    min-height: calc(100vh - var(--ac-topbar-h));
    background:
        radial-gradient(ellipse 800px 500px at 80% -10%, rgba(88, 151, 104, .08) 0%, transparent 60%),
        radial-gradient(ellipse 600px 400px at -10% 90%, rgba(226, 122, 69, .08) 0%, transparent 60%),
        var(--ac-sand);
    padding: var(--ac-sp-8) var(--ac-sp-4);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ac-auth-wrap {
    width: 100%;
    max-width: 460px;
}
.ac-auth-wrap-wide { max-width: 880px; }

.ac-auth-intro {
    text-align: center;
    margin-bottom: var(--ac-sp-6);
}
.ac-auth-intro .ac-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ac-font-display);
    font-size: var(--ac-fs-lg);
    font-weight: 700;
    color: var(--ac-ink);
    text-decoration: none;
    margin-bottom: var(--ac-sp-5);
}
.ac-auth-intro .ac-auth-brand:hover { color: var(--ac-ink); text-decoration: none; }
.ac-auth-intro .ac-auth-brand-mark {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--ac-brand-600);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
}
.ac-auth-intro h1 {
    font-family: var(--ac-font-display);
    font-size: var(--ac-fs-3xl);
    font-weight: 700;
    color: var(--ac-ink);
    line-height: var(--ac-lh-snug);
    letter-spacing: -0.015em;
    margin: 0 0 var(--ac-sp-2);
}
.ac-auth-intro p { color: var(--ac-muted); margin: 0; }

.ac-auth-card {
    background: var(--ac-milk);
    border: 1px solid var(--ac-hairline);
    border-radius: var(--ac-r-xl);
    padding: var(--ac-sp-7);
    box-shadow: var(--ac-sh-md);
}
@media (max-width: 480px) {
    .ac-auth-card { padding: var(--ac-sp-5); border-radius: var(--ac-r-lg); }
}

.ac-auth-footer {
    text-align: center;
    padding-top: var(--ac-sp-5);
    border-top: 1px solid var(--ac-hairline);
    margin-top: var(--ac-sp-5);
    font-size: var(--ac-fs-sm);
    color: var(--ac-muted);
}
.ac-auth-footer a { font-weight: 600; }

/* Section title inside long forms (Register counselor) */
.ac-form-section {
    display: flex;
    align-items: center;
    gap: var(--ac-sp-3);
    font-size: var(--ac-fs-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ac-brand);
    margin: var(--ac-sp-6) 0 var(--ac-sp-4);
}
.ac-form-section::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}
.ac-form-section:first-child { margin-top: 0; }

/* Selectable expertise chips (register counselor) */
.ac-chip-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid var(--ac-line);
    border-radius: var(--ac-r-md);
    background: var(--ac-milk);
    cursor: pointer;
    transition: all var(--ac-tr-fast);
    font-size: var(--ac-fs-sm);
    font-weight: 500;
    color: var(--ac-ink-soft);
}
.ac-chip-check:hover { border-color: var(--ac-brand-300); background: var(--ac-cream); }
.ac-chip-check input {
    appearance: none;
    -webkit-appearance: none;
    width: 18px; height: 18px;
    border: 1.5px solid var(--ac-line);
    border-radius: 5px;
    background: var(--ac-milk);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: all var(--ac-tr-fast);
}
.ac-chip-check input:checked {
    background: var(--ac-brand);
    border-color: var(--ac-brand);
}
.ac-chip-check input:checked::after {
    content: "";
    position: absolute;
    left: 4px; top: 0;
    width: 6px; height: 10px;
    border: 2px solid #fff;
    border-top: 0; border-left: 0;
    transform: rotate(45deg);
}
.ac-chip-check:has(input:checked) {
    border-color: var(--ac-brand);
    background: var(--ac-brand-50);
    color: var(--ac-brand-ink);
}

/* Dropzone for file uploads */
.ac-dropzone {
    padding: var(--ac-sp-8) var(--ac-sp-5);
    border: 2px dashed var(--ac-line);
    border-radius: var(--ac-r-lg);
    background: var(--ac-cream);
    text-align: center;
    cursor: pointer;
    transition: all var(--ac-tr-fast);
}
.ac-dropzone:hover, .ac-dropzone.is-over {
    border-color: var(--ac-brand);
    background: var(--ac-brand-50);
}
.ac-dropzone-icon {
    font-size: 2rem;
    color: var(--ac-brand);
    margin-bottom: var(--ac-sp-2);
    display: inline-block;
}

/* Password toggle — eye button matches input height */
.ac-pw-toggle {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--ac-muted);
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: var(--ac-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background var(--ac-tr-fast);
}
.ac-pw-toggle:hover { background: var(--ac-cream); color: var(--ac-ink); }

/* ════════════════════════════════════════════════════════════════════════════
   GLOBAL LOADER · "Please wait"
   Warm cream card, sage dual-ring spinner with orbiting dot, soft ink
   backdrop with generous blur. Driven by window.showLoader()/hideLoader()
   in site.js.
══════════════════════════════════════════════════════════════════════════ */
.app-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(18, 46, 33, 0.42);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 260ms cubic-bezier(.2,.8,.25,1), visibility 260ms;
    padding: var(--ac-sp-5);
}
.app-loader-overlay.show { opacity: 1; visibility: visible; }

.app-loader-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ac-sp-5);
    padding: var(--ac-sp-6) var(--ac-sp-8) var(--ac-sp-6) var(--ac-sp-7);
    min-width: 280px;
    max-width: 420px;
    background: var(--ac-cream);
    color: var(--ac-ink);
    border: 1px solid rgba(30, 69, 48, .08);
    border-radius: var(--ac-r-2xl);
    box-shadow:
        0 32px 80px -20px rgba(18, 46, 33, 0.35),
        0 8px 24px -8px rgba(18, 46, 33, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transform: translateY(12px) scale(.96);
    opacity: 0;
    transition: transform 320ms cubic-bezier(.2,.85,.2,1), opacity 240ms ease-out;
}
.app-loader-overlay.show .app-loader-card {
    transform: none;
    opacity: 1;
}

/* ── Dual-ring spinner with orbiting dot ── */
.app-loader-spinner {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}
/* Outer subtle ring — static */
.app-loader-spinner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--ac-brand-100);
    background:
        radial-gradient(circle at center, var(--ac-brand-50) 0%, transparent 72%);
}
/* Rotating arc */
.app-loader-spinner::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2.5px solid transparent;
    border-top-color: var(--ac-brand-500);
    border-right-color: var(--ac-brand-400);
    animation: appLoaderSpin 900ms cubic-bezier(.55,.2,.45,.8) infinite;
}
/* Orbiting dot — smaller accent that pulses along the arc */
.app-loader-spinner > span {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background: var(--ac-accent);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(226, 122, 69, .6);
    transform-origin: 4px 24px;
    animation: appLoaderOrbit 900ms cubic-bezier(.55,.2,.45,.8) infinite;
}

@keyframes appLoaderSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes appLoaderOrbit {
    0%   { transform: rotate(0deg)   scale(1); }
    50%  {                             /* stretch slightly mid-cycle */
           transform: rotate(180deg) scale(1.15); }
    100% { transform: rotate(360deg) scale(1); }
}

.app-loader-text {
    font-family: var(--ac-font-body);
    font-weight: 600;
    font-size: var(--ac-fs-lg);
    line-height: var(--ac-lh-snug);
    color: var(--ac-ink);
    letter-spacing: -0.005em;
}
.app-loader-sub {
    margin-top: 4px;
    font-size: var(--ac-fs-sm);
    line-height: var(--ac-lh-snug);
    color: var(--ac-muted);
    font-weight: 400;
}

/* Three-dot "typing" feel at the end of the title — pure flourish */
.app-loader-text::after {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-left: 6px;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--ac-brand);
    box-shadow:
        8px 0 0 -0.5px var(--ac-brand-300),
        16px 0 0 -1.5px var(--ac-brand-200);
    animation: appLoaderDots 1.2s ease-in-out infinite;
}
@keyframes appLoaderDots {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

/* Body lock — no scroll while loader is shown */
body.app-loader-locked { overflow: hidden !important; }

/* Mobile: slightly smaller card, stays centered */
@media (max-width: 480px) {
    .app-loader-card {
        min-width: 0;
        width: 100%;
        padding: var(--ac-sp-5) var(--ac-sp-6);
        gap: var(--ac-sp-4);
    }
    .app-loader-spinner { width: 38px; height: 38px; }
    .app-loader-spinner > span { transform-origin: 4px 21px; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   APP SHELL · Phase 2
   Desktop  : fixed sidebar (264px) + main column with slim topbar
   Tablet   : sidebar becomes a slide-in drawer, topbar stays
   Mobile   : sidebar is drawer-only, bottom nav appears, main gets extra
              bottom padding so content isn't hidden under the nav
   Scope    : prefixed `.ac-shell-*` so it can live alongside legacy layout
══════════════════════════════════════════════════════════════════════════ */

body.ac-shell-active {
    background: var(--ac-sand);
    color: var(--ac-ink);
    font-family: var(--ac-font-body);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Sidebar is fixed, so pushing the main column over with margin-left is the
   simplest and most robust way to reserve space for it. (Using CSS grid
   doesn't work here: grid auto-placement puts the main column into the
   first track because a `position: fixed` sidebar is taken out of flow.) */
.ac-shell {
    min-height: 100vh;
    position: relative;
}

.ac-shell-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--ac-sidebar-w);
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.ac-sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--ac-sidebar-w);
    height: 100vh;
    background: var(--ac-cream);
    border-right: 1px solid var(--ac-hairline);
    display: flex;
    flex-direction: column;
    z-index: 50;
    transition: transform var(--ac-tr);
}

.ac-sidebar-brand {
    padding: var(--ac-sp-5) var(--ac-sp-5);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ac-font-display);
    font-size: var(--ac-fs-lg);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--ac-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--ac-hairline);
}
    .ac-sidebar-brand:hover { text-decoration: none; color: var(--ac-ink); }
    .ac-sidebar-brand-mark {
        width: 32px; height: 32px;
        border-radius: 9px;
        background: var(--ac-brand-600);
        color: #fff;
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 1rem; flex-shrink: 0;
    }

.ac-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--ac-sp-4) var(--ac-sp-3);
    scrollbar-width: thin;
}
    .ac-sidebar-nav::-webkit-scrollbar { width: 6px; }
    .ac-sidebar-nav::-webkit-scrollbar-thumb { background: var(--ac-hairline); border-radius: 3px; }

.ac-nav-section {
    padding: var(--ac-sp-4) var(--ac-sp-3) var(--ac-sp-2);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ac-muted);
}
    .ac-nav-section:first-child { padding-top: var(--ac-sp-2); }

.ac-nav-item {
    display: flex;
    align-items: center;
    gap: var(--ac-sp-3);
    padding: 10px var(--ac-sp-3);
    border-radius: var(--ac-r-md);
    font-size: var(--ac-fs-md);
    font-weight: 500;
    color: var(--ac-ink-soft);
    text-decoration: none;
    transition: background var(--ac-tr-fast), color var(--ac-tr-fast);
    min-height: 42px;
    position: relative;
}
    .ac-nav-item > i { font-size: 1.1rem; width: 22px; text-align: center; color: var(--ac-muted); transition: color var(--ac-tr-fast); flex-shrink: 0; }
    .ac-nav-item:hover { background: var(--ac-sand); color: var(--ac-ink); text-decoration: none; }
    .ac-nav-item:hover > i { color: var(--ac-ink); }
    .ac-nav-item.is-active {
        background: var(--ac-ink);
        color: #fff;
        font-weight: 600;
    }
        .ac-nav-item.is-active > i { color: #fff; }
        .ac-nav-item.is-active:hover { background: var(--ac-brand-800); color: #fff; }

    .ac-nav-badge {
        margin-left: auto;
        background: var(--ac-accent);
        color: #fff;
        font-size: var(--ac-fs-xs);
        font-weight: 700;
        padding: 2px 7px;
        border-radius: var(--ac-r-full);
        line-height: 1.4;
    }
    .ac-nav-item.is-active .ac-nav-badge { background: #fff; color: var(--ac-ink); }

.ac-sidebar-footer {
    padding: var(--ac-sp-3) var(--ac-sp-3);
    border-top: 1px solid var(--ac-hairline);
}
    .ac-sidebar-footer .ac-nav-item { color: var(--ac-ink-soft); }
    .ac-sidebar-footer .ac-nav-item > i { color: var(--ac-muted); }
    .ac-sidebar-footer .ac-nav-item.is-logout:hover { background: var(--ac-danger-bg); color: var(--ac-danger); }
        .ac-sidebar-footer .ac-nav-item.is-logout:hover > i { color: var(--ac-danger); }
    .ac-sidebar-footer form { margin: 0; }
    .ac-sidebar-footer button { width: 100%; border: none; background: transparent; font: inherit; text-align: left; cursor: pointer; }

/* Drawer scrim — shown only when sidebar drawer is open on tablet/mobile */
.ac-sidebar-scrim {
    position: fixed;
    inset: 0;
    background: rgba(28, 42, 36, 0.5);
    backdrop-filter: blur(4px);
    z-index: 45;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--ac-tr), visibility var(--ac-tr);
}
.ac-shell.is-drawer-open .ac-sidebar-scrim { opacity: 1; visibility: visible; }

/* ── Topbar ────────────────────────────────────────────────────────────── */
.ac-topbar {
    position: sticky;
    top: 0;
    height: var(--ac-topbar-h);
    background: rgba(253, 250, 242, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ac-hairline);
    display: flex;
    align-items: center;
    gap: var(--ac-sp-3);
    padding: 0 var(--ac-sp-5);
    z-index: 30;
}

.ac-topbar-menu {
    display: none;
    width: 40px; height: 40px;
    border: none;
    background: transparent;
    color: var(--ac-ink);
    border-radius: var(--ac-r-md);
    font-size: 20px;
    cursor: pointer;
    transition: background var(--ac-tr-fast);
}
    .ac-topbar-menu:hover { background: var(--ac-cream); }

.ac-topbar-brand {
    display: none;
    align-items: center;
    gap: 8px;
    font-family: var(--ac-font-display);
    font-weight: 700;
    font-size: var(--ac-fs-lg);
    color: var(--ac-ink);
    text-decoration: none;
}

.ac-topbar-spacer { flex: 1; }

.ac-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--ac-sp-2);
}

.ac-online-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    background: var(--ac-success-bg);
    color: var(--ac-success);
    border-radius: var(--ac-r-full);
    font-size: var(--ac-fs-xs);
    font-weight: 600;
    border: 1px solid #CDE7D6;
}
    .ac-online-pill::before {
        content: "";
        width: 7px; height: 7px;
        border-radius: 50%;
        background: var(--ac-success);
        animation: acPulse 1.8s ease-in-out infinite;
    }
@keyframes acPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
}

.ac-icon-btn {
    width: 40px; height: 40px;
    border: none;
    background: transparent;
    color: var(--ac-ink);
    border-radius: var(--ac-r-full);
    font-size: 18px;
    cursor: pointer;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ac-tr-fast);
}
    .ac-icon-btn:hover { background: var(--ac-cream); }
    .ac-icon-btn .ac-icon-dot {
        position: absolute;
        top: 7px; right: 8px;
        min-width: 18px; height: 18px;
        padding: 0 5px;
        border-radius: var(--ac-r-full);
        background: var(--ac-accent);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        display: inline-flex; align-items: center; justify-content: center;
        line-height: 1;
        border: 2px solid var(--ac-cream);
    }

.ac-user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--ac-hairline);
    border-radius: var(--ac-r-full);
    background: transparent;
    color: var(--ac-ink);
    cursor: pointer;
    transition: background var(--ac-tr-fast);
}
    .ac-user-chip:hover { background: var(--ac-cream); }
    .ac-user-chip .ac-avatar { width: 32px; height: 32px; font-size: 12px; }
    .ac-user-chip-label { font-size: var(--ac-fs-sm); font-weight: 600; display: none; }
    @media (min-width: 768px) {
        .ac-user-chip-label { display: inline; }
    }

/* ── Main content area ────────────────────────────────────────────────── */
.ac-page {
    flex: 1;
    padding: var(--ac-sp-7) var(--ac-sp-7) var(--ac-sp-10);
    max-width: 100%;
    overflow-x: hidden;
}

/* ── Bottom Navigation (mobile only) ──────────────────────────────────── */
.ac-bottomnav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--ac-bottomnav-h);
    background: rgba(253, 250, 242, 0.96);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--ac-hairline);
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.ac-bottomnav-inner {
    display: flex;
    align-items: stretch;
    height: var(--ac-bottomnav-h);
}

.ac-bottomnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--ac-muted);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: color var(--ac-tr-fast);
    padding-top: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
}
    .ac-bottomnav-item > i { font-size: 20px; line-height: 1; }
    .ac-bottomnav-item:hover { color: var(--ac-ink); text-decoration: none; }
    .ac-bottomnav-item.is-active { color: var(--ac-ink); }
        .ac-bottomnav-item.is-active::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 32px;
            height: 3px;
            background: var(--ac-ink);
            border-radius: 0 0 3px 3px;
        }

/* ── Public / Auth Shell (logged-out) ─────────────────────────────────── */
.ac-public-nav {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--ac-topbar-h);
    background: rgba(253, 250, 242, 0.9);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ac-hairline);
    display: flex;
    align-items: center;
}
.ac-public-nav-inner {
    width: 100%;
    max-width: var(--ac-page-max);
    margin: 0 auto;
    padding: 0 var(--ac-sp-5);
    display: flex;
    align-items: center;
    gap: var(--ac-sp-5);
}
.ac-public-links {
    display: flex;
    align-items: center;
    gap: var(--ac-sp-5);
    margin-left: auto;
}
    .ac-public-links > a { font-size: var(--ac-fs-md); font-weight: 500; color: var(--ac-ink-soft); text-decoration: none; transition: color var(--ac-tr-fast); }
    .ac-public-links > a:hover { color: var(--ac-ink); text-decoration: none; }

.ac-public-footer {
    margin-top: var(--ac-sp-12);
    padding: var(--ac-sp-10) 0 var(--ac-sp-8);
    border-top: 1px solid var(--ac-hairline);
    background: var(--ac-cream);
    color: var(--ac-ink-soft);
    font-size: var(--ac-fs-sm);
}

/* ── Responsive shell ─────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .ac-shell-main { margin-left: 0; }
    .ac-sidebar { transform: translateX(-100%); box-shadow: var(--ac-sh-xl); }
    .ac-shell.is-drawer-open .ac-sidebar { transform: none; }
    .ac-topbar-menu { display: inline-flex; align-items: center; justify-content: center; }
    .ac-topbar-brand { display: inline-flex; }
    .ac-online-pill { display: none; }
    .ac-public-links-desktop { display: none; }
}

@media (max-width: 640px) {
    .ac-page { padding: var(--ac-sp-5) var(--ac-sp-4) calc(var(--ac-bottomnav-h) + var(--ac-sp-5)); }
    .ac-bottomnav { display: block; }
    /* Hide sidebar footer (logout) on mobile — it's in the drawer instead, triggered by menu */
    .ac-topbar { padding: 0 var(--ac-sp-4); }
    .ac-public-nav-inner { padding: 0 var(--ac-sp-4); gap: var(--ac-sp-3); }
}
@media (min-width: 641px) {
    .ac-bottomnav { display: none; }
}