:root { color-scheme: light; --ink:#17212b; --muted:#68727e; --line:#e5e9ee; --accent:#ee7448; --accent-dark:#c95831; --panel:#fff; --bg:#f5f7f8; }
* { box-sizing:border-box; }
body { margin:0; background:linear-gradient(145deg,#f8fafb 0%,#f0f3f5 100%); color:var(--ink); font:15px/1.55 "Segoe UI","Microsoft YaHei",sans-serif; }
.shell { max-width:1120px; margin:0 auto; padding:42px 24px 64px; }
.hero { display:flex; align-items:center; gap:16px; margin-bottom:28px; }
.brand-mark { width:52px; height:52px; display:grid; place-items:center; border-radius:16px; background:var(--ink); color:#fff; font-size:28px; font-weight:800; box-shadow:0 10px 20px #17212b20; }
.eyebrow { margin:0 0 2px; color:var(--accent-dark); font-size:11px; letter-spacing:.16em; font-weight:800; }
h1,h2,p { margin:0; } h1 { font-size:30px; letter-spacing:-.03em; } h2 { font-size:17px; } .subtitle { color:var(--muted); margin-top:4px; }
.ghost { margin-left:auto; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:10px; padding:10px 15px; cursor:pointer; font-weight:700; }
.grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:20px; align-items:start; }
.panel { background:var(--panel); border:1px solid #e8ecef; border-radius:22px; box-shadow:0 16px 45px #1b283310; padding:26px; }
.step { display:flex; gap:12px; align-items:flex-start; margin:0 0 15px; } .step>span { color:var(--accent); font-weight:800; font-size:12px; letter-spacing:.12em; padding-top:3px; } .step p { color:var(--muted); font-size:13px; margin-top:2px; }
.dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:170px; border:1.5px dashed #ccd4dc; border-radius:15px; color:var(--muted); cursor:pointer; transition:.2s; margin:0 0 26px; background:#fbfcfd; } .dropzone:hover,.dropzone.drag { border-color:var(--accent); background:#fff7f3; } .dropzone input { display:none; } .dropzone strong { color:var(--ink); } .dropzone small { max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .upload-icon { width:38px; height:38px; border-radius:50%; background:#fff0ea; color:var(--accent-dark); display:grid; place-items:center; font-size:23px; font-weight:800; }
.preview-wrap { display:flex; gap:15px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:13px; margin-top:-12px; margin-bottom:26px; background:#fafbfc; } .preview-wrap img { max-width:55%; max-height:320px; object-fit:contain; background:#fff; border:1px solid var(--line); } .preview-meta { color:var(--muted); font-size:13px; } .preview-meta a { color:var(--accent-dark); cursor:pointer; text-decoration:underline; } .hidden { display:none!important; }
.printer-row { display:flex; gap:10px; align-items:center; } select,input[type=number] { width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 12px; background:#fff; color:var(--ink); font:inherit; } .printer-row select { flex:1; } .dot,.status-dot { width:9px; height:9px; border-radius:50%; background:#c9d1d9; display:inline-block; } .dot.live,.status-dot { background:#39ae78; box-shadow:0 0 0 4px #39ae7820; }
.printer-info { font-size:13px; color:var(--muted); min-height:38px; padding:9px 11px; background:#f8fafb; border-radius:9px; margin:8px 0 25px; }
.settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:18px; } .settings label { color:var(--muted); font-size:12px; display:flex; flex-direction:column; gap:6px; } .settings input[type=range] { width:100%; accent-color:var(--accent); padding:7px 0; } output { font-size:11px; color:var(--accent-dark); align-self:flex-end; margin-top:-25px; }.check { flex-direction:row!important; align-items:center; padding-top:8px; } .check input { accent-color:var(--accent); }
.primary { width:100%; border:0; background:var(--accent); color:#fff; border-radius:11px; padding:13px; font:inherit; font-weight:800; cursor:pointer; box-shadow:0 8px 20px #ee744840; } .primary:disabled { cursor:not-allowed; opacity:.45; box-shadow:none; }
.status { color:var(--muted); font-size:13px; text-align:center; min-height:22px; padding-top:11px; } .status.ok { color:#278557; } .status.error { color:#bb4c35; }
.side-panel { padding:24px; background:#17212b; color:#edf2f5; } .side-title { display:flex; align-items:center; gap:9px; margin-bottom:13px; } .side-panel p { color:#b6c0c8; font-size:13px; } .facts { border-top:1px solid #ffffff18; margin-top:21px; padding-top:4px; } .facts div { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid #ffffff18; gap:14px; } .facts b { color:#b6c0c8; font-size:12px; font-weight:500; } .facts span { font-size:12px; text-align:right; } .hint { margin-top:22px; padding:13px; border-radius:11px; background:#ffffff0d; color:#b6c0c8; font-size:12px; } .hint b { color:#fff; }
@media (max-width:800px) { .shell { padding:25px 14px 44px; } .grid { grid-template-columns:1fr; } .settings { grid-template-columns:1fr 1fr; } .hero { align-items:flex-start; } h1 { font-size:25px; } .ghost { padding:8px 11px; } }
.speed-note { color:var(--muted); font-size:12px; margin:0 0 14px; }
progress { width:100%; height:8px; margin-top:15px; accent-color:var(--accent); }
.exit-button { width:100%; margin-top:20px; padding:10px; border:1px solid #ffffff33; border-radius:10px; color:#c4cdd4; background:transparent; cursor:pointer; }
button:disabled,select:disabled,input:disabled { cursor:wait; opacity:.6; }
button:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.notice { margin:-6px 0 22px; padding:12px 16px; border:1px solid #e3e8ec; border-radius:12px; background:#fff; color:var(--muted); font-size:13px; }
.hero>div:nth-child(2) { flex:1; min-width:0; }
.settings output { margin-top:0; line-height:1; }
.device-name { flex:1; overflow-wrap:anywhere; min-width:0; padding:10px 0; font-weight:700; }
.uncertain { margin-top:16px; padding:16px; border:1px solid #ebc3aa; background:#fff6ed; border-radius:12px; color:#834622; font-size:13px; }
.uncertain button { width:100%; margin-top:12px; }
footer { margin-top:24px; text-align:center; color:var(--muted); font-size:12px; }
.preview-wrap img { image-rendering:pixelated; }
@media (max-width:420px) {
  .hero { display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px 16px; }
  .hero .brand-mark { grid-column:1; grid-row:1; }
  .hero>div:nth-child(2) { grid-column:2; grid-row:1; }
  .hero .ghost { grid-column:2; justify-self:start; margin-left:0; }
}
@media (max-width:420px) { .hero { flex-wrap:wrap; } .hero .ghost { margin-left:68px; } .panel { padding:20px; } .printer-row { flex-wrap:wrap; } .printer-row select { min-width:180px; } }