:root{--font-sans:'Inter',-apple-system,sans-serif;--radius:12px;--transition:0.2s ease}
[data-theme="dark"]{--bg:#0F0F1A;--bg-card:rgba(26,26,46,0.95);--bg-input:rgba(99,102,241,0.05);--border:rgba(99,102,241,0.12);--text:#E8E4F0;--text2:#A0A0C0;--text3:#6060A0;--primary:#6366F1;--gradient:linear-gradient(135deg,#6366F1,#8B5CF6)}
*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);min-height:100vh}
.app{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.editor-panel{padding:24px;border-right:1px solid var(--border);overflow-y:auto;max-height:100vh}
.editor-panel h2{font-size:.95rem;font-weight:700;margin-bottom:14px;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.editor-panel h3{font-size:.82rem;font-weight:600;margin:10px 0 6px;color:var(--text2)}
.label{font-size:.72rem;font-weight:600;color:var(--text3);margin-bottom:4px;display:block;text-transform:uppercase;letter-spacing:.04em}
.field{margin-bottom:10px}
input[type="text"],select{width:100%;padding:8px;background:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:6px;font-size:.82rem;outline:none;font-family:var(--font-sans)}
input:focus{border-color:var(--primary)}
.btn{font-family:var(--font-sans);font-size:.82rem;font-weight:500;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;transition:all var(--transition)}
.btn-primary{background:var(--gradient);color:#fff}.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--text2)}.btn-ghost:hover{background:var(--bg-input)}
.btn-sm{font-size:.72rem;padding:4px 8px}
.link-row{display:flex;gap:6px;margin-bottom:6px;align-items:center}
.link-row input{flex:1;padding:6px}
.link-row .del{background:none;border:none;color:var(--text3);cursor:pointer}.del:hover{color:#EF4444}
.preview-panel{display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,10,20,0.5)}
.preview{width:360px;min-height:500px;border-radius:24px;overflow:hidden}
/* Preview themes */
.theme-dark{background:#1A1A2E;color:#E8E4F0}.theme-gradient{background:linear-gradient(135deg,#6366F1,#EC4899);color:#fff}
.theme-ocean{background:linear-gradient(135deg,#0EA5E9,#06B6D4);color:#fff}.theme-sunset{background:linear-gradient(135deg,#F97316,#EF4444);color:#fff}
.p-inner{padding:40px 24px;text-align:center}
.p-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;margin-bottom:12px;border:3px solid rgba(255,255,255,0.2)}
.p-name{font-size:1.1rem;font-weight:700;margin-bottom:4px}.p-bio{font-size:.82rem;opacity:.8;margin-bottom:20px}
.p-link{display:block;background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.2);border-radius:10px;padding:12px;margin-bottom:8px;text-decoration:none;color:inherit;font-size:.85rem;font-weight:500;transition:all .2s}
.p-link:hover{background:rgba(255,255,255,0.25);transform:translateY(-1px)}
@media(max-width:700px){.app{grid-template-columns:1fr}.editor-panel{max-height:auto;border-right:none;border-bottom:1px solid var(--border)}}