:root {
  color-scheme: dark;
  --bg: #050a13;
  --surface: rgba(12, 22, 39, 0.82);
  --surface-strong: #101c30;
  --line: rgba(165, 184, 225, 0.14);
  --text: #f5f7ff;
  --muted: #9aa9c6;
  --purple: #9b72ff;
  --purple-2: #6f49ff;
  --cyan: #5be7ff;
  --green: #69e6a6;
  --amber: #ffd36b;
  --red: #ff6f8b;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 20% -10%, rgba(111, 73, 255, 0.22), transparent 35%),
    radial-gradient(circle at 100% 25%, rgba(91, 231, 255, 0.1), transparent 30%),
    var(--bg);
  color: var(--text);
}
button, input, textarea { font: inherit; }
button { color: inherit; }
button:disabled { opacity: .52; cursor: not-allowed; }
.hidden { display: none !important; }
.ambient { position: fixed; border-radius: 50%; filter: blur(90px); opacity: .18; pointer-events: none; }
.ambient-a { width: 260px; height: 260px; background: var(--purple); left: -140px; top: 24%; }
.ambient-b { width: 210px; height: 210px; background: var(--cyan); right: -130px; bottom: 16%; }
.glass { background: linear-gradient(145deg, rgba(19, 31, 53, .88), rgba(8, 16, 29, .72)); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }

.login-view { min-height: 100vh; display: grid; place-items: center; padding: calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom)); }
.login-card { width: min(100%, 420px); border-radius: 30px; padding: 30px 24px 26px; text-align: center; }
.login-card h1 { font-size: 36px; margin: 3px 0 10px; letter-spacing: -.04em; }
.brand-mark { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 23px; display: grid; place-items: center; position: relative; background: linear-gradient(145deg, #142542, #091222); border: 1px solid rgba(164, 134, 255, .45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 14px 35px rgba(111,73,255,.28); }
.brand-mark::before { content: ""; position: absolute; inset: 10px; border: 2px solid var(--purple); border-right-color: transparent; border-radius: 13px; transform: rotate(45deg); }
.brand-mark span { position: relative; z-index: 1; font-size: 17px; font-weight: 850; letter-spacing: -.05em; }
.brand-mark.small { width: 46px; height: 46px; border-radius: 15px; margin: 0; }
.brand-mark.small::before { inset: 7px; border-radius: 9px; }
.brand-mark.small span { font-size: 12px; }
.eyebrow { margin: 0; color: #b6c1d8; text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 800; }
.muted { color: var(--muted); line-height: 1.5; }
.error-text { color: var(--red); min-height: 20px; font-size: 13px; margin-bottom: 0; }

.app-shell { min-height: 100vh; padding-bottom: calc(92px + var(--safe-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: calc(15px + var(--safe-top)) 18px 12px; position: sticky; top: 0; z-index: 20; background: linear-gradient(to bottom, rgba(5,10,19,.96), rgba(5,10,19,.72), transparent); backdrop-filter: blur(14px); }
.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-row h1 { margin: 1px 0 0; font-size: 20px; letter-spacing: -.03em; }
.icon-button { width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--line); background: rgba(15, 27, 47, .8); display: grid; place-items: center; font-size: 21px; }
main { padding: 4px 16px 30px; max-width: 950px; margin: 0 auto; }
.hero { border-radius: 28px; padding: 24px; overflow: hidden; position: relative; }
.hero::after { content: ""; position: absolute; width: 170px; height: 170px; right: -75px; top: -80px; border: 22px solid rgba(155,114,255,.12); border-radius: 48px; transform: rotate(35deg); }
.hero h2 { font-size: clamp(29px, 8vw, 46px); line-height: .98; margin: 9px 0 13px; letter-spacing: -.055em; max-width: 620px; }
.hero p { max-width: 650px; }
.hero-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; font-size: 12px; color: #c7d2e8; border: 1px solid var(--line); background: rgba(5, 12, 23, .55); border-radius: 999px; padding: 8px 11px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px currentColor; }
.status-dot.ok { background: var(--green); }
.status-dot.bad { background: var(--red); }
.section-head { display: flex; align-items: end; justify-content: space-between; margin: 28px 2px 14px; }
.section-head h2 { margin: 4px 0 0; font-size: 24px; letter-spacing: -.035em; }
.project-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.project-card { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(17,29,50,.88), rgba(8,16,29,.8)); border-radius: 23px; padding: 17px; box-shadow: 0 15px 35px rgba(0,0,0,.22); }
.project-card-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.project-avatar { width: 47px; height: 47px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(145deg, rgba(155,114,255,.25), rgba(91,231,255,.08)); border: 1px solid rgba(155,114,255,.25); font-weight: 850; }
.project-title { flex: 1; min-width: 0; }
.project-title h3 { margin: 2px 0 3px; font-size: 18px; letter-spacing: -.025em; }
.project-title p { margin: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-badge { font-size: 10px; font-weight: 800; border-radius: 999px; padding: 7px 9px; background: rgba(105,230,166,.09); color: var(--green); border: 1px solid rgba(105,230,166,.18); white-space: nowrap; }
.status-badge.warn { color: var(--amber); background: rgba(255,211,107,.08); border-color: rgba(255,211,107,.18); }
.status-badge.bad { color: var(--red); background: rgba(255,111,139,.08); border-color: rgba(255,111,139,.18); }
.project-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 15px 0; }
.meta-box { background: rgba(4,10,19,.55); border: 1px solid rgba(165,184,225,.08); border-radius: 14px; padding: 10px; min-width: 0; }
.meta-box small { display: block; color: var(--muted); font-size: 10px; margin-bottom: 4px; }
.meta-box strong { display: block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.safety-strip { margin-top: 16px; border-radius: 21px; padding: 15px; display: flex; gap: 12px; align-items: center; }
.safety-strip .shield { min-width: 39px; height: 39px; border-radius: 14px; display: grid; place-items: center; background: rgba(105,230,166,.12); color: var(--green); font-weight: 900; }
.safety-strip strong { font-size: 13px; }
.safety-strip p { color: var(--muted); font-size: 11px; line-height: 1.45; margin: 4px 0 0; }

.button { min-height: 46px; border: 1px solid transparent; border-radius: 15px; padding: 0 16px; font-weight: 800; letter-spacing: -.01em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.button.primary { background: linear-gradient(135deg, var(--purple), var(--purple-2)); color: white; box-shadow: 0 10px 24px rgba(111,73,255,.27); }
.button.ghost { background: rgba(18,31,52,.75); border-color: var(--line); color: #dce4f6; }
.button.danger { background: linear-gradient(135deg, #d94670, #a61f49); }
.button.full { width: 100%; }
.button.compact { min-height: 36px; padding: 0 13px; border-radius: 12px; font-size: 12px; }
.bottom-nav { position: fixed; z-index: 25; left: 12px; right: 12px; bottom: calc(10px + var(--safe-bottom)); height: 66px; border: 1px solid var(--line); border-radius: 23px; background: rgba(9,17,30,.9); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: grid; grid-template-columns: repeat(3, 1fr); padding: 6px; box-shadow: 0 18px 50px rgba(0,0,0,.45); max-width: 600px; margin: auto; }
.nav-item { border: 0; background: transparent; color: var(--muted); border-radius: 17px; display: grid; place-items: center; align-content: center; gap: 2px; }
.nav-item span { font-size: 18px; line-height: 1; }
.nav-item small { font-size: 9px; font-weight: 700; }
.nav-item.active { background: rgba(155,114,255,.13); color: #e9e2ff; }

.field { display: grid; gap: 7px; text-align: left; }
.field > span { color: #bec9de; font-size: 11px; font-weight: 750; }
.field input, .field textarea { width: 100%; border: 1px solid var(--line); background: rgba(4,10,19,.68); color: var(--text); border-radius: 15px; padding: 13px 14px; outline: none; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: rgba(155,114,255,.58); box-shadow: 0 0 0 3px rgba(155,114,255,.1); }
.check-row { display: flex; gap: 9px; align-items: center; justify-content: center; margin: 13px 0 17px; color: var(--muted); font-size: 12px; }
.form-stack { display: grid; gap: 14px; }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-message { min-height: 18px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.form-message.error { color: var(--red); }
.form-message.success { color: var(--green); }

.sheet-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.58); backdrop-filter: blur(4px); }
.sheet { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; max-height: 91vh; overflow-y: auto; background: linear-gradient(180deg, #111d31, #07101e 62%); border: 1px solid var(--line); border-bottom: 0; border-radius: 30px 30px 0 0; padding: 10px 18px calc(24px + var(--safe-bottom)); box-shadow: 0 -26px 70px rgba(0,0,0,.52); animation: sheetIn .23s ease-out; max-width: 760px; margin: auto; }
@keyframes sheetIn { from { transform: translateY(24px); opacity: 0; } }
.sheet-handle { width: 42px; height: 5px; border-radius: 999px; background: rgba(197,209,235,.22); margin: 0 auto 13px; }
.sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 18px; }
.sheet-head h2 { margin: 4px 0 0; font-size: 23px; letter-spacing: -.035em; }
.compact-sheet { max-height: 55vh; }
.menu-list { display: grid; gap: 8px; }
.menu-button { width: 100%; min-height: 52px; border: 1px solid var(--line); background: rgba(5,12,23,.55); border-radius: 16px; display: flex; justify-content: space-between; align-items: center; padding: 0 15px; text-align: left; }
.danger-text { color: var(--red); }
.drop-zone { display: grid; place-items: center; text-align: center; min-height: 175px; border-radius: 23px; border: 1px dashed rgba(155,114,255,.47); background: rgba(155,114,255,.06); padding: 20px; }
.drop-zone input { display: none; }
.drop-zone .drop-icon { width: 50px; height: 50px; border-radius: 18px; display: grid; place-items: center; background: rgba(155,114,255,.14); color: #d8caff; font-size: 25px; margin-bottom: 11px; }
.drop-zone strong { font-size: 15px; }
.drop-zone small { color: var(--muted); margin-top: 5px; }
.validation-list { display: grid; gap: 9px; }
.validation-list > div { display: flex; gap: 9px; align-items: center; color: #c6d0e3; font-size: 12px; }
.validation-list span { width: 24px; height: 24px; border-radius: 9px; display: grid; place-items: center; background: rgba(91,231,255,.08); color: var(--cyan); font-weight: 800; font-size: 10px; }
.project-control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.control-button { min-height: 74px; border-radius: 18px; border: 1px solid var(--line); background: rgba(5,12,23,.55); text-align: left; padding: 13px; }
.control-button strong { display: block; font-size: 13px; }
.control-button small { display: block; color: var(--muted); margin-top: 5px; line-height: 1.35; }
.timeline { display: grid; gap: 9px; margin-top: 18px; }
.timeline-item { border: 1px solid var(--line); border-radius: 16px; background: rgba(5,12,23,.5); padding: 12px; }
.timeline-row { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.timeline-item strong { font-size: 12px; }
.timeline-item p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.timeline-actions { display: flex; gap: 7px; margin-top: 10px; }
.mini-button { border: 1px solid var(--line); background: rgba(18,31,52,.8); border-radius: 10px; min-height: 32px; padding: 0 10px; font-size: 10px; font-weight: 800; }
.toast { position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(90px + var(--safe-bottom)); max-width: 520px; margin: auto; padding: 13px 15px; border-radius: 15px; background: rgba(18,31,52,.96); border: 1px solid var(--line); box-shadow: var(--shadow); color: #e8edfa; font-size: 12px; text-align: center; }
.empty-state { border: 1px dashed var(--line); border-radius: 20px; padding: 24px; color: var(--muted); text-align: center; }
.loading-card { height: 180px; border-radius: 23px; background: linear-gradient(90deg, rgba(18,31,52,.55), rgba(29,45,73,.72), rgba(18,31,52,.55)); background-size: 200% 100%; animation: shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

@media (min-width: 680px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding: 34px; }
}
@media (max-width: 380px) {
  .field-pair, .project-control-grid { grid-template-columns: 1fr; }
  .project-meta { grid-template-columns: 1fr; }
}

.visually-hidden{position:fixed;left:-9999px;width:1px;height:1px;opacity:0}
.quick-deploy{min-height:48px;font-weight:800;background:linear-gradient(135deg,#8d64ff,#633bff);border:0;color:#fff;border-radius:14px;padding:0 16px}
.quick-deploy:disabled{opacity:.45}
.fix-actions{display:grid;gap:10px;margin-bottom:18px}
.fix-item{border:1px solid var(--line);border-radius:16px;padding:14px;background:rgba(8,17,32,.72);margin-bottom:10px}
.fix-item .timeline-row{margin-bottom:7px}
.one-tap-overlay{position:fixed;inset:0;z-index:100;background:rgba(2,7,16,.82);backdrop-filter:blur(14px);display:grid;place-items:center;padding:24px}
.one-tap-overlay.hidden{display:none}
.one-tap-card{width:min(390px,100%);padding:28px;text-align:center;border-radius:26px}
.spinner{width:48px;height:48px;margin:0 auto 18px;border:4px solid rgba(255,255,255,.14);border-top-color:#8d64ff;border-radius:50%;animation:hlspin .9s linear infinite}
@keyframes hlspin{to{transform:rotate(360deg)}}
.card-actions{grid-template-columns:1fr auto auto!important}
@media(max-width:520px){.card-actions{grid-template-columns:1fr auto!important}.project-open{display:none}.quick-deploy{grid-column:1/2}}

/* v0.4.0 setup and iPhone layout fixes */
main { padding-bottom: calc(118px + var(--safe-bottom)); }
.project-grid { padding-bottom: 8px; }
.field-pair > *, .field input, .field textarea { min-width: 0; }
.setup-summary { color: var(--muted); font-size: 12px; line-height: 1.5; margin: -4px 2px 12px; }
.setup-project-list { margin-top: 14px; }
.setup-project-list .menu-button > span:first-child { min-width: 0; display: grid; gap: 4px; }
.setup-project-list .menu-button strong { font-size: 13px; }
.setup-project-list .menu-button small { display: block; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.quick-deploy.needs-connect { background: linear-gradient(135deg, rgba(155,114,255,.28), rgba(91,231,255,.16)); border: 1px solid rgba(155,114,255,.42); color: #efeaff; box-shadow: none; }
@media (max-width: 520px) {
  .bottom-nav { bottom: calc(8px + var(--safe-bottom)); }
  .sheet { max-height: 94vh; }
  .field-pair { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .field-pair { grid-template-columns: 1fr; }
}

.production-link { width:100%; margin-top:10px; border:0; background:transparent; color:#93a4c5; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; padding:0 4px; }
.setup-summary strong { color:#fff; }


/* v0.5 Mission Control */
.mission-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0 24px}.summary-tile{background:rgba(5,13,27,.82);border:1px solid rgba(139,111,255,.18);border-radius:20px;padding:15px 12px;min-width:0}.summary-tile small{display:block;color:var(--muted);font-size:.72rem;line-height:1.2;margin-bottom:8px}.summary-tile strong{display:block;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.provider-chip{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:6px 9px;border-radius:999px;background:rgba(139,111,255,.1);border:1px solid rgba(139,111,255,.2);font-size:.72rem;color:#cfc7ff}.project-tools{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:10px}.project-tools button{min-height:44px;border-radius:15px;border:1px solid rgba(142,163,196,.17);background:#091426;color:#d9e3f7;font-weight:700}.operator-result{padding:14px;border-radius:16px;background:#081326;border:1px solid rgba(139,111,255,.2);line-height:1.45}.operator-result strong{display:block;margin-bottom:6px}@media(max-width:430px){.mission-summary{gap:7px}.summary-tile{padding:12px 9px}.summary-tile strong{font-size:.95rem}}

:root{--panel:#10151f;--panel-2:#151c29;--line:rgba(255,255,255,.09);--accent:#7c8cff;--accent-2:#8ee3ff;--success:#49d59c;--danger:#ff6b7d;--text:#f7f9ff;--muted:#9aa5b5}
body{background:radial-gradient(circle at 15% -10%,rgba(124,140,255,.22),transparent 34%),radial-gradient(circle at 100% 0,rgba(142,227,255,.12),transparent 30%),#080b11;color:var(--text)}
.topbar{backdrop-filter:blur(22px);background:rgba(8,11,17,.78);border-bottom:1px solid var(--line)}
.hero{border:1px solid rgba(124,140,255,.22);box-shadow:0 24px 70px rgba(0,0,0,.28)}
.project-card,.summary-tile,.capability-panel,.operations-hero,.service-row{background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02));border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.18)}
.project-card{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.project-card:hover{transform:translateY(-2px);border-color:rgba(124,140,255,.38);box-shadow:0 24px 65px rgba(0,0,0,.28)}
.button.primary,.quick-deploy{background:linear-gradient(135deg,var(--accent),#5c6df5);box-shadow:0 10px 30px rgba(92,109,245,.28)}
.head-actions{display:flex;gap:8px;align-items:center}.field select{width:100%;min-height:46px;border-radius:12px;border:1px solid var(--line);background:#0d131d;color:var(--text);padding:0 12px}.capability-panel{padding:14px;border-radius:16px;display:grid;gap:10px}.project-tools{display:flex;flex-wrap:wrap;gap:8px}.project-tools button{flex:1;min-width:78px}.operations-hero{display:flex;gap:14px;padding:18px;border-radius:18px;margin-bottom:14px}.operations-hero h3{margin:4px 0}.operations-hero p{margin:0;color:var(--muted)}.ops-icon,.service-symbol{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:rgba(124,140,255,.15);color:var(--accent-2);font-size:22px}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.service-list{display:grid;gap:10px}.service-row{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:14px;border-radius:16px;color:var(--text);text-align:left}.service-row small{display:block;color:var(--muted);margin-top:3px}.bottom-nav{grid-template-columns:repeat(4,1fr)}
@media(max-width:520px){.head-actions{width:100%;justify-content:space-between}.section-head{align-items:flex-end}.action-grid{grid-template-columns:1fr}.field-pair{grid-template-columns:1fr}.project-card{border-radius:20px}.hero h2{font-size:1.8rem}}


/* v2.1.0 professional mobile layout */
:root{--page-max:1120px;--space:clamp(14px,3.8vw,24px);--radius:20px;--panel:#0e1727;--panel-2:#121d31;--line:rgba(255,255,255,.085);--text:#f7f9ff;--muted:#9aa7bb;--accent:#8b5cf6;--accent-2:#6d3ee8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#070b14}
body{min-width:320px;overflow-x:hidden;background:radial-gradient(circle at 10% -10%,rgba(124,58,237,.18),transparent 30%),#070b14;color:var(--text)}
.ambient{opacity:.35;filter:blur(90px);pointer-events:none}
.app-shell{width:100%;min-height:100dvh;padding-bottom:calc(92px + env(safe-area-inset-bottom))}
.topbar{position:sticky;top:0;z-index:30;width:min(100%,var(--page-max));margin:0 auto;padding:calc(10px + env(safe-area-inset-top)) var(--space) 12px;background:linear-gradient(180deg,rgba(7,11,20,.98),rgba(7,11,20,.88) 75%,transparent);backdrop-filter:blur(18px);border:0}
.topbar h1{font-size:19px;line-height:1.05;margin:1px 0 0}.brand-mark.small{width:38px;height:38px;border-radius:12px}.icon-button{min-width:44px;min-height:44px;border-radius:14px}
main{width:min(100%,var(--page-max));margin:0 auto;padding:8px var(--space) 30px}
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:end;padding:clamp(20px,5vw,34px);border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,rgba(23,34,55,.96),rgba(11,18,31,.96));box-shadow:0 24px 70px rgba(0,0,0,.28)}
.hero h2{max-width:720px;margin:6px 0 8px;font-size:clamp(28px,6.5vw,48px);line-height:1.02;letter-spacing:-.045em}.hero p{max-width:720px;font-size:clamp(14px,3.4vw,16px);line-height:1.6}.hero-status{white-space:nowrap;align-self:start}
.mission-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 28px}.summary-tile{min-width:0;padding:15px;border:1px solid var(--line);border-radius:16px;background:rgba(15,24,40,.86)}.summary-tile small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-tile strong{display:block;margin-top:6px;font-size:21px;overflow:hidden;text-overflow:ellipsis}
.section-head{align-items:end;margin:0 0 13px}.section-head h2{font-size:24px;letter-spacing:-.03em}.head-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.button.compact{min-height:40px;padding:0 14px}
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:14px}.project-card{min-width:0;padding:18px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(155deg,rgba(17,27,45,.98),rgba(10,17,29,.98));box-shadow:0 12px 34px rgba(0,0,0,.22);overflow:hidden}.project-card-top{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center}.project-avatar{width:44px;height:44px;border-radius:14px;font-size:13px}.project-title{min-width:0}.project-title h3{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-title p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-badge{max-width:90px;white-space:nowrap}
.project-meta{gap:8px}.meta-box{min-width:0;padding:12px}.meta-box strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-actions{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px}.quick-deploy{min-width:0;min-height:46px;border-radius:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.project-tools{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.project-tools::-webkit-scrollbar{display:none}.project-tools button{flex:0 0 auto;min-height:38px}.production-link{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bottom-nav{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:35;width:min(calc(100% - 20px),620px);padding:7px;border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(12,19,32,.94);box-shadow:0 20px 50px rgba(0,0,0,.45);backdrop-filter:blur(22px)}.nav-item{min-width:0;min-height:54px;border-radius:14px}.nav-item small{font-size:10px}
.sheet{left:50%;right:auto;transform:translateX(-50%);width:min(100%,760px);max-height:min(90dvh,900px);padding:12px var(--space) calc(24px + env(safe-area-inset-bottom));border-radius:28px 28px 0 0;border:1px solid var(--line);background:#0d1626;overflow-y:auto}.sheet.hidden{transform:translate(-50%,105%)}.sheet-head{position:sticky;top:-12px;z-index:2;margin:0 calc(var(--space) * -1) 14px;padding:12px var(--space);background:linear-gradient(#0d1626 80%,transparent)}.sheet h2{font-size:23px}.form-stack{gap:14px}.field-pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field input,.field select,.field textarea,.sheet label>input,.sheet label>textarea{width:100%;min-width:0;min-height:48px;border-radius:13px;font-size:16px}.capability-panel{padding:15px;border-radius:17px}.menu-button{min-height:58px;border-radius:14px}.menu-button span:first-child{display:flex;min-width:0;flex-direction:column;align-items:flex-start}.menu-button small{margin-top:3px;color:var(--muted);font-size:11px}.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.operations-hero{min-width:0}.operations-hero h3,.operations-hero p{overflow-wrap:anywhere}
.safety-strip{margin-top:22px}
@media(max-width:620px){.hero{grid-template-columns:1fr}.hero-status{justify-self:start}.mission-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.summary-tile{padding:12px 9px}.summary-tile small{font-size:9px}.summary-tile strong{font-size:17px}.section-head{align-items:flex-start}.head-actions{width:100%;justify-content:flex-start}.head-actions .button{flex:1}.field-pair{grid-template-columns:1fr}.project-grid{grid-template-columns:1fr}.sheet{border-radius:24px 24px 0 0}.action-grid{grid-template-columns:1fr}}
@media(min-width:850px){.bottom-nav{bottom:18px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
\n\n/* v2.2.0 phone source workspace */\n.source-toolbar{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin:12px 0}.source-toolbar input{min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:inherit;padding:11px}.source-workspace{display:grid;gap:8px;max-height:55vh;overflow:auto;-webkit-overflow-scrolling:touch}.source-row{width:100%;display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;text-align:left;padding:13px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.045);color:inherit}.source-row span:nth-child(2){display:grid;gap:3px;min-width:0}.source-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-row small{opacity:.65}.source-editor-head{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin-bottom:8px}.source-editor-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.source-editor{width:100%;min-height:44vh;resize:vertical;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:#090b12;color:#eef2ff;padding:13px;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2}.source-footer{position:sticky;bottom:0;padding-top:12px;background:linear-gradient(transparent,rgba(10,12,20,.98) 32%)}\n

/* v2.3.0 iPhone Runtime Control */
.run-card,.job-head,.artifact-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;border:1px solid var(--line);background:var(--surface);color:inherit;border-radius:14px;padding:13px;margin:8px 0;text-decoration:none}.run-card span:first-child,.job-head span:first-child,.artifact-row span:first-child{display:grid;gap:4px}.run-card small,.job-head small,.artifact-row small{opacity:.7}.run-status{font-size:.78rem;text-transform:uppercase}.run-detail-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}.run-detail-head div{display:grid;gap:3px}.job-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:10px 0}.job-head{border:0;border-radius:0;margin:0}.job-steps{padding:4px 12px 12px}.job-step{display:grid;grid-template-columns:20px 1fr auto;gap:8px;padding:8px 0;border-top:1px solid var(--line)}.job-step small{opacity:.65}.job-step.failure{font-weight:700}.job-log-viewer{height:min(58vh,620px);overflow:auto;white-space:pre-wrap;word-break:break-word;background:#07090d;border:1px solid var(--line);border-radius:14px;padding:12px;font-size:12px;line-height:18px;text-align:left;-webkit-overflow-scrolling:touch}.button.danger{border-color:#8f3041}.source-editor{min-height:48vh;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:1.45}


/* v3.1.0 PIXL Runtime Mission Control */
.runtime-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(135deg,rgba(126,87,255,.16),rgba(62,99,255,.08));margin-bottom:14px}.runtime-hero h2{margin:4px 0 6px;font-size:1.2rem}.runtime-hero p{margin:0;color:var(--muted);overflow-wrap:anywhere}.runtime-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.runtime-status-card{display:flex;flex-direction:column;gap:4px;min-height:92px;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(4,11,25,.58)}.runtime-status-card small,.runtime-status-card span{color:var(--muted);overflow-wrap:anywhere}.runtime-status-card strong{font-size:1rem}@media(max-width:520px){.runtime-status-grid{grid-template-columns:1fr}.runtime-hero{flex-direction:column}.runtime-hero .status-badge{align-self:flex-start}}


/* v3.3.0 — Native Apple UI system
   Neutral system surfaces, SF typography, restrained depth, system blue actions,
   adaptive light/dark appearance, desktop sidebar, and iPhone tab bar. */
:root {
  color-scheme: light dark;
  --page-max: 1240px;
  --sidebar-width: 244px;
  --system-blue: #007aff;
  --system-blue-pressed: #0062cc;
  --system-green: #34c759;
  --system-orange: #ff9500;
  --system-red: #ff3b30;
  --system-bg: #f2f2f7;
  --system-bg-elevated: #ffffff;
  --system-bg-secondary: #f7f7fa;
  --system-fill: rgba(120,120,128,.12);
  --system-fill-strong: rgba(120,120,128,.20);
  --system-separator: rgba(60,60,67,.18);
  --system-text: #111114;
  --system-secondary: rgba(60,60,67,.72);
  --system-tertiary: rgba(60,60,67,.52);
  --focus-ring: rgba(0,122,255,.24);
  --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --shadow-modal: 0 24px 80px rgba(0,0,0,.20);
  --radius-card: 18px;
  --radius-control: 12px;
  --text: var(--system-text);
  --muted: var(--system-secondary);
  --panel: var(--system-bg-elevated);
  --panel-2: var(--system-bg-secondary);
  --surface: var(--system-bg-elevated);
  --line: var(--system-separator);
  --accent: var(--system-blue);
  --accent-2: var(--system-blue);
}
@media (prefers-color-scheme: dark) {
  :root {
    --system-blue: #0a84ff;
    --system-blue-pressed: #409cff;
    --system-green: #30d158;
    --system-orange: #ff9f0a;
    --system-red: #ff453a;
    --system-bg: #000000;
    --system-bg-elevated: #1c1c1e;
    --system-bg-secondary: #151517;
    --system-fill: rgba(120,120,128,.18);
    --system-fill-strong: rgba(120,120,128,.28);
    --system-separator: rgba(84,84,88,.62);
    --system-text: #f5f5f7;
    --system-secondary: rgba(235,235,245,.66);
    --system-tertiary: rgba(235,235,245,.44);
    --focus-ring: rgba(10,132,255,.34);
    --shadow-card: 0 1px 1px rgba(255,255,255,.025), 0 12px 30px rgba(0,0,0,.28);
    --shadow-modal: 0 28px 90px rgba(0,0,0,.66);
  }
}
* { -webkit-tap-highlight-color: transparent; }
html { background: var(--system-bg); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--system-text);
  background: var(--system-bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  letter-spacing: -.01em;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button { letter-spacing: -.005em; }
.ambient { display: none !important; }
.glass { backdrop-filter: none; -webkit-backdrop-filter: none; }
.hidden { display: none !important; }

/* Sign in */
.login-view {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 12%, rgba(0,122,255,.10), transparent 34%),
    var(--system-bg);
}
.login-card {
  width: min(100%, 420px);
  padding: 34px;
  border: 1px solid var(--system-separator);
  border-radius: 24px;
  background: color-mix(in srgb, var(--system-bg-elevated) 94%, transparent);
  box-shadow: var(--shadow-modal);
}
.login-wordmark { display:block; width:min(260px,80%); height:auto; margin:0 0 28px; object-fit:contain; object-position:left center; }
.login-card .eyebrow { margin-bottom: 6px; }
.login-card h1 { margin:0 0 8px; font-size:34px; line-height:1.08; letter-spacing:-.035em; }
.login-card .muted { margin:0 0 26px; line-height:1.5; }

/* Shell and sidebar */
.app-shell { min-height:100dvh; padding:0; background:var(--system-bg); }
.desktop-sidebar { display:none; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  width: 100%;
  margin: 0;
  padding: calc(10px + env(safe-area-inset-top)) 18px 10px;
  border-bottom: .5px solid var(--system-separator);
  background: color-mix(in srgb, var(--system-bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
}
.brand-row { display:flex; align-items:center; gap:10px; }
.topbar-logo { width:36px; height:36px; border-radius:10px; object-fit:cover; box-shadow:0 2px 8px rgba(0,39,120,.18); }
.topbar .eyebrow { margin:0; color:var(--system-tertiary); font-size:10px; letter-spacing:.08em; }
.topbar h1 { margin:1px 0 0; font-size:18px; line-height:1.1; letter-spacing:-.025em; }
.topbar-actions { display:flex; align-items:center; gap:9px; }
.topbar-online { display:none; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; color:var(--system-secondary); background:var(--system-fill); font-size:12px; font-weight:600; }
.topbar-online i,.sidebar-online i { width:7px; height:7px; border-radius:50%; background:var(--system-green); box-shadow:0 0 0 3px color-mix(in srgb,var(--system-green) 16%,transparent); }
.icon-button {
  display:grid; place-items:center;
  min-width:38px; min-height:38px;
  padding:0 10px;
  border:0;
  border-radius:50%;
  color:var(--system-blue);
  background:var(--system-fill);
  font-weight:700;
}
.icon-button:active { background:var(--system-fill-strong); transform:scale(.97); }

main { width:min(100%,var(--page-max)); margin:0 auto; padding:20px 16px calc(104px + env(safe-area-inset-bottom)); }

/* Header/hero */
.hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  min-height:220px;
  padding:30px;
  overflow:hidden;
  border:.5px solid var(--system-separator);
  border-radius:var(--radius-card);
  background:var(--system-bg-elevated);
  box-shadow:var(--shadow-card);
}
.hero::after { content:none; }
.hero-copy { position:relative; z-index:1; }
.eyebrow { margin:0 0 7px; color:var(--system-tertiary); font-size:11px; line-height:1.2; font-weight:700; letter-spacing:.10em; text-transform:uppercase; }
.hero h2 { margin:0 0 10px; max-width:none; font-size:clamp(32px,5vw,50px); line-height:1.02; letter-spacing:-.05em; }
.hero .muted { max-width:680px; margin:0; color:var(--system-secondary); font-size:16px; line-height:1.55; }
.hero-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:max-content;
  margin-top:22px;
  padding:8px 11px;
  border-radius:999px;
  background:var(--system-fill);
  color:var(--system-secondary);
  font-size:12px;
  font-weight:600;
  white-space:normal;
}
.hero-emblem {
  position:relative;
  display:grid;
  place-items:center;
  width:170px;
  height:170px;
  border-radius:38px;
  background:linear-gradient(145deg, color-mix(in srgb,var(--system-blue) 10%,var(--system-bg-secondary)), var(--system-bg-secondary));
}
.hero-emblem::before { content:""; position:absolute; inset:17px; border:1px solid color-mix(in srgb,var(--system-blue) 18%,transparent); border-radius:50%; }
.hero-emblem img { position:relative; width:138px; height:138px; object-fit:contain; filter:drop-shadow(0 10px 22px rgba(0,47,130,.18)); }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--system-orange); box-shadow:none; }
.status-dot.ok { background:var(--system-green); }
.status-dot.bad { background:var(--system-red); }

/* Summary */
.mission-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0 32px; }
.summary-tile {
  min-width:0;
  padding:17px 18px;
  border:.5px solid var(--system-separator);
  border-radius:15px;
  background:var(--system-bg-elevated);
  box-shadow:none;
}
.summary-tile small { display:block; color:var(--system-secondary); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.summary-tile strong { display:block; margin-top:5px; color:var(--system-text); font-size:22px; line-height:1.1; letter-spacing:-.03em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Section controls */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 12px; }
.section-head h2 { margin:0; font-size:25px; line-height:1.1; letter-spacing:-.035em; }
.head-actions { display:flex; gap:8px; }
.button, .quick-deploy, .project-tools button, .mini-button, .control-button, .menu-button {
  min-height:44px;
  border:0;
  border-radius:var(--radius-control);
  color:var(--system-text);
  background:var(--system-fill);
  font-weight:600;
  box-shadow:none;
  transition:transform .12s ease, background .12s ease, opacity .12s ease;
}
.button:hover, .quick-deploy:hover, .project-tools button:hover { filter:none; }
.button:active, .quick-deploy:active, .project-tools button:active, .mini-button:active { transform:scale(.985); }
.button.primary, .quick-deploy:not(.needs-connect) { color:#fff; background:var(--system-blue); }
.button.primary:active, .quick-deploy:not(.needs-connect):active { background:var(--system-blue-pressed); }
.button.ghost, .quick-deploy.needs-connect { color:var(--system-blue); background:var(--system-fill); border:0; }
.button.danger { color:var(--system-red); background:color-mix(in srgb,var(--system-red) 12%,transparent); border:0; }
.button.compact, .mini-button { min-height:36px; padding:0 13px; border-radius:10px; }

/* Project cards */
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.project-card {
  min-width:0;
  padding:18px;
  overflow:hidden;
  border:.5px solid var(--system-separator);
  border-radius:var(--radius-card);
  background:var(--system-bg-elevated);
  box-shadow:var(--shadow-card);
}
.project-card-top { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; }
.project-avatar {
  display:grid; place-items:center;
  width:42px; height:42px;
  border-radius:11px;
  color:var(--system-blue);
  background:color-mix(in srgb,var(--system-blue) 10%,var(--system-bg-secondary));
  border:.5px solid color-mix(in srgb,var(--system-blue) 14%,var(--system-separator));
  font-size:12px; font-weight:750; letter-spacing:-.02em;
}
.project-title h3 { margin:0; color:var(--system-text); font-size:17px; line-height:1.2; letter-spacing:-.025em; }
.project-title p { margin:3px 0 0; color:var(--system-secondary); font-size:12px; line-height:1.3; }
.status-badge {
  display:inline-flex; align-items:center;
  max-width:110px;
  min-height:25px;
  padding:0 9px;
  border:0;
  border-radius:999px;
  color:#16773a;
  background:color-mix(in srgb,var(--system-green) 13%,transparent);
  font-size:10px; font-weight:700;
}
.status-badge.warn { color:#9a5b00; background:color-mix(in srgb,var(--system-orange) 14%,transparent); }
.status-badge.bad { color:#b42318; background:color-mix(in srgb,var(--system-red) 13%,transparent); }
@media (prefers-color-scheme: dark) {
  .status-badge { color:#62dc81; }
  .status-badge.warn { color:#ffb340; }
  .status-badge.bad { color:#ff6961; }
}
.project-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin:16px 0 14px; border-top:.5px solid var(--system-separator); border-bottom:.5px solid var(--system-separator); }
.meta-box { min-width:0; padding:12px 0; background:transparent; border:0; border-radius:0; }
.meta-box + .meta-box { padding-left:14px; border-left:.5px solid var(--system-separator); }
.meta-box small { color:var(--system-secondary); font-size:11px; }
.meta-box strong { display:block; margin-top:4px; color:var(--system-text); font-size:13px; }
.card-actions { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; }
.quick-deploy { min-width:0; min-height:44px; padding:0 14px; }
.project-edit { min-width:44px; min-height:44px; border-radius:12px; }
.provider-chip { display:inline-flex; margin-top:11px; padding:4px 7px; border-radius:7px; color:var(--system-secondary); background:var(--system-fill); font-size:10px; }
.project-tools { display:flex; gap:2px; margin-top:10px; padding-top:9px; border-top:.5px solid var(--system-separator); overflow-x:auto; }
.project-tools button { min-height:32px; padding:0 10px; color:var(--system-blue); background:transparent; font-size:12px; }
.production-link { margin-top:8px; padding:6px 0; border:0; color:var(--system-blue); background:transparent; font-size:11px; text-align:left; }

/* Bottom tab bar */
.bottom-nav {
  position:fixed;
  left:10px; right:10px; bottom:max(8px,env(safe-area-inset-bottom));
  transform:none;
  z-index:50;
  width:auto;
  max-width:none;
  min-height:64px;
  padding:5px 7px;
  border:.5px solid var(--system-separator);
  border-radius:22px;
  background:color-mix(in srgb,var(--system-bg-elevated) 84%,transparent);
  box-shadow:0 12px 38px rgba(0,0,0,.18);
  backdrop-filter:saturate(180%) blur(24px);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
}
.nav-item { min-width:0; min-height:53px; border:0; border-radius:16px; color:var(--system-secondary); background:transparent; }
.nav-item.active { color:var(--system-blue); background:color-mix(in srgb,var(--system-blue) 10%,transparent); }
.nav-item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-item small { margin-top:2px; font-size:10px; font-weight:650; }

/* Safety and list surfaces */
.safety-strip { margin-top:20px; padding:17px 18px; border:.5px solid var(--system-separator); border-radius:var(--radius-card); background:var(--system-bg-elevated); box-shadow:none; }
.shield { color:var(--system-green); background:color-mix(in srgb,var(--system-green) 12%,transparent); }
.safety-strip p { color:var(--system-secondary); }
.empty-state, .setup-summary, .operator-result, .timeline-item {
  border:.5px solid var(--system-separator);
  border-radius:15px;
  background:var(--system-bg-secondary);
  color:var(--system-secondary);
}
.operator-result strong,.timeline-item strong { color:var(--system-text); }
.bad-result { border-color:color-mix(in srgb,var(--system-red) 32%,var(--system-separator)); background:color-mix(in srgb,var(--system-red) 7%,var(--system-bg-secondary)); }

/* Sheets / modals */
.sheet-backdrop { background:rgba(0,0,0,.34); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.sheet {
  left:0; right:0; bottom:0;
  transform:none;
  width:100%;
  max-height:min(92dvh,900px);
  padding:10px 16px calc(24px + env(safe-area-inset-bottom));
  border:.5px solid var(--system-separator);
  border-bottom:0;
  border-radius:26px 26px 0 0;
  background:var(--system-bg-elevated);
  color:var(--system-text);
  box-shadow:var(--shadow-modal);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.sheet.hidden { display:block !important; transform:translateY(105%); pointer-events:none; visibility:hidden; }
.sheet-handle { width:38px; height:5px; margin:0 auto 7px; border-radius:99px; background:var(--system-fill-strong); }
.sheet-head { position:sticky; top:-10px; z-index:5; margin:0 -16px 14px; padding:12px 16px 12px; background:color-mix(in srgb,var(--system-bg-elevated) 92%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:.5px solid var(--system-separator); }
.sheet h2 { margin:0; font-size:23px; letter-spacing:-.035em; }
.menu-list { overflow:hidden; border:.5px solid var(--system-separator); border-radius:15px; }
.menu-button { width:100%; min-height:58px; margin:0; padding:12px 14px; border-radius:0; border-bottom:.5px solid var(--system-separator); background:var(--system-bg-elevated); text-align:left; }
.menu-button:last-child { border-bottom:0; }
.menu-button small { color:var(--system-secondary); }
.control-button { background:var(--system-bg-secondary); border:.5px solid var(--system-separator); }

/* Forms */
.field span, label > span { color:var(--system-secondary); font-size:12px; font-weight:600; }
.field input,.field select,.field textarea,.sheet label>input,.sheet label>textarea,.source-toolbar input {
  width:100%; min-width:0; min-height:46px;
  padding:11px 12px;
  border:.5px solid var(--system-separator);
  border-radius:11px;
  color:var(--system-text);
  background:var(--system-bg-secondary);
  outline:none;
}
.field input:focus,.field select:focus,.field textarea:focus,.source-toolbar input:focus { border-color:var(--system-blue); box-shadow:0 0 0 4px var(--focus-ring); }
.check-row { color:var(--system-secondary); }
.check-row input { accent-color:var(--system-blue); }
.capability-panel { border:.5px solid var(--system-separator); background:var(--system-bg-secondary); }

/* Workflow diagnostics and logs */
.run-card,.job-head,.artifact-row {
  border:.5px solid var(--system-separator);
  border-radius:13px;
  background:var(--system-bg-secondary);
  color:var(--system-text);
}
.job-card { border:.5px solid var(--system-separator); border-radius:15px; background:var(--system-bg-secondary); }
.job-head { background:transparent; }
.job-step { border-top:.5px solid var(--system-separator); }
.job-step.success > span:first-child { color:var(--system-green); }
.job-step.failure > span:first-child { color:var(--system-red); }
.job-log-viewer,.source-editor {
  border:.5px solid var(--system-separator);
  border-radius:13px;
  background:#0d0d0f;
  color:#f5f5f7;
  font-family:ui-monospace,"SF Mono",Menlo,Monaco,Consolas,monospace;
  font-size:12px;
  line-height:1.55;
}
.source-toolbar { grid-template-columns:minmax(0,1fr) auto auto; }
.runtime-hero { border:.5px solid var(--system-separator); background:var(--system-bg-secondary); }
.runtime-status-card { border:.5px solid var(--system-separator); background:var(--system-bg-secondary); }

/* Toast and overlays */
.toast { left:50%; right:auto; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%); width:min(calc(100% - 32px),480px); border:0; border-radius:13px; color:#fff; background:rgba(30,30,32,.92); box-shadow:0 12px 34px rgba(0,0,0,.28); backdrop-filter:blur(18px); }
.toast.error { background:color-mix(in srgb,var(--system-red) 88%,#1c1c1e); }
.one-tap-overlay { background:rgba(0,0,0,.34); backdrop-filter:blur(6px); }
.one-tap-card { border:.5px solid var(--system-separator); background:var(--system-bg-elevated); box-shadow:var(--shadow-modal); }
.spinner { border-color:var(--system-fill-strong); border-top-color:var(--system-blue); }

@media (max-width: 720px) {
  main { padding-left:12px; padding-right:12px; }
  .hero { grid-template-columns:1fr; min-height:0; padding:22px; }
  .hero h2 { font-size:35px; }
  .hero-emblem { display:none; }
  .mission-summary { gap:8px; }
  .summary-tile { padding:13px 11px; }
  .summary-tile small { font-size:10px; }
  .summary-tile strong { font-size:18px; }
  .section-head { align-items:flex-start; flex-direction:column; }
  .head-actions { width:100%; }
  .head-actions .button { flex:1; }
  .project-grid { grid-template-columns:1fr; }
  .field-pair,.runtime-status-grid,.action-grid { grid-template-columns:1fr; }
  .source-toolbar { grid-template-columns:1fr 1fr; }
  .source-toolbar input { grid-column:1/-1; }
}

@media (min-width: 960px) {
  .app-shell {
    display:grid;
    grid-template-columns:var(--sidebar-width) minmax(0,1fr);
    grid-template-rows:auto 1fr;
    min-height:100dvh;
  }
  .desktop-sidebar {
    position:fixed;
    inset:0 auto 0 0;
    z-index:60;
    display:flex;
    flex-direction:column;
    width:var(--sidebar-width);
    padding:22px 14px 18px;
    border-right:.5px solid var(--system-separator);
    background:color-mix(in srgb,var(--system-bg-elevated) 78%,var(--system-bg));
    backdrop-filter:saturate(180%) blur(26px);
    -webkit-backdrop-filter:saturate(180%) blur(26px);
  }
  .sidebar-brand { min-height:54px; padding:2px 7px 18px; border-bottom:.5px solid var(--system-separator); }
  .sidebar-brand img { display:block; width:190px; max-width:100%; height:42px; object-fit:contain; object-position:left center; }
  .sidebar-nav { display:grid; gap:4px; padding:18px 0; }
  .sidebar-item {
    display:grid;
    grid-template-columns:28px 1fr;
    align-items:center;
    gap:9px;
    min-height:44px;
    padding:0 12px;
    border:0;
    border-radius:11px;
    color:var(--system-secondary);
    background:transparent;
    text-align:left;
    font-size:14px;
    font-weight:600;
  }
  .sidebar-item.active { color:var(--system-blue); background:color-mix(in srgb,var(--system-blue) 10%,transparent); }
  .sidebar-icon { display:grid; place-items:center; width:24px; font-size:18px; }
  .sidebar-footer { display:grid; gap:8px; margin-top:auto; padding:14px 7px 0; border-top:.5px solid var(--system-separator); }
  .sidebar-online { display:flex; align-items:center; gap:8px; color:var(--system-secondary); font-size:12px; }
  .sidebar-account { display:flex; justify-content:space-between; align-items:center; min-height:40px; padding:0; border:0; color:var(--system-blue); background:transparent; text-align:left; font-size:12px; }
  .topbar { grid-column:2; grid-row:1; padding:16px 28px 14px; }
  .topbar .brand-row { visibility:hidden; }
  .topbar-online { display:flex; }
  main { grid-column:2; grid-row:2; width:min(100%,var(--page-max)); padding:26px 30px 50px; }
  .bottom-nav { display:none; }
  .sheet {
    left:calc(var(--sidebar-width) + (100vw - var(--sidebar-width))/2);
    right:auto;
    bottom:50%;
    width:min(760px,calc(100vw - var(--sidebar-width) - 64px));
    max-height:min(82dvh,900px);
    padding:10px 20px 24px;
    border:.5px solid var(--system-separator);
    border-radius:22px;
    transform:translate(-50%,50%);
  }
  .sheet.hidden { display:block !important; transform:translate(-50%,calc(50% + 36px)) scale(.97); opacity:0; visibility:hidden; }
  .sheet-head { top:-10px; margin:0 -20px 14px; padding:12px 20px; }
  .sheet-handle { display:none; }
  .toast { bottom:28px; }
}

@media (min-width: 1280px) {
  .project-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation-duration:.001ms !important; }
}