/* Zylvora OS shared foundation: fonts, tokens, light and dark themes, controls. */
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Kaushan"; src: url("/fonts/kaushan.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --teal-950: #071F26;
  --teal-900: #0A3039;
  --teal-800: #0F4250;
  --teal-700: #17596A;
  --teal-600: #1E6B7D;
  --teal-500: #077A8C;
  --teal-300: #6FB9C4;
  --teal-100: #DCEDEF;
  --ember: #E36A0E;
  --ember-600: #C9590A;
  --amber: #F28C28;
  --paper: #F2F4F4;

  --bg: #F2F4F4;
  --surface: #FFFFFF;
  --surface-2: #F7F9F9;
  --ink: #0B2E36;
  --ink-soft: #46636A;
  --ink-faint: #7C9398;
  --line: #D6E2E4;
  --line-strong: #B9CDD1;
  --accent: #077A8C;
  --accent-ink: #FFFFFF;
  --cta: #E36A0E;
  --ok: #138A5B;
  --ok-bg: #E2F4EC;
  --warn: #B4610A;
  --warn-bg: #FDF0E1;
  --danger: #C2362B;
  --danger-bg: #FBE7E5;
  --info-bg: #E3F1F3;
  --shadow-1: 0 1px 2px rgba(7, 31, 38, .06), 0 2px 8px -2px rgba(7, 31, 38, .08);
  --shadow-2: 0 24px 48px -24px rgba(7, 31, 38, .35);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --script: "Kaushan", cursive;
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 15px; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.num { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn { --b: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 42px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--b);
  background: var(--b); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px var(--b); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-busy { opacity: .55; pointer-events: none; }
.btn-cta { --b: var(--cta); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.btn-quiet { background: transparent; border-color: transparent; color: var(--accent); padding: 0 10px; }
.btn-quiet:hover { background: var(--info-bg); box-shadow: none; }
.btn-danger { --b: var(--danger); }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }

/* Fields */
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 13px; font-weight: 700; color: var(--ink); }
.field small { color: var(--ink-faint); font-size: 12px; }
.input, .field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); transition: border-color .15s; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Chips and status */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--info-bg); color: var(--teal-700); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.chip.plain::before { display: none; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.danger { background: var(--danger-bg); color: var(--danger); }
.chip.ember { background: #FDEBDC; color: var(--ember-600); }
.chip.grey { background: var(--surface-2); color: var(--ink-soft); border: 1px solid var(--line); }
.sample-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #FFF4D6; color: #7A5300; border: 1px solid #F1D58A; }

/* Toast and dialog */
.toasts { position: fixed; z-index: 90; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; background: var(--teal-950); color: #fff; padding: 12px 16px; border-radius: 14px; box-shadow: var(--shadow-2); font-weight: 600; font-size: 14px; display: flex; gap: 10px; align-items: flex-start;
  animation: toastIn .35s var(--ease); }
.toast.err { background: #5b1913; }
.toast .t-ico { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--teal-500); display: grid; place-items: center; font-size: 12px; }
.toast.err .t-ico { background: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } }
dialog.dlg { border: 0; padding: 0; border-radius: 22px; width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
dialog.dlg.wide { width: min(960px, calc(100vw - 24px)); }
dialog.dlg::backdrop { background: rgba(7, 31, 38, .55); backdrop-filter: blur(3px); }
dialog.dlg[open] { animation: dlgIn .3s var(--ease); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px 6px; }
.dlg-head h2 { margin: 0; font-size: 20px; }
.dlg-body { padding: 10px 24px 24px; overflow: auto; max-height: calc(100dvh - 120px); }
.dlg-x { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 18px; flex: none; }

/* Skeleton and empty */
.skel { background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%; animation: skel 1.4s var(--ease-io) infinite; border-radius: 12px; min-height: 18px; }
@keyframes skel { to { background-position: -200% 0; } }
.empty { text-align: center; padding: 32px 16px; color: var(--ink-soft); }
.empty strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.err-box { background: var(--danger-bg); color: var(--danger); padding: 12px 14px; border-radius: 12px; font-weight: 600; font-size: 14px; }

/* Demo guide (shared across every surface) */
.guide-fab { position: fixed; z-index: 70; right: 16px; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--teal-950); color: #fff; border: 1px solid rgba(255,255,255,.12);
  font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: var(--shadow-2); }
.guide-ring { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: conic-gradient(var(--ember) calc(var(--p) * 1%), rgba(255,255,255,.15) 0); position: relative; }
.guide-ring::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--teal-950); }
.guide-ring b { position: relative; z-index: 1; }
.guide-panel { position: fixed; z-index: 71; right: 16px; bottom: 64px; width: min(380px, calc(100vw - 32px)); max-height: min(70dvh, 620px); overflow: auto; background: var(--teal-950); color: #E8F3F4; border-radius: 20px;
  box-shadow: var(--shadow-2); padding: 18px; border: 1px solid rgba(255,255,255,.1); animation: dlgIn .3s var(--ease); }
.guide-panel h3 { margin: 0 0 2px; font-size: 16px; color: #fff; }
.guide-panel p { margin: 0 0 12px; font-size: 12.5px; color: #A8C6CB; }
.guide-panel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: g; }
.guide-panel li { counter-increment: g; display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; font-size: 13px; padding: 5px 6px; border-radius: 8px; }
.guide-panel li::before { content: counter(g); width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.25); display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.guide-panel li.done { color: #7FA5AB; }
.guide-panel li.done::before { content: "✓"; background: var(--teal-500); border-color: var(--teal-500); color: #fff; }
.guide-panel li.next { background: rgba(227,106,14,.16); color: #fff; }
.guide-panel li.next::before { border-color: var(--ember); color: var(--ember); }
.guide-panel .g-hint { display: block; font-size: 12px; color: #F6B47F; margin-top: 2px; }
.guide-panel .g-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.guide-panel .g-links a { font-size: 12px; font-weight: 700; color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.08); }
.guide-panel .g-links a:hover { background: rgba(255,255,255,.16); }

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