@font-face{font-family:Forge;src:url('/assets/Inter.woff2') format('woff2');font-weight:400 850;font-display:swap}
:root{--bg:#101212;--side:#151817;--panel:#191d1b;--line:#2b302e;--text:#f1f5f2;--muted:#a3ada8;--mint:#b8fa3e;--dark:#172322;--curve:16px;color-scheme:dark;font-family:Forge,Inter,system-ui,sans-serif;font-size:14px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);min-height:100dvh;display:grid;grid-template-columns:218px minmax(0,1fr)}
a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}h1,h2,h3,p{margin:0}svg{vertical-align:middle;width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.sidebar{height:100dvh;position:sticky;top:0;background:var(--side);border-right:1px solid var(--line);padding:25px 16px 16px;display:flex;flex-direction:column;gap:35px}
.brand{display:flex;gap:11px;align-items:center;margin:0 6px;font-size:17px;font-weight:800;letter-spacing:.018em}.brand small,.sidebar-foot small{display:block;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:0;margin-top:3px}
.logo{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:var(--mint);color:#10241a;font-size:23px}.logo svg{width:22px;height:22px;stroke-width:2}
.sidebar nav{display:grid;gap:5px}.sidebar nav a{display:flex;align-items:center;gap:10px;color:var(--muted);padding:11px 12px;border-radius:10px;font-weight:600}.sidebar nav a:hover{background:#222824;color:var(--text)}.sidebar nav a[aria-current=page]{background:#25372c;color:var(--mint)}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding:15px 4px 2px;display:flex;align-items:center;gap:9px;min-width:0}.sidebar-foot img{width:34px;height:34px;border-radius:10px;object-fit:cover}.sidebar-foot div{overflow:hidden}.sidebar-foot strong,.sidebar-foot small{white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}
.shell{width:min(100%,1240px);margin:0 auto;padding:27px clamp(22px,4.25vw,60px) 58px;min-width:0}.topbar,.section-head,.hero-actions,.inline,.project-actions,.page-tabs,.editor-top,.export-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.topbar{justify-content:space-between;min-height:42px;margin-bottom:20px}.topbar .where{display:flex;align-items:center;gap:8px;color:var(--muted);font-weight:620}.topbar img{width:29px;height:29px;border-radius:8px}.topbar .route{color:var(--text)}
.status{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}.status::before{content:'';width:7px;height:7px;background:var(--mint);border-radius:50%}.status.off::before{background:#bf9f63}
.section-banner{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);overflow:hidden;border:1px solid var(--line);border-radius:17px;background:var(--panel);align-items:center}
.section-art{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:1200 / 490}
.section-details{padding:15px clamp(13px,2vw,26px)}
.section-details h1{font-size:clamp(22px,2.6vw,35px);letter-spacing:-.055em;line-height:1.05}
.section-details p{margin:6px 0 0;line-height:1.45}
.section-details .hero-actions{margin-top:12px}
.section-details .btn{min-height:37px;padding:7px 10px;font-size:12px}
@keyframes glyph-pop{50%{transform:translateY(-2px)}}
.tilebtn:hover .glyph{animation:glyph-pop .35s ease}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid #39423d;background:#232a26;color:var(--text);border-radius:11px;padding:10px 13px;min-height:43px;font-weight:690;white-space:normal;text-align:center}.btn:hover:not(:disabled){background:#2d3931}.btn.primary{background:var(--mint);color:var(--dark);border-color:var(--mint)}.btn.primary:hover:not(:disabled){background:#d3ff7a}.btn.ghost{background:transparent}.btn.warn{color:#ffaaaa}.btn.small{min-height:34px;padding:6px 9px;font-size:12px}.btn svg{width:17px;height:17px}
.section{margin-top:24px}.section-head{justify-content:space-between;margin-bottom:13px}.section-head h2{font-size:22px;letter-spacing:-.04em}.section-head .muted{font-size:13px}.muted{color:var(--muted)}.link{border:0;background:none;color:var(--mint);padding:0;font-weight:650}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.tilebtn{display:flex;align-items:center;text-align:left;min-width:0;gap:11px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);width:100%}.tilebtn:hover{border-color:#5d7968;background:#222a25}.tilebtn strong{font-size:13px;display:block;overflow-wrap:anywhere}.tilebtn small{display:block;color:var(--muted);font-size:11px;margin-top:3px;overflow-wrap:anywhere}.glyph{display:grid;place-items:center;height:43px;width:43px;flex:none;border-radius:12px;color:var(--tile);font-size:26px;font-weight:700;background:color-mix(in srgb,var(--tile) 14%,#141817)}.tilebtn .arrow{margin-left:auto;color:var(--muted)}
.card,.empty,.setting,.project{border:1px solid var(--line);border-radius:var(--curve);background:var(--panel);padding:16px}.empty{min-height:80px;display:flex;align-items:center;gap:13px}.empty strong{display:block}.empty small{display:block;margin-top:4px}.grid{display:grid;gap:10px}.project{display:flex;gap:11px;align-items:center;justify-content:space-between}.project h3{font-size:16px;overflow-wrap:anywhere}.project small{display:block;margin-top:4px}.project>div:first-child{min-width:0}
.profile-grid{display:grid;gap:10px;grid-template-columns:1fr 1fr}.profile-info{display:flex;gap:12px;align-items:center}.profile-info img{width:52px;height:52px;border-radius:13px}.profile-info h2{font-size:20px}.setting{display:flex;align-items:center;justify-content:space-between;gap:16px}.setting h3{font-size:15px}.setting p{margin-top:4px;line-height:1.4}.setting input[type=checkbox]{appearance:none;width:42px;height:25px;background:#39443d;border-radius:18px;flex:none;cursor:pointer;position:relative;margin:0}.setting input:checked{background:#4f976d}.setting input[type=checkbox]:before{content:'';position:absolute;border-radius:50%;width:17px;height:17px;top:4px;left:4px;background:white;transition:transform .15s}.setting input:checked:before{transform:translateX(17px)}
.editor-top{justify-content:space-between;margin-bottom:12px}.editor-top h1{font-size:30px;letter-spacing:-.055em;overflow-wrap:anywhere}.editor-top>div:first-child{min-width:0}.editor-grid{display:grid;grid-template-columns:minmax(295px,1fr) minmax(310px,.98fr);gap:13px;align-items:start}.editor-panel{display:grid;gap:11px;min-width:0}.editor-panel h2,.preview-head h2{font-size:17px;letter-spacing:-.02em}.fieldgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px}.field,.field input,.field textarea,.field select{display:block;width:100%;min-width:0}.field{color:var(--muted);font-size:12px;font-weight:610}.field input,.field textarea,.field select{margin-top:5px;border:1px solid #3a423d;border-radius:8px;background:#121714;color:var(--text);padding:8px;min-height:35px}.field input[type=color]{padding:3px;cursor:pointer}.field textarea{resize:vertical;min-height:64px}.field input[type=file]{max-width:100%}.space{margin-top:9px}.block{border:1px solid var(--line);border-radius:11px;padding:10px}.block-header{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;margin-bottom:8px}.preview-card{position:sticky;top:12px;padding:10px}.preview-head{display:flex;align-items:center;justify-content:space-between;gap:7px;padding:2px 3px 9px}.frame-holder{display:grid;place-items:start center;background:#111512;border-radius:11px;overflow:hidden}
iframe{display:block;width:100%;height:550px;border:0;background:#101513}.frame-holder.phone iframe{max-width:365px;border-inline:1px solid #37443c}.error{color:#ffd3d3;background:#401e23;border:1px solid #71363e;border-radius:10px;padding:10px 12px;line-height:1.45;overflow-wrap:anywhere}.summary{line-height:1.55}.export-row{align-items:stretch}.page-tabs button[aria-pressed=true]{color:var(--mint);border-color:#61a27d}
dialog{width:min(calc(100% - 24px),485px);max-height:90dvh;overflow:auto;background:var(--panel);border:1px solid #465249;border-radius:18px;color:var(--text);padding:20px}dialog::backdrop{background:#040705b5}.modal-head{display:flex;justify-content:space-between;gap:8px;align-items:start;margin-bottom:15px}.modal-head h2{font-size:23px;letter-spacing:-.04em}dialog p{line-height:1.5}dialog form{display:grid;gap:12px}dialog textarea{min-height:112px!important}dialog .grid{margin-top:12px}.toast{position:fixed;z-index:9;bottom:18px;right:18px;padding:12px 15px;background:#254033;border:1px solid #49725a;color:#f1fcf6;border-radius:11px;max-width:min(440px,calc(100% - 36px));overflow-wrap:anywhere}.toast.bad{background:#43262b;border-color:#7b444e}
@media(max-width:1050px){.shell{padding-inline:22px}.sidebar{padding-inline:12px}body{grid-template-columns:185px minmax(0,1fr)}}
@media(max-width:850px){body{display:block}.sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;z-index:5;height:auto;border:0;border-top:1px solid var(--line);padding:4px 5px calc(4px + env(safe-area-inset-bottom));gap:0}.sidebar .brand,.sidebar-foot{display:none}.sidebar nav{display:flex;justify-content:space-around;gap:1px}.sidebar nav a{display:flex;flex:1;flex-direction:column;justify-content:center;gap:4px;font-size:10px;padding:6px 1px;min-height:52px;text-align:center}.sidebar nav svg{width:19px;height:19px}.shell{padding:11px 17px 90px}.topbar{margin-bottom:11px}.toast{bottom:75px}.editor-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:555px){.shell{padding-inline:13px}.topbar{margin-bottom:7px}.section-banner{display:block;border-radius:13px}.section-details{padding:11px 11px 12px}.section-details p{font-size:12px}.section-details .hero-actions{margin-top:9px}.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.tilebtn{padding:8px;gap:7px}.tilebtn .arrow{display:none}.glyph{width:35px;height:35px;border-radius:9px;font-size:21px}.section{margin-top:23px}.section-head h2{font-size:19px}.editor-grid,.profile-grid{grid-template-columns:minmax(0,1fr)}.preview-card{position:static;grid-row:1}.preview-head h2{font-size:14px}iframe{height:317px}.editor-top h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}html.motion-off *,html.motion-off *:before,html.motion-off *:after{animation:none!important;transition:none!important}

/* APPFORGE studio */
:root{--bg:#101119;--side:#14151e;--panel:#1a1d2a;--line:#2b3042;--text:#f6f7fb;--muted:#abb2c9;--mint:#c4fa57;--dark:#18210c}
body{background:radial-gradient(ellipse at 78% -5%,#252b50 0%,transparent 45%),var(--bg)}
.sidebar nav a:hover{background:#22263b}
.sidebar nav a[aria-current=page]{background:#242b4b;color:#dfebff}
.sidebar .logo{background:#b7c6ff;color:#162751}
.topbar .where svg{color:#777f9e;width:14px}
.section-banner:not(.studio-hero){background:#1a1e30}
.studio-hero{min-height:306px;display:grid;align-items:center;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);position:relative;overflow:hidden;isolation:isolate;background:#2040f1;border:1px solid #6679ff;border-radius:23px}
.studio-hero .section-art{grid-column:2;grid-row:1;height:100%;max-height:337px;object-fit:contain;object-position:bottom right;align-self:end}
.studio-hero .section-details{grid-column:1;grid-row:1;padding:26px min(4vw,44px);position:relative}
.studio-hero h1{font-size:clamp(34px,4.5vw,60px);font-weight:830;letter-spacing:-.064em;line-height:.99;max-width:11ch}
.studio-hero p{color:#e4eaff;font-weight:500;max-width:32ch;margin-top:13px;font-size:14px}
.studio-hero .hero-actions{margin-top:19px}
.studio-hero .btn.ghost{background:#182caa99;border-color:#8ca3ff;color:#fff}
.studio-hero .btn.ghost:hover{background:#13278e}
.tiles{gap:12px}
.tilebtn{min-height:86px;border-radius:16px;background:#1b2031;border-color:#333c56}
.tilebtn:hover{background:#252c46;border-color:#7887bb}
.tilebtn .glyph{width:48px;height:48px;background:color-mix(in srgb,var(--tile) 20%,#1b2031)}
.tilebtn strong{font-size:14px}
.tilebtn small{font-size:12px}
.btn:not(.primary){background:#272d43;border-color:#414a67}
.btn.ghost{background:transparent}
.btn:not(.primary):hover:not(:disabled){background:#343c58}
.btn.primary:hover:not(:disabled){background:#d7ff8e}
.field input,.field textarea,.field select{background:#141827;border-color:#414963}
.frame-holder{background:#111421}
.page-tabs button[aria-pressed=true]{color:#dce8ff;border-color:#7588d9;background:#303960}
dialog{background:#1b2031;border-color:#444e73}
@media(max-width:555px){
 .studio-hero{min-height:218px;grid-template-columns:minmax(0,1.37fr) minmax(0,1fr);border-radius:16px}
 .studio-hero .section-details{padding:15px 0 15px 14px}
 .studio-hero h1{font-size:clamp(26px,7.5vw,39px)}
 .studio-hero p{font-size:12px;margin-top:7px}
 .studio-hero .hero-actions{margin-top:11px;gap:5px}
 .studio-hero .section-art{width:125%;max-width:none;margin-left:-25%;position:relative;z-index:-1;object-fit:contain;max-height:195px}
 .studio-hero .btn{font-size:11px;min-height:35px;padding:7px}
 .studio-hero .btn svg{width:13px}
 .tiles{gap:8px}
 .tilebtn{min-height:63px;padding:7px;gap:7px}
 .tilebtn .glyph{width:34px;height:34px;font-size:21px}
 .tilebtn strong{font-size:11px}
 .tilebtn small{font-size:10px}
 .section{margin-top:18px}
}