:root{
  --bg:#f5f8fc;--panel:#ffffff;--panel2:#f8fbff;--text:#162033;--muted:#64748b;--accent:#0ea5e9;--accent2:#2563eb;--border:#d9e3f0;--ok:#16a34a;--danger:#dc2626;--shadow:0 14px 35px rgba(15,23,42,.10)
}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#f7fbff,#edf5ff);color:var(--text);font-family:Segoe UI,Arial,sans-serif}.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;padding:12px 22px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}.brand{display:flex;gap:14px;align-items:center}.mark{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;color:white;font-weight:900;box-shadow:0 8px 18px rgba(14,165,233,.28)}.brand h1{font-size:22px;margin:0}.brand p{margin:4px 0 0;color:var(--muted);font-size:13px}.badge{padding:8px 12px;border-radius:999px;background:#e0f2fe;color:#075985;font-weight:700;font-size:12px}.app{display:grid;grid-template-columns:350px 1fr;gap:18px;height:calc(100vh - 74px);padding:18px}.panel{overflow:auto;background:rgba(255,255,255,.96);border:1px solid var(--border);border-radius:24px;padding:14px;box-shadow:var(--shadow)}.card{border:1px solid var(--border);border-radius:20px;padding:16px;margin-bottom:14px;background:linear-gradient(180deg,#fff,#f9fcff)}h2{font-size:16px;margin:0 0 12px;display:flex;align-items:center;gap:8px}.btn{width:100%;border:1px solid var(--border);background:#fff;color:var(--text);padding:11px 13px;border-radius:14px;cursor:pointer;margin:5px 0;font-weight:700;transition:.18s}.btn:hover{transform:translateY(-1px);border-color:#7dd3fc;box-shadow:0 8px 20px rgba(14,165,233,.12)}.primary{background:linear-gradient(135deg,#0ea5e9,#2563eb);border:0;color:white}.soft{background:#eef6ff;color:#075985;border-color:#bae6fd}.row{display:flex;gap:8px;align-items:center}.navrow .btn{width:auto;flex:1}.navrow span{min-width:68px;text-align:center;color:var(--muted);font-weight:800}.muted{color:var(--muted);font-size:13px;line-height:1.45}.small{font-size:12px}.input{width:100%;background:#fff;border:1px solid var(--border);color:var(--text);padding:11px;border-radius:12px;margin:6px 0 11px;outline:none}.input:focus{border-color:#38bdf8;box-shadow:0 0 0 4px #e0f2fe}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.workspace{min-width:0;border:1px solid var(--border);border-radius:24px;background:#fff;overflow:auto;box-shadow:var(--shadow);position:relative}.canvas-wrap{min-width:100%;min-height:100%;display:flex;align-items:flex-start;justify-content:center;padding:28px;background:radial-gradient(circle at top,#f8fbff,#eef5ff)}canvas{background:white;border:1px solid #cbd5e1;box-shadow:0 18px 45px rgba(15,23,42,.18);display:block;max-width:none;max-height:none}.downloads a{display:block;color:#0369a1;text-decoration:none;margin:8px 0;padding:9px;border:1px dashed #7dd3fc;border-radius:12px;word-break:break-all;background:#f0f9ff}.downloads .err,.err{color:var(--danger)}.ok{color:var(--ok);font-weight:700}.progress{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:8px 0}.bar{height:100%;width:0;background:linear-gradient(90deg,#0ea5e9,#2563eb)}@media(max-width:950px){.app{grid-template-columns:1fr;height:auto}.workspace{height:72vh}.topbar{height:auto;align-items:flex-start}.brand p{display:none}.badge{display:none}}