/* ==========================================================================
   SPY 8— DESIGN TOKENS
   Palette/spacing matched to PROMPT 1 desktop screenshots.
   ========================================================================== */.spy8-app.spy8-app{
  /* --- palette: near-black navy + green primary + purple secondary --- */
  --color-bg:            #04070d;
  --color-bg-raised:     #060b14;
  --color-bg-panel:      #0a1220;
  --color-bg-panel2:     #0c1626;
  --color-bg-inset:      #060c16;
  --color-bg-hover:      #101d33;
  --color-border:        #17233a;
  --color-border-strong: #24365a;

  --color-text:          #d7e0ee;
  --color-text-dim:      #7d8ca3;
  --color-text-faint:    #45526b;

  /* primary accent— signal green */
  --color-accent:        #4ade80;
  --color-accent-strong: #22c55e;
  --color-accent-deep:   #15803d;
  --color-accent-bg:     rgba(34, 197, 94, 0.10);
  --color-accent-bg2:    rgba(34, 197, 94, 0.18);
  --color-accent-glow:   rgba(74, 222, 128, 0.45);

  /* secondary— recharge purple */
  --color-purple:        #7c3aed;
  --color-purple-hi:     #8b5cf6;
  --color-purple-deep:   #6d28d9;

  /* status */
  --color-danger:        #ef4444;
  --color-danger-bg:     rgba(239, 68, 68, 0.12);
  --color-success:       #22c55e;
  --color-warning:       #eab308;
  --color-warning-bg:    rgba(234, 179, 8, 0.12);
  --color-info:          #38bdf8;
  --color-info-bg:       rgba(56, 189, 248, 0.12);

  /* platform glyph colors (module icons) */
  --c-whatsapp:  #25d366;
  --c-facebook:  #1877f2;
  --c-call:      #22c55e;
  --c-recording: #14b8a6;
  --c-sms:       #38bdf8;
  --c-location:  #a855f7;
  --c-media:     #3b82f6;

  /* --- typography --- */
  --font-ui:   'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Cascadia Code', Consolas, 'Courier New', monospace;

  --text-xs:  10px;
  --text-sm:  11px;
  --text-md:  12px;
  --text-lg:  13px;
  --text-xl:  15px;
  --text-2xl: 18px;
  --text-3xl: 22px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* --- spacing --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 18px;
  --space-6: 22px;
  --space-8: 30px;

  /* --- radii --- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* --- shell dimensions --- */
  --sidebar-w: 236px;
  --header-h: 56px;
  --metrics-h: 52px;

  /* --- controls --- */
  --control-h: 34px;
  --input-h: 36px;
  --nav-item-h: 38px;

  /* --- borders --- */
  --border-thin: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);

  /* --- effects --- */
  --glow-accent: 0 0 14px var(--color-accent-glow);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.65);
  --shadow-pop: 0 4px 16px rgba(0, 0, 0, 0.45);

  --z-header: 50;
  --z-overlay: 200;
  --z-modal: 210;

  --bp-mobile: 768px;
}.spy8-app.spy8-app /* ==========================================================================
   SPY 8— BASE / RESET
   ========================================================================== */

*, .spy8-app.spy8-app *::before, .spy8-app.spy8-app *::after{ box-sizing: border-box; }.spy8-app.spy8-app, .spy8-app.spy8-app{
  margin: 0;
  padding: 0;
  height: 100%;
}.spy8-app.spy8-app{
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow: hidden; /* app shell owns scrolling */
}.spy8-app.spy8-app #app{ height: 100vh; }.spy8-app.spy8-app h1, .spy8-app.spy8-app h2, .spy8-app.spy8-app h3, .spy8-app.spy8-app h4, .spy8-app.spy8-app p, .spy8-app.spy8-app ul, .spy8-app.spy8-app ol, .spy8-app.spy8-app figure{ margin: 0; padding: 0; }.spy8-app.spy8-app ul, .spy8-app.spy8-app ol{ list-style: none; }.spy8-app.spy8-app a{ color: inherit; text-decoration: none; }.spy8-app.spy8-app button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }.spy8-app.spy8-app input, .spy8-app.spy8-app select, .spy8-app.spy8-app textarea{ font: inherit; color: inherit; }.spy8-app.spy8-app img, .spy8-app.spy8-app svg{ display: block; }.spy8-app.spy8-app ::selection{ background: var(--color-accent-dim); color: #fff; }.spy8-app.spy8-app /* scrollbars— thin dark, .spy8-app.spy8-app provisional */
*{ scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }.spy8-app.spy8-app *::-webkit-scrollbar{ width: 8px; height: 8px; }.spy8-app.spy8-app *::-webkit-scrollbar-thumb{ background: var(--color-border-strong); border-radius: 4px; }.spy8-app.spy8-app *::-webkit-scrollbar-track{ background: transparent; }.spy8-app.spy8-app /* utility */
.mono{ font-family: var(--font-mono); }.spy8-app.spy8-app .dim{ color: var(--color-text-dim); }.spy8-app.spy8-app .faint{ color: var(--color-text-faint); }.spy8-app.spy8-app .small{ font-size: var(--text-sm); }.spy8-app.spy8-app .xs{ font-size: var(--text-xs); }.spy8-app.spy8-app .upper{ text-transform: uppercase; letter-spacing: var(--tracking-wide); }.spy8-app.spy8-app .row{ display: flex; align-items: center; }.spy8-app.spy8-app .grow{ flex: 1; }.spy8-app.spy8-app /* ==========================================================================
   SPY 8— APP SHELL LAYOUT
   Matched to PROMPT 1 desktop screenshots:
   left sidebar / top header / main / bottom metrics strip.
   ========================================================================== */

.shell{
  display: grid;
  height: 100vh;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr var(--metrics-h);
  grid-template-areas:
    "sidebar header"
    "sidebar main"
    "sidebar metrics";
}.spy8-app.spy8-app /* ==========================================================================
   SIDEBAR
   ========================================================================== */

.sidebar{
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-raised);
  border-right: var(--border-thin);
  overflow-y: auto;
  overflow-x: hidden;
}.spy8-app.spy8-app .sidebar__brand{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: var(--border-thin);
}.spy8-app.spy8-app .brand-x{ width: 34px; height: 34px; flex: none; filter: drop-shadow(0 0 7px rgba(34,197,94,.4)) drop-shadow(0 2px 5px rgba(0,0,0,.45)); }.spy8-app.spy8-app .sidebar__brand .brand-x{ width: 42px; height: 42px; filter: brightness(1.15) drop-shadow(0 0 10px rgba(52,211,153,.55)) drop-shadow(0 2px 6px rgba(0,0,0,.5)); }.spy8-app.spy8-app .sidebar__brand-name{
  font-size: 14px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  color: #eef3fa;
  line-height: 1.15;
}.spy8-app.spy8-app .sidebar__brand-sub{
  font-size: 8.5px;
  color: var(--color-text-dim);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: 1.4;
}.spy8-app.spy8-app .sidebar__nav{
  padding: 10px 10px 6px;
  flex: 0 0 auto;
}.spy8-app.spy8-app .nav-item{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: var(--nav-item-h);
  padding: 0 12px;
  border-radius: var(--radius-md);
  color: var(--color-text-dim);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  text-align: left;
}.spy8-app.spy8-app .nav-item .icon{ width: 15px; height: 15px; }.spy8-app.spy8-app .nav-item:hover{ background: var(--color-bg-panel); color: var(--color-text); }.spy8-app.spy8-app .nav-item.is-active{
  background: var(--color-accent-bg2);
  color: var(--color-accent);
}.spy8-app.spy8-app /* ---- sidebar bottom info blocks ---- */
.side-block{
  margin: 0 10px;
  padding: 10px 12px;
  border-top: var(--border-thin);
}.spy8-app.spy8-app .side-block__label{
  font-size: 9px;
  font-weight: var(--weight-semi);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-bottom: 8px;
}.spy8-app.spy8-app .plan-name{ display: flex; align-items: center; gap: 6px; font-size: var(--text-lg); font-weight: var(--weight-semi); color: #e8ddf9; }.spy8-app.spy8-app .plan-name .icon{ width: 13px; height: 13px; color: var(--color-purple-hi); }.spy8-app.spy8-app .plan-valid{ font-size: var(--text-sm); color: var(--color-text-dim); margin-top: 4px; }.spy8-app.spy8-app .progress{
  position: relative;
  height: 4px;
  margin: 8px 0 10px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}.spy8-app.spy8-app .progress__fill{ height: 100%; background: var(--color-accent-strong); border-radius: 2px; }.spy8-app.spy8-app .progress__pct{ position: absolute; right: 0; top: -14px; font-size: 9px; color: var(--color-text-dim); }.spy8-app.spy8-app .side-block .btn{ width: 100%; }.spy8-app.spy8-app .secure-conn{ display: flex; gap: 8px; align-items: flex-start; }.spy8-app.spy8-app .secure-conn .icon{ width: 18px; height: 18px; color: var(--color-accent); margin-top: 2px; }.spy8-app.spy8-app .secure-conn__t{ font-size: var(--text-sm); color: var(--color-text); }.spy8-app.spy8-app .secure-conn__s{ font-size: var(--text-sm); color: var(--color-accent); display: flex; align-items: center; gap: 4px; }.spy8-app.spy8-app .secure-conn__link{ font-size: var(--text-sm); color: var(--color-text-dim); margin-top: 3px; display: inline-block; }.spy8-app.spy8-app .secure-conn__link:hover{ color: var(--color-accent); }.spy8-app.spy8-app /* compliance badges */
.compliance{
  display: flex;
  gap: 8px;
  margin: 0 10px;
  padding: 10px 12px;
  border-top: var(--border-thin);
}.spy8-app.spy8-app .compliance__badge{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 8px;
  color: var(--color-text-dim);
  text-align: center;
  line-height: 1.25;
}.spy8-app.spy8-app .compliance__badge .icon{ width: 16px; height: 16px; color: #5b9dff; }.spy8-app.spy8-app /* training sim footer */
.sim-note{
  margin: auto 10px 10px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--color-bg-panel);
}.spy8-app.spy8-app .sim-note .icon{ width: 16px; height: 16px; color: var(--color-info); }.spy8-app.spy8-app .sim-note__t{ font-size: 10px; font-weight: var(--weight-semi); color: var(--color-text-dim); }.spy8-app.spy8-app .sim-note__s{ font-size: 9px; color: var(--color-text-faint); }.spy8-app.spy8-app /* ==========================================================================
   TOP HEADER
   ========================================================================== */

.topbar{
  grid-area: header;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 16px;
  background: var(--color-bg-raised);
  border-bottom: var(--border-thin);
}.spy8-app.spy8-app .topbar__burger{
  color: var(--color-text-dim);
  padding: 4px;
  border-radius: var(--radius-sm);
}.spy8-app.spy8-app .topbar__burger:hover{ color: var(--color-text); background: var(--color-bg-panel); }.spy8-app.spy8-app .topbar__burger .icon{ width: 16px; height: 16px; }.spy8-app.spy8-app .hstat{ display: flex; align-items: center; gap: 10px; }.spy8-app.spy8-app .hstat + .hstat{ padding-left: 18px; border-left: 1px solid var(--color-border); }.spy8-app.spy8-app .hstat__col{ display: flex; flex-direction: column; gap: 1px; }.spy8-app.spy8-app .hstat__label{
  font-size: 8.5px;
  font-weight: var(--weight-semi);
  color: var(--color-text-faint);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
}.spy8-app.spy8-app .hstat__value{
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  color: var(--color-text);
  white-space: nowrap;
}.spy8-app.spy8-app .hstat__value--green{ color: var(--color-accent); }.spy8-app.spy8-app .hstat__dot{
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent); margin-right: 5px;
  box-shadow: 0 0 6px var(--color-accent-glow);
  vertical-align: 1px;
}.spy8-app.spy8-app .hstat__spark{ display: block; }.spy8-app.spy8-app .topbar__spacer{ flex: 1; }.spy8-app.spy8-app .huser{ display: flex; align-items: center; gap: 9px; }.spy8-app.spy8-app .huser__avatar{
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-bg-panel2);
  border: var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-dim);
}.spy8-app.spy8-app .huser__avatar .icon{ width: 15px; height: 15px; }.spy8-app.spy8-app .huser__name{ font-size: var(--text-md); font-weight: var(--weight-semi); color: var(--color-text); line-height: 1.2; }.spy8-app.spy8-app .huser__role{ font-size: 9.5px; color: var(--color-text-dim); line-height: 1.2; }.spy8-app.spy8-app .huser__online{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent-glow);
}.spy8-app.spy8-app /* ==========================================================================
   MAIN
   ========================================================================== */

.main{
  grid-area: main;
  overflow-y: auto;
  padding: 16px 18px;
  background: var(--color-bg);
}.spy8-app.spy8-app .page-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}.spy8-app.spy8-app .page-head__icon{
  width: 40px; height: 40px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-bg);
  border: 1px solid rgba(34,197,94,.3);
  border-radius: var(--radius-lg);
  color: var(--color-accent);
}.spy8-app.spy8-app .page-head__icon .icon{ width: 19px; height: 19px; }.spy8-app.spy8-app .page-head__title{ font-size: var(--text-2xl); font-weight: var(--weight-bold); color: #eef3fa; }.spy8-app.spy8-app .page-head__sub{ font-size: var(--text-md); color: var(--color-text-dim); margin-top: 2px; }.spy8-app.spy8-app .page-head__spacer{ flex: 1; }.spy8-app.spy8-app /* ==========================================================================
   BOTTOM METRICS BAR
   ========================================================================== */

.metricsbar{
  grid-area: metrics;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 18px;
  background: var(--color-bg-raised);
  border-top: var(--border-thin);
  overflow: hidden;
}.spy8-app.spy8-app .mstat{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border-right: 1px solid var(--color-border);
  height: 100%;
  flex: 1;
}.spy8-app.spy8-app .mstat:last-child{ border-right: 0; }.spy8-app.spy8-app .mstat__icon{
  width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
}.spy8-app.spy8-app .mstat__icon .icon{ width: 14px; height: 14px; }.spy8-app.spy8-app .mstat__label{ font-size: 8.5px; letter-spacing: var(--tracking-wider); color: var(--color-text-faint); text-transform: uppercase; white-space: nowrap; }.spy8-app.spy8-app .mstat__value{ font-size: var(--text-lg); font-weight: var(--weight-semi); color: var(--color-text); white-space: nowrap; }.spy8-app.spy8-app .mstat__value--sm{ font-size: var(--text-md); }.spy8-app.spy8-app .mstat__sub{ font-size: 9px; color: var(--color-text-dim); }.spy8-app.spy8-app .mstat__spark{ margin-left: auto; }.spy8-app.spy8-app /* ==========================================================================
   MODAL
   ========================================================================== */

.modal-overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(2, 5, 10, 0.72);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}.spy8-app.spy8-app .modal{
  z-index: var(--z-modal);
  width: 460px;
  max-width: 100%;
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  background: var(--color-bg-panel);
  border: var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
}.spy8-app.spy8-app .modal--wide{ width: 720px; }.spy8-app.spy8-app .modal__head{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: var(--border-thin);
}.spy8-app.spy8-app .modal__head-icon{
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
}.spy8-app.spy8-app .modal__head-icon .icon{ width: 15px; height: 15px; }.spy8-app.spy8-app .modal__head-text{ flex: 1; }.spy8-app.spy8-app .modal__title{ font-size: 15px; font-weight: var(--weight-bold); color: #eef3fa; letter-spacing: var(--tracking-wide); }.spy8-app.spy8-app .modal__sub{ font-size: var(--text-md); color: var(--color-text-dim); margin-top: 2px; }.spy8-app.spy8-app .modal__close{ color: var(--color-text-dim); padding: 4px; border-radius: var(--radius-sm); margin: -4px -4px 0 0; }.spy8-app.spy8-app .modal__close:hover{ color: var(--color-text); background: var(--color-bg-inset); }.spy8-app.spy8-app .modal__close .icon{ width: 14px; height: 14px; }.spy8-app.spy8-app .modal__body{ padding: 14px 16px; overflow-y: auto; }.spy8-app.spy8-app .modal__foot{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: var(--border-thin);
}.spy8-app.spy8-app /* ==========================================================================
   MOBILE SHELL (PROMPT 5)
   mobile top bar + bottom tab nav; sidebar/topbar hidden.
   ========================================================================== */

.mtopbar, .spy8-app.spy8-app .bottomnav{ display: none; }@media (max-width: 860px){.spy8-app.spy8-app .shell{
    grid-template-columns: 1fr;
    grid-template-rows: 52px 1fr 44px 54px;
    grid-template-areas:
      "mtop"
      "main"
      "metrics"
      "bnav";
  }.spy8-app.spy8-app .sidebar, .spy8-app.spy8-app .topbar{ display: none; }.spy8-app.spy8-app /* ---- mobile top bar ---- */
  .mtopbar{
    grid-area: mtop;
    display: flex; align-items: center; gap: 10px;
    padding: 0 12px;
    background: var(--color-bg-raised);
    border-bottom: var(--border-thin);
    overflow: hidden;
  }.spy8-app.spy8-app .m-brand{ display: flex; align-items: center; gap: 8px; min-width: 0; flex: none; }.spy8-app.spy8-app .m-brand .brand-x{ width: 26px; height: 26px; }.spy8-app.spy8-app .m-brand b{ font-size: 12px; font-weight: var(--weight-bold); color: #eef3fa; letter-spacing: var(--tracking-wide); display: block; line-height: 1.15; }.spy8-app.spy8-app .m-brand small{ display: block; font-size: 6.5px; color: var(--color-text-dim); letter-spacing: var(--tracking-wider); text-transform: uppercase; line-height: 1.3; }.spy8-app.spy8-app .m-brand__v{ color: var(--color-text-faint); }.spy8-app.spy8-app .m-balance{ margin-left: auto; display: flex; flex-direction: column; align-items: center; border: var(--border-thin); border-radius: var(--radius-md); padding: 3px 8px; background: var(--color-bg-panel); flex: none; }.spy8-app.spy8-app .m-balance__k{ font-size: 6.5px; letter-spacing: var(--tracking-wider); color: var(--color-text-faint); text-transform: uppercase; }.spy8-app.spy8-app .m-balance__v{ display: flex; align-items: center; gap: 5px; font-size: 12px; }.spy8-app.spy8-app .m-balance__v b{ color: var(--color-accent); font-weight: var(--weight-bold); }.spy8-app.spy8-app .coin-icon{ width: 15px; height: 15px; border-radius: 50%; background: var(--color-accent-strong); color: #04120a; display: inline-flex; align-items: center; justify-content: center; }.spy8-app.spy8-app .coin-icon .icon{ width: 9px; height: 9px; }.spy8-app.spy8-app .m-admin{ display: flex; align-items: center; gap: 7px; flex: none; }.spy8-app.spy8-app .m-admin .topbar__avatar, .spy8-app.spy8-app .m-admin .huser__avatar{ width: 26px; height: 26px; }.spy8-app.spy8-app .m-admin b{ display: block; font-size: 9.5px; color: var(--color-text); font-weight: var(--weight-semi); line-height: 1.15; white-space: nowrap; }.spy8-app.spy8-app .m-admin small{ display: block; font-size: 7.5px; color: var(--color-text-dim); white-space: nowrap; }@media (max-width: 520px){.spy8-app.spy8-app .m-brand small{ display: none; }
  }@media (max-width: 430px){.spy8-app.spy8-app .m-admin span:last-child{ display: none; }
  }.spy8-app.spy8-app .topbar__avatar{ width: 28px; height: 28px; border-radius: 50%; background: var(--color-bg-panel2); border: var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--color-text-dim); }.spy8-app.spy8-app .topbar__avatar .icon{ width: 14px; height: 14px; }.spy8-app.spy8-app .topbar__online{ position: absolute; right: -1px; top: -1px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 6px var(--color-accent-glow); border: 1px solid var(--color-bg-raised); }.spy8-app.spy8-app /* ---- main ---- */
  .main{ padding: 10px; }.spy8-app.spy8-app /* ---- compact metrics strip ---- */
  .metricsbar{ padding: 0 6px; }.spy8-app.spy8-app .mstat{ padding: 0 8px; gap: 6px; }.spy8-app.spy8-app .mstat__icon{ width: 18px; height: 18px; }.spy8-app.spy8-app .mstat__icon .icon{ width: 10px; height: 10px; }.spy8-app.spy8-app .mstat__label{ font-size: 6.5px; }.spy8-app.spy8-app .mstat__value{ font-size: 10px; }.spy8-app.spy8-app .mstat__sub{ display: none; }.spy8-app.spy8-app .mstat__spark svg{ width: 34px; height: 14px; }.spy8-app.spy8-app .mstat:last-child{ display: none; }.spy8-app.spy8-app /* hide server time on mobile */

  /* ---- bottom tab nav ---- */
  .bottomnav{
    grid-area: bnav;
    display: flex; align-items: stretch;
    background: var(--color-bg-raised);
    border-top: var(--border-thin);
  }.spy8-app.spy8-app .btab{
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--color-text-dim); font-size: 8px;
    border-top: 2px solid transparent;
  }.spy8-app.spy8-app .btab .icon{ width: 16px; height: 16px; }.spy8-app.spy8-app .btab.is-active{ color: var(--color-accent); border-top-color: var(--color-accent); }.spy8-app.spy8-app /* ---- more sheet ---- */
  .moresheet-overlay{
    position: fixed; inset: 0; z-index: var(--z-overlay);
    background: rgba(2,5,10,.6); display: flex; align-items: flex-end;
  }.spy8-app.spy8-app .moresheet{
    width: 100%; max-height: 72vh; overflow-y: auto;
    background: var(--color-bg-panel); border-top: var(--border-strong);
    border-radius: 14px 14px 0 0; padding: 8px 12px calc(12px + env(safe-area-inset-bottom));
  }.spy8-app.spy8-app .moresheet__grab{ width: 34px; height: 4px; border-radius: 2px; background: var(--color-border-strong); margin: 0 auto 8px; }.spy8-app.spy8-app .moresheet__head{ display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 8px; font-size: 14px; font-weight: var(--weight-bold); color: #eef3fa; }.spy8-app.spy8-app .moresheet__item{
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 10px; font-size: var(--text-lg); color: var(--color-text);
    border-radius: var(--radius-md); text-align: left;
  }.spy8-app.spy8-app .moresheet__item:hover{ background: var(--color-bg-panel2); }.spy8-app.spy8-app .moresheet__item.is-active{ background: var(--color-accent-bg2); color: var(--color-accent); }.spy8-app.spy8-app .moresheet__item.is-active .icon{ color: var(--color-accent); }.spy8-app.spy8-app .moresheet__item .icon{ width: 16px; height: 16px; color: var(--color-text-dim); }.spy8-app.spy8-app .moresheet__item > span{ flex: 1; }.spy8-app.spy8-app .moresheet__item .icon:last-child{ width: 13px; height: 13px; margin-left: auto; color: var(--color-text-faint); }.spy8-app.spy8-app /* ---- modal — near-fullscreen sheet ---- */
  .modal-overlay{ padding: 8px; align-items: flex-start; background: rgba(2,5,10,.5); }.spy8-app.spy8-app .modal{ width: 100%; max-height: calc(100vh - 16px); margin-top: 0; min-width: 0; }.spy8-app.spy8-app .modal--wide{ width: 100%; }.spy8-app.spy8-app /* logout modal stays centered (PROMPT 6 mobile ref) */
  .modal-overlay--center{ align-items: center; }.spy8-app.spy8-app .modal--logout{ width: 88%; margin: auto; }.spy8-app.spy8-app .modal__body{ padding: 12px 14px; }
}.spy8-app.spy8-app /* ==========================================================================
   SPY 8— SHARED COMPONENTS
   Matched to PROMPT 1 desktop screenshots.
   ========================================================================== */

/* ---------- card ---------- */
.card{
  background: var(--color-bg-panel);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-width: 0;
}.spy8-app.spy8-app .card__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: var(--border-thin);
}.spy8-app.spy8-app .card__title{
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: #e6edf7;
}.spy8-app.spy8-app .card__sub{ font-size: var(--text-md); color: var(--color-text-dim); margin-top: 2px; }.spy8-app.spy8-app .card__link{
  font-size: var(--text-md);
  color: var(--color-text-dim);
  white-space: nowrap;
}.spy8-app.spy8-app .card__link:hover{ color: var(--color-accent); }.spy8-app.spy8-app .card__body{ padding: 14px; flex: 1; }.spy8-app.spy8-app .card__body--flush{ padding: 0; }.spy8-app.spy8-app .card__foot{
  padding: 9px 14px;
  border-top: var(--border-thin);
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}.spy8-app.spy8-app .card__foot .icon{ width: 11px; height: 11px; color: var(--color-text-faint); }.spy8-app.spy8-app /* ---------- button ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: var(--control-h);
  padding: 0 14px;
  border-radius: var(--radius-md);
  border: var(--border-thin);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--color-text);
  background: var(--color-bg-panel2);
  white-space: nowrap;
}.spy8-app.spy8-app .btn:hover{ border-color: var(--color-border-strong); background: var(--color-bg-hover); }.spy8-app.spy8-app .btn--primary{
  background: var(--color-accent-strong);
  border-color: var(--color-accent-strong);
  color: #04120a;
}.spy8-app.spy8-app .btn--primary:hover{ background: var(--color-accent); border-color: var(--color-accent); box-shadow: var(--glow-accent); color: #04120a; }.spy8-app.spy8-app .btn--purple{
  background: linear-gradient(180deg, var(--color-purple-hi), var(--color-purple));
  border-color: var(--color-purple);
  color: #fff;
}.spy8-app.spy8-app .btn--purple:hover{ background: linear-gradient(180deg, #9d74fb, var(--color-purple-hi)); border-color: var(--color-purple-hi); color:#fff; }.spy8-app.spy8-app .btn--danger{
  background: transparent;
  border-color: var(--color-danger);
  color: var(--color-danger);
}.spy8-app.spy8-app .btn--danger:hover{ background: var(--color-danger); color: #fff; }.spy8-app.spy8-app .btn--dangersolid{
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}.spy8-app.spy8-app .btn--dangersolid:hover{ background: #b91c1c; border-color: #b91c1c; color: #fff; }.spy8-app.spy8-app .btn--ghost{ border-color: transparent; background: transparent; color: var(--color-text-dim); }.spy8-app.spy8-app .btn--ghost:hover{ color: var(--color-text); background: var(--color-bg-panel2); }.spy8-app.spy8-app .btn--outline{ background: transparent; border-color: var(--color-border-strong); color: var(--color-text-dim); }.spy8-app.spy8-app .btn--outline:hover{ color: var(--color-text); border-color: var(--color-accent-deep); }.spy8-app.spy8-app .faqchip{ background: transparent; border-color: var(--cb, var(--color-border)); color: var(--cc, var(--color-text-dim)); }.spy8-app.spy8-app .btn--sm{ height: 26px; padding: 0 10px; font-size: var(--text-md); }.spy8-app.spy8-app .btn--block{ width: 100%; }.spy8-app.spy8-app .btn:disabled{ opacity: 0.45; cursor: not-allowed; }.spy8-app.spy8-app /* ---------- input / select / textarea ---------- */
.input, .spy8-app.spy8-app .select, .spy8-app.spy8-app .textarea{
  width: 100%;
  height: var(--input-h);
  padding: 0 12px;
  background: var(--color-bg-inset);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-lg);
}.spy8-app.spy8-app .textarea{ height: auto; padding: 9px 12px; resize: vertical; }.spy8-app.spy8-app .input:focus, .spy8-app.spy8-app .select:focus, .spy8-app.spy8-app .textarea:focus{
  outline: none;
  border-color: var(--color-accent-deep);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.15);
}.spy8-app.spy8-app .input::placeholder, .spy8-app.spy8-app .textarea::placeholder{ color: var(--color-text-faint); }.spy8-app.spy8-app .select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237d8ca3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
  cursor: pointer;
}.spy8-app.spy8-app .input-icon{ position: relative; }.spy8-app.spy8-app .input-icon .icon{
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; color: var(--color-text-faint); pointer-events: none;
}.spy8-app.spy8-app .input-icon .input{ padding-left: 32px; }.spy8-app.spy8-app .field{ margin-bottom: 12px; }.spy8-app.spy8-app .field__label{
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}.spy8-app.spy8-app /* ---------- table ---------- */
.table-wrap{ overflow-x: auto; }.spy8-app.spy8-app .table{
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-lg);
}.spy8-app.spy8-app .table th{
  text-align: left;
  padding: 9px 14px;
  font-size: 9.5px;
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-dim);
  background: var(--color-bg-inset);
  border-bottom: var(--border-thin);
  white-space: nowrap;
}.spy8-app.spy8-app .table td{
  padding: 10px 14px;
  border-bottom: var(--border-thin);
  white-space: nowrap;
  color: var(--color-text);
  vertical-align: middle;
}.spy8-app.spy8-app .table tbody tr:last-child td{ border-bottom: 0; }.spy8-app.spy8-app .table tbody tr:hover{ background: rgba(255,255,255,0.015); }.spy8-app.spy8-app .td-id{ font-family: var(--font-mono); font-size: var(--text-md); color: var(--color-text); }.spy8-app.spy8-app .td-num{ font-family: var(--font-mono); font-size: var(--text-md); }.spy8-app.spy8-app .td-dim{ color: var(--color-text-dim); }.spy8-app.spy8-app .rowlink{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--color-text-dim); font-size: var(--text-md);
}.spy8-app.spy8-app .rowlink .icon{ width: 12px; height: 12px; }.spy8-app.spy8-app .rowlink:hover{ color: var(--color-accent); }.spy8-app.spy8-app /* ---------- badge ---------- */
.badge{
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: var(--weight-semi);
  white-space: nowrap;
}.spy8-app.spy8-app .badge--success{ color: var(--color-accent); background: var(--color-accent-bg); }.spy8-app.spy8-app .badge--danger{ color: var(--color-danger);  background: var(--color-danger-bg); }.spy8-app.spy8-app .badge--warning{ color: var(--color-warning); background: var(--color-warning-bg); }.spy8-app.spy8-app .badge--info{ color: var(--color-info);    background: var(--color-info-bg); }.spy8-app.spy8-app .badge--neutral{ color: var(--color-text-dim); background: var(--color-bg-inset); border: var(--border-thin); }.spy8-app.spy8-app /* ---------- icon ---------- */
.icon{ width: 16px; height: 16px; flex: none; }.spy8-app.spy8-app .icon--sm{ width: 12px; height: 12px; }.spy8-app.spy8-app .icon--lg{ width: 20px; height: 20px; }.spy8-app.spy8-app .icon--xl{ width: 26px; height: 26px; }.spy8-app.spy8-app /* ---------- module platform chip ---------- */
.mchip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 5px;
  flex: none;
}.spy8-app.spy8-app .mchip svg{ width: 12px; height: 12px; }.spy8-app.spy8-app .mchip--more{
  background: var(--color-bg-inset);
  border: var(--border-thin);
  color: var(--color-text-dim);
  font-size: 9px;
  font-weight: var(--weight-semi);
  font-family: var(--font-ui);
}.spy8-app.spy8-app /* ---------- pagination ---------- */
.pagination{
  display: flex;
  align-items: center;
  gap: 5px;
}.spy8-app.spy8-app .pagination__info{ font-size: var(--text-md); color: var(--color-text-dim); }.spy8-app.spy8-app .page-btn{
  min-width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--color-bg-panel2);
  color: var(--color-text-dim);
  font-size: var(--text-md);
  padding: 0 6px;
}.spy8-app.spy8-app .page-btn:hover{ color: var(--color-text); border-color: var(--color-border-strong); }.spy8-app.spy8-app .page-btn.is-active{ background: var(--color-accent-bg2); border-color: var(--color-accent-deep); color: var(--color-accent); }.spy8-app.spy8-app .page-btn:disabled{ opacity: .35; cursor: default; }.spy8-app.spy8-app /* ---------- filter bar ---------- */
.filterbar{
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}.spy8-app.spy8-app .filterbar .input-icon{ flex: 1; }.spy8-app.spy8-app .filterbar .select{ width: 170px; flex: none; }.spy8-app.spy8-app .filterbar .btn{ flex: none; }.spy8-app.spy8-app /* ---------- placeholder page marker ---------- */
.page-placeholder{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 240px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-faint);
  text-align: center;
  padding: 24px;
}.spy8-app.spy8-app .page-placeholder__name{ font-size: var(--text-xl); color: var(--color-text-dim); font-weight: var(--weight-medium); }.spy8-app.spy8-app /* ---------- misc ---------- */
.divider-v{ width: 1px; align-self: stretch; background: var(--color-border); }.spy8-app.spy8-app .muted-s{ font-size: var(--text-sm); color: var(--color-text-dim); }.spy8-app.spy8-app /* ---- toasts (PROMPT 9 simulation events) ---- */
.toasts{ position: fixed; right: 14px; bottom: 14px; z-index: calc(var(--z-modal) + 50); display: flex; flex-direction: column; gap: 8px; pointer-events: none; max-width: min(330px, 92vw); }.spy8-app.spy8-app .toast{ display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-bg-panel2); border: var(--border-thin); box-shadow: var(--shadow-pop); font-size: var(--text-sm); color: var(--color-text); opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }.spy8-app.spy8-app .toast.is-in{ opacity: 1; transform: none; }.spy8-app.spy8-app .toast__icon{ display: inline-flex; flex: none; }.spy8-app.spy8-app .toast__icon .icon{ width: 14px; height: 14px; }.spy8-app.spy8-app .toast--success{ border-color: rgba(34,197,94,.4); }.spy8-app.spy8-app .toast--success .toast__icon{ color: var(--color-accent); }.spy8-app.spy8-app .toast--info .toast__icon{ color: var(--color-info); }.spy8-app.spy8-app .toast--warn{ border-color: rgba(234,179,8,.4); }.spy8-app.spy8-app .toast--warn .toast__icon{ color: var(--color-warning); }.spy8-app.spy8-app .toast--danger{ border-color: rgba(239,68,68,.4); }.spy8-app.spy8-app .toast--danger .toast__icon{ color: var(--color-danger); }@media (max-width: 860px){.spy8-app.spy8-app .toasts{ right: 10px; left: 10px; bottom: 108px; max-width: none; }
}.spy8-app.spy8-app /* ==========================================================================
   SPY 8— PAGE-SPECIFIC STYLES (PROMPT 1 screens)
   ========================================================================== */

/* ============================ DASHBOARD ============================ */

.dash{
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: 14px;
  align-items: start;
}.spy8-app.spy8-app .dash__col{ display: grid; gap: 14px; min-width: 0; }.spy8-app.spy8-app /* --- create-new-request panel --- */
.genreq{
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  min-height: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: rgba(255,255,255,0.008);
  cursor: pointer;
  width: 100%;
}.spy8-app.spy8-app .genreq:hover{ border-color: var(--color-accent-deep); background: rgba(34,197,94,0.03); }.spy8-app.spy8-app .genreq__circle{
  width: 38px; height: 38px;
  border: 1.5px solid var(--color-accent-deep);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-accent);
}.spy8-app.spy8-app .genreq__circle .icon{ width: 16px; height: 16px; }.spy8-app.spy8-app .genreq:hover .genreq__circle{ box-shadow: var(--glow-accent); border-color: var(--color-accent); }.spy8-app.spy8-app .genreq__label{ color: var(--color-accent); font-size: var(--text-lg); font-weight: var(--weight-semi); }.spy8-app.spy8-app /* --- request summary panel --- */
.reqsum{ display: grid; grid-template-columns: 1fr auto; gap: 8px; height: 100%; }.spy8-app.spy8-app .reqsum__rows{ display: flex; flex-direction: column; }.spy8-app.spy8-app .reqsum__row{
  display: flex; justify-content: space-between; align-items: center;
  padding: 6.5px 0;
  font-size: var(--text-md);
  border-bottom: 1px solid rgba(23,35,58,.5);
}.spy8-app.spy8-app .reqsum__row:last-child{ border-bottom: 0; }.spy8-app.spy8-app .reqsum__k{ color: var(--color-text-dim); }.spy8-app.spy8-app .reqsum__v{ color: var(--color-text); font-weight: var(--weight-medium); }.spy8-app.spy8-app .reqsum__shield{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4px 12px 4px 18px;
  border-left: 1px solid rgba(23,35,58,.5);
}.spy8-app.spy8-app .shield-glow{ width: 74px; height: 74px; color: var(--color-accent); filter: drop-shadow(0 0 14px var(--color-accent-glow)); }.spy8-app.spy8-app .reqsum__shield-t{ color: var(--color-accent); font-size: var(--text-md); font-weight: var(--weight-semi); margin-top: 6px; }.spy8-app.spy8-app .reqsum__shield-s{ color: var(--color-text-dim); font-size: 9.5px; margin-top: 3px; max-width: 150px; line-height: 1.45; }.spy8-app.spy8-app /* --- data modules grid --- */
.modgrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}.spy8-app.spy8-app .modtile{
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--color-bg-inset);
  padding: 10px 11px;
  min-width: 0;
}.spy8-app.spy8-app .modtile__top{ display: flex; align-items: flex-start; gap: 8px; }.spy8-app.spy8-app .modtile__icon{ width: 26px; height: 26px; flex: none; display: flex; align-items: center; justify-content: center; }.spy8-app.spy8-app .modtile__icon svg{ width: 24px; height: 24px; }.spy8-app.spy8-app .modtile__name{ font-size: var(--text-md); font-weight: var(--weight-semi); color: #e6edf7; line-height: 1.25; }.spy8-app.spy8-app .modtile__desc{ font-size: 9.5px; color: var(--color-text-dim); margin-top: 1px; line-height: 1.3; }.spy8-app.spy8-app .modtile__foot{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
  font-size: 9.5px; color: var(--color-text-dim);
}.spy8-app.spy8-app .modtile__foot .icon{ width: 10px; height: 10px; color: var(--color-text-faint); }.spy8-app.spy8-app .modtile__cost{ color: var(--color-accent); font-weight: var(--weight-semi); font-size: 9.5px; }.spy8-app.spy8-app /* selectable variant (new-request modal) */
.modtile--sel{ position: relative; cursor: pointer; text-align: left; }.spy8-app.spy8-app .modtile--sel:hover{ border-color: var(--color-border-strong); }.spy8-app.spy8-app .modtile--sel.is-on{ border-color: var(--color-accent-deep); background: rgba(34,197,94,.05); }.spy8-app.spy8-app .modtile__check{
  position: absolute; top: 8px; right: 8px;
  width: 15px; height: 15px;
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  background: var(--color-bg-inset);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
}.spy8-app.spy8-app .modtile__check .icon{ width: 10px; height: 10px; }.spy8-app.spy8-app .modtile--sel.is-on .modtile__check{ background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: #04120a; }.spy8-app.spy8-app /* --- current request status timeline --- */
.timeline{ position: relative; padding-left: 18px; }.spy8-app.spy8-app .timeline::before{
  content: '';
  position: absolute; left: 4.5px; top: 6px; bottom: 6px;
  width: 1px; background: var(--color-border-strong);
}.spy8-app.spy8-app .timeline__item{ position: relative; padding: 5px 0; }.spy8-app.spy8-app .timeline__dot{
  position: absolute; left: -18px; top: 9px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-bg-panel);
}.spy8-app.spy8-app .timeline__item.is-on .timeline__dot{
  border-color: var(--color-accent);
  background: var(--color-accent-strong);
  box-shadow: 0 0 8px var(--color-accent-glow);
}.spy8-app.spy8-app .timeline__t{ font-size: var(--text-md); color: var(--color-text); font-weight: var(--weight-medium); }.spy8-app.spy8-app .timeline__s{ font-size: 9.5px; color: var(--color-text-dim); margin-top: 1px; }.spy8-app.spy8-app .notice{
  display: flex; gap: 9px; align-items: flex-start;
  background: var(--color-bg-inset);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-top: 10px;
}.spy8-app.spy8-app .notice .icon{ width: 16px; height: 16px; color: var(--color-accent); flex: none; margin-top: 1px; }.spy8-app.spy8-app .notice__t{ font-size: 10px; color: var(--color-text-dim); line-height: 1.5; }.spy8-app.spy8-app /* --- token packages (dashboard mini cards) --- */
.minipkg{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.spy8-app.spy8-app .minipkg__card{
  border: var(--border-thin);
  border-radius: var(--radius-md);
  background: var(--color-bg-inset);
  padding: 11px;
  display: flex; flex-direction: column; gap: 6px;
}.spy8-app.spy8-app .minipkg__amt{ font-size: var(--text-lg); font-weight: var(--weight-bold); color: #eef3fa; }.spy8-app.spy8-app .minipkg__amt span{ font-size: 10px; font-weight: var(--weight-regular); color: var(--color-text-dim); }.spy8-app.spy8-app .minipkg__price{ font-size: var(--text-md); color: var(--color-text); font-weight: var(--weight-semi); }.spy8-app.spy8-app .minipkg__price::before{ content: '₹ '; color: var(--color-text-dim); font-weight: var(--weight-regular); }.spy8-app.spy8-app /* ============================ NEW REQUEST MODAL ============================ */

.nrstep{ margin-bottom: 14px; }.spy8-app.spy8-app .nrstep__head{ display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }.spy8-app.spy8-app .nrstep__num{
  width: 19px; height: 19px; flex: none;
  border: 1px solid var(--color-accent-deep);
  border-radius: 50%;
  color: var(--color-accent);
  font-size: 10px; font-weight: var(--weight-bold);
  display: flex; align-items: center; justify-content: center;
}.spy8-app.spy8-app .nrstep__title{ font-size: 12px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); color: #e6edf7; text-transform: uppercase; }.spy8-app.spy8-app .nrstep__sub{ font-size: var(--text-md); color: var(--color-text-dim); margin: -3px 0 9px 28px; }.spy8-app.spy8-app .nrstep__link{ margin-left: auto; font-size: var(--text-md); color: var(--color-accent); display: inline-flex; align-items: center; gap: 5px; }.spy8-app.spy8-app .nrstep__link .icon{ width: 11px; height: 11px; }.spy8-app.spy8-app .nrstep__link:hover{ text-decoration: underline; }.spy8-app.spy8-app .nr-phone{ display: flex; gap: 8px; margin-left: 28px; }.spy8-app.spy8-app .nr-phone .select{ width: 86px; flex: none; }.spy8-app.spy8-app .nr-phone .input{ flex: 1; font-family: var(--font-mono); }.spy8-app.spy8-app .nr-phone__book{
  width: var(--input-h); height: var(--input-h); flex: none;
  display: flex; align-items: center; justify-content: center;
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-inset); color: var(--color-text-dim);
}.spy8-app.spy8-app .nr-phone__book:hover{ color: var(--color-accent); border-color: var(--color-accent-deep); }.spy8-app.spy8-app .nr-phone__book .icon{ width: 15px; height: 15px; }.spy8-app.spy8-app .nr-note{
  display: flex; align-items: center; gap: 6px;
  margin: 8px 0 0 28px;
  font-size: var(--text-sm); color: var(--color-accent);
}.spy8-app.spy8-app .nr-note .icon{ width: 11px; height: 11px; }.spy8-app.spy8-app .nr-modgrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-left: 28px; }.spy8-app.spy8-app .nr-summary{
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-inset);
  margin-left: 28px;
}.spy8-app.spy8-app .nr-sum{ padding: 10px 14px; display: flex; align-items: center; gap: 9px; }.spy8-app.spy8-app .nr-sum + .nr-sum{ border-left: var(--border-thin); }.spy8-app.spy8-app .nr-sum .icon{ width: 16px; height: 16px; color: var(--color-accent); }.spy8-app.spy8-app .nr-sum__k{ font-size: 9px; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: var(--tracking-wide); }.spy8-app.spy8-app .nr-sum__v{ font-size: var(--text-lg); font-weight: var(--weight-semi); color: var(--color-text); }.spy8-app.spy8-app .nr-disclaimer{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--text-sm); color: var(--color-text-dim);
  padding: 4px 16px 12px;
}.spy8-app.spy8-app .nr-disclaimer .icon{ width: 11px; height: 11px; color: var(--color-text-faint); }.spy8-app.spy8-app /* ============================ INSUFFICIENT TOKENS MODAL ============================ */

.insf__lead{ font-size: var(--text-lg); color: var(--color-text); line-height: 1.5; }.spy8-app.spy8-app .insf__stats{
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-inset);
  margin: 13px 0;
}.spy8-app.spy8-app .insf__stat{ padding: 11px 12px; text-align: center; }.spy8-app.spy8-app .insf__stat + .insf__stat{ border-left: var(--border-thin); }.spy8-app.spy8-app .insf__stat .icon{ width: 16px; height: 16px; margin: 0 auto 5px; }.spy8-app.spy8-app .insf__k{ font-size: 9px; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: var(--tracking-wide); }.spy8-app.spy8-app .insf__v{ font-size: 17px; font-weight: var(--weight-bold); margin-top: 2px; }.spy8-app.spy8-app .insf__v--green{ color: var(--color-accent); }.spy8-app.spy8-app .insf__v--red{ color: var(--color-danger); }.spy8-app.spy8-app .insf__info{
  display: flex; gap: 8px; align-items: flex-start;
  background: var(--color-bg-inset);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: var(--text-sm); color: var(--color-text-dim); line-height: 1.5;
}.spy8-app.spy8-app .insf__info .icon{ width: 13px; height: 13px; color: var(--color-info); flex: none; margin-top: 1px; }.spy8-app.spy8-app /* ============================ REQUEST HISTORY ============================ */

.hist .card__body--flush .table-wrap{ border: 0; }.spy8-app.spy8-app .hist__foot{
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px;
}.spy8-app.spy8-app /* ============================ TOKENS PAGE ============================ */

.tokens__head{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }.spy8-app.spy8-app .balance-card{
  margin-left: auto;
  display: flex; align-items: center; gap: 12px;
  border: var(--border-thin); border-radius: var(--radius-lg);
  background: var(--color-bg-panel);
  padding: 10px 16px;
}.spy8-app.spy8-app .balance-card__icon{
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-bg); border: 1px solid rgba(34,197,94,.3);
  border-radius: var(--radius-md); color: var(--color-accent);
}.spy8-app.spy8-app .balance-card__icon .icon{ width: 16px; height: 16px; }.spy8-app.spy8-app .balance-card__k{ font-size: 9px; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: var(--tracking-wide); }.spy8-app.spy8-app .balance-card__v{ font-size: 15px; font-weight: var(--weight-bold); color: var(--color-accent); }.spy8-app.spy8-app .balance-card__v span{ font-size: 10px; font-weight: var(--weight-regular); color: var(--color-text-dim); }.spy8-app.spy8-app .tokens__note{ font-size: var(--text-sm); color: var(--color-text-dim); display: flex; align-items: center; gap: 5px; margin-top: 7px; justify-content: flex-end; }.spy8-app.spy8-app .tokens__note .icon{ width: 11px; height: 11px; }.spy8-app.spy8-app .pkggrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }.spy8-app.spy8-app .pkg{
  position: relative;
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  background: var(--color-bg-panel);
  padding: 16px;
  display: flex; flex-direction: column;
}.spy8-app.spy8-app .pkg--popular{ border-color: var(--color-accent-deep); box-shadow: 0 0 18px rgba(34,197,94,.12); }.spy8-app.spy8-app .pkg__flag{
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--color-accent-strong); color: #04120a;
  font-size: 8.5px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide);
  padding: 3px 10px; border-radius: 3px;
  white-space: nowrap;
}.spy8-app.spy8-app .pkg__top{ display: flex; align-items: flex-start; gap: 10px; }.spy8-app.spy8-app .pkg__icon{
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-inset); color: var(--color-info);
}.spy8-app.spy8-app .pkg__icon .icon{ width: 17px; height: 17px; }.spy8-app.spy8-app .pkg__name{ font-size: var(--text-xl); font-weight: var(--weight-bold); color: #eef3fa; }.spy8-app.spy8-app .pkg__desc{ font-size: var(--text-sm); color: var(--color-text-dim); margin-top: 1px; }.spy8-app.spy8-app .pkg__off{
  margin-left: auto;
  font-size: 9.5px; font-weight: var(--weight-bold);
  color: var(--color-accent);
  background: var(--color-accent-bg);
  border: 1px solid rgba(34,197,94,.3);
  padding: 3px 8px; border-radius: 4px;
  white-space: nowrap;
}.spy8-app.spy8-app .pkg__amt{ font-size: 21px; font-weight: var(--weight-bold); color: #eef3fa; margin-top: 13px; }.spy8-app.spy8-app .pkg__amt span{ font-size: 11px; font-weight: var(--weight-regular); color: var(--color-text-dim); }.spy8-app.spy8-app .pkg__price{ font-size: 15px; font-weight: var(--weight-semi); color: var(--color-text); margin-top: 2px; }.spy8-app.spy8-app .pkg__price s{ color: var(--color-text-faint); font-weight: var(--weight-regular); font-size: 11px; margin-left: 7px; }.spy8-app.spy8-app .pkg__hr{ border: 0; border-top: var(--border-thin); margin: 12px 0; }.spy8-app.spy8-app .pkg__feats{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; flex: 1; }.spy8-app.spy8-app .pkg__feats li{
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-md); color: var(--color-text-dim);
}.spy8-app.spy8-app .pkg__feats .icon{ width: 12px; height: 12px; color: var(--color-accent); }.spy8-app.spy8-app /* ============================ PURCHASED PLAN / TOKEN USAGE ============================ */

.usage-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }.spy8-app.spy8-app .statcard{
  display: flex; align-items: center; gap: 13px;
  border: var(--border-thin); border-radius: var(--radius-lg);
  background: var(--color-bg-panel);
  padding: 15px 16px;
}.spy8-app.spy8-app .statcard__icon{
  width: 42px; height: 42px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
}.spy8-app.spy8-app .statcard__icon .icon{ width: 20px; height: 20px; }.spy8-app.spy8-app .statcard__k{ font-size: var(--text-md); color: var(--color-text-dim); }.spy8-app.spy8-app .statcard__v{ font-size: 22px; font-weight: var(--weight-bold); color: #eef3fa; margin-top: 2px; }.spy8-app.spy8-app .plandetail{
  display: grid; grid-template-columns: 1.2fr 1.1fr 1fr 1.4fr;
  border: var(--border-thin); border-radius: var(--radius-lg);
  background: var(--color-bg-panel);
  margin-bottom: 14px;
}.spy8-app.spy8-app .plandetail__cell{ display: flex; align-items: center; gap: 12px; padding: 15px 18px; }.spy8-app.spy8-app .plandetail__cell + .plandetail__cell{ border-left: var(--border-thin); }.spy8-app.spy8-app .plandetail__icon{
  width: 34px; height: 34px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-inset);
}.spy8-app.spy8-app .plandetail__icon .icon{ width: 16px; height: 16px; }.spy8-app.spy8-app .plandetail__k{ font-size: 9.5px; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: var(--tracking-wide); }.spy8-app.spy8-app .plandetail__v{ font-size: var(--text-lg); font-weight: var(--weight-semi); color: var(--color-text); margin-top: 2px; }.spy8-app.spy8-app .plandetail__s{ font-size: var(--text-sm); color: var(--color-text-dim); margin-top: 1px; }.spy8-app.spy8-app .usagebar{ height: 6px; border-radius: 3px; background: var(--color-border); overflow: hidden; margin-top: 7px; }.spy8-app.spy8-app .usagebar__fill{ height: 100%; background: var(--color-accent-strong); border-radius: 3px; }.spy8-app.spy8-app /* ============================ SUPPORT ============================ */

.supgrid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }.spy8-app.spy8-app .supcard{
  border: var(--border-thin); border-radius: var(--radius-lg);
  background: var(--color-bg-panel);
  padding: 16px;
  display: flex; flex-direction: column; gap: 9px;
}.spy8-app.spy8-app .supcard__icon{
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
}.spy8-app.spy8-app .supcard__icon .icon{ width: 18px; height: 18px; }.spy8-app.spy8-app .supcard__name{ font-size: var(--text-xl); font-weight: var(--weight-bold); color: #eef3fa; }.spy8-app.spy8-app .supcard__desc{ font-size: var(--text-md); color: var(--color-text-dim); line-height: 1.45; flex: 1; }.spy8-app.spy8-app .supcard .btn{ width: 100%; }.spy8-app.spy8-app /* FAQ accordion */
.faq-item{ border: var(--border-thin); border-radius: var(--radius-md); background: var(--color-bg-inset); }.spy8-app.spy8-app .faq-item + .faq-item{ margin-top: 9px; }.spy8-app.spy8-app .faq-item__q{
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 12px 14px;
  text-align: left; font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-text);
}.spy8-app.spy8-app .faq-item__num{
  width: 19px; height: 19px; flex: none;
  border: 1px solid var(--color-accent-deep); border-radius: 50%;
  color: var(--color-accent); font-size: 9.5px; font-weight: var(--weight-bold);
  display: flex; align-items: center; justify-content: center;
}.spy8-app.spy8-app .faq-item__q .icon{ margin-left: auto; width: 13px; height: 13px; color: var(--color-text-dim); }.spy8-app.spy8-app .faq-item.is-open .faq-item__q{ color: var(--color-accent); }.spy8-app.spy8-app .faq-item.is-open .faq-item__num{ background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: #04120a; }.spy8-app.spy8-app .faq-item__a{
  padding: 0 14px 13px 44px;
  font-size: var(--text-md); color: var(--color-text-dim); line-height: 1.6;
  display: none;
}.spy8-app.spy8-app .faq-item.is-open .faq-item__a{ display: block; }.spy8-app.spy8-app /* ============================ SETTINGS ============================ */

.setgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }.spy8-app.spy8-app .setgrid__row2{ grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }.spy8-app.spy8-app .setcard__head{ display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: var(--border-thin); }.spy8-app.spy8-app .setcard__icon{
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-accent-bg); border: 1px solid rgba(34,197,94,.3);
  color: var(--color-accent);
}.spy8-app.spy8-app .setcard__icon--teal{ background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.3); color: #2dd4bf; }.spy8-app.spy8-app .setcard__icon .icon{ width: 15px; height: 15px; }.spy8-app.spy8-app .setcard__title{ font-size: var(--text-xl); font-weight: var(--weight-bold); color: #eef3fa; }.spy8-app.spy8-app .setcard__sub{ font-size: var(--text-sm); color: var(--color-text-dim); margin-top: 1px; }.spy8-app.spy8-app .setrow{
  display: flex; align-items: center; gap: 11px;
  padding: 12px 15px;
}.spy8-app.spy8-app .setrow + .setrow{ border-top: 1px solid rgba(23,35,58,.5); }.spy8-app.spy8-app .setrow__icon{
  width: 28px; height: 28px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-inset); color: var(--color-text-dim);
}.spy8-app.spy8-app .setrow__icon .icon{ width: 14px; height: 14px; }.spy8-app.spy8-app .setrow__t{ font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-text); }.spy8-app.spy8-app .setrow__s{ font-size: var(--text-sm); color: var(--color-text-dim); margin-top: 1px; }.spy8-app.spy8-app .setrow__ctl{ margin-left: auto; flex: none; }.spy8-app.spy8-app .setrow__ctl .select{ width: 190px; }.spy8-app.spy8-app .sesslist{ display: flex; flex-direction: column; gap: 8px; }.spy8-app.spy8-app .sessrow{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-inset);
}.spy8-app.spy8-app .sessrow--cur{ border-color: var(--color-accent-deep); }.spy8-app.spy8-app .sessrow__icon{
  width: 30px; height: 30px; flex: none; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-panel2); border: var(--border-thin); color: var(--color-accent);
}.spy8-app.spy8-app .sessrow__info{ min-width: 0; flex: 1; }.spy8-app.spy8-app .sessrow__info b{ display: block; font-size: var(--text-md); color: var(--color-text); font-weight: var(--weight-semi); }.spy8-app.spy8-app /* profile card specifics */
.profile-body{ display: flex; gap: 16px; padding: 15px; align-items: center; }.spy8-app.spy8-app .profile-avatar{
  position: relative; width: 86px; height: 86px; flex: none;
  border-radius: 50%;
  background: var(--color-bg-inset);
  border: var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-faint);
}.spy8-app.spy8-app .profile-avatar .icon{ width: 44px; height: 44px; }.spy8-app.spy8-app .profile-avatar__cam{
  position: absolute; right: -1px; bottom: -1px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-bg-panel2); border: var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-dim);
}.spy8-app.spy8-app .profile-avatar__cam .icon{ width: 11px; height: 11px; }.spy8-app.spy8-app .profile-fields{ flex: 1; display: flex; flex-direction: column; gap: 9px; }.spy8-app.spy8-app .profile-fields .field{ margin-bottom: 0; }.spy8-app.spy8-app .profile-fields .field__label{ margin-bottom: 4px; }.spy8-app.spy8-app /* toggle switch */
.switch{
  position: relative; width: 38px; height: 20px; flex: none;
  border-radius: 10px; background: var(--color-border-strong);
  cursor: pointer; transition: background .15s;
}.spy8-app.spy8-app .switch::after{
  content: ''; position: absolute; top: 2.5px; left: 2.5px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #9fb0c7; transition: transform .15s, background .15s;
}.spy8-app.spy8-app .switch.is-on{ background: var(--color-accent-strong); box-shadow: 0 0 8px rgba(34,197,94,.35); }.spy8-app.spy8-app .switch.is-on::after{ transform: translateX(18px); background: #fff; }.spy8-app.spy8-app /* ============================ LOGOUT MODAL ============================ */

.logout-body{ text-align: center; padding: 22px 20px 18px; }.spy8-app.spy8-app .logout-icon{
  width: 54px; height: 54px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--color-danger-bg);
  border: 1px solid rgba(239,68,68,.35);
  color: var(--color-danger);
}.spy8-app.spy8-app .logout-icon .icon{ width: 24px; height: 24px; }.spy8-app.spy8-app .logout-title{ font-size: 17px; font-weight: var(--weight-bold); color: #eef3fa; }.spy8-app.spy8-app .logout-sub{ font-size: var(--text-md); color: var(--color-text-dim); margin-top: 7px; }.spy8-app.spy8-app .modal--logout{ width: 380px; }.spy8-app.spy8-app .modal--logout .modal__head{ border-bottom: 0; padding: 10px 10px 0; }.spy8-app.spy8-app .modal--logout .modal__body{ padding: 0 16px; }.spy8-app.spy8-app .modal--logout .modal__foot{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.spy8-app.spy8-app /* training-simulation corner box (support/settings page heads) */
.simbox{
  margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-panel);
  padding: 8px 13px;
}.spy8-app.spy8-app .simbox .icon{ width: 15px; height: 15px; color: var(--color-purple-hi); }.spy8-app.spy8-app .simbox__t{ font-size: 10px; font-weight: var(--weight-semi); color: var(--color-text-dim); }.spy8-app.spy8-app .simbox__s{ font-size: 8.5px; color: var(--color-text-faint); }.spy8-app.spy8-app /* profile fields — horizontal label/input rows (PROMPT 2) */
.pfield{ display: flex; align-items: center; gap: 12px; }.spy8-app.spy8-app .pfield__label{ width: 78px; flex: none; font-size: var(--text-sm); color: var(--color-text-dim); }.spy8-app.spy8-app .pfield .input{ flex: 1; }.spy8-app.spy8-app .pfield .input[readonly]{ color: var(--color-text); }.spy8-app.spy8-app /* ============================ MODULE PAGES (PROMPT 3) ============================ */

/* top strip: back + platform icon + title/badge/sub + right meta */
.modhead{
  display: flex; align-items: center; gap: 14px;
  border: var(--border-thin); border-radius: var(--radius-lg);
  background: var(--color-bg-panel);
  padding: 11px 16px; margin-bottom: 14px;
}.spy8-app.spy8-app .modhead__icon{
  width: 40px; height: 40px; flex: none;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
}.spy8-app.spy8-app .modhead__icon svg{ width: 22px; height: 22px; }.spy8-app.spy8-app .modhead__title{ display: flex; align-items: center; gap: 10px; }.spy8-app.spy8-app .modhead__title h1{ font-size: 17px; font-weight: var(--weight-bold); color: #eef3fa; }.spy8-app.spy8-app .simbadge{
  font-size: 9px; font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
  border: 1px solid rgba(34,197,94,.4); background: var(--color-accent-bg);
  border-radius: 4px; padding: 2.5px 8px; text-transform: uppercase;
}.spy8-app.spy8-app .modhead__sub{ font-size: var(--text-md); color: var(--color-text-dim); margin-top: 2px; }.spy8-app.spy8-app .modhead__meta{ margin-left: auto; display: flex; gap: 30px; }.spy8-app.spy8-app .modmeta__k{ font-size: 9px; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: var(--tracking-wide); }.spy8-app.spy8-app .modmeta__v{ font-size: var(--text-md); color: var(--color-text); font-weight: var(--weight-medium); margin-top: 2px; white-space: nowrap; }.spy8-app.spy8-app /* ---- chat 3-column layout ---- */
.chatgrid{
  display: grid;
  grid-template-columns: 232px minmax(0,1fr) 212px;
  gap: 14px;
  height: calc(100vh - var(--header-h) - var(--metrics-h) - 32px - 68px - 14px);
  min-height: 480px;
}.spy8-app.spy8-app /* conversations list */
.convo-list{ display: flex; flex-direction: column; min-height: 0; }.spy8-app.spy8-app .convo-list .card__body{ padding: 10px; display: flex; flex-direction: column; min-height: 0; }.spy8-app.spy8-app .convo-list .card__foot{ padding: 8px; }.spy8-app.spy8-app .convo-search{ margin-bottom: 8px; }.spy8-app.spy8-app .convo-filters{ display: flex; gap: 7px; margin-bottom: 8px; }.spy8-app.spy8-app .convo-filters .select{ height: 28px; font-size: 9.5px; padding: 0 18px 0 7px; flex: 1; min-width: 0; background-position: right 6px center; }.spy8-app.spy8-app .convo{
  display: flex; align-items: center; gap: 9px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left; width: 100%;
}.spy8-app.spy8-app .convo:hover{ background: var(--color-bg-panel2); }.spy8-app.spy8-app .convo.is-active{ border-color: var(--chat-accent, var(--color-accent-deep)); background: var(--color-bg-panel2); }.spy8-app.spy8-app .convo__avatar{
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--color-bg-hover); border: var(--border-thin);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: var(--weight-semi); color: var(--color-text-dim);
}.spy8-app.spy8-app .convo__name{ font-size: var(--text-md); font-weight: var(--weight-semi); color: #e6edf7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.spy8-app.spy8-app .convo__prev{ font-size: 9.5px; color: var(--color-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }.spy8-app.spy8-app .convo__time{ margin-left: auto; flex: none; font-size: 9px; color: var(--color-text-faint); }.spy8-app.spy8-app .convo > span:nth-child(2){ min-width: 0; flex: 1; }.spy8-app.spy8-app .convo-pager{ display: flex; justify-content: center; gap: 5px; }.spy8-app.spy8-app .convo-pager .page-btn{ min-width: 22px; height: 22px; font-size: 10px; }.spy8-app.spy8-app /* chat thread */
.chatview{ display: flex; flex-direction: column; min-height: 0; }.spy8-app.spy8-app .chatview__head{
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: var(--border-thin);
}.spy8-app.spy8-app .chatview__head .convo__avatar{ width: 32px; height: 32px; font-size: 11px; }.spy8-app.spy8-app .chatview__name{ font-size: var(--text-lg); font-weight: var(--weight-semi); color: #e6edf7; }.spy8-app.spy8-app .chatview__status{ font-size: 9.5px; color: var(--color-text-dim); margin-top: 1px; }.spy8-app.spy8-app .chatview__menu{ margin-left: auto; color: var(--color-text-dim); padding: 4px; }.spy8-app.spy8-app .chatview__menu:hover{ color: var(--color-text); }.spy8-app.spy8-app .chatview__body{ flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }.spy8-app.spy8-app .chatdate{
  align-self: center;
  font-size: 9px; color: var(--color-text-dim);
  background: var(--color-bg-inset); border: var(--border-thin);
  border-radius: 4px; padding: 3px 10px; margin: 2px 0 4px;
}.spy8-app.spy8-app .msg{ display: flex; gap: 8px; max-width: 78%; }.spy8-app.spy8-app .msg .convo__avatar{ width: 24px; height: 24px; font-size: 9px; margin-top: 2px; }.spy8-app.spy8-app .msg__bubble{
  background: var(--color-bg-panel2);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  border-top-left-radius: 3px;
  padding: 8px 12px;
  font-size: var(--text-md); color: var(--color-text); line-height: 1.5;
}.spy8-app.spy8-app .msg__time{ font-size: 8.5px; color: var(--color-text-faint); margin-top: 4px; }.spy8-app.spy8-app .msg--out{ align-self: flex-end; flex-direction: row-reverse; }.spy8-app.spy8-app .msg--out .msg__bubble{
  border-top-left-radius: var(--radius-lg); border-top-right-radius: 3px;
  background: var(--chat-out, #1d4ed8); border-color: transparent; color: #fff;
}.spy8-app.spy8-app .msg--out .msg__time{ text-align: right; }.spy8-app.spy8-app .msg__ticks{ color: var(--color-info); }.spy8-app.spy8-app /* attachment card */
.msg-file{
  display: flex; align-items: center; gap: 10px;
  background: var(--color-bg-inset); border: var(--border-thin);
  border-radius: var(--radius-md); padding: 9px 12px; min-width: 220px;
}.spy8-app.spy8-app .msg-file__icon{
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: rgba(59,130,246,.14); color: #60a5fa;
}.spy8-app.spy8-app .msg-file__icon .icon{ width: 14px; height: 14px; }.spy8-app.spy8-app .msg-file__name{ font-size: var(--text-md); color: var(--color-text); font-weight: var(--weight-medium); }.spy8-app.spy8-app .msg-file__size{ font-size: 9px; color: var(--color-text-dim); margin-top: 1px; }.spy8-app.spy8-app .msg-file__dl{ margin-left: auto; color: var(--color-text-dim); }.spy8-app.spy8-app .msg-file__dl:hover{ color: var(--color-accent); }.spy8-app.spy8-app .msg-file__dl .icon{ width: 14px; height: 14px; }.spy8-app.spy8-app /* conversation details (right col) */
.convdetail{ min-height: 0; overflow-y: auto; overflow-x: hidden; }.spy8-app.spy8-app .convdetail .card__body{ padding: 12px; }.spy8-app.spy8-app .detail-row{ display: flex; align-items: center; gap: 9px; padding: 7px 0; }.spy8-app.spy8-app .detail-row .icon{ width: 13px; height: 13px; color: var(--color-text-faint); }.spy8-app.spy8-app .detail-row__k{ font-size: 9px; color: var(--color-text-dim); }.spy8-app.spy8-app .detail-row__v{ font-size: var(--text-md); color: var(--color-text); font-weight: var(--weight-medium); margin-top: 1px; }.spy8-app.spy8-app .detail-sec{
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: var(--weight-semi); color: var(--color-text-dim);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  margin: 13px 0 8px;
}.spy8-app.spy8-app .detail-sec a{ color: var(--color-accent); font-weight: var(--weight-regular); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); }.spy8-app.spy8-app .mediagrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.spy8-app.spy8-app .mtile{
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-inset); padding: 9px 7px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center; min-width: 0;
}.spy8-app.spy8-app .mtile svg{ width: 20px; height: 20px; }.spy8-app.spy8-app .mtile__name{ font-size: 8px; color: var(--color-text-dim); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.spy8-app.spy8-app .mtile__size{ font-size: 8px; color: var(--color-text-faint); }.spy8-app.spy8-app .detail-actions{ margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }.spy8-app.spy8-app .detail-actions .btn{ justify-content: flex-start; }.spy8-app.spy8-app /* chatcol3— right column of chatgrid: 3 cards merged into one on desktop */
.chatcol3{ display: flex; flex-direction: column; min-width: 0; min-height: 0; }.spy8-app.spy8-app .chatcol3 .card{ border-radius: 0; }.spy8-app.spy8-app .chatcol3 .card + .card{ border-top: 0; }.spy8-app.spy8-app .chatcol3 .card:first-child{ border-radius: var(--radius-lg) var(--radius-lg) 0 0; flex: 1; min-height: 0; }.spy8-app.spy8-app .chatcol3 .card:last-child{ border-radius: 0 0 var(--radius-lg) var(--radius-lg); }.spy8-app.spy8-app .chatcol3 .card__head{ flex: none; }.spy8-app.spy8-app /* mobile meta strip (rendered m-only next to .modhead) */
.modmeta{ border: var(--border-thin); border-radius: var(--radius-lg); background: var(--color-bg-panel); overflow: hidden; margin-bottom: 14px; }.spy8-app.spy8-app .modmeta__cell{ flex: 1; display: flex; align-items: center; gap: 8px; padding: 9px 12px; min-width: 0; }.spy8-app.spy8-app .modmeta__cell + .modmeta__cell{ border-left: var(--border-thin); }.spy8-app.spy8-app .modmeta__cell > .icon{ width: 15px; height: 15px; color: var(--color-text-dim); flex: none; }.spy8-app.spy8-app .modmeta__cell > span{ min-width: 0; }.spy8-app.spy8-app /* ============================ CALL HISTORY ============================ */

.callstats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }.spy8-app.spy8-app .calltype{ display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-md); }.spy8-app.spy8-app .calltype .icon{ width: 13px; height: 13px; }.spy8-app.spy8-app .calltype--in{ color: var(--color-accent); }.spy8-app.spy8-app .calltype--out{ color: var(--color-info); }.spy8-app.spy8-app .calltype--miss{ color: var(--color-danger); }.spy8-app.spy8-app .callpage-head{ margin-bottom: 14px; }.spy8-app.spy8-app /* ============================ PROMPT 4 — DATA MODULES ============================ */

/* shared 2-col layout: main + right side panel */
.modsplit{ display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 14px; align-items: start; }.spy8-app.spy8-app /* ---- Call Recording ---- */
.recdetail .card__title{ white-space: nowrap; }.spy8-app.spy8-app .recdetail .kv{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5.5px 0; font-size: var(--text-md); }.spy8-app.spy8-app .recdetail .kv b{ font-weight: var(--weight-regular); color: var(--color-text-dim); }.spy8-app.spy8-app .recdetail .kv span:last-child{ color: var(--color-text); text-align: right; }.spy8-app.spy8-app .recdetail .kv .simbadge{ font-size: 8px; padding: 1.5px 6px; }.spy8-app.spy8-app .player{
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-inset); padding: 10px 12px; margin: 12px 0;
}.spy8-app.spy8-app .player__top{ display: flex; align-items: center; gap: 12px; }.spy8-app.spy8-app .player__play{
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-accent-deep);
  background: var(--color-accent-bg); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
}.spy8-app.spy8-app .player__play .icon{ width: 15px; height: 15px; }.spy8-app.spy8-app .player__wave{ flex: 1; height: 44px; display: flex; align-items: center; gap: 1.5px; min-width: 0; overflow: hidden; }.spy8-app.spy8-app .player__wave i{ flex: 1; background: var(--color-accent-deep); border-radius: 1px; min-height: 2px; }.spy8-app.spy8-app .player.is-playing .player__wave i{ animation: wavepulse 1s ease-in-out infinite alternate; }@keyframes wavepulse{ from { transform: scaleY(.55); } to { transform: scaleY(1); } }.spy8-app.spy8-app .player__rate{ font-size: 9.5px; color: var(--color-text-dim); }.spy8-app.spy8-app .player__times{ display: flex; justify-content: space-between; font-size: 9px; color: var(--color-text-faint); margin-top: 6px; }.spy8-app.spy8-app /* ---- Text Messages ---- */
.smssplit{ display: grid; grid-template-columns: 315px minmax(0,1fr); gap: 14px; align-items: start; }.spy8-app.spy8-app .smslist .card__body{ padding: 10px; }.spy8-app.spy8-app .smsrow{
  display: flex; gap: 9px; width: 100%; text-align: left;
  padding: 9px 10px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer;
}.spy8-app.spy8-app .smsrow:hover{ background: var(--color-bg-panel2); }.spy8-app.spy8-app .smsrow.is-active{ border-color: #3b82f6; background: var(--color-bg-panel2); }.spy8-app.spy8-app .smsrow__head{ display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }.spy8-app.spy8-app .smsrow__name{ font-size: var(--text-md); font-weight: var(--weight-semi); color: #e6edf7; }.spy8-app.spy8-app .smsrow__num{ font-size: 9px; color: var(--color-text-faint); margin-left: 6px; font-weight: var(--weight-regular); }.spy8-app.spy8-app .smsrow__time{ font-size: 9px; color: var(--color-text-faint); flex: none; }.spy8-app.spy8-app .smsrow__prev{ font-size: 9.5px; color: var(--color-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }.spy8-app.spy8-app .smsrow__foot{ display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }.spy8-app.spy8-app .smsdir{ font-size: 9px; display: inline-flex; align-items: center; gap: 4px; }.spy8-app.spy8-app .smsdir .icon{ width: 10px; height: 10px; }.spy8-app.spy8-app .smsdir--in{ color: var(--color-accent); }.spy8-app.spy8-app .smsdir--out{ color: var(--color-info); }.spy8-app.spy8-app .smsrow > span:nth-child(2){ min-width: 0; flex: 1; }.spy8-app.spy8-app .smsdetail .kv{ display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: var(--text-md); }.spy8-app.spy8-app .smsdetail .kv b{ font-weight: var(--weight-regular); color: var(--color-text-dim); }.spy8-app.spy8-app .smsdetail .kv span:last-child{ color: var(--color-text); text-align: right; }.spy8-app.spy8-app .smsexport{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 12px; }.spy8-app.spy8-app .smsexport .btn{ flex-direction: column; gap: 5px; padding: 10px 6px; font-size: 9.5px; }.spy8-app.spy8-app .smsexport .btn .icon{ width: 14px; height: 14px; }.spy8-app.spy8-app /* ---- Location ---- */
.locstats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 14px; }.spy8-app.spy8-app .locsplit{ display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 14px; align-items: start; }.spy8-app.spy8-app .mapbox{
  position: relative; border: var(--border-thin); border-radius: var(--radius-lg);
  background: #0a1220; overflow: hidden; height: 265px;
}.spy8-app.spy8-app .mapbox svg.map{ position: absolute; inset: 0; width: 100%; height: 100%; }.spy8-app.spy8-app .maptoggle{
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; gap: 0; border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-panel); overflow: hidden;
}.spy8-app.spy8-app .maptoggle button{ padding: 5px 12px; font-size: var(--text-sm); color: var(--color-text-dim); }.spy8-app.spy8-app .maptoggle button.is-active{ background: var(--color-accent-strong); color: #04120a; font-weight: var(--weight-semi); }.spy8-app.spy8-app .mapctl{
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; flex-direction: column; gap: 5px;
}.spy8-app.spy8-app .mapctl button{
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-panel); color: var(--color-text);
  font-size: 14px; font-weight: var(--weight-semi);
}.spy8-app.spy8-app .mapctl button .icon{ width: 12px; height: 12px; }.spy8-app.spy8-app .maplegend{
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: flex; gap: 14px; font-size: 9px; color: var(--color-text-dim);
}.spy8-app.spy8-app .maplegend i{ display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }.spy8-app.spy8-app .mapbox .simbadge{ position: absolute; right: 10px; bottom: 10px; z-index: 2; }.spy8-app.spy8-app .loctime{ display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 4px; }.spy8-app.spy8-app .loctime::before{ content: ''; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 1px; background: var(--color-border-strong); }.spy8-app.spy8-app .loctime__item{ display: flex; gap: 11px; padding: 7px 0; position: relative; }.spy8-app.spy8-app .loctime__dot{
  width: 19px; height: 19px; flex: none; border-radius: 50%;
  border: 1px solid var(--color-accent-deep); background: var(--color-bg-inset);
  color: var(--color-accent); font-size: 9px; font-weight: var(--weight-bold);
  display: flex; align-items: center; justify-content: center; z-index: 1;
}.spy8-app.spy8-app .loctime__dot--cur{ border-color: var(--color-danger); color: var(--color-danger); }.spy8-app.spy8-app .loctime__dot--cur svg{ width: 10px; height: 10px; }.spy8-app.spy8-app .loctime__name{ font-size: var(--text-md); color: var(--color-text); font-weight: var(--weight-medium); }.spy8-app.spy8-app .loctime__t{ font-size: 9px; color: var(--color-text-dim); margin-top: 1px; }.spy8-app.spy8-app .locbadge-cur{ font-size: 8.5px; color: var(--color-purple-hi); background: rgba(139,92,246,.15); border: 1px solid rgba(139,92,246,.35); border-radius: 4px; padding: 1.5px 7px; margin-left: auto; }.spy8-app.spy8-app .insight{ display: flex; align-items: center; gap: 11px; padding: 10px; border: var(--border-thin); border-radius: var(--radius-md); background: var(--color-bg-inset); }.spy8-app.spy8-app .insight + .insight{ margin-top: 9px; }.spy8-app.spy8-app .insight .icon{ width: 15px; height: 15px; color: var(--color-purple-hi); }.spy8-app.spy8-app .insight__k{ font-size: 9px; color: var(--color-text-dim); }.spy8-app.spy8-app .insight__v{ font-size: var(--text-md); color: var(--color-text); font-weight: var(--weight-semi); margin-top: 1px; }.spy8-app.spy8-app /* ---- Media ---- */
.mediatabs{ display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }.spy8-app.spy8-app .mtab{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: var(--border-thin); border-radius: var(--radius-md);
  background: var(--color-bg-panel); color: var(--color-text-dim);
  font-size: var(--text-md); font-weight: var(--weight-medium);
}.spy8-app.spy8-app .mtab .icon{ width: 13px; height: 13px; }.spy8-app.spy8-app .mtab.is-active{ background: rgba(139,92,246,.16); border-color: rgba(139,92,246,.45); color: var(--color-purple-hi); }.spy8-app.spy8-app .mediatabs .grow{ flex: 1; }.spy8-app.spy8-app .mediasplit{ display: grid; grid-template-columns: 165px minmax(0,1fr) 240px; gap: 14px; align-items: start; }.spy8-app.spy8-app .album{ display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; width: 100%; text-align: left; }.spy8-app.spy8-app .album:hover{ background: var(--color-bg-panel2); }.spy8-app.spy8-app .album.is-active{ background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.4); }.spy8-app.spy8-app .album .icon{ width: 13px; height: 13px; color: var(--color-text-dim); }.spy8-app.spy8-app .album.is-active .icon, .spy8-app.spy8-app .album.is-active .album__n{ color: var(--color-purple-hi); }.spy8-app.spy8-app .album__n{ font-size: var(--text-md); color: var(--color-text); }.spy8-app.spy8-app .album__c{ margin-left: auto; font-size: 9.5px; color: var(--color-text-faint); }.spy8-app.spy8-app .mgrid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.spy8-app.spy8-app .mcell{ border: var(--border-thin); border-radius: var(--radius-md); background: var(--color-bg-panel2); overflow: hidden; cursor: pointer; }.spy8-app.spy8-app .mcell.is-sel{ border-color: #3b82f6; }.spy8-app.spy8-app .mcell__thumb{ position: relative; aspect-ratio: 16/10; overflow: hidden; }.spy8-app.spy8-app .mcell__thumb svg{ width: 100%; height: 100%; display: block; }.spy8-app.spy8-app .mcell__check{
  position: absolute; top: 7px; left: 7px; width: 15px; height: 15px;
  border: 1.5px solid rgba(255,255,255,.55); border-radius: 3px;
  background: rgba(0,0,0,.35); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; line-height: 1;
}.spy8-app.spy8-app .mcell.is-sel .mcell__check{ background: #3b82f6; border-color: #3b82f6; }.spy8-app.spy8-app .mcell__check .icon{ width: 9px; height: 9px; }.spy8-app.spy8-app .mcell__meta{ padding: 6px 8px; }.spy8-app.spy8-app .mcell__name{ font-size: 9px; color: var(--color-text); font-weight: var(--weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.spy8-app.spy8-app .mcell__d{ font-size: 8px; color: var(--color-text-faint); margin-top: 2px; display: flex; justify-content: space-between; }.spy8-app.spy8-app .mpview__thumb{ position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16/10; border: var(--border-thin); }.spy8-app.spy8-app .mpview__thumb svg{ width: 100%; height: 100%; display: block; }.spy8-app.spy8-app .mpview__nav{ position: absolute; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.7); padding: 4px; }.spy8-app.spy8-app .mpview__nav .icon{ width: 12px; height: 12px; }.spy8-app.spy8-app .mpview__name{ font-size: var(--text-md); font-weight: var(--weight-semi); color: #eef3fa; margin: 9px 0 2px; }.spy8-app.spy8-app .mpview__d{ font-size: 9px; color: var(--color-text-dim); }.spy8-app.spy8-app .mpview .kv{ display: flex; justify-content: space-between; padding: 4.5px 0; font-size: 10px; }.spy8-app.spy8-app .mpview .kv b{ font-weight: var(--weight-regular); color: var(--color-text-dim); }.spy8-app.spy8-app .mpview .kv span:last-child{ color: var(--color-text); text-align: right; }.spy8-app.spy8-app .mpview__btns{ display: flex; gap: 7px; margin-top: 11px; }.spy8-app.spy8-app .mpview__btns .btn{ flex: 1; font-size: 9.5px; padding: 7px 4px; }.spy8-app.spy8-app /* ============================ PROMPT 5 — MOBILE ============================ */

.m-only{ display: none !important; }@media (max-width: 860px){.spy8-app.spy8-app .d-only{ display: none !important; }.spy8-app.spy8-app .m-only{ display: block !important; }.spy8-app.spy8-app .row.m-only, .spy8-app.spy8-app .flex.m-only{ display: flex !important; }.spy8-app.spy8-app /* welcome + status strip (mobile dashboard top card) */
  .welcomecard{
    border: var(--border-thin); border-radius: var(--radius-lg);
    background: var(--color-bg-panel); margin-bottom: 12px; overflow: hidden;
  }.spy8-app.spy8-app .welcomecard__top{ display: flex; gap: 12px; padding: 14px 14px 10px; align-items: center; }.spy8-app.spy8-app .welcomecard__shield{
    width: 52px; height: 52px; flex: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-accent);
    filter: drop-shadow(0 0 10px rgba(34,197,94,.35));
  }.spy8-app.spy8-app .welcomecard__shield svg{ width: 100%; height: 100%; }.spy8-app.spy8-app .welcomecard__name{ font-size: 15px; font-weight: var(--weight-bold); color: #eef3fa; }.spy8-app.spy8-app .welcomecard__prot{ font-size: 10px; color: var(--color-accent); margin-top: 3px; }.spy8-app.spy8-app .welcomecard__prot::before{ content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); margin-right: 5px; box-shadow: 0 0 6px var(--color-accent-glow); }.spy8-app.spy8-app .welcomecard__sub{ font-size: 9.5px; color: var(--color-text-dim); margin-top: 4px; line-height: 1.5; }.spy8-app.spy8-app .welcomestats{ display: flex; border-top: var(--border-thin); }.spy8-app.spy8-app .welcomestats > div{ flex: 1; padding: 9px 12px; }.spy8-app.spy8-app .welcomestats > div + div{ border-left: var(--border-thin); }.spy8-app.spy8-app .wstat__k{ font-size: 7.5px; letter-spacing: var(--tracking-wider); color: var(--color-text-faint); text-transform: uppercase; }.spy8-app.spy8-app .wstat__v{ display: flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: var(--weight-semi); color: var(--color-accent); margin-top: 3px; white-space: nowrap; }.spy8-app.spy8-app .wstat__v .icon{ width: 11px; height: 11px; }.spy8-app.spy8-app /* dashboard stacking— cols become content-level grid items */
  .dash, .spy8-app.spy8-app .dash .card, .spy8-app.spy8-app .card__body, .spy8-app.spy8-app .card__head, .spy8-app.spy8-app .welcomecard{ min-width: 0; }.spy8-app.spy8-app .card__link{ white-space: nowrap; }.spy8-app.spy8-app .card__head .muted-s{ white-space: nowrap; }.spy8-app.spy8-app .welcomestats > div{ min-width: 0; }.spy8-app.spy8-app .wstat__v{ white-space: normal; }.spy8-app.spy8-app .dash{ grid-template-columns: 1fr; }.spy8-app.spy8-app .dash__col{ display: contents; }.spy8-app.spy8-app .welcomecard{ order: 0; }.spy8-app.spy8-app .m-o1{ order: 1; }.spy8-app.spy8-app .m-o2{ order: 2; }.spy8-app.spy8-app .m-o3{ order: 3; }.spy8-app.spy8-app .m-o4{ order: 4; }.spy8-app.spy8-app .m-o5{ order: 5; }.spy8-app.spy8-app .m-o6{ order: 6; }.spy8-app.spy8-app /* live request status now shown on mobile (PROMPT 9 engine panel) */
  .genreq{ min-height: 88px; }.spy8-app.spy8-app .modgrid{ grid-template-columns: 1fr 1fr; gap: 8px; }.spy8-app.spy8-app .modtile{ padding: 9px 10px; }.spy8-app.spy8-app .modtile__name{ font-size: 10.5px; }.spy8-app.spy8-app .minipkg{ gap: 8px; }.spy8-app.spy8-app .minipkg__card{ padding: 9px; }.spy8-app.spy8-app .minipkg__amt{ font-size: 10.5px; }.spy8-app.spy8-app .minipkg__price{ font-size: 10px; }.spy8-app.spy8-app .minipkg .btn{ font-size: 9px; height: 26px; }.spy8-app.spy8-app .reqsum{ grid-template-columns: 1.4fr 1fr; }.spy8-app.spy8-app .reqsum__k{ font-size: 9.5px; }.spy8-app.spy8-app .reqsum__v{ font-size: 9.5px; }.spy8-app.spy8-app .reqsum__shield{ padding: 8px; }.spy8-app.spy8-app .reqsum__shield .shield-glow{ width: 46px; height: 46px; }.spy8-app.spy8-app /* mobile recent-request rows (dashboard) + history cards */
  .reqcards{ display: flex; flex-direction: column; gap: 9px; }.spy8-app.spy8-app .reqrow{
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 9px 11px;
    border: var(--border-thin); border-radius: var(--radius-md);
    background: var(--color-bg-inset); min-width: 0;
  }.spy8-app.spy8-app .reqrow__mods{ font-size: 8px; color: var(--color-text-dim); text-align: center; line-height: 1.3; white-space: nowrap; }.spy8-app.spy8-app .reqrow__mods b{ display: block; font-size: 11px; color: var(--color-text); }.spy8-app.spy8-app .reqrow .reqcard__date{ margin-left: auto; white-space: nowrap; }.spy8-app.spy8-app .reqcard{
    display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px;
    border: var(--border-thin); border-radius: var(--radius-md);
    background: var(--color-bg-inset); padding: 11px 12px;
  }.spy8-app.spy8-app .reqcard__id{ font-size: var(--text-md); font-weight: var(--weight-semi); color: #e6edf7; font-family: var(--font-mono); }.spy8-app.spy8-app .reqcard__num{ font-size: 9.5px; color: var(--color-text-dim); margin-top: 2px; }.spy8-app.spy8-app .reqcard__num .icon{ width: 9px; height: 9px; vertical-align: -1px; }.spy8-app.spy8-app .reqcard__chips{ display: flex; gap: 4px; margin-top: 9px; }.spy8-app.spy8-app .reqcard__r{ display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }.spy8-app.spy8-app .reqcard__tokens{ font-size: 11px; color: var(--color-text); font-weight: var(--weight-bold); display: flex; align-items: center; gap: 5px; }.spy8-app.spy8-app .reqcard__tokens .icon{ width: 12px; height: 12px; color: var(--color-accent); }.spy8-app.spy8-app .reqcard__tokens small{ display: block; font-size: 7.5px; color: var(--color-text-faint); font-weight: var(--weight-regular); }.spy8-app.spy8-app .reqcard__date{ font-size: 8.5px; color: var(--color-text-dim); display: flex; align-items: center; gap: 4px; }.spy8-app.spy8-app .reqcard__date .icon{ width: 10px; height: 10px; }.spy8-app.spy8-app .reqcard__view{ display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: var(--color-text); border: var(--border-thin); border-radius: var(--radius-md); padding: 4px 10px; background: var(--color-bg-panel2); }.spy8-app.spy8-app .reqcard__view .icon{ width: 10px; height: 10px; }.spy8-app.spy8-app .reqcard__chev{ color: var(--color-text-faint); }.spy8-app.spy8-app .reqcard__chev .icon{ width: 12px; height: 12px; }.spy8-app.spy8-app /* history page mobile */
  .filterbar{ flex-wrap: wrap; }.spy8-app.spy8-app .filterbar .input-icon{ width: 100%; max-width: none; flex: none; }.spy8-app.spy8-app .filterbar .select{ flex: 1; min-width: 0; }.spy8-app.spy8-app .filterbar .btn{ flex: 1; }.spy8-app.spy8-app .page-head__actions{ flex-direction: column; align-items: stretch; }.spy8-app.spy8-app /* new-request modal mobile: 2-col module grid, .spy8-app.spy8-app split footer buttons */
  .nr-modgrid{ grid-template-columns: 1fr 1fr; gap: 8px; }.spy8-app.spy8-app .nr-summary{ gap: 8px; }.spy8-app.spy8-app .modal__foot{ display: grid; grid-template-columns: 1fr 1.4fr; }.spy8-app.spy8-app .modal__foot .btn{ width: 100%; justify-content: center; }.spy8-app.spy8-app .nr-phone .input{ font-size: 11px; }.spy8-app.spy8-app /* tokens page mobile: stacked cards, .spy8-app.spy8-app split layout */
  .pkggrid{ grid-template-columns: 1fr; gap: 10px; }.spy8-app.spy8-app .pkg{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "top feats" "amt feats" "price feats" "btn btn";
    gap: 2px 12px; padding: 12px 13px;
  }.spy8-app.spy8-app .pkg__top{ grid-area: top; flex-wrap: wrap; }.spy8-app.spy8-app .pkg__amt{ grid-area: amt; margin-top: 6px; font-size: 16px; }.spy8-app.spy8-app .pkg__price{ grid-area: price; }.spy8-app.spy8-app .pkg__feats{ grid-area: feats; align-self: center; margin: 0; gap: 4px; }.spy8-app.spy8-app .pkg__feats li{ font-size: 9px; }.spy8-app.spy8-app .pkg__hr{ display: none; }.spy8-app.spy8-app .pkg .btn{ grid-area: btn; margin-top: 8px; }.spy8-app.spy8-app .pkg__off{ position: static; margin-left: 6px; }.spy8-app.spy8-app /* generic page-head on mobile: bordered card, .spy8-app.spy8-app no simbox */
  .page-head{ flex-wrap: nowrap; border: var(--border-thin); border-radius: var(--radius-lg); background: var(--color-bg-panel); padding: 11px 13px; min-width: 0; }.spy8-app.spy8-app .page-head > div{ min-width: 0; }.spy8-app.spy8-app .page-head__spacer{ flex: 0 0 8px; }.spy8-app.spy8-app .page-head .btn{ flex: none; }.spy8-app.spy8-app .card__head .filterbar{ min-width: 0 !important; flex: 1 0 100% !important; }.spy8-app.spy8-app .card__head .filterbar .input-icon{ width: 100%; max-width: none !important; flex: 0 0 100%; }.spy8-app.spy8-app .card__head .filterbar .select{ flex: 1 1 0; min-width: 0; }.spy8-app.spy8-app .card__head .filterbar .btn{ flex: 0 0 auto; }.spy8-app.spy8-app .page-head .simbox{ display: none; }.spy8-app.spy8-app .page-head__icon{ width: 34px; height: 34px; }.spy8-app.spy8-app .page-head__icon .icon{ width: 16px; height: 16px; }.spy8-app.spy8-app .page-head__title{ font-size: 14px; }.spy8-app.spy8-app .page-head__sub{ font-size: 9.5px; }.spy8-app.spy8-app /* support mobile: all FAQs collapsed, .spy8-app.spy8-app search hidden */
  .faq-search{ display: none; }.spy8-app.spy8-app /* settings mobile: profile as bordered label/value table */
  .profile-body{ flex-direction: row; align-items: center; }.spy8-app.spy8-app .profile-avatar{ width: 70px; height: 70px; }.spy8-app.spy8-app .profile-avatar .icon{ width: 34px; height: 34px; }.spy8-app.spy8-app .profile-fields{ display: none; }.spy8-app.spy8-app .pinfo{ flex: 1; border: var(--border-thin); border-radius: var(--radius-md); overflow: hidden; }.spy8-app.spy8-app .pinfo__row{ display: flex; font-size: 9.5px; }.spy8-app.spy8-app .pinfo__row + .pinfo__row{ border-top: var(--border-thin); }.spy8-app.spy8-app .pinfo__row b{ flex: 0 0 40%; padding: 8px 10px; font-weight: var(--weight-regular); color: var(--color-text-dim); border-right: var(--border-thin); }.spy8-app.spy8-app .pinfo__row span{ flex: 1; padding: 8px 10px; color: var(--color-text); }.spy8-app.spy8-app .setrow__ctl .select{ width: 150px; height: 28px; font-size: 9.5px; }.spy8-app.spy8-app /* token usage mobile */
  .usage-stats{ grid-template-columns: repeat(3, 1fr); gap: 8px; }.spy8-app.spy8-app .usage-stats .statcard{ flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px; }.spy8-app.spy8-app .usage-stats .statcard__icon{ width: 30px; height: 30px; }.spy8-app.spy8-app .usage-stats .statcard__icon .icon{ width: 15px; height: 15px; }.spy8-app.spy8-app .usage-stats .statcard__v{ font-size: 15px; }.spy8-app.spy8-app .plandetail{ grid-template-columns: repeat(4, 1fr); }.spy8-app.spy8-app .plandetail__cell{ padding: 10px 9px; flex-direction: column; align-items: flex-start; gap: 6px; }.spy8-app.spy8-app .plandetail__cell + .plandetail__cell{ border-left: var(--border-thin); border-top: 0; }.spy8-app.spy8-app .plandetail__icon{ width: 26px; height: 26px; }.spy8-app.spy8-app .plandetail__icon .icon{ width: 12px; height: 12px; }.spy8-app.spy8-app .plandetail__v{ font-size: 10px; }.spy8-app.spy8-app .plandetail__s{ font-size: 8px; }.spy8-app.spy8-app .plandetail__k{ font-size: 8px; }.spy8-app.spy8-app .usagebar{ display: none; }.spy8-app.spy8-app .usagering.m-only{ display: flex !important; align-items: center; gap: 8px; }.spy8-app.spy8-app .usagering svg{ width: 44px; height: 44px; }.spy8-app.spy8-app .table-wrap{ overflow-x: auto; }.spy8-app.spy8-app .table{ font-size: 9px; }.spy8-app.spy8-app .table th{ font-size: 7.5px; }.spy8-app.spy8-app .table th, .spy8-app.spy8-app .table td{ padding: 7px 7px; white-space: nowrap; }.spy8-app.spy8-app .plandetail, .spy8-app.spy8-app .plandetail__cell{ min-width: 0; }.spy8-app.spy8-app /* module pages (modhead + splits) mobile fallback */
  .modhead{ flex-wrap: wrap; gap: 10px; }.spy8-app.spy8-app .modhead--mstrip .modhead__meta{ display: none; }.spy8-app.spy8-app /* meta moves to .modmeta strip on mobile */
  .modmeta.m-only{ display: flex !important; }.spy8-app.spy8-app .modmeta__v{ font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.spy8-app.spy8-app .modmeta__k{ font-size: 8px; }.spy8-app.spy8-app .modmeta__cell{ padding: 9px 10px; gap: 6px; }.spy8-app.spy8-app .modhead__meta{ margin-left: 0; width: 100%; justify-content: space-between; gap: 12px; }.spy8-app.spy8-app .modhead--fb [data-back], .spy8-app.spy8-app .modhead--noback [data-back]{ display: none; }.spy8-app.spy8-app .modhead--nometa .modhead__meta{ display: none; }.spy8-app.spy8-app .modhead__meta > span + span{ border-left: var(--border-thin); padding-left: 12px; }.spy8-app.spy8-app .modhead__title h1{ font-size: 15px; }.spy8-app.spy8-app .chatgrid{ grid-template-columns: 1fr; height: auto; }.spy8-app.spy8-app .chatcol3{ gap: 14px; }.spy8-app.spy8-app .chatcol3 .card{ border-radius: var(--radius-lg); border-top: var(--border-thin); }.spy8-app.spy8-app .detgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }.spy8-app.spy8-app .detail-row{ padding: 7px 8px; }.spy8-app.spy8-app .detail-actions{ flex-direction: row; margin-top: 0; }.spy8-app.spy8-app .detail-actions .btn{ flex: 1; justify-content: center; }.spy8-app.spy8-app .mediagrid{ grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }.spy8-app.spy8-app .convo-list [data-convos]{ max-height: none; }.spy8-app.spy8-app .chatview__body{ max-height: 420px; }.spy8-app.spy8-app /* mobile call-history record rows */
  .callrows{ display: flex; flex-direction: column; gap: 9px; }.spy8-app.spy8-app .callrow{
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; row-gap: 7px;
    padding: 11px 12px; border: var(--border-thin); border-radius: var(--radius-md);
    background: var(--color-bg-inset);
  }.spy8-app.spy8-app .callrow__icon{ width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 9px; }.spy8-app.spy8-app .callrow__icon .icon{ width: 15px; height: 15px; }.spy8-app.spy8-app .callrow__icon.calltype--in{ color: var(--color-accent); background: rgba(34,197,94,.12);  border: 1px solid rgba(34,197,94,.3); }.spy8-app.spy8-app .callrow__icon.calltype--out{ color: var(--color-info);   background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.3); }.spy8-app.spy8-app .callrow__icon.calltype--miss{ color: var(--color-danger); background: rgba(239,68,68,.12);  border: 1px solid rgba(239,68,68,.3); }.spy8-app.spy8-app .callrow__who{ display: flex; flex-direction: column; min-width: 0; flex: 1 1 110px; }.spy8-app.spy8-app .callrow__who b{ font-size: 11px; color: #e6edf7; font-weight: var(--weight-semi); }.spy8-app.spy8-app .callrow__who small{ font-size: 9px; color: var(--color-text-dim); margin-top: 2px; }.spy8-app.spy8-app .callrow__dt{ display: flex; flex-direction: column; gap: 3px; font-size: 9px; color: var(--color-text-dim); }.spy8-app.spy8-app .callrow__dt > span, .spy8-app.spy8-app .callrow__dur{ display: flex; align-items: center; gap: 5px; }.spy8-app.spy8-app .callrow__dt .icon, .spy8-app.spy8-app .callrow__dur .icon{ width: 10px; height: 10px; }.spy8-app.spy8-app .callrow__td{ display: flex; flex-direction: column; gap: 3px; font-size: 9px; }.spy8-app.spy8-app .callrow__td .calltype{ font-size: 9.5px; }.spy8-app.spy8-app .callrow__dur{ color: var(--color-text-dim); }.spy8-app.spy8-app .callrow__view{ font-size: 9px; height: 26px; padding: 0 10px; margin-left: auto; }.spy8-app.spy8-app .callrow .badge{ margin-left: auto; }.spy8-app.spy8-app .callrow .callrow__view{ margin-left: 0; }.spy8-app.spy8-app /* call-recording / module detail grids */
  .detgrid .kv{ flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 0; }.spy8-app.spy8-app .detgrid .kv span:last-child{ text-align: left; }.spy8-app.spy8-app /* green dot for inline stats */
  .dot{ width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex: none; }.spy8-app.spy8-app .dot--green{ background: var(--color-accent); box-shadow: 0 0 5px rgba(34,197,94,.7); }.spy8-app.spy8-app /* media page mobile */
  .mediatabs{ flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }.spy8-app.spy8-app .mediatabs .grow{ display: none; }.spy8-app.spy8-app .mediatabs .mtab, .spy8-app.spy8-app .mediatabs .btn{ flex: none; font-size: 9.5px; }.spy8-app.spy8-app .mediasplit > .card:first-child .card__body{ display: flex; gap: 7px; overflow-x: auto; padding: 10px !important; }.spy8-app.spy8-app .mediasplit > .card:first-child .album{ flex: none; width: auto; padding: 6px 12px; border: var(--border-thin); border-radius: 8px; }.spy8-app.spy8-app .mediasplit > .card:first-child .album .album__c{ display: none; }.spy8-app.spy8-app .mpview__thumb{ aspect-ratio: 16/9; }.spy8-app.spy8-app .smsexport{ margin-top: 0; }.spy8-app.spy8-app /* sms mobile rows tighter */
  .smsrow{ padding: 9px 10px; }.spy8-app.spy8-app .convo-list .card__body > [data-convos]{ max-height: none; }.spy8-app.spy8-app .chatview__body{ max-height: 340px; }.spy8-app.spy8-app .smssplit, .spy8-app.spy8-app .modsplit, .spy8-app.spy8-app .locsplit, .spy8-app.spy8-app .mediasplit{ grid-template-columns: 1fr; }.spy8-app.spy8-app .callstats, .spy8-app.spy8-app .locstats, .spy8-app.spy8-app .supgrid, .spy8-app.spy8-app .setgrid, .spy8-app.spy8-app .setgrid__row2{ grid-template-columns: 1fr 1fr; }.spy8-app.spy8-app .mgrid{ grid-template-columns: 1fr 1fr; }.spy8-app.spy8-app .mapbox{ height: 210px; }.spy8-app.spy8-app .callpage-head .modhead__meta, .spy8-app.spy8-app .filterbar{ flex-wrap: wrap; }.spy8-app.spy8-app .card__head{ flex-wrap: wrap; }.spy8-app.spy8-app .hist__foot{ flex-wrap: wrap; gap: 8px; }.spy8-app.spy8-app .setgrid{ grid-template-columns: 1fr; }.spy8-app.spy8-app .setgrid__row2{ grid-template-columns: 1fr; }.spy8-app.spy8-app .supgrid{ grid-template-columns: 1fr 1fr; }
}@media (max-width: 480px){.spy8-app.spy8-app .callstats, .spy8-app.spy8-app .locstats, .spy8-app.spy8-app .supgrid{ grid-template-columns: 1fr 1fr; }
}.spy8-app.spy8-app /* ============================ PROMPT 9 - LIVE SIMULATION ============================ */

/* run header: id + masked number + module chips */
.runhead{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 10px; background: var(--color-bg-inset); border: var(--border-thin); border-radius: var(--radius-md); }.spy8-app.spy8-app .runhead__id{ font-size: 10.5px; font-weight: var(--weight-semi); color: var(--color-info); }.spy8-app.spy8-app .runhead__mods{ display: flex; gap: 5px; margin-left: auto; }.spy8-app.spy8-app .runmod{ width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: var(--border-thin); border-radius: var(--radius-sm); background: var(--color-bg-panel2); }.spy8-app.spy8-app .runmod svg{ width: 14px; height: 14px; }.spy8-app.spy8-app /* 6-stage timeline */
.timeline--run{ padding-left: 24px; }.spy8-app.spy8-app .timeline--run::before{ left: 10.5px; }.spy8-app.spy8-app .timeline--run .timeline__dot{ left: -24px; top: 7px; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; }.spy8-app.spy8-app .timeline--run .timeline__dot .icon{ width: 8px; height: 8px; color: var(--color-text-faint); }.spy8-app.spy8-app .timeline--run .timeline__item.is-done .timeline__dot{ border-color: var(--color-accent-deep); background: var(--color-accent-deep); }.spy8-app.spy8-app .timeline--run .timeline__item.is-done .timeline__dot .icon{ color: #04120a; }.spy8-app.spy8-app .timeline--run .timeline__item.is-on .timeline__dot{ animation: pulse-dot 1.6s ease-in-out infinite; }.spy8-app.spy8-app .timeline--run .timeline__item.is-on .timeline__dot .icon{ color: #04120a; }.spy8-app.spy8-app .timeline--run .timeline__item.is-on .timeline__t{ color: var(--color-accent); }.spy8-app.spy8-app .timeline--run .timeline__item.is-done .timeline__t{ color: var(--color-text-dim); }@keyframes pulse-dot{ 0%,100% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); } 50% { box-shadow: 0 0 0 5px rgba(74,222,128,.12); } }.spy8-app.spy8-app /* live run block */
.runlive__stage{ display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--color-bg-inset); border: var(--border-thin); border-radius: var(--radius-md); margin-top: 10px; }.spy8-app.spy8-app .runlive__stage--call{ flex-direction: row; align-items: center; gap: 12px; }.spy8-app.spy8-app .runlive__op{ display: flex; align-items: center; gap: 7px; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-info); }.spy8-app.spy8-app .runlive__op .icon{ color: var(--color-info); animation: spin-slow 1.4s linear infinite; }.spy8-app.spy8-app .runlive__items{ font-size: 10px; color: var(--color-text-dim); }.spy8-app.spy8-app .runlive__times{ display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; color: var(--color-text-dim); }.spy8-app.spy8-app .runlive__times > span{ display: flex; align-items: center; gap: 5px; }.spy8-app.spy8-app .runlive__info{ display: flex; flex-direction: column; gap: 2px; }.spy8-app.spy8-app .runlive__info b{ font-size: var(--text-md); color: var(--color-text); }.spy8-app.spy8-app .runlive__modchips{ display: flex; gap: 6px; flex-wrap: wrap; }.spy8-app.spy8-app .scanmod{ position: relative; width: 30px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: var(--border-thin); border-radius: var(--radius-sm); background: var(--color-bg-panel2); overflow: hidden; }.spy8-app.spy8-app .scanmod svg{ width: 14px; height: 14px; position: relative; z-index: 1; }.spy8-app.spy8-app .scanmod [data-scanp]{ position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(56,189,248,.14); transition: width .3s; }.spy8-app.spy8-app .scanmod.is-cur{ border-color: rgba(56,189,248,.5); }.spy8-app.spy8-app .scanmod.is-done{ border-color: rgba(34,197,94,.5); }.spy8-app.spy8-app .scanmod.is-done [data-scanp]{ background: rgba(34,197,94,.14); width: 100% !important; }@keyframes spin-slow{ to { transform: rotate(360deg); } }.spy8-app.spy8-app /* progress bar */
.runbar{ height: 6px; border-radius: 4px; background: var(--color-bg-inset); border: var(--border-thin); overflow: hidden; margin-top: 8px; }.spy8-app.spy8-app .runbar__fill{ height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--color-accent-deep), var(--color-accent)); box-shadow: 0 0 8px var(--color-accent-glow); transition: width .3s linear; }.spy8-app.spy8-app /* incoming-call pulse */
.callpulse{ position: relative; width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.4); color: var(--color-accent); }.spy8-app.spy8-app .callpulse .icon{ width: 18px; height: 18px; }.spy8-app.spy8-app .callpulse__ring{ position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--color-accent); animation: call-ring 1.4s ease-out infinite; }@keyframes call-ring{ 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }.spy8-app.spy8-app /* fake scan log */
.scanlog{ margin-top: 8px; padding: 8px 10px; background: var(--color-bg-inset); border: var(--border-thin); border-radius: var(--radius-md); font-size: 9.5px; color: var(--color-text-dim); display: flex; flex-direction: column; gap: 3px; min-height: 74px; }.spy8-app.spy8-app .scanlog__line{ display: flex; gap: 7px; }.spy8-app.spy8-app .scanlog__t{ color: var(--color-text-faint); flex: none; }.spy8-app.spy8-app .scanlog__line:first-child{ color: var(--color-info); }.spy8-app.spy8-app /* done / cancelled strip */
.rundone{ display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin-top: 10px; border-radius: var(--radius-md); background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.35); color: var(--color-accent); font-size: var(--text-sm); font-weight: var(--weight-medium); }.spy8-app.spy8-app .rundone .icon{ width: 15px; height: 15px; }.spy8-app.spy8-app .rundone--warn{ background: var(--color-danger-bg); border-color: rgba(239,68,68,.35); color: var(--color-danger); }.spy8-app.spy8-app /* module tile lock states */
.modtile.is-locked{ opacity: .72; }.spy8-app.spy8-app .modtile.is-unlocked{ border-color: rgba(34,197,94,.4); }.spy8-app.spy8-app .modtile.is-busy{ border-color: rgba(56,189,248,.45); }.spy8-app.spy8-app .modtile__state{ display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; font-weight: var(--weight-bold); letter-spacing: .08em; }.spy8-app.spy8-app .modtile__state .icon{ width: 9px; height: 9px; }.spy8-app.spy8-app .modtile__state--on{ color: var(--color-accent); }.spy8-app.spy8-app .modtile__state--busy{ color: var(--color-info); }.spy8-app.spy8-app .modtile__state--busy .icon{ animation: spin-slow 1.4s linear infinite; }.spy8-app.spy8-app .modtile--unlocking{ animation: unlockpop 1.2s ease both; border-color: rgba(34,197,94,.65) !important; }.spy8-app.spy8-app .modtile--unlocking .modtile__state{ animation: unlockfade 1.2s ease both; }@keyframes unlockpop{
  0% { opacity: .72; transform: scale(1); }
  35% { opacity: 1; transform: scale(1.03); box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
  100% { opacity: 1; transform: scale(1); }
}@keyframes unlockfade{
  0% { opacity: 0; transform: translateY(3px); }
  60%, 100% { opacity: 1; transform: translateY(0); }
}.spy8-app.spy8-app /* locked module page */
.lockedmod{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 46px 22px; }.spy8-app.spy8-app .lockedmod__icon{ width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-warning-bg); border: 1px solid rgba(234,179,8,.35); color: var(--color-warning); }.spy8-app.spy8-app .lockedmod__icon .icon{ width: 24px; height: 24px; }.spy8-app.spy8-app .lockedmod__t{ font-size: var(--text-xl); font-weight: var(--weight-semi); color: #eef3fa; }.spy8-app.spy8-app .lockedmod__s{ font-size: var(--text-sm); color: var(--color-text-dim); max-width: 380px; line-height: 1.6; }.spy8-app.spy8-app .lockedmod .btn{ margin-top: 6px; }.spy8-app.spy8-app /* danger-outline + spinner */
.btn--danger-o{ color: var(--color-danger); border-color: rgba(239,68,68,.4); background: transparent; }.spy8-app.spy8-app .btn--danger-o:hover{ background: var(--color-danger-bg); }.spy8-app.spy8-app .btn:disabled{ opacity: .6; cursor: not-allowed; }.spy8-app.spy8-app .spin{ display: inline-block; width: 11px; height: 11px; border: 1.5px solid var(--color-border-strong); border-top-color: var(--color-accent); border-radius: 50%; animation: spin-slow .8s linear infinite; }.spy8-app.spy8-app /* skeleton shimmer */
.skel{ position: relative; overflow: hidden; background: var(--color-bg-inset); border-radius: var(--radius-sm); }.spy8-app.spy8-app .skel::after{ content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent); animation: shimmer 1.2s infinite; }@keyframes shimmer{ 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }.spy8-app.spy8-app /* ---- auth screens ---- */
.authwrap{ position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: radial-gradient(1000px 500px at 50% -10%, rgba(34,197,94,.06), transparent 60%), var(--color-bg); overflow: auto; }.spy8-app.spy8-app .authcard{ width: 100%; max-width: 380px; background: var(--color-bg-panel); border: var(--border-thin); border-radius: var(--radius-lg); padding: 26px 26px 18px; box-shadow: var(--shadow-pop); }.spy8-app.spy8-app .authbrand{ display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 20px; }.spy8-app.spy8-app .authbrand .brand-x{ width: 46px; height: 46px; filter: drop-shadow(0 0 12px rgba(34,197,94,.45)) drop-shadow(0 3px 8px rgba(0,0,0,.5)); }.spy8-app.spy8-app .authbrand__name{ font-size: var(--text-3xl); font-weight: var(--weight-bold); letter-spacing: .14em; color: #eef3fa; }.spy8-app.spy8-app .authbrand__sub{ font-size: 8px; letter-spacing: .22em; color: var(--color-text-dim); }.spy8-app.spy8-app .authtitle{ font-size: var(--text-2xl); font-weight: var(--weight-semi); color: #eef3fa; }.spy8-app.spy8-app .authsub{ font-size: var(--text-sm); color: var(--color-text-dim); margin: 4px 0 16px; line-height: 1.5; }.spy8-app.spy8-app .field{ display: block; margin-bottom: 11px; }.spy8-app.spy8-app .field__k{ display: block; font-size: 9.5px; font-weight: var(--weight-semi); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 5px; }.spy8-app.spy8-app .field .input-icon{ display: flex; }.spy8-app.spy8-app .field .input{ width: 100%; }.spy8-app.spy8-app .authrow{ display: flex; justify-content: space-between; align-items: center; margin: 4px 0 14px; }.spy8-app.spy8-app .check{ display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--color-text-dim); cursor: pointer; }.spy8-app.spy8-app .check input{ display: none; }.spy8-app.spy8-app .check__box{ width: 15px; height: 15px; flex: none; border: var(--border-thin); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: transparent; background: var(--color-bg-inset); }.spy8-app.spy8-app .check__box .icon{ width: 10px; height: 10px; }.spy8-app.spy8-app .check input:checked + .check__box{ background: var(--color-accent-strong); border-color: var(--color-accent-strong); color: #04120a; }.spy8-app.spy8-app .authlink{ color: var(--color-accent); font-size: var(--text-sm); }.spy8-app.spy8-app .authlink:hover{ text-decoration: underline; }.spy8-app.spy8-app .authalt{ text-align: center; font-size: var(--text-sm); color: var(--color-text-dim); margin-top: 14px; }.spy8-app.spy8-app .autherr{ padding: 8px 10px; margin-bottom: 10px; border-radius: var(--radius-sm); background: var(--color-danger-bg); border: 1px solid rgba(239,68,68,.35); color: var(--color-danger); font-size: var(--text-sm); }.spy8-app.spy8-app .authcode{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 12px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-inset); }.spy8-app.spy8-app .authcode__k{ font-size: 9px; color: var(--color-text-dim); }.spy8-app.spy8-app .authcode__v{ font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: .2em; color: var(--color-accent); }.spy8-app.spy8-app .authfoot{ margin-top: 20px; padding-top: 12px; border-top: var(--border-thin); font-size: 9px; color: var(--color-text-faint); display: flex; align-items: flex-start; gap: 7px; line-height: 1.5; }.spy8-app.spy8-app .authfoot .icon{ flex: none; margin-top: 1px; color: var(--color-accent); }.spy8-app.spy8-app /* route-change skeleton */
.pageload{ display: flex; flex-direction: column; gap: 12px; }.spy8-app.spy8-app /* connected-call card + audio bars */
.callpulse--on{ background: rgba(34,197,94,.2); border-color: var(--color-accent); }.spy8-app.spy8-app .callpulse--on .callpulse__ring{ animation-duration: 2.6s; }.spy8-app.spy8-app .callstatus{ font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-warning); }.spy8-app.spy8-app .callstatus--on{ color: var(--color-accent); display: inline-flex; align-items: center; gap: 4px; }.spy8-app.spy8-app .callstatus--on .icon{ width: 10px; height: 10px; }.spy8-app.spy8-app .callbars{ display: flex; align-items: center; gap: 2.5px; height: 22px; margin-left: auto; }.spy8-app.spy8-app .callbars i{ width: 3px; border-radius: 2px; background: var(--color-accent); animation: callbar 0.9s ease-in-out infinite; }.spy8-app.spy8-app .callbars i:nth-child(2n){ animation-delay: .15s; background: var(--color-info); }.spy8-app.spy8-app .callbars i:nth-child(3n){ animation-delay: .3s; }.spy8-app.spy8-app .callbars i:nth-child(4n){ animation-delay: .45s; }.spy8-app.spy8-app .callbars i:nth-child(5n){ animation-delay: .6s; }@keyframes callbar{ 0%,100% { height: 5px; } 50% { height: 20px; } }.spy8-app.spy8-app /* completion pop-up */
.cmp{ text-align: center; }.spy8-app.spy8-app .cmp__badge{ width: 54px; height: 54px; margin: 2px auto 10px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.45); color: var(--color-accent); box-shadow: 0 0 18px rgba(34,197,94,.25); }.spy8-app.spy8-app .cmp__badge .icon{ width: 24px; height: 24px; }.spy8-app.spy8-app .cmp__t{ font-size: var(--text-2xl); font-weight: var(--weight-semi); color: #eef3fa; }.spy8-app.spy8-app .cmp__s{ font-size: var(--text-sm); color: var(--color-text-dim); margin: 5px 0 14px; }.spy8-app.spy8-app .cmp__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: var(--border-thin); border-radius: var(--radius-md); overflow: hidden; text-align: left; }.spy8-app.spy8-app .cmp__grid > div{ padding: 9px 12px; border-bottom: var(--border-thin); background: var(--color-bg-inset); }.spy8-app.spy8-app .cmp__grid > div:nth-child(odd){ border-right: var(--border-thin); }.spy8-app.spy8-app .cmp__grid > div:nth-last-child(-n+2){ border-bottom: 0; }.spy8-app.spy8-app .cmp__grid span{ display: block; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 2px; }.spy8-app.spy8-app .cmp__grid b{ font-size: var(--text-sm); color: var(--color-text); font-weight: var(--weight-semi); }.spy8-app.spy8-app .cmp__mods{ display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 14px; }.spy8-app.spy8-app .cmp__mod{ display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid rgba(34,197,94,.35); border-radius: 20px; background: rgba(34,197,94,.07); font-size: var(--text-sm); color: var(--color-accent); }.spy8-app.spy8-app .cmp__mod svg{ width: 13px; height: 13px; }.spy8-app.spy8-app /* ======================= prompt-10 upgrades ======================= */

/* access-window countdown pill (DATA MODULES card head) */
.accpill{ display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 20px; background: var(--color-warning-bg); border: 1px solid rgba(234,179,8,.4); color: var(--color-warning); font-size: 9px; font-weight: var(--weight-semi); letter-spacing: .08em; }.spy8-app.spy8-app .accpill .icon{ width: 10px; height: 10px; }.spy8-app.spy8-app .accpill b{ font-family: var(--font-mono); font-weight: var(--weight-semi); }.spy8-app.spy8-app /* topbar access-window chip */
.hstat--access{ border-left: 1px dashed var(--color-border-strong); padding-left: 14px; }.spy8-app.spy8-app .hstat__value--amber{ color: var(--color-warning); font-family: var(--font-mono); }.spy8-app.spy8-app /* waiting-for-call animated dots */
.waitdots{ display: inline-flex; gap: 2px; margin-left: 3px; }.spy8-app.spy8-app .waitdots i{ width: 3px; height: 3px; border-radius: 50%; background: var(--color-warning); animation: waitdot 1.2s ease-in-out infinite; }.spy8-app.spy8-app .waitdots i:nth-child(2){ animation-delay: .2s; }.spy8-app.spy8-app .waitdots i:nth-child(3){ animation-delay: .4s; }@keyframes waitdot{ 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }.spy8-app.spy8-app /* access-processing security line */
.runlive__sec{ display: flex; align-items: center; gap: 6px; font-size: 9px; letter-spacing: .06em; color: var(--color-text-faint); }.spy8-app.spy8-app .runlive__sec .icon{ width: 10px; height: 10px; color: var(--color-accent); }.spy8-app.spy8-app /* metrics "live" dot */
.mstat__live{ display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: var(--color-accent); vertical-align: 1px; animation: livedot 1.6s ease-in-out infinite; }@keyframes livedot{ 0%,100% { opacity: .35; box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 50% { opacity: 1; box-shadow: 0 0 0 3px rgba(34,197,94,.12); } }.spy8-app.spy8-app /* gateway checkout modal */
.pay__brand{ width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 15px; font-weight: var(--weight-bold); }.spy8-app.spy8-app .pay__order{ border: var(--border-thin); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 12px; }.spy8-app.spy8-app .pay__row{ display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: var(--border-thin); background: var(--color-bg-inset); font-size: var(--text-sm); }.spy8-app.spy8-app .pay__row:last-child{ border-bottom: 0; }.spy8-app.spy8-app .pay__row span{ color: var(--color-text-dim); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }.spy8-app.spy8-app .pay__row b{ color: var(--color-text); font-weight: var(--weight-semi); }.spy8-app.spy8-app .pay__row--total b{ color: var(--color-accent); font-size: var(--text-lg); }.spy8-app.spy8-app .pay__or{ display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; color: var(--color-text-faint); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }.spy8-app.spy8-app .pay__or::before, .spy8-app.spy8-app .pay__or::after{ content: ''; flex: 1; border-top: 1px dashed var(--color-border-strong); }.spy8-app.spy8-app .pay__grid2{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.spy8-app.spy8-app .pay__proc{ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 10px 14px; }.spy8-app.spy8-app .pay__proc-t{ font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--color-text); }.spy8-app.spy8-app .pay__proc-s{ font-size: var(--text-xs); color: var(--color-text-dim); }.spy8-app.spy8-app .spin--lg{ width: 30px; height: 30px; border-width: 2.5px; }.spy8-app.spy8-app .pay__done{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 12px; text-align: center; }.spy8-app.spy8-app .pay__tick{ width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.45); color: var(--color-accent); box-shadow: 0 0 18px rgba(34,197,94,.25); animation: paypop .45s ease-out; }.spy8-app.spy8-app .pay__tick .icon{ width: 24px; height: 24px; }@keyframes paypop{ 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }.spy8-app.spy8-app .pay__done-t{ font-size: var(--text-2xl); font-weight: var(--weight-semi); color: #eef3fa; }.spy8-app.spy8-app .pay__done-s{ font-size: var(--text-sm); color: var(--color-text-dim); }.spy8-app.spy8-app .pay__done-txn{ font-size: 9.5px; color: var(--color-text-faint); letter-spacing: .06em; }.spy8-app.spy8-app /* request detail modal */
.reqdet__grid{ display: grid; grid-template-columns: 1fr 1fr; border: var(--border-thin); border-radius: var(--radius-md); overflow: hidden; }.spy8-app.spy8-app .reqdet__grid > div{ padding: 9px 12px; border-bottom: var(--border-thin); background: var(--color-bg-inset); }.spy8-app.spy8-app .reqdet__grid > div:nth-child(odd){ border-right: var(--border-thin); }.spy8-app.spy8-app .reqdet__grid > div:nth-last-child(-n+2){ border-bottom: 0; }.spy8-app.spy8-app .reqdet__grid span{ display: block; font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-dim); margin-bottom: 2px; }.spy8-app.spy8-app .reqdet__grid b{ font-size: var(--text-sm); color: var(--color-text); font-weight: var(--weight-semi); }.spy8-app.spy8-app .reqdet__mods{ display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }.spy8-app.spy8-app .reqdet__tl{ margin-top: 4px; }.spy8-app.spy8-app .reqdet__note{ display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--color-info-bg); border: 1px solid rgba(56,189,248,.25); color: var(--color-info); font-size: var(--text-sm); line-height: 1.5; }

.spy8-app { position:fixed; inset:0; width:100vw; height:100dvh; z-index:2147483000; isolation:isolate; margin:0; overflow-y:auto; overscroll-behavior:none; -webkit-overflow-scrolling:touch; font-family:var(--font-ui); background:var(--color-bg); color:var(--color-text); font-size:var(--text-md); }
.spy8-app *, .spy8-app *::before, .spy8-app *::after { box-sizing:border-box; }
.spy8-app.spy8-app .authwrap { position:absolute; }

.spy8-app.spy8-app .btn{font-family:var(--font-ui)!important;color:var(--color-text)!important;background:var(--color-bg-panel2)!important;border-color:var(--color-border)!important}
.spy8-app.spy8-app .btn:hover{background:var(--color-bg-hover)!important;border-color:var(--color-border-strong)!important}
.spy8-app.spy8-app .btn.btn--primary{background:var(--color-accent-strong)!important;border-color:var(--color-accent-strong)!important;color:#04120a!important}
.spy8-app.spy8-app .btn.btn--primary:hover{background:var(--color-accent)!important;border-color:var(--color-accent)!important;color:#04120a!important}
.spy8-app.spy8-app .btn.btn--purple{background:linear-gradient(180deg,var(--color-purple-hi),var(--color-purple))!important;border-color:var(--color-purple)!important;color:#fff!important}
.spy8-app.spy8-app .btn.btn--purple:hover{background:linear-gradient(180deg,#9d74fb,var(--color-purple-hi))!important;border-color:var(--color-purple-hi)!important;color:#fff!important}
.spy8-app.spy8-app .btn.btn--danger{background:transparent!important;border-color:var(--color-danger)!important;color:var(--color-danger)!important}
.spy8-app.spy8-app .btn.btn--danger:hover{background:var(--color-danger)!important;color:#fff!important}
.spy8-app.spy8-app .btn.btn--dangersolid{background:var(--color-danger)!important;border-color:var(--color-danger)!important;color:#fff!important}
.spy8-app.spy8-app .btn.btn--dangersolid:hover{background:#b91c1c!important;border-color:#b91c1c!important;color:#fff!important}
.spy8-app.spy8-app .btn.btn--ghost{background:transparent!important;border-color:transparent!important;color:var(--color-text-dim)!important}
.spy8-app.spy8-app .btn.btn--ghost:hover{background:var(--color-bg-panel2)!important;color:var(--color-text)!important}
.spy8-app.spy8-app .btn.btn--outline{background:transparent!important;border-color:var(--color-border-strong)!important;color:var(--color-text-dim)!important}
.spy8-app.spy8-app .btn.btn--outline:hover{color:var(--color-text)!important;border-color:var(--color-accent-deep)!important}
.spy8-app.spy8-app .btn.btn--danger-o{background:transparent!important;border-color:rgba(239,68,68,.4)!important;color:var(--color-danger)!important}
.spy8-app.spy8-app .btn.btn--danger-o:hover{background:var(--color-danger-bg)!important}
.spy8-app.spy8-app .btn.faqchip{background:transparent!important;border-color:var(--cb,var(--color-border))!important;color:var(--cc,var(--color-text-dim))!important}
.spy8-app.spy8-app .input,.spy8-app.spy8-app .select,.spy8-app.spy8-app .textarea{font-family:var(--font-ui)!important;color:var(--color-text)!important;background-color:var(--color-bg-inset)!important;border-color:var(--color-border)!important}
.spy8-app.spy8-app .card{background:var(--color-bg-panel)!important;border-color:var(--color-border)!important}
.spy8-app.spy8-app .page-btn{font-family:var(--font-ui)!important;color:var(--color-text-dim)!important;background:var(--color-bg-panel2)!important;border-color:var(--color-border)!important}
.spy8-app.spy8-app .page-btn.is-active{background:var(--color-accent-bg2)!important;border-color:var(--color-accent-deep)!important;color:var(--color-accent)!important}