/* app.css — the dashboard's legacy style layer.
 *
 * Extracted verbatim from the inline <style> block in dashboard.html (lines
 * 16-1050) so a second page can load it. public/admin.html needs .sec-hdr,
 * .mb-tab and .stats-grid, which live here and NOT in paper.css.
 *
 * CASCADE ORDER IS LOAD-BEARING. The <link> that replaced the inline block sits
 * in exactly the same place: before paper.css, which is linked immediately
 * after. paper.css deliberately wins same-specificity ties — see the comment
 * above its <link>. Do not reorder these two.
 *
 * The @import below was the first rule of the inline block and must stay the
 * first rule here: CSS requires @import to precede all other rules.
 */
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

  :root {
    --bg-primary: #000000;
    --bg-secondary: #17171B;
    --bg-card: #242424;
    --bg-card-hover: #2a2a2e;
    --bg-elevated: #333333;
    --orange: #F97316;
    --orange-hover: #fb923c;
    --orange-dim: rgba(249,115,22,0.15);
    --orange-glow: rgba(249,115,22,0.2);
    --green: #22E11C;
    --green-dim: rgba(34,225,28,0.15);
    --blue: #0071B2;
    --blue-dim: rgba(0,113,178,0.15);
    --purple: #A855F7;
    --purple-dim: rgba(168,85,247,0.15);
    --red: #EF4444;
    --red-dim: rgba(239,68,68,0.15);
    --yellow: #EAB308;
    --yellow-dim: rgba(234,179,8,0.15);
    --cyan: #38bdf8;
    --cyan-dim: rgba(56,189,248,0.15);
    --text-primary: #FFFFFF;
    --text-secondary: #A1A1AA;
    --text-dim: #71717A;
    --text-muted: #9ca3af;
    --border: #333338;
    --border-light: #444450;
    --radius: 12px;
    --radius-sm: 6px;
    --sidebar-width: 250px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }
  .app { display: flex; height: 100vh; overflow: hidden; }
  .sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .main {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: 28px 32px;
    max-width: 1200px;
    overflow-y: auto;
  }
  .logo {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 16px; border-bottom: 1px solid var(--border);
  }
  .logo-icon {
    width: 34px; height: 34px; background: var(--orange); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 15px;
    box-shadow: 0 0 12px rgba(249,115,22,0.25);
  }
  .logo-text { font-weight: 700; font-size: 17px; letter-spacing: -0.3px; }
  .logo-sub { font-size: 10px; color: var(--orange); background: var(--orange-dim); padding: 2px 6px; border-radius: 3px; margin-left: auto; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; }
  .nav-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-dim); padding: 16px 16px 6px; font-weight: 600; }
  .nav-section.toggleable { cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; }
  .nav-section.toggleable:hover { color: var(--text); }
  .nav-section .chevron { font-size: 10px; opacity: 0.55; transition: transform 0.15s ease; }
  .nav-section.collapsed .chevron { transform: rotate(-90deg); }
  .nav-group.collapsed { display: none; }
  .nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 14px; margin: 0 8px 2px; border-radius: 8px;
    cursor: pointer; color: var(--text-secondary); font-size: 13px;
    transition: all 0.15s; user-select: none;
  }
  .nav-item:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
  .nav-item.active { background: var(--orange-dim); color: var(--orange); font-weight: 500; }
  .nav-item .ic { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
  .nav-badge { margin-left: auto; font-size: 9px; font-weight: 600; padding: 2px 7px; border-radius: 10px; }
  .nb-green { background: var(--green-dim); color: var(--green); }
  .nb-orange { background: var(--orange-dim); color: var(--orange); }
  .nb-blue { background: var(--blue-dim); color: var(--blue); }
  .sidebar-user {
    margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
    cursor: pointer; position: relative; transition: background 0.15s;
  }
  .sidebar-user:hover { background: var(--bg-card-hover); }
  .sidebar-user .av { width: 34px; height: 34px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; flex-shrink: 0; }
  .sidebar-user .nm { font-weight: 600; font-size: 12.5px; }
  .sidebar-user .st { font-size: 10px; color: var(--green); display: flex; align-items: center; gap: 4px; }
  .sidebar-user .st::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); }
  .user-menu {
    position: absolute; bottom: calc(100% + 6px); left: 12px; right: 12px;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5); z-index: 200; overflow: hidden;
    display: none;
  }
  .user-menu.open { display: block; }
  .user-menu-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; font-size: 13px; color: var(--text-primary);
    cursor: pointer; transition: background 0.1s; border: none; background: none;
    width: 100%; text-align: left; font-family: inherit;
  }
  .user-menu-item:hover { background: var(--bg-card-hover); }
  .user-menu-item.danger { color: var(--red); }
  .user-menu-item.danger:hover { background: var(--red-dim); }
  .user-menu-sep { height: 1px; background: var(--border); margin: 2px 0; }

  .page-header { margin-bottom: 24px; }
  .page-header h1 { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
  .page-header p { color: var(--text-secondary); font-size: 14px; }
  .hero { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; }
  .hero::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, var(--orange-glow) 0%, transparent 70%); pointer-events: none; }
  .hero-av { width: 54px; height: 54px; border-radius: 50%; background: var(--orange); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; flex-shrink: 0; box-shadow: 0 0 20px rgba(249,115,22,0.25); }
  .hero h2 { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
  .hero p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; }
  .hero-stats { margin-left: auto; display: flex; gap: 28px; flex-shrink: 0; position: relative; }
  .hero-stats .sv { font-size: 22px; font-weight: 700; color: var(--orange); }
  .hero-stats .sl { font-size: 9px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
  .hero-help-btn { margin-left: auto; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; transition: background .15s, color .15s; }
  .hero-help-btn:hover { background: var(--orange-dim); color: var(--orange); border-color: var(--orange); }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
  .activity-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 11px; font-weight: 500; white-space: nowrap; transition: transform .1s; }
  .activity-chip:hover { transform: translateY(-1px); }
  .activity-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }


  .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
  .stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; transition: all 0.15s; }
  .stat-card:hover { border-color: var(--border-light); }
  .stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
  .stat-value { font-size: 28px; font-weight: 700; }
  .stat-sub { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

  .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 18px; transition: all 0.15s; }
  .card:hover { border-color: var(--border-light); }
  .card h2 { font-size: 15px; font-weight: 600; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
  .card h2 .badge { font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 20px; background: var(--orange-dim); color: var(--orange); }

  .quick-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 24px; }
  @media (max-width: 900px) { .quick-grid { grid-template-columns: 1fr; } }
  .quick-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; cursor: pointer; transition: all 0.15s; }
  .quick-card:hover { background: var(--bg-card-hover); border-color: var(--border-light); }
  .qc-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .qc-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
  .qc-title { font-weight: 600; font-size: 13px; }
  .qc-sub { font-size: 10.5px; color: var(--text-dim); }
  .qc-body { font-size: 12px; color: var(--text-secondary); line-height: 1.55; }

  .sec-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .sec-hdr h3 { font-size: 15px; font-weight: 600; }
  .sec-link { font-size: 12px; color: var(--orange); cursor: pointer; }
  .sec-link:hover { text-decoration: underline; }

  .completeness-ring { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
  .ring-container { position: relative; width: 80px; height: 80px; }
  .ring-container svg { transform: rotate(-90deg); }
  .ring-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: 700; }
  .ring-details { flex: 1; }
  .ring-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
  .ring-bar-fill { height: 6px; border-radius: 3px; flex: 1; background: var(--border); overflow: hidden; }
  .ring-bar-fill div { height: 100%; border-radius: 3px; }
  .ring-bar span:first-child { width: 120px; color: var(--text-secondary); }
  .ring-bar span:last-child { width: 36px; text-align: right; color: var(--text-dim); font-size: 12px; }

  .memory-item { padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; }
  .memory-item:last-child { border-bottom: none; }
  .memory-type-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; margin-top: 2px; }
  .memory-type-badge.knowledge { background: var(--blue-dim); color: var(--blue); }
  .memory-type-badge.preference { background: var(--green-dim); color: var(--green); }
  .memory-type-badge.opinion { background: var(--orange-dim); color: var(--orange); }
  .memory-type-badge.decision_pattern { background: var(--purple-dim); color: var(--purple); }
  .memory-type-badge.task { background: var(--red-dim); color: var(--red); }
  .memory-type-badge.person { background: var(--yellow-dim); color: var(--yellow); }
  .memory-type-badge.communication_style { background: rgba(96,165,250,0.15); color: #60A5FA; }
  .memory-type-badge.idea { background: rgba(168,85,247,0.15); color: #C084FC; }
  .memory-type-badge.decision { background: var(--purple-dim); color: var(--purple); }
  .memory-type-badge.note { background: rgba(156,163,175,0.15); color: #9ca3af; }

  /* Contact cards */
  .contact-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:all 0.15s; margin-bottom:8px; }
  .contact-card:hover { border-color:var(--border-light); background:var(--bg-card-hover); }
  .contact-card.pending { border-left:3px solid var(--orange); }
  .contact-av { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex-shrink:0; }
  .contact-info { flex:1; min-width:0; }
  .contact-name { font-weight:600; font-size:14px; margin-bottom:2px; }
  .contact-desc { font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .contact-meta { font-size:10px; color:var(--text-dim); margin-top:2px; display:flex; gap:10px; }
  .contact-status { font-size:9px; font-weight:600; padding:2px 8px; border-radius:10px; text-transform:uppercase; }
  .contact-status.pending { background:var(--orange-dim); color:var(--orange); }
  .contact-status.approved { background:var(--green-dim); color:var(--green); }
  .contact-actions { display:flex; gap:4px; flex-shrink:0; }

  /* Contact detail panel */
  .detail-panel { position:fixed; top:0; right:0; width:480px; max-width:90vw; height:100vh; background:var(--bg-secondary); border-left:1px solid var(--border); z-index:400; overflow-y:auto; padding:24px; transform:translateX(100%); transition:transform 0.25s ease; }
  .detail-panel.open { transform:translateX(0); }
  .detail-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:399; display:none; }
  .detail-overlay.open { display:block; }
  .detail-field { margin-bottom:14px; }
  .detail-field label { display:block; font-size:11px; color:var(--text-dim); margin-bottom:4px; text-transform:uppercase; letter-spacing:0.5px; }
  .detail-field input, .detail-field textarea { width:100%; padding:8px 12px; border-radius:6px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); font-size:13px; font-family:inherit; }
  .detail-field input:focus, .detail-field textarea:focus { outline:none; border-color:var(--orange); }
  .history-item { padding:10px 0; border-bottom:1px solid var(--border); font-size:12px; }
  .history-item:last-child { border-bottom:none; }
  .history-type { font-size:9px; font-weight:600; padding:2px 6px; border-radius:3px; text-transform:uppercase; margin-right:6px; }
  /* People page build-out (mig 073) */
  .people-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
  .people-tabs { display:flex; gap:4px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:3px; }
  .people-tab { padding:6px 14px; font-size:12px; font-weight:600; color:var(--text-secondary); background:transparent; border:none; border-radius:4px; cursor:pointer; white-space:nowrap; }
  .people-tab.active { background:var(--orange); color:#fff; }
  .people-tab .tab-count { opacity:0.75; margin-left:5px; font-weight:400; }
  .people-search { flex:1; min-width:160px; padding:8px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); font-size:13px; }
  .people-search:focus { outline:none; border-color:var(--orange); }
  .people-sort { padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-card); color:var(--text-primary); font-size:12px; }
  .people-letter-badge { position:sticky; top:0; z-index:5; display:none; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:var(--orange); color:#fff; font-weight:700; font-size:15px; pointer-events:none; box-shadow:0 2px 8px rgba(0,0,0,0.4); }
  .people-az-rail { position:fixed; right:8px; top:50%; transform:translateY(-50%); display:none; flex-direction:column; gap:0; z-index:6; }
  .people-az-rail button { background:none; border:none; color:var(--text-dim); font-size:10px; font-weight:600; cursor:pointer; padding:0 5px; line-height:1.35; }
  .people-az-rail button:hover { color:var(--orange); }
  .people-letter-hdr { font-size:11px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; margin:14px 0 6px; }
  .contact-photo { width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0; }
  .contact-chip { font-size:9px; font-weight:600; padding:2px 7px; border-radius:10px; display:inline-flex; align-items:center; gap:3px; }
  .contact-chip.mebot { background:var(--green-dim); color:var(--green); }
  .contact-chip.idok { background:var(--blue-dim); color:var(--blue); }
  .contact-chip.grant { background:var(--purple-dim); color:var(--purple); }
  .contact-photo-lg { max-width:100%; max-height:70vh; border-radius:8px; display:block; margin:0 auto; }
  .photo-edit-av { position:relative; cursor:pointer; }
  .photo-edit-av .photo-edit-hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); color:#fff; font-size:9px; text-align:center; border-radius:50%; opacity:0; transition:opacity 0.15s; }
  .photo-edit-av:hover .photo-edit-hint { opacity:1; }
  .memory-content { flex: 1; }
  .memory-text { font-size: 14px; line-height: 1.5; margin-bottom: 4px; }
  .expandable-text.clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .expand-toggle { background: none; border: none; color: var(--blue); cursor: pointer; font-size: 11px; padding: 0; font-weight: 600; }
  .expand-toggle:hover { text-decoration: underline; }
  /* Memory card — aligned columns: [✓] · type · added/conf · edit · text · sharing · delete */
  .cs-row { display: grid; grid-template-columns: 26px 92px 118px 28px minmax(120px,1fr) auto 30px; gap: 12px; align-items: start; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-secondary); }
  .cs-row.selected { border-color: var(--blue); background: var(--blue-dim); }
  .cs-check { margin-top: 2px; }
  .cs-check input { width: 15px; height: 15px; cursor: pointer; accent-color: var(--blue); }
  .cs-cat { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--orange); background: var(--orange-dim); padding: 3px 6px; border-radius: 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .cs-meta { font-size: 11px; color: var(--text-dim); line-height: 1.45; min-width: 0; }
  .cs-meta .cs-conf { color: var(--text-secondary); opacity: 0.8; }
  .cs-meta .cs-src { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }
  .cs-edit { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 2px 4px; }
  .cs-del { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; padding: 2px 4px; justify-self: end; }
  .cs-del:hover { color: var(--red); }
  .cs-textcol { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
  .cs-text { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; color: var(--text-primary); }
  .cs-text.clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cs-textcol .expand-toggle { flex-shrink: 0; white-space: nowrap; }
  .cs-scopes { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
  .cs-scope-btn { padding: 5px 9px; font-size: 11px; white-space: nowrap; }
  .cs-share-select { font-size: 11px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); cursor: pointer; }
  /* Memories page chrome: tabs · controls · bulk bar · pagination */
  .mem-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
  .mem-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-dim); cursor: pointer; font-size: 14px; font-weight: 600; padding: 8px 14px; margin-bottom: -1px; }
  .mem-tab.active { color: var(--text-primary); border-bottom-color: var(--orange); }
  .mem-tab .badge { font-size: 10px; }
  .mem-controls { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; flex-wrap: wrap; }
  .mem-controls .search-box { margin-bottom: 0; }
  .mem-sort { font-size: 13px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-primary); cursor: pointer; }
  .mem-sort:focus { outline: none; border-color: var(--orange); }
  .mem-bulk-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px; border: 1px solid var(--blue); border-radius: 8px; background: var(--blue-dim); position: sticky; top: 8px; z-index: 5; }
  .mem-bulk-count { font-size: 12px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
  .mem-bulk-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .mem-bulk-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
  .mem-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 0; font-size: 12px; color: var(--text-dim); }
  .mem-pager button { font-size: 12px; padding: 5px 12px; }
  .mem-pager button:disabled { opacity: 0.4; cursor: default; }
  @media (max-width: 820px) {
    .cs-row { grid-template-columns: 26px 1fr; gap: 6px 10px; }
    .cs-cat { grid-column: 2; justify-self: start; }
    .cs-meta { grid-column: 2; }
    .cs-edit { grid-column: 2; justify-self: start; opacity: 0.55; font-size: 12px; }
    .cs-textcol { grid-column: 2; }
    .cs-scopes { grid-column: 2; justify-content: flex-start; }
    .cs-check { grid-row: 1 / span 5; }
    /* Mobile: no per-item delete — delete only via checkbox + bulk bar. */
    .cs-del { display: none; }
  }
  .memory-meta { font-size: 12px; color: var(--text-dim); display: flex; gap: 12px; flex-wrap: wrap; }
  .memory-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
  .memory-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.06); color: var(--text-secondary); }
  .confidence-bar { display: inline-flex; align-items: center; gap: 4px; }
  .confidence-bar .bar { width: 40px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
  .confidence-bar .bar div { height: 100%; border-radius: 2px; }

  .profile-section { margin-bottom: 16px; }
  .profile-section h3 { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .profile-text { font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
  .profile-label { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
  .evidence-list { margin-top: 8px; }
  .evidence-item { font-size: 12px; color: var(--text-secondary); line-height: 1.5; padding: 4px 0 4px 16px; position: relative; }
  .evidence-item::before { content: ''; position: absolute; left: 4px; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-dim); }

  .value-chip { display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: 13px; margin: 0 6px 8px 0; }
  .value-chip.stated { background: var(--orange-dim); color: var(--orange); }
  .value-chip.observed { background: var(--blue-dim); color: #60A5FA; }
  .filter-bar { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
  .filter-btn { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); transition: all 0.15s; font-family: inherit; }
  .filter-btn:hover { border-color: var(--text-secondary); }
  .filter-btn.active { background: var(--orange); color: white; border-color: var(--orange); }
  .filter-count { font-size: 10px; opacity: 0.7; margin-left: 4px; }
  .search-box { width: 100%; padding: 10px 14px 10px 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); font-size: 14px; font-family: inherit; margin-bottom: 16px; }
  .search-box:focus { outline: none; border-color: var(--orange); }
  .search-wrapper { position: relative; }
  .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-dim); width: 16px; height: 16px; }
  .tabs { display: flex; gap: 0; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
  .tab { padding: 10px 20px; font-size: 14px; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all 0.15s; }
  .tab:hover { color: var(--text-primary); }
  .tab.active { color: var(--orange); border-bottom-color: var(--orange); font-weight: 500; }
  .page { display: none; }
  .page.active { display: block; }

  /* ===== MY AVATAR — direct-link video experience (Daily callObject) ===== */
  /* Idle: a rounded stage inside the page. Live: takes over the whole
     viewport (position:fixed, painted over the sidebar) so it matches the
     public direct-link page exactly. Visibility of landing vs. call shell is
     driven by the .live class toggled from features/avatar.js. */
  .avatar-stage {
    position: relative;
    height: calc(100vh - 56px);           /* .main has 28px top+bottom padding */
    background: #000; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
  }
  .avatar-stage.live {
    position: fixed; inset: 0; z-index: 9999;
    height: 100dvh; border-radius: 0; border: 0;
  }
  /* Mobile: mirror the public direct link — the whole My Avatar page is a
     full-screen takeover (idle landing AND live call), not squeezed into the
     strip beside the dashboard sidebar. Ending the call drops back into the
     main navigation (avatar.js avatarEnd → showPage('dashboard')). */
  @media (max-width: 820px) {
    #page-my-avatar.active .avatar-stage {
      position: fixed; inset: 0; z-index: 9999;
      height: 100dvh; border-radius: 0; border: 0;
    }
  }

  /* --- Pre-call landing --- */
  .avatar-landing {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px; text-align: center;
    padding: 24px; background: radial-gradient(circle at 50% 40%, #1a1a1f 0%, #000 75%);
  }
  .avatar-stage.live .avatar-landing { display: none; }
  .avatar-photo-slot { margin-bottom: 4px; }
  .avatar-photo, .avatar-photo-fallback {
    width: 132px; height: 132px; border-radius: 50%;
    box-shadow: 0 8px 32px rgba(249,115,22,0.2);
  }
  .avatar-photo { object-fit: cover; border: 3px solid var(--orange); }
  .avatar-photo-fallback {
    display: flex; align-items: center; justify-content: center;
    font-size: 52px; font-weight: 600; color: #1a1a1a;
    background: linear-gradient(135deg, var(--orange) 0%, #fb923c 100%);
  }
  .avatar-landing-title { font-size: 22px; font-weight: 700; color: #fff; }
  .avatar-landing-sub { font-size: 14px; color: var(--text-secondary); max-width: 280px; }
  .avatar-start-btn {
    margin-top: 16px; padding: 14px 30px; min-width: 200px;
    background: var(--orange); color: #fff; border: 0; border-radius: 12px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background .15s, transform .1s;
  }
  .avatar-start-btn:hover:not(:disabled) { background: var(--orange-hover); }
  .avatar-start-btn:active:not(:disabled) { transform: scale(0.98); }
  .avatar-start-btn:disabled { opacity: 0.6; cursor: not-allowed; }
  .avatar-error {
    max-width: 320px; padding: 12px 14px; border-radius: 10px;
    background: rgba(220,38,38,0.1); border: 1px solid rgba(220,38,38,0.3);
    color: #fca5a5; font-size: 13px; line-height: 1.5;
  }

  /* --- In-call shell (hidden until .live) --- */
  #avatar-remote-video {
    display: none; width: 100%; height: 100%; object-fit: contain; background: #000;
  }
  .avatar-stage.live #avatar-remote-video { display: block; }
  /* A handset turned sideways fills the screen; desktop (tall viewport even
     when wide) keeps the de-zoomed framing. */
  @media (orientation: landscape) and (max-height: 500px) {
    .avatar-stage.live #avatar-remote-video { object-fit: cover; }
  }
  #avatar-remote-audio { display: none; }

  #avatar-self-video {
    display: none; position: absolute;
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(104px + env(safe-area-inset-bottom));
    width: 112px; height: 150px; object-fit: cover; border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.25); background: #111;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    transform: scaleX(-1);                 /* mirror, like a selfie camera */
    z-index: 9; transition: opacity .2s;
  }
  .avatar-stage.live #avatar-self-video { display: block; }
  .avatar-stage.live #avatar-self-video.hidden { opacity: 0; pointer-events: none; }

  .avatar-status-row {
    display: none; position: absolute;
    top: calc(16px + env(safe-area-inset-top));
    left: calc(16px + env(safe-area-inset-left));
    padding: 6px 12px; border-radius: 16px;
    background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
    font-size: 12px; color: var(--text-dim);
    align-items: center; gap: 6px; pointer-events: none; z-index: 10;
  }
  .avatar-stage.live .avatar-status-row { display: flex; }
  .avatar-status-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green,#16a34a); }
  .avatar-status-row.connecting .dot { background: var(--orange); animation: avatar-pulse 1.2s infinite; }
  @keyframes avatar-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

  .avatar-controls {
    display: none; justify-content: center; align-items: flex-start; gap: 20px;
    padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0) 100%);
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  }
  .avatar-stage.live .avatar-controls { display: flex; }
  .avatar-controls .ctrl-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; }
  .avatar-controls .ctrl {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(26,26,26,0.82); backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.18); cursor: pointer; color: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, transform .1s;
  }
  .avatar-controls .ctrl svg { width: 24px; height: 24px; display: block; }
  .avatar-controls .ctrl:active { transform: scale(0.92); }
  .avatar-controls .ctrl:hover { background: #2a2a2a; border-color: var(--orange); }
  .avatar-controls .ctrl.muted, .avatar-controls .ctrl.cam-off, .avatar-controls .ctrl.danger {
    background: var(--danger,#dc2626); border-color: var(--danger,#dc2626);
  }
  .avatar-controls .ctrl.danger:hover { background: #ef4444; border-color: #ef4444; }
  .avatar-controls .ctrl-label {
    font-size: 10px; color: var(--text-dim); white-space: nowrap;
    letter-spacing: 0.04em; text-transform: uppercase; pointer-events: none;
  }
  @media (max-width: 380px) {
    .avatar-controls .ctrl { width: 52px; height: 52px; }
    .avatar-controls .ctrl svg { width: 22px; height: 22px; }
    .avatar-controls { gap: 14px; padding: 20px 12px calc(12px + env(safe-area-inset-bottom)); }
    #avatar-self-video { width: 92px; height: 124px; bottom: calc(98px + env(safe-area-inset-bottom)); }
  }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .two-col-wide { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
  @media (max-width: 900px) { .two-col, .two-col-wide { grid-template-columns: 1fr; } }
  .source-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .source-bar-row .label { width: 140px; font-size: 12px; color: var(--text-secondary); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .source-bar-row .bar-bg { flex: 1; height: 20px; background: var(--border); border-radius: 4px; overflow: hidden; }
  .source-bar-row .bar-fill { height: 100%; border-radius: 4px; background: var(--orange); transition: width 0.3s; }
  .source-bar-row .count { width: 30px; font-size: 12px; color: var(--text-dim); }

  .chat-container { position: relative; height: calc(100vh - 120px); display: flex; flex-direction: column; }
  .chat-msgs { flex: 1; overflow-y: auto; padding: 20px 0; display: flex; flex-direction: column; gap: 14px; }
  .msg { display: flex; gap: 10px; max-width: 80%; }
  .msg.user { align-self: flex-end; flex-direction: row-reverse; }
  .msg-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; }
  .msg-bubble { padding: 12px 16px; border-radius: 16px; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
  .msg.bot .msg-bubble { background: var(--bg-card); border: 1px solid var(--border); border-top-left-radius: 4px; }
  .msg.user .msg-bubble { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); border-top-right-radius: 4px; }
  /* Phase LLM-RT.1.5 — rating widget fades in on hover so it doesn't clutter the chat */
  .msg .msg-rate { opacity: 0; transition: opacity 0.15s; }
  .msg:hover .msg-rate { opacity: 1; }
  .msg-src { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
  .chat-input-row { padding: 14px 0; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: center; }
  .chat-input { flex: 1; background: var(--bg-card); border: 1px solid var(--border); border-radius: 22px; padding: 11px 18px; color: var(--text-primary); font-size: 13px; font-family: inherit; outline: none; }
  .chat-input:focus { border-color: var(--orange); }
  .chat-input::placeholder { color: var(--text-dim); }
  .chat-send { width: 38px; height: 38px; border-radius: 50%; background: var(--orange); border: none; color: #fff; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; }
  .chat-send:hover { background: var(--orange-hover); }
  .chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
  .chat-input:disabled { opacity: 0.5; }
  .typing-dots span { animation: blink 1.4s infinite both; font-size: 20px; line-height: 1; }
  .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
  .typing-dots span:nth-child(3) { animation-delay: 0.4s; }
  @keyframes blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

  /* ASK hands-free voice mode (window.AskVoice) — toggle chip mirrors .chat-mic/.voice;
     overlay covers .chat-container (now position:relative above) while a call is live. */
  .ask-voice-toggle { font-size: 11px; font-weight: 700; letter-spacing: 0.3px; color: var(--text-dim); background: none; border: 1px solid var(--border); border-radius: 14px; padding: 7px 12px; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; }
  .ask-voice-toggle:hover { border-color: var(--border-light); color: var(--text-primary); }
  .ask-voice-toggle.on { background: var(--accent,#F97316); border-color: var(--accent,#F97316); color: #fff; }
  .ask-voice-overlay {
    position: absolute; inset: 0; z-index: 20;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  }
  .ask-voice-pill {
    display: flex; align-items: center; gap: 12px;
    border-radius: 999px; padding: 18px 34px;
    font-size: 17px; font-weight: 700;
    cursor: pointer; user-select: none;
    background: var(--bg-card); color: var(--text-dim);
    transition: background 0.2s, color 0.2s;
  }
  .ask-voice-pill.listening { background: var(--orange-dim); color: var(--accent,#F97316); }
  .ask-voice-pill.listening .ask-voice-dot { animation: ask-voice-pulse 1.2s ease-in-out infinite; }
  .ask-voice-pill.thinking { background: var(--bg-card); color: var(--text-dim); }
  .ask-voice-pill.speaking { background: var(--accent,#F97316); color: #fff; }
  .ask-voice-pill.ended { background: var(--bg-card); color: var(--faint); }
  .ask-voice-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
  @keyframes ask-voice-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
  .ask-voice-heard { font-size: 13px; color: var(--text-dim); max-width: 80%; text-align: center; min-height: 18px; overflow-wrap: anywhere; }
  .ask-voice-exit {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border-radius: 50%;
    background: none; border: 1px solid var(--border);
    color: var(--text-dim); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: color 0.15s, border-color 0.15s;
  }
  .ask-voice-exit:hover { color: var(--text-primary); border-color: var(--border-light); }
  /* Actions A3.4 — the proposal strip inside the voice overlay. Scrolls on its
     own so three proposals cannot push "type instead" and the hangup button
     off the panel. */
  .ask-voice-actions { display: flex; flex-direction: column; gap: 10px; width: min(560px, 92%); max-height: 34vh; overflow-y: auto; }
  .ask-voice-typebtn {
    display: flex; align-items: center; gap: 8px;
    border-radius: 999px; padding: 10px 22px;
    font-size: 13px; font-weight: 700;
    background: none; border: 1px solid var(--border);
    color: var(--text-dim); cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
  }
  .ask-voice-typebtn:hover { color: var(--text-primary); border-color: var(--border-light); }
  .ask-voice-hangup {
    margin-top: 10px;
    display: flex; align-items: center; gap: 9px;
    border-radius: 999px; padding: 12px 26px;
    font-size: 14px; font-weight: 700; letter-spacing: 0.3px;
    background: var(--red,#dc2626); color: #fff;
    border: none; cursor: pointer;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--red,#dc2626) 40%, transparent);
    transition: filter 0.15s, transform 0.05s;
  }
  .ask-voice-hangup:hover { filter: brightness(1.08); }
  .ask-voice-hangup:active { transform: translateY(1px); }
  .ask-voice-hangup-icon { font-size: 17px; transform: rotate(135deg); line-height: 1; }
  @media (max-width: 820px) {
    .ask-voice-pill { padding: 22px 40px; }
    .ask-voice-hangup { padding: 15px 32px; font-size: 15px; }
  }

  .mtg-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; gap: 14px; cursor: pointer; transition: all 0.15s; margin-bottom: 10px; }
  .mtg-card:hover { background: var(--bg-card-hover); border-color: var(--border-light); }
  .mtg-time { width: 50px; flex-shrink: 0; text-align: center; }
  .mtg-time .hr { font-size: 15px; font-weight: 600; }
  .mtg-time .ap { font-size: 9px; color: var(--text-dim); text-transform: uppercase; }
  .mtg-info { flex: 1; }
  .mtg-title { font-size: 14px; font-weight: 600; margin-bottom: 3px; }
  .mtg-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.4; }
  .mtg-people { display: flex; }
  .mtg-person { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 600; margin-left: -5px; }
  .mtg-person:first-child { margin-left: 0; }
  .mtg-status { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
  .mtg-badge { font-size: 9px; font-weight: 600; padding: 3px 10px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.2px; }

  .agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  @media (max-width: 900px) { .agent-grid { grid-template-columns: 1fr; } }
  .agent-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; transition: all 0.15s; }
  .agent-card:hover { border-color: var(--border-light); }
  .agent-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .agent-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 16px; }
  .agent-nm { font-weight: 600; font-size: 14px; }
  .agent-type { font-size: 11px; color: var(--text-dim); }
  .agent-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; }
  .agent-stats { display: flex; gap: 16px; margin-top: 10px; }
  .agent-stat .v { font-size: 17px; font-weight: 600; }
  .agent-stat .l { font-size: 9px; color: var(--text-dim); text-transform: uppercase; }

  .llm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
  @media (max-width: 900px) { .llm-grid { grid-template-columns: 1fr 1fr; } }
  .llm-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; cursor: pointer; transition: all 0.12s; }
  .llm-card:hover { border-color: var(--border-light); }
  .llm-card.on { border-color: var(--green); }
  .llm-ic { font-size: 26px; margin-bottom: 6px; }
  .llm-nm { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
  .llm-st { font-size: 11px; }
  .mcp-flow { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; flex-wrap: wrap; }
  .mcp-node { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; text-align: center; min-width: 110px; }
  .mcp-node.center { background: var(--orange-dim); border-color: var(--orange); }
  .mcp-node .mi { font-size: 22px; margin-bottom: 4px; }
  .mcp-node .ml { font-size: 12px; font-weight: 600; }
  .mcp-node .ms { font-size: 9px; color: var(--text-dim); }
  .mcp-arr { font-size: 20px; color: var(--text-dim); }

  .learn-prompt { background: var(--bg-card); border: 1px solid var(--orange-glow); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
  .learn-prompt h4 { font-size: 13px; font-weight: 600; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
  .learn-prompt p { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 10px; }
  .learn-opts { display: flex; flex-wrap: wrap; gap: 6px; }
  .learn-opt { padding: 7px 16px; border-radius: 18px; border: 1px solid var(--border); background: var(--bg-elevated); font-size: 12px; cursor: pointer; color: var(--text-muted); transition: all 0.12s; font-family: inherit; }
  .learn-opt:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-dim); }

  .brief-card { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--orange); border-radius: var(--radius); padding: 18px; margin-bottom: 12px; }
  .brief-hdr { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  .brief-title { font-weight: 600; font-size: 14px; }
  .brief-time { margin-left: auto; font-size: 11px; color: var(--text-dim); }
  .brief-body { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
  .brief-action { margin-top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: var(--radius-sm); background: var(--orange-dim); color: var(--orange); font-size: 11px; font-weight: 500; cursor: pointer; border: 1px solid rgba(249,115,22,0.2); transition: all 0.12s; }
  .brief-action:hover { background: rgba(249,115,22,0.25); }

  .rule { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
  .toggle { width: 34px; height: 18px; border-radius: 9px; position: relative; cursor: pointer; transition: background 0.15s; flex-shrink: 0; }
  .toggle::after { content:''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
  .toggle.on { background: var(--green); }
  .toggle.on::after { transform: translateX(16px); }
  .toggle.off { background: var(--border); }
  .rule-text { flex: 1; font-size: 13px; }
  .rule-lvl { font-size: 9px; padding: 3px 8px; border-radius: 4px; font-weight: 600; white-space: nowrap; }

  .data-bar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
  .data-bar-ic { font-size: 20px; }
  .data-bar-txt { flex: 1; }
  .data-bar-txt strong { font-size: 13px; display: block; margin-bottom: 2px; }
  .data-bar-txt span { font-size: 11px; color: var(--text-dim); }
  .prog { width: 100%; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
  .prog-fill { height: 100%; border-radius: 2px; }
  .btn { padding: 7px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 12px; cursor: pointer; font-family: inherit; font-weight: 500; transition: all 0.12s; display: inline-flex; align-items: center; gap: 5px; }
  .btn:hover { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-light); }
  .btn-primary { background: var(--orange); border-color: var(--orange); color: #fff; }
  .btn-primary:hover { background: var(--orange-hover); }
  .prof-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
  .prof-card h4 { font-size: 13px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
  .prof-entry { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; line-height: 1.5; }
  .prof-entry:last-child { border-bottom: none; }
  .prof-entry .lbl { color: var(--text-dim); font-size: 10px; margin-bottom: 2px; }
  .prof-entry .val { color: var(--text-primary); font-size: 13px; }
  .prof-entry .conf { float: right; font-size: 9px; padding: 2px 6px; border-radius: 3px; }
  .tag { display: inline-block; font-size: 10px; padding: 2px 7px; border-radius: 4px; margin: 1px; background: var(--bg-elevated); color: var(--text-muted); }
  .people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 900px) { .people-grid { grid-template-columns: 1fr 1fr; } }
  .pgc { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-align: center; transition: all 0.12s; cursor: pointer; }
  .pgc:hover { border-color: var(--border-light); }
  .pgc-av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; margin: 0 auto 8px; }
  .pgc-nm { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
  .pgc-role { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }

  .person-card { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(255,255,255,0.02); border-radius: 8px; margin-bottom: 8px; }
  .person-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; }
  .person-info { flex: 1; }
  .person-name { font-size: 14px; font-weight: 500; }
  .person-role { font-size: 12px; color: var(--text-secondary); }

  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
  @keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.5; } }
  .pulse { animation: pulse 2s ease-in-out infinite; }
  @keyframes fadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
  .fin { animation: fadeIn 0.25s ease-out; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Login overlay */
  .login-overlay { position:fixed; inset:0; background:var(--bg-primary); z-index:1000; display:flex; align-items:center; justify-content:center; }
  /* .hidden alone loses the cascade to .login-overlay's display:flex. */
  .login-overlay.hidden { display:none; }
  .login-box .wl-actions { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
  .login-box { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:36px; width:360px; text-align:center; }
  .login-box .logo-icon { width:48px; height:48px; border-radius:12px; font-size:22px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; background:var(--orange); font-weight:800; box-shadow:0 0 20px rgba(249,115,22,0.3); }
  .login-box h2 { font-size:20px; margin-bottom:4px; }
  .login-box .sub { font-size:13px; color:var(--text-secondary); margin-bottom:24px; }
  .login-input { width:100%; padding:10px 14px; border-radius:8px; border:1px solid var(--border); background:var(--bg-secondary); color:var(--text-primary); font-size:14px; font-family:inherit; margin-bottom:12px; }
  .login-input:focus { outline:none; border-color:var(--orange); }
  .login-btn { width:100%; padding:11px; border-radius:8px; border:none; background:var(--orange); color:#fff; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; transition:background 0.15s; }
  .login-btn:hover { background:var(--orange-hover); }
  .login-btn:disabled { opacity:0.6; cursor:not-allowed; }
  .login-divider { display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--text-dim); font-size:12px; }
  .login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background:var(--border); }
  .google-btn { width:100%; padding:11px; border-radius:8px; border:1px solid var(--border); background:var(--bg-elevated); color:var(--text-primary); font-size:14px; font-weight:500; font-family:inherit; cursor:pointer; transition:background 0.15s, border-color 0.15s; display:flex; align-items:center; justify-content:center; gap:10px; }
  .google-btn:hover { background:var(--bg-card-hover); border-color:var(--text-dim); }
  .google-btn svg { width:18px; height:18px; }
  .login-error { color:var(--red); font-size:12px; margin-bottom:12px; min-height:18px; }

  /* Connection indicator */
  /* pointer-events:none — this is a status read-out, not a control, and it is
     position:fixed over the bottom-right of every page. Measured on a phone it
     was swallowing taps aimed at row buttons underneath it (Activity's
     Approve/Decline). Nothing here is clickable, so let taps through. */
  .conn-badge { position:fixed; bottom:12px; right:12px; font-size:10px; padding:4px 10px; border-radius:12px; z-index:100; display:flex; align-items:center; gap:5px; pointer-events:none; }
  .conn-badge.live { background:var(--green-dim); color:var(--green); }
  .conn-badge.demo { background:var(--orange-dim); color:var(--orange); }
  .conn-badge::before { content:''; width:6px; height:6px; border-radius:50%; }
  .conn-badge.live::before { background:var(--green); }
  .conn-badge.demo::before { background:var(--orange); }

  /* Quick capture modal */
  .modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:500; display:flex; align-items:center; justify-content:center; }
  .modal-overlay.hidden { display:none; }
  .modal { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; width:480px; max-width:90vw; }
  .modal h3 { font-size:16px; margin-bottom:4px; }
  .modal .sub { font-size:12px; color:var(--text-dim); margin-bottom:16px; }
  .modal textarea { width:100%; min-height:100px; padding:12px; border-radius:8px; border:1px solid var(--border); background:var(--bg-secondary); color:var(--text-primary); font-size:14px; font-family:inherit; resize:vertical; margin-bottom:12px; }
  .modal textarea:focus { outline:none; border-color:var(--orange); }
  .modal select { padding:8px 12px; border-radius:6px; border:1px solid var(--border); background:var(--bg-secondary); color:var(--text-primary); font-size:13px; font-family:inherit; margin-bottom:12px; }
  .modal-actions { display:flex; gap:8px; justify-content:flex-end; }

  /* File upload area */
  .upload-zone { border:2px dashed var(--border); border-radius:var(--radius); padding:32px; text-align:center; cursor:pointer; transition:all 0.15s; margin-bottom:18px; }
  .upload-zone:hover { border-color:var(--orange); background:var(--orange-dim); }
  .upload-zone.dragover { border-color:var(--orange); background:var(--orange-dim); }
  .upload-zone input[type=file] { display:none; }

  /* Spinner */
  .spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--orange); border-radius:50%; animation:spin 0.6s linear infinite; }

  /* Toast */
  .toast { position:fixed; bottom:48px; right:16px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm); padding:10px 16px; font-size:13px; z-index:12000; display:flex; align-items:center; gap:8px; box-shadow:0 4px 20px rgba(0,0,0,0.4); transform:translateY(100px); opacity:0; transition:all 0.3s; }
  .toast.show { transform:translateY(0); opacity:1; }
  .toast.success { border-color:var(--green); }
  .toast.error { border-color:var(--red); }

  /* Sidebar Quick Capture button */
  .sidebar-capture-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 24px);
    margin: 12px 12px 4px;
    padding: 10px 14px;
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(249,115,22,0.25);
    transition: background 0.15s, box-shadow 0.15s;
  }
  .sidebar-capture-btn:hover {
    background: var(--orange-hover);
    box-shadow: 0 4px 16px rgba(249,115,22,0.4);
  }
  .sidebar-capture-btn .qc-key {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    font-weight: 500;
  }
  /* Quick Note: secondary (outline) variant of the capture button. */
  .sidebar-note-btn {
    background: transparent;
    color: var(--orange);
    border: 1px solid var(--orange);
    box-shadow: none;
    margin-top: 0;
    margin-bottom: 8px;
  }
  .sidebar-note-btn:hover {
    background: rgba(249,115,22,0.12);
    box-shadow: none;
  }
  .sidebar-note-btn .qc-key { background: rgba(249,115,22,0.18); }

  /* Quick Note mobile/fallback floating capture button (FAB). */
  .qn-fab {
    position: fixed;
    right: 16px; bottom: 16px;
    z-index: 4000;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 10px 10px 8px;
    background: rgba(14,14,16,0.92);
    border: 1px solid rgba(249,115,22,0.4);
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
  }
  .qn-fab-close {
    position: absolute; top: 2px; right: 4px;
    background: transparent; border: none; color: #9A9AA2;
    font-size: 13px; cursor: pointer; padding: 2px 5px; border-radius: 6px;
  }
  .qn-fab-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
  .qn-fab-btn {
    width: 56px; height: 56px; border-radius: 50%;
    border: none; cursor: pointer;
    background: var(--orange); color: #fff; font-size: 22px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 18px rgba(249,115,22,0.4);
    transition: background .12s, transform .06s;
  }
  .qn-fab-btn:active { transform: scale(0.94); }
  .qn-fab-btn.recording { background: var(--red); animation: qn-pulse 1.3s infinite; }
  .qn-fab-btn.busy { background: #3A3A40; }
  @keyframes qn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.45); }
    70%  { box-shadow: 0 0 0 13px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  }
  .qn-fab-status { font-size: 11px; color: #C8C8CE; max-width: 150px; text-align: center; }

  /* ===== MEBOTS PAGE (Phase Y) ===== */
  /* All rules are scoped to .mb-page or use mb- prefixed classes to
     avoid colliding with the rest of the dashboard's CSS. */
  .mb-page-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
  .mb-page-hdr h1 { font-size: 26px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.4px; }
  .mb-page-hdr p { color: var(--text-secondary); font-size: 13px; max-width: 640px; line-height: 1.55; }
  .mb-page-hdr-actions { display: flex; gap: 8px; flex-shrink: 0; }

  .mb-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
  .mb-tab { padding: 11px 18px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-family: inherit; }
  .mb-tab:hover { color: var(--text-primary); }
  .mb-tab.active { color: var(--orange) !important; border-bottom-color: var(--orange) !important; }
  .mb-tab-ic { font-size: 13px; opacity: 0.9; }
  .mb-tab-badge { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 10px; background: var(--bg-elevated); color: var(--text-secondary); }
  .mb-tab-badge-hot { background: var(--orange-dim); color: var(--orange); }
  .mb-tab.active .mb-tab-badge { background: var(--orange-dim); color: var(--orange); }

  /* AG.2 — sidebar Mebots blink dot when an asker is mid-chat with my Mebot.
     Cleared automatically 60s after the last message. */
  .nav-live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.8);
    margin-left: 4px; vertical-align: middle;
    animation: navLivePulse 1.4s infinite;
  }
  @keyframes navLivePulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.85); opacity: 1; }
    70%  { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); opacity: 0.7; }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); opacity: 1; }
  }
  /* AG.3 — solid green dot on a chat row when a turn was just sent (no
     blink — solid means "live right now"). */
  .mb-row-live-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: #22c55e; flex-shrink: 0;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.55);
  }
  /* AG.4 — distinct icon for "live avatar video call in progress on this
     grant." Same green palette, video-camera glyph so it's visually
     separable from AG.3's plain dot when both are present on a row. */
  .mb-row-live-call {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 4px;
    background: #16a34a; color: #fff; font-size: 11px; line-height: 1;
    flex-shrink: 0;
  }

  .mb-btn-mini { padding: 7px 13px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-muted, var(--text-secondary)); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.12s; display: inline-flex; align-items: center; gap: 5px; font-family: inherit; }
  .mb-btn-mini:hover { background: var(--bg-card); color: var(--text-primary); border-color: #444450; }
  .mb-btn-primary { background: var(--orange); border-color: var(--orange); color: #fff; }
  .mb-btn-primary:hover { background: #fb923c; border-color: #fb923c; color: #fff; }
  .mb-icon-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.12s; font-family: inherit; }
  .mb-icon-btn:hover { background: var(--bg-card); color: var(--text-primary); }
  .mb-icon-btn.danger:hover { background: rgba(239,68,68,0.15); color: #ef4444; border-color: #ef4444; }

  /* DISCOVER ============================================== */
  .mb-discover-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
  @media (max-width: 1100px) { .mb-discover-layout { grid-template-columns: 1fr; } }
  .mb-discover-main { min-width: 0; }

  .mb-search-hero { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 22px; position: relative; overflow: hidden; }
  .mb-search-hero::before { content: ''; position: absolute; top: -40px; right: -40px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(249,115,22,0.2) 0%, transparent 70%); pointer-events: none; }
  .mb-search-input-wrap { position: relative; display: flex; align-items: center; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; }
  .mb-search-input-wrap:focus-within { border-color: var(--orange); }
  .mb-search-icn { font-size: 16px; color: var(--text-dim); margin-right: 10px; }
  .mb-search-input { flex: 1; padding: 14px 0; background: transparent; border: none; color: var(--text-primary); font-size: 15px; outline: none; font-family: inherit; }
  .mb-search-input::placeholder { color: var(--text-dim); }
  .mb-search-clear { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-card); border: none; color: var(--text-dim); cursor: pointer; font-size: 14px; }
  .mb-search-clear:hover { background: var(--bg-elevated); color: var(--text-primary); }
  .mb-search-hint { font-size: 11px; color: var(--text-dim); margin-top: 10px; }

  .mb-section-hdr { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
  .mb-section-hdr h3 { font-size: 14px; font-weight: 600; }
  .mb-section-sub { font-size: 12px; color: var(--text-dim); }

  .mb-mebot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
  .mb-mebot-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; transition: all 0.15s; position: relative; overflow: hidden; }
  .mb-mebot-card:hover { border-color: #444450; transform: translateY(-1px); }
  .mb-mebot-card-top { display: flex; align-items: center; gap: 12px; }
  .mb-mebot-av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0; }
  .mb-mebot-card-info { flex: 1; min-width: 0; }
  .mb-mebot-card-name { font-weight: 600; font-size: 14px; }
  .mb-mebot-card-email { font-size: 11px; color: var(--text-dim); }
  .mb-fav-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-dim); cursor: pointer; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; }
  .mb-fav-btn:hover { color: var(--orange); border-color: var(--orange); }
  .mb-fav-btn.on { color: var(--orange); border-color: var(--orange); background: var(--orange-dim); }
  .mb-mebot-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
  .mb-card-meta { font-size: 11px; color: var(--text-dim); }
  .mb-status.granted { color: #22E11C; }
  .mb-status.none { color: var(--text-dim); }

  .mb-empty-state { text-align: center; padding: 60px 20px; background: var(--bg-card); border: 1px dashed var(--border); border-radius: 12px; }
  .mb-empty-icon { font-size: 36px; color: var(--text-dim); margin-bottom: 12px; }
  .mb-empty-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
  .mb-empty-sub { font-size: 13px; color: var(--text-secondary); }

  .mb-favorites-rail { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
  .mb-rail-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
  .mb-rail-hdr h3 { font-size: 13px; font-weight: 600; }
  .mb-rail-count { font-size: 10px; padding: 2px 7px; border-radius: 10px; background: var(--bg-elevated); color: var(--text-secondary); font-weight: 600; }
  .mb-rail-sub { font-size: 11px; color: var(--text-dim); margin-bottom: 12px; line-height: 1.5; }
  .mb-rail-empty { font-size: 12px; color: var(--text-dim); padding: 8px 4px; }
  .mb-favorites-list { display: flex; flex-direction: column; gap: 4px; }
  .mb-fav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background 0.12s; }
  .mb-fav-item:hover { background: var(--bg-card-hover); }
  .mb-fav-av { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; color: #fff; flex-shrink: 0; }
  .mb-fav-info { flex: 1; min-width: 0; }
  .mb-fav-name { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mb-fav-label { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mb-fav-ok { color: #22E11C; }
  .mb-fav-warn { color: var(--orange); }
  .mb-fav-x { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; padding: 0 4px; }
  .mb-fav-x:hover { color: #ef4444; }

  /* GRANTS ============================================== */
  .mb-grants-layout { display: flex; flex-direction: column; gap: 18px; }
  .mb-grants-summary { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  @media (max-width: 1000px) { .mb-grants-summary { grid-template-columns: repeat(2, 1fr); } }
  .mb-summary-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
  .mb-summary-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; font-weight: 600; }
  .mb-summary-value { font-size: 26px; font-weight: 700; }
  .mb-summary-sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; }
  .mb-summary-action { display: flex; flex-direction: column; justify-content: center; }
  .mb-btn-grant { padding: 10px 14px; border-radius: 8px; background: var(--orange); color: #fff; border: none; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
  .mb-btn-grant:hover { background: #fb923c; }

  .mb-grants-table-wrap { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  /* wrap + gap: with four filter pills (Active/Expired/Revoked/All) a nowrap
     header crushed the h3 to 49px and 5 lines at 375px. The pills win the
     space and the title drops to its own line instead. */
  .mb-grants-table-hdr { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
  .mb-grants-table-hdr h3 { font-size: 14px; font-weight: 600; white-space: nowrap; }
  .mb-grants-filter { display: flex; gap: 4px; flex-wrap: wrap; }
  .mb-pill-btn { padding: 5px 12px; border-radius: 16px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-size: 11.5px; cursor: pointer; transition: all 0.12s; font-family: inherit; }
  .mb-pill-btn:hover { color: var(--text-primary); }
  .mb-pill-btn.active { background: var(--orange-dim); color: var(--orange); border-color: transparent; }

  .mb-grants-table { display: flex; flex-direction: column; }
  .mb-grants-table-head { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1fr 0.9fr 80px; gap: 16px; padding: 10px 18px; background: var(--bg-secondary); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--border); }
  .mb-grant-row { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1fr 0.9fr 80px; gap: 16px; padding: 14px 18px; align-items: center; border-bottom: 1px solid var(--border); transition: background 0.12s; }
  .mb-grant-row:last-child { border-bottom: none; }
  .mb-grant-row:hover { background: var(--bg-card-hover); }
  .mb-grant-row.revoked { opacity: 0.55; }

  .mb-grant-cell-grantee { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .mb-grant-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11.5px; color: #fff; flex-shrink: 0; }
  .mb-grant-av.muted { filter: grayscale(0.7); }
  .mb-grant-name { font-size: 13px; font-weight: 500; }
  .mb-grant-name.muted { color: var(--text-dim); text-decoration: line-through; }
  .mb-grant-email { font-size: 11px; color: var(--text-dim); }
  .mb-grant-cell-meter { min-width: 0; }
  .mb-meter-row { font-size: 12px; display: flex; align-items: baseline; gap: 4px; }
  .mb-meter-num { font-weight: 600; }
  .mb-meter-cap { color: var(--text-dim); font-size: 11px; }
  .mb-grant-cell-text { font-size: 12px; }
  .mb-grant-text-primary { color: var(--text-primary); font-weight: 500; }
  .mb-grant-text-sub { font-size: 10.5px; color: var(--text-dim); margin-top: 2px; }
  .mb-grant-cell-actions { display: flex; gap: 4px; justify-content: flex-end; }

  /* REQUESTS ============================================== */
  .mb-requests-layout { display: grid; grid-template-columns: 360px 1fr; gap: 18px; align-items: start; }
  @media (max-width: 1000px) { .mb-requests-layout { grid-template-columns: 1fr; } }
  .mb-requests-list-pane { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
  .mb-requests-list-hdr { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 12px; }
  .mb-requests-list-hdr h3 { font-size: 13px; font-weight: 600; }
  .mb-requests-count { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--orange-dim); color: var(--orange); font-weight: 600; }
  .mb-req-item { display: flex; gap: 10px; padding: 12px; border-radius: 8px; cursor: pointer; transition: background 0.12s; margin-bottom: 4px; }
  .mb-req-item:hover { background: var(--bg-card-hover); }
  .mb-req-item.selected { background: var(--orange-dim); }
  .mb-req-av { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; flex-shrink: 0; }
  .mb-req-item-body { flex: 1; min-width: 0; }
  .mb-req-item-name { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
  .mb-req-item-snippet { font-size: 11.5px; color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
  .mb-req-item-when { font-size: 10.5px; color: var(--text-dim); }

  .mb-request-detail-pane { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; }
  .mb-req-detail-hdr { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
  .mb-req-detail-av { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; }
  .mb-req-detail-name { font-size: 15px; font-weight: 600; }
  .mb-req-detail-email { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
  .mb-req-detail-meta { text-align: right; flex-shrink: 0; }
  .mb-req-meta-row { font-size: 11px; color: var(--text-secondary); }
  .mb-req-meta-time { color: var(--text-dim); margin-top: 2px; font-size: 10.5px; }
  .mb-req-section { margin-bottom: 20px; }
  .mb-req-section-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 8px; }
  .mb-req-message-box { padding: 14px 16px; border-radius: 8px; background: var(--bg-secondary); border-left: 3px solid var(--orange); font-size: 13px; line-height: 1.55; color: var(--text-secondary); font-style: italic; }
  .mb-req-hint { font-size: 11px; color: var(--text-dim); margin-top: 6px; }
  .mb-limit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .mb-limit-cell { padding: 12px 14px; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--border); }
  .mb-limit-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
  .mb-limit-value { font-size: 16px; font-weight: 600; }
  .mb-limit-unit { font-size: 11px; color: var(--text-dim); font-weight: 400; }
  .mb-req-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 18px; border-top: 1px solid var(--border); }
  .mb-req-audit { font-size: 10.5px; color: var(--text-secondary); margin-top: 14px; padding: 10px 12px; background: var(--bg-secondary); border-radius: 6px; font-family: 'SF Mono', monospace; }
  .mb-req-audit code { background: var(--bg-elevated); padding: 1px 5px; border-radius: 3px; }

  /* DRAWER + MODAL ============================================== */
  .mb-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 80; }
  .mb-drawer { position: fixed; top: 0; right: 0; width: 460px; max-width: 95vw; height: 100vh; background: var(--bg-secondary); border-left: 1px solid var(--border); z-index: 81; padding: 22px; overflow-y: auto; animation: mb-slideIn 0.22s ease-out; }
  @keyframes mb-slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
  .mb-drawer-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .mb-drawer-title { font-size: 16px; font-weight: 600; }
  .mb-drawer-grantee { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg-card); border-radius: 8px; margin-bottom: 18px; }
  .mb-drawer-grantee-name { font-weight: 600; font-size: 14px; }
  .mb-drawer-grantee-email { font-size: 11.5px; color: var(--text-dim); }
  .mb-drawer-section { margin-bottom: 22px; }
  .mb-drawer-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 10px; }
  .mb-drawer-slider { width: 100%; appearance: none; -webkit-appearance: none; height: 4px; background: var(--bg-elevated); border-radius: 2px; outline: none; }
  .mb-drawer-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); cursor: pointer; box-shadow: 0 0 0 4px rgba(249,115,22,0.15); }
  .mb-slider-row { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; }
  .mb-slider-val { font-weight: 600; }
  .mb-slider-est { color: var(--text-dim); }
  .mb-expiry-options { display: flex; gap: 6px; }
  .mb-expiry-btn { flex: 1; padding: 9px 10px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 12px; cursor: pointer; transition: all 0.12s; font-family: inherit; }
  .mb-expiry-btn:hover { color: var(--text-primary); }
  .mb-expiry-btn.active { background: var(--orange-dim); color: var(--orange); border-color: var(--orange); }
  .mb-drawer-foot { display: flex; gap: 8px; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--border); }

  .mb-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 460px; max-width: 95vw; max-height: 90vh; overflow-y: auto; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; z-index: 81; padding: 22px; animation: mb-fadeIn 0.18s ease-out; }
  @keyframes mb-fadeIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }
  .mb-modal-text { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin-bottom: 18px; }
  .mb-modal-input { width: 100%; padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 13px; font-family: inherit; }
  .mb-modal-input:focus { outline: none; border-color: var(--orange); }
  .mb-toggle-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-primary); cursor: pointer; }