:root{--bg:#f4f6fb;--panel:#fff;--ink:#172033;--muted:#778198;--line:#e7eaf2;--navy:#0b1020;--navy2:#151c31;--purple:#7667ed;--purple2:#5b4bd8;--green:#18a878;--amber:#c78b29;--red:#db5b64;--shadow:0 12px 35px rgba(26,38,70,.07)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Kanit,sans-serif;font-size:15px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.hidden{display:none!important}.muted{color:var(--muted)}.tiny{font-size:11px}.eyebrow{font:800 10px Manrope,sans-serif;letter-spacing:.18em;color:#8d83ed;margin:0 0 8px}.brand{display:flex;align-items:center;gap:10px;color:#fff;font:800 19px Manrope,sans-serif;letter-spacing:.08em}.brand-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#9b8cff,#6555df);display:grid;place-items:center;color:white;font:800 21px Manrope;box-shadow:0 6px 18px #7667ed55}.brand-large{justify-content:center;font-size:23px;margin:0 auto 18px}.brand-large .brand-mark{width:43px;height:43px;font-size:26px;border-radius:14px}
.auth-screen{min-height:100vh;display:grid;place-items:center;padding:25px;background:radial-gradient(ellipse at 20% 15%,#3f377a 0,transparent 38%),radial-gradient(ellipse at 85% 90%,#233d67 0,transparent 33%),#0b1020}.auth-card{width:min(100%,430px);background:white;border-radius:24px;padding:42px;box-shadow:0 25px 80px #0005}.auth-card h1{text-align:center;font-size:29px;margin:8px 0 2px}.auth-card>.muted{text-align:center;margin:0 0 26px}.auth-card .eyebrow{text-align:center}.stack{display:grid;gap:16px}.stack label,.form-grid label,.panel label{display:grid;gap:7px;font-size:13px;font-weight:500}.auth-switch{text-align:center;color:var(--muted);font-size:13px;margin:21px 0}.text-button{border:0;background:none;color:var(--purple);font-weight:600;padding:0}.auth-card .tiny{text-align:center;margin-bottom:0}
.btn{border:1px solid transparent;border-radius:10px;padding:10px 17px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn-primary{color:white;background:linear-gradient(135deg,#8073f2,#6153d8);box-shadow:0 7px 17px #7164e733}.btn-primary:hover{background:linear-gradient(135deg,#7163e8,#5142c6)}.btn-secondary{color:#5548c7;background:#f0efff;border-color:#e1defd}.btn-quiet{background:#fff;border-color:var(--line);color:#515d75}.btn-quiet:hover,.btn-secondary:hover{border-color:#bcb5fb;color:#4e42c8}.btn-wide{width:100%}.btn-small{padding:7px 12px;font-size:12px;border-radius:8px}.icon-button{border:1px solid var(--line);background:white;border-radius:9px;width:38px;height:38px;color:#5a6680}.toast{position:fixed;z-index:1000;top:20px;right:20px;background:#172033;color:white;padding:12px 18px;border-radius:10px;box-shadow:var(--shadow);opacity:0;transform:translateY(-8px);pointer-events:none;transition:.25s;max-width:min(90vw,420px)}.toast.show{opacity:1;transform:none}.toast.error{background:#8b2935}
.app-shell{min-height:100vh}.sidebar{width:250px;position:fixed;inset:0 auto 0 0;background:linear-gradient(180deg,#10162a,#0b1020);color:white;padding:27px 18px;display:flex;flex-direction:column;z-index:30}.sidebar .brand{padding:0 10px 38px}.workspace-label{font:700 9px Manrope;color:#707a9a;letter-spacing:.18em;padding:0 12px 12px}.nav-menu{display:grid;gap:5px}.nav-link{width:100%;display:flex;align-items:center;gap:13px;padding:12px 13px;border:0;border-radius:9px;background:transparent;color:#aab2c8;text-align:left;font-size:14px}.nav-link span{width:18px;text-align:center;font-size:17px}.nav-link:hover{background:#ffffff0d;color:#fff}.nav-link.active{background:linear-gradient(90deg,#7164e8aa,#7164e822);color:#fff;box-shadow:inset 3px 0 #9c92ff}.sidebar-bottom{margin-top:auto}.sidebar-help{display:flex;align-items:center;gap:11px;background:#ffffff0b;border:1px solid #ffffff12;border-radius:12px;padding:13px;margin:0 0 15px}.help-dot{width:27px;height:27px;display:grid;place-items:center;border-radius:50%;background:#7164e8;color:white;font-weight:700}.sidebar-help b,.sidebar-help small{display:block}.sidebar-help b{font-size:12px}.sidebar-help small{font-size:10px;color:#8d97b0;margin-top:2px}.logout{border-top:1px solid #ffffff14;border-radius:0;padding-top:18px}.main-area{margin-left:250px;min-height:100vh}.topbar{height:78px;padding:0 38px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}.topbar-kicker{font:700 9px Manrope;color:#9aa2b5;letter-spacing:.16em}.topbar-title{font-size:14px;font-weight:600}.topbar-user{display:flex;align-items:center;gap:10px}.topbar-user b,.topbar-user small{display:block}.topbar-user b{font-size:12px;max-width:200px;overflow:hidden;text-overflow:ellipsis}.topbar-user small{font-size:10px;color:var(--muted)}.avatar{width:36px;height:36px;border-radius:12px;background:#eeeaff;color:#6659d3;display:grid;place-items:center;font-weight:700}.mobile-only{display:none}
.view{display:none;padding:35px 40px 70px;max-width:1600px;margin:auto}.view.active-view{display:block}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}.page-heading h1,.editor-title-wrap h1{font-size:29px;margin:0 0 4px}.page-heading p.muted{margin:0}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin:24px 0 38px}.stat-card{background:white;border:1px solid var(--line);border-radius:14px;padding:20px;position:relative;box-shadow:0 4px 15px #1a264608;display:grid;grid-template-columns:42px 1fr;column-gap:13px;align-items:center}.stat-icon{grid-row:span 2;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px}.stat-icon.purple{background:#efedff;color:#7465e8}.stat-icon.green{background:#e4f8f0;color:#1aab79}.stat-icon.amber{background:#fff3df;color:#bd852c}.stat-card span{font-size:12px;color:var(--muted)}.stat-card strong{font:800 27px Manrope;display:block;margin-top:2px}.stat-card>small{grid-column:2;font-size:10px;color:#a3aabc;margin-top:3px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-heading h2{font-size:18px;margin:0}.section-heading p{font-size:11px;margin:2px 0 0}.site-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.site-card{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 4px 15px #1a264608;transition:.2s}.site-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.site-card-cover{height:125px;background:linear-gradient(130deg,#1c2940,#5b4bd8);padding:18px;position:relative;overflow:hidden;color:white}.site-card-cover:before,.site-card-cover:after{content:"";position:absolute;width:160px;height:160px;border:1px solid #ffffff25;border-radius:50%;right:-22px;top:-76px}.site-card-cover:after{width:230px;height:230px;right:-55px;top:-109px}.site-card-cover .cover-label{font:800 9px Manrope;letter-spacing:.2em;opacity:.7}.site-card-cover .cover-name{font-size:20px;font-weight:600;max-width:78%;position:relative;z-index:1;margin-top:17px;line-height:1.2}.site-card-info{padding:15px 17px}.site-card-info h3{font-size:14px;margin:0 0 5px}.site-url{font:11px Manrope;color:#8d96aa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.site-card-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:14px}.status-pill{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:4px 9px;font-size:10px;background:#fff3df;color:#a97625}.status-pill.published{background:#e6f7ef;color:#16855e}.status-dot{width:7px;height:7px;border-radius:50%;background:#d19a42}.status-dot.published{background:#1aab79}.site-actions{display:flex;gap:6px}.mini-action{border:1px solid var(--line);background:white;color:#65708a;border-radius:7px;padding:5px 9px;font-size:11px}.mini-action:hover{border-color:#aaa0fa;color:#5d50d5}.empty-state{text-align:center;background:white;border:1px dashed #d6dbea;border-radius:16px;padding:50px 20px;margin-top:20px}.empty-illustration{width:60px;height:60px;border-radius:18px;background:#f0efff;color:#7062e9;display:grid;place-items:center;font-size:29px;margin:0 auto 15px}.empty-state h3{margin:0 0 5px}.empty-state p{font-size:12px;color:var(--muted);max-width:440px;margin:0 auto 18px}
.toolbar{display:flex;gap:10px;margin-bottom:18px}.searchbox{display:flex;align-items:center;gap:8px;background:white;border:1px solid var(--line);border-radius:9px;padding:0 12px;flex:1;max-width:420px;color:#9ba4b5}.searchbox input{border:0!important;box-shadow:none!important;padding-left:0!important}.toolbar select{width:170px}
input,select,textarea{width:100%;border:1px solid #e2e6ef;border-radius:8px;background:#fff;padding:10px 12px;color:#263149;outline:none;font-size:13px;min-width:0}input:focus,select:focus,textarea:focus{border-color:#9288f2;box-shadow:0 0 0 3px #8173ed18}input[type=color]{height:39px;padding:4px;max-width:100%}textarea{resize:vertical;line-height:1.6}label small{font-size:10px;font-weight:400;color:#a0a8b7}.editor-heading{margin-bottom:20px}.editor-heading>.btn{margin-bottom:17px}.editor-title-wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}.editor-title-wrap h1{font-size:25px}.editor-actions{display:flex;align-items:center;gap:8px}.save-status{font-size:11px;color:#99a1b2;margin-right:5px}.save-status.saved{color:#15966a}.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:19px;align-items:start}.editor-main{display:grid;gap:17px}.panel{background:white;border:1px solid var(--line);border-radius:13px;padding:22px;box-shadow:0 4px 16px #1c2d5506}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.panel-heading h2{font-size:16px;margin:0 0 2px}.panel-heading p{font-size:11px;color:var(--muted);margin:0}.panel-number{font:700 11px Manrope;color:#b2accf;background:#f4f2ff;padding:6px 8px;border-radius:7px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px}.slug-input{display:flex;align-items:center;border:1px solid #e2e6ef;border-radius:8px;overflow:hidden}.slug-input span{padding:10px 0 10px 11px;color:#9aa2b2;font:11px Manrope}.slug-input input{border:0;box-shadow:none!important;padding-left:5px}.url-preview{font:11px Manrope;color:#7c70df;background:#f6f5ff;border:1px solid #eceaff;padding:9px 11px;border-radius:7px;overflow-wrap:anywhere}.subpanel{border:1px solid #eceef4;border-radius:10px;padding:16px;background:#fcfcfe}.subpanel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;font-size:13px}.tag{font-size:9px;color:#6d60d8;background:#efedff;border-radius:20px;padding:4px 8px}.inline-upload{display:flex;gap:7px;align-items:center}.inline-upload input{flex:1}.upload-btn{white-space:nowrap;border:1px solid #dfdcf9;background:#f7f6ff;color:#5f53cc;padding:9px 11px;border-radius:8px;font-size:11px;cursor:pointer}.upload-btn:hover{background:#eeecff}.blocks-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 12px}.blocks-heading b,.blocks-heading small{display:block}.blocks-heading small{color:var(--muted);font-size:10px}.add-block-control{display:flex;gap:7px;align-items:center}.add-block-control select{width:178px;padding:7px 9px;font-size:11px}.block-card{border:1px solid var(--line);border-radius:10px;margin-bottom:9px;overflow:hidden}.block-card-head{display:flex;align-items:center;justify-content:space-between;padding:10px 13px;background:#fafbfe;border-bottom:1px solid var(--line)}.block-card-head b{font-size:12px}.block-actions{display:flex;gap:5px}.block-actions button{border:1px solid var(--line);background:white;color:#758098;border-radius:6px;padding:3px 8px;font-size:10px}.block-actions button:hover{color:#5a4ed1;border-color:#b9b2f7}.block-card-body{padding:13px;display:grid;gap:11px}.block-card-body label{font-size:11px}.block-card-body textarea{min-height:70px}.block-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.block-empty{font-size:11px;color:#9099aa;text-align:center;padding:23px;border:1px dashed #dce1eb;border-radius:8px}.notice{background:#f5f4ff;border:1px solid #e5e2ff;border-left:3px solid #8174e9;border-radius:8px;padding:11px 13px;margin-bottom:15px}.notice b{font-size:12px;color:#5d51c8}.notice p{font-size:10px;color:#737d97;line-height:1.7;margin:3px 0 0}.tabs{display:flex;gap:5px;border-bottom:1px solid var(--line);margin-bottom:14px}.tab{border:0;background:transparent;color:#8992a6;padding:9px 14px;font-size:12px;border-bottom:2px solid transparent}.tab.active{color:#5e51d2;border-color:#7164e8;font-weight:600}.tab-content{display:grid;gap:12px}.code-editor{background:#111827;color:#d6dced;font:11px/1.65 Consolas,monospace;padding:14px;border-color:#263147;min-height:230px}.file-upload-row{justify-content:space-between;border:1px dashed #d9deea;background:#fafbfe;padding:10px 12px;border-radius:8px;font-size:11px}.preview-row{display:flex;gap:8px;margin-top:16px}.pixel-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.pixel-box{border:1px solid var(--line);border-radius:9px;padding:13px;display:grid;gap:10px}.pixel-box h3{font-size:12px;margin:0}.pixel-box h3 small{font-size:9px;color:#9ba3b3;font-weight:400;margin-left:4px}.pixel-box label{font-size:10px}.pixel-box input{font:11px Manrope}.sticky-panel{position:sticky;top:96px}.mode-option{display:flex!important;align-items:flex-start;gap:9px;padding:12px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:8px;cursor:pointer}.mode-option:has(input:checked){background:#f7f6ff;border-color:#bdb7fa}.mode-option input{width:15px;height:15px;margin:2px 0 0;accent-color:#6c5ee0}.mode-option span b,.mode-option span small{display:block}.mode-option span b{font-size:11px}.mode-option span small{font-size:9px;color:var(--muted);margin-top:2px}.mode-warning{font-size:10px;color:#9c7b40;background:#fff9ec;padding:9px;border-radius:7px;line-height:1.5;margin-top:10px}.divider{height:1px;background:var(--line);margin:17px 0}.publish-state{display:flex;align-items:center;gap:10px;margin-bottom:14px}.publish-state .status-dot{width:9px;height:9px}.publish-state b,.publish-state small{display:block}.publish-state b{font-size:12px}.publish-state small{font-size:10px;color:var(--muted);margin-top:2px}.disabled-link{opacity:.45;pointer-events:none}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:#0b1020a8;backdrop-filter:blur(4px)}.modal-card{z-index:1;position:relative;background:white;width:min(100%,440px);padding:30px;border-radius:17px;box-shadow:0 25px 80px #0004}.modal-card h2{font-size:23px;margin:0 0 4px}.modal-card>p.muted{font-size:12px;margin:0 0 20px}.modal-close{position:absolute;right:15px;top:12px;border:0;background:transparent;font-size:25px;color:#8992a4}.preview-modal{padding:30px}.preview-window{position:relative;z-index:1;background:white;width:min(1200px,100%);height:min(850px,92vh);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}.preview-toolbar{height:48px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.preview-toolbar b{font-size:12px}.preview-window iframe{width:100%;height:100%;border:0;background:#fff}
@media(max-width:1200px){.site-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor-layout{grid-template-columns:minmax(0,1fr) 270px}.view{padding-left:27px;padding-right:27px}}@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none;box-shadow:20px 0 50px #0004}.main-area{margin-left:0}.mobile-only{display:block}.topbar{padding:0 20px}.view{padding:25px 20px 55px}.editor-layout{grid-template-columns:1fr}.sticky-panel{position:static}.editor-side{order:-1}.editor-actions{flex-wrap:wrap}.save-status{display:none}}@media(max-width:620px){.auth-card{padding:30px 23px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading h1{font-size:25px}.stat-grid{grid-template-columns:1fr;gap:10px;margin-bottom:28px}.stat-card{padding:14px}.stat-card strong{font-size:23px}.site-grid{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.toolbar select{width:100%}.searchbox{max-width:none;flex-basis:100%}.editor-title-wrap{align-items:flex-start;flex-direction:column}.editor-title-wrap h1{font-size:22px}.editor-actions{width:100%}.editor-actions .btn{flex:1;padding:9px 7px;font-size:11px}.panel{padding:16px}.form-grid,.pixel-grid{grid-template-columns:1fr}.blocks-heading{align-items:flex-start;flex-direction:column}.add-block-control{width:100%}.add-block-control select{flex:1}.preview-row{flex-wrap:wrap}.preview-row .btn{flex:1}.block-two{grid-template-columns:1fr}.topbar-user b{max-width:120px}.preview-modal{padding:8px}.preview-window{height:96vh}}

/* ZEANZA Visual Builder v2 */
.visual-builder-panel{overflow:hidden}.builder-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-2px 0 12px;flex-wrap:wrap}.device-switch{display:inline-flex;gap:4px;padding:4px;background:#f1f2f8;border-radius:9px}.device-btn{border:0;border-radius:7px;background:transparent;color:#707b91;padding:7px 11px;font-size:11px}.device-btn.active{background:#fff;color:#5c4dd1;box-shadow:0 2px 7px #1b254014;font-weight:600}.builder-toolbar-right{display:flex;align-items:center;gap:10px}.builder-hint{font-size:10px;color:#8993a8}.builder-canvas-wrap{width:100%;height:610px;display:flex;justify-content:center;align-items:flex-start;overflow:auto;background:#e9edf5;border:1px solid #dce1ec;border-radius:10px;padding:10px;transition:.25s}.builder-canvas-wrap iframe{width:100%;height:100%;min-height:580px;border:0;border-radius:6px;background:#fff;box-shadow:0 4px 18px #18254418;transition:width .25s}.builder-canvas-wrap.is-mobile iframe{width:390px;max-width:100%;height:720px;min-height:720px}.builder-canvas-footer{display:flex;justify-content:space-between;gap:10px;margin-top:9px;font-size:10px;color:#929bb0}.builder-canvas-footer span:first-child{display:flex;align-items:center;gap:7px}.live-dot{width:7px;height:7px;border-radius:50%;background:#19aa79;box-shadow:0 0 0 4px #19aa791c}.subpanel.builder-selected{border-color:#8f82f1;box-shadow:0 0 0 4px #8173ed20}.block-card.selected{border-color:#8c7ff0;box-shadow:0 0 0 4px #8173ed1c}.block-drag-handle{color:#9aa3b8;font-size:17px;vertical-align:-1px;margin-right:3px}.builder-security-note{font-size:10px;color:#9a7a42;background:#fff9ed;border:1px solid #f4e6c6;border-radius:7px;padding:9px 11px;margin-top:10px}.builder-item{scroll-margin-top:20px}
@media(max-width:700px){.builder-toolbar{align-items:flex-start}.builder-toolbar-right{width:100%;justify-content:space-between}.builder-hint{max-width:65%}.builder-canvas-wrap{height:540px;padding:6px}.builder-canvas-wrap iframe{min-height:520px}.builder-canvas-wrap.is-mobile iframe{height:690px;min-height:690px}.builder-canvas-footer{flex-direction:column;gap:4px}}


/* ZEANZA Visual Builder v3 — split editor / live preview workspace */
.editor-layout{
  display:grid;
  grid-template-columns:minmax(480px,1fr) minmax(390px,460px);
  gap:18px;
  align-items:start;
}
.editor-main{min-width:0;display:grid;gap:17px}
.editor-side{
  min-width:0;
  display:grid;
  gap:14px;
  position:sticky;
  top:86px;
  align-self:start;
  max-height:calc(100vh - 102px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:2px;
  scrollbar-width:thin;
}
.editor-side .sticky-panel{position:static;top:auto}
.editor-side .visual-builder-panel{padding:16px;overflow:hidden}
.editor-side .visual-builder-panel .panel-heading{margin-bottom:12px}
.editor-side .visual-builder-panel .panel-heading h2{font-size:15px}
.editor-side .visual-builder-panel .panel-heading p{font-size:10px;line-height:1.55}
.editor-side .builder-toolbar{display:grid;gap:9px;margin:0 0 10px}
.editor-side .device-switch{width:100%;display:grid;grid-template-columns:1fr 1fr}
.editor-side .device-btn{font-size:11px;padding:9px 6px}
.editor-side .builder-toolbar-right{display:flex;justify-content:space-between;align-items:center;gap:8px}
.editor-side .builder-hint{font-size:10px}
.editor-side .builder-canvas-wrap{
  width:100%;height:min(66vh,680px);min-height:430px;
  display:flex;justify-content:center;align-items:flex-start;
  overflow:auto;padding:10px;
  background:#e9edf5;border:1px solid #dce1ec;border-radius:10px;
  scrollbar-width:thin;
}
.builder-canvas-stage{position:relative;flex:0 0 auto;margin:0 auto;overflow:hidden;border-radius:6px;}
.builder-canvas-stage iframe{
  position:absolute;left:0;top:0;display:block;
  width:1280px;height:1800px;min-height:0;
  border:0;border-radius:6px;background:#fff;
  box-shadow:0 4px 18px #18254418;
  transform-origin:top left;
}
.editor-side .builder-canvas-wrap.is-mobile{height:min(74vh,760px);min-height:460px}
.editor-side .builder-canvas-footer{display:grid;gap:5px;line-height:1.5;font-size:10px}
.editor-side .builder-canvas-footer span:last-child{color:#a0a8b8}
.editor-side .panel-number{flex-shrink:0}
.editor-side .mode-option{padding:10px 9px}
.editor-side .mode-warning{font-size:10px}
@media(max-width:1120px){
  .editor-layout{grid-template-columns:minmax(0,1fr)}
  .editor-side{position:static;top:auto;max-height:none;overflow:visible;order:2}
  .editor-side .builder-canvas-wrap{height:620px}
}
@media(max-width:700px){
  .editor-side .visual-builder-panel{padding:13px}
  .editor-side .builder-canvas-wrap{height:540px;min-height:420px;padding:6px}
  .editor-side .builder-canvas-wrap.is-mobile{height:680px}
  .editor-side .builder-canvas-footer{flex-direction:column}
}


/* ZEANZA v4 — Dark Studio workspace theme */
:root{color-scheme:dark;--bg:#080e19;--panel:#111b2b;--ink:#e8eef8;--muted:#9aa9bf;--line:#26354a;--navy:#070d18;--navy2:#101a2b;--purple:#9587ff;--purple2:#7667ed;--green:#25c28b;--amber:#e0ad50;--red:#ef6877;--shadow:0 18px 45px rgba(0,0,0,.28)}
html,body{background:#080e19;color:#e8eef8}
.auth-screen{background:radial-gradient(ellipse at 20% 15%,#242052 0,transparent 38%),radial-gradient(ellipse at 85% 90%,#12344a 0,transparent 33%),#070c16}
.auth-card,.modal-card{background:#111b2b;color:#e8eef8;border:1px solid #28364c;box-shadow:0 25px 80px #0009}
.auth-card h1,.modal-card h2,.page-heading h1,.editor-title-wrap h1,.section-heading h2,.panel-heading h2,.panel h3{color:#f1f5fb}
.auth-card>.muted,.auth-switch,.muted{color:#9baac0}
input,select,textarea{background:#0b1422;border-color:#2a3a50;color:#e8eef8}
input::placeholder,textarea::placeholder{color:#74839a}
input:focus,select:focus,textarea:focus{border-color:#8d80f6;box-shadow:0 0 0 3px #8d80f622}
button{color:inherit}
.btn-primary{color:#fff;background:linear-gradient(135deg,#796cf0,#5547c5);box-shadow:0 7px 20px #5c50c633}
.btn-secondary{color:#c5bdff;background:#211f3d;border-color:#403b70}
.btn-quiet,.icon-button,.mini-action{background:#152135;border-color:#2a3a50;color:#c6d1e2}
.btn-quiet:hover,.btn-secondary:hover,.mini-action:hover{border-color:#7667ed;color:#fff;background:#1a2940}
.topbar{background:#0e1726;border-bottom-color:#26354a;color:#eef3fc}
.topbar-kicker,.workspace-label{color:#7f8fa8}
.topbar-user small,.topbar-user b{color:#cbd5e4}
.avatar{background:#29244e;color:#c3bbff}
.main-area,.view{background:#080e19}
.sidebar{background:linear-gradient(180deg,#0d1726,#070d18);border-right:1px solid #202d40}
.nav-link{color:#aab8cc}.nav-link.active{background:linear-gradient(90deg,#7164e855,#7164e811);color:#fff}
.panel,.stat-card,.site-card,.empty-state,.searchbox{background:#111b2b;border-color:#26364b;box-shadow:0 8px 22px #0002;color:#e8eef8}
.site-card-cover{background:linear-gradient(130deg,#172b43,#332b69)}
.site-card-info h3,.site-card-info,.stat-card strong,.stat-card span{color:#e8eef8}
.site-url,.stat-card>small,.site-card-info .muted{color:#94a3b8}
.stat-icon.purple{background:#29244d;color:#b6aaff}.stat-icon.green{background:#123b32;color:#5ee0af}.stat-icon.amber{background:#3e3020;color:#f2c16e}
.status-pill{background:#3c3020;color:#f0c16b}.status-pill.published{background:#12382f;color:#67d9ae}
.empty-illustration{background:#252347;color:#aa9dff}
.panel-number,.tag{background:#252348;color:#a99fff}
.subpanel,.block-card,.pixel-box{background:#0d1726;border-color:#2a3a50;color:#e5ecf7}
.subpanel-heading,.block-card-head{border-bottom-color:#293950;background:#111d2f;color:#e7edf8}
.block-actions button{background:#17253a;color:#b9c6d9;border-color:#31435b}
.block-actions button:hover{color:#fff;border-color:#8d80f6}
.block-empty{color:#94a3b8;border-color:#34445b;background:#0d1726}
.notice{background:#1b1d39;border-color:#383462;border-left-color:#8b7cf6}.notice b{color:#c1b8ff}.notice p{color:#a4b0c7}
.tabs{border-bottom-color:#2b3a50}.tab{color:#92a2ba}.tab.active{color:#b8afff;border-color:#887af2}
.file-upload-row{background:#0d1726;border-color:#35455b;color:#c9d4e4}
.upload-btn{background:#252247!important;color:#c3bbff!important;border-color:#4a447d!important}
.code-editor{background:#070d17;color:#d8e2f2;border-color:#2b3a50}
.pixel-box{border-color:#2b3a50}.pixel-box h3 small{color:#94a3b8}
.mode-option{border-color:#2b3a50;background:#0d1726}.mode-option:has(input:checked){background:#211f3c;border-color:#6b60bb}.mode-option span b{color:#edf2fa}.mode-option span small{color:#9eabc0}
.mode-warning{background:#2c2619;color:#e8bf73;border:1px solid #59482b}
.url-preview{background:#1a1b34;border-color:#37335f;color:#bdb5ff}
.builder-security-note{background:#2a2418;border-color:#58452a;color:#d9b875}
.builder-canvas-wrap{background:#070c15!important;border-color:#28374d!important}
.builder-canvas-stage iframe{background:#0b1220;box-shadow:0 4px 24px #0008}
.device-switch{background:#0a1321;border:1px solid #2a3a50}.device-btn{color:#94a3b8}.device-btn.active{background:#29264a;color:#e2ddff;box-shadow:0 2px 9px #0005}
.builder-hint,.builder-canvas-footer{color:#8f9eb4}
.subpanel.builder-selected,.block-card.selected{border-color:#8c7df4;box-shadow:0 0 0 4px #8173ed24}
.modal-backdrop{background:#030711d9}.preview-window{background:#0b1220;border:1px solid #2a3a50}.preview-toolbar{background:#111b2b;border-color:#2a3a50;color:#edf2fb}.preview-window iframe{background:#0b1220}
.toast{background:#17253a;color:#eef4ff}.toast.error{background:#8b2935;color:#fff}
.divider{background:#293950}
.editor-side .panel{background:#111b2b}
.panel label,.stack label,.form-grid label{color:#d8e1ee}
label small{color:#91a0b6}
.editor-actions .save-status{color:#9aa9bf}.editor-actions .save-status.saved{color:#4bd5a4}
.empty-editor-canvas,.empty-block-preview{border-color:#40516b;background:#101a2b;color:#9eabc2}
.empty-editor-canvas h2{color:#e7edf8}
.builder-item:hover{outline-color:#9b8cff!important}
.panel-heading-actions{display:flex;align-items:center;gap:9px}
@media(max-width:900px){.topbar{background:#0e1726}.sidebar{box-shadow:15px 0 35px #0008}}