:root{
  --bg:#EEF2F0;
  --surface:#FFFFFF;
  --sunken:#F5F8F7;
  --ink:#14201E;
  --ink-strong:#0B1614;
  --muted:#4F5F5B;
  --line:#D5DEDB;
  --line-strong:#B4C2BE;
  --accent:#0E5A57;
  --accent-ink:#0A4442;
  --accent-soft:#DCEDEA;
  --accent-line:#A9D1CB;
  --mark:#F2B233;
  --mark-soft:#FDF1D3;
  --mark-line:#EBCB84;
  --mark-ink:#6B4A00;
  --danger:#B3362B;
  --good:#1F7A4D;
  --good-soft:#E3F2EA;
  --good-line:#B5DAC4;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(11,22,20,.06), 0 12px 32px -16px rgba(11,22,20,.22);
  --ring:0 0 0 3px var(--accent-line);
  --font-display:'Bricolage Grotesque', 'Public Sans', system-ui, sans-serif;
  --font-body:'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  line-height:1.55;
  font-variant-numeric:tabular-nums;
}
a{color:inherit;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* top bar */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:.7rem 1.25rem;
}
.topbar-inner{max-width:1240px;margin:0 auto;}
.topbar a{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.875rem;font-weight:600;color:var(--muted);text-decoration:none;
  padding:.35rem 0;
}
.topbar a:hover{color:var(--accent-ink);}
.topbar a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;}

/* masthead */
.masthead{max-width:1240px;margin:0 auto;padding:2.5rem 1.25rem 1.75rem;}
.masthead h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.25rem,5vw,3.5rem);
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0 0 .75rem;
  color:var(--ink-strong);
}
.masthead p{color:var(--muted);font-size:1.0625rem;max-width:56ch;margin:0;text-wrap:pretty;}
.kicker{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:1.25rem;
  font-size:.875rem;font-weight:500;color:var(--accent-ink);
  background:var(--accent-soft);border:1px solid var(--accent-line);
  padding:.35rem .8rem .35rem .65rem;border-radius:999px;
}
.kicker svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;}

/* workbench: tool rail + stage */
.workbench{
  max-width:1240px;margin:0 auto;padding:0 1.25rem 4rem;
  display:grid;grid-template-columns:232px minmax(0,1fr);gap:1.25rem;align-items:start;
}
.tool-tabs{
  position:sticky;top:1rem;
  display:flex;flex-direction:column;gap:.25rem;
}
.tool-tab{
  display:flex;align-items:center;gap:.75rem;width:100%;
  padding:.8rem .9rem;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  color:var(--muted);
  font-size:.9375rem;font-weight:600;text-align:left;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.tool-tab svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;flex:0 0 auto;}
.tool-tab:hover{background:var(--surface);color:var(--ink-strong);}
.tool-tab[aria-selected="true"]{
  background:var(--surface);
  color:var(--accent-ink);
  border-color:var(--line-strong);
  box-shadow:inset 4px 0 0 var(--mark);
  padding-left:1.1rem;
}

/* stage */
.stage{
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.tool-panel{display:none;}
.tool-panel.active{display:block;}

.tool-head{
  padding:1.5rem 1.75rem;
  border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.tool-head h2{
  font-family:var(--font-display);
  font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;
  margin:0 0 .3rem;color:var(--ink-strong);
}
.tool-head p{margin:0;color:var(--muted);font-size:.9375rem;max-width:52ch;}
.tag{
  font-size:.8125rem;font-weight:600;
  padding:.3rem .7rem;border-radius:999px;
  background:var(--sunken);color:var(--ink);border:1px solid var(--line-strong);
  white-space:nowrap;
}
.tag.warn{background:var(--mark-soft);color:var(--mark-ink);border-color:var(--mark-line);}

.tool-body{display:grid;grid-template-columns:330px minmax(0,1fr);}
.panel-controls{
  padding:1.5rem;
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:1.15rem;
}
.panel-preview{
  padding:1.5rem;
  background:var(--sunken);
  min-height:440px;
  display:flex;flex-direction:column;gap:1rem;
}

/* dropzone */
.dropzone{
  border:2px dashed var(--line-strong);
  border-radius:var(--radius);
  background:var(--surface);
  padding:1.5rem 1rem;
  text-align:center;cursor:pointer;position:relative;
  transition:border-color .15s ease,background .15s ease;
}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:var(--accent-soft);}
.dropzone:focus-within{border-color:var(--accent);box-shadow:var(--ring);}
.dropzone svg{
  width:46px;height:46px;padding:11px;margin-bottom:.6rem;
  border-radius:50%;background:var(--accent-soft);
  stroke:var(--accent);
}
.dropzone.drag svg,.dropzone:hover svg{background:var(--surface);}
.dropzone strong{display:block;font-size:.9375rem;color:var(--ink-strong);}
.dropzone span{display:block;font-size:.8125rem;color:var(--muted);margin-top:.2rem;overflow-wrap:anywhere;}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}

/* fields */
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{font-size:.875rem;font-weight:600;color:var(--ink-strong);}
.field .hint{font-size:.8125rem;color:var(--muted);line-height:1.4;}
.field input[type=text],.field input[type=number],.field input[type=password],.field select{
  width:100%;min-height:44px;
  padding:.6rem .8rem;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface);font-size:1rem;font-family:inherit;color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
.field input:disabled{background:var(--sunken);color:var(--muted);cursor:not-allowed;}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring);}

.radio-cards{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.radio-card{position:relative;}
.radio-card input{position:absolute;opacity:0;pointer-events:none;}
.radio-card div{
  min-height:44px;display:flex;align-items:center;justify-content:center;
  padding:.5rem;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:var(--surface);text-align:center;
  font-size:.875rem;font-weight:600;color:var(--muted);
  cursor:pointer;transition:all .15s ease;
}
.radio-card:hover div{border-color:var(--accent);color:var(--ink);}
.radio-card input:checked + div{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent);}
.radio-card input:focus-visible + div{box-shadow:var(--ring);}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.65rem 1.15rem;
  border-radius:var(--radius-sm);
  font-size:.9375rem;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,transform .1s ease,border-color .15s ease;
}
.btn:active:not(:disabled){transform:translateY(1px);}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover:not(:disabled){background:var(--accent-ink);}
.btn-primary:disabled{background:#9DB9B6;cursor:not-allowed;}
.btn-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--ink);}
.btn-ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent-ink);}
.btn-ghost:disabled{opacity:.5;cursor:not-allowed;}
.btn-block{width:100%;}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;}
.btn-row .btn-ghost{flex:0 0 auto;}
.btn-row .btn-primary{flex:1;}
.btn .spinner{
  width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* progress */
.progress{height:6px;border-radius:999px;background:var(--line);overflow:hidden;display:none;}
.progress.show{display:block;}
.progress > span{display:block;height:100%;width:0%;background:var(--accent);transition:width .25s ease;border-radius:999px;}
.status-line{font-size:.875rem;color:var(--muted);min-height:1.2em;overflow-wrap:anywhere;}

/* thumbnails */
.thumb-grid{display:flex;flex-wrap:wrap;gap:.85rem;align-content:flex-start;}
.thumb{
  width:120px;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--surface);border:1px solid var(--line-strong);
  box-shadow:0 1px 3px rgba(11,22,20,.08);
  position:relative;cursor:grab;
  transition:transform .15s ease,box-shadow .15s ease;
}
.thumb:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(11,22,20,.25);}
.thumb:active{cursor:grabbing;}
.thumb img,.thumb canvas{display:block;width:100%;height:auto;}
.sortable-ghost{opacity:.4;}
.thumb .badge{
  position:absolute;top:6px;left:6px;
  background:var(--ink-strong);color:#fff;
  font-size:.6875rem;font-weight:700;
  padding:.15rem .4rem;border-radius:5px;z-index:1;
}
.thumb .rotate-btn{
  position:absolute;bottom:6px;right:6px;
  background:var(--accent);color:#fff;
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s ease;
  border:none;cursor:pointer;z-index:1;
}
.thumb:hover .rotate-btn,.thumb .rotate-btn:focus-visible{opacity:1;}
@media (hover:none){.thumb .rotate-btn{opacity:1;}}
.thumb .rotate-btn svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.4;}
.thumb .caption{
  font-size:.75rem;text-align:center;color:var(--muted);
  padding:.3rem .4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--surface);border-top:1px solid var(--line);
}
.thumb.selectable{cursor:pointer;}
.thumb.marked{outline:3px solid var(--danger);outline-offset:-1px;}
.thumb .marked-overlay{
  position:absolute;inset:0;background:rgba(179,54,43,.82);
  display:none;align-items:center;justify-content:center;flex-direction:column;
  color:#fff;gap:.25rem;z-index:1;
}
.thumb.marked .marked-overlay{display:flex;}
.thumb .marked-overlay svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.4;}
.thumb .marked-overlay span{font-size:.75rem;font-weight:700;}
.thumb .select-check{
  position:absolute;top:6px;right:6px;width:20px;height:20px;
  accent-color:var(--accent);z-index:2;
}

.empty-state{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--muted);text-align:center;gap:.6rem;min-height:320px;padding:1rem;
}
.empty-state svg{width:56px;height:56px;stroke:var(--line-strong);fill:none;stroke-width:1.2;}
.empty-state p{margin:0;font-size:.9375rem;max-width:30ch;}

/* result */
.result-card{
  border:1px solid var(--good-line);background:var(--good-soft);
  border-radius:var(--radius);padding:1.1rem 1.2rem;
  display:none;flex-direction:column;gap:.75rem;
  animation:fadeIn .3s ease;
}
.result-card.show{display:flex;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.result-top{display:flex;align-items:center;gap:.7rem;}
.result-top .tick{
  width:30px;height:30px;border-radius:50%;background:var(--good);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.result-top .tick svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:3;}
.result-top strong{display:block;font-size:1rem;color:var(--ink-strong);}
.result-top span{font-size:.875rem;color:var(--muted);}
.result-card input[type=text]{border-color:var(--good-line);}
.preview-frame{
  width:100%;min-height:400px;
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  background:#fff;display:none;
}
.preview-frame.show{display:block;}

.info-note{
  background:var(--sunken);
  border:1px solid var(--line);border-left:3px solid var(--line-strong);
  border-radius:var(--radius-sm);
  padding:.75rem .9rem;font-size:.875rem;color:var(--muted);line-height:1.5;
}
.info-note b{color:var(--ink-strong);}
.info-note.warn{background:var(--mark-soft);border-color:var(--mark-line);border-left-color:var(--mark);color:var(--mark-ink);}
.info-note.warn b{color:var(--mark-ink);}
.panel-preview .info-note{background:var(--surface);}

footer{
  max-width:1240px;margin:0 auto;
  padding:1.5rem 1.25rem 3rem;
  border-top:1px solid var(--line-strong);
  color:var(--muted);font-size:.875rem;
}
footer a{color:var(--accent-ink);font-weight:600;text-decoration:none;}
footer a:hover{text-decoration:underline;}

.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;}

/* responsive */
@media (max-width:1000px){
  .workbench{grid-template-columns:1fr;gap:.85rem;}
  .tool-tabs{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
  .tool-tab{
    flex-direction:column;justify-content:center;gap:.35rem;text-align:center;
    padding:.7rem .3rem;font-size:.8125rem;line-height:1.2;
    background:var(--surface);border-color:var(--line);
  }
  .tool-tab[aria-selected="true"]{
    padding-left:.3rem;box-shadow:inset 0 -4px 0 var(--mark);
    border-color:var(--accent);background:var(--accent-soft);
  }
}
@media (max-width:820px){
  .tool-body{grid-template-columns:1fr;}
  .panel-controls{border-right:none;border-bottom:1px solid var(--line);}
}
@media (max-width:520px){
  .masthead{padding-top:1.75rem;}
  .tool-head,.panel-controls,.panel-preview{padding:1.15rem;}
  .thumb{width:calc(50% - .45rem);}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
}