:root{--bg: #0b1220;--panel: #101a2f;--panel2: #0f1a31;--text: #e8eefc;--muted: rgba(232, 238, 252, .7);--border: rgba(232, 238, 252, .15);--accent: #4f8cff;--danger: #ff5c7a}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,Noto Sans,Liberation Sans,sans-serif;background:radial-gradient(1200px 800px at 40% 20%,#162a58 0%,var(--bg) 50%);color:var(--text)}.appShell{height:100vh;display:grid;grid-template-rows:56px 1fr auto 240px}.topBar{display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border);background:#101a2fb3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative}.topBarWithProgress{padding-bottom:38px}.topProgress{position:absolute;left:0;right:0;bottom:0;padding:6px 16px 8px;border-top:1px solid rgba(232,238,252,.08);background:linear-gradient(180deg,#101a2f00,#101a2f8c);pointer-events:none}.topProgressRow{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:6px}.topProgressTrack{height:8px;border-radius:999px;overflow:hidden;border:1px solid rgba(232,238,252,.12);background:#0f1a318c}.topProgressFill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#4f8cff,#7b68ee,#35d0ff 70%,#4f8cff);background-size:220% 100%;animation:topProgressShift 1.2s linear infinite;transition:width .14s ease-out}@keyframes topProgressShift{0%{background-position:0% 50%}to{background-position:100% 50%}}.brand{font-weight:700;letter-spacing:.2px;display:inline-flex;align-items:center;gap:8px}.brandMark{width:18px;height:18px;border-radius:999px;border:1px solid rgba(232,238,252,.28);background:#4f8cff29;color:#e8eefceb;display:inline-grid;place-items:center;font-size:12px;line-height:1;cursor:default;position:relative}.brandMark:after{content:attr(data-tip);position:absolute;left:50%;transform:translate(-50%);top:calc(100% + 10px);padding:8px 10px;border-radius:10px;border:1px solid rgba(232,238,252,.14);background:#101a2feb;color:#e8eefceb;font-size:12px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease-out,transform .12s ease-out;transform:translate(-50%) translateY(-2px);z-index:80;box-shadow:0 10px 24px #00000052}.brandMark:hover:after{opacity:1;transform:translate(-50%) translateY(0)}.container{display:grid;grid-template-columns:320px 1fr 360px;gap:12px;padding:12px;overflow:hidden}.panel{background:#101a2fbf;border:1px solid var(--border);border-radius:14px;padding:12px;overflow:auto}.panel h3{margin:0 0 10px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:#4f8cff26;color:var(--text);padding:8px 10px;border-radius:10px;cursor:pointer;font-weight:600}.btn:disabled{opacity:.6;cursor:not-allowed}.btnPrimary{border-color:#4f8cff73;background:#4f8cff40}.btnDanger{border-color:#ff5c7a73;background:#ff5c7a2e}.field{display:grid;gap:6px;margin-bottom:12px}.field label{font-size:12px;color:var(--muted)}.field input[type=text],.field input[type=number],.field select{width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:#0f1a3199;color:var(--text);outline:none}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.muted{color:var(--muted);font-size:12px}.previewBar{padding:10px 12px;border-top:1px solid var(--border);background:#101a2fa6}.previewGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;padding:12px;overflow:auto;height:100%}.thumb{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0f1a318c;cursor:pointer}.thumb img{width:100%;height:140px;object-fit:contain;display:block;background:#00000040}.thumbMeta{padding:8px 10px;display:grid;gap:2px}.thumbMeta strong{font-size:13px}.thumbMeta span{font-size:12px;color:var(--muted)}.canvasWrap{display:grid;place-items:center;height:100%}.canvasHint{font-size:12px;color:var(--muted);margin-top:8px}.modalBackdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:grid;place-items:center;padding:18px;z-index:50}.modalCard{width:min(1100px,100%);height:min(720px,100%);background:#101a2feb;border:1px solid var(--border);border-radius:16px;overflow:hidden;display:grid;grid-template-rows:auto 1fr}.modalHeader{padding:12px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}.modalBody{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;padding:12px;overflow:hidden}.modalPreview{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:#0f1a3199;padding:10px;display:grid;grid-template-rows:1fr auto}.modalPreview img{width:100%;height:100%;object-fit:contain;border-radius:10px;background:#00000040}.modalFields{overflow:auto;padding-right:6px}