:root{
    --bg: #f5f5f0;
    --fg: #2d2d2d;
    --muted: #8a8a8a;
    --border: #ddd9d0;
    --accent: #0a7c4a;
    --accent-hover: #08603a;
    --panel: #fdfcf9;
    --hover: #eeeadf;
    --selected: #e4f0e8;
    --danger: #b91c1c;
    --warning: #b45309;
  }
  /* OS-level dark (default when theme=auto or unset) */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg: #1a1a1a;
      --fg: #d4d4d4;
      --muted: #777;
      --border: #333;
      --accent: #34d399;
      --accent-hover: #6ee7b7;
      --panel: #222;
      --hover: #2a2a2a;
      --selected: #1a3a2a;
      --danger: #f87171;
      --warning: #fbbf24;
    }
  }
  /* User-forced dark (via theme toggle) overrides OS setting either way */
  :root[data-theme="dark"]{
    --bg: #1a1a1a;
    --fg: #d4d4d4;
    --muted: #777;
    --border: #333;
    --accent: #34d399;
    --accent-hover: #6ee7b7;
    --panel: #222;
    --hover: #2a2a2a;
    --selected: #1a3a2a;
    --danger: #f87171;
    --warning: #fbbf24;
  }
  /* Theme toggle button — small, unobtrusive, in header */
  .theme-toggle{background:transparent;border:1px solid var(--border);color:var(--muted);width:28px;height:28px;border-radius:50%;font-size:.95rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;cursor:pointer}
  .theme-toggle:hover{color:var(--fg);background:var(--hover)}
  @media (max-width: 760px){ .theme-toggle{width:32px;height:32px} }
  /* Language toggle (flag pair). Active flag is fully opaque; inactive is dimmed. */
  .lang-toggle{display:inline-flex;gap:0;align-items:center;border:1px solid var(--border);border-radius:14px;overflow:hidden;flex-shrink:0;background:transparent}
  .lang-toggle button{background:transparent;border:0;padding:2px 6px;cursor:pointer;line-height:0;display:inline-flex;align-items:center;opacity:.45;transition:opacity .15s,background .15s}
  .lang-toggle button:hover{opacity:.85;background:var(--hover)}
  .lang-toggle button.active{opacity:1;background:var(--hover)}
  .lang-toggle svg{width:20px;height:14px;display:block;border-radius:1px}
  @media (max-width: 760px){ .lang-toggle svg{width:22px;height:16px} }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--fg);font-size:14px}
  a{color:var(--accent);text-decoration:none}
  a:hover{text-decoration:underline}
  button{font-family:inherit;font-size:inherit;cursor:pointer}
  .btn{padding:.4rem .75rem;background:var(--accent);color:#fff;border:0;border-radius:4px}
  .btn:hover{background:var(--accent-hover)}
  .btn-ghost{padding:.4rem .75rem;background:transparent;color:var(--fg);border:1px solid var(--border);border-radius:4px}
  .btn-ghost:hover{background:var(--hover)}
  .btn-danger{padding:.4rem .75rem;background:transparent;color:var(--danger);border:1px solid var(--danger);border-radius:4px}
  .btn-danger:hover{background:var(--danger);color:#fff}
  input[type=text],input[type=email],textarea{padding:.5rem;border:1px solid var(--border);border-radius:4px;font-family:inherit;font-size:inherit;width:100%;background:var(--panel);color:var(--fg)}
  textarea{min-height:200px;font-family:ui-monospace,monospace}
  select{padding:.4rem .5rem;border:1px solid var(--border);border-radius:4px;background:var(--panel);color:var(--fg)}

  /* desktop layout: grid with header + main */
  .app{display:grid;grid-template-rows:auto 1fr;height:100vh}
  header{background:var(--panel);border-bottom:1px solid var(--border);padding:.5rem 1rem;display:flex;align-items:center;gap:1rem;flex-wrap:nowrap;min-height:44px}
  header .brand{font-weight:600;font-size:1rem;color:var(--accent);text-decoration:none;flex-shrink:0}
  header nav.top-nav{display:flex;gap:.1rem;flex-wrap:nowrap}
  header nav.top-nav a{color:var(--muted);padding:.25rem .5rem;border-radius:3px;font-size:.85rem;white-space:nowrap}
  header nav.top-nav a.active,header nav.top-nav a:hover{color:var(--fg);background:var(--hover)}
  .focus-banner{padding:.3rem .6rem;background:#fff8e1;border:1px solid #fde68a;border-radius:4px;font-size:.8rem;color:#7c5a00;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;text-decoration:none}
  .focus-banner:hover{background:#fef3c7}
  .focus-banner.empty{background:transparent;border:1px dashed var(--border);color:var(--muted)}
  .focus-banner strong{color:#7c5a00}

  /* bottom tab bar — mobile only */
  .bottom-tabs{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--border);z-index:100;height:54px;padding-bottom:env(safe-area-inset-bottom,0)}
  .bottom-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;font-size:.7rem;gap:.1rem;padding:.25rem;-webkit-tap-highlight-color:transparent}
  .bottom-tabs a.active{color:var(--accent)}
  .bottom-tabs a .ico{font-size:1.25rem;line-height:1}

  /* drawer (opens from top-left hamburger on mobile) */
  .drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;opacity:0;transition:opacity .2s}
  .drawer-overlay.open{display:block;opacity:1}
  .drawer{position:fixed;top:0;bottom:0;left:0;width:82%;max-width:300px;background:var(--panel);z-index:201;transform:translateX(-100%);transition:transform .2s;overflow-y:auto;padding:1rem;padding-top:calc(env(safe-area-inset-top,0) + 1rem)}
  .drawer.open{transform:translateX(0)}
  .drawer h3{font-size:.7rem;text-transform:uppercase;color:var(--muted);margin:1rem 0 .3rem;letter-spacing:.05em}
  .drawer a{display:block;padding:.5rem .25rem;color:var(--fg);text-decoration:none;border-radius:4px;font-size:.95rem}
  .drawer a:hover,.drawer a.active{background:var(--hover)}
  .drawer .kx-drawer-row{display:flex;align-items:center;gap:.6rem;padding:.55rem .35rem}
  .drawer .kx-drawer-row .kx-vi{flex-shrink:0;color:var(--muted)}
  .drawer .kx-drawer-row.active .kx-vi,.drawer .kx-drawer-row:hover .kx-vi{color:var(--fg)}
  .bottom-tabs .ico{display:inline-flex;align-items:center;justify-content:center;line-height:1}

  .hamburger{display:none;background:none;border:0;padding:.25rem .5rem;font-size:1.25rem;color:var(--fg);cursor:pointer}

  /* modal */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:300;display:flex;align-items:center;justify-content:center;padding:1rem}
  .modal-box{background:var(--panel);border-radius:10px;padding:1.25rem;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;box-shadow:0 12px 40px rgba(0,0,0,.15)}

  /* MOBILE: drop top nav into drawer; add bottom tabs */
  @media (max-width: 760px){
    header{padding:.4rem .6rem;gap:.5rem}
    header .brand{font-size:1rem;flex:1}
    header nav.top-nav{display:none}            /* hidden on mobile — use drawer instead */
    .focus-banner{display:none}                 /* no longer in header on mobile */
    .hamburger{display:block}
    .bottom-tabs{display:flex}
    main{padding-bottom:60px}                   /* space for bottom tab bar */
    .app{height:auto;min-height:100vh}
  }

  main{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}

  /* 3-pane mail layout */
  .mail-shell{display:grid;grid-template-columns:220px 380px 1fr;height:100%;min-height:0}
  .mail-shell>*:not(.phone-back){min-height:100%}
  .mail-sidebar{border-right:1px solid var(--border);background:var(--panel);overflow-y:auto;padding:.75rem}
  .mail-sidebar h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:1rem 0 .3rem;font-weight:600}
  .mail-sidebar h3:first-child{margin-top:.25rem}
  .mail-sidebar .side-item{display:flex;align-items:center;gap:.5rem;padding:.35rem .5rem;border-radius:4px;cursor:pointer;color:var(--fg);text-decoration:none;font-size:.85rem}
  .mail-sidebar .side-item:hover{background:var(--hover);text-decoration:none}
  .mail-sidebar .side-item.active{background:var(--selected);font-weight:500}
  .mail-sidebar .side-item .count{margin-left:auto;color:var(--muted);font-size:.75rem}
  .mail-sidebar .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
  /* View/category icons in the sidebar (kx_icon macro) + filter pills. */
  .kx-vi-wrap{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}
  .filter-pill{display:inline-flex;align-items:center;gap:.3rem}
  .filter-pill .kx-vi{opacity:.85}
  .filter-pill.active .kx-vi{opacity:1}

  .mail-list{border-right:1px solid var(--border);background:var(--panel);overflow-y:auto;min-height:0;flex:1}
  .mail-list-item-wrap{position:relative;overflow:hidden;background:var(--panel)}
  .mail-list-item-actions{position:absolute;top:0;bottom:0;right:0;display:flex;z-index:1}
  .mail-list-item-actions button{border:0;color:#fff;font-size:.75rem;font-weight:600;min-width:80px;cursor:pointer;padding:0 .75rem;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.2rem;-webkit-tap-highlight-color:transparent}
  .mail-list-item-actions button .ico{font-size:1.2rem;line-height:1}
  .mail-list-item-actions .act-archive{background:#059669}
  .mail-list-item-actions .act-spam{background:#dc2626}
  .mail-list-item{padding:.6rem .75rem;border-bottom:1px solid var(--border);cursor:pointer;display:flex;flex-direction:column;gap:.2rem;background:var(--panel);position:relative;z-index:2;transition:transform .2s;touch-action:pan-y}
  .mail-list-item.swiped{transform:translateX(-160px)}
  .mail-list-item:hover{background:var(--hover)}
  .mail-list-item.selected{background:var(--selected)}
  .mail-list-item.removing{transform:translateX(-100%);opacity:0;transition:transform .25s, opacity .25s}
  .mli-row{display:flex;align-items:center;gap:.4rem;justify-content:space-between}
  .mli-from{font-weight:600;font-size:.9rem;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
  .teams-dot{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;font-size:.7em;font-weight:800;color:#fff;background:#5b5fc7;border-radius:4px;vertical-align:middle;margin-right:.4em;box-shadow:0 0 0 1px rgba(91,95,199,.35)}
  .teams-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .55rem;background:linear-gradient(135deg,#5b5fc7,#7b7fe3);color:#fff;border-radius:5px;font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;box-shadow:0 1px 2px rgba(91,95,199,.3)}
  .teams-badge svg{width:14px;height:14px;fill:currentColor}
  .teams-thread-msg{padding:.5rem .6rem;margin:.35rem 0;border-radius:6px;border-left:3px solid #5b5fc7;background:#f5f5ff}
  .teams-thread-msg.from-me{border-left-color:#047857;background:#f0fdf4;margin-left:1.5rem}
  .teams-thread-msg .tmeta{font-size:.72rem;color:var(--muted);margin-bottom:.15rem}
  .mli-time{font-size:.75rem;color:var(--muted);flex-shrink:0}
  .mli-subj{font-size:.88rem;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mli-snip{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mli-tags{display:flex;gap:.25rem;margin-top:.15rem}

  .mail-reader{overflow-y:auto;background:var(--bg);padding:1rem 1.5rem;min-height:100%}
  .mail-reader h2{margin-top:0;font-size:1.2rem}
  .reader-meta{color:var(--muted);font-size:.85rem;margin:.25rem 0 1rem}
  .reader-meta .addr{color:var(--fg)}
  .reader-actions{margin:.5rem 0 1rem;display:flex;gap:.4rem;flex-wrap:wrap}
  .reader-body{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:1rem;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;max-height:calc(100vh - 320px);overflow-y:auto}
  .reader-body iframe{width:100%;border:0;min-height:400px}
  .classifier-box{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:.6rem .75rem;margin-bottom:1rem;font-size:.85rem}
  .classifier-box .label{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}

  .empty-reader{display:flex;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:.9rem}

  /* tags / badges */
  .tag{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .45rem;border-radius:10px;font-size:.7rem;font-weight:500;line-height:1.5}
  .tag-legal{background:#fee2e2;color:#b91c1c}
  .tag-employee{background:#d1fae5;color:#047857}
  .tag-family{background:#ede9fe;color:#6d28d9}
  .tag-vendor{background:#fef3c7;color:#92400e}
  .tag-financial{background:#cffafe;color:#0e7490}
  .tag-personal{background:#ede9fe;color:#6d28d9}
  .tag-spaces{background:#ede9fe;color:#6d28d9}
  .tag-newsletter{background:#f1f5f9;color:#475569}
  .tag-spam{background:#ffedd5;color:#c2410c}
  .tag-phishing{background:#fef2f2;color:#b91c1c;font-weight:600;border:1px solid #fca5a5}
  .tag-unknown{background:#e5e7eb;color:#4b5563}
  .tag-urgent{background:#b91c1c;color:#fff}
  .tag-high{background:#fee2e2;color:#b91c1c}
  .tag-normal{background:#e5e7eb;color:#4b5563}
  .tag-low{background:#f3f4f6;color:#9ca3af}
  .tag-customer{background:#d1fae5;color:#047857}
  .tag-vendor{background:#fef3c7;color:#92400e}
  .tag-person{background:#ede9fe;color:#6d28d9}
  .tag-org{background:#f1f5f9;color:#475569}
  .tag-employee{background:#d1fae5;color:#047857}

  /* phone-back is mobile-only; never render on desktop so it doesn't
     become a grid item in the mail-shell layout */
  .phone-back{display:none}

  /* Mobile compose FAB hidden on desktop (sidebar has the Compose button there) */
  .mobile-compose-fab{display:none}

  /* Compose — new-message modal. The host div becomes a full-screen backdrop
     when populated (i.e. not :empty); the inner .compose-panel is centered. */
  #compose-host:not(:empty){position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:350;display:flex;align-items:center;justify-content:center;padding:1rem;animation:kx-fade .15s ease-out}
  @keyframes kx-fade{from{opacity:0}to{opacity:1}}
  .compose-panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 48px rgba(0,0,0,.28);z-index:351;display:flex;flex-direction:column;width:min(680px,100%);max-height:86vh}
  /* Inline reply/forward — compose renders inline as a card; `.modal-mode`
     class on the host pops it out into a centered modal over a backdrop. */
  #inline-reply-host:not(:empty){margin:0 0 1rem}
  #inline-reply-host .compose-panel{width:100%;max-width:100%;max-height:none;box-shadow:none;border:1px solid var(--border);border-radius:6px;z-index:auto}
  #inline-reply-host.modal-mode{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:350;display:flex;align-items:center;justify-content:center;padding:1rem;margin:0;animation:kx-fade .15s ease-out}
  #inline-reply-host.modal-mode .compose-panel{width:min(680px,100%);max-height:86vh;box-shadow:0 12px 48px rgba(0,0,0,.28);border-radius:10px}
  .compose-panel header{border-bottom:1px solid var(--border);border-radius:8px 8px 0 0;padding:.5rem .75rem;display:flex;justify-content:space-between;align-items:center}
  .compose-panel .body{padding:.75rem;display:flex;flex-direction:column;gap:.5rem;overflow-y:auto}
  .compose-row{display:flex;gap:.5rem;align-items:center}
  .compose-row label{width:4rem;color:var(--muted);font-size:.85rem;flex-shrink:0}

  /* focus edit */
  .focus-edit-wrap{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:1rem;max-width:640px;margin:1rem auto}

  /* admin page (existing) */
  .admin-container{max-width:960px;margin:1rem auto;padding:0 1rem}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:1rem;margin:1rem 0}

  /* filter pills */
  .filter-bar{display:flex;gap:.3rem;padding:.5rem .75rem;border-bottom:1px solid var(--border);overflow-x:auto;background:var(--panel)}
  .filter-pill{display:inline-block;padding:.25rem .6rem;border-radius:12px;font-size:.75rem;cursor:pointer;border:1px solid var(--border);background:transparent;white-space:nowrap;color:var(--fg);text-decoration:none;user-select:none}
  .filter-pill:hover{background:var(--hover)}
  .filter-pill.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
  /* Thin top progress bar (existing) + centered overlay spinner for hx-boost
     nav. Overlay has a 120ms opacity delay so instant responses don't flash
     it; anything slower surfaces it clearly so clicks feel alive. */
  .htmx-request #mail-boost-spinner{opacity:1}
  #mail-boost-spinner{position:fixed;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#0a7c4a,transparent);background-size:40% 100%;background-repeat:no-repeat;animation:boost-slide 1s linear infinite;animation-play-state:paused;opacity:0;transition:opacity .2s;z-index:9999;pointer-events:none}
  .htmx-request #mail-boost-spinner{animation-play-state:running}
  @keyframes boost-slide{0%{background-position:-40% 0}100%{background-position:140% 0}}
  #kanex-nav-spinner{position:fixed;inset:0;background:rgba(10,37,64,.28);backdrop-filter:blur(2px);z-index:400;display:none;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .12s ease-out .12s /* 120ms delay avoids flashing on cached responses */}
  .htmx-request #kanex-nav-spinner{display:flex;opacity:1}
  #kanex-nav-spinner .kx-box{background:var(--panel);padding:.9rem 1.4rem;border-radius:10px;box-shadow:0 8px 28px rgba(0,0,0,.18);display:flex;align-items:center;gap:.75rem;font-size:.88rem;color:var(--fg)}
  #kanex-nav-spinner .kx-ring{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(30,107,184,.2);border-top-color:#1e6bb8;animation:kx-ring-spin .7s linear infinite;animation-play-state:paused}
  .htmx-request #kanex-nav-spinner .kx-ring{animation-play-state:running}
  @keyframes kx-ring-spin{to{transform:rotate(360deg)}}

  .htmx-indicator{opacity:0;transition:opacity .2s}
  .htmx-request .htmx-indicator{opacity:1}

  /* bulk-action bar + multi-select check styling */
  .bulk-action-bar{display:flex;gap:.4rem;align-items:center;padding:.4rem .75rem;background:var(--panel);border-bottom:1px solid var(--border);font-size:.82rem}
  .bulk-action-bar[hidden]{display:none}
  .bulk-count{font-weight:600;color:var(--accent);padding:.15rem .5rem;background:var(--hover);border-radius:10px}
  .bulk-action-bar .k{font-size:.7rem;color:var(--muted)}
  .mail-list-item.multi-checked{background:var(--hover);outline:2px solid var(--accent);outline-offset:-2px}

  /* /admin 2x2 layout */
  .admin-2x2{max-width:1400px;margin:0 auto;padding:1rem 1rem 4.5rem}
  .admin-header{margin-bottom:1rem}
  .admin-header h1{margin:0;font-size:1.35rem}
  .admin-header .admin-sub{color:var(--muted);font-size:.85rem}
  .admin-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:.75rem}
  .admin-panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:1rem;min-height:220px}
  .ap-heading{margin:0 0 .75rem;font-size:1rem;letter-spacing:.01em}
  .qa-group{padding:.35rem 0;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
  .qa-group:first-of-type{border-top:0}
  .qa-group-label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;width:100%;margin-top:.25rem;margin-bottom:.2rem}
  .sec-stat{padding:.55rem 0;border-bottom:1px solid var(--border);display:flex;align-items:baseline;gap:.5rem}
  .sec-stat:last-of-type{margin-bottom:.4rem}
  .sec-stat-num{font-size:1.6rem;font-weight:700}
  .sec-stat-lbl{color:var(--muted);font-size:.82rem}
  .sec-row{display:flex;justify-content:space-between;align-items:center;padding:.3rem 0;border-top:1px solid var(--border);font-size:.86rem}
  .sec-row:first-of-type{border-top:1px solid var(--border)}
  .sec-row .sec-lbl{color:var(--muted)}
  .sec-chip{display:inline-block;padding:1px 7px;border-radius:10px;font-size:.7rem;font-weight:600}
  .sec-chip.sec-ok{background:#dcfce7;color:#166534}
  .sec-chip.sec-ext{background:#fef3c7;color:#92400e}
  .stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
  .stat-grid>div{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.6rem;text-align:center}
  .sg-num{font-size:1.4rem;font-weight:700;color:var(--accent)}
  .sg-lbl{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:.15rem}
  .users-list{max-height:320px;overflow-y:auto;border:1px solid var(--border);border-radius:6px}
  table.admin-users{width:100%;font-size:.82rem;border-collapse:collapse}
  table.admin-users th,table.admin-users td{padding:.35rem .5rem;border-bottom:1px solid var(--border);text-align:left}
  table.admin-users thead th{background:var(--bg);position:sticky;top:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}

  @media (max-width:900px){
    .admin-grid{grid-template-columns:1fr}
  }

  /* responsive mail layout */
  @media (max-width: 1100px){
    .mail-shell{grid-template-columns:200px 360px 1fr}
    .mail-sidebar{padding:.5rem}
    .mail-sidebar h3{font-size:.65rem}
  }
  @media (max-width: 900px){
    .mail-shell{grid-template-columns:360px 1fr}
    .mail-sidebar{display:none}
  }
  /* Mobile-only sidebar toggle button (hidden on desktop) */
  .mail-side-toggle{display:none}
  .mail-side-backdrop{display:none}

  @media (max-width: 760px){
    /* phone: single-pane; reading pane slides in as a fixed overlay */
    .mail-shell{display:block;height:auto;grid-template-columns:none;position:relative}
    /* Sidebar becomes a slide-in drawer, hidden by default (translated off-screen). */
    .mail-sidebar{
      display:block;
      position:fixed;
      top:0;bottom:0;left:0;
      width:82%;max-width:300px;
      background:var(--panel);
      z-index:180;
      transform:translateX(-100%);
      transition:transform .2s;
      overflow-y:auto;
      padding:1rem;
      padding-top:calc(env(safe-area-inset-top,0) + 3rem);
      box-shadow:2px 0 12px rgba(0,0,0,.25);
    }
    .mail-shell.mail-side-open .mail-sidebar{transform:translateX(0)}
    .mail-side-backdrop{
      display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);
      z-index:170;opacity:0;transition:opacity .2s;
    }
    .mail-shell.mail-side-open .mail-side-backdrop{display:block;opacity:1}
    /* Toggle button on mobile — floats top-right of the list area */
    .mail-side-toggle{
      display:inline-flex;align-items:center;gap:.35rem;
      position:sticky;top:0;z-index:60;
      margin:0 0 .5rem;padding:.55rem .85rem;
      background:var(--panel);color:var(--fg);
      border:1px solid var(--border);border-radius:6px;
      font-size:.85rem;font-weight:500;cursor:pointer;
      -webkit-tap-highlight-color:transparent;
    }
    /* Hide the "back" button + filter toggle when the reader pane is up */
    .mail-shell.phone-reading .mail-side-toggle{display:none}
    .mail-list{display:block;width:100%;border-right:0;height:auto;min-height:calc(100vh - 160px)}
    .mail-reader{display:none;position:fixed;top:0;left:0;right:0;bottom:54px;background:var(--bg);z-index:80;overflow-y:auto;padding:3rem 1rem 1rem}
    .mail-shell.phone-reading .mail-reader{display:block}
    .phone-back{position:fixed;top:.5rem;left:.5rem;z-index:90;background:var(--accent);color:#fff;border:1px solid var(--accent);border-radius:6px;padding:.55rem 1rem;font-size:.95rem;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 2px 8px rgba(0,0,0,.2);display:none!important}
    .mail-shell.phone-reading .phone-back,
    body.phone-reading .phone-back{display:inline-block!important}
    .mail-list-item{padding:.85rem .75rem}
    .mli-from{font-size:.95rem}
    .mli-subj{font-size:.9rem}
    .reader-body{max-height:none}
    #compose-host:not(:empty){padding:0}
    #compose-host .compose-panel{width:100%;max-width:100%;height:100vh;max-height:100vh;border-radius:0}
    /* On mobile the inline reply must NOT be fullscreen — keep it flowing under the message */
    #inline-reply-host .compose-panel{position:static;width:100%;height:auto;max-height:none;border-radius:6px;top:auto;bottom:auto;left:auto;right:auto}
    #inline-reply-host.modal-mode{padding:0}
    #inline-reply-host.modal-mode .compose-panel{width:100%;max-width:100%;height:100vh;max-height:100vh;border-radius:0}

    /* Mobile compose rows: stack label above input for full-width fields */
    .compose-row{flex-direction:column;align-items:stretch;gap:.2rem}
    .compose-row label{width:auto;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}
    .compose-panel textarea{min-height:160px;font-size:16px} /* 16px keeps iOS from auto-zooming */
    .compose-panel input[type=text],.compose-panel select{font-size:16px}

    /* Tables everywhere overflow the 375px viewport. Wrap each in a horizontal
       scroll zone via display:block so rows stay intact and users can swipe. */
    main table{display:block;max-width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}

    /* Larger tap targets for primary/ghost buttons on mobile (44px min target) */
    .btn,.btn-ghost,.btn-danger{padding:.6rem .9rem;min-height:40px}

    /* Grid cards (today, admin, calendar event cards) — lower the minmax so
       single-column doesn't waste space on phones */
    .stats-grid,.admin-grid,.event-grid{grid-template-columns:1fr!important}

    /* Mobile-only floating Compose button — 56px FAB above bottom tabs */
    .mobile-compose-fab{display:flex;align-items:center;justify-content:center;
      position:fixed;right:1rem;bottom:calc(54px + env(safe-area-inset-bottom,0) + 1rem);
      z-index:95;width:56px;height:56px;border-radius:50%;border:0;
      background:var(--accent);color:#fff;font-size:1.5rem;line-height:1;
      box-shadow:0 4px 12px rgba(0,0,0,.25);cursor:pointer}
    .filter-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;gap:.4rem;padding:.5rem}
    .filter-bar .filter-pill{flex-shrink:0;padding:.35rem .75rem;font-size:.8rem}
  }