@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Rajdhani:wght@500;600;700&family=Syncopate:wght@400;700&display=swap');

:root{
  --bg:#020611;
  --bg-2:#060913;
  --panel:rgba(5,12,26,.82);
  --panel-2:rgba(8,18,34,.72);
  --panel-soft:rgba(9,20,38,.52);
  --line:rgba(111,199,255,.22);
  --line-strong:rgba(111,199,255,.46);
  --line-soft:rgba(111,199,255,.11);
  --cyan:#6fc7ff;
  --cyan-2:#6fbaff;
  --gold:#ffd978;
  --amber:#d4a35a;
  --green:#41ff88;
  --red:#ff5a5a;
  --text:#edf5ff;
  --muted:rgba(237,245,255,.66);
  --muted-2:rgba(237,245,255,.42);
  --shadow:0 24px 70px rgba(0,0,0,.58);
  --radius:22px;
  --radius-sm:15px;
  --sidebar:264px;
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg)}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1000px 720px at 45% -12%,rgba(71,144,220,.18),transparent 60%),
    radial-gradient(760px 520px at 94% 10%,rgba(255,217,120,.08),transparent 60%),
    var(--bg);
  font-family:'Rajdhani',system-ui,sans-serif;
  font-size:16px;
  overflow:hidden;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.42}
a{color:var(--cyan)}
::selection{background:rgba(111,199,255,.3);color:#fff}

.qb-bg,.qb-veil{position:fixed;inset:0;pointer-events:none}
.qb-bg{
  z-index:0;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px),
    radial-gradient(600px 380px at 12% 48%,rgba(111,199,255,.08),transparent 70%);
  background-size:44px 44px,44px 44px,auto;
  opacity:.75;
}
.qb-veil{
  z-index:1;
  background:
    linear-gradient(180deg,rgba(2,6,17,.18),rgba(2,6,17,.72)),
    repeating-linear-gradient(180deg,transparent 0 5px,rgba(111,199,255,.022) 6px);
}
.builder-shell,.login-screen{position:relative;z-index:2}
.is-hidden{display:none!important}

.kicker{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;
  letter-spacing:.24em;
  line-height:1.45;
  text-transform:uppercase;
  color:rgba(111,199,255,.78);
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace!important}
.muted{color:var(--muted)}
h1,h2,h3,.brand-title{
  font-family:'Syncopate','Rajdhani',sans-serif;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:#fff;
  margin:.3rem 0 .55rem;
}
h1{font-size:clamp(22px,4vw,34px)}
h2{font-size:clamp(20px,3vw,28px)}
h3{font-size:clamp(16px,2vw,21px)}

.terran-panel{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    linear-gradient(180deg,rgba(10,22,42,.84),rgba(3,8,18,.80));
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.055);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  overflow:hidden;
}
.terran-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(111,199,255,.08),transparent 30%,transparent 72%,rgba(255,217,120,.05)),
    radial-gradient(480px 150px at 16% 0%,rgba(111,199,255,.11),transparent 62%);
}
.terran-panel>*{position:relative;z-index:1}

.btn,.icon-btn,.chip{
  border:1px solid rgba(111,199,255,.26);
  background:linear-gradient(180deg,rgba(8,20,38,.92),rgba(3,8,18,.94));
  color:#f8fbff;
  box-shadow:0 10px 26px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.055);
}
.btn{
  min-height:46px;
  border-radius:16px;
  padding:10px 17px;
  font-weight:700;
  letter-spacing:.035em;
}
.btn:hover,.icon-btn:hover{border-color:rgba(111,199,255,.5);box-shadow:0 0 22px rgba(111,199,255,.12),inset 0 1px 0 rgba(255,255,255,.07)}
.btn:active,.icon-btn:active{transform:translateY(1px)}
.btn.primary{
  border-color:rgba(111,199,255,.52);
  background:linear-gradient(180deg,rgba(33,111,172,.62),rgba(5,14,28,.96));
  box-shadow:0 0 24px rgba(111,199,255,.18),inset 0 1px 0 rgba(255,255,255,.08);
}
.btn.danger{border-color:rgba(255,90,90,.46);background:linear-gradient(180deg,rgba(114,23,32,.76),rgba(24,5,12,.94))}
.btn.compact{min-height:38px;padding:7px 12px;border-radius:14px}
.btn.full{width:100%;margin-top:18px}
.icon-btn{
  width:44px;height:44px;border-radius:999px;padding:0;display:inline-grid;place-items:center;font-size:18px;flex:0 0 auto;
}
.chip{
  border-radius:999px;
  min-height:31px;
  padding:6px 10px;
  display:inline-flex;align-items:center;gap:7px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
}
.ok-dot::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}

.login-screen{height:100%;display:grid;place-items:center;padding:20px}
.login-panel{width:min(460px,94vw);padding:28px}
.login-panel .version-chip{margin-top:16px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted-2)}
.status{min-height:20px;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:11px}
.status.bad{color:#ffaaaa}

.topbar{
  position:fixed;left:0;right:0;top:0;height:76px;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:10px 16px;
  background:linear-gradient(180deg,rgba(2,7,18,.96),rgba(2,7,18,.72));
  border-bottom:1px solid rgba(111,199,255,.16);
  box-shadow:0 18px 44px rgba(0,0,0,.42);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.topbar::after{content:'';position:absolute;left:14px;right:14px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(111,199,255,.44),rgba(255,217,120,.28),transparent)}
.brand-block,.top-actions{display:flex;align-items:center;gap:10px;min-width:0}
.brand-title{font-size:clamp(14px,2.2vw,20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 0 0}
#mobileNavToggle{display:none}

.workspace{position:fixed;inset:76px 0 0;display:grid;grid-template-columns:var(--sidebar) 1fr;z-index:2}
.sidebar{
  border-right:1px solid rgba(111,199,255,.14);
  background:linear-gradient(180deg,rgba(2,7,18,.86),rgba(2,6,17,.96));
  padding:16px 12px max(24px,env(safe-area-inset-bottom));overflow-y:auto;
  box-shadow:16px 0 42px rgba(0,0,0,.22);
}
.nav-item{
  width:100%;min-height:48px;margin:3px 0;border:1px solid transparent;border-radius:14px;padding:9px 12px;text-align:left;
  background:transparent;color:rgba(237,245,255,.7);font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:.055em;
}
.nav-item small{float:right;font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--muted-2)}
.nav-item:not(:disabled):hover{color:#fff;background:rgba(111,199,255,.055);border-color:rgba(111,199,255,.12)}
.nav-item.is-active{color:#fff;border-color:rgba(111,199,255,.32);background:linear-gradient(90deg,rgba(111,199,255,.16),rgba(111,199,255,.035));box-shadow:inset 3px 0 0 var(--cyan)}
.sidebar-separator{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:15px 4px}
.sidebar-label{padding:2px 12px 9px;color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.18em}

.main-stage{overflow:auto;padding:24px clamp(16px,3vw,34px) 60px}
.view{max-width:1500px;margin:0 auto}
.section-head,.editor-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:20px}
.editor-header{position:sticky;top:-24px;z-index:20;padding:14px 0;background:linear-gradient(180deg,var(--bg) 60%,transparent)}
.editor-header>div:nth-child(2){flex:1;min-width:0}
.editor-header h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.editor-actions{display:flex;align-items:center;gap:10px}

.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.app-card{padding:18px;min-height:210px;display:flex;flex-direction:column;gap:13px}
.app-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.app-card__name{font-family:'Syncopate',sans-serif;font-size:14px;line-height:1.35;color:#fff}
.app-card__url,.app-card__package{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app-card__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.meta-box{border:1px solid var(--line-soft);border-radius:12px;background:rgba(0,0,0,.18);padding:8px}
.meta-box span{display:block;font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--muted-2);text-transform:uppercase;letter-spacing:.1em}
.meta-box strong{display:block;margin-top:3px;font-size:12px;color:#fff}
.app-card__actions{display:flex;gap:8px;flex-wrap:wrap}
.empty-state{padding:28px;text-align:center;margin-top:18px}

.editor-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,370px);gap:18px;align-items:start}
.editor-form{min-width:0}
.editor-section{padding:20px}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field-grid .span-2{grid-column:1/-1}
.field-label{display:block;margin:3px 0 6px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.field{
  width:100%;min-height:45px;border-radius:14px;border:1px solid rgba(111,199,255,.18);background:rgba(1,5,14,.64);color:var(--text);padding:10px 12px;outline:none;
  box-shadow:inset 0 0 22px rgba(0,0,0,.28);
}
textarea.field{resize:vertical;line-height:1.45}
.field:focus{border-color:rgba(111,199,255,.6);box-shadow:0 0 0 4px rgba(111,199,255,.1),inset 0 0 22px rgba(0,0,0,.28)}
.color-field{padding:4px;height:46px}
.toggle{min-height:54px;border:1px solid var(--line-soft);border-radius:14px;background:rgba(0,0,0,.16);padding:13px;display:flex;align-items:center;gap:10px}
.toggle input,.plugin-card input{accent-color:var(--cyan);width:18px;height:18px}
.notice{border:1px dashed rgba(255,217,120,.24);border-radius:14px;padding:12px 14px;background:rgba(212,163,90,.055);color:rgba(255,235,185,.8);font-size:13px;line-height:1.45}
.plugin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.plugin-card{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:3px;align-items:center;border:1px solid var(--line-soft);border-radius:16px;background:rgba(0,0,0,.17);padding:13px}
.plugin-card input{grid-row:1/3}
.plugin-card strong{color:#fff}.plugin-card span{font-size:12px;color:var(--muted)}
.build-command-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.build-list{display:grid;gap:10px;margin-top:16px}
.build-row{border:1px solid var(--line-soft);border-radius:15px;background:rgba(0,0,0,.2);padding:12px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.build-id{font-family:'JetBrains Mono',monospace;color:var(--cyan)}
.build-copy strong{display:block;color:#fff}.build-copy span{font-size:12px;color:var(--muted)}
.build-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.build-actions a{font-size:10px;text-decoration:none}
.build-row.is-failed{border-color:rgba(255,90,90,.35)}
.build-row.is-complete{border-color:rgba(65,255,136,.23)}

.simulator-panel{position:sticky;top:8px;padding:15px}
.sim-head,.sim-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sim-head{margin-bottom:12px}.sim-meta{margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--muted)}
.device-frame{position:relative;aspect-ratio:9/18.5;border:1px solid rgba(111,199,255,.34);border-radius:34px;background:#020611;overflow:hidden;box-shadow:0 0 0 7px rgba(0,0,0,.55),0 30px 70px rgba(0,0,0,.55)}
.device-status{height:30px;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.14em;color:var(--cyan);background:rgba(2,6,17,.92);border-bottom:1px solid var(--line-soft)}
#simulatorFrame{display:block;width:100%;height:calc(100% - 30px);border:0;background:#020611}
.sim-fallback{position:absolute;inset:30px 0 0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted);background:radial-gradient(circle at 50% 30%,rgba(111,199,255,.1),transparent 55%),#020611}

.terran-dialog{border:0;background:transparent;padding:0;color:inherit;max-width:none;max-height:none}
.terran-dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.dialog-card{width:min(520px,calc(100vw - 30px));padding:22px;display:grid;gap:12px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}

@media(max-width:1050px){
  .editor-layout{grid-template-columns:1fr}.simulator-panel{position:relative;top:auto;max-width:390px;margin:0 auto;width:100%}
}
@media(max-width:820px){
  :root{--sidebar:248px}
  #mobileNavToggle{display:grid}
  .top-actions .chip:first-child{display:none}
  .workspace{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:60;left:0;top:76px;bottom:0;width:min(var(--sidebar),84vw);transform:translateX(-105%);transition:transform .25s ease}
  .sidebar.is-open{transform:translateX(0)}
  .main-stage{padding:18px 14px 70px}
  .editor-header{top:-18px}
}
@media(max-width:600px){
  .brand-block .kicker{display:none}.brand-title{font-size:13px}.top-actions .chip{display:none}
  .section-head{align-items:flex-start;flex-direction:column}
  .field-grid,.plugin-grid{grid-template-columns:1fr}.field-grid .span-2{grid-column:auto}
  .editor-header{gap:9px}.editor-actions #saveState{display:none}.editor-actions .btn{padding:8px 10px;min-height:40px}
  .apps-grid{grid-template-columns:1fr}.app-card__meta{grid-template-columns:repeat(2,1fr)}
  .build-row{grid-template-columns:1fr}.build-actions{justify-content:flex-start}
}