:root{--blue:#0d6efd;--accent:#5b92ff;--navy:#08102a;--ink:#172941;--muted:#536c87;--glass:rgba(255,255,255,.26);--rim:rgba(255,255,255,.40);--blur:18px;--radius:24px;--control-radius:11px;--font:Roboto,Arial,system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font:14px/1.5 var(--font);color:#10233f;background:#071a3a}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:1px solid #2879f1;outline-offset:2px}a{text-decoration:none}.mx-center{position:relative;min-height:100vh;isolation:isolate;overflow-x:hidden}.scene{position:fixed;inset:0;z-index:-2;background:radial-gradient(ellipse at 8% 0%,#3b659d 0%,transparent 31%),radial-gradient(circle at 100% 65%,#345e9a 0%,transparent 32%),linear-gradient(125deg,#082148 0%,#14396d 42%,#092146 78%,#07182e);pointer-events:none}.scene:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(113deg,transparent 0,transparent 170px,#9bbdef0c 171px,#a9d0ff0c 173px,transparent 174px,transparent 340px)}.scene:after{content:"";position:absolute;right:-180px;top:80px;width:690px;height:690px;border:1px solid #c6e2ff2b;border-radius:50%;box-shadow:0 0 0 125px #ffffff07,0 0 0 240px #ffffff08,0 0 0 390px #ffffff06}.glass{position:relative;background:var(--glass);border:1px solid var(--rim);backdrop-filter:blur(var(--blur)) saturate(135%);-webkit-backdrop-filter:blur(var(--blur)) saturate(135%);box-shadow:0 24px 60px #05153244;border-radius:var(--radius)}.glass:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,#ffffff56,#ffffff09 78%);pointer-events:none}.glass>*{position:relative;z-index:1}
/* Header */
.topbar{height:78px;position:sticky;top:0;z-index:70;display:flex;align-items:center;gap:30px;padding:0 32px;background:rgba(6,23,53,.86);border-bottom:1px solid #b6d9ff25;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);color:#fff}.brandmark{display:inline-flex;align-items:center;gap:11px;flex:none;color:#fff}.brand-symbol{display:grid;place-items:center;width:38px;height:38px;background:#ffffff10;border:1px solid #a6d5ff79;border-radius:11px;color:#91c9ff;font-size:20px;font-weight:850;letter-spacing:-.06em;box-shadow:inset 0 1px #ffffff28}.brandmark strong{display:block;font-size:18px;letter-spacing:.15em;line-height:1.08;font-weight:750}.brandmark small{display:block;font-size:9px;letter-spacing:.25em;color:#aad0fb;font-weight:700;margin-top:4px}.top-links{display:flex;align-items:center;gap:8px;margin-left:32px}.top-links a{color:#b8cee7;font-size:12px;font-weight:650;padding:11px 13px;border-radius:10px;transition:.2s}.top-links a:hover,.top-links a.active{background:#a3d0ff18;color:#fff}.top-links i{margin-right:8px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:13px}.top-actions form{margin:0}.version-pill{font-size:10px;font-weight:750;letter-spacing:.07em;color:#bce0ff;border:1px solid #a0ceff5e;border-radius:100px;padding:6px 11px;background:#86bafd12}.avatar{display:grid;place-items:center;width:36px;height:36px;background:#ffffff1c;border-radius:10px;color:#c6e5ff}.icon-btn{border:1px solid #ffffff31;border-radius:10px;background:transparent;color:#bcd8f3;padding:9px}
/* Layout */
.shell{display:grid;grid-template-columns:245px minmax(0,1fr);gap:28px;max-width:1650px;padding:27px 28px 50px;margin:auto}.side{height:calc(100vh - 132px);position:sticky;top:105px;align-self:start;padding:20px 13px;background:#082653cb;border:1px solid #aacfff35;box-shadow:0 20px 50px #0003;border-radius:20px;display:flex;flex-direction:column;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#82aadd66 transparent}.side-heading{font-size:10px;font-weight:750;letter-spacing:.15em;color:#7fa8d6;padding:8px 13px 12px}.nav-item{width:100%;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid transparent;background:transparent;color:#bed1e8;border-radius:11px;padding:12px 13px;font-size:12px;transition:background .2s,border-color .2s,color .2s;text-decoration:none}.nav-item i:first-child{font-size:14px;width:18px;text-align:center}.nav-item:hover{background:#86baff1c;color:#fff}.nav-item.active{background:#83b4ff29;border:1px solid #8dc2ff4d;color:#fff;font-weight:650}.nav-item .end{margin-left:auto;font-size:10px;color:#9fbde0}.side-divider{height:1px;background:#d5e8ff21;margin:16px 11px}.side-bottom{display:flex;gap:10px;align-items:flex-start;margin:auto 6px 6px;padding:15px 9px;background:#cae4ff10;border-radius:12px;border:1px solid #ffffff16;color:#c1d6ed;flex-shrink:0;min-width:0}.side-bottom strong{font-size:11px}.side-bottom p{font-size:10px;line-height:1.6;color:#9db8d5;margin:4px 0 0}.status-dot,.live-dot{width:7px;height:7px;flex:none;display:inline-block;background:#60dda7;box-shadow:0 0 0 4px #60dda71c;border-radius:50%;margin-top:6px}.workspace{min-width:0}.hero{display:flex;justify-content:space-between;gap:30px;padding:35px 37px;min-height:232px;overflow:hidden}.hero:after{content:"";position:absolute;right:9%;bottom:-130px;width:350px;height:350px;border-radius:50%;border:1px solid #e8f7ff44;box-shadow:0 0 0 55px #ffffff09,0 0 0 115px #ffffff08;pointer-events:none}.eyebrow{display:flex;gap:8px;align-items:center;font-size:10px;font-weight:800;letter-spacing:.17em;color:#236fe2}.hero h1{font-size:clamp(29px,3vw,46px);line-height:1.14;letter-spacing:-.045em;margin:15px 0 12px;font-weight:720;color:#10223e}.hero h1 span{color:#2355a4}.hero p{max-width:650px;margin:0;color:#263f5c;font-size:13px;line-height:1.7;font-weight:500}.hero-right{display:flex;align-items:center;margin-left:auto;flex:none}.hero-mini{width:190px;background:#ffffff47;border:1px solid #ffffff99;border-radius:17px;padding:21px;display:flex;flex-direction:column;gap:8px}.hero-mini span{font-size:10px;letter-spacing:.09em;color:#38628f;font-weight:750}.hero-mini strong{font-size:31px;line-height:1;color:#113364;letter-spacing:-.05em}.hero-mini small{font-size:10px;color:#476784;line-height:1.6}.demo-note{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;border:1px solid #b2d6ff6b;border-radius:14px;padding:12px 15px;background:#dcecffd9;font-size:12px;color:#1d518c}.demo-note[hidden]{display:none}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin:17px 0 19px}.metric{padding:16px 20px;min-height:118px;display:flex;flex-direction:column}.metric span{font-size:11px;color:#2c5075;font-weight:650}.metric strong{font-size:28px;line-height:1.2;letter-spacing:-.045em;color:#132c50;margin:8px 0 4px}.metric small{color:#526d89;font-size:11px}
/* Editor */
.editor-grid{display:grid;grid-template-columns:minmax(320px,420px) minmax(0,1fr);gap:17px;align-items:start}.settings,.preview{padding:25px;min-width:0;min-height:660px}.panel-top{display:flex;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid #31598524}.panel-top h2{font-size:20px;line-height:1.22;letter-spacing:-.035em;color:#132745;margin:8px 0}.panel-top p{font-size:11.5px;line-height:1.6;color:#35577c;margin:0}.panel-icon{width:35px;height:35px;display:grid;place-items:center;flex:none;background:#ffffff8a;border:1px solid #e2edff;border-radius:11px;color:#2266c3}.setting-group{margin-top:22px}.group-head{font-size:11px;color:#2b4d73;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}.field-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:11px 0 8px}.field-row label{font-size:12px;font-weight:650;color:#203b60}.field-row output{font-size:11px;font-variant-numeric:tabular-nums;color:#406b9b}.input-line{display:flex;align-items:center;gap:9px}.input-line input[type=color]{width:45px;min-width:45px;height:36px;padding:3px;border-radius:9px;border:1px solid #9fbddd;background:#ffffffa0;cursor:pointer}.input-line input[type=text]{flex:1;min-width:0}.settings input[type=text],.settings select,.login-card input,.dialog textarea{height:39px;width:100%;border-radius:10px;border:1px solid #b1c9e7;background:#f2f8ffdf;color:#1e3b5c;padding:8px 11px;outline:0;box-shadow:none;transition:border-color .2s,box-shadow .2s}.settings input[type=text]:focus,.settings select:focus,.login-card input:focus,.dialog textarea:focus{border-color:#4b95ff;box-shadow:0 0 0 1px #4b95ff55}.settings input[type=range]{width:100%;accent-color:#1673ed;cursor:pointer}.settings .setting-help{font-size:10.5px;color:#4c6888;line-height:1.6;margin-top:5px}.settings-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:20px;border-top:1px solid #55779e25;margin-top:22px}.btn{border-radius:11px;min-height:41px;padding:10px 15px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:700;border:1px solid transparent;transition:transform .16s,box-shadow .16s,background .16s;white-space:normal}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active{transform:none}.btn.primary,.btn.publish{background:#0d6efd;color:#fff;box-shadow:0 10px 22px #176de043}.btn.primary:hover,.btn.publish:hover{background:#075bd0}.btn.secondary{background:#f2f7ffcc;color:#24548d;border:1px solid #bed5f0}.btn.secondary:hover{background:#e1efff}.settings-actions .btn{flex:1}.link-button{background:transparent;border:0;color:#1f65bd;font-size:11px;font-weight:750;display:inline-flex;gap:7px;align-items:center}.control-note{margin-top:10px;font-size:11px;color:#46668a}.version-row{background:#ffffff57;border:1px solid #ffffff93;padding:12px 13px;border-radius:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}.version-row strong{display:block;font-size:12px;color:#203b5c}.version-row small{display:block;margin-top:3px;color:#567593;font-size:10px}.version-row .btn{min-height:30px;padding:6px 9px;font-size:10px}.code-sample{background:#102b4e;color:#cee7ff;border-radius:12px;padding:14px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;white-space:pre-wrap;overflow-wrap:anywhere;max-height:280px;overflow:auto}.overview-steps{display:grid;gap:9px;margin-top:20px}.overview-step{display:flex;align-items:center;gap:11px;background:#ffffff52;border:1px solid #e5f1ff85;border-radius:12px;padding:13px;color:#234467;font-size:12px}.overview-step i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#1b73de;background:#e7f1ff}
/* Preview */
.preview-head{align-items:flex-start}.preview-actions{display:flex;gap:6px;padding:4px;background:#ffffff54;border:1px solid #ffffff82;border-radius:11px}.device{background:transparent;border:none;border-radius:8px;width:35px;height:32px;color:#456a95}.device.active{background:#f8fbff;color:#0a60cf;box-shadow:0 2px 8px #12395c1b}.preview-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:16px 0 14px}.preview-tabs button{border:none;background:transparent;color:#3b5878;font-size:11px;padding:8px 12px;border-radius:9px}.preview-tabs button.active{background:#e9f3ffd9;color:#195fbd;font-weight:700;box-shadow:0 2px 6px #2546731c}.preview-viewport{height:445px;border-radius:18px;background:#061b3b;border:1px solid #ffffff74;overflow:hidden;display:flex;justify-content:center;padding:10px;transition:.35s}.preview-scene{--pv-primary:#0d6efd;--pv-primary-hover:#0b5cda;--pv-accent:#5b92ff;--pv-navy:#08102a;--pv-ink:#111827;--pv-muted:#475569;--pv-success:#198754;--pv-danger:#dc3545;--pv-opacity:.26;--pv-blur:18px;--pv-radius:24px;--pv-control:11px;--pv-focus:1px;--pv-font-size:14px;--pv-button-height:42px;--pv-font:Roboto,Arial,sans-serif;position:relative;flex:1;width:100%;min-width:0;overflow:auto;scrollbar-width:thin;border-radius:12px;padding:20px;background:radial-gradient(circle at 110% -20%,#6798c7 0%,transparent 38%),radial-gradient(circle at -50% 100%,#3c7cc2 0%,transparent 64%),linear-gradient(135deg,var(--pv-navy),#183c74);transition:max-width .3s}.preview-viewport.is-mobile .preview-scene{max-width:325px}.pv-inner{position:relative;z-index:2;font-family:var(--pv-font);font-size:var(--pv-font-size);color:var(--pv-ink)}.pv-top{display:flex;justify-content:space-between;align-items:flex-start;padding:5px 3px 17px;color:#fff}.pv-kicker{font-size:10px;font-weight:750;letter-spacing:.12em;color:#9dd0ff}.pv-top h3{font-size:21px;letter-spacing:-.035em;margin:7px 0 0;color:#fff}.pv-top p{font-size:11px;color:#b9d4f2;margin:3px 0 0}.pv-top-icon{background:#ffffff30;padding:8px 10px;border-radius:10px}.pv-card{background:rgba(255,255,255,var(--pv-opacity));border:1px solid #ffffff6b;border-radius:var(--pv-radius);backdrop-filter:blur(var(--pv-blur));-webkit-backdrop-filter:blur(var(--pv-blur));padding:17px;box-shadow:0 12px 28px #07152b35}.pv-card .caption{color:#335577;font-size:11px;font-weight:650}.pv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pv-stats .pv-card strong{display:block;font-size:23px;letter-spacing:-.05em;color:#112d51;margin:7px 0 4px}.pv-stats .pv-card small{color:#456688;font-size:10px}.pv-large{margin-top:11px}.pv-large h4{font-size:14px;margin:0 0 4px;color:#1d3450}.pv-large p{font-size:11px;margin:0 0 16px;color:#476781}.pv-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:9px}.pv-btn{display:inline-flex;gap:6px;align-items:center;justify-content:center;min-height:var(--pv-button-height);padding:10px 14px;border-radius:var(--pv-control);font-size:12px;font-weight:650;background:var(--pv-primary);color:#fff;border:1px solid transparent;cursor:pointer}.pv-btn:hover{background:var(--pv-primary-hover)}.pv-btn.ghost{background:#ffffffc9;color:#255789;border:1px solid #b5d3f4}.pv-btn.small{min-height:30px;padding:5px 10px;font-size:10px}.pv-btn.big{min-height:52px;padding:12px 19px;font-size:15px}.pv-input,.pv-select{width:100%;padding:10px;border-radius:var(--pv-control);background:#ffffffe8;border:1px solid #a5c7e8;color:#274565;min-height:40px;margin-top:5px}.pv-input:focus,.pv-select:focus{outline:var(--pv-focus) solid var(--pv-primary);outline-offset:1px;box-shadow:0 0 0 var(--pv-focus) #5b92ff33}.pv-label{font-size:11px;font-weight:650;color:#315575;display:block;margin:10px 0 6px}.pv-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.pv-badge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:100px;background:#e4f4e9;color:var(--pv-success);font-size:10px;font-weight:700}.pv-badge.danger{background:#ffedf1;color:var(--pv-danger)}.pv-progress{height:8px;background:#8eafcd70;border-radius:10px;overflow:hidden;margin:20px 0 0}.pv-progress span{height:100%;width:73%;background:var(--pv-primary);display:block;border-radius:inherit}.pv-table{width:100%;border-collapse:collapse;text-align:left;font-size:11px;margin-top:12px}.pv-table th{font-weight:650;color:#476a8e}.pv-table td,.pv-table th{border-bottom:1px solid #34629325;padding:11px 6px}.pv-bottom-note{font-size:10px;color:#557595;margin-top:12px}.preview-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:16px;color:#3d6080;font-size:11px}.preview-bottom .live-dot{margin-top:0;margin-right:6px}.release-bar{margin-top:18px;padding:24px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}.release-bar h3{font-size:18px;letter-spacing:-.02em;color:#183657;margin:7px 0 5px}.release-bar p{font-size:11px;color:#456782;margin:0}.release-bar .publish{padding:12px 20px}.footerline{font-size:10px;letter-spacing:.11em;font-weight:700;color:#bad5f3;margin:26px 2px}
/* Dialog + toast */
.dialog{border:none;padding:0;background:#f3f9ff;color:#193659;max-width:min(460px,calc(100% - 30px));width:100%;border-radius:20px;box-shadow:0 28px 100px #03112777}.dialog::backdrop{background:#06172fb8;backdrop-filter:blur(5px)}.dialog form{padding:27px}.dialog-title{display:flex;gap:12px;align-items:center}.dialog-title>i{color:#176fdf;background:#e4f0ff;padding:13px;border-radius:12px}.dialog-title h2{font-size:18px;margin:0}.dialog p{font-size:12px;color:#4d6b87;line-height:1.65}.dialog label{font-weight:650;font-size:12px}.dialog textarea{margin-top:7px;height:auto;resize:vertical}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.toast-host{position:fixed;right:20px;bottom:20px;z-index:200;display:grid;gap:8px}.toast{background:#0a2748;color:#fff;border:1px solid #aed6ff48;border-radius:12px;min-width:240px;max-width:380px;padding:12px 15px;box-shadow:0 16px 40px #0005;font-size:12px;display:flex;gap:9px;align-items:center}.toast i{color:#88c8ff}.toast.bad i{color:#ff8c9b}
/* Login */
.login-page{display:grid;place-items:center;padding:22px}.login-card{max-width:420px;width:100%;background:#eaf4ffbb;border:1px solid #ffffff9e;backdrop-filter:blur(19px);border-radius:24px;padding:34px;box-shadow:0 30px 70px #03153277}.login-card .brandmark{color:#15365d;margin-bottom:28px}.login-card .brandmark strong{color:#163b69}.login-card .brandmark small{color:#326497}.login-card .brand-symbol{border-color:#246dea49;background:#d4e6fc;color:#126add}.login-card h1{font-size:32px;color:#112c50;margin:8px 0}.login-card .sub{font-size:12px;color:#4b6c8b;margin:0 0 24px;line-height:1.65}.login-card label{display:block;font-size:12px;color:#294c72;font-weight:700;margin:14px 0 6px}.login-card .full{width:100%;margin-top:24px}.login-card .footnote{font-size:10px;color:#6582a0;text-align:center;margin:21px 0 6px}.login-card .textlink{display:block;text-align:center;color:#185bad;font-size:11px;margin-top:10px}.alert.error{color:#87263c;background:#ffe2ea;padding:12px 15px;font-size:12px;border-radius:10px}
@media(max-width:1250px){.shell{grid-template-columns:200px minmax(0,1fr);gap:18px;padding:20px}.side{padding:14px 9px}.editor-grid{grid-template-columns:1fr}.settings,.preview{min-height:auto}.hero-right{display:none}}
@media(max-width:850px){.topbar{padding:0 16px;gap:10px}.top-links{margin-left:auto}.top-links a{font-size:0;padding:11px}.top-links a i{font-size:16px;margin:0}.top-actions{margin-left:2px}.shell{display:block;padding:16px 12px}.side{position:static;height:auto;margin-bottom:15px;display:flex;flex-direction:row;flex-wrap:wrap;gap:5px;padding:12px;overflow:visible;scrollbar-width:auto}.side-heading,.side-divider,.side-bottom{display:none}.nav-item{width:auto;padding:9px 11px;font-size:11px}.nav-item .end{display:none}.hero{padding:26px}.metrics{grid-template-columns:repeat(2,1fr)}.release-bar{padding:22px;align-items:flex-start;flex-direction:column}}
@media(max-width:550px){.brand-symbol{width:32px;height:32px}.brandmark strong{font-size:15px}.brandmark small{font-size:8px}.version-pill{display:none}.topbar{height:66px}.hero{min-height:auto;padding:24px 21px}.hero h1{font-size:30px}.metrics{gap:9px}.metric{padding:13px;min-height:105px}.metric strong{font-size:24px}.settings,.preview{padding:17px;border-radius:18px}.panel-top h2{font-size:18px}.preview-viewport{height:420px;padding:6px}.preview-scene{padding:13px}.pv-stats{gap:5px}.pv-card{padding:11px}.pv-stats .pv-card strong{font-size:18px}.pv-field-grid{grid-template-columns:1fr}.side{border-radius:16px}.nav-item{padding:8px 9px}.release-bar{border-radius:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Mobile navigation must not cause horizontal overflow. */
@media(max-width:550px){.topbar{gap:8px;padding:0 12px}.top-links{flex:1;min-width:0;gap:1px;justify-content:flex-end;margin-left:0}.top-links a{padding:8px}.top-actions{flex:none;margin-left:0}.avatar{width:30px;height:30px}.brandmark{gap:7px}.brandmark strong{letter-spacing:.11em}}
/* Project-specific official brand mark */
.brand-logo{display:block;width:clamp(130px,16vw,195px);max-height:58px;height:auto;object-fit:contain;object-position:left center}
.login-card .brand-logo{width:min(250px,100%);max-height:104px}
.login-card .brandmark{max-width:100%;padding:14px 17px;background:linear-gradient(120deg,#0c2851,#1a4578);border:1px solid #8bbcff50;border-radius:15px;margin-bottom:25px}
@media(max-width:850px){.brand-logo{width:150px;max-height:45px}}
@media(max-width:550px){.brand-logo{width:116px;max-height:42px}}