.btn-magic{background:linear-gradient(135deg,#7c3aed,#db2777);border-color:transparent;color:#fff;box-shadow:0 4px 14px #7c3aed59}.btn-magic:hover{background:linear-gradient(135deg,#6d28d9,#be185d)}.btn-magic:disabled{box-shadow:none}.ai-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.ai-modal-backdrop{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;background:#1118278c}.ai-modal{width:100%;max-height:92vh;overflow:auto;padding:16px 16px calc(16px + var(--safe-bottom));border-radius:18px 18px 0 0;background:var(--card);color:var(--text);box-shadow:0 -10px 40px #0000004d}.ai-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.ai-modal-head h2{margin:0}.ai-close{min-width:44px;min-height:44px;border:none;background:none;color:var(--muted);font-size:20px;cursor:pointer}.ai-lead{color:var(--muted);font-size:14px}.ai-modes{display:grid;gap:8px;margin:4px 0 12px}.ai-mode{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:12px;cursor:pointer}.ai-mode.active{border-color:var(--primary);background:#6d28d90f}.ai-mode input{margin-top:3px;accent-color:var(--primary)}.ai-mode strong{display:block}.ai-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:12px}.ai-status{display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 8px;text-align:center}.ai-status p{margin:0;font-weight:600}.ai-spark{width:60px;height:60px;border-radius:50%;background:conic-gradient(from 0deg,#7c3aed,#db2777,#f59e0b,#7c3aed);-webkit-mask:radial-gradient(circle,transparent 56%,#000 59%);mask:radial-gradient(circle,transparent 56%,#000 59%);animation:ai-spin 2.6s linear infinite}.ai-spark-busy{animation-duration:1s}.ai-spark-sm{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:6px;flex:none}.versions-status{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.versions-edit{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}.ai-pulse{animation:ai-pulse 1.4s ease-in-out infinite}@keyframes ai-spin{to{transform:rotate(360deg)}}@keyframes ai-pulse{0%,to{opacity:1}50%{opacity:.45}}.ai-summary{padding:10px 14px;border-left:3px solid var(--primary);border-radius:8px;background:#6d28d90f;white-space:pre-wrap}.ai-compare{display:grid;gap:14px}.ai-compare-label{margin:0 0 6px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;text-align:center;color:var(--muted)}.ai-compare .preview-frame{height:min(55vh,520px);max-width:100%;border-width:6px}.ai-history{display:grid}.ai-history-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--border);font-size:13px}.ai-history-row .ai-history-summary{flex:1 1 100%;color:var(--muted);white-space:pre-wrap}.badge-ai-queued,.badge-ai-running{background:#e0f2fe;color:#075985}.badge-ai-done{background:#fef3c7;color:#92400e}.badge-ai-applied{background:#dcfce7;color:#166534}.badge-ai-failed{background:#fee2e2;color:#991b1b}.badge-ai-discarded,.badge-ai-reverted{background:#f3f4f6;color:#4b5563}@media(min-width:900px){.ai-modal-backdrop{align-items:center;padding:24px}.ai-modal{max-width:980px;max-height:90vh;border-radius:18px;padding:20px 22px}.ai-compare{grid-template-columns:1fr 1fr}}@media(prefers-reduced-motion:reduce){.ai-spark,.ai-pulse{animation:none}}:root{--bg: #0f0d16;--bg-elev: #141120;--card: #17141f;--card-2: #1e1a29;--input-bg: #110f19;--text: #ebe7f3;--muted: #a79fb8;--faint: #6f6784;--border: #272233;--border-strong: #3a3350;--primary: #8b5cf6;--primary-2: #d946ef;--primary-dark: #7c3aed;--link: #a78bfa;--accent: #f59e0b;--danger: #f87171;--danger-text: #fca5a5;--ok: #4ade80;--ok-text: #86efac;--warn-text: #fcd34d;--info-text: #7dd3fc;--grad: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);--grad-btn: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);--grad-btn-hover: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);--ring: #a78bfa;--ring-soft: rgba(139, 92, 246, .28);--glass: rgba(15, 13, 22, .72);--shadow: 0 10px 30px rgba(0, 0, 0, .35);--shadow-sm: 0 2px 12px rgba(0, 0, 0, .25);--radius: 14px;--nav-h: 60px;--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-top: env(safe-area-inset-top, 0px);color-scheme:dark}[data-theme=light]{--bg: #f6f4fb;--bg-elev: #ffffff;--card: #ffffff;--card-2: #f3f0fa;--input-bg: #ffffff;--text: #1f2937;--muted: #5f6675;--faint: #9096a3;--border: #e5e7eb;--border-strong: #d1d5db;--primary: #6d28d9;--primary-2: #a21caf;--primary-dark: #5b21b6;--link: #6d28d9;--danger: #dc2626;--danger-text: #991b1b;--ok: #16a34a;--ok-text: #166534;--warn-text: #92400e;--info-text: #075985;--grad: linear-gradient(135deg, #6d28d9 0%, #c026d3 100%);--grad-btn: linear-gradient(135deg, #6d28d9 0%, #a21caf 100%);--grad-btn-hover: linear-gradient(135deg, #5b21b6 0%, #86198f 100%);--ring: #7c3aed;--ring-soft: rgba(109, 40, 217, .22);--glass: rgba(255, 255, 255, .78);--shadow: 0 10px 30px rgba(31, 41, 55, .12);--shadow-sm: 0 2px 12px rgba(31, 41, 55, .06);color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}a{color:var(--link)}h1,h2,h3{margin:0 0 8px;line-height:1.2}h1{font-size:22px;letter-spacing:-.01em}h2{font-size:18px}h3{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:700}p{margin:0 0 10px}.muted{color:var(--muted)}.small{font-size:13px}.right{text-align:right}.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.row-between{justify-content:space-between}.stack{display:grid;gap:12px}.grow{flex:1}:focus-visible{outline:2px solid var(--ring);outline-offset:2px;box-shadow:0 0 0 5px var(--ring-soft);transition:box-shadow .15s ease,outline-color .15s ease}:focus:not(:focus-visible){outline:none}.shell{min-height:100%;display:flex;flex-direction:column;padding-top:var(--safe-top)}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);color:var(--text);border-bottom:1px solid var(--border)}.topbar h1{font-size:18px;margin:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.topbar .who{color:var(--muted);max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar a,.topbar button{color:var(--text)}.topbar .btn-ghost{border-color:var(--border-strong);color:var(--text)}.theme-toggle{width:38px;min-width:38px;height:38px;padding:0;border-radius:50%;border:1px solid var(--border-strong);background:var(--card);color:var(--text);font-size:17px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,transform .15s ease}.theme-toggle:hover{background:var(--card-2);transform:rotate(-12deg)}.lang-toggle{display:inline-flex;align-items:center;gap:2px;height:38px;padding:0 6px;border-radius:999px;border:1px solid var(--border-strong);background:var(--card);color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.04em;white-space:nowrap}.lang-toggle button{min-width:30px;height:30px;padding:0 6px;border:0;border-radius:999px;background:transparent;color:inherit;font:inherit;cursor:pointer;transition:background .15s ease,color .15s ease}.lang-toggle button:hover{color:var(--text)}.lang-toggle button.active{background:var(--grad);color:#fff}.lang-toggle>span{opacity:.4}.login .lang-toggle{float:right;margin:-4px 0 0 8px}.content{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:16px 14px calc(var(--nav-h) + var(--safe-bottom) + 20px)}.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;height:calc(var(--nav-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border-top:1px solid var(--border)}.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;color:var(--muted);text-decoration:none;transition:color .15s ease}.bottom-nav a.active{color:var(--link);font-weight:600}.bottom-nav .icon{font-size:20px;line-height:1}.card{background:var(--card);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}.card+.card{margin-top:12px}.card.clickable{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.card.clickable:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}.card.clickable:active{transform:scale(.99)}.tabs{display:flex;gap:4px;overflow-x:auto;padding:10px 0 12px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tabs a,.tabs button{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);text-decoration:none;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s ease,border-color .15s ease}.tabs a:hover,.tabs button:hover{border-color:var(--border-strong)}.tabs a.active,.tabs button.active{background:var(--grad-btn);border-color:transparent;color:#fff}.field{display:block;margin-bottom:12px}.field>span{display:block;font-size:13px;font-weight:600;margin-bottom:4px;color:var(--muted)}.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=tel],.field input[type=url],.field input[type=number],.field input[type=search],.field input[type=datetime-local],.field select,.field textarea,.input{width:100%;min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--border-strong);background:var(--input-bg);color:var(--text);font:inherit;transition:border-color .15s ease,box-shadow .15s ease}.field input::placeholder,.field textarea::placeholder,.input::placeholder{color:var(--faint)}.field textarea{min-height:90px;resize:vertical}.field input[type=color]{width:48px;height:36px;padding:0;border:1px solid var(--border-strong);border-radius:8px;background:none}.field input[type=range]{width:100%;accent-color:var(--primary)}.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:none;border-color:var(--ring);box-shadow:0 0 0 4px var(--ring-soft)}.check{display:flex;align-items:center;gap:8px;min-height:36px;font-size:14px}.check input{width:18px;height:18px;accent-color:var(--primary)}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid transparent;background:var(--grad-btn);color:#fff;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;line-height:1.1;box-shadow:0 6px 18px #8b5cf640;transition:filter .15s ease,transform .12s ease,box-shadow .15s ease,background .15s ease}.btn:hover{background:var(--grad-btn-hover);box-shadow:0 8px 22px #8b5cf659}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:default;box-shadow:none}.btn-ghost{background:transparent;border-color:var(--border-strong);color:var(--link);box-shadow:none}.btn-ghost:hover{background:#8b5cf61f;border-color:var(--primary);box-shadow:none}.btn-danger{background:transparent;border-color:var(--danger);color:var(--danger-text);box-shadow:none}.btn-danger:hover{background:#f871711f;box-shadow:none}.btn-sm{min-height:34px;padding:6px 12px;font-size:13px}.btn-block{width:100%}.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#8b5cf62e;color:var(--link);white-space:nowrap}.badge-yes,.badge-sent{background:#4ade8029;color:var(--ok-text)}.badge-no,.badge-failed{background:#f8717129;color:var(--danger-text)}.badge-maybe{background:#fbbf2429;color:var(--warn-text)}.badge-pending{background:#ffffff14;color:var(--muted)}.badge-queued{background:#38bdf829;color:var(--info-text)}[data-theme=light] .badge-pending{background:#f3f4f6;color:#4b5563}.alert{padding:10px 14px;border-radius:10px;font-size:14px;margin-bottom:12px;border:1px solid transparent}.alert-error{background:#f8717124;border-color:#f871714d;color:var(--danger-text)}.alert-ok{background:#4ade8024;border-color:#4ade804d;color:var(--ok-text)}.alert-info{background:#38bdf824;border-color:#38bdf84d;color:var(--info-text)}.list{display:grid;gap:8px}.list-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--card-2)}.list-item .info{flex:1;min-width:0}.list-item .title{font-weight:600}.list-item .sub{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--border);vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}tbody tr:hover td{background:#8b5cf60d}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stat{text-align:center;padding:12px 6px;border-radius:12px;background:var(--card);border:1px solid var(--border)}.stat b{display:block;font-size:22px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.stat span{font-size:12px;color:var(--muted)}.editor{display:grid;gap:14px}.preview-frame{position:relative;width:100%;max-width:420px;height:min(78vh,760px);margin:0 auto;border-radius:28px;overflow:auto;background:#111;border:8px solid #111;box-shadow:0 20px 50px #00000080,0 0 0 1px var(--border-strong)}.preview-frame>.xi-root{min-height:100%}.hide-mobile{display:none}.login{min-height:100%;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(60% 50% at 8% 0%,rgba(139,92,246,.35),transparent 60%),radial-gradient(50% 45% at 100% 100%,rgba(217,70,239,.28),transparent 60%),var(--bg)}.login .card{width:100%;max-width:420px;box-shadow:var(--shadow)}.brand{font-size:28px;font-weight:800;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.graphic-row{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--border)}.graphic-row img{width:64px;height:64px;object-fit:contain;background:repeating-conic-gradient(var(--border) 0 25%,var(--card-2) 0 50%) 0 0/12px 12px;border-radius:8px}.center{text-align:center}.empty{text-align:center;padding:30px 10px;color:var(--muted)}hr{border:0;border-top:1px solid var(--border);margin:16px 0}.modal-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:#0000008c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{width:100%;max-width:460px;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);animation:modal-in .16s ease-out}.modal h2{margin-bottom:12px}@keyframes modal-in{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}.search{position:relative}.search .input{padding-left:36px}.search:before{content:"⌕";position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);font-size:18px;pointer-events:none}.user-card{display:grid;gap:8px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card-2)}.user-card .meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px;color:var(--muted)}.avatar{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;background:var(--grad);flex:0 0 auto}.actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}@media(min-width:900px){.content{padding:20px 20px calc(var(--nav-h) + 20px)}.editor{grid-template-columns:minmax(0,1fr) 440px;align-items:start}.editor .preview-col{position:sticky;top:70px}.hide-mobile{display:block}.hide-desktop{display:none!important}.grid-4{grid-template-columns:repeat(4,1fr)}}