@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#dae5f4;background:#0a101b;font-size:14px}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#0b111d}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #8bafff;outline-offset:2px}.app{min-height:100vh;display:grid;grid-template-columns:239px minmax(0,1fr)}.sidebar{background:#101827;border-right:1px solid #243047;padding:29px 17px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.wordmark{display:flex;gap:12px;align-items:center;padding:0 8px;color:#fff;letter-spacing:.7px;font-family:Manrope,sans-serif;font-weight:800;font-size:17px}.wordmark strong{color:#83a7fa}.wordmark small{display:block;font-size:9px;color:#8092ac;letter-spacing:2px;margin-top:3px;font-weight:700}.mark{height:41px;width:41px;display:grid;place-items:center;font-size:27px;background:linear-gradient(145deg,#4a7ff2,#7551c8);border-radius:13px;color:#fff;box-shadow:0 8px 20px #355bd844}.side-caption{font-size:10px;font-weight:800;color:#6f829f;letter-spacing:2px;margin:45px 13px 16px}.nav{display:flex;gap:14px;align-items:center;text-align:left;background:transparent;border:1px solid transparent;color:#a2b1c8;width:100%;padding:13px 14px;border-radius:11px;margin-bottom:6px;font-weight:700}.nav span{font-size:19px;width:22px;text-align:center}.nav:hover{background:#1a2639;color:#fff}.nav.active{background:#233d70;border-color:#365c9a;color:#dfeaff;box-shadow:inset 3px 0 0 #7facff}.side-mini{border:1px solid #2c3a53;background:#171f30;border-radius:15px;padding:15px;line-height:1.6}.side-mini b{font-size:12px}.side-mini p{color:#8799b5;font-size:11px;margin:7px 0 0}.side-bottom{margin-top:auto;padding:17px 9px 0;border-top:1px solid #26324b;display:flex;gap:9px;align-items:center;color:#9bacbf;font-size:11px}.online-dot{width:8px;height:8px;border-radius:50%;background:#49d8a5;box-shadow:0 0 11px #49d8a555}.topbar{min-height:71px;border-bottom:1px solid #222e43;background:#0e1624;display:flex;align-items:center;justify-content:space-between;padding:0 35px}.crumb{font-size:12px;color:#758ba7}.crumb span{margin:0 8px;color:#486079}.crumb strong{color:#dbe8f8}.right-actions{display:flex;gap:12px;align-items:center}.pill{background:#152b43;border:1px solid #335476;border-radius:40px;padding:7px 10px;font-size:10px;letter-spacing:1px;color:#9fc8fc;font-weight:800}.outline,.user{background:#1a2639;color:#dce7f4;border:1px solid #354864;padding:9px 13px;border-radius:10px;font-size:12px;font-weight:700}.user{display:flex;align-items:center;gap:9px}.user span{background:#4a65c4;color:#fff;padding:7px;border-radius:8px;font-size:10px}.content-wrap{max-width:1550px;margin:0 auto;padding:35px 35px 14px}.intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.eyebrow{display:block;color:#77a8ff;letter-spacing:2px;font-size:10px;font-weight:800;margin-bottom:13px}.intro h1{font-family:Manrope,sans-serif;font-weight:800;font-size:clamp(23px,2.4vw,34px);letter-spacing:-1.4px;line-height:1.25;margin:0 0 9px;color:#f1f6ff}.dot{color:#719aff}.intro p{color:#94a5c2;margin:0;font-size:13px}.intro-icon{height:54px;width:54px;border-radius:16px;background:#253764;color:#aabfff;display:grid;place-items:center;font-size:30px;border:1px solid #4261a1}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:23px}.stat{background:#151f30;border:1px solid #2b3a51;border-radius:15px;padding:17px;display:flex;align-items:center;gap:14px}.stat-icon{width:43px;height:43px;flex-shrink:0;display:grid;place-items:center;font-size:21px;border-radius:12px}.stat-icon.blue{background:#203c6a;color:#8fbcff}.stat-icon.violet{background:#3c2d64;color:#c29cff}.stat-icon.amber{background:#493a25;color:#f2bc72}.stat-icon.green{background:#1f453d;color:#83e5bc}.stat small{display:block;color:#8193ae;font-size:10px;font-weight:800;letter-spacing:1px;margin-bottom:4px}.stat strong{font-size:19px;color:#f1f4fb;white-space:nowrap}.stat strong em{font-style:normal;color:#91a2bd;font-size:12px;font-weight:500}.workspace{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(310px,.87fr);gap:23px;align-items:start}.editor,.preview-col{min-width:0}.panel{background:#151f30;border:1px solid #2b3b52;border-radius:18px;padding:26px;margin-bottom:18px;box-shadow:0 15px 35px #00000015}.panel-heading{display:flex;justify-content:space-between;gap:12px;align-items:start;margin-bottom:25px}.panel h2{font-family:Manrope,sans-serif;color:#f0f5fd;font-size:17px;margin:0 0 7px;letter-spacing:-.3px}.panel-heading p{color:#92a4bf;font-size:12px;line-height:1.6;margin:0}.mini-chip{white-space:nowrap;padding:7px 11px;border-radius:8px;background:#253959;color:#a6c8ff;font-size:10px;font-weight:800;letter-spacing:.6px;border:1px solid #3c5375}.mini-chip.purple{background:#302c51;color:#c2b0fa;border-color:#524a83}.mini-chip.teal{background:#254640;color:#93e6d4;border-color:#41675d}.mini-chip.green{background:#244738;color:#92e6b5;border-color:#3d7658}.fields{display:grid;gap:17px}.fields.two{grid-template-columns:repeat(2,minmax(0,1fr))}.field{display:flex;flex-direction:column;gap:8px;min-width:0}.field.full{grid-column:1/-1}.field label,.label-line label{font-size:12px;font-weight:800;color:#cddcf1}.required{color:#ff8fa9}.field input,.field textarea,.field select,.login-card input{background:#0e1726;border:1px solid #344760;border-radius:10px;padding:12px 14px;color:#ecf3fe;width:100%;outline:none;transition:border-color .2s}.field input:focus,.field textarea:focus,.field select:focus,.login-card input:focus{border-color:#789bf6}.field textarea{resize:vertical;min-height:70px;line-height:1.7}.field small,.help{font-size:11px;color:#8192ad;line-height:1.65}.field small{align-self:flex-end}.label-line{display:flex;justify-content:space-between}.count{font-size:11px;color:#8093ad}.field textarea.article-editor{min-height:290px}.setting{border-top:1px solid #2b394e;margin-top:22px;padding-top:21px;display:flex;justify-content:space-between;align-items:center;gap:15px}.setting b,.setting small{display:block}.setting b{font-size:12px;color:#dce6f6}.setting small{margin-top:5px;color:#879ab5;font-size:11px}.switch{position:relative;display:block;width:45px;height:26px;flex-shrink:0}.switch input{opacity:0;width:0;height:0}.switch span{position:absolute;inset:0;background:#37465e;border-radius:20px;cursor:pointer;transition:.2s}.switch span:before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:white;transition:.2s}.switch input:checked+span{background:#598bf6}.switch input:checked+span:before{transform:translateX(19px)}.primary,.secondary,.ghost{border-radius:10px;padding:11px 17px;font-size:12px;font-weight:800;display:inline-flex;gap:12px;align-items:center;justify-content:center;line-height:1.3}.primary{background:linear-gradient(110deg,#648ff6,#7666df);color:#fff;border:1px solid #879ff6;box-shadow:0 7px 20px #4567e12b}.primary:hover{filter:brightness(1.12)}.secondary{background:#223147;color:#d8e7fc;border:1px solid #405571}.secondary:hover{background:#2e425e}.ghost{background:transparent;border:1px solid #33435a;color:#b6c6de}.tight{padding:22px}.tight .panel-heading{margin-bottom:17px}.inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.section{display:none}.section.active{display:block}.preview-col{position:sticky;top:20px}.preview-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px}.preview-head strong{display:block;font-size:14px;color:#eaf2ff}.preview-head small{display:block;font-size:11px;color:#8194b0;margin-top:5px}.view-switch{display:flex;background:#1a273a;padding:4px;border:1px solid #344359;border-radius:9px}.view-switch button{border:0;background:transparent;color:#96aac4;border-radius:6px;padding:6px 12px;font-size:19px}.view-switch button.selected{background:#395b98;color:white}.preview-window{background:#11192a;border:1px solid #384864;border-radius:15px;overflow:hidden;box-shadow:0 20px 55px #0004}.browser-top{height:38px;background:#1d293c;border-bottom:1px solid #35445b;display:flex;align-items:center;gap:10px;padding:0 12px;color:#8fa3c3;font-size:10px}.traffic{display:flex;gap:4px}.traffic i{width:8px;height:8px;border-radius:50%;background:#fd7775}.traffic i:nth-child(2){background:#eebd60}.traffic i:nth-child(3){background:#54cfa2}.browser-url{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-inner{height:520px;overflow:auto;padding:0;background:#111b30}.preview-inner.mobile{max-width:320px;margin:0 auto;border-left:1px solid #30445f;border-right:1px solid #30445f}.preview-foot{display:flex;justify-content:space-between;align-items:center;margin-top:13px;font-size:11px;color:#8398b2}.subtle-link,.text-button{border:0;background:none;color:#8eb3ff;font-weight:700}.tips{padding:19px 20px;background:linear-gradient(115deg,#20294a,#22233f);border-radius:14px;border:1px solid #454477;margin-top:25px}.tips b{font-size:12px;color:#d9caff}.tips p{font-size:11px;color:#acacd3;line-height:1.7;margin:7px 0 0}.upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.upload{min-height:166px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:9px;border:1px dashed #526785;border-radius:13px;background:#111b2a;cursor:pointer;text-align:center;padding:14px}.upload:hover{border-color:#85a9fc}.upload-icon{font-size:27px;color:#94b1f1}.upload b{font-size:12px}.upload small{font-size:10px;color:#8497b2}.upload span:last-child{color:#95b9ff;font-size:10px}.upload input,.file-button input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}.upload-row{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}.file-button{cursor:pointer}.media-result{background:#0e192a;border:1px solid #33465f;border-radius:12px;min-height:180px;display:grid;place-items:center;margin-top:22px;overflow:hidden}.media-result img{max-width:100%;max-height:350px;object-fit:contain}.media-placeholder{display:flex;flex-direction:column;gap:10px;align-items:center;font-size:30px;color:#5e789d}.media-placeholder small{font-size:11px}.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.template{display:flex;flex-direction:column;align-items:start;justify-content:space-between;gap:14px;text-align:left;padding:15px 12px;border:1px solid #3a4b66;background:#172335;border-radius:12px;color:#e2ebfc;min-height:102px}.template.active{border:1px solid #8daaf9;background:#22385f;box-shadow:0 0 0 1px #718dee38}.color-swatch{height:16px;width:50px;border-radius:5px;display:block}.template b{font-size:11px;letter-spacing:.3px;word-break:break-word}.template small{font-size:9px;color:#93a7c5}.template-import{border-top:1px solid #34435b;margin-top:23px;padding-top:21px;display:flex;align-items:center;gap:20px;justify-content:space-between}.template-import b{font-size:12px}.template-import p{color:#96a8c1;font-size:11px;line-height:1.8;margin:8px 0 0}.template-import code{background:#273651;padding:2px 4px;border-radius:4px;color:#c7dafa}.export-card{background:#10283b;border:1px solid #355974;padding:20px;border-radius:12px;display:flex;align-items:center;gap:15px}.export-icon{font-size:28px;color:#6fd6c0}.export-card b{font-size:13px}.export-card p{font-size:11px;color:#93abc5;margin:6px 0 0}.status-light{margin-left:auto;font-weight:800;font-size:10px;color:#91e5be}.checklist{border-top:1px solid #34445b;margin-top:25px;padding-top:14px}.checklist h3{font-size:13px}.checklist div>p{color:#a3b4ca;font-size:11px}.check-pass{color:#92e9bf}.check-warn{color:#e8b57e}footer{color:#6e829d;font-size:10px;border-top:1px solid #24324a;padding:20px 0 30px;margin-top:20px;display:flex;justify-content:space-between;gap:15px}.modal{position:fixed;inset:0;z-index:20;background:#070e1ae8;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(7px)}.modal.hidden{display:none}.login-card{background:linear-gradient(140deg,#19263d,#101a2b);border:1px solid #486088;border-radius:21px;box-shadow:0 30px 70px #0008;width:100%;max-width:410px;padding:35px}.login-mark{height:55px;width:55px;display:grid;place-items:center;font-size:36px;background:linear-gradient(135deg,#5d7fff,#8065e0);border-radius:15px;margin-bottom:21px}.login-card h2{font-size:24px;margin:0 0 8px;color:#f1f6ff}.login-card>p{font-size:12px;color:#9fb0cc;line-height:1.6;margin:0 0 24px}.login-card label{display:flex;flex-direction:column;gap:8px;color:#c8d9f0;font-weight:700;font-size:12px;margin-bottom:15px}.wide{width:100%;margin-top:7px}.text-button{display:block;margin:17px auto 0;font-size:12px}.login-card>small{display:block;text-align:center;color:#7289a7;font-size:10px;line-height:1.6;margin-top:18px}.login-error{font-size:12px;color:#ff9ea8;min-height:13px;margin-top:10px;text-align:center}.toast{position:fixed;bottom:25px;right:25px;background:#243f5d;color:#f4f8ff;padding:13px 19px;border:1px solid #547ba8;border-radius:11px;z-index:25;box-shadow:0 12px 35px #0006;font-size:12px;display:none}.toast.show{display:block}@media(max-width:1250px){.app{grid-template-columns:205px minmax(0,1fr)}.workspace{grid-template-columns:minmax(0,1fr)}.preview-col{position:static}.preview-inner{height:430px}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:750px){.app{display:block}.sidebar{position:static;height:auto;padding:15px;display:block}.wordmark{margin-bottom:12px}.side-caption,.side-mini,.side-bottom{display:none}.sidebar nav{display:flex;overflow-x:auto;gap:5px}.nav{flex:0 0 auto;width:auto;padding:9px 11px;font-size:11px;margin:0}.nav span{display:none}.topbar{padding:10px 16px}.right-actions{gap:6px}.outline{display:none}.content-wrap{padding:20px 13px}.intro-icon{display:none}.stats{gap:9px}.stat{padding:12px}.stat-icon{width:32px;height:32px}.stat strong{font-size:15px}.panel{padding:17px}.template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.fields.two{grid-template-columns:1fr}.field.full{grid-column:auto}.template-import{flex-direction:column;align-items:start}.mini-chip{display:none}footer span{display:none}}