: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)}.brand{font-weight:700;letter-spacing:.2px}.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}
