/* Sixense Support — design system. Mobile-first, light/dark via tokens. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 12px; --radius-sm: 8px; --radius-xs: 6px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.16);
  --sidebar-w: 248px; --topbar-h: 56px; --tabbar-h: 60px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);

  --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #eef2f6;
  --border: #e3e8ef; --border-strong: #cbd5e1;
  --text: #0f172a; --text-2: #475569; --text-3: #7c8aa0;
  --primary: #0b3c5d; --primary-hover: #0e4d78; --primary-soft: #e6eef5; --primary-text: #0b3c5d; --on-primary: #ffffff;
  --accent: #f5a623;
  --info: #2563eb; --info-soft: #e8efff; --success: #0f9d58; --success-soft: #e3f6ec; --warning: #d97706; --warning-soft: #fff4dd; --danger: #dc2626; --danger-soft: #fdeaea;
  --neutral: #64748b; --neutral-soft: #eef2f6; --muted: #94a3b8; --muted-soft: #f1f5f9;
  --focus: 0 0 0 3px rgba(11,60,93,.25);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0b1220; --surface:#111a2b; --surface-2:#16213a; --surface-3:#1c2a45; --border:#233150; --border-strong:#31446a; --text:#e6edf7; --text-2:#aab8cf; --text-3:#7b8aa5; --primary:#5aa9e6; --primary-hover:#7dbcf0; --primary-soft:#14304a; --primary-text:#8cc4f2; --on-primary:#06131f; --info:#78a6ff; --info-soft:#182746; --success:#4ade80; --success-soft:#11301f; --warning:#fbbf24; --warning-soft:#3a2a0b; --danger:#f87171; --danger-soft:#3b1414; --neutral:#a3b1c6; --neutral-soft:#1c2a45; --muted:#7b8aa5; --muted-soft:#16213a; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5); --focus:0 0 0 3px rgba(90,169,230,.35);} }
:root[data-theme="dark"] { --bg:#0b1220; --surface:#111a2b; --surface-2:#16213a; --surface-3:#1c2a45; --border:#233150; --border-strong:#31446a; --text:#e6edf7; --text-2:#aab8cf; --text-3:#7b8aa5; --primary:#5aa9e6; --primary-hover:#7dbcf0; --primary-soft:#14304a; --primary-text:#8cc4f2; --on-primary:#06131f; --info:#78a6ff; --info-soft:#182746; --success:#4ade80; --success-soft:#11301f; --warning:#fbbf24; --warning-soft:#3a2a0b; --danger:#f87171; --danger-soft:#3b1414; --neutral:#a3b1c6; --neutral-soft:#1c2a45; --muted:#7b8aa5; --muted-soft:#16213a; --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 12px 32px rgba(0,0,0,.5); --focus:0 0 0 3px rgba(90,169,230,.35);}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;height:100%}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.5;color:var(--text);background:var(--bg);min-height:100%;-webkit-font-smoothing:antialiased}
a{color:var(--primary-text);text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
h1,h2,h3{margin:0;line-height:1.25;font-weight:650;letter-spacing:-.01em}
p{margin:0 0 .75rem}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--radius-xs)}
.ic{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.2em}
.mono{font-family:var(--mono);font-size:.92em}
.small{font-size:.85em}.text-muted{color:var(--text-3)}.text-danger{color:var(--danger)}
.mt-3{margin-top:12px}.mt-4{margin-top:20px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--surface);padding:8px 12px;z-index:100}.skip-link:focus{left:8px}
.link{font-weight:500;font-size:.9rem}
.link-btn{background:none;border:0;padding:4px 0;color:var(--primary-text);cursor:pointer;font-size:.9rem;font-weight:500}.link-btn:hover{text-decoration:underline}

/* ---------- shell ---------- */
.app-shell{min-height:100dvh}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;height:calc(var(--topbar-h) + var(--sat));padding:var(--sat) 12px 0;background:var(--surface);border-bottom:1px solid var(--border)}
.topbar-spacer{flex:1}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:700;letter-spacing:-.01em}.brand:hover{text-decoration:none}
.brand-logo{border-radius:7px}
.brand-sub{font-weight:500;color:var(--text-2)}
.topbar .brand-name{display:none}
.topbar-new span{display:none}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--text-2);cursor:pointer;position:relative}
.icon-btn:hover{background:var(--surface-3);color:var(--text)}
.icon-btn .ic{width:22px;height:22px}
.badge-dot{position:absolute;top:6px;right:6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;display:none}
.badge-dot.is-visible{display:block}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--primary-soft);color:var(--primary-text);font-weight:700;font-size:13px;letter-spacing:.02em;flex:0 0 auto}
.avatar-staff{background:var(--primary);color:var(--on-primary)}
.avatar-sm{width:32px;height:32px;font-size:12px}.avatar-xs{width:22px;height:22px;font-size:10px}
.avatar-btn{border:0;background:none;padding:4px;border-radius:50%;cursor:pointer}

.sidebar{position:fixed;inset:0 auto 0 0;width:min(84vw,var(--sidebar-w));z-index:60;background:var(--surface);border-right:1px solid var(--border);padding:calc(8px + var(--sat)) 10px calc(16px + var(--sab));display:flex;flex-direction:column;gap:2px;transform:translateX(-100%);transition:transform .22s ease;overflow-y:auto}
.sidebar.is-open{transform:none;box-shadow:var(--shadow-lg)}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 12px}
.drawer-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.5);z-index:55;backdrop-filter:blur(2px)}
.drawer-backdrop[hidden]{display:none}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--text-2);font-weight:500;min-height:44px}
.nav-item:hover{background:var(--surface-3);color:var(--text);text-decoration:none}
.nav-item.active{background:var(--primary-soft);color:var(--primary-text)}
.nav-item .ic{width:20px;height:20px}
.nav-section{padding:16px 12px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
.sidebar-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}
.sidebar-version{padding:8px 12px;font-size:12px;color:var(--text-3)}

.main{padding:16px 16px calc(var(--tabbar-h) + var(--sab) + 16px);max-width:1280px;margin:0 auto;width:100%}
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--border);padding-bottom:var(--sab);height:calc(var(--tabbar-h) + var(--sab))}
.tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:500;color:var(--text-3);min-height:var(--tabbar-h)}
.tab-item .ic{width:22px;height:22px}.tab-item.active{color:var(--primary-text)}.tab-item:hover{text-decoration:none}
.tab-item-primary .ic{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--primary);color:var(--on-primary);margin-top:-16px;box-shadow:var(--shadow)}

@media (min-width:1024px){
  .menu-btn,.tabbar,.sidebar-head .icon-btn{display:none}
  .topbar .brand{display:none}
  .topbar-new span{display:inline}
  .sidebar{transform:none;top:0;box-shadow:none}
  .main{margin-left:var(--sidebar-w);padding:24px 32px 48px;max-width:calc(1280px + var(--sidebar-w))}
  .topbar{padding-left:calc(var(--sidebar-w) + 24px)}
  .drawer-backdrop{display:none!important}
}
@media (min-width:640px){.topbar .brand-name{display:inline}.topbar-new span{display:inline}}

/* ---------- dropdown ---------- */
.dropdown{position:relative}
.dropdown-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:70}
.dropdown-menu-wide{width:min(92vw,380px)}
.dropdown.is-open .dropdown-menu{display:block}
.dropdown-header{padding:10px 12px 8px;border-bottom:1px solid var(--border);margin-bottom:6px}
.dropdown-header-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dropdown-title{font-weight:650}.dropdown-sub{font-size:12px;color:var(--text-3);margin-bottom:6px;word-break:break-all}
.dropdown-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;border-radius:8px;color:var(--text);text-align:left;cursor:pointer;min-height:42px}
.dropdown-item:hover{background:var(--surface-3);text-decoration:none}
.dropdown-form{margin:0}
.dropdown-footer{display:block;text-align:center;padding:10px;border-top:1px solid var(--border);margin-top:6px;font-weight:500;font-size:.9rem}
.dropdown-empty{padding:18px 12px;text-align:center;color:var(--text-3)}
@media (max-width:480px){.dropdown-menu{position:fixed;left:8px;right:8px;top:calc(var(--topbar-h) + var(--sat) + 4px);min-width:0;width:auto}}

/* ---------- notifications ---------- */
.notif-list{list-style:none;margin:0;padding:0;max-height:60vh;overflow:auto}
.notif-list-page{max-height:none}
.notif-item a{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px;border-radius:8px;color:var(--text)}
.notif-item a:hover{background:var(--surface-3);text-decoration:none}
.notif-item.unread a{background:var(--primary-soft)}
.notif-item.unread .notif-title{font-weight:650}
.notif-title{grid-column:1}.notif-body{grid-column:1;font-size:.88rem;color:var(--text-2)}.notif-time{grid-column:2;grid-row:1;font-size:12px;color:var(--text-3);white-space:nowrap}
.notif-list-page .notif-item + .notif-item{border-top:1px solid var(--border)}

/* ---------- page ---------- */
.page{display:flex;flex-direction:column;gap:16px}
.page-narrow{max-width:860px}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.page-title{font-size:1.5rem}
.page-sub{color:var(--text-2);margin:4px 0 0;font-size:.95rem}
.back-link{display:inline-flex;align-items:center;gap:2px;font-size:.88rem;color:var(--text-3);margin-bottom:6px}
@media (min-width:768px){.page-title{font-size:1.75rem}}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card-flush{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-head h2{font-size:1.05rem}
.grid-2{display:grid;gap:16px}
@media (min-width:900px){.grid-2{grid-template-columns:1fr 1fr}}

.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:768px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat{display:flex;flex-direction:column;gap:2px;padding:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);box-shadow:var(--shadow);min-height:100px}
.stat:hover{text-decoration:none;border-color:var(--border-strong)}
.stat-label{font-size:.8rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.05em}
.stat-value{font-size:2rem;font-weight:700;line-height:1.1;letter-spacing:-.02em}.stat-value-sm{font-size:1.4rem}
.stat-foot{font-size:.8rem;color:var(--text-3)}
.stat-warn .stat-value{color:var(--warning)}.stat-ok .stat-value{color:var(--success)}

/* ---------- chips / badges ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.5;white-space:nowrap;background:var(--neutral-soft);color:var(--neutral)}
.chip-lg{font-size:13px;padding:4px 12px}.chip-xs{font-size:11px;padding:1px 7px}
.chip .ic{width:13px;height:13px}
.chip-info{background:var(--info-soft);color:var(--info)}.chip-primary{background:var(--primary-soft);color:var(--primary-text)}
.chip-success{background:var(--success-soft);color:var(--success)}.chip-warning{background:var(--warning-soft);color:var(--warning)}
.chip-danger{background:var(--danger-soft);color:var(--danger)}.chip-neutral{background:var(--neutral-soft);color:var(--neutral)}.chip-muted{background:var(--muted-soft);color:var(--muted)}
.prio{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600}
.prio .ic{width:13px;height:13px}
.prio-muted{color:var(--muted)}.prio-neutral{color:var(--text-2)}.prio-warning{color:var(--warning)}.prio-danger{color:var(--danger)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--neutral)}
.dot-info{background:var(--info)}.dot-primary{background:var(--primary)}.dot-success{background:var(--success)}.dot-warning{background:var(--warning)}.dot-danger{background:var(--danger)}.dot-muted{background:var(--muted)}
.tag{display:inline-block;padding:1px 8px;border-radius:6px;background:var(--surface-3);color:var(--text-2);font-size:12px;font-family:var(--mono);margin:0 4px 4px 0}
.tags{display:flex;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;border:1px solid transparent;font-weight:600;font-size:.95rem;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--primary);color:var(--on-primary)}.btn-primary:hover{background:var(--primary-hover)}
.btn-secondary{background:var(--surface);border-color:var(--border-strong);color:var(--text)}.btn-secondary:hover{background:var(--surface-3)}
.btn-ghost{background:transparent;color:var(--text-2)}.btn-ghost:hover{background:var(--surface-3);color:var(--text)}
.btn-danger{background:var(--danger-soft);color:var(--danger)}.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{min-height:36px;padding:0 12px;font-size:.88rem;border-radius:8px}
.btn-lg{min-height:50px;font-size:1rem}
.btn-block{width:100%}
.btn.disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}
.btn-row form{margin:0}

/* ---------- forms ---------- */
.form{display:flex;flex-direction:column;gap:14px}
.form-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:640px){.form-grid{grid-template-columns:1fr 1fr}.field-span{grid-column:1/-1}}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.is-collapsed{display:none}
.label{font-size:.88rem;font-weight:600;color:var(--text-2)}
.label-hint{font-weight:400;color:var(--text-3)}
.field-hint{font-size:.8rem;color:var(--text-3)}
.input{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--text);font-size:16px;transition:border-color .15s,box-shadow .15s}
@media (min-width:640px){.input{font-size:15px}}
.input:focus{border-color:var(--primary);box-shadow:var(--focus);outline:none}
.input::placeholder{color:var(--text-3)}
.input-lg{min-height:50px;font-size:17px}
.input-sm{min-height:36px;padding:6px 10px;font-size:14px;border-radius:8px}
.textarea{resize:vertical;min-height:120px;line-height:1.55}
select.input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c8aa0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:34px}
select.input[multiple]{background-image:none;padding-right:12px}
.input-group{display:flex;align-items:stretch}
.input-group .input{border-radius:10px 0 0 10px;border-right:0}
.input-addon{display:inline-flex;align-items:center;padding:0 12px;border:1px solid var(--border-strong);border-radius:0 10px 10px 0;background:var(--surface-2);color:var(--text-3);cursor:pointer}
.form-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.form-inline{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px}
.form-inline .input{width:auto;flex:1 1 200px}
.inline-form{display:inline-flex;align-items:center;gap:8px;margin:0}
.check{display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--primary)}
.check-sub{font-size:.85rem;color:var(--text-3);margin-left:8px}
.check-grid{display:grid;gap:4px}
.check-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:6px 8px;border-radius:8px}.check-row:hover{background:var(--surface-2)}
.switch{display:flex;align-items:center;gap:12px;min-height:40px;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-ui{width:42px;height:24px;border-radius:12px;background:var(--border-strong);position:relative;flex:0 0 auto;transition:background .15s}
.switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch input:checked + .switch-ui{background:var(--success)}.switch input:checked + .switch-ui::after{transform:translateX(18px)}
.switch input:focus-visible + .switch-ui{box-shadow:var(--focus)}
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;padding:4px;background:var(--surface-3);border-radius:10px}
.segment{position:relative;display:block;min-height:40px}
.segment input{position:absolute;opacity:0;inset:0}
.segment span{display:flex;align-items:center;justify-content:center;height:100%;border-radius:7px;font-weight:600;font-size:.9rem;color:var(--text-2);cursor:pointer;padding:0 6px;text-align:center}
.segment input:checked + span{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.segment input:focus-visible + span{box-shadow:var(--focus)}
.segment-warning input:checked + span{color:var(--warning)}.segment-danger input:checked + span{color:var(--danger)}
@media (max-width:420px){.segmented-4{grid-auto-flow:row;grid-template-columns:1fr 1fr}}
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 14px;border:2px dashed var(--border-strong);border-radius:12px;background:var(--surface-2);cursor:pointer;text-align:center;color:var(--text-2);transition:border-color .15s,background .15s}
.dropzone:hover,.dropzone.is-over{border-color:var(--primary);background:var(--primary-soft)}
.dropzone-icon .ic{width:26px;height:26px;color:var(--text-3)}
.dropzone-compact{flex-direction:row;padding:10px 14px;justify-content:flex-start}
.dropzone-list{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:.85rem}
.dropzone-list span{background:var(--surface);border:1px solid var(--border);padding:2px 8px;border-radius:6px}
.sticky-actions{position:sticky;bottom:calc(var(--tabbar-h) + var(--sab) + 8px);background:var(--surface);padding:12px 0 0;margin-top:4px}
@media (min-width:1024px){.sticky-actions{position:static}}

/* ---------- alerts / toast ---------- */
.flash-stack{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.alert{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;border:1px solid;font-size:.93rem}
.alert-icon .ic{width:20px;height:20px}
.alert-text{flex:1}
.alert-close{background:none;border:0;padding:0;cursor:pointer;color:inherit;opacity:.7;display:inline-flex}
.alert-info{background:var(--info-soft);border-color:transparent;color:var(--info)}
.alert-success{background:var(--success-soft);border-color:transparent;color:var(--success)}
.alert-warning{background:var(--warning-soft);border-color:transparent;color:var(--warning)}
.alert-error{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.toast-root{position:fixed;left:12px;right:12px;bottom:calc(var(--tabbar-h) + var(--sab) + 12px);z-index:90;display:flex;flex-direction:column;gap:8px;pointer-events:none}
@media (min-width:1024px){.toast-root{left:auto;bottom:24px;right:24px;width:360px}}

/* ---------- tickets ---------- */
.view-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.view-tabs::-webkit-scrollbar{display:none}
.view-tab{flex:0 0 auto;padding:8px 14px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--text-2);background:var(--surface);border:1px solid var(--border);min-height:38px;display:inline-flex;align-items:center}
.view-tab:hover{text-decoration:none;background:var(--surface-3)}
.view-tab.active{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.filters{padding:12px}
.filters-row{display:flex;gap:8px;align-items:center}
.search{position:relative;flex:1;display:block}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-3);display:inline-flex}
.search .input{padding-left:38px}
.filters-more{display:none;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.filters-more.is-open{display:grid}
.filters-actions{grid-column:1/-1;display:flex;gap:8px;justify-content:flex-end}
@media (min-width:900px){.filters-more{display:grid;grid-template-columns:repeat(3,1fr)}.filters-toggle{display:none}}
@media (min-width:1200px){.filters-more{grid-template-columns:repeat(6,1fr)}.filters-actions{grid-column:auto}}
.results{position:relative;min-height:120px}
.results.htmx-request{opacity:.5}

.ticket-list{display:flex;flex-direction:column}
.ticket-row{display:flex;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);color:var(--text);transition:background .12s}
.ticket-row:last-child{border-bottom:0}
.ticket-row:hover{background:var(--surface-2);text-decoration:none}
.ticket-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ticket-row-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ticket-key{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--text-3);letter-spacing:.02em}
.ticket-key-lg{font-size:14px}
.ticket-row-title{font-weight:600;font-size:1rem;line-height:1.35;overflow-wrap:anywhere}
.ticket-row-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.83rem;color:var(--text-3)}
.meta-item{display:inline-flex;align-items:center;gap:5px}.meta-item .ic{width:14px;height:14px}
.meta-warn{color:var(--warning);font-weight:600}.meta-danger{color:var(--danger);font-weight:600}
.ticket-row-side{display:none;flex-direction:column;align-items:flex-end;gap:4px;font-size:.82rem;color:var(--text-3);white-space:nowrap}
@media (min-width:640px){.ticket-row-side{display:flex}}
.compact .ticket-row{padding:12px 4px}
.compact .ticket-row-cat{display:none}
.pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding:8px}
.pagination-info{font-size:.9rem;color:var(--text-2)}

.ticket-head{display:flex;flex-direction:column;gap:8px}
.ticket-head-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ticket-title{font-size:1.35rem;overflow-wrap:anywhere}
@media (min-width:768px){.ticket-title{font-size:1.7rem}}
.ticket-sub{color:var(--text-2);font-size:.92rem}
.ticket-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.ticket-actions form{margin:0}
.ticket-layout{display:grid;gap:16px;align-items:start}
@media (min-width:1024px){.ticket-layout{grid-template-columns:minmax(0,1fr) 320px}}
.ticket-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.ticket-side{display:flex;flex-direction:column;gap:12px}
.side-card{padding:0}
.side-title{display:flex;align-items:center;gap:8px;padding:14px 16px;font-weight:650;cursor:pointer;list-style:none;min-height:48px}
.side-title::-webkit-details-marker{display:none}
.side-title::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(-45deg);transition:transform .15s}
details[open] > .side-title::after{transform:rotate(45deg)}
.side-card > :not(summary){padding:0 16px 16px}
.dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:.92rem}
.dl dt{color:var(--text-3);font-weight:500}.dl dd{margin:0;min-width:0;overflow-wrap:anywhere}
.people{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.people li{display:flex;align-items:center;gap:8px}
.menu{position:relative}
.menu summary{list-style:none}.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;left:0;top:calc(100% + 6px);z-index:30;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-lg);padding:6px}
.menu-panel form{margin:0}
.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;background:none;border-radius:8px;text-align:left;cursor:pointer;min-height:42px;color:var(--text)}
.menu-item:hover{background:var(--surface-3)}

.comment{padding:0;overflow:hidden}
.comment-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.comment-head > div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.comment-meta{font-size:.82rem;color:var(--text-3)}
.comment .prose{padding:14px 16px}
.comment-internal{border-color:var(--warning);background:var(--warning-soft)}
.comment-internal .comment-head{background:transparent;border-bottom-color:rgba(217,119,6,.25)}
.comment-staff:not(.comment-internal){border-left:3px solid var(--primary)}
.prose{font-size:.96rem;line-height:1.6;overflow-wrap:anywhere}
.prose p{margin:0 0 .8em}.prose p:last-child{margin-bottom:0}
.prose pre{background:var(--surface-3);padding:10px 12px;border-radius:8px;overflow:auto;font-size:.85em}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--surface-3);padding:1px 5px;border-radius:4px}
.prose pre code{background:none;padding:0}
.prose table{border-collapse:collapse;width:100%;font-size:.9em;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--border);padding:6px 8px;text-align:left}
.prose blockquote{margin:0 0 .8em;padding:4px 12px;border-left:3px solid var(--border-strong);color:var(--text-2)}
.prose img{border-radius:8px}
.prose ul,.prose ol{padding-left:1.4em}
.ref-box{display:flex;gap:8px;align-items:flex-start;margin:0 16px 14px;padding:10px 12px;background:var(--surface-2);border-radius:8px;font-size:.9rem;overflow-wrap:anywhere}
.attachments{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 14px}
.attachment{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);max-width:100%;min-height:52px}
.attachment:hover{border-color:var(--border-strong);text-decoration:none}
.attachment-thumb{width:52px;height:52px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.attachment-icon{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:8px;background:var(--surface-3);color:var(--text-2)}
.attachment-name{font-size:.88rem;font-weight:500;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachment-size{font-size:.78rem;color:var(--text-3);margin-left:auto;white-space:nowrap}
.timeline{display:flex;flex-direction:column;gap:12px}
.event{display:flex;align-items:flex-start;gap:10px;padding:4px 8px;font-size:.88rem;color:var(--text-2)}
.event-icon{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:50%;background:var(--surface-3);color:var(--text-3);flex:0 0 auto}
.event-icon .ic{width:15px;height:15px}
.event-text{flex:1;padding-top:3px}
.event-time{font-size:.78rem;color:var(--text-3);white-space:nowrap;padding-top:5px}
.event-internal{opacity:.8}
.composer{scroll-margin-top:80px}
.composer-title{font-size:1.05rem;margin-bottom:4px}
.composer-tabs{display:flex;gap:4px;margin-bottom:10px}
.composer-tab{position:relative;flex:1}
.composer-tab input{position:absolute;opacity:0;inset:0}
.composer-tab span{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:8px;border:1px solid var(--border);font-weight:600;font-size:.9rem;color:var(--text-2);cursor:pointer;min-height:44px}
.composer-tab input:checked + span{background:var(--primary-soft);border-color:var(--primary);color:var(--primary-text)}
.composer-tab-internal input:checked + span{background:var(--warning-soft);border-color:var(--warning);color:var(--warning)}
.composer-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px}
.composer-actions .input{width:auto;flex:1 1 220px;max-width:320px}

/* ---------- tables ---------- */
.table{width:100%;border-collapse:collapse;font-size:.92rem}
.table th{text-align:left;padding:12px 14px;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);border-bottom:1px solid var(--border);background:var(--surface-2)}
.table td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.td-actions{text-align:right;white-space:nowrap}
.td-actions form{display:inline;margin:0}
.row-muted{opacity:.6}
.user-cell{display:inline-flex;align-items:center;gap:10px;color:var(--text)}
.user-cell span:last-child{display:flex;flex-direction:column;min-width:0}
.user-cell small{color:var(--text-3);overflow-wrap:anywhere}
@media (max-width:767px){
  .table-cards thead{display:none}
  .table-cards tr{display:block;padding:12px 14px;border-bottom:1px solid var(--border)}
  .table-cards td{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border:0;text-align:right}
  .table-cards td::before{content:attr(data-label);color:var(--text-3);font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-align:left;flex:0 0 38%}
  .table-cards td:not([data-label])::before{content:none}
  .table-cards .td-actions{justify-content:flex-end;padding-top:8px}
  .table-cards td:first-child{text-align:left}
}

/* ---------- misc components ---------- */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 16px;text-align:center;color:var(--text-2)}
.empty-state h3{font-size:1.05rem;color:var(--text)}
.empty-state-hero{padding:48px 16px}.empty-state-hero h1{font-size:1.4rem;color:var(--text)}.empty-state-hero p{max-width:520px}
.empty-icon{display:inline-flex;width:52px;height:52px;align-items:center;justify-content:center;border-radius:50%;background:var(--surface-3);color:var(--text-3)}
.empty-icon .ic{width:26px;height:26px}
.status-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.status-bars a{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:10px;color:var(--text);padding:4px 0}
.status-bars a:hover{text-decoration:none}
.bar{height:8px;border-radius:4px;background:var(--surface-3);overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:4px;background:var(--neutral);min-width:0}
.bar-info{background:var(--info)}.bar-primary{background:var(--primary)}.bar-success{background:var(--success)}.bar-warning{background:var(--warning)}.bar-danger{background:var(--danger)}.bar-muted{background:var(--muted)}
.kv-list{list-style:none;margin:0;padding:0}
.kv-list li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.kv-list li:last-child{border-bottom:0}
.action-list{display:flex;flex-direction:column;gap:6px}
.action{display:flex;align-items:center;gap:14px;padding:12px;border-radius:10px;color:var(--text);border:1px solid var(--border)}
.action:hover{background:var(--surface-2);text-decoration:none}
.action .ic{width:22px;height:22px;color:var(--primary-text)}
.action span{display:flex;flex-direction:column}.action small{color:var(--text-3)}
.audit-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.audit-list li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--border)}
.audit-list li:last-child{border-bottom:0}

/* ---------- auth ---------- */
.auth-body{background:linear-gradient(160deg,var(--primary-soft),var(--bg) 40%,var(--bg))}
.auth-wrap{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(20px + var(--sat)) 16px calc(24px + var(--sab));gap:14px}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px 22px;box-shadow:var(--shadow-lg)}
@media (min-width:480px){.auth-card{padding:34px}}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.auth-brand img{border-radius:10px}
.auth-brand-name{font-weight:750;font-size:1.05rem;letter-spacing:-.01em}
.auth-brand-sub{font-size:.85rem;color:var(--text-3)}
.auth-title{font-size:1.5rem;margin-bottom:6px}
.auth-lead{color:var(--text-2);font-size:.93rem;margin-bottom:18px}
.auth-links{margin-top:18px;text-align:center;font-size:.9rem}
.auth-foot{max-width:440px;text-align:center;font-size:.8rem;color:var(--text-3)}
.auth-card .form{gap:16px}