/* Screen presentation. Production documents keep their existing print layout. */
@media screen {
  :root {
    --bg:#f5f3ef;
    --paper:#fffefa;
    --ink:#303431;
    --muted:#656961;
    --line:#e3e1da;
    --green:#343e38;
    --gold:#826837;
    --light:#f0eee7;
    --radius:14px;
    --atelier-soft:#f6f4ef;
    --atelier-selected:#ede8dc;
    --atelier-border:#b3a17d;
  }
  body { background:var(--bg); }
  .topbar { background:#fffefa; border-bottom-color:#dedbd2; }
  .brand { gap:12px; color:#343a34; }
  .brandmark { width:35px; height:43px; color:var(--gold); }
  .brandmark svg { width:100%; height:100%; }
  .brand small { font-size:9px; letter-spacing:2px; font-weight:500; }
  .top-context,.internal { color:var(--muted); }
  .top-context span { color:#b9b4a8; }
  .internal { background:var(--atelier-soft); border-color:var(--line); }
  .projectbar { padding-bottom:22px; border-bottom:1px solid var(--line); }
  .eyebrow { font-size:11px; letter-spacing:2px; }
  .eyebrow span { color:#797a71; }
  .design-name { font-weight:500; color:var(--ink); line-height:1.5; }
  .design-name:focus { background:#fffefa; }
  .draft-status { margin-top:8px; font-size:12px; line-height:1.7; color:#64715b; max-width:480px; }
  .draft-status::before { content:''; display:inline-block; width:6px; height:6px; margin:0 7px 2px 0; border-radius:50%; background:currentColor; }
  .draft-status.draft-warning { color:#896026; }
  .subtle,label,.micro,.catalog-foot,.studio-foot { color:var(--muted); }
  .btn,.help-trigger { background:#fffefa; border-color:#d5d4ca; border-radius:8px; }
  .btn.primary { background:var(--green); border-color:var(--green); box-shadow:0 3px 8px #2833290c; }
  .panel { box-shadow:0 4px 18px #3e3b2c05; }
  .panel-heading h2 { font-size:16px; letter-spacing:.6px; }
  .panel-heading { padding-block:21px 18px; }
  .panel-heading .subtle { font-variant-numeric:tabular-nums; }
  .segmented { background:#efeee8; padding:4px; border-radius:8px; }
  .segmented button { color:#62685f; }
  .segmented button.active { background:#fffefa; color:#303a32; box-shadow:0 1px 4px #3a342a17; }
  .search { background:#faf9f5; border-color:var(--line); border-radius:8px; }
  .search:focus-within { border-color:#887854; box-shadow:0 0 0 2px #b5a47b25; }
  input,select,textarea { accent-color:var(--green); }
  select,input[type=number],textarea { border-color:#d9d9ce; background:#fffefa; }
  input:focus,select:focus,textarea:focus { outline-color:#887854; }
  button:focus-visible,a:focus-visible { outline-color:#947842; }
  .catalog { gap:12px; scrollbar-color:#cfcabf transparent; }
  .material-card { padding:12px 10px; background:#fffefa; border-color:#e4e2d9; border-radius:10px; }
  .material-card svg { max-width:100%; background:radial-gradient(ellipse at 50% 44%,#fffefa 22%,#f0ede5 100%); border-radius:50%; margin-bottom:11px; }
  .material-preview { display:block; }
  .preview-pending svg { opacity:.65; }
  .preview-unavailable { position:relative; }
  .preview-unavailable::after { content:'縮圖暫不可用'; position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:10px; color:var(--muted); background:#fffefae8; }
  .material-card strong { font-weight:600; line-height:1.5; color:#353a34; }
  .material-card small { color:#686c63; line-height:1.7; }
  .material-card .plus { top:8px; right:8px; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:#f1eee5; color:#77613e; line-height:1; }
  .material-used { background:#ede7d8; color:#69532e; left:6px; top:8px; border:1px solid #e0d7c1; border-radius:4px; font-variant-numeric:tabular-nums; }
  .thread-card { padding:16px 12px; }
  .thread-card svg { background:none; }
  .thread-card.active { background:#f3efe5; border-color:var(--atelier-border); }
  .tone-filters button { background:#fffefa; color:#5f655d; }
  .tone-filters button.active { background:var(--atelier-selected); border-color:var(--atelier-border); color:#645232; }
  .insertion-bar { color:#666b61; line-height:1.6; }
  .insertion-bar.replacement-active { background:#f2ecde; border-color:#c9b998; color:#68552e; }
  .material-card.replace-candidate { border-color:#c4b48f; }
  .material-card.replace-candidate .plus { color:#6c542a; background:#eae0c9; }
  .studio { border-color:#d7d5ca; box-shadow:0 6px 28px #3e3b2c09; }
  .studio-toolbar { background:#fffefa; }
  .preview-options { background:#f7f5ef; }
  .preview-control-group>span { color:var(--muted); }
  .preview-control-group button { background:#fffefa; border-color:#dddcd2; }
  .preview-control-group button.active { background:var(--atelier-selected); border-color:var(--atelier-border); color:#655331; }
  .canvas-wrap { background:radial-gradient(ellipse at 50% 42%,#fffefa 20%,#f0ede5 100%); }
  .canvas-label { color:#6d6f63; letter-spacing:1.8px; font-size:11px; }
  .canvas-label span { color:#74756b; font-size:12px; letter-spacing:.3px; }
  .canvas-bottom { color:#61675d; }
  .canvas-bottom .textbtn { color:#525b4f; background:#fffefaeb; border:1px solid #deddd3; border-radius:7px; padding-inline:11px; }
  .canvas-wrap.dark-preview { background:#252c2a; }
  .dark-preview .canvas-label,.dark-preview .canvas-label span,.dark-preview .canvas-bottom { color:#edf2ee; }
  .dark-preview .canvas-bottom .textbtn { background:#252c2acc; border-color:#67736b; color:#edf2ee; }
  .metrics { background:#faf8f2; padding-block:19px; }
  .metrics strong { font-size:24px; color:#353b33; font-variant-numeric:tabular-nums; font-weight:500; }
  .metrics span { color:#6b6e64; }
  .sequence-head h3 { font-weight:600; letter-spacing:.4px; }
  .textbtn { color:#60685d; }
  .sequence { scrollbar-color:#ccc6b7 transparent; }
  .seq { background:#fffefa; }
  .seq.active { background:#eee8da; border-color:#b29e72; }
  .seq span { color:#656c60; font-variant-numeric:tabular-nums; }
  .seq.drag-target { border-color:#8a7140; box-shadow:inset 3px 0 #8a7140; background:#f2ecde; }
  .selection-thumb { border-color:#e0ded3; background:radial-gradient(ellipse at center,#fffefa,#eee9dd); }
  .selection-position,.selected-size-label,.selection-note,.selection-empty { color:var(--muted); }
  .selection-specs { background:#f7f5ee; border-color:#e2dfd3; }
  .selection-specs dt { color:#6c7165; }
  .accessory-pairing { margin-top:14px; padding-top:14px; border-top:1px solid #e2dfd3; color:var(--muted); font-size:12px; line-height:1.75; }
  .accessory-pairing h4 { margin:0 0 6px; color:var(--ink); font-size:13px; font-weight:600; }
  .accessory-pairing p { margin:5px 0; }
  .pairing-neighbors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0 6px; }
  .pairing-neighbors button { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:10px; text-align:left; border:1px solid #dcd8cb; border-radius:8px; background:#faf8f1; color:var(--ink); cursor:pointer; line-height:1.5; }
  .pairing-neighbors button strong { font-size:12px; font-weight:500; overflow-wrap:anywhere; }
  .pairing-neighbors button span,.pairing-neighbors button small,.pairing-caption { font-size:11px; color:var(--muted); }
  .pairing-neighbors button:focus-visible { outline:2px solid #8a7140; outline-offset:2px; }
  .selected-actions .replace-material { background:#f3eee1; border-color:#c4b48f; color:#69532f; }
  .selected-actions { flex-wrap:wrap; }
  .selected-actions .replace-material[aria-pressed=true] { background:#675637; border-color:#675637; color:white; }
  .section-label { color:var(--gold); }
  .chip { background:#fffefa; border-color:#ddded3; color:#636a5e; }
  .chip.active { background:#e9ece4; border-color:#a2ad98; color:#3e5038; }
  .styles .chip.active { background:#efe7d5; border-color:#bfa775; color:#70572b; }
  .advice { background:#f6f3ea; border-color:#e2dac7; color:#5f6658; border-radius:10px; }
  .advice strong,.palette-reasons b { color:#454f3d; }
  .palette-reasons li { border-color:#e1dccf; }
  .palette-reasons span,.coverage-note small { color:#626c59; }
  .coverage-note { border-color:#dcd3c0; }
  .fit-notice { background:#f0f2ea; color:#516347; }
  .fit-notice.warn { background:#fcf3df; color:#835e27; }
  .production-grid textarea { height:64px; }
  .spec-loading { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:28px; text-align:center; color:var(--muted); line-height:1.8; }
  .spec-loading strong { font-size:18px; color:var(--ink); font-weight:500; }
  footer { color:#73756a; }
  dialog { background:#fffefa; box-shadow:0 24px 100px #25292345; }
  dialog::backdrop { background:#242a26a8; }
  #newDesignDialog { max-width:600px; }
  .new-design-body { padding:22px 28px; display:grid; gap:18px; }
  .new-design-summary { font-size:13px; line-height:1.7; color:var(--muted); overflow-wrap:anywhere; }
  .new-design-body label { font-size:13px; }
  .new-design-body input[type=text],#newDesignName { width:100%; border:1px solid #d5d4ca; border-radius:7px; padding:10px; background:white; }
  .new-design-option { display:flex; align-items:flex-start; gap:10px; padding:14px; background:#f5f2e9; border:1px solid #e3ddcd; border-radius:8px; line-height:1.7; cursor:pointer; }
  .new-design-option input { flex:0 0 18px; width:18px; height:18px; margin:3px 0 0; accent-color:var(--green); }
  .new-design-option small { display:block; margin-top:5px; font-size:11px; color:var(--muted); }
  .new-design-storage { font-size:12px; color:var(--muted); line-height:1.8; }
  .guide-body { color:#5a6455; }
  .guide-step-number { background:#eee8d9; color:#715c34; }
  .guide-steps h3,.guide-files>h3 { color:#3e4937; }
  .guide-files { background:#f5f1e7; border-color:#e2dac7; }
  .guide-files dt { color:#555d49; }
  .guide-files dl>div+div,.guide-steps li,.guide-faq { border-color:#e1dccf; }
  #toast { background:#354035; box-shadow:0 6px 28px #343b2f22; }
}
@media screen and (hover:hover) {
  .material-card:hover { border-color:#b4a078; background:#faf7ef; box-shadow:0 3px 12px #5549290c; }
  .textbtn:hover:not(:disabled) { color:#775d2e; }
}
@media screen and (max-width:700px) {
  .projectbar { padding-bottom:18px; }
  .brand small { font-size:9px; }
  .brandmark { width:29px; height:37px; }
  .catalog { gap:9px; }
  .material-card { padding:12px 8px; }
  .material-card strong { font-size:13px; }
  .material-card svg { margin-top:10px; }
  .thread-card svg { margin-top:0; }
  .metrics strong { font-size:22px; }
  .canvas-bottom .textbtn { padding-inline:8px; }
}