:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,sans-serif;background:transparent;font-synthesis:none}*{box-sizing:border-box}html,body,#app{min-width:280px;min-height:100%;margin:0}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.config-page{--page: #f4f3ef;--surface: #fff;--surface-soft: #faf9f6;--surface-muted: #f1f0eb;--control: #fbfaf8;--control-disabled: #efeee9;--border: #deddd7;--border-strong: #cbc8bd;--text: #25241f;--text-soft: #56544d;--text-muted: #66645d;--text-faint: #77756e;--brand: #25241f;--brand-text: #fff;--secondary: #e9e7e1;--accent: #6c5ce7;min-height:100vh;color:var(--text);background:var(--page);color-scheme:light dark}.config-page button,.config-page input,.config-page select{color:var(--text)}.topbar{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 32px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--surface-soft) 88%,transparent);backdrop-filter:blur(18px)}.topbar p{margin:0;color:var(--text-muted);font-size:14px}.brand{display:flex;align-items:center;gap:12px;color:inherit;font-weight:720;text-decoration:none}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:var(--brand-text);background:var(--brand)}.workspace{min-height:calc(100vh - 72px);display:grid;grid-template-columns:260px 1fr}.catalog{padding:28px 18px;border-right:1px solid var(--border);background:var(--surface-soft)}.section-label,.eyebrow{color:var(--text-muted);font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.section-label{padding:0 12px 12px}.widget-list{display:grid;gap:6px}.widget-option{width:100%;display:grid;grid-template-columns:38px 1fr;align-items:center;gap:10px;padding:10px;border:1px solid transparent;border-radius:12px;color:inherit;background:transparent;text-align:left;cursor:pointer}.widget-option:hover{background:var(--surface-muted)}.widget-option.active{border-color:var(--border);background:var(--surface);box-shadow:0 4px 16px #2320180f}.widget-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--secondary);font-size:18px}.widget-option strong,.widget-option small{display:block}.widget-option strong{font-size:14px}.widget-option small{margin-top:3px;color:var(--text-faint);font-size:12px}.editor{padding:32px;display:grid;grid-template-columns:minmax(320px,440px) minmax(420px,1fr);gap:24px;align-items:start}.editor-panel,.preview-panel{border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 8px 30px #2320180d}.editor-panel{padding:26px}.preview-panel{padding:20px;position:sticky;top:24px}.panel-heading,.preview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.panel-heading h1,.preview-heading h2{margin:5px 0 0}.panel-heading h1{font-size:28px}.preview-heading h2{font-size:20px}.muted{margin:8px 0 0;color:var(--text-muted);font-size:14px;line-height:1.55}.path-badge{padding:6px 9px;border-radius:8px;color:var(--text-soft);background:var(--surface-muted);font:12px ui-monospace,SFMono-Regular,Consolas,monospace;white-space:nowrap}.config-form{margin-top:28px;display:grid;gap:18px}.field{display:grid;gap:8px}.field-label{color:var(--text-soft);font-size:13px;font-weight:650}.field input:not([type=checkbox]),.field select,.url-row input{width:100%;height:42px;padding:0 12px;border:1px solid var(--border-strong);border-radius:10px;outline:none;color:var(--text);background:var(--control);caret-color:var(--text)}.field select option{color:var(--text);background:var(--surface)}.field input::placeholder,.url-row input::placeholder{color:var(--text-faint);opacity:1}.field input:disabled,.field select:disabled,.url-row input:disabled{color:var(--text-faint);background:var(--control-disabled);opacity:1}.field input:focus,.field select:focus,.url-row input:focus{border-color:#8a7ff0;box-shadow:0 0 0 3px #6c5ce71f}.field input[type=color]{padding:5px}.checkbox-field{display:flex;align-items:center;gap:10px}.switch{position:relative;width:38px;height:22px}.switch input{position:absolute;opacity:0}.switch span{position:absolute;inset:0;border-radius:999px;background:var(--border-strong);cursor:pointer;transition:.2s}.switch span:after{content:"";position:absolute;width:16px;height:16px;top:3px;left:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px #0003;transition:.2s}.switch input:checked+span{background:var(--accent)}.switch input:checked+span:after{transform:translate(16px)}.preview-heading{align-items:center;margin-bottom:16px}.preview-stage{max-width:100%;overflow:auto;padding:2px 0 14px 2px}.preview-frame-wrap{position:relative;box-sizing:content-box;width:auto;height:auto;min-width:280px;min-height:160px;max-width:1200px;max-height:1000px;overflow:hidden;resize:both;border:1px solid var(--border-strong);border-radius:14px;background:var(--page);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent)}.preview-frame-wrap:after{content:"";position:absolute;right:3px;bottom:3px;width:9px;height:9px;pointer-events:none;border-right:2px solid var(--text-faint);border-bottom:2px solid var(--text-faint)}.preview-frame-wrap iframe{width:100%;height:100%;border:0;background:transparent}.preview-size-hint{margin:-4px 0 0;color:var(--text-faint);font-size:12px}.button{height:38px;padding:0 14px;border:0;border-radius:9px;font-size:13px;font-weight:680;cursor:pointer}.button.primary{color:var(--brand-text);background:var(--brand)}.button.secondary{color:var(--text);background:var(--secondary)}.button:hover{filter:brightness(.96)}.url-field{display:grid;gap:8px;margin-top:18px;color:var(--text-soft);font-size:13px;font-weight:650}.url-row{display:grid;grid-template-columns:1fr auto;gap:8px}.url-row input{color:var(--text-muted);font:12px ui-monospace,SFMono-Regular,Consolas,monospace}.copy-status{min-height:18px;margin:8px 0 0;color:#16805a;font-size:12px}.load-error{margin:0;color:#c33e35;font-size:13px}.widget-page{width:var(--widget-width);height:var(--widget-height);min-height:0;overflow:hidden;background:transparent}.widget-page #app{width:100%;height:100%;min-height:0}.widget-page.auto-height{height:100vh;overflow:hidden}.widget-page.auto-height #app,.widget-page.auto-height .embed-card{height:100%}.error-card{width:min(100%,560px);padding:28px;border:1px solid #deddd7;border-radius:18px;background:#fff}@media(prefers-color-scheme:dark){.config-page{--page: #191918;--surface: #242423;--surface-soft: #20201f;--surface-muted: #30302e;--control: #2b2b29;--control-disabled: #252524;--border: #3b3b38;--border-strong: #52514d;--text: #f1f1ef;--text-soft: #d2d1cc;--text-muted: #b5b4af;--text-faint: #aaa9a5;--brand: #f1f1ef;--brand-text: #25241f;--secondary: #383836}.widget-option.active,.editor-panel,.preview-panel{box-shadow:none}}@media(max-width:1050px){.editor{grid-template-columns:1fr}.preview-panel{position:static}}@media(max-width:720px){.topbar{padding:14px 18px}.topbar p{display:none}.workspace{display:block}.catalog{border-right:0;border-bottom:1px solid var(--border);padding:16px}.widget-list{grid-template-columns:repeat(3,minmax(0,1fr))}.widget-option{grid-template-columns:1fr;text-align:center}.widget-option small{display:none}.widget-icon{margin:auto}.editor{padding:16px}.panel-heading{display:block}.path-badge{display:inline-block;margin-top:12px}.url-row{grid-template-columns:1fr}}