/* ============================================================================
   Cenvero Design System — light editorial premium.
   Warm paper foundation, neutral ink type, brand gradient used sparingly.
   Single source of truth for the whole Laravel panel (admin + public).
   Loaded as a static stylesheet (works in dev + prod, no build step) on top
   of the Tailwind CDN, which still provides layout/spacing utilities.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Tokens
   ---------------------------------------------------------------------------- */
:root {
  --paper:        #f5f3ed;  /* page background — warm off-white */
  --card-hex:     #fffdf8;  /* base card white */
  --ink-hex:      #1a1820;  /* primary text — near-black, warm */
  --ink-soft-hex: #615c54;  /* secondary text / body */
  --faint-hex:    #9b958c;  /* footer, tertiary labels */
  --line:         rgba(26, 24, 32, 0.08);  /* hairlines between rows */
  --line-2:       rgba(26, 24, 32, 0.12);  /* borders (cards, buttons) */

  /* Brand palette */
  --teal:   #0c9f99;  /* gradient start, "Live"/active accents */
  --blue:   #3b6fe0;  /* primary UI accent (lite blue) */
  --indigo: #4f46e5;  /* gradient stop (replaces the old magenta) */
  --violet: #8b4fe6;  /* gradient end, secondary accent */
  --amber:  #b45309;  /* restrained caution / warning accent */

  --accent-ink:   #3b6fe0;  /* solid accent for kickers, links, icon chips */
  --accent-ink-2: #8b4fe6;

  --card-shadow: 0 30px 70px -32px rgba(50, 38, 24, 0.22), 0 2px 6px rgba(50, 38, 24, 0.04);

  --grad: linear-gradient(100deg, #0c9f99 0%, #3b6fe0 34%, #4f46e5 64%, #8b4fe6 100%);

  /* Tailwind/shadcn HSL semantic mapping (light) */
  --background: 42 32% 95%;
  --foreground: 255 14% 11%;
  --card: 45 60% 99%;         --card-foreground: 255 14% 11%;
  --popover: 45 60% 99%;      --popover-foreground: 255 14% 11%;
  --primary: 222 73% 55%;     --primary-foreground: 45 60% 99%;
  --secondary: 42 28% 92%;    --secondary-foreground: 255 14% 11%;
  --muted: 42 22% 90%;        --muted-foreground: 37 8% 35%;
  --accent: 264 73% 61%;      --accent-foreground: 45 60% 99%;
  --destructive: 350 70% 50%; --destructive-foreground: 45 60% 99%;
  --border: 40 14% 85%;       --input: 40 14% 85%;   --ring: 222 73% 55%;
  --radius: 0.75rem;

  /* Fonts */
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --font-sans:  "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ----------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------------- */
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink-hex);
  font-family: var(--font-sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { flex: 1; }
::selection { background: rgba(59, 111, 224, 0.18); }
a { color: inherit; }

/* Convenience text colors */
.ink       { color: var(--ink-hex); }
.ink-soft  { color: var(--ink-soft-hex); }
.faint     { color: var(--faint-hex); }
.font-serif-d { font-family: var(--font-serif); }
.font-mono-d  { font-family: var(--font-mono); }

/* ----------------------------------------------------------------------------
   3. Type — kickers, eyebrows, display headlines, gradient text
   ---------------------------------------------------------------------------- */
.kicker {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--accent-ink);
}
.kicker--teal   { color: var(--teal); }
.kicker--violet { color: var(--accent-ink-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .85rem;
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--accent-ink);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--line-2); }

.display {
  font-family: var(--font-serif); font-weight: 400; line-height: 1.05;
  letter-spacing: -.01em; color: var(--ink-hex);
}

.grad-text {
  background: var(--grad); background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: shift 10s ease-in-out infinite alternate;
}
.grad-text-static {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.grad-bar { height: 2px; background: var(--grad); border-radius: 2px; }

/* Page header helpers (admin + public) */
.page-title { font-family: var(--font-serif); font-weight: 400; line-height: 1.05; letter-spacing: -.01em;
  color: var(--ink-hex); font-size: clamp(2rem, 4.5vw, 3rem); }
.section-title { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.01em; color: var(--ink-hex);
  font-size: clamp(1.5rem, 3vw, 2rem); }

/* ----------------------------------------------------------------------------
   4. Surfaces / cards
   ---------------------------------------------------------------------------- */
.surface {
  position: relative;
  background: linear-gradient(160deg, #fffefb 0%, #fbf8f2 100%);
  border: 1px solid var(--line-2); border-radius: 18px;
  box-shadow: var(--card-shadow);
}
.surface--soft { box-shadow: 0 10px 30px -20px rgba(50, 38, 24, .18); }
.surface--flat { background: #fffefb; box-shadow: none; }
.surface--edge::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad); border-radius: 18px 18px 0 0;
}
/* Interactive lift for clickable cards */
.surface--hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.surface--hover:hover { transform: translateY(-3px); border-color: rgba(79, 70, 229, .28);
  box-shadow: 0 36px 80px -34px rgba(50, 38, 24, .3), 0 2px 6px rgba(50, 38, 24, .05); }

.rule-row { border-top: 1px solid var(--line); }
.rule-row:first-child { border-top: 0; }

/* ----------------------------------------------------------------------------
   5. Buttons
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 3rem; padding: 0 1.55rem; border-radius: 12px;
  font-family: var(--font-sans); font-size: .9rem; font-weight: 600; line-height: 1;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  cursor: pointer; text-decoration: none; border: 1px solid transparent; white-space: nowrap;
}
.btn-ink   { background: var(--ink-hex); color: var(--paper); }
.btn-ink:hover   { transform: translateY(-1px); box-shadow: 0 16px 32px -16px rgba(26, 24, 32, .45); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink-hex); border: 1px solid var(--line-2); }
.btn-ghost:hover { border-color: rgba(26, 24, 32, .28); background: rgba(26, 24, 32, .03); transform: translateY(-1px); }
.btn-sm    { height: 2.6rem; padding: 0 1.2rem; font-size: .85rem; }
.btn-xs    { height: 2.1rem; padding: 0 .85rem; font-size: .78rem; border-radius: 10px; }
.btn-danger { background: #fff; color: #b4253e; border: 1px solid rgba(180, 37, 62, .3); }
.btn-danger:hover { background: rgba(180, 37, 62, .06); border-color: rgba(180, 37, 62, .5); transform: translateY(-1px); }
.btn[disabled], .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* Text link */
.link { color: var(--accent-ink); text-decoration: none; transition: color .2s ease; font-weight: 500; }
.link:hover { color: var(--accent-ink-2); }

/* ----------------------------------------------------------------------------
   6. Tags, badges, status dots
   ---------------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .61rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .32rem .6rem; border-radius: 999px; border: 1px solid var(--line-2); white-space: nowrap;
}
.tag .tdot { width: .42rem; height: .42rem; border-radius: 50%; flex-shrink: 0; }
.tag-teal   { color:#0a857f; border-color:rgba(12,159,153,.3); background:rgba(12,159,153,.08); } .tag-teal   .tdot{ background:#0c9f99; }
.tag-blue   { color:#2f59c0; border-color:rgba(59,111,224,.3); background:rgba(59,111,224,.08); } .tag-blue   .tdot{ background:#3b6fe0; }
.tag-violet { color:#7338cf; border-color:rgba(139,79,230,.3); background:rgba(139,79,230,.08);} .tag-violet .tdot{ background:#8b4fe6; }
.tag-indigo { color:#4338ca; border-color:rgba(79,70,229,.3);  background:rgba(79,70,229,.08); } .tag-indigo .tdot{ background:#4f46e5; }
.tag-amber  { color:#b45309; border-color:rgba(180,83,9,.25);  background:rgba(180,83,9,.06); }  .tag-amber  .tdot{ background:#b45309; }
.tag-gray   { color:var(--ink-soft-hex); border-color:var(--line-2); background:rgba(26,24,32,.03);} .tag-gray .tdot{ background:var(--faint-hex); }

/* Status badge — same palette, no dot, used in tables (active/pending/expired/revoked/online/offline...) */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .6rem; border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(26,24,32,.03); color: var(--ink-soft-hex); white-space: nowrap;
}
.badge-ok     { color:#0a857f; border-color:rgba(12,159,153,.3); background:rgba(12,159,153,.08); }
.badge-info   { color:#2f59c0; border-color:rgba(59,111,224,.3); background:rgba(59,111,224,.08); }
.badge-warn   { color:#b45309; border-color:rgba(180,83,9,.3);   background:rgba(180,83,9,.07); }
.badge-danger { color:#b4253e; border-color:rgba(180,37,62,.3);  background:rgba(180,37,62,.07); }
.badge-muted  { color:var(--ink-soft-hex); border-color:var(--line-2); background:rgba(26,24,32,.03); }
.badge-violet { color:#7338cf; border-color:rgba(139,79,230,.3); background:rgba(139,79,230,.08); }

.dot { width: .5rem; height: .5rem; border-radius: 50%; flex-shrink: 0; }
.dot-pulse { animation: pulse 2.6s ease-out infinite; }
.dot-teal { background: var(--teal); color: var(--teal); }
.dot-amber { background: var(--amber); color: var(--amber); }
.dot-gray { background: var(--faint-hex); }

/* Icon chip (feature/value cards) */
.icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(59,111,224,.12), rgba(139,79,230,.12));
  border: 1px solid rgba(59,111,224,.18); color: var(--blue);
}

/* ----------------------------------------------------------------------------
   7. Forms (admin create/upload screens)
   ---------------------------------------------------------------------------- */
.field { display: block; margin-bottom: 1.1rem; }
.label { display: block; font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft-hex); margin-bottom: .5rem; }
.input, .select, .textarea {
  width: 100%; font-family: var(--font-sans); font-size: .92rem; color: var(--ink-hex);
  background: #fffefb; border: 1px solid var(--line-2); border-radius: 12px;
  padding: .7rem .85rem; transition: border-color .2s ease, box-shadow .2s ease;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: rgba(59,111,224,.55);
  box-shadow: 0 0 0 3px rgba(59,111,224,.12);
}
.textarea { min-height: 7rem; resize: vertical; font-family: var(--font-mono); font-size: .85rem; }
.help { font-size: .78rem; color: var(--faint-hex); margin-top: .4rem; }

/* ----------------------------------------------------------------------------
   8. Tables (admin index screens)
   ---------------------------------------------------------------------------- */
.adm-table { width: 100%; border-collapse: collapse; }
.adm-table thead th {
  text-align: left; font-family: var(--font-mono); font-size: .64rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint-hex);
  padding: .9rem 1.25rem; border-bottom: 1px solid var(--line-2);
}
.adm-table tbody td { padding: 1rem 1.25rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft-hex); vertical-align: middle; }
.adm-table tbody tr:first-child td { border-top: 0; }
.adm-table tbody tr { transition: background-color .15s ease; }
.adm-table tbody tr.is-clickable { cursor: pointer; }
.adm-table tbody tr:hover { background: rgba(26,24,32,.025); }
.adm-table .cell-strong { color: var(--ink-hex); font-weight: 600; }
.mono { font-family: var(--font-mono); font-size: .82rem; }

/* ----------------------------------------------------------------------------
   9. Alerts / flash messages
   ---------------------------------------------------------------------------- */
.alert { border-radius: 14px; padding: .9rem 1.1rem; font-size: .9rem; border: 1px solid var(--line-2);
  display: flex; gap: .65rem; align-items: flex-start; }
.alert strong { font-weight: 600; }
.alert-ok     { color:#0a6f6a; border-color:rgba(12,159,153,.3); background:rgba(12,159,153,.07); }
.alert-warn   { color:#8a3f06; border-color:rgba(180,83,9,.3);   background:rgba(180,83,9,.06); }
.alert-danger { color:#922033; border-color:rgba(180,37,62,.3);  background:rgba(180,37,62,.06); }
.alert-info   { color:#2649a0; border-color:rgba(59,111,224,.3); background:rgba(59,111,224,.06); }
.alert ul { margin: 0; padding-left: 1.1rem; list-style: disc; }

/* Metric card (dashboard) */
.metric { padding: 1.4rem 1.5rem; }
.metric__label { font-family: var(--font-mono); font-size: .64rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint-hex); }
.metric__value { font-family: var(--font-serif); font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1; color: var(--ink-hex); margin-top: .55rem; }
.metric__value--teal { color: #0a857f; }
.metric__value--amber { color: var(--amber); }
.metric__value--danger { color: #b4253e; }
.metric__value--muted { color: var(--faint-hex); }

/* ----------------------------------------------------------------------------
   10. Atmosphere (rendered once behind all content)
   ---------------------------------------------------------------------------- */
.site-topbar { position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--grad); opacity: .85; z-index: 60; pointer-events: none; }
.site-atmos  { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.site-atmos .aurora { position: absolute; border-radius: 50%; filter: blur(34px); }
.site-atmos .aurora--teal   { top: -8%;  left: -6%;  width: 42vw; height: 42vw; max-width: 620px; max-height: 620px; background: rgba(12,200,190,.16); }
.site-atmos .aurora--indigo { bottom: -10%; right: -8%; width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; background: rgba(79,70,229,.13); }
.site-atmos .aurora--violet { top: 30%; left: 38%; width: 46vw; height: 46vw; max-width: 680px; max-height: 680px; background: radial-gradient(circle, rgba(139,79,230,.07) 0%, transparent 70%); filter: blur(20px); }
.site-atmos .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 56%, rgba(60,45,30,.05) 100%); }
.site-atmos .grain {
  position: absolute; inset: 0; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Everything that isn't atmosphere sits above it */
.site-shell { position: relative; z-index: 2; display: flex; flex-direction: column; flex: 1; min-height: 100vh; }

/* ----------------------------------------------------------------------------
   11. Header — floating "liquid glass" island
   ---------------------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 13px clamp(12px, 3vw, 28px) 0;
  pointer-events: none;
  transition: padding .5s cubic-bezier(.22,1,.36,1);
}
.site-header.is-scrolled { padding-top: 9px; }

.site-header__bar {
  pointer-events: auto; position: relative;
  max-width: 1180px; margin: 0 auto; border-radius: 18px;
  background: rgba(255,253,248,.5);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
          backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(26,24,32,.04),
    0 10px 30px -14px rgba(50,38,24,.2),
    0 2px 6px rgba(50,38,24,.04);
  transition: max-width .55s cubic-bezier(.22,1,.36,1), border-radius .55s cubic-bezier(.22,1,.36,1),
              background-color .4s ease, box-shadow .4s ease, border-color .4s ease;
  animation: headerIn .7s cubic-bezier(.22,1,.36,1) both;
}
.site-header.is-scrolled .site-header__bar {
  max-width: 1040px; border-radius: 16px;
  background: rgba(255,253,248,.64);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(26,24,32,.05),
              0 16px 42px -16px rgba(50,38,24,.28), 0 2px 6px rgba(50,38,24,.05);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header__bar { background: rgba(255,253,248,.92); }
}

.site-header__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1.1rem; }
.site-header__sheen {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 60%);
}
.site-header__sheen::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-160%) skewX(-14deg);
  animation: sheenSweep 1.5s cubic-bezier(.22,1,.36,1) .5s both;
}

/* Brand lockup */
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 9px; background: var(--grad); color: #fff; font-weight: 700; font-size: .9rem; font-family: var(--font-sans); }
.brand__name { font-family: var(--font-sans); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; color: var(--ink-hex); }
/* Logo image (replaces the .brand__mark + .brand__name lockup). Height tracks the
   old 30px mark so header/footer/auth chrome keeps its rhythm; width auto-scales,
   capped so an unexpectedly wide asset can never blow out the header row. */
.brand__logo { height: 30px; width: auto; max-width: 190px; object-fit: contain; display: block; }

/* Nav links — soft pill that grows in on hover; persistent on the active page */
.site-nav { display: none; align-items: center; gap: .15rem; }
@media (min-width: 860px) { .site-nav { display: flex; } }
.nav-link { position: relative; border-radius: 9px; isolation: isolate; padding: .5rem .8rem;
  font-family: var(--font-sans); font-size: .88rem; font-weight: 500; color: var(--ink-soft-hex);
  text-decoration: none; transition: color .2s ease; }
.nav-link:hover, .nav-link.is-active { color: var(--ink-hex); }
.nav-link::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: rgba(26,24,32,.05); opacity: 0; transform: scale(.82);
  transition: opacity .25s ease, transform .25s cubic-bezier(.22,1,.36,1);
}
.nav-link:hover::before { opacity: 1; transform: scale(1); }
.nav-link.is-active::before { opacity: 1; transform: scale(1); background: rgba(26,24,32,.06); }

/* Admin header carries more nav items: tighten links, switch to the mobile
   menu a bit earlier so the island never overflows. */
.site-header--admin .nav-link { padding: .5rem .62rem; font-size: .84rem; }
@media (min-width: 860px) and (max-width: 1099px) {
  .site-header--admin .site-nav { display: none; }
  .site-header--admin .menu-toggle { display: inline-flex; }
}

.site-header__actions { display: flex; align-items: center; gap: .6rem; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-hex); cursor: pointer; }
@media (min-width: 860px) { .menu-toggle { display: none; } }

/* Spacer so fixed header doesn't overlap content */
.header-spacer { height: 84px; }

/* ----------------------------------------------------------------------------
   12. Mobile menu
   ---------------------------------------------------------------------------- */
.mobile-menu { position: fixed; inset: 0; z-index: 70; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility .35s ease; }
.mobile-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu__scrim { position: absolute; inset: 0; background: rgba(245,243,237,.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.mobile-menu__panel { position: relative; height: 100%; overflow-y: auto; display: flex; flex-direction: column;
  padding: 5.5rem clamp(1.5rem, 6vw, 3rem) 2.5rem; }
.mobile-menu__close { position: absolute; top: 1.4rem; right: clamp(1rem, 4vw, 2rem); width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-hex); cursor: pointer; }
.mobile-menu__link {
  display: flex; align-items: center; gap: .8rem; padding: 1rem 0; border-top: 1px solid var(--line);
  font-family: var(--font-serif); font-style: italic; font-size: 1.7rem; color: var(--ink-hex); text-decoration: none;
  opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1), color .2s ease;
}
.mobile-menu__link:first-of-type { border-top: 0; }
.mobile-menu__link .dot { background: var(--faint-hex); }
.mobile-menu__link.is-active .dot { background: var(--grad); }
.mobile-menu.is-open .mobile-menu__link { opacity: 1; transform: translateY(0); }
.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: .06s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: .12s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: .18s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: .24s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: .30s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(6) { transition-delay: .36s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(7) { transition-delay: .42s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(8) { transition-delay: .48s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(9) { transition-delay: .54s; }
.mobile-menu__cta { margin-top: 1.8rem; }

/* ----------------------------------------------------------------------------
   13. Footer
   ---------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 5rem; }
.site-footer__inner { max-width: 1180px; margin: 0 auto; padding: 3.5rem clamp(12px, 3vw, 28px) 2.5rem; }
.footer-col h4 { font-family: var(--font-mono); font-size: .66rem; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint-hex); }
.footer-link { color: var(--ink-soft-hex); text-decoration: none; transition: color .2s ease; font-size: .9rem; }
.footer-link:hover { color: var(--accent-ink); }

/* Shared content container */
.container-c { max-width: 1180px; margin: 0 auto; padding-left: clamp(12px, 3vw, 28px); padding-right: clamp(12px, 3vw, 28px); }
.container-narrow { max-width: 760px; margin: 0 auto; padding-left: clamp(12px, 4vw, 28px); padding-right: clamp(12px, 4vw, 28px); }

/* Subtle tinted section band */
.band { background: rgba(26, 24, 32, 0.015); border-top: 1px solid var(--line); }

/* ----------------------------------------------------------------------------
   14. Motion
   ---------------------------------------------------------------------------- */
@keyframes shift      { from { background-position: 0% center; }       to { background-position: 100% center; } }
@keyframes pulse      { 0% { box-shadow: 0 0 0 0 currentColor; } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes headerIn   { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sheenSweep { from { transform: translateX(-160%) skewX(-14deg); } to { transform: translateX(360%) skewX(-14deg); } }
@keyframes rise       { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.rise-1 { animation: rise .7s cubic-bezier(.22,1,.36,1) .06s both; }
.rise-2 { animation: rise .7s cubic-bezier(.22,1,.36,1) .14s both; }
.rise-3 { animation: rise .7s cubic-bezier(.22,1,.36,1) .22s both; }
.rise-4 { animation: rise .7s cubic-bezier(.22,1,.36,1) .30s both; }

/* Mobile display sizing */
@media (max-width: 560px) {
  .display, .page-title { font-size: clamp(1.8rem, 7.4vw, 2.6rem) !important; }
  .eyebrow, .kicker { font-size: .6rem; letter-spacing: .2em; }
}

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

/* ============================================================
   Admin app shell — persistent sidebar console (layouts/app)
   ============================================================ */
.adm-shell { position: relative; z-index: 2; display: flex; min-height: 100vh; }

/* ---- Sidebar ---- */
.adm-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: 266px; z-index: 50;
  display: flex; flex-direction: column;
  background: rgba(255, 253, 248, .82);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border-right: 1px solid var(--line-2);
}
.adm-sidebar::before { /* gradient hairline at the very top edge */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); opacity: .9;
}
.adm-sidebar__brand { padding: 1.15rem 1.3rem 1.05rem; border-bottom: 1px solid var(--line); }

.adm-nav { flex: 1; overflow-y: auto; padding: 1.05rem .7rem 1.4rem; }
.adm-nav__group { margin-bottom: 1.15rem; }
.adm-nav__group:last-child { margin-bottom: 0; }
.adm-nav__label {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint-hex); padding: 0 .7rem .45rem;
}
.adm-nav__link {
  display: flex; align-items: center; gap: .65rem; padding: .52rem .7rem; border-radius: 11px;
  color: var(--ink-soft-hex); font-family: var(--font-sans); font-size: .875rem; font-weight: 500;
  text-decoration: none; position: relative; transition: background .15s ease, color .15s ease;
}
.adm-nav__link:hover { background: rgba(26, 24, 32, .045); color: var(--ink-hex); }
.adm-nav__link.is-active { background: rgba(26, 24, 32, .06); color: var(--ink-hex); font-weight: 600; }
.adm-nav__link.is-active::before {
  content: ""; position: absolute; left: -.7rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--grad);
}
.adm-nav__icon { flex-shrink: 0; opacity: .72; }
.adm-nav__link.is-active .adm-nav__icon { opacity: 1; }
.adm-nav__text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-nav__badge {
  flex-shrink: 0; min-width: 19px; height: 19px; padding: 0 .38rem; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .62rem;
  font-weight: 600; color: #fff; background: var(--amber); border-radius: 9px;
}

/* ---- Sidebar footer: user + sign out ---- */
.adm-sidebar__foot { border-top: 1px solid var(--line); padding: .8rem .85rem 1rem; }
.adm-user { display: flex; align-items: center; gap: .6rem; padding: .25rem .3rem .7rem; }
.adm-user__av {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 11px; display: inline-flex;
  align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600;
  font-size: .95rem; color: var(--paper); background: var(--ink-hex);
}
.adm-user__meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.adm-user__name { font-size: .82rem; font-weight: 600; color: var(--ink-hex); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-user__mail { font-size: .67rem; color: var(--faint-hex); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-user__cog { flex-shrink: 0; display: inline-flex; padding: .3rem; border-radius: 8px; color: var(--faint-hex); transition: color .15s ease, background .15s ease; }
.adm-user__cog:hover { color: var(--ink-hex); background: rgba(26, 24, 32, .05); }
.adm-logout {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 2.5rem; border-radius: 11px; border: 1px solid var(--line-2); background: transparent;
  font-family: var(--font-sans); font-size: .84rem; font-weight: 600; color: var(--ink-soft-hex);
  cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.adm-logout:hover { border-color: rgba(180, 37, 62, .4); color: #b4253e; background: rgba(180, 37, 62, .04); }

/* ---- Main column ---- */
.adm-main { flex: 1; min-width: 0; margin-left: 266px; display: flex; flex-direction: column; }
.adm-topbar {
  position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: 1rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: rgba(245, 243, 237, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.adm-topbar__menu {
  display: none; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-hex); cursor: pointer;
}
.adm-crumb { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .78rem; min-width: 0; }
.adm-crumb__root, .adm-crumb__sep { color: var(--faint-hex); }
.adm-crumb__here { color: var(--ink-hex); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.adm-topbar__link { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--ink-soft-hex); text-decoration: none; transition: color .15s ease; }
.adm-topbar__link:hover { color: var(--ink-hex); }
.adm-topbar__user { font-size: .82rem; color: var(--ink-soft-hex); font-weight: 500; padding-left: 1rem; border-left: 1px solid var(--line-2); }

.adm-content { flex: 1; }
.adm-content__inner { max-width: 1240px; margin: 0 auto; padding: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 3vw, 2rem) 4rem; }

/* The admin console must never hide content behind optional JS: the design
   system's .reveal starts at opacity:0 and is shown by cenvero.js's scroll
   observer (used on the marketing site). In the panel we force it visible so a
   missing/failed script can never blank a page. .rise-* are pure-CSS and fine. */
.adm-shell .reveal { opacity: 1 !important; transform: none !important; }

.adm-scrim { display: none; }

/* ---- Responsive: off-canvas sidebar under 1024px ---- */
@media (max-width: 1024px) {
  .adm-sidebar { transform: translateX(-100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); box-shadow: 0 0 70px -12px rgba(26, 24, 32, .28); }
  .adm-main { margin-left: 0; }
  .adm-topbar__menu { display: inline-flex; }
  .adm-topbar__link span { display: none; }
  .adm-scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(26, 24, 32, .38); opacity: 0; visibility: hidden; transition: opacity .25s ease; }
  body.adm-nav-open .adm-sidebar { transform: translateX(0); }
  body.adm-nav-open .adm-scrim { opacity: 1; visibility: visible; }
  body.adm-nav-open { overflow: hidden; }
}
@media (max-width: 560px) {
  .adm-topbar__user { display: none; }
}

/* Key/value rows (settings overview) */
.adm-kv { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.25rem; border-top: 1px solid var(--line); }
.adm-kv:first-child { border-top: 0; }
.adm-kv__k { color: var(--ink-soft-hex); font-size: .85rem; }
.adm-kv__v { color: var(--ink-hex); font-size: .88rem; font-weight: 500; text-align: right; word-break: break-all; }

/* ----------------------------------------------------------------------------
   Exclusive-access banner — slim premium bar above the header. Scoped to
   body.has-exclusive-banner so it has ZERO effect on pages that don't opt in;
   when present it pushes the fixed header + spacer + topbar hairline down by
   its 30px height so nothing is covered.
---------------------------------------------------------------------------- */
.access-banner { display: none; }
body.has-exclusive-banner .access-banner {
  display: flex; align-items: center; justify-content: center;
  position: fixed; inset: 0 0 auto 0; height: 30px; z-index: 61;
  background: #14161c; color: #f3efe6;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; padding: 0 1rem; text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.has-exclusive-banner .access-banner .ab-star {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; margin-right: .55em; font-size: .8rem;
}
body.has-exclusive-banner .site-topbar  { top: 30px; }
body.has-exclusive-banner .site-header  { top: 30px; }
body.has-exclusive-banner .header-spacer { height: 114px; }