:root { color-scheme: light; --paper:#faf8f3; --surface:#fffefa; --ink:#263144; --navy:#233c5b; --muted:#74766e; --line:#deded4; --wash:#efeee6; --accent:#bd7244; font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; font-size:14px; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); }
button,input,select { font:inherit; }
button,.upload-button { min-height:40px; padding:8px 12px; border:1px solid #cdd0c8; border-radius:6px; background:var(--surface); color:var(--ink); cursor:pointer; transition:transform .12s,opacity .12s; }
@media (hover:hover) { button:hover:not(:disabled),.upload-button:hover { background:#eaece7; border-color:#859183; } button.primary:hover:not(:disabled) { background:#355575; } }
button:active:not(:disabled),.upload-button:active { transform:scale(.98); }
button:disabled { cursor:not-allowed; opacity:.45; }
button.primary { color:white; background:var(--navy); border-color:var(--navy); }
button[aria-pressed="true"] { background:#e3e9ed; color:#173654; border-color:#728a9a; }
:focus-visible { outline:3px solid #b56834; outline-offset:3px; }
.skip-link { position:fixed; top:8px; left:8px; z-index:9; padding:12px; background:var(--navy); color:white; transform:translateY(-160%); border-radius:6px; }
.skip-link:focus { transform:translateY(0); }
input,select { width:100%; min-width:0; min-height:42px; padding:8px 10px; border:1px solid #cdd0c8; border-radius:6px; background:#fff; color:var(--ink); }
input[type="checkbox"] { width:16px; height:16px; min-height:16px; margin:0; accent-color:var(--navy); flex-shrink:0; }
h1,h2,p { margin:0; }
h1 { font-size:19px; letter-spacing:.5px; font-weight:720; }
h2 { font-size:14px; font-weight:700; }
.topbar { display:flex; align-items:center; gap:24px; min-height:82px; padding:16px 24px; border-bottom:1px solid var(--line); background:var(--surface); }
.brand { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.brand-mark { font-size:32px; color:var(--navy); }
.brand p { font-size:9px; letter-spacing:2px; color:var(--muted); margin-top:3px; }
.local-badge,.demo-tag,.state-tag { font-size:11px; padding:4px 7px; border:1px solid #d7d5c6; border-radius:4px; font-weight:500; color:#74654c; background:#f5f0e4; white-space:nowrap; }
.privacy { color:var(--muted); font-size:12px; flex:1; }
.header-actions { display:flex; gap:8px; }
.workspace { display:grid; grid-template-columns:242px minmax(0, 1fr) 256px; align-items:start; min-height:calc(100vh - 125px); }
.parameters,.materials { min-width:0; background:var(--surface); }
.parameters { border-right:1px solid var(--line); }
.materials { border-left:1px solid var(--line); }
.panel-section { padding:19px 18px; border-bottom:1px solid var(--line); }
.panel-section h2 { margin-bottom:15px; }
.step { color:var(--accent); font:11px ui-monospace,Consolas,monospace; margin-right:8px; }
.hint { color:var(--muted); font-size:11px; line-height:1.7; margin-top:9px; }
.source-preview { position:relative; background:#efeee6; border-radius:6px; overflow:hidden; border:1px solid var(--line); margin-bottom:10px; }
.source-preview canvas { width:100%; height:142px; display:block; object-fit:contain; }
.source-preview span { position:absolute; bottom:7px; left:7px; background:#ffffffdc; border-radius:3px; padding:3px 6px; font-size:10px; }
.upload-button { display:block; text-align:center; }
.file-input { position:absolute; width:1px; height:1px; padding:0; opacity:0; min-height:0; }
.upload-button:has(+input:focus-visible) { outline:3px solid #b56834; outline-offset:3px; }
.source-info { margin:10px 0 14px; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }
.field-row { display:flex; align-items:end; gap:9px; }
.field-row label { flex:1; min-width:0; font-size:12px; }
.field-row input { margin-top:7px; font:14px ui-monospace,Consolas,monospace; }
.times { padding-bottom:12px; color:var(--muted); }
.check-label { display:flex; align-items:center; gap:7px; font-size:12px; line-height:1.6; min-height:40px; cursor:pointer; }
.field { display:block; font-size:12px; margin-bottom:12px; }
.field input,.field select { display:block; margin-top:7px; }
.wide { width:100%; }
#generate { margin-top:15px; }
.pending { font-size:12px; color:#975226; margin-top:9px; line-height:1.5; }
.compact { padding-top:15px; }
.editor { padding:22px 22px 0; min-width:0; }
.editor-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:18px; }
.editor-head>div { min-width:0; }
.editor-head h2 { font-size:17px; }
#chartTitle,.print-page h2 { overflow-wrap:anywhere; }
.demo-tag { margin-left:8px; vertical-align:middle; }
#appliedInfo { font-size:11px; line-height:1.6; margin-top:7px; color:var(--muted); }
.editor-toolbar { display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.tools,.history-tools { display:flex; gap:4px; flex-wrap:wrap; }
.tools button { font-size:12px; padding:8px 10px; }
.history-tools button { min-width:40px; padding:8px 9px; }
.viewbar { display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:0 0 12px; }
.segmented { display:flex; gap:3px; margin-right:auto; }
.segmented button { font-size:12px; padding:7px 12px; }
.comparison-note { font-size:11px; color:#795526; background:#f7ecd7; border:1px solid #e7d2ac; padding:10px; line-height:1.6; border-radius:6px; margin-bottom:12px; }
.canvas-wrap { position:relative; min-width:0; height:clamp(340px,57vh,740px); border:1px solid #d5d6cc; border-radius:10px; overflow:hidden; background-color:#eae9e0; background-image:radial-gradient(#c5c5b8 .7px,transparent .7px); background-size:12px 12px; }
#chart { width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
.canvas-corner { position:absolute; left:12px; bottom:12px; background:#fffef6e8; border:1px solid #d8d6c8; font-size:10px; color:#737263; border-radius:4px; padding:5px 8px; pointer-events:none; }
.canvas-footer { display:flex; gap:12px; align-items:center; justify-content:space-between; min-height:60px; font-size:11px; color:var(--muted); }
#coordinate { font-family:ui-monospace,Consolas,monospace; }
.zoom-tools { display:flex; align-items:center; gap:4px; }
.zoom-tools button { min-width:40px; }
.zoom-tools output { width:47px; text-align:center; font-family:ui-monospace,Consolas,monospace; }
.editor-summary { display:flex; flex-wrap:wrap; gap:18px; padding:17px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:11px; color:var(--muted); }
.editor-summary strong { font:600 18px ui-monospace,Consolas,monospace; color:var(--ink); margin-right:4px; }
#viewLabel { margin-left:auto; }
#status { font-size:12px; line-height:1.7; padding:12px 0 20px; color:#52664a; overflow-wrap:anywhere; min-height:58px; }
.selected-color { display:flex; align-items:center; gap:12px; border-radius:6px; padding:11px; background:#f1f0e9; margin-bottom:8px; }
.selected-color i { display:block; width:38px; height:38px; border:1px solid #a1a29b; border-radius:4px; }
.selected-color span { display:block; font-size:10px; color:var(--muted); }
.selected-color strong { display:block; font:18px ui-monospace,Consolas,monospace; margin-top:3px; }
.palette-tabs { display:flex; gap:4px; margin-top:16px; }
.palette-tabs button { flex:1; font-size:12px; padding:7px; }
.search-label { margin-top:11px; font-size:11px; }
.palette-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; max-height:316px; overflow-y:auto; scrollbar-width:thin; padding:3px; margin:0 -3px; }
.color-button { position:relative; display:flex; flex-direction:column; gap:4px; align-items:center; padding:7px 3px; min-width:0; }
.color-button i { display:block; width:30px; height:23px; border:1px solid #aaa9; border-radius:3px; }
.color-button .code { font:11px ui-monospace,Consolas,monospace; }
.color-button small { font:10px ui-monospace,Consolas,monospace; color:var(--muted); }
.color-button[aria-pressed="true"] { box-shadow:inset 0 0 0 1px var(--navy); }
.empty-list { font-size:12px; line-height:1.6; color:var(--muted); grid-column:1/-1; }
.replace-target { font-size:12px; margin-bottom:10px; }
.replace-target strong { font-family:ui-monospace,Consolas,monospace; }
.app-footer { display:flex; justify-content:space-between; gap:20px; padding:12px 24px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
#errors { margin:12px 24px 0; padding:12px 16px; color:#922f23; background:#fff0e9; border:1px solid #e4b7a2; border-radius:6px; font-size:13px; line-height:1.7; }
[hidden] { display:none !important; }
#printDialog { padding:22px; }
.print-controls { display:flex; flex-wrap:wrap; gap:12px; align-items:center; position:sticky; top:0; padding:16px; background:var(--paper); border:1px solid var(--line); z-index:2; }
.print-controls div { flex:1; min-width:220px; }
.print-controls p { font-size:12px; line-height:1.6; color:var(--muted); margin-top:6px; }
.print-page { background:white; width:190mm; min-height:270mm; max-width:100%; padding:8mm; margin:20px auto; box-shadow:0 2px 15px #0001; color:#18212f; }
.print-page h2 { font-size:16px; margin-bottom:8px; }
.print-page p { font-size:11px; margin-bottom:10px; }
.print-page canvas { display:block; width:100%; height:auto; }
.print-materials { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.print-materials div { display:flex; align-items:center; gap:8px; font:12px monospace; min-height:30px; }
.print-materials i { width:22px; height:22px; border:1px solid #888; flex-shrink:0; print-color-adjust:exact; }
@media (min-width:1600px) { .workspace { grid-template-columns:270px minmax(0, 1fr) 290px; } .panel-section { padding:22px; } .editor { padding:25px 30px 0; } }
@media (max-width:1120px) { .workspace { grid-template-columns:220px minmax(0, 1fr); } .materials { grid-column:1/-1; display:grid; grid-template-columns:2fr 1fr 1fr; border-top:1px solid var(--line); border-left:0; } .materials .panel-section { border-right:1px solid var(--line); } .palette-list { grid-template-columns:repeat(8,minmax(0,1fr)); max-height:220px; } .privacy { display:none; } .topbar { justify-content:space-between; } .editor { padding:20px 16px 0; } }
@media (max-width:760px) { .topbar { padding:14px 16px; flex-wrap:wrap; gap:14px; } .header-actions { width:100%; } .header-actions button { flex:1; } .workspace { display:flex; flex-direction:column; } .parameters,.editor,.materials { width:100%; } .parameters { border-right:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-bottom:1px solid var(--line); } .parameters .compact { display:none; } .parameters .panel-section:first-child { border-right:1px solid var(--line); } .panel-section { padding:16px; } .materials { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .materials .panel-section:first-child { grid-column:1/-1; } .palette-list { grid-template-columns:repeat(6,minmax(0,1fr)); } .canvas-wrap { height:480px; } .app-footer { padding:12px 16px; flex-wrap:wrap; gap:6px; } }
@media (max-width:480px) { .parameters { display:block; } .parameters .panel-section:first-child { border-right:0; } .source-preview canvas { height:150px; } .parameters .panel-section { padding:18px 16px; } .source-preview { float:left; width:42%; margin:0 14px 8px 0; } .source-info { clear:both; padding-top:8px; } .editor { padding:18px 12px 0; } .editor-toolbar { gap:6px; } .tools { flex:1; } .tools button { padding:7px 8px; font-size:11px; } .history-tools span { display:none; } .canvas-wrap { height:420px; } .viewbar { gap:8px; } .viewbar .check-label { font-size:11px; } .segmented { margin-right:0; } .segmented button { padding:7px 9px; font-size:11px; } .canvas-footer { flex-wrap:wrap; padding:9px 0; gap:6px; } .zoom-tools { margin-left:auto; } .editor-summary { gap:12px; } .editor-summary strong { font-size:16px; } .materials { display:block; } .palette-list { grid-template-columns:repeat(5,minmax(0,1fr)); max-height:270px; } .brand { gap:9px; } #printDialog { padding:8px; } .print-page { min-height:0; padding:10px; } .print-materials { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* 375px: min-width:0 grid children and wrapping controls avoid horizontal body scroll. */
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }
.modebar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.modebar span { color:var(--muted); font-size:11px; margin-left:5px; }
#resolutionPanel { max-width:1440px; margin:0 auto; padding:28px 32px 40px; }
.resolution-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.eyebrow { font:10px ui-monospace,Consolas,monospace; letter-spacing:1.5px; color:var(--muted); margin-bottom:8px; }
.resolution-header h2 { font-size:26px; letter-spacing:-.012em; }
#resolutionSourceInfo { font-size:12px; margin-top:9px; line-height:1.7; color:var(--muted); overflow-wrap:anywhere; }
.resolution-intro { display:flex; gap:22px; align-items:center; padding:20px 0; }
.resolution-intro > canvas { width:132px; height:auto; flex-shrink:0; background:var(--surface); border:1px solid var(--line); border-radius:6px; }
.resolution-intro > div { max-width:900px; }
.resolution-intro p { font-size:12px; line-height:1.8; margin-bottom:6px; }
#resolutionSettings { font-weight:650; color:var(--navy); }
#resetResolutionFocus { margin-top:5px; font-size:12px; }
#resolutionStatus { min-height:35px; font-size:12px; line-height:1.6; color:#52664a; }
.resolution-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.resolution-card { min-width:0; padding-top:16px; border-top:1px solid var(--line); }
.resolution-card h3 { margin:0; font:600 28px ui-monospace,Consolas,"Microsoft YaHei",monospace; color:var(--navy); }
.resolution-dimensions { font-size:12px; color:var(--muted); margin:7px 0 13px; }
.resolution-card canvas { display:block; width:100%; height:auto; border-radius:6px; background:#eeebe3; }
.resolution-card canvas[role="button"] { cursor:crosshair; touch-action:manipulation; }
.resolution-stats { font-size:13px; line-height:1.7; margin-top:10px; font-variant-numeric:tabular-nums; }
.detail-label { font-size:11px; line-height:1.5; color:var(--muted); margin:17px 0 8px; }
.resolution-footnote { font-size:12px; line-height:1.8; margin-top:25px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); }
@media (max-width:960px) { .resolution-results { grid-template-columns:minmax(0,1fr); max-width:600px; margin:0 auto; } #resolutionPanel { padding:20px; } }
@media (max-width:480px) { .header-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } #resolutionCompare { grid-column:1/-1; } .modebar { gap:5px; } .modebar button { font-size:12px; padding:8px 9px; } .modebar span { width:100%; margin:4px 0 0; } #resolutionPanel { padding:18px 14px 30px; } .resolution-header { flex-wrap:wrap; gap:12px; } .resolution-header h2 { font-size:23px; } .resolution-intro { gap:12px; align-items:flex-start; } .resolution-intro > canvas { width:82px; } .resolution-intro p { font-size:11px; } .resolution-results { gap:25px; } }
@page { size:A4 portrait; margin:10mm; }
@media print { #resolutionPanel { display:none !important; } }
@media print { body { background:white; } #workbench,.print-controls { display:none !important; } #printDialog { display:block !important; padding:0; } #printArea { display:block; } .print-page { width:190mm; max-width:none; min-height:270mm; height:270mm; padding:0; margin:0; box-shadow:none; break-after: page; overflow:hidden; } .print-page:last-child { break-after:auto; } .print-page canvas { width:184mm; height:auto; max-height:245mm; object-fit:contain; object-position:left top; } .print-materials { grid-template-columns:repeat(3,minmax(0,1fr)); } * { print-color-adjust:exact; -webkit-print-color-adjust:exact; } }