/* ==========================================================================
   Tebex-Legacy-Render — admin panel design system ("Coldfire")
   Brand refresh (2026-08-05): geometric Poppins type, a fixed dark navy/black
   top navbar (the flame mark's own artwork lives on black, so the chrome
   stays black regardless of the light/dark content toggle), and an accent
   pulled straight from the logo's flame gradient — a mid flame-blue as the
   primary accent, an icy highlight blue as its lighter partner. Light is
   still the default *content* mode; dark is a full token swap, never a
   filter.

   Everything is driven by the custom properties in :root / [data-mode].
   Component rules below must never hardcode a colour — if a new surface is
   needed, add a token first. That's what keeps dark mode honest.
   ========================================================================== */

:root {
  --ease:   cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.34, 1.32, 0.64, 1);

  --sans:    'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --nav-h:  56px;
  --insp-w: 400px;

  /* The top navbar is always this dark navy/black, in both content modes —
     see the header comment above. */
  --nav:    #070a12;
  --nav-fg: #eef1f7;

  /* Icy highlight blue sampled from the flame mark's inner gradient. Used
     for decorative gradients (brand avatar) and the super-admin nav link —
     not mode-dependent, it's a fixed brand colour either way. */
  --accent-2: #acdde8;
}

html[data-mode="light"] {
  --paper:    #f5f6fa;
  --surface:  #ffffff;
  --sunk:     #eef1f6;
  --line:     rgba(18, 26, 43, 0.09);
  --line-str: rgba(18, 26, 43, 0.18);
  --input:    #ffffff;
  --hover:    rgba(18, 26, 43, 0.045);
  --fg:       #12151c;
  --fg-mut:   #5b6470;
  --fg-fnt:   #8b93a0;
  --accent:   #3868b8;
  --accent-fg:#ffffff;
  --accent-sf:#eaf1fb;
  --olive:    #5a6b45;
  --amber:    #a8781f;
  --amber-sf: rgba(168, 120, 31, 0.11);
  --danger:   #a33323;
  --danger-sf:rgba(163, 51, 35, 0.09);
  --lift:  0 1px 2px rgba(10, 14, 24, .06), 0 14px 34px -16px rgba(10, 14, 24, .22);
  --lift-sm: 0 1px 2px rgba(10, 14, 24, .06), 0 6px 16px -10px rgba(10, 14, 24, .20);
  --grain: 0.02;
  color-scheme: light;
}

html[data-mode="dark"] {
  --paper:    #05070c;
  --surface:  #0d1220;
  --sunk:     #080a11;
  --line:     rgba(210, 220, 235, 0.09);
  --line-str: rgba(210, 220, 235, 0.18);
  --input:    #0a0e18;
  --hover:    rgba(210, 220, 235, 0.06);
  --fg:       #eef1f7;
  --fg-mut:   #9aa3b2;
  --fg-fnt:   #666f80;
  --accent:   #5e9de0;
  --accent-fg:#0a0e16;
  --accent-sf:rgba(94, 157, 224, 0.16);
  --olive:    #96ad76;
  --amber:    #d9a445;
  --amber-sf: rgba(217, 164, 69, 0.13);
  --danger:   #e5705c;
  --danger-sf:rgba(229, 112, 92, 0.12);
  --lift:  0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px -18px rgba(0, 0, 0, .8);
  --lift-sm: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 20px -12px rgba(0, 0, 0, .7);
  --grain: 0.045;
  color-scheme: dark;
}

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

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}
body.is-app { overflow: hidden; }

/* Film grain lives on a fixed, non-interactive overlay only — never attached
   to a scrolling container, which would repaint the texture every frame. */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 60;
  opacity: var(--grain);
  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)'/%3E%3C/svg%3E");
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 600; }
code, .mono { font-family: var(--mono); font-size: .92em; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-str); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-fnt); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.kicker {
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--fg-fnt);
}
.display { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.display em { font-style: normal; color: var(--accent); }

/* --------------------------------------------------------------------------
   topnav — fixed dark navy/black brand bar, present on every authenticated
   page (both content modes). Layout: brand mark+word, then the primary nav
   links (Storefronts / Design dropdown), then a right-aligned cluster
   (super-admin link, mode toggle, account chip, logout).
   -------------------------------------------------------------------------- */

.topnav {
  flex: none;
  height: var(--nav-h);
  background: var(--nav); color: var(--nav-fg);
  display: flex; align-items: center; gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.topnav-brand {
  display: flex; align-items: center; gap: 9px;
  margin-right: 18px; flex: none; color: var(--nav-fg);
}
.topnav-brand:hover { text-decoration: none; }
.topnav-brand-mark { width: 24px; height: 24px; display: block; flex: none; }
.topnav-brand-word { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -.01em; }

.topnav-links { display: flex; align-items: center; gap: 2px; height: 100%; }

.topnav-link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 12px; border-radius: 9px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  color: rgba(238, 241, 247, .62);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.topnav-link:hover { background: rgba(255, 255, 255, .08); color: var(--nav-fg); text-decoration: none; }
.topnav-link[aria-current="page"] { background: rgba(255, 255, 255, .12); color: var(--nav-fg); }
.topnav-link svg { width: 13px; height: 13px; flex: none; }

.topnav-dropdown { position: relative; }
.topnav-dropdown-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 45;
  min-width: 250px; max-width: 320px; max-height: 380px; overflow-y: auto;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--lift); padding: 6px;
}
.topnav-dropdown-panel[hidden] { display: none; }
.topnav-dropdown-item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 11px; border-radius: 9px; color: var(--fg);
}
.topnav-dropdown-item:hover { background: var(--hover); text-decoration: none; }
.topnav-dropdown-item[aria-current="page"] { background: var(--accent-sf); }
.topnav-dropdown-item .name { font-weight: 600; font-size: 12.5px; }
.topnav-dropdown-item .sub { font-size: 10.5px; color: var(--fg-fnt); font-family: var(--mono); }
.topnav-dropdown-empty { padding: 16px 12px; font-size: 12px; color: var(--fg-fnt); text-align: center; line-height: 1.7; }

.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.topnav-super { color: var(--accent-2); }
.topnav-super:hover { color: var(--nav-fg); }

.topnav .icon-btn {
  color: rgba(238, 241, 247, .72); border-color: rgba(255, 255, 255, .14);
}
.topnav .icon-btn:hover { background: rgba(255, 255, 255, .1); color: var(--nav-fg); }

.topnav-user { display: flex; align-items: center; gap: 8px; padding: 0 4px 0 6px; }
.topnav-avatar {
  width: 26px; height: 26px; border-radius: 99px; flex: none;
  background: linear-gradient(140deg, var(--accent-2), var(--accent));
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: #0a0e16;
}
.topnav-user-email {
  font-size: 12px; color: rgba(238, 241, 247, .7);
  max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topnav-logout-form { display: flex; }

/* --------------------------------------------------------------------------
   page shell (list / form pages)
   -------------------------------------------------------------------------- */

.shell { display: flex; flex-direction: column; height: 100%; }
.page { flex: 1; min-height: 0; overflow-y: auto; }
.page-inner { max-width: 1240px; margin: 0 auto; padding: 34px 32px 64px; }

.page-head { display: flex; align-items: flex-end; gap: 18px; margin-bottom: 26px; }
.page-head h1 { font-size: 36px; margin-top: 4px; }
.page-head .page-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.backlink { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-mut); margin-bottom: 14px; }
.backlink:hover { color: var(--fg); text-decoration: none; }
.backlink svg { width: 13px; height: 13px; }

.lede { font-size: 14px; color: var(--fg-mut); max-width: 62ch; margin: -14px 0 26px; }

/* --------------------------------------------------------------------------
   cards, tables, badges
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px; box-shadow: var(--lift-sm);
}
.card + .card { margin-top: 18px; }
.card-title { font-family: var(--display); font-size: 19px; margin-bottom: 4px; }
.card-sub { font-size: 12.5px; color: var(--fg-mut); margin: 0 0 18px; }
.card.danger { border-color: color-mix(in srgb, var(--danger) 32%, transparent); background: var(--danger-sf); }
.card.danger .card-title { color: var(--danger); }

.tablewrap { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--lift-sm); }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; padding: 11px 16px; font-size: 10px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-fnt);
  border-bottom: 1px solid var(--line); background: var(--sunk);
}
tbody td { padding: 13px 16px; font-size: 13px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .2s var(--ease); }
tbody tr:hover { background: var(--hover); }
td .name { font-weight: 600; font-size: 13.5px; color: var(--fg); }
td .name:hover { color: var(--accent); text-decoration: none; }
td .sub { font-size: 11.5px; color: var(--fg-fnt); font-family: var(--mono); }
.empty-row { padding: 40px 16px; text-align: center; color: var(--fg-fnt); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 99px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line-str); color: var(--fg-mut);
}
.badge i { width: 5px; height: 5px; border-radius: 99px; background: currentColor; flex: none; }
.badge-active { color: var(--olive); border-color: color-mix(in srgb, var(--olive) 42%, transparent); background: color-mix(in srgb, var(--olive) 10%, transparent); }
.badge-disabled { color: var(--fg-fnt); }
.badge-draft { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-sf); }
.badge-live { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, transparent); background: var(--accent-sf); }

.banner {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px; border-radius: 13px; margin-bottom: 20px;
  font-size: 13px; border: 1px solid var(--line-str); background: var(--surface);
}
.banner svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.banner-success { color: var(--olive); border-color: color-mix(in srgb, var(--olive) 40%, transparent); background: color-mix(in srgb, var(--olive) 9%, transparent); }
.banner-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-sf); }
.banner-info { color: var(--fg-mut); }

.kv { display: grid; grid-template-columns: 150px 1fr; gap: 9px 16px; font-size: 13px; }
.kv dt { color: var(--fg-mut); }
.kv dd { margin: 0; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border-radius: 12px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--spring),
              box-shadow .25s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.978); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn svg { width: 15px; height: 15px; }

.btn-primary {
  color: var(--accent-fg);
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 86%, #fff), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3),
              0 6px 18px -6px color-mix(in srgb, var(--accent) 65%, transparent);
}
.btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32),
              0 12px 26px -8px color-mix(in srgb, var(--accent) 78%, transparent);
}
.btn-ghost { color: var(--fg-mut); border-color: var(--line-str); }
.btn-ghost:hover { background: var(--hover); color: var(--fg); }
.btn-danger { color: var(--accent-fg); background: var(--danger); }
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); }
.btn-sm { height: 32px; padding: 0 13px; font-size: 12px; border-radius: 10px; }

.icon-btn {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: grid; place-items: center; color: var(--fg-mut);
  border: 1px solid var(--line);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.icon-btn:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
.icon-btn svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   form controls
   -------------------------------------------------------------------------- */

.field { margin-bottom: 17px; }
.field > label, .field-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; margin-bottom: 5px;
}
.field .hint { font-size: 11.5px; color: var(--fg-fnt); margin: 0 0 7px; line-height: 1.5; }
.field .hint:last-child { margin-bottom: 0; }
.field-error { font-size: 11.5px; color: var(--danger); margin-top: 5px; }

.inp {
  width: 100%; padding: 9px 12px; font: inherit; font-size: 13px;
  color: var(--fg); background: var(--input);
  border: 1px solid var(--line-str); border-radius: 11px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.inp:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.inp::placeholder { color: var(--fg-fnt); }
textarea.inp { resize: vertical; min-height: 72px; line-height: 1.55; }
select.inp {
  appearance: none; padding-right: 30px; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--fg-mut) 50%),
    linear-gradient(135deg, var(--fg-mut) 50%, transparent 50%);
  background-position: right 14px center, right 9px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.inp.mono { font-family: var(--mono); font-size: 12.5px; }

/* colour */
.hue { display: flex; align-items: center; gap: 10px; }
.hue-well {
  width: 38px; height: 38px; border-radius: 11px; flex: none; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .4),
              0 2px 6px -2px rgba(0, 0, 0, .3);
}
.hue .inp { text-transform: uppercase; font-family: var(--mono); font-size: 12.5px; }
.hue-native { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }

/* media */
.plate {
  display: flex; align-items: center; gap: 12px; padding: 9px;
  border: 1px solid var(--line-str); border-radius: 13px; background: var(--input);
}
.plate-pic {
  width: 46px; height: 46px; border-radius: 9px; flex: none;
  background-color: var(--sunk); background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}
.plate-body { flex: 1; min-width: 0; }
.plate-name {
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plate-act { font-size: 11.5px; font-weight: 600; color: var(--accent); padding: 0; }
.media-empty {
  width: 100%; display: grid; place-items: center; padding: 20px;
  border: 1px dashed var(--line-str); border-radius: 13px;
  background: var(--input); color: var(--fg-fnt); font-size: 12px;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.media-empty:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-sf); }

/* toggle */
.toggle-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.toggle-line .toggle-copy { min-width: 0; flex: 1; }
.toggle-line .field-label { margin-bottom: 0; }
.toggle-line .hint { margin: 2px 0 0; }
.tg {
  width: 40px; height: 23px; border-radius: 99px; flex: none; position: relative;
  background: var(--line-str); transition: background .3s var(--ease);
}
.tg::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 99px; background: var(--surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform .34s var(--spring);
}
.tg[aria-checked="true"] { background: var(--olive); }
.tg[aria-checked="true"]::after { transform: translateX(17px); }

/* choice pills */
.choices { display: flex; gap: 7px; flex-wrap: wrap; }
.choices button {
  padding: 7px 14px; border-radius: 99px; font-size: 12px; font-weight: 600;
  color: var(--fg-mut); border: 1px solid var(--line-str);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.choices button:hover { background: var(--hover); color: var(--fg); }
.choices button[aria-pressed="true"] { background: var(--fg); color: var(--surface); border-color: var(--fg); }

/* --------------------------------------------------------------------------
   editor layout — 70/30 preview + inspector, below the topnav
   -------------------------------------------------------------------------- */

/* `grid-template-rows: minmax(0, 1fr)` is load-bearing, not decoration. With
   an implicit auto row, a column whose content is taller than the viewport
   (the settings list always is) grows the row past the container — which
   stretches every sibling column with it, including the preview stage, and
   pushes the iframe far below the fold. minmax(0, …) caps the row at the
   container height and forces the overflow to resolve inside the scrollers.
   The matching `min-height: 0` on each column is the same fix one level down:
   a flex/grid item defaults to `min-height: auto`, i.e. "never shrink below
   my content", which silently defeats `overflow-y: auto` on its child. The
   same reasoning is why `.editor-shell` itself needs `flex: 1; min-height: 0`
   — it's the flex child of `.shell` now that the topnav sits above it. */
.editor-shell {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-areas: 'stage inspector';
  grid-template-columns: 1fr var(--insp-w);
  grid-template-rows: minmax(0, 1fr);
}

.stage { grid-area: stage; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.stage-head { padding: 20px 26px 14px; display: flex; align-items: flex-end; gap: 16px; }
.stage-head h1 { font-size: 32px; margin-top: 3px; }
.stage-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.stage-bar { display: flex; align-items: center; gap: 12px; padding: 0 26px 14px; min-width: 0; }
.vswitch { display: flex; gap: 3px; padding: 3px; border-radius: 11px; border: 1px solid var(--line); flex: none; }
.vswitch button {
  height: 26px; padding: 0 12px; border-radius: 8px;
  font-size: 11.5px; font-weight: 600; color: var(--fg-mut);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.vswitch button:hover { color: var(--fg); }
.vswitch button[aria-pressed="true"] { background: var(--fg); color: var(--surface); }
.stage-addr {
  flex: 1; min-width: 0; font-size: 12px; color: var(--fg-mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stage-addr b { color: var(--fg); font-weight: 600; font-family: var(--mono); font-size: 11.5px; }

.stage-body { flex: 1; min-height: 0; padding: 0 26px 26px; display: flex; justify-content: center; }
/* Desktop = fill the stage. Only the tablet/mobile buttons impose a width. */
.paperframe {
  position: relative;
  width: 100%; max-width: none; border-radius: 18px; overflow: hidden;
  background: var(--sunk);
  box-shadow: var(--lift), 0 0 0 1px var(--line-str);
  transition: max-width .55s var(--spring);
}
.paperframe iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; background: var(--sunk);
  transition: opacity .32s var(--ease);
}
.paperframe iframe[data-role="incoming"] { opacity: 0; pointer-events: none; }

/* thin progress line while a preview refresh is in flight */
.refresh-line {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  overflow: hidden; z-index: 3; opacity: 0;
  transition: opacity .2s var(--ease);
}
.paperframe.is-refreshing .refresh-line { opacity: 1; }
.refresh-line::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-100%);
  animation: sweep 1.1s var(--ease) infinite;
}
@keyframes sweep { to { transform: translateX(100%); } }

/* Shown until an iframe actually loads. A cross-host preview can fail for
   reasons the panel can't see (the browser refusing to resolve a *.localhost
   subdomain, a proxy stripping the host, a frame-ancestors mismatch), and a
   silently blank rectangle gives the operator nothing to act on. */
.frame-fallback {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center;
  gap: 12px; padding: 32px; text-align: center;
  background: var(--surface); color: var(--fg-mut);
}
.paperframe.is-loaded .frame-fallback { display: none; }
.frame-fallback h3 { font-family: var(--display); font-size: 19px; color: var(--fg); }
.frame-fallback p { margin: 0; font-size: 12.5px; max-width: 46ch; line-height: 1.6; }
.frame-fallback code { font-family: var(--mono); font-size: 11.5px; background: var(--sunk); padding: 2px 7px; border-radius: 6px; word-break: break-all; }
.frame-fallback .spinner {
  width: 22px; height: 22px; border-radius: 99px;
  border: 2px solid var(--line-str); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
.frame-fallback[data-state="loading"] .failed { display: none; }
.frame-fallback[data-state="failed"] .loading { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   inspector
   -------------------------------------------------------------------------- */

.inspector {
  grid-area: inspector;
  background: var(--surface); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
}
.insp-head { padding: 20px 22px 14px; flex: none; }
.insp-head h2 { font-family: var(--display); font-size: 22px; margin: 3px 0 14px; }

.findwrap { position: relative; }
.findwrap svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--fg-fnt); pointer-events: none;
}
.findwrap input { padding-left: 34px; height: 38px; }

.insp-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 22px; }

.chapter { padding: 18px 0 4px; }
.chapter + .chapter { border-top: 1px solid var(--line); }
.chapter[hidden] { display: none; }
.ch-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 13px; }
.ch-head h3 { font-family: var(--display); font-size: 16px; }
.ch-head .ch-count { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--fg-fnt); }
.ch-edited {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber); background: var(--amber-sf); padding: 2px 8px; border-radius: 99px;
}
.ch-edited[hidden] { display: none; }

.setting[hidden] { display: none; }
.setting .dirty-dot {
  width: 6px; height: 6px; border-radius: 99px; background: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-sf); flex: none;
}
.setting .dirty-dot[hidden] { display: none; }

.no-results { padding: 30px 0; text-align: center; color: var(--fg-fnt); font-size: 12.5px; }
.no-results[hidden] { display: none; }

/* --------------------------------------------------------------------------
   publish ledge
   -------------------------------------------------------------------------- */

.ledge {
  flex: none; padding: 15px 22px 18px;
  border-top: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 -10px 26px -20px rgba(0, 0, 0, .5);
}
.ledge-line { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; min-height: 34px; }
.ledge-num { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--amber); }
.ledge-txt { font-size: 12px; color: var(--fg-mut); line-height: 1.35; min-width: 0; }
.ledge-txt b { display: block; color: var(--fg); font-weight: 600; font-size: 12.5px; }
.ledge.is-clean .ledge-num { color: var(--olive); }
.ledge-btns { display: flex; gap: 9px; }
.ledge-btns .btn-primary { flex: 1; padding-left: 18px; padding-right: 7px; justify-content: space-between; }
.btn-cap {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  background: rgba(255, 255, 255, .2); display: grid; place-items: center;
  transition: transform .35s var(--spring), background .3s var(--ease);
}
.btn-primary:hover .btn-cap { transform: translateX(3px) translateY(-1px); background: rgba(255, 255, 255, .3); }

/* --------------------------------------------------------------------------
   toast
   -------------------------------------------------------------------------- */

.toast-stack { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 18px; border-radius: 13px;
  background: var(--nav); color: var(--nav-fg);
  font-size: 12.5px; font-weight: 500; box-shadow: var(--lift);
  animation: toast-in .4s var(--spring);
}
.toast svg { width: 15px; height: 15px; }
.toast.is-error { background: var(--danger); color: #fff; }
.toast.is-out { animation: toast-out .3s var(--ease) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(8px) scale(.98); } }

/* --------------------------------------------------------------------------
   login
   -------------------------------------------------------------------------- */

.login-wrap { min-height: 100%; display: grid; place-items: center; padding: 40px 20px; }
.login-card {
  width: 100%; max-width: 400px; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 40px 34px; box-shadow: var(--lift);
}
.login-mark {
  width: 46px; height: 46px; border-radius: 15px; margin: 0 auto 20px;
  background: linear-gradient(150deg, var(--accent-2), var(--accent));
}
.login-card h1 { font-family: var(--display); font-size: 27px; margin-bottom: 6px; }
.login-card p { font-size: 13px; color: var(--fg-mut); margin: 0 0 26px; }
.login-card .btn { width: 100%; }
.login-foot { margin-top: 22px; font-size: 11.5px; color: var(--fg-fnt); }

/* --------------------------------------------------------------------------
   responsive — the editor can't do 70/30 on a narrow screen, so the
   inspector becomes a full-width sheet below the preview instead. The
   topnav collapses its non-essential bits before that breakpoint.
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  :root { --insp-w: 340px; }
}
@media (max-width: 900px) {
  body.is-app { overflow: auto; }
  .editor-shell {
    grid-template-areas: 'stage' 'inspector';
    grid-template-columns: 1fr;
    grid-template-rows: minmax(60vh, auto) auto;
    height: auto; min-height: 0;
  }
  .inspector { border-left: 0; border-top: 1px solid var(--line); }
  .insp-scroll { overflow: visible; }
  .ledge { position: sticky; bottom: 0; }
  .page-inner { padding: 24px 18px 48px; }
  .page-head h1 { font-size: 28px; }
  .kv { grid-template-columns: 1fr; gap: 3px 0; }
  .kv dd { margin-bottom: 10px; }
}
@media (max-width: 720px) {
  .topnav-user-email, .topnav-brand-word { display: none; }
  .topnav { gap: 2px; padding: 0 10px; }
  .topnav-brand { margin-right: 8px; }
}

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