:root { color-scheme: dark; --bg:#070d16; --panel:#0d1724; --panel-2:#111e2d; --line:rgba(164,210,245,.14); --text:#f4f9fd; --muted:#8fa6b8; --accent:#24b9ff; --danger:#ff6680; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 20% 0,rgba(20,116,181,.12),transparent 34%),var(--bg); color:var(--text); font:14px/1.45 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
.topbar { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; height:64px; padding:0 32px; border-bottom:1px solid var(--line); background:rgba(7,13,22,.88); backdrop-filter:blur(16px); }
.topbar__brand { display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:-.2px; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; color:#dff6ff; background:linear-gradient(145deg,#158eff,#08c4e7); box-shadow:0 0 20px rgba(28,180,255,.22); font-size:12px; }
.page-shell { width:min(1480px,calc(100% - 48px)); margin:0 auto; padding:34px 0 64px; }
.page-heading,.section-heading,.control-row,.form-actions,.copy-field,.message-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:6px; font-size:30px; letter-spacing:-.8px; } h2 { margin-bottom:18px; font-size:19px; } h3 { margin:12px 0 4px; font-size:14px; color:#c7d8e5; }
.eyebrow { margin-bottom:5px; color:#5fcaff; font-size:11px; font-weight:800; letter-spacing:1.4px; }
.muted,small { display:block; color:var(--muted); }
.panel,.stat,.auth-card { border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(16,29,44,.96),rgba(10,20,32,.96)); box-shadow:0 18px 48px rgba(0,0,0,.17); }
.panel { margin-top:18px; padding:22px; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px; }
.stat { padding:18px; } .stat span { color:var(--muted); } .stat strong { display:block; margin-top:4px; font-size:27px; }
.button { display:inline-flex; min-height:38px; align-items:center; justify-content:center; padding:8px 14px; border:1px solid var(--line); border-radius:10px; color:#dcebf5; background:#142335; cursor:pointer; font:inherit; font-weight:650; }
.button:hover { border-color:rgba(80,190,255,.38); background:#172a3e; }.button--primary { border-color:rgba(37,186,255,.45); color:white; background:linear-gradient(135deg,#087cd5,#16a7e4); }.button--quiet { background:transparent; }.button--small { min-height:31px; padding:5px 10px; font-size:12px; }.button--icon { min-width:32px; padding:5px; }.button--danger { border-color:rgba(255,102,128,.25); color:#ff9aad; background:rgba(255,68,100,.08); }.button--wide { width:100%; }
.search-form { display:flex; gap:10px; margin-bottom:18px; }.search-form input { max-width:380px; }
input,select,textarea { width:100%; border:1px solid rgba(160,207,240,.17); border-radius:10px; outline:none; color:var(--text); background:#09131f; padding:10px 11px; font:inherit; }.copy-field input { font-family:ui-monospace,monospace; }.copy-field .button { flex:none; } input:focus,select:focus,textarea:focus { border-color:rgba(52,191,255,.55); box-shadow:0 0 0 3px rgba(32,175,241,.08); }
label { display:grid; gap:6px; color:#c8d8e4; font-weight:600; }.form-stack { display:grid; gap:18px; }.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.form-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }.span-2 { grid-column:1/-1; }
.switch { display:flex; align-items:center; gap:9px; align-self:end; min-height:42px; }.switch input { width:auto; accent-color:var(--accent); }.control-row { padding:12px 0; border-bottom:1px solid var(--line); }.control-row .switch { align-self:center; }
.notice { margin-bottom:18px; padding:12px 15px; border:1px solid rgba(70,208,151,.24); border-radius:11px; background:rgba(48,186,129,.08); }.notice--error { border-color:rgba(255,102,128,.25); background:rgba(255,74,105,.08); color:#ffabb9; }
.status { display:inline-flex; padding:4px 8px; border-radius:99px; font-size:11px; font-weight:800; text-transform:uppercase; }.status--ok { color:#80e5bd; background:rgba(49,190,133,.12); }.status--off { color:#aebdca; background:rgba(153,173,189,.1); }
.table-wrap { overflow:auto; } table { width:100%; border-collapse:collapse; } th,td { padding:13px 12px; border-top:1px solid var(--line); text-align:left; white-space:nowrap; } th { color:#8298aa; font-size:11px; text-transform:uppercase; letter-spacing:.7px; } td small { margin-top:2px; } code { color:#91dcff; }
.editor-layout { display:grid; grid-template-columns:minmax(560px,1fr) minmax(480px,.78fr); gap:20px; align-items:start; }.preview-column { position:sticky; top:80px; }.preview-frame { width:100%; overflow:auto; border:1px solid var(--line); border-radius:14px; background:repeating-conic-gradient(#1a2632 0 25%,#131e29 0 50%) 0/20px 20px; }.preview-frame iframe { display:block; border:0; transform-origin:top left; }.live-dot { color:#70dfb4; font-size:11px; font-weight:800; }.message-card { position:relative; padding:16px; border:1px solid var(--line); border-radius:13px; background:rgba(6,14,23,.38); }.message-card+.message-card { margin-top:10px; }.message-actions { justify-content:flex-start; margin-top:10px; }.add-message { margin-top:16px; }.add-message summary { cursor:pointer; color:#67cbfb; font-weight:700; }.add-message form { margin-top:14px; }.spec-list { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:0; list-style:none; }.spec-list li { display:flex; justify-content:space-between; padding:8px 10px; border-radius:9px; background:rgba(255,255,255,.025); }.auth-card { width:min(430px,100%); margin:10vh auto 0; padding:30px; }.back-link { display:inline-block; margin-bottom:12px; color:#75cffa; }.empty-state { padding:48px; text-align:center; }.sr-only { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; }
@media (max-width:1100px) { .editor-layout { grid-template-columns:1fr; }.preview-column { position:static; }.stats-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) { .page-shell { width:min(100% - 24px,1480px); }.topbar { padding:0 14px; }.form-grid,.form-grid--3 { grid-template-columns:1fr; }.span-2 { grid-column:auto; }.stats-grid { grid-template-columns:1fr 1fr; }.page-heading { align-items:flex-start; flex-direction:column; } }