/* ==========================================================================
   Serbiska premium theme
   --------------------------------------------------------------------------
   Loaded AFTER style.css. It does three things:

   1. Unifies the brand. The website shipped in gold/teal while both mobile
      apps use Serbiska pink, so the web and the product looked like two
      different companies. Every accent here is re-pointed at the app palette.

   2. Adds depth. Layered shadows, gradient rims, and glass surfaces replace
      flat fills, so panels read as physical rather than printed.

   3. Adds restrained motion. Entrances are staged; hovers respond. Everything
      is disabled under prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

:root {
    /* Matches AppColors in both Flutter apps exactly. */
    --sb-primary: #D81B60;
    --sb-primary-dark: #AD1457;
    --sb-primary-strong: #C2185B;
    --sb-accent: #7C3AED;
    --sb-midnight: #0F172A;
    --sb-indigo: #312E81;
    --sb-navy: #1E293B;
    --sb-blush: #FFF1F6;
    --sb-surface: #FFFFFF;
    --sb-background: #F8FAFC;
    --sb-border: #E2E8F0;
    --sb-text: #0F172A;
    --sb-text-soft: #475569;
    --sb-muted: #64748B;
    --sb-success: #16A34A;
    --sb-warning: #F59E0B;
    --sb-danger: #DC2626;
    --sb-info: #2563EB;

    /* One elevation scale, so nothing invents its own shadow. */
    --sb-shadow-sm: 0 2px 8px rgba(15, 23, 42, .05);
    --sb-shadow-md: 0 12px 30px rgba(15, 23, 42, .08);
    --sb-shadow-lg: 0 24px 60px rgba(15, 23, 42, .12);
    --sb-shadow-brand: 0 18px 42px rgba(216, 27, 96, .26);

    --sb-radius-sm: 12px;
    --sb-radius: 18px;
    --sb-radius-lg: 26px;
    --sb-ease: cubic-bezier(.22, .68, .28, 1);
}

/* Re-point the legacy variables so older rules inherit the brand. */
.landing-body {
    --ink: #0F172A;
    --navy: #1E293B;
    --blue: #312E81;
    --gold: var(--sb-primary);
    --cream: var(--sb-blush);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Focus must always be visible: the old outline was removed in places. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid rgba(216, 27, 96, .45);
    outline-offset: 2px;
    border-radius: 8px;
}

/* ==========================================================================
   1. Landing page

   style.css renders the landing page as a LIGHT theme (white nav, white hero,
   dark text). Everything here refines that theme -- it must never impose a
   dark surface, or the dark text on top of it becomes unreadable.
   ========================================================================== */

/* The nav is white, so its content must stay dark for contrast. */
.landing-nav {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(20px) saturate(160%);
    border-bottom: 1px solid rgba(226, 232, 240, .9);
    transition: background .3s var(--sb-ease), box-shadow .3s var(--sb-ease);
}
.landing-nav.is-scrolled {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 8px 30px rgba(15, 23, 42, .09);
}

/* Raised from the inherited .68 alpha: grey-on-white failed contrast. */
.landing-nav-links a {
    color: var(--sb-text-soft);
    font-weight: 650;
    position: relative;
}
.landing-nav-links a:hover,
.landing-nav-links a:focus-visible { color: var(--sb-primary); }

/* An underline that grows on hover, so the target is unmistakable. */
.landing-nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--sb-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s var(--sb-ease);
}
.landing-nav-links a:hover::after,
.landing-nav-links a:focus-visible::after { transform: scaleX(1); }

.landing-brand { color: var(--sb-text); }
.landing-logo {
    background: #fff;
    border: 1px solid var(--sb-border);
    box-shadow: 0 8px 22px rgba(216, 27, 96, .16);
    transition: transform .3s var(--sb-ease), box-shadow .3s var(--sb-ease);
}
.landing-brand:hover .landing-logo {
    transform: rotate(-6deg) scale(1.06);
    box-shadow: 0 12px 30px rgba(216, 27, 96, .26);
}

/* Primary call to action. */
.btn-gold-premium {
    position: relative;
    overflow: hidden;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-dark));
    box-shadow: var(--sb-shadow-brand);
}
.btn-gold-premium:hover,
.btn-gold-premium:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(216, 27, 96, .34);
}
/* A single sheen sweep on hover, not a permanent loop. */
.btn-gold-premium::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .65s var(--sb-ease);
}
.btn-gold-premium:hover::after { transform: translateX(120%); }

/* The secondary button sits on white, so it needs a real border. */
.btn-ghost-premium {
    color: var(--sb-text);
    border: 1px solid var(--sb-border);
    background: #fff;
    box-shadow: var(--sb-shadow-sm);
}
.btn-ghost-premium:hover,
.btn-ghost-premium:focus-visible {
    color: var(--sb-primary-dark);
    border-color: var(--sb-primary);
    background: var(--sb-blush);
    transform: translateY(-2px);
}

/* Hero: keep it light, deepen the brand wash underneath the text. */
.premium-hero {
    background:
        radial-gradient(circle at 84% 22%, rgba(216, 27, 96, .10), transparent 30%),
        radial-gradient(circle at 8% 82%, rgba(124, 58, 237, .07), transparent 30%),
        linear-gradient(150deg, #fff 0%, #fff 55%, var(--sb-blush) 100%);
}
.hero-aurora-one { background: var(--sb-primary); opacity: .09; }
.hero-aurora-two { background: var(--sb-accent); opacity: .07; }

.premium-eyebrow,
.premium-eyebrow.light,
.section-kicker { color: var(--sb-primary-dark); }

.hero-copy h1,
.section-heading h2 { color: var(--sb-text); }
/* Gradient text needs a dark base to read against a white hero. */
.hero-copy h1 em,
.section-heading h2 em {
    background: linear-gradient(120deg, var(--sb-primary), var(--sb-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.hero-copy > p,
.section-heading > p { color: var(--sb-text-soft); }
.hero-assurance { color: var(--sb-muted); }
.hero-assurance i { color: var(--sb-success); }
.text-link-premium { color: var(--sb-text); }
.text-link-premium:hover { color: var(--sb-primary); }
.hero-scroll { color: var(--sb-muted); }
.hero-scroll span { background: linear-gradient(var(--sb-primary), transparent); }

/* The device mock inside the hero. */
.end-pin { background: var(--sb-primary); color: #fff; }
.moving-car { background: var(--sb-primary-dark); }
.route-line .route-progress { stroke: var(--sb-primary); }
.mini-route span:nth-child(3) { background: var(--sb-primary); }
.floating-chip i { color: var(--sb-primary); }
.floating-chip > i { background: var(--sb-blush); }

.signal-grid i { background: var(--sb-blush); color: var(--sb-primary); }
.platform-section {
    background: radial-gradient(circle at 10% 26%, rgba(216, 27, 96, .06), transparent 24%), var(--sb-background);
}

.ecosystem-card {
    border-color: rgba(15, 23, 42, .07);
    box-shadow: var(--sb-shadow-md);
    transition: transform .38s var(--sb-ease), box-shadow .38s var(--sb-ease), border-color .38s var(--sb-ease);
}
.ecosystem-card:hover {
    transform: translateY(-10px);
    border-color: rgba(216, 27, 96, .28);
    box-shadow: var(--sb-shadow-lg);
}
.ecosystem-card::after { background: rgba(216, 27, 96, .08); }
.ecosystem-card h3 { color: var(--sb-text); }
.ecosystem-card > p { color: var(--sb-text-soft); }
.card-icon {
    background: linear-gradient(145deg, var(--sb-primary), var(--sb-primary-dark));
    color: #fff;
    box-shadow: 0 12px 26px rgba(216, 27, 96, .26);
}
.income-bars i { background: linear-gradient(var(--sb-primary), var(--sb-primary-dark)); }
.admin-mini { background: var(--sb-blush); }
.admin-mini i { color: var(--sb-primary); }

/* The safety panel is the one intentionally dark surface on this page, so its
   own text is light. Contrast is checked against that dark ground. */
.safety-panel {
    background:
        radial-gradient(circle at 19% 55%, rgba(216, 27, 96, .22), transparent 28%),
        linear-gradient(135deg, var(--sb-midnight), var(--sb-indigo));
    box-shadow: var(--sb-shadow-lg);
}
.safety-copy h2 { color: #fff; }
.safety-copy > p { color: rgba(255, 255, 255, .78); }
.safety-list span { color: rgba(255, 255, 255, .90); }
.safety-list i { background: rgba(249, 168, 212, .20); color: #F9A8D4; }
.orbit-one { background: var(--sb-primary); box-shadow: 0 0 20px var(--sb-primary); }
.orbit-two { background: var(--sb-accent); box-shadow: 0 0 20px var(--sb-accent); }
.safety-orbit > div {
    background: linear-gradient(145deg, var(--sb-primary), var(--sb-primary-dark));
    color: #fff;
}

.download-panel { background: linear-gradient(120deg, #fff 58%, var(--sb-blush)); }
.download-panel h2 { color: var(--sb-text); }
.download-panel p { color: var(--sb-text-soft); }

/* The footer is dark by design; keep its text light. */
.premium-footer { background: var(--sb-midnight); color: rgba(255, 255, 255, .74); }
.footer-main p { color: #fff; }
.footer-main a:not(.landing-brand) { color: rgba(255, 255, 255, .74); }
.footer-main a:hover { color: #F9A8D4; }
.premium-footer .landing-brand { color: #fff; }
.footer-bottom { color: rgba(255, 255, 255, .55); }

/* ==========================================================================
   2. Login
   ========================================================================== */

.login-panel {
    background: radial-gradient(circle at 100% 0, rgba(216, 27, 96, .12), transparent 42%), #fff;
}
.login-card {
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-lg);
}
.login-card::before {
    background: linear-gradient(90deg, transparent, var(--sb-primary), transparent);
}
.ambient-one { background: var(--sb-primary) !important; }
.ambient-two { background: var(--sb-accent) !important; }

.premium-field input,
.premium-field select,
.premium-field textarea {
    transition: border-color .22s var(--sb-ease), box-shadow .22s var(--sb-ease);
}
.premium-field input:focus,
.premium-field select:focus,
.premium-field textarea:focus {
    border-color: var(--sb-primary);
    box-shadow: 0 0 0 4px rgba(216, 27, 96, .13);
}

.premium-submit {
    background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-dark));
    color: #fff;
    box-shadow: var(--sb-shadow-brand);
    transition: transform .2s var(--sb-ease), box-shadow .2s var(--sb-ease);
}
.premium-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(216, 27, 96, .34);
}
.premium-submit:disabled { opacity: .7; cursor: progress; }

/* ==========================================================================
   3. Admin shell
   ========================================================================== */

.sidebar {
    background: linear-gradient(180deg, var(--sb-midnight) 0%, #1A1033 100%);
    border-right: 1px solid rgba(255, 255, 255, .06);
}
.sidebar .brand .logo {
    background: linear-gradient(145deg, var(--sb-primary), var(--sb-primary-dark));
    color: #fff;
    box-shadow: 0 10px 24px rgba(216, 27, 96, .3);
}

.nav-link-tara {
    position: relative;
    transition: background .2s var(--sb-ease), color .2s var(--sb-ease), transform .2s var(--sb-ease);
}
.nav-link-tara:hover { transform: translateX(3px); }
.nav-link-tara.active {
    background: linear-gradient(90deg, rgba(216, 27, 96, .26), rgba(216, 27, 96, .05));
    color: #fff;
}
/* An active marker on the rail reads faster than a fill alone. */
.nav-link-tara.active::before {
    content: "";
    position: absolute;
    left: -1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 24px;
    border-radius: 0 4px 4px 0;
    background: var(--sb-primary);
    box-shadow: 0 0 14px var(--sb-primary);
}

.topbar {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(18px) saturate(150%);
    border-bottom: 1px solid rgba(15, 23, 42, .07);
}

.stat-card,
.panel-card {
    border-radius: var(--sb-radius-lg);
    box-shadow: var(--sb-shadow-sm);
    transition: transform .28s var(--sb-ease), box-shadow .28s var(--sb-ease);
}
.stat-card:hover,
.panel-card:hover { box-shadow: var(--sb-shadow-md); }
.stat-card:hover { transform: translateY(-3px); }

.stat-card {
    position: relative;
    overflow: hidden;
    /* Leaves room for the tone bar drawn by ::before. */
    padding-left: 1.5rem;
}
/* The tone bar. Neutral tiles get a quiet slate; the accent colours are
   reserved for tiles that actually want the eye. */
.stat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--sb-border);
}
.stat-card .stat-label {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sb-muted);
}
.stat-card .value {
    margin-top: .15rem;
    line-height: 1.1;
    background: linear-gradient(120deg, var(--sb-text), var(--sb-primary-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.stat-card .stat-caption {
    margin-top: .3rem;
    font-size: .76rem;
    line-height: 1.35;
    color: var(--sb-muted);
}
.stat-card .icon {
    flex: 0 0 auto;
    background: linear-gradient(145deg, var(--sb-blush), #FFE4EF);
    color: var(--sb-primary);
    box-shadow: inset 0 1px rgba(255, 255, 255, .8);
}

/* A queue with work waiting in it. Deliberately the loudest tile on the page. */
.stat-card.is-alert::before { background: var(--sb-danger); }
.stat-card.is-alert {
    background: linear-gradient(115deg, #FFF7F7, #fff 62%);
    box-shadow: 0 2px 10px rgba(220, 38, 38, .12);
}
.stat-card.is-alert .stat-label { color: #B91C1C; }
.stat-card.is-alert .value {
    background: linear-gradient(120deg, #991B1B, var(--sb-danger));
    -webkit-background-clip: text;
    background-clip: text;
}
.stat-card.is-alert .icon {
    background: linear-gradient(145deg, #FEE2E2, #FECACA);
    color: #B91C1C;
}

/* The same queue, empty. An all-clear should look calm, not urgent. */
.stat-card.is-calm::before { background: var(--sb-success); }
.stat-card.is-calm .value {
    background: linear-gradient(120deg, var(--sb-text), #15803D);
    -webkit-background-clip: text;
    background-clip: text;
}
.stat-card.is-calm .icon {
    background: linear-gradient(145deg, #E9F8EE, #D7F0E1);
    color: #15803D;
}

.stat-card.is-money::before { background: var(--sb-primary); }
.stat-card.is-money .value {
    background: linear-gradient(120deg, var(--sb-primary-dark), var(--sb-accent));
    -webkit-background-clip: text;
    background-clip: text;
}

.stat-card.is-live::before { background: var(--sb-accent); }
.stat-card.is-live .icon {
    background: linear-gradient(145deg, #F1EBFE, #E5DBFB);
    color: var(--sb-accent);
}

.panel-card .panel-head {
    background: linear-gradient(180deg, #fff, #FCFDFE);
    border-bottom-color: var(--sb-border);
    /* The count badge was being clipped against the rounded corner when the
       heading text ran long. */
    flex-wrap: wrap;
    align-items: flex-start;
}
.panel-card .panel-head > .badge {
    flex: 0 0 auto;
    align-self: center;
    white-space: nowrap;
}

/* Safety case statuses. style.css has no variant for these, so without them
   the pill would render as unstyled text. */
.status.open { background: #FFF0F0; color: #B91C1C; }
.status.acknowledged,
.status.reviewing { background: #FFF6DF; color: #8A5600; }
.status.resolved { background: #E9F8EE; color: #116B32; }

/* ==========================================================================
   Safety case table

   Bootstrap's .table-warning / .table-danger filled entire rows, so a page of
   open cases became an unreadable wall of yellow. Severity now reads from a
   left bar and a single chip, leaving the row itself white.
   ========================================================================== */
.safety-row > td {
    padding-top: 1rem;
    padding-bottom: 1rem;
    vertical-align: top;
    border-bottom: 0;
}
.safety-row > td:first-child {
    box-shadow: inset 4px 0 0 var(--sb-border);
}
.safety-row.is-critical > td:first-child { box-shadow: inset 4px 0 0 var(--sb-danger); }
.safety-row.is-open > td:first-child { box-shadow: inset 4px 0 0 var(--sb-warning); }
.safety-row.is-critical { background: linear-gradient(90deg, rgba(220, 38, 38, .05), transparent 34%); }
.safety-row.is-open { background: linear-gradient(90deg, rgba(245, 158, 11, .06), transparent 34%); }
.safety-row.is-closed > td { color: var(--sb-muted); }

/* The form row closes the group, so the separator belongs to it. */
.safety-form-row > td { border-bottom: 1px solid var(--sb-border); }

.sev-chip {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
/* #B91C1C on #FEE2E2 measures 6.6:1 -- comfortably past AA at this size. */
.sev-critical { background: #FEE2E2; color: #B91C1C; }

.safety-row .off-hours { color: #8A5600; font-weight: 600; }
.safety-row .case-message {
    display: block;
    margin-top: .25rem;
    max-width: 34ch;
    color: var(--sb-text-soft);
    line-height: 1.45;
}

/* Inline links styled as quiet buttons -- full buttons in every cell made the
   table feel like a toolbar. */
.safety-row .call-link,
.safety-row .map-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .45rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--sb-border);
    font-size: .78rem;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    transition: background .18s var(--sb-ease), border-color .18s var(--sb-ease);
}
.safety-row .call-link { color: #B91C1C; border-color: #FBD5D5; background: #FFF5F5; }
.safety-row .call-link:hover { background: #FEE2E2; border-color: #F5A9A9; }
.safety-row .map-link { color: var(--sb-primary-dark); background: #fff; }
.safety-row .map-link:hover { background: var(--sb-blush); border-color: rgba(216, 27, 96, .35); }

/* The review controls used to be crammed into a 230px cell, which truncated
   the notes placeholder. They now get the full table width. */
.safety-review {
    padding: 1.1rem 1.25rem 1.25rem;
    background: linear-gradient(180deg, #F8FAFC, #fff);
    border-top: 1px solid var(--sb-border);
}
.safety-review .form-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--sb-text-soft);
    margin-bottom: .3rem;
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    font-weight: 800;
}
.table tbody tr { transition: background .16s var(--sb-ease); }
.table tbody tr:hover { background: rgba(216, 27, 96, .035); }

.btn-tara {
    background: linear-gradient(135deg, var(--sb-primary), var(--sb-primary-dark));
    box-shadow: var(--sb-shadow-brand);
    transition: transform .2s var(--sb-ease), box-shadow .2s var(--sb-ease);
}
.btn-tara:hover {
    background: linear-gradient(135deg, var(--sb-primary-strong), var(--sb-primary-dark));
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(216, 27, 96, .32);
}

/* Status pills: a left rail encodes state without relying on colour alone. */
.status {
    position: relative;
    padding-left: .85rem;
    font-weight: 800;
}
.status::before {
    content: "";
    position: absolute;
    left: .38rem;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.alert { border-radius: var(--sb-radius); border: 0; box-shadow: var(--sb-shadow-sm); }

/* ==========================================================================
   4. Public tracking page
   ========================================================================== */

.track-card {
    border-radius: var(--sb-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .28);
    transition: transform .3s var(--sb-ease), box-shadow .3s var(--sb-ease);
}
.track-number {
    background: linear-gradient(120deg, #F9A8D4, #C4B5FD);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}
.track-step-icon { transition: transform .3s var(--sb-ease), background .3s var(--sb-ease); }
.track-step.is-done .track-step-icon { transform: scale(1.06); }
.track-input:focus {
    border-color: var(--sb-primary) !important;
    box-shadow: 0 0 0 .22rem rgba(216, 27, 96, .26) !important;
}

/* ==========================================================================
   5. Motion
   --------------------------------------------------------------------------
   Entrances are staged so a page assembles top-down. The .reveal class is
   already used by the landing page; these add the same idea to Admin.
   ========================================================================== */

@keyframes sbFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
@keyframes sbFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes sbShimmer {
    to { background-position: 200% 0; }
}

.sb-enter { animation: sbFadeUp .55s var(--sb-ease) both; }
.sb-enter-1 { animation-delay: .05s; }
.sb-enter-2 { animation-delay: .10s; }
.sb-enter-3 { animation-delay: .15s; }
.sb-enter-4 { animation-delay: .20s; }
.sb-enter-5 { animation-delay: .25s; }
.sb-enter-6 { animation-delay: .30s; }

/* Cascade Admin cards without needing a class on every one. */
.content .stat-card,
.content .panel-card { animation: sbFadeUp .5s var(--sb-ease) both; }
.content .row > [class*="col-"]:nth-child(1) .stat-card { animation-delay: .04s; }
.content .row > [class*="col-"]:nth-child(2) .stat-card { animation-delay: .09s; }
.content .row > [class*="col-"]:nth-child(3) .stat-card { animation-delay: .14s; }
.content .row > [class*="col-"]:nth-child(4) .stat-card { animation-delay: .19s; }

/* Skeleton placeholder for content that is still loading. */
.sb-skeleton {
    border-radius: 8px;
    background: linear-gradient(90deg, #EDF1F6 25%, #F8FAFC 50%, #EDF1F6 75%);
    background-size: 200% 100%;
    animation: sbShimmer 1.3s linear infinite;
}

/* A live indicator that breathes rather than blinks. */
.sb-pulse {
    position: relative;
    display: inline-flex;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sb-success);
}
.sb-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: inherit;
    animation: sbPing 1.8s var(--sb-ease) infinite;
}
@keyframes sbPing {
    0%   { transform: scale(1); opacity: .55; }
    70%  { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
}

/* Accessibility: every animation above stops when the platform asks. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .sb-enter,
    .content .stat-card,
    .content .panel-card { animation: none !important; opacity: 1; transform: none; }
    .btn-gold-premium:hover,
    .btn-tara:hover,
    .stat-card:hover,
    .ecosystem-card:hover,
    .nav-link-tara:hover { transform: none; }
}

/* ==========================================================================
   6. Responsive refinements
   ========================================================================== */

@media (max-width: 991.98px) {
    .sidebar { box-shadow: 0 0 60px rgba(15, 23, 42, .5); }
}
@media (max-width: 767.98px) {
    .stat-card, .panel-card { border-radius: var(--sb-radius); }
    /* Sticky headers cost too much vertical space on a phone. */
    .table thead th { position: static; }

    /* Two tiles per row on a phone leaves very little width, so the caption is
       dropped and the icon shrinks rather than squeezing the number. */
    .stat-card { padding-left: 1.1rem; }
    .stat-card::before { width: 4px; }
    .stat-card .stat-caption { display: none; }
    .stat-card .icon { width: 36px; height: 36px; border-radius: 12px; font-size: 1rem; }
    .stat-card .stat-label { font-size: .68rem; letter-spacing: .04em; }

    /* The message column can no longer afford a 34ch measure. */
    .safety-row .case-message { max-width: none; }
    .safety-review { padding: .9rem 1rem 1rem; }
}

/* Print: strip decoration so a receipt or report is legible on paper. */
@media print {
    .sidebar, .topbar, .landing-nav, .btn-tara, .btn-gold-premium { display: none !important; }
    .main { margin-left: 0 !important; }
    .panel-card, .stat-card { box-shadow: none !important; border: 1px solid #ccc !important; }
}