/* ==========================================================================
   Beauty360 — design system  ·  "Blush atelier"

   A boutique on a quiet morning: blush pages, a deep plum frame, rose gold for
   the one thing that matters on each screen. Headings and figures are set in
   Playfair Display; the interface in DM Sans. Corners are soft, borders are
   fine and warm, and the line-art vanity (components/beauty-art) appears where
   there is room to breathe — the sign-in page, the sidebar foot, empty screens.

   Shell      plum rail / blush canvas / white cards
   Type       Playfair Display (display, figures), DM Sans (interface),
              IBM Plex Mono (codes)
   Signature  the rose-gold hairline — on the active nav item, under every
              figure and every eyebrow

   THREE SHELLS, one markup:
     >=1200px  full sidebar, 258px, labels visible
     768–1199  icon rail, 76px, labels on hover
     <768px    off-canvas sheet + a bottom tab bar
   ========================================================================== */

:root {
    /* Plum — the frame. Deep enough to hold the rose gold, warm enough to sit with blush. */
    --obsidian: #3b2230;
    --obsidian-lift: #4a2c3d;
    --obsidian-line: rgba(255, 255, 255, .09);

    --ink: #2e1d26;
    --ink-70: #6b5560;
    --ink-45: #9a7a80;
    --ink-25: #cbb4b8;

    /* Rose gold — the only accent. */
    --accent: #c98b78;
    --accent-deep: #ad6e5b;
    --accent-soft: #f8e6e0;
    --accent-glow: rgba(201, 139, 120, .22);

    --bone: #fbf1ee;
    --surface: #ffffff;
    --surface-sunk: #fdf7f5;
    --line: #f1ddd6;
    --line-strong: #e6c9bf;

    /* State only. Muted on purpose so rose gold stays the loudest thing. */
    --mint: #4c8a70;
    --mint-soft: #e7f2ec;
    --rose: #b5485e;
    --rose-soft: #fbe8ec;
    --amber: #a57728;
    --amber-soft: #fbf0dc;
    --info: #5b6690;
    --info-soft: #edeef7;

    --radius-xs: 8px;
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* Tinted with ink, never black — a black shadow on a warm page reads grey. */
    --shadow-1: 0 1px 2px rgba(59, 34, 48, .04), 0 2px 8px rgba(59, 34, 48, .03);
    --shadow-2: 0 4px 12px rgba(59, 34, 48, .06), 0 18px 40px rgba(59, 34, 48, .08);
    --shadow-3: 0 10px 24px rgba(59, 34, 48, .09), 0 36px 70px rgba(59, 34, 48, .14);

    --ease: cubic-bezier(.2, .7, .3, 1);
    --ease-out: cubic-bezier(.16, 1, .3, 1);

    --sidebar-w: 258px;
    --rail-w: 76px;
    --header-h: 62px;
    --bottom-nav-h: 62px;

    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-ui: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

    /* Notched phones. Zero everywhere else. */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ------------------------------------------------------------------ base */

* { -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-ui);
    font-size: .89rem;
    line-height: 1.55;
    color: var(--ink);
    background: var(--bone);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overscroll-behavior-y: none;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.014em; }

.page-title {
    font-family: var(--font-display);
    font-size: clamp(1.32rem, 1.05rem + 1.1vw, 1.78rem);
    font-weight: 600;
    letter-spacing: -.028em;
    line-height: 1.12;
    margin: 0;
}

.eyebrow {
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-45);
}

.eyebrow::after {
    content: "";
    display: block;
    width: 18px;
    height: 1px;
    margin-top: .34rem;
    background: var(--accent);
}

/* Every figure is monospaced and tabular, so a column of money lines up on the
   decimal without a table cell doing the work. */
.num, .figure, .money,
td.num, th.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: -.01em;
}

td.num, th.num { text-align: right; }

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

.link-ink { color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.link-ink:hover, .link-ink:focus-visible { color: var(--ink); border-bottom-color: var(--accent); }

.text-muted { color: var(--ink-45) !important; }

:where(a, button, .icon-btn, .btn, [tabindex], input, select, textarea):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 2000;
    padding: .7rem 1.1rem;
    background: var(--obsidian);
    color: #fff;
    border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------ the brand */

.brand-lockup { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: inherit; }
.brand-mark { flex: 0 0 auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }

.brand-word {
    font-family: var(--font-display);
    font-size: 1.06rem;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--ink);
    white-space: nowrap;
}

.brand-word.is-inverse { color: #fff; }
.brand-degrees { color: var(--accent); }

.brand-sub {
    font-size: .69rem;
    color: var(--ink-45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .08rem;
}

.brand-sub.is-inverse { color: rgba(255, 255, 255, .5); }

/* ============================================================ THE SHELL */

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background: var(--obsidian);
    border-right: 1px solid var(--obsidian-line);
    padding-top: var(--safe-top);
    transition: transform .3s var(--ease-out), width .22s var(--ease);
}

/* A single ember bloom at the top. The rail is otherwise flat, which is what
   keeps it quiet enough to ignore while you work. */
.app-sidebar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 220px;
    background: radial-gradient(120% 100% at 0% 0%, rgba(201, 139, 120, .16), transparent 70%);
    pointer-events: none;
}

.app-sidebar .brand {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--header-h);
    padding: 0 1.1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--obsidian-line);
    flex: 0 0 auto;
}

.app-nav {
    position: relative;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .75rem .6rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .16) transparent;
}

.app-nav::-webkit-scrollbar { width: 5px; }
.app-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }

.nav-section {
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .34);
    padding: 1rem .75rem .4rem;
}

.app-nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 40px;
    padding: .5rem .75rem;
    border-radius: var(--radius-xs);
    color: rgba(255, 255, 255, .68);
    font-size: .845rem;
    font-weight: 450;
    text-decoration: none;
    transition: background .16s var(--ease), color .16s var(--ease);
}

.app-nav a i { font-size: 1.02rem; width: 1.2rem; flex: none; text-align: center; opacity: .82; }
.app-nav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-nav a:hover { background: var(--obsidian-lift); color: #fff; }

.app-nav a.active {
    background: linear-gradient(90deg, var(--accent-glow), rgba(201, 139, 120, .04));
    color: #fff;
    font-weight: 500;
}

/* The signature: a 2px ember mark, repeated as a 1px rule under every figure. */
.app-nav a.active::before {
    content: "";
    position: absolute;
    left: -.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
}

.app-nav a.active i { opacity: 1; color: var(--accent); }

.app-nav a .badge-count {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: .68rem;
    background: var(--accent);
    color: #fff;
    padding: .05rem .38rem;
    border-radius: var(--radius-pill);
}

.sidebar-foot {
    position: relative;
    flex: 0 0 auto;
    padding: .8rem 1.1rem calc(.8rem + var(--safe-bottom));
    border-top: 1px solid var(--obsidian-line);
    font-size: .72rem;
    color: rgba(255, 255, 255, .45);
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(59, 34, 48, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), visibility .25s;
}

body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }

.app-main {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .22s var(--ease);
}

/* ---------------------------------------------------------------- header */

.app-header {
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: .55rem;
    height: calc(var(--header-h) + var(--safe-top));
    padding: var(--safe-top) 1rem 0;
    background: rgba(251, 241, 238, .82);
    backdrop-filter: saturate(1.7) blur(12px);
    border-bottom: 1px solid var(--line);
}

.header-search {
    position: relative;
    flex: 1 1 380px;
    max-width: 420px;
}

.header-search i {
    position: absolute;
    left: .72rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-45);
    font-size: .88rem;
    pointer-events: none;
}

.header-search input {
    width: 100%;
    height: 38px;
    padding: 0 .9rem 0 2.1rem;
    font-size: .84rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease);
}

.header-search input::placeholder { color: var(--ink-25); }

.header-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--ink-70);
    cursor: pointer;
    transition: background .15s var(--ease), color .15s var(--ease);
}

.icon-btn:hover { background: rgba(46, 29, 38, .055); color: var(--ink); }

.icon-btn .dot {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bone);
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-pill);
    background: var(--obsidian);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.branch-switch {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    height: 38px;
    padding: 0 .8rem;
    font-size: .82rem;
    color: var(--ink-70);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s var(--ease), color .15s var(--ease);
}

.branch-switch:hover { border-color: var(--accent); color: var(--ink); }
.branch-switch i:first-child { color: var(--accent); }

/* --------------------------------------------------------------- content */

.app-content {
    flex: 1 1 auto;
    padding: 1.4rem 1.4rem 3rem;
    max-width: 1560px;
    width: 100%;
}

/* =========================================================== components */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1.15rem;
    background: transparent;
    border-bottom: 1px solid var(--line);
}

.card-header h2, .card-header h3 { font-size: .92rem; margin: 0; letter-spacing: -.01em; }
.card-body { padding: 1.15rem; }

/* A stat is read from across a room, so the figure takes the space and the
   label gets out of its way. */
.stat {
    display: block;
    height: 100%;
    padding: 1.05rem 1.15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    text-decoration: none;
    color: inherit;
    transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}

.stat:hover { color: inherit; box-shadow: var(--shadow-2); transform: translateY(-2px); }
.stat:hover .stat-value { color: var(--accent-deep); }

.stat-label {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-45);
}

.stat-value {
    display: inline-block;
    margin-top: .5rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.62rem;
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1.1;
    color: var(--ink);
    transition: color .2s var(--ease);
}

/* The hairline again — the same gesture as the active nav mark. */
.stat-value::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: .34rem;
    background: var(--accent);
}

.stat-meta { font-size: .75rem; color: var(--ink-45); margin-top: .5rem; }
.stat-meta .up { color: var(--mint); }
.stat-meta .down { color: var(--rose); }

.badge-status {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    padding: .16rem .5rem;
    font-size: .7rem;
    font-weight: 550;
    letter-spacing: .01em;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.badge-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.badge-status.success { background: var(--mint-soft); color: var(--mint); }
.badge-status.danger  { background: var(--rose-soft); color: var(--rose); }
.badge-status.warning { background: var(--amber-soft); color: var(--amber); }
.badge-status.info    { background: var(--info-soft); color: var(--info); }
.badge-status.muted   { background: #f5e7e3; color: var(--ink-45); }

/* --------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-height: 38px;
    padding: .45rem .95rem;
    font-size: .83rem;
    font-weight: 550;
    letter-spacing: -.005em;
    border-radius: var(--radius-pill);
    transition: background .15s var(--ease), border-color .15s var(--ease),
                box-shadow .15s var(--ease), transform .08s var(--ease);
}

.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 32px; padding: .28rem .7rem; font-size: .78rem; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 1px 2px rgba(173, 110, 91, .3);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fff;
}

.btn-brass, .btn-accent {
    background: var(--obsidian);
    border-color: var(--obsidian);
    color: #fff;
}

.btn-brass:hover, .btn-accent:hover { background: #4a2c3d; border-color: #4a2c3d; color: #fff; }

.btn-outline-secondary {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink-70);
}

.btn-outline-secondary:hover, .btn-outline-secondary:active {
    background: var(--surface-sunk);
    border-color: var(--ink-25);
    color: var(--ink);
}

.btn-danger { background: var(--rose); border-color: var(--rose); }
.btn-danger:hover { background: #86354a; border-color: #86354a; }

.btn-link-inline {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--accent-deep);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* ---------------------------------------------------------------- tables */

.table { margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .75rem .85rem; border-bottom-color: var(--line); }

.table thead th {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-45);
    background: var(--surface-sunk);
    border-bottom-color: var(--line);
    white-space: nowrap;
}

/* Warm, not grey — a neutral hover on a warm page looks like a rendering bug. */
.table-hover > tbody > tr:hover > * { background: #fdf4f1; }

/* ---------------------------------------------------------------- forms */

.form-label { font-size: .79rem; font-weight: 550; color: var(--ink-70); margin-bottom: .32rem; }
.form-text { font-size: .74rem; color: var(--ink-45); }

.form-control, .form-select {
    min-height: 40px;
    font-size: .86rem;
    color: var(--ink);
    background: var(--surface);
    border-color: var(--line-strong);
    border-radius: var(--radius-xs);
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}

.form-control::placeholder { color: var(--ink-25); }

.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-control.is-invalid, .form-select.is-invalid { border-color: var(--rose); }
.invalid-feedback { font-size: .75rem; color: var(--rose); }

.form-check-input { width: 1.05em; height: 1.05em; margin-top: .22em; border-color: var(--line-strong); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-check-label { font-size: .85rem; }

.input-group-text {
    background: var(--surface-sunk);
    border-color: var(--line-strong);
    color: var(--ink-45);
    font-size: .8rem;
}

/* --------------------------------------------------------------- alerts */

.alert {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: .85rem;
    padding: .8rem 1rem;
}

.alert-success { background: var(--mint-soft); border-color: #d3e3da; color: #2f5e4b; }
.alert-danger  { background: var(--rose-soft); border-color: #ecd2d8; color: #7e3142; }
.alert-warning { background: var(--amber-soft); border-color: #ebdcbb; color: #76561a; }
.alert-info    { background: var(--info-soft); border-color: #d8dde7; color: #3d4c68; }

/* ---------------------------------------------------------- empty & meter */

.empty-state { text-align: center; padding: 2.4rem 1.2rem; }
.empty-state i { font-size: 1.9rem; color: var(--accent); opacity: .5; }
.empty-state h3 { font-size: .95rem; margin: .7rem 0 .3rem; }
.empty-state p { font-size: .83rem; color: var(--ink-45); max-width: 42ch; margin: 0 auto 1rem; }

.meter { height: 6px; background: var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.meter.over > span { background: var(--rose); }

/* --------------------------------------------------------------- wizard */

.wizard-steps ol { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.wizard-steps li { flex: 1 1 0; min-width: 0; }

.wizard-steps li > a, .wizard-steps li > span {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .8rem;
    border-top: 2px solid var(--line);
    color: var(--ink-45);
    text-decoration: none;
    transition: border-color .15s var(--ease), color .15s var(--ease);
}

.wizard-steps li > a:hover { color: var(--ink); border-top-color: var(--ink-25); }
.wizard-steps li.current > a, .wizard-steps li.current > span { border-top-color: var(--accent); color: var(--ink); }
.wizard-steps li.done > a, .wizard-steps li.done > span { color: var(--ink); }

.wizard-mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    font-family: var(--font-mono);
    font-size: .76rem;
}

.wizard-steps li.current .wizard-mark {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 2px 8px var(--accent-glow);
}

.wizard-steps li.done:not(.current) .wizard-mark { background: var(--mint); border-color: var(--mint); color: #fff; }

.wizard-text { min-width: 0; }
.wizard-title { display: block; font-size: .83rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wizard-blurb { display: block; font-size: .71rem; color: var(--ink-45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ------------------------------------------------------------- settings */

.settings-nav { display: flex; flex-direction: column; padding: .4rem; }

.settings-nav a {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 42px;
    padding: .55rem .75rem;
    border-radius: var(--radius-xs);
    border-left: 2px solid transparent;
    color: var(--ink-70);
    text-decoration: none;
    font-size: .86rem;
    transition: background .14s var(--ease);
}

.settings-nav a:hover { background: var(--surface-sunk); color: var(--ink); }
.settings-nav a.active { background: var(--accent-soft); color: var(--ink); font-weight: 500; border-left-color: var(--accent); }

.settings-list > .setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 1.5rem;
    align-items: start;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--line);
}

.settings-list > .setting-row:last-child { border-bottom: 0; }
.setting-row.is-locked { background: var(--surface-sunk); }
.setting-label label { display: block; font-size: .88rem; font-weight: 500; margin-bottom: .15rem; }
.setting-help { display: block; font-size: .77rem; color: var(--ink-45); margin-top: .2rem; }
.setting-control { justify-self: end; width: 100%; }

/* -------------------------------------------------------- impersonation */

.impersonation-bar {
    position: sticky;
    top: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: calc(.5rem + var(--safe-top)) 1rem .5rem;
    background: var(--rose);
    color: #fff;
    font-size: .81rem;
}

.impersonation-bar .btn {
    --bs-btn-color: var(--rose);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--rose);
    --bs-btn-hover-bg: #f3e4e7;
    --bs-btn-hover-border-color: #f3e4e7;
    min-height: 30px;
    padding: .12rem .7rem;
    font-size: .75rem;
}

body.is-impersonating .app-sidebar { border-right-color: var(--rose); }

/* --------------------------------------------------------- auth screen */

.auth-shell { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }

.auth-aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 3rem;
    background: var(--obsidian);
    color: #f6e4ea;
    overflow: hidden;
}

/* The ring again, oversized and bled off the corner — the same idea as the
   logo rather than a second decorative language. */
.auth-aside::after {
    content: "";
    position: absolute;
    right: -18%;
    bottom: -28%;
    width: 64%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid rgba(201, 139, 120, .3);
    background: radial-gradient(circle at 50% 50%, rgba(201, 139, 120, .14), transparent 62%);
}

.auth-quote {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
    font-weight: 500;
    line-height: 1.24;
    letter-spacing: -.028em;
    max-width: 22ch;
}

.auth-quote em { font-style: italic; color: var(--accent); }

.auth-panel { display: grid; place-items: center; padding: 2rem; background: var(--surface); }
.auth-card { width: 100%; max-width: 372px; }

/* ==================================================== BOTTOM TAB BAR */
/* Phones only. The four things a receptionist touches during a shift, plus a
   sheet for everything else — reachable with a thumb, unlike a menu button in
   the top-left corner of a 6.7-inch screen. */

.bottom-nav {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: saturate(1.8) blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: var(--safe-bottom);
}

.bottom-nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
.bottom-nav li { flex: 1 1 0; min-width: 0; }

.bottom-nav a, .bottom-nav button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    width: 100%;
    min-height: var(--bottom-nav-h);
    padding: .35rem .2rem;
    background: none;
    border: 0;
    color: var(--ink-45);
    font-size: .64rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .15s var(--ease);
}

.bottom-nav i { font-size: 1.2rem; }
.bottom-nav a span, .bottom-nav button span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bottom-nav a.active { color: var(--accent-deep); }

/* The ember mark once more, this time above rather than beside. */
.bottom-nav a.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    background: var(--accent);
    border-radius: 0 0 3px 3px;
}

/* ======================================================== RESPONSIVE */

/* --- Tablet: the rail. Labels collapse, content gets 180px back. --------- */
@media (min-width: 768px) and (max-width: 1199.98px) {
    :root { --sidebar-w: var(--rail-w); }

    .app-sidebar { width: var(--rail-w); }
    .app-sidebar .brand { justify-content: center; padding: 0; }
    .app-sidebar .brand-text { display: none; }

    .app-nav { padding: .75rem .5rem; }
    .nav-section { display: none; }

    .app-nav a {
        justify-content: center;
        min-height: 46px;
        padding: .5rem;
        gap: 0;
    }

    .app-nav a span {
        /* Label as a tooltip on hover rather than nothing at all — an icon-only
           rail is unusable until you have learnt it. */
        position: absolute;
        left: calc(100% + .55rem);
        top: 50%;
        transform: translateY(-50%);
        padding: .3rem .6rem;
        background: var(--obsidian-lift);
        color: #fff;
        font-size: .78rem;
        border-radius: var(--radius-xs);
        box-shadow: var(--shadow-2);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .14s var(--ease);
        z-index: 5;
    }

    .app-nav a:hover span, .app-nav a:focus-visible span { opacity: 1; visibility: visible; }
    .app-nav a i { font-size: 1.12rem; width: auto; }
    .app-nav a.active::before { left: -.5rem; }

    .sidebar-foot { display: none; }
    .app-content { padding: 1.15rem 1.15rem 3rem; }
    .settings-list > .setting-row { grid-template-columns: minmax(0, 1fr) 190px; gap: 1rem; }
}

/* --- Phone: sheet + bottom bar ------------------------------------------ */
@media (max-width: 767.98px) {
    .app-sidebar {
        width: min(84vw, 300px);
        transform: translateX(-100%);
        box-shadow: var(--shadow-3);
    }

    body.sidebar-open .app-sidebar { transform: translateX(0); }
    body.sidebar-open { overflow: hidden; }

    .app-main { margin-left: 0; }

    /* Room for the bar, plus the home indicator on a notched phone. */
    .app-content {
        padding: 1rem .85rem calc(1.6rem + var(--bottom-nav-h) + var(--safe-bottom));
    }

    .app-header { gap: .35rem; padding-inline: .75rem; }

    /* Search is one tap away rather than eating the header. */
    .header-search {
        position: fixed;
        inset: calc(var(--header-h) + var(--safe-top)) 0 auto 0;
        max-width: none;
        padding: .6rem .85rem;
        background: var(--surface);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-2);
        display: none;
        z-index: 1025;
    }

    .header-search.is-open { display: block; }

    .bottom-nav { display: block; }

    .page-title { font-size: 1.28rem; }
    .app-content > .d-flex.flex-wrap { gap: .75rem !important; }

    .card { border-radius: var(--radius-sm); }
    .card-body, .card-header { padding: .9rem; }
    .stat { padding: .85rem .9rem; }
    .stat-value { font-size: 1.35rem; }

    .settings-list > .setting-row { grid-template-columns: 1fr; gap: .55rem; padding: .9rem; }
    .setting-control { justify-self: stretch; }

    /* Only the current wizard step keeps its label, so five fit across. */
    .wizard-steps li:not(.current) .wizard-text { display: none; }
    .wizard-steps li:not(.current) { flex: 0 0 auto; }
    .wizard-steps li.current { flex: 1 1 auto; }

    .auth-shell { grid-template-columns: 1fr; }
    .auth-aside { display: none; }
    .auth-panel { padding: 1.5rem 1.1rem; align-items: start; padding-top: 3rem; }

    /* Tap targets. 16px on inputs stops iOS zooming the page on focus. */
    .btn { min-height: 44px; padding-inline: 1.05rem; }
    .btn-sm { min-height: 38px; }
    .icon-btn { width: 42px; height: 42px; }
    .form-control, .form-select { min-height: 46px; font-size: 16px; }
    .form-check-input { width: 1.2em; height: 1.2em; }

    /* On a phone the bar clears the tab bar and the buttons go full width. */
    form > .d-flex.justify-content-end,
    form > .d-flex.justify-content-between {
        bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
        margin-inline: -.85rem;
        padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom, 0px));
    }

    form > .d-flex.justify-content-end .btn,
    form > .d-flex.justify-content-between .btn { flex: 1 1 0; }
}

/* --- Tables become cards on a phone -------------------------------------- */
@media (max-width: 767.98px) {
    .table-responsive { border: 0; }

    .table-responsive-card thead { display: none; }

    .table-responsive-card tbody tr {
        display: block;
        margin: 0 0 .6rem;
        padding: .8rem .9rem;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-1);
    }

    .table-responsive-card tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        padding: .28rem 0;
        border: 0;
        text-align: right;
    }

    .table-responsive-card tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: .7rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--ink-45);
        text-align: left;
    }

    /* The first cell is the row's identity: full width, no label. */
    .table-responsive-card tbody td:first-child {
        display: block;
        text-align: left;
        padding-bottom: .45rem;
        margin-bottom: .35rem;
        border-bottom: 1px solid var(--line);
    }

    .table-responsive-card tbody td:first-child::before { display: none; }
    .table-responsive-card tbody td:empty { display: none; }

    /* DataTables' own furniture, made thumb-sized. */
    .dataTables_wrapper .dataTables_filter input { width: 100%; min-height: 44px; }
    .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 40px; padding: .4rem .6rem; }
}

@media (max-width: 400px) {
    .bottom-nav a span, .bottom-nav button span { font-size: .6rem; }
    .app-content { padding-inline: .7rem; }
}

/* --- Wide screens -------------------------------------------------------- */
@media (min-width: 1600px) {
    .app-content { padding-inline: 2rem; }
}

/* ---------------------------------------------------------- preferences */

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

    .stat:hover, .btn:active { transform: none; }
}

@media print {
    .app-sidebar, .app-header, .bottom-nav, .sidebar-backdrop,
    .impersonation-bar, .skip-link, .btn, .icon-btn { display: none !important; }

    .app-main { margin-left: 0; }
    .app-content { padding: 0; }
    .card { border: 0; box-shadow: none; }
    body { background: #fff; }
}

/* ---------------------------------------------------------------- diary */

.legend-swatch {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    margin-right: .25rem;
    vertical-align: baseline;
}

.agenda-row {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: background .14s var(--ease);
}

.agenda-row:last-child { border-bottom: 0; }
.agenda-row:hover { background: var(--surface-sunk); color: inherit; }

.agenda-time { font-size: 1rem; font-weight: 500; white-space: nowrap; }
.agenda-meridiem { font-size: .68rem; color: var(--ink-45); }

.agenda-body { min-width: 0; }
.agenda-name { display: block; font-weight: 550; font-size: .9rem; }
.agenda-detail { display: block; font-size: .78rem; color: var(--ink-45); }

.agenda-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
    font-size: .82rem;
    white-space: nowrap;
}

/* Status is carried by weight and fill, not by a fifth hue. */
.fc .status-cancelled, .fc .status-no_show { opacity: .45; text-decoration: line-through; }
.fc .status-completed { opacity: .72; }
.fc .fc-event { border-radius: 6px; font-size: .74rem; padding: 1px 3px; }
.fc .fc-timegrid-slot { height: 1.9em; }
.fc .fc-col-header-cell-cushion { font-size: .8rem; font-weight: 600; padding: .5rem .25rem; }
.fc-theme-standard td, .fc-theme-standard th { border-color: var(--line); }
.fc .fc-timegrid-now-indicator-line { border-color: var(--accent); }

@media (max-width: 767.98px) {
    .agenda-row { grid-template-columns: 58px minmax(0, 1fr); padding: .8rem .9rem; }
    .agenda-side { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: .6rem; }
}

.booking-line { padding: .85rem 1.15rem; border-bottom: 1px solid var(--line); }
.booking-line:last-child { border-bottom: 0; }
.booking-line .form-label { font-size: .74rem; margin-bottom: .2rem; }

/* ------------------------------------------------------- form action bar */
/*
   Save is sticky on every screen size, not only on a phone.

   A long form pushes its buttons below the fold on a laptop just as readily,
   and hunting for the way to save is the same failure whatever the viewport.
   Anchoring it also means the button is in the same place on every form in the
   product, which is worth more than the few pixels it costs.
*/

form > .d-flex.justify-content-end,
form > .d-flex.justify-content-between {
    position: sticky;
    bottom: 0;
    z-index: 12;
    margin: 1.25rem -1.4rem -3rem;
    padding: .85rem 1.4rem;
    background: rgba(251, 241, 238, .93);
    backdrop-filter: saturate(1.6) blur(10px);
    border-top: 1px solid var(--line);
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    form > .d-flex.justify-content-end,
    form > .d-flex.justify-content-between { margin-inline: -1.15rem; padding-inline: 1.15rem; }
}

@media print {
    form > .d-flex.justify-content-end,
    form > .d-flex.justify-content-between { display: none; }
}

/* ------------------------------------------------------- cash denominations */

.denomination-row {
    display: grid;
    grid-template-columns: 52px 1fr 80px;
    gap: .5rem;
    align-items: center;
    margin-bottom: .3rem;
}

.denomination-value { font-size: .82rem; color: var(--ink-45); margin: 0; }
.denomination-total { font-size: .8rem; text-align: right; }

/* ==========================================================================
   BLUSH ATELIER — component refinements
   Kept together at the end so the theme reads as one decision.
   ========================================================================== */

body { font-size: .875rem; }

.page-title {
    font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1.12;
}

.eyebrow { font-size: .66rem; letter-spacing: .2em; color: var(--accent-deep); }
.eyebrow::after { width: 26px; height: 2px; border-radius: 2px; margin-top: .4rem; }

.stat-value, .figure, .money {
    font-family: var(--font-display);
    font-variant-numeric: lining-nums tabular-nums;
    letter-spacing: 0;
}

/* ------------------------------------------------------------ the brand */

.brand-word {
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.brand-word.is-inverse { color: #f6e4ea; }
.brand-degrees { color: var(--accent); }

/* The gold logo: the wordmark in text is set in the logo's gold and case. */
.brand-mark { flex: 0 0 auto; display: block; object-fit: contain; }
.brand-logo { display: block; max-width: 100%; height: auto; }
.brand-word.is-inverse {
    text-transform: none;
    letter-spacing: .02em;
    background: linear-gradient(180deg, #f8e3a0 0%, #e2b85a 55%, #c8953c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.brand-word.is-inverse .brand-degrees { color: inherit; }

/* ------------------------------------------------------------ the frame */

.app-sidebar::before {
    height: 280px;
    background: radial-gradient(110% 90% at 0% 0%, rgba(201, 139, 120, .22), transparent 70%);
}

.nav-section { color: rgba(246, 228, 234, .42); letter-spacing: .18em; }

.app-nav a { border-radius: 12px; color: rgba(246, 228, 234, .74); font-weight: 500; }
.app-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.app-nav a.active {
    background: linear-gradient(90deg, rgba(201, 139, 120, .26), rgba(201, 139, 120, .06));
    color: #fff;
    font-weight: 600;
}

.app-nav a.active::before { width: 3px; height: 22px; border-radius: 0 3px 3px 0; }

.sidebar-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; color: rgba(246, 228, 234, .5); }
.sidebar-foot .beauty-art-sprig { width: 46px; height: 46px; color: var(--accent); opacity: .7; flex: none; }

.app-header { background: rgba(251, 241, 238, .86); }

.avatar { background: var(--accent); color: #fff; }

/* --------------------------------------------------------------- surfaces */

.card, .stat { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow-1); }

.card-header h2, .card-header h3 {
    font-family: var(--font-display);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0;
}

.stat { padding: 1.1rem 1.2rem; }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.stat-label { letter-spacing: .14em; }

.stat-value { font-size: 1.85rem; font-weight: 600; line-height: 1.05; }
.stat-value::after { width: 26px; height: 2px; border-radius: 2px; margin-top: .45rem; }

.badge-status { font-weight: 600; }

/* ---------------------------------------------------------------- buttons */

/* Rose-gold pills, as in a boutique: the primary action is the warm one. */
.btn { border-radius: var(--radius-pill); font-weight: 600; letter-spacing: .01em; padding: .5rem 1.15rem; }

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(201, 139, 120, .32);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: #fff;
}

.btn-brass, .btn-accent { background: var(--obsidian); border-color: var(--obsidian); color: #fff; }
.btn-brass:hover, .btn-accent:hover { background: var(--obsidian-lift); border-color: var(--obsidian-lift); color: #fff; }

.btn-outline-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink-70); }
.btn-outline-secondary:hover, .btn-outline-secondary:active { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }

/* ----------------------------------------------------------------- tables */

.table thead th { background: var(--surface-sunk); letter-spacing: .12em; }
.table-hover > tbody > tr:hover > * { background: #fdf4f1; }

/* ------------------------------------------------------------------ forms */

.form-control, .form-select { border-radius: var(--radius-sm); }

.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }

/* ----------------------------------------------------------- empty screens */

.empty-state .beauty-art-sprig { width: 64px; height: 64px; color: var(--accent); margin-bottom: .5rem; }

/* ------------------------------------------------------------ sign-in page */

.auth-aside { background: var(--obsidian); color: #f6e4ea; }
.auth-aside::after { display: none; }

.auth-quote {
    font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.01em;
}

/* In the flow, under the quote: it can never sit on the words at any height. */
.auth-aside .beauty-art-scene {
    position: relative;
    align-self: flex-end;
    width: min(82%, 500px);
    height: auto;
    margin: 1.5rem -1rem 1rem 0;
    color: var(--accent);
    opacity: .9;
    pointer-events: none;
}

.auth-panel { background: var(--bone); }

.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 2rem 1.9rem; box-shadow: var(--shadow-2); max-width: 400px; }

@media (max-width: 767.98px) {
    .auth-card { padding: 1.5rem 1.25rem; box-shadow: none; }
}

/* Phones: button rows wrap instead of pushing the page sideways. */
@media (max-width: 575.98px) {
    .btn { padding-left: .9rem; padding-right: .9rem; }
    .d-flex:has(> .btn), .d-flex:has(> form > .btn) { flex-wrap: wrap; }
}

/* The form action bar's phone margins must follow its base rule (above), or the
   base -1.4rem wins and the bar sticks out past the screen. Matches .app-content. */
@media (max-width: 767.98px) {
    form > .d-flex.justify-content-end,
    form > .d-flex.justify-content-between { margin-inline: -.85rem; padding-inline: .85rem; }
}

@media (max-width: 400px) {
    form > .d-flex.justify-content-end,
    form > .d-flex.justify-content-between { margin-inline: -.7rem; padding-inline: .7rem; }
}

/* Half-width stat cards on a phone: figures a size down, and a word value
   (a plan name) shrinks to its card instead of running past the edge. */
/* The figure scales with its own card (container query units), so a word
   such as a plan name shrinks to fit a half-width phone card instead of
   breaking mid-word. Breaking stays only as a last resort. */
.stat { container-type: inline-size; }
.stat-value { max-width: 100%; font-size: clamp(1.15rem, 15.5cqi, 1.85rem); overflow-wrap: break-word; }

/* "Beauty Eclat 360" is longer than the old wordmark: tighter in the sidebar so
   it fits the 258px rail with its subtitle; full size on the sign-in page. */
.app-sidebar .brand-word { font-size: 1.08rem; letter-spacing: .02em; }

/* ------------------------------------------------------ searchable dropdowns */
/* Select2 (bootstrap-5 theme) dressed to match the form controls: same height,
   corners, border and rose-gold focus, with the search box inside the list. */

.select2-container--bootstrap-5 .select2-selection {
    min-height: 40px;
    font-size: .86rem;
    color: var(--ink);
    background-color: var(--surface);
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__placeholder { color: var(--ink-25); }

.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
    border-color: var(--line-strong);
    border-radius: var(--radius-xs);
    font-size: .86rem;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option { font-size: .86rem; color: var(--ink); }

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--accent-soft);
    color: var(--ink);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--accent);
    color: #fff;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--disabled { color: var(--ink-25); }

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    background: var(--accent-soft);
    border-color: var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink);
}

.select2-container--bootstrap-5 .select2-selection.select2--small { min-height: 32px; font-size: .8rem; }

.is-invalid + .select2-container--bootstrap-5 .select2-selection { border-color: var(--rose); }

/* Phones: a 16px search box stops iOS zooming the page when it opens. */
@media (max-width: 767.98px) {
    .select2-container--bootstrap-5 .select2-selection { min-height: 46px; }
    .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field { font-size: 16px; min-height: 40px; }
}

/* Select2 hides the original <select> with position:absolute. Inside a table
   that scrolls sideways, an off-screen column's hidden select would otherwise
   escape the scroll area and widen the whole page on a phone. */
.table-responsive { position: relative; }

/* ------------------------------------------------------------------ Ask AI */

.assistant-thread { display: flex; flex-direction: column; gap: 1.1rem; }
.assistant-turn { display: flex; flex-direction: column; gap: .5rem; }
.assistant-question { display: flex; justify-content: flex-end; }
.assistant-question span {
    max-width: min(80%, 640px);
    padding: .6rem .95rem;
    background: var(--obsidian);
    color: #fff;
    border-radius: var(--radius) var(--radius) 4px var(--radius);
    font-size: .88rem;
    overflow-wrap: anywhere;
}
.assistant-answer { max-width: min(100%, 820px); border-top-left-radius: 4px; }
.assistant-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 0 0 .4rem; }
.assistant-text { font-size: .9rem; line-height: 1.6; }
.assistant-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .5rem 1.25rem; margin: .35rem 0 0; }
.assistant-lines div { border-bottom: 1px solid var(--line); padding: .3rem 0; }
.assistant-lines dt { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-45); }
.assistant-lines dd { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.assistant-composer { position: sticky; bottom: 1rem; z-index: 5; box-shadow: var(--shadow-2); }
.assistant-composer textarea { resize: vertical; min-height: 46px; }
@media (max-width: 767.98px) {
    .assistant-composer { bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + .5rem); }
    .assistant-question span { max-width: 92%; }
}

/* ---------------------------------------------------------------- Team chat & support */
.chat-layout { display: grid; grid-template-columns: minmax(250px, 320px) 1fr; gap: 1rem; height: calc(100vh - 210px); min-height: 460px; }
.chat-list { overflow-y: auto; padding: .35rem; }
.chat-list-item { display: flex; gap: .65rem; align-items: center; padding: .6rem .65rem; border-radius: var(--radius); color: var(--ink); text-decoration: none; }
.chat-list-item:hover { background: var(--accent-soft); }
.chat-list-item.active { background: #f5e4de; }
.chat-avatar { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 600; text-transform: uppercase; }
.chat-avatar.group { background: var(--obsidian); }
.chat-list-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.chat-list-title { font-weight: 600; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-preview { font-size: .76rem; color: var(--ink-45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; font-size: .7rem; color: var(--ink-45); }
.chat-list-meta .badge-count, .chat-list .badge-count { font-family: var(--font-mono); font-size: .68rem; background: var(--accent); color: #fff; padding: .05rem .38rem; border-radius: var(--radius-pill); }
.chat-thread { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.chat-thread-head { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.chat-thread-title { font-size: 1rem; margin: 0; }
.chat-messages { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; background: #fdf8f6; }
.support-messages { max-height: 62vh; min-height: 220px; }
.chat-message { display: flex; }
.chat-message.mine { justify-content: flex-end; }
.chat-bubble { max-width: min(78%, 560px); background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: .5rem .75rem; box-shadow: 0 1px 2px rgba(59,34,48,.05); }
.chat-message.mine .chat-bubble { background: #f3dfd8; border-color: #ecd0c6; border-radius: 14px 14px 4px 14px; }
.chat-bubble.from-support { border-left: 3px solid var(--info); }
.chat-who { font-size: .72rem; font-weight: 600; color: var(--accent-deep); margin-bottom: .1rem; }
.chat-text { font-size: .88rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-time { font-size: .66rem; color: var(--ink-45); text-align: right; margin-top: .15rem; }
.chat-notice { align-self: center; font-size: .72rem; color: var(--ink-45); background: #f5e7e3; padding: .15rem .6rem; border-radius: var(--radius-pill); text-align: center; }
.chat-empty { align-self: center; margin: auto; font-size: .85rem; }
.chat-composer { display: flex; gap: .5rem; align-items: flex-end; padding: .75rem; border-top: 1px solid var(--line); background: #fff; }
.chat-composer textarea { resize: none; max-height: 9rem; }
.chat-placeholder { margin: auto; padding: 2rem; }
@media (max-width: 767.98px) {
    .chat-layout { grid-template-columns: 1fr; height: calc(100dvh - 330px); min-height: 380px; }
    .chat-page-head { display: none; }
    .chat-layout.has-open { height: calc(100dvh - 170px); }
    .chat-layout.has-open .chat-list { display: none; }
    .chat-layout:not(.has-open) .chat-thread { display: none; }
}