:root{--bg: #f7f7f8;--surface: #ffffff;--surface-2: #f4f4f5;--border: #e4e4e7;--text: #18181b;--text-muted: #71717a;--accent: #2563eb;--accent-hover: #1d4ed8;--danger: #dc2626;--danger-bg: #fef2f2;--success: #16a34a;--success-bg: #dcfce7;--success-fg: #166534;--error-bg: #fee2e2;--error-fg: #991b1b;--focus-ring: rgba(37, 99, 235, .15);--overlay: rgba(0, 0, 0, .45);--public-bg: linear-gradient(135deg, #f0f4ff 0%, #f7f7f8 100%);--shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);--shadow-md: 0 8px 24px rgba(0, 0, 0, .08);--shadow-lg: 0 20px 50px rgba(0, 0, 0, .2);--radius: 8px}[data-theme=dark]{--bg: #0b0d12;--surface: #15181f;--surface-2: #1f232c;--border: #2a2f3a;--text: #e4e4e7;--text-muted: #9ca3af;--accent: #3b82f6;--accent-hover: #60a5fa;--danger: #ef4444;--danger-bg: #2a1517;--success: #22c55e;--success-bg: #14532d;--success-fg: #bbf7d0;--error-bg: #450a0a;--error-fg: #fecaca;--focus-ring: rgba(96, 165, 250, .25);--overlay: rgba(0, 0, 0, .6);--public-bg: linear-gradient(135deg, #0f172a 0%, #0b0d12 100%);--shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);--shadow-md: 0 8px 24px rgba(0, 0, 0, .4);--shadow-lg: 0 20px 50px rgba(0, 0, 0, .5)}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;font-size:14px;font-weight:500;transition:background .15s,border-color .15s}button:hover:not(:disabled),.btn:hover:not(:disabled){background:var(--surface-2)}button:disabled{opacity:.5;cursor:not-allowed}button.primary,.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}button.primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}button.danger{background:var(--surface);color:var(--danger);border-color:var(--danger)}button.danger:hover:not(:disabled){background:var(--danger-bg)}input,textarea,select{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);font:inherit;color:var(--text)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}label{display:block;margin-bottom:4px;font-size:13px;color:var(--text-muted);font-weight:500}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.container{max-width:1200px;margin:0 auto;padding:24px}.row{display:flex;gap:12px;align-items:center}.col{display:flex;flex-direction:column;gap:8px}.spacer{flex:1}h1{font-size:24px;margin:0 0 16px}h2{font-size:18px;margin:0 0 12px}.muted{color:var(--text-muted)}.error{color:var(--danger);font-size:13px}.success{color:var(--success)}.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;background:var(--surface-2);color:var(--text-muted)}.pill.success{background:var(--success-bg);color:var(--success-fg)}.pill.error{background:var(--error-bg);color:var(--error-fg)}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)}th{font-weight:600;color:var(--text-muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:var(--surface);border-radius:12px;padding:24px;width:100%;max-width:420px;box-shadow:var(--shadow-lg)}.topnav{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;gap:16px}.topnav .brand{font-weight:700;font-size:16px}.topnav a{color:var(--text-muted)}.topnav a.active{color:var(--text)}.design-thumb{border:2px solid var(--border);border-radius:var(--radius);padding:6px;cursor:pointer;transition:border-color .15s,transform .15s;background:var(--surface)}.design-thumb.active{border-color:var(--accent);transform:translateY(-1px)}.design-thumb:hover{border-color:var(--accent)}.design-thumb svg{display:block;width:100%;height:auto;border-radius:4px}.preview-frame{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:24px;display:flex;align-items:center;justify-content:center;min-height:360px}.preview-frame svg{max-width:100%;height:auto;box-shadow:var(--shadow-md)}.public-card-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--public-bg);padding:24px}.public-card-inner{display:grid;grid-template-columns:1fr 220px;gap:32px;max-width:900px;width:100%;align-items:center}@media (max-width: 720px){.public-card-inner{grid-template-columns:1fr}}.public-card-frame{background:#fff;padding:16px;border-radius:12px;box-shadow:var(--shadow-md)}.public-card-frame svg{width:100%;height:auto;display:block}.qr-block{text-align:center}.qr-block img{width:200px;height:200px}.qr-block a{display:inline-block;margin-top:8px}