/* screenshot mockups. app components rebuilt from each app's core.css, all scoped to .scr */

/* browser window frame */
.shot { border: 1px solid var(--panel-border); border-radius: 6px; background: var(--panel-bar); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.shot-bar { height: 34px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #0c1220; border-bottom: 1px solid var(--panel-border); }
.shot-bar .dots { display: flex; gap: 6px; flex: none; }
.shot-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #253047; }
.shot-bar .url { flex: 1; min-width: 0; max-width: 520px; height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 4px; background: var(--bg); border: 1px solid var(--border); font: 11px var(--mono); color: var(--text-secondary); white-space: nowrap; overflow: hidden; }
.shot-bar .url svg { width: 11px; height: 11px; stroke: var(--text-muted); fill: none; stroke-width: 2; flex: none; }
.shot-bar .url .warnlock { color: var(--error); font-size: 10px; }
.shot-bar .tag { margin-left: auto; font: 500 10px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.shot-body { overflow-x: auto; overflow-y: hidden; background: #06090f; }
.shot-body.tall { overflow-y: auto; }
.shot-cap { padding: 8px 14px; border-top: 1px solid var(--panel-border); font-size: 12px; color: var(--text-muted); background: var(--panel-bar); }

/* the app canvas */
.scr {
  --app: #f97316;
  --app-subtle: color-mix(in srgb, var(--app) 10%, transparent);
  --app-glow: color-mix(in srgb, var(--app) 30%, transparent);
  position: relative;
  min-width: 980px;
  background: var(--bg);
  color: var(--text-primary);
  font: 400 14px/1.5 var(--sans);
  text-align: left;
  overflow: hidden;
}
.scr.narrow { min-width: 0; }
.scr *, .scr *::before, .scr *::after { box-sizing: border-box; }
.scr::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 20% 0%, rgba(249,115,22,0.025), transparent 60%); }
.scr button { font-family: var(--sans); }
.scr svg { flex-shrink: 0; }
.scr .mono { font-family: var(--mono); }

/* callout pins on top of a mock */
.pin { position: absolute; z-index: 90; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #1a0d02; font: 700 11px var(--mono); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(6,9,15,0.85), 0 4px 10px rgba(0,0,0,0.5); pointer-events: none; }
.pins-off .pin { display: none; }

/* ── array topbar ── */
.scr .topbar { position: relative; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; background: var(--bg-surface); border-bottom: 1px solid var(--border); z-index: 5; }
.scr .topbar-left { display: flex; align-items: center; gap: 14px; flex: 1; }
.scr .topbar-right { display: flex; align-items: center; gap: 14px; flex: 1; justify-content: flex-end; }
.scr .logo-lockup { display: flex; align-items: center; gap: 10px; }
.scr .logo-lockup .mark { width: 32px; height: 32px; }
.scr .wordmark { display: flex; align-items: baseline; gap: 8px; line-height: 1; }
.scr .wordmark .n { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; color: var(--text-primary); }
.scr .wordmark .p { font: 500 10px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.scr .user-name { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.scr .logout-btn { height: 24px; padding: 0 9px; background: none; border: 1px solid transparent; border-radius: 3px; color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.scr .logout-btn:hover { background: #2a1d2c; border-color: rgba(251,113,133,0.4); color: #fb7185; }
.scr .app-version { font: 10px var(--mono); letter-spacing: 0.04em; color: var(--text-muted); }
.scr .topbar-metrics { display: flex; align-items: center; gap: 20px; }
.scr .metric { display: flex; align-items: center; gap: 7px; }
.scr .metric-label { font: 500 10px var(--mono); letter-spacing: 0.08em; color: var(--text-muted); }
.scr .meter { display: inline-flex; gap: 2px; }
.scr .seg { width: 6px; height: 13px; border-radius: 1px; background: var(--bg-surface); border: 1px solid var(--field-border); }
.scr .seg.on { border-color: transparent; }
.scr .seg.on.ok { background: var(--success); }
.scr .seg.on.warm { background: var(--warning); }
.scr .seg.on.hot { background: var(--error); }
.scr .hamburger { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #1a2338; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); cursor: pointer; }
.scr .hamburger:hover { background: #212b42; }
.scr .hamburger.open { border-color: var(--app); }
.scr .hamburger svg { width: 16px; height: 16px; stroke: var(--text-secondary); fill: none; stroke-width: 2; stroke-linecap: round; }
.scr .hamburger.open svg { stroke: var(--app); }

/* menu + flyout */
.scr .menu-dropdown, .scr .menu-flyout { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px; padding: 6px; box-shadow: 0 14px 44px rgba(0,0,0,0.55); }
.scr .menu-dropdown { position: absolute; top: 62px; left: 18px; width: 220px; z-index: 60; display: none; }
.scr .menu-dropdown.open { display: block; }
.scr .menu-item, .scr .flyout-app { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: none; background: none; border-radius: 8px; color: var(--text-secondary); font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; }
.scr .menu-item:hover, .scr .flyout-app:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.scr .menu-item.active { background: var(--app-subtle); color: var(--app); font-weight: 600; }
.scr .menu-item.active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--app); box-shadow: 0 0 8px var(--app-glow); }
.scr .menu-item svg { width: 16px; height: 16px; opacity: 0.6; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scr .menu-item.active svg { opacity: 1; }
.scr .menu-item .chev { margin-left: auto; font: 15px var(--mono); }
.scr .menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.scr .menu-deploy { position: relative; }
.scr .menu-flyout { position: absolute; top: -6px; left: 100%; margin-left: 8px; width: 210px; display: none; }
.scr .menu-deploy.open .menu-flyout { display: block; }
.scr .menu-deploy.open > .menu-item { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.scr .flyout-app { padding: 9px 12px; }
.scr .flyout-dot { width: 8px; height: 8px; border-radius: 50%; }

/* page body */
.scr .main { padding: 32px 36px 40px; position: relative; }
.scr .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.scr .panel-header h2 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.4px; color: var(--text-primary); display: block; }
.scr .panel-header h2::after { display: none; }
.scr .panel-header .actions { display: flex; align-items: center; gap: 8px; }
.scr .section-title { margin: 0 0 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted); }

/* buttons */
.scr .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 14px; background: #1a2338; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); color: var(--text-primary); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.scr .btn:hover { background: #212b42; border-color: rgba(255,255,255,0.18); }
.scr .btn:disabled, .scr .btn.disabled { opacity: 0.4; pointer-events: none; }
.scr .btn-primary { background: linear-gradient(#fb8a3c, #f97316); border-color: #c2410c; box-shadow: inset 0 1px 0 rgba(255,255,255,0.25); color: #1a0d02; font-weight: 600; }
.scr .btn-primary:hover { background: linear-gradient(#fd9a52, #fb8128); border-color: #c2410c; }
.scr .btn-danger { color: #fb7185; }
.scr .btn-danger:hover { background: #2a1d2c; border-color: rgba(251,113,133,0.4); }
.scr .btn-sm { height: 24px; padding: 0 9px; font-size: 12px; border-radius: 3px; }
.scr .btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* fields */
.scr .form-group { margin-bottom: 12px; }
.scr .form-group label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.scr .field { width: 100%; height: 30px; padding: 0 9px; display: flex; align-items: center; background: var(--bg-surface); border: 1px solid var(--field-border); border-radius: 4px; color: var(--text-primary); font-size: 13px; white-space: nowrap; overflow: hidden; }
.scr .field.ph { color: var(--text-muted); }
.scr .field.focus { border-color: var(--app); }
.scr .field.select { justify-content: space-between; padding-right: 9px; }
.scr .field.select::after { content: ''; width: 8px; height: 8px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: rotate(45deg) translate(-2px,-2px); flex: none; margin-left: 10px; }
.scr .field.pw { letter-spacing: 3px; }
.scr .field .caret { display: inline-block; width: 1px; height: 15px; background: var(--text-primary); margin-left: 1px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.scr .select-pop { position: absolute; z-index: 30; background: var(--bg-surface); border: 1px solid var(--field-border); border-radius: 4px; box-shadow: 0 14px 30px rgba(0,0,0,0.5); padding: 3px; font-size: 13px; }
.scr .select-pop div { padding: 5px 9px; border-radius: 3px; color: var(--text-primary); }
.scr .select-pop div.sel { background: #2563eb; color: #fff; }
.scr .error-msg { background: var(--error-bg); border: 1px solid rgba(244,63,94,0.3); border-radius: 4px; padding: 8px 12px; color: var(--error); font-size: 12px; margin-bottom: 12px; }
.scr .text-muted { color: var(--text-muted); font-size: 12px; font-weight: 400; }
.scr .card-sub { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; }
.scr .card-sub code, .scr code { font-family: var(--mono); font-size: 11px; color: var(--text-secondary); background: none; border: none; padding: 0; }
.scr .auto-toggle { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.scr .cbx { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.3); background: var(--bg-surface); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.scr .cbx.on { background: var(--app); border-color: var(--app); }
.scr .cbx.on::after { content: ''; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg) translate(-1px,-1px); }
.scr .cbx.on.red { background: var(--error); border-color: var(--error); }

/* panels */
.scr .settings-card, .scr .table-wrap { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px; }
.scr .settings-card { padding: 14px; margin-bottom: 14px; max-width: 560px; }
.scr .settings-card > .card-title:first-child { margin: -14px -14px 12px; padding: 6px 14px; min-height: 42px; display: flex; align-items: center; gap: 8px; background: var(--panel-bar); border-bottom: 1px solid var(--panel-border); border-radius: 3px 3px 0 0; font-size: 13px; font-weight: 600; }
.scr .settings-row { display: flex; align-items: center; justify-content: space-between; }
.scr .settings-label { font-size: 13px; color: var(--text-secondary); }
.scr .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* tables */
.scr table { width: 100%; border-collapse: collapse; }
.scr th { padding: 8px 12px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); text-align: left; white-space: nowrap; background: var(--panel-bar); border-bottom: 1px solid var(--border); }
.scr td { padding: 8px 12px; font-size: 13px; color: var(--text-secondary); border-bottom: 1px solid var(--border); }
.scr .table-wrap th:first-child, .scr .table-wrap td:first-child { padding-left: 14px; }
.scr .table-wrap th:last-child, .scr .table-wrap td:last-child { padding-right: 14px; }
.scr tr:last-child td { border-bottom: none; }
.scr tbody tr:hover td { background: rgba(255,255,255,0.03); }

/* badges */
.scr .status-pill, .status-pill { display: inline-block; padding: 2px 6px; border-radius: 3px; font: 600 10px/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.5px; }
.status-pill.ok { background: var(--success-bg); color: var(--success); }
.status-pill.warn { background: var(--warning-bg); color: var(--warning); }
.status-pill.err { background: var(--error-bg); color: var(--error); }
.status-pill.muted { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--border); }
.status-pill.info { background: var(--info-bg); color: var(--info); }
.status-pill.acc { background: var(--accent-subtle); color: var(--accent); }

/* empty state */
.scr .empty-state { text-align: center; padding: 28px; font-size: 13px; color: var(--text-muted); }
.scr .empty-state svg { width: 40px; height: 40px; stroke: var(--text-muted); fill: none; stroke-width: 1.5; opacity: 0.4; margin-bottom: 8px; }
.scr .empty-state h3 { margin: 0 0 2px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.scr .empty-state p { margin: 0; }
.scr .empty-state strong { color: var(--text-secondary); }

/* modals */
.scr .modal-overlay { position: absolute; inset: 0; background: rgba(2,6,12,0.7); display: flex; align-items: center; justify-content: center; z-index: 70; padding: 20px; }
.scr .modal-overlay.top { align-items: flex-start; padding-top: 40px; }
.scr .modal { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); padding: 16px; width: 100%; max-width: 480px; position: relative; }
.scr .modal.modal-wide { max-width: 860px; }
.scr .modal.modal-narrow { max-width: 380px; }
.scr .modal > h3:first-child, .scr .modal > .modal-head-row:first-child { margin: -16px -16px 16px; padding: 8px 8px 8px 16px; min-height: 42px; display: flex; align-items: center; gap: 8px; background: var(--panel-bar); border-bottom: 1px solid var(--panel-border); border-radius: 3px 3px 0 0; font-size: 14px; font-weight: 600; color: var(--text-primary); }
.scr .modal-head-row h3 { margin: 0; font-size: 14px; font-weight: 600; }
.mstage { position: relative; background: var(--bg); min-height: 320px; display: flex; align-items: center; justify-content: center; padding: 34px 20px; }
.mstage::before { content: ''; position: absolute; inset: 0; background: rgba(2,6,12,0.7); }
.mstage > .modal { position: relative; }

/* toast */
.scr .toast { position: absolute; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 10px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px; padding: 10px 14px; font-size: 13px; color: var(--text-primary); box-shadow: 0 8px 32px rgba(0,0,0,0.4); z-index: 80; }
.scr .toast.success { border-color: rgba(16,185,129,0.35); }
.scr .toast.error { border-color: rgba(244,63,94,0.35); }
.scr .toast.stack2 { bottom: 70px; }
.toast-row { display: flex; flex-wrap: wrap; gap: 10px; }
.toast-row .toast { position: static; }

/* ── tiles ── */
.scr .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.scr .tile-card { height: 212px; perspective: 1500px; }
.scr .tile-flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4,0.2,0.2,1); }
.scr .tile-card.flipped .tile-flip { transform: rotateY(180deg); }
.scr .tile-face { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: border-color 0.2s; }
.scr .tile-face:hover { border-color: color-mix(in srgb, var(--app) 55%, transparent); }
.scr .tile-back { transform: rotateY(180deg); }
.scr .tile-card-accent { height: 3px; flex: none; background: var(--app); }
.scr .tile-body { flex: 1; padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; cursor: pointer; }
.scr .tile-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.scr .tile-fav { width: 22px; height: 22px; border-radius: 3px; flex: none; }
.scr .tile-name, .scr .tile-back-title { font-size: 15px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr .tile-app, .scr .tile-prod, .scr .tile-blurb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr .tile-app { font-size: 13px; color: var(--text-secondary); }
.scr .tile-prod { font-size: 12px; color: var(--text-muted); }
.scr .tile-blurb { font-size: 11px; color: var(--text-muted); }
.scr .tile-foot { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 6px 14px; background: var(--panel-bar); border-top: 1px solid var(--panel-border); }
.scr .tile-foot-actions { display: flex; align-items: center; gap: 6px; }
.scr .tile-flip-btn, .scr .tile-pencil { display: inline-flex; align-items: center; justify-content: center; background: #1a2338; border: 1px solid rgba(255,255,255,0.12); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); color: var(--text-secondary); cursor: pointer; padding: 0; }
.scr .tile-flip-btn { width: 24px; height: 24px; }
.scr .tile-flip-btn:hover, .scr .tile-pencil:hover { background: #212b42; color: var(--text-primary); }
.scr .tile-flip-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s; }
.scr .tile-flip-btn:hover svg { transform: rotate(-180deg); }
.scr .tile-back-body { flex: 1; padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.scr .tile-back-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.scr .tile-back-actions .btn { width: 100%; }
.scr .tile-progress-wrap { display: flex; align-items: center; gap: 8px; }
.scr .tile-progress { width: 80px; height: 6px; border-radius: 1px; background: var(--bg-surface); overflow: hidden; }
.scr .tile-progress-fill { height: 100%; background: var(--app); border-radius: 1px; transition: width 0.4s ease; }
.scr .tile-progress-pct { font: 500 11px var(--mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); min-width: 30px; }
.scr .tile-pencil { display: none; width: 22px; height: 22px; margin-left: auto; }
.scr .tile-pencil svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scr .tile-grid.organizing .tile-pencil { display: inline-flex; }
.scr .tile-grid.organizing .tile-card { perspective: none; cursor: move; }
.scr .tile-grid.organizing .tile-flip { transform: none !important; }
.scr .tile-grid.organizing .tile-back { display: none; }
.scr .tile-grid.organizing .tile-front { border-style: dashed; border-color: rgba(255,255,255,0.22); }
.scr .tile-grid.organizing .tile-front .tile-body { cursor: move; }
.scr .tile-grid.organizing .tile-foot-actions { opacity: 0.35; pointer-events: none; }
.scr .tile-card.dragging { opacity: 0.4; }
.scr .tile-card.dragging .tile-front { border-color: var(--app); }
.scr .tile-name-input { width: 100%; height: 24px; padding: 0 6px; display: flex; align-items: center; font-size: 15px; font-weight: 600; color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--app); border-radius: 3px; }

/* logs */
.scr .log-view { margin: 0; background: var(--bg-surface); border: 1px solid var(--panel-border); border-radius: 3px; padding: 10px 12px; font: 12px/1.5 var(--mono); color: var(--text-secondary); max-height: 240px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.scr .log-view .lw { color: var(--warning); }
.scr .log-view .le { color: var(--error); }
.scr .log-view .ld { color: var(--text-muted); }

/* framed viewer */
.scr .viewer-overlay { position: absolute; inset: 0; background: var(--bg); z-index: 75; display: flex; flex-direction: column; }
.scr .viewer-bar { height: 42px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; background: var(--panel-bar); border-bottom: 1px solid var(--panel-border); }
.scr .viewer-title { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.scr .viewer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--app); }
.scr .viewer-actions { display: flex; gap: 6px; }
.scr .viewer-frame { flex: 1; position: relative; overflow: hidden; }

/* destroy / env / update / state / access */
.scr .destroy-vols { margin: 4px 0 14px; }
.scr .destroy-vols-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }
.scr .destroy-vol { font: 12px var(--mono); color: var(--text-primary); background: var(--bg-surface); border: 1px solid var(--panel-border); border-radius: 3px; padding: 6px 10px; margin-bottom: 4px; }
.scr .destroy-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.scr .destroy-check strong { color: var(--error); }
.scr .code-editor { width: 100%; min-height: 250px; margin: 0; font: 12px/1.5 var(--mono); background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--app); border-radius: 4px; padding: 10px 12px; white-space: pre; overflow: auto; }
.scr .code-editor .ck { color: #fb9a5a; }
.scr .code-editor .cm { color: var(--text-muted); }
.scr .env-alert { position: relative; display: inline-flex; align-items: center; color: var(--error); cursor: help; }
.scr .env-alert svg { width: 16px; height: 16px; }
.scr .env-alert-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: 300px; padding: 10px 12px; background: var(--bg-overlay); border: 1px solid rgba(244,63,94,0.4); border-radius: 4px; color: var(--text-primary); font-size: 12px; font-weight: 400; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: opacity 0.15s; }
.scr .env-alert-pop code { color: var(--warning); }
.scr .env-alert:hover .env-alert-pop, .scr .env-alert.show .env-alert-pop { opacity: 1; visibility: visible; }
.scr .update-status { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.scr .update-status.avail { color: var(--app); }
.scr .update-status.ok { color: var(--success); }
.scr .update-status.warn { color: var(--warning); }
.scr .kv-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.scr .kv-row:last-child { border-bottom: none; }
.scr .kv-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; }
.scr .kv-val { font-size: 13px; color: var(--text-primary); text-align: right; word-break: break-all; }
.scr .kv-val.mono { font-size: 12px; }
.scr .state-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 4px; }
.scr .state-actions .btn { width: 100%; }
.scr .access-list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.scr .access-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 3px; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.scr .access-row:hover { background: rgba(255,255,255,0.04); }

/* sign-in page */
.scr.login { min-height: 560px; display: flex; align-items: center; justify-content: center; }
.scr .const { position: absolute; inset: 0; width: 100%; height: 100%; }
.scr .login-card { position: relative; z-index: 1; width: 380px; background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px; padding: 32px 28px 26px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.scr .login-card .brand { text-align: center; margin-bottom: 22px; }
.scr .login-card .brand img { width: 64px; height: 64px; }
.scr .login-card .brand p { margin: 8px 0 0; font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }
.scr .login-card .btn { width: 100%; height: 34px; margin-top: 6px; }
.scr .setup-note { text-align: center; font-size: 13px; color: var(--text-secondary); margin: 0 0 18px; }

/* ── sidebar app shell (anvil, atlas, aperture...) ── */
.scr.shell { display: flex; min-height: 640px; }
.scr .sidebar { width: 230px; flex: none; display: flex; flex-direction: column; background: rgba(10,15,26,0.85); border-right: 1px solid var(--border); position: relative; z-index: 2; }
.scr .sidebar .logo-lockup { padding: 22px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; }
.scr .sidebar .logo-lockup .mark { width: 40px; height: 40px; }
.scr .sidebar .wordmark { display: flex; flex-direction: column; line-height: 1; }
.scr .sidebar .wordmark .p { margin-top: 6px; }
.scr .nav-menu { list-style: none; margin: 0; padding: 12px 10px; flex: 1; }
.scr .nav-menu li { margin-bottom: 2px; }
.scr .nav-link { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-decoration: none; }
.scr .nav-link svg { width: 16px; height: 16px; opacity: 0.6; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scr .nav-link:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.scr .nav-link.active { background: var(--accent-subtle); color: var(--app); font-weight: 600; }
.scr .nav-link.active svg { opacity: 1; }
.scr .nav-link.active::before { content: ''; position: absolute; left: 0; top: 15%; height: 70%; width: 3px; background: var(--app); border-radius: 0 4px 4px 0; box-shadow: 0 0 8px var(--accent-glow); }
.scr .nav-link.gone { display: none; }
.scr .sidebar-footer { padding: 14px 16px; border-top: 1px solid var(--border); }
.scr .sidebar-footer p { margin: 0 0 4px; font: 10px var(--mono); color: var(--text-muted); text-align: center; letter-spacing: 0.3px; }
.scr .btn-logout { display: block; width: 100%; height: 24px; margin-bottom: 10px; background: #1a2338; border: 1px solid rgba(255,255,255,0.12); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; }
.scr .btn-logout:hover { background: #2a1d2c; border-color: rgba(251,113,133,0.4); color: #fb7185; }
.scr .sidebar-note { padding: 7px 10px; margin-bottom: 6px; font-size: 11px; font-weight: 500; border-radius: 3px; line-height: 1.4; }
.scr .sidebar-note.success { background: var(--success-bg); color: var(--success); border: 1px solid rgba(16,185,129,0.2); }
.scr .sidebar-note.error { background: var(--error-bg); color: #fb7185; border: 1px solid rgba(244,63,94,0.2); }
.scr .sidebar-note.info { background: var(--info-bg); color: var(--info); border: 1px solid rgba(96,165,250,0.2); }
.scr .main-content { flex: 1; min-width: 0; padding: 32px 36px 40px; position: relative; }
.scr .main-content .panel-header { display: block; margin-bottom: 20px; }
.scr .panel-header h1 { margin: 0 0 2px; font-size: 24px; font-weight: 600; letter-spacing: -0.4px; color: var(--text-primary); line-height: 1.3; }
.scr .panel-header p { margin: 0; font-size: 13px; color: var(--text-muted); }
.scr .panel-header .hbtns { float: right; display: flex; gap: 8px; margin-top: 4px; }
.scr .card { background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 4px; padding: 14px; position: relative; margin-bottom: 14px; }
.scr .card > h3:first-child, .scr .card > .section-header:first-child { margin: -14px -14px 12px; padding: 6px 14px; min-height: 42px; display: flex; align-items: center; gap: 8px; background: var(--panel-bar); border-bottom: 1px solid var(--panel-border); border-radius: 3px 3px 0 0; font-size: 13px; font-weight: 600; color: var(--text-primary); }
.scr .card > h3:first-child .r, .scr .card > .section-header:first-child .r { margin-left: auto; display: flex; gap: 6px; }
.scr .section-header { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.scr .section-header h3 { margin: 0; font-size: 13px; font-weight: 600; }
.scr .card.flush { padding: 0; }
.scr .item-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
.scr .item-row:last-child { border-bottom: none; }
.scr .item-row:hover { background: color-mix(in srgb, var(--app) 3%, transparent); }
.scr .item-info { flex: 1; min-width: 0; }
.scr .item-info strong { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.scr .item-desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.scr .item-meta { font: 12px var(--mono); color: var(--text-muted); margin-top: 2px; }
.scr .item-actions { display: flex; gap: 6px; flex: none; align-items: center; }
.scr .badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; vertical-align: 1px; }
.scr .badge-accent { background: var(--accent-subtle); color: var(--app); }
.scr .badge-muted { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--panel-border); }
.scr .badge-success { background: var(--success-bg); color: var(--success); }
.scr .badge-danger { background: var(--error-bg); color: #fb7185; }
.scr .badge-info { background: var(--info-bg); color: var(--info); }
.scr .badge-warning { background: rgba(234,179,8,0.12); color: #eab308; }
.scr .list-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.scr .list-search { flex: 1; min-width: 240px; position: relative; height: 30px; display: flex; align-items: center; padding: 0 9px 0 32px; background: var(--bg-surface); border: 1px solid var(--field-border); border-radius: 4px; font-size: 13px; color: var(--text-muted); }
.scr .list-search::before { content: ''; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235c6f8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; }
.scr .list-search.typed { color: var(--text-primary); border-color: var(--app); }
.scr .sort-control { position: relative; flex: none; }
.scr .sort-btn { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #1a2338; border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); color: var(--text-secondary); font-size: 13px; white-space: nowrap; }
.scr .sort-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; }
.scr .sort-control.open .sort-btn { border-color: var(--app); color: var(--text-primary); }
.scr .pop-menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 150px; background: var(--bg-surface); border: 1px solid var(--panel-border); border-radius: 3px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 50; padding: 4px; }
.scr .pop-menu div { padding: 7px 10px; border-radius: 3px; font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.scr .pop-menu div:hover, .scr .pop-menu div.on { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.scr .hint-box { background: var(--bg-surface); border: 1px solid var(--panel-border); border-radius: 4px; padding: 10px 12px; font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.scr .hint-box b { display: block; color: var(--text-primary); font-size: 12px; margin-bottom: 4px; }
.scr .hint-box ul { margin: 0; padding-left: 16px; }
.scr .hint-box li { margin: 2px 0; }
.scr small.help, .scr .help { display: block; margin-top: 4px; font-size: 11px; color: var(--text-muted); }
.scr textarea.field, .scr .field.area { height: auto; min-height: 70px; align-items: flex-start; padding: 7px 9px; white-space: pre-wrap; font-family: var(--mono); font-size: 12px; }
.scr .form-actions { display: flex; gap: 8px; }
.scr details.adv summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; margin: 4px 0 10px; }

/* long commands inside mock tables wrap instead of stretching the table */
.scr td .copy code, .scr .copy code { white-space: pre-wrap; word-break: break-all; overflow: visible; }
.scr td .copy { max-width: 100%; }

/* sidebar-app headers (h1 + subtitle + floated buttons) are block, not the array topbar flex row */
.scr .panel-header:has(> h1) { display: block; }
.scr .panel-header:has(> h1)::after { content: ''; display: block; clear: both; }