/* ═════════ Film Tool Hub kit ═════════
   Shared look for every tool. The hub injects this at the top of each tool's <head>,
   sets data-theme="light|dark" on the tool's <html>, and sets --fth-cat to the tool's
   category colour. Tools use the --fth-* tokens and the .fth-* components. */
:root{
  --fth-bg:#0b0c0e; --fth-bg2:#101216; --fth-surface:#15181d; --fth-surface2:#1b1f26; --fth-surface3:#232831;
  --fth-line:#242931; --fth-line2:#333a45; --fth-line3:#46505e;
  --fth-text:#f0ece5; --fth-muted:#9aa0aa; --fth-faint:#666c77;
  --fth-good:#5cc98a; --fth-bad:#ff8f7a; --fth-warn:#f2bd5c;
  /* accent tokens (--fth-cat, --fth-accent, --fth-accent-ink, --fth-accent-soft, --fth-accent-line, --fth-on-accent)
     are written by the hub for each tool's category, as plain colours for both themes */
  --fth-cat:#ffb547; --fth-accent:#ffb547; --fth-accent-ink:#ffb547; --fth-accent-soft:rgba(255,181,71,.14); --fth-accent-line:rgba(255,181,71,.45); --fth-on-accent:#14110b;
  --fth-paper-backdrop:#07080a;
  --fth-shadow:0 14px 34px -14px rgba(0,0,0,.7);
  --fth-shadow-sm:none;
  --fth-radius:14px; --fth-radius-sm:9px;
  --fth-display:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fth-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fth-script:"Courier Prime","Courier New",Courier,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --fth-bg:#f3f0ea; --fth-bg2:#f9f7f3; --fth-surface:#ffffff; --fth-surface2:#f1ede5; --fth-surface3:#e6e1d6;
  --fth-line:#e3ded4; --fth-line2:#d2ccc0; --fth-line3:#b4ad9f;
  --fth-text:#16181c; --fth-muted:#565c66; --fth-faint:#878c95;
  --fth-good:#22804a; --fth-bad:#c0392b; --fth-warn:#9a6200;
  --fth-paper-backdrop:#e4dfd5;
  --fth-shadow:0 14px 30px -16px rgba(70,50,20,.30);
  --fth-shadow-sm:0 1px 2px rgba(60,45,20,.05),0 4px 14px rgba(60,45,20,.05);
  color-scheme:light;
}

/* base */
html{background:var(--fth-bg)}
body{background:var(--fth-bg);color:var(--fth-text);font-family:var(--fth-display);-webkit-font-smoothing:antialiased}
::selection{background:var(--fth-accent-line)}
:focus-visible{outline:2px solid var(--fth-accent);outline-offset:2px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--fth-line2);border-radius:6px;border:2px solid var(--fth-bg)}
::-webkit-scrollbar-thumb:hover{background:var(--fth-line3)}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}

/* tool header: category eyebrow, tool name, then actions on the right */
.fth-head{position:sticky;top:0;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:12px 20px;
  background:color-mix(in srgb,var(--fth-bg) 88%,transparent);backdrop-filter:blur(12px) saturate(1.2);-webkit-backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--fth-line)}
.fth-head::before{content:"";position:absolute;inset:auto 0 -1px 0;height:1px;background:linear-gradient(90deg,var(--fth-cat),transparent 38%);opacity:.75;pointer-events:none}
.fth-id{display:flex;flex-direction:column;gap:5px;min-width:0;flex:none}
.fth-eyebrow{display:flex;align-items:center;gap:8px;font:500 10.5px/1 var(--fth-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--fth-accent-ink);white-space:nowrap}
.fth-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fth-cat);box-shadow:0 0 0 3px var(--fth-accent-soft);flex:none}
.fth-title{margin:0;font-weight:800;font-variation-settings:"wdth" 68;font-size:23px;line-height:1;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
.fth-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}
.fth-vsep{width:1px;height:22px;background:var(--fth-line2);margin:0 3px;flex:none}

/* buttons */
.fth-btn{height:34px;padding:0 13px;border-radius:var(--fth-radius-sm);border:1px solid var(--fth-line2);background:var(--fth-surface);color:var(--fth-text);
  font:600 13px/1 var(--fth-display);display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background-color .15s,border-color .15s,color .15s}
.fth-btn:hover{background:var(--fth-surface2);border-color:var(--fth-line3)}
.fth-btn:disabled{opacity:.45;cursor:default}
.fth-btn.primary{background:var(--fth-accent);border-color:var(--fth-accent);color:var(--fth-on-accent)}
.fth-btn.primary:hover{filter:brightness(1.08)}
.fth-btn.ghost{background:transparent;border-color:transparent;color:var(--fth-muted)}
.fth-btn.ghost:hover{background:var(--fth-surface2);border-color:var(--fth-line2);color:var(--fth-text)}
.fth-btn.danger{color:var(--fth-bad)}
.fth-btn.sm{height:28px;padding:0 10px;font-size:12.5px;border-radius:7px}
.fth-btn.icon{width:30px;height:30px;padding:0}

/* labels, fields */
.fth-label{font:500 10.5px/1.25 var(--fth-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fth-muted)}
.fth-input{width:100%;min-width:0;background:var(--fth-bg2);border:1px solid var(--fth-line2);border-radius:8px;padding:7px 10px;color:var(--fth-text);font:14px/1.35 var(--fth-display);outline:none;transition:border-color .15s,box-shadow .15s}
.fth-input:hover{border-color:var(--fth-line3)}
.fth-input:focus{border-color:var(--fth-accent);box-shadow:0 0 0 3px var(--fth-accent-soft)}
select.fth-input{cursor:pointer}
textarea.fth-input{resize:vertical;line-height:1.45}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--fth-accent)}

/* sections & surfaces */
.fth-card{background:linear-gradient(180deg,var(--fth-surface) 0%,var(--fth-bg2) 100%);border:1px solid var(--fth-line);border-radius:var(--fth-radius);box-shadow:var(--fth-shadow-sm)}
.fth-sec{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font:700 15px/1.1 var(--fth-display);font-variation-settings:"wdth" 80;text-transform:uppercase;letter-spacing:.03em}
.fth-sec::after{content:"";flex:1;height:1px;background:var(--fth-line)}
.fth-sec .fth-num{font:600 11px var(--fth-mono);color:var(--fth-accent-ink);letter-spacing:.08em}
.fth-muted{color:var(--fth-muted)}
.fth-mono{font-family:var(--fth-mono)}

/* notes */
.fth-tip{background:var(--fth-accent-soft);border-left:2px solid var(--fth-accent);color:var(--fth-text);padding:7px 10px;border-radius:0 7px 7px 0;font-size:12.5px;line-height:1.45}
.fth-warn{background:color-mix(in srgb,var(--fth-warn) 10%,var(--fth-surface));border:1px solid color-mix(in srgb,var(--fth-warn) 40%,transparent);color:var(--fth-text);border-radius:10px;padding:10px 12px;font-size:13px}
.fth-warn b:first-child{color:var(--fth-warn)}
.fth-info{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--fth-line3);color:var(--fth-muted);font:600 10px/1 var(--fth-mono);text-transform:none;letter-spacing:0;cursor:pointer;user-select:none;vertical-align:1px;margin-left:5px;transition:.15s}
.fth-info:hover{border-color:var(--fth-accent);color:var(--fth-accent-ink);background:var(--fth-accent-soft)}

/* toast */
.fth-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;z-index:200;background:var(--fth-text);color:var(--fth-bg);padding:10px 16px;border-radius:10px;font:500 13.5px var(--fth-display);box-shadow:var(--fth-shadow);transition:.25s;pointer-events:none;max-width:calc(100vw - 32px)}
.fth-toast.show{opacity:1;transform:translate(-50%,0)}

/* paper: a printable page shown on screen stays paper-white in both themes */
.fth-paper-wrap{background:var(--fth-paper-backdrop)}
.fth-paper{background:#fff;color:#000;color-scheme:light;box-shadow:0 2px 4px rgba(0,0,0,.12),0 18px 40px -16px rgba(0,0,0,.55)}

@media print{
  html,body{background:#fff!important;color:#000}
  .fth-head{display:none!important}
  .fth-paper-wrap{background:#fff!important}
  .fth-paper{box-shadow:none!important}
}
@media (max-width:700px){.fth-head{padding:10px 14px}.fth-title{font-size:20px}.fth-vsep{display:none}}
@media (prefers-reduced-motion:reduce){.fth-btn,.fth-input,.fth-toast{transition:none}}