/* Local aliases. The chrome (sidebar + body bg) is owned by /shared/nav.css;
   this sheet only styles the effect page's own content, but it reads the
   same variables so the palette stays unified across the three tools.

   DM Mono is self-hosted from /fonts/ (declared in /shared/nav.css) and the
   CJK face uses the OS-native stack, so no page depends on Google Fonts —
   those domains are unreachable from mainland China. */
:root {
  --ink: var(--app-text);
  --paper: var(--app-bg);
  --paper-deep: var(--app-surface);
  --line: var(--app-line);
  --sage: var(--app-text-muted);
  --lime: var(--app-accent);
  --dark: var(--app-accent-strong);
  --muted: var(--app-text-muted);
}

* { box-sizing: border-box; }
body { margin:0; min-width:320px; color:var(--ink); font-family:var(--chrome-font,"PingFang TC","Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif); }

.shell { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:56px 0 96px; }
.hero { display:grid; grid-template-columns:1fr auto; gap:8px 32px; align-items:end; margin-bottom:38px; }
.eyebrow,.section-kicker { margin:0; color:var(--sage); font:500 11px/1.2 "DM Mono",monospace; letter-spacing:.14em; }
h1 { margin:0; font-size:clamp(42px,7vw,78px); letter-spacing:-.065em; line-height:.95; color:var(--ink); }
.intro { max-width:320px; margin:0 0 3px; color:var(--muted); font-size:14px; line-height:1.8; }
.panel { border:1px solid var(--line); background:var(--app-surface); box-shadow:8px 8px 0 rgba(0,0,0,.35); padding:26px; color:var(--ink); }
.section-heading { display:flex; justify-content:space-between; align-items:start; gap:18px; margin-bottom:22px; }
h2 { margin:5px 0 0; font-size:21px; letter-spacing:-.035em; color:var(--ink); }
.format-note,.result-meta { color:var(--muted); font:11px "DM Mono",monospace; }

.upload-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.upload-card { position:relative; display:flex; min-height:194px; padding:20px; flex-direction:column; border:1px solid var(--line); background:var(--app-surface-2, #1c2e28); cursor:pointer; transition:transform .18s,background .18s; color:var(--ink); }
.upload-card:hover { transform:translate(-2px,-2px); background:var(--app-surface); box-shadow:4px 4px 0 var(--lime); }
.upload-card input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.upload-index { color:var(--lime); font:500 12px "DM Mono",monospace; }
.upload-card strong { margin-top:auto; font-size:18px; color:var(--ink); }
.upload-card small { margin-top:4px; color:var(--muted); font-size:12px; }
.file-name { overflow:hidden; margin-top:18px; color:var(--sage); font:500 11px "DM Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }

.toggle-row { display:flex; align-items:center; gap:11px; margin-top:18px; cursor:pointer; color:var(--ink); }
.toggle-row input { position:absolute; opacity:0; }
.toggle-control { width:36px; height:20px; flex:none; border-radius:999px; background:#2a4a40; transition:.2s; }
.toggle-control::after { display:block; width:14px; height:14px; margin:3px; border-radius:50%; background:var(--app-text); content:""; transition:.2s; }
.toggle-row input:checked + .toggle-control { background:var(--lime); }
.toggle-row input:checked + .toggle-control::after { transform:translateX(16px); background:#0e1a17; }
.toggle-row strong,.toggle-row small { display:block; }
.toggle-row strong { font-size:13px; }
.toggle-row small { margin-top:2px; color:var(--muted); font-size:12px; }

.action-row { display:flex; justify-content:space-between; align-items:center; gap:22px; margin:26px 0 36px; }
.status { margin:0; color:var(--muted); font-size:13px; }
/* Scope page-button rules to the effect shell so the sidebar's
   .app-sidebar-toggle (injected by /shared/nav.js) keeps its own compact
   28px chrome styling. Without this, the global `button { min-width:210px;
   padding:15px 17px }` blows up the sidebar toggle into a 210px lime block
   and overflow:hidden on .app-sidebar hides it entirely. */
.shell button { display:flex; align-items:center; gap:24px; min-width:210px; justify-content:space-between; border:0; padding:15px 17px 15px 20px; color:#0e1a17; background:var(--lime); cursor:pointer; font:700 15px "Noto Sans TC",sans-serif; transition:.18s; }
.shell button:hover:not(:disabled) { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--lime); background:var(--app-accent-strong, #b9e342); }
.shell button:disabled { cursor:wait; opacity:.62; }
.button-arrow { font:22px "DM Mono",monospace; }
.is-busy .button-arrow { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.result { scroll-margin-top:22px; }
.image-stage { display:grid; max-height:650px; overflow:auto; place-items:center; border:1px solid var(--line); padding:12px; background:radial-gradient(rgba(255,255,255,.04) .6px,transparent .7px) 0 0 / 5px 5px,radial-gradient(rgba(255,255,255,.025) .55px,transparent .65px) 2px 3px / 7px 7px,#080f0d; }
.image-stage img { display:block; max-width:100%; max-height:620px; object-fit:contain; background:transparent; }
.download { border-bottom:1px solid var(--lime); color:var(--lime); text-decoration:none; font-size:13px; font-weight:600; }

@media (max-width:680px) {
  .shell { width:min(100% - 28px,1120px); padding-top:42px; }
  .hero { display:block; }
  .intro { margin-top:18px; }
  .upload-grid { grid-template-columns:1fr; }
  .upload-card { min-height:142px; }
  .action-row { align-items:stretch; flex-direction:column; }
  button { width:100%; }
  .panel { padding:18px; }
  .section-heading { flex-direction:column; gap:10px; }
}

.colour-guide { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; padding:13px; border:1px dashed var(--line); background:rgba(255,255,255,.04); color:var(--ink); }
.red-swatch { width:24px; height:24px; flex:none; background:#ff0000; box-shadow:3px 3px 0 var(--dark); }
.colour-guide strong,.colour-guide small { display:block; }
.colour-guide strong { font-size:13px; }
.colour-guide small { margin-top:3px; color:var(--muted); font-size:12px; line-height:1.6; }
.colour-guide code { font:500 12px "DM Mono",monospace; color:var(--lime); }
.white-swatch { width:24px; height:24px; flex:none; border:1px solid var(--dark); background:#fff; box-shadow:3px 3px 0 var(--dark); }
.target-swatch { width:24px; height:24px; flex:none; border:1px solid var(--dark); background:#efefef; box-shadow:3px 3px 0 var(--dark); }

.target-colour-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
.target-colour-field { display:flex; align-items:center; gap:8px; }
.target-colour-field > span { color:var(--muted); font:500 11px "DM Mono",monospace; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.target-colour-field input[type="text"] { width:110px; padding:9px 10px; border:1px solid var(--line); color:var(--ink); background:var(--app-surface-2, #1c2e28); font:500 13px/1 var(--chrome-mono, "DM Mono"),monospace; letter-spacing:.06em; text-transform:uppercase; outline:none; }
.target-colour-field input[type="text"]:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(200,243,90,.18); }
.target-colour-field input[type="text"].is-invalid { border-color:var(--app-danger, #ff5c7a); }
.target-colour-picker { width:38px; height:38px; flex:none; padding:0; border:1px solid var(--line); background:transparent; cursor:pointer; }
.target-colour-picker::-webkit-color-swatch-wrapper { padding:3px; }
.target-colour-picker::-webkit-color-swatch { border:0; border-radius:3px; }
.ghost-button { display:inline-flex; min-width:0; padding:9px 13px; border:1px solid var(--line); background:transparent; color:var(--muted); font:500 12px "Noto Sans TC",sans-serif; gap:0; cursor:pointer; transition:.16s; }
.ghost-button:hover { border-color:var(--lime); color:var(--lime); transform:none; box-shadow:none; background:transparent; }
.target-colour-hint { width:100%; margin:2px 0 0; color:var(--muted); font:500 11px/1.5 "DM Mono",monospace; letter-spacing:.06em; }
.target-colour-hint.is-invalid { color:var(--app-danger, #ff5c7a); }

.source-preview { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }
.source-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px; }
.source-preview h3 { margin:4px 0 0; font-size:17px; letter-spacing:-.025em; color:var(--ink); }
.pdf-page-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.pdf-page-controls label { display:flex; align-items:center; gap:7px; color:var(--muted); font:500 12px "DM Mono",monospace; white-space:nowrap; }
.pdf-page-controls input { width:64px; padding:8px 7px; border:1px solid var(--line); color:var(--ink); background:var(--app-surface-2, #1c2e28); text-align:center; font:500 12px "DM Mono",monospace; outline:none; }
.pdf-page-controls select { padding:8px 28px 8px 9px; border:1px solid var(--line); color:var(--ink); background:var(--app-surface-2, #1c2e28); font:500 12px "DM Mono",monospace; outline:none; }
.pdf-page-controls input:focus,.pdf-page-controls select:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(200,243,90,.18); }
.pdf-quality-control { margin-left:6px; }
.page-button { display:grid; width:34px; min-width:34px; height:34px; padding:0; place-items:center; border:1px solid var(--lime); color:var(--lime); background:transparent; font:18px "DM Mono",monospace; }
.page-button:hover:not(:disabled) { color:#0e1a17; background:var(--lime); box-shadow:none; transform:none; }
.page-button:disabled { cursor:not-allowed; opacity:.35; }
.source-stage { display:grid; max-height:520px; overflow:auto; place-items:center; border:1px solid var(--line); padding:12px; background:linear-gradient(45deg,#1c2e28 25%,transparent 25%) 0 0/18px 18px,linear-gradient(45deg,transparent 75%,#1c2e28 75%) 0 0/18px 18px,linear-gradient(45deg,transparent 75%,#1c2e28 75%) 9px -9px/18px 18px,linear-gradient(45deg,#1c2e28 25%,#16241f 25%) 9px 9px/18px 18px; }
.source-stage img,.source-stage canvas { display:block; max-width:100%; max-height:494px; object-fit:contain; box-shadow:0 2px 14px rgba(0,0,0,.4); background:#fff; }
.source-meta { margin:10px 0 0; color:var(--muted); font:11px/1.6 "DM Mono",monospace; }

@media (max-width:680px) {
  .source-preview-heading { align-items:flex-start; flex-direction:column; }
  .pdf-page-controls { width:100%; justify-content:space-between; }
  .source-stage { max-height:430px; }
  .source-stage img,.source-stage canvas { max-height:404px; }
}