/* ═══════════════════════════════════════════════════════════════
   ShortSync — application shell
   Shares the landing page's language: warm stone ground, clay accent
   (#D97757 / #C15F3C), mono labels, hairline rules, restrained motion.

   Unlike the landing (dark only) the app keeps its light/dark toggle,
   so light is a warm *paper* mode rather than a cold white one.
   Contrast figures in the comments were measured, not estimated.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1. Tokens — light (warm paper)
   Mirrored in full by the dark block: app.css loads after Bootstrap,
   so a :root-only override would beat Bootstrap's own dark block for
   any variable the dark block happens to omit.
   ─────────────────────────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
  --ss-ground:    #FAF8F5;
  --ss-surface:   #FFFFFF;
  --ss-surface-2: #F5F1EC;
  --ss-surface-3: #EDE7E0;

  --ss-line:        rgba(26, 19, 16, .09);
  --ss-line-2:      rgba(26, 19, 16, .14);
  --ss-line-strong: rgba(26, 19, 16, .24);

  --ss-text:      #1A1310;   /* 17.3:1 on ground */
  --ss-text-dim:  #5C5249;   /*  7.2:1 */
  --ss-text-mute: #6E635A;   /*  5.5:1 — carries small body copy */

  /* Fills and borders use clay-600; accent *text* steps darker because
     #C15F3C on paper measures only 4.0:1. */
  --ss-accent:      #C15F3C;
  --ss-accent-2:    #D97757;
  --ss-accent-text: #9E4A2C;   /* 5.7:1 on paper */
  --ss-accent-soft:   rgba(193, 95, 60, .10);
  --ss-accent-softer: rgba(193, 95, 60, .05);
  --ss-accent-line:   rgba(193, 95, 60, .26);

  --ss-ok:        #1B7F5E;
  --ss-ok-soft:   rgba(27, 127, 94, .11);
  --ss-warn:      #96601B;
  --ss-warn-soft: rgba(150, 96, 27, .12);
  --ss-bad:       #B03A2B;
  --ss-bad-soft:  rgba(176, 58, 43, .11);

  /* Chart series — validated as a categorical pair on a white card. */
  --ss-series-1: #C15F3C;
  --ss-series-2: #1BAF7A;

  /* Categorical ramp for the analytics page. Assigned in fixed order and
     bound to entities, never to rank. These four validate on BOTH the
     light and dark card surfaces, which is why Chart.js can be handed
     literal hexes instead of resolving CSS variables per theme.
     The clay/aqua pair sits in the 6–8 CVD band, legal only with
     secondary encoding — every use below carries a text label. */
  --ss-cat-1: #C15F3C;
  --ss-cat-2: #199E70;
  --ss-cat-3: #3987E5;
  --ss-cat-4: #C98500;
  --ss-cat-muted: #8A7F75;   /* the "Other" tail */

  --ss-overlay-shadow: 0 14px 38px -12px rgba(26, 19, 16, .20), 0 2px 6px rgba(26, 19, 16, .06);
  --ss-skeleton-shine: rgba(255, 255, 255, .8);
  --ss-scrollbar: #D6CCC2;
  --ss-grain-opacity: .10;

  --ss-radius:    12px;
  --ss-radius-sm: 8px;
  --ss-radius-xs: 6px;

  --ss-transition:      .2s ease-out;
  --ss-transition-fast: .12s ease-out;
  --ss-ease: cubic-bezier(.22, 1, .36, 1);

  /* Bootstrap remapped onto the warm system */
  --bs-body-bg:          var(--ss-ground);
  --bs-body-bg-rgb:      250, 248, 245;
  --bs-body-color:       var(--ss-text);
  --bs-body-color-rgb:   26, 19, 16;
  --bs-emphasis-color:   #000000;
  --bs-secondary-color:  var(--ss-text-dim);
  --bs-secondary-bg:     var(--ss-surface-3);
  --bs-tertiary-bg:      var(--ss-surface-2);
  --bs-border-color:     var(--ss-line);
  --bs-primary:          var(--ss-accent);
  --bs-primary-rgb:      193, 95, 60;
  --bs-link-color:       var(--ss-accent-text);
  --bs-link-color-rgb:   158, 74, 44;
  --bs-link-hover-color: var(--ss-accent);
  --bs-heading-color:    var(--ss-text);
}

/* ───────────────────────────────────────────────────────────────
   2. Tokens — dark (identical ground to the landing page)
   ─────────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --ss-ground:    #0A0908;
  --ss-surface:   #12100E;
  --ss-surface-2: #171412;
  --ss-surface-3: #1E1A17;

  --ss-line:        rgba(240, 234, 228, .07);
  --ss-line-2:      rgba(240, 234, 228, .12);
  --ss-line-strong: rgba(240, 234, 228, .20);

  --ss-text:      #F0EAE4;   /* 16.7:1 */
  --ss-text-dim:  #A89E94;   /*  7.6:1 */
  --ss-text-mute: #847A70;   /*  4.7:1 */

  --ss-accent:      #D97757;
  --ss-accent-2:    #E88C6B;
  --ss-accent-text: #D97757;   /* 6.4:1 on the dark ground */
  --ss-accent-soft:   rgba(217, 119, 87, .12);
  --ss-accent-softer: rgba(217, 119, 87, .06);
  --ss-accent-line:   rgba(217, 119, 87, .28);

  --ss-ok:        #6FC79A;
  --ss-ok-soft:   rgba(111, 199, 154, .13);
  --ss-warn:      #E0A860;
  --ss-warn-soft: rgba(224, 168, 96, .13);
  --ss-bad:       #E88377;
  --ss-bad-soft:  rgba(232, 131, 119, .13);

  /* Stepped for the dark card surface, not flipped from light. */
  --ss-series-1: #C15F3C;
  --ss-series-2: #199E70;

  --ss-overlay-shadow: 0 16px 40px -12px rgba(0, 0, 0, .75), 0 2px 8px rgba(0, 0, 0, .5);
  --ss-skeleton-shine: rgba(255, 255, 255, .05);
  --ss-scrollbar: #302A25;
  --ss-grain-opacity: .22;

  --bs-body-bg:          var(--ss-ground);
  --bs-body-bg-rgb:      10, 9, 8;
  --bs-body-color:       var(--ss-text);
  --bs-body-color-rgb:   240, 234, 228;
  --bs-emphasis-color:   #FFFFFF;
  --bs-secondary-color:  var(--ss-text-dim);
  --bs-secondary-bg:     var(--ss-surface-3);
  --bs-tertiary-bg:      var(--ss-surface-2);
  --bs-border-color:     var(--ss-line);
  --bs-primary:          var(--ss-accent);
  --bs-primary-rgb:      217, 119, 87;
  --bs-link-color:       var(--ss-accent-text);
  --bs-link-color-rgb:   217, 119, 87;
  --bs-link-hover-color: var(--ss-accent-2);
  --bs-heading-color:    var(--ss-text);
}

/* ───────────────────────────────────────────────────────────────
   3. Base
   ─────────────────────────────────────────────────────────────── */
body {
  font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ss-ground);
  color: var(--ss-text);
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;   /* last line of defence against sideways scroll */
}

h1, h2, h3, h4, h5 { letter-spacing: -.028em; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* Film grain, matching the landing. pointer-events:none is load-bearing:
   this sits above everything, so without it the whole UI is inert. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: var(--ss-grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Decorative glyphs never spend colour. */
.ss-icon-muted { color: var(--ss-text-mute); }

/* Mono eyebrow / section index, as on the landing. */
.ss-idx {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ss-text-mute);
}
.ss-idx::before { content: ""; width: 22px; height: 1px; background: var(--ss-accent); flex: none; }

/* Editorial emphasis — serif italic in clay, never a gradient. */
.ss-em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--ss-accent-text);
  letter-spacing: -.01em;
}

/* One focus treatment everywhere. The outline follows each element's own
   radius, so never set border-radius here. */
:focus-visible { outline: 2px solid var(--ss-accent); outline-offset: 2px; }
.btn:focus, .btn:focus-visible,
.form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: none; }
.btn:focus-visible, .form-check-input:focus-visible {
  outline: 2px solid var(--ss-accent);
  outline-offset: 2px;
}

* { scrollbar-width: thin; scrollbar-color: var(--ss-scrollbar) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ss-scrollbar);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ss-text-mute); background-clip: content-box; }

/* ───────────────────────────────────────────────────────────────
   4. Navbar
   ─────────────────────────────────────────────────────────────── */
.ss-navbar {
  background: color-mix(in srgb, var(--ss-ground) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  border-bottom: 1px solid var(--ss-line);
  position: sticky;
  top: 0;
  z-index: 1030;
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ss-navbar { background: var(--ss-ground); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ss-navbar { background: var(--ss-ground); }
}
.ss-navbar .navbar-brand { font-size: 1.12rem; letter-spacing: -.032em; font-weight: 600; }
.ss-navbar .navbar-brand .bi { color: var(--ss-accent-text); }
.ss-navbar .nav-link {
  color: var(--ss-text-dim);
  border-radius: var(--ss-radius-xs);
  padding: .4rem .7rem;
  font-size: .9rem;
  transition: color var(--ss-transition), background var(--ss-transition);
}
.ss-navbar .nav-link:hover,
.ss-navbar .nav-link:focus-visible { color: var(--ss-text); background: var(--ss-surface-3); }
.ss-navbar .nav-link.active { color: var(--ss-text); font-weight: 600; }
.navbar-toggler { color: var(--ss-text-dim); border-color: var(--ss-line-2); }
.navbar-toggler:focus { box-shadow: none; }

/* The collapsed menu needs its own ground, or it reads through the blur
   and overlaps the page content behind it. */
@media (max-width: 991.98px) {
  .ss-navbar .navbar-collapse {
    background: var(--ss-surface);
    border: 1px solid var(--ss-line);
    border-radius: var(--ss-radius);
    margin-top: .6rem;
    padding: .6rem;
    max-height: calc(100vh - 5.5rem);
    overflow-y: auto;
  }
  .ss-navbar .navbar-nav { gap: .15rem !important; }
  .ss-navbar .nav-link { padding: .55rem .7rem; }
}

/* ───────────────────────────────────────────────────────────────
   5. Cards — flat, hairline, warm
   ─────────────────────────────────────────────────────────────── */
.ss-card {
  position: relative;
  background: var(--ss-surface);
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  transition: border-color var(--ss-transition), background var(--ss-transition), transform var(--ss-transition);
}
.ss-card-header {
  padding: .95rem 1.4rem;
  border-bottom: 1px solid var(--ss-line);
  background: var(--ss-surface-2);
  border-radius: var(--ss-radius) var(--ss-radius) 0 0;
  font-weight: 600;
  font-size: .88rem;
  letter-spacing: -.018em;
}
.ss-card-body { padding: 1.4rem; }

/* Hover life belongs to interactive cards only. */
a.ss-card, button.ss-card, .ss-card--interactive { cursor: pointer; color: inherit; }
a.ss-card:hover, button.ss-card:hover, .ss-card--interactive:hover {
  border-color: var(--ss-accent-line);
  background: var(--ss-surface-2);
  transform: translateY(-1px);
}
a.ss-card:active, button.ss-card:active, .ss-card--interactive:active { transform: scale(.99); }

/* Cursor spotlight, as on the landing's feature grid. */
[data-ss-spotlight] .ss-card { overflow: hidden; }
[data-ss-spotlight] .ss-card::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .32s var(--ss-ease);
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), var(--ss-accent-soft), transparent 62%);
}
[data-ss-spotlight] .ss-card:hover::before { opacity: 1; }

/* ───────────────────────────────────────────────────────────────
   6. Stat cards
   ─────────────────────────────────────────────────────────────── */
.ss-stat {
  border-radius: var(--ss-radius);
  padding: 1.15rem 1.3rem;
  display: flex;
  align-items: center;
  gap: .95rem;
  min-width: 0;
}
.ss-stat > div { min-width: 0; }
.ss-stat-icon {
  width: 42px; height: 42px;
  border-radius: var(--ss-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  background: var(--ss-surface-3);
  color: var(--ss-text-mute);
  transition: color var(--ss-transition), background var(--ss-transition);
}
a.ss-card:hover .ss-stat-icon, .ss-card--interactive:hover .ss-stat-icon { color: var(--ss-text); }

/* Legacy decorative modifiers collapse to the neutral baseline. */
.ss-stat-icon.blue, .ss-stat-icon.green, .ss-stat-icon.amber,
.ss-stat-icon.red,  .ss-stat-icon.purple {
  background: var(--ss-surface-3);
  color: var(--ss-text-mute);
}
/* Opt-in state modifiers — only where the colour means something. */
.ss-stat-icon.is-primary { background: var(--ss-accent-soft); color: var(--ss-accent-text); }
.ss-stat-icon.is-success { background: var(--ss-ok-soft);     color: var(--ss-ok); }
.ss-stat-icon.is-danger  { background: var(--ss-bad-soft);    color: var(--ss-bad); }
.ss-stat-icon.is-warning { background: var(--ss-warn-soft);   color: var(--ss-warn); }

/* Figures shouldn't jitter as they change. */
.ss-stat .fs-5, .ss-stat .fs-6, .stat__v, [data-to] { font-variant-numeric: tabular-nums; }

/* ───────────────────────────────────────────────────────────────
   7. Avatar, badges, dot
   ─────────────────────────────────────────────────────────────── */
.ss-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ss-accent-soft);
  color: var(--ss-accent-text);
  border: 1px solid var(--ss-accent-line);
  font-weight: 700; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--ss-transition), background var(--ss-transition);
}
.ss-avatar-lg { width: 54px; height: 54px; font-size: 1.25rem; }

.ss-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 20px;
  font-size: .74rem; font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ss-badge-active  { background: var(--ss-ok-soft);   color: var(--ss-ok); }
.ss-badge-expired { background: var(--ss-bad-soft);  color: var(--ss-bad); }
.ss-badge-pending { background: var(--ss-warn-soft); color: var(--ss-warn); }
.ss-badge-cancelled,
.ss-badge-neutral { background: var(--ss-surface-3); color: var(--ss-text-mute); }

.ss-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ss-bad); display: inline-block; }

/* ───────────────────────────────────────────────────────────────
   8. Sidebar
   ─────────────────────────────────────────────────────────────── */
.ss-sidebar { width: 232px; flex-shrink: 0; }
.ss-sidebar-link {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .75rem;
  border-radius: var(--ss-radius-sm);
  color: var(--ss-text-dim);
  text-decoration: none;
  font-size: .875rem;
  transition: background var(--ss-transition), color var(--ss-transition);
}
.ss-sidebar-link .bi { color: var(--ss-text-mute); transition: color var(--ss-transition); }
.ss-sidebar-link:hover { background: var(--ss-surface-3); color: var(--ss-text); }
.ss-sidebar-link:hover .bi { color: var(--ss-text-dim); }
.ss-sidebar-link.active {
  background: var(--ss-accent-soft);
  color: var(--ss-accent-text);
  font-weight: 600;
}
.ss-sidebar-link.active .bi { color: var(--ss-accent-text); }

/* ── 8b. Grouped, collapsible sidebar navigation ───────────── */
.ss-navgroup + .ss-navgroup { margin-top: .35rem; }
.ss-navgroup-head {
  display: flex; align-items: center; gap: .5rem;
  width: 100%;
  padding: .5rem .75rem .3rem;
  background: none; border: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--ss-text-mute);
  cursor: pointer;
  border-radius: var(--ss-radius-xs);
  transition: color var(--ss-transition);
}
.ss-navgroup-head:hover { color: var(--ss-text-dim); }
.ss-navgroup-head span { flex: 1; text-align: left; }
.ss-navgroup-head .bi { font-size: .62rem; transition: transform var(--ss-transition); }
.ss-navgroup-head[aria-expanded="false"] .bi { transform: rotate(-90deg); }

.ss-navgroup-body { display: grid; gap: 1px; overflow: hidden; }
.ss-navgroup-head[aria-expanded="false"] + .ss-navgroup-body { display: none; }

.ss-sidebar-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-nav-badge {
  flex: none;
  min-width: 1.15rem; padding: 0 .32rem;
  background: var(--ss-warn-soft); color: var(--ss-warn);
  border-radius: 20px;
  font-size: .68rem; font-weight: 700; line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── 8b-ii. Section sub-navigation (analytics, settings) ──── */
.ss-subnav {
  display: flex; gap: .25rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--ss-line);
  padding-bottom: .1rem;
}
.ss-subnav::-webkit-scrollbar { display: none; }
.ss-subnav-link {
  display: inline-flex; align-items: center; gap: .45rem;
  flex: 0 0 auto;
  padding: .5rem .75rem;
  font-size: .85rem; font-weight: 500;
  color: var(--ss-text-mute);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: color var(--ss-transition), border-color var(--ss-transition);
}
.ss-subnav-link .bi { font-size: .85rem; }
.ss-subnav-link:hover { color: var(--ss-text); }
.ss-subnav-link.active { color: var(--ss-accent-text); border-bottom-color: var(--ss-accent); font-weight: 600; }

/* ── 8c. KPI tiles, health rows, activity feed ─────────────── */
.ss-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--ss-line); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); overflow: hidden; }
.ss-kpi { position: relative; background: var(--ss-surface); padding: 1.15rem 1.25rem; min-width: 0; overflow: hidden; }
.ss-kpi-k { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ss-text-mute); }
.ss-kpi-v { font-size: clamp(1.45rem, 3.4vw, 1.85rem); font-weight: 700; letter-spacing: -.045em; margin-top: .55rem; font-variant-numeric: tabular-nums; line-height: 1.05; }
.ss-kpi-sub { font-size: .76rem; color: var(--ss-text-mute); margin-top: .3rem; }

.ss-trend {
  display: inline-flex; align-items: center; gap: .22rem;
  margin-top: .45rem;
  font-size: .74rem; font-weight: 600;
  padding: .12rem .45rem; border-radius: 20px;
  font-variant-numeric: tabular-nums;
}
.ss-trend.up   { background: var(--ss-ok-soft);  color: var(--ss-ok); }
.ss-trend.down { background: var(--ss-bad-soft); color: var(--ss-bad); }
.ss-trend.flat { background: var(--ss-surface-3); color: var(--ss-text-mute); }

.ss-health { display: grid; gap: 1px; }
.ss-health-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .35rem;
  border-bottom: 1px solid var(--ss-line);
  font-size: .875rem;
  color: inherit; text-decoration: none;
  transition: background var(--ss-transition-fast);
}
.ss-health-row:last-child { border-bottom: 0; }
a.ss-health-row:hover { background: var(--ss-surface-2); }
.ss-health-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ss-health-dot.ok   { background: var(--ss-ok);   box-shadow: 0 0 0 3px var(--ss-ok-soft); }
.ss-health-dot.warn { background: var(--ss-warn); box-shadow: 0 0 0 3px var(--ss-warn-soft); }
.ss-health-dot.bad  { background: var(--ss-bad);  box-shadow: 0 0 0 3px var(--ss-bad-soft); animation: ss-pulse 2.4s ease-in-out infinite; }
.ss-health-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-health-detail { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .74rem; color: var(--ss-text-mute); text-align: right; overflow-wrap: anywhere; }

.ss-activity { display: grid; }
.ss-activity-row {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) minmax(0, 1.3fr) auto;
  align-items: center; gap: .7rem;
  padding: .62rem .35rem;
  border-bottom: 1px solid var(--ss-line);
  font-size: .84rem;
}
.ss-activity-row:last-child { border-bottom: 0; }
.ss-activity-who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-activity-detail { color: var(--ss-text-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-activity-when { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; color: var(--ss-text-mute); white-space: nowrap; }
@media (max-width: 575.98px) {
  .ss-activity-row { grid-template-columns: 8px minmax(0, 1fr) auto; }
  .ss-activity-detail { display: none; }
}
@keyframes ss-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ── 8d. Area chart — the "modern graph" treatment ─────────── */
.ss-area { display: block; width: 100%; height: auto; overflow: visible; }
.ss-area-fill  { fill: url(#ssAreaGrad); }
.ss-area-line  { fill: none; stroke: var(--ss-series-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-area-dot   { fill: var(--ss-surface); stroke: var(--ss-series-1); stroke-width: 2; }
.ss-area-grid line { stroke: var(--ss-line); stroke-width: 1; }
.ss-area-axis { fill: var(--ss-text-mute); font-size: 9px; font-weight: 500; }
.ss-area-hit { fill: transparent; }
.ss-area-col:hover .ss-area-hit { fill: var(--ss-accent-softer); }
.ss-area-col:hover .ss-area-dot { r: 4.5; }
/* The line draws itself in once, then stays put. */
.ss-area-line.is-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: ss-draw 1.1s var(--ss-ease) forwards; }
@keyframes ss-draw { to { stroke-dashoffset: 0; } }

/* ───────────────────────────────────────────────────────────────
   9. Buttons
   Clay fill carries near-black ink in BOTH themes: white on #D97757
   measures 3.1:1 and fails, ink gives 5.9:1.
   ─────────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--ss-radius-sm);
  font-weight: 500;
  letter-spacing: -.012em;
  transition: background-color var(--ss-transition), border-color var(--ss-transition),
              color var(--ss-transition), transform var(--ss-transition-fast), opacity var(--ss-transition);
}
.btn:hover:not(:disabled):not(.disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled):not(.disabled) { transform: scale(.97); }

.btn-primary {
  --bs-btn-bg: var(--ss-accent-2);
  --bs-btn-border-color: var(--ss-accent-2);
  --bs-btn-color: #1A1310;
  --bs-btn-hover-bg: #E88C6B;
  --bs-btn-hover-border-color: #E88C6B;
  --bs-btn-hover-color: #1A1310;
  --bs-btn-active-bg: var(--ss-accent);
  --bs-btn-active-border-color: var(--ss-accent);
  --bs-btn-active-color: #1A1310;
  --bs-btn-disabled-bg: var(--ss-accent-2);
  --bs-btn-disabled-border-color: var(--ss-accent-2);
  --bs-btn-disabled-color: #1A1310;
  font-weight: 600;
}

.btn-ghost, .btn-outline-secondary {
  background: transparent;
  border: 1px solid var(--ss-line-2);
  color: var(--ss-text-dim);
}
.btn-ghost:hover, .btn-outline-secondary:hover {
  background: var(--ss-surface-3);
  border-color: var(--ss-line-strong);
  color: var(--ss-text);
}
.btn-outline-primary {
  --bs-btn-color: var(--ss-accent-text);
  --bs-btn-border-color: var(--ss-accent-line);
  --bs-btn-hover-bg: var(--ss-accent-2);
  --bs-btn-hover-border-color: var(--ss-accent-2);
  --bs-btn-hover-color: #1A1310;
  --bs-btn-active-bg: var(--ss-accent);
  --bs-btn-active-color: #1A1310;
}
.btn-danger  { --bs-btn-bg: var(--ss-bad); --bs-btn-border-color: var(--ss-bad); --bs-btn-color: #fff; }
.btn-success { --bs-btn-bg: var(--ss-ok);  --bs-btn-border-color: var(--ss-ok);  --bs-btn-color: #fff; }
[data-bs-theme="dark"] .btn-danger,
[data-bs-theme="dark"] .btn-success { --bs-btn-color: #12100E; }

/* Loading state keeps the button's box and swaps the label for a spinner. */
.btn.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  transform: none;
}
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 1em; height: 1em; margin: -.5em 0 0 -.5em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--bs-btn-color, var(--ss-text));
  animation: ss-spin .6s linear infinite;
}

/* ───────────────────────────────────────────────────────────────
   10. Forms
   ─────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--ss-radius-sm);
  border: 1px solid var(--ss-line-2);
  background: var(--ss-surface);
  color: var(--ss-text);
  padding: .6rem .85rem;
  transition: border-color var(--ss-transition), background var(--ss-transition);
}
.form-control:hover:not(:focus), .form-select:hover:not(:focus) { border-color: var(--ss-line-strong); }
.form-control:focus, .form-select:focus {
  border-color: var(--ss-accent);
  outline: 2px solid var(--ss-accent);
  outline-offset: 1px;
  background: var(--ss-surface);
  color: var(--ss-text);
}
.form-control::placeholder { color: var(--ss-text-mute); opacity: 1; }
.form-label { font-size: .875rem; }
.form-text { color: var(--ss-text-mute); font-size: .8rem; }
.form-check-input { background-color: var(--ss-surface); border-color: var(--ss-line-strong); }
.form-check-input:checked { background-color: var(--ss-accent-2); border-color: var(--ss-accent-2); }
.input-group-text {
  background: var(--ss-surface-2);
  border-color: var(--ss-line-2);
  color: var(--ss-text-mute);
}

.ss-upload-zone {
  border: 1px dashed var(--ss-line-strong);
  border-radius: var(--ss-radius);
  padding: 1.75rem;
  text-align: center;
  cursor: pointer;
  background: var(--ss-surface-2);
  transition: border-color var(--ss-transition), background var(--ss-transition);
}
.ss-upload-zone:hover, .ss-upload-zone.dragover {
  border-color: var(--ss-accent);
  background: var(--ss-accent-softer);
}

/* ───────────────────────────────────────────────────────────────
   11. Dropdowns
   ─────────────────────────────────────────────────────────────── */
.dropdown-menu {
  --bs-dropdown-bg: var(--ss-surface);
  --bs-dropdown-border-color: var(--ss-line-2);
  --bs-dropdown-link-color: var(--ss-text-dim);
  --bs-dropdown-link-hover-color: var(--ss-text);
  --bs-dropdown-link-hover-bg: var(--ss-surface-3);
  --bs-dropdown-link-active-bg: var(--ss-surface-3);
  --bs-dropdown-link-active-color: var(--ss-text);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-overlay-shadow);
  padding: .35rem;
  font-size: .875rem;
  max-width: calc(100vw - 1.5rem);
}
.dropdown-menu .dropdown-item {
  display: flex; align-items: center; gap: .6rem;
  border-radius: var(--ss-radius-xs);
  padding: .45rem .65rem;
  transition: background var(--ss-transition-fast), color var(--ss-transition-fast);
}
.dropdown-menu .dropdown-item > .bi { font-size: .9rem; width: 1rem; color: var(--ss-text-mute); }
.dropdown-menu .dropdown-item:hover > .bi { color: var(--ss-accent-text); }
.dropdown-divider { border-color: var(--ss-line); margin: .3rem 0; }
.ss-dropdown-head { padding: .45rem .65rem .35rem; font-size: .8rem; max-width: 15rem; }
.dropdown-menu.show { animation: ss-reveal .2s ease-out both; }
.dropdown-menu[data-popper-placement^="top"].show { animation-name: ss-reveal-up; }

/* ───────────────────────────────────────────────────────────────
   12. Tables
   ─────────────────────────────────────────────────────────────── */
.ss-table {
  border-radius: var(--ss-radius);
  border: 1px solid var(--ss-line);
  background: var(--ss-surface);
  /* Narrow screens scroll the table instead of bursting the layout. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ss-table table { margin: 0; font-size: .875rem; }
.ss-table thead th {
  background: var(--ss-surface-2);
  color: var(--ss-text-mute);
  font-weight: 600;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--ss-line);
  padding: .7rem 1rem;
  white-space: nowrap;
}
.ss-table tbody td {
  padding: .68rem 1rem;
  border-bottom: 1px solid var(--ss-line);
  vertical-align: middle;
  color: var(--ss-text);
}
.ss-table tbody tr { transition: background var(--ss-transition-fast); }
.ss-table tbody tr:hover { background: var(--ss-surface-2); }
.ss-table tbody tr:last-child td { border-bottom: none; }
.table { --bs-table-color: var(--ss-text); --bs-table-bg: transparent; --bs-table-border-color: var(--ss-line); }

/* ───────────────────────────────────────────────────────────────
   13. Notices
   ─────────────────────────────────────────────────────────────── */
.alert {
  --bs-alert-bg: var(--ss-surface-2);
  --bs-alert-border-color: var(--ss-line);
  --bs-alert-color: var(--ss-text);
  border-radius: var(--ss-radius);
  border-width: 1px;
  padding: .85rem 1rem;
  font-size: .9rem;
}
.alert-success { --bs-alert-bg: var(--ss-ok-soft);     --bs-alert-border-color: transparent; --bs-alert-color: var(--ss-ok); }
.alert-danger  { --bs-alert-bg: var(--ss-bad-soft);    --bs-alert-border-color: transparent; --bs-alert-color: var(--ss-bad); }
.alert-warning { --bs-alert-bg: var(--ss-warn-soft);   --bs-alert-border-color: transparent; --bs-alert-color: var(--ss-warn); }
.alert-info    { --bs-alert-bg: var(--ss-accent-soft); --bs-alert-border-color: transparent; --bs-alert-color: var(--ss-accent-text); }

/* ───────────────────────────────────────────────────────────────
   14. Toasts
   ─────────────────────────────────────────────────────────────── */
.ss-toasts {
  position: fixed;
  top: 4.75rem; right: 1rem;
  z-index: 1090;
  display: flex; flex-direction: column; gap: .5rem;
  width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}
.ss-toast {
  position: relative;
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .75rem .85rem;
  background: var(--ss-surface);
  border: 1px solid var(--ss-line-2);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-overlay-shadow);
  overflow: hidden;
  pointer-events: auto;
  animation: ss-toast-in .2s ease-out both;
}
.ss-toast.is-leaving { animation: ss-toast-out .15s ease-out both; }
.ss-toast-icon { font-size: 1rem; line-height: 1.35; color: var(--ss-text-mute); flex-shrink: 0; }
.ss-toast--success .ss-toast-icon { color: var(--ss-ok); }
.ss-toast--error   .ss-toast-icon { color: var(--ss-bad); }
.ss-toast--warning .ss-toast-icon { color: var(--ss-warn); }
.ss-toast-body { flex: 1; min-width: 0; font-size: .85rem; line-height: 1.4; color: var(--ss-text); overflow-wrap: anywhere; }
.ss-toast-body ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.ss-toast-close {
  background: none; border: 0;
  padding: .1rem .25rem;
  color: var(--ss-text-mute);
  font-size: .8rem; line-height: 1;
  border-radius: var(--ss-radius-xs);
  cursor: pointer;
  transition: color var(--ss-transition), background var(--ss-transition);
}
.ss-toast-close:hover { color: var(--ss-text); background: var(--ss-surface-3); }
.ss-toast-bar {
  position: absolute; left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--ss-line-strong);
  transform-origin: left center;
  animation: ss-toast-bar linear forwards;
}
.ss-toast--success .ss-toast-bar { background: var(--ss-ok); }
.ss-toast--error   .ss-toast-bar { background: var(--ss-bad); }
.ss-toast--warning .ss-toast-bar { background: var(--ss-warn); }
.ss-toast:hover .ss-toast-bar { animation-play-state: paused; }
@media (max-width: 575.98px) {
  .ss-toasts { top: auto; bottom: 1rem; left: 1rem; right: 1rem; width: auto; }
}

/* ───────────────────────────────────────────────────────────────
   15. Keyboard hints, search trigger, user menu
   ─────────────────────────────────────────────────────────────── */
.ss-kbd {
  display: inline-flex; align-items: center; gap: .1rem;
  padding: .1rem .35rem;
  font-family: inherit; font-size: .68rem; font-weight: 600; line-height: 1.4;
  color: var(--ss-text-mute);
  background: var(--ss-surface-3);
  border: 1px solid var(--ss-line-2);
  border-radius: 5px;
}
.ss-cmdk-trigger {
  display: flex; align-items: center; gap: .5rem;
  min-width: 190px;
  padding: .35rem .45rem .35rem .65rem;
  font-size: .82rem;
  color: var(--ss-text-mute);
  background: var(--ss-surface-3);
  border: 1px solid var(--ss-line-2);
  border-radius: var(--ss-radius-sm);
  cursor: pointer;
  transition: border-color var(--ss-transition), background var(--ss-transition), color var(--ss-transition);
}
.ss-cmdk-trigger:hover { border-color: var(--ss-accent-line); color: var(--ss-text-dim); }
.ss-cmdk-trigger-label { flex: 1; text-align: left; }

.ss-user-menu {
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem .5rem .25rem .25rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ss-text-dim);
  font-size: .85rem;
  cursor: pointer;
  max-width: 100%;
  transition: background var(--ss-transition), border-color var(--ss-transition), color var(--ss-transition);
}
.ss-user-menu:hover, .ss-user-menu[aria-expanded="true"] {
  background: var(--ss-surface-3);
  border-color: var(--ss-line-2);
  color: var(--ss-text);
}
.ss-user-menu-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 10rem; }
.ss-user-menu-caret { font-size: .65rem; transition: transform var(--ss-transition); }
.ss-user-menu[aria-expanded="true"] .ss-user-menu-caret { transform: rotate(180deg); }

@media (max-width: 991.98px) {
  .ss-cmdk-trigger { width: 100%; margin: .4rem 0; }
  .ss-user-menu { width: 100%; justify-content: flex-start; border-radius: var(--ss-radius-sm); }
  .ss-user-menu-name { max-width: none; }
}

/* ───────────────────────────────────────────────────────────────
   16. Command palette
   ─────────────────────────────────────────────────────────────── */
body.ss-cmdk-open { overflow: hidden; }
.ss-cmdk { position: fixed; inset: 0; z-index: 1085; }
.ss-cmdk-backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 19, 16, .4);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: ss-fade .2s ease-out both;
}
[data-bs-theme="dark"] .ss-cmdk-backdrop { background: rgba(0, 0, 0, .62); }
.ss-cmdk-panel {
  position: relative;
  width: min(560px, calc(100vw - 2rem));
  margin: 12vh auto 0;
  background: var(--ss-surface);
  border: 1px solid var(--ss-line-2);
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-overlay-shadow);
  overflow: hidden;
  animation: ss-cmdk-in .2s ease-out both;
}
.ss-cmdk-field {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--ss-line);
  color: var(--ss-text-mute);
}
.ss-cmdk-input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  color: var(--ss-text); font-family: inherit; font-size: .95rem;
}
.ss-cmdk-input::placeholder { color: var(--ss-text-mute); }
.ss-cmdk-list { list-style: none; margin: 0; padding: .35rem; max-height: 48vh; overflow-y: auto; }
.ss-cmdk-group {
  padding: .5rem .65rem .3rem;
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ss-text-mute);
}
.ss-cmdk-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .65rem;
  border-radius: var(--ss-radius-xs);
  font-size: .875rem;
  color: var(--ss-text-dim);
  cursor: pointer;
  transition: background var(--ss-transition-fast), color var(--ss-transition-fast);
}
.ss-cmdk-item > .bi { font-size: .9rem; width: 1rem; color: var(--ss-text-mute); }
.ss-cmdk-item.is-active { background: var(--ss-accent-soft); color: var(--ss-text); }
.ss-cmdk-item.is-active > .bi { color: var(--ss-accent-text); }
.ss-cmdk-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-cmdk-enter { opacity: 0; font-size: .8rem; }
.ss-cmdk-item.is-active .ss-cmdk-enter { opacity: 1; }
.ss-cmdk-empty { padding: 1.75rem 1rem; text-align: center; color: var(--ss-text-mute); font-size: .875rem; margin: 0; }
.ss-cmdk-foot {
  display: flex; gap: 1rem;
  padding: .55rem .85rem;
  border-top: 1px solid var(--ss-line);
  background: var(--ss-surface-2);
  font-size: .72rem; color: var(--ss-text-mute);
}
.ss-cmdk-foot span { display: inline-flex; align-items: center; gap: .25rem; }
@media (max-width: 575.98px) {
  .ss-cmdk-panel { margin-top: 5vh; }
  .ss-cmdk-foot { display: none; }
}

/* ───────────────────────────────────────────────────────────────
   17. Chart & progress
   ─────────────────────────────────────────────────────────────── */
.ss-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ss-chart-grid line { stroke: var(--ss-line); stroke-width: 1; }
.ss-chart-axis { fill: var(--ss-text-mute); font-size: 9px; font-weight: 500; }
.ss-chart-col { cursor: default; }
.ss-chart-col rect.ss-chart-hit { fill: transparent; }
.ss-chart-col:hover rect.ss-chart-hit { fill: var(--ss-surface-3); }
.ss-bar-premium { fill: var(--ss-series-1); }
.ss-bar-free    { fill: var(--ss-series-2); }

.ss-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .78rem; color: var(--ss-text-dim); }
.ss-legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.ss-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.ss-chart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; min-height: 180px;
  color: var(--ss-text-mute); text-align: center;
}

.progress { background: var(--ss-surface-3); border-radius: 10px; }
.progress-bar { transition: width .5s var(--ss-ease); }
.bg-success { background-color: var(--ss-ok) !important; }
.bg-warning { background-color: var(--ss-warn) !important; }
.bg-danger  { background-color: var(--ss-bad) !important; }
.text-success { color: var(--ss-ok) !important; }
.text-warning { color: var(--ss-warn) !important; }
.text-danger  { color: var(--ss-bad) !important; }
.text-primary { color: var(--ss-accent-text) !important; }
.text-body-secondary { color: var(--ss-text-dim) !important; }

/* ───────────────────────────────────────────────────────────────
   18. Skeletons & busy states
   ─────────────────────────────────────────────────────────────── */
.ss-skeleton {
  position: relative; overflow: hidden; display: block;
  background: var(--ss-surface-3);
  border-radius: var(--ss-radius-xs);
}
.ss-skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--ss-skeleton-shine), transparent);
  animation: ss-shimmer 1.4s infinite;
}
.ss-skeleton-text   { height: .8rem; margin-bottom: .5rem; }
.ss-skeleton-text:last-child { margin-bottom: 0; }
.ss-skeleton-title  { height: 1.35rem; width: 45%; margin-bottom: .75rem; }
.ss-skeleton-circle { border-radius: 50%; width: 42px; height: 42px; }
.ss-skeleton-btn    { height: 2.3rem; width: 7rem; border-radius: var(--ss-radius-sm); }
.ss-skeleton.w-40 { width: 40%; } .ss-skeleton.w-60 { width: 60%; } .ss-skeleton.w-80 { width: 80%; }

[data-ss-skeleton] > .ss-skeleton-layer { display: none; }
[data-ss-skeleton="on"] > .ss-skeleton-layer { display: block; }
[data-ss-skeleton="on"] > .ss-content-layer { display: none; }
.ss-busy { pointer-events: none; opacity: .55; transition: opacity var(--ss-transition); }

/* ───────────────────────────────────────────────────────────────
   19. Feature surfaces
   ─────────────────────────────────────────────────────────────── */
.ss-auth-card { max-width: 420px; margin: 4vh auto; }
.ss-auth-card .ss-card-body { padding: 2rem; }

.ss-offer-card { max-width: 540px; margin: 0 auto; }
.ss-price-big { font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 800; color: var(--ss-text); line-height: 1; letter-spacing: -.05em; }
.ss-price-orig { font-size: 1.05rem; text-decoration: line-through; color: var(--ss-text-mute); }
.ss-countdown { font-size: clamp(2rem, 7vw, 3rem); font-weight: 800; line-height: 1; color: var(--ss-text); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.ss-progress-ring { transform: rotate(-90deg); }

.ss-plan-card {
  border-radius: var(--ss-radius);
  border: 1px solid var(--ss-line);
  background: var(--ss-surface);
  padding: 1.6rem;
  cursor: pointer;
  position: relative;
  transition: border-color var(--ss-transition), background var(--ss-transition), transform var(--ss-transition);
}
.ss-plan-card:hover { border-color: var(--ss-line-strong); transform: translateY(-2px); }
.ss-plan-card.featured, .ss-plan-card.selected {
  border-color: var(--ss-accent-line);
  background: linear-gradient(180deg, var(--ss-accent-softer), transparent 55%), var(--ss-surface);
}
.ss-plan-card .ss-plan-price { font-size: clamp(1.8rem, 5vw, 2.4rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.ss-plan-badge {
  position: absolute; top: -11px; left: 50%;
  transform: translateX(-50%);
  background: var(--ss-accent-2); color: #1A1310;
  font-size: .66rem; font-weight: 700;
  padding: .2rem .7rem; border-radius: 20px;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}

.ss-checkout-card { max-width: 460px; margin: 0 auto; }
.ss-qr-box {
  background: #fff;
  border-radius: var(--ss-radius);
  padding: 1.25rem;
  display: inline-flex; flex-direction: column; align-items: center; gap: .75rem;
  border: 1px solid var(--ss-line-2);
  max-width: 100%;
}
.ss-qr-box img { width: min(180px, 55vw); height: auto; object-fit: contain; }
.ss-step { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem 0; }
.ss-step-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ss-surface-3); color: var(--ss-text-mute);
  font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ss-step.warn .ss-step-num { background: var(--ss-bad-soft); color: var(--ss-bad); }

.ss-admin-layout { display: flex; gap: 1.75rem; align-items: flex-start; }
.ss-admin-content { flex: 1; min-width: 0; }
.ss-footer { border-top: 1px solid var(--ss-line); }
.ss-footer a:hover { color: var(--ss-accent-text) !important; }

code, .font-monospace { color: var(--ss-accent-text); }
hr { border-color: var(--ss-line); opacity: 1; }

/* ───────────────────────────────────────────────────────────────
   20. Scroll reveal
   ─────────────────────────────────────────────────────────────── */
[data-rise] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ss-ease), transform .6s var(--ss-ease);
}
[data-rise].is-in { opacity: 1; transform: none; }

/* ───────────────────────────────────────────────────────────────
   21. Keyframes
   ─────────────────────────────────────────────────────────────── */
@keyframes ss-reveal    { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ss-reveal-up { from { opacity: 0; transform: translateY(6px) scale(.98); }  to { opacity: 1; transform: none; } }
@keyframes ss-toast-in  { from { opacity: 0; transform: translateX(16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ss-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(16px) scale(.97); } }
@keyframes ss-toast-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes ss-shimmer   { 100% { transform: translateX(100%); } }
@keyframes ss-spin      { to { transform: rotate(360deg); } }
@keyframes ss-fade      { from { opacity: 0; } to { opacity: 1; } }
@keyframes ss-cmdk-in   { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }

/* ───────────────────────────────────────────────────────────────
   22. Responsive
   These target the overlap/overflow classes of bug directly: nothing
   may exceed the viewport width, and wide content scrolls in its own
   container rather than pushing the page sideways.
   ─────────────────────────────────────────────────────────────── */
img, svg, video, canvas { max-width: 100%; height: auto; }
pre, code { overflow-wrap: anywhere; }
.table-responsive, .an-table-scroll { -webkit-overflow-scrolling: touch; }

@media (max-width: 991.98px) {
  .ss-admin-layout { flex-direction: column; gap: 1rem; }
  .ss-sidebar { width: 100%; }
  /* The sidebar becomes a scrollable horizontal rail rather than
     vanishing, so admin navigation stays reachable on a phone. */
  .ss-sidebar nav {
    display: flex; gap: .3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .3rem;
    scrollbar-width: none;
  }
  .ss-sidebar nav::-webkit-scrollbar { display: none; }
  .ss-sidebar-link { white-space: nowrap; flex: 0 0 auto; font-size: .82rem; padding: .5rem .7rem; }
}

@media (max-width: 767.98px) {
  .ss-card-body { padding: 1.1rem; }
  .ss-card-header { padding: .85rem 1.1rem; }
  .ss-stat { padding: 1rem 1.1rem; gap: .8rem; }
  .ss-stat-icon { width: 38px; height: 38px; font-size: 1rem; }
  .ss-auth-card { margin: 2vh auto; }
  .ss-auth-card .ss-card-body { padding: 1.4rem; }
  .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 575.98px) {
  body { font-size: 15px; }
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.3rem; }
  h3, .h3 { font-size: 1.15rem; }
  .ss-table table { font-size: .82rem; }
  .ss-table thead th, .ss-table tbody td { padding: .55rem .7rem; }
}

/* ───────────────────────────────────────────────────────────────
   23. Motion preferences
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, a.ss-card:hover, .ss-card--interactive:hover, .ss-plan-card:hover { transform: none; }
  .ss-skeleton::after { display: none; }
  [data-rise] { opacity: 1; transform: none; }
  .ss-health-dot.bad { animation: none; }
  /* Show the finished line rather than an un-drawn one. */
  .ss-area-line.is-draw { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  /* The countdown bar is also the dismiss timer: squashed to 0.01ms it
     would fire animationend instantly and close the toast unread. */
  .ss-toast-bar { display: none; animation: none !important; }
}