/* slingpanel v3 - extracted from the original single-file index.html (2026-08-23) as part of
   bringing v3 to menu parity with v2 (see panels/slingpanel FRONTEND_APPS.md). Structure below
   deliberately mirrors v2/css/style.css's own layout classes (sidebar/nav-item/page-panel/
   sub-tab/modal-overlay) since v3 now needs the same two-level nav v2 has - reskinned onto v3's
   existing purple design tokens, not v2's blue ones. */
*{box-sizing:border-box;margin:0;padding:0}
:root{
 /* Brand pass 1 Change 2 (2026-09-03): these are now aliases onto the real tokens linked above
    (slingshot-tokens.css), not re-declared hex - this is what stops values silently drifting,
    which is exactly how #FEF3C7/#FDECEF/#E4F5EE got here (two teams independently reaching for
    a foreign value because no shared source of truth existed). Local names kept as-is (--p500
    etc, not --brand-500) so none of the hundreds of var(--p500)-style call sites below need to
    change - only what they resolve to. */
 --p50:var(--brand-50);--p100:var(--brand-100);--p200:var(--brand-200);--p300:var(--brand-300);--p400:var(--brand-400);--p500:var(--brand-500);--p600:var(--brand-600);--p700:var(--brand-700);--p900:var(--brand-900);
 --n0:var(--n-0);--n25:var(--n-25);--n50:var(--n-50);--n100:var(--n-100);--n200:var(--n-200);--n400:var(--n-400);
 --n500:var(--n-500);--n600:var(--n-600);--n700:var(--n-700);--n900:var(--n-900);
 /* --n300 (#C6CADB) has NO equivalent in slingshot-tokens.css - it jumps --n-200 straight to
    --n-400 with nothing between. Per that file's own header rule ("if you need one, the file is
    wrong and gets edited there first, never overridden locally") this isn't a value to invent
    here - kept as a flagged local-only literal, 5 usages (hover-border weight), until whoever
    owns the token file makes a real decision about it. */
 --n300:#C6CADB;
 --g500:var(--green-500);--g100:var(--green-100);
 --amber:var(--amber-500);--amber100:var(--amber-100);--amber700:var(--amber-700);
 --red:var(--red-500);--red100:var(--red-100);--red700:var(--red-700);
 --font:'Inter',-apple-system,system-ui,sans-serif;
 --sh-sm:0 1px 3px rgba(41,27,71,.06);--sh-md:0 4px 12px rgba(41,27,71,.08);
 --radius-sm:8px;--radius-md:10px;--radius-lg:14px;
}
body{font-family:var(--font);background:var(--n50);color:var(--n900);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:520px;margin:0 auto;padding:56px 24px}
.wrap.wide{max-width:760px}
/* Real lockup (2026-09-03, brand pass 1 - brand/panel/DAVE-LOOK-AND-FEEL-2026-09-02.md Change 1),
   replacing the gradient tile. .lk's wordmark paths are currentColor - size via width on .lk,
   viewBox handles the rest. .lockup is a plain non-interactive wrapper (div, not the doc snippet's
   <a href="/">) - these logo spots have never been links, and adding one would be new functional
   behavior, out of scope for this pass. */
.lockup{display:block;margin-bottom:22px}
.lk{width:160px;height:auto;color:var(--n900)}
.lk-txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
h1{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.lede{color:var(--n600);font-size:14.5px;margin-bottom:26px;line-height:1.6}
.card{background:var(--n0);border:1px solid var(--n200);border-radius:14px;padding:26px;box-shadow:var(--sh-sm);margin-bottom:18px}
label{display:block;font-size:11.5px;font-weight:700;color:var(--n500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
input,select,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--n200);border-radius:8px;font-size:14px;font-family:inherit;color:var(--n900);margin-bottom:14px}
/* Brand pass 1 Change 3 (2026-09-03): buttons never inherit font-family from body by default -
   this reset was already applied to input/select/textarea above but never to button, which is
   why the signup CTA ("Get my business line") rendered in the OS default UI font instead of
   Inter (Aug 28 audit finding). .btn-add/.btn-outline/.btn-danger below were already unaffected -
   they set font-family via the `font:` shorthand - only bare `button`/.btn was missing it. */
button{font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--p500)}
textarea{resize:vertical}
.seg{display:flex;gap:6px;margin-bottom:14px}
.seg .opt{flex:1;text-align:center;border:1.5px solid var(--n200);border-radius:8px;padding:9px;font-size:12.5px;font-weight:600;color:var(--n500);background:var(--n0);cursor:pointer}
.seg .opt.on{border-color:var(--p500);background:var(--p50);color:var(--p700)}
.btn{background:var(--p500);color:#fff;border:0;border-radius:9px;padding:12px 16px;font-size:14px;font-weight:700;text-align:center;cursor:pointer;width:100%}
.btn:hover{background:var(--p600)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.g{background:var(--g500)}
.btn.g:hover{background:#086b4a}
.btn.outline{background:var(--n0);color:var(--p700);border:1.5px solid var(--n300)}
.btn.outline:hover{background:var(--n25)}
.msg{padding:10px 13px;border-radius:8px;font-size:13px;margin-bottom:14px}
.msg.ok{background:var(--g100);color:var(--g500)}
.msg.err{background:var(--red100);color:var(--red)}
.mut{font-size:12px;color:var(--n500)}
.kv{display:flex;justify-content:space-between;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--n100)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--n600)}
.kv .v{font-weight:700;color:var(--n900)}
.banner{background:var(--p50);border:1px solid var(--p200);border-radius:10px;padding:12px 14px;margin-bottom:18px;font-size:13px;color:var(--p700);font-weight:600}
.hidden{display:none !important}
.topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.topline .co{font-size:13px;color:var(--n500)}
a.link{color:var(--p600);font-weight:600;text-decoration:none;font-size:13px}
.tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--n200)}
.tabs .tab{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--n500);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs .tab.on{color:var(--p700);border-bottom-color:var(--p500)}
table.data{width:100%;border-collapse:collapse;font-size:13.5px}
table.data th{text-align:left;padding:8px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--n500);border-bottom:1px solid var(--n200)}
table.data td{padding:9px 10px;border-bottom:1px solid var(--n100)}
table.data td.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.dchip{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 7px;border-radius:5px;background:var(--n100);color:var(--n600)}
.dchip.live{background:var(--g100);color:var(--g500)}

/* ===================== App shell (sidebar + admin/personal nav) =====================
   Mirrors v2/css/style.css's own .sidebar/.nav-item/.page-panel/.sub-tab/.modal-overlay
   structure, since v3 now needs the same two-level nav (top pages + sub-tabs). Reskinned onto
   the purple tokens above, not v2's blue --primary. */
.app-shell{display:flex;min-height:100vh}
.sidebar{width:236px;background:var(--n0);height:100vh;position:fixed;left:0;top:0;display:flex;flex-direction:column;border-right:1px solid var(--n200)}
.sidebar-logo{padding:20px 20px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--n200)}
.sidebar-logo .lockup{margin-bottom:0}
.sidebar-logo .lk{width:140px}
.sidebar-nav{flex:1;padding:12px 10px;overflow-y:auto;display:flex;flex-direction:column}
.sidebar-nav-group{display:none}
.sidebar-nav-group.visible{display:flex;flex-direction:column;flex:1}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;cursor:pointer;color:var(--n600);font-size:13px;font-weight:600;transition:all .15s;margin-bottom:2px;user-select:none}
.nav-item:hover{background:var(--n25);color:var(--n900)}
.nav-item.active{background:var(--p50);color:var(--p700)}
.nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:.75}
.nav-item.active svg{opacity:1}
.nav-item .badge{margin-left:auto;font-size:11px;font-weight:700;padding:1px 7px;border-radius:10px;background:var(--p500);color:#fff}
.nav-back{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;cursor:pointer;color:var(--n500);font-size:12px;font-weight:600;transition:all .15s;margin-bottom:4px}
.nav-back:hover{background:var(--n25);color:var(--n900)}
.nav-divider{height:1px;background:var(--n200);margin:8px 4px}
.sidebar-footer{padding:14px;border-top:1px solid var(--n200)}
/* Persistent trial-mode indicator (2026-08-24) - sidebar-footer sits outside both
   navPersonal/navAdmin groups, so this shows regardless of which mode or page is active -
   the only existing trial signal (the Getting Started banner) is easy to never see once
   you're working in the admin pages. */
.trial-pill{display:block;background:var(--p50);border:1px solid var(--p200);color:var(--p700);font-size:12px;font-weight:700;line-height:1.45;padding:8px 10px;border-radius:8px;margin:0 10px 10px;text-decoration:none}
.trial-pill:hover{background:var(--p100)}
.trial-pill.ending{background:var(--amber100);border-color:var(--amber);color:var(--amber)}
.main-content{margin-left:236px;flex:1;min-width:0;padding:32px 40px}

/* Mobile (2026-08-24, ported from v2/css/style.css's own proven pattern - v4 had zero @media
   rules at all before this, the fixed 236px sidebar just collided with/squeezed the content on
   any narrow viewport). Same approach v2 uses: the sidebar becomes a bottom icon-only tab bar
   instead of trying to make a 236px-wide desktop nav responsive in place. */
@media (max-width: 768px) {
  .sidebar{position:fixed;bottom:0;left:0;right:0;top:auto;width:100%;height:auto;flex-direction:row;border-right:none;border-top:1px solid var(--n200);z-index:100}
  .sidebar-logo,.sidebar-footer{display:none}
  .nav-divider{display:none}
  .nav-back{display:flex;justify-content:center;padding:14px 8px;flex:1;border-radius:0;margin:0;font-size:0;gap:0;min-height:48px}
  .nav-back svg{width:22px;height:22px;opacity:1}
  .sidebar-nav{display:flex;flex-direction:row;padding:0;overflow:visible;justify-content:space-around}
  .sidebar-nav-group.visible{display:flex;flex-direction:row;flex:1;justify-content:space-around}
  .nav-item span,.nav-item .badge{display:none}
  .nav-item{justify-content:center;padding:14px 8px;flex:1;border-radius:0;margin:0 !important;min-height:48px}
  .nav-item svg{width:22px;height:22px}
  .main-content{margin-left:0;padding:48px 16px 76px}
  .apply-bar{margin:-48px -16px 20px;flex-direction:column;gap:10px;text-align:center;padding:14px 16px}
  .form-grid,.content-grid{grid-template-columns:1fr}
  .member-card{flex-direction:column;align-items:flex-start}
  /* Sidebar-footer (and everything nested in it) is hidden above, so the trial pill - moved to
     be sidebar-footer's sibling for exactly this reason - gets pinned to the top of the
     viewport instead. It's position:fixed on its own, so the sidebar's own fixed-to-the-bottom
     placement doesn't constrain it - these are two independent fixed elements, top and bottom. */
  #sidebarTrialPill{position:fixed;top:0;left:0;right:0;margin:0;border-radius:0;border-width:0 0 1px;text-align:center;z-index:100}
}

.apply-bar{display:none;align-items:center;justify-content:space-between;padding:12px 28px;background:linear-gradient(132deg,var(--p600),var(--p700));color:#fff;font-size:13px;font-weight:600;margin:-32px -40px 24px;position:sticky;top:0;z-index:20;box-shadow:0 2px 8px rgba(23,27,50,.15)}
.apply-bar.visible{display:flex}
.apply-bar .apply-msg{display:flex;align-items:center;gap:10px}
.apply-bar .apply-msg svg{width:18px;height:18px;flex-shrink:0}
.apply-bar .apply-btn{padding:8px 18px;border:none;border-radius:6px;background:#fff;color:var(--p700);font:700 13px/1 var(--font);cursor:pointer}
.apply-bar .apply-btn:hover{background:var(--p50)}
.apply-bar .apply-btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.apply-bar .apply-btn.ghost:hover{background:rgba(255,255,255,.1)}
@keyframes spin{to{transform:rotate(360deg)}}

.page-panel{display:none}
.page-panel.visible{display:block}
.page-title{font-size:20px;font-weight:700;letter-spacing:-.01em;margin-bottom:18px}

.sub-tabs{display:flex;gap:2px;margin-bottom:20px;background:var(--n25);border:1px solid var(--n200);border-radius:var(--radius-md);padding:4px;width:fit-content;flex-wrap:wrap}
.sub-tab{padding:8px 16px;border:none;border-radius:8px;font:600 13px/1 var(--font);cursor:pointer;color:var(--n600);background:transparent;transition:all .15s;white-space:nowrap;display:flex;align-items:center;gap:6px}
.sub-tab:hover{color:var(--n900);background:var(--n0)}
.sub-tab.active{background:var(--p500);color:#fff}
.sub-tab-icon{width:15px;height:15px;flex-shrink:0}

.placeholder-panel{background:var(--n0);border:1px dashed var(--n300);border-radius:var(--radius-lg);padding:40px 24px;text-align:center;color:var(--n500);font-size:13.5px}

/* ===================== List/detail CRUD UI (Batch 1) =====================
   Ported from v2/css/style.css's own .action-bar/.member-*/.detail-*/.form-*/.status/.btn-*
   classes, reskinned onto v3's purple tokens (var(--primary) -> var(--p500) etc). */
.action-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.action-bar-left .result-count{font-size:13px;color:var(--n500)}
.btn-add{padding:9px 16px;border:none;border-radius:var(--radius-sm);background:var(--p500);color:#fff;font:700 13px/1 var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .15s}
.btn-add:hover{background:var(--p600)}
.btn-add svg{width:15px;height:15px}
.btn-outline{padding:9px 16px;border:1px solid var(--n200);border-radius:var(--radius-sm);background:var(--n0);color:var(--n600);font:600 13px/1 var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:all .15s}
.btn-outline:hover{border-color:var(--n400);color:var(--n900)}
.btn-danger{padding:9px 16px;border:1px solid var(--red);border-radius:var(--radius-sm);background:var(--red100);color:var(--red);font:600 13px/1 var(--font);cursor:pointer;transition:all .15s}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-sm{padding:7px 12px;font-size:12px}
.link-btn{background:none;border:none;color:var(--p600);font:700 13px/1 var(--font);cursor:pointer;padding:0;text-decoration:underline}

.status{font-size:13px;padding:10px 14px;border-radius:var(--radius-sm);margin:12px 0}
.status.success{background:var(--g100);color:var(--g500)}
.status.error{background:var(--red100);color:var(--red)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.form-grid.cols-3{grid-template-columns:1fr 1fr 1fr}
.form-full{grid-column:1/-1}
.form-group{margin-bottom:0}
.form-group label{display:block;font-size:11.5px;font-weight:700;color:var(--n500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 12px;border:1.5px solid var(--n200);border-radius:8px;font-size:14px;font-family:inherit;color:var(--n900)}
.form-actions{display:flex;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--n100)}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--n600);cursor:pointer;margin-top:8px}
.checkbox-row input[type="checkbox"]{width:16px;height:16px;accent-color:var(--p500)}

.add-member-form{display:none;background:var(--n25);border:1px solid var(--p300);border-radius:var(--radius-md);padding:18px;margin-bottom:16px}
.add-member-form.visible{display:block}

.member-grid{display:flex;flex-direction:column;gap:10px}
.member-card{background:var(--n0);border:1px solid var(--n200);border-radius:var(--radius-md);padding:16px 18px;display:flex;align-items:center;gap:14px;transition:border-color .15s,box-shadow .15s;position:relative}
.member-card:hover{border-color:var(--n300);box-shadow:var(--sh-sm)}
.member-card .card-gear{position:absolute;top:12px;right:14px;width:16px;height:16px;color:var(--n400);opacity:.4;transition:opacity .15s;pointer-events:none}
.member-card:hover .card-gear{opacity:.8}
.member-info{flex:1;min-width:0}
.member-name{font-size:13.5px;font-weight:700;margin-bottom:2px;color:var(--n900)}
.member-meta{font-size:12.5px;color:var(--n500)}

.list-view{display:block}
.list-view.hidden{display:none}
.detail-view{display:none}
.detail-view.active{display:block}
.detail-back{display:inline-flex;align-items:center;gap:6px;padding:8px 0;border:none;background:none;color:var(--n600);font:600 13px/1 var(--font);cursor:pointer;margin-bottom:16px}
.detail-back:hover{color:var(--p600)}
.detail-back svg{width:16px;height:16px}
.detail-card{background:var(--n0);border:1px solid var(--n200);border-radius:var(--radius-lg);overflow:hidden}
.detail-card-header{padding:20px 24px;border-bottom:1px solid var(--n100)}
.detail-title{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--n900)}
.detail-subtitle{font-size:13px;color:var(--n500);margin-top:2px}
.detail-card-body{padding:24px}
.detail-card-footer{padding:14px 24px;border-top:1px solid var(--n100);display:flex;gap:10px;justify-content:flex-end;background:var(--n25)}
.detail-section{margin-bottom:22px}
.detail-section h4{font-size:13px;font-weight:700;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--n100);color:var(--n700)}

.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:9px 14px;font-size:11px;font-weight:700;color:var(--n500);text-transform:uppercase;letter-spacing:.04em;background:var(--n25);border-bottom:1px solid var(--n200)}
.data-table td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--n100)}
.data-table tr:last-child td{border-bottom:none}

.section-subhead{font-size:13px;font-weight:700;margin:18px 0 10px;color:var(--n700)}
.tc-block{background:var(--n25);border-radius:var(--radius-sm);padding:14px}

.ivr-option-list{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.ivr-opt{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--n25);border:1px solid var(--n100);border-radius:var(--radius-sm)}
.ivr-opt .opt-key{width:56px;font-weight:700;font-size:12.5px;color:var(--n900);flex-shrink:0}
.ivr-opt .opt-arrow{color:var(--n400);font-size:12px;flex-shrink:0}
.ivr-opt .opt-dest{flex:1;font-size:12.5px;color:var(--n600)}
.ivr-opt .opt-remove{background:none;border:none;color:var(--red);font:600 12px/1 var(--font);cursor:pointer;padding:4px 8px;border-radius:4px}
.ivr-opt .opt-remove:hover{background:var(--red100)}

.card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--n100)}
.card-header h3{font-size:14px;font-weight:700}

.account-section{background:var(--n0);border:1px solid var(--n200);border-radius:var(--radius-md);padding:22px;margin-bottom:18px}
.account-section h3{font-size:14px;font-weight:700;margin-bottom:4px}
.account-section .section-desc{font-size:12.5px;color:var(--n500);margin-bottom:18px;line-height:1.5}
.account-field{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--n100)}
.account-field:last-child{border-bottom:none;padding-bottom:0}
.account-field .field-label{width:170px;font-size:13px;font-weight:600;color:var(--n600);flex-shrink:0}
.account-field .field-value{flex:1;font-size:14px;color:var(--n900)}
.account-field .field-action{font-size:12px;color:var(--p600);font-weight:700;cursor:pointer;padding:5px 10px;border-radius:5px}
.account-field .field-action:hover{background:var(--p50)}

.version-row{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--n100)}
.version-row:last-child{border-bottom:none}
.version-row .v-number{font-weight:700;color:var(--p600);min-width:40px}
.version-row .v-date{flex:1;font-size:13px;color:var(--n600)}
.version-row .v-action{font-size:12px;color:var(--p600);font-weight:700;cursor:pointer}
.version-row .v-action:hover{text-decoration:underline}

.status-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700}
.status-badge.paid{background:var(--g100);color:var(--g500)}
.status-badge.unpaid{background:var(--amber100);color:var(--amber)}

.greeting-row{display:flex;gap:8px;align-items:center}
.greeting-row select{flex:1}

.ivr-opt-new{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--p50);border:1px dashed var(--p400);border-radius:var(--radius-sm)}
.ivr-opt-new input[type="text"]{width:56px;padding:6px 8px;border:1.5px solid var(--n200);border-radius:4px;font-size:13px;text-align:center;flex-shrink:0;margin-bottom:0}
.ivr-opt-new select{flex:1;padding:6px 8px;border:1.5px solid var(--n200);border-radius:4px;font-size:13px;margin-bottom:0}

.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card-body{padding:18px}

.day-row{background:var(--n0);border:1px solid var(--n200);border-radius:var(--radius-sm);margin-bottom:8px;cursor:pointer;overflow:hidden}
.day-row:hover{border-color:var(--n300)}
.day-row-header{display:flex;justify-content:space-between;align-items:center;padding:13px 18px}
.day-row .day-label{font-size:13.5px;font-weight:600;color:var(--n900)}
.day-row .day-count{font-size:12.5px;color:var(--n500)}
.day-row .day-calls{display:none;padding:0 18px 14px}
.day-row.expanded .day-calls{display:block}
.day-row .call-table{width:100%;font-size:13px;border-collapse:collapse}
.day-row .call-table th{text-align:left;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--n500);padding:8px;border-bottom:1px solid var(--n100)}
.day-row .call-table td{padding:9px 8px;border-bottom:1px solid var(--n100);color:var(--n600)}
.day-row .call-table tr:last-child td{border-bottom:none}

.btn-outline.playing{background:var(--p50);border-color:var(--p400);color:var(--p700)}

.empty-state{text-align:center;padding:48px 32px;background:var(--n0);border:1px solid var(--n200);border-radius:var(--radius-md)}
.empty-state .empty-icon{width:52px;height:52px;border-radius:14px;background:var(--p100);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.empty-state .empty-icon svg{width:24px;height:24px;color:var(--p600)}
.empty-state h3{font-size:15px;font-weight:700;margin-bottom:6px}
.empty-state p{font-size:13px;color:var(--n600);max-width:400px;margin:0 auto}

.queue-member{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--n100);font-size:13px}
.queue-member:last-child{border-bottom:none}
.queue-member .qm-name{flex:1;font-weight:600}
.queue-member .qm-penalty{width:60px;color:var(--n500)}

/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(23,27,50,.5);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.modal-overlay.active{display:flex}
.modal-box{background:var(--n0);border-radius:var(--radius-lg);box-shadow:0 20px 60px rgba(23,27,50,.2);width:90%;max-width:560px;max-height:85vh;overflow-y:auto}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--n100)}
.modal-header h3{font-size:15px;font-weight:700}
.modal-close{width:30px;height:30px;border:none;border-radius:8px;background:var(--n25);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--n600);font-size:17px}
.modal-close:hover{background:var(--n100)}
.modal-body{padding:22px}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--n100)}

/* App tab (2026-08-24, replaces old Devices manual-SIP-setup content) */
.app-setup-grid{display:flex;gap:26px;align-items:flex-start;flex-wrap:wrap}
.app-qr{flex:none;text-align:center}
.app-qr img{display:block;width:168px;height:168px;border:6px solid var(--n0);border-radius:14px;box-shadow:0 0 0 1px var(--n200),0 6px 16px rgba(41,27,71,.10);background:var(--n50)}
.app-steps{flex:1;min-width:260px}
.app-step{display:flex;gap:12px;margin-bottom:16px}
.app-step:last-child{margin-bottom:0}
.app-step-n{width:26px;height:26px;flex:none;background:var(--p500);color:#fff;border-radius:8px;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.app-step-t{font-size:14px;color:var(--n700);line-height:1.5;padding-top:2px}
.app-step-t b{color:var(--n900)}
.app-stores{display:flex;gap:9px;margin-top:8px;flex-wrap:wrap;align-items:center}
.app-stores a{display:inline-block;line-height:0;opacity:1;transition:opacity .15s}
.app-stores a:hover{opacity:.8}
.app-stores img{display:block;height:40px;width:auto}

/* App tab desktop hand-off spec, Task 2/4 (2026-08-27) - shared native <details> disclosure
   style (the already-have-the-app QR fallback, the different-phone QR fallback). Native
   <details> ships its own marker glyph per browser (a black triangle in Chrome, "Details" text
   in some others) - suppressed in favor of one consistent glyph so the closed/open state reads
   the same everywhere the spec's copy shows it ("▸ Already have the app installed?"). */
.disclosure > summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--n600)}
.disclosure > summary::-webkit-details-marker{display:none}
.disclosure > summary::before{content:"\25b8  ";display:inline-block}
.disclosure[open] > summary::before{content:"\25be  "}
.disclosure > summary:hover{color:var(--n900)}