@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   PhoneBook OSINT — Enterprise Dark UI
   System: flat surface ladder + hairline borders + single accent.
   No gradients, no glow, no glass. Hierarchy comes from lift and line.
   ═══════════════════════════════════════════════════════════════════ */

:root {
    /* Surface ladder (base → raised) */
    --bg-base:      #0d0e10;   /* canvas */
    --bg-surface:   #141619;   /* cards, table cells */
    --bg-surface-2: #1a1d22;   /* panel headers, hovered rows */
    --bg-elevated:  #202429;   /* menus, palette, toasts */
    --bg-input:     #101216;   /* fields */

    /* Hairlines */
    --border-hair:   rgba(255,255,255,0.06);
    --border-subtle: rgba(255,255,255,0.04);
    --border-strong: rgba(255,255,255,0.12);

    /* Type */
    --text-primary:   #e8eaed;
    --text-secondary: #9aa0a6;
    --text-muted:     #6b7078;
    --text-faint:     #4a4e55;

    /* Single chromatic accent + semantic */
    --accent:      #4d7fff;
    --accent-2:    #6b93ff;   /* lighter variant, hover */
    --accent-3:    #38b25c;   /* success */
    --accent-purple: #a882ff; /* secondary accent for badges/tags */
    --accent-dim:  rgba(77,127,255,0.10);
    --accent-glow: rgba(77,127,255,0.22);
    --danger:      #e5534b;
    --warn:        #d7a137;

    /* Geometry */
    --radius:      8px;
    --radius-sm:   6px;
    --radius-xs:   4px;
    --blur: 0px;

    /* Shadows: subtle but present — gives depth without being heavy */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.18);
    --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.32), 0 1px 3px rgba(0,0,0,0.2);
    --shadow-pop:  0 12px 32px rgba(0,0,0,0.48), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-glow: none;

    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
    --font-sans: 'Inter', 'IBM Plex Sans Arabic', -apple-system, 'Segoe UI', sans-serif;

    --gap-xs: 0.25rem; --gap-sm: 0.5rem; --gap-md: 0.875rem; --gap-lg: 1.25rem; --gap-xl: 2rem;
}

/* ── Base ── */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
button, a, [role="button"], .tab, select, input { touch-action:manipulation; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
h1, h2, h3 { text-wrap:balance; }
select { background-color:var(--bg-input); color:var(--text-secondary); }
select option { background-color:var(--bg-elevated); color:var(--text-primary); }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.09); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,0.16); }

body {
    font-family:var(--font-sans);
    color:var(--text-primary);
    min-height:100vh;
    padding:2rem 1.5rem;
    background:var(--bg-base);
    font-variant-numeric:tabular-nums;
    font-feature-settings:'cv02','cv03','cv04';
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    line-height:1.55;
}
::selection { background:rgba(77,127,255,0.35); color:#fff; }

.container { max-width:1400px; margin:0 auto; }

/* ── Header ── */
.header { margin-bottom:var(--gap-lg); display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:var(--gap-sm); }
.brand { display:flex; align-items:center; gap:0.5rem; cursor:pointer; user-select:none; transition:opacity 0.15s; }
.brand:hover { opacity:0.85; }
.brand-logo { flex-shrink:0; filter:drop-shadow(0 1px 3px rgba(77,127,255,0.3)); }
.header h1 { font-size:1.35rem; font-weight:700; color:var(--text-primary); letter-spacing:-0.025em; }
.header .sub { color:var(--text-muted); font-size:0.78rem; }
.header-actions { display:flex; align-items:center; gap:0.5rem; }

/* ── Stats Bar ── */
.stats-bar { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:0.5rem; margin-bottom:var(--gap-md); }
.stat-card {
    background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%);
    border:1px solid var(--border-hair);
    border-radius:var(--radius);
    padding:0.7rem 0.9rem;
    box-shadow:var(--shadow-card);
    transition:border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.stat-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-card-hover); transform:translateY(-1px); }
.stat-card .label { font-size:0.6rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
.stat-card .value { font-size:1.15rem; font-weight:600; color:var(--text-primary); margin-top:0.1rem; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
.stat-card .value.green { color:var(--accent-3); }
.stat-card .value.blue  { color:var(--accent); }

/* ── Tabs (clean underline, page-integrated) ── */
.tabs {
    display:flex; gap:0;
    margin-bottom:var(--gap-md);
    border-bottom:1px solid var(--border-hair);
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.tabs::-webkit-scrollbar { display:none; }
.tab {
    padding:0.6rem 1.1rem;
    font-size:0.8rem; font-weight:500; cursor:pointer;
    border:none; border-bottom:2px solid transparent;
    background:transparent; color:var(--text-muted);
    transition:color 0.12s, border-color 0.12s;
    white-space:nowrap; flex-shrink:0;
    margin-bottom:-1px;
}
.tab:hover:not(.active) { color:var(--text-primary); background:rgba(255,255,255,0.03); }
.tab.active { color:var(--text-primary); border-bottom-color:var(--accent); font-weight:600; background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-base) 100%); border-top:1px solid var(--border-hair); border-left:1px solid var(--border-hair); border-right:1px solid var(--border-hair); border-top-left-radius:var(--radius-sm); border-top-right-radius:var(--radius-sm); }

/* ── Search Bar (enterprise: contained surface, search icon, controlled layout) ── */
.search-bar {
    display:flex; gap:0.5rem; margin-bottom:var(--gap-md);
    align-items:center; flex-wrap:nowrap;
    background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%);
    border:1px solid var(--border-hair);
    border-radius:var(--radius);
    padding:0.5rem;
    box-shadow:var(--shadow-card);
}
.search-bar .search-input-wrap {
    flex:1; display:flex; align-items:center; gap:0.5rem;
    background:var(--bg-input); border:1px solid var(--border-hair);
    border-radius:var(--radius-sm); padding:0 0.85rem;
    transition:border-color 0.15s, box-shadow 0.15s;
    min-width:0;
}
.search-bar .search-input-wrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.search-bar .search-icon { color:var(--text-faint); flex-shrink:0; display:flex; align-items:center; }
.search-bar .search-input {
    flex:1; background:transparent; border:none; border-radius:0;
    color:var(--text-primary); font-size:0.88rem; padding:0.6rem 0;
    min-width:0; outline:none; font-family:var(--font-sans);
}
.search-bar .search-input::placeholder { color:var(--text-faint); }
select, button { font-family:inherit; }

/* ── Shared form controls (search-bar + filters-row + filter-bar) ── */
.search-bar .sel,
.filters-row select,
.filter-bar select {
    background:var(--bg-input); border:1px solid var(--border-hair);
    border-radius:var(--radius-sm); color:var(--text-secondary);
    padding:0.55rem 0.7rem; font-size:0.78rem; cursor:pointer; outline:none;
    transition:border-color 0.15s; white-space:nowrap; flex-shrink:0;
}
.search-bar .sel:hover,
.filters-row select:hover,
.filter-bar select:hover { border-color:var(--border-strong); }

/* ── Buttons ── */
.btn-go {
    background:linear-gradient(180deg, var(--accent) 0%, #3a6aef 100%);
    border:1px solid var(--accent);
    border-radius:var(--radius-sm); color:#fff; font-weight:600;
    padding:0.6rem 1.3rem; font-size:0.8rem; cursor:pointer;
    transition:background 0.15s ease, box-shadow 0.15s ease; white-space:nowrap; flex-shrink:0;
    box-shadow:0 1px 3px rgba(77,127,255,0.25);
}
.btn-go:hover { background:linear-gradient(180deg, var(--accent-2) 0%, var(--accent) 100%); border-color:var(--accent-2); box-shadow:0 2px 8px rgba(77,127,255,0.3); }
.btn-go:active { transform:none; }
.btn-go:disabled { opacity:0.45; cursor:not-allowed; }
.btn-sec {
    background:var(--bg-surface); border:1px solid var(--border-hair);
    border-radius:var(--radius-sm); color:var(--text-primary);
    padding:0.6rem 1.1rem; font-size:0.8rem; cursor:pointer;
    transition:border-color 0.15s, background 0.15s, box-shadow 0.15s; white-space:nowrap; flex-shrink:0;
}
.btn-sec:hover { border-color:var(--border-strong); background:var(--bg-surface-2); box-shadow:0 1px 4px rgba(0,0,0,0.2); }
#backBtn {
    background:var(--bg-surface-2); border:1px solid var(--border-hair);
    border-radius:var(--radius-sm); padding:0.6rem 0.75rem;
    color:var(--text-muted); font-size:0.85rem; cursor:pointer; flex-shrink:0;
    transition:border-color 0.15s, color 0.15s;
    width:38px; text-align:center;
}
#backBtn:hover:not(:disabled) { border-color:var(--border-strong); color:var(--text-primary); }
#backBtn:disabled { opacity:0.4; cursor:default; }
.nav-crumb { display:inline-block; color:var(--text-secondary); font-size:0.76rem; margin-bottom:0; min-height:1rem; white-space:nowrap; flex-shrink:0; }
.nav-crumb b { color:var(--text-primary); font-weight:600; }

/* ── Status ── */
.status-line { font-size:0.8rem; color:var(--text-muted); margin-bottom:var(--gap-md); display:flex; gap:var(--gap-md); align-items:center; }
.type-tag { padding:0.2rem 0.6rem; border-radius:var(--radius-xs); font-size:0.68rem; font-weight:600; }
.type-tag.phone { background:rgba(56,178,92,0.12); color:var(--accent-3); border:1px solid rgba(56,178,92,0.22); }
.type-tag.name  { background:var(--accent-dim); color:var(--accent); border:1px solid rgba(77,127,255,0.22); }
.status-line .count { color:var(--text-secondary); font-weight:600; }
.status-line .time  { color:var(--text-faint); font-variant-numeric:tabular-nums; }

/* ── Filter Bar (search view: country + locked/unlocked; logs: user/country/locked) ── */
.filter-bar {
    display:flex; gap:0.5rem; margin-bottom:var(--gap-md);
    flex-wrap:wrap; align-items:center;
    background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%);
    border:1px solid var(--border-hair);
    border-radius:var(--radius);
    padding:0.5rem 0.65rem;
    box-shadow:var(--shadow-card);
}
.filter-bar > .filter-label { font-size:0.68rem; color:var(--text-muted); white-space:nowrap; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; margin-left:0.35rem; }
.filter-group { display:flex; align-items:center; gap:0.35rem; flex-wrap:nowrap; }
.filter-sep { width:1px; height:24px; background:var(--border-hair); flex-shrink:0; }
.filter-bar select,
.filter-bar .input-sm,
.filter-bar .btn-sec,
.filter-bar .btn-go,
.filter-bar .chk-label {
    background:var(--bg-input); border:1px solid var(--border-hair);
    border-radius:var(--radius-sm); color:var(--text-secondary);
    padding:0.5rem 0.7rem; font-size:0.76rem;
    outline:none; transition:border-color 0.15s;
    flex-shrink:0;
}
.filter-bar .input-sm { min-width:90px; width:90px; flex:0 0 auto; }
.filter-bar .input-sm:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); color:var(--text-primary); }
.filter-bar .input-sm::placeholder { color:var(--text-faint); }

/* User ID filter chip */
.uid-filter-wrap { position:relative; flex-shrink:0; }
.uid-chip {
  display:inline-flex; align-items:center; gap:0.35rem;
  background:rgba(34,197,94,0.18); border:1px solid rgba(34,197,94,0.45);
  border-radius:var(--radius-sm); padding:0.35rem 0.6rem;
  font-size:0.76rem; font-weight:600; color:#4ade80;
  white-space:nowrap; line-height:1;
}
.uid-chip-x {
  background:none; border:none; color:#4ade80; cursor:pointer;
  font-size:1rem; line-height:1; padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%; transition:background 0.15s;
}
.uid-chip-x:hover { background:rgba(248,113,113,0.25); color:#f87171; }
.uid-filter-wrap.has-chip .input-sm { display:none; }
.filter-bar select { cursor:pointer; }
.filter-bar select:hover,
.filter-bar .btn-sec:hover,
.filter-bar .chk-label:hover { border-color:var(--border-strong); color:var(--text-primary); }
.filter-bar .btn-sec { cursor:pointer; background:var(--bg-surface); }
.filter-bar .btn-sec:hover { background:var(--bg-surface-2); }
.filter-bar input[type="checkbox"] { accent-color:var(--accent); width:14px; height:14px; cursor:pointer; }

/* ── Checkbox pill labels (shared across filter-bar and filter rows) ── */
.chk-label { display:inline-flex; align-items:center; gap:0.35rem; font-size:0.75rem; color:var(--text-secondary); cursor:pointer; user-select:none; padding:0.42rem 0.65rem; border:1px solid var(--border-hair); border-radius:var(--radius-sm); background:var(--bg-input); transition:border-color 0.15s, color 0.15s, background 0.15s; white-space:nowrap; flex-shrink:0; }
.chk-label:hover { border-color:var(--border-strong); color:var(--text-primary); background:var(--bg-surface); }
.chk-label:has(input:checked) { border-color:rgba(77,127,255,0.4); color:var(--accent); background:var(--accent-dim); }
.chk-label input[type="checkbox"] { accent-color:var(--accent); width:14px; height:14px; cursor:pointer; }

/* ── Tables ── */
.tbl-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border-hair); background:var(--bg-surface); box-shadow:var(--shadow-card); }
.tbl { width:100%; border-collapse:collapse; }
.tbl th {
    text-align:right; padding:0.7rem 1.1rem; font-size:0.64rem; font-weight:600;
    color:var(--text-muted); border-bottom:1px solid var(--border-strong);
    text-transform:uppercase; letter-spacing:0.06em;
    background:linear-gradient(180deg, var(--bg-surface-2) 0%, var(--bg-surface) 100%);
    cursor:pointer; user-select:none; white-space:nowrap;
    position:sticky; top:0; z-index:1;
}
.tbl th:hover { color:var(--text-primary); }
.th-asc::after  { content:" ▲"; color:var(--accent); font-size:0.62rem; }
.th-desc::after { content:" ▼"; color:var(--accent); font-size:0.62rem; }
.tbl td {
    padding:0.75rem 1.1rem; border-bottom:1px solid var(--border-subtle);
    font-size:0.86rem; vertical-align:top;
    font-variant-numeric:tabular-nums;
}
.tbl tr:hover td { background:rgba(255,255,255,0.025); }
.tbl tr:last-child td { border-bottom:none; }

/* ── Logs table: fixed layout & scrollable container ── */
#logResultsContainer { height:calc(100vh - 320px); min-height:300px; overflow-y:auto; overflow-x:hidden; }
#logResultsContainer .tbl-wrap { border-radius:0; border:none; box-shadow:none; height:100%; }
#logResultsContainer .tbl { table-layout:fixed; }
#logResultsContainer .tbl th:nth-child(1), #logResultsContainer .tbl td:nth-child(1) { width:150px; } /* Date */
#logResultsContainer .tbl th:nth-child(2), #logResultsContainer .tbl td:nth-child(2) { width:300px; } /* User */
#logResultsContainer .tbl th:nth-child(3), #logResultsContainer .tbl td:nth-child(3) { width:110px; }  /* Type */
#logResultsContainer .tbl th:nth-child(4), #logResultsContainer .tbl td:nth-child(4) { width:200px; max-width:200px; }   /* Query */
#logResultsContainer .tbl th:nth-child(5), #logResultsContainer .tbl td:nth-child(5) { width:60px; }  /* Country */
#logResultsContainer .tbl th:nth-child(6), #logResultsContainer .tbl td:nth-child(6) { width:300px; } /* In App */
#logResultsContainer .tbl td { overflow:hidden; text-overflow:ellipsis; }
/* Zebra striping for logs table */
#logResultsContainer .tbl tbody tr:nth-child(odd) td { background:rgba(255,255,255,0.015); }
#logResultsContainer .tbl tbody tr:hover td { background:rgba(77,127,255,0.04); }
/* Row spacing */
#logResultsContainer .tbl td { padding:0.6rem 0.9rem; }
#logResultsContainer .tbl th { padding:0.6rem 0.9rem; }
#logPaginationBar { position:sticky; bottom:0; background:var(--bg-body); padding:0.5rem 0; z-index:2; }
.c-name { color:var(--text-primary); font-weight:500; max-width:380px; word-break:break-word; cursor:pointer; line-height:1.5; }
.c-name:hover { color:var(--accent); }
.c-phone { color:var(--accent); font-family:var(--font-mono); font-size:0.82rem; cursor:pointer; white-space:nowrap; }
.c-phone:hover { color:var(--accent-2); text-decoration:underline; }
.c-country { color:var(--text-secondary); font-size:0.76rem; white-space:nowrap; }
.c-id { color:var(--text-faint); font-size:0.7rem; font-family:var(--font-mono); white-space:nowrap; }
/* ── Social Links ── */
.social-link { display:inline-block; width:22px; height:22px; line-height:22px; text-align:center; border-radius:var(--radius-xs); font-size:0.62rem; font-weight:700; margin-left:3px; text-decoration:none; transition:opacity 0.15s; vertical-align:middle; }
.social-link:hover { opacity:0.85; }
.social-link.fb { background:#1877f2; color:#fff; }
.fb-handle { font-size:0.66rem; color:var(--text-secondary); margin-left:0.25rem; vertical-align:middle; }
.gender-tag { display:inline-block; padding:0.12rem 0.45rem; border-radius:3px; font-size:0.6rem; font-weight:600; margin-left:3px; background:rgba(255,255,255,0.06); color:var(--text-secondary); vertical-align:middle; }

/* ── Badges ── */
.badge { display:inline-flex; align-items:center; gap:0.15rem; font-size:0.62rem; padding:0.14rem 0.5rem; border-radius:var(--radius-xs); font-weight:600; white-space:nowrap; }
.b-locked  { background:rgba(229,83,75,0.12);  color:var(--danger); border:1px solid rgba(229,83,75,0.22); }
.b-deleted { background:rgba(229,83,75,0.07);  color:var(--danger); border:1px solid rgba(229,83,75,0.15); }
.b-popular { background:rgba(56,178,92,0.10);  color:var(--accent-3); border:1px solid rgba(56,178,92,0.2); }
.b-risk    { background:rgba(215,161,55,0.10); color:var(--warn); border:1px solid rgba(215,161,55,0.22); }
.b-wabiz   { background:rgba(56,178,92,0.12);  color:var(--accent-3); border:1px solid rgba(56,178,92,0.22); }
.b-dir     { background:rgba(168,130,255,0.10); color:var(--accent-purple); }
.b-searched{ background:var(--accent-dim); color:var(--accent); }
.b-self    { background:rgba(56,178,92,0.12);  color:var(--accent-3); border:1px solid rgba(56,178,92,0.22); }
.b-count   { background:rgba(168,130,255,0.10); color:var(--accent-purple); font-weight:700; }
.b-gov     { background:rgba(77,127,255,0.12); color:var(--accent-2); border:1px solid rgba(77,127,255,0.22); }
.b-intel   { background:rgba(229,83,75,0.10);  color:var(--danger); border:1px solid rgba(229,83,75,0.2); }
.b-payer   { background:rgba(255,193,7,0.12); color:#ffc107; border:1px solid rgba(255,193,7,0.22); }
.b-saviorx { background:rgba(23,162,184,0.12); color:#17a2b8; border:1px solid rgba(23,162,184,0.22); }
.b-lockinfo{ background:rgba(108,117,125,0.12); color:#adb5bd; border:1px solid rgba(108,117,125,0.22); }
.b-danger  { background:rgba(229,83,75,0.15);  color:var(--danger); border:1px solid rgba(229,83,75,0.3); font-weight:700; }
.b-warn    { background:rgba(215,161,55,0.12); color:var(--warn); border:1px solid rgba(215,161,55,0.22); }
.b-burner  { background:rgba(229,83,75,0.08);  color:var(--danger); border:1px dashed rgba(229,83,75,0.22); }
.b-scraper { background:rgba(168,130,255,0.12); color:var(--accent-purple); border:1px solid rgba(168,130,255,0.22); font-weight:600; }
.row-locked td { opacity:0.55; }
.row-deleted .c-name, .row-deleted .c-phone { text-decoration:line-through; color:var(--danger) !important; }
.row-bookmarked td { background:rgba(56,178,92,0.08) !important; }
.row-bookmarked:hover td { background:rgba(56,178,92,0.14) !important; }
.row-highlight td { background:var(--accent-dim) !important; box-shadow:inset 2px 0 0 var(--accent); }
.row-highlight td:first-child { box-shadow:inset 3px 0 0 var(--accent); }
.enrich-row { display:flex; flex-wrap:wrap; gap:0.25rem; margin-top:0.3rem; }
.alt-names  { display:flex; flex-wrap:wrap; gap:0.2rem; margin-top:0.25rem; }
.alt-name   { font-size:0.72rem; color:var(--text-secondary); background:rgba(255,255,255,0.04); padding:0.08rem 0.45rem; border-radius:var(--radius-xs); line-height:1.5; }

/* ── User Intel (Logs) ── */
.user-cell { font-size:0.78rem; line-height:1.5; }
.user-head { display:flex; align-items:center; gap:0.35rem; margin-bottom:0.2rem; }
.user-id { color:var(--accent-2); font-family:var(--font-mono); cursor:pointer; font-weight:600; font-size:0.82rem; }
.user-id:hover { text-decoration:underline; }
.user-details { display:flex; flex-wrap:wrap; gap:0.2rem; align-items:center; }
.ui-tag { font-size:0.66rem; padding:0.1rem 0.4rem; border-radius:var(--radius-xs); white-space:nowrap; line-height:1.4; }
.ui-name { color:var(--text-primary); cursor:pointer; } .ui-name:hover { color:var(--accent); }
.ui-phone { color:var(--accent); cursor:pointer; } .ui-phone:hover { text-decoration:underline; }
.ui-device  { color:var(--text-secondary); background:rgba(255,255,255,0.05); }
.ui-os      { color:var(--accent-purple); background:rgba(168,130,255,0.08); }
.ui-ip      { color:var(--warn); background:rgba(215,161,55,0.08); font-family:var(--font-mono); }
.ui-joined  { color:var(--text-muted); }
.ui-verified{ color:var(--accent-3); font-weight:600; }
.ui-searches{ background:var(--accent-dim); color:var(--accent); font-size:0.6rem; font-weight:600; padding:0.08rem 0.35rem; border-radius:var(--radius-xs); white-space:nowrap; }
.text-muted-sm { color:var(--text-muted); font-size:0.72rem; }
.inapp-cell { line-height:1.5; }
.inapp-name { font-size:0.78rem !important; font-weight:500; }
.inapp-phone { font-size:0.78rem !important; }
.inapp-alt-names { font-size:0.64rem; color:var(--text-secondary); margin-top:0.15rem; line-height:1.4; }
.names-toggle { font-size:0.62rem; color:var(--accent); cursor:pointer; margin-left:0.2rem; }
.names-toggle:hover { text-decoration:underline; }
.names-hidden { display:none; margin-top:0.15rem; font-size:0.66rem; color:var(--text-secondary); line-height:1.5; }
.names-hidden.show { display:block; }

/* ── Identity Cards ── */
.id-subtabs { display:flex; gap:0.3rem; margin-bottom:var(--gap-lg); flex-wrap:wrap; }
.id-subtab {
    padding:0.5rem 1rem; border-radius:var(--radius-sm); font-size:0.79rem; font-weight:600;
    cursor:pointer; border:1px solid var(--border-hair); background:var(--bg-surface);
    color:var(--text-muted); transition:color 0.15s, background 0.15s, border-color 0.15s;
}
.id-subtab.active { background:var(--accent-dim); color:var(--text-primary); border-color:rgba(77,127,255,0.35); }
.id-subtab:hover:not(.active) { color:var(--text-primary); border-color:var(--border-strong); }
.id-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:var(--gap-sm); }
.id-card {
    background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%);
    border:1px solid var(--border-hair); border-radius:var(--radius);
    padding:1.05rem; box-shadow:var(--shadow-card); transition:border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.id-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-card-hover); transform:translateY(-1px); }
.id-card .id-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.5rem; }
.id-card .id-phone { color:var(--accent); font-family:var(--font-mono); font-size:0.85rem; cursor:pointer; }
.id-card .id-phone:hover { text-decoration:underline; }
.id-badge { font-size:0.6rem; font-weight:700; padding:0.15rem 0.5rem; border-radius:var(--radius-xs); text-transform:uppercase; letter-spacing:0.05em; }
.id-badge.self  { background:rgba(56,178,92,0.12);   color:var(--accent-3); border:1px solid rgba(56,178,92,0.22); }
.id-badge.dual  { background:rgba(215,161,55,0.12);  color:var(--warn); border:1px solid rgba(215,161,55,0.22); }
.id-badge.cross { background:rgba(168,130,255,0.12); color:var(--accent-purple); border:1px solid rgba(168,130,255,0.22); }
.id-badge.multi { background:rgba(229,83,75,0.12);   color:var(--danger); border:1px solid rgba(229,83,75,0.22); }
.id-card .id-names { color:var(--text-primary); font-size:0.8rem; line-height:1.55; margin-bottom:0.4rem; }
.id-card .id-meta { display:flex; flex-wrap:wrap; gap:0.25rem; margin-top:0.4rem; }
.id-card .id-meta .tag { font-size:0.65rem; padding:0.12rem 0.45rem; border-radius:var(--radius-xs); background:rgba(255,255,255,0.05); color:var(--text-secondary); }
.id-card .id-meta .tag.tribe { color:var(--warn); background:rgba(215,161,55,0.08); }
.id-card .id-meta .tag.count { color:var(--accent-purple); background:rgba(168,130,255,0.08); font-weight:600; }

/* ── Profile Cards ── */
.profile-header { display:flex; align-items:center; gap:0.6rem; margin-bottom:var(--gap-md); }
.profile-title { font-size:1rem; color:var(--text-primary); margin:0; font-weight:600; letter-spacing:-0.01em; }
.profile-card {
    background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%);
    border:1px solid var(--border-hair); border-radius:var(--radius);
    padding:1.25rem; margin-bottom:var(--gap-md); box-shadow:var(--shadow-card);
    transition:border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.profile-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-card-hover); transform:translateY(-1px); }
.profile-card h3 { font-size:0.92rem; color:var(--text-primary); margin:0 0 0.7rem; font-weight:600; display:flex; align-items:center; gap:0.4rem; letter-spacing:-0.01em; }
.profile-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:0.6rem; font-size:0.82rem; }
.profile-grid > div { padding:0.35rem 0; }
.profile-grid .lbl { color:var(--text-muted); }
.chart-container { position:relative; height:210px; margin-top:0.5rem; }

/* ── Misc ── */
.empty { text-align:center; padding:3rem 1rem; color:var(--text-faint); font-size:0.86rem; }
.error-msg { color:var(--danger); padding:0.7rem 1rem; font-size:0.82rem; background:rgba(229,83,75,0.07); border:1px solid rgba(229,83,75,0.18); border-radius:var(--radius-sm); margin-bottom:var(--gap-md); }

/* ── Loaders ── */
.skeleton {
    background:var(--bg-surface);
    border-radius:var(--radius-sm); height:48px; margin-bottom:0.4rem;
    animation:skeletonPulse 1.6s ease-in-out infinite;
}
@keyframes skeletonPulse { 0%,100% { opacity:0.55; } 50% { opacity:0.9; } }
.loader-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3.5rem 1rem; gap:1rem; }
.spinner {
    width:36px; height:36px; border-radius:50%;
    border:3px solid rgba(255,255,255,0.08);
    border-top-color:var(--accent);
    animation:spin 0.7s linear infinite;
}
.spinner.sm { width:22px; height:22px; border-width:2px; }
@keyframes spin { to { transform:rotate(360deg); } }
.pulse-dots { display:flex; gap:0.4rem; }
.pulse-dots span { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulseDot 1.4s ease-in-out infinite; }
.pulse-dots span:nth-child(2) { animation-delay:0.2s; opacity:0.7; }
.pulse-dots span:nth-child(3) { animation-delay:0.4s; opacity:0.45; }
@keyframes pulseDot { 0%,80%,100% { opacity:0.3; } 40% { opacity:1; } }
.loader-text { color:var(--text-muted); font-size:0.78rem; letter-spacing:0.3px; }

/* ── Pagination ── */
.pagination { display:flex; justify-content:center; align-items:center; gap:0.3rem; margin-top:var(--gap-lg); flex-wrap:wrap; }
.pagination button {
    background:var(--bg-surface); border:1px solid var(--border-hair);
    border-radius:var(--radius-sm); padding:0.5rem 1.1rem;
    color:var(--text-primary); font-size:0.79rem; cursor:pointer;
    transition:border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.pagination button:hover:not(:disabled) { border-color:var(--border-strong); background:var(--bg-surface-2); box-shadow:0 1px 4px rgba(0,0,0,0.2); }
.pagination button:disabled { opacity:0.3; cursor:not-allowed; }
.pagination .page-btn { padding:0.45rem 0.75rem; min-width:2.2rem; text-align:center; }
.pagination .page-btn.active { background:var(--accent-dim); border-color:rgba(77,127,255,0.4); color:var(--accent); font-weight:600; box-shadow:0 0 0 1px rgba(77,127,255,0.15); }
.pagination .page-btn.ellipsis { border:none; background:none; cursor:default; opacity:0.5; }
.pagination .info { color:var(--text-muted); font-size:0.78rem; padding:0 0.5rem; }

/* ── Filters Row (secondary views: users, ios, places, identity, bookmarks, history) ── */
.filters-row {
    display:flex; gap:0.5rem; margin-bottom:var(--gap-md);
    flex-wrap:wrap; align-items:center;
    background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%);
    border:1px solid var(--border-hair);
    border-radius:var(--radius);
    padding:0.5rem;
    box-shadow:var(--shadow-card);
}
.filters-row input, .filters-row select {
    background:var(--bg-input); border:1px solid var(--border-hair);
    border-radius:var(--radius-sm); color:var(--text-secondary);
    padding:0.55rem 0.7rem; font-size:0.78rem; outline:none;
    transition:border-color 0.15s, box-shadow 0.15s; flex-shrink:0;
}
.filters-row input { min-width:160px; flex:1; }
.filters-row input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); }
.filters-row input::placeholder { color:var(--text-faint); }
.filters-row select:hover, .filters-row input:hover { border-color:var(--border-strong); }
.filters-row .btn-go, .filters-row .btn-sec { flex-shrink:0; }
.input-sm { min-width:80px; flex:0 0 auto; width:80px; }

/* ── Responsive ── */
@media (max-width:1024px) {
    .id-grid { grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); }
    .profile-grid { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width:768px) {
    body { padding:0; padding-bottom:env(safe-area-inset-bottom); font-size:0.86rem; }
    .container { max-width:100%; padding:0 0.75rem; }

    /* Sticky header: full-width, compact */
    .sticky-header { position:sticky; top:0; z-index:100; background:var(--bg-base); border-bottom:1px solid var(--border-hair); padding:0.55rem 0.75rem; margin:0 -0.75rem 0.75rem !important; padding-top:max(0.55rem, env(safe-area-inset-top)); padding-left:max(0.75rem, env(safe-area-inset-left)); padding-right:max(0.75rem, env(safe-area-inset-right)); }
    .sticky-header .header-row { display:flex; align-items:center; justify-content:space-between; gap:0.4rem; }
    .sticky-header .brand { gap:0.4rem; }
    .brand-logo { width:22px; height:22px; }
    .sticky-header h1 { font-size:0.95rem; }
    .sticky-header .sub { display:none; }
    .sticky-header .cmd-trigger { display:none; }
    .user-name { display:none; }
    .user-btn { padding:0.3rem 0.45rem; }
    .user-avatar { width:28px; height:28px; font-size:0.7rem; }

    /* Stats: 2-col compact, hide aux cards */
    .stats-bar { grid-template-columns:repeat(3, 1fr); gap:0.35rem; margin-bottom:0.75rem; }
    .stat-card { padding:0.45rem 0.6rem; border-radius:var(--radius-xs); }
    .stat-card .label { font-size:0.54rem; }
    .stat-card .value { font-size:0.9rem; }
    .stat-card-aux { display:none; }

    /* Tabs: clean underline */
    .tabs { gap:0; margin-bottom:0.75rem; }
    .tab { padding:0.5rem 0.75rem; font-size:0.76rem; }

    /* Search bar: enterprise contained, wraps cleanly on mobile */
    .search-bar { flex-wrap:wrap; gap:0.4rem; margin-bottom:0.75rem; padding:0.4rem; }
    .search-bar > #backBtn { flex-shrink:0; width:34px; padding:0.5rem 0.5rem; font-size:0.8rem; }
    .search-bar > .search-input-wrap { flex:1 1 100%; order:1; }
    .search-bar > .search-input { font-size:16px; padding:0.5rem 0; }
    .search-bar > .sel { flex:1 1 auto; min-width:0; font-size:0.76rem; padding:0.5rem 0.55rem; }
    .search-bar > .btn-go { flex-shrink:0; padding:0.5rem 1rem; font-size:0.76rem; }

    /* Filter bar: card container matching search-bar */
    .filter-bar { gap:0.4rem; margin-bottom:0.75rem; padding:0.4rem; }
    .filter-bar > label:not(.chk-label) { font-size:0.68rem; }
    .filter-bar select,
    .filter-bar .input-sm,
    .filter-bar .btn-sec,
    .filter-bar .chk-label { padding:0.45rem 0.6rem; font-size:0.72rem; }
    .filter-bar .input-sm { min-width:75px !important; width:75px; }
    .chk-label { padding:0.45rem 0.6rem; font-size:0.72rem; }

    /* Filters row: card container for secondary views */
    .filters-row { gap:0.4rem; margin-bottom:0.75rem; padding:0.4rem; }
    .filters-row input { min-width:0; font-size:16px; }
    .filters-row select { font-size:0.76rem; padding:0.5rem 0.55rem; }

    /* Tables: readable, scrollable */
    .tbl-wrap { border-radius:var(--radius-sm); }
    .tbl { font-size:0.76rem; min-width:400px; }
    .tbl th, .tbl td { padding:0.5rem 0.65rem; }
    .tbl th { font-size:0.6rem; }
    .c-id, .c-country { display:none; }
    .c-name { max-width:160px; }

    /* Identity cards: single column */
    .id-grid { grid-template-columns:1fr !important; gap:0.5rem; }
    .id-card { padding:0.8rem; }
    .id-head { flex-wrap:wrap; gap:0.3rem; }
    .id-names { font-size:0.76rem; }
    .id-meta .tag { font-size:0.6rem; padding:0.12rem 0.4rem; }
    .id-subtabs { gap:0.25rem; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .id-subtabs::-webkit-scrollbar { display:none; }
    .id-subtab { padding:0.45rem 0.75rem; font-size:0.72rem; flex-shrink:0; }

    /* Profile */
    .profile-card { padding:0.85rem; margin-bottom:0.6rem; }
    .profile-grid { grid-template-columns:1fr 1fr; gap:0.5rem; }
    .profile-grid > div { padding:0.25rem 0; font-size:0.78rem; }
    .chart-container { height:160px; }

    /* Pagination: larger touch targets */
    .pagination { gap:0.25rem; padding:0.5rem 0; }
    .pagination button { padding:0.5rem 0.85rem; font-size:0.76rem; }
    .pagination .page-btn { padding:0.45rem 0.65rem; min-width:2rem; }

    /* Status line */
    .status-line { flex-wrap:wrap; gap:0.3rem; font-size:0.76rem; }

    /* User cell in logs */
    .user-cell { max-width:140px; overflow:hidden; text-overflow:ellipsis; }
    .user-details .ui-tag, .user-details .badge { font-size:0.58rem; padding:0.08rem 0.3rem; }

    /* Selects/inputs */
    select, input { font-size:0.82rem; }
    /* Prevent iOS auto-zoom: inputs need >=16px */
    .search-bar .search-input, .filters-row input, .search-bar .sel, .filter-bar .input-sm { font-size:16px; }

    /* BM/Hist tables */
    .bm-table th, .hist-table th { padding:0.5rem 0.65rem; font-size:0.6rem; }
    .bm-table td, .hist-table td { padding:0.5rem 0.65rem; font-size:0.76rem; }
    .bm-act-btn { padding:0.25rem 0.5rem; font-size:0.66rem; }

    /* Nav crumb (inside filter-bar card) */
    .nav-crumb { font-size:0.72rem; margin-bottom:0; }

    /* Toasts */
    .toast-container { bottom:calc(0.75rem + env(safe-area-inset-bottom)); width:95vw; }
    .toast { font-size:0.72rem; padding:0.55rem 0.9rem; white-space:normal; }

    /* Command palette */
    .cmd-palette { width:95%; }
    .cmd-overlay { padding-top:10vh; }
}
@media (max-width:480px) {
    body { padding:0; font-size:0.8rem; }
    .container { padding:0 0.6rem; }
    .sticky-header { padding:0.5rem 0.6rem; margin:0 -0.6rem 0.6rem !important; }

    .stats-bar { grid-template-columns:repeat(2, 1fr); gap:0.35rem; }
    .stat-card { padding:0.45rem 0.6rem; }
    .stat-card .label { font-size:0.54rem; }
    .stat-card .value { font-size:0.9rem; }

    .tab { padding:0.5rem 0.7rem; font-size:0.72rem; }
    .sticky-header h1 { font-size:0.88rem; }

    .tbl { font-size:0.72rem; min-width:350px; }
    .tbl th, .tbl td { padding:0.4rem 0.5rem; }
    .c-name { max-width:120px; }

    .id-card { padding:0.7rem; }
    .profile-card { padding:0.75rem; }
    .profile-grid { grid-template-columns:1fr; }
    .chart-container { height:140px; }

    .search-bar > .sel { font-size:0.72rem; }
    .search-bar > .search-input, .filters-row input, .filter-bar .input-sm { font-size:16px; }
    .filters-row select { font-size:0.74rem; }
    .input-sm { min-width:60px; width:60px; }

    .pagination button { padding:0.45rem 0.7rem; font-size:0.72rem; }
    .pagination .page-btn { padding:0.4rem 0.55rem; min-width:1.8rem; }
}

@media (prefers-reduced-motion:reduce) {
    .skeleton, .spinner, .pulse-dots span { animation:none; opacity:0.5; }
    .view-transition { animation:none !important; }
    .stat-card .value { animation:none !important; }
    * { transition-duration:0.01ms !important; }
}

/* ── Top Progress Bar ── */
.nprogress { position:fixed; top:0; left:0; right:0; height:2px; z-index:9999; pointer-events:none; opacity:0; transition:opacity 0.2s; }
.nprogress.active { opacity:1; }
.nprogress .bar { height:100%; background:var(--accent); transition:width 0.2s ease; }

/* ── Toasts ── */
.toast-container {
    position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%);
    z-index:10000; display:flex; flex-direction:column; gap:0.4rem;
    pointer-events:none; max-width:90vw;
}
.toast {
    background:var(--bg-elevated);
    border:1px solid var(--border-strong); border-radius:var(--radius-sm);
    padding:0.6rem 1.1rem; font-size:0.8rem; color:var(--text-primary);
    box-shadow:var(--shadow-pop);
    display:flex; align-items:center; gap:0.5rem;
    animation:toastIn 0.18s ease, toastOut 0.18s ease 2.8s forwards;
    pointer-events:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.toast.success { border-color:rgba(56,178,92,0.35); }
.toast.success .toast-icon { color:var(--accent-3); }
.toast.error { border-color:rgba(229,83,75,0.35); }
.toast.error .toast-icon { color:var(--danger); }
.toast.info { border-color:rgba(77,127,255,0.35); }
.toast.info .toast-icon { color:var(--accent); }
@keyframes toastIn  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes toastOut { to { opacity:0; transform:translateY(12px); } }

/* ── Command Palette ── */
.cmd-overlay {
    position:fixed; inset:0; z-index:10001; background:rgba(0,0,0,0.55);
    display:none; align-items:flex-start; justify-content:center;
    padding-top:14vh; animation:fadeIn 0.12s ease;
    overscroll-behavior:contain;
}
.cmd-overlay.active { display:flex; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.cmd-palette {
    background:var(--bg-elevated);
    border:1px solid var(--border-strong); border-radius:var(--radius);
    width:90%; max-width:560px;
    box-shadow:var(--shadow-pop);
    animation:cmdSlide 0.14s ease; overflow:hidden;
}
@keyframes cmdSlide { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
.cmd-input-wrap { display:flex; align-items:center; gap:0.6rem; padding:0.95rem 1.15rem; border-bottom:1px solid var(--border-hair); }
.cmd-input-wrap .cmd-icon { color:var(--text-muted); font-size:1rem; }
.cmd-input { flex:1; background:transparent; border:none; outline:none; color:var(--text-primary); font-size:0.95rem; font-family:var(--font-sans); }
.cmd-input::placeholder { color:var(--text-faint); }
.cmd-kbd { font-size:0.62rem; color:var(--text-faint); border:1px solid var(--border-hair); padding:0.15rem 0.4rem; border-radius:4px; }
.cmd-results { max-height:340px; overflow-y:auto; padding:0.4rem; }
.cmd-section { font-size:0.62rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; padding:0.5rem 0.8rem 0.3rem; }
.cmd-item {
    display:flex; align-items:center; gap:0.6rem; padding:0.55rem 0.8rem;
    border-radius:var(--radius-sm); cursor:pointer; transition:background 0.1s;
    font-size:0.82rem; color:var(--text-primary);
}
.cmd-item:hover, .cmd-item.selected { background:var(--accent-dim); }
.cmd-item .cmd-item-icon { font-size:0.95rem; width:20px; text-align:center; }
.cmd-item .cmd-item-label { flex:1; }
.cmd-item .cmd-item-hint { font-size:0.64rem; color:var(--text-faint); }
.cmd-empty { text-align:center; padding:1.5rem; color:var(--text-faint); font-size:0.8rem; }

/* ── Empty State ── */
.empty-state { text-align:center; padding:3.5rem 1.5rem; display:flex; flex-direction:column; align-items:center; gap:0.9rem; }
.empty-state .empty-icon { font-size:2.25rem; opacity:0.4; }
.empty-state .empty-title { font-size:1rem; color:var(--text-primary); font-weight:600; }
.empty-state .empty-desc { font-size:0.8rem; color:var(--text-muted); max-width:400px; line-height:1.6; }
.example-chips { display:flex; flex-wrap:wrap; gap:0.4rem; justify-content:center; margin-top:0.5rem; }
.example-chip {
    background:var(--bg-input); border:1px solid var(--border-hair);
    border-radius:var(--radius-sm); padding:0.4rem 0.85rem; font-size:0.75rem;
    color:var(--text-secondary); cursor:pointer; transition:border-color 0.15s, color 0.15s;
    font-family:var(--font-mono);
}
.example-chip:hover { border-color:rgba(77,127,255,0.4); color:var(--accent); }

/* ── View Transitions ── */
.view-transition { animation:viewFadeIn 0.18s ease; }
@keyframes viewFadeIn { from { opacity:0; } to { opacity:1; } }

/* ── Sticky Header ── */
.sticky-header {
    position:sticky; top:0; z-index:100;
    background:rgba(13,14,16,0.92);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border-hair);
    padding:0.7rem 0; margin-bottom:var(--gap-lg) !important;
}
.sticky-header .header-row { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.sticky-header .brand { display:flex; align-items:center; gap:0.5rem; }
.sticky-header h1 { font-size:1.05rem; margin:0; font-weight:700; letter-spacing:-0.02em; }
.sticky-header .sub { font-size:0.68rem; color:var(--text-muted); }
.sticky-header .cmd-trigger {
    background:var(--bg-input); border:1px solid var(--border-hair);
    border-radius:var(--radius-sm); padding:0.4rem 0.75rem; font-size:0.73rem;
    color:var(--text-muted); cursor:pointer; transition:border-color 0.15s, color 0.15s;
    display:flex; align-items:center; gap:0.5rem; white-space:nowrap;
}
.sticky-header .cmd-trigger:hover { border-color:var(--border-strong); color:var(--text-primary); }
.sticky-header .cmd-trigger .kbd { font-size:0.6rem; border:1px solid var(--border-hair); padding:0.1rem 0.35rem; border-radius:3px; }

/* ── Tab Badges ── */
.tab .tab-badge {
    display:inline-block; background:var(--accent-dim); color:var(--accent);
    font-size:0.58rem; font-weight:700; padding:0.08rem 0.38rem;
    border-radius:9px; margin-left:0.3rem; min-width:1.2rem; text-align:center;
}

/* ── Copy Feedback ── */
.copy-flash { animation:copyFlash 0.35s ease; }
@keyframes copyFlash { 0% { background:var(--accent-dim); } 100% { background:transparent; } }

/* ── Count-up ── */
.stat-card .value { animation:countUp 0.4s ease; }
@keyframes countUp { from { opacity:0.4; } to { opacity:1; } }

/* ── Quick Actions (row hover) ── */
.quick-actions { display:inline-flex; gap:0.2rem; opacity:0; transition:opacity 0.15s; }
.tbl tr:hover .quick-actions { opacity:1; }
.qa-btn {
    background:var(--bg-input); border:1px solid var(--border-hair);
    border-radius:var(--radius-xs); padding:0.15rem 0.4rem; font-size:0.6rem;
    cursor:pointer; color:var(--text-muted); transition:border-color 0.15s, color 0.15s;
}
.qa-btn:hover { border-color:rgba(77,127,255,0.4); color:var(--accent); }
.qa-btn.qa-saved { color:var(--accent-3); border-color:rgba(56,178,92,0.3); cursor:default; }
.bm-saved-icon { margin-left:0.3rem; font-size:0.7rem; cursor:default; }
.bm-note-popup { display:inline-flex; align-items:center; gap:0.2rem; }
.bm-note-input {
    background:var(--bg-input); border:1px solid var(--accent); border-radius:var(--radius-xs);
    color:var(--text-primary); font-size:0.62rem; padding:0.15rem 0.4rem; width:140px; outline:none;
    box-shadow:0 0 0 2px var(--accent-dim); font-family:var(--font-sans);
}
.bm-note-ok { cursor:pointer; font-size:0.7rem; color:var(--accent-3); padding:0.1rem 0.25rem; }
.bm-note-ok:hover { filter:brightness(1.2); }
.bm-note-cancel { cursor:pointer; font-size:0.7rem; color:var(--text-muted); padding:0.1rem 0.25rem; }
.bm-note-cancel:hover { color:var(--danger); }

/* ── User Menu ── */
.user-menu { position:relative; }
.user-btn {
    display:flex; align-items:center; gap:0.45rem;
    background:var(--bg-input); border:1px solid var(--border-hair);
    border-radius:var(--radius-sm); padding:0.35rem 0.6rem; cursor:pointer;
    color:var(--text-secondary); font-family:inherit; font-size:0.78rem;
    transition:border-color 0.15s, color 0.15s;
}
.user-btn:hover { border-color:var(--border-strong); color:var(--text-primary); }
.user-avatar {
    width:24px; height:24px; border-radius:6px;
    background:var(--accent);
    color:#fff; font-size:0.65rem; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.user-name { font-weight:600; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-dropdown {
    position:absolute; top:calc(100% + 0.35rem); right:0; z-index:100;
    background:var(--bg-elevated);
    border:1px solid var(--border-strong); border-radius:var(--radius);
    box-shadow:var(--shadow-pop); min-width:220px; padding:0.4rem;
    overscroll-behavior:contain;
}
.user-info { padding:0.6rem 0.8rem; border-bottom:1px solid var(--border-hair); margin-bottom:0.3rem; }
.user-info .email { font-size:0.72rem; color:var(--text-muted); }
.user-info .uname { font-size:0.86rem; font-weight:600; color:var(--text-primary); }
.user-item {
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:0.5rem 0.8rem; border:none; background:none;
    color:var(--text-secondary); font-size:0.8rem; cursor:pointer;
    border-radius:var(--radius-sm); text-align:left; font-family:inherit;
    transition:background 0.12s, color 0.12s;
}
.user-item:hover { background:var(--bg-surface-2); color:var(--text-primary); }
.user-item.danger:hover { background:rgba(229,83,75,0.10); color:var(--danger); }
.user-divider { border:none; border-top:1px solid var(--border-hair); margin:0.3rem 0; }
.user-item .badge {
    background:var(--accent-dim); color:var(--accent);
    font-size:0.6rem; font-weight:600; padding:0.1rem 0.4rem;
    border-radius:9px; min-width:1.2rem; text-align:center;
}

/* ── Bookmark / History Tables ── */
.bm-table, .hist-table { width:100%; border-collapse:collapse; }
.bm-table th, .hist-table th {
    padding:0.65rem 1.1rem; font-size:0.66rem; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.06em; text-align:right; font-weight:600;
    border-bottom:1px solid var(--border-hair);
    background:var(--bg-surface-2);
}
.bm-table td, .hist-table td {
    padding:0.7rem 1.1rem; border-bottom:1px solid var(--border-subtle);
    font-size:0.83rem; vertical-align:top;
}
.bm-table tr:hover td, .hist-table tr:hover td { background:var(--bg-surface-2); }
.bm-actions { display:flex; gap:0.3rem; }
.bm-act-btn {
    background:var(--bg-input); border:1px solid var(--border-hair);
    border-radius:var(--radius-xs); padding:0.2rem 0.55rem; font-size:0.68rem;
    cursor:pointer; color:var(--text-muted); font-family:inherit;
    transition:border-color 0.15s, color 0.15s;
}
.bm-act-btn:hover { border-color:rgba(77,127,255,0.4); color:var(--accent); }
.bm-act-btn.del:hover { border-color:rgba(229,83,75,0.4); color:var(--danger); }
.hist-query { font-family:var(--font-mono); color:var(--accent); cursor:pointer; }
.hist-query:hover { text-decoration:underline; }
.hist-type { font-size:0.66rem; padding:0.16rem 0.5rem; border-radius:var(--radius-xs); font-weight:600; }
.hist-type.phone { background:rgba(56,178,92,0.12); color:var(--accent-3); }
.hist-type.number { background:rgba(56,178,92,0.12); color:var(--accent-3); }
.hist-type.name  { background:var(--accent-dim); color:var(--accent); }
.empty-bookmarks, .empty-history { text-align:center; padding:3rem; color:var(--text-muted); font-size:0.85rem; }

/* Users table */
.c-id { font-family:var(--font-mono); font-size:0.75rem; color:var(--text-muted); white-space:nowrap; }
.c-device, .c-platform { font-size:0.78rem; color:var(--text-secondary); }
.c-date { font-size:0.75rem; color:var(--text-muted); white-space:nowrap; }
.c-searches { text-align:center; }
.search-count {
    font-size:0.72rem; font-weight:600; padding:0.15rem 0.45rem;
    border-radius:var(--radius-xs); background:var(--accent-dim); color:var(--accent);
}
.b-verified {
    font-size:0.68rem; padding:0.12rem 0.35rem; border-radius:var(--radius-xs);
    background:rgba(56,178,92,0.12); color:var(--accent-3); font-weight:600;
}
.phone-link { color:var(--accent); text-decoration:none; font-family:var(--font-mono); font-size:0.8rem; }
.phone-link:hover { text-decoration:underline; }
.muted { color:var(--text-muted); font-size:0.78rem; }

/* Risk badges */
.c-risk { text-align:center; }
.risk-badge {
    font-size:0.72rem; font-weight:700; padding:0.15rem 0.4rem;
    border-radius:var(--radius-xs); font-family:var(--font-mono);
}
.risk-high { background:rgba(229,83,75,0.15); color:var(--danger); }
.risk-med  { background:rgba(245,158,11,0.15); color:#f59e0b; }
.risk-low  { background:rgba(56,178,92,0.12); color:var(--accent-3); }
.b-selfsearch {
    font-size:0.68rem; padding:0.12rem 0.35rem; border-radius:var(--radius-xs);
    background:rgba(245,158,11,0.12); color:#f59e0b;
}
.c-flags { white-space:nowrap; }
.c-flags .badge { margin-right:0.15rem; }
.b-multiaccount {
    font-size:0.68rem; padding:0.12rem 0.35rem; border-radius:var(--radius-xs);
    background:rgba(168,85,247,0.12); color:#a855f7;
}
.c-linked { font-size:0.72rem; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.linked-phone {
    font-family:var(--font-mono); font-size:0.7rem; color:var(--accent);
    background:var(--accent-dim); padding:0.1rem 0.3rem; border-radius:var(--radius-xs);
    margin-right:0.2rem; display:inline-block; cursor:pointer;
}
.linked-phone:hover { background:rgba(77,127,255,0.25); }
#userResultsContainer tbody tr:hover td { background:var(--bg-surface-2); }

/* ═══════════════════════════════════════════════════════════════════
   Responsive — Mobile / Tablet
   ═══════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {
    body { padding: 1.25rem 1rem; }
    .sticky-header .cmd-trigger .label-text { display: none; }
    .sticky-header .cmd-trigger .kbd { display: none; }
    .stats-bar { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .stat-card .label { font-size: 0.68rem; }
    .stat-card .value { font-size: 1.1rem; }
}

/* Mobile — card-based table layout */
@media (max-width: 640px) {
    body { padding: 0.5rem 0.5rem; }

    /* Header */
    .sticky-header { padding: 0.4rem 0; }
    .sticky-header .header-row { flex-wrap: wrap; gap: 0.3rem; }
    .sticky-header h1 { font-size: 0.9rem; }
    .sticky-header .sub { display: none; }
    .sticky-header .cmd-trigger { padding: 0.3rem 0.5rem; font-size: 0.65rem; }
    .sticky-header .cmd-trigger .label-text,
    .sticky-header .cmd-trigger .kbd { display: none; }
    .user-name { max-width: 60px; font-size: 0.68rem; }
    .user-avatar { width: 20px; height: 20px; font-size: 0.58rem; }

    /* Stats */
    .stats-bar { grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
    .stat-card { padding: 0.4rem 0.5rem; }
    .stat-card .label { font-size: 0.58rem; }
    .stat-card .value { font-size: 0.9rem; }

    /* Tabs */
    .tab-bar { gap: 0; flex-wrap: wrap; }
    .tab { padding: 0.4rem 0.6rem; font-size: 0.68rem; }
    .tab .tab-badge { font-size: 0.5rem; }

    /* ── Search bar: stack vertically ── */
    .search-bar { flex-direction: column; gap: 0.4rem; flex-wrap: wrap; padding: 0.4rem; }
    .search-bar > #backBtn { width: 100%; }
    .search-bar .search-input-wrap { width: 100%; }
    .search-bar .search-input { font-size: 0.82rem; padding: 0.5rem 0; }
    .search-bar .sel { flex: 1 1 calc(50% - 0.2rem); min-width: 0; font-size: 0.72rem; padding: 0.45rem 0.5rem; }
    .search-bar .btn-go { width: 100%; padding: 0.55rem; font-size: 0.78rem; }
    .search-bar .btn-sec { width: 100%; padding: 0.55rem; font-size: 0.78rem; }

    /* ── Filter bar: stack vertically ── */
    .filter-bar { flex-direction: column; align-items: stretch; gap: 0.3rem; padding: 0.4rem; }
    .filter-bar select, .filter-bar input { width: 100%; }
    .filter-bar .filter-group { flex-wrap: wrap; gap: 0.25rem; }
    .filter-bar .filter-sep { display: none; }
    .filter-bar .chk-label { flex: 1 1 calc(50% - 0.15rem); justify-content: center; font-size: 0.68rem; padding: 0.35rem 0.4rem; }
    .filter-bar .nav-crumb { font-size: 0.68rem; }

    /* ── Search results table → card layout ── */
    .tbl-wrap { overflow: visible; border: none; box-shadow: none; background: transparent; }
    .tbl { min-width: 0 !important; }
    .tbl thead { display: none; }
    .tbl, .tbl tbody { display: block; width: 100%; }
    .tbl tr {
        display: flex; flex-direction: column;
        background: var(--bg-surface); border: 1px solid var(--border-hair);
        border-radius: var(--radius); margin-bottom: 0.5rem; padding: 0.6rem;
        box-shadow: var(--shadow-card);
    }
    .tbl tr:hover td { background: transparent; }
    .tbl td {
        display: flex; justify-content: space-between; align-items: flex-start;
        padding: 0.25rem 0; border: none; font-size: 0.8rem; width: 100%;
    }
    /* Hide low-priority cells */
    .tbl td:nth-child(1), /* ID */
    .tbl td:nth-child(5), /* Names count */
    .tbl td:nth-child(7)  /* Social */
    { display: none; }

    /* Name cell — full width, no label */
    .tbl td:nth-child(2) {
        font-size: 0.88rem; font-weight: 600; padding-bottom: 0.35rem;
        border-bottom: 1px solid var(--border-subtle); margin-bottom: 0.3rem;
        flex-direction: column; align-items: flex-start;
    }
    .tbl td:nth-child(2)::before {
        content: 'Name'; display: none;
    }

    /* Phone cell — full width with actions */
    .tbl td:nth-child(3) {
        flex-direction: column; align-items: flex-start;
        padding-bottom: 0.35rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 0.3rem;
    }
    .tbl td:nth-child(3)::before {
        content: 'Phone'; font-size: 0.6rem; color: var(--text-muted); text-transform: uppercase;
        letter-spacing: 0.05em; margin-bottom: 0.15rem;
    }

    /* Country + Stats — inline row */
    .tbl td:nth-child(4), .tbl td:nth-child(6) {
        display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem;
    }
    .tbl td:nth-child(4)::before {
        content: '🌍'; font-size: 0.7rem; opacity: 0.6;
    }
    .tbl td:nth-child(6)::before {
        content: '📊'; font-size: 0.7rem; opacity: 0.6;
    }

    /* Quick actions */
    .quick-actions { opacity: 1 !important; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.3rem; }
    .qa-btn { font-size: 0.62rem; padding: 0.15rem 0.4rem; }

    /* Badges */
    .enrich-row { flex-wrap: wrap; gap: 0.2rem; margin-top: 0.25rem; }
    .badge { font-size: 0.56rem; padding: 0.1rem 0.3rem; }

    /* Alt names */
    .alt-names { flex-wrap: wrap; gap: 0.15rem; margin-top: 0.15rem; }
    .alt-name { font-size: 0.58rem; padding: 0.05rem 0.3rem; }

    /* Row states */
    .row-locked { opacity: 0.6; }
    .row-bookmarked { background: rgba(56,178,92,0.08) !important; border-color: rgba(56,178,92,0.2); }

    /* ── Bookmark / History tables → card layout ── */
    .bm-table, .hist-table { width: 100%; }
    .bm-table thead, .hist-table thead { display: none; }
    .bm-table, .hist-table, .bm-table tbody, .hist-table tbody { display: block; width: 100%; }
    .bm-table tr, .hist-table tr {
        display: flex; flex-direction: column;
        background: var(--bg-surface); border: 1px solid var(--border-hair);
        border-radius: var(--radius); margin-bottom: 0.5rem; padding: 0.6rem;
    }
    .bm-table td, .hist-table td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 0.2rem 0; border: none; font-size: 0.8rem; width: 100%;
    }
    .bm-table tr:hover td, .hist-table tr:hover td { background: transparent; }

    /* ── Logs table → card layout ── */
    #logResultsContainer { height: auto !important; min-height: auto !important; overflow: visible !important; }
    #logResultsContainer .tbl-wrap { overflow: visible; }
    #logResultsContainer .tbl { table-layout: auto; }
    #logResultsContainer .tbl thead { display: none; }
    #logResultsContainer .tbl td {
        overflow: visible; text-overflow: clip; white-space: normal;
        display: flex; justify-content: space-between; align-items: flex-start;
    }

    /* ── Users table → card layout ── */
    #userResultsContainer .tbl thead { display: none; }
    #userResultsContainer .tbl, #userResultsContainer .tbl tbody { display: block; width: 100%; }
    #userResultsContainer .tbl tr {
        display: flex; flex-direction: column;
        background: var(--bg-surface); border: 1px solid var(--border-hair);
        border-radius: var(--radius); margin-bottom: 0.5rem; padding: 0.6rem;
    }
    #userResultsContainer .tbl td {
        display: flex; justify-content: space-between; align-items: center;
        padding: 0.2rem 0; border: none; font-size: 0.8rem; width: 100%;
    }

    /* Profile cards */
    .profile-grid { grid-template-columns: 1fr !important; }
    .profile-card { padding: 0.75rem; }

    /* Modal */
    .modal-overlay { padding: 0.5rem; }
    .modal { max-height: 92vh; border-radius: 8px; }
    .modal-header { padding: 0.6rem 0.8rem; }
    .modal-body { padding: 0.6rem 0.8rem; }

    /* Command palette */
    .cmd-palette { width: 100%; max-width: 100%; margin: 0; border-radius: 0; min-height: 100vh; }
    .cmd-input { font-size: 0.9rem; padding: 0.8rem 1rem; }

    /* Pagination */
    .pagination { gap: 0.15rem; flex-wrap: wrap; justify-content: center; }
    .pagination button { padding: 0.3rem 0.5rem; font-size: 0.68rem; }

    /* Toast */
    .toast-container { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
    .toast { font-size: 0.74rem; padding: 0.5rem 0.7rem; }

    /* User dropdown */
    .user-dropdown { min-width: 160px; right: -0.5rem; }

    /* Empty state */
    .empty-state { padding: 1.5rem 0.75rem; }
    .empty-state .empty-icon { font-size: 1.5rem; }
    .empty-state .empty-title { font-size: 0.85rem; }
    .empty-state .empty-desc { font-size: 0.72rem; }
    .example-chips { gap: 0.25rem; }
    .example-chip { font-size: 0.62rem; padding: 0.25rem 0.5rem; }

    /* Chart container */
    .chart-container { height: 180px !important; }

    /* Identity grid */
    .id-grid { grid-template-columns: 1fr !important; }

    /* Filters row */
    .filters-row { flex-direction: column; gap: 0.3rem; }
    .filters-row select, .filters-row input { width: 100%; }

    /* Misc */
    .c-linked { max-width: 80px; }
    .user-name { max-width: 50px; }
    .status-line { font-size: 0.72rem; flex-wrap: wrap; gap: 0.3rem; }
    .nav-crumb { font-size: 0.68rem; }
}

/* Very small phones */
@media (max-width: 380px) {
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
    .stat-card .value { font-size: 0.82rem; }
    .stat-card .label { font-size: 0.54rem; }
    .tab { padding: 0.35rem 0.45rem; font-size: 0.62rem; }
    .brand h1 { font-size: 0.82rem; }
    .tbl td { font-size: 0.76rem; }
    .qa-btn { font-size: 0.58rem; }
    .badge { font-size: 0.52rem; }
}

/* Landscape phone */
@media (max-height: 500px) and (orientation: landscape) {
    .sticky-header { position: static; }
    body { padding: 0.5rem; }
}