/* ══════════════════════════════════════════════════════════════════════
   hypatia-tickets-v16.css — V16 Chroma Blackhole
   Page-local V16 presentation contract. Behavioral DOM/JS contracts are preserved.
   ═══════════════════════════════════════════════════════════════════════ */

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

/* ══ 1. Design tokens — Apple Enterprise dark ════════════════════ */
:root{
  --bg:#000204;
  --bg-deep:var(--bg);--bg-surface:var(--panel);--bg-card:var(--panel);
  --text:var(--txt);--border:var(--brd);--border-focus:var(--blue);
  --glass-bg:var(--panel);--glass-bg-light:var(--hover);--glass-border:var(--brd);
  --nav:#05090D;
  --panel:#070B10;
  --hover:#0B1219;
  --sel:color-mix(in srgb, #101B26 82%, #35EAFF);
  --brd:rgba(93,223,255,.16);
  --brd2:rgba(255,255,255,.055);
  --txt:#F4F8FF;
  --txt2:#AAB6C5;
  --muted:#738196;
  --blue:#35EAFF;
  --info:#35EAFF;
  --accent:#438FFF;
  --green:#35EFB0;
  --success:#35EFB0;
  --warning:#F7B955;
  --warn:#F7B955;
  --danger:#FF5470;
  --purple:#A657FF;
  --pink:#FF3FC8;
  --sb-w:260px;
  --rp-w:224px;
  --nav-h:72px;
  --r:10px;--r2:14px;--r3:18px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",sans-serif;
  --spring:cubic-bezier(.2,.8,.2,1);
  --surface-blur:blur(18px) saturate(145%);
  --shadow-soft:0 16px 50px rgba(0,0,0,.35);
  --edge:linear-gradient(115deg,rgba(53,234,255,.85),rgba(67,143,255,.7) 35%,rgba(166,87,255,.68) 67%,rgba(255,63,200,.72));
  --c-payments:#35EFB0;--c-shipping:#F7B955;--c-support:#35EAFF;
  --c-sales:#A657FF;--c-affiliates:#FF6FB5;--c-admin:#F7B955;
  --c-bugs:#FF5470;--c-feedback:#35EAFF;
}
/* ── Light-mode remapping (Beach Day, Clean Light, etc.) ───────── */
[data-mode="light"]{
  --bg:#F5F7FB;--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:#586579;
  --blue:#096D85;--info:#096D85;--accent:#285BC2;
  --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:radial-gradient(circle at 20% -10%,rgba(53,234,255,.055),transparent 34%),radial-gradient(circle at 85% 0,rgba(166,87,255,.05),transparent 28%),var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased;}
#tk-app.hy-tickets-v16{
  display:grid;
  grid-template-rows:var(--nav-h) minmax(0,1fr);
  grid-template-columns:var(--sb-w) minmax(0,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(--surface-blur);backdrop-filter:var(--surface-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) minmax(0,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:104px;}
  .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:flex!important;order:10;flex:1 0 100%;padding:0!important;}
  .tk-nav-right{gap:2px!important;}
  .tk-nav-icon{width:30px!important;height:30px!important;}
  #tk-nav{flex-wrap:wrap;align-content:center;padding:6px 12px!important;gap:4px!important;}
  .tk-nav-search-wrap{width:100%;}
  #tk-search{min-height:40px;}
  .tk-logo{font-size:12px;}
  .tk-nav-ham,.tk-nav-icon{min-width:36px;min-height:40px;}
}

/* ══ 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(20px,env(safe-area-inset-left))!important;
    padding-right:max(20px,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:minmax(0,1fr)!important;grid-template-rows:var(--nav-h) minmax(0,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-width:0;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);}


/* ══ V16 Chroma Blackhole polish ═══════════════════════════════ */
#tk-app.hy-tickets-v16 :is(.tk-nav-views-btn,#tk-search,.tk-profile,.tk-input,.tk-compose-field-inp,.tk-log-search){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#tk-app.hy-tickets-v16 :is(.tk-nav-views-btn,#tk-search,.tk-profile,.tk-input,.tk-compose-field-inp,.tk-log-search):focus-within,
#tk-app.hy-tickets-v16 :is(#tk-search,.tk-input,.tk-compose-field-inp,.tk-log-search):focus{
  border-color:rgba(53,234,255,.72)!important;
  box-shadow:0 0 0 3px rgba(53,234,255,.09),0 0 28px rgba(67,143,255,.08)!important;
}
#tk-app.hy-tickets-v16 :is(.tk-an-card,.tk-context,.tk-ent,.tk-int-note,.tk-card-exp,.tk-log-row){
  background:var(--panel);
  border-color:rgba(93,223,255,.12);
  box-shadow:var(--shadow-soft);
}
#tk-app.hy-tickets-v16 :is(.tk-an-card,.tk-context,.tk-ent,.tk-int-note,.tk-card-exp):hover{
  border-color:rgba(53,234,255,.26);
  transform:translateY(-1px);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
#tk-app.hy-tickets-v16 .tk-glow{
  filter:drop-shadow(0 0 16px rgba(53,234,255,.18));
}
@media (prefers-reduced-motion:reduce){
  #tk-app.hy-tickets-v16 *,#tk-app.hy-tickets-v16 *::before,#tk-app.hy-tickets-v16 *::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

/* V16 document containment: off-canvas panels and decorative layers stay inside the viewport. */
html,body{max-width:100%;overflow-x:hidden}

/* Body-mounted detail footer shares the bottom edge with the fixed assistant. */
body:has(#tk-triple.open) #tk-tp-reply-footer{padding-right:84px;}
#tk-app #tk-pagination{padding-right:84px;gap:8px;flex-wrap:wrap;}

/* 2026-10-26: scoped V16 ticket-list containment; retain all controls and proof actions. */
#tk-app.hy-tickets-v16 #tk-list{padding:12px 14px 20px;display:flex;flex-direction:column;gap:9px;}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket{flex-shrink:0;background:var(--panel);border:1px solid var(--brd);border-left:3px solid transparent;border-radius:12px;overflow:visible;box-shadow:0 2px 14px rgba(0,0,0,.18);}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket:hover{background:var(--hover);border-color:color-mix(in srgb,var(--info) 32%,var(--brd));}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket.active{border-left-color:var(--info);background:color-mix(in srgb,var(--info) 7%,var(--panel));}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{padding:12px 14px;min-height:64px;gap:4px;}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof{padding:0 16px 12px 66px;min-height:32px;gap:8px;}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-card-exp.open{border-top:1px solid var(--brd);}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-proof-strip{gap:8px;}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-proof-file{max-width:100%;overflow-wrap:anywhere;}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-subj{font-size:13px;line-height:1.45;}
@media(max-width:900px){#tk-app.hy-tickets-v16 #tk-list{padding:8px;gap:8px;}#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{padding:10px 8px;min-height:66px;}#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof{padding:0 10px 12px 16px;}}
@media(max-width:480px){#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof{padding-left:10px;}#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{padding:9px 6px;}}

/* V16 sidebar: HyMail navigation density and component alignment. */
#tk-app.hy-tickets-v16 #tk-sidebar{padding:16px 10px 24px;gap:0;background:linear-gradient(180deg,#080e18,#070b13);border-right:1px solid rgba(133,155,192,.18)}
#tk-app.hy-tickets-v16 #tk-sidebar .tk-sb-section{margin:0 0 10px;min-width:0}
#tk-app.hy-tickets-v16 #tk-sidebar .tk-sb-label{display:block;padding:13px 12px 7px;font-size:10px;font-weight:750;letter-spacing:.12em;color:#8e9db3}
#tk-app.hy-tickets-v16 #tk-sidebar .tk-sb-item,#tk-app.hy-tickets-v16 #tk-sidebar #tk-cat-chips .tk-chip{display:flex;align-items:center;gap:11px;min-height:39px;padding:9px 11px;margin:2px 0;width:100%;border:1px solid transparent;border-radius:10px;font-size:12.5px;line-height:1.3;color:var(--txt2);background:transparent;transition:background .12s,border-color .12s,color .12s}
#tk-app.hy-tickets-v16 #tk-sidebar .tk-sb-item>iconify-icon{width:18px;min-width:18px;font-size:17px;flex-shrink:0}
#tk-app.hy-tickets-v16 #tk-sidebar #tk-cat-chips .tk-chip .ic{width:18px;min-width:18px;justify-content:center}
#tk-app.hy-tickets-v16 #tk-sidebar .tk-sb-item:hover,#tk-app.hy-tickets-v16 #tk-sidebar #tk-cat-chips .tk-chip:hover{background:rgba(126,153,200,.10);color:var(--txt)}
#tk-app.hy-tickets-v16 #tk-sidebar .tk-sb-item.active,#tk-app.hy-tickets-v16 #tk-sidebar #tk-cat-chips .tk-chip.active{background:rgba(53,234,255,.09);border-color:rgba(53,234,255,.19);color:#8ceefa;font-weight:650}
#tk-app.hy-tickets-v16 #tk-sidebar .tk-sb-item.active::before{left:0;height:21px;width:3px;border-radius:0 3px 3px 0;background:#35eaff}
#tk-app.hy-tickets-v16 #tk-sidebar .tk-sb-cnt,#tk-app.hy-tickets-v16 #tk-sidebar #tk-cat-chips .tk-chip .cnt{padding:3px 7px;min-width:24px;font-size:10px;border-radius:7px;background:rgba(141,163,194,.12);color:#a8b7ca;font-variant-numeric:tabular-nums}
#tk-app.hy-tickets-v16 #tk-sidebar .tk-sb-item.active .tk-sb-cnt,#tk-app.hy-tickets-v16 #tk-sidebar #tk-cat-chips .tk-chip.active .cnt{background:rgba(53,234,255,.16);color:#8ceefa}
#tk-app.hy-tickets-v16 #tk-sidebar .tk-sb-divider{height:1px;margin:10px 12px;background:rgba(133,155,192,.14)}
#tk-app.hy-tickets-v16 #tk-sidebar .tk-sb-add{opacity:.7}
[data-mode="light"] #tk-app.hy-tickets-v16 #tk-sidebar{background:#f8fafc}
@media(max-width:900px){#tk-app.hy-tickets-v16 #tk-sidebar{padding:12px 8px 20px}}

/* V16 hyTickets identity + neutralized legacy payment-green UI. */
#tk-app.hy-tickets-v16 .tk-logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.04em}
#tk-app.hy-tickets-v16 .tk-logo-word{font-size:16px;background:linear-gradient(100deg,#f7fbff 18%,#86efff 54%,#c99bff 82%,#ff7fdc);-webkit-background-clip:text;background-clip:text;color:transparent}
#tk-app.hy-tickets-v16 .tk-logo-hy{font-weight:500;color:#8fa2bc;-webkit-text-fill-color:#8fa2bc}
#tk-app.hy-tickets-v16 .tk-v16-ticket-mark{width:30px;height:30px;display:inline-grid;place-items:center;position:relative;flex:none;border:1px solid transparent;border-radius:9px;background:linear-gradient(#07101a,#02060b) padding-box,var(--edge) border-box;color:#76efff;box-shadow:0 0 18px rgba(53,234,255,.18),inset 0 1px rgba(255,255,255,.08);transition:transform .25s var(--spring),box-shadow .25s ease}
#tk-app.hy-tickets-v16 .tk-v16-ticket-mark::after{content:"";position:absolute;inset:4px;border-radius:6px;background:linear-gradient(100deg,transparent,rgba(53,234,255,.16),rgba(255,63,200,.10),transparent);background-size:220% 100%;animation:tk-ticket-sheen 4.8s ease-in-out infinite;pointer-events:none}
#tk-app.hy-tickets-v16 .tk-logo:hover .tk-v16-ticket-mark{transform:translateY(-1px) rotate(-3deg);box-shadow:0 0 25px rgba(53,234,255,.26),0 0 20px rgba(166,87,255,.16)}
@keyframes tk-ticket-sheen{0%,25%{background-position:220% 0}65%,100%{background-position:-120% 0}}
#tk-app.hy-tickets-v16 :is(.tk-row-proof,.tk-proof-strip) :is(a,button){border-color:rgba(53,234,255,.3)!important;color:#86eefa!important;background:rgba(53,234,255,.07)!important}
#tk-app.hy-tickets-v16 .tk-proof-flag{color:#86eefa!important}
#tk-app.hy-tickets-v16 :is(.tk-row-proof,.tk-proof-strip) :is(a,button):hover{background:rgba(53,234,255,.14)!important}
#tk-app.hy-tickets-v16 :is(.tk-row-proof,.tk-proof-strip) :is(a,button):focus-visible{outline:2px solid #35eaff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){#tk-app.hy-tickets-v16 .tk-v16-ticket-mark::after{animation:none}}

/* ══ V16 Chroma Blackhole final interaction + containment contract ══ */
#tk-app.hy-tickets-v16{position:relative;isolation:isolate;background:radial-gradient(900px 520px at 12% -12%,rgba(35,141,255,.15),transparent 62%),radial-gradient(760px 520px at 92% 4%,rgba(166,87,255,.12),transparent 64%),#000204}
#tk-app.hy-tickets-v16::before{content:"";position:absolute;inset:-45%;z-index:-1;pointer-events:none;background:conic-gradient(from 20deg,rgba(53,234,255,.12),transparent 18%,rgba(166,87,255,.12),transparent 42%,rgba(255,63,200,.10),transparent 65%,rgba(53,234,255,.12));filter:blur(90px);animation:tk-aurora 18s linear infinite}
#tk-app.hy-tickets-v16::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 88%)}
@keyframes tk-aurora{to{transform:rotate(360deg)}}
#tk-app.hy-tickets-v16 :is(button,a,input,select,textarea,[contenteditable="true"]):focus-visible,#tk-triple :is(button,a,input,select,textarea,[contenteditable="true"]):focus-visible{outline:2px solid #35eaff!important;outline-offset:2px;box-shadow:0 0 0 4px rgba(53,234,255,.10)!important}
#tk-app.hy-tickets-v16 button:not(:disabled){transition:transform .18s var(--spring),background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease}
#tk-app.hy-tickets-v16 button:not(:disabled):active{transform:translateY(1px) scale(.98)}
#tk-app.hy-tickets-v16 .tk-profile{cursor:default}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket{min-width:0;contain:layout paint;transition:transform .22s var(--spring),border-color .22s ease,background-color .22s ease,box-shadow .22s ease}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.32),0 0 24px rgba(53,234,255,.055)}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket:focus-within{border-color:rgba(53,234,255,.48);box-shadow:0 0 0 3px rgba(53,234,255,.08)}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact>*{min-width:0;max-width:100%}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket :is(.tk-card-exp,.tk-exp-body,.tk-context,.tk-ent,.tk-msg-bubble){max-width:100%;overflow-wrap:anywhere}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-card-exp.open{padding:12px 16px 16px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-card-exp.open>*{max-width:100%}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket :is(img,iframe,video,table){max-width:100%}
#tk-app.hy-tickets-v16 :is(.tk-tb-btn,.tk-nav-icon,.tk-density-btn,.tk-qpill,.tk-exp-act):hover{border-color:rgba(53,234,255,.35);box-shadow:0 0 20px rgba(53,234,255,.08)}
#tk-triple.open{overflow:hidden}
#tk-triple>div{min-width:0;min-height:0;border-top:1px solid rgba(53,234,255,.22);border-bottom:1px solid rgba(166,87,255,.18)}
#tk-triple #tk-tp-list{border-left:1px solid rgba(53,234,255,.22)}
#tk-triple #tk-tp-conv{border-right:1px solid rgba(166,87,255,.22)}
#tk-triple :is(#tk-tp-list-body,#tk-tp-props,#tk-tp-conv-body,#tk-tp-reply-editor){overscroll-behavior:contain}
#tk-triple :is(.tk-cv-msg,.tkp-sec,.tkm-card){min-width:0;max-width:100%;overflow-wrap:anywhere}
#tk-triple :is(img,iframe,video,table){max-width:100%}
#tk-triple button:disabled{cursor:not-allowed;opacity:.38}
@media(max-width:680px){#tk-triple>div{border-radius:0!important;border-left:0!important;border-right:0!important}#tk-triple #tk-tp-conv-hdr{padding-inline:10px}#tk-triple #tk-tp-conv-body{padding:12px 10px}#tk-triple #tk-tp-conv-subj{text-align:left}}
@media(prefers-reduced-motion:reduce){#tk-app.hy-tickets-v16::before,#tk-app.hy-tickets-v16 *,#tk-app.hy-tickets-v16 *::before,#tk-app.hy-tickets-v16 *::after,#tk-triple,#tk-triple *,#tk-triple *::before,#tk-triple *::after{scroll-behavior:auto!important;animation:none!important;transition-duration:.001ms!important}}
@media(forced-colors:active){#tk-app.hy-tickets-v16 :is(button,a,input,select,textarea,[contenteditable="true"]):focus-visible,#tk-triple :is(button,a,input,select,textarea,[contenteditable="true"]):focus-visible{outline:2px solid Highlight!important}#tk-app.hy-tickets-v16 .tk-logo-word{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}#tk-app.hy-tickets-v16 #tk-list>.tk-ticket,#tk-triple>div{border:1px solid CanvasText}}

/* V16 CHROMA SYSTEM / BeautifulUI-inspired native Records Table + Filter Table + Context Cards.
   Real CSS animation for active state, not static borders; scoped to HyTickets only. */
@property --tk-hue {syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes tk-v16-spectrum{to{--tk-hue:360deg}}
@keyframes tk-v16-breathe{0%,100%{box-shadow:0 0 0 1px rgba(53,234,255,.13),0 0 10px rgba(53,234,255,.12),0 0 16px rgba(166,87,255,.05)}50%{box-shadow:0 0 0 1px rgba(53,234,255,.44),0 0 19px rgba(53,234,255,.38),0 0 34px rgba(166,87,255,.19)}}
@keyframes tk-v16-rise{from{opacity:.35;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
#tk-app.hy-tickets-v16 :is(.tk-sb-item.active,#tk-cat-chips .tk-chip.active,.tk-qpill.active,.tk-density-btn.active,.tk-store-toggle[aria-expanded="true"],.tk-nav-views-btn[aria-expanded="true"],#tk-list>.tk-ticket.active),
#tk-triple :is(.tkm-card.active,.tk-exp-act.primary,.tk-prim-act){
  position:relative!important;
  border:1px solid transparent!important;
  background:linear-gradient(120deg,rgba(21,35,52,.97),rgba(12,17,35,.97)) padding-box,
    conic-gradient(from var(--tk-hue),#35eaff,#438fff,#a657ff,#ff3fc8,#35eaff) border-box!important;
  animation:tk-v16-spectrum 7s linear infinite,tk-v16-breathe 3.6s ease-in-out infinite!important;
  color:#e4fbff;
  isolation:isolate;
}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket.active,
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket.expanded{border-radius:14px!important}
#tk-app.hy-tickets-v16 :is(.tk-sb-item.active,#tk-cat-chips .tk-chip.active,.tk-qpill.active):hover,
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket.active:hover{filter:brightness(1.12)}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket.unread{border-left:3px solid #a657ff;box-shadow:inset 3px 0 12px rgba(166,87,255,.1)}
#tk-app.hy-tickets-v16 :is(.tk-tb-btn,.tk-nav-icon,.tk-exp-act,.tk-prim-act,.tk-density-btn,.tk-store-toggle):focus-visible,
#tk-triple :is(button,a,select,input):focus-visible{
  outline:2px solid #35eaff!important;outline-offset:3px;
  box-shadow:0 0 0 5px rgba(53,234,255,.12),0 0 25px rgba(166,87,255,.26)!important;
}
#tk-app.hy-tickets-v16 .tk-nav-views-btn,
#tk-app.hy-tickets-v16 #tk-search,
#tk-app.hy-tickets-v16 .tk-store-toggle{
  background:linear-gradient(145deg,rgba(23,38,55,.82),rgba(9,15,27,.9));
  border:1px solid rgba(118,171,214,.26);
  border-radius:12px;
  min-height:37px;
  box-shadow:inset 0 1px rgba(255,255,255,.055);
}
#tk-app.hy-tickets-v16 .tk-nav-search-wrap:focus-within{filter:drop-shadow(0 0 15px rgba(53,234,255,.26))}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket{
  border-radius:14px;
  background:linear-gradient(125deg,rgba(14,23,37,.97),rgba(7,11,20,.98));
  border-color:rgba(102,155,203,.21);
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 8px 25px rgba(0,0,0,.21);
}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{padding:16px 18px!important;column-gap:7px;min-height:72px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-card-exp.open{padding:18px 20px!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-subj{font-size:13.5px;font-weight:650;letter-spacing:-.015em}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-main{padding-inline:9px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-icon-col{border-radius:9px}
#tk-app.hy-tickets-v16 .tk-sb-item,#tk-app.hy-tickets-v16 #tk-cat-chips .tk-chip{border-radius:12px!important;padding:11px 13px!important;margin-block:3px!important}
#tk-app.hy-tickets-v16 :is(.tk-an-card,.tk-context,.tk-ent,.tk-exp-email,.tk-log-row){
  border-radius:14px;border:1px solid rgba(102,155,203,.18);
  background:linear-gradient(140deg,rgba(16,27,43,.92),rgba(9,14,25,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 8px 25px rgba(0,0,0,.12);
}
#tk-app.hy-tickets-v16 :is(.tk-tb-btn,.tk-exp-act,.tk-link-btn,.tk-prim-act):hover{
  transform:translateY(-2px);border-color:rgba(53,234,255,.51);box-shadow:0 0 20px rgba(53,234,255,.20),0 8px 20px rgba(0,0,0,.24)
}
/* BeautifulUI-style context accordion: grouped cards, not loose label/value text. */
#tk-triple #tk-tp-props{padding:0 12px 18px;background:linear-gradient(160deg,#0b1220,#080b13)}
#tk-triple #tk-tp-props-hdr{margin:0 -12px 12px;padding:19px 20px;background:linear-gradient(110deg,#101c2d,#0a101c);border-bottom:1px solid rgba(53,234,255,.24);letter-spacing:.025em}
#tk-triple #tk-tp-props-body{display:flex;flex-direction:column;gap:12px;min-width:0}
#tk-triple .tkp-sec{border:1px solid rgba(123,151,207,.22);border-radius:14px;overflow:hidden;background:linear-gradient(145deg,rgba(21,31,50,.88),rgba(10,16,29,.97));box-shadow:inset 0 1px rgba(255,255,255,.055),0 10px 25px rgba(0,0,0,.15)}
#tk-triple .tkp-sec.open{border:1px solid transparent;background:linear-gradient(145deg,#111e32,#0a1222) padding-box,conic-gradient(from var(--tk-hue),#35eaff,#438fff,#a657ff,#ff3fc8,#35eaff) border-box;animation:tk-v16-spectrum 8s linear infinite,tk-v16-breathe 4s ease-in-out infinite}
#tk-triple .tkp-sec-hdr{padding:15px 16px;min-height:48px;font-size:12.5px;font-weight:750;letter-spacing:.01em;color:#e7f5ff;border-bottom:1px solid transparent;gap:12px}
#tk-triple .tkp-sec.open .tkp-sec-hdr{border-bottom-color:rgba(120,160,222,.17);background:rgba(53,234,255,.05)}
#tk-triple .tkp-sec-hdr:hover{background:rgba(53,234,255,.10)}
#tk-triple .tkp-sec-body{padding:12px 14px 15px;animation:tk-v16-rise .24s ease}
#tk-triple .tkp-row{display:grid;grid-template-columns:minmax(70px,.44fr) minmax(0,1fr);gap:12px;align-items:center;padding:11px 12px;margin:4px 0;border:1px solid rgba(107,143,192,.12);border-radius:10px;background:rgba(7,15,27,.63);min-height:42px}
#tk-triple .tkp-row:last-child{border-bottom:1px solid rgba(107,143,192,.12)}
#tk-triple .tkp-lbl{min-width:0;padding:0;font-size:10px;line-height:1.4;color:#91a9c3;letter-spacing:.07em}
#tk-triple .tkp-val{min-width:0;font-size:12px;line-height:1.45;font-weight:650;text-align:right;color:#ecf7ff;overflow-wrap:anywhere;word-break:normal}
#tk-triple .tkp-contact-name{font-size:15px;letter-spacing:-.02em;margin:0 0 9px}
#tk-triple .tkp-contact-email{font-size:12px;gap:9px;min-height:34px;border-radius:9px;padding:7px 10px;background:rgba(10,25,40,.67);overflow-wrap:anywhere}
#tk-triple .tkp-chev{flex-shrink:0;color:#6ddffa}
#tk-triple #tk-tp-conv{background:radial-gradient(ellipse at 60% -20%,rgba(70,112,240,.07),transparent 65%),#05080f}
#tk-triple #tk-tp-conv-hdr{background:linear-gradient(100deg,rgba(13,24,40,.98),rgba(9,14,25,.98));border-bottom:1px solid rgba(53,234,255,.21)}
#tk-triple :is(.tk-cv-msg,.tkm-card){border-radius:13px;box-shadow:0 6px 18px rgba(0,0,0,.13)}
@media(max-width:900px){#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{padding:12px 10px!important}#tk-triple #tk-tp-props{padding-inline:8px}#tk-triple .tkp-row{grid-template-columns:minmax(65px,.42fr) minmax(0,1fr);gap:7px}}
@media(max-width:480px){#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{padding:12px 9px!important}#tk-triple .tkp-row{padding:9px}}
@media(prefers-reduced-motion:reduce){#tk-app.hy-tickets-v16 :is(.tk-sb-item.active,.tk-chip.active,.tk-qpill.active,.tk-ticket.active,.tk-ticket.expanded),#tk-triple :is(.tkp-sec.open,.tkm-card.active,.tk-exp-act.primary,.tk-prim-act){animation:none!important}}
@media(forced-colors:active){#tk-triple .tkp-sec.open,#tk-app.hy-tickets-v16 :is(.tk-sb-item.active,.tk-chip.active,.tk-ticket.active){border:2px solid Highlight!important;animation:none!important}}
/* hyTickets V16.1 — BeautifulUI-inspired live records/table, filter pills, approval cards, breathing chroma */
@property --tk-ring-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes tk-breathe{0%,100%{opacity:.55;filter:drop-shadow(0 0 5px rgba(53,234,255,.18))}50%{opacity:1;filter:drop-shadow(0 0 15px rgba(156,108,255,.45))}}
@keyframes tk-ring-turn{to{--tk-ring-angle:360deg}}
@keyframes tk-card-rise{from{opacity:.65;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
#tk-app.hy-tickets-v16{--tk-rim:conic-gradient(from var(--tk-ring-angle),#35eaff,#4b84ff,#b05cff,#ff4ed1,#35eaff)}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket{isolation:isolate;position:relative;border:1px solid rgba(120,153,190,.20);border-radius:16px!important;background:linear-gradient(125deg,rgba(17,27,42,.94),rgba(7,12,22,.95));margin:2px 0;box-shadow:inset 0 1px rgba(255,255,255,.045),0 12px 30px rgba(0,0,0,.16);animation:tk-card-rise .24s ease both}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;background:var(--tk-rim);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .22s ease}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket:is(:hover,.active,.is-selected)::after{opacity:1;animation:tk-ring-turn 7s linear infinite,tk-breathe 3.6s ease-in-out infinite}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket:is(.active,.expanded){border-left:1px solid rgba(120,153,190,.2);background:linear-gradient(115deg,rgba(32,40,70,.8),rgba(11,20,35,.97))}
/* Highlight badges do not imply selection; category tint remains. */
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{gap:10px;align-items:center;padding:17px 22px;min-height:88px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-main{padding:0 8px;gap:7px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-subj{font-size:13.5px;font-weight:680;line-height:1.4;letter-spacing:-.012em}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-sub{gap:7px;max-height:32px;align-items:center}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-cat-col{display:flex;align-items:center;gap:5px;justify-content:center;width:108px;padding:0}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-cat-col>span{border:1px solid color-mix(in srgb,var(--cat) 35%,transparent);padding:7px 11px!important;border-radius:10px!important;font-size:11px!important;box-shadow:inset 0 1px rgba(255,255,255,.06)}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-pri-col{width:84px;min-height:30px;justify-content:center;gap:7px;font-weight:650}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-status-col{display:flex;align-items:center;justify-content:center;width:112px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-status-btn{min-height:34px;width:100%;border:1px solid rgba(88,223,255,.19);border-radius:10px;justify-content:center}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-icon-col{min-width:34px;width:34px;align-self:center;height:34px!important;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--cat) 32%,transparent);border-radius:11px;background:color-mix(in srgb,var(--cat) 10%,transparent)}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-check{width:22px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-id{width:88px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-cust{width:136px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof{padding:0 22px 15px 86px;gap:9px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof:has(>*){margin-top:-4px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof :is(button,a){min-height:34px;padding:7px 12px!important;border-radius:10px!important;display:inline-flex;align-items:center;justify-content:center;gap:6px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof :is(.tk-pay-btn,.tk-prim-act){border:1px solid rgba(53,234,255,.65)!important;background:linear-gradient(100deg,rgba(53,234,255,.18),rgba(166,87,255,.14))!important;box-shadow:0 0 21px rgba(53,234,255,.13);animation:tk-breathe 3.2s ease-in-out infinite}
#tk-app.hy-tickets-v16 #tk-sidebar :is(.tk-sb-item.active,#tk-cat-chips .tk-chip.active){position:relative;isolation:isolate;overflow:visible;border:1px solid rgba(53,234,255,.3);border-radius:11px;background:linear-gradient(110deg,rgba(53,234,255,.13),rgba(119,80,255,.1))!important;box-shadow:inset 0 1px rgba(255,255,255,.07),0 0 24px rgba(53,234,255,.09);animation:tk-breathe 4.3s ease-in-out infinite}
#tk-app.hy-tickets-v16 #tk-sidebar :is(.tk-sb-item.active,#tk-cat-chips .tk-chip.active)::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1.5px;background:var(--tk-rim);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:tk-ring-turn 8s linear infinite}
#tk-app.hy-tickets-v16 :is(.tk-nav-views-btn,.tk-store-toggle,.tk-nav-search-wrap,.tk-density-btn.active,.tk-qpill.active){border-radius:12px;box-shadow:inset 0 1px rgba(255,255,255,.065),0 4px 18px rgba(0,0,0,.15)}
#tk-app.hy-tickets-v16 :is(.tk-nav-views-btn,.tk-store-toggle):focus-within{outline:1px solid #35eaff;box-shadow:0 0 0 3px rgba(53,234,255,.09),0 0 26px rgba(53,234,255,.19)}
#tk-triple.open{box-shadow:0 0 80px rgba(35,100,225,.12)}
#tk-triple.open #tk-tp-conv{position:relative;box-shadow:0 24px 75px rgba(0,0,0,.5),0 0 35px rgba(66,105,255,.09)}
#tk-triple .tkp-sec{margin:10px 12px;border:1px solid rgba(130,155,204,.19);background:linear-gradient(130deg,rgba(20,32,53,.76),rgba(8,14,26,.92));border-radius:13px;overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.035)}
#tk-triple .tkp-sec.open{border-color:rgba(53,234,255,.38);box-shadow:0 0 20px rgba(53,234,255,.075)}
#tk-triple .tkp-sec-hdr{padding:14px 15px;min-height:44px}
#tk-triple .tkp-sec-body{padding:10px 14px 15px}
#tk-triple .tkp-row{align-items:center;gap:10px;min-height:36px;padding:9px 0}
#tk-triple .tkp-lbl{min-width:84px}
#tk-triple .tkp-val{line-height:1.45}
@media(max-width:1200px){#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-cat-col,#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-pri-col{display:none}}
@media(max-width:900px){#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{padding:13px 12px;min-height:72px;gap:6px}#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof{padding:0 12px 13px 58px}}
@media(max-width:480px){#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{padding:11px 8px;gap:4px}#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-subj{font-size:12.5px}#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof{padding:0 9px 12px 10px}#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-icon-col{min-width:28px;width:28px;height:28px!important}}
@media(prefers-reduced-motion:reduce){#tk-app.hy-tickets-v16 #tk-list>.tk-ticket,#tk-app.hy-tickets-v16 #tk-list>.tk-ticket::after,#tk-app.hy-tickets-v16 #tk-sidebar .tk-sb-item.active,#tk-app.hy-tickets-v16 #tk-sidebar #tk-cat-chips .tk-chip.active,#tk-app.hy-tickets-v16 #tk-sidebar :is(.tk-sb-item.active,#tk-cat-chips .tk-chip.active)::after,#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof :is(.tk-pay-btn,.tk-prim-act){animation:none!important;transition:none!important}}

/* hyTickets V16.2 — category-colored Records Table; shared grid coordinates with header */
#tk-app.hy-tickets-v16 #tk-table-hdr,
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{
  display:grid!important;
  grid-template-columns:24px 42px minmax(180px,1fr) 85px 130px 132px 78px 112px 64px 28px;
  column-gap:8px!important;align-items:center!important;
}
#tk-app.hy-tickets-v16 #tk-table-hdr{padding:10px 18px!important;min-height:39px}
#tk-app.hy-tickets-v16 #tk-table-hdr>.tk-th{width:auto!important;min-width:0;text-align:center}
#tk-app.hy-tickets-v16 #tk-table-hdr>.tk-th-subj{text-align:left}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{padding:16px 18px!important;min-height:82px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact>*{width:auto!important;min-width:0;max-width:100%;align-self:center!important;box-sizing:border-box}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-main{min-width:0;cursor:pointer}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket :is(.tkt-id,.tkt-cust,.tkt-pri-col,.tkt-time,.tkt-status-col,.tkt-cat-col){display:flex;justify-content:center;align-items:center;min-height:38px;padding:5px 6px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-id{font-variant-numeric:tabular-nums}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-cust{overflow:hidden;text-overflow:ellipsis}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-icon-col{width:40px!important;height:40px!important;min-width:40px;border-radius:12px;background:color-mix(in srgb,var(--cat) 17%,#0b1525);border:1px solid color-mix(in srgb,var(--cat) 49%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--cat) 15%,transparent);color:var(--cat)!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-icon-col iconify-icon{width:23px!important;height:23px!important;font-size:23px!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-cat-col{cursor:pointer;justify-content:stretch!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-cat-chip{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:39px;padding:7px 8px;border:1px solid color-mix(in srgb,var(--cat) 50%,transparent);border-radius:11px;background:color-mix(in srgb,var(--cat) 14%,#0a1424);color:var(--cat);font-size:11px;font-weight:750;white-space:nowrap;box-shadow:inset 0 1px rgba(255,255,255,.06)}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-cat-chip iconify-icon:first-child{font-size:20px;width:20px;height:20px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-cat-chip iconify-icon:last-child{margin-left:auto}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-pri-col{gap:6px;font-weight:650}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-status-btn{width:100%;min-height:36px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket{background:linear-gradient(100deg,color-mix(in srgb,var(--cat) 13%,#091323),color-mix(in srgb,var(--cat) 3%,#070c16) 60%,#070c14)!important;border-color:color-mix(in srgb,var(--cat) 36%,#25334b)!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 5px 5px 0;background:var(--cat);box-shadow:0 0 16px var(--cat);opacity:.72}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket:is(.active,.is-selected)::after{opacity:1;animation:tk-ring-turn 8s linear infinite,tk-breathe 3.8s ease-in-out infinite}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof{padding-left:82px}
@media(max-width:1450px){
 #tk-app.hy-tickets-v16 #tk-table-hdr,#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{grid-template-columns:24px 42px minmax(120px,1fr) 80px 112px 124px 72px 103px 52px 24px;column-gap:5px!important}
}
@media(max-width:1199px){
 #tk-app.hy-tickets-v16 #tk-table-hdr,#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{grid-template-columns:24px 40px minmax(100px,1fr) 76px 124px 106px 54px;column-gap:7px!important}
 #tk-app.hy-tickets-v16 #tk-table-hdr :is(.tk-th-req,.tk-th-pri,.tk-th-upd){display:none!important}
 #tk-app.hy-tickets-v16 #tk-list>.tk-ticket :is(.tkt-cust,.tkt-pri-col,.tkt-time){display:none!important}
}
@media(max-width:900px){
 #tk-app.hy-tickets-v16 #tk-table-hdr{display:none!important}
 #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{display:flex!important;gap:6px!important;padding:12px 10px!important}
 #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-cat-col{display:none!important}
 #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-icon-col{width:36px!important;height:36px!important;min-width:36px}
 #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-status-col{width:94px!important;flex-shrink:0}
}
@media(max-width:480px){
 #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-icon-col{width:31px!important;height:31px!important;min-width:31px}
 #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-icon-col iconify-icon{width:19px!important;height:19px!important}
}
@media(prefers-reduced-motion:reduce){#tk-app.hy-tickets-v16 #tk-list>.tk-ticket::after{animation:none!important}}

/* V16.4 – unmistakable chroma selection, visible at normal zoom */
@keyframes tk-v16-halo-breathe{0%,100%{opacity:.64;filter:drop-shadow(0 0 9px rgba(53,234,255,.54)) drop-shadow(0 0 14px rgba(166,87,255,.3))}50%{opacity:1;filter:drop-shadow(0 0 16px rgba(53,234,255,.72)) drop-shadow(0 0 24px rgba(166,87,255,.57))}}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket:is(.active,.is-selected)::after,
#tk-app.hy-tickets-v16 #tk-sidebar :is(.tk-sb-item.active,#tk-cat-chips .tk-chip.active)::after{
padding:3px!important;opacity:1!important;animation:tk-ring-turn 8s linear infinite,tk-v16-halo-breathe 3.4s ease-in-out infinite!important;
}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket:is(.active,.is-selected){box-shadow:0 0 0 2px rgba(53,234,255,.36),0 0 35px rgba(53,234,255,.24),0 0 65px rgba(166,87,255,.18)!important}
#tk-app.hy-tickets-v16 #tk-sidebar :is(.tk-sb-item.active,#tk-cat-chips .tk-chip.active){box-shadow:0 0 0 2px rgba(53,234,255,.32),0 0 25px rgba(53,234,255,.25),0 0 48px rgba(166,87,255,.19)!important}
#tk-app.hy-tickets-v16 .tk-match-candidates{flex-basis:100%;width:100%;padding:12px;margin:8px 0;border:1px solid rgba(53,234,255,.34);border-radius:12px;background:rgba(9,21,38,.87)}
#tk-app.hy-tickets-v16 .tk-match-title{color:#77eaff;font-size:11px;font-weight:800;letter-spacing:.04em;margin-bottom:8px}
#tk-app.hy-tickets-v16 .tk-match-candidate{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 10px;margin-top:5px;border-radius:9px;background:rgba(58,104,171,.12);font-size:11px;color:#d5e7ff}
#tk-app.hy-tickets-v16 .tk-match-candidate strong{color:#8cf6dd;white-space:nowrap}
@media(prefers-reduced-motion:reduce){#tk-app.hy-tickets-v16 #tk-list>.tk-ticket::after,#tk-app.hy-tickets-v16 #tk-sidebar :is(.tk-sb-item.active,#tk-cat-chips .tk-chip.active)::after{animation:none!important}}

/* V16.5 theme selector and daylight material surfaces */
#tk-app.hy-tickets-v16 .tk-theme-toggle{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 12px;min-width:78px;border:1px solid var(--brd);border-radius:12px;color:var(--txt);background:var(--panel);font-size:12px;font-weight:720;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s}
#tk-app.hy-tickets-v16 .tk-theme-toggle:hover{transform:translateY(-1px);box-shadow:0 0 22px rgba(53,234,255,.22)}
[data-mode="light"] body{background:linear-gradient(145deg,#f7fbff,#e8f0ff 45%,#fdf7ff)!important;color:#10203d}
[data-mode="light"] #tk-app.hy-tickets-v16{color:#172844;--bg-deep:#edf4ff;--panel:#ffffff;--txt:#182943;--txt2:#405b7b;--muted:#526a88;--brd:rgba(48,96,146,.19)}
[data-mode="light"] #tk-app.hy-tickets-v16 #tk-nav,[data-mode="light"] #tk-app.hy-tickets-v16 #tk-sidebar{background:rgba(247,250,255,.97)!important;border-color:rgba(45,100,161,.20)!important}
[data-mode="light"] #tk-app.hy-tickets-v16 :is(.tk-sb-item,.tk-th,.tk-nav-icon,.tk-qpill,.tk-density-btn,.tk-store-toggle){color:#1a3658!important}
[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket{background:linear-gradient(105deg,color-mix(in srgb,var(--cat) 15%,#ffffff),#f8fbff 67%,#ffffff)!important;border-color:color-mix(in srgb,var(--cat) 36%,#b6cce2)!important;color:#183453!important;box-shadow:0 8px 28px rgba(48,90,142,.09)!important}
[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket :is(.tkt-subj,.tkt-main,.tkt-cust,.tkt-id){color:#152944!important}
[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-cat-chip{color:color-mix(in srgb,var(--cat) 82%,#151b30)!important;background:color-mix(in srgb,var(--cat) 11%,#ffffff)!important}
[data-mode="light"] #tk-app.hy-tickets-v16 #tk-table-hdr{background:#e9f2ff!important;color:#395572!important;border-color:rgba(48,96,146,.2)!important}
[data-mode="light"] #tk-app.hy-tickets-v16 :is(.tk-nav-search-wrap,.tk-nav-views-btn,.tk-store-toggle,.tk-theme-toggle,#tk-search){background:#ffffff!important;color:#203a61!important}
[data-mode="light"] #tk-triple :is(#tk-tp-props,#tk-tp-conv,.tkp-sec,.tkp-sec-body,.tkp-row){background:#f7faff!important;color:#172947!important;border-color:rgba(49,98,154,.2)!important}
[data-mode="light"] #tk-triple :is(.tkp-sec-hdr,.tkp-lbl,.tkp-val){color:#244365!important}
[data-mode="light"] #tk-app.hy-tickets-v16 #tk-sidebar :is(.tk-sb-item.active,#tk-cat-chips .tk-chip.active){color:#11477c!important;background:linear-gradient(120deg,rgba(53,234,255,.14),rgba(166,87,255,.1))!important}
@media(max-width:650px){#tk-app.hy-tickets-v16 .tk-theme-toggle{min-width:38px;padding:8px}#tk-theme-label{display:none}}
/* V16.6 targeted light-mode readability and stable hover/selection */
html[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket:is(:hover,:focus-within,.active,.expanded),
html[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket[data-priority="high"],
html[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket[data-priority="urgent"]{
  color:#17304c!important;
  background:linear-gradient(110deg,color-mix(in srgb,var(--cat) 19%,#fff),#f5faff 55%,#fff)!important;
  border-color:color-mix(in srgb,var(--cat) 48%,#9cbed7)!important;
  filter:none!important;
  box-shadow:0 0 0 1px rgba(51,113,176,.2),0 9px 26px rgba(36,82,137,.12)!important;
}
html[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket :is(.tkt-subj,.tkt-main,.tkt-cust,.tkt-id,.tkt-pri-col,.tkt-time,.tkt-sub,.tk-row-proof){color:#1c3452!important}
html[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-match-candidates{background:#f0f8ff!important;color:#234365!important}
html[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-match-title{color:#17658a!important}
html[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-match-candidate{background:#e3f1ff!important;color:#24415f!important}
html[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-match-candidate strong{color:#086b5b!important}
html[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof :is(button,a){color:#126080!important;background:#dff5fe!important;border:1px solid #85cbe5!important;opacity:1!important}
html[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-cat-chip{color:color-mix(in srgb,var(--cat) 76%,#102b43)!important;background:color-mix(in srgb,var(--cat) 13%,#fff)!important}
html[data-mode="light"] #tk-triple{background:rgba(16,29,49,.65)!important}
html[data-mode="light"] #tk-triple :is(#tk-tp-list,#tk-tp-props,#tk-tp-conv){background:#f5f9ff!important;color:#1b3455!important}
html[data-mode="light"] #tk-triple :is(#tk-tp-list-hdr,#tk-tp-props-hdr,#tk-tp-conv-hdr,#tk-tp-conv-meta){background:#e7f1fc!important;border-color:#c6d9ec!important;color:#183551!important}
html[data-mode="light"] #tk-triple :is(#tk-tp-list-title,#tk-tp-props-hdr,#tk-tp-conv-subj,#tk-tp-conv-meta,.tkm-subj,.tkm-meta2,.tkm-ts,.tkm-r5){color:#1b3453!important}
html[data-mode="light"] #tk-triple .tkm-card{background:#fff!important;color:#1b3453!important;border-bottom:1px solid #d7e3f2!important;animation:none!important;filter:none!important}
html[data-mode="light"] #tk-triple .tkm-card:is(:hover,.active,:focus-within){background:#e6f3ff!important;color:#163557!important;border-left:4px solid #1685ce!important;box-shadow:0 0 0 1px #91c7f0,0 7px 20px rgba(30,91,147,.13)!important}
html[data-mode="light"] #tk-triple .tkm-card:is(:hover,.active,:focus-within) :is(.tkm-subj,.tkm-meta2,.tkm-ts,.tkm-r5){color:#183956!important}
html[data-mode="light"] #tk-triple .tkm-card.active{background-image:none!important;border-top:1px solid #9dc9ec!important;border-right:1px solid #9dc9ec!important;border-bottom:1px solid #9dc9ec!important}
html[data-mode="light"] #tk-triple .tkp-sec{background:#fff!important;color:#1e3958!important;border:1px solid #cedeed!important;animation:none!important}
html[data-mode="light"] #tk-triple .tkp-sec.open{background:#f5faff!important;border-color:#89c9eb!important;box-shadow:0 4px 19px rgba(38,99,156,.10)!important}
html[data-mode="light"] #tk-triple .tkp-sec-hdr{background:#f0f7ff!important;color:#244467!important}
html[data-mode="light"] #tk-triple .tkp-sec-hdr:hover{background:#deefff!important;color:#163955!important}
html[data-mode="light"] #tk-triple :is(.tkp-sec-body,.tkp-row){background:#fff!important;color:#203c5b!important}
html[data-mode="light"] #tk-triple :is(.tkp-contact-email,.tkp-contact-name,.tkp-lbl,.tkp-val){background:transparent!important;color:#284563!important}
html[data-mode="light"] #tk-triple #tk-tp-conv-body{background:#fff!important;color:#162c46!important}
html[data-mode="light"] #tk-triple #tk-tp-conv-body :is(.tk-cv-msg,.tk-msg,.tk-msg-bubble){color:#142d4a!important;background:#fff!important}
html[data-mode="light"] #tk-triple :is(#tk-tp-reply-footer,#tk-tp-reply-editor,#tk-tp-email-compose){background:#fff!important;color:#18314e!important}
html[data-mode="light"] #tk-triple :is(button,input,select,textarea,[contenteditable="true"]){color:#163957}
html[data-mode="light"] #tk-triple #tk-tp-conv-hdr :is(button,iconify-icon){color:#315e89!important}
html[data-mode="light"] #tk-triple .tkm-card.active::before{display:none!important}
@media(prefers-reduced-motion:reduce){html[data-mode="light"] #tk-triple .tkm-card{transition:none!important}}

/* V16.7: Selection is a true UI state, not a category/highlight/priority signal. */
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket.tk-ticket::after{
  opacity:0!important;padding:0!important;animation:none!important;
  transition:opacity .2s ease!important;filter:none!important;
  pointer-events:none!important;
}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket.tk-ticket:hover:not(.active):not(.is-selected)::after{
  opacity:.55!important;padding:2px!important;
  animation:tk-ring-turn 9s linear infinite!important;
  filter:drop-shadow(0 0 6px rgba(53,234,255,.24))!important;
}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket.tk-ticket:is(.active,.is-selected)::after{
  opacity:1!important;padding:5px!important;
  animation:tk-ring-turn 7s linear infinite,tk-v16-halo-breathe 3.1s ease-in-out infinite!important;
  filter:drop-shadow(0 0 14px rgba(53,234,255,.50)) drop-shadow(0 0 23px rgba(166,87,255,.40))!important;
}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket.tk-ticket:is(.active,.is-selected){
  box-shadow:0 0 0 2px rgba(53,234,255,.50),0 0 24px rgba(53,234,255,.30),0 0 47px rgba(166,87,255,.20)!important;
  border-color:rgba(53,234,255,.64)!important;
}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket.tk-ticket.expanded:not(.active):not(.is-selected){
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 12px 28px rgba(0,0,0,.17)!important;
}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket.tk-ticket:is([data-priority="urgent"],[data-priority="high"]):not(.active):not(.is-selected){
  border-left:4px solid rgba(255,160,76,.68)!important;
}
html[data-mode="light"] #tk-app.hy-tickets-v16 #tk-list>.tk-ticket.tk-ticket:is(.active,.is-selected){
  background:linear-gradient(110deg,color-mix(in srgb,var(--cat) 17%,#fff),#f4fbff 60%,#fff)!important;
  color:#17304c!important;
  box-shadow:0 0 0 2px rgba(12,125,191,.38),0 0 23px rgba(53,146,220,.19),0 0 38px rgba(154,96,215,.13)!important;
}
@media(prefers-reduced-motion:reduce){
  #tk-app.hy-tickets-v16 #tk-list>.tk-ticket.tk-ticket::after{animation:none!important;transition:none!important}
}
/* V16.8 compact mobile records: card body, metadata and actions in distinct lanes. */
@media(max-width:700px){
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{
  display:grid!important;
  grid-template-columns:25px 40px minmax(0,1fr) auto!important;
  grid-template-areas:"check icon subject status" ". . identifier status" !important;
  gap:7px 8px!important;padding:14px 14px 9px!important;min-height:94px!important;align-items:center!important;
}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-check{grid-area:check;justify-self:center;align-self:center}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-icon-col{grid-area:icon;min-width:40px!important;width:40px!important;height:40px!important;align-self:start!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-main{grid-area:subject;min-width:0!important;overflow:hidden;padding:0!important;width:100%!important;align-self:start!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-subj{font-size:13.2px!important;line-height:1.4!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;display:block}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-sub{display:flex;min-width:0;gap:5px!important;flex-wrap:wrap;align-items:center;max-height:none!important;margin-top:7px}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-sub>*{max-width:100%}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-id{grid-area:identifier;justify-self:start;align-self:center;min-height:20px!important;padding:0!important;color:var(--muted);font-size:10px!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-status-col{grid-area:status;justify-self:end;align-self:start;width:86px!important;min-height:36px!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-status-btn{min-height:36px!important;width:86px!important;padding:5px!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket :is(.tkt-cust,.tkt-cat-col,.tkt-pri-col,.tkt-time,.tkt-agent-col){display:none!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof{padding:0 14px 14px 65px!important;gap:7px!important;display:flex!important;flex-wrap:wrap;align-items:center}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof :is(button,a){min-height:36px!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof .tk-match-candidates{flex-basis:100%!important;min-width:0}
}
@media(max-width:400px){
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-compact{grid-template-columns:20px 34px minmax(0,1fr) 77px!important;column-gap:6px!important;padding:12px 8px!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-icon-col{width:34px!important;height:34px!important;min-width:34px!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-status-col,#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tkt-status-btn{width:77px!important}
#tk-app.hy-tickets-v16 #tk-list>.tk-ticket .tk-row-proof{padding-left:54px!important;padding-right:9px!important}
}