:root{color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--bg: #f7f8fa;--card: #ffffff;--ink: #111827;--muted: #6b7280;--line: #e5e7eb;--accent: #2563eb;--accent-ink: #ffffff;--ok: #16a34a;--warn: #d97706;--radius: 14px}@media(prefers-color-scheme:dark){:root{--bg: #0b0f17;--card: #141a24;--ink: #e8edf5;--muted: #93a1b1;--line: #243040;--accent: #4f8bff}}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased}.app{max-width:1080px;margin:0 auto;padding:40px 24px 80px}header{margin-bottom:32px}header h1{font-size:30px;margin:0 0 8px;letter-spacing:-.02em}header p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}.badge{display:inline-block;font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);margin-bottom:14px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:720px){.grid{grid-template-columns:1fr}.app{padding:24px 16px 60px}}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:16px}.card h2{margin:0;font-size:17px;letter-spacing:-.01em}.card .desc{margin:-8px 0 0;font-size:13px;color:var(--muted);line-height:1.55}.drop{border:1.5px dashed var(--line);border-radius:10px;padding:22px 14px;text-align:center;color:var(--muted);font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}.drop:hover,.drop.drag{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);color:var(--ink)}.drop strong{color:var(--accent)}.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:150px;overflow:auto}.list li{font-size:13px;padding:6px 10px;background:color-mix(in srgb,var(--ink) 4%,transparent);border-radius:7px;display:flex;justify-content:space-between;align-items:center;gap:8px}.list li span:last-of-type{color:var(--muted);flex-shrink:0}.list li button.remove{flex-shrink:0;width:22px;height:22px;padding:0;border:none;background:transparent;color:var(--muted);font-size:13px;line-height:1;border-radius:5px;cursor:pointer;transition:background .12s,color .12s}.list li button.remove:hover{background:color-mix(in srgb,#dc2626 15%,transparent);color:#dc2626}.list li .handle{flex-shrink:0;font-size:13px;color:var(--muted);cursor:grab;user-select:none;opacity:.5;margin-right:2px}.list li[draggable=true]{cursor:grab}.list li:active .handle{cursor:grabbing}.list li.dragging{opacity:.45;outline:1.5px dashed var(--accent);outline-offset:2px}.options{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}.options label{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:7px}.options select,.options input[type=number]{font:inherit;font-size:13px;padding:5px 9px;border-radius:7px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}.options input[type=range]{width:120px;accent-color:var(--accent)}button{font:inherit;font-weight:600;font-size:14px;padding:10px 16px;border-radius:9px;border:1px solid transparent;cursor:pointer;transition:opacity .15s,transform .05s}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--accent);color:var(--accent-ink)}.ghost{background:transparent;color:var(--ink);border-color:var(--line)}.actions{display:flex;gap:10px;flex-wrap:wrap}.progress{height:6px;border-radius:999px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}.progress>i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}.status{font-size:13px;color:var(--muted);min-height:1.2em}.status.err{color:#dc2626}footer{margin-top:40px;font-size:12px;color:var(--muted);text-align:center;line-height:1.7}