:root {
  color-scheme: dark;
  --bg: #080908;
  --panel: rgba(18, 22, 20, 0.76);
  --panel-soft: rgba(255,255,255,0.07);
  --line: rgba(230, 238, 215, 0.18);
  --text: #f7f8f2;
  --muted: #b8c0ad;
  --accent: #c8db8f;
  --warm: #d58c55;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(circle at 18% 0%, rgba(200,219,143,.18), transparent 26%), radial-gradient(circle at 90% 12%, rgba(213,140,85,.14), transparent 24%), var(--bg);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
.tool-shell { width: min(1180px, calc(100vw - 28px)); margin: 0 auto; padding: 18px 0 42px; }
.tool-topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:28px; padding:10px; border:1px solid var(--line); border-radius:8px; background:rgba(8,10,9,.72); backdrop-filter:blur(18px); }
.tool-brand { display:flex; align-items:center; gap:10px; font-weight:1000; text-transform:uppercase; }
.tool-brand span:first-child { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:8px; color:var(--accent); }
.tool-nav { display:flex; flex-wrap:wrap; gap:8px; }
.tool-nav a, .tool-button { border:1px solid var(--line); border-radius:8px; padding:10px 13px; background:var(--panel-soft); color:var(--text); font-weight:900; cursor:pointer; }
.hero { padding:54px 0 18px; }
.hero h1 { margin:0; font-size:clamp(48px, 9vw, 112px); line-height:.88; letter-spacing:0; }
.subtitle, .kicker { color:var(--accent); font-weight:1000; letter-spacing:.12em; text-transform:uppercase; }
.tagline { max-width:760px; color:var(--muted); font-size:clamp(18px,2vw,23px); line-height:1.45; }
.category-grid, .tool-grid, .tool-workspace, .related-grid { display:grid; gap:12px; }
.card, .tool-panel, .privacy-note { border:1px solid var(--line); border-radius:8px; background:var(--panel); box-shadow:0 22px 70px rgba(0,0,0,.28); }
.category-grid { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.tool-grid, .related-grid { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.card { padding:18px; min-height:130px; }
.card:hover, .tool-button:hover, .tool-nav a:hover { border-color:rgba(200,219,143,.58); background:rgba(200,219,143,.12); }
.card small { color:var(--warm); font-weight:1000; text-transform:uppercase; }
.card h2, .card h3 { margin:8px 0; }
.card p, .privacy-note, .tool-help { color:var(--muted); line-height:1.55; }
.section-title { margin:38px 0 14px; font-size:clamp(28px,4vw,48px); }
.tool-header h1 { margin:8px 0; font-size:clamp(40px,6vw,72px); line-height:.92; }
.tool-workspace { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.tool-panel { padding:18px; }
.tool-panel h2 { margin-top:0; }
.field-grid { display:grid; gap:12px; }
.field-row { display:grid; gap:7px; }
.field-row.inline { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); align-items:end; }
label { color:var(--accent); font-size:13px; font-weight:1000; text-transform:uppercase; }
textarea, input, select, output { width:100%; border:1px solid var(--line); border-radius:8px; padding:12px; background:rgba(0,0,0,.34); color:var(--text); }
textarea { min-height:180px; resize:vertical; }
output, .output-box { display:block; min-height:180px; white-space:pre-wrap; overflow:auto; }
.image-preview-box { height:min(62vh, 520px); min-height:320px; overflow:hidden; padding:14px; }
.image-preview-frame { position:relative; width:100%; height:100%; overflow:hidden; }
.actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.error { min-height:24px; color:#ffb199; font-weight:800; }
.privacy-note { margin:18px 0; padding:14px; }
.preview-image { position:absolute; inset:0; display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; background:white; }
.qr-output canvas { display:block; max-width:100%; height:auto; border-radius:8px; background:white; }
.pdf-workbench { display:grid; grid-template-columns:210px minmax(0,1fr); gap:12px; align-items:start; }
.pdf-workbench.is-rail-collapsed { grid-template-columns:minmax(0,1fr); }
.pdf-workbench.is-rail-collapsed .pdf-page-rail { display:none; }
.pdf-page-rail { min-height:520px; max-height:calc(100vh - 180px); overflow:auto; border:1px solid var(--line); border-radius:8px; background:var(--panel); padding:10px; display:grid; gap:8px; align-content:start; }
.pdf-rail-empty { color:var(--muted); line-height:1.45; margin:0; }
.pdf-rail-toggle[aria-pressed="true"] { border-color:rgba(200,219,143,.8); background:rgba(200,219,143,.18); color:var(--accent); }
.pdf-page-thumb { display:grid; gap:4px; width:100%; min-height:72px; border:1px solid var(--line); border-radius:8px; padding:10px; background:rgba(255,255,255,.06); color:var(--text); text-align:left; cursor:pointer; }
.pdf-page-thumb span { font-weight:1000; }
.pdf-page-thumb small { color:var(--muted); font-weight:800; text-transform:uppercase; }
.pdf-page-thumb.is-current { border-color:rgba(200,219,143,.72); background:rgba(200,219,143,.13); }
.pdf-page-thumb.is-deleted { opacity:.45; text-decoration:line-through; cursor:not-allowed; }
.pdf-main-panel { min-width:0; border:1px solid var(--line); border-radius:8px; background:var(--panel); padding:12px; box-shadow:0 22px 70px rgba(0,0,0,.28); }
.pdf-toolbar, .pdf-subtoolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.pdf-toolbar .tool-button.is-active { border-color:rgba(200,219,143,.8); background:rgba(200,219,143,.18); color:var(--accent); }
.pdf-main-panel .tool-button:disabled { opacity:.45; cursor:not-allowed; }
.pdf-pen-colors { display:flex; gap:6px; align-items:center; min-height:42px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--panel-soft); }
.pdf-color-swatch { width:26px; height:26px; min-height:26px; border:2px solid rgba(255,255,255,.24); border-radius:999px; padding:0; cursor:pointer; box-shadow:inset 0 0 0 2px rgba(0,0,0,.22); }
.pdf-color-swatch.is-red { background:#b3352d; }
.pdf-color-swatch.is-black { background:#111; }
.pdf-color-swatch.is-blue { background:#1d4ed8; }
.pdf-color-swatch.is-active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(200,219,143,.32), inset 0 0 0 2px rgba(0,0,0,.22); }
.pdf-upload { display:inline-flex; align-items:center; min-height:42px; border:1px solid var(--line); border-radius:8px; padding:10px 13px; background:var(--panel-soft); color:var(--text); cursor:pointer; }
.pdf-upload input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.pdf-subtoolbar output { width:auto; min-width:180px; min-height:42px; padding:10px 12px; white-space:normal; }
.pdf-subtoolbar input[type="range"] { width:180px; padding:0; accent-color:var(--accent); }
.pdf-viewer-stage { --pdf-stage-padding:18px; position:relative; min-height:560px; overflow:auto; display:grid; place-items:start center; border:1px solid var(--line); border-radius:8px; background:rgba(0,0,0,.42); padding:var(--pdf-stage-padding); }
#pdf-canvas { display:block; max-width:none; background:white; box-shadow:0 18px 48px rgba(0,0,0,.42); }
.pdf-annotation-layer { position:absolute; top:var(--pdf-stage-padding); left:50%; z-index:2; transform:translateX(-50%); touch-action:none; cursor:crosshair; }
.pdf-annotation-layer.is-text-mode { cursor:text; }
.pdf-annotation { position:absolute; pointer-events:none; }
.pdf-text-guide { position:absolute; z-index:4; width:260px; height:28px; transform:translateY(-50%); pointer-events:none; border:1px dashed rgba(166,119,0,.52); border-radius:5px; background:rgba(255,221,74,.16); box-shadow:0 0 0 1px rgba(255,255,255,.38), inset 0 -2px 0 rgba(166,119,0,.44); }
.pdf-text-guide::after { content:""; position:absolute; left:8px; right:8px; top:50%; border-top:1px dashed rgba(35,35,20,.35); }
.pdf-annotation-text { max-width:260px; transform:translateY(-50%); border:1px solid rgba(8,9,8,.2); border-radius:6px; padding:5px 8px; background:rgba(255,255,255,.92); color:#121512; font-size:14px; font-weight:800; box-shadow:0 8px 18px rgba(0,0,0,.18); }
.pdf-annotation-highlight { background:rgba(255,221,74,.4); border:2px solid rgba(166,119,0,.72); box-shadow:0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 1px rgba(255,255,255,.2); }
.pdf-annotation-highlight.is-draft { background:rgba(255,221,74,.54); border-style:dashed; box-shadow:0 0 0 2px rgba(255,221,74,.22), inset 0 0 0 1px rgba(255,255,255,.28); }
.pdf-annotation-pen { inset:0; width:100%; height:100%; }
.pdf-annotation-pen polyline { fill:none; stroke:#b3352d; stroke-width:.45; stroke-linecap:round; stroke-linejoin:round; }
.pdf-annotation-pen.is-draft polyline { stroke:#d33e34; stroke-width:.55; }
.pdf-empty-state { position:absolute; inset:18px; display:grid; place-items:center; border:1px dashed var(--line); border-radius:8px; color:var(--muted); text-align:center; font-weight:900; }
.pdf-empty-state[hidden], .pdf-annotation-layer[hidden] { display:none; }
@media (max-width: 760px) {
  .tool-topbar, .tool-workspace { grid-template-columns:1fr; flex-direction:column; align-items:flex-start; }
  .tool-workspace { display:grid; }
  .image-preview-box { height:min(55vh, 420px); min-height:240px; }
  .pdf-workbench { grid-template-columns:1fr; }
  .pdf-page-rail { grid-template-columns:repeat(2,minmax(0,1fr)); min-height:auto; max-height:240px; }
  .pdf-main-panel { padding:10px; }
  .pdf-viewer-stage { --pdf-stage-padding:10px; min-height:420px; }
  .pdf-toolbar, .pdf-subtoolbar { align-items:stretch; }
  .pdf-toolbar > *, .pdf-subtoolbar > * { flex:1 1 130px; }
}