:root{color-scheme:light dark;--bg: #f6f7f5;--panel: #ffffff;--panel-soft: #fbfcfd;--text: #20242a;--muted: #66717f;--line: #d8dee4;--line-strong: #b7c0ca;--accent: #d3483a;--accent-dark: #aa3328;--accent-soft: #fff0ee;--ok: #177245;--body-overlay-start: rgba(255, 255, 255, .7);--body-overlay-end: rgba(246, 247, 245, .94);--button-hover: #fff7f6;--checker-mark: #edf1f5;--checker-base: #ffffff;--empty-preview: #aeb8c2;--row-bg: #ffffff;--row-active: #fff5f3;--done-bg: #e9f7ef;--failed-bg: #fff0ee;--shadow: 0 18px 45px rgba(30, 41, 59, .09);font-family:Inter,Segoe UI,Microsoft YaHei,PingFang SC,system-ui,-apple-system,sans-serif}@media (prefers-color-scheme: dark){:root{--bg: #101316;--panel: #181d22;--panel-soft: #20262c;--text: #eef2f5;--muted: #a2adb8;--line: #313a43;--line-strong: #56616d;--accent: #ff665b;--accent-dark: #e14d43;--accent-soft: #3a2324;--ok: #72d99d;--body-overlay-start: rgba(255, 255, 255, .03);--body-overlay-end: rgba(16, 19, 22, .96);--button-hover: #2a2225;--checker-mark: #2b333b;--checker-base: #151a1f;--empty-preview: #697582;--row-bg: #1b2026;--row-active: #2a1f21;--done-bg: #173225;--failed-bg: #3a2324;--shadow: 0 18px 45px rgba(0, 0, 0, .34)}}*{box-sizing:border-box}html{min-width:320px;background:var(--bg)}body{min-height:100vh;margin:0;color:var(--text);background:linear-gradient(180deg,var(--body-overlay-start),var(--body-overlay-end)),var(--bg)}button,input{font:inherit}button{display:inline-flex;min-height:38px;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line-strong);border-radius:8px;background:var(--panel);color:var(--text);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,transform .12s ease}button:hover:not(:disabled){border-color:var(--accent);background:var(--button-hover)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.48}button svg{width:18px;height:18px;flex:none}h1,h2,p{margin:0}.app-shell{width:min(1180px,calc(100vw - 32px));margin:0 auto;padding:24px 0 32px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0 20px}.brand{display:flex;align-items:center;gap:14px}.brand-icon{width:52px;height:52px;object-fit:contain}h1{font-size:24px;line-height:1.15;letter-spacing:0}h2{font-size:20px;line-height:1.2;letter-spacing:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px}.drop-panel,.controls-panel,.queue-panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.drop-panel{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:16px;padding:16px}.drop-zone{position:relative;display:grid;min-height:214px;place-items:center;border:2px dashed var(--line-strong);border-radius:8px;background:linear-gradient(135deg,#d3483a14,#1772450f),var(--panel-soft);text-align:center;cursor:pointer;outline:none}.drop-zone:focus-visible,.drop-zone.is-dragging{border-color:var(--accent);box-shadow:0 0 0 4px #d3483a24}.drop-zone input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.drop-copy{display:grid;justify-items:center;gap:14px;max-width:500px;padding:18px}.drop-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:min(360px,100%);margin-top:0}.drop-actions button{flex:1 1 150px;min-width:150px;padding-inline:14px}.drop-copy p,.preview-panel span,.queue-head p,.file-size,.empty-state,.legal{color:var(--muted)}.drop-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff}.drop-symbol svg{width:26px;height:26px;stroke-width:3}.preview-panel{display:grid;align-content:stretch;justify-items:stretch;min-height:214px;min-width:0;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--panel-soft);text-align:center}.font-preview{display:grid;width:100%;height:100%;min-height:180px;place-items:center;padding:18px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(45deg,var(--checker-mark) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-mark) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-mark) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-mark) 75%),var(--checker-base);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;color:var(--accent);font-size:30px;font-weight:800;line-height:1.22;overflow:hidden;text-wrap:balance;overflow-wrap:anywhere;word-break:normal}.font-preview.is-empty{color:var(--empty-preview);font-family:Segoe UI,sans-serif}.bottom-bar{display:flex;justify-content:flex-end;margin-top:16px;padding:0;border:0;background:transparent;box-shadow:none}.action-row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;width:min(420px,100%)}.action-row button{flex:1 1 190px;min-width:190px}.primary-button{color:#fff;border-color:var(--accent-dark);background:var(--accent);font-weight:700}.primary-button:hover:not(:disabled){background:var(--accent-dark)}.secondary-button{background:var(--panel);color:var(--text)}.queue-panel{grid-column:1 / -1;min-width:0;padding:16px}.queue-head{display:flex;min-height:34px;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.queue-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.queue-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.queue-actions button{min-width:150px;padding-inline:12px}.queue-list{width:100%;border:1px dashed var(--line-strong);border-radius:8px;background:var(--panel-soft)}.queue-list{overflow:auto}.queue-list{min-height:190px;max-height:320px}.queue-row{display:grid;grid-template-columns:28px minmax(112px,.2fr) minmax(0,1fr) 110px;align-items:center;gap:18px;min-height:52px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--row-bg);cursor:pointer;outline:none}.queue-row:last-child{border-bottom:0}.queue-row:hover,.queue-row:focus-visible{background:var(--button-hover)}.queue-row.is-highlighted{box-shadow:inset 3px 0 0 var(--accent);background:var(--row-active)}.queue-header{min-height:48px;background:var(--panel-soft);color:var(--text);cursor:default;font-size:13px;font-weight:800}.queue-header:hover{background:var(--panel-soft)}.queue-status{justify-self:start;min-width:92px;padding:4px 12px;border:1px solid rgba(211,72,58,.32);border-radius:999px;color:var(--accent-dark);background:var(--accent-soft);font-size:13px;font-weight:700;text-align:center}.queue-status.is-running{color:var(--accent-dark);background:var(--accent-soft);border-color:#d3483a47}.queue-status.is-done{color:var(--ok);background:var(--done-bg);border-color:#1772453d}.queue-status.is-failed{color:var(--accent-dark);background:var(--failed-bg);border-color:#d3483a52}.file-name{overflow:hidden;font-family:Cascadia Mono,Consolas,monospace;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.file-size{justify-self:start;font-family:Cascadia Mono,Consolas,monospace;font-size:12px}.empty-state{display:grid;min-height:inherit;place-items:center;padding:22px;text-align:center}.icon-button{width:38px;min-width:38px;padding:0}.legal{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:8px 18px;min-height:0;align-content:flex-start;align-items:flex-start;margin-top:-8px;padding:0 2px;font-size:12px;line-height:1.2}dialog{width:min(360px,calc(100vw - 32px));border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}dialog::backdrop{background:#1f293373}.dialog-body{display:grid;gap:12px}.dialog-body p{color:var(--muted)}@media (max-width: 940px){.workspace{grid-template-columns:1fr}.queue-panel{grid-column:auto;grid-row:auto}}@media (max-width: 680px){.app-shell{width:min(100vw - 20px,1180px);padding-top:12px}.topbar,.queue-head{align-items:flex-start;flex-direction:column}.queue-actions{width:100%;justify-content:stretch;margin-left:0}.queue-actions button{flex:1 1 150px}.drop-panel{grid-template-columns:1fr}.action-row,.drop-actions{width:100%}.bottom-bar{grid-template-columns:1fr;gap:10px}.preview-panel{grid-template-columns:1fr;align-items:stretch;min-height:124px;text-align:center}.font-preview{width:100%;min-height:128px;font-size:24px}.queue-row{grid-template-columns:28px minmax(92px,auto) minmax(0,1fr);gap:10px}.queue-header{grid-template-columns:28px minmax(92px,auto) minmax(0,1fr)}.queue-row .file-size{display:none}}
