:root{--tp-bg:#f6f8fc;--tp-card:#ffffffc7;--tp-card-solid:#fff;--tp-text:#0f172a;--tp-muted:#64748b;--tp-border:#0f172a1a;--tp-shadow:0 18px 45px #0f172a1a;--tp-shadow2:0 10px 22px #0f172a14;--tp-radius:18px;--primary:#2f67ff;--primary-bg:#2f67ff14;--warn-bg:#fff5f5;--warn-border:#ffd1d1;--warn-text:#8a1f1f;--canvas-bg:#fafafa;--sel-border:#2563eb;--sel-bg:#2563eb33}html[data-theme=dark]{--tp-bg:#0b1220;--tp-card:#0f172ab8;--tp-card-solid:#0f172aeb;--tp-text:#e5e7eb;--tp-muted:#9ca3af;--tp-border:#94a3b829;--tp-shadow:0 22px 55px #00000061;--tp-shadow2:0 12px 26px #00000052;--primary:#4096ff;--primary-bg:#4096ff33;--warn-bg:#3c1e1e;--warn-border:#5c2b2b;--warn-text:#ff8080;--canvas-bg:#121212;--sel-border:#6ee7ff;--sel-bg:#6ee7ff33}*{box-sizing:border-box}.app{min-height:100vh;color:var(--tp-text);background:radial-gradient(1100px 520px at 55% 0%, #7c3aed2e, #2f67ff1a 35%, #f6f8fc00 70%), radial-gradient(900px 480px at 15% 25%, #38bdf829, #f6f8fc00 60%), linear-gradient(180deg, var(--tp-bg), var(--tp-bg));flex-direction:column;align-items:center;padding:24px 16px;display:flex}.shell{flex-direction:column;gap:14px;width:100%;max-width:1100px;display:flex}.card{background:var(--tp-card-solid);border:1px solid var(--tp-border);border-radius:var(--tp-radius);box-shadow:var(--tp-shadow2);padding:16px;transition:box-shadow .2s}.card:hover{box-shadow:var(--tp-shadow)}.header{text-align:center;flex-direction:column;align-items:center;gap:12px;margin-bottom:8px;display:flex}.headerTop{justify-content:center;width:100%;display:flex}.titleBlock{flex-direction:column;align-items:center;gap:6px;display:flex}.title{letter-spacing:-.5px;margin:0;font-size:32px;font-weight:900}.subtitle{color:var(--tp-muted);max-width:600px;margin:0;font-size:14px;line-height:1.5}.warn{border:1px solid var(--warn-border);background:var(--warn-bg);color:var(--warn-text);border-radius:999px;margin-top:4px;padding:8px 16px;font-size:13px;font-weight:600;display:inline-block}.toolbar{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.spacer{flex:1}.btn{border:1px solid var(--tp-border);color:var(--tp-text);cursor:pointer;background:#ffffff80;border-radius:10px;justify-content:center;align-items:center;padding:8px 14px;font-size:13px;font-weight:700;transition:all .2s;display:inline-flex}html[data-theme=dark] .btn{background:#0003}.btn:hover:not(:disabled){background:var(--tp-border)}.btn:disabled{opacity:.5;cursor:default}.btnPrimary{background:linear-gradient(135deg, var(--primary), #7c3aed);color:#fff;border:none;box-shadow:0 4px 12px #2f67ff40}.btnPrimary:hover:not(:disabled){opacity:.9;box-shadow:0 6px 16px #2f67ff59}.btnIcon{width:34px;height:34px;padding:8px}.pill{border:1px solid var(--tp-border);color:var(--tp-muted);background:#fff6;border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:700;display:inline-flex}html[data-theme=dark] .pill{background:#0003}.zoomGroup,.zoomPresets{align-items:center;gap:6px;display:flex}.zoomGroup{border:1px solid var(--tp-border);background:#00000008;border-radius:12px;padding:4px}html[data-theme=dark] .zoomGroup{background:#ffffff0d}.settings{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.settings label{color:var(--tp-muted);align-items:center;gap:8px;font-size:13px;font-weight:700;display:flex}.settings input{border:1px solid var(--tp-border);width:70px;color:var(--tp-text);background:#ffffff80;border-radius:8px;outline:none;padding:6px 8px}html[data-theme=dark] .settings input{background:#0000004d}.viewerPanel,.previewPanel{flex-direction:column;padding:0;display:flex;overflow:hidden}.viewerBody{background:var(--canvas-bg);justify-content:center;min-height:400px;max-height:65vh;padding:24px;display:flex;position:relative;overflow:auto}.hintBar{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;z-index:20;pointer-events:none;background:#000000bf;border-radius:999px;padding:6px 16px;font-size:12px;font-weight:600;position:absolute;top:16px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0003}.canvasStage{position:relative;box-shadow:0 8px 30px #0000001f}.canvas{cursor:crosshair;background:#fff;display:block}.sel{border:2px solid var(--sel-border);background:var(--sel-bg);pointer-events:none;z-index:10;position:absolute}.dropzone{border:2px dashed var(--tp-border);text-align:center;color:var(--tp-muted);background:#ffffff0d;border-radius:16px;margin:auto;padding:60px}.previewHeader{border-bottom:1px solid var(--tp-border);color:var(--tp-muted);background:#00000005;padding:12px 16px;font-size:13px;font-weight:700}.previewBody{max-height:300px;padding:16px;overflow:auto}.tableWrap{border:1px solid var(--tp-border);border-radius:8px;max-width:100%;overflow:auto}table{border-collapse:collapse;min-width:100%;font-size:12px}td{border:1px solid var(--tp-border);white-space:pre;background:var(--tp-card-solid);padding:6px 8px}:root{color:#1f2328;background:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}html,body{height:100%;margin:0}body{display:block}#root{width:100vw;height:100vh}