/* ============================================================================
   MERIDIAN MMOC v12.4 — operator console design system
   Titanium surfaces · signal cyan/emerald accents · 8pt rhythm
   ========================================================================== */

:root {
  /* surfaces */
  --bg:            #05070b;
  --bg-2:          #070a11;
  --pane:          rgba(14, 20, 31, 0.78);
  --pane-solid:    #0c121c;
  --pane-hi:       rgba(24, 33, 49, 0.72);
  --well:          rgba(4, 7, 12, 0.66);
  --line:          rgba(148, 178, 220, 0.10);
  --line-2:        rgba(148, 178, 220, 0.20);
  --line-3:        rgba(148, 178, 220, 0.34);

  /* ink */
  --txt:           #e9effa;
  --txt-2:         #b3c1d6;
  --dim:           #8595ad;
  --faint:         #5b6a82;

  /* signal */
  --acc:           #4cc2ff;
  --acc-ink:       #d6efff;
  --ok:            #35e0a1;
  --ok-ink:        #ccffec;
  --warn:          #ffb84d;
  --bad:           #ff5f73;
  --violet:        #b58cff;

  /* geometry */
  --r-xl: 20px; --r-lg: 16px; --r-md: 12px; --r-sm: 9px; --r-pill: 999px;
  --pad: 14px;

  /* type */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* depth */
  --sh-1: 0 1px 0 rgba(255,255,255,.05) inset, 0 10px 30px -22px #000;
  --sh-2: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -34px #000;
  --sh-3: 0 40px 100px -50px #000, 0 1px 0 rgba(255,255,255,.07) inset;
  --glow-acc: 0 0 0 1px rgba(76,194,255,.35), 0 12px 34px -16px rgba(76,194,255,.55);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 400 13px/1.5 var(--sans);
  letter-spacing: .002em;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ambient light + grain ------------------------------------------------- */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 640px at 8% -12%, rgba(76,194,255,.15), transparent 62%),
    radial-gradient(880px 560px at 96% -6%, rgba(181,140,255,.12), transparent 58%),
    radial-gradient(900px 620px at 62% 116%, rgba(53,224,161,.09), transparent 62%),
    linear-gradient(180deg, #060910 0%, #04060a 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(rgba(148,178,220,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,178,220,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 88%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 88%);
}

::selection { background: rgba(76,194,255,.28); color: #fff; }
:focus-visible { outline: 2px solid rgba(76,194,255,.65); outline-offset: 2px; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(148,178,220,.22) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(148,178,220,.20); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(148,178,220,.34); background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ================================================================ shell */
#app {
  position: relative; z-index: 1; height: 100vh; height: 100dvh;
  display: grid; gap: 12px; padding: 12px;
  grid-template-columns: 322px minmax(400px, 1fr) 376px;
  grid-template-rows: auto minmax(0, 1fr) 198px;
  grid-template-areas:
    "top top top"
    "left stage right"
    "console console console";
}

.panel {
  position: relative;
  background: var(--pane);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0; overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.panel::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  pointer-events: none;
}
.panel > header {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}
.panel > header h2 {
  margin: 0; font: 600 10px/1 var(--sans); letter-spacing: .18em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap;
}
.panel > .body { padding: 12px 13px; overflow: auto; flex: 1 1 auto; min-height: 0; }
.spacer { flex: 1 1 auto; }
#leftPanel { grid-area: left; }
#rightPanel { grid-area: right; }
.hr { height: 1px; background: var(--line); margin: 13px -13px; border: 0; }

/* ================================================================ atoms */
.dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--faint); box-shadow: 0 0 0 3px rgba(91,106,130,.12);
}
.dot.live { background: var(--ok); box-shadow: 0 0 0 3px rgba(53,224,161,.14), 0 0 12px rgba(53,224,161,.7); animation: breathe 2.6s ease-in-out infinite; }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(255,184,77,.14); }
.dot.bad  { background: var(--bad);  box-shadow: 0 0 0 3px rgba(255,95,115,.14); }
@keyframes breathe { 0%,100% { opacity: 1; } 50% { opacity: .38; } }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 23px; padding: 0 9px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: rgba(255,255,255,.035);
  font: 600 9.5px/1 var(--mono); letter-spacing: .10em; text-transform: uppercase;
  color: var(--dim); white-space: nowrap;
}
.chip.on   { color: var(--ok-ink); border-color: rgba(53,224,161,.42); background: rgba(53,224,161,.13); }
.chip.warn { color: #ffe6bd; border-color: rgba(255,184,77,.42); background: rgba(255,184,77,.12); }
.chip.bad  { color: #ffd9df; border-color: rgba(255,95,115,.42); background: rgba(255,95,115,.12); }
.chip.mono { text-transform: none; letter-spacing: .04em; }

.lbl {
  display: block; margin: 0 0 8px;
  font: 600 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
}

/* buttons */
button, .btn {
  appearance: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  color: var(--txt-2);
  font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  transition: transform .14s cubic-bezier(.4,0,.2,1), background .16s, border-color .16s, color .16s, box-shadow .16s;
}
button:hover, .btn:hover { background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)); border-color: var(--line-3); color: var(--txt); }
button:active, .btn:active { transform: translateY(1px) scale(.994); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

button.primary {
  color: #04121c; border-color: transparent;
  background: linear-gradient(180deg, #7cd6ff, #37b3f0 65%, #2a9ddb);
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 14px 30px -16px rgba(76,194,255,.75);
}
button.primary:hover { background: linear-gradient(180deg, #96e0ff, #48c0ff 65%, #33a8e6); color: #04121c; }
button.good {
  color: var(--ok-ink); border-color: rgba(53,224,161,.4);
  background: linear-gradient(180deg, rgba(53,224,161,.24), rgba(53,224,161,.08));
}
button.good:hover { background: linear-gradient(180deg, rgba(53,224,161,.34), rgba(53,224,161,.14)); }
button.bad {
  color: #ffd9df; border-color: rgba(255,95,115,.36);
  background: linear-gradient(180deg, rgba(255,95,115,.20), rgba(255,95,115,.06));
}
button.bad:hover { background: linear-gradient(180deg, rgba(255,95,115,.3), rgba(255,95,115,.12)); }
button.ghost { background: transparent; }
button.ghost:hover { background: rgba(255,255,255,.055); }
button.mini { min-height: 27px; padding: 0 9px; font-size: 9.5px; border-radius: var(--r-sm); }
button.wide { width: 100%; }
button.icon { padding: 0 10px; gap: 0; }
button.icon svg { width: 15px; height: 15px; }

/* inputs */
input, select, textarea {
  appearance: none; min-height: 34px; padding: 0 11px;
  border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: var(--well); color: var(--txt);
  font: 500 12px/1 var(--sans);
  transition: border-color .16s, background .16s, box-shadow .16s;
  min-width: 0;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover { border-color: var(--line-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: rgba(76,194,255,.6); background: rgba(6,11,18,.9);
  box-shadow: 0 0 0 3px rgba(76,194,255,.12);
}
select {
  padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238595ad' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 12px;
}
select option { background: #0b111a; color: var(--txt); }
input.mono, textarea.mono, select.mono, .mono { font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; height: 22px; padding: 0;
  background: transparent; border: 0; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: rgba(148,178,220,.22); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: #cfe9ff; border: 1px solid rgba(76,194,255,.9);
  box-shadow: 0 0 0 3px rgba(76,194,255,.16), 0 2px 6px rgba(0,0,0,.6);
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 99px; background: rgba(148,178,220,.22); }
input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #cfe9ff; border: 1px solid rgba(76,194,255,.9); }

.row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row.tight { gap: 6px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }

/* ================================================================ topbar */
#top {
  grid-area: top;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px 9px 12px; min-height: 60px;
  background: linear-gradient(180deg, rgba(17,24,36,.86), rgba(11,16,25,.78));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-2); backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.brand { display: flex; align-items: center; gap: 10px; padding-right: 4px; }
.mark {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: linear-gradient(150deg, rgba(76,194,255,.9), rgba(53,224,161,.75));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 10px 24px -14px rgba(76,194,255,.9);
}
.mark svg { width: 16px; height: 16px; display: block; }
.brand b {
  display: block; font: 700 13.5px/1 var(--sans); letter-spacing: .30em;
  background: linear-gradient(92deg, #ffffff, #a8dcff 58%, #6ef0c4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand span { display: block; margin-top: 4px; font: 600 8.5px/1 var(--mono); letter-spacing: .22em; color: var(--faint); }

.kpis { display: flex; align-items: center; gap: 4px; min-width: 0; }
.kpi {
  display: flex; flex-direction: column; gap: 3px; justify-content: center;
  padding: 5px 11px; border-radius: 10px; min-width: 60px;
  border: 1px solid transparent; transition: background .16s, border-color .16s;
}
.kpi:hover { background: rgba(255,255,255,.035); border-color: var(--line); }
.kpi i { font: 600 8.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); font-style: normal; }
.kpi b { font: 600 14px/1 var(--mono); color: var(--txt); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.kpi b.ok { color: var(--ok); } .kpi b.warn { color: var(--warn); } .kpi b.acc { color: var(--acc); }
.kpi + .kpi { border-left: 1px solid var(--line); border-radius: 0 10px 10px 0; }

.hgroup { display: flex; align-items: center; gap: 7px; }
#sidSel { min-width: 210px; max-width: 260px; font-family: var(--mono); font-size: 11px; }
#msisdn { width: 158px; font-family: var(--mono); font-size: 11px; }
#deployBtn { min-height: 34px; }
#pairBtn { position: relative; }
#pairBtn .dot { background: var(--acc); box-shadow: 0 0 10px rgba(76,194,255,.9); animation: breathe 2.2s ease-in-out infinite; }

/* ================================================================ ladder */
#ladder { display: flex; flex-direction: column; gap: 6px; }
.rung {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: rgba(255,255,255,.018);
  cursor: pointer; transition: transform .14s, border-color .16s, background .16s;
}
.rung:hover { border-color: var(--line-3); background: rgba(255,255,255,.045); transform: translateX(2px); }
.rung .idx {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font: 700 10.5px/1 var(--mono); color: var(--faint);
  background: rgba(148,178,220,.07); border: 1px solid var(--line);
}
.rung .nm { font: 600 11px/1.2 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--txt-2); }
.rung .sub { font: 500 9px/1 var(--mono); letter-spacing: .08em; color: var(--faint); text-transform: uppercase; }
.rung.done { border-color: rgba(53,224,161,.28); background: linear-gradient(180deg, rgba(53,224,161,.10), rgba(53,224,161,.02)); }
.rung.done .idx { color: #04140d; background: linear-gradient(180deg, #6bf0be, #2fcb92); border-color: transparent; }
.rung.done .nm { color: #d9fff0; }
.rung.done .sub { color: rgba(53,224,161,.85); }
.rung.next { border-color: rgba(76,194,255,.42); background: linear-gradient(180deg, rgba(76,194,255,.12), rgba(76,194,255,.03)); box-shadow: 0 0 0 1px rgba(76,194,255,.10), 0 16px 34px -26px rgba(76,194,255,.8); }
.rung.next .idx { color: #04121c; background: linear-gradient(180deg, #8fd8ff, #45b8f5); border-color: transparent; }
.rung.next .nm { color: #eaf7ff; }
.rung.next .sub { color: rgba(76,194,255,.9); }

/* mirror control block */
.mctl { display: grid; grid-template-columns: 1fr 92px; gap: 6px; }
.slider { display: flex; align-items: center; gap: 8px; padding: 0 9px; height: 34px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--well); }
.slider span { font: 600 9px/1 var(--mono); letter-spacing: .1em; color: var(--faint); }
.slider output { font: 600 10.5px/1 var(--mono); color: var(--acc); min-width: 22px; text-align: right; }
.slider input { flex: 1 1 auto; min-width: 0; }

.opgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.opgrid button { min-height: 44px; flex-direction: column; gap: 4px; font-size: 8.5px; padding: 4px 2px; letter-spacing: .08em; }
.opgrid svg { width: 15px; height: 15px; opacity: .8; }
.opgrid button:hover svg { opacity: 1; }

details.forge { border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,.015); overflow: hidden; }
details.forge > summary {
  list-style: none; cursor: pointer; padding: 9px 11px;
  display: flex; align-items: center; gap: 7px;
  font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
details.forge > summary::-webkit-details-marker { display: none; }
details.forge > summary::after { content: "+"; margin-left: auto; color: var(--faint); font: 500 13px/1 var(--mono); }
details.forge[open] > summary::after { content: "−"; }
details.forge > .inner { padding: 0 11px 11px; display: grid; gap: 6px; }

/* ================================================================ stage */
#mirrorPanel { grid-area: stage; }
#mirrorPanel .body {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px; padding: 12px 14px 12px; overflow: hidden;
}
#mirrorWrap {
  position: relative; display: grid; place-items: center;
  min-height: 0; overflow: hidden;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(76,194,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(4,8,14,.5), rgba(4,8,14,.2));
  border: 1px solid var(--line);
}
#mirrorWrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(60% 50% at 50% 100%, rgba(53,224,161,.10), transparent 70%);
}

.phone {
  position: relative; height: 100%; aspect-ratio: 1080 / 2400; max-width: 100%;
  padding: 9px; border-radius: 30px;
  background: linear-gradient(160deg, #232a36, #10141c 42%, #05070b);
  box-shadow: 0 40px 90px -44px #000, 0 0 0 1px rgba(148,178,220,.20), 0 1px 0 rgba(255,255,255,.15) inset;
  display: flex;
}
.phone::before {  /* side buttons */
  content: ""; position: absolute; right: -2px; top: 22%; width: 2px; height: 8%;
  border-radius: 2px; background: rgba(148,178,220,.4);
  box-shadow: 0 40px 0 rgba(148,178,220,.3), 0 -52px 0 rgba(148,178,220,.24);
}
#screen {
  position: relative; flex: 1 1 auto; min-width: 0;
  border-radius: 22px; overflow: hidden; background: #05070a;
  display: grid; place-items: center;
  box-shadow: 0 0 0 1px rgba(0,0,0,.9) inset;
}
#screen.idle { background: radial-gradient(circle at 50% 40%, #0b1220, #04060a 70%); }
#mj { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 1; transition: opacity .3s; }
#screen.idle #mj { opacity: .34; filter: saturate(.5); }

/* notch + scanline + hud */
.notch {
  position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 15px; border-radius: 0 0 12px 12px; background: #05070b; z-index: 4;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.scanline {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px);
  mix-blend-mode: multiply;
}
#screen.live .scanline { animation: scan 7s linear infinite; }
@keyframes scan { 0% { background-position: 0 0; } 100% { background-position: 0 -140px; } }

#idleMsg {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center;
  gap: 8px; text-align: center; padding: 24px 18px; transition: opacity .3s;
}
#idleMsg b { font: 600 10px/1.4 var(--mono); letter-spacing: .16em; color: var(--txt-2); }
#idleMsg small { font: 500 9.5px/1.6 var(--sans); color: var(--faint); max-width: 190px; }
#idleMsg code { font: 500 9px/1 var(--mono); color: var(--acc); }
#screen.live #idleMsg { opacity: 0; pointer-events: none; }

#mirrorHud {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 5;
  display: flex; align-items: center; gap: 6px;
  font: 600 8.5px/1 var(--mono); letter-spacing: .1em; color: rgba(233,239,250,.82);
  text-transform: uppercase;
}
#mirrorHud span {
  padding: 4px 7px; border-radius: 7px;
  background: rgba(5,8,13,.72); border: 1px solid rgba(148,178,220,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#mirrorHud b { color: var(--ok); }

#tapLayer { position: absolute; inset: 0; z-index: 4; cursor: crosshair; }
.ripple {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid rgba(76,194,255,.95); background: rgba(76,194,255,.22);
  pointer-events: none; animation: ripple .7s ease-out forwards;
}
@keyframes ripple { to { transform: scale(4.2); opacity: 0; } }

.tele { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tele .chip { text-transform: none; letter-spacing: .04em; font-size: 9.5px; }
.dock { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dock button { min-height: 42px; }

/* ================================================================ right rail */
.otpCard {
  position: relative; border-radius: var(--r-lg); padding: 13px 14px;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01));
  overflow: hidden;
}
.otpCard.live {
  border-color: rgba(53,224,161,.4);
  background: linear-gradient(180deg, rgba(53,224,161,.16), rgba(53,224,161,.03));
  box-shadow: 0 0 0 1px rgba(53,224,161,.10), 0 22px 50px -34px rgba(53,224,161,.75);
}
.otpCard.live::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 120% at 100% 0%, rgba(53,224,161,.18), transparent 62%);
}
.otpCard .code {
  font: 600 30px/1 var(--mono); letter-spacing: .10em; color: var(--txt);
  font-variant-numeric: tabular-nums; cursor: pointer; user-select: all;
  text-shadow: 0 0 26px rgba(53,224,161,.24);
}
.otpCard.live .code { color: #d6ffef; }
.otpCard.empty .code { color: rgba(148,178,220,.28); text-shadow: none; }
.otpCard .meta {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font: 500 9.5px/1 var(--mono); letter-spacing: .08em; color: var(--dim);
}
.otpCard .meta time { margin-left: auto; color: var(--faint); }
.otpCard .tag { position: absolute; top: 10px; right: 12px; }

.otpHist { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 96px; overflow: auto; }
.otpHist div {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px;
  background: rgba(255,255,255,.022); font: 500 9.5px/1 var(--mono); color: var(--faint);
}
.otpHist b { margin-left: auto; color: var(--txt-2); letter-spacing: .08em; cursor: pointer; }
.otpHist b:hover { color: var(--ok); }

.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 9px; border: 1px solid var(--line); background: var(--well); }
.seg button {
  min-height: 22px; padding: 0 8px; border: 0; background: transparent; color: var(--faint);
  font: 600 8.5px/1 var(--sans); letter-spacing: .1em; border-radius: 7px;
}
.seg button:hover { background: rgba(255,255,255,.06); color: var(--txt-2); }
.seg button.on { background: rgba(76,194,255,.18); color: #d6efff; box-shadow: 0 0 0 1px rgba(76,194,255,.28) inset; }

.feed { display: flex; flex-direction: column; gap: 5px; min-height: 0; }
.feed .item {
  border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.022);
  padding: 7px 9px; animation: fadeUp .22s ease-out;
}
.feed .item .r1 { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.feed .k {
  font: 700 8px/1 var(--mono); letter-spacing: .1em; padding: 3px 6px; border-radius: 5px;
  background: rgba(148,178,220,.12); color: var(--dim); text-transform: uppercase;
}
.feed .k.sms { background: rgba(53,224,161,.16); color: #a9ffdf; }
.feed .k.cred { background: rgba(255,184,77,.16); color: #ffe0ad; }
.feed .k.ui { background: rgba(181,140,255,.16); color: #ddc9ff; }
.feed .app { font: 500 9.5px/1 var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed .r1 time { margin-left: auto; font: 500 9px/1 var(--mono); color: var(--faint); }
.feed .v { font: 500 11px/1.45 var(--mono); color: var(--txt-2); word-break: break-word; }
.feed .v mark { background: rgba(53,224,161,.24); color: #dbfff1; border-radius: 4px; padding: 0 3px; }
.feed:empty::after {
  content: "no captures yet — arm 2FA and wait for traffic";
  display: block; padding: 14px 10px; text-align: center;
  font: 500 9.5px/1.5 var(--mono); color: var(--faint);
  border: 1px dashed var(--line-2); border-radius: 10px;
}

.brief {
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--well);
  padding: 10px 11px; font: 500 11px/1.6 var(--mono); color: var(--txt-2);
  max-height: 168px; overflow: auto; white-space: pre-wrap; word-break: break-word;
}
.brief em { color: var(--faint); font-style: normal; }
.brief .model { display: block; margin-top: 8px; color: var(--violet); font-size: 9.5px; letter-spacing: .06em; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font: 500 10px/1.5 var(--mono); }
.kv i { color: var(--faint); font-style: normal; letter-spacing: .08em; text-transform: uppercase; font-size: 9px; }
.kv b { color: var(--txt-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================ console */
#console { grid-area: console; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 12px; min-height: 0; }
#log {
  font: 500 11px/1.62 var(--mono); padding: 10px 13px; overflow: auto; min-height: 0; flex: 1 1 auto;
  background: linear-gradient(180deg, rgba(4,7,12,.5), transparent 40%);
}
#log > div { display: grid; grid-template-columns: 62px 62px 1fr; gap: 9px; padding: 1px 0; }
#log time { color: var(--faint); font-variant-numeric: tabular-nums; }
#log .lvl { color: var(--dim); letter-spacing: .06em; font-size: 9.5px; padding-top: 2px; }
#log .lvl.OK { color: var(--ok); } #log .lvl.ERROR { color: var(--bad); } #log .lvl.WARN { color: var(--warn); }
#log .lvl.AI { color: var(--violet); } #log .lvl.HARVEST { color: #9df0cf; } #log .lvl.CONTROL { color: #9fd4ff; }
#log p { margin: 0; color: #b9c8dd; white-space: pre-wrap; word-break: break-word; }
#log p b { color: #fff; font-weight: 600; }

#quick .body { display: flex; flex-direction: column; gap: 7px; overflow: auto; }

/* ================================================================ modal */
.modal {
  position: fixed; inset: 0; z-index: 120; display: none;
  place-items: center; padding: 20px;
  background: rgba(3,5,10,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.modal.open { display: grid; animation: fadeIn .18s ease-out; }
.modal .sheet {
  width: min(430px, 100%); max-height: 92vh; overflow: auto;
  border-radius: var(--r-xl); border: 1px solid var(--line-2);
  background: linear-gradient(175deg, rgba(21,29,43,.98), rgba(8,12,19,.99));
  box-shadow: var(--sh-3); padding: 20px;
  animation: popIn .22s cubic-bezier(.2,.9,.3,1.2);
}
.modal .sheet > header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.modal .sheet h3 { margin: 0; font: 700 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--txt); }
.modal .sheet .x { margin-left: auto; min-height: 26px; width: 26px; padding: 0; border-radius: 8px; font-size: 13px; }
.modal .lead { margin: 6px 0 16px; font: 500 11px/1.6 var(--sans); color: var(--dim); }
.qrBox {
  position: relative; display: grid; place-items: center; padding: 14px; margin-bottom: 14px;
  background: #fff; border-radius: var(--r-lg); min-height: 216px;
}
.qrBox img { display: block; width: 100%; max-width: 236px; height: auto; image-rendering: pixelated; border-radius: 4px; }
.qrBox .skel {
  position: absolute; inset: 14px; border-radius: 8px;
  background: linear-gradient(100deg, #eef2f7 20%, #f8fafc 40%, #eef2f7 60%);
  background-size: 200% 100%; animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.steps { display: grid; gap: 2px; margin-bottom: 14px; }
.step { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.step:first-child { border-top: 0; }
.step .n {
  width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(76,194,255,.14); border: 1px solid rgba(76,194,255,.34);
  color: #a9ddff; font: 700 10.5px/1 var(--mono);
}
.step b { display: block; font: 600 11.5px/1.35 var(--sans); color: var(--txt-2); }
.step span { font: 500 10.5px/1.5 var(--sans); color: var(--faint); }
.pairState {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255,255,255,.025);
  font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
}
.pairState.on { color: var(--ok-ink); border-color: rgba(53,224,161,.4); background: rgba(53,224,161,.10); }
.linkBox {
  margin-top: 10px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--well); font: 500 9.5px/1.5 var(--mono); color: var(--dim);
  word-break: break-all; max-height: 62px; overflow: auto;
}

/* ================================================================ toast */
#toasts {
  position: fixed; right: 16px; bottom: 16px; z-index: 130;
  display: flex; flex-direction: column; gap: 7px; align-items: flex-end; pointer-events: none;
}
.toast {
  padding: 9px 13px; border-radius: 11px; max-width: 380px;
  border: 1px solid var(--line-2); background: rgba(11,16,25,.96);
  font: 600 10.5px/1.45 var(--mono); color: var(--txt);
  box-shadow: 0 20px 44px -26px #000; animation: slideIn .22s ease-out;
}
.toast.ok { border-color: rgba(53,224,161,.5); color: var(--ok-ink); }
.toast.err { border-color: rgba(255,95,115,.55); color: #ffdbe1; }
.toast.fade { opacity: 0; transform: translateY(6px); transition: .32s; }
@keyframes slideIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(4px); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.97) translateY(6px); } }

/* ================================================================ gate */
#gate {
  position: fixed; inset: 0; z-index: 140; display: grid; place-items: center;
  background: rgba(3,5,10,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding: 20px;
}
#gate.hide { display: none; }
#gate .card {
  width: min(372px, 100%); padding: 28px 26px; border-radius: 22px;
  border: 1px solid var(--line-2);
  background: linear-gradient(172deg, rgba(23,31,46,.97), rgba(8,12,19,.99));
  box-shadow: var(--sh-3); text-align: center;
}
#gate .mark { margin: 0 auto 14px; width: 40px; height: 40px; border-radius: 12px; }
#gate .mark svg { width: 21px; height: 21px; }
#gate h1 {
  margin: 0 0 6px; font: 700 19px/1 var(--sans); letter-spacing: .30em;
  background: linear-gradient(92deg, #fff, #96d9ff 58%, #6ef0c4);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#gate p { margin: 0 0 20px; font: 600 9px/1 var(--mono); letter-spacing: .22em; color: var(--faint); text-transform: uppercase; }
#gate input { width: 100%; text-align: center; font-family: var(--mono); letter-spacing: .12em; min-height: 42px; font-size: 12px; margin-bottom: 10px; }
#gate button { width: 100%; min-height: 42px; }
#gate .err { min-height: 15px; margin-top: 10px; font: 600 10px/1.4 var(--mono); color: var(--bad); }
#gate small { display: block; margin-top: 16px; font: 500 9px/1.7 var(--mono); color: var(--faint); letter-spacing: .05em; }

/* ================================================================ mobile nav */
#tabbar { display: none; }

/* ================================================================ responsive */
@media (max-width: 1560px) {
  #app { grid-template-columns: 292px minmax(340px, 1fr) 348px; }
  .kpi { min-width: 54px; padding: 4px 9px; }
  #sidSel { min-width: 168px; }
}
@media (max-width: 1340px) {
  #app { grid-template-columns: 268px minmax(300px, 1fr) 320px; gap: 10px; padding: 10px; }
  .brand span { display: none; }
  #console { grid-template-columns: minmax(0, 1fr) 330px; }
  .otpCard .code { font-size: 26px; }
}
@media (max-width: 1180px) {
  #app {
    grid-template-columns: 1fr; grid-template-areas: "top" "stage" "left" "right" "console";
    grid-template-rows: auto auto auto auto auto; height: auto; min-height: 100dvh;
    overflow: visible; padding-bottom: 76px;
  }
  body { overflow-x: hidden; overflow-y: auto; }
  #app > * { min-width: 0; }
  .panel > .body { overflow: visible; }
  .phone { height: min(62vh, 560px); }
  #console { grid-template-columns: 1fr; }
  #log { min-height: 220px; max-height: 44vh; }
  /* tab navigation */
  #tabbar {
    position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 5px;
    border-radius: 16px; border: 1px solid var(--line-2);
    background: rgba(10,15,24,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px -30px #000;
  }
  #tabbar button {
    flex-direction: column; gap: 4px; min-height: 46px; border: 0; background: transparent;
    color: var(--faint); font-size: 8.5px; letter-spacing: .1em; border-radius: 11px;
  }
  #tabbar button svg { width: 17px; height: 17px; }
  #tabbar button.on { background: rgba(76,194,255,.16); color: #d6efff; box-shadow: 0 0 0 1px rgba(76,194,255,.26) inset; }
  body[data-tab="stage"] #leftPanel, body[data-tab="stage"] #rightPanel, body[data-tab="stage"] #console { display: none; }
  body[data-tab="ops"] #mirrorPanel, body[data-tab="ops"] #rightPanel, body[data-tab="ops"] #console { display: none; }
  body[data-tab="intel"] #mirrorPanel, body[data-tab="intel"] #leftPanel, body[data-tab="intel"] #console { display: none; }
  body[data-tab="log"] #mirrorPanel, body[data-tab="log"] #leftPanel, body[data-tab="log"] #rightPanel { display: none; }
}
@media (max-width: 720px) {
  #app { padding: 8px; gap: 8px; }
  #top { flex-wrap: wrap; gap: 8px; padding: 10px; }
  .brand { flex: 1 1 auto; }
  .kpis { order: 3; flex: 1 1 100%; overflow-x: auto; padding-bottom: 2px; }
  .kpi { padding: 4px 8px; min-width: 50px; }
  .kpi + .kpi { border-left: 0; }
  .hgroup { order: 2; flex: 1 1 100%; flex-wrap: wrap; }
  #sidSel { flex: 1 1 100%; max-width: none; min-width: 0; }
  #msisdn { flex: 1 1 auto; width: auto; }
  #deployBtn, #pairBtn { flex: 1 1 auto; }
  input, select, textarea { font-size: 16px; min-height: 42px; }
  button { min-height: 40px; }
  .opgrid button { min-height: 52px; }
  .phone { height: min(58vh, 470px); }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr 1fr; }
  .otpCard .code { font-size: 27px; }
  #toasts { left: 12px; right: 12px; bottom: 80px; align-items: stretch; }
  .toast { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media print { body { background: #fff; color: #000; } }
a.btn { text-decoration: none; }
.btn[disabled] { opacity: .45; pointer-events: none; }
button.wide, .btn.wide { width: 100%; }

/* ============================================ v12.4 polish — held frame, toasts */
#screen {
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
#screen.idle { background-color: #04060a; }
#screen.idle #mj { opacity: .001; }

#toasts { top: 88px; bottom: auto; }
@media (max-width: 1180px) { #toasts { top: auto; bottom: 96px; } }

@media (min-width: 1181px) { #app { grid-template-rows: auto minmax(0, 1fr) 226px; } }
#quick .body { gap: 6px; }
#quick input, #quick select {
  min-height: 32px; padding: 0 9px; font-size: 11px;
}
#quick .row.tight > button { min-height: 32px; padding: 0 10px; }
#quick .body::-webkit-scrollbar { width: 6px; }
@media (max-width: 1180px) {
  #app { padding-bottom: 96px; }
  #console { grid-template-columns: 1fr; }
}

/* held-frame badge: keep the captured screen unobstructed */
#screen.poster #idleMsg {
  inset: 0 0 auto 0; place-content: start center; padding: 16px 10px 0; gap: 6px;
}
#screen.poster #idleMsg b {
  padding: 5px 10px; border-radius: 8px; letter-spacing: .14em;
  background: rgba(5,8,13,.86); border: 1px solid rgba(255,184,77,.42); color: #ffe6bd;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#screen.poster #idleMsg small {
  padding: 4px 9px; border-radius: 8px; max-width: 84%;
  background: rgba(5,8,13,.82); border: 1px solid rgba(148,178,220,.16);
  font-size: 9px; line-height: 1.5;
}
@media (min-width: 1181px) { #app { grid-template-rows: auto minmax(0, 1fr) 252px; } }

/* keep the held-frame badge clear of the notch/status bar */
#screen.poster #idleMsg { padding-top: 26px; }
#quick > header .chip { height: 20px; font-size: 8.5px; padding: 0 7px; }
#quick > header .mini { min-height: 22px; padding: 0 8px; font-size: 8.5px; }

#screen.poster #idleMsg b { white-space: nowrap; font-size: 9px; }
#screen.poster #idleMsg small { font-size: 8.5px; line-height: 1.4; white-space: nowrap; max-width: none; }
@media (max-width: 720px) {
  #screen.poster #idleMsg { padding-top: 18px; gap: 4px; }
  #screen.poster #idleMsg b { font-size: 8px; letter-spacing: .12em; padding: 4px 8px; }
  #screen.poster #idleMsg small { font-size: 7.5px; padding: 3px 7px; }
}

/* ------------------------------------------------- sovereign harness (v12.9) */
.hx {
  margin: 10px 0 2px;
  padding: 10px 11px 9px;
  border: 1px solid rgba(76, 194, 255, 0.20);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(76, 194, 255, 0.07), rgba(76, 194, 255, 0.02));
}
.hxTop { display: flex; align-items: baseline; gap: 8px; margin: 7px 0 5px; }
.hxTop b {
  font: 700 26px/1 var(--mono); color: var(--acc-ink);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.hxTop i {
  font: 400 9px/1 var(--mono); color: var(--dim);
  letter-spacing: 0.14em; text-transform: uppercase; font-style: normal;
}
.hxTop .chip { margin-left: auto; }
.hxTxn { font: 400 9px/1 var(--mono); color: var(--faint); letter-spacing: 0.08em; }
.hxTgt {
  font: 500 9px/1 var(--mono); color: var(--acc-ink); letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hxHops {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 10px;
  font: 400 10px/1.55 var(--mono); color: var(--faint);
}
.hxHops b { color: var(--txt-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.hxMsg {
  margin-top: 6px; min-height: 13px; word-break: break-word;
  font: 400 10px/1.4 var(--mono); color: var(--dim);
}
.hxMsg.bad { color: var(--bad); }
.chip.bad { color: var(--bad); border-color: rgba(255, 95, 115, 0.45); background: rgba(255, 95, 115, 0.10); }