/* ── Google Fonts ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..800;1,14..32,300..800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Design Tokens — iOS System (dark) ─────────────────────────────────────── */
:root {
  /* Surfaces — pure iOS black / elevated grays */
  --bg:   #000000;
  --s1:   #1c1c1e;
  --s2:   #2c2c2e;
  --s3:   #3a3a3c;
  --s4:   #48484a;
  --s5:   #636366;
  --s6:   #8e8e93;

  /* Borders — hairline separators */
  --border:  rgba(84,84,88,.36);
  --border2: rgba(84,84,88,.65);
  --border3: rgba(255,255,255,.22);

  /* Brand — iOS System Blue */
  --accent:       #0071e3;
  --accent2:      #2997ff;
  --accent3:      #64d2ff;
  --accent-light: rgba(0,113,227,.14);
  --accent-glow:  rgba(0,113,227,.30);
  --gold:         #ffd60a;
  --gold-dim:     rgba(255,214,10,.14);

  /* Text — iOS labels */
  --text:    #ffffff;
  --text1:   #ffffff;
  --text2:   rgba(235,235,245,.60);
  --text3:   rgba(235,235,245,.72);

  /* Semantic — iOS system colors */
  --red:    #ff453a;
  --orange: #ff9f0a;
  --teal:   #64d2ff;
  --green:  #30d158;
  --blue:   #0071e3;
  --purple: #bf5af2;
  --yellow: #ffd60a;

  /* Elevation — soft, not cyber */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.40);
  --shadow-sm: 0 2px 12px rgba(0,0,0,.40);
  --shadow:    0 8px 30px rgba(0,0,0,.50);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.55);
  --shadow-card: none;
  --shadow-card-hover: 0 0 0 1px rgba(0,113,227,.40);

  /* Glass */
  --glass-bg:     rgba(28,28,30,.78);
  --glass-border: rgba(255,255,255,.08);

  /* Motion — iOS springy ease */
  --ease-std:  cubic-bezier(.25,.1,.25,1);
  --ease-dec:  cubic-bezier(.16,1,.3,1);
  --ease-acc:  cubic-bezier(.4,0,1,1);
  --dur-fast:  120ms;
  --dur-std:   220ms;
  --dur-slow:  340ms;

  /* Layout */
  --bar:      56px;
  --radius:   14px;
  --radius-sm: 12px;
  --radius-xs: 10px;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:var(--app-font,-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",system-ui,sans-serif);
  font-size:15px;line-height:1.35;letter-spacing:-0.015em;-webkit-font-smoothing:antialiased;
}

button{cursor:pointer;border:none;background:none;color:inherit;font:inherit}
input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--s5);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text3)}
.hidden{display:none !important}
/* Fleet vs device: #viewList{display:flex} must not beat .hidden (dual-view bug) */
#viewList.hidden,
#viewList.fleet-view.hidden,
#viewDevice.hidden,
#viewScreenshots.hidden,
#viewScreenshots.ss-root.hidden,
#viewKeylogs.hidden,
#viewNotifications.hidden,
#viewStats.hidden,
#viewApkBuild.hidden,
#viewMyApps.hidden,
#viewTutorial.hidden,
#viewBugs.hidden,
#viewSettings.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  inset: auto !important;
  z-index: -1 !important;
}
a{color:var(--accent3);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Login ───────────────────────────────────────────────────────────────── */
.login-overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:var(--bg);z-index:999;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% -5%, rgba(0,113,227,.22) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 85% 85%, rgba(64,203,224,.06) 0%, transparent 50%),
    radial-gradient(ellipse 30% 30% at 10% 70%, rgba(0,113,227,.08) 0%, transparent 50%);
}
.login-box{
  display:flex;flex-direction:column;align-items:center;gap:18px;width:348px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:28px;
  padding:44px 38px;
  backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:var(--shadow-lg), 0 0 80px rgba(0,113,227,.14), inset 0 1px 0 rgba(255,255,255,.12);
}
.login-droid{width:64px;height:64px;margin-bottom:4px;filter:drop-shadow(0 4px 20px rgba(0,113,227,.6))}
.login-title{font-size:21px;font-weight:750;letter-spacing:.01em;color:var(--text)}
.login-sub{font-size:12px;color:var(--text3);margin-top:-10px;letter-spacing:.03em}
.login-box input{
  width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:13px 16px;outline:none;transition:border-color var(--dur-std) var(--ease-std),box-shadow var(--dur-std) var(--ease-std);font-size:14px;color:var(--text);
}
.login-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.login-box input::placeholder{color:var(--text3)}
.login-box button{
  width:100%;background:linear-gradient(135deg,#0071e3,#2997ff);color:#fff;border-radius:14px;padding:14px;
  font-weight:700;font-size:14px;letter-spacing:.02em;
  transition:opacity var(--dur-std) var(--ease-std),transform var(--dur-fast) var(--ease-std),box-shadow var(--dur-std);
  box-shadow:0 6px 20px rgba(0,113,227,.50);border:none;
}
.login-box button:hover{opacity:.9;box-shadow:0 8px 28px rgba(0,113,227,.60);transform:translateY(-1px)}
.login-box button:active{transform:translateY(0);opacity:1}
.login-box button:disabled{opacity:.5;pointer-events:none}
.login-error{width:100%;font-size:12.5px;color:var(--red);text-align:center;line-height:1.4}
.login-ok{color:var(--green)!important}

/* ── App Shell ──────────────────────────────────────────────────────────── */
#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
.topbar{
  height:var(--bar);min-height:var(--bar);flex-shrink:0;
  display:flex;align-items:center;gap:12px;padding:0 20px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.06), var(--shadow-xs);
  z-index:100;
}
.topbar-droid{width:22px;height:22px;flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(196,37,26,.4))}
.topbar-title{
  font-weight:800;letter-spacing:.10em;font-size:12px;
  margin-right:4px;text-transform:uppercase;
  background:linear-gradient(90deg,#64d2ff,#0071e3,#2997ff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.tb-back{
  border:1px solid var(--border2);border-radius:var(--radius-xs);padding:5px 12px;
  background:var(--s3);color:var(--text2);font-size:12px;font-weight:500;
  transition:all var(--dur-std) var(--ease-std);white-space:nowrap;
}
.tb-back:hover{border-color:var(--accent);color:var(--accent3);background:var(--accent-light)}
.search{
  flex:1;max-width:280px;background:var(--s2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:7px 14px;outline:none;
  transition:border-color var(--dur-std),box-shadow var(--dur-std);
  font-size:13px;color:var(--text);
}
.search::placeholder{color:var(--text3)}
.search:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}
.dev-count{font-size:12px;color:var(--text3);white-space:nowrap;font-weight:500}
.conn-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);flex-shrink:0;transition:all .4s}
.conn-dot.online{background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.22)}
.ghost-btn{color:var(--text3);font-size:16px;padding:6px 9px;border-radius:var(--radius-xs);transition:color var(--dur-fast),background var(--dur-fast)}
.ghost-btn:hover{color:var(--red);background:rgba(244,63,94,.09)}

/* ── View mode toggle ────────────────────────────────────────────────────── */
.view-mode-group{display:flex;border:1px solid var(--border2);border-radius:var(--radius-xs);overflow:hidden}
.view-mode-btn{
  padding:4px 9px;font-size:14px;background:var(--s1);color:var(--text3);
  border:none;cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast);
  border-right:1px solid var(--border);line-height:1;
}
.view-mode-btn:last-child{border-right:none}
.view-mode-btn:hover{background:var(--s3);color:var(--text)}
.view-mode-btn.active{background:var(--accent);color:#fff}

/* ── List view ───────────────────────────────────────────────────────────── */
#devGrid.view-list{display:flex;flex-direction:column;gap:4px;padding:12px 16px}
.dev-list-row{
  display:flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:var(--radius-xs);
  background:var(--s1);border:1px solid var(--border);
  cursor:pointer;transition:background var(--dur-fast),box-shadow var(--dur-fast);
  min-width:0;flex-wrap:wrap;
}
.dev-list-row:hover{background:var(--s2);box-shadow:var(--shadow-xs)}
.dev-list-row.offline{opacity:.7}
.dev-list-row.selected{outline:2px solid var(--accent);outline-offset:1px}
.dev-list-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);flex-shrink:0}
.dev-list-dot.on{background:var(--green)}
.dev-list-name{font-weight:600;font-size:13px;min-width:130px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-list-model{font-size:11.5px;color:var(--text3);min-width:100px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dev-list-chips{display:flex;gap:5px;flex-wrap:nowrap;overflow:hidden;flex:1;min-width:0}
.dev-list-chip{font-size:11px;color:var(--text2);background:var(--s3);padding:2px 6px;border-radius:3px;white-space:nowrap}
.dev-list-ago{font-size:11px;color:var(--text3);white-space:nowrap}
.dev-list-note{font-size:11px;color:var(--text2);font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}

/* ── Table view ──────────────────────────────────────────────────────────── */
#devGrid.view-table{display:block;padding:0;overflow-x:auto}
.dev-table{width:100%;border-collapse:collapse;font-size:12.5px}
.dev-table th{
  padding:8px 12px;text-align:left;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text3);background:var(--s2);
  border-bottom:2px solid var(--border2);position:sticky;top:0;z-index:1;white-space:nowrap;
}
.dev-table td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.dev-table tr{cursor:pointer;transition:background var(--dur-fast)}
.dev-table tr:hover td{background:var(--s2)}
.dev-table tr.offline td{color:var(--text3)}
.dev-table tr.selected td{background:rgba(196,37,26,.06)}
.dt-status{display:flex;align-items:center;gap:5px;white-space:nowrap}
.dt-dot{width:7px;height:7px;border-radius:50%;background:var(--text3);flex-shrink:0}
.dt-dot.on{background:var(--green)}
.dt-batt{white-space:nowrap}
.dt-name{font-weight:600;white-space:nowrap}
.dt-note{font-style:italic;color:var(--text2);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Bulk action bar ─────────────────────────────────────────────────────── */
.bulk-bar{
  display:flex;align-items:center;gap:10px;padding:7px 20px;
  background:var(--accent);color:#fff;flex-shrink:0;
  border-bottom:1px solid rgba(0,0,0,.15);
  animation:bulkSlide .18s ease;
}
@keyframes bulkSlide{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
.bulk-count{font-weight:700;font-size:13px;white-space:nowrap}
.bulk-actions{display:flex;gap:4px;flex-wrap:wrap}
.bulk-btn{
  padding:4px 10px;border-radius:var(--radius-xs);font-size:12px;font-weight:600;
  background:rgba(255,255,255,.18);color:#fff;border:1px solid rgba(255,255,255,.25);
  cursor:pointer;transition:background var(--dur-fast);white-space:nowrap;
}
.bulk-btn:hover{background:rgba(255,255,255,.32)}
.bulk-clear{margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;padding:4px 10px;border-radius:var(--radius-xs);font-size:12px;cursor:pointer}
.bulk-clear:hover{background:rgba(255,255,255,.15)}

/* ── Selectable device card ──────────────────────────────────────────────── */
.dev-card.selected{outline:2px solid var(--accent);outline-offset:2px;box-shadow:0 0 0 4px var(--accent-glow)}
.dev-card-select{position:absolute;top:8px;right:8px;width:18px;height:18px;cursor:pointer;z-index:2;accent-color:var(--accent)}

/* ── Keylog cred highlight ───────────────────────────────────────────────── */
.kl-row.kl-autocred{background:rgba(196,37,26,.06);border-left:3px solid var(--accent)}
.kl-autocred-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.kl-autocred-tag{font-size:10px;font-weight:700;padding:1px 5px;border-radius:3px;background:var(--accent);color:#fff}

/* ── Stats search ────────────────────────────────────────────────────────── */
.stats-search-wrap{display:flex;align-items:center;gap:6px;margin-left:auto}
#statsSearchResults{border-bottom:1px solid var(--border);flex-shrink:0}
.ssr-row{display:flex;align-items:baseline;gap:8px;padding:5px 14px;border-bottom:1px solid var(--border);font-size:12px;cursor:pointer}
.ssr-row:hover{background:var(--s2)}
.ssr-dev{font-weight:600;min-width:80px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--accent);font-size:11px}
.ssr-time{font-size:10px;color:var(--text3);font-family:'JetBrains Mono',monospace;white-space:nowrap}
.ssr-pkg{font-size:10px;color:var(--text3);white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis}
.ssr-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ssr-text mark{background:rgba(196,37,26,.2);color:var(--accent);border-radius:2px;padding:0 2px}

/* ── Location trail ──────────────────────────────────────────────────────── */
#locLeafletMap .leaflet-container{background:var(--s2)}

/* ── Notification center ─────────────────────────────────────────────────── */
.notif-center{
  position:absolute;left:50%;transform:translateX(-50%);
  display:flex;align-items:flex-start;gap:8px;
  padding:8px 14px 8px 12px;
  border-radius:16px;border:1px solid var(--border2);
  background:var(--s1);box-shadow:0 2px 12px rgba(0,0,0,.12);
  font-size:12.5px;font-weight:500;
  white-space:normal;
  max-width:min(560px,58vw);
  box-sizing:border-box;
  animation:notifSlide .22s ease;z-index:200;
}
.notif-center.type-info   {border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.06)}
.notif-center.type-success{border-color:rgba(34,197,94,.45);background:rgba(34,197,94,.07)}
.notif-center.type-warn   {border-color:rgba(249,115,22,.4);background:rgba(249,115,22,.07)}
.notif-center.type-error  {border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.07)}
.notif-icon{font-size:15px;line-height:1;flex-shrink:0;margin-top:1px}
.notif-text{color:var(--text);white-space:normal;word-break:break-word;overflow-wrap:anywhere;line-height:1.35;flex:1;min-width:0}
.notif-dismiss{background:none;border:none;cursor:pointer;font-size:16px;color:var(--text3);padding:0 2px;line-height:1;flex-shrink:0}
.notif-dismiss:hover{color:var(--text)}
@keyframes notifSlide{from{opacity:0;transform:translateX(-50%) translateY(-8px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ── Device header note ──────────────────────────────────────────────────── */
.dev-hdr-note-wrap{display:flex;align-items:center;gap:3px;flex-shrink:0}
.dev-hdr-note-input{
  width:140px;padding:3px 7px;font-size:11px;
  border:1px solid var(--border2);border-radius:var(--radius-xs);
  background:var(--s2);color:var(--text);outline:none;
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast);
}
.dev-hdr-note-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}
.dev-hdr-note-save{padding:3px 7px!important;font-size:11px!important}

/* ── Clipboard history panel ─────────────────────────────────────────────── */
.clip-hist-list{
  display:flex;flex-direction:column;gap:2px;
  max-height:120px;overflow-y:auto;
  margin-top:4px;padding:4px;
  background:var(--s2);border:1px solid var(--border);border-radius:var(--radius-xs);
}
.clip-hist-row{
  display:flex;align-items:center;gap:6px;
  padding:3px 6px;border-radius:4px;cursor:pointer;
  font-size:11.5px;font-family:'JetBrains Mono',monospace;
  color:var(--text2);transition:background var(--dur-fast);
}
.clip-hist-row:hover{background:var(--s3);color:var(--text)}
.clip-hist-row .clip-row-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clip-hist-row .clip-row-use{font-size:10px;color:var(--accent);font-family:Inter,sans-serif;white-space:nowrap;opacity:0}
.clip-hist-row:hover .clip-row-use{opacity:1}

/* ── Device card note badge ──────────────────────────────────────────────── */
.dev-card-note{
  font-size:11px;color:var(--text2);font-style:italic;
  padding:3px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-top:1px solid var(--border);margin-top:4px;
}

/* ── Topbar brand ────────────────────────────────────────────────────────── */
.topbar-brand{display:flex;align-items:center;gap:7px;flex-shrink:0}

/* ── Top nav tabs ─────────────────────────────────────────────────────────── */
.topbar-nav{display:flex;align-items:center;gap:2px;margin:0 8px;flex-shrink:0}
.topnav-btn{
  display:flex;align-items:center;gap:5px;padding:5px 13px;
  border-radius:var(--radius-xs);font-size:12.5px;font-weight:600;letter-spacing:.01em;
  color:var(--text2);background:transparent;border:1px solid transparent;
  transition:all var(--dur-fast) var(--ease-std);white-space:nowrap;cursor:pointer;
  text-decoration:none;
}
.topnav-btn:hover{background:var(--s3);color:var(--text);border-color:var(--border)}
.topnav-btn.active{
  background:var(--accent-light);color:var(--accent);border-color:var(--accent-glow);
}
.topnav-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--accent);color:#fff;border-radius:9px;font-size:10px;font-weight:700;
}
.topnav-tg{color:#29a4d9!important}
.topnav-tg:hover{background:rgba(41,164,217,.10)!important;border-color:rgba(41,164,217,.25)!important}
.topnav-exit{font-size:12px;font-weight:600;color:var(--text3);padding:5px 12px}
.topnav-exit:hover{color:var(--red)!important;background:rgba(224,53,40,.08)!important}
.topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* ══ Statistics view ════════════════════════════════════════════════════════ */
/* ══ Statistics View ════════════════════════════════════════════════════════ */
.stats-root{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}

/* Top bar */
.stats-topbar{
  display:flex;align-items:center;gap:10px;padding:14px 24px 12px;flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.stats-topbar-title{font-size:16px;font-weight:700;letter-spacing:.01em;margin-right:4px}
.stats-topbar-right{display:flex;align-items:center;gap:7px;margin-left:auto}
.stats-search-inp{
  width:200px;background:var(--s2);border:1px solid var(--border);border-radius:8px;
  padding:5px 10px;font-size:12px;color:var(--text1);outline:none;
}
.stats-search-inp:focus{border-color:var(--accent)}

/* Telegram config panel */
.stats-tg-panel{
  border-bottom:1px solid var(--border);background:var(--s2);flex-shrink:0;
  padding:0 24px;overflow:hidden;max-height:0;
  transition:max-height .28s var(--ease-std),padding .28s;
}
.stats-tg-panel.open{max-height:150px;padding:14px 24px}

/* KPI card row — room for full labels (was min-width 110 + nowrap = clipped text) */
.stats-kpi-row{
  display:flex;gap:10px;padding:12px 16px;flex-shrink:0;flex-wrap:wrap;
  align-items:stretch;
  border-bottom:1px solid var(--border);
}
.stats-kpi-card{
  flex:1 1 148px;min-width:148px;max-width:100%;
  display:flex;align-items:center;gap:12px;
  background:var(--s2);border:1px solid var(--border);border-radius:16px;
  padding:12px 14px;box-sizing:border-box;overflow:hidden;
}
.stats-kpi-icon{
  width:36px;height:36px;min-width:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.stats-kpi-body{
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  min-width:0;flex:1 1 auto;text-align:left;
}
.stats-kpi-val{
  font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15;
  font-variant-numeric:tabular-nums;
}
.stats-kpi-label{
  font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;line-height:1.25;
  white-space:normal; /* allow wrap — never clip TOTAL DEVICES */
  overflow:visible;word-break:break-word;
}

/* 3-column body */
.stats-body{flex:1;display:flex;gap:0;min-height:0;overflow:hidden}
.stats-panel{
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
  border-right:1px solid var(--border);
}
.stats-panel-feed{flex:1.6;min-width:0}
.stats-panel-devices{flex:1.2;min-width:0}
.stats-panel-col3{
  width:260px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.stats-panel-col3 .stats-panel{flex:1;border-right:none;border-bottom:1px solid var(--border)}
.stats-panel-col3 .stats-panel:last-child{border-bottom:none}
.stats-panel-hdr{
  display:flex;align-items:center;gap:6px;
  padding:9px 14px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text3);border-bottom:1px solid var(--border);flex-shrink:0;
}

/* Feed */
.stats-feed{flex:1;overflow-y:auto;padding:4px 0}
.sf-row{
  display:flex;align-items:baseline;gap:8px;padding:5px 14px;
  border-bottom:1px solid rgba(255,255,255,.04);font-size:12px;transition:background var(--dur-fast);
}
.sf-row:hover{background:var(--s2)}
.sf-row.sf-switch{background:rgba(99,102,241,.08);color:var(--accent)}
.sf-dev{font-weight:600;min-width:70px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--accent);font-size:11px}
.sf-time{font-size:10px;color:var(--text3);white-space:nowrap;font-family:'JetBrains Mono',monospace}
.sf-src{font-size:10px;color:var(--text3);white-space:nowrap}
.sf-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Device health grid */
.stats-devices-grid{flex:1;overflow-y:auto;padding:6px 0}
.sdg-row{
  display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;
  padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px;cursor:pointer;
  transition:background var(--dur-fast);
}
.sdg-row:hover{background:var(--s2)}
.sdg-dot{width:8px;height:8px;border-radius:50%;background:var(--text3);flex-shrink:0}
.sdg-dot.on{background:var(--ios-green,#30d158);box-shadow:0 0 6px rgba(48,209,88,.5)}
.sdg-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.sdg-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdg-meta{font-size:10px;color:var(--text3);display:flex;gap:6px}
.sdg-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.sdg-batt-bar{width:32px;height:5px;background:var(--s4);border-radius:3px;overflow:hidden}
.sdg-batt-fill{height:100%;border-radius:3px;transition:width .3s}

/* Top apps */
.stats-apps{flex:1;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:5px}
.sa-row{display:flex;align-items:center;gap:7px;font-size:11px}
.sa-pkg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.sa-bar-wrap{width:50px;flex-shrink:0;height:5px;background:var(--s4);border-radius:3px;overflow:hidden}
.sa-bar{height:100%;background:var(--accent);border-radius:3px;transition:width .3s}
.sa-count{font-size:10px;color:var(--text3);white-space:nowrap;width:18px;text-align:right}

/* Activity log */
.stats-activity{flex:1;overflow-y:auto;padding:4px 0}
.sa-act-row{
  display:flex;align-items:flex-start;gap:8px;padding:6px 12px;
  border-bottom:1px solid rgba(255,255,255,.04);font-size:11px;
}
.sa-act-dot{width:6px;height:6px;border-radius:50%;background:var(--text3);flex-shrink:0;margin-top:3px}
.sa-act-dot.green{background:var(--ios-green,#30d158)}
.sa-act-dot.red{background:var(--ios-red,#ff453a)}
.sa-act-dot.yellow{background:#fbbf24}
.sa-act-dot.blue{background:#60a5fa}
.sa-act-body{flex:1;min-width:0}
.sa-act-txt{color:var(--text1);line-height:1.4}
.sa-act-time{font-size:10px;color:var(--text3);margin-top:1px}

/* ══ Keylogs Aggregation View ═══════════════════════════════════════════════ */
.kl-agg-root{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.kl-agg-toolbar{
  display:flex;align-items:center;gap:12px;padding:13px 24px 11px;flex-shrink:0;
  border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.kl-agg-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.kla-sel{
  background:var(--s2);border:1px solid var(--border);border-radius:8px;
  padding:5px 8px;font-size:12px;color:var(--text1);outline:none;cursor:pointer;
}
.kla-sel:focus{border-color:var(--accent)}
.kla-search-wrap{
  display:flex;align-items:center;gap:6px;
  background:var(--s2);border:1px solid var(--border);border-radius:8px;
  padding:4px 8px;
}
.kla-search{
  width:180px;background:none;border:none;outline:none;font-size:12px;color:var(--text1);
}
.kl-agg-summary{
  flex-shrink:0;padding:8px 24px;font-size:11px;color:var(--text3);
  border-bottom:1px solid var(--border);display:flex;gap:16px;align-items:center;
}
.kl-agg-table-wrap{flex:1;overflow-y:auto;min-height:0}
.kl-agg-table{width:100%;border-collapse:collapse;font-size:12px}
.kl-agg-table thead th{
  position:sticky;top:0;z-index:1;
  padding:8px 14px;text-align:left;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--text3);background:var(--s2);
  border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap;user-select:none;
}
.kl-agg-table thead th:hover{color:var(--text1)}
.kl-agg-table thead th.active{color:var(--accent)}
.kl-agg-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04);transition:background var(--dur-fast)}
.kl-agg-table tbody tr:hover{background:var(--s2)}
.kl-agg-table tbody td{padding:6px 14px;vertical-align:middle}
.kla-td-time{white-space:nowrap;color:var(--text3);font-family:'JetBrains Mono',monospace;font-size:10px;width:130px}
.kla-td-dev{white-space:nowrap;color:var(--accent);font-weight:600;width:120px;overflow:hidden;text-overflow:ellipsis;max-width:120px}
.kla-td-pkg{white-space:nowrap;color:var(--text3);width:130px;overflow:hidden;text-overflow:ellipsis;max-width:130px;font-size:11px}
.kla-td-src{white-space:nowrap;width:80px}
.kla-src-chip{
  display:inline-block;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
}
.kla-src-key{background:rgba(99,102,241,.15);color:#818cf8}
.kla-src-click{background:rgba(48,209,88,.12);color:var(--ios-green,#30d158)}
.kla-src-suggest{background:rgba(251,191,36,.12);color:#fbbf24}
.kla-src-app_switch{background:rgba(90,160,255,.12);color:#60a5fa}
.kla-src-other{background:var(--s3);color:var(--text3)}
.kla-td-text{max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kla-td-text mark{background:rgba(99,102,241,.3);color:var(--text1);border-radius:2px;padding:0 2px}
.kl-agg-empty{padding:40px;text-align:center;color:var(--text3);font-size:13px}
.kl-agg-pagination{
  flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 24px;border-top:1px solid var(--border);font-size:12px;color:var(--text3);
}
.kl-pg-btn{
  background:var(--s2);border:1px solid var(--border);border-radius:7px;
  padding:4px 12px;font-size:12px;color:var(--text1);cursor:pointer;transition:background var(--dur-fast);
}
.kl-pg-btn:hover{background:var(--s3)}
.kl-pg-btn:disabled{opacity:.4;cursor:not-allowed}

/* ══ Device List ════════════════════════════════════════════════════════════ */
#viewList{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.list-toolbar{
  display:flex;align-items:center;gap:14px;padding:18px 28px 14px;flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.lt-title{font-size:16px;font-weight:700;letter-spacing:.01em}

/* Device card grid — 2 columns (left | right), roomy row gap */
.dev-grid{
  flex:1;overflow-y:auto;padding:18px 24px 48px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:24px;
  row-gap:32px;
  gap:32px 24px;
  align-content:start;
  align-items:stretch;
  max-width:1100px;
  margin-inline:auto;
  width:100%;
}
.dev-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);
  overflow:hidden;cursor:pointer;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transition:border-color var(--dur-std) var(--ease-std),
             box-shadow var(--dur-std) var(--ease-std),
             transform var(--dur-fast) var(--ease-std);
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-card);
}
.dev-card:hover{
  border-color:rgba(0,113,227,.30);
  box-shadow:var(--shadow-card-hover);
  transform:translateY(-3px);
}
.dev-card:active{transform:translateY(-1px)}
.dev-card.offline{opacity:.55}
.dev-card-wp{
  height:80px;background-size:cover;background-position:center;
  position:relative;flex-shrink:0;
}
.dev-card-wp::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 20%,var(--s2));
}
.dev-card-body{
  padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px;flex:1;
}
.dev-card-top{display:flex;align-items:center;gap:8px}
.dev-card-dot{
  width:9px;height:9px;border-radius:50%;background:var(--s5);flex-shrink:0;
}
.dev-card-dot.online{
  background:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.2);
  animation:pulse-dot 2.5s infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.2)}
  50%     {box-shadow:0 0 0 6px rgba(34,197,94,.04)}
}
.dev-card-name{
  font-size:14px;font-weight:700;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dev-card-model{
  font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dev-card-stats{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:20px;
}
.dev-card-meta{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:8px;
  border-top:1px solid var(--border);
}
.dev-card-chip{
  font-size:11px;color:var(--text2);background:var(--s3);
  border:1px solid var(--border);border-radius:6px;
  padding:2px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;
}
.dev-card-chip.mono{font-family:'JetBrains Mono',monospace;font-size:11px}
.dev-card-cred-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;
  background:rgba(234,179,8,.09);color:#eab308;
  border:1px solid rgba(234,179,8,.22);border-radius:6px;
  padding:3px 10px;
}

/* TEST device card */
.dev-card-test{border:1.5px solid rgba(192,132,252,.35) !important;position:relative;overflow:hidden}
.dev-card-test-bg{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,rgba(99,102,241,.08) 0%,rgba(192,132,252,.06) 100%);
}
.dev-card-test-badge{
  margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.08em;
  color:#64d2ff;background:rgba(192,132,252,.15);border:1px solid rgba(192,132,252,.3);
  border-radius:5px;padding:2px 7px;
}
.test-demo-banner{
  display:flex;align-items:center;gap:8px;
  background:rgba(192,132,252,.1);border:1px solid rgba(192,132,252,.25);border-radius:8px;
  padding:10px 14px;font-size:12px;color:#64d2ff;margin:10px 0;
}

/* Empty state */
.empty-state{padding:80px 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.empty-state p{color:var(--text2);font-size:16px;font-weight:500}
.empty-state .sub{color:var(--text3);font-size:13px}

/* ══ Device Detail ══════════════════════════════════════════════════════════ */
#viewDevice{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}

/* Device header — identity (left) + chips (right). Never clip name/avatar. */
.dev-hdr{
  display:flex;flex-direction:column;gap:6px;padding:8px 14px;
  min-height:48px;flex-shrink:0;overflow:visible;
  background:var(--glass-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.dev-hdr-row{
  display:flex;align-items:center;gap:10px;min-width:0;width:100%;
}
.dev-hdr-controls{ display:flex;align-items:center;gap:8px;min-width:0;width:100%; }
.dev-hdr-identity{
  display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;max-width:42%;
}
.dev-hdr-avatar{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent2),var(--s5));
  border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;font-size:13px;
  box-shadow:0 0 0 1px var(--accent-light);
  color:rgba(255,255,255,.80);
}
.dev-hdr-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.dev-hdr-name{
  font-size:13px;font-weight:700;color:var(--text);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dev-hdr-model{
  font-size:10px;color:var(--text3);font-weight:400;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* chips: stay to the right of identity, scroll if needed */
.dev-hdr-chips{
  display:flex;align-items:center;gap:5px;flex:1 1 auto;min-width:0;
  justify-content:flex-end;margin-left:auto;
  overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;
}
.dev-hdr-chips::-webkit-scrollbar{display:none}
.hdr-chip{
  font-size:10px;padding:3px 8px;border-radius:20px;
  border:1px solid var(--border2);background:var(--s3);color:var(--text2);
  display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-weight:500;
  transition:background var(--dur-fast) var(--ease-std);flex-shrink:0;
}
.hdr-chip.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px}
.hdr-chip.hdr-chip-avd{border-color:rgba(0,113,227,.35);color:#7db7ff;background:rgba(0,113,227,.1)}
.hdr-chip.online{
  border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.09);color:var(--green);
}
.hdr-chip.warn{border-color:rgba(249,115,22,.3);color:var(--orange)}
.hdr-chip.loc{border-color:var(--border2);color:var(--text2);cursor:pointer}
.hdr-chip.loc:hover{background:var(--s4);border-color:var(--accent);color:var(--accent3)}

/* Device body: sidebar + content */
.dev-body{
  flex:1;overflow:hidden;display:flex;flex-direction:row;min-height:0;
}

/* Vertical icon sidebar — icons auto-distribute to fill height, never cut off */
.dtab-nav{
  display:flex;flex-direction:column;align-items:center;gap:0;
  width:48px;flex-shrink:0;padding:4px 0;
  background:rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  overflow:hidden;
  position:relative;z-index:20;pointer-events:auto;
}
.dtab-btn{
  width:40px;flex:1;min-height:28px;max-height:52px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--text3);border-radius:var(--radius-sm);
  border-left:3px solid transparent;
  transition:color .15s,background .15s,border-color .15s;
  position:relative;
  pointer-events:auto;cursor:pointer;
  background:transparent;border-top:none;border-right:none;border-bottom:none;
}
.dtab-btn:hover{color:var(--text2);background:var(--s3)}
.dtab-btn.active{
  color:var(--accent3);background:rgba(0,113,227,.14);border-left-color:var(--accent);
}
/* Tooltip on hover */
.dtab-btn::after{
  content:attr(title);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--s0,#1a1b1e);color:#fff;font-size:11px;font-weight:500;
  padding:4px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .12s;z-index:200;
}
.dtab-btn:hover::after{opacity:1}
/* Label spans hidden on desktop (icons + tooltip only), shown on mobile */
.dtab-label{display:none;font-size:10px;font-weight:500;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Toggle button */
.dtab-toggle{
  width:40px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:var(--text3);border-radius:var(--radius-sm);transition:color .15s,background .15s;
}
.dtab-toggle:hover{color:var(--text2);background:var(--s3)}
.dtab-toggle-icon{transition:transform .2s}

/* ── Expanded state ──────────────────────────────────────────────────────── */
.dtab-nav.expanded{width:140px;align-items:stretch}
.dtab-nav.expanded .dtab-toggle{width:100%;padding:0 10px;justify-content:flex-start;gap:6px}
.dtab-nav.expanded .dtab-toggle::after{content:'Collapse';font-size:10px;font-weight:500;color:var(--text3)}
.dtab-nav.expanded .dtab-toggle-icon{transform:rotate(180deg)}
.dtab-nav.expanded .dtab-btn{
  width:100%;max-height:none;min-height:32px;height:32px;flex:none;
  justify-content:flex-start;gap:8px;padding:0 10px;
}
.dtab-nav.expanded .dtab-label{display:block;font-size:11px}
.dtab-nav.expanded .dtab-btn::after{display:none}

/* Tab panes */
.dtab{flex:1;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.dtab.hidden{display:none}
#dtab-camera{overflow-y:auto}

/* ── Inner toolbar ───────────────────────────────────────────────────────── */
.tab-inner-toolbar{
  display:flex;align-items:center;gap:8px;padding:7px 14px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.04);backdrop-filter:blur(20px);
  flex-shrink:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
}
.tab-inner-toolbar::-webkit-scrollbar{display:none}

/* ── Badges / chips ──────────────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;padding:2px 10px;
  border-radius:20px;font-size:11px;font-weight:600;
  background:var(--s3);color:var(--text2);border:1px solid var(--border);
  letter-spacing:.02em;
}
.badge.on  {background:var(--accent-light);color:var(--accent3);border-color:var(--border2)}
.badge.off {background:var(--s3);color:var(--text3);border-color:var(--border)}
.badge.live{background:rgba(34,197,94,.1);color:var(--green);border-color:rgba(34,197,94,.25)}
.badge.warn{background:rgba(249,115,22,.1);color:var(--orange);border-color:rgba(249,115,22,.25)}
.chip{
  background:var(--s3);border:1px solid var(--border);border-radius:var(--radius-xs);
  padding:2px 9px;font-size:11px;color:var(--text2);font-weight:500;
}
.chip.warn{border-color:rgba(249,115,22,.3);color:var(--orange)}

/* ── Inputs / buttons ────────────────────────────────────────────────────── */
.ti{
  background:var(--s2);border:1px solid var(--border2);border-radius:var(--radius-sm);
  padding:8px 12px;outline:none;color:var(--text);
  transition:border-color var(--dur-std) var(--ease-std),box-shadow var(--dur-std) var(--ease-std);
  font-size:13px;line-height:1.5;letter-spacing:.01em;
}
.ti::placeholder{color:var(--text3)}
.ti:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.ti.grow{flex:1}
.ti.sm{max-width:160px}
.sel{
  background:var(--s2);border:1px solid var(--border2);border-radius:var(--radius-xs);
  padding:6px 9px;font-size:12px;color:var(--text2);outline:none;
  transition:border-color var(--dur-std) var(--ease-std);cursor:pointer;
}
.sel:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}
.sm-btn{
  border:1px solid var(--border2);border-radius:var(--radius-sm);
  padding:7px 14px;background:var(--s3);color:var(--text);
  font-size:13px;white-space:nowrap;font-weight:500;
  transition:background var(--dur-fast) var(--ease-std),
             border-color var(--dur-fast) var(--ease-std),
             box-shadow var(--dur-fast) var(--ease-std);
}
.sm-btn:hover{background:var(--s4);border-color:var(--border3)}
.sm-btn:active{transform:translateY(1px)}
.sm-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.sm-btn.accent{
  background:var(--accent);color:#fff;border-color:var(--accent);font-weight:600;
  box-shadow:0 2px 10px var(--accent-glow);
}
.sm-btn.accent:hover{background:var(--accent3);border-color:var(--accent3);box-shadow:0 4px 18px var(--accent-glow)}
.sm-btn.ghost{background:transparent;border-color:var(--border);color:var(--text2)}
.sm-btn.ghost:hover{border-color:var(--border2);color:var(--text);background:var(--s3)}
.sm-btn.red{background:rgba(196,37,26,.09);border-color:var(--border2);color:var(--accent3)}
.sm-btn.red:hover{background:var(--accent-light);border-color:var(--accent)}
.sm-btn.danger{background:rgba(196,37,26,.09);border-color:var(--border2);color:var(--accent3)}
.sm-btn.danger:hover{background:var(--accent-light)}
.sm-btn.go{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.32);color:var(--green)}
.sm-btn.go:hover{background:rgba(34,197,94,.15)}
.row-gap{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:10px}
.section-lbl{
  font-size:11px;color:var(--text3);text-transform:uppercase;
  letter-spacing:.1em;font-weight:700;
  border-bottom:1px solid var(--border);padding-bottom:6px;margin-bottom:12px;
}
.aged{color:var(--text3);font-size:12px}
.empty-msg{color:var(--text3);font-size:13px;padding:36px 0;text-align:center;line-height:1.8;font-weight:400}

/* ══ Screen Tab ════════════════════════════════════════════════════════════ */
.stream-action-row{
  display:flex;align-items:center;gap:7px;
  padding:8px 14px;border-bottom:1px solid var(--border);
  background:var(--glass-bg);backdrop-filter:blur(10px);flex-shrink:0;flex-wrap:wrap;
}
.stream-btn-group{display:flex;gap:5px;align-items:center}
.stream-badge{
  font-size:12px;font-weight:600;padding:4px 12px;border-radius:20px;
  border:1px solid currentColor;letter-spacing:.02em;
}
.stream-badge.off {color:var(--text3);border-color:var(--border)}
.stream-badge.live{color:var(--green);border-color:rgba(34,197,94,.45)}
.stream-badge.warn{color:var(--orange);border-color:rgba(249,115,22,.45)}
.stream-badge.stopped{color:#94a3b8;border-color:rgba(148,163,184,.4)}
.stream-stats-inline{display:flex;gap:5px;align-items:center;margin-left:6px}
.stream-settings-inline{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.mono{font-family:'JetBrains Mono',monospace;color:var(--teal)}

/* Scrollable quality / metrics strip under main action row */
.stream-prefs-row{
  display:flex;align-items:stretch;gap:0;
  border-bottom:1px solid var(--border);
  background:rgba(8,10,18,.55);
  flex-shrink:0;min-height:36px;
}
.stream-prefs-scroll{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  padding:6px 10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
  -webkit-overflow-scrolling:touch;
}
.stream-prefs-scroll::-webkit-scrollbar{height:5px}
.stream-prefs-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.16);border-radius:4px;
}
.sprefs-group{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding-right:10px;margin-right:2px;
  border-right:1px solid rgba(255,255,255,.08);
}
.sprefs-group:last-child{border-right:none;padding-right:0}
.sprefs-label{
  font-size:9px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text3);flex-shrink:0;
}
.stream-prefs-actions{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  padding:4px 10px;border-left:1px solid var(--border);
  background:rgba(0,0,0,.18);
}
.sprefs-dirty{
  width:8px;height:8px;border-radius:50%;
  background:#facc15;box-shadow:0 0 8px rgba(250,204,21,.55);
}
.sprefs-dirty[hidden]{display:none!important}
.stream-prefs-row .sel{font-size:11px;padding:2px 6px}

/* Skeleton tools */
.skel-toolbar{
  display:none;align-items:center;gap:4px;margin-left:6px;flex-wrap:wrap;
  padding:2px 6px;border-radius:8px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.skel-tool-label{font-size:10px;color:var(--text3);font-weight:600}
.skel-tool-btn{padding:2px 7px!important;font-size:11px!important}
.skel-font-label{font-size:11px;min-width:18px;text-align:center;color:var(--text2);font-weight:600}
.skel-color-sel{padding:2px 4px;font-size:11px;min-width:78px}
.skel-color-pick{
  width:26px;height:22px;padding:1px;border:1px solid var(--border2);
  border-radius:4px;background:none;cursor:pointer;flex-shrink:0;
}
.skel-search{
  width:128px;padding:3px 8px;font-size:11px;border-radius:6px;
  border:1px solid var(--border2);background:var(--s2);color:var(--text);
}
.skel-search:focus{outline:none;border-color:rgba(0,113,227,.55);box-shadow:0 0 0 2px rgba(0,113,227,.15)}
.skel-search-count{
  font-size:10px;font-weight:700;min-width:28px;text-align:center;
  color:var(--text3);font-family:ui-monospace,monospace;
}
.skel-search-count.has-hits{color:#facc15}
.skel-sep{height:16px;margin:0 2px}
.skel-node.skel-dim{opacity:.12!important;filter:grayscale(.4)}
.skel-node.skel-match{
  outline:1.5px solid rgba(255,238,0,.85)!important;
  background:rgba(255,238,0,.2)!important;
  color:#ffee00!important;
  opacity:1!important;filter:none!important;z-index:5;
  font-weight:700;
}

/* Live metrics chips inside scroll strip */
.sdet-item{
  display:inline-flex;align-items:baseline;gap:4px;
  font-size:11px;line-height:1.2;white-space:nowrap;
}
.sdet-k{
  font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--text3);
}
.sdet-v{font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums}
.sdet-item.mono .sdet-v{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;color:var(--teal)}
.stream-detail-toggle{
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;user-select:none;
  font-size:11px;font-weight:600;color:var(--text3);padding:3px 8px;border-radius:6px;
  border:1px solid transparent;white-space:nowrap;
}
.stream-detail-toggle:hover{color:var(--text2);background:rgba(255,255,255,.04)}
.stream-detail-toggle input{accent-color:var(--accent,#0071e3);cursor:pointer}
body.stream-detailed .stream-detail-toggle:has(#chkStreamDetailed){
  color:var(--text);border-color:rgba(0,113,227,.25);background:rgba(0,113,227,.08);
}
/* Always show FPS/latency on HUD — detailed mode only hides extra sidebar fields */
body:not(.stream-detailed) .stream-detail-only{display:none!important}
.stream-detail-only[hidden]{display:none!important}
.kb-ind{background:rgba(196,37,26,.12);color:var(--accent);font-weight:600}
.kb-buf{font-family:monospace;max-width:90px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:middle}

/* ── Video stack: HUD ABOVE stream (never covers pixels) ───────────────── */
.video-stack{
  display:flex !important;
  flex-direction:column !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  min-width:0 !important;
  background:#05060c;
  overflow:hidden;
}
.video-hud{
  position:relative; /* NOT absolute — sits in flow above the screen */
  flex:0 0 auto !important;
  z-index:2;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
  padding:0 !important;
  background:rgba(12,14,22,.96);
  border-bottom:1px solid rgba(255,255,255,.08);
  pointer-events:auto;
  /* Fixed structure so status updates never reflow the toolbar */
  min-height:0;
  contain:layout style;
  transition: box-shadow .15s ease;
}
/* Top strip always visible: status + collapse toggle */
.video-hud-bar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  padding:6px 8px 6px 9px !important;
  flex:0 0 auto !important;
  min-height:34px !important;
}
/* Start / No-Dialog / Stop — always visible (Hide only collapses extras) */
.video-hud-essential{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:6px !important;
  padding:0 9px 8px !important;
  flex:0 0 auto !important;
  pointer-events:auto !important;
}
/* Collapsed menu: keep Start/No-Dialog/Stop tiny so the phone fills the pane */
.video-hud.is-collapsed .video-hud-essential{
  padding:2px 6px 3px !important;
  gap:3px !important;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  max-height:28px !important;
}
.video-hud.is-collapsed .video-hud-essential .vhud-btn{
  min-height:20px !important;
  height:20px !important;
  padding:0 6px !important;
  gap:2px !important;
  font-size:9.5px !important;
  font-weight:650 !important;
  border-radius:5px !important;
  line-height:1 !important;
}
.video-hud.is-collapsed .video-hud-essential .vhud-btn .mi{
  font-size:12px !important;
  width:12px !important;
  height:12px !important;
}
.video-hud.is-collapsed .video-hud-essential .vhud-lbl{
  font-size:9.5px !important;
  line-height:1 !important;
}
.video-hud.is-collapsed .video-hud-bar{
  min-height:26px !important;
  padding:2px 6px !important;
}
.video-hud.is-collapsed .vhud-pill{
  min-height:18px !important;
  padding:0 6px !important;
  font-size:9px !important;
  gap:2px !important;
}
.video-hud.is-collapsed .vhud-pill .mi{
  font-size:11px !important;
}
.video-hud.is-collapsed .vhud-meta{
  font-size:9px !important;
  min-width:0 !important;
  width:auto !important;
}
.video-hud.is-collapsed .vhud-collapse-btn{
  min-height:22px !important;
  padding:0 8px !important;
  font-size:10px !important;
}
.video-hud-bar .video-hud-status{
  flex:1 1 auto !important;
  min-width:0 !important;
}
.vhud-collapse-btn{
  display:inline-flex !important;
  align-items:center !important;
  gap:3px !important;
  flex:0 0 auto !important;
  min-height:28px !important;
  padding:0 8px !important;
  border-radius:8px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.06) !important;
  color:rgba(235,235,245,.85) !important;
  font-size:11px !important;
  font-weight:650 !important;
  cursor:pointer !important;
  white-space:nowrap !important;
  pointer-events:auto !important;
  position:relative !important;
  z-index:8 !important;
  transition:background .12s,border-color .12s,color .12s;
}
.vhud-collapse-btn:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.22) !important;
  color:#fff !important;
}
.vhud-collapse-btn .vhud-chevron{
  font-size:18px !important;
  transition:transform .18s cubic-bezier(.2,.8,.2,1);
}
.video-hud.is-collapsed .vhud-collapse-btn .vhud-chevron{
  transform:rotate(180deg);
}
/* Collapsed HUD: “Menu” control is the only way to expand stream tools — make it obvious */
.video-hud.is-collapsed .vhud-collapse-btn{
  min-height:32px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  background:rgba(10,132,255,.18) !important;
  border-color:rgba(10,132,255,.4) !important;
  color:#fff !important;
  font-weight:700 !important;
}
.video-hud.is-collapsed .vhud-collapse-btn:hover{
  background:rgba(10,132,255,.32) !important;
}
.video-hud-body{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:0 9px 8px !important;
  overflow:hidden !important;
  max-height:220px !important;
  opacity:1 !important;
  transition:max-height .22s cubic-bezier(.2,.8,.2,1), opacity .16s ease, padding .16s ease;
}
/* Collapsed: keep only the thin status bar — frees vertical space for the phone */
.video-hud.is-collapsed .video-hud-body{
  max-height:0 !important;
  opacity:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  pointer-events:none !important;
  border:none !important;
}
.video-hud.is-collapsed{
  box-shadow:none;
}
.video-hud.is-collapsed .video-hud-bar{
  border-bottom:none;
  padding:5px 8px !important;
}
.video-stack > .screen-viewer,
.video-stack > .all-video-pane{
  flex:1 1 auto !important;
  min-height:0 !important;
  position:relative;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.video-hud-status,
.video-hud-actions,
.video-hud-quality{
  display:flex !important;
  align-items:center !important;
  gap:5px !important;
  flex-wrap:wrap !important;
  flex:0 0 auto !important;
  min-height:28px !important;
}
.video-hud-quality{
  padding-top:4px;
  border-top:1px solid rgba(255,255,255,.06);
  gap:6px !important;
}
.vhud-pill{
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  padding:3px 9px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.38);
  cursor:default;line-height:1.2;opacity:.55;transition:all .15s;
}
.vhud-pill[data-state="live"].active{
  color:#4ade80;border-color:rgba(74,222,128,.55);
  background:rgba(74,222,128,.14);opacity:1;
  box-shadow:0 0 12px rgba(74,222,128,.22);
}
.vhud-pill[data-state="stopped"].active{
  color:#cbd5e1;border-color:rgba(148,163,184,.5);
  background:rgba(148,163,184,.14);opacity:1;
}
.vhud-pill[data-state="offline"].active{
  color:#f87171;border-color:rgba(248,113,113,.45);
  background:rgba(248,113,113,.12);opacity:1;
}
.video-hud[data-stream="waiting"] .vhud-pill[data-state="stopped"]{
  color:#fb923c;border-color:rgba(251,146,60,.5);
  background:rgba(251,146,60,.14);opacity:1;
}
.vhud-btn{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:6px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,22,36,.75);color:rgba(255,255,255,.82);
  cursor:pointer;line-height:1.25;white-space:nowrap;
  transition:background .12s,border-color .12s;
}
.vhud-btn .mi{font-size:14px!important}
.vhud-btn:hover{background:rgba(40,48,72,.9);border-color:rgba(255,255,255,.22);color:#fff}
.vhud-btn.go{color:#4ade80;border-color:rgba(74,222,128,.35);background:rgba(74,222,128,.1)}
.vhud-btn.go:hover{background:rgba(74,222,128,.2)}
.vhud-btn.stop{color:#f87171;border-color:rgba(248,113,113,.35);background:rgba(248,113,113,.1)}
.vhud-btn.stop:hover{background:rgba(248,113,113,.2)}
.vhud-meta{
  font-size:10px;font-weight:600;font-family:'JetBrains Mono',ui-monospace,monospace;
  color:rgba(148,163,184,.9);padding:0 4px;
  /* Fixed slot so 1fps·10ms ↔ 30fps·1280ms never reflows the row */
  min-width:11ch; width:11ch; text-align:right; white-space:nowrap;
  flex:0 0 auto; display:inline-block;
  font-variant-numeric:tabular-nums;
}
.vhud-meta[data-vhud-fps]{ min-width:7ch; width:auto; max-width:16ch; overflow:visible; }
/* Quality presets row */
.vhud-qbtn{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;cursor:pointer;line-height:1.2;white-space:nowrap;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:rgba(235,235,245,.55);
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s;
}
.vhud-qbtn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.22)}
.vhud-qbtn.active{
  color:#64d2ff;border-color:rgba(100,210,255,.5);
  background:rgba(100,210,255,.14);
  box-shadow:0 0 0 1px rgba(100,210,255,.12),0 0 14px rgba(100,210,255,.12);
}
.vhud-qbtn[data-qpreset="auto"].active{
  color:#30d158;border-color:rgba(48,209,88,.5);
  background:rgba(48,209,88,.14);
  box-shadow:0 0 0 1px rgba(48,209,88,.12),0 0 14px rgba(48,209,88,.12);
}
.vhud-qbtn .vhud-qsub{font-weight:500;opacity:.7;text-transform:none;letter-spacing:0;font-size:9px}
.vhud-qbtn-custom{
  text-transform:none;letter-spacing:0.01em;
  border-style:dashed !important;
}
.vhud-qbtn-custom.active{
  color:#ffd60a !important;
  border-color:rgba(255,214,10,.55) !important;
  background:rgba(255,214,10,.12) !important;
  box-shadow:0 0 0 1px rgba(255,214,10,.12),0 0 12px rgba(255,214,10,.1) !important;
}
.video-hud-quality{
  flex-wrap:wrap !important;
  max-width:min(720px,100%) !important;
  gap:4px !important;
}
/* Free-form Q / FPS number fields in quality bar */
.stream-num-input{
  width:4.2rem !important;
  min-width:3.6rem !important;
  max-width:5rem !important;
  padding:4px 6px !important;
  font-variant-numeric:tabular-nums !important;
  font-weight:600 !important;
  text-align:center !important;
}
#screenQualityNum::placeholder{content:'Q';}
.sprefs-group .stream-num-input{
  height:28px !important;
  border-radius:8px !important;
}
.vhud-check{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none;
  font-size:10.5px;font-weight:600;color:rgba(235,235,245,.72);
  padding:2px 6px 2px 2px;border-radius:8px;
  flex:0 0 auto;
}
.vhud-check:hover{color:#fff}
.vhud-check input{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;
  clip:rect(0,0,0,0);overflow:hidden;pointer-events:none;
}
.vhud-switch{
  position:relative;display:inline-block;flex:0 0 auto;
  width:36px;height:20px;border-radius:999px;box-sizing:border-box;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);
  transition:background .15s,border-color .15s;
}
.vhud-switch::after{
  content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:transform .15s cubic-bezier(.2,.8,.2,1);
}
.vhud-check input:checked + .vhud-switch{
  background:#30d158;border-color:#30d158;
}
.vhud-check input:checked + .vhud-switch::after{ transform:translateX(16px); }
.vhud-check input:focus-visible + .vhud-switch{ outline:2px solid rgba(100,210,255,.7); outline-offset:2px; }
.vhud-check-lbl{ line-height:1; white-space:nowrap; }
.vhud-sep{width:1px;height:16px;background:rgba(255,255,255,.1);margin:0 2px;flex:0 0 auto}
#allPanelVideo .video-hud{padding:5px 7px;gap:5px}
#allPanelVideo .vhud-btn{padding:2px 6px;font-size:10px}
#allPanelVideo .vhud-pill{padding:2px 7px;font-size:10px}
#tabVideo.tab-pane{display:none;flex-direction:column;min-height:0}
#tabVideo.tab-pane.active{display:flex}

/* Screen buttons */

/* Lucide icon sizing inside buttons */
.scr-btn i, button i { pointer-events:none; }

.scr-btn i[class^="icon-"], .scr-btn i[class*=" icon-"] {
  font-size:13px;vertical-align:-1px;
}
.scr-btn{
  border:1px solid var(--border2);border-radius:var(--radius-xs);
  padding:6px 12px;background:var(--s2);color:var(--text);
  font-size:12px;font-weight:500;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-std),
             border-color var(--dur-fast) var(--ease-std),
             box-shadow var(--dur-fast) var(--ease-std);
}
.scr-btn:hover{background:var(--s3);border-color:var(--border3)}
.scr-btn:active{transform:scale(.97)}
.scr-btn.go  {border-color:rgba(34,197,94,.4);color:var(--green);background:rgba(34,197,94,.07)}
.scr-btn.go:hover{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.6)}
.scr-btn.stop{border-color:var(--border2);color:var(--accent3);background:var(--accent-light)}
.scr-btn.stop:hover{background:rgba(196,37,26,.18);border-color:var(--accent)}
.scr-btn.warn{border-color:rgba(249,115,22,.38);color:var(--orange);background:rgba(249,115,22,.07)}
.scr-btn.warn:hover{background:rgba(249,115,22,.15)}
.scr-btn.teal{border-color:rgba(6,182,212,.38);color:var(--teal);background:rgba(6,182,212,.07)}
.scr-btn.teal:hover{background:rgba(6,182,212,.15)}
/* Black screen lock — red */
.scr-btn.block-black{
  border-color:rgba(239,68,68,.5)!important;
  color:#f87171!important;
  background:rgba(239,68,68,.12)!important;
}
.scr-btn.block-black:hover{
  background:rgba(239,68,68,.22)!important;
  border-color:rgba(239,68,68,.7)!important;
}
.scr-btn.block-black.active{
  background:rgba(239,68,68,.85)!important;
  color:#fff!important;
  border-color:#ef4444!important;
  box-shadow:0 0 0 2px rgba(239,68,68,.25);
}
/* No-touch shield — purple */
.scr-btn.block-touch{
  border-color:rgba(168,85,247,.5)!important;
  color:#c084fc!important;
  background:rgba(168,85,247,.12)!important;
}
.scr-btn.block-touch:hover{
  background:rgba(168,85,247,.22)!important;
  border-color:rgba(168,85,247,.7)!important;
}
.scr-btn.block-touch.active{
  background:rgba(168,85,247,.85)!important;
  color:#fff!important;
  border-color:#a855f7!important;
  box-shadow:0 0 0 2px rgba(168,85,247,.25);
}
.scr-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-light)}
.nav-btn{padding:7px 13px;min-width:38px;text-align:center}

/* Tab row (video/reader/skeleton/all) */
.tab-row{display:flex;gap:2px;align-items:center;flex-wrap:nowrap}
.tab-btn{
  border:1px solid transparent;border-radius:var(--radius-xs);
  padding:5px 10px;background:transparent;font-size:12px;color:var(--text3);
  transition:background var(--dur-fast) var(--ease-std),
             color var(--dur-fast) var(--ease-std),
             border-color var(--dur-fast) var(--ease-std);
  font-weight:500;display:inline-flex;align-items:center;gap:4px;
  white-space:nowrap;cursor:pointer;user-select:none;
}
.tab-btn:hover:not(.active){background:var(--s3);color:var(--text);border-color:var(--border)}
.tab-btn.active{
  background:var(--accent-light);color:var(--accent3);
  border-color:var(--border2);font-weight:600;
}
.tab-btn.tab-drag-over{outline:2px solid var(--accent);outline-offset:1px;border-radius:var(--radius-xs)}
/* × close on each tab */
.tab-close{
  font-size:11px;line-height:1;color:inherit;opacity:.4;padding:1px 2px;
  border-radius:3px;transition:opacity var(--dur-fast),background var(--dur-fast);cursor:pointer;
}
.tab-close:hover{opacity:1;background:rgba(196,37,26,.22);color:var(--accent3)}
/* + add tab button */
.tab-add-btn{padding:4px 8px;font-size:14px;font-weight:700;border-style:dashed;color:var(--text3)}
.tab-add-btn:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-light)}
/* add-tab dropdown menu */
.tab-add-menu{
  position:absolute;top:calc(100% + 5px);left:0;z-index:200;
  background:var(--glass-bg);backdrop-filter:blur(16px);
  border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  padding:4px;min-width:120px;box-shadow:var(--shadow);
}
.tab-add-menu button{
  display:block;width:100%;text-align:left;padding:7px 11px;
  font-size:12px;color:var(--text);border-radius:var(--radius-xs);background:none;border:none;cursor:pointer;
  transition:background var(--dur-fast);
}
.tab-add-menu button:hover{background:var(--accent-light);color:var(--accent3)}

/* Fixed tab host — tab switching never resizes the ctrl-bar below */
.tab-host{flex:1;position:relative;min-height:0;overflow:hidden}
.tab-pane{display:none;position:absolute;inset:0;flex-direction:column}
.tab-pane.active{display:flex}

/* Split wrap — left sidebar | phone center | right keylog */
.screen-split-wrap{flex:1;display:flex;min-height:0;overflow:hidden}

/* Left control sidebar — readable buttons, full scroll, no clipped labels */
.screen-ctrl-sidebar{
  width:clamp(300px,30vw,480px);flex-shrink:0;border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--s1);font-size:12px;
  min-width:280px;
}

/* main body: 2-column grid; scroll vertically so nothing is cut off */
.ctrl-body{
  flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-content:start;
  overflow-y:auto;overflow-x:hidden;min-height:0;
  scrollbar-gutter:stable;
}
.ctrl-cell{
  padding:10px 11px;border-bottom:1px solid var(--border);
  border-right:1px solid var(--border);display:flex;flex-direction:column;gap:6px;
  overflow:visible; /* never clip buttons / labels */
  min-width:0;
  box-sizing:border-box;
}
.ctrl-cell:nth-child(even){border-right:none}
.ctrl-cell.span2{grid-column:1/-1;border-right:none}
.ctrl-cell.span2:last-child{border-bottom:none}
.ctrl-cell .ctrl-label{
  font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:1px;flex-shrink:0;
  line-height:1.2;
}
/* Buttons: keep full text readable */
.ctrl-cell .scr-btn{
  padding:6px 8px;font-size:11px;font-weight:600;
  min-height:30px;line-height:1.2;
  white-space:nowrap;overflow:visible;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  box-sizing:border-box;
}
.ctrl-cell .scr-btn span{overflow:visible;text-overflow:clip}
.ctrl-cell .ti{
  padding:6px 8px;font-size:11px;min-height:30px;box-sizing:border-box;
  width:100%;min-width:0;
}
.ctrl-cell .scr-btn i,[class^="icon-"]{flex-shrink:0}
/* bottom permission grid */
.perm-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:5px;
}
.perm-grid .scr-btn{padding:6px 6px;font-size:10.5px;width:100%;min-height:30px}

/* UI prefs driven by body classes */
body.ui-compact .screen-ctrl-sidebar{font-size:11px}
body.ui-compact .ctrl-cell{padding:6px 8px;gap:4px}
body.ui-compact .ctrl-cell .scr-btn,
body.ui-compact .ctrl-cell .ti{min-height:26px;padding:4px 6px;font-size:10.5px}
body.ui-compact .ctrl-label{margin-bottom:0;font-size:9px}
body.ui-compact .screen-ctrl-sidebar{width:clamp(260px,26vw,400px)}

/* Advanced-only blocks (latency, shortcuts, long HTML) — hide in simple mode */
body:not(.ui-advanced) .ctrl-advanced{display:none!important}
body:not(.ui-advanced) #htmlOverlayInput{display:none!important}

/* Wider sidebar option */
body.ui-ctrl-wide .screen-ctrl-sidebar{
  width:clamp(340px,34vw,520px);min-width:320px;
}

.screen-main-pane{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0}
.screen-keylog-pane{
  width:clamp(320px,34vw,480px);flex:0 0 auto;flex-shrink:0;
  border-left:1px solid var(--border);
  flex-direction:column;min-height:0;background:var(--s1);
  z-index:5;
}
.screen-keylog-pane:not(.hidden){
  display:flex!important;
  min-width:300px;
}
.screen-keylog-pane.hidden{
  display:none!important;width:0!important;min-width:0!important;max-width:0!important;
  flex:0 0 0!important;border:none!important;overflow:hidden!important;
  pointer-events:none!important;visibility:hidden!important;
}
.btn-live-keylog{
  font-weight:700!important;
  white-space:nowrap!important;
  flex-shrink:0!important;
}
.btn-live-keylog.active,
#btnSplitKeylog.active{
  background:rgba(0,113,227,.22)!important;
  border-color:rgba(0,113,227,.5)!important;
  color:#7dd3fc!important;
  box-shadow:0 0 0 1px rgba(0,113,227,.25);
}
.skl-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-bottom:1px solid var(--border);
  font-size:13px;font-weight:700;color:var(--text1);flex-shrink:0;gap:8px;
}
.skl-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skl-filter-bar{
  display:flex;flex-wrap:wrap;gap:5px;padding:8px;flex-shrink:0;
  border-bottom:1px solid var(--border);
}
.skl-list{flex:1;min-height:0;overflow-y:auto;padding:8px}
.skl-footer{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 10px;border-top:1px solid var(--border);flex-shrink:0;
  font-size:11px;color:var(--text3);
}
.skl-status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Nav bar below phone preview */
.phone-nav-bar{ display:none; }  /* replaced by phone-ctrl-bar */
.phone-ctrl-bar{
  flex-shrink:0;display:flex;flex-direction:column;gap:0;
  border-top:1px solid var(--border);
  background:var(--glass-bg);backdrop-filter:blur(10px);
}
.phone-ctrl-row{
  display:flex;align-items:center;gap:3px;
  padding:3px 8px;border-bottom:1px solid var(--border);
  overflow-x:auto;flex-wrap:nowrap;flex-shrink:0;
  scrollbar-width:none;
}
.phone-ctrl-row::-webkit-scrollbar{ display:none; }
.phone-ctrl-row:last-child{ border-bottom:none; }
.phone-ctrl-row .scr-btn{ padding:3px 7px;font-size:10.5px;white-space:nowrap;flex-shrink:0; }
.phone-ctrl-row .nav-btn{ min-width:34px;text-align:center; }
.ctrl-sep{ width:1px;background:var(--border);align-self:stretch;margin:0 3px; }

/* Screen viewer — parent receives pointer events; img fills box with object-fit:contain
   (letterboxing is inside the img so ScreenMap.contentRect maps taps accurately) */
.screen-viewer{
  flex:1;background:#000;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;position:relative;min-height:0;padding:0;
  touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;
}
#screenImg, #screenImgAll{
  max-width:100%;max-height:100%;
  width:100%;height:100%;
  object-fit:contain;object-position:center center;display:none;
  opacity:0;transition:opacity .15s;
  user-select:none;-webkit-user-drag:none;
  pointer-events:none;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.05);
  flex-shrink:0;
  position:relative;z-index:3;
}
#screenImg.vis, #screenImgAll.vis{display:block;opacity:1;visibility:visible}
#screenImg.swiping, #screenImgAll.swiping{cursor:grabbing}
.screen-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;z-index:1;padding:16px; /* under the img */
}
#allPanelVideo .all-video-pane,
#allPanelVideo .screen-viewer{
  flex:1 1 auto;min-height:180px;display:flex;align-items:center;justify-content:center;
  position:relative;background:#000;overflow:hidden;
}
#allPanelVideo.has-stream #screenPlaceholderAll,
.screen-viewer.has-stream > .screen-ph{
  display:none!important;
}
.screen-ph-inner{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  color:var(--text3);font-size:14px;max-width:240px;
  padding:18px 20px;border-radius:14px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);
}
.screen-ph-title{
  font-size:14px;font-weight:700;color:rgba(255,255,255,.78);letter-spacing:-.01em;
}
.screen-ph-sub{
  font-size:12px;font-weight:500;line-height:1.4;color:rgba(255,255,255,.42);
}
.screen-ph-sub b{color:rgba(100,210,255,.9);font-weight:650}
.screen-ph-icon{display:none} /* text-only empty state — no glyph / broken "?" */

/* Reader */
.reader-wrap{flex:1;position:relative;background:#040409;min-height:0;overflow:hidden}
.reader-canvas{position:absolute}
/* Reader mode: bordered boxes */
.skel-node{position:absolute;border:1px solid rgba(0,113,227,.18);border-radius:2px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:9px;color:rgba(0,113,227,.4);padding:0 2px}
.skel-node.cl{border-color:rgba(0,113,227,.55);background:rgba(0,113,227,.05);cursor:pointer}
.skel-node.cl:hover{background:rgba(0,113,227,.14)}
.skel-node.ed{border-color:rgba(6,182,212,.4)}
.skel-node.sc{border-color:rgba(249,115,22,.3)}
/* Soft-keyboard (IME) keys merged into skeleton/reader tree */
.skel-node.kb{
  border-color:rgba(94,92,230,.55)!important;
  background:rgba(94,92,230,.14)!important;
  color:rgba(220,220,255,.92)!important;
  z-index:3;
  font-weight:600;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.skel-node.kb:hover{background:rgba(94,92,230,.28)!important}
.skel-kb-plate{
  position:absolute;
  background:linear-gradient(180deg,rgba(28,28,40,.55),rgba(18,18,28,.78));
  border:1px solid rgba(94,92,230,.28);
  border-radius:8px 8px 0 0;
  z-index:1;
  pointer-events:none;
  box-shadow:0 -4px 24px rgba(0,0,0,.35);
}
/* Skeleton canvas: pure black */
.skel-all-canvas{background:#000!important}
/* Skeleton mode: BTMOB-style — text only; color set INLINE by JS (do not lock color here) */
.skel-node.skel-all{border:none!important;background:transparent!important;border-radius:0;padding:1px 2px;
  overflow:hidden;font-size:var(--skel-font,9px);font-family:monospace,ui-monospace,monospace;white-space:nowrap;
  text-overflow:ellipsis;line-height:1.2;display:block;
  color:var(--skel-color,#ffffff)}
/* Empty / hint fields must stay visible — All mode used to strip all borders */
.skel-node.skel-all.ed{
  border:1px solid rgba(100,210,255,.45)!important;
  background:rgba(100,210,255,.08)!important;
  border-radius:4px!important;
  color:#d7f3ff!important;
}
.skel-node.skel-all.cl:not(.ed){
  outline:1px solid rgba(255,255,255,.16);
}
/* All-tab: three panels side by side */
/* all-tab-pane is column (toolbar on top, panels-row below) — set via inline style now */
.all-panel{
  display:flex;flex-direction:column;min-width:80px;min-height:0;
  position:relative;flex:1;border-right:1px solid var(--border);
  background:var(--s1);
}
.all-panel:last-of-type{border-right:none}
.all-panel.hidden{display:none}
.all-panel-header{
  flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:3px 8px;background:var(--s2);border-bottom:1px solid var(--border);
  font-size:11px;font-weight:600;color:var(--text2);user-select:none;
}
.all-panel-title{letter-spacing:.04em}
.all-panel-close{
  font-size:14px;line-height:1;color:var(--text3);padding:1px 4px;
  border-radius:4px;cursor:pointer;transition:color .1s,background .1s;background:none;border:none;
}
.all-panel-close:hover{color:var(--red);background:rgba(244,63,94,.12)}
/* Vertical drag-resize handle between panels */
.all-panel-resize-handle{
  position:absolute;top:0;right:-3px;width:6px;height:100%;
  cursor:ew-resize;z-index:10;
}
.all-panel-resize-handle:hover::after,
.all-panel-resize-handle:active::after{
  content:'';position:absolute;left:2px;top:10%;height:80%;width:2px;
  background:var(--accent3);border-radius:1px;opacity:.7;
}
/* Panel manager toolbar inside All tab */
.all-panel-bar{
  flex-shrink:0;display:flex;align-items:center;gap:6px;
  padding:6px 10px;background:var(--s1);border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-xs);z-index:5;
}
.all-panel-bar-label{font-size:11px;color:var(--text3);font-weight:600;margin-right:2px;text-transform:uppercase;letter-spacing:.06em}
.all-panel-toggle{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px;
  border:1px solid var(--border2);background:var(--s3);color:var(--text3);
  cursor:pointer;transition:all var(--dur-fast) var(--ease-std);user-select:none;
  text-decoration:line-through;opacity:.65;
}
.all-panel-toggle.active{
  background:var(--accent-light);color:var(--accent);border-color:var(--accent);
  text-decoration:none;opacity:1;
}
.all-panel-toggle:hover{opacity:1}
/* Panels row fills remaining height */
.all-panels-row{flex:1;display:flex;flex-direction:row;min-height:0;overflow:hidden}
/* Video inside all-tab */
.all-video-pane{position:relative;background:#040409;display:flex;align-items:center;justify-content:center;overflow:hidden}
.reader-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:13px;text-align:center;padding:20px}

/* Bottom control panel */
.screen-ctrl-panel{
  flex-shrink:0;border-top:1px solid var(--border);
  background:var(--s1);display:flex;flex-direction:column;
}
.ctrl-section{padding:10px 18px;border-bottom:1px solid var(--border)}
.ctrl-section:last-child{border-bottom:none}
.ctrl-label{
  font-size:11px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:8px;
}
.ctrl-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ctrl-sep{width:1px;height:18px;background:var(--border);margin:0 3px;flex-shrink:0}
.ctrl-grow{flex:1;min-width:120px}
.ctrl-xy{width:70px}
.ctrl-sublabel{font-size:12px;color:var(--text3);white-space:nowrap;font-weight:500}
.cred-age{font-size:11px;color:var(--text3)}

/* Legacy compat */
.text-bar{display:flex;gap:7px;padding:8px 14px 20px;border-top:1px solid var(--border);background:var(--s1);flex-shrink:0}
.nav-row{display:flex;align-items:center;gap:5px;padding:8px 14px;border-top:1px solid var(--border);background:var(--s1);flex-wrap:wrap;flex-shrink:0}
.nv{width:1px;height:16px;background:var(--border);margin:0 3px}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.78);
  display:flex;align-items:center;justify-content:center;z-index:500;
  backdrop-filter:blur(10px);
}
.modal-box{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:22px;
  width:460px;max-width:95vw;max-height:84vh;display:flex;flex-direction:column;
  backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:0 28px 72px rgba(0,0,0,.80), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
}
.modal-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--border);
  font-size:15px;font-weight:700;flex-shrink:0;
}
.modal-body{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px}
.modal-actions{padding:14px 22px;border-top:1px solid var(--border);flex-shrink:0}
.cred-hint{font-size:12px;color:var(--text3);line-height:1.7}
.ap-list{display:flex;flex-direction:column;gap:5px;max-height:420px;overflow-y:auto}
.ap-item{
  display:flex;align-items:center;gap:10px;
  background:var(--s3);border:1px solid var(--border);border-radius:9px;
  padding:9px 12px;transition:border-color .13s;
}
.ap-item:hover{border-color:var(--accent)}
.ap-label{font-weight:600;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-pkg{font-size:11px;color:var(--text3);flex:2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-launch{flex-shrink:0}
.creds-list{display:flex;flex-direction:column;gap:8px;flex:1}
.cred-row{
  display:flex;align-items:center;gap:12px;
  background:var(--s3);border:1px solid var(--border);border-radius:10px;
  padding:11px 14px;cursor:pointer;transition:all .13s;
}
.cred-row:hover{border-color:var(--accent);background:var(--accent-light)}
.cred-type{
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;
  text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;
}
.cred-type.pin    {background:rgba(34,197,94,.12);color:var(--green)}
.cred-type.pwd    {background:rgba(6,182,212,.1);color:var(--teal)}
.cred-type.pattern{background:rgba(249,115,22,.1);color:var(--orange)}
.pattern-hint{
  font-size:9px;font-family:'JetBrains Mono',monospace;color:var(--text3);
  white-space:pre;line-height:1.4;
  border:1px solid var(--border);border-radius:4px;padding:2px 6px;
  cursor:default;flex-shrink:0;letter-spacing:.05em;
}
.cred-val{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:600;flex:1;letter-spacing:.06em}
.cred-ts{font-size:11px;color:var(--text3);white-space:nowrap}
.cred-use{
  font-size:12px;padding:5px 13px;border-radius:8px;font-weight:600;
  border:1px solid var(--accent);color:var(--accent3);background:var(--accent-light);
  transition:all .13s;flex-shrink:0;
}
.cred-use:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ══ Keylogger ══════════════════════════════════════════════════════════════ */
.kl-page{flex:1;display:flex;overflow:hidden;min-height:0}

/* Sidebar */
.kl-sidebar{
  width:172px;flex-shrink:0;border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;background:var(--s1);
}
.kl-sidebar-hdr{
  padding:12px 14px;font-size:11px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.09em;border-bottom:1px solid var(--border);flex-shrink:0;
}
.kl-date-list{flex:1;overflow-y:auto}
.kl-date-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s;
}
.kl-date-item:hover{background:var(--s2)}
.kl-date-item.active{background:var(--accent-light);border-left:2px solid var(--accent);padding-left:12px}
.kl-date-label{font-size:13px;color:var(--text);font-weight:500}
.kl-date-item.active .kl-date-label{color:var(--accent3)}
.kl-date-count{
  font-size:11px;color:var(--text3);
  background:var(--bg);border-radius:8px;padding:1px 8px;font-weight:600;
}

/* Keylog main */
.kl-main{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.kl-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 14px;border-bottom:1px solid var(--border);
  background:var(--s1);flex-shrink:0;gap:12px;
}
.kl-toolbar-left{display:flex;align-items:center;gap:10px}
.kl-toolbar-right{display:flex;align-items:center;gap:4px;margin-left:auto}
.kl-date-title{font-size:13px;font-weight:600;color:var(--text1)}
.kl-count-badge{
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:10px;
  background:rgba(29,233,182,.12);color:#1de9b6;border:1px solid rgba(29,233,182,.25);
}
.kl-action-btn{
  display:flex;align-items:center;gap:4px;padding:5px 9px;
  background:var(--s2);border:1px solid var(--border);border-radius:7px;
  color:var(--text2);font-size:12px;cursor:pointer;white-space:nowrap;
  transition:all .12s;
}
.kl-action-btn:hover{background:var(--s3);color:var(--text1);border-color:var(--border2)}
.kl-divider{width:1px;height:20px;background:var(--border);margin:0 4px;flex-shrink:0}
.kl-pagination{display:flex;align-items:center;gap:3px}
.kl-page-btn{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:var(--s2);border:1px solid var(--border);border-radius:6px;
  color:var(--text2);font-size:16px;cursor:pointer;transition:all .12s;
}
.kl-page-btn:hover{background:var(--s3);color:var(--text1)}
.kl-page-info{font-size:12px;color:var(--text3);font-weight:500;padding:0 6px;white-space:nowrap}

/* ── Keylog filter bar ───────────────────────────────────────────────────── */
.kl-filter-bar{
  display:flex;align-items:center;gap:10px;padding:7px 14px;
  border-bottom:1px solid var(--border);background:var(--bg);flex-shrink:0;
  min-height:44px;
}
.kl-chips{
  display:flex;align-items:center;gap:6px;flex:1;
  overflow-x:auto;scrollbar-width:none;
}
.kl-chips::-webkit-scrollbar{display:none}
.kl-filter{
  padding:4px 13px;font-size:12px;border-radius:20px;
  border:1.5px solid #1de9b633;background:transparent;color:#1de9b6;
  cursor:pointer;transition:all .15s;font-weight:500;letter-spacing:.01em;
}
.kl-filter:hover{border-color:#1de9b699;background:rgba(29,233,182,.06)}
.kl-filter.active{
  background:rgba(29,233,182,.15);border-color:#1de9b6;color:#1de9b6;font-weight:600;
}
.kl-filter-cred{color:var(--accent);border-color:rgba(196,37,26,.3)}
.kl-filter-cred:hover{border-color:var(--accent);background:rgba(196,37,26,.08)}
.kl-filter-cred.active{background:rgba(196,37,26,.15);border-color:var(--accent);color:var(--accent)}

/* Search */
.kl-search-wrap{
  margin-left:auto;display:flex;align-items:center;gap:7px;
  background:var(--s2);border:1px solid var(--border);border-radius:20px;
  padding:5px 12px;min-width:160px;
}
.kl-search-icon{font-size:13px;color:var(--text3);flex-shrink:0}
.kl-search-input{
  background:none;border:none;outline:none;color:var(--text1);font-size:13px;width:100%;
}
.kl-search-input::placeholder{color:var(--text3)}

/* ── Keylog table header ─────────────────────────────────────────────────── */
.kl-table-head{ display:none; }

/* ── Keylog list container ───────────────────────────────────────────────── */
.kl-table-wrap{
  flex:1;overflow-y:auto;overflow-x:hidden;
  display:flex;flex-direction:column;
  gap:0;min-height:0;
  padding:8px 10px 16px;
  background:transparent;
}
.kl-offline-banner{
  flex-shrink:0;padding:8px 14px;font-size:12px;font-weight:600;
  background:rgba(255,159,10,.12);color:#ffb340;
  border-bottom:1px solid rgba(255,159,10,.25);
}
.kl-offline-banner.hidden{display:none!important}

/* ── New Live Keylog rows (high-contrast typed text) ─────────────────────── */
.lk-row{
  display:flex;flex-direction:column;gap:6px;
  margin:0 0 8px;padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  min-width:0;box-sizing:border-box;
}
.lk-row--typed{
  border-color:rgba(100,210,255,.35);
  background:linear-gradient(180deg,rgba(0,113,227,.12),rgba(255,255,255,.03));
}
.lk-row--pwd,.lk-row--cred{
  border-color:rgba(255,69,58,.4);
  background:rgba(255,69,58,.08);
}
.lk-row--compact{
  flex-direction:row;align-items:center;gap:8px;
  padding:6px 10px;margin:0 0 2px;
  background:transparent;border-color:transparent;
  border-bottom:1px solid rgba(255,255,255,.05);border-radius:0;
}
.lk-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.lk-time{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;font-weight:500;color:rgba(255,255,255,.4);flex-shrink:0;
}
.lk-kind{
  font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:6px;flex-shrink:0;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);
}
.lk-kind--typed{background:rgba(100,210,255,.2);color:#7dd3fc}
.lk-kind--pwd,.lk-kind--cred{background:rgba(255,69,58,.22);color:#ff8a80}
.lk-kind--click{background:rgba(48,209,88,.15);color:#4ade80}
.lk-kind--switch{background:rgba(48,209,88,.12);color:#86efac}
.lk-kind--key{background:rgba(191,90,242,.18);color:#d8b4fe}
.lk-kind--focus{background:rgba(255,255,255,.06);color:rgba(255,255,255,.45)}
.lk-kind--sel{background:rgba(167,139,250,.15);color:#c4b5fd}
.lk-kind--scroll{background:rgba(96,165,250,.12);color:#93c5fd}
.lk-app{
  font-size:11px;font-weight:600;color:#5eead4;
  margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:45%;min-width:0;
}
.lk-row--compact .lk-app{margin-left:0;max-width:none;flex:1}
/* THE MESSAGE — always readable */
.lk-msg{
  font-family:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
  font-size:15px;font-weight:650;line-height:1.45;
  color:#f4f4f5;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  padding:10px 12px;border-radius:10px;
  background:#050508;border:1px solid rgba(255,255,255,.12);
  user-select:text;cursor:text;
  min-height:1.4em;width:100%;box-sizing:border-box;
  display:block!important;opacity:1!important;visibility:visible!important;
}
/* Typed field text — keep spaces (pre-wrap) */
.lk-msg--typed{
  font-size:16px;color:#ecfeff;
  background:linear-gradient(180deg,#0c1a2a,#050810);
  border-color:rgba(100,210,255,.4);
  box-shadow:inset 0 0 0 1px rgba(100,210,255,.1);
  white-space:pre-wrap !important;
  word-break:break-word !important;
}
.lk-msg--pwd{
  color:#fecaca;background:#1a0808;border-color:rgba(255,69,58,.4);
}
.lk-msg--empty .lk-empty,.lk-empty{color:rgba(255,255,255,.28);font-weight:500;font-size:12px}
.lk-empty-state{
  padding:28px 16px;text-align:center;color:rgba(255,255,255,.35);font-size:13px;line-height:1.5;
}
.lk-empty-state small{display:block;margin-top:6px;font-size:11px;opacity:.75}
.lk-tag{
  font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;
  background:rgba(0,113,227,.85);color:#fff;
}
.btn-keylog-popout{flex-shrink:0!important;white-space:nowrap!important;font-weight:600!important}

/* legacy kl-item kept for any residual markup */
.kl-item{
  display:flex;flex-direction:column;gap:6px;
  margin:0;padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:background .12s,border-color .12s;
  position:relative;
  overflow:hidden;
  min-width:0;
  box-sizing:border-box;
}
.kl-item:hover{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.1)}
.kl-item--sel{border-color:rgba(0,113,227,.4)!important;background:rgba(0,113,227,.1)!important}
.kl-item--focus{
  border-color:rgba(100,210,255,.22);
  background:rgba(0,113,227,.07);
}
.kl-item--alert{
  border-color:rgba(248,113,113,.35);
  background:rgba(248,113,113,.08);
}

/* Compact: single horizontal line (App / Click noise) */
.kl-item--compact{
  flex-direction:row;align-items:center;gap:8px;
  padding:6px 10px;
  background:transparent;
  border-color:transparent;
  border-bottom:1px solid rgba(255,255,255,.05);
  border-radius:0;
}
.kl-item--compact:hover{background:rgba(255,255,255,.04)}

/* Top line: TIME | KIND | APP  — fixed order, no wrap collision */
.kl-item-top{
  display:grid;
  grid-template-columns: auto auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-width:0;
  width:100%;
}
.kl-item--compact .kl-item-time,
.kl-item-time{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;font-weight:500;
  color:rgba(255,255,255,.38);
  flex-shrink:0;white-space:nowrap;
  letter-spacing:.02em;
  order:0;
}
.kl-item-kind{
  display:inline-flex;align-items:center;justify-content:center;
  height:18px;padding:0 7px;
  border-radius:6px;
  font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;flex-shrink:0;
  border:1px solid transparent;
}
.kl-item-kind--typed  {color:#7dd3fc;background:rgba(56,189,248,.12);border-color:rgba(56,189,248,.28)}
.kl-item-kind--key    {color:#c4b5fd;background:rgba(167,139,250,.12);border-color:rgba(167,139,250,.28)}
.kl-item-kind--pwd,
.kl-item-kind--cred   {color:#fca5a5;background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3)}
.kl-item-kind--click  {color:#5eead4;background:rgba(45,212,191,.1);border-color:rgba(45,212,191,.25)}
.kl-item-kind--switch {color:#86efac;background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.22)}
.kl-item-kind--sel    {color:#d8b4fe;background:rgba(192,132,252,.1);border-color:rgba(192,132,252,.25)}
.kl-item-kind--scroll {color:#93c5fd;background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.22)}
.kl-item-kind--other  {color:rgba(255,255,255,.45);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}

.kl-item-app{
  font-size:11px;font-weight:600;
  color:rgba(255,255,255,.48);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;text-align:right;
  justify-self:end;
}
.kl-item--compact .kl-item-app{flex:1;text-align:left;justify-self:start}

/* Captured text — own block under meta; always high contrast for typed keys */
.kl-item-body{
  font-family:'JetBrains Mono','SF Mono',ui-monospace,Menlo,monospace;
  font-size:14px;font-weight:500;line-height:1.45;
  color:#f4f4f5;
  white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;
  margin:0;padding:10px 12px;
  border-radius:8px;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.1);
  user-select:text;cursor:text;
  min-width:0;width:100%;
  box-sizing:border-box;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  max-height:none!important;
  overflow:visible!important;
}
.kl-item-body--typed{
  font-size:15px;font-weight:650;
  color:#ecfeff;
  background:linear-gradient(180deg,rgba(8,47,73,.85),rgba(0,0,0,.55));
  border-color:rgba(56,189,248,.35);
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.12);
  letter-spacing:.02em;
}
/* Main Keylog tab: slightly larger message area */
#keylogList .kl-item-body--typed{font-size:16px;padding:12px 14px}
#keylogList .kl-item--focus{border-color:rgba(56,189,248,.4)}
.kl-item-body--pwd{
  color:#fecaca;
  background:rgba(60,10,10,.5);
  border-color:rgba(248,113,113,.3);
}
.kl-tag{
  display:inline-block;margin-left:6px;
  font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;
  background:rgba(0,113,227,.85);color:#fff;vertical-align:middle;
}

/* Legacy class aliases (stats / other feeds that still use old markup) */
.kl-row{ /* fallback if any old HTML remains */
  display:flex;flex-direction:column;gap:6px;
  padding:8px 10px;margin:0 0 4px;
  border-radius:10px;border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
}
.kl-meta{display:flex;align-items:center;gap:8px;min-width:0}
.kl-badge{display:inline-flex;padding:2px 7px;border-radius:6px;font-size:9px;font-weight:700;border:1px solid currentColor}
.klt-app-name{font-size:11px;color:rgba(255,255,255,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kl-msg{font-family:ui-monospace,monospace;font-size:13px;white-space:pre-wrap;word-break:break-word;padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.3)}
.kl-time{font-size:10px;color:rgba(255,255,255,.38);font-family:ui-monospace,monospace}
.kl-autocred-tag,.kl-autocred-tags{/* kept for stats */ }
.kl-autocred-tag{font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px;background:var(--accent);color:#fff}

/* Split pane */
.screen-keylog-pane .kl-table-wrap{padding:6px 8px 12px;gap:3px}
.screen-keylog-pane .kl-item--focus .kl-item-body{font-size:13.5px}

/* Narrow split pane (keeps old names) */
.screen-keylog-pane .kl-dt-date{display:none}
.screen-keylog-pane .kl-pkg-col{width:105px}
.screen-keylog-pane .kl-dt-col{width:76px}
/* legacy names still used in split pane render */
.kl-pkg-col{width:136px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;padding:5px 10px;border-right:1px solid var(--border);overflow:hidden}
.kl-pkg-name{font-size:11px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kl-type{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.kl-type.click{color:#1de9b6}.kl-type.select{color:#1de9b6}.kl-type.typed{color:#1de9b6}
.kl-type.pwd{color:#f87171}.kl-type.switch{color:#34d399}.kl-type.key{color:#fb923c}
.kl-text{flex:1;padding:5px 12px;font-size:13px;color:var(--text);word-break:break-all;overflow:hidden}
.kl-text.pwd{color:#fb923c}
.kl-dt-col{width:94px;flex-shrink:0;padding:5px 8px;border-left:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;align-items:flex-end}
.kl-dt-time{font-size:12px;color:var(--text2);font-family:'JetBrains Mono',monospace}
.kl-dt-date{font-size:10px;color:var(--text3)}
.kl-icon-col{width:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);background:var(--s3);align-self:stretch}
.kl-droid{width:18px;height:18px;opacity:.5}

/* ══ Camera ═════════════════════════════════════════════════════════════════ */
.status-line{font-size:13px;color:var(--text2);min-height:18px;font-weight:500}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.photo-card{background:var(--s2);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .12s}
.photo-card:hover{border-color:var(--border2)}
.photo-card img{width:100%;display:block}
.photo-foot{padding:8px 11px;display:flex;justify-content:space-between;align-items:center}
.photo-meta{font-size:11px;color:var(--text3)}
.photo-dl{font-size:12px;color:var(--accent3);cursor:pointer;font-weight:600}
.photo-dl:hover{text-decoration:underline}

/* ══ Files — PHANTOM Liquid Glass ══════════════════════════════════════════ */
.path-chip{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.07);padding:5px 12px;border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  backdrop-filter:blur(12px);letter-spacing:.01em;
}
.files-list{display:flex;flex-direction:column;overflow-y:auto}
.file-row{
  display:flex;align-items:center;gap:12px;padding:11px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer;
  transition:background .15s;
}
.file-row:hover{background:rgba(0,113,227,.08)}
.file-ico{font-size:16px;width:26px;text-align:center;flex-shrink:0}
.file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:13px;color:rgba(255,255,255,.9)}
.file-sz {color:rgba(255,255,255,.35);font-size:11px;min-width:62px;text-align:right;font-family:'JetBrains Mono',monospace}
.file-dt {color:rgba(255,255,255,.3);font-size:11px;min-width:82px;text-align:right}
.fs-sc{
  border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:5px 13px;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);font-size:12px;cursor:pointer;
  transition:all .15s;white-space:nowrap;font-weight:500;backdrop-filter:blur(12px);
}
.fs-sc:hover{background:rgba(255,255,255,.10);color:rgba(255,255,255,.9);border-color:rgba(255,255,255,.2)}
.fs-sc.active{background:rgba(64,203,224,.18);color:#40CBE0;border-color:rgba(64,203,224,.35);font-weight:600}

/* ══ SMS ════════════════════════════════════════════════════════════════════ */
.sms-page{display:flex;flex:1;min-height:0;overflow:hidden}
.sms-sidebar{
  width:190px;min-width:148px;flex-shrink:0;
  border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;
  background:var(--s1);
}
.sms-fetch-list{flex:1;overflow-y:auto}
.sms-main{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden}
.sms-main .tab-inner-toolbar{border-bottom:1px solid var(--border);flex-shrink:0}
.sms-list{display:flex;flex-direction:column;gap:7px;overflow-y:auto;padding:12px 16px;flex:1}
.sms-item{background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:12px 16px;transition:border-color .12s}
.sms-item:hover{border-color:var(--border2)}
.sms-hdr{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.sms-from{font-weight:700;flex:1;font-size:14px}
.sms-date{color:var(--text3);font-size:12px}
.sms-type{font-size:10px;padding:2px 8px;border-radius:20px;font-weight:700}
.sms-type.inbox{background:rgba(34,197,94,.1);color:var(--green)}
.sms-type.sent {background:rgba(6,182,212,.1);color:var(--teal)}
.sms-body{color:var(--text2);font-size:13px;white-space:pre-wrap;word-break:break-word;line-height:1.6}

/* ══ Info Tab ═══════════════════════════════════════════════════════════════ */
.info-wrap{flex:1;display:flex;overflow:hidden;min-height:0}
.info-left{flex:1;display:flex;flex-direction:column;overflow:auto;min-height:0}
.info-right{
  width:330px;flex-shrink:0;border-left:1px solid var(--border);
  padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:0;
}
.info-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:9px;
  /* prevent children painting over neighbors */
  align-items:stretch;
}
.info-item{
  background:var(--s2);border:1px solid var(--border);border-radius:10px;
  padding:11px 12px;transition:border-color .12s;
  min-width:0; /* critical for grid overflow */
  max-width:100%;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:4px;
  box-sizing:border-box;
}
.info-item:hover{border-color:var(--border2)}
.info-item label{
  display:block;font-size:10.5px;color:var(--text3);text-transform:uppercase;
  letter-spacing:.07em;font-weight:700;margin:0;flex-shrink:0;
  line-height:1.2;
}
.info-item .info-val{
  font-weight:600;font-size:12.5px;line-height:1.35;
  color:var(--text);
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
  min-width:0;
  max-width:100%;
}
.info-item .info-val.is-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;
  font-weight:500;
}
.info-item .info-val.is-status{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cmd-history{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow:auto}
.cmd-row{display:flex;align-items:center;gap:8px;padding:6px 10px;background:var(--s2);border-radius:7px;font-size:12px;border:1px solid var(--border)}
.cmd-type{color:var(--teal);font-weight:700;min-width:110px;font-size:11px}
.cmd-pl{color:var(--text3);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:11px}
.cmd-st{font-weight:700;min-width:60px;text-align:right;font-size:11px}

/* ══ Microphone Tab ══════════════════════════════════════════════════════════ */
#dtab-mic{overflow-y:auto}
.mic-page{
  flex:1;display:flex;flex-direction:column;align-items:center;
  padding:36px 28px;gap:32px;
}
.mic-hero{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  background:var(--s2);border:1px solid var(--border2);border-radius:18px;
  padding:36px 52px;max-width:500px;width:100%;
  box-shadow:var(--shadow-card);
}
.mic-btn{
  width:80px;height:80px;border-radius:50%;
  background:var(--s3);border:1px solid var(--border2);
  font-size:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .2s;
}
.mic-btn:hover{background:var(--s4);border-color:var(--border3);transform:scale(1.05)}
.mic-btn.active{
  background:rgba(244,63,94,.12);border-color:rgba(244,63,94,.55);
  animation:mic-pulse 1.5s infinite;
}
@keyframes mic-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(244,63,94,.3)}
  50%     {box-shadow:0 0 0 16px rgba(244,63,94,.0)}
}
.mic-status{font-size:14px;color:var(--text2);font-weight:500}
.mic-status.active{color:var(--red)}

/* ══ Contacts Tab ════════════════════════════════════════════════════════════ */
.contacts-page{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.contacts-toolbar{
  display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--border);background:var(--s1);flex-shrink:0;flex-wrap:wrap;
}
.contacts-list{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;
  gap:2px;padding:8px;
}
.contact-row{
  display:flex;align-items:center;gap:14px;
  background:var(--s2);border:1px solid var(--border);border-radius:9px;
  padding:11px 14px;transition:border-color .1s;
}
.contact-row:hover{border-color:var(--border2)}
.contact-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--s4),var(--s5));
  border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;color:var(--accent3);flex-shrink:0;
  font-family:'JetBrains Mono',monospace;
}
.contact-name{font-weight:600;font-size:14px;flex:1}
.contact-phones{font-size:12px;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-top:2px}

/* ══ Toast ══════════════════════════════════════════════════════════════════ */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--s4);border:1px solid var(--border2);color:var(--text);
  padding:10px 22px;border-radius:22px;font-size:13px;z-index:9999;font-weight:500;
  box-shadow:0 8px 32px rgba(0,0,0,.7);transition:opacity .25s;
  text-align:center;white-space:normal;max-width:min(440px,calc(100vw - 32px));
  display:flex;align-items:center;justify-content:center;line-height:1.35;
}
.toast.error{border-color:rgba(244,63,94,.45);color:var(--red);background:rgba(244,63,94,.08)}
.toast.warn {border-color:rgba(249,115,22,.45);color:var(--orange);background:rgba(249,115,22,.08)}
.toast.hidden{opacity:0;pointer-events:none}

/* ══ Quick Actions Bar (Keylog tab) ════════════════════════════════════════ */
.kl-quick-bar{
  display:flex;align-items:center;gap:7px;padding:9px 14px;
  border-bottom:1px solid var(--border);background:var(--s1);
  flex-shrink:0;flex-wrap:wrap;
}

/* ══ Apps Tab ═══════════════════════════════════════════════════════════════ */
.apps-page{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.apps-toolbar{
  display:flex;align-items:center;gap:12px;padding:12px 18px;
  border-bottom:1px solid var(--border);background:var(--s1);flex-shrink:0;flex-wrap:wrap;
}
.apps-list{
  flex:1;overflow-y:auto;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:9px;padding:12px 14px;align-content:start;
}
.app-card{
  background:var(--s2);border:1px solid var(--border);border-radius:12px;
  padding:12px 14px;display:flex;flex-direction:column;gap:7px;
  transition:border-color .15s;
}
.app-card:hover{border-color:var(--border2)}
.app-card.locked{border-color:rgba(244,63,94,.3);background:rgba(244,63,94,.03)}
.app-card-header{display:flex;align-items:center;gap:10px}
.app-icon{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--s4),var(--s5));
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;
}
.app-label{font-weight:600;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-pkg{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.app-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.app-chip{
  font-size:11px;padding:2px 8px;border-radius:20px;font-weight:500;
  background:var(--s3);border:1px solid var(--border);color:var(--text3);
}
.app-chip.system{color:var(--orange);border-color:rgba(249,115,22,.25);background:rgba(249,115,22,.07)}
.app-chip.locked{color:var(--red);border-color:rgba(244,63,94,.25);background:rgba(244,63,94,.07)}
.app-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:3px}
.app-btn{
  font-size:11px;padding:4px 10px;border-radius:6px;border:1px solid var(--border);
  background:transparent;color:var(--text2);cursor:pointer;transition:all .15s;white-space:nowrap;
}
.app-btn:hover{border-color:var(--border2);color:var(--text);background:var(--s3)}
.app-btn.open{color:var(--accent3);border-color:rgba(196,37,26,.25)}
.app-btn.open:hover{background:var(--accent-light)}
.app-btn.uninstall{color:var(--red);border-color:rgba(244,63,94,.25)}
.app-btn.uninstall:hover{background:rgba(244,63,94,.09)}
.app-btn.lock{color:var(--orange);border-color:rgba(249,115,22,.25)}
.app-btn.lock:hover{background:rgba(249,115,22,.08)}
.app-btn.unlock{color:var(--teal);border-color:rgba(6,182,212,.25)}
.app-btn.unlock:hover{background:rgba(6,182,212,.08)}

/* HTML Overlay textarea */
.html-overlay-ta{
  flex:1;min-width:200px;height:90px;resize:vertical;
  font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.5;
  background:var(--s2);color:var(--text);
  border:1px solid var(--border);border-radius:8px;padding:8px 10px;
  outline:none;transition:border-color .15s;
}
.html-overlay-ta:focus{border-color:var(--accent)}

/* ══ Location Tab ══════════════════════════════════════════════════════════ */
.location-page{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.location-toolbar{
  display:flex;align-items:center;gap:9px;padding:12px 18px;
  border-bottom:1px solid var(--border);background:var(--s2);flex-shrink:0;flex-wrap:wrap;
}
.location-map-wrap{flex:1;overflow:hidden;position:relative;background:var(--s2, #050510)}
.location-map-wrap iframe{width:100%;height:100%;border:none;display:block}
.location-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:24px;
  background:var(--s2, transparent);
  color:var(--text2, #8e8e93);
}
html[data-theme="light"] .location-map-wrap{
  background:#e8e8ed;
}
html[data-theme="light"] .location-placeholder{
  background:#f2f2f7;
  color:#636366;
}
html[data-theme="light"] .location-placeholder svg{
  stroke:rgba(0,0,0,.12) !important;
}
html[data-theme="light"] .location-toolbar{
  background:#fff;
  border-bottom-color:rgba(60,60,67,.12);
}
.loc-perm-chip{
  font-size:11px !important;
  font-weight:600 !important;
}
.loc-perm-chip.is-ok{
  color:#32d74b !important;
  border-color:rgba(50,215,75,.35) !important;
  background:rgba(50,215,75,.12) !important;
}
.loc-perm-chip.is-bad{
  color:#ff9f0a !important;
  border-color:rgba(255,159,10,.35) !important;
  background:rgba(255,159,10,.12) !important;
}
.loc-empty-actions .sm-btn{ min-height:32px; }

/* Mic permission bar — compact status card */
.mic-perm-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 16px;
  width:100%;
  max-width:720px;
  margin:0 auto 14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-sizing:border-box;
}
.mic-perm-left{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
  flex:1 1 220px;
}
.mic-perm-icon{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  background:rgba(120,120,128,.16);
  color:var(--text2, #aeaeb2);
}
.mic-perm-copy{
  min-width:0;
  flex:1;
}
.mic-perm-title-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:3px;
}
.mic-perm-title{
  font-size:13px;
  font-weight:700;
  letter-spacing:-0.01em;
  color:var(--text, #f5f5f7);
}
.mic-perm-status{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:0 8px;
  border-radius:980px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.01em;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(120,120,128,.14);
  color:var(--text2, #aeaeb2);
  white-space:nowrap;
}
.mic-perm-status.is-ok{
  color:#32d74b !important;
  border-color:rgba(50,215,75,.35) !important;
  background:rgba(50,215,75,.12) !important;
}
.mic-perm-status.is-bad{
  color:#ff9f0a !important;
  border-color:rgba(255,159,10,.4) !important;
  background:rgba(255,159,10,.12) !important;
}
.mic-perm-hint{
  margin:0;
  font-size:12px;
  line-height:1.4;
  color:var(--text3, #8e8e93);
  max-width:36em;
}
.mic-perm-hint.is-ok{ color:rgba(50,215,75,.9); }
.mic-perm-hint.is-bad{ color:rgba(255,159,10,.95); }
.mic-perm-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  flex:0 1 auto;
}
.mic-perm-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--text, #f5f5f7);
  font-size:12.5px;
  font-weight:650;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, transform .1s ease;
}
.mic-perm-btn:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18);
}
.mic-perm-btn:active{ transform:scale(.98); }
.mic-perm-btn:focus-visible{
  outline:2px solid var(--accent, #0a84ff);
  outline-offset:2px;
}
.mic-perm-btn-primary{
  border-color:transparent;
  background:var(--accent, #0a84ff);
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 6px 16px rgba(10,132,255,.28);
}
.mic-perm-btn-primary:hover{
  filter:brightness(1.06);
  background:var(--accent, #0a84ff);
  border-color:transparent;
}
.mic-perm-btn-icon{
  color:var(--text2, #aeaeb2);
}
/* State-tinted card */
.mic-perm-bar[data-state="granted"]{
  border-color:rgba(50,215,75,.22);
  background:linear-gradient(180deg, rgba(50,215,75,.1), rgba(50,215,75,.03));
}
.mic-perm-bar[data-state="granted"] .mic-perm-icon{
  background:rgba(50,215,75,.16);
  color:#32d74b;
}
.mic-perm-bar[data-state="needed"]{
  border-color:rgba(255,159,10,.25);
  background:linear-gradient(180deg, rgba(255,159,10,.1), rgba(255,159,10,.03));
}
.mic-perm-bar[data-state="needed"] .mic-perm-icon{
  background:rgba(255,159,10,.16);
  color:#ff9f0a;
}
html[data-theme="light"] .mic-perm-bar{
  border-color:rgba(60,60,67,.12);
  background:linear-gradient(180deg, #fff, #f7f7fa);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
html[data-theme="light"] .mic-perm-title{ color:#1c1c1e; }
html[data-theme="light"] .mic-perm-hint{ color:#636366; }
html[data-theme="light"] .mic-perm-btn{
  background:#fff;
  border-color:rgba(60,60,67,.16);
  color:#1c1c1e;
}
html[data-theme="light"] .mic-perm-btn-primary{
  background:var(--accent, #0a84ff);
  border-color:transparent;
  color:#fff;
}
html[data-theme="light"] .mic-perm-status{
  background:rgba(120,120,128,.12);
  border-color:rgba(60,60,67,.12);
  color:#636366;
}
html[data-theme="light"] .mic-perm-icon{
  background:rgba(120,120,128,.12);
  color:#636366;
}
@media (max-width:560px){
  .mic-perm-actions{ width:100%; }
  .mic-perm-btn{ flex:1 1 auto; }
  .mic-perm-btn-icon{ flex:0 0 auto; }
}

/* ══ Battery bar ════════════════════════════════════════════════════════════ */
.batt-cell{display:flex;align-items:center;gap:7px}
.batt-bar{width:52px;height:8px;background:var(--s4);border-radius:4px;overflow:hidden}
.batt-fill{height:100%;border-radius:4px;transition:width .3s}

/* ══ Permission / Setup guide ══════════════════════════════════════════════ */
.perm-guide{
  display:flex;flex-direction:column;gap:8px;
  padding:16px;background:var(--accent-light);
  border:1px solid rgba(196,37,26,.2);border-radius:12px;
}
.perm-step{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--s2);border:1px solid var(--border);border-radius:9px;
  padding:11px 14px;
}
.perm-step-num{
  width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.perm-step.done .perm-step-num{background:var(--green)}
.perm-step-body{flex:1}
.perm-step-title{font-size:13px;font-weight:600;margin-bottom:2px}
.perm-step-desc{font-size:12px;color:var(--text2);line-height:1.5}
.perm-step-action{margin-top:8px}

/* ══ Permissions Tab ════════════════════════════════════════════════════════ */
.perm-row{
  display:flex;align-items:center;gap:14px;
  background:var(--s2);border:1px solid var(--border);border-radius:12px;
  padding:13px 16px;transition:border-color .13s;
}
.perm-row:hover{border-color:var(--border2)}
.perm-row.granted{border-color:rgba(34,197,94,.25);background:rgba(34,197,94,.04)}
.perm-row.denied {border-color:rgba(244,63,94,.2);background:rgba(244,63,94,.03)}
.perm-icon{font-size:20px;width:32px;text-align:center;flex-shrink:0}
.perm-info{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.perm-name{font-size:14px;font-weight:600;color:var(--text)}
.perm-desc{font-size:12px;color:var(--text3);line-height:1.4}
.perm-status{
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;
  border:1px solid;white-space:nowrap;flex-shrink:0;
}
.perm-status.granted{border-color:rgba(34,197,94,.4);color:var(--green);background:rgba(34,197,94,.09)}
.perm-status.denied {border-color:rgba(244,63,94,.4);color:var(--red);background:rgba(244,63,94,.09)}
.perm-status.unknown{border-color:var(--border);color:var(--text3);background:var(--s3)}

/* ══ Language picker ════════════════════════════════════════════════════════ */
.lang-picker{display:flex;gap:4px;align-items:center}
.lang-btn{
  background:var(--s2);border:1px solid var(--border);
  color:var(--text3);font-size:11px;font-weight:600;
  padding:3px 8px;border-radius:6px;cursor:pointer;
  transition:background .13s,color .13s,border-color .13s;white-space:nowrap;
}
.lang-btn:hover{background:var(--s3);color:var(--text)}
.lang-btn.active{background:var(--accent,#6366f1);border-color:var(--accent,#6366f1);color:#fff}

/* ══ Quick-action buttons on cards/list/table ════════════════════════════ */
.qa-bar{display:flex;gap:4px;align-items:center;flex-shrink:0}
.qa-btn{
  font-size:11px;font-weight:600;padding:3px 7px;border-radius:6px;cursor:pointer;
  border:1px solid var(--border);background:var(--s2);color:var(--text2);
  transition:background .12s,color .12s;white-space:nowrap;line-height:1.4;
}
.qa-btn:hover{background:var(--s3);color:var(--text)}
.qa-btn.go{border-color:rgba(34,197,94,.4);color:var(--green);background:rgba(34,197,94,.07)}
.qa-btn.go:hover{background:rgba(34,197,94,.16)}
.qa-btn.warn{border-color:rgba(244,163,63,.4);color:#f59e0b;background:rgba(244,163,63,.07)}
.qa-btn.warn:hover{background:rgba(244,163,63,.16)}
.qa-btn.more{font-size:14px;padding:2px 6px;letter-spacing:.05em}

/* ══ Floating ⋮ command dropdown ════════════════════════════════════════ */
.dev-cmd-menu{
  position:fixed;z-index:9000;
  min-width:210px;
  background:var(--s2);border:1px solid var(--border2);border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.35);
  padding:6px 0;
  animation:menuPop .12s ease;
  max-height:calc(100vh - 24px);
  overflow-y:auto;
  scrollbar-width:none;
}
@keyframes menuPop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.dcm-header{
  padding:7px 14px 5px;font-size:11px;font-weight:700;
  color:var(--text3);text-transform:uppercase;letter-spacing:.06em;
}
.dcm-sep{height:1px;background:var(--border);margin:4px 0}
.dcm-item{
  display:block;width:100%;text-align:left;
  padding:8px 14px;font-size:13px;font-weight:500;
  color:var(--text);background:transparent;border:none;cursor:pointer;
  transition:background .1s;
}
.dcm-item:hover{background:var(--s3)}

/* ══ Device control modal ════════════════════════════════════════════════ */
.dmodal-backdrop{
  position:fixed;inset:0;z-index:8000;
  background:rgba(0,0,0,.65);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .15s ease;
}
.dmodal-backdrop.hidden{display:none}
.dmodal{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:20px;
  backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:0 24px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12);
  width:min(960px,96vw);max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden;
  animation:modalSlide .18s ease;
}
@keyframes modalSlide{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

.dmodal-hdr{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--border);
  flex-shrink:0;flex-wrap:wrap;
}
.dmodal-hdr-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.dmodal-avatar{font-size:24px;flex-shrink:0}
.dmodal-name{font-size:16px;font-weight:700;color:var(--text)}
.dmodal-sub{font-size:11px;color:var(--text3);margin-top:1px}
.dmodal-chips{display:flex;gap:6px;flex-wrap:wrap}
.dmodal-hdr-right{display:flex;gap:6px;flex-wrap:wrap}

.dmodal-body{
  display:flex;gap:0;flex:1;overflow:hidden;min-height:0;
}
.dmodal-screen-col{
  flex:0 0 340px;display:flex;flex-direction:column;
  border-right:1px solid var(--border);padding:14px;gap:10px;
  overflow-y:auto;
}
.dmodal-stream-bar{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.dmodal-screen-wrap{
  position:relative;background:var(--s2);border-radius:10px;
  aspect-ratio:9/16;overflow:hidden;border:1px solid var(--border);
  flex-shrink:0;
}
/* Reader pane overrides — scrollable, no fixed ratio */
#dmodalPaneReader{
  aspect-ratio:unset;overflow-y:auto;flex-shrink:1;
  min-height:160px;max-height:360px;
}
.dmodal-img{width:100%;height:100%;object-fit:contain;display:block}
.dmodal-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.dmodal-kl-hdr{font-size:11px;font-weight:700;color:var(--text3);letter-spacing:.06em;padding-left:2px}
.dmodal-kl-feed{
  background:var(--s2);border:1px solid var(--border);border-radius:8px;
  padding:8px 10px;font-family:monospace;font-size:11px;color:var(--text2);
  height:100px;overflow-y:auto;line-height:1.6;
  flex-shrink:0;
}

.dmodal-ctrl-col{
  flex:1;overflow-y:auto;padding:14px 16px;
  display:flex;flex-direction:column;gap:12px;
}
.dmodal-ctrl-group{display:flex;flex-direction:column;gap:6px}
.dmodal-ctrl-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.dmodal-btn-row{display:flex;gap:6px;flex-wrap:wrap}
.dmodal-btn{
  font-size:12px;font-weight:600;padding:6px 11px;border-radius:8px;cursor:pointer;
  border:1px solid var(--border);background:var(--s2);color:var(--text2);
  transition:background .12s,color .12s;white-space:nowrap;
}
.dmodal-btn:hover{background:var(--s3);color:var(--text)}
.dmodal-btn.go{border-color:rgba(34,197,94,.4);color:var(--green);background:rgba(34,197,94,.07)}
.dmodal-btn.go:hover{background:rgba(34,197,94,.16)}
.dmodal-btn.warn{border-color:rgba(244,163,63,.4);color:#f59e0b;background:rgba(244,163,63,.07)}
.dmodal-btn.warn:hover{background:rgba(244,163,63,.16)}
.qa-btn.accent{border-color:rgba(99,102,241,.5);color:var(--accent);background:rgba(99,102,241,.08)}
.qa-btn.accent:hover{background:rgba(99,102,241,.18)}

/* ══ Modal view tabs (Video / Skeleton / Reader) ════════════════════════ */
.dmodal-view-tabs{display:flex;gap:4px;flex-shrink:0;margin-bottom:2px}
.dmodal-vtab{
  flex:1;padding:5px 8px;font-size:11px;font-weight:600;border-radius:7px;cursor:pointer;
  border:1px solid var(--border);background:var(--s2);color:var(--text3);
  transition:background .12s,color .12s,border-color .12s;
}
.dmodal-vtab:hover{background:var(--s3);color:var(--text)}
.dmodal-vtab.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ══ Floating note popup ════════════════════════════════════════════════ */
.note-popup{
  position:fixed;z-index:9100;
  background:var(--s2);border:1px solid var(--border2);border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  padding:12px;width:260px;
  display:flex;flex-direction:column;gap:8px;
  animation:menuPop .12s ease;
}
.note-popup.hidden{display:none}
.note-popup-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.note-popup-ta{
  width:100%;box-sizing:border-box;resize:vertical;
  background:var(--s3);border:1px solid var(--border);border-radius:8px;
  color:var(--text);font-size:12px;padding:7px 9px;font-family:inherit;
  outline:none;min-height:60px;
}
.note-popup-ta:focus{border-color:var(--accent)}
.note-popup-row{display:flex;gap:6px}

/* ══ Modal cred list ════════════════════════════════════════════════════ */
.dmodal-cred-row{
  display:flex;align-items:center;gap:6px;
  padding:4px 6px;border-bottom:1px solid var(--border);font-size:11px;
}
.dmodal-cred-tag{
  font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;
  background:rgba(99,102,241,.15);color:var(--accent);border:1px solid rgba(99,102,241,.3);
  white-space:nowrap;flex-shrink:0;
}
.dmodal-cred-val{flex:1;font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.dmodal-cred-fill{font-size:10px;padding:2px 7px;border-radius:6px;cursor:pointer;
  border:1px solid rgba(34,197,94,.4);background:rgba(34,197,94,.07);color:var(--green);white-space:nowrap;flex-shrink:0}
.dmodal-cred-fill:hover{background:rgba(34,197,94,.16)}
.active-tab-btn{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.4);color:var(--green)}

/* ════════════════════════════════════════════════════════════════════════════
   macOS / iOS Fluent Button System  — global override
   ════════════════════════════════════════════════════════════════════════════ */

/* ── CSS custom properties for PHANTOM iOS palette ── */
:root {
  --ios-blue:    #0071e3;
  --ios-green:   #30d158;
  --ios-red:     #ff453a;
  --ios-orange:  #ff9f0a;
  --ios-indigo:  #0071e3;
  --ios-gray:    rgba(255,255,255,.12);
  --ios-gray2:   rgba(255,255,255,.20);
  --ios-fill:    rgba(255,255,255,.07);
  --ios-fill2:   rgba(255,255,255,.12);
  --ios-radius:  10px;
  --ios-radius-sm: 8px;
  --ios-radius-pill: 20px;
  --ios-trans:   all .15s cubic-bezier(.25,.46,.45,.94);
  --ios-shadow:  0 2px 8px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.3);
  --ios-shadow-sm: 0 1px 3px rgba(0,0,0,.35);
}

/* ── Base button reset for all button/anchor-buttons ── */
.sm-btn, .scr-btn, .qa-btn, .dmodal-btn, .bulk-btn, .dcm-item,
.topnav-btn, .view-mode-btn, .lang-btn, .tb-back, .ghost-btn,
#loginBtn, .bulk-clear, .dmodal-vtab, .note-popup-row button,
.dmodal-cred-fill {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', sans-serif;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: var(--ios-trans);
}

/* ════════════════════════════════════════════════════════════════════════════
   Toolbar small buttons  (.sm-btn)
   ════════════════════════════════════════════════════════════════════════════ */
.sm-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent3);
  background: rgba(0,113,227,.10);
  border: 1px solid rgba(0,113,227,.22);
  border-radius: var(--ios-radius-pill);
  box-shadow: var(--ios-shadow-sm);
  white-space: nowrap;
  letter-spacing: -.01em;
}
.sm-btn:hover  { background: rgba(0,113,227,.18); border-color: rgba(0,113,227,.35); box-shadow: var(--ios-shadow); }
.sm-btn:active { transform: scale(.96); background: rgba(0,113,227,.25); }
.sm-btn.ghost  {
  background: var(--ios-fill);
  border-color: var(--ios-gray);
  color: var(--text2);
}
.sm-btn.ghost:hover { background: var(--ios-fill2); color: var(--text); }
.sm-btn.accent {
  background: linear-gradient(135deg,#0071e3,#2997ff);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,113,227,.50);
}
.sm-btn.accent:hover { box-shadow: 0 6px 20px rgba(0,113,227,.60); filter: brightness(1.08); }
.sm-btn.red, .sm-btn.danger {
  background: rgba(255,59,48,.08);
  border-color: rgba(255,59,48,.25);
  color: var(--ios-red);
}
.sm-btn.red:hover, .sm-btn.danger:hover { background: rgba(255,59,48,.14); }
.sm-btn:disabled { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ════════════════════════════════════════════════════════════════════════════
   Screen / device control buttons  (.scr-btn)
   ════════════════════════════════════════════════════════════════════════════ */
.scr-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: var(--ios-radius);
  background: var(--ios-fill);
  border: 1px solid var(--ios-gray);
  color: var(--text2);
  box-shadow: var(--ios-shadow-sm);
  white-space: nowrap;
}
.scr-btn:hover  { background: var(--ios-fill2); color: var(--text); box-shadow: var(--ios-shadow); }
.scr-btn:active { transform: scale(.95); }
.scr-btn.go   {
  background: rgba(52,199,89,.1);
  border-color: rgba(52,199,89,.28);
  color: var(--ios-green);
}
.scr-btn.go:hover   { background: rgba(52,199,89,.18); box-shadow: 0 2px 8px rgba(52,199,89,.2); }
.scr-btn.stop {
  background: rgba(255,59,48,.08);
  border-color: rgba(255,59,48,.25);
  color: var(--ios-red);
}
.scr-btn.stop:hover { background: rgba(255,59,48,.15); }
.scr-btn.teal {
  background: rgba(6,182,212,.07);
  border-color: rgba(6,182,212,.28);
  color: var(--teal);
}
.scr-btn.teal:hover { background: rgba(6,182,212,.14); }

/* ════════════════════════════════════════════════════════════════════════════
   Quick-action bar buttons  (.qa-btn) — compact pill
   ════════════════════════════════════════════════════════════════════════════ */
.qa-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--ios-radius-pill);
  background: var(--ios-fill);
  border: 1px solid var(--ios-gray);
  color: var(--text2);
  white-space: nowrap;
  box-shadow: var(--ios-shadow-sm);
  letter-spacing: -.01em;
}
.qa-btn:hover  { background: var(--ios-fill2); color: var(--text); }
.qa-btn:active { transform: scale(.93); }
.qa-btn.go {
  background: rgba(52,199,89,.1);
  border-color: rgba(52,199,89,.3);
  color: var(--ios-green);
}
.qa-btn.go:hover { background: rgba(52,199,89,.18); }
.qa-btn.warn {
  background: rgba(255,149,0,.08);
  border-color: rgba(255,149,0,.28);
  color: var(--ios-orange);
}
.qa-btn.warn:hover { background: rgba(255,149,0,.16); }
.qa-btn.accent {
  background: rgba(0,122,255,.1);
  border-color: rgba(0,122,255,.28);
  color: var(--ios-blue);
}
.qa-btn.accent:hover { background: rgba(0,122,255,.18); }
.qa-btn.more {
  font-size: 15px;
  padding: 2px 7px;
  letter-spacing: .05em;
  background: var(--ios-fill);
}

/* ════════════════════════════════════════════════════════════════════════════
   Modal control buttons  (.dmodal-btn)
   ════════════════════════════════════════════════════════════════════════════ */
.dmodal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  gap: 4px;
  padding: 7px 10px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: var(--ios-radius);
  background: var(--ios-fill);
  border: 1px solid var(--ios-gray);
  color: var(--text2);
  box-shadow: var(--ios-shadow-sm);
  white-space: nowrap;
}
.dmodal-btn:hover  { background: var(--ios-fill2); color: var(--text); box-shadow: var(--ios-shadow); }
.dmodal-btn:active { transform: scale(.95); }
.dmodal-btn.go {
  background: rgba(52,199,89,.1);
  border-color: rgba(52,199,89,.3);
  color: var(--ios-green);
}
.dmodal-btn.go:hover { background: rgba(52,199,89,.18); box-shadow: 0 2px 8px rgba(52,199,89,.2); }
.dmodal-btn.warn {
  background: rgba(255,149,0,.08);
  border-color: rgba(255,149,0,.3);
  color: var(--ios-orange);
}
.dmodal-btn.warn:hover { background: rgba(255,149,0,.16); }

/* ════════════════════════════════════════════════════════════════════════════
   Bulk action bar  (.bulk-btn, .bulk-clear)
   ════════════════════════════════════════════════════════════════════════════ */
.bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--ios-radius-pill);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  box-shadow: var(--ios-shadow-sm);
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.bulk-btn:hover  { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35); }
.bulk-btn:active { transform: scale(.95); }
.bulk-clear {
  margin-left: auto;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--ios-radius-pill);
  background: rgba(255,59,48,.18);
  border: 1px solid rgba(255,59,48,.35);
  color: #ff8680;
  backdrop-filter: blur(6px);
}
.bulk-clear:hover { background: rgba(255,59,48,.3); color: #fff; }
.bulk-clear:active { transform: scale(.95); }

/* ════════════════════════════════════════════════════════════════════════════
   Dropdown context menu items  (.dcm-item)
   ════════════════════════════════════════════════════════════════════════════ */
.dcm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: 0;
  transition: background .1s ease;
}
.dcm-item:hover  { background: rgba(0,122,255,.1); color: var(--ios-blue); }
.dcm-item:active { background: rgba(0,122,255,.16); }

/* ════════════════════════════════════════════════════════════════════════════
   Top nav tabs  (.topnav-btn)
   ════════════════════════════════════════════════════════════════════════════ */
.topnav-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--ios-radius-pill);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text3);
  letter-spacing: -.01em;
}
.topnav-btn:hover { background: rgba(255,255,255,.08); color: var(--text2); border-color: rgba(255,255,255,.12); }
.topnav-btn.active {
  background: rgba(0,113,227,.18);
  border-color: rgba(0,113,227,.35);
  color: var(--accent3);
  box-shadow: 0 2px 10px rgba(0,113,227,.25);
}
.topnav-btn:active { transform: scale(.96); }

/* ════════════════════════════════════════════════════════════════════════════
   View mode toggle  (.view-mode-btn)
   ════════════════════════════════════════════════════════════════════════════ */
.view-mode-group {
  display: flex;
  gap: 2px;
  background: var(--ios-fill);
  border: 1px solid var(--ios-gray);
  border-radius: var(--ios-radius);
  padding: 2px;
}
.view-mode-btn {
  padding: 4px 8px;
  font-size: 13px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text3);
}
.view-mode-btn:hover { background: var(--ios-fill2); color: var(--text); }
.view-mode-btn.active {
  background: var(--s1);
  color: var(--ios-blue);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.view-mode-btn:active { transform: scale(.93); }

/* ════════════════════════════════════════════════════════════════════════════
   Language buttons  (.lang-btn)
   ════════════════════════════════════════════════════════════════════════════ */
.lang-btn {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--ios-radius-pill);
  background: var(--ios-fill);
  border: 1px solid var(--ios-gray);
  color: var(--text3);
}
.lang-btn:hover { background: var(--ios-fill2); color: var(--text); }
.lang-btn.active {
  background: var(--ios-blue);
  border-color: var(--ios-blue);
  color: #fff;
  box-shadow: 0 1px 6px rgba(0,122,255,.3);
}

/* ════════════════════════════════════════════════════════════════════════════
   Back button & ghost button
   ════════════════════════════════════════════════════════════════════════════ */
.tb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--ios-radius-pill);
  background: var(--ios-fill);
  border: 1px solid var(--ios-gray);
  color: var(--ios-blue);
  box-shadow: var(--ios-shadow-sm);
}
.tb-back:hover  { background: var(--ios-fill2); box-shadow: var(--ios-shadow); }
.tb-back:active { transform: scale(.95); }
.ghost-btn {
  background: transparent;
  border: none;
  color: var(--text3);
  padding: 5px 8px;
  border-radius: var(--ios-radius);
}
.ghost-btn:hover { background: var(--ios-fill); color: var(--text); }
.ghost-btn:active { transform: scale(.93); }

/* ════════════════════════════════════════════════════════════════════════════
   Login button
   ════════════════════════════════════════════════════════════════════════════ */
#loginBtn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  height: 50px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 14px;
  background: linear-gradient(135deg,#0071e3,#2997ff);
  border: none;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0,113,227,.55);
  letter-spacing: -.01em;
  cursor: pointer;
}
#loginBtn svg { flex-shrink: 0; }
#loginBtn:hover  { box-shadow: 0 8px 28px rgba(0,113,227,.65); filter: brightness(1.08); }
#loginBtn:active { transform: scale(.97); }

/* ════════════════════════════════════════════════════════════════════════════
   Modal view tabs  (.dmodal-vtab)
   ════════════════════════════════════════════════════════════════════════════ */
.dmodal-vtab {
  flex: 1;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: var(--ios-radius);
  background: var(--ios-fill);
  border: 1px solid var(--ios-gray);
  color: var(--text3);
}
.dmodal-vtab:hover { background: var(--ios-fill2); color: var(--text); }
.dmodal-vtab.active {
  background: var(--ios-blue);
  border-color: var(--ios-blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,122,255,.3);
}
.dmodal-vtab:active { transform: scale(.95); }

/* ════════════════════════════════════════════════════════════════════════════
   Credential fill button  (.dmodal-cred-fill)
   ════════════════════════════════════════════════════════════════════════════ */
.dmodal-cred-fill {
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 500;
  border-radius: var(--ios-radius-pill);
  background: rgba(52,199,89,.1);
  border: 1px solid rgba(52,199,89,.3);
  color: var(--ios-green);
}
.dmodal-cred-fill:hover { background: rgba(52,199,89,.18); }
.dmodal-cred-fill:active { transform: scale(.93); }

/* ════════════════════════════════════════════════════════════════════════════
   Exit / logout button
   ════════════════════════════════════════════════════════════════════════════ */
.topnav-exit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: var(--ios-radius-pill) !important;
  background: rgba(255,59,48,.08) !important;
  border: 1px solid rgba(255,59,48,.22) !important;
  color: var(--ios-red) !important;
}
.topnav-exit svg { flex-shrink: 0; color: var(--ios-red); }
.topnav-exit:hover { background: rgba(255,59,48,.15) !important; }
.topnav-exit:active { transform: scale(.95) !important; }

/* ══ Tag filter bar ═════════════════════════════════════════════════════ */
.tag-filter-bar{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;background:var(--s2);
  border-bottom:1px solid var(--border);flex-wrap:wrap;
}
.tag-filter-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.tag-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;font-size:11px;font-weight:600;
  border-radius:var(--ios-radius-pill);cursor:pointer;
  background:var(--ios-fill);border:1px solid var(--ios-gray);
  color:var(--text3);transition:var(--ios-trans);
}
.tag-chip:hover{background:var(--ios-fill2);color:var(--text)}
.tag-chip.active{background:var(--ios-indigo);border-color:var(--ios-indigo);color:#fff}
.tag-chip-count{opacity:.6;font-size:10px}

/* ══ Device tag badges on cards/rows ═══════════════════════════════════ */
.dev-tag{
  display:inline-flex;align-items:center;
  padding:2px 7px;font-size:10px;font-weight:600;
  border-radius:var(--ios-radius-pill);
  background:rgba(88,86,214,.15);border:1px solid rgba(88,86,214,.3);
  color:var(--ios-indigo);
}

/* ══ Call log list ══════════════════════════════════════════════════════ */
.call-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-bottom:1px solid var(--border);
  font-size:12px;cursor:default;transition:background .1s;
}
.call-row:hover{background:var(--s2)}
.call-icon{font-size:18px;flex-shrink:0;width:24px;text-align:center}
.call-info{flex:1;min-width:0}
.call-number{font-weight:600;color:var(--text);font-size:13px}
.call-name{font-size:11px;color:var(--text3);margin-top:1px}
.call-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.call-date{font-size:11px;color:var(--text3)}
.call-dur{font-size:11px;color:var(--text2)}
.call-type-in  {color:var(--ios-green)}
.call-type-out {color:var(--ios-blue)}
.call-type-missed,.call-type-rejected{color:var(--ios-red)}
.call-type-blocked{color:var(--text3)}

/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS TAB — full-height, scrollable content, large hit targets
   ═══════════════════════════════════════════════════════════════════════════ */
.settings-view:not(.hidden) {
  flex:1 1 auto; display:flex; flex-direction:column;
  min-height:0; padding:12px 16px 16px; gap:0; box-sizing:border-box;
  position:relative; z-index:20; pointer-events:auto;
}
#viewSettings.hidden, .settings-view.hidden { display:none !important; }
.settings-layout {
  display:flex; gap:0; width:100%; max-width:1100px; margin:0 auto;
  flex:1 1 auto; min-height:0;
  background:rgba(255,255,255,.06); border-radius:20px; overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(40px);
  pointer-events:auto;
}
.settings-nav {
  width:210px; flex-shrink:0; background:rgba(255,255,255,.04);
  padding:12px 8px; display:flex; flex-direction:column; gap:3px;
  border-right:1px solid rgba(255,255,255,.08);
  overflow-y:auto; min-height:0; pointer-events:auto;
}
.snav-btn {
  display:flex; align-items:center; gap:8px; padding:11px 12px; border-radius:10px;
  border:none; background:transparent; color:var(--text2); font-size:13px; font-weight:500;
  text-align:left; cursor:pointer; transition:background .15s,color .15s; width:100%;
  min-height:44px; pointer-events:auto; position:relative; z-index:2;
}
.snav-btn:hover { background:rgba(128,128,128,.12); color:var(--text1); }
.snav-btn.active { background:rgba(0,113,227,.20); color:var(--accent3); border:1px solid rgba(0,113,227,.30); }
.settings-content {
  flex:1; display:flex; flex-direction:column; min-width:0; min-height:0;
  position:relative; overflow-y:auto; overflow-x:hidden; pointer-events:auto;
  -webkit-overflow-scrolling:touch;
}
.s-panel {
  display:none; flex-direction:column; gap:14px; padding:20px 22px 48px;
  flex:0 0 auto; overflow:visible; /* parent .settings-content scrolls */
  pointer-events:auto; width:100%; box-sizing:border-box;
}
.s-panel.active { display:flex; }
.s-panel.hidden { display:none !important; }
.s-panel-title { font-size:20px; font-weight:700; color:var(--text1); margin-bottom:4px; }
.s-group {
  background:var(--bg); border-radius:14px; padding:4px 0 6px;
  display:flex; flex-direction:column; gap:0; overflow:visible;
}
.s-group-title {
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text3); margin:12px 16px 4px;
}
.s-row {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px; border-top:1px solid var(--border); min-height:48px;
  pointer-events:auto; position:relative; z-index:1;
}
.s-row:first-of-type,.s-group-title + .s-row { border-top:none; }
.s-toggle-row { padding:12px 16px; min-height:52px; }
.s-row-info { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.s-label { font-size:14px; font-weight:500; color:var(--text1); }
.s-desc { font-size:12px; color:var(--text3); line-height:1.35; }
/* iOS toggle — full-size hit target (input covers whole switch) */
.s-toggle { position:relative; display:inline-block; width:50px; height:30px; flex-shrink:0; cursor:pointer; }
.s-toggle input {
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:pointer; z-index:2;
}
.s-toggle-track {
  position:absolute; inset:0; border-radius:15px; background:#555; transition:background .2s;
  pointer-events:none;
}
.s-toggle-track::after {
  content:''; position:absolute; left:3px; top:3px; width:24px; height:24px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3);
  transition:transform .2s cubic-bezier(.25,.46,.45,.94); pointer-events:none;
}
.s-toggle input:checked + .s-toggle-track { background:var(--accent); }
.s-toggle input:checked + .s-toggle-track::after { transform:translateX(20px); }
.ui-scale-picker, .font-size-picker {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end;
}
.ui-scale-btn, .font-size-btn {
  min-width:44px; min-height:36px; padding:6px 10px; pointer-events:auto; cursor:pointer;
}
/* Theme picker */
.theme-picker { display:flex; gap:6px; }
.theme-btn { padding:7px 14px; border-radius:20px; border:1.5px solid var(--border); background:var(--s2); color:var(--text1); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; }
.theme-btn:hover { border-color:var(--accent); color:var(--accent); }
.theme-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
/* Accent color swatches */
.accent-picker { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.accent-swatch { width:28px; height:28px; border-radius:50%; border:2.5px solid transparent; cursor:pointer; transition:transform .15s,border-color .15s; flex-shrink:0; }
.accent-swatch:hover { transform:scale(1.15); }
.accent-swatch.active { border-color:var(--text1); transform:scale(1.1); }
.accent-custom { width:28px; height:28px; border-radius:50%; border:2px solid var(--border); cursor:pointer; padding:0; background:none; }
/* Permission toggle list */
.perm-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--border); }
.perm-row:first-child { border-top:none; }
.perm-name { font-size:13px; font-weight:500; color:var(--text1); }
.perm-key { font-size:11px; color:var(--text3); font-family:monospace; }
/* Save bar */
.settings-save-bar { display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:12px 20px; border-top:1px solid var(--border); background:var(--s1); }
/* Small buttons */
.sm-btn { padding:7px 14px; border-radius:20px; border:none; font-size:13px; font-weight:600; cursor:pointer; transition:all .15s cubic-bezier(.25,.46,.45,.94); }
.sm-btn:active { transform:scale(0.95); }
.sm-btn.accent { background:var(--accent); color:#fff; }
.sm-btn.accent:hover { filter:brightness(1.1); }
.sm-btn.ghost { background:transparent; color:var(--accent); border:1.5px solid var(--accent); }
.sm-btn.ghost:hover { background:var(--accent); color:#fff; }
.sm-btn.danger { background:transparent; color:var(--ios-red,#FF3B30); border:1.5px solid var(--ios-red,#FF3B30); }
.sm-btn.danger:hover { background:var(--ios-red,#FF3B30); color:#fff; }

/* ── Dark theme (PHANTOM Purple) ────────────────────────────────────────── */
html[data-theme="dark"] {
  --bg:    #07070e;
  --s1:    #0f0f1a;
  --s2:    #161623;
  --s3:    #1e1e30;
  --s4:    #252540;
  --s5:    #2e2e50;
  --s6:    #383860;
  --border:  rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.13);
  --border3: rgba(255,255,255,.22);
  --text:    rgba(255,255,255,.96);
  --text1:   rgba(255,255,255,.96);
  --text2:   rgba(255,255,255,.60);
  --text3:   rgba(255,255,255,.32);
  --shadow-xs: 0 1px 3px rgba(0,0,0,.50);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.55);
  --shadow:    0 4px 16px rgba(0,0,0,.55);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.65);
  --shadow-card: 0 1px 4px rgba(0,0,0,.50), 0 0 0 1px rgba(255,255,255,.08);
  --shadow-card-hover: 0 6px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14), 0 0 24px rgba(0,113,227,.12);
  --glass-bg:     rgba(255,255,255,.05);
  --glass-border: rgba(255,255,255,.10);
  --card-bg: #0f0f1a;
  --accent:       #0071e3;
  --accent2:      #2997ff;
  --accent3:      #64d2ff;
  --accent-light: rgba(0,113,227,.12);
  --accent-glow:  rgba(0,113,227,.50);
}
html[data-theme="light"] {
  --bg:    #f2f2f7;
  --s1:    #ffffff;
  --s2:    #f2f2f7;
  --s3:    #e8e8ed;
  --s4:    #dcdce2;
  --s5:    #d0d0d8;
  --s6:    #c4c4cc;
  --border:  rgba(0,0,0,.09);
  --border2: rgba(0,0,0,.15);
  --border3: rgba(0,0,0,.24);
  --text:    #1c1c1e;
  --text1:   #1c1c1e;
  --text2:   #636366;
  --text3:   #aeaeb2;
  --glass-bg:     rgba(255,255,255,.85);
  --glass-border: rgba(0,0,0,.10);
  --card-bg: #ffffff;
  --accent:       #2997ff;
  --accent2:      #6d28d9;
  --accent3:      #8b5cf6;
  --accent-light: rgba(0,113,227,.10);
  --accent-glow:  rgba(0,113,227,.30);
  --shadow-xs:   0 1px 3px rgba(0,0,0,.10);
  --shadow-sm:   0 2px 8px rgba(0,0,0,.10);
  --shadow:      0 4px 16px rgba(0,0,0,.12);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.15);
  --shadow-card: 0 1px 4px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.06);
  --shadow-card-hover: 0 6px 24px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.10);
  --ios-fill:    rgba(118,118,128,.12);
  --ios-fill2:   rgba(118,118,128,.2);
  --ios-gray:    rgba(120,120,128,.18);
  --ios-gray2:   rgba(120,120,128,.28);
  --ios-green:   #34c759;
  --ios-red:     #ff3b30;
  --ios-orange:  #ff9500;
  --ios-blue:    #2997ff;
  --ios-shadow:  0 2px 8px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.10);
  --ios-shadow-sm: 0 1px 3px rgba(0,0,0,.12);
}

/* ── Hide/Show device styles ─────────────────────────────────────────── */
.bulk-btn.danger { background:rgba(255,59,48,.15); color:#FF3B30; border-color:rgba(255,59,48,.3); }
.bulk-btn.danger:hover { background:#FF3B30; color:#fff; }
.dev-card.hidden-device,.dev-list-row.hidden-device { opacity:.45; filter:grayscale(.6); border-style:dashed; }
.hidden-device-badge { font-size:10px; padding:2px 6px; border-radius:8px; background:rgba(255,59,48,.15); color:#FF3B30; font-weight:600; }

/* ══ APK Build Tab ══════════════════════════════════════════════════════════ */
#dtab-apkbuild{overflow-y:auto}
.apkv-root{overflow-y:auto;height:100%}
.apkb-wrap{
  max-width:660px;margin:0 auto;padding:28px 24px 48px;
  display:flex;flex-direction:column;gap:22px;
}
.apkb-header{
  display:flex;align-items:center;gap:10px;
  font-size:18px;font-weight:700;color:var(--text);
  padding-bottom:2px;
}
.apkb-sub{font-size:12px;font-weight:400;color:var(--text3);margin-left:4px}
.apkb-base-info{
  margin-left:auto;font-size:11px;font-weight:500;color:var(--text3);
  background:var(--s2);border:1px solid var(--border);border-radius:6px;
  padding:4px 10px;white-space:nowrap;
}
.apkb-form{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:16px;
  overflow:hidden;
  backdrop-filter:blur(20px);
  box-shadow:0 4px 24px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.10);
}
.apkb-row{
  display:flex;align-items:center;
  border-bottom:1px solid var(--border);
  min-height:50px;
}
.apkb-row:last-child{border-bottom:none}
.apkb-lbl{
  width:150px;flex-shrink:0;padding:0 16px;
  font-size:12px;font-weight:600;color:var(--text2);
  display:flex;align-items:center;gap:7px;
  border-right:1px solid var(--border);
  align-self:stretch;background:var(--s2);
}
.apkb-lbl i{font-size:13px;color:var(--text3);opacity:.8}
.apkb-input{
  flex:1;border:none;background:transparent;outline:none;
  padding:0 14px;font-size:13px;color:var(--text);font-family:inherit;
  height:50px;
}
.apkb-input:focus{background:rgba(99,102,241,.04)}
.apkb-input::placeholder{color:var(--text3)}
.apkb-input-wrap{flex:1;display:flex;align-items:center}
.apkb-rand{
  width:34px;height:34px;margin-right:8px;flex-shrink:0;
  border:1px solid var(--border2);border-radius:8px;
  background:var(--s2);color:var(--text2);font-size:16px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s,color .15s;
}
.apkb-rand:hover{background:var(--s3);color:var(--accent)}
.apkb-icon-row{align-items:flex-start;min-height:80px;padding:0}
.apkb-icon-area{flex:1;display:flex;align-items:center;gap:14px;padding:14px}
.apkb-icon-preview{
  width:56px;height:56px;border-radius:12px;
  border:2px dashed var(--border2);background:var(--s3);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;overflow:hidden;flex-shrink:0;
  transition:border-color .15s,background .15s;
}
.apkb-icon-preview:hover{border-color:var(--accent);background:var(--s4)}
.apkb-icon-preview img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.apkb-icon-hint{font-size:11px;color:var(--text3);line-height:1.5}
.apkb-actions{display:flex;justify-content:space-between;align-items:center}
.apkb-build-btn{
  display:flex;align-items:center;gap:8px;
  padding:13px 32px;border-radius:14px;
  background:linear-gradient(135deg,#0071e3,#2997ff);color:#fff;font-size:14px;font-weight:600;
  transition:all .15s;cursor:pointer;
  border:none;box-shadow:0 6px 20px rgba(0,113,227,.50);
}
.apkb-build-btn:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,113,227,.60);filter:brightness(1.08)}
.apkb-build-btn:active{transform:translateY(0);box-shadow:none}
.apkb-build-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.apkb-progress{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:16px;
  backdrop-filter:blur(20px);
  padding:16px;display:flex;flex-direction:column;gap:10px;
}
.apkb-progress-bar{
  height:4px;background:var(--s3);border-radius:2px;overflow:hidden;
}
.apkb-progress-fill{
  height:100%;width:0%;background:linear-gradient(90deg,#0071e3,#2997ff);border-radius:2px;
  transition:width .4s;
  box-shadow:0 0 8px rgba(0,113,227,.6);
}
.apkb-progress-fill.indeterminate{
  width:40%;animation:apkb-slide 1.2s linear infinite;
}
@keyframes apkb-slide{
  0%{transform:translateX(-200%)} 100%{transform:translateX(350%)}
}
.apkb-status{font-size:13px;font-weight:600;color:var(--text)}
.apkb-log{
  font-size:11px;font-family:'JetBrains Mono',monospace;color:var(--text2);
  background:var(--s2);border-radius:var(--radius-sm);
  padding:10px;max-height:280px;overflow-y:auto;
  white-space:pre-wrap;word-break:break-all;margin:0;
}
.apkb-log span { display:block; line-height:1.55; }
.apkl-step  { color:var(--accent); font-weight:600; }
.apkl-ok    { color:#4ade80; }
.apkl-done  { color:#22c55e; font-weight:700; }
.apkl-error { color:#f87171; font-weight:700; }
.apkl-warn  { color:#fbbf24; }
.apkl-tool  { color:var(--text3); font-size:10.5px; }
.apkb-download{
  display:flex;align-items:center;gap:8px;
  background:var(--green);color:#fff;
  padding:12px 22px;border-radius:var(--radius);font-size:14px;font-weight:600;
  width:fit-content;transition:background .15s;
}
.apkb-download:hover{background:#15803d;color:#fff}

/* ── APK Build — additional sections ──────────────────────────────────────── */
.apkb-section-lbl{
  font-size:10.5px;font-weight:700;color:var(--text3);text-transform:uppercase;
  letter-spacing:.7px;padding:2px 0;display:flex;align-items:center;gap:8px;
}
.apkb-section-lbl::after{content:'';flex:1;height:1px;background:var(--border)}
/* Permissions table */
.apkb-perms-wrap{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;
}
.apkb-perms-table{width:100%;border-collapse:collapse;font-size:12px}
.apkb-perms-table thead tr{background:var(--s2);border-bottom:1px solid var(--border)}
.apkb-perms-table th{
  padding:9px 12px;font-weight:600;color:var(--text3);
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
}
.apkb-th-num{width:34px;text-align:center}
.apkb-th-cmd{width:130px}
.apkb-th-start{width:120px;text-align:center}
.apkb-th-del{width:36px}
.apkb-perms-table tbody tr{border-bottom:1px solid var(--border)}
.apkb-perms-table tbody tr:last-child{border-bottom:none}
.apkb-perms-table td{padding:8px 12px;vertical-align:middle}
.apkb-perm-num{text-align:center;color:var(--text3);font-size:11px}
.apkb-perm-name{font-weight:500;color:var(--text)}
.apkb-perm-name.removed{color:var(--text3);text-decoration:line-through}
.apkb-cmd-sel{
  width:100%;padding:5px 8px;border-radius:6px;font-size:12px;
  border:1px solid var(--border2);background:var(--s2);color:var(--text);
  cursor:pointer;
}
.apkb-cmd-sel.add{color:var(--green);border-color:rgba(22,163,74,.3);background:rgba(22,163,74,.07)}
.apkb-cmd-sel.remove{color:var(--text3);background:var(--s3)}
.apkb-start-check{width:16px;height:16px;cursor:pointer;accent-color:var(--accent)}
.apkb-perm-start{text-align:center}
.apkb-perm-del{text-align:center}
.apkb-del-btn{
  width:26px;height:26px;border-radius:6px;border:none;background:transparent;
  color:var(--text3);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;margin:auto;
}
.apkb-del-btn:hover{background:rgba(224,53,40,.12);color:var(--red)}
/* Textarea row */
.apkb-ta-row{align-items:flex-start}
.apkb-ta-row .apkb-lbl{padding-top:14px;align-self:flex-start}
.apkb-textarea{
  flex:1;border:none;background:transparent;outline:none;
  padding:12px 14px;font-size:13px;color:var(--text);font-family:inherit;
  resize:vertical;min-height:70px;
}
/* Options checkboxes */
.apkb-options{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;
  background:var(--s1);border:1px solid var(--border);border-radius:12px;
  padding:14px 18px;box-shadow:var(--shadow-card);
}
.apkb-opt{
  display:flex;align-items:center;gap:9px;font-size:13px;color:var(--text);
  cursor:pointer;padding:5px 4px;border-radius:6px;transition:background .1s;
}
.apkb-opt:hover{background:var(--s2)}
.apkb-opt input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;
}

/* ── APK Build top-level view ──────────────────────────────────────────────── */
.apkv-root{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;
  background:var(--bg);min-height:0;
}

/* ── APK Build Log Modal ───────────────────────────────────────────────────── */
.apklm-backdrop{
  position:fixed;inset:0;z-index:2000;
  background:rgba(0,0,0,.75);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.apklm-box{
  width:min(820px,100%);max-height:85vh;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:20px;
  display:flex;flex-direction:column;overflow:hidden;
  backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:0 28px 80px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12);
}
.apklm-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.apklm-title{font-size:15px;font-weight:700;color:var(--text);display:flex;align-items:center}
.apklm-badge{
  font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;
  background:var(--s3);color:var(--text2);
}
.apklm-badge.running{background:rgba(99,102,241,.2);color:var(--accent)}
.apklm-badge.done{background:rgba(74,222,128,.15);color:#4ade80}
.apklm-badge.error{background:rgba(248,113,113,.15);color:#f87171}
.apklm-copy{
  font-size:12px;padding:4px 10px;border-radius:6px;
  background:var(--s3);border:1px solid var(--border);color:var(--text2);cursor:pointer;
}
.apklm-copy:hover{background:var(--s4);color:var(--text)}
.apklm-close{
  width:28px;height:28px;border-radius:50%;border:none;
  background:var(--s3);color:var(--text2);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.apklm-close:hover{background:#f87171;color:#fff}
.apklm-progress-wrap{padding:12px 20px 0;flex-shrink:0}
.apklm-pbar{height:4px;background:var(--s3);border-radius:2px;overflow:hidden}
.apklm-pfill{
  height:100%;background:linear-gradient(90deg,#0071e3,#2997ff);border-radius:2px;
  transition:width .4s ease;width:0;
  box-shadow:0 0 8px rgba(0,113,227,.6);
}
.apklm-pfill.indeterminate{
  width:40%!important;animation:indeterminate 1.4s ease infinite;
}
@keyframes indeterminate{0%{transform:translateX(-200%)}100%{transform:translateX(400%)}}
.apklm-log{
  flex:1;overflow-y:auto;margin:12px 0 0;padding:16px 20px;
  font-size:12px;font-family:'JetBrains Mono',monospace;
  color:var(--text2);white-space:pre-wrap;word-break:break-all;
  background:var(--s1);border-top:1px solid var(--border);
  line-height:1.7;min-height:200px;
}
.apklm-log .apkl-step { color:var(--accent); font-weight:700; font-size:13px; }
.apklm-log .apkl-ok   { color:#4ade80; }
.apklm-log .apkl-done { color:#22c55e; font-weight:700; font-size:13px; }
.apklm-log .apkl-error{ color:#f87171; font-weight:700; }
.apklm-log .apkl-warn { color:#fbbf24; }
.apklm-log .apkl-tool { color:var(--text3); font-size:10.5px; }
.apklm-footer{
  padding:14px 20px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;
}

/* ── My APKs view ──────────────────────────────────────────────────────────── */
/* ── My APKs view wrapper ── */
.myapkv-root{flex:1;overflow-y:auto;background:var(--bg);min-height:0}
.myapkv-wrap{max-width:700px;margin:0 auto;padding:28px 24px 48px;display:flex;flex-direction:column;gap:20px}
.myapkv-header{display:flex;align-items:center;gap:10px}
.myapkv-title{font-size:18px;font-weight:700;color:var(--text)}
.myapkv-sub{font-size:12px;color:var(--text3);margin-left:2px}
.myapkv-refresh{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--s2);color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;
  transition:background .12s,color .12s;
}
.myapkv-refresh:hover{background:var(--s3);color:var(--text)}

/* ── My APKs ── */
.myapk-loading{display:flex;justify-content:center;align-items:center;gap:6px;padding:60px}
.myapk-loading-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.4;animation:myapk-pulse 1.2s ease-in-out infinite}
.myapk-loading-dot:nth-child(2){animation-delay:.2s}
.myapk-loading-dot:nth-child(3){animation-delay:.4s}
@keyframes myapk-pulse{0%,100%{opacity:.2;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.myapk-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:60px 20px;color:var(--text3);font-size:13px;text-align:center;
}
.myapk-card{
  display:flex;align-items:flex-start;gap:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:16px;
  padding:16px 18px;margin-bottom:10px;
  backdrop-filter:blur(20px);
  transition:border-color .15s,box-shadow .15s;
  position:relative;
}
.myapk-card:hover{border-color:rgba(0,113,227,.28);box-shadow:0 4px 20px rgba(0,113,227,.14)}
.myapk-icon-wrap{flex-shrink:0;width:52px;height:52px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--s3)}
.myapk-icon-img{width:100%;height:100%;object-fit:cover;display:block}
.myapk-icon-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--text3)}
.myapk-info{flex:1;min-width:0}
.myapk-name{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.myapk-pkg{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.myapk-meta{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.myapk-chip{font-size:11px;padding:2px 7px;border-radius:4px;background:var(--s3);border:1px solid var(--border);color:var(--text2);font-weight:500;white-space:nowrap}
.myapk-chip-muted{color:var(--text3);background:none;border-color:transparent}
.myapk-perms{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.myapk-perm-chip{font-size:10px;padding:1px 6px;border-radius:3px;background:rgba(0,113,227,.12);border:1px solid rgba(0,113,227,.3);color:#64d2ff;font-weight:500;white-space:nowrap}
.myapk-detail{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:5px}
.myapk-detail-row{display:flex;gap:10px;align-items:baseline}
.myapk-detail-lbl{font-size:11px;color:var(--text3);font-weight:600;white-space:nowrap;min-width:60px}
.myapk-detail-val{font-size:11px;color:var(--text2);word-break:break-all}
.myapk-mono{font-family:'JetBrains Mono',monospace;font-size:10.5px}
.myapk-actions{display:flex;gap:7px;flex-shrink:0;align-items:center;margin-top:2px}
.myapk-info-btn{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:8px;border:1px solid var(--border);background:var(--s2);
  color:var(--text3);cursor:pointer;font-size:14px;transition:all .12s;
}
.myapk-info-btn:hover,.myapk-info-btn.active{background:rgba(99,102,241,.12);color:var(--accent);border-color:rgba(99,102,241,.35)}
.myapk-dl{
  display:flex;align-items:center;gap:6px;padding:7px 13px;
  background:linear-gradient(135deg,#0071e3,#2997ff);color:#fff;border-radius:10px;font-size:12px;font-weight:600;
  text-decoration:none;cursor:pointer;border:none;white-space:nowrap;
  transition:all .15s;
  box-shadow:0 4px 12px rgba(0,113,227,.40);
}
.myapk-dl:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,113,227,.55);filter:brightness(1.08)}
.myapk-del{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  background:var(--s2);border:1px solid var(--border);border-radius:8px;
  font-size:14px;color:var(--text3);cursor:pointer;transition:all .12s;
}
.myapk-del:hover{background:rgba(248,113,113,.12);color:#f87171;border-color:rgba(248,113,113,.4)}

/* ── QR Install button ───────────────────────────────────────────────────── */
.myapk-qr-btn{
  display:flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:8px;border:1px solid var(--border);background:var(--s2);
  color:var(--text3);cursor:pointer;font-size:14px;transition:all .12s;
}
.myapk-qr-btn:hover{background:rgba(16,185,129,.12);color:#10b981;border-color:rgba(16,185,129,.35)}

/* ── QR Modal ────────────────────────────────────────────────────────────── */
.qrm-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:9000;
}
.qrm-backdrop.hidden{display:none}
.qrm-box{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:22px;
  padding:0;width:320px;overflow:hidden;
  backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:0 24px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.12);
}
.qrm-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--border);
}
.qrm-title{font-size:14px;font-weight:600;color:var(--text1);display:flex;align-items:center;gap:6px}
.qrm-body{
  display:flex;flex-direction:column;align-items:center;padding:24px 18px 16px;gap:14px;
}
.qrm-body canvas{border-radius:8px}
.qrm-url{
  font-size:11px;color:var(--text3);text-align:center;word-break:break-all;
  max-height:48px;overflow:hidden;line-height:1.5;
}
.qrm-hint{font-size:12px;color:var(--text3);text-align:center;line-height:1.5}
.qrm-footer{
  display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--border);
}
.qrm-copy-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px;background:var(--s2);border:1px solid var(--border);border-radius:8px;
  color:var(--text1);font-size:13px;cursor:pointer;transition:all .12s;
}
.qrm-copy-btn:hover{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.35);color:var(--accent)}

/* ── Block Style Modal (stacked form — labels above fields) ──────────────── */
.bsm-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;z-index:9100;
  padding:16px;box-sizing:border-box;
}
.bsm-backdrop.hidden{display:none !important}
.bsm-box{
  background:rgba(28,28,30,.97);border:1px solid rgba(255,255,255,.12);border-radius:20px;
  width:min(440px,100%);max-width:100%;max-height:min(92vh,720px);
  overflow:hidden;display:flex;flex-direction:column;height:auto;
  backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);
  box-shadow:0 24px 60px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.10);
  box-sizing:border-box;
}
.bsm-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;
}
.bsm-title{font-size:15px;font-weight:700;color:#64d2ff;letter-spacing:-0.01em;min-width:0}
.bsm-header .apklm-close,
.bsm-header button.apklm-close{
  flex-shrink:0;width:32px;height:32px;border-radius:980px;border:none;
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);cursor:pointer;
  font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
}
.bsm-header .apklm-close:hover{background:rgba(255,255,255,.14);color:#fff}
.bsm-body{
  display:flex;flex-direction:column;gap:10px;padding:12px 14px 10px;
  overflow:hidden;overflow-y:hidden;min-height:0;flex:0 1 auto;
}
/* Vertical stack — never side-by-side (was truncating labels/values) */
.bsm-field{
  display:flex !important;flex-direction:column !important;align-items:stretch !important;
  gap:8px !important;width:100%;min-width:0;box-sizing:border-box;
}
.bsm-label{
  font-size:12px;font-weight:600;color:rgba(245,245,247,.55);
  min-width:0 !important;width:100%;flex-shrink:0;line-height:1.3;
  letter-spacing:0.02em;
}
.bsm-select-wrap{width:100%;position:relative;min-width:0}
.bsm-select{
  width:100%;max-width:100%;box-sizing:border-box;
  min-height:42px;padding:10px 36px 10px 12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#f5f5f7;
  font-size:13px;font-weight:500;cursor:pointer;line-height:1.3;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23aeaeb2' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.bsm-select:focus{outline:none;border-color:rgba(41,151,255,.65);box-shadow:0 0 0 3px rgba(0,113,227,.2)}
.bsm-select option{background:#1c1c1e;color:#f5f5f7}
.bsm-input{
  width:100% !important;max-width:100%;flex:none !important;box-sizing:border-box;
  min-height:42px;padding:10px 12px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#f5f5f7;
  font-size:13px;font-weight:500;line-height:1.35;font-family:inherit;
  resize:vertical;
}
textarea.bsm-input{
  min-height:88px;max-height:180px;line-height:1.45;white-space:pre-wrap;
  word-break:break-word;overflow-wrap:anywhere;
}
.bsm-input:focus{outline:none;border-color:rgba(41,151,255,.65);box-shadow:0 0 0 3px rgba(0,113,227,.2)}
.bsm-input::placeholder{color:rgba(245,245,247,.35)}
.bsm-hint{
  font-size:11.5px !important;color:rgba(245,245,247,.45) !important;margin:0 !important;
  line-height:1.45 !important;width:100%;
}
.bsm-footer{
  display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-shrink:0;
  padding:14px 18px;border-top:1px solid rgba(255,255,255,.08);
}
.bsm-cancel{
  min-height:40px;padding:0 18px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;
  color:rgba(245,245,247,.75);font-size:13px;font-weight:600;cursor:pointer;
}
.bsm-cancel:hover{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.35);color:#f87171}
.bsm-ok{
  min-height:40px;padding:0 22px;background:#0071e3;border:none;border-radius:12px;
  color:#fff;font-size:13px;font-weight:700;cursor:pointer;
}
.bsm-ok:hover{filter:brightness(1.08)}

/* ── Responsive: small screens ────────────────────────────────────────────── */
@media (max-width:1200px){
  .screen-ctrl-sidebar{ width:340px; }
  .ctrl-cell{ padding:5px 7px; }
}
@media (max-width:960px){
  .screen-ctrl-sidebar{ width:260px; }
  .ctrl-body{ grid-template-columns:1fr; }
  .ctrl-cell.span2{ grid-column:1; }
  .ctrl-cell .ctrl-label{ font-size:9px; }
  .ctrl-cell .scr-btn{ padding:3px 5px;font-size:10px; }
  .phone-ctrl-row .scr-btn{ padding:3px 6px;font-size:10px; }
}

/* ══ PHANTOM Liquid Glass — Global Overrides ════════════════════════════════
   These ensure every surface, popover, and input carries the dark glass look
   regardless of which component-level class defined it first.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Scrollbars */
::-webkit-scrollbar-thumb { background: rgba(0,113,227,.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,113,227,.45); }
::-webkit-scrollbar-track { background: transparent; }

/* Glass inputs / selects across the board */
.ti, .sel, input[type="text"], input[type="password"], input[type="number"], textarea, select {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.96) !important;
}
.ti:focus, .sel:focus, input:focus, textarea:focus, select:focus {
  border-color: rgba(0,113,227,.55) !important;
  box-shadow: 0 0 0 3px rgba(0,113,227,.15) !important;
  outline: none;
}

/* Keylog autocred row — purple instead of red */
.kl-row.kl-autocred { background: rgba(0,113,227,.07); border-left-color: var(--accent); }
.kl-badge.cred { color: var(--accent3); border-color: rgba(0,113,227,.30); }
.kl-filter-cred { color: var(--accent3); border-color: rgba(0,113,227,.30); }
.kl-filter-cred:hover { border-color: var(--accent); background: rgba(0,113,227,.08); }
.kl-filter-cred.active { background: rgba(0,113,227,.16); border-color: var(--accent); color: var(--accent3); }
.kl-autocred-tag { background: var(--accent); }

/* Stats search highlight */
.ssr-text mark { background: rgba(0,113,227,.20); color: var(--accent3); }

/* Table selected row */
.dev-table tr.selected td { background: rgba(0,113,227,.07); }

/* Device detail header — pure glass */
.dev-hdr {
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* App button open color — purple */
.app-btn.open { color: var(--accent3); border-color: rgba(0,113,227,.28); }
.app-btn.open:hover { background: rgba(0,113,227,.12); border-color: var(--accent); }

/* Permission guide — purple */
.perm-guide { background: rgba(0,113,227,.08); border-color: rgba(0,113,227,.22); }

/* Dev cmd menu — full glass */
.dev-cmd-menu {
  background: rgba(20,16,36,.90);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 40px rgba(0,0,0,.60);
}
.dcm-item:hover { background: rgba(0,113,227,.12); color: var(--accent3); }

/* Floating note popup */
.note-popup {
  background: rgba(20,16,36,.90);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255,255,255,.12);
}

/* Tab-add menu */
.tab-add-menu {
  background: rgba(20,16,36,.90);
  backdrop-filter: blur(40px);
  border-color: rgba(255,255,255,.12);
}

/* Toast */
.toast {
  background: rgba(30,26,50,.92);
  border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0,0,0,.60);
}

/* Screen ctrl sidebar */
.screen-ctrl-sidebar {
  background: rgba(255,255,255,.04);
  border-right-color: rgba(255,255,255,.07);
}

/* Bulk bar */
.bulk-bar {
  background: rgba(0,113,227,.25);
  backdrop-filter: blur(20px);
  border-bottom-color: rgba(0,113,227,.20);
}

/* Section label */
.section-lbl {
  color: rgba(255,255,255,.35);
  border-bottom-color: rgba(255,255,255,.08);
}

/* View mode active */
.view-mode-btn.active { background: rgba(0,113,227,.20); color: var(--accent3); box-shadow: none; }

/* Dmodal vtab active */
.dmodal-vtab.active {
  background: rgba(0,113,227,.20);
  border-color: rgba(0,113,227,.35);
  color: var(--accent3);
  box-shadow: 0 2px 8px rgba(0,113,227,.25);
}

/* Language button active */
.lang-btn.active { background: rgba(0,113,227,.22); border-color: rgba(0,113,227,.40); color: var(--accent3); }

/* Tag chip active */
.tag-chip.active { background: rgba(0,113,227,.22); border-color: rgba(0,113,227,.40); color: var(--accent3); }

/* Focus ring */
:focus-visible { outline: 2px solid rgba(0,113,227,.70); outline-offset: 2px; border-radius: 4px; }

/* Dev card credential badge */
.dev-card-cred-badge { background: rgba(251,191,36,.10); color: #fbbf24; border-color: rgba(251,191,36,.22); }

/* Info items */
.info-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.info-item:hover { border-color: rgba(0,113,227,.28); }

/* Photo card */
.photo-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.photo-card:hover { border-color: rgba(255,255,255,.14); }

/* Contacts */
.contact-row { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.contact-row:hover { border-color: rgba(255,255,255,.14); }
.contact-avatar { background: linear-gradient(135deg, rgba(0,113,227,.20), rgba(0,113,227,.30)); border-color: rgba(0,113,227,.25); }

/* SMS */
.sms-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.sms-item:hover { border-color: rgba(255,255,255,.14); }

/* App cards */
.app-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.app-card:hover { border-color: rgba(255,255,255,.14); }
.app-icon { background: rgba(0,113,227,.12); border-color: rgba(0,113,227,.20); }

/* Credential rows */
.cred-row { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.cred-row:hover { border-color: rgba(0,113,227,.35); background: rgba(0,113,227,.08); }

/* Ap list items */
.ap-item { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.ap-item:hover { border-color: rgba(0,113,227,.35); }

/* Mic hero */
.mic-hero { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); backdrop-filter: blur(20px); }
.mic-btn { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.mic-btn:hover { background: rgba(255,255,255,.12); }

/* Screen viewer bg */
.screen-viewer { background: #020208; }
.reader-wrap { background: #020208; }
.all-video-pane { background: #020208; }

/* Notif center */
.notif-center { background: rgba(20,16,36,.90); backdrop-filter: blur(20px); border-color: rgba(255,255,255,.12); }

/* Kl date item active */
.kl-date-item.active { background: rgba(0,113,227,.12); border-left-color: var(--accent); }
.kl-date-item.active .kl-date-label { color: var(--accent3); }
.kl-date-count { background: rgba(255,255,255,.07); }

/* Stats panel header */
.stats-panel-hdr { background: rgba(255,255,255,.04); }

/* Perm step num */
.perm-step-num { background: var(--accent); }

/* Settings group */
.s-group { background: rgba(255,255,255,.04); border-radius: 14px; }

/* Toggle track */
.s-toggle input:checked + .s-toggle-track { background: var(--accent); }

/* Theme / accent buttons */
.theme-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.theme-btn:hover { border-color: var(--accent3); color: var(--accent3); }

/* Hide scrollbar on ctrl row */
.phone-ctrl-bar {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
}

/* APK perms wrap */
.apkb-perms-wrap { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); }
.apkb-perms-table thead tr { background: rgba(255,255,255,.04); }
.apkb-options { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.09); backdrop-filter: blur(12px); }

/* PHANTOM inset highlight on glass panels */
.modal-box, .dmodal, .apklm-box, .qrm-box, .bsm-box, .note-popup, .dev-cmd-menu {
  --glass-inset: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.20);
}

/* ══ Topbar — PHANTOM Ghost ═══════════════════════════════════════════════ */
.topbar-ghost {
  width: 22px; height: 22px; flex-shrink: 0;
  filter: drop-shadow(0 2px 10px rgba(0,113,227,.55));
}

/* ══ Login Page — PHANTOM Design ══════════════════════════════════════════ */

/* Ghost logo */
.login-ghost {
  width: 80px; height: 80px;
  filter: drop-shadow(0 0 24px rgba(0,113,227,.60)) drop-shadow(0 8px 20px rgba(0,0,0,.55));
  flex-shrink: 0;
}

/* Brand name block */
.login-brand {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
/* Override login-title to be larger + gradient in login context */
.login-box .login-title {
  font-size: 28px; font-weight: 800; letter-spacing: .20em;
  background: linear-gradient(135deg, #a5d8ff 0%, #0071e3 50%, #2997ff 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
}
.login-tagline {
  font-size: 12px; color: rgba(255,255,255,.40); letter-spacing: .08em;
  text-transform: uppercase; font-weight: 500;
}

/* Admin API key section */
.login-section {
  width: 100%; display: flex; flex-direction: column; gap: 10px;
}
#apiKeyInput {
  height: 50px; border-radius: 14px !important;
  padding: 0 16px !important; font-size: 15px !important;
}

/* Divider */
.login-divider {
  width: 100%; position: relative; display: flex; align-items: center;
}
.login-divider::before, .login-divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.10);
}
.login-divider span {
  padding: 0 12px; font-size: 11px; color: rgba(255,255,255,.30);
  letter-spacing: .06em; text-transform: uppercase;
}

/* Registration section */
.login-register {
  width: 100%; display: flex; flex-direction: column; gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 16px;
}
.login-register-hdr {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: rgba(255,255,255,.90);
  letter-spacing: .01em;
}
.login-register-hdr svg { flex-shrink: 0; opacity: .70; }
.login-register-sub {
  font-size: 12px; color: rgba(255,255,255,.40); line-height: 1.55;
  margin: 0;
}
.login-invite-input {
  height: 44px !important; border-radius: 12px !important;
  padding: 0 14px !important; font-size: 14px !important;
}
.login-captcha-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.login-captcha-label {
  flex-shrink: 0; font-size: 14px; font-weight: 600;
  color: var(--text2); font-family: 'JetBrains Mono', monospace;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px; padding: 10px 14px; white-space: nowrap;
}
.login-captcha-input {
  flex: 1; height: 44px !important; border-radius: 12px !important;
  padding: 0 14px !important; font-size: 14px !important;
  background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--text) !important; outline: none;
}
.login-captcha-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-light) !important; }
.login-register-btn {
  width: 100%; height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(0,113,227,.14) !important;
  border: 1px solid rgba(0,113,227,.30) !important;
  border-radius: 12px !important; color: var(--accent3) !important;
  font-size: 14px !important; font-weight: 600 !important;
  cursor: pointer; transition: background .14s, box-shadow .14s;
  box-shadow: none !important;
}
.login-register-btn:hover {
  background: rgba(0,113,227,.22) !important;
  border-color: rgba(0,113,227,.50) !important;
  box-shadow: 0 4px 14px rgba(0,113,227,.25) !important;
}

/* Contact buttons row */
.login-contacts {
  width: 100%; display: flex; gap: 10px;
}
.login-contact-btn {
  flex: 1; height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 12px !important;
  color: rgba(255,255,255,.75) !important;
  font-size: 13px !important; font-weight: 500 !important;
  text-decoration: none; cursor: pointer;
  transition: background .14s, border-color .14s, color .14s;
  box-shadow: none !important;
}
.login-contact-btn:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.95) !important;
}
.login-contact-btn svg { flex-shrink: 0; opacity: .80; }
/* Telegram button: slight blue tint */
a.login-contact-btn:hover {
  background: rgba(41,182,246,.08) !important;
  border-color: rgba(41,182,246,.22) !important;
  color: #7de4ff !important;
}

/* ══ HIG Spacing — Nav buttons 44px touch target ═════════════════════════ */
.topnav-btn {
  min-height: 32px; padding: 6px 12px; gap: 5px;
}
.topnav-btn svg { flex-shrink: 0; }

/* Device tab nav — min touch target 44px on mobile only */
.dtab-btn svg { flex-shrink: 0; }
.dtab-btn svg { flex-shrink: 0; }

/* Dev cards — 20px HIG card padding */
.dev-card { padding: 20px; }

/* List rows — 44px min height */
.kl-row, .sms-item, .contact-row, .ap-item, .cred-row {
  min-height: 44px;
}

/* Section labels — 8pt spacing above */
.section-lbl { margin-bottom: 8px; margin-top: 24px; }

/* Hover indicator on list rows */
.dev-list-row:hover { background: rgba(0,113,227,.07); border-color: rgba(0,113,227,.20); }
.dev-list-row.selected { outline-color: var(--accent); }
.dev-table tr:hover td { background: rgba(0,113,227,.06); }

/* Body bg gradient */
html, body { background: var(--bg); }
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(0,113,227,.08) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 80% 100%, rgba(64,203,224,.04) 0%, transparent 55%);
}

/* ── Login page language row ────────────────────────────────────────────────── */
.login-lang-row {
  display: flex; align-items: center; justify-content: center;
  gap: 4px; margin: 8px 0 4px;
}
.login-lang-row .lang-btn {
  font-size: 11px; padding: 3px 9px; border-radius: 6px;
  border: 1px solid var(--border2); background: transparent; color: var(--text2);
  cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast);
}
.login-lang-row .lang-btn.active,
.login-lang-row .lang-btn:hover {
  background: var(--accent); color: #fff; border-color: var(--accent);
}

/* ── Purchase panel ──────────────────────────────────────────────────────────── */
/* ── Purchase panel ──────────────────────────────────────────────────────────── */
.purchase-panel {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.7); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  overflow: hidden;
}
.purchase-panel.hidden { display: none; }
.purchase-box {
  background: var(--s1); border: 1px solid var(--border2);
  border-radius: 20px; padding: 20px 20px 16px;
  width: 560px; max-width: 100%;
  max-height: min(92dvh, 100%);
  overflow-x: hidden;
  overflow-y: auto; /* short / mobile viewports must reach every method */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: 0 24px 80px rgba(0,0,0,.6);
  position: relative;
}
.pur-close {
  position: absolute; top: 16px; right: 16px;
  background: var(--s3); border: 1px solid var(--border); color: var(--text2);
  border-radius: 50%; width: 28px; height: 28px;
  font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.pur-close:hover { background: var(--s4); color: var(--text); }
/* Brand */
.pur-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.pur-brand-name { font-size: 17px; font-weight: 800; color: var(--text); letter-spacing: .04em; }
.pur-brand-sub { font-size: 11px; color: var(--text3); margin-top: 1px; }
/* Plans grid */
.pur-plans {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px;
}
.pur-plan {
  background: var(--s2); border: 2px solid var(--border);
  border-radius: 14px; padding: 16px 14px;
  cursor: pointer; position: relative; overflow: hidden;
  transition: border-color .18s, background .18s, transform .12s;
}
.pur-plan:hover { border-color: var(--accent3); transform: translateY(-1px); }
.pur-plan.selected { border-color: var(--accent); background: rgba(0,113,227,.1); }
.pur-plan-popular { border-color: var(--accent3) !important; }
.pur-plan-best { border-color: #f59e0b !important; }
.pur-popular-badge {
  position: absolute; top: 0; right: 0;
  background: var(--accent); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-bottom-left-radius: 8px;
}
.pur-best-badge {
  position: absolute; top: 0; right: 0;
  background: #f59e0b; color: #000;
  font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-bottom-left-radius: 8px;
}
.pur-plan-label { font-size: 11px; color: var(--text2); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.pur-plan-price { font-size: 20px; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 2px; }
.pur-plan-price span { font-size: 12px; font-weight: 600; color: var(--text3); }
.pur-plan-period { font-size: 11px; color: var(--text3); margin-bottom: 10px; }
.pur-plan-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pur-plan-feats li { font-size: 11px; color: var(--text2); display: flex; align-items: center; gap: 5px; }
.pur-plan-feats li::before { content: '✓'; color: var(--accent); font-weight: 700; font-size: 10px; flex-shrink: 0; }
/* Email */
.pur-email-wrap {
  display: flex; align-items: center; gap: 10px;
  background: var(--s2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; color: var(--text3);
}
.pur-email-input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 13px; font-family: inherit;
}
.pur-email-input::placeholder { color: var(--text3); }
/* Buttons */
.pur-btn-primary {
  width: 100%; padding: 13px; border: none; border-radius: 11px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: opacity .15s, transform .1s;
}
.pur-btn-primary:hover { opacity: .9; }
.pur-btn-primary:active { transform: scale(.98); }
.pur-btn-ghost {
  width: 100%; padding: 10px; border: 1px solid var(--border); border-radius: 10px;
  background: none; color: var(--text2); font-size: 12px; cursor: pointer;
  margin-top: 8px; transition: background .15s;
}
.pur-btn-ghost:hover { background: var(--s3); }
.pur-err { color: #f87171; font-size: 12px; text-align: center; margin-bottom: 10px; }
.pur-secure-note {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; color: var(--text3); margin-top: 12px;
}
/* Multi-crypto method picker — must beat global `button{border:none;background:none}` */
.pur-method-block,
#purchaseMethodBlock {
  margin: 14px 0 4px;
  width: 100%;
  min-width: 0;
}
.pur-method-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 8px;
}
.pur-method-grid,
#purchaseMethodGrid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: stretch !important;
}
button.pur-method-opt,
.pur-method-opt {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 1px !important;
  text-align: left !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 7px 9px !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  background: var(--s2, rgba(255,255,255,.04)) !important;
  border: 1px solid var(--border, rgba(255,255,255,.12)) !important;
  color: var(--text, #f5f5f7) !important;
  font: inherit !important;
  box-shadow: none !important;
  transition: border-color .15s, background .15s, transform .12s !important;
  box-sizing: border-box !important;
}
button.pur-method-opt:hover,
.pur-method-opt:hover {
  border-color: rgba(0,212,162,.4) !important;
  background: rgba(0,212,162,.07) !important;
  filter: none !important;
  transform: none !important;
}
button.pur-method-opt.selected,
.pur-method-opt.selected,
button.pur-method-opt[aria-selected="true"] {
  border-color: var(--accent, #00d4a2) !important;
  background: rgba(0,212,162,.12) !important;
  box-shadow: 0 0 0 1px rgba(0,212,162,.18) !important;
}
.pur-method-name {
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  color: inherit !important;
  line-height: 1.2 !important;
}
.pur-method-net {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--text2, rgba(255,255,255,.55)) !important;
  line-height: 1.3 !important;
}
.pur-method-tag {
  margin-top: 4px !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: #30d158 !important;
  background: rgba(48,209,88,.12) !important;
  border: 1px solid rgba(48,209,88,.25) !important;
  border-radius: 999px !important;
  padding: 2px 7px !important;
  display: inline-block !important;
}
.pur-method-hint {
  font-size: 11px; color: var(--text3); margin-top: 8px; line-height: 1.4;
}
@media (max-width: 420px) {
  .pur-method-grid,
  #purchaseMethodGrid { grid-template-columns: 1fr 1fr !important; }
}
/* Step 2 */
.pur-step2-header {
  display: flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.pur-step2-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(0,113,227,.15); border: 1px solid rgba(0,113,227,.3);
  display: flex; align-items: center; justify-content: center; color: var(--accent);
  flex-shrink: 0;
}
.pur-step2-title { font-size: 18px; font-weight: 800; color: var(--text); }
.pur-step2-sub { font-size: 12px; color: var(--text2); margin-top: 2px; }
.pur-amount-box {
  background: rgba(48,209,88,.06); border: 1px solid rgba(48,209,88,.2);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.pur-amount-lbl { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
.pur-amount-row { display: flex; align-items: baseline; gap: 8px; }
.pur-amount-val { font-size: 32px; font-weight: 900; color: #30d158; font-family: 'JetBrains Mono',monospace; letter-spacing: -.01em; }
.pur-amount-unit { font-size: 14px; font-weight: 700; color: #30d158; opacity: .7; }
.pur-amount-plan { font-size: 11px; color: var(--text3); margin-top: 4px; }
.pur-copy-btn {
  background: var(--s3); border: 1px solid var(--border); color: var(--text2);
  border-radius: 7px; padding: 4px 10px; font-size: 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  transition: background .15s; margin-left: auto;
}
.pur-copy-btn:hover { background: var(--s4); color: var(--text); }
/* Wallet section */
.pur-wallet-section {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--s2); border: 1px solid var(--border);
  border-radius: 14px; padding: 14px; margin-bottom: 14px;
}
.pur-wallet-qr-wrap { flex-shrink: 0; }
.pur-wallet-qr { width: 88px; height: 88px; border-radius: 8px; display: block; }
.pur-wallet-info { flex: 1; min-width: 0; }
.pur-wallet-lbl { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 6px; }
.pur-wallet-addr-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.pur-wallet-addr {
  font-family: 'JetBrains Mono',monospace; font-size: 10px;
  color: var(--text); word-break: break-all; flex: 1;
}
.pur-wallet-net { font-size: 10px; color: var(--text3); }
/* Countdown */
.pur-countdown-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text2); margin-bottom: 14px; gap: 8px; flex-wrap: wrap;
}
.pur-countdown-item { display: flex; align-items: center; gap: 5px; }
.pur-countdown-val { font-weight: 700; color: var(--text); }
.pur-check-status {
  font-size: 12px; color: var(--text2); text-align: center;
  margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 8px;
}
@keyframes pur-spin {
  to { transform: rotate(360deg); }
}
.pur-spinner {
  width: 12px; height: 12px; border: 2px solid var(--border2);
  border-top-color: var(--accent); border-radius: 50%;
  animation: pur-spin .7s linear infinite; display: inline-block;
  flex-shrink: 0; box-sizing: border-box;
}
/* Step 3 */
.pur-success-wrap { text-align: center; padding: 8px 0; }
.pur-success-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(48,209,88,.12); border: 2px solid rgba(48,209,88,.3);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.pur-success-title { font-size: 22px; font-weight: 800; color: #30d158; margin-bottom: 6px; }
.pur-success-sub { font-size: 13px; color: var(--text2); margin-bottom: 22px; }
.pur-code-box {
  background: rgba(48,209,88,.06); border: 1px solid rgba(48,209,88,.25);
  border-radius: 14px; padding: 16px; margin-bottom: 14px;
}
.pur-code-lbl { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.pur-code-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.pur-code-val { font-family: 'JetBrains Mono',monospace; font-size: 18px; font-weight: 800; color: #30d158; letter-spacing: .1em; }
.pur-tx-note { font-size: 11px; color: var(--text3); margin-bottom: 16px; }
/* Mobile */
@media (max-width: 480px) {
  .purchase-box { padding: 20px 16px 18px; border-radius: 16px; }
  .pur-plans { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pur-plan { padding: 12px 10px; }
  .pur-plan-price { font-size: 16px; }
  .pur-plan-feats { display: none; }
  .pur-wallet-section { flex-direction: column; }
  .pur-wallet-qr { width: 100px; height: 100px; margin: 0 auto; display: block; }
  .pur-amount-val { font-size: 26px; }
}

/* ── Tutorial view ───────────────────────────────────────────────────────────── */
/* Must be a flex child with min-height:0 so overflow-y scrolls inside #app
   (html/body/#app are overflow:hidden — page-level scroll never works). */
.tutorial-root,
#viewTutorial.tutorial-root,
#viewTutorial:not(.hidden) {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  position: relative !important;
  opacity: 1 !important;
  z-index: 5 !important;
  pointer-events: auto !important;
  background: var(--bg) !important;
  box-sizing: border-box !important;
}
#viewTutorial.hidden,
#viewTutorial.tutorial-root.hidden {
  display: none !important;
  overflow: hidden !important;
  flex: 0 0 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.tutorial-wrap {
  max-width: 1100px; margin: 0 auto; padding: 28px 24px 64px;
  box-sizing: border-box;
}
.tutorial-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 28px;
}
.tutorial-title { font-size: 22px; font-weight: 800; color: var(--text); }
.tutorial-sub { font-size: 13px; color: var(--text2); margin-top: 2px; }
.tutorial-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px;
}
.tut-section {
  background: var(--s1); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px;
}
.tut-section-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 7px;
}
.tut-section-title svg { flex-shrink: 0; color: var(--accent3); }
.tut-list {
  margin: 0; padding-left: 16px;
  display: flex; flex-direction: column; gap: 5px;
}
.tut-list li { font-size: 12.5px; color: var(--text2); line-height: 1.45; }
.tut-list li b { color: var(--text); font-weight: 600; }

/* ── Location chip fix: scroll-on-overflow so long city/country names show ── */
.dev-hdr-chips {
  overflow-x: auto;
  overflow-y: visible;
  flex-wrap: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.dev-hdr-chips::-webkit-scrollbar { display: none; }

/* ── Responsive: very small screens (< 700px) ────────────────────────────── */
@media (max-width:700px) {
  /* Stack sidebar below screen on mobile */
  .screen-split-wrap { flex-direction: column; overflow-y: auto; }
  .screen-ctrl-sidebar {
    width: 100% !important;
    flex-shrink: 0;
    border-right: none;
    border-top: 1px solid var(--border);
    max-height: 50vh;
    overflow-y: auto;
  }
  .ctrl-body { grid-template-columns: 1fr 1fr; }
  /* Compact topbar on small screens */
  .topbar-brand-name { display: none; }
  .topnav-btn span { display: none; }
  .topnav-btn { padding: 5px 8px; gap: 0; }
  /* Settings sidebar goes horizontal */
  .settings-layout { flex-direction: column; }
  .settings-nav { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); padding: 6px; gap: 4px; min-width: 0; width: 100%; }
  .snav-btn { min-width: auto; padding: 5px 8px; font-size: 10px; }
  .snav-btn svg { display: none; }
  /* Device header chips: smaller */
  .hdr-chip { font-size: 10px; padding: 2px 7px; }
}

/* ── Users management panel ────────────────────────────────────────────────── */
.users-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.users-table th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--text2);
  padding: 6px 10px; border-bottom: 1px solid var(--border2);
  text-transform: uppercase; letter-spacing: .04em;
}
.users-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.users-table tr:last-child td { border-bottom: none; }
.users-table tr:hover td { background: rgba(0,113,227,.05); }

.users-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.users-modal.hidden { display: none; }
.users-modal-box {
  background: var(--s2); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 24px;
  width: 360px; max-width: 95vw;
  box-shadow: var(--shadow-lg);
}
.users-modal-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  margin-bottom: 16px;
}
.users-modal-label {
  display: block; font-size: 11px; color: var(--text2);
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 4px; margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — full overhaul for screens ≤ 640px
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── App shell ─────────────────────────────────────────────────────────── */
  #app { height: 100dvh; /* dynamic vh for iOS */ }

  /* Bottom padding so content clears the bottom nav */
  #viewList, #viewDevice, #viewStats, .kl-agg-root,
  #viewSettings, #viewApkBuild, #viewMyApps, #viewTutorial, #viewKeylogs {
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
  }

  /* ── Top bar ───────────────────────────────────────────────────────────── */
  .topbar {
    height: 50px; min-height: 50px;
    padding: 0 12px;
    gap: 8px;
  }
  .topbar-brand { gap: 5px; }
  .topbar-droid { width: 18px; height: 18px; }
  .topbar-title { font-size: 11px; letter-spacing: .08em; }
  .topbar-brand-name { display: none; }

  /* Search bar — compact */
  .search { max-width: none; flex: 1; padding: 6px 10px; font-size: 12px; }

  /* Hide sort/view controls that clutter mobile */
  .lt-sort-wrap, .lt-view-btns, #devCountBadge { display: none !important; }
  .lt-title { font-size: 14px; }
  .list-toolbar { padding: 10px 14px; gap: 8px; }

  /* ── Bottom navigation bar (replaces topnav on mobile) ─────────────────── */
  .topbar-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 300;
    display: flex; flex-direction: row; align-items: center;
    margin: 0; gap: 0;
    height: calc(58px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(10,10,18,.92);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-top: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 -2px 20px rgba(0,0,0,.4);
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
  }
  .topbar-nav::-webkit-scrollbar { display: none; }

  .topnav-btn {
    flex: 1; min-width: 52px;
    flex-direction: column; gap: 3px;
    padding: 6px 4px 4px;
    height: 58px; border-radius: 0;
    border: none !important; background: none !important;
    font-size: 9px; font-weight: 600; letter-spacing: .02em;
    align-items: center; justify-content: center;
    color: rgba(255,255,255,.45);
    transition: color .15s;
  }
  .topnav-btn span { display: flex !important; font-size: 9px; }
  .topnav-btn svg { width: 18px; height: 18px; }
  .topnav-btn.active { color: var(--accent3); background: none !important; }
  .topnav-btn.active svg { filter: drop-shadow(0 0 5px var(--accent)); }
  .topnav-badge {
    position: absolute; top: 4px; right: 6px;
    font-size: 8px; padding: 1px 4px; min-width: 14px; height: 14px;
  }
  /* Hide the Telegram contact link and account on mobile nav */
  .topnav-tg { display: none !important; }

  /* Right side controls */
  .topbar-right { gap: 6px; }
  .topbar-right .ghost-btn { padding: 5px 8px; font-size: 11px; }
  .topnav-exit span { display: none; }
  .topnav-exit { padding: 5px 8px !important; }

  /* Back button compact */
  .tb-back { padding: 4px 8px; font-size: 11px; }

  /* ── Device list cards ─────────────────────────────────────────────────── */
  .dev-grid {
    padding: 12px;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .dev-card-body { padding: 12px 12px 8px; }
  .dev-card-stats { gap: 8px; flex-wrap: wrap; }
  .dev-card-meta { flex-wrap: wrap; gap: 5px; }
  .dev-card-wp { height: 60px; }

  /* List view rows — simplify */
  .dev-list-row {
    flex-wrap: wrap; gap: 4px; padding: 10px 12px;
  }
  .dev-list-model { display: none; }
  .dev-list-chips { max-width: 100%; flex-wrap: wrap; }

  /* ── Device detail header ──────────────────────────────────────────────── */
  /* header already single row — just shrink note input on small screens */
  .dev-hdr { height: 38px; padding: 0 10px; gap: 6px; }
  .dev-hdr-note-input { width: 100px; }

  /* ── Device body: vertical tab sidebar → horizontal tab bar ───────────── */
  .dev-body { flex-direction: column; }

  .dtab-nav {
    flex-direction: row;
    width: 100%; height: 42px;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
    overflow-x: auto; overflow-y: hidden;
    padding: 4px 6px;
    gap: 2px;
    background: rgba(255,255,255,.03);
  }
  .dtab-nav::-webkit-scrollbar { display: none; }

  .dtab-btn {
    width: auto; height: 36px;
    padding: 0 10px;
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 6px;
    flex-shrink: 0;
    font-size: 11px;
    display: flex; align-items: center; gap: 5px;
    white-space: nowrap;
    min-width: 44px;
  }
  /* Show label next to icon for active tab */
  .dtab-btn::after { display: none !important; } /* no tooltip on mobile */
  .dtab-btn.active {
    background: rgba(0,113,227,.14);
    border-bottom-color: var(--accent);
    border-left-color: transparent;
  }
  .dtab-label { display: inline; }

  /* ── Screen/operate modal ─────────────────────────────────────────────── */
  .screen-split-wrap { flex-direction: column !important; overflow-y: auto; }
  .screen-ctrl-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-top: 1px solid var(--border);
    max-height: none;
    overflow-y: visible;
  }
  .ctrl-body { grid-template-columns: 1fr 1fr !important; gap: 4px; }
  .ctrl-cell.span2 { grid-column: 1 / -1; }
  .ctrl-cell { padding: 5px 7px; }
  .ctrl-label { font-size: 9px; }
  .scr-btn { padding: 4px 7px; font-size: 10px; }
  .phone-ctrl-row .scr-btn { padding: 4px 8px; font-size: 11px; }

  /* Screen canvas — limit height on mobile */
  .screen-canvas-wrap { max-height: 45vh; }

  /* ── Statistics ────────────────────────────────────────────────────────── */
  .stats-kpi-row {
    padding: 10px 12px 8px;
    gap: 8px;
  }
  .stats-kpi-card {
    min-width: 0;
    flex: 1 1 calc(50% - 4px);
    padding: 10px 10px;
    gap: 8px;
  }
  .stats-kpi-icon { width: 30px; height: 30px; border-radius: 7px; }
  .stats-kpi-val { font-size: 18px; }
  .stats-kpi-label { font-size: 9px; }

  /* Stats body: stack 3 columns vertically */
  .stats-body { flex-direction: column; overflow-y: auto; }
  .stats-panel { border-right: none; border-bottom: 1px solid var(--border); min-height: 200px; max-height: 280px; }
  .stats-panel-col3 { width: 100%; display: flex; flex-direction: row; }
  .stats-panel-col3 .stats-panel { flex: 1; border-bottom: none; min-height: 180px; max-height: 220px; }

  .stats-topbar { padding: 10px 12px 8px; gap: 6px; flex-wrap: wrap; }
  .stats-topbar-right { flex-wrap: wrap; gap: 5px; }
  .stats-search-inp { width: 100%; }

  /* Telegram panel */
  .stats-tg-panel.open { max-height: 220px; }

  /* ── Keylogs aggregation ───────────────────────────────────────────────── */
  .kl-agg-toolbar { padding: 10px 12px; gap: 6px; flex-wrap: wrap; }
  .kl-agg-filters { flex-wrap: wrap; gap: 6px; margin-left: 0; width: 100%; }
  .kla-sel { flex: 1; min-width: 90px; font-size: 11px; }
  .kla-search { width: 100%; }
  .kla-search-wrap { flex: 1; }

  /* Hide less essential columns on mobile */
  .kl-agg-table .kla-td-pkg { display: none; }
  .kl-agg-table thead th[data-sort="pkg"] { display: none; }

  /* ── Settings ──────────────────────────────────────────────────────────── */
  .settings-view { overflow: hidden; }
  .settings-layout { flex-direction: column; flex: 1; min-height: 0; }
  .settings-nav {
    flex-direction: row; flex-wrap: wrap;
    border-right: none; border-bottom: 1px solid var(--border);
    padding: 6px 10px; gap: 4px;
    min-width: 0; width: 100%; max-height: none; flex-shrink: 0;
  }
  .snav-btn { min-width: auto; padding: 5px 10px; font-size: 10px; }
  .snav-btn svg { display: none; }
  .settings-content { padding: 14px 12px; flex: 1; min-height: 0; overflow: hidden; }
  .s-panel { padding-right: 0; flex: 1; min-height: 0; overflow-y: auto; }
  .s-row { flex-wrap: wrap; gap: 8px; }

  /* ── Tutorial ──────────────────────────────────────────────────────────── */
  .tutorial-grid { grid-template-columns: 1fr; }
  .tutorial-root { padding: 14px 12px; }

  /* ── APK Build ─────────────────────────────────────────────────────────── */
  .apkv-form { padding: 14px 12px; }

  /* ── Modals / popups ───────────────────────────────────────────────────── */
  .modal-box, .users-modal-box { width: 100% !important; max-width: none !important; border-radius: 16px 16px 0 0; position: fixed; bottom: 0; left: 0; top: auto; max-height: 90dvh; overflow-y: auto; }
  .modal-overlay.has-modal, .users-modal { align-items: flex-end; }

  /* Operate modal full screen on mobile */
  #operateModal > div { width: 100% !important; max-width: none !important; height: 100dvh !important; border-radius: 0 !important; }

  /* ── Toast ─────────────────────────────────────────────────────────────── */
  .toast { bottom: calc(68px + env(safe-area-inset-bottom)); left: 12px; right: 12px; width: auto; text-align: center; }

  /* ── Purchase panel ────────────────────────────────────────────────────── */
  .purchase-plans { grid-template-columns: 1fr 1fr; gap: 8px; }
  .purchase-plan { padding: 10px; }

  /* ── Quick action bar ──────────────────────────────────────────────────── */
  .qa-bar { flex-wrap: wrap; gap: 3px; padding: 6px 8px; }
  .qa-btn { font-size: 11px; padding: 5px 8px; }

  /* ── Bulk bar ──────────────────────────────────────────────────────────── */
  .bulk-bar { bottom: calc(58px + env(safe-area-inset-bottom)); }

  /* ── KL tab in device detail ───────────────────────────────────────────── */
  .kl-table-wrap { font-size: 11px; }
  .kl-row { padding: 5px 10px; }
  .kl-time { font-size: 9px; }
  .kl-pkg { display: none; } /* hide package on mobile kl */
  .kl-toolbar { flex-wrap: wrap; padding: 8px 10px; gap: 6px; }
  .kl-filter-row { flex-wrap: wrap; gap: 4px; }

  /* ── Stats search results ──────────────────────────────────────────────── */
  .ssr-pkg { display: none; }
  .ssr-dev { max-width: 70px; }

  /* ── Empty state ───────────────────────────────────────────────────────── */
  .empty-state { padding: 40px 20px; }

} /* end @media 640px */

/* ── Extra small: 375px (iPhone SE / older) ─────────────────────────────── */
@media (max-width: 375px) {
  .topnav-btn { min-width: 44px; font-size: 8px; }
  .topnav-btn svg { width: 16px; height: 16px; }
  .stats-kpi-card { gap: 6px; padding: 8px; }
  .stats-kpi-val { font-size: 16px; }
  .purchase-plans { grid-template-columns: 1fr; }
  .dev-grid { padding: 10px; }
}


/* ── Credentials / Overlays tab full-height layout ─────────────────────── */
#dtab-credentials,
#dtab-overlays {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#dtab-credentials.hidden,
#dtab-overlays.hidden { display: none !important; }

.cred-tab-page {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cred-tab-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--s1, transparent);
}

.cred-tab-toolbar .ti {
  width: min(180px, 32vw);
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

.cred-tab-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}

.cred-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cred-tab-filter.active {
  background: var(--accent, #0071e3) !important;
  color: #fff !important;
  border-color: transparent !important;
}

.cred-tab-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 0 16px;
}

.cred-section-label {
  flex: 0 0 auto;
  padding: 12px 16px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cred-section-label .badge { margin-left: 6px; }

.cred-tab-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 16px 12px;
  align-items: stretch;
  justify-content: flex-start;
}

/* Main credentials list fills remaining viewport */
.cred-tab-list-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px 20px;
  justify-content: flex-start;
  align-content: flex-start;
}

.cred-tab-list .empty-msg,
.cred-tab-list-main .empty-msg {
  padding: 24px 12px;
  margin: 0;
  text-align: left;
  align-self: stretch;
}

.cred-card {
  background: var(--s2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.cred-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cred-card-fields {
  font-size: 13px;
  line-height: 1.55;
  background: var(--s1, rgba(0,0,0,.2));
  border-radius: 8px;
  padding: 10px 12px;
}

.cred-field {
  padding: 2px 0;
  word-break: break-word;
}
.cred-field code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
}


/* ── Overlay picker modal (device page) ───────────────────────────────── */
#overlayPickerModal.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#overlayPickerModal.modal-overlay:not(.hidden) {
  display: flex !important;
}
.ovl-picker-box {
  width: min(560px, 96vw);
  max-height: min(80vh, 720px);
  background: var(--s2, #1c1c1e);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,.55);
}
.ovl-picker-box .modal-hdr {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.ovl-picker-toolbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.ovl-picker-toolbar .ti {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
}
.ovl-picker-list {
  flex: 1 1 auto;
  min-height: 200px;
  max-height: min(58vh, 560px);
  overflow-y: auto;
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  justify-content: flex-start;
}
.ovl-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--s1, rgba(0,0,0,.22));
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .12s, background .12s;
}
.ovl-picker-row:hover {
  border-color: rgba(0,113,227,.45);
  background: rgba(0,113,227,.08);
}
.ovl-picker-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ovl-picker-size {
  font-size: 11px;
  color: var(--text3);
  flex-shrink: 0;
}
.ovl-picker-row .sm-btn {
  flex-shrink: 0;
}
#btnOpenOverlayPicker.scr-btn.accent {
  background: rgba(0,113,227,.2);
  border-color: rgba(0,113,227,.45);
  color: #6cb6ff;
  font-weight: 700;
  letter-spacing: .03em;
}
#btnOpenOverlayPicker.scr-btn.accent:hover {
  background: rgba(0,113,227,.32);
}

/* ══ Phone Settings (Controls → Phone) ══════════════════════════════════════ */
.ctrl-pane[data-ctrl-pane="phone"]{
  overflow-y:auto !important;
  min-height:0 !important;
  padding:4px 2px 16px !important;
}
.phone-settings{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  width:100% !important;
  max-width:720px !important;
  margin:0 auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
}
.phone-settings-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}
.phone-settings-head-text{ min-width:0; flex:1 1 auto; }
.phone-settings-title{
  font-size:15px !important;font-weight:750 !important;letter-spacing:-.02em !important;
  color:var(--text) !important;line-height:1.2 !important;
}
.phone-settings-sub{
  font-size:11.5px !important;color:var(--text3) !important;margin-top:2px !important;line-height:1.35 !important;
}
.ps-refresh-btn{
  appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:32px !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none !important;
  padding:0 12px !important;
  border-radius:9px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.06) !important;
  color:var(--text2) !important;
  font-size:12px !important;
  font-weight:650 !important;
  cursor:pointer !important;
  flex-shrink:0 !important;
}
.ps-refresh-btn:hover{ background:rgba(255,255,255,.1) !important; color:var(--text) !important; }

.phone-settings-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:10px !important;
  align-items:start !important;
}
.phone-settings-grid .ps-section-sound{
  grid-column:1 / -1 !important;
}

.ps-section{
  display:flex !important;
  flex-direction:column !important;
  gap:6px !important;
  padding:12px 14px !important;
  border-radius:12px !important;
  border:1px solid var(--border, rgba(255,255,255,.08)) !important;
  background:rgba(255,255,255,.03) !important;
  box-sizing:border-box !important;
  min-width:0 !important;
}
.ps-section-lbl{
  font-size:10px !important;font-weight:700 !important;letter-spacing:.07em !important;
  text-transform:uppercase !important;color:var(--text3) !important;margin:0 0 4px !important;
}

/* Toggle rows — fixed switch, never stretch */
.ps-toggle-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  min-height:36px !important;
  cursor:pointer !important;
  user-select:none !important;
  width:100% !important;
  margin:0 !important;
}
.ps-toggle-label{
  display:block !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:var(--text) !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.ps-switch-wrap{
  position:relative !important;
  display:inline-flex !important;
  flex:0 0 44px !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:26px !important;
  flex-shrink:0 !important;
}
/* Hide native checkbox but keep clickable */
.ps-switch-wrap .ps-switch,
#phoneSettingsPanel input.ps-switch[type="checkbox"]{
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  margin:0 !important;
  padding:0 !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:26px !important;
  opacity:0 !important;
  cursor:pointer !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  flex:none !important;
}
.ps-switch-ui{
  position:absolute !important;
  inset:0 !important;
  border-radius:980px !important;
  background:rgba(120,120,128,.38) !important;
  transition:background .18s ease !important;
  pointer-events:none !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12) !important;
}
.ps-switch-ui::after{
  content:'' !important;
  position:absolute !important;
  top:3px !important;
  left:3px !important;
  width:20px !important;
  height:20px !important;
  border-radius:50% !important;
  background:#fff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.28) !important;
  transition:transform .18s ease !important;
}
.ps-switch-wrap .ps-switch:checked + .ps-switch-ui{
  background:var(--accent,#0a84ff) !important;
}
.ps-switch-wrap .ps-switch:checked + .ps-switch-ui::after{
  transform:translateX(18px) !important;
}
.ps-switch-wrap .ps-switch:focus-visible + .ps-switch-ui{
  outline:2px solid var(--accent,#0a84ff) !important;
  outline-offset:2px !important;
}

.ps-slider-row{
  display:grid !important;
  grid-template-columns:88px minmax(0,1fr) 40px !important;
  align-items:center !important;
  gap:8px !important;
  min-height:28px !important;
}
.ps-slider-label{
  font-size:12px !important;font-weight:600 !important;color:var(--text2) !important;
  min-width:0 !important;white-space:nowrap !important;
}
.ps-slider-val{
  font-size:11px !important;font-weight:700 !important;font-variant-numeric:tabular-nums !important;
  color:var(--text3) !important;text-align:right !important;
}
#phoneSettingsPanel input.ps-range[type="range"]{
  -webkit-appearance:none !important;
  appearance:none !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:4px !important;
  margin:0 !important;
  padding:0 !important;
  border:none !important;
  border-radius:4px !important;
  background:rgba(120,120,128,.35) !important;
  outline:none !important;
  cursor:pointer !important;
  flex:none !important;
}
#phoneSettingsPanel input.ps-range[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none !important;
  width:14px !important;height:14px !important;border-radius:50% !important;
  background:var(--accent,#0a84ff) !important;border:2px solid #fff !important;
  box-shadow:0 1px 3px rgba(0,0,0,.3) !important;cursor:pointer !important;
}
#phoneSettingsPanel input.ps-range[type="range"]::-moz-range-thumb{
  width:14px !important;height:14px !important;border-radius:50% !important;
  background:var(--accent,#0a84ff) !important;border:2px solid #fff !important;cursor:pointer !important;
}

.ps-ringer-row{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:6px !important;
  margin-bottom:6px !important;
}
.ps-ringer-btn{
  min-height:40px !important;
  width:100% !important;
  max-width:none !important;
  border-radius:10px !important;
  cursor:pointer !important;
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;
  padding:6px 4px !important;
  border:1px solid rgba(255,255,255,.1) !important;
  background:rgba(255,255,255,.04) !important;
  color:var(--text2) !important;
  font-size:10px !important;
  font-weight:650 !important;
  transition:background .15s,border-color .15s,color .15s !important;
}
.ps-ringer-btn:hover{ background:rgba(255,255,255,.08) !important; color:var(--text) !important; }
.ps-ringer-btn.active{
  border-color:rgba(10,132,255,.45) !important;
  background:rgba(10,132,255,.16) !important;
  color:var(--accent,#0a84ff) !important;
}
.ps-footnote{
  margin:0 !important;font-size:11px !important;line-height:1.4 !important;color:var(--text3) !important;
}

html[data-theme="light"] .ps-section{
  background:#fff !important;border-color:rgba(60,60,67,.12) !important;
}
html[data-theme="light"] .ps-switch-ui{ background:rgba(120,120,128,.28) !important; }
html[data-theme="light"] .ps-refresh-btn{
  background:#fff !important;border-color:rgba(60,60,67,.14) !important;color:#3a3a3c !important;
}
html[data-theme="light"] .ps-ringer-btn{
  background:#f2f2f7 !important;border-color:rgba(60,60,67,.12) !important;color:#636366 !important;
}
html[data-theme="light"] .ps-ringer-btn.active{
  background:rgba(10,132,255,.12) !important;color:#0071e3 !important;border-color:rgba(10,132,255,.35) !important;
}

@media (max-width:640px){
  .phone-settings-grid{ grid-template-columns:1fr !important; }
  .phone-settings-grid .ps-section-sound{ grid-column:auto !important; }
  .ps-slider-row{
    grid-template-columns:minmax(0,1fr) 40px !important;
    grid-template-rows:auto auto !important;
  }
  .ps-slider-label{ grid-column:1 / -1 !important; }
}

/* ══ Collapsible topbar search ══════════════════════════════════════════════ */
.topbar-search-wrap{
  display:inline-flex;align-items:center;gap:0;
  position:relative;flex:0 0 auto;min-width:0;
  height:34px;
}
.topbar-search-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:var(--s2,rgba(255,255,255,.06));
  border:1px solid var(--border,rgba(255,255,255,.1));
  color:var(--text2,#aeaeb2);cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.topbar-search-toggle:hover{color:var(--text,#f5f5f7);border-color:var(--accent,#0a84ff);background:rgba(10,132,255,.12)}
.topbar-search-wrap .search,
.topbar-search-wrap #searchInput{
  width:0;max-width:0;opacity:0;padding:0;margin:0;border:0;
  pointer-events:none;overflow:hidden;
  height:34px;line-height:34px;
  transition:width .2s ease,max-width .2s ease,opacity .15s,padding .2s,margin .2s;
  text-align:left;
  vertical-align:middle;
}
.topbar-search-wrap.is-open .search,
.topbar-search-wrap.is-open #searchInput{
  width:min(240px,42vw);max-width:min(240px,42vw);opacity:1;
  pointer-events:auto;padding:0 32px 0 12px;margin:0 0 0 6px;
  border:1px solid var(--border,rgba(255,255,255,.12));
  border-radius:10px;
  background:var(--s2,rgba(255,255,255,.06));
  color:var(--text,#f5f5f7);
  font-size:13px;line-height:34px;height:34px;
  box-sizing:border-box;
}
.topbar-search-wrap.is-open .search::placeholder,
.topbar-search-wrap.is-open #searchInput::placeholder{
  color:var(--text3,#8e8e93);
  line-height:34px;
  opacity:1;
}
.topbar-search-wrap.is-open .topbar-search-toggle{display:none}
.topbar-search-close{
  display:none;position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:6px;border:0;background:transparent;
  color:var(--text3);cursor:pointer;align-items:center;justify-content:center;padding:0;
}
.topbar-search-wrap.is-open .topbar-search-close{display:inline-flex}
.topbar-search-close:hover{color:var(--text);background:rgba(255,255,255,.08)}
.topbar-profile-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;padding:0;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(135deg,rgba(10,132,255,.35),rgba(88,86,214,.35));
  cursor:pointer;flex-shrink:0;
}
.topbar-profile-avatar{
  font-size:12px;font-weight:800;color:#fff;letter-spacing:.02em;text-transform:uppercase;
  line-height:1;user-select:none;
}
.topbar-profile-btn:hover{box-shadow:0 0 0 3px rgba(10,132,255,.25)}

/* Crypto method brand icons — must stay visible */
.pur-method-ico svg,
#purchasePanel .pur-method-ico svg,
#purchasePanel .pur-method-opt .pur-method-ico svg{
  width:22px!important;height:22px!important;display:block!important;
  visibility:visible!important;opacity:1!important;
  flex-shrink:0!important;max-width:none!important;max-height:none!important;
}
.pur-method-ico,
#purchasePanel .pur-method-ico,
#purchasePanel .pur-method-opt .pur-method-ico{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  padding:0!important;overflow:visible!important;
  background:transparent!important;border:none!important;
  width:28px!important;height:28px!important;border-radius:8px!important;
}
.pur-ico-usdt,.pur-ico-trx,.pur-ico-btc,.pur-ico-eth{
  color:inherit!important;background:transparent!important;border:none!important;
}

/* ══ Profile page ═══════════════════════════════════════════════════════════ */
.profile-root{
  flex:1;min-height:0;overflow:auto;
  padding:20px 24px 40px;
  background:transparent;
}
.profile-page{max-width:920px;margin:0 auto}
.profile-hero{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:20px 22px;border-radius:16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  margin-bottom:16px;
}
.profile-avatar{
  width:64px;height:64px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:800;color:#fff;letter-spacing:.04em;
  background:linear-gradient(135deg,#0a84ff,#5856d6);
  box-shadow:0 8px 24px rgba(10,132,255,.28);
  flex-shrink:0;
}
.profile-hero-text{flex:1;min-width:140px}
.profile-name{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text,#f5f5f7)}
.profile-role{margin:4px 0 0;font-size:13px;color:var(--text2,#aeaeb2);font-weight:500}
.profile-buy-btn{
  border:0;border-radius:999px;padding:10px 18px;font-weight:700;font-size:13px;
  background:linear-gradient(135deg,#0a84ff,#0071e3);color:#fff;cursor:pointer;
}
.profile-buy-btn:hover{filter:brightness(1.08)}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.profile-card{
  border-radius:14px;padding:16px 18px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
}
.profile-card-title{
  margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text3,#8e8e93);
}
.profile-dl{margin:0}
.profile-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.profile-row:last-child{border-bottom:0}
.profile-row dt{font-size:12px;color:var(--text3);font-weight:500}
.profile-row dd{margin:0;font-size:13px;font-weight:700;color:var(--text);text-align:right;word-break:break-all}
.profile-kpis{display:flex;gap:10px}
.profile-kpi{
  flex:1;text-align:center;padding:14px 8px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
}
.profile-kpi-n{display:block;font-size:22px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.profile-kpi-l{display:block;margin-top:4px;font-size:11px;color:var(--text3);font-weight:600}
.profile-kpi.on .profile-kpi-n{color:#30d158}
.profile-kpi.off .profile-kpi-n{color:#ff453a}
.profile-actions{display:flex;flex-direction:column;gap:8px}
.profile-action-btn{
  border-radius:10px;padding:11px 14px;font-size:13px;font-weight:600;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--text);text-align:left;
}
.profile-action-btn:hover{background:rgba(10,132,255,.12);border-color:rgba(10,132,255,.35)}
.profile-action-btn.danger{color:#ff6b6b}
.profile-action-btn.danger:hover{background:rgba(255,69,58,.12);border-color:rgba(255,69,58,.35)}
html[data-theme="light"] .profile-hero,
html[data-theme="light"] .profile-card{
  background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.08);
}
html[data-theme="light"] .profile-kpi{background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.06)}