/* ============================================================
   LIQUID GLASS - MyDesign Dashboard theme layer
   Loads AFTER styles.css and re-skins the dashboard to match
   unveildesign.com: liquified orange/gray metal background,
   dark frosted holographic glass, pill geometry, island nav.
   ============================================================ */

/* ── Tokens v2 ─────────────────────────────────────────────── */
:root {
    --ink: #1A1A1A;
    --ink-2: #2B2B2B;
    --brand: #ED6C43;
    --brand-hot: #F17B56;

    /* Frosted material: heavy blur and strong grain do the work, the art
       behind diffuses into soft color washes. Borders are uniform on every
       side so panes sit flat: never tilted, never raised over a neighbor. */
    --glass-bg: linear-gradient(165deg, rgba(19,16,14,0.74), rgba(11,9,8,0.68));
    --glass-bg-strong: linear-gradient(165deg, rgba(19,16,14,0.74), rgba(11,9,8,0.68));
    /* The neutral lift that makes frost read as frost (the updates-page
       tone Vale approved): layered over --glass-bg on every pane */
    --glass-lift: linear-gradient(0deg, rgba(255,255,255,0.035), rgba(255,255,255,0.035));
    --glass-border: rgba(255,255,255,0.09);
    --glass-border-top: rgba(255,255,255,0.09);
    --glass-blur: 72px;
    --glass-blur-strong: 72px;
    --panel-pad: 1.4rem;
    --pane-gap: 6px;

    /* Subtext must read over the orange-black art: warm off-whites, not gray */
    --color-text-secondary: #EAE3DC;
    --color-text-muted: rgba(234,227,220,0.62);

    --radius: 18px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    --island-h: 66px;
    /* Every page surface fills this height so each reads as one even 16:9
       rectangle below the island, with matching margins all the way around. */
    --page-min-h: calc(100vh - var(--island-h) - 80px);
    --ease-spring: cubic-bezier(0.34, 1.3, 0.34, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Legacy cards inherit the island's tone: anything styled by the old
       stylesheet's card token lands dark, never washed out by the silk */
    --color-bg-card: rgba(15,15,15,0.86);
    --color-bg-hover: rgba(255,255,255,0.06);
    --color-border: rgba(255,255,255,0.09);

    interpolate-size: allow-keywords; /* enables width morph to fit-content in Chromium */
}

/* Fine holographic grain, generated, no asset needed */
:root {
    --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
}

/* ── The liquified background stack ────────────────────────── */
/* Sharp by design. Readability comes from the glass, not from
   blurring the artwork. */
.liquid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--ink);
    pointer-events: none;
}
.liquid-bg-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    will-change: transform;
}
/* Orange is the base, deepened toward molten metal; gray multiplies dark
   swirl structure into it. No screen blending: nothing washes to white. */
/* One image, legible: the orange liquify carries its own dark regions.
   Compositing a second swirl over it (the old gray multiply) mushed both
   structures into what read as blur. */
.liquid-bg-orange {
    background-image: url('../assets/backgrounds/liquify-silk.png');
    filter: saturate(1.05) contrast(1.03) url(#liquid-sharpen);
    animation: liquidDriftB 110s ease-in-out infinite alternate;
}
.liquid-bg-gray { display: none; }
/* Film grain over the art: high-frequency detail the eye reads as focus,
   the same finish the website's hero has */
.liquid-bg-grain {
    position: absolute;
    inset: 0;
    background-image: var(--noise);
    background-size: 110px 110px;
    opacity: 0.085;
    mix-blend-mode: overlay;
}
.liquid-bg-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(130% 100% at 50% 0%, transparent 55%, rgba(8,8,8,0.3) 100%);
}
/* Fit-to-screen: no oversize, no panning. The drift is a slow breath
   (scale only), so the image always exactly covers the viewport. */
@keyframes liquidDriftA {
    from { transform: scale(1); }
    to   { transform: scale(1.04); }
}
@keyframes liquidDriftB {
    from { transform: scale(1); }
    to   { transform: scale(1.045); }
}

body {
    background: var(--ink);
}
.dashboard-container,
.login-container {
    position: relative;
    z-index: 1;
    background: transparent;
}
.main-content,
.page-content,
.page {
    background: transparent;
}

/* ── Glass material ────────────────────────────────────────── */
.glass-panel,
.glass-card,
.form-card,
.ga4-metric-card, .ga4-chart-card,
.plan-card, .contract-card, .support-hours-card,
.other-services, .payment-history, .billing-actions,
.plan-features-bar {
    position: relative;
    background: var(--glass-lift), var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    border-top-color: var(--glass-border-top);
    border-radius: var(--radius);
    box-shadow: 0 2px 14px rgba(0,0,0,0.22);
}

/* Frost grain: the pixelated, holographic finish on every pane */
.glass-panel::before,
.glass-card::before,
.form-card::before,
.ga4-metric-card::before, .ga4-chart-card::before,
.plan-card::before, .contract-card::before, .support-hours-card::before,
.other-services::before, .payment-history::before, .billing-actions::before,
.plan-features-bar::before,
.topnav-inner::before,
.nav-drawer::before,
.login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--noise);
    background-size: 140px 140px;
    opacity: 0.17;
    pointer-events: none;
}

/* No sheen, no specular wash: lighting on the frost is dead even. A
   directional gradient reads as a bright line and tilts the pane. */

/* Tiles are static surfaces: no hover lift, no hover motion of any kind */
.glass-panel:hover, .glass-card:hover, .form-card:hover,
.plan-card:hover, .contract-card:hover, .support-hours-card:hover,
.other-services:hover, .payment-history:hover, .billing-actions:hover,
.plan-features-bar:hover {
    transform: none !important;
}

.glass-strong {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
}

/* ── Full-bleed layout: panels flow with the screen ────────── */
.main-content {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: calc(var(--island-h) + 30px) clamp(12px, 1.6vw, 24px) 40px;
}
.page-content,
.page {
    max-width: none;
}

/* Tight gutters: panes sit a few pixels apart, tiles of one surface */
.billing-top-row,
.updates-timeline,
.form-split-layout,
.ga4-bottom-row {
    gap: var(--pane-gap);
}
.billing-top-row,
.plan-features-bar {
    margin-bottom: var(--pane-gap);
}
/* ── Subviews: one active pane per section, switched by the island ──
   THE FROST SURFACE SYSTEM: the subview itself is the page's single
   sheet of frosted glass; everything inside it is a flat inner fill.
   One big blur diffuses the art evenly (the approved updates-page look),
   and inner cards can never lose their blur to an animated ancestor
   becoming their backdrop root (the analytics zero-diffusion bug). */
.subview { display: none; }
.subview.active {
    display: block;
    position: relative;
    background: var(--glass-lift), var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: 0 2px 14px rgba(0,0,0,0.22);
    padding: calc(var(--panel-pad) - 6px);
}
.subview.active::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--noise);
    background-size: 140px 140px;
    opacity: 0.17;
    pointer-events: none;
}

/* Inside a subview, the old pane classes become flat fills: no blur of
   their own, uniform tone everywhere, like the update entries */
.subview .glass-panel,
.subview .glass-card,
.subview .form-card,
.subview .ga4-metric-card, .subview .ga4-chart-card,
.subview .plan-card, .subview .contract-card, .subview .support-hours-card,
.subview .other-services, .subview .payment-history, .subview .billing-actions,
.subview .plan-features-bar {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: calc(var(--radius) - 6px);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.subview .glass-panel::before,
.subview .glass-card::before,
.subview .form-card::before,
.subview .ga4-metric-card::before, .subview .ga4-chart-card::before,
.subview .plan-card::before, .subview .contract-card::before, .subview .support-hours-card::before,
.subview .other-services::before, .subview .payment-history::before, .subview .billing-actions::before,
.subview .plan-features-bar::before {
    content: none;
}

/* Layout-only wrappers stay invisible inside the surface */
.subview .analytics-embed {
    background: none;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0;
}

/* page-updates has no subview wrappers (the island filters in place), so
   the timeline is its own frost surface, the original approved look */
#page-updates .updates-timeline {
    position: relative;
    background: var(--glass-lift), var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: 0 2px 14px rgba(0,0,0,0.22);
    padding: calc(var(--panel-pad) - 6px);
}
#page-updates .updates-timeline::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--noise);
    background-size: 140px 140px;
    opacity: 0.17;
    pointer-events: none;
}

/* Each page surface fills the 16:9 rectangle so no page floats as a small
   sheet over empty art (Analytics and Site Care set the bar). Updates is the
   exception: its timeline hugs its cards (see the polish pass below) so a
   filtered tab with two entries does not leave a half-empty sheet. */
#page-my-website .subview.active,
#page-billing .subview.active {
    min-height: var(--page-min-h);
}

.subview-placeholder { max-width: 560px; }

.updates-empty {
    padding: 28px 8px;
    text-align: center;
    color: var(--color-text-muted);
}

/* Date separators read clearly over the art */
.updates-month-divider span {
    color: var(--color-text-secondary);
    letter-spacing: 0.1em;
}
.updates-month-divider::before,
.updates-month-divider::after {
    background: rgba(255,255,255,0.18);
}

/* ── Website Updates: uniform inner cards on the subview surface ── */
.update-item {
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: calc(var(--radius) - 6px);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.update-item:hover {
    background: rgba(255,255,255,0.065);
    transform: none;
}

/* Type colors: Site Care is the bright-green health pulse, Features take
   the blue that used to be green */
.update-icon.maintenance { background: rgba(61,220,132,0.14); color: #3DDC84; }
.update-icon.feature { background: rgba(77,163,255,0.14); color: #4DA3FF; }
.update-icon.construction { background: var(--color-warning-bg); color: var(--color-warning); }

/* ── Analytics: the statistics pages sit on the pane rhythm ──────
   Slim stat cards; every row and card grid uses the 6px gutter; the
   sticky table header takes the frost tone so it does not flash white. */
.stats-page, .stats-cards, .stats-row { gap: var(--pane-gap); }
.ga4-metric-card { padding: 14px 20px; }
.ga4-metric-value { font-size: 1.5rem; }
/* z-index lives on the base rule in styles.css: the bar cells are
   position:relative with an absolute bar inside, so without a z-index
   the sticky header (also positioned) lost the paint order to rows that
   scrolled under it, and bars and numbers showed through the key. The
   frost is near-opaque so nothing ghosts through the header itself. */
.stats-table th { background: rgba(24,19,17,0.97); }
.stats-range { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }

/* ── Explainers: the tiny ? that says what the work bought you ── */
.explain-btn {
    appearance: none;
    flex: 0 0 auto;
    align-self: flex-start;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.05);
    color: var(--color-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.explain-btn:hover {
    color: var(--brand-hot);
    border-color: var(--brand);
    background: rgba(237,108,67,0.08);
}
.explain-pop {
    position: absolute;
    z-index: 1300;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(150%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 36px rgba(0,0,0,0.45);
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    line-height: 1.5;
    animation: surfaceUp 0.18s var(--ease-out) both;
}

/* ── Login card morphs into the island on successful sign-in ── */
.login-morph-ghost {
    position: fixed;
    z-index: 1200;
    background: var(--glass-lift), var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    pointer-events: none;
    transition:
        top 0.6s var(--ease-spring),
        left 0.6s var(--ease-spring),
        width 0.6s var(--ease-spring),
        height 0.6s var(--ease-spring),
        border-radius 0.6s var(--ease-spring),
        opacity 0.25s ease 0.5s;
}
.topnav.revealed-soft {
    transform: none;
    opacity: 1;
    animation: islandFadeIn 0.3s ease;
}
@keyframes islandFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Pill geometry: match the website's buttons ────────────── */
.btn,
.btn-primary,
.btn-secondary,
.assistant-quick-btn {
    border-radius: var(--radius-pill);
}
/* Flat buttons, like the website's: hover deepens the color, press dips.
   No glow anywhere; glow reads cheap against the frost. */
.btn,
.btn-primary,
.btn-secondary,
.login-card .btn-primary {
    box-shadow: none;
}
.btn-primary {
    background: var(--brand);
    border: none;
}
.btn-primary:hover,
.login-card .btn-primary:hover {
    background: var(--brand-hot);
    box-shadow: none;
    transform: none;
}
.btn-primary:active { background: #d95c35; }
input, select, textarea {
    border-radius: 12px !important;
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(237,108,67,0.18);
}

/* ── THE ISLAND: floating dynamic top bar ──────────────────── */
.topnav {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    height: auto;
    background: none;
    border: none;
    box-shadow: none;
    display: flex;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
    transform: translateY(-180%);
    opacity: 0;
}
/* End states live on the class, not in a retained animation fill: a
   kept transform makes .topnav the backdrop root and silently kills the
   island's blur over scrolling content. */
.topnav.revealed {
    transform: none;
    opacity: 1;
    animation: islandDrop 0.85s var(--ease-spring);
}
@keyframes islandDrop {
    from { transform: translateY(-180%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.topnav-inner {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: var(--island-h);
    width: fit-content;
    max-width: calc(100vw - 32px);
    padding: 0 10px 0 24px;
    border-radius: var(--radius-pill);
    background: var(--glass-lift), var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 14px 44px rgba(0,0,0,0.5);
    transition: width 0.55s var(--ease-spring);
    overflow: hidden;
}
.topnav-logo { height: 32px; display: block; }
.topnav-left { display: flex; align-items: center; flex: 0 0 auto; }

/* Dynamic center: page-contextual actions */
.island-center {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: opacity 0.24s var(--ease-out), transform 0.4s var(--ease-spring);
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}
.topnav-inner.morphing .island-center {
    opacity: 0;
    transform: scale(0.86);
    transition: opacity 0.13s ease, transform 0.13s ease;
}
.island-label {
    font-family: 'Zalando Sans SemiExpanded', 'Zalando Sans', sans-serif;
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
    padding: 0 6px;
}
.island-btn {
    appearance: none;
    border: 1px solid transparent;
    background: transparent;
    color: rgba(255,255,255,0.72);
    font-family: 'Zalando Sans SemiExpanded', 'Zalando Sans', sans-serif;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 10px 17px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.island-btn:hover {
    background: none;
    color: var(--brand-hot);
}
.island-btn.active {
    background: none;
    border-color: transparent;
    color: var(--brand-hot);
}
.island-btn i { font-size: 0.72rem; }

/* The menu button: the website's orange circle, verbatim. Flat, no glow,
   no spin; hover just deepens, exactly like unveildesign.com */
.island-menu-btn {
    appearance: none;
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    flex: 0 0 auto;
    margin-left: auto;
}
.island-menu-btn:hover { background: var(--brand-hot); }
.island-menu-btn:active { background: #d95c35; }

/* ── Right navigation drawer ───────────────────────────────── */
/* IMPORTANT: backdrop-filter applies even at opacity:0 in Chromium, so
   hidden full-screen backdrops MUST use visibility:hidden and only carry
   their blur while open, or they silently blur the whole app. */
.nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    background: rgba(8,8,8,0.45);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.nav-drawer-backdrop.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

.topnav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 100vw);
    z-index: 1100;
    border-radius: 0;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
    backdrop-filter: blur(var(--glass-blur-strong)) saturate(160%);
    border: none;
    border-left: 1px solid var(--glass-border);
    box-shadow: -24px 0 80px rgba(0,0,0,0.45);
    transform: translateX(110%);
    /* Decelerate only: a spring here overshoots leftward and exposes the
       drawer's right edge until it settles */
    transition: transform 0.42s var(--ease-out);
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }

.nav-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 8px 14px;
    border-bottom: 1px solid #ffffff;
    margin-bottom: 14px;
}
.nav-drawer-logo { height: 30px; display: block; }
.nav-drawer-close {
    appearance: none;
    border: none;
    background: none;
    color: rgba(255,255,255,0.6);
    width: 34px; height: 34px;
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.2s ease;
}
.nav-drawer-close:hover { color: var(--brand-hot); }

/* Nav options are typography, not chips: state lives in the color */
.nav-drawer .nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 10px;
    color: rgba(255,255,255,0.78);
    font-family: 'Zalando Sans SemiExpanded', 'Zalando Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 0;
    transition: color 0.18s ease;
    opacity: 0;
    transform: translateX(28px);
}
.nav-drawer.open .nav-item {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out),
                color 0.18s ease;
    transition-delay: calc(0.05s + var(--i, 0) * 0.04s);
}
.nav-drawer .nav-item:hover {
    background: none;
    color: var(--brand-hot);
}
.nav-drawer .nav-item.active {
    background: none;
    border: none;
    color: var(--brand-hot);
}

.nav-drawer .nav-item i {
    width: 20px;
    text-align: center;
    font-size: 0.95rem;
    color: inherit;
}
.nav-drawer-foot {
    margin-top: auto;
    padding: 18px 8px 4px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.nav-drawer-client {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.nav-drawer-client .ndc-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-drawer-client .ndc-plan {
    font-family: 'Zalando Sans Expanded', 'Zalando Sans', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
}
.nav-drawer-logout {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.75);
    padding: 9px 16px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    flex: 0 0 auto;
}
.nav-drawer-logout:hover {
    background: rgba(244,67,54,0.15);
    border-color: rgba(244,67,54,0.5);
    color: #ff8a80;
}

/* retire the old floating logout + old center nav styling */
.float-actions { display: none !important; }

/* ── Login: one pane of frosted glass over the liquid ──────── */
/* app.js sets display:flex inline, so centering must work under flex */
.login-container {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
}
/* Dark veil only: the artwork behind stays sharp, panes do the blurring */
.login-frost {
    position: absolute;
    inset: 0;
    background: rgba(8,8,8,0.32);
}
/* No blend mode on this grain: a blended child makes the login container
   render as an isolated group, and Chrome then samples backdrop-filter only
   inside that group, so the sheet above it never blurred the art. */
.login-frost::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--noise);
    background-size: 160px 160px;
    opacity: 0.06;
}
.login-bg-side, .login-form-side { all: unset; }
.login-card {
    position: relative;
    margin: 0 auto;
    width: min(560px, 100%);
    max-width: none;   /* styles.css caps the card at 380px (400px under 900px) */
    padding: 40px 40px 30px;
    border-radius: var(--radius-lg);
    /* Visibly translucent: the silk should read through the frost */
    background: var(--glass-lift), var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 30px 90px rgba(0,0,0,0.5);
    animation: loginRise 0.7s var(--ease-spring) both;
}
@keyframes loginRise {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-logo {
    display: block;
    height: 64px;
    width: auto;
    margin: 0 auto 28px;
}
.login-card h1 {
    font-family: 'Zalando Sans Expanded', 'Zalando Sans', sans-serif;
    text-align: center;
    font-size: 1.45rem;
    letter-spacing: 0.01em;
}
.login-subtitle { text-align: center; margin-bottom: 24px; }

/* ── Widgets: futurize ─────────────────────────────────────── */
/* Edge-to-edge children inside any glass pane */
.panel-bleed {
    margin-inline: calc(var(--panel-pad) * -1);
    margin-bottom: calc(var(--panel-pad) * -1);
    border-radius: 0 0 var(--radius) var(--radius);
    overflow: hidden;
}
.panel-bleed-top { margin-top: calc(var(--panel-pad) * -1); }

/* Charts: let the data touch the glass */
.glass-panel canvas,
.chart-card canvas {
    border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
}
.chart-card, .analytics-embed .glass-panel { overflow: hidden; }

/* Stat numbers: holographic metal */
.stat-value, .hours-value, .plan-price .price {
    background: linear-gradient(120deg, #ffffff 10%, #ffd9c9 45%, var(--brand) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Tables on glass */
.payment-table thead th {
    background: rgba(255,255,255,0.04);
    letter-spacing: 0.08em;
}
.payment-table tbody tr:hover { background: rgba(255,255,255,0.035); }

/* Page transitions, two distinct moves:
   1. Section change (drawer): the whole page fades in (pageReveal in
      styles.css) and the content inside holds still, the Website Updates
      look.
   2. Subview change (island pill): the page stays put and only the content
      inside the sheet fades up. The router marks a pill change with
      .subview-enter on the page; without that mark nothing inside moves.
   Support overrides the target element below (its sheets are the subview's
   direct children, so the fade-up goes one level deeper). */
.page.active.subview-enter .subview.active > * {
    animation: surfaceUp 0.5s var(--ease-out) both;
}
.page.active.subview-enter .subview.active > *:nth-child(1) { animation-delay: 0.02s; }
.page.active.subview-enter .subview.active > *:nth-child(2) { animation-delay: 0.07s; }
.page.active.subview-enter .subview.active > *:nth-child(3) { animation-delay: 0.12s; }
.page.active.subview-enter .subview.active > *:nth-child(4) { animation-delay: 0.17s; }
.page.active.subview-enter .subview.active > *:nth-child(5) { animation-delay: 0.22s; }
.page.active.subview-enter .subview.active > *:nth-child(n+6) { animation-delay: 0.26s; }
@keyframes surfaceUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Scrollbars that belong to the material */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.14);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(237,108,67,0.5); }

/* ── Utility classes (inline-style migration targets) ──────── */
.req { color: var(--brand); }
.label-note { font-weight: 400; text-transform: none; opacity: 0.6; }
.u-hidden { display: none !important; }
.mt-4 { margin-top: 4px; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 860px) {
    .topnav { top: 10px; }
    .topnav-inner {
        max-width: calc(100vw - 20px);
        gap: 8px;
        padding: 0 6px 0 14px;
    }
    .island-center {
        overflow-x: auto;
        scrollbar-width: none;
        max-width: 52vw;
    }
    .island-center::-webkit-scrollbar { display: none; }
    .island-btn span { display: none; }   /* icons only when tight */
    .island-btn { padding: 8px 11px; }
    .island-label { font-size: 0.72rem; }
    .main-content { padding: calc(var(--island-h) + 30px) 12px 40px; }
    .login-card { padding: 34px 24px 28px; }
}

/* ── Patch: glass chat shell ──────────────────────────────── */

/* Override .page.active{display:block}: the assistant page hosts the
   shell directly; no sub-scroll on the body. */
#page-assistant.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    overflow: hidden;
}

/* The frosted shell: standalone surface per the .support-rail recipe */
.patch-shell {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--island-h) - 86px);
    background: var(--glass-lift), var(--glass-bg);
    -webkit-backdrop-filter: blur(72px) saturate(150%);
    backdrop-filter: blur(72px) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: 0 2px 14px rgba(0,0,0,0.22);
    overflow: hidden;
}
/* Grain overlay (never animated, so safe as backdrop ancestor) */
.patch-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--noise);
    background-size: 140px 140px;
    opacity: 0.17;
    pointer-events: none;
    z-index: 0;
}
/* All direct children stack above the grain */
.patch-shell > * { position: relative; z-index: 1; }

/* Topic banner: conversation summary pinned at top */
.patch-topic {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 0.8rem;
    color: var(--color-text-muted);
    background: rgba(255,255,255,0.025);
}
.patch-topic i { color: var(--brand); font-size: 0.75rem; }
#patch-topic-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 600px;
}

/* Messages scroll area */
.patch-shell .assistant-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-behavior: smooth;
}
.patch-shell .assistant-messages::-webkit-scrollbar { width: 4px; }
.patch-shell .assistant-messages::-webkit-scrollbar-track { background: transparent; }
.patch-shell .assistant-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; }

/* Message rows */
.ai-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* the house motion: bloom in with the spring, never retain a fill */
    animation: patchMsgIn 0.45s var(--ease-spring) backwards;
}
@keyframes patchMsgIn {
    from { opacity: 0; transform: translateY(14px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ai-msg-user { flex-direction: row-reverse; }

/* Avatars: 32px circle */
.ai-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.ai-msg-user .ai-avatar {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
}

/* Bubbles */
.ai-bubble {
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.6;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.07);
    color: var(--color-text-secondary);
}
.ai-msg-user .ai-bubble {
    background: rgba(237,108,67,0.14);
    border-color: rgba(237,108,67,0.22);
    border-bottom-right-radius: 4px;
    color: var(--color-text-secondary);
}
.ai-msg-assistant .ai-bubble {
    border-bottom-left-radius: 4px;
}

/* Markdown content inside bubbles */
.ai-bubble .ai-p  { margin: 0 0 8px; }
.ai-bubble .ai-p:last-child { margin-bottom: 0; }
.ai-bubble .ai-h  { margin: 10px 0 4px; font-size: 0.95rem; font-weight: 700; color: var(--color-text-secondary); }
.ai-bubble .ai-ul { margin: 4px 0 8px; padding-left: 18px; }
.ai-bubble .ai-ul li { margin-bottom: 3px; }
.ai-bubble .ai-hr { border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 8px 0; }
.ai-bubble .ai-error { color: #ef6060; }

/* Typing indicator bubble */
.patch-typing {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 6px 4px;
}
.patch-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-text-muted);
    animation: patchDot 1.2s infinite;
    opacity: 0.2;
}
.patch-typing span:nth-child(2) { animation-delay: 0.2s; }
.patch-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes patchDot {
    0%, 60%, 100% { opacity: 0.2; }
    30%           { opacity: 1; }
}

/* Composer: sticky bottom strip */
.patch-composer {
    flex-shrink: 0;
    padding: 12px 16px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(255,255,255,0.02);
}

/* Quick-action pill chips inside composer */
.patch-composer .assistant-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.patch-composer .assistant-quick-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
    white-space: nowrap;
}
.patch-composer .assistant-quick-btn i { font-size: 0.7rem; }
.patch-composer .assistant-quick-btn:hover {
    border-color: var(--brand);
    color: var(--brand-hot);
    background: rgba(255,255,255,0.045);
}

/* Input row: pill textarea + circular send */
.patch-input-row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}
.patch-input-row .assistant-input {
    flex: 1;
    padding: 10px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-family: inherit;
    resize: none;
    line-height: 1.5;
    max-height: 140px;
    overflow-y: hidden;
    transition: border-color 0.15s var(--ease-out);
}
.patch-input-row .assistant-input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(237,108,67,0.15);
}
.patch-input-row .assistant-input:disabled { opacity: 0.45; }
.patch-input-row .assistant-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--brand);
    border: none;
    color: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s var(--ease-out);
    box-shadow: none;
}
.patch-input-row .assistant-send-btn:hover    { background: var(--brand-hot); }
.patch-input-row .assistant-send-btn:active   { background: #d95c35; }
.patch-input-row .assistant-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Patch polish: liquid bubbles, roomier column, floating composer ──
   .patch-shell-prefixed selectors outrank the legacy assistant styles. */
.patch-shell { max-width: 1060px; }
.patch-shell .assistant-messages { padding: 24px clamp(18px, 5%, 56px); gap: 16px; }
.patch-shell .ai-bubble {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: none;
    color: var(--color-text-secondary);
}
.patch-shell .ai-msg-user .ai-bubble {
    background: rgba(237,108,67,0.16);
    border-color: rgba(237,108,67,0.26);
}
.patch-shell .patch-composer {
    border-top: none;
    background: none;
    padding: 0 16px 16px;
}
.patch-shell .assistant-quick-actions { justify-content: center; }
.patch-shell .patch-input-row {
    width: min(720px, 100%);
    margin: 0 auto;
    align-items: center;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 5px 5px 5px 10px;
    transition: border-color 0.2s ease;
}
.patch-shell .patch-input-row:focus-within { border-color: var(--brand); }
.patch-shell .patch-input-row .assistant-input,
.patch-shell .patch-input-row .assistant-input:focus {
    background: none;
    border: none;
    box-shadow: none;
}

/* Island: patch state labels */
.island-patch-thinking i { margin-right: 6px; }
.island-patch-topic {
    max-width: 420px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Respect reduced motion ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .liquid-bg-layer { animation: none; }
    .topnav.revealed { animation-duration: 0.01s; }
    .nav-drawer, .nav-drawer .nav-item,
    .page.active.subview-enter .subview.active > *,
    #page-support.subview-enter .subview.active > * > *,
    #page-updates.subview-enter .updates-timeline > *, .stats-range-thumb, .login-card, .login-pane,
    .topnav-inner, .island-center { transition: none; animation-duration: 0.01s; }
    .patch-typing span { animation: none; opacity: 0.6; }
    .island-patch-thinking .fa-spin { animation: none; }
    .ai-msg { animation: none; }
}

/* ── Support: forms left, shared requests rail right ────────── */
/* Grid only while ACTIVE: a bare #page-support display rule outranks the
   .page hide rule by id specificity and leaks this section onto every page */
/* Stretch both columns to one height and fill the rectangle: the requests
   rail now matches the form sheet instead of ending halfway down. */
#page-support.active { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--pane-gap); align-items: stretch; min-height: var(--page-min-h); }
#page-support.active.rail-off { grid-template-columns: 1fr; }
#page-support.rail-off .support-rail { display: none; }
.support-main { display: contents; }
.support-rail {
    position: relative;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: calc(var(--radius) - 6px);
    padding: calc(var(--panel-pad) - 6px);
}
.support-rail h3 { font-size: 0.95rem; margin: 0 0 0.8rem; display: flex; align-items: center; gap: 0.5rem; }
.rail-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.7rem; border-radius: 10px; background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.06); margin-bottom: 5px; }
.rail-ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(237,108,67,0.12); color: var(--brand-hot); font-size: 0.8rem; }
.rail-text { flex: 1; min-width: 0; font-size: 0.82rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rail-date { font-size: 0.68rem; color: var(--color-text-muted); }
@media (max-width: 1100px) { #page-support.active, #page-support.active.rail-off { grid-template-columns: 1fr; } }

/* Support: subview stacking inside the grid cell */
#page-support .support-main { display: flex; flex-direction: column; gap: var(--pane-gap); min-width: 0; }
#page-support .subview { display: none; flex-direction: column; gap: var(--pane-gap); }
/* The active subview fills the column so its frosted sheet matches the rail */
#page-support .subview.active { display: flex; flex: 1; }
#page-support .subview.active > .form-card,
#page-support .subview[data-subview="history"].active > .history-panel,
#page-support .subview[data-subview="help"].active > .help-faq { flex: 1; }

/* Forms fill the full-bleed sheet: controls on the left, the message on the
   right, so the form spans the width instead of pinning to one side */
#page-support .form-card { max-width: none; }
#page-support .support-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pane-gap) 1.5rem; align-items: stretch; }
#page-support .support-form .form-group { margin: 0; }
#page-support .support-form .sf-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
#page-support .support-form .sf-hint { margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--color-text-muted); }
#page-support .support-form .sf-msg { display: flex; min-width: 0; }
#page-support .support-form .sf-msg .form-group { display: flex; flex-direction: column; flex: 1; }
#page-support .support-form .sf-msg textarea { flex: 1; min-height: 200px; resize: vertical; }
#page-support .support-form .sf-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
#page-support .support-form .sf-foot .form-status { flex: 1; }
@media (max-width: 760px) { #page-support .support-form { grid-template-columns: 1fr; } }

/* Support history: compact hours and usage bar */
#page-support .support-hours-card { padding: var(--panel-pad); text-align: left; }
#page-support .support-hours-card h3 { justify-content: flex-start; margin-bottom: 0.55rem; }
#page-support .history-panel { padding: var(--panel-pad); }
#page-support .history-panel h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem; font-size: 0.95rem; font-weight: 700; color: var(--color-text-secondary); }
#page-support .history-panel h3 i { color: var(--brand); }
.support-hours-compact { display: flex; align-items: baseline; gap: 0; }
.hours-value-sm { font-size: 1.6rem; font-weight: 800; margin-right: 8px; background: linear-gradient(120deg, #ffffff 10%, #ffd9c9 45%, var(--brand) 90%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.hours-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 10px 0 8px; }
.hours-bar-fill { height: 100%; border-radius: 999px; background: var(--brand); transition: width 0.8s var(--ease-out); }

/* FAQ accordions and quick links */
#page-support .help-faq, #page-support .help-links { padding: var(--panel-pad); }
#page-support .help-faq h3, #page-support .help-links h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 0.95rem; font-weight: 700; color: var(--color-text-secondary); }
#page-support .help-faq h3 i, #page-support .help-links h3 i { color: var(--brand); }
.faq-item { border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03); border-radius: 10px; margin: 0.4rem 0; overflow: hidden; }
.faq-item summary { padding: 0.8rem 1rem; cursor: pointer; list-style: none; font-weight: 600; font-size: 0.88rem; color: var(--color-text-secondary); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.7rem; color: var(--color-text-muted); transition: transform 0.2s ease; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item p { margin: 0; padding: 0 1rem 0.85rem; font-size: 0.84rem; line-height: 1.6; color: var(--color-text-muted); }
.help-links .help-link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.6rem; }
.help-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.1rem; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--color-text-secondary); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.help-link:hover { color: #fff; border-color: var(--brand); background: rgba(237,108,67,0.12); }
.help-link i { color: var(--brand); font-size: 0.9em; }

/* Billing: plan hero, middle row, Wave callout */
.plan-hero-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.plan-features-bar { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-feature-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); font-size: 0.78rem; color: var(--color-text-secondary); }
.billing-mid-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--pane-gap); margin-top: var(--pane-gap); }
@media (max-width: 1000px) { .billing-mid-row { grid-template-columns: 1fr; } }
.billing-actions { margin-top: var(--pane-gap); }
.wave-callout { border-left: 3px solid var(--brand); margin-top: var(--pane-gap); }
.wave-callout h3 { display: flex; align-items: center; gap: 0.5rem; }
.wave-callout p { font-size: 0.86rem; line-height: 1.6; color: var(--color-text-secondary); }
.wave-warning { color: var(--color-text); }

/* ============================================================
   POLISH PASS - dashboard parity with Analytics / Site Care
   Fixes: (1) frost "chin" below short content, (2) Updates cards
   ballooning when a tab has few entries, (3) Support form/rail
   misalignment + empty space, (4) Billing Support unformatted,
   (5) Invoice history not filling its 16:9 pane.
   ============================================================ */

/* ── (2)+(1) Website Updates ─────────────────────────────────
   Pack cards at the top at their natural size. The timeline is a CSS
   grid; a grid taller than its content distributes the slack into the
   auto rows (default align-content), so the fewer the cards the taller
   each grew. align-content:start stops the stretch, and dropping the
   16:9 min-height (above) lets the sheet hug whatever the active tab
   shows instead of leaving a half-empty frosted rectangle. */
#page-updates .updates-timeline { align-content: start; }

/* ── (3) Contact Support: one sheet, two inner fills ──
   The page itself is the frosted sheet and the form column and the
   requests rail are flat inner fills inside it, the same construction as
   the statistics and billing pages. Two separate sheets side by side each
   blurred only the art behind them, so the form read bright where the art
   was bright and the rail read dark, two tones for one material. One blur
   across the whole width lets the light fall evenly. The subview stays a
   transparent layout wrapper so both columns start at the same top. */
#page-support.active {
    position: relative;
    background: var(--glass-lift), var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: 0 2px 14px rgba(0,0,0,0.22);
    padding: calc(var(--panel-pad) - 6px);
}
#page-support.active::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: var(--noise); background-size: 140px 140px; opacity: 0.17; pointer-events: none; }
#page-support .subview.active {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
}
#page-support .subview.active::before { content: none; }


/* The active form-card fills the column and its form stretches to the
   bottom so the message box (not empty frost) owns the slack. */
#page-support .subview.active > .form-card { display: flex; flex-direction: column; }
#page-support .support-form { flex: 1; grid-template-rows: 1fr auto; }
#page-support .support-form .sf-col,
#page-support .support-form .sf-msg { min-height: 0; }

/* ── (1) Billing › My Plan: distribute to fill the 16:9 sheet ──
   The hero, the contract/services row, and the help strip stacked at the
   top with frost beneath. Stack them in a flex column and let the middle
   row grow so the two cards reach the help strip at the bottom. */
#page-billing .subview[data-subview="plan"].active {
    display: flex;
    flex-direction: column;
    gap: var(--pane-gap);
}
#page-billing .subview[data-subview="plan"] .plan-hero,
#page-billing .subview[data-subview="plan"] .billing-mid-row,
#page-billing .subview[data-subview="plan"] .billing-actions { margin: 0; }
#page-billing .subview[data-subview="plan"] .billing-mid-row { flex: 1; }
#page-billing .subview[data-subview="plan"] .contract-card { display: flex; flex-direction: column; }
#page-billing .subview[data-subview="plan"] .contract-details { flex: 1; }

/* ── (5) Billing › Invoice History: fill the whole pane ───────
   The invoices subview holds only the history table, so the doubled
   surface (frosted subview + flat inner panel) just read as a short
   table floating in a big frost. Collapse it to ONE frosted sheet that
   is the pane, and let the table span its full height so the rows fill
   the 16:9 rectangle instead of hugging the top. */
#page-billing .subview[data-subview="invoices"].active {
    display: flex;
    flex-direction: column;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
}
#page-billing .subview[data-subview="invoices"].active::before { content: none; }
#page-billing .subview[data-subview="invoices"] .payment-history {
    flex: 1;
    background: var(--glass-lift), var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    backdrop-filter: blur(var(--glass-blur)) saturate(150%);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: 0 2px 14px rgba(0,0,0,0.22);
}
#page-billing .subview[data-subview="invoices"] .payment-history::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--noise);
    background-size: 140px 140px;
    opacity: 0.17;
    pointer-events: none;
}
#page-billing .subview[data-subview="invoices"] .payment-history .table-responsive { flex: 1; }

/* ── (6) Analytics: every statistics subview fills the 16:9 sheet ──
   The subview is a flex column; the page inside it grows, and each
   .stats-row shares the slack, so charts reflow instead of leaving a
   frost chin below the last row. */
#page-my-website .subview.active { display: flex; flex-direction: column; }
#page-my-website .stats-page { flex: 1; min-height: 0; }

/* ── (4) Billing › Billing Support: mirrors the Get Help section ──
   Same vocabulary as the support Get Help page: frosted panels with an
   h3 icon+title header and faq-item accordions, no header band or custom
   strip. FAQ takes the wide left column (like "How MyDesign works"); the
   contact form and the Wave billing note stack in a right column the same
   380px width as the support requests rail, so the two pages read alike. */
#page-billing .subview[data-subview="billing-support"].active {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    grid-template-areas:
        "faq form"
        "faq wave";
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--pane-gap);
}
#page-billing .bsupport-faq  { grid-area: faq;  margin: 0; display: flex; flex-direction: column; padding: var(--panel-pad); }
#page-billing .bsupport-form { grid-area: form; margin: 0; max-width: none; display: flex; flex-direction: column; padding: var(--panel-pad); }
#page-billing .bsupport-wave { grid-area: wave; margin: 0; padding: var(--panel-pad); }

/* Panel headers, identical to the support help/history panels */
#page-billing [data-subview="billing-support"] .glass-panel > h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}
#page-billing [data-subview="billing-support"] .glass-panel > h3 i { color: var(--brand); }

/* FAQ list fills the left column */
.bsupport-faq-list { display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.bsupport-faq .faq-item { margin: 0; }

/* Contact form fills its cell; the message box takes the slack */
.bsupport-form-sub { margin: 0 0 1rem; font-size: 0.85rem; line-height: 1.5; color: var(--color-text-muted); }
.bsupport-form form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.bsupport-form .form-group { margin-bottom: 14px; }
.bsupport-msg-group { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.bsupport-msg-group textarea { flex: 1; min-height: 90px; resize: none; }

/* Wave billing note: a plain panel like Quick links; warning stays emphasized */
.bsupport-wave p { margin: 0 0 0.6rem; font-size: 0.84rem; line-height: 1.55; color: var(--color-text-secondary); }
.bsupport-wave p:last-child { margin-bottom: 0; }
.bsupport-wave .wave-warning { color: #fdd9cb; }

@media (max-width: 1000px) {
    #page-billing .subview[data-subview="billing-support"].active {
        grid-template-columns: 1fr;
        grid-template-areas: "faq" "form" "wave";
        grid-template-rows: auto auto auto;
    }
}

/* ── Support: pill changes move the content, never the pane ──
   The Support subview is a transparent wrapper (see Contact Support above)
   whose direct children are the frosted sheets. The generic fade-up would
   slide the sheets themselves, which reads as the whole pane refreshing.
   Hold the sheets still and fade up what is inside them, matching the
   My Website pages where the sheet stays and the content surfaces. */
#page-support.subview-enter .subview.active > * { animation: none; }
#page-support.subview-enter .subview.active > * > * { animation: surfaceUp 0.5s var(--ease-out) both; }
#page-support.subview-enter .subview.active > * > *:nth-child(1) { animation-delay: 0.02s; }
#page-support.subview-enter .subview.active > * > *:nth-child(2) { animation-delay: 0.07s; }
#page-support.subview-enter .subview.active > * > *:nth-child(3) { animation-delay: 0.12s; }
#page-support.subview-enter .subview.active > * > *:nth-child(4) { animation-delay: 0.17s; }
#page-support.subview-enter .subview.active > * > *:nth-child(5) { animation-delay: 0.22s; }
#page-support.subview-enter .subview.active > * > *:nth-child(n+6) { animation-delay: 0.26s; }

/* ── Section entry: the page fades as one ──
   styles.css gives these sheets a cardFadeIn of their own, which layered a
   second fade on top of the page fade when a section opened. Inside a
   subview the page (pageReveal) or the pill fade-up above carries all the
   motion; the sheets themselves keep none. */
.subview .form-card, .subview .requests-history, .subview .plan-features-bar,
.subview .plan-card, .subview .support-hours-card, .subview .contract-card,
.subview .other-services, .subview .payment-history, .subview .billing-actions {
    animation: none;
}

/* ── Website Updates: the filter pills refresh the entries like any pill ──
   The island pills filter one timeline (no subviews) by re-rendering it, so
   the fade-up mark is keyed on the page: a pill change (the router sets
   .subview-enter) fades the fresh entries up inside the sheet, a section
   change renders them still under the page fade, same as every section.
   No stagger here: on the two-column grid it read as two batches. */
#page-updates.subview-enter .updates-timeline > * {
    animation: surfaceUp 0.5s var(--ease-out) both;
}

/* ── Statistics range control: the orange slides between 7d, 30d, 90d, 12m ──
   The toolbar persists across re-renders (analytics.js setContent) so the
   thumb can travel; the active button itself is transparent and only its
   text changes. Same spring as the island morph. */
.stats-range { position: relative; }
.stats-range .ga4-range-btn { position: relative; z-index: 1; background: none; }
.stats-range .ga4-range-btn:not(.active):hover { background: var(--color-bg-hover); }
.stats-range .ga4-range-btn.active { background: transparent; color: #fff; }
.stats-range-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: var(--brand);
    border-radius: inherit;
    transition: transform 0.45s var(--ease-spring), width 0.45s var(--ease-spring);
    pointer-events: none;
}

/* ── Login: one frosted sheet, one inner pane ──
   The sheet carries the brand (logo, heading, subtitle) and the Contact
   Support line; the form sits in one flat inner pane, the same fill the
   dashboard pages use inside their sheets. The pane surfaces a beat after
   the sheet rises. Spec: docs/superpowers/specs/2026-09-04-login-sheet-and-pane-design.md */
.login-pane {
    position: relative;
    text-align: left;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: calc(var(--radius) - 6px);
    padding: 26px 28px 24px;
    animation: surfaceUp 0.5s var(--ease-out) 0.12s both;
}
/* Fields sit on the lighter fill now, so they go a touch darker to keep
   their edge */
.login-card .login-pane input { background: rgba(0,0,0,0.22); border-color: rgba(255,255,255,0.09); }
.login-card .login-pane input:focus { background: rgba(0,0,0,0.3); }
.login-card .login-footer { margin-top: 22px; }
/* Phones: the sheet takes the width and both paddings tighten. The captcha
   never renders under 300px, so app.js scales it down to the pane on narrow
   screens (fitLoginTurnstile). */
.login-turnstile { transform-origin: 0 0; }
@media (max-width: 480px) {
    .login-container { padding: 14px; }
    .login-card { padding: 24px 16px 20px; }
    .login-pane { padding: 18px 14px 16px; }
}