/* ══════════════════════════════════════════════════════════════════════
   hypatia-tickets-v11.css — v1.1 design standard
   Extracted from hypatia-tickets.html inline <style> + color tokens applied
   ═══════════════════════════════════════════════════════════════════════ */

/* ══ 0. Reset ══════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}

/* ══ 1. Design tokens — Apple Enterprise dark ════════════════════ */
:root{
  --bg:var(--bg-deep);
  --nav:var(--bg-card);
  --panel:var(--bg-card);
  --hover:var(--bg-surface);
  --sel:color-mix(in srgb, var(--bg-surface) 80%, var(--accent));
  --brd:rgba(255,255,255,.07);
  --brd2:rgba(255,255,255,.04);
  --txt:#F7F8FA;
  --txt2:#B6BDC8;
  --muted:var(--muted);
  --blue:var(--info);
  --success:var(--green, var(--green, #35C26B));
  --warn:var(--warning);
  --danger:var(--danger);
  --purple:var(--purple);
  --sb-w:260px;
  --rp-w:224px;
  --nav-h:72px;
  --r:8px;--r2:12px;--r3:16px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",sans-serif;
  --spring:cubic-bezier(.25,.1,.25,1);
  --glass-blur:blur(24px) saturate(180%);
  /* category */
  --c-payments:var(--green, #35C26B);--c-shipping:var(--warning);--c-support:var(--info);
  --c-sales:var(--purple);--c-affiliates:#FF8AC7;--c-admin:var(--warning);
  --c-bugs:var(--danger);--c-feedback:var(--info);
}
/* ── Light-mode remapping (Beach Day, Clean Light, etc.) ───────── */
[data-mode="light"]{
  --bg:var(--bg-deep);--nav:rgba(248,249,251,.96);--panel:#FFFFFF;
  --hover:rgba(0,0,0,.045);--sel:color-mix(in srgb, var(--info) 9%, transparent);
  --brd:rgba(0,0,0,.08);--brd2:rgba(0,0,0,.04);
  --txt:#0D0F14;--txt2:#444C5A;--muted:#7D8796;
  --c-payments:#1a7a4a;--c-support:#1a5ea8;--c-sales:#7a3ab5;
  --c-affiliates:#c4387a;--c-admin:#8a5500;--c-shipping:#7a4a07;
  --c-bugs:#c03030;
}

/* ══ 2. Shell — 3-column grid, Firefox-safe ════════════════════ */
html,body{height:100%;font-family:var(--font);font-size:14px;
  background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;}
#tk-app{
  display:grid;
  grid-template-rows:var(--nav-h) 1fr;
  grid-template-columns:var(--sb-w) 1fr;
  height:100dvh;overflow:hidden;
}

/* ══ 3. Top navigation ════════════════════════════════════════════ */
#tk-nav{
  grid-column:1/-1;grid-row:1;
  display:flex;align-items:center;gap:10px;padding:0 20px;
  background:color-mix(in srgb, var(--bg-deep) 94%, transparent);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--brd);z-index:200;
}
[data-mode="light"] #tk-nav{background:rgba(248,249,251,.96);}
.tk-logo{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;
  color:var(--txt);white-space:nowrap;flex-shrink:0;}
.tk-nav-ham{display:none;background:none;border:none;cursor:pointer;
  color:var(--txt2);padding:5px;border-radius:var(--r);}
.tk-nav-ham:hover{background:var(--hover);}

/* "All Tickets" dropdown trigger */
.tk-nav-views-btn{
  display:flex;align-items:center;gap:5px;
  padding:7px 12px;max-width:180px;border-radius:var(--r2);
  background:var(--hover);border:1px solid var(--brd);
  color:var(--txt);font-size:13.5px;font-weight:500;cursor:pointer;
  font-family:inherit;transition:background .12s;white-space:nowrap;
  flex-shrink:0;overflow:hidden;
}
.tk-nav-views-btn:hover{background:var(--sel);}
.tk-nav-views-btn #tk-views-label{overflow:hidden;text-overflow:ellipsis;max-width:110px;}

/* Center search */
.tk-nav-center{flex:1;display:flex;align-items:center;justify-content:center;min-width:0;padding:0 8px;}
.tk-nav-search-wrap{position:relative;display:flex;align-items:center;width:min(480px,100%);}
.tk-nav-search-wrap iconify-icon{position:absolute;left:10px;color:var(--muted);pointer-events:none;}
#tk-search{
  width:100%;padding:7px 12px 7px 32px;
  background:var(--panel);border:1px solid var(--brd);border-radius:var(--r2);
  color:var(--txt);font-size:13px;font-family:inherit;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
#tk-search:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb, var(--info) 12%, transparent);}
#tk-search::placeholder{color:var(--muted);}

/* Right icons */
.tk-nav-right{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto;}
.tk-nav-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:var(--r2);
  color:var(--txt2);cursor:pointer;transition:.12s;}
.tk-nav-icon:hover{background:var(--hover);color:var(--txt);}
.tk-profile{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;
  border-radius:var(--r2);border:1px solid var(--brd);cursor:pointer;transition:.12s;}
.tk-profile:hover{background:var(--hover);}
.tk-profile-av{width:32px;height:32px;border-radius:50%;background:var(--blue);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;flex-shrink:0;}
.tk-profile-name{font-size:13px;font-weight:600;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;}
.tk-profile-role{font-size:11px;color:var(--muted);line-height:1.2;}

/* ══ 4. Left sidebar ══════════════════════════════════════════════ */
#tk-sidebar{
  grid-column:1;grid-row:2;
  background:var(--panel);border-right:1px solid var(--brd);
  overflow-y:auto;overflow-x:hidden;padding:10px 6px;
  display:flex;flex-direction:column;gap:1px;
  scrollbar-width:thin;scrollbar-color:var(--brd) transparent;
}
[data-mode="light"] #tk-sidebar{background:#FAFBFC;}
.tk-sb-section{margin-bottom:2px;}
.tk-sb-label{font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);padding:8px 10px 3px;display:block;}
.tk-sb-item{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 10px;border-radius:var(--r);border:none;
  background:none;color:var(--txt2);font-size:12.5px;font-weight:400;
  cursor:pointer;font-family:inherit;transition:background .1s,color .1s;
  text-align:left;min-height:32px;position:relative;
  white-space:nowrap;overflow:hidden;
}
.tk-sb-item:hover{background:var(--hover);color:var(--txt);}
.tk-sb-item.active{background:color-mix(in srgb, var(--info) 12%, transparent);color:var(--blue);font-weight:500;}
.tk-sb-item.active::before{content:'';position:absolute;left:0;top:50%;
  transform:translateY(-50%);width:3px;height:14px;
  background:var(--blue);border-radius:0 2px 2px 0;}
.tk-sb-item .sb-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk-sb-cnt{margin-left:auto;font-size:10px;font-weight:600;color:var(--muted);
  background:rgba(255,255,255,.07);padding:1px 6px;border-radius:10px;
  min-width:18px;text-align:center;flex-shrink:0;}
.tk-sb-item.active .tk-sb-cnt{background:color-mix(in srgb, var(--info) 20%, transparent);color:var(--blue);}
[data-mode="light"] .tk-sb-cnt{background:rgba(0,0,0,.07);}
.tk-sb-add{color:var(--muted);font-size:12px;}
.tk-sb-add:hover{color:var(--blue);}
.tk-sb-divider{height:1px;background:var(--brd);margin:5px 8px;}

/* Category chips in sidebar */
#tk-cat-chips .tk-chip{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:7px 10px;border-radius:var(--r);border:none;
  background:none;color:var(--txt2);font-size:12.5px;cursor:pointer;
  font-family:inherit;transition:.1s;text-align:left;min-height:32px;
  white-space:nowrap;overflow:hidden;
}
#tk-cat-chips .tk-chip:hover{background:var(--hover);color:var(--txt);}
#tk-cat-chips .tk-chip.active{background:color-mix(in srgb, var(--info) 12%, transparent);color:var(--blue);font-weight:500;}
#tk-cat-chips .tk-chip .ic{flex-shrink:0;width:26px;display:flex;align-items:center;justify-content:center;}
#tk-cat-chips .tk-chip .lab{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#tk-cat-chips .tk-chip .cnt{font-size:10px;font-weight:600;color:var(--muted);
  background:rgba(255,255,255,.07);padding:1px 6px;border-radius:10px;flex-shrink:0;}
#tk-cat-chips .tk-chip.active .cnt{background:color-mix(in srgb, var(--info) 20%, transparent);color:var(--blue);}
[data-mode="light"] #tk-cat-chips .tk-chip .cnt{background:rgba(0,0,0,.07);}

/* Scoreboard in sidebar */
#tk-scoreboard-wrap{padding:6px 4px 2px;}
#tk-scoreboard .tk-sb-agent{display:flex;align-items:center;gap:7px;padding:4px 6px;min-height:30px;}
.tk-sb-rank-num{font-size:10px;font-weight:700;width:14px;text-align:center;color:var(--muted);}
.tk-sb-av-sm{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0;}
.tk-sb-agent-name{flex:1;font-size:11px;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;color:var(--txt2);}
.tk-sb-agent-cnt{font-size:10px;color:var(--muted);}

/* Tablet breakpoint 900-1200px — HypatiaOS embedded / small window:
   Keep sidebar, hide right panel, 2-column layout */
@media(max-width:1200px){
  :root{--rp-w:0px;--nav-h:52px;--sb-w:220px;}
  #tk-app{grid-template-columns:var(--sb-w) 1fr!important;}
  #tk-right-panel{display:none!important;}
  #tk-main{grid-column:2!important;}
  /* Fix: shrink All Tickets dropdown button to normal size in tablet/embedded mode */
  .tk-nav-views-btn{max-width:120px!important;font-size:11.5px!important;padding:3px 7px!important;}
  .tk-nav-views-btn #tk-views-label{max-width:75px!important;}
  /* Compact nav in tablet */
  #tk-nav{padding:0 8px!important;gap:5px!important;}
  .tk-profile-name{max-width:65px!important;font-size:11.5px!important;}
  .tk-profile-role{display:none!important;}
  .tk-logo-text,.tk-logo span:not(.tk-logo-icon){font-size:13px!important;}
  /* Compact toolbar on tablet */
  .tk-fb-date{min-width:70px!important;font-size:10px!important;padding:2px 4px!important;}
  .tk-nav-center{padding:0 3px!important;}
  /* Ticket checkboxes smaller on tablet */
  .tkt-check input[type=checkbox]{width:11px!important;height:11px!important;}
  .tk-master-wrap input[type=checkbox]{width:12px!important;height:12px!important;}
  /* Row height compact */
  .tk-row-compact{min-height:46px!important;}
  /* Sidebar narrower labels */
  .tk-sb-item{font-size:11.5px!important;padding:5px 8px!important;min-height:28px!important;}
}
/* Very small viewport (≤640px) — ultra-compact nav */
@media(max-width:640px){
  :root{--nav-h:48px;--sb-w:220px;}
  .tk-nav-views-btn{max-width:100px!important;font-size:11px!important;padding:3px 6px!important;}
  .tk-nav-views-btn #tk-views-label{max-width:65px!important;}
  #tk-search{font-size:12px!important;padding:5px 10px 5px 28px!important;}
  .tk-profile{display:none!important;}
  /* Hide date inputs on phone — too cramped */
  #tk-date-from,#tk-date-to,#tk-date-clear,
  #tk-date-from-label,#tk-date-sep-label,#tk-date-divider{display:none!important;}
}
/* Phone (≤479px) — moderate New Ticket compression + nav */
@media(max-width:479px){
  /* Tighten sort + New Ticket at mid-range phone widths (421-479px) */
  .tk-tb-primary{ min-width:0!important;padding:5px 8px!important; }
  #tk-sort-quick{ max-width:80px!important; }
}
/* Phone (≤480px) — minimal nav, just logo + view button */
@media(max-width:480px){
  :root{--nav-h:44px;}
  .tk-nav-views-btn{max-width:80px!important;font-size:10px!important;padding:3px 5px!important;}
  .tk-nav-views-btn #tk-views-label{max-width:50px!important;}
  .tk-nav-center{display:none!important;}
  .tk-nav-right{gap:2px!important;}
  .tk-nav-icon{width:30px!important;height:30px!important;}
  #tk-nav{padding:0 6px!important;gap:4px!important;}
}

/* ══ TABLET LAYOUT (≤900px) — 1-column, status visible, compact rows ══ */
@media(max-width:900px){
  /* Keep status pill visible - most important column on mobile */
  .tkt-status-col{width:90px!important;}
  /* Compact row height */
  .tk-row-compact{min-height:48px!important;padding:0 8px 0 6px!important;}
  /* Smaller category icon col */
  .tkt-icon-col{width:24px!important;}
  .tkt-icon-col iconify-icon{font-size:15px!important;}
  /* Subject font size */
  .tkt-subj{font-size:12.5px!important;}
  /* Checkbox container tight */
  .tkt-check{width:26px!important;}
  /* Status button compact */
  .tkt-status-btn{font-size:10.5px!important;padding:3px 7px!important;}
  /* Show search (already in nav at tablet) - hide extra toolbar elements */
  .tk-density{display:none!important;}
}

/* ══ PHONE LAYOUT (≤640px) — 2-row toolbar + bigger readable cards ══ */
@media(max-width:640px){
  /* ── Toolbar: column layout — sort+New Ticket on their own dedicated row ─────
     flex-direction:column is the most reliable cross-browser way to guarantee
     New Ticket always fits. Row 1 = count/checkbox. Row 2 = sort + New Ticket.
     Both rows are exactly (viewport − padding) wide. No overflow possible. */
  #tk-top-toolbar{
    flex-direction:column;
    padding:5px 10px 5px;
    gap:3px;
    align-items:stretch;
    overflow:visible;
  }
  .tk-tl-left{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;
    overflow:hidden;
    height:34px;
  }
  .tk-tl-right{
    display:flex!important;
    align-items:center;
    justify-content:space-between!important;
    gap:6px!important;
    width:100%;
    height:34px;
    flex-shrink:0;
  }
  #tk-sort-quick{
    flex:1 1 0;
    min-width:60px;
    max-width:200px;
    height:30px;
  }
  .tk-tb-primary{
    flex-shrink:0!important;
    min-width:0!important;
    padding:5px 16px!important;
    font-size:12.5px!important;
    font-weight:700!important;
    height:30px;
  }
  /* Hide Export, Debug, density */
  .tk-tb-btn:not(.tk-tb-primary){ display:none!important; }
  /* Table header compact */
  #tk-table-hdr{min-height:24px!important;}
  .tk-th{font-size:8.5px!important;padding:0 4px!important;}
  /* Hide date inputs */
  #tk-date-from,#tk-date-to,#tk-date-clear,
  #tk-date-from-label,#tk-date-sep-label,#tk-date-divider{display:none!important;}
  /* Bulk bar: collapse to icon-only on small phones to save toolbar space */
  #tk-bulk-bar .tk-bulk-btn:not(.tk-bulk-del) span,
  #tk-bulk-bar .tk-bulk-btn:not(.tk-bulk-del) { font-size:0!important; }
  #tk-bulk-bar .tk-bulk-del { padding:4px 10px!important; font-size:11px!important; }
  /* Taller, more readable cards */
  .tk-row-compact{min-height:64px!important;padding:0 8px 0 5px!important;}
  /* Bigger subject text */
  .tkt-subj{font-size:13.5px!important;font-weight:600!important;}
  /* Make sub-line nicely spaced */
  .tkt-sub{margin-top:4px!important;gap:5px!important;}
  /* Status column — keep at 90px to prevent overflow */
  .tkt-status-col{width:90px!important;}
  /* Bold, readable status pill */
  .tkt-status-btn{font-size:11px!important;padding:4px 9px!important;font-weight:700!important;}
  /* Compact checkbox and icon columns */
  .tkt-check{width:22px!important;}
  .tk-master-wrap{width:22px!important;}
  .tkt-icon-col{width:20px!important;}
  .tkt-icon-col iconify-icon{font-size:13px!important;}
}

/* ══ SMALL PHONE (≤420px) — ultra minimal ══ */
@media(max-width:420px){
  /* Keep checkboxes on small phones — needed for bulk delete */
  .tkt-check{width:20px!important;}
  .tk-master-wrap{width:20px!important;}
  .tk-th-ck{width:20px!important;}
  /* Row padding without checkbox */
  .tk-row-compact{padding:0 6px 0 5px!important;}
  .tkt-subj{font-size:13px!important;}
  /* Status readable even at 375px */
  .tkt-status-col{width:88px!important;}
  .tkt-status-btn{font-size:10.5px!important;padding:4px 8px!important;font-weight:700!important;}
  /* Store bar: icon-only — hide text + caret */
  #tk-store-cur{ display:none!important; }
  .tk-store-toggle .caret{ display:none!important; }
  .tk-store-toggle{ padding:5px 7px!important;gap:2px!important; }
  .tk-nav-store-sep{ display:none!important; }
}
/* Phone (≤479px) — nav compression */
@media(max-width:479px){
  .tk-tb-primary{ min-width:0!important; }
}
/* ══ MOBILE DETAIL TOPBAR — back + ham + prev/next ══ */
/* Ham button inside the ticket detail topbar (visible only on mobile) */
#tk-detail-ham{
  display:none;  /* hidden on desktop */
  background:none;border:1px solid var(--brd);border-radius:var(--r);
  padding:5px 8px;color:var(--txt2);cursor:pointer;align-items:center;
  gap:3px;font-family:inherit;font-size:12px;font-weight:500;transition:.1s;
  white-space:nowrap;flex-shrink:0;
}
#tk-detail-ham:hover{background:var(--hover);color:var(--txt);}
/* Prev/next nav buttons in detail topbar */
.tk-detail-nav{
  display:flex;align-items:center;gap:2px;flex-shrink:0;
}
.tk-detail-nav-btn{
  background:var(--hover);border:1px solid var(--brd);border-radius:var(--r);
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--txt2);font-family:inherit;transition:.1s;flex-shrink:0;
}
.tk-detail-nav-btn:hover{background:var(--sel);color:var(--txt);}
@media(max-width:900px){
  #tk-detail-ham{display:flex!important;}  /* show on mobile only */
  /* Tighter detail topbar on phone */
  #tk-detail-topbar{padding:5px 8px!important;gap:5px!important;flex-wrap:wrap;}
  #tk-detail-topbar .tk-back-btn{padding:5px 8px!important;font-size:12px!important;}
  #tk-detail-topbar .tk-ticket-title{font-size:12px!important;min-width:0;}
}
@media(max-width:640px){
  /* On small phones hide Export button in detail topbar to make room */
  #tk-detail-topbar .tk-tb-btn:not(#tk-reply-toggle-btn){display:none!important;}
}
/* ══ SAFE AREA — iPhone notch / Dynamic Island ══ */
@supports(padding:max(0px)){
  #tk-nav{
    padding-left:max(6px,env(safe-area-inset-left))!important;
    padding-right:max(6px,env(safe-area-inset-right))!important;
  }
  /* Bottom safe area prevents Owl bubble covering iOS home indicator */
  #hytk-bubble{ bottom:max(18px,calc(env(safe-area-inset-bottom)+12px))!important; }
  #tk-toast{ bottom:max(18px,calc(env(safe-area-inset-bottom)+12px))!important; }
}
/* iOS toggle for branding switch */
.tk-brand-toggle-wrap{display:flex;align-items:center;gap:7px;padding:4px 0;}
.tk-brand-switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0;}
.tk-brand-switch input{opacity:0;width:0;height:0;position:absolute;}
.tk-brand-slider{position:absolute;inset:0;background:rgba(120,120,128,.3);border-radius:20px;
  cursor:pointer;transition:.2s;}
.tk-brand-slider::after{content:'';position:absolute;left:2px;top:2px;
  width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:.2s;}
.tk-brand-switch input:checked + .tk-brand-slider{background:var(--blue);}
.tk-brand-switch input:checked + .tk-brand-slider::after{transform:translateX(16px);}
.tk-brand-store-sel{flex:1;min-width:0;padding:3px 7px;height:24px;border-radius:7px;
  border:1px solid var(--brd);background:rgba(255,255,255,.06);color:var(--txt);
  font-family:inherit;font-size:11px;cursor:pointer;outline:none;
  display:none;}
.tk-brand-store-sel.visible{display:block;}
/* Below 900px — sidebar becomes a drawer */
@media(max-width:900px){
  :root{--sb-w:260px;}
  #tk-app{grid-template-columns:1fr!important;grid-template-rows:var(--nav-h) 1fr;}
  #tk-sidebar{position:fixed!important;left:0;top:0;bottom:0;z-index:180;width:var(--sb-w);
    padding-top:calc(var(--nav-h)+8px);transform:translateX(-110%);
    transition:transform .25s var(--spring);box-shadow:4px 0 24px rgba(0,0,0,.4);}
  #tk-sidebar.mobile-open,#tk-sidebar.open{transform:translateX(0);}
  #tk-right-panel{display:none!important;}
  #tk-main{grid-column:1!important;}
  .tk-nav-ham{display:flex;}
}

/* ══ 5. Center main ═══════════════════════════════════════════════ */
#tk-main{grid-column:2;grid-row:2;display:flex;flex-direction:column;
  overflow:hidden;min-height:0;background:var(--bg);}

/* ── Top toolbar ── */
#tk-top-toolbar{display:flex;align-items:center;gap:8px;padding:7px 12px;
  border-bottom:1px solid var(--brd);flex-shrink:0;}
.tk-tl-left{display:flex;align-items:center;gap:7px;flex:1;min-width:0;overflow:hidden;}
.tk-tl-right{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.tk-count-lbl{font-size:12px;color:var(--muted);white-space:nowrap;}
.tk-tb-btn{
  display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  padding:5px 10px;border-radius:var(--r);
  background:var(--hover);border:1px solid var(--brd);
  color:var(--txt2);font-size:12px;font-weight:500;
  cursor:pointer;font-family:inherit;transition:.12s;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;
}
.tk-tb-btn:hover{background:var(--sel);color:var(--txt);}
.tk-tb-icon{padding:5px!important;width:30px;height:30px;justify-content:center;max-width:30px!important;}
.tk-tb-primary{background:var(--blue)!important;border-color:var(--blue)!important;
  color:#fff!important;max-width:none!important;}
.tk-tb-primary:hover{filter:brightness(1.08)!important;}
.tk-master-wrap{position:relative;display:flex;align-items:center;flex-shrink:0;}
.tk-master-wrap input[type=checkbox]{width:14px;height:14px;accent-color:var(--blue);cursor:pointer;}
.tk-bulk-bar{display:flex;align-items:center;gap:5px;animation:tkfade .12s ease;}
.tk-bulk-btn{padding:4px 9px;border-radius:var(--r);border:1px solid var(--brd);
  background:var(--hover);color:var(--txt2);font-size:11px;font-weight:500;
  cursor:pointer;font-family:inherit;transition:.1s;white-space:nowrap;}
.tk-bulk-btn:hover{background:var(--sel);color:var(--txt);}
.tk-bulk-del{border-color:color-mix(in srgb, var(--danger) 25%, transparent);color:var(--danger);}
.tk-bulk-del:hover{background:color-mix(in srgb, var(--danger) 8%, transparent);}
.tk-density{display:flex;align-items:center;gap:1px;border:1px solid var(--brd);border-radius:var(--r);padding:2px;}
.tk-density-btn{width:25px;height:23px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;border-radius:5px;color:var(--muted);cursor:pointer;transition:.1s;}
.tk-density-btn:hover,.tk-density-btn.active{background:var(--hover);color:var(--txt);}

/* ── Filter bar — hidden (sort moved to toolbar) ── */
#tk-filterbar{display:none!important;flex-shrink:0;border-bottom:1px solid var(--brd);}
.tk-fb-scroll{display:flex;align-items:center;gap:3px;overflow-x:auto;
  padding:5px 10px;scrollbar-width:none;}
.tk-fb-scroll::-webkit-scrollbar{display:none;}
.tk-qpill{flex-shrink:0;padding:3px 10px;min-height:24px;border-radius:20px;
  border:1px solid var(--brd);background:none;color:var(--muted);
  font-family:inherit;font-size:11px;font-weight:500;cursor:pointer;
  transition:.1s;white-space:nowrap;line-height:1;}
.tk-qpill:hover{background:var(--hover);color:var(--txt);}
.tk-qpill.active{background:color-mix(in srgb, var(--info) 10%, transparent);color:var(--blue);
  border-color:color-mix(in srgb, var(--info) 28%, transparent);font-weight:600;}
.tk-qpill.del{border-color:color-mix(in srgb, var(--danger) 20%, transparent);color:var(--danger);}
.tk-fb-sep{flex-shrink:0;width:1px;height:12px;background:var(--brd);margin:0 3px;}
.tk-fb-sel{flex-shrink:0;padding:3px 7px;min-height:24px;border-radius:20px;
  border:1px solid var(--brd);background:none;color:var(--txt);
  font-family:inherit;font-size:11px;cursor:pointer;outline:none;}
.tk-fb-sel:focus{border-color:var(--blue);}
.tk-fb-date{flex-shrink:0;padding:3px 7px;min-height:24px;min-width:90px;
  border-radius:7px;border:1px solid var(--brd);background:none;color:var(--txt);
  font-family:inherit;font-size:11px;outline:none;cursor:pointer;}
.tk-fb-muted{font-size:10px;color:var(--muted);flex-shrink:0;}

/* ── Table header ── */
#tk-table-hdr{
  display:flex;align-items:center;padding:0 8px 0 8px;
  min-height:30px;border-bottom:1px solid var(--brd);flex-shrink:0;
  background:var(--bg);
  /* Mirror the 3px border-left that .tk-ticket rows have so columns align */
  border-left:3px solid transparent;
}
.tk-th{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:0 6px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;cursor:pointer;user-select:none;}
.tk-th:hover{color:var(--txt2);}
.tk-th-ck{width:30px;flex-shrink:0;}
.tk-th-ic{width:28px;flex-shrink:0;}
.tk-th-subj{flex:1;min-width:0;}
.tk-th-id{width:76px;flex-shrink:0;}
.tk-th-req{width:120px;flex-shrink:0;}
.tk-th-cat{width:84px;flex-shrink:0;}
.tk-th-pri{width:74px;flex-shrink:0;}
.tk-th-st{width:110px;flex-shrink:0;}
.tk-th-upd{width:68px;flex-shrink:0;text-align:right;}
@media(max-width:1200px){.tk-th-req,.tk-th-cat,.tk-th-pri{display:none;}}
@media(max-width:900px){.tk-th-id,.tk-th-upd{display:none;}}

/* Category icon in list rows — bigger for clarity */
.tkt-icon-col iconify-icon{font-size:18px!important;}
.tkt-icon-col{width:28px!important;}
/* ══ CUSTOM CHECKBOXES — override browser 44px touch-target inflation ══
   Native checkboxes inflate to 44px on iOS/Android. appearance:none + explicit
   size = we control the rendered size exactly. Touch target stays usable
   because the .tkt-check container (32px wide) absorbs the tap. */
.tkt-check input[type=checkbox],
.tk-master-wrap input[type=checkbox],
#tk-master-check {
  -webkit-appearance:none!important;
  appearance:none!important;
  width:14px!important;height:14px!important;
  min-width:14px!important;min-height:14px!important;
  max-width:14px!important;max-height:14px!important;
  border:1.5px solid rgba(255,255,255,.28)!important;
  border-radius:3px!important;
  background:transparent!important;
  cursor:pointer!important;
  position:relative!important;
  flex-shrink:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  transition:background .12s,border-color .12s!important;
}
.tkt-check input[type=checkbox]:checked,
.tk-master-wrap input[type=checkbox]:checked,
#tk-master-check:checked {
  background:var(--blue)!important;
  border-color:var(--blue)!important;
}
.tkt-check input[type=checkbox]:checked::after,
.tk-master-wrap input[type=checkbox]:checked::after,
#tk-master-check:checked::after {
  content:''!important;
  display:block!important;
  width:4px!important;height:7px!important;
  border:1.5px solid #fff!important;
  border-top:none!important;border-left:none!important;
  transform:rotate(44deg)!important;
  margin-top:-2px!important;
}
.tkt-check input[type=checkbox]:indeterminate,
#tk-master-check:indeterminate {
  background:var(--blue)!important;
  border-color:var(--blue)!important;
}
.tkt-check input[type=checkbox]:indeterminate::after,
#tk-master-check:indeterminate::after {
  content:''!important;
  display:block!important;
  width:7px!important;height:1.5px!important;
  background:#fff!important;
}
[data-mode="light"] .tkt-check input[type=checkbox],
[data-mode="light"] #tk-master-check {
  border-color:rgba(0,0,0,.28)!important;
}
/* Keep the container tight */
.tkt-check{width:30px!important;flex-shrink:0!important;}
.tk-master-wrap{width:30px!important;flex-shrink:0!important;}

/* ── Email thread — pill/bubble layout (left = customer, right = agent) ── */
#tk-thread{
  display:flex;flex-direction:column;gap:2px;
  padding:12px 16px 16px;
}
.tk-msg{
  display:flex;flex-direction:column;
  max-width:82%;margin:6px 0;
}
.tk-msg.tk-msg-customer{align-self:flex-start;}
.tk-msg.tk-msg-agent{align-self:flex-end;}
.tk-msg.tk-msg-internal{
  align-self:center;max-width:calc(100% - 32px);
}
.tk-msg-header{
  display:flex;align-items:center;gap:4px;
  margin-bottom:4px;font-size:10px;font-weight:700;color:var(--muted);
}
.tk-msg-agent .tk-msg-header{justify-content:flex-end;color:var(--blue);}
.tk-msg-bubble{
  padding:10px 14px;border-radius:14px;
  line-height:1.55;font-size:13px;word-break:break-word;
  min-width:0;
}
.tk-msg-customer .tk-msg-bubble{
  background:var(--panel);border:1px solid var(--brd);
  border-radius:3px 14px 14px 14px;
  color:var(--txt);
}
.tk-msg-agent .tk-msg-bubble{
  background:color-mix(in srgb, var(--info) 13%, transparent);border:1px solid color-mix(in srgb, var(--info) 25%, transparent);
  border-radius:14px 3px 14px 14px;
  color:var(--txt);
}
.tk-msg-internal .tk-msg-bubble{
  background:color-mix(in srgb, var(--warning) 7%, transparent);border:1px solid color-mix(in srgb, var(--warning) 18%, transparent);
  border-radius:10px;text-align:center;
  font-size:11px;color:var(--muted);font-style:italic;
  padding:5px 12px;
}
.tk-msg-time{
  font-size:9px;color:var(--muted);margin-top:3px;
}
.tk-msg-customer .tk-msg-time{text-align:left;}
.tk-msg-agent .tk-msg-time{text-align:right;}
.tk-msg-att{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-top:8px;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.08);
}
.tk-msg-att img{
  max-width:200px;max-height:140px;border-radius:8px;
  cursor:pointer;object-fit:cover;
  border:1px solid var(--brd);transition:opacity .1s;
}
.tk-msg-att img:hover{opacity:.88;}
.tk-msg-att a{
  font-size:11px;color:var(--blue);display:inline-flex;align-items:center;
  gap:3px;padding:4px 8px;border-radius:7px;
  background:color-mix(in srgb, var(--info) 8%, transparent);border:1px solid color-mix(in srgb, var(--info) 18%, transparent);
  text-decoration:none;transition:.1s;
}
.tk-msg-att a:hover{background:color-mix(in srgb, var(--info) 15%, transparent);}

/* Attachment images — full readable size, not squished */
.tk-msg img,.tk-exp-email-body img,.tk-exp-email-primary img,
.tk-msg-frame{max-width:100%!important;}
.tk-exp-email-primary .att-img{max-width:100%!important;max-height:none!important;}
/* Email iframe — full width */
.tk-msg-frame{width:100%!important;border:none;display:block;border-radius:var(--r2);}
/* Hide the assignee email input from ticket controls (use Assign button instead) */
.tk-ctrl-row input.tk-ctrl[placeholder*="ssign"]{display:none!important;}
/* Customer context inside detail — seamless with header */
.tk-context{margin-top:0!important;border-top:1px solid var(--brd)!important;border-radius:0!important;}
/* ── Ticket list ── */
#tk-list{flex:1;overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:var(--brd) transparent;}
/* Pagination */
#tk-pagination{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 20px;border-top:1px solid var(--brd);
  flex-shrink:0;min-height:48px;font-size:13px;
  background:var(--bg);
}
.tk-pg-info{color:var(--muted);font-size:12px;white-space:nowrap;}
.tk-pg-btns{display:flex;align-items:center;gap:3px;}
.tk-pg-btn{
  min-width:30px;height:30px;border-radius:var(--r);padding:0 8px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--brd);
  color:var(--txt2);font-size:12px;font-weight:500;
  cursor:pointer;font-family:inherit;transition:.1s;white-space:nowrap;
}
.tk-pg-btn:hover:not(:disabled){background:var(--hover);color:var(--txt);}
.tk-pg-btn.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.tk-pg-btn:disabled{opacity:.35;cursor:not-allowed;}
.tk-pg-dots{color:var(--muted);padding:0 2px;}

/* Company group headers */
.tk-co-head{display:flex;align-items:center;gap:6px;padding:5px 12px 2px;
  font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.05em;border-top:1px solid var(--brd);margin-top:2px;}
.tk-co-head:first-child{border-top:none;margin-top:0;}
.tk-src-head{display:flex;align-items:center;gap:5px;padding:3px 12px 1px 36px;
  font-size:9px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}

/* ── Ticket row ── */
.tk-ticket{display:flex;flex-direction:column;border-bottom:1px solid var(--brd2);
  background:transparent;transition:background .07s;
  position:relative;border-left:3px solid transparent;}
.tk-ticket:hover{background:var(--hover);}
.tk-ticket.active{background:color-mix(in srgb, var(--info) 5%, transparent);border-left-color:var(--blue);}
.tk-ticket.expanded{background:color-mix(in srgb, var(--info) 3%, transparent);}
.tk-ticket.unread::before{content:'';position:absolute;left:5px;top:50%;
  transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--blue);}

/* Compact row (single line) */
.tk-row-compact{display:flex;align-items:center;
  padding:0 8px 0 8px;min-height:56px;cursor:pointer;width:100%;}
/* Compact density mode — activated by TK.setDensity('compact') */
#tk-list.tk-density-compact .tk-row-compact{min-height:38px!important;}
#tk-list.tk-density-compact .tkt-sub{display:none!important;}
#tk-list.tk-density-compact .tkt-subj{font-size:12px!important;}
.tkt-check{flex-shrink:0;width:32px;display:flex;align-items:center;justify-content:center;}
.tkt-check input[type=checkbox]{width:13px;height:13px;accent-color:var(--blue);cursor:pointer;}
.tkt-icon-col{flex-shrink:0;width:22px;height:22px;border-radius:6px;display:flex;
  align-items:center;justify-content:center;font-size:12px;margin-right:4px;cursor:pointer;}
.tkt-main{flex:1;min-width:0;padding:0 6px;}
.tkt-subj{font-size:13px;font-weight:500;color:var(--txt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.tkt-sub{display:flex;gap:3px;align-items:center;margin-top:2px;
  flex-wrap:nowrap;overflow:hidden;max-height:16px;}
.tkt-id{flex-shrink:0;width:76px;font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums;padding:0 6px;white-space:nowrap;}
.tkt-cust{flex-shrink:0;width:120px;font-size:11px;color:var(--txt2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px;}
.tkt-cat-col{flex-shrink:0;width:84px;padding:0 3px;}
.tkt-pri-col{flex-shrink:0;width:74px;padding:0 3px;font-size:11px;
  color:var(--txt2);display:flex;align-items:center;gap:4px;}
.tkt-status-col{flex-shrink:0;width:110px;padding:0 3px;}
.tkt-time{flex-shrink:0;width:68px;font-size:11px;color:var(--muted);
  text-align:right;padding:0 6px;white-space:nowrap;}
.tkt-agent-col{flex-shrink:0;width:28px;display:flex;justify-content:flex-end;padding:0 3px;}
.tkt-av-sm{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0;}
@media(max-width:1200px){.tkt-cust,.tkt-cat-col,.tkt-pri-col{display:none;}}
@media(max-width:900px){.tkt-id,.tkt-time,.tkt-agent-col{display:none;}}
/* Mobile card extra info — customer+category appear in sub-line when dedicated columns are hidden */
/* tkt-mob-meta: only show when dedicated columns are hidden (< 900px) */
.tkt-mob-meta{display:none;align-items:center;gap:5px;flex-shrink:0;overflow:hidden;}
.tkt-mob-cust{font-size:10px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px;flex-shrink:1;font-weight:500;}
.tkt-mob-cat{font-size:9.5px;font-weight:700;white-space:nowrap;flex-shrink:0;
  padding:2px 7px;border-radius:20px;
  background:color-mix(in srgb,currentColor 14%,transparent);
  border:1px solid color-mix(in srgb,currentColor 30%,transparent);}
@media(max-width:900px){.tkt-mob-meta{display:inline-flex;}}
/* Hide ticket ID on small phones — adds clutter without value */
@media(max-width:480px){.tkt-id{display:none!important;}}

/* ── Touch target sizing (WCAG 2.5.8 — min 28×28 px) ──────────────────
   Row cells are flex children of .tk-row-compact (min-height:56px).
   With align-items:center on the parent, cells only inherit their content
   height. align-self:stretch + display:flex fills the full 56px row so
   the entire cell is the touch target — visually unchanged, functionally
   correct. Proof badges & source chips get explicit min-height. */
.tkt-main{align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-width:28px;}
.tkt-check{align-self:stretch;}
/* Row cells: stretch to fill row height for touch targets.
   .tkt-cust/.tkt-cat-col/.tkt-pri-col: align-self only (no display:flex)
   so the media-query display:none can still hide them on smaller viewports. */
.tkt-id,.tkt-time{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;}
.tkt-cust,.tkt-cat-col,.tkt-pri-col{align-self:stretch;}
/* Category icon col — remove the explicit height:22px so align-self:stretch works */
.tkt-icon-col{align-self:stretch;height:auto!important;min-width:28px;}
/* Source filter chips — permanently hidden from sidebar (user-facing); still written by JS for internal filter compat */
#tk-src-chips{display:none!important;}
#tk-src-chips .tk-chip{min-height:32px;}
/* Hidden store filter select */
#tk-store-filter{min-height:28px;}
/* Toolbar buttons */
.tk-tb-btn{min-height:28px;}
/* Payment proof badge links */
.tk-proof-file,.tk-proof-flag{
  min-height:28px!important;display:inline-flex!important;align-items:center;
}

/* Proof row */
.tk-row-proof{padding:0 6px 7px 74px;display:flex;gap:5px;align-items:center;flex-wrap:wrap;}

/* Expand accordion */
.tk-card-exp{overflow:hidden;max-height:0;transition:max-height .28s cubic-bezier(.2,.9,.3,1);}
.tk-card-exp.open{max-height:6000px;}

/* ── Misc pills & chips ── */
.tk-chan{display:inline-flex;align-items:center;font-size:9px;font-weight:600;
  padding:2px 6px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;}
.tk-chan-retail{background:color-mix(in srgb, var(--green, var(--green, #35C26B)) 12%, transparent);color:var(--green, #35C26B);}
.tk-chan-wholesale{background:color-mix(in srgb, var(--info) 12%, transparent);color:var(--info);}
.tk-src-badge{display:inline-flex;align-items:center;gap:2px;font-size:9px;font-weight:700;
  padding:1px 5px;border-radius:5px;flex-shrink:0;}
.tk-hl{font-size:9px;font-weight:700;padding:2px 5px;border-radius:5px;
  display:inline-flex;align-items:center;gap:2px;}
.tk-chip-sm{font-size:9px;font-weight:700;padding:2px 6px;border-radius:6px;
  display:inline-flex;align-items:center;gap:2px;}

/* ── Status button — matches reference image exactly ── */
.tkt-status-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:3px;
  padding:4px 10px;border-radius:20px;
  font-size:11.5px;font-weight:500;cursor:pointer;border:none;
  font-family:inherit;transition:.1s;
  white-space:nowrap;line-height:1.3;width:100%;
  letter-spacing:-.01em;
}
.tkt-status-btn:hover{filter:brightness(1.1);}
/* Open = blue, exactly like reference */
.tkt-status-btn.s-open{color:var(--info);background:color-mix(in srgb, var(--info) 14%, transparent);}
/* In Progress / Pending = amber */
.tkt-status-btn.s-in_progress,.tkt-status-btn.s-pending{
  color:var(--warning);background:color-mix(in srgb, var(--warning) 14%, transparent);}
/* Resolved = purple */
.tkt-status-btn.s-resolved{color:var(--purple);background:color-mix(in srgb, var(--purple) 14%, transparent);}
/* Closed = green (matches reference image) */
.tkt-status-btn.s-closed{color:var(--green, #35C26B);background:color-mix(in srgb, var(--green, var(--green, #35C26B)) 14%, transparent);}
.tkt-status-btn.s-merged{color:#7D8796;background:rgba(125,135,150,.10);}
[data-mode="light"] .tkt-status-btn.s-open{color:#1a5ea8;background:rgba(26,94,168,.10);}
[data-mode="light"] .tkt-status-btn.s-closed{color:#1a7a4a;background:rgba(26,122,74,.10);}
[data-mode="light"] .tkt-status-btn.s-resolved{color:#6b3aad;background:rgba(107,58,173,.10);}
[data-mode="light"] .tkt-status-btn.s-in_progress,
[data-mode="light"] .tkt-status-btn.s-pending{color:#8a5500;background:rgba(138,85,0,.10);}

/* ══ 6. Status picker popup — Apple glassmorphism ═════════════════ */
#tkt-status-pop{
  position:fixed;z-index:10010;
  background:color-mix(in srgb, var(--bg-deep) 97%, transparent);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:5px;
  box-shadow:0 16px 48px rgba(0,0,0,.7),0 0 0 .5px rgba(255,255,255,.07),
             inset 0 1px 0 rgba(255,255,255,.08);
  min-width:160px;display:none;
  animation:tktPopIn .15s var(--spring);
}
@keyframes tktPopIn{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
#tkt-status-pop.open{display:block;}
.tkt-status-opt{display:flex;align-items:center;gap:8px;padding:8px 11px;
  min-height:37px;border-radius:10px;border:none;background:none;
  width:100%;font-family:inherit;font-size:13px;font-weight:500;
  color:var(--txt);cursor:pointer;text-align:left;transition:.09s;}
.tkt-status-opt:hover{background:rgba(255,255,255,.07);}
.tkt-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
[data-mode="light"] #tkt-status-pop{
  background:rgba(255,255,255,.98);
  box-shadow:0 8px 32px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.8);
}
[data-mode="light"] .tkt-status-opt{color:#0D0F14;}
[data-mode="light"] .tkt-status-opt:hover{background:rgba(0,0,0,.04);}

/* ══ 7. "All Tickets" glassmorphism dropdown — Apple style ════════ */
#tk-views-overlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.2);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:none;}
#tk-views-overlay.open{display:block;}
#tk-views-dropdown{
  position:fixed;z-index:9999;
  background:color-mix(in srgb, var(--bg-deep) 97%, transparent);
  -webkit-backdrop-filter:blur(40px) saturate(200%);
  backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:5px;
  box-shadow:0 20px 64px rgba(0,0,0,.7),0 0 0 .5px rgba(255,255,255,.07),
             inset 0 1px 0 rgba(255,255,255,.08);
  min-width:240px;max-height:82vh;overflow-y:auto;
  display:none;
  animation:tktDropDown .18s var(--spring);
}
@keyframes tktDropDown{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
#tk-views-dropdown.open{display:block;}
[data-mode="light"] #tk-views-dropdown{
  background:rgba(255,255,255,.98);
  box-shadow:0 8px 32px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.9);
}
.tk-vd-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);padding:8px 10px 4px;display:block;}
.tk-vd-item{display:flex;align-items:center;gap:8px;padding:8px 10px;min-height:37px;
  border-radius:10px;border:none;background:none;width:100%;font-family:inherit;
  font-size:13px;font-weight:400;color:var(--txt2);cursor:pointer;text-align:left;
  transition:.09s;white-space:nowrap;overflow:hidden;}
.tk-vd-item:hover{background:rgba(255,255,255,.07);color:var(--txt);}
.tk-vd-item.active{background:color-mix(in srgb, var(--info) 12%, transparent);color:var(--blue);font-weight:500;}
.tk-vd-item .vi-icon{font-size:13px;flex-shrink:0;width:18px;text-align:center;}
.tk-vd-item .vi-cnt{margin-left:auto;font-size:10px;color:var(--muted);flex-shrink:0;}
.tk-vd-div{height:1px;background:rgba(255,255,255,.07);margin:3px 5px;}
.tk-vd-add{display:flex;align-items:center;gap:7px;padding:9px 10px;font-size:13px;
  color:var(--blue);border:none;background:none;width:100%;font-family:inherit;
  cursor:pointer;border-top:1px solid rgba(255,255,255,.07);margin-top:3px;
  border-radius:0 0 10px 10px;}
[data-mode="light"] .tk-vd-item{color:#444C5A;}
[data-mode="light"] .tk-vd-item:hover{color:#0D0F14;background:rgba(0,0,0,.04);}
[data-mode="light"] .tk-vd-div{background:rgba(0,0,0,.07);}
[data-mode="light"] .tk-vd-add{border-top-color:rgba(0,0,0,.07);}

/* ══ 8. Category picker — Apple glassmorphism ═══════════════════ */
.tk-cat-pop{position:fixed;z-index:10009;
  background:color-mix(in srgb, var(--bg-deep) 97%, transparent);
  -webkit-backdrop-filter:blur(40px) saturate(200%);backdrop-filter:blur(40px) saturate(200%);
  border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:6px;
  box-shadow:0 16px 48px rgba(0,0,0,.7);min-width:200px;
  display:none;animation:tktPopIn .15s var(--spring);}
.tk-cat-pop.open{display:block;}
.tk-cat-pop-hdr{font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:var(--muted);padding:6px 10px 8px;display:block;}
.tk-cat-opt{display:flex;align-items:center;gap:8px;padding:9px 10px;min-height:40px;
  border-radius:10px;border:none;background:none;width:100%;font-family:inherit;
  font-size:13px;font-weight:500;color:var(--txt);cursor:pointer;text-align:left;transition:.09s;}
.tk-cat-opt:hover{background:rgba(255,255,255,.07);}
.tk-cat-opt.current{background:color-mix(in srgb, var(--info) 10%, transparent);color:var(--blue);}
.tk-cat-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.tk-cat-check{margin-left:auto;color:var(--blue);}
[data-mode="light"] .tk-cat-pop{background:rgba(255,255,255,.98);}
[data-mode="light"] .tk-cat-opt{color:#0D0F14;}
[data-mode="light"] .tk-cat-opt:hover{background:rgba(0,0,0,.04);}

/* ══ 9. Right panel — REMOVED (was duplicate of left sidebar) ══ */
#tk-right-panel{display:none!important;}

/* ══ 10. Detail + composer ════════════════════════════════════════ */
#tk-detail{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0;}
/* Sticky back bar — always visible at top of detail view */
#tk-detail-topbar{display:flex;align-items:center;gap:8px;
  padding:7px 12px;border-bottom:1px solid var(--brd);
  background:var(--panel);flex-shrink:0;}
#tk-detail-topbar .tk-back-btn{display:flex;align-items:center;gap:5px;
  background:var(--hover);border:1px solid var(--brd);border-radius:var(--r);
  padding:5px 12px;font-size:13px;font-weight:600;color:var(--txt2);
  cursor:pointer;font-family:inherit;transition:.1s;}
#tk-detail-topbar .tk-back-btn:hover{background:var(--sel);color:var(--txt);}
#tk-detail-topbar .tk-ticket-title{
  flex:1;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#tk-detail-scroll{flex:1;overflow-y:auto;padding:14px;}
/* Reply composer header */
#tk-reply-label{display:flex;align-items:center;gap:7px;
  padding:8px 14px 0;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--blue);}
.tk-detail-header{padding:13px 15px;border-radius:var(--r2);
  border:1px solid var(--brd);background:var(--panel);margin-bottom:11px;border-left:3px solid var(--blue);}
#tk-composer{flex-shrink:0;border-top:2px solid color-mix(in srgb, var(--info) 25%, transparent)!important;
  background:var(--panel)!important;padding:11px 14px!important;}
[data-mode="light"] #tk-composer{background:#fff!important;}
/* ── Rich email compose editor ─────────────────────────────────── */
#tk-email-compose{border:1.5px solid color-mix(in srgb, var(--info) 20%, transparent);border-radius:var(--r2);
  background:var(--bg);margin-bottom:8px;overflow:hidden;transition:border-color .18s;}
#tk-email-compose:focus-within{border-color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--info) 8%, transparent);}
#tk-compose-header{border-bottom:1px solid var(--brd);padding:0;background:var(--panel);}
#tk-compose-from-row{display:flex;align-items:center;gap:0;padding:7px 12px;
  border-bottom:1px solid var(--brd);background:var(--panel);}
.tk-compose-field-row{display:flex;align-items:center;padding:0 12px;
  min-height:34px;border-bottom:1px solid var(--brd);}
.tk-compose-field-row:last-child{border-bottom:none;}
.tk-compose-label{font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);min-width:58px;flex-shrink:0;}
.tk-compose-field-inp{flex:1;background:none;border:none;outline:none;
  color:var(--txt);font-family:inherit;font-size:13px;padding:7px 0;}
.tk-compose-field-inp::placeholder{color:var(--muted);}
#tk-compose-from-val{font-size:13px;color:var(--txt2);flex:1;display:flex;align-items:center;gap:6px;}
#tk-compose-from-badge{display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;
  letter-spacing:.02em;}
/* Formatting toolbar */
#tk-fmt-bar{display:flex;align-items:center;gap:1px;padding:3px 7px;
  border-bottom:1px solid var(--brd);background:var(--panel);flex-wrap:wrap;}
.tk-fmt-btn{background:none;border:none;border-radius:5px;padding:3px 6px;
  min-width:26px;min-height:24px;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:700;color:var(--txt2);
  display:inline-flex;align-items:center;justify-content:center;transition:.1s;}
.tk-fmt-btn:hover{background:var(--hover);color:var(--txt);}
.tk-fmt-btn.active{background:color-mix(in srgb, var(--info) 12%, transparent);color:var(--blue);}
.tk-fmt-sep{width:1px;height:14px;background:var(--brd);margin:0 3px;flex-shrink:0;}
/* Contenteditable editor body */
#tk-reply-input[contenteditable]{min-height:140px!important;max-height:360px!important;overflow-y:auto!important;
  padding:14px 14px 10px!important;font-size:13.5px!important;
  line-height:1.65!important;color:var(--txt)!important;
  outline:none!important;border:none!important;box-shadow:none!important;
  background:transparent!important;overflow-y:auto!important;
  white-space:pre-wrap!important;word-break:break-word!important;}
#tk-reply-input[contenteditable]:empty::before{content:attr(data-placeholder);
  color:var(--muted);pointer-events:none;display:block;}
#tk-reply-input[contenteditable] a{color:var(--blue);text-decoration:underline;}
#tk-reply-input[contenteditable] ul,
#tk-reply-input[contenteditable] ol{padding-left:22px;margin:4px 0;}
/* Signature block */
#tk-compose-sig{border-top:1px solid var(--brd);padding:8px 14px 12px;
  font-size:12px;color:var(--muted);line-height:1.55;background:var(--panel);min-height:28px;}
/* SMS plain textarea (shown only in SMS mode) */
#tk-sms-input{width:100%;box-sizing:border-box;
  border:1.5px solid color-mix(in srgb, var(--info) 18%, transparent);background:var(--bg);
  min-height:110px;border-radius:var(--r2);font-size:13px;
  padding:10px 12px;color:var(--txt);font-family:inherit;
  resize:vertical;outline:none;margin-bottom:7px;display:none;}
#tk-sms-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px color-mix(in srgb, var(--info) 10%, transparent);}
/* Blockquote inside rich editor */
#tk-reply-input[contenteditable] blockquote{
  margin:6px 0;padding:4px 10px;
  border-left:3px solid color-mix(in srgb, var(--info) 45%, transparent);
  color:var(--muted);font-style:italic;background:color-mix(in srgb, var(--info) 4%, transparent);
  border-radius:0 4px 4px 0;}
/* Light mode overrides */
[data-mode="light"] #tk-email-compose{border-color:color-mix(in srgb, var(--info) 22%, transparent);}
[data-mode="light"] #tk-compose-header,[data-mode="light"] #tk-fmt-bar,
[data-mode="light"] #tk-compose-sig{background:#F2F3F5;}
[data-mode="light"] #tk-sms-input{background:#fff;}
/* Bottom send row */
.tk-comp-tools{background:color-mix(in srgb, var(--info) 4%, transparent);border-radius:var(--r);padding:3px;
  margin-bottom:7px;display:flex;gap:3px;flex-wrap:wrap;}
.tk-toggle{padding:5px 10px;border-radius:7px;border:1px solid var(--brd);background:none;
  color:var(--txt2);font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;
  transition:.1s;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
.tk-toggle:hover{background:var(--hover);color:var(--txt);}
.tk-toggle.on{background:color-mix(in srgb, var(--info) 10%, transparent);color:var(--blue);border-color:color-mix(in srgb, var(--info) 28%, transparent);}
.tk-comp-row{display:flex;gap:7px;align-items:center;justify-content:flex-end;padding-top:4px;}
#tk-send-btn{padding:0 18px;height:40px;border-radius:var(--r2);border:none;
  background:var(--blue);color:#fff;font-size:13px;font-weight:600;
  cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:5px;transition:.13s;
  flex-shrink:0;}
#tk-send-btn:hover{filter:brightness(1.08);
  box-shadow:0 4px 14px color-mix(in srgb, var(--info) 35%, transparent);}

/* ══ 11. Other tabs ═══════════════════════════════════════════════ */
#tk-leaderboard,#tk-analytics,#tk-docs,#tk-archive,#tk-logs{
  display:none;flex:1;overflow-y:auto;padding:16px;flex-direction:column;}
#tk-new-form{display:none;padding:18px;max-width:560px;margin:0 auto;width:100%;overflow-y:auto;flex:1;}

/* ══ 12. Misc ═════════════════════════════════════════════════════ */
.tk-empty{text-align:center;padding:44px 20px;color:var(--muted);font-size:13px;}
.tk-empty iconify-icon{display:block;margin:0 auto 9px;opacity:.28;}
.tk-field{margin-bottom:12px;}
.tk-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-bottom:4px;display:block;}
.tk-input,.tk-textarea,.tk-select{width:100%;padding:9px 11px;border-radius:var(--r2);
  border:1px solid var(--brd);background:var(--panel);color:var(--txt);
  font-size:14px;font-family:inherit;outline:none;}
.tk-input:focus,.tk-textarea:focus,.tk-select:focus{border-color:var(--blue);}
.tk-textarea{min-height:110px;resize:vertical;}
.tk-submit{width:100%;padding:11px;min-height:42px;border-radius:var(--r2);
  background:var(--blue);border:none;color:#fff;font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;display:flex;align-items:center;
  justify-content:center;gap:5px;transition:.15s;}
.tk-submit:hover{filter:brightness(1.08);}
/* Toast */
#tk-toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%) translateY(8px);
  background:color-mix(in srgb, var(--bg-deep) 97%, transparent);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);border-radius:999px;
  padding:8px 18px;font-size:12px;font-weight:500;color:var(--txt);
  z-index:10020;opacity:0;transition:.22s var(--spring);pointer-events:none;max-width:90vw;}
#tk-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
[data-mode="light"] #tk-toast{background:rgba(255,255,255,.97);}
/* Survey */
#tk-survey{position:fixed;inset:0;z-index:10000;display:none;place-items:center;
  padding:20px;background:rgba(14,17,22,.8);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
#tk-survey.show{display:grid;}
.tk-survey-card{max-width:400px;width:100%;text-align:center;padding:28px 22px;
  border-radius:18px;border:1px solid rgba(255,255,255,.1);background:var(--panel);
  box-shadow:0 20px 60px rgba(0,0,0,.5);}
.tk-survey-pick{display:flex;gap:14px;justify-content:center;margin-top:20px;}
.tk-survey-btn{width:84px;height:84px;border-radius:18px;border:1px solid var(--brd);
  background:var(--hover);cursor:pointer;display:grid;place-items:center;transition:.18s;}
.tk-survey-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.3);}
/* AI bubble */
#hytk-bubble{position:fixed;bottom:18px;right:18px;z-index:9800;
  width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
  background:var(--blue);box-shadow:0 4px 18px color-mix(in srgb, var(--info) 35%, transparent);transition:.18s;}
#hytk-bubble:hover{transform:scale(1.08);box-shadow:0 6px 26px color-mix(in srgb, var(--info) 50%, transparent);}
#hytk-bubble-badge{position:absolute;top:1px;right:1px;min-width:15px;height:15px;
  background:var(--danger);border-radius:999px;border:2px solid var(--bg);
  font-size:8px;font-weight:700;color:#fff;display:flex;align-items:center;
  justify-content:center;padding:0 2px;}
/* AI panel */
#hytk-panel{position:fixed;bottom:76px;right:18px;z-index:9799;
  width:min(350px,calc(100vw-36px));max-height:min(520px,68dvh);
  background:color-mix(in srgb, var(--bg-deep) 97%, transparent);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.1);border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);display:none;flex-direction:column;overflow:hidden;
  animation:tkfade .16s ease;}
#hytk-panel.open{display:flex;}
#hytk-header{display:flex;align-items:center;gap:7px;padding:9px 12px;
  border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0;}
#hytk-msgs{flex:1;overflow-y:auto;padding:9px 11px;display:flex;flex-direction:column;gap:7px;scrollbar-width:thin;}
.hytk-msg{padding:7px 9px;border-radius:9px;font-size:12px;line-height:1.5;max-width:92%;word-break:break-word;}
.hytk-msg.bot{background:color-mix(in srgb, var(--info) 9%, transparent);border:1px solid color-mix(in srgb, var(--info) 13%, transparent);color:var(--txt);align-self:flex-start;}
.hytk-msg.user{background:var(--hover);border:1px solid var(--brd);color:var(--txt);align-self:flex-end;}
.hytk-msg.system{font-size:9px;color:var(--muted);text-align:center;align-self:center;background:none;border:none;}
#hytk-chips{display:flex;gap:4px;flex-wrap:wrap;padding:5px 9px;border-top:1px solid rgba(255,255,255,.07);}
#hytk-chips button{font-family:inherit;font-size:10px;font-weight:500;padding:3px 8px;
  border-radius:999px;min-height:24px;background:var(--hover);border:1px solid var(--brd);
  color:var(--muted);cursor:pointer;transition:.1s;white-space:nowrap;}
#hytk-chips button:hover{color:var(--txt);}
#hytk-composer{display:flex;gap:5px;padding:7px 9px;border-top:1px solid rgba(255,255,255,.07);}
#hytk-input{flex:1;background:var(--hover);border:1px solid var(--brd);border-radius:9px;
  padding:6px 9px;color:var(--txt);font-size:12px;font-family:inherit;outline:none;
  resize:none;min-height:34px;max-height:68px;line-height:1.4;}
#hytk-input:focus{border-color:var(--blue);}
#hytk-send{width:32px;flex-shrink:0;border-radius:9px;border:none;background:var(--blue);
  color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}
#hytk-send:hover{filter:brightness(1.1);}
#hytk-voice-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--brd);
  background:var(--hover);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;}
/* Debug drawer */
#tk-debug-veil{position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:9990;display:none;}
#tk-debug-veil.show{display:block;}
#tk-debug{position:fixed;top:0;right:0;bottom:0;width:min(390px,90vw);z-index:9991;
  transform:translateX(110%);transition:transform .24s ease;
  background:var(--panel);border-left:1px solid var(--brd);padding:14px;
  overflow-y:auto;display:flex;flex-direction:column;gap:9px;}
#tk-debug.open{transform:translateX(0);}
.tk-debug-drop{border:1.5px dashed var(--brd);border-radius:var(--r2);
  padding:18px;text-align:center;color:var(--muted);font-size:12px;cursor:pointer;}
.tk-debug-drop.over{border-color:var(--blue);color:var(--blue);}
/* Payment sheet */
.tk-pay-veil{position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:10001;display:none;place-items:center;padding:18px;}
.tk-pay-veil.open{display:grid;}
.tk-pay-sheet{width:min(400px,94vw);border-radius:14px;padding:16px;
  background:var(--panel);border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 60px rgba(0,0,0,.5);}
.tk-pay-sheet h3{margin:0 0 7px;font-size:14px;display:flex;align-items:center;gap:6px;}
.tk-pay-amt{font-size:22px;font-weight:700;margin-bottom:5px;}
.tk-pay-row{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);padding:2px 0;}
.tk-pay-actions{display:flex;gap:7px;margin-top:12px;}
.tk-pay-btn{flex:1;min-height:40px;border-radius:9px;border:none;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px;font-size:12px;}
.tk-pay-btn.go{background:var(--success);color:#fff;}
.tk-pay-btn.review{background:var(--hover);color:var(--txt);border:1px solid var(--brd);}
.tk-pay-btn.cancel{background:transparent;color:var(--muted);border:1px solid var(--brd);}
.tk-pay-agree{display:inline-flex;align-items:center;gap:3px;font-size:10px;padding:2px 6px;border-radius:999px;}
.tk-pay-agree.ok{background:color-mix(in srgb, var(--green, var(--green, #35C26B)) 12%, transparent);color:var(--success);}
.tk-pay-agree.no{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger);}
/* Expanded card */
.tk-exp-inner{padding:9px 14px 9px 72px;animation:tkfade .18s ease;}
.tk-exp-email{border:1px solid var(--brd);border-radius:var(--r2);overflow:hidden;margin-bottom:7px;background:var(--panel);}
.tk-exp-email summary{cursor:pointer;padding:7px 11px;font-size:12px;font-weight:600;color:var(--txt);
  list-style:none;display:flex;align-items:center;gap:6px;user-select:none;background:var(--hover);}
.tk-exp-email summary::-webkit-details-marker{display:none;}
.tk-exp-email .sumchev{margin-left:auto;transition:transform .18s;}
.tk-exp-email[open] summary .sumchev{transform:rotate(180deg);}
.tk-exp-email-body{padding:9px 11px;max-height:75vh;overflow-y:auto;font-size:12px;line-height:1.6;}
.tk-exp-att-row{display:flex;gap:5px;flex-wrap:wrap;padding:5px 11px;border-top:1px solid var(--brd);}
.tk-ent{margin-top:7px;border-radius:var(--r);border:1px solid var(--brd);background:var(--panel);padding:7px 11px;}
.tk-ent-h{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  display:flex;align-items:center;gap:4px;margin-bottom:4px;}
.tk-order{padding:5px;border-radius:7px;border:1px solid var(--brd);margin-top:5px;}
.tk-order-row{display:flex;justify-content:space-between;gap:7px;font-size:11px;margin-top:2px;}
.tk-order-row .k{color:var(--muted);}
.tk-sigs{display:flex;gap:4px;flex-wrap:wrap;}
.tk-sig{font-size:9px;font-weight:700;padding:2px 6px;border-radius:999px;
  display:inline-flex;align-items:center;gap:3px;}
.tk-link-row,.tk-act-row{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px;}
.tk-link-btn,.tk-act-btn,.tk-exp-act{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 8px;min-height:26px;border-radius:6px;
  border:1px solid var(--brd);
  background:var(--hover);color:var(--txt2);font-size:11px;font-weight:500;
  cursor:pointer;font-family:inherit;transition:.1s;white-space:nowrap;}
.tk-link-btn:hover,.tk-act-btn:hover,.tk-exp-act:hover{
  border-color:var(--blue);color:var(--blue);background:color-mix(in srgb, var(--info) 7%, transparent);}
/* Mark Paid — small green chip */
.tk-exp-act.pay,.tk-exp-act.pay-sm{
  background:color-mix(in srgb, var(--green, var(--green, #35C26B)) 10%, transparent);border-color:color-mix(in srgb, var(--green, var(--green, #35C26B)) 28%, transparent);
  color:var(--green, #35C26B);font-weight:600;font-size:11px;padding:3px 8px;}
.tk-exp-act.pay:hover,.tk-exp-act.pay-sm:hover{background:color-mix(in srgb, var(--green, var(--green, #35C26B)) 20%, transparent);}
/* Primary (Reply) — slightly accented */
.tk-exp-act.primary{
  border-color:color-mix(in srgb, var(--info) 28%, transparent);color:var(--blue);background:color-mix(in srgb, var(--info) 7%, transparent);}
.tk-exp-actions{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  padding:7px 14px;border-top:1px solid var(--brd);}
.tk-ent-summary{font-size:11px;color:var(--muted);margin-top:5px;display:flex;align-items:flex-start;gap:4px;}
.tk-proof-strip{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px;}
.tk-proof-thumb{width:72px;height:72px;border-radius:8px;object-fit:cover;
  border:1.5px solid var(--brd);cursor:zoom-in;background:var(--hover);
  transition:opacity .12s,box-shadow .12s;display:block;}
.tk-proof-thumb:hover{opacity:.82;box-shadow:0 0 0 2px var(--blue);}
.tk-proof-file{display:inline-flex;align-items:center;gap:4px;padding:4px 7px;
  border-radius:6px;border:1px solid var(--brd);font-size:10px;color:var(--muted);
  cursor:pointer;text-decoration:none;}
.tk-proof-file:hover{border-color:var(--blue);color:var(--blue);}
.tk-proof-cta{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.tk-proof-flag{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;
  color:var(--success);cursor:pointer;padding:3px 8px;min-height:26px;border-radius:999px;
  background:color-mix(in srgb, var(--green, var(--green, #35C26B)) 11%, transparent);border:1px solid color-mix(in srgb, var(--green, var(--green, #35C26B)) 28%, transparent);text-decoration:none;}
.tk-prim-act,.tk-prim-act.tk-glow{display:inline-flex;align-items:center;gap:4px;
  padding:6px 11px;min-height:32px;border-radius:7px;border:none;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:600;background:var(--success);color:#fff;transition:.18s;}
.tk-prim-act:hover{filter:brightness(1.08);}
@keyframes tkglow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--green, var(--green, #35C26B)) 38%, transparent);}50%{box-shadow:0 0 10px 3px color-mix(in srgb, var(--green, var(--green, #35C26B)) 38%, transparent);}}
/* Leaderboard, analytics, docs, logs */
.tk-podium{display:flex;gap:9px;justify-content:center;align-items:flex-end;margin:7px 0 18px;flex-wrap:wrap;}
.tk-podium-card{flex:1;min-width:110px;max-width:170px;text-align:center;padding:14px 11px;
  border-radius:var(--r2);border:1px solid var(--brd);background:var(--panel);}
.tk-podium-card.p1{border-color:var(--warn);background:color-mix(in srgb, var(--warning) 5%, transparent);transform:translateY(-8px);}
.tk-podium-rank{font-size:18px;font-weight:800;}
.tk-podium-av{width:42px;height:42px;border-radius:50%;margin:5px auto;display:grid;
  place-items:center;font-size:14px;font-weight:700;color:#fff;background:var(--blue);}
.tk-podium-name{font-size:11px;font-weight:600;}
.tk-podium-stat{font-size:10px;color:var(--muted);margin-top:3px;}
.tk-lb-row{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:var(--r);
  border:1px solid var(--brd);background:var(--panel);margin-bottom:5px;}
.tk-lb-rank{font-size:13px;font-weight:800;width:26px;text-align:center;color:var(--muted);}
.tk-lb-av{width:32px;height:32px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;flex-shrink:0;}
.tk-lb-name{flex:1;min-width:0;}
.tk-lb-name .nm{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk-lb-name .sub{font-size:10px;color:var(--muted);margin-top:2px;}
.tk-lb-metrics{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.tk-lb-stat{text-align:center;background:var(--panel);border:1px solid var(--brd);border-radius:7px;padding:4px 7px;min-width:40px;}
.tk-lb-stat .v{font-size:13px;font-weight:700;color:var(--blue);}
.tk-lb-stat .k{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.3px;margin-top:1px;}
/* Logs */
.tk-log-toolbar{display:flex;flex-wrap:wrap;gap:4px;padding:5px 7px;border-bottom:1px solid var(--brd);align-items:center;flex-shrink:0;}
.tk-log-search{flex:1;min-width:110px;background:var(--hover);border:1px solid var(--brd);
  border-radius:7px;padding:4px 9px;font-size:12px;color:var(--txt);outline:none;font-family:inherit;}
.tk-log-search:focus{border-color:var(--blue);}
.tk-log-row{display:flex;align-items:flex-start;gap:6px;padding:7px 5px;border-bottom:1px solid var(--brd2);border-radius:6px;transition:background .08s;}
.tk-log-row:hover{background:var(--hover);}
.tk-log-body{flex:1;min-width:0;}
.tk-log-subj{font-size:12px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tk-log-meta{display:flex;flex-wrap:wrap;gap:3px;margin-top:2px;align-items:center;}
.tk-log-from,.tk-log-sep,.tk-log-to{font-size:10px;color:var(--muted);}
.tk-log-from{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk-log-to{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tk-log-reason{font-size:9px;font-weight:600;padding:1px 5px;border-radius:5px;background:color-mix(in srgb, var(--danger) 9%, transparent);color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 18%, transparent);}
.tk-log-cat{font-size:9px;font-weight:600;padding:1px 5px;border-radius:5px;background:color-mix(in srgb, var(--info) 9%, transparent);color:var(--blue);border:1px solid color-mix(in srgb, var(--info) 18%, transparent);}
.tk-log-aicat{font-size:9px;padding:1px 5px;border-radius:5px;background:var(--hover);color:var(--muted);border:1px solid var(--brd);}
.tk-log-tklink{font-size:9px;font-weight:700;color:var(--blue);text-decoration:none;padding:1px 5px;border-radius:5px;background:color-mix(in srgb, var(--info) 9%, transparent);cursor:pointer;border:none;}
.tk-log-right{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;min-width:72px;}
.tk-log-store{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);}
.tk-log-ts{font-size:9px;color:var(--muted);white-space:nowrap;}
/* Docs */
.tkd-section{margin-bottom:20px;}
.tkd-h1{font-size:17px;font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:5px;}
.tkd-h2{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--blue);margin:13px 0 5px;display:flex;align-items:center;gap:4px;}
.tkd-p{font-size:13px;line-height:1.6;color:var(--txt2);margin-bottom:5px;}
.tkd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:7px;margin-bottom:9px;}
.tkd-card{border-radius:var(--r);border:1px solid var(--brd);background:var(--panel);padding:9px 11px;}
.tkd-card-h{font-size:12px;font-weight:700;margin-bottom:3px;display:flex;align-items:center;gap:4px;}
.tkd-card-b{font-size:11px;color:var(--muted);line-height:1.5;}
.tkd-table{width:100%;border-collapse:collapse;font-size:11px;margin-bottom:7px;}
.tkd-table th{text-align:left;padding:5px 7px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--brd);}
.tkd-table td{padding:6px 7px;border-bottom:1px solid rgba(255,255,255,.03);vertical-align:top;}
.tkd-tag{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:700;padding:2px 6px;border-radius:999px;text-transform:uppercase;}
.tkd-tip{border-radius:7px;padding:7px 10px;font-size:11px;line-height:1.5;display:flex;gap:6px;align-items:flex-start;margin-bottom:7px;}
.tkd-tip.info{background:color-mix(in srgb, var(--info) 7%, transparent);border:1px solid color-mix(in srgb, var(--info) 18%, transparent);}
.tkd-tip.warn{background:color-mix(in srgb, var(--warning) 7%, transparent);border:1px solid color-mix(in srgb, var(--warning) 18%, transparent);}
.tkd-tip.ok{background:color-mix(in srgb, var(--green, var(--green, #35C26B)) 7%, transparent);border:1px solid color-mix(in srgb, var(--green, var(--green, #35C26B)) 18%, transparent);}
/* Analytics */
.rev-ranges{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:2px 0 5px;padding:0;}
.rev-ranges .rev-range{background:none!important;border:none!important;color:var(--muted);
  font-size:12px!important;font-weight:600;cursor:pointer;padding:0!important;margin:0!important;font-family:inherit;}
.rev-ranges .rev-range:hover{color:var(--txt);}
.rev-ranges .rev-range.active{color:var(--blue)!important;}
/* Mobile */
#tk-sheet-backdrop{display:none;}
@media(max-width:900px){
  #tk-sheet-backdrop.open{display:block;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:165;}}
/* Animations */
@keyframes tkfade{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite;}
/* Store picker — always visible next to All Tickets */
#tk-storebar{position:relative;flex-shrink:0;display:block;}
.tk-nav-store-sep{width:1px;height:18px;background:var(--brd);margin:0 4px;flex-shrink:0;}
.tk-store-toggle{display:flex;align-items:center;gap:5px;padding:5px 10px;min-height:32px;
  border-radius:var(--r);border:1px solid var(--brd);background:var(--hover);
  color:var(--txt);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;}
#tk-store-panel{display:none;position:absolute;top:100%;left:0;z-index:200;margin-top:3px;
  min-width:190px;max-height:50vh;overflow-y:auto;
  background:var(--panel);border:1px solid var(--brd);border-radius:var(--r2);
  padding:4px;box-shadow:0 12px 32px rgba(0,0,0,.4);}
#tk-store-panel.open{display:block;}
.tk-store-opt{display:flex;align-items:center;gap:6px;padding:7px 9px;min-height:32px;
  border-radius:7px;cursor:pointer;font-size:13px;font-weight:500;color:var(--txt2);}
.tk-store-opt:hover{background:var(--hover);}
.tk-store-opt.active{background:color-mix(in srgb, var(--info) 10%, transparent);color:var(--blue);}