/* ------------------------------------------------------ self-hosted fonts --- */
/* IBM Plex (SIL OFL 1.1), served from this origin: no request leaves the site for fonts. */
@font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
    src: url("../fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
    src: url("../fonts/ibm-plex-mono-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================================
   VincentTickets - stylesheet
   Dark by default, light via [data-theme="light"].

   Principles
   - Colour is data: category colour, status colour, priority colour.
     Nothing else is tinted.
   - One structural device: a 3px category "spine" on the left edge of
     ticket rows, ticket headers and category cards.
   - Flat surfaces, one border colour, two radii (containers / controls).
   - Motion only as feedback: border and background changes, no lifts.
     Entrances are short (under 300ms) and staggered via --i; live
     updates announce themselves once, then settle into the page.
   ========================================================================= */

/* Staff workflow: familiar list tabs, with advanced controls disclosed on demand. */
.queue-views { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.queue-views__link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text-soft); border-radius: var(--radius-sm); }
.queue-views__link:hover { background: var(--surface-2); color: var(--text); }
.queue-views__link.is-active { background: var(--brand-soft); color: var(--brand); }
.queue-views__link span { font-size: 12px; font-weight: 600; }
.queue-filters { margin-top: 12px; }
.queue-filters summary, .ticket-management > summary { cursor: pointer; padding: 10px 0; font-weight: 500; }
.queue-filters[open] > summary { margin-bottom: 10px; }
.queue-total { margin: 16px 0 10px; }
.filters.queue-search > .filters__row > .searchbar { flex: 1 1 220px; }
.filters.queue-search > .filters__row > .btn { flex: 0 0 auto; }
.ticket-quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; }
.ticket-quick-actions form { margin: 0; }
.ticket-management { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 16px; }
.ticket-management > .panel { border: 0; padding: 12px 0; margin: 0; }
#ticket-reply { scroll-margin-top: 80px; }
@media (max-width: 480px) {
    .queue-views__link { flex: 1 1 40%; justify-content: space-between; }
}

:root {
    --bg:            #121418;
    --bg-soft:       #0e1013;
    --surface:       #17191f;
    --surface-2:     #1e2129;
    --surface-solid: #17191f;
    --border:        #23262e;
    --border-strong: #343945;

    --text:      #e9eaee;
    --text-soft: #a2a7b4;
    --text-dim:  #848a99;

    --brand:        #8f9cff;   /* text, rings, active states */
    --brand-strong: #5b6bf0;   /* filled buttons */
    --brand-soft:   rgba(143, 156, 255, .14);
    --on-brand:     #ffffff;

    --green:  #4cc596;
    --amber:  #e6b04f;
    --orange: #ee9560;
    --red:    #ef6f6f;
    --blue:   #6ea8ff;
    --violet: #b394ff;

    --radius:    8px;
    --radius-sm: 6px;
    --radius-lg: 12px;

    --shadow:    none;
    --shadow-lg: 0 16px 40px -16px rgba(0, 0, 0, .65);

    --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --header-h: 52px;
    color-scheme: dark;
}

[data-theme="light"] {
    --bg:            #f6f6f8;
    --bg-soft:       #ffffff;
    --surface:       #ffffff;
    --surface-2:     #f2f3f6;
    --surface-solid: #ffffff;
    --border:        #e6e7ec;
    --border-strong: #cdd0d8;

    --text:      #1b1f28;
    --text-soft: #596172;
    --text-dim:  #676e7c;

    --brand:        #4a5ad8;
    --brand-strong: #4a5ad8;
    --brand-soft:   rgba(74, 90, 216, .1);

    --green:  #1f9d6a;
    --amber:  #b07a12;
    --orange: #c9651f;
    --red:    #d24a4a;
    --blue:   #2f6fd6;
    --violet: #7a4fd6;

    --shadow:    0 1px 2px rgba(20, 24, 40, .04);
    --shadow-lg: 0 16px 40px -20px rgba(20, 24, 40, .25);
    color-scheme: light;
}

/* ------------------------------------------------------------- reset --- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0 0 .35em; line-height: 1.25; letter-spacing: -.02em; font-weight: 600; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }
p  { margin: 0 0 1em; }
a  { color: inherit; text-decoration: none; }
strong { font-weight: 600; }

code {
    font-family: var(--mono);
    font-size: .84em;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: .05em .35em;
    border-radius: 4px;
}
.ref { font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .03em; color: var(--text-soft); background: none; border: 0; padding: 0; border-radius: 0; }

.muted { color: var(--text-soft); }
.ta-right { text-align: right; }

.icon      { width: 17px; height: 17px; flex: none; }
.icon--sm  { width: 16px; height: 16px; }
.icon--xs  { width: 14px; height: 14px; }

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--brand-strong); color: var(--on-brand); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.container { width: min(1080px, 100% - 40px); margin-inline: auto; }
.main { flex: 1 0 auto; padding-bottom: 64px; animation: page-in .28s ease-out both; }
/* Starts just above zero on purpose: Chrome never promotes an element that was
   first painted at opacity 0 to an LCP candidate, so a plain `from { opacity: 0 }`
   here left the page with no LCP at all and a Lighthouse performance score of 0. */
@keyframes page-in { from { opacity: .01; } }
.is-theming, .is-theming *, .is-theming *::before, .is-theming *::after {
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease !important;
}

/* ------------------------------------------------------------ topbar --- */

.topbar {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}
.topbar__inner {
    width: min(1080px, 100% - 40px);
    margin-inline: auto;
    height: var(--header-h);
    display: flex; align-items: stretch; gap: 20px;
}

.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: -.01em; font-size: .95rem; }
.brand__mark {
    width: 24px; height: 24px; display: grid; place-items: center;
    border-radius: 6px; color: var(--on-brand); background: var(--brand-strong);
}
.brand__mark .icon { width: 14px; height: 14px; }
.brand__text { white-space: nowrap; }

.topnav { display: flex; gap: 2px; margin-left: 8px; }
.topnav__link {
    position: relative;
    display: flex; align-items: center; gap: 7px;
    padding: 0 10px; margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--text-soft); font-weight: 500; font-size: .86rem; white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.topnav__link:hover { color: var(--text); }
.topnav__link.is-active { color: var(--text); border-color: var(--brand); }
.topnav__link .icon { width: 15px; height: 15px; color: var(--text-dim); }
.topnav__link.is-active .icon { color: var(--brand); }
.topnav__link .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--brand); animation: dot-pulse 2.4s ease-in-out infinite;
}

[hidden] { display: none !important; }

.count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: var(--brand); color: #fff; font-style: normal; font-size: .68rem; font-weight: 600; line-height: 1;
}
.tab .count { margin-left: 4px; }

.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.icon-btn {
    width: 30px; height: 30px; display: grid; place-items: center;
    background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-soft); cursor: pointer; transition: border-color .15s, color .15s;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); }
.icon-btn .icon { width: 15px; height: 15px; }
.icon--moon { display: none; }
.icon--bell-off { display: none; }
[data-sound-toggle][aria-pressed="false"] .icon--bell { display: none; }
[data-sound-toggle][aria-pressed="false"] .icon--bell-off { display: block; }
[data-sound-toggle][aria-pressed="false"] { color: var(--text-dim); }
[data-sound-toggle].is-ringing .icon { animation: bell-ring .6s ease-in-out; transform-origin: 50% 15%; }
@keyframes bell-ring { 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-5deg); } }
[data-theme="light"] .icon--sun { display: none; }
[data-theme="light"] .icon--moon { display: block; }

.avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: .68rem; font-weight: 600; letter-spacing: .02em; color: #fff;
    background: hsl(var(--hue, 235) 45% 48%);
}
.avatar--sm { width: 28px; height: 28px; font-size: .66rem; }
img.avatar { object-fit: cover; background: var(--surface-2); }

.usermenu { position: relative; }
.usermenu__trigger { list-style: none; cursor: pointer; display: block; border-radius: 50%; }
.usermenu__trigger::-webkit-details-marker { display: none; }
.usermenu__panel {
    position: absolute; right: 0; top: calc(100% + 8px); min-width: 210px;
    background: var(--surface-solid); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 50;
}
.usermenu__head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; display: grid; gap: 4px; }
.usermenu__panel a,
.usermenu__panel button {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 10px; border-radius: var(--radius-sm); border: 0; background: none;
    color: var(--text-soft); font: inherit; font-size: .9rem; cursor: pointer; text-align: left;
}
.usermenu__panel .icon { width: 16px; height: 16px; }
.usermenu__panel a:hover,
.usermenu__panel button:hover { background: var(--surface-2); color: var(--text); }

.role {
    font-size: .72rem; font-weight: 600;
    padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-soft);
    width: fit-content; line-height: 1.5;
}
.role--staff { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.role--admin { color: var(--violet); border-color: color-mix(in srgb, var(--violet) 45%, transparent); }

/* ---------------------------------------------------------- presence --- */
/* Who from the team is around: the button in the top bar and the member list
   it opens. Colour is data here too - green is online, amber is away, and an
   offline member is dimmed rather than tinted. */

.presence { position: relative; }
.presence__trigger {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 9px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-soft); font-size: .8rem; line-height: 1;
    transition: border-color .15s, color .15s, background .15s;
}
.presence__trigger::-webkit-details-marker { display: none; }
.presence__trigger:hover { color: var(--text); border-color: var(--border-strong); }
.presence[open] .presence__trigger { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.presence__num { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.presence__word { color: var(--text-dim); }

.presence__dot { display: block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text-dim); }
.presence__dot--online  { background: var(--green); }
.presence__dot--away    { background: var(--amber); }
.presence__dot--offline { background: var(--text-dim); }

.presence__panel {
    position: absolute; right: 0; top: calc(100% + 8px);
    width: 272px; max-width: calc(100vw - 28px);
    background: var(--surface-solid); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; z-index: 50;
}
.presence__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 8px 10px 10px; border-bottom: 1px solid var(--border);
}
.presence__head strong { font-size: .88rem; }
.presence__head .muted { font-size: .74rem; }
/* The heading over the members half. It rides along inside the scroller and
   sticks to the top edge while that half is being read. */
.presence__head--sub {
    position: sticky; top: 0; z-index: 1;
    margin-top: 6px; padding-top: 10px;
    background: var(--surface-solid); border-top: 1px solid var(--border);
}

/* One scroller around both lists, so the two halves share the panel's height
   instead of each claiming it. */
.presence__body { max-height: min(58vh, 420px); overflow-y: auto; }
.presence__list { list-style: none; margin: 0; padding: 4px 0 0; }
.presence__group {
    display: flex; gap: 5px;
    padding: 10px 10px 4px;
    font-size: .67rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim);
}
.presence__group span::before { content: "- "; }

.presence__item { display: flex; align-items: center; gap: 9px; padding: 5px 10px; border-radius: var(--radius-sm); }
.presence__item--offline { opacity: .55; }
.presence__face { position: relative; flex: none; width: 28px; height: 28px; }
/* The status dot sits on the avatar, punched out of the panel behind it. */
.presence__face .presence__dot {
    position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px;
    border: 2px solid var(--surface-solid);
}
.presence__who { min-width: 0; display: grid; }
.presence__who strong { font-size: .84rem; font-weight: 600; }
.presence__who strong, .presence__meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.presence__meta { font-size: .71rem; color: var(--text-dim); }
.presence__item .role { margin-left: auto; flex: none; font-size: .65rem; padding: 1px 7px; }

.presence__empty, .presence__foot { margin: 0; padding: 10px; color: var(--text-dim); font-size: .76rem; }
.presence__foot { border-top: 1px solid var(--border); }

/* A dot beside a name in running text: the ticket header, the requester
   panel, a row of the queue. Same dot, no avatar to sit on. */
.presence-inline { display: inline-flex; align-items: center; gap: 6px; }
.presence-inline .presence__dot { position: static; border: 0; width: 8px; height: 8px; }

/* ----------------------------------------------------------- buttons --- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 8px 13px; border-radius: var(--radius-sm); border: 1px solid transparent;
    font: inherit; font-weight: 500; font-size: .86rem; line-height: 1.3; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    white-space: nowrap;
}
.btn .icon { width: 15px; height: 15px; }
.btn--primary { background: var(--brand-strong); color: var(--on-brand); }
.btn--primary:hover { background: color-mix(in srgb, var(--brand-strong) 86%, #fff); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text-soft); }
.btn--ghost:hover { color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn { position: relative; transition: background .15s, border-color .15s, color .15s, transform .08s; }
.btn__spinner {
    display: none; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: spin .7s linear infinite;
}
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: .55; }
.btn.is-loading .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn--sm { padding: 6px 11px; font-size: .82rem; }
.btn--xs { padding: 3px 8px; font-size: .78rem; }
.btn--block { width: 100%; }

.btn--discord { background: #5865f2; color: #fff; }
.btn--discord:hover { background: #4b57d9; }

/* -------------------------------------------------------------- home --- */

.hero { padding: 56px 0 8px; }
.hero h1 { font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); letter-spacing: -.03em; margin-bottom: .3em; }
.lede { color: var(--text-soft); font-size: 1rem; max-width: 62ch; margin-bottom: 0; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

.section { padding: 26px 0; }
.section__head { max-width: 60ch; margin-bottom: 18px; }
.section__head h2 { font-size: 1.15rem; }
.section__head p { color: var(--text-soft); margin: 0; }

.howto {
    list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--border);
    display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    counter-reset: step;
}
.howto li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.howto li::before {
    counter-increment: step; content: counter(step);
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-family: var(--mono); font-size: .78rem; font-weight: 500;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.howto h3 { font-size: .95rem; margin: 2px 0 4px; }
.howto p { color: var(--text-soft); font-size: .88rem; margin: 0; }

/* -------------------------------------------------------- categories --- */

.cat-grid {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
}
.cat-card {
    display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start;
    padding: 14px 14px 14px 17px; border-radius: var(--radius);
    background: var(--surface); border: 1px solid var(--border);
    box-shadow: inset 3px 0 0 var(--accent, var(--brand));
    transition: border-color .15s, background .15s;
}
.cat-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.cat-card__icon {
    width: 32px; height: 32px; display: grid; place-items: center; border-radius: 7px;
    background: color-mix(in srgb, var(--accent, var(--brand)) 12%, transparent);
    color: var(--accent, var(--brand));
}
.cat-card__icon .icon { width: 16px; height: 16px; }
.cat-card h3 { margin: 0 0 1px; font-size: .9rem; }
.cat-card p { color: var(--text-soft); font-size: .82rem; margin: 0; }

/* -------------------------------------------------------------- page --- */

.page { padding-top: 28px; }
.page--narrow { width: min(800px, 100% - 40px); }
.page__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.page__head h1 { margin: 0; }
.page__head p { margin: 2px 0 0; font-size: .88rem; }

.crumbs { display: flex; gap: 8px; align-items: center; color: var(--text-dim); font-size: .86rem; margin-bottom: 14px; }
.crumbs a:hover { color: var(--text); }
.crumbs strong { font-weight: 500; color: var(--text-soft); }

.card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.card__title {
    display: flex; align-items: center; gap: 8px;
    font-size: .9rem; font-weight: 600; margin: 0 0 12px;
    color: var(--text);
}
.card__title .icon { width: 15px; height: 15px; color: var(--text-dim); }

.grid-2 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); margin-bottom: 14px; }
.grid-2 > .card { display: flex; flex-direction: column; }
.grid-2 > .card > .spark { flex: 1; }

/* ------------------------------------------------------------- stats --- */

.stat-row {
    display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: 20px; background: var(--border); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.stat { padding: 12px 16px; background: var(--surface); display: grid; gap: 0; }
.stat--link { transition: background .15s; }
.stat--link:hover { background: var(--surface-2); }
.stat__value { font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--text-soft); font-size: .8rem; }

/* ------------------------------------------------------- tabs/search --- */

.toolbar { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }

.tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
.tab {
    padding: 7px 10px; margin-bottom: -1px; border-bottom: 2px solid transparent;
    font-size: .84rem; font-weight: 500; color: var(--text-soft); transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--text); border-color: var(--brand); }

.searchbar {
    display: flex; align-items: center; gap: 9px; padding: 0 12px;
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
    min-width: 240px; flex: 1; max-width: 380px; color: var(--text-dim);
    transition: border-color .15s, box-shadow .15s;
}
.searchbar input { flex: 1; background: none; border: 0; padding: 7px 0; color: var(--text); font: inherit; font-size: .86rem; min-width: 0; }
.searchbar input:focus { outline: none; }
.searchbar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.searchbar--flat { max-width: none; }

.filters { padding: 10px 12px; margin-bottom: 12px; }
.filters__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filters .searchbar { flex: 1 1 100%; }
.filters .select { flex: 1 1 130px; }
.filters .btn { flex: none; }

/* ------------------------------------------------------ ticket lists --- */

.tlist {
    display: block; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.tlist > * + * { border-top: 1px solid var(--border); }
.tlist__item { position: relative; }
.tlist__claim { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.tlist__item .trow { padding-right: 84px; }

.trow {
    display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center;
    padding: 11px 14px 11px 17px;
    box-shadow: inset 3px 0 0 var(--accent, var(--brand));
    transition: background .15s;
}
.trow:hover { background: var(--surface-2); }
.trow__icon {
    width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center;
    background: color-mix(in srgb, var(--accent, var(--brand)) 12%, transparent);
    color: var(--accent, var(--brand));
}
.trow__icon .icon { width: 15px; height: 15px; }
.trow__main { display: grid; gap: 2px; min-width: 0; }
.trow__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trow__subject { font-weight: 500; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow__meta { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; color: var(--text-dim); font-size: .78rem; }
.trow__meta span { display: inline-flex; align-items: center; gap: 4px; }
.trow__time { text-align: right; display: grid; gap: 1px; white-space: nowrap; }
.trow__ago { font-size: .8rem; color: var(--text-soft); }
.trow__date { font-size: .74rem; color: var(--text-dim); }
.tlist--compact { border: 0; border-radius: 0; background: transparent; margin: 0 -18px -18px; }
.tlist--compact > :first-child { border-top: 1px solid var(--border); }
.tlist--compact .trow { padding: 9px 18px 9px 15px; grid-template-columns: 26px 1fr auto; }
.tlist--compact .trow__icon { width: 26px; height: 26px; border-radius: 6px; }
.tlist--compact .trow__icon .icon { width: 13px; height: 13px; }
.tlist--compact .trow__subject { font-size: .88rem; }
.tlist--compact .trow__date { display: none; }

/* ------------------------------------------------------------ badges --- */

.badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .78rem; font-weight: 500; color: var(--text-soft); white-space: nowrap;
}
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); flex: none; }
.badge--open           { color: var(--text); }
.badge--open           .badge__dot { background: var(--blue); }
.badge--awaiting_staff { color: var(--text); }
.badge--awaiting_staff .badge__dot { background: var(--amber); }
.badge--awaiting_user  { color: var(--text); }
.badge--awaiting_user  .badge__dot { background: var(--violet); }
.badge--resolved       { color: var(--text-soft); }
.badge--resolved       .badge__dot { background: var(--green); }
.badge--closed         { color: var(--text-dim); }

.prio { font-size: .74rem; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.prio--low    { color: var(--text-dim);  background: var(--surface-2); }
.prio--normal { color: var(--text-soft); background: var(--surface-2); }
.prio--high   { color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.prio--urgent { color: var(--red);    background: color-mix(in srgb, var(--red) 14%, transparent); }

.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 1px 8px; border-radius: 999px; font-size: .76rem; font-weight: 500;
    color: var(--chip, var(--brand));
    background: color-mix(in srgb, var(--chip, var(--brand)) 12%, transparent);
}
.chip--sm { font-size: .78rem; padding: 0; background: none; color: var(--text-dim); }
.chip--sm::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--chip, var(--brand)); }

.tag { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; padding: 1px 7px; border-radius: 5px; }
.tag--internal { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, transparent); }
.tag--system { color: var(--text-dim); background: var(--surface-2); }

/* ------------------------------------------------------------- forms --- */

.form { display: grid; gap: 14px; }
.field { display: grid; gap: 5px; }
.field label { font-size: .84rem; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.field--tiny { max-width: 130px; }
.req { color: var(--red); }
.optional { color: var(--text-dim); font-weight: 400; font-size: .78rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="date"], input[type="datetime-local"], input[type="search"],
textarea, select {
    width: 100%; padding: 8px 11px; font: inherit; font-size: .9rem; color: var(--text);
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
input:disabled { opacity: .6; cursor: not-allowed; }
textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
input[type="color"] { padding: 3px; height: 38px; cursor: pointer; }

.select { position: relative; }
.select::after {
    content: ""; position: absolute; right: 13px; top: 50%; width: 7px; height: 7px;
    border-right: 1.5px solid var(--text-dim); border-bottom: 1.5px solid var(--text-dim);
    transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.select select { appearance: none; padding-right: 34px; cursor: pointer; }
.select--sm select { padding: 7px 30px 7px 11px; font-size: .86rem; }
.select--xs select { padding: 4px 26px 4px 9px; font-size: .8rem; }

.field-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.field__help { color: var(--text-dim); font-size: .8rem; margin: 0; }
.field__error { color: var(--red); font-size: .82rem; margin: 0; font-weight: 500; }
.field--error input, .field--error textarea, .field--error select { border-color: var(--red); }

.fieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; margin: 0; }
.fieldset legend { padding: 0 6px; font-size: .86rem; font-weight: 600; color: var(--text-soft); }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: .9rem; font-weight: 400; cursor: pointer; }
.check input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--brand-strong); flex: none; }
.check--inline { align-items: center; color: var(--text-soft); font-size: .86rem; }
.field--check label { font-weight: 400; }

.dropzone {
    display: grid; place-items: center; gap: 2px; text-align: center;
    padding: 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius);
    color: var(--text-soft); cursor: pointer; transition: border-color .15s, color .15s;
}
.dropzone:hover { border-color: var(--brand); color: var(--text); }
.dropzone > .icon { color: var(--text-dim); margin-bottom: 4px; }
.dropzone input { display: none; }
.dropzone__text { font-weight: 500; font-size: .9rem; }
.dropzone__hint { font-size: .78rem; color: var(--text-dim); }

.filelist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.filelist:empty { margin: 0; }
.filelist li {
    display: flex; align-items: center; gap: 8px; font-size: .83rem; color: var(--text-soft);
    background: var(--surface-2); border-radius: 6px; padding: 5px 10px;
}
/* The line that replaces a clip the browser was not allowed to send. Needs
   to out-specify ".filelist li" above, hence the element in front. */
.filelist li.filelist__note {
    color: var(--amber);
    background: color-mix(in srgb, var(--amber) 10%, transparent);
}

.filebtn {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
    background: transparent; font-size: .86rem; font-weight: 500; color: var(--text);
    transition: background .15s;
}
.filebtn:hover { background: var(--surface-2); }
.filebtn input { display: none; }

.form__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.inline-form { display: inline-flex; vertical-align: middle; margin-left: 6px; }

.form-head {
    display: flex; gap: 14px; align-items: center; margin-bottom: 20px;
    padding-left: 15px; box-shadow: inset 3px 0 0 var(--accent, var(--brand));
}
.form-head__icon {
    width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; flex: none;
    background: color-mix(in srgb, var(--accent, var(--brand)) 12%, transparent); color: var(--accent, var(--brand));
}
.form-head h1 { font-size: 1.3rem; margin: 0; }
.form-head p { margin: 1px 0 0; color: var(--text-soft); font-size: .9rem; }

/* -------------------------------------------------------------- auth --- */

.auth { display: grid; place-items: center; padding: 56px 0; }
.auth__card { width: min(420px, 100%); padding: 26px; }
.auth__head { margin-bottom: 20px; }
.auth__head h1 { font-size: 1.35rem; }
.auth__head p { color: var(--text-soft); font-size: .9rem; margin: 0; }
.auth__icon {
    width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; margin: 0 0 14px;
    background: var(--brand-soft); color: var(--brand);
}
.auth__icon--discord { background: rgba(88, 101, 242, .16); color: #7b86ff; }
.auth__foot { margin: 18px 0 0; color: var(--text-dim); font-size: .84rem; }

.loginsteps { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: grid; gap: 10px; }
/* The number sits out of flow rather than in a grid column: a step whose text
   carries inline markup - a server name in <strong>, a command in <code> -
   would otherwise hand each of those elements a grid cell of its own and tear
   the sentence apart. */
.loginsteps li {
    position: relative; padding-left: 32px; min-height: 22px;
    color: var(--text-soft); font-size: .86rem;
}
.loginsteps li > span:first-child {
    position: absolute; left: 0; top: 0;
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface-2); border: 1px solid var(--border);
    font-family: var(--mono); font-size: .72rem; font-weight: 500; color: var(--text);
}
/* A caption row above the numbered steps, for when the card also offers the
   in-game route and the steps below describe only the Discord one. */
.loginsteps li.loginsteps__head {
    padding-left: 0; margin-bottom: -2px; min-height: 0;
    font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--text-soft);
}
.loginsteps strong, .loginsteps code { color: var(--text); }
.loginsteps code { white-space: nowrap; }

.identity { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.identity__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.identity div { display: grid; }
.identity strong { font-size: 1rem; }
.identity span { font-size: .84rem; }

.synced { font-size: .74rem; margin-top: 2px; }

.notice { display: flex; align-items: center; gap: 14px; }
.notice p { margin: 1px 0 0; color: var(--text-soft); font-size: .88rem; }
.notice .btn { margin-left: auto; }
.notice > .icon { color: var(--text-dim); }
.notice--inline {
    align-items: flex-start; padding: 14px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2);
}
.notice--inline p { font-size: .85rem; }

/* ------------------------------------------------------ ticket detail --- */

.ticket__head {
    margin-bottom: 20px; padding-left: 15px;
    box-shadow: inset 3px 0 0 var(--accent, var(--brand));
}
.ticket__badges { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.ticket__head h1 { font-size: 1.4rem; margin: 0 0 3px; }
.ticket__head p { margin: 0; font-size: .88rem; }
.ticket__jump {
    display: none; align-items: center; gap: 5px; margin-top: 10px;
    font-size: .82rem; font-weight: 500; color: var(--brand);
}
.ticket__jump .icon { width: 13px; height: 13px; }

.ticket__layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 290px; align-items: start; }
.ticket__main { display: grid; gap: 12px; min-width: 0; }
.ticket__side { display: grid; gap: 12px; position: sticky; top: calc(var(--header-h) + 18px); }

.details__grid { display: grid; gap: 0 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0; }
.details__item { padding: 7px 0; border-top: 1px solid var(--border); }
.details__item dt { font-size: .76rem; color: var(--text-dim); font-weight: 400; margin-bottom: 1px; }
.details__item dd { margin: 0; font-size: .88rem; word-break: break-word; }
.details__item dd a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

.timeline__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.timeline__bar .card__title { margin: 0; }

.live {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .74rem; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
    color: var(--text-dim); padding: 3px 9px 3px 7px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--surface);
    transition: color .2s, border-color .2s;
}
.live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); position: relative; flex: none; }
.live--on { color: var(--green); }
.live--on .live__dot { background: var(--green); }
.live--on .live__dot::after {
    content: ""; position: absolute; inset: -3px; border-radius: 50%;
    border: 1.5px solid var(--green); animation: live-ping 1.8s ease-out infinite;
}
.live--retry { color: var(--amber); }
.live--retry .live__dot { background: var(--amber); animation: live-blink 1s ease-in-out infinite; }
.live--paused .live__dot, .live--off .live__dot { background: var(--text-dim); }
@keyframes live-ping  { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes live-blink { 50% { opacity: .3; } }

.timeline { display: grid; gap: 10px; }

/* Entrances: everything in a timeline/list rises in, staggered by --i. */
.timeline > *, .tlist > *, .cat-grid > *, .stat-row > *, .ticket__side > *, .ticket__main > .card, .howto > li, .grid-2 > .card {
    animation: rise .32s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* Slot the rating panel drops into once staff resolve or close the ticket.
   While it is empty it must not eat one of the sidebar's grid gaps. */
.ticket__side > [data-live="rating"]:empty { display: none; }
.ticket__side > [data-live="rating"] > .is-new { animation: rise-in .42s cubic-bezier(.2, .7, .2, 1) both; }

/* Entries that arrive through the live feed. */
.timeline > .is-new { animation: rise-in .42s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }
.msg.is-new .msg__body { animation: glow 1.8s ease-out both; animation-delay: calc(var(--i, 0) * 90ms); }
.msg--staff.is-new .msg__body { --glow: var(--brand); }
.msg--internal.is-new .msg__body { --glow: var(--amber); }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
/* Only the first frame is declared: the animation settles back into
   whatever box-shadow the message normally has (staff spine, note tint). */
@keyframes glow {
    0% { border-color: var(--glow, var(--brand)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--glow, var(--brand)) 22%, transparent), inset 3px 0 0 var(--glow, transparent); }
}

/* Something on the page changed underneath the reader. */
.is-updated { animation: pop .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes pop { 30% { transform: scale(1.035); } }
.is-leaving { animation: fade-out .18s ease-in forwards; }
@keyframes fade-out { to { opacity: 0; transform: translateY(6px); } }

/* Floating "new reply" pill when the reader is scrolled up. */
.newpill {
    position: fixed; left: 50%; bottom: 26px; z-index: 55;
    transform: translate(-50%, 16px); opacity: 0;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border-strong);
    background: var(--surface-solid); color: var(--text); font: inherit; font-size: .84rem; font-weight: 500;
    box-shadow: var(--shadow-lg); cursor: pointer;
    transition: transform .26s cubic-bezier(.2, .7, .2, 1), opacity .26s;
}
.newpill.is-shown { transform: translate(-50%, 0); opacity: 1; }
.newpill:hover { border-color: var(--brand); }

.msg { display: grid; grid-template-columns: 28px 1fr; gap: 10px; }

/* @mentions inside a message */
.mention {
    display: inline-block; padding: 0 5px; border-radius: 5px; font-weight: 500;
    color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent);
}

/* @mention picker under the reply box */
.mentions {
    position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 30;
    min-width: 260px; max-width: 100%; padding: 4px; border-radius: var(--radius);
    background: var(--surface-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
    display: grid; gap: 2px;
}
.mentions__item {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
    width: 100%; padding: 7px 10px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text); font: inherit; font-size: .84rem; text-align: left; cursor: pointer;
}
.mentions__item strong { font-weight: 600; color: var(--brand); }
.mentions__item span { color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mentions__item em { font-style: normal; }
.mentions__item:hover, .mentions__item.is-active { background: var(--surface-2); }
.role--group { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }

/* Inbox */
.inbox__hint { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; margin: 0; }
.inbox__hint code { font-size: .78rem; }
.inbox__row { grid-template-columns: 38px 1fr auto; box-shadow: none; }
.inbox__row.is-unread { background: color-mix(in srgb, var(--brand) 6%, transparent); box-shadow: inset 3px 0 0 var(--brand); }
.inbox__row.is-unread:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.inbox__avatar { position: relative; width: 32px; height: 32px; }
.inbox__avatar .avatar { width: 32px; height: 32px; }
.inbox__kind {
    position: absolute; right: -6px; bottom: -6px; width: 18px; height: 18px; border-radius: 50%;
    display: grid; place-items: center; background: var(--surface-solid); border: 1px solid var(--border-strong); color: var(--text-soft);
}
.inbox__kind .icon { width: 10px; height: 10px; }
.inbox__kind--mention { color: var(--brand); border-color: var(--brand); }
.inbox__kind--ticket { color: var(--green); }
.inbox__kind--assigned { color: var(--amber); }
.inbox__title { font-weight: 500; font-size: .92rem; }
.inbox__row.is-unread .inbox__title { color: var(--text); }
.inbox__detail { font-weight: 400; color: var(--text-soft); font-size: .86rem; }
.inbox__type { text-transform: uppercase; letter-spacing: .04em; font-size: .7rem; }
.msg__avatar { width: 28px; height: 28px; font-size: .62rem; }
.msg__body {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 12px 14px 12px 16px; min-width: 0;
}
.msg--staff .msg__body { box-shadow: inset 3px 0 0 var(--brand); }
/* The automatic answer: present, plainly not a person, and never mistaken
   for a staff reply - no accent bar, a quieter ground, an icon for a face. */
.msg--system .msg__body { background: var(--surface-2); border-style: dashed; }
.msg--system .msg__head strong { color: var(--text-soft); font-weight: 500; }
.msg__avatar--system {
    display: grid; place-items: center; border-radius: 50%;
    background: var(--surface-2); border: 1px dashed var(--border-strong); color: var(--text-dim);
}
.msg__image {
    display: block; max-width: min(100%, 340px); height: auto; margin: 10px 0 2px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-solid);
}
.msg--internal .msg__body { box-shadow: inset 3px 0 0 var(--amber); background: color-mix(in srgb, var(--amber) 5%, var(--surface)); }
.msg__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; font-size: .86rem; }
.msg__head time { margin-left: auto; color: var(--text-dim); font-size: .78rem; }
.msg__content { font-size: .92rem; word-break: break-word; }
.msg__content p { margin: 0 0 .75em; }
.msg__content p:last-child { margin-bottom: 0; }
.msg__content a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

.attachments { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--border); display: grid; gap: 6px; }
.attachments li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.attachments a { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--text-soft); }
.attachments a:hover { color: var(--text); }
.attachments em { color: var(--text-dim); font-style: normal; font-size: .78rem; }
.attachments__preview { color: var(--brand) !important; text-decoration: underline; font-size: .78rem !important; }

/* The virus-scan state of an attachment. Green says checked, red says do not
   touch, everything in between is grey: "we do not know yet" and "we could
   not find out" look the same to whoever has to decide about the file. */
.attachments__blocked { display: inline-flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--text-dim); text-decoration: line-through; }
.attachments .is-flagged .icon { color: var(--red); }

.scan {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .7rem; font-weight: 600; letter-spacing: .01em;
    padding: 1px 7px; border-radius: 999px;
    border: 1px solid var(--border-strong); color: var(--text-dim);
    white-space: nowrap;
}
.scan .icon { width: 11px; height: 11px; }
.scan--clean { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.scan--wait  { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.scan--bad   { color: var(--red);   border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 12%, transparent); }

.tl-event { display: flex; align-items: center; gap: 10px; padding-left: 5px; }
.tl-event__icon {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim);
}
.tl-event__icon .icon { width: 12px; height: 12px; }
.tl-event p { margin: 0; font-size: .84rem; color: var(--text-soft); }
.tl-event time { color: var(--text-dim); margin-left: 8px; font-size: .78rem; }

.reply { transition: border-color .2s; }
.reply.is-sent { animation: sent .6s ease-out; }
@keyframes sent { 0% { border-color: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 20%, transparent); } }
.reply.is-shake { animation: shake .4s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.filelist > li { animation: rise .25s ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
.reply__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.reply__foot .btn { margin-left: auto; }

.panel .field { margin-bottom: 10px; }
/* A resolved ticket shows the player reopen *and* close - two block buttons
   that would otherwise sit flush against each other. */
.panel form + form { margin-top: 8px; }
.meta-list { list-style: none; margin: 0 0 12px; padding: 0; }
.meta-list li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    font-size: .84rem; padding: 6px 0; border-top: 1px solid var(--border);
}
.meta-list li:first-child { border-top: 0; padding-top: 0; }
.meta-list span { color: var(--text-dim); }
.meta-list strong { font-weight: 500; text-align: right; }

.tips { margin: 0; padding-left: 18px; color: var(--text-soft); font-size: .85rem; display: grid; gap: 6px; }
.panel--tips { background: var(--surface); }

/* -------------------------------------------------------- dashboards --- */

.catlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.catlist a { display: grid; grid-template-columns: 1fr 90px 28px; gap: 12px; align-items: center; font-size: .84rem; }
.catlist a:hover .catlist__name { color: var(--text); }
.catlist__name { display: flex; align-items: center; gap: 8px; color: var(--text-soft); }
.catlist__name i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.catlist__bar { height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.catlist__bar i { display: block; height: 100%; border-radius: 999px; }
.catlist strong { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; }

.spark { display: flex; align-items: flex-end; gap: 4px; min-height: 110px; padding-top: 6px; }
.spark__bar {
    flex: 1; border-radius: 3px 3px 1px 1px; min-height: 3px;
    background: var(--brand-strong); opacity: .7; transition: opacity .15s;
}
.spark__bar:hover { opacity: 1; }

/* ------------------------------------------------------------ tables --- */

.table-wrap { padding: 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .86rem; min-width: 720px; }
.table th {
    text-align: left; padding: 9px 14px; font-size: .76rem;
    color: var(--text-dim); border-bottom: 1px solid var(--border); font-weight: 500;
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.cell-user { display: flex; align-items: center; gap: 10px; }
.cell-user div { display: grid; }
.cell-user span { font-size: .78rem; }

.catadmin { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.catadmin__item { display: grid; gap: 12px; padding-left: 23px; box-shadow: inset 3px 0 0 var(--accent, var(--brand)); }
.catadmin__head { display: flex; align-items: center; gap: 12px; }
.catadmin__head div { display: grid; }
.catadmin__head .muted { font-size: .82rem; }
.catadmin__head .badge { margin-left: auto; }
.catadmin__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.catadmin__new { display: grid; gap: 12px; margin-bottom: 18px; padding-left: 23px; box-shadow: inset 3px 0 0 var(--accent, var(--brand)); }
.catadmin__new .card__title { margin-bottom: 0; }
.catadmin__new textarea, .catadmin__fields textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; min-height: 120px; }
.catadmin__fields summary { cursor: pointer; font-size: .84rem; font-weight: 500; color: var(--text-soft); }
.catadmin__fields summary:hover { color: var(--text); }
.catadmin__fields[open] summary { margin-bottom: 8px; }
.card__action {
    margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
    font-size: .8rem; font-weight: 500; color: var(--text-soft);
}
.card__action:hover { color: var(--text); }
.card__action .icon { width: 13px; height: 13px; }
.grid-2--wide { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

/* category list on the dashboard: admin edit pencil */
.catlist li { display: flex; align-items: center; gap: 8px; }
.catlist li > a:first-child { flex: 1; min-width: 0; }
.catlist__edit { color: var(--text-dim); display: inline-flex; padding: 3px; border-radius: 5px; opacity: .55; }
.catlist li:hover .catlist__edit, .catlist__edit:focus-visible { opacity: 1; color: var(--text); background: var(--surface-2); }
.catadmin__item:target { box-shadow: inset 3px 0 0 var(--accent, var(--brand)), 0 0 0 3px var(--brand-soft); }

/* ------------------------------------------------------------ stars --- */
.stars { display: inline-flex; gap: 1px; vertical-align: middle; color: var(--text-dim); }
.stars i { display: inline-flex; position: relative; }
.stars .icon { width: 14px; height: 14px; }
.stars--xs .icon { width: 11px; height: 11px; }
.stars i.is-full .icon { fill: var(--amber); stroke: var(--amber); }
.stars i.is-half .icon { stroke: var(--amber); }
.stars i.is-half::after {
    content: ""; position: absolute; inset: 0; background: var(--amber);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1.1 5.9L12 16.9l-5.3 2.8 1.1-5.9-4.3-4.1 5.9-.8z'/></svg>") left / 200% 100% no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m12 3.5 2.6 5.4 5.9.8-4.3 4.1 1.1 5.9L12 16.9l-5.3 2.8 1.1-5.9-4.3-4.1 5.9-.8z'/></svg>") left / 200% 100% no-repeat;
}
.trow__rating { display: inline-flex; }

.rating__hint { font-size: .84rem; margin: -4px 0 10px; }
.rating .field { margin: 8px 0 10px; }
.rating textarea { min-height: 56px; font-size: .86rem; }
.rating__quote {
    margin: 0 0 12px; padding: 8px 11px; font-size: .85rem; color: var(--text-soft);
    background: var(--bg-soft); border-left: 3px solid var(--amber); border-radius: var(--radius-sm);
}
/* radio stars: DOM order is 5..1 and row-reverse flips it back, so ~ selects the lower stars */
.stars-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.stars-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars-input label { cursor: pointer; color: var(--text-dim); padding: 2px; border-radius: 6px; transition: transform .1s, color .1s; }
.stars-input label .icon { width: 26px; height: 26px; }
.stars-input label:hover, .stars-input label:hover ~ label,
.stars-input input:checked ~ label { color: var(--amber); }
.stars-input input:checked ~ label .icon { fill: var(--amber); }
.stars-input label:hover { transform: scale(1.12); }
.stars-input input:focus-visible + label { box-shadow: 0 0 0 3px var(--brand-soft); }

/* ------------------------------------------------------ leaderboard --- */
.lb .num { font-variant-numeric: tabular-nums; }
.lb tr.is-me td { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.lb__rank { width: 44px; text-align: center; }
.lb__medal {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    font-size: .74rem; font-weight: 600; color: #1b1b1b;
}
.lb__medal--1 { background: #f2c94c; }
.lb__medal--2 { background: #cfd4dc; }
.lb__medal--3 { background: #d9a066; }
.lb__rating { display: inline-flex; align-items: center; gap: 6px; }
.lb__foot { display: flex; gap: 6px; align-items: flex-start; font-size: .82rem; margin: 12px 2px 0; }
.lb__foot .icon { flex: none; margin-top: 2px; }

.lbmini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lbmini li {
    display: grid; grid-template-columns: 22px 1fr auto auto auto; gap: 10px; align-items: center;
    font-size: .84rem; padding: 6px 8px; border-radius: var(--radius-sm);
}
.lbmini li.is-me { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.lbmini__rank { color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: center; }
.lbmini__name { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbmini__stat { display: inline-flex; align-items: center; gap: 4px; color: var(--text-soft); font-variant-numeric: tabular-nums; min-width: 42px; justify-content: flex-end; }
.lbmini__stat .icon { color: var(--text-dim); }
.lbmini__foot { font-size: .8rem; margin: 10px 8px 0; }

/* -------------------------------------------------------- empty/page --- */

.empty { text-align: center; display: grid; justify-items: center; gap: 4px; padding: 44px 24px; }
.empty--tall { padding: 72px 24px; }
.empty__icon {
    width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 8px;
    background: var(--surface-2); color: var(--text-dim);
}
.empty h1, .empty h2 { font-size: 1.1rem; }
.empty p { color: var(--text-soft); max-width: 46ch; font-size: .92rem; }
.empty .btn { margin-top: 8px; }

.pagination { display: flex; gap: 4px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.pglink {
    padding: 6px 11px; border-radius: var(--radius-sm); font-size: .86rem; font-weight: 500;
    border: 1px solid transparent; color: var(--text-soft);
}
a.pglink:hover { border-color: var(--border-strong); color: var(--text); }
.pglink--current { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.pglink--disabled { opacity: .4; }

/* ------------------------------------------------------------ toasts --- */

.toasts { position: fixed; top: calc(var(--header-h) + 14px); right: 20px; z-index: 60; display: grid; gap: 8px; width: min(360px, calc(100% - 40px)); }
.toast {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 12px 14px; border-radius: var(--radius); font-size: .88rem;
    background: var(--surface-solid); border: 1px solid var(--border);
    box-shadow: var(--shadow-lg); animation: toast-in .26s cubic-bezier(.2, .7, .2, 1);
}
.toast--success { box-shadow: inset 3px 0 0 var(--green), var(--shadow-lg); }
.toast--error   { box-shadow: inset 3px 0 0 var(--red), var(--shadow-lg); }
.toast--warning { box-shadow: inset 3px 0 0 var(--amber), var(--shadow-lg); }
.toast--notify { box-shadow: inset 3px 0 0 var(--brand), var(--shadow-lg); }
.toast__link { display: flex; flex-direction: column; gap: 2px; color: inherit; text-decoration: none; min-width: 0; }
.toast__link:hover strong { color: var(--brand); }
.toast__link strong { font-weight: 600; }
.toast__link span { color: var(--text-soft); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast__close { margin-left: auto; background: none; border: 0; color: var(--text-dim); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0; }
.toast__close:hover { color: var(--text); }
.toast.is-hiding { animation: toast-out .18s ease-in forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
@keyframes toast-out { to   { opacity: 0; transform: translateX(10px); } }
@keyframes dot-pulse { 50% { opacity: 1; transform: scale(1.25); } }

/* ------------------------------------------------------------ footer --- */

.footer {
    border-top: 1px solid var(--border); padding: 18px 0; margin-top: auto;
    display: flex; gap: 10px; justify-content: center; align-items: center;
    color: var(--text-dim); font-size: .78rem;
}
.footer__sep { opacity: .5; }
.footer a { color: var(--text-dim); }
.footer a:hover { color: var(--text); }

/* ------------------------------------------------------------ legal --- */

.legal { line-height: 1.65; }
.legal h1 { margin: 0 0 6px; }
.legal .legal__updated { color: var(--text-dim); font-size: .84rem; margin: 0 0 22px; }
.legal h2 { font-size: 1.12rem; margin: 30px 0 8px; }
.legal h3 { font-size: .98rem; margin: 18px 0 6px; }
.legal p, .legal ul, .legal ol { margin: 0 0 12px; }
.legal ul, .legal ol { padding-left: 22px; }
.legal li { margin-bottom: 4px; }
.legal address { font-style: normal; white-space: pre-line; }
.legal .legal__toc { columns: 2; gap: 24px; font-size: .9rem; }
.legal .legal__missing {
    color: var(--danger, #ef4444); font-family: var(--mono, ui-monospace, monospace); font-size: .86rem;
}
.legal table { border-collapse: collapse; width: 100%; font-size: .9rem; margin: 0 0 14px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--border); }
.legal th { font-weight: 600; color: var(--text-soft); }
.consent { color: var(--text-dim); font-size: .82rem; margin: 12px 0 0; }
.consent a { color: var(--text-soft); text-decoration: underline; }
.card--danger { border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border)); }
.btn--danger { background: var(--danger, #ef4444); color: #fff; border-color: transparent; }
.btn--danger:hover { filter: brightness(1.08); }
.data-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
@media (max-width: 640px) { .legal .legal__toc { columns: 1; } }

/* ------------------------------------------------------- responsive --- */
/* Three tiers. Up to 960px the top bar keeps every link but drops the
   labels. Under 720px it is a phone: the links move to a tab bar along the
   bottom edge, the top bar keeps brand, presence and account, drop-downs
   turn into full-width sheets, and lists trade truncation for a second
   line. Touch devices of any size get bigger targets. */

html { scroll-padding-top: calc(var(--header-h) + 12px); }

/* Anchors of the phone layout. Hidden or inert on desktop. */
.tabbar { display: none; }
.usermenu__tools { display: none; }
[data-theme="light"] .if-dark { display: none; }
:root:not([data-theme="light"]) .if-light { display: none; }
[data-sound-toggle][aria-pressed="false"] .if-sound-on { display: none; }
[data-sound-toggle]:not([aria-pressed="false"]) .if-sound-off { display: none; }

@media (pointer: coarse) {
    .btn { min-height: 40px; }
    .btn--sm { min-height: 36px; }
    .btn--xs { min-height: 32px; padding: 5px 11px; }
    .icon-btn, .presence__trigger { height: 36px; min-width: 36px; }
    .tab { padding: 10px 12px; }
    .seg__item { padding: 9px 14px; }
    .pglink { min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; }
    .usermenu__panel a, .usermenu__panel button { padding: 11px 12px; }
    .catlist__edit { opacity: 1; padding: 8px; }
    .stars-input label .icon { width: 32px; height: 32px; }
    .filebtn { min-height: 36px; }
    .catadmin__fields summary, .attachments a, .attachments__preview { padding: 4px 0; }
}

/* Seven labelled links (staff plus admin) never fit the 1080px bar next to
   the actions; below 1400px a wide nav keeps icons only, with the label as a
   tooltip. A player's two links stay labelled down to 960px. */
@media (max-width: 1400px) {
    .topnav--wide .topnav__link span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 960px) {
    .ticket__layout { grid-template-columns: 1fr; }
    .ticket__side { position: static; }
    /* Collapsed labels stay in the accessibility tree - `display: none` here
       strips the accessible name off the link that wraps them. */
    .brand__text,
    .topnav__link span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 720px) {
    :root { --tabbar-h: 58px; }

    .container, .page--narrow, .topbar__inner { width: calc(100% - 24px); }
    .page { padding-top: 18px; }
    h1 { font-size: 1.3rem; }

    /* --- top bar: brand, presence, account. Links live in the tab bar. --- */
    .topbar__inner { gap: 12px; }
    .topbar__actions { gap: 6px; }
    .topnav, .topbar__tool { display: none; }
    .brand__text { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; }
    .presence__word { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .presence__trigger { padding: 0 8px; }
    .topbar__actions .btn span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .topbar__actions .btn--sm { padding: 6px 9px; }

    /* Drop-downs become sheets pinned under the bar, full width. */
    .usermenu__panel, .presence__panel {
        position: fixed; left: 10px; right: 10px; top: calc(var(--header-h) + 8px);
        width: auto; min-width: 0; max-width: none; border-radius: var(--radius-lg);
    }
    .presence__body { max-height: min(50vh, 380px); }
    .usermenu__tools { display: grid; gap: 2px; padding-top: 4px; margin-top: 4px; border-top: 1px solid var(--border); }
    .usermenu__tools .icon--sun, .usermenu__tools .icon--moon,
    .usermenu__tools .icon--bell, .usermenu__tools .icon--bell-off { width: 16px; height: 16px; }
    .usermenu__panel [data-sound-toggle] { color: var(--text-soft); }

    /* --- tab bar --- */
    .tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        display: flex; align-items: stretch; gap: 2px;
        padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
        background: color-mix(in srgb, var(--bg) 88%, transparent);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--border);
    }
    .tabbar__item {
        position: relative; flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
        padding: 5px 2px 4px; border-radius: var(--radius-sm);
        color: var(--text-dim); font-size: .68rem; font-weight: 500; line-height: 1;
        list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
        transition: color .15s, background .15s;
    }
    .tabbar__item::-webkit-details-marker { display: none; }
    .tabbar__item .icon { width: 22px; height: 22px; }
    .tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tabbar__item:active, .tabbar__more[open] > .tabbar__item { background: var(--surface-2); color: var(--text); }
    .tabbar__item.is-active { color: var(--brand); }
    .tabbar__item .dot, .tabbar__item .count { position: absolute; top: 3px; left: calc(50% + 7px); }
    .tabbar__item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: dot-pulse 2.4s ease-in-out infinite; }
    .tabbar__item .count { min-width: 12px; height: 12px; padding: 2px 4px; font-size: .62rem; box-sizing: content-box; border: 2px solid var(--bg); }
    .tabbar__item--new .icon {
        width: 26px; height: 26px; padding: 4px; border-radius: 8px;
        background: var(--brand-strong); color: var(--on-brand); stroke-width: 2;
    }
    .tabbar__more { flex: 1 1 0; min-width: 0; display: flex; }
    .tabbar__more > .tabbar__item { flex: 1; }
    .tabbar__sheet {
        position: fixed; left: 10px; right: 10px; z-index: 50;
        bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 8px);
        display: grid; gap: 2px; padding: 6px;
        background: var(--surface-solid); border: 1px solid var(--border);
        border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
        animation: sheet-in .2s cubic-bezier(.2, .7, .2, 1);
    }
    .tabbar__link {
        display: flex; align-items: center; gap: 11px; padding: 12px;
        border-radius: var(--radius-sm); color: var(--text-soft); font-size: .92rem; font-weight: 500;
    }
    .tabbar__link .icon { width: 18px; height: 18px; color: var(--text-dim); }
    .tabbar__link.is-active { color: var(--text); background: var(--surface-2); }
    .tabbar__link.is-active .icon { color: var(--brand); }
    .tabbar__link:active { background: var(--surface-2); }

    /* Everything fixed to the bottom edge sits above the bar. */
    .has-tabbar .main { padding-bottom: 32px; }
    .has-tabbar .footer { padding-bottom: calc(18px + var(--tabbar-h) + env(safe-area-inset-bottom)); }
    .has-tabbar .newpill { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 14px); }
    .newpill { bottom: 18px; }

    /* --- page furniture --- */
    .page__head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
    .page__head > .btn { width: 100%; }
    .crumbs { font-size: .82rem; margin-bottom: 10px; }
    .card { padding: 14px; }
    .tlist--compact { margin: 0 -14px -14px; }
    .tlist--compact .trow { padding: 9px 14px 9px 13px; }
    .toolbar { gap: 10px; }
    .tabs { flex-wrap: nowrap; width: 100%; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { flex: none; scroll-snap-align: start; }
    .searchbar { min-width: 0; max-width: none; flex: 1 1 100%; }
    .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat { padding: 10px 12px; }
    .stat__value { font-size: 1.3rem; }
    .empty { padding: 32px 16px; }
    .empty--tall { padding: 48px 16px; }
    .toasts { left: 12px; right: 12px; width: auto; }
    .footer { flex-wrap: wrap; padding-inline: 12px; text-align: center; }
    .hero { padding-top: 32px; }
    .hero__actions .btn { flex: 1 1 auto; }
    .auth { padding: 28px 0; }
    .auth__card { padding: 20px; }

    /* Queue filters: two per row, buttons share the last row. */
    .filters { padding: 10px; }
    .filters .select { flex: 1 1 calc(50% - 4px); }
    .filters .select:last-of-type { flex-basis: 100%; }   /* sort, alone, so the buttons share a row */
    .filters .btn { flex: 1 1 calc(50% - 4px); }

    /* Ticket rows: a second line of subject beats an ellipsis. */
    .trow { grid-template-columns: 30px 1fr; gap: 10px; padding: 12px 12px 12px 15px; align-items: start; }
    .trow__icon { margin-top: 1px; }
    .trow__subject { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; }
    .trow__time { grid-column: 2; text-align: left; display: flex; gap: 8px; align-items: baseline; }
    .inbox__row { grid-template-columns: 38px 1fr; }
    .tlist__item .trow { padding-right: 12px; }
    .tlist__item:has(.tlist__claim) .trow { padding-bottom: 50px; }
    .tlist__claim { top: auto; bottom: 10px; right: 12px; transform: none; }

    /* Ticket detail */
    .ticket__head { padding-left: 12px; margin-bottom: 16px; }
    .ticket__head h1 { font-size: 1.2rem; }
    .ticket__jump { display: inline-flex; }
    .ticket__layout { gap: 14px; }
    .details__grid { grid-template-columns: 1fr; }
    .msg { grid-template-columns: 24px 1fr; gap: 8px; }
    .msg__avatar { width: 24px; height: 24px; font-size: .55rem; }
    .msg__body { padding: 10px 12px 10px 14px; }
    .reply__foot { gap: 10px; }
    .reply__foot .check--inline { flex: 1 1 100%; }
    .reply__foot .btn { flex: 1 1 100%; margin-left: 0; }
    .notice { flex-wrap: wrap; }
    .notice .btn { flex: 1 1 100%; margin-left: 0; }

    /* Forms. 16px inputs stop iOS Safari from zooming in on focus. */
    input[type="text"], input[type="email"], input[type="password"], input[type="url"],
    input[type="number"], input[type="date"], input[type="datetime-local"], input[type="search"],
    textarea, select, .select--sm select, .select--xs select, .searchbar input { font-size: 1rem; }
    .form__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .form__actions .btn { width: 100%; }
    .form-head { padding-left: 12px; gap: 12px; }
    .form-head h1 { font-size: 1.15rem; }
    .fieldset { padding: 12px; }
    .dropzone { padding: 14px; }
    .catadmin__item, .catadmin__new { padding-left: 17px; }

    /* Dashboards and analytics */
    .table { min-width: 640px; }
    .analytics__head { text-align: left; margin: 0 0 18px; }
    .analytics__cat { flex: 1 1 100%; min-width: 0; }
    .analytics__export { flex: 1 1 100%; margin-left: 0; }
    .seg { width: 100%; }
    .seg__item { flex: 1; text-align: center; }
    .tile { padding: 14px; }
    .tile__value { font-size: 1.35rem; }
    .panel-chart:has(.heat) { overflow-x: auto; }
    .heat { min-width: 520px; gap: 2px; }
    .heat__cell { min-height: 12px; border-radius: 2px; }
    .hbars__row { grid-template-columns: 90px 1fr 40px; }
}

@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* -------------------------------------------------------- analytics --- */
.analytics__head { text-align: center; margin: 6px 0 26px; }
.analytics__head h1 { margin: 0 0 6px; }
.analytics__head p { margin: 0; font-size: .95rem; }
.analytics__filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.analytics__cat { min-width: 200px; }
.analytics__export { margin-left: auto; }

.seg { display: inline-flex; gap: 4px; }
.seg__item {
    padding: 7px 13px; font-size: .84rem; font-weight: 500; border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--border);
}
.seg__item:hover { color: var(--text); border-color: var(--border-strong); }
.seg__item.is-active { background: var(--brand-strong); color: var(--on-brand); border-color: var(--brand-strong); }

.tiles { display: grid; gap: 12px; margin-bottom: 12px; }
.tiles--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tiles--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tile {
    display: grid; gap: 4px; padding: 18px 20px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.tile__label { font-size: .86rem; color: var(--text-soft); }
.tile__value { font-size: 1.6rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile__sub { font-size: .78rem; color: var(--text-dim); }

.panel-chart { margin-bottom: 12px; }
.analytics .grid-2 { margin-bottom: 12px; }
.analytics .grid-2 > .card { margin-bottom: 0; }
.analytics > .card { margin-bottom: 12px; }
.card__title .muted { font-weight: 400; font-size: .8rem; }

.chart { position: relative; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart__grid { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.chart__ylabel { fill: var(--text-dim); font-size: 12px; text-anchor: end; }
.chart__xlabel { fill: var(--text-dim); font-size: 12px; text-anchor: middle; }
.chart__line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart__area { stroke: none; }
.chart__bar { transition: opacity .12s; }
.chart__bar:hover { opacity: .8; }
.chart__cursor { stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0; }
.chart__dot { fill: var(--surface); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; }
.chart.is-hover .chart__cursor, .chart.is-hover .chart__dot { opacity: 1; }
.chart__tip {
    position: absolute; pointer-events: none; z-index: 2; padding: 6px 9px; font-size: .78rem;
    background: var(--surface-solid); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg); white-space: nowrap; transform: translate(-50%, -100%);
}
.chart__tip strong { display: block; font-variant-numeric: tabular-nums; }
.chart__tip span { color: var(--text-dim); }
.chart__svg text { font-family: var(--font); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.hbars { display: grid; gap: 9px; position: relative; }
.hbars__row { display: grid; grid-template-columns: 130px 1fr 48px; align-items: center; gap: 10px; font-size: .82rem; }
.hbars__label { text-align: right; color: var(--text-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbars__track {
    position: relative; height: 18px; border-radius: 4px;
    background: repeating-linear-gradient(to right, transparent 0 calc(25% - 1px), var(--border-strong) calc(25% - 1px) 25%);
}
.hbars__track i { display: block; height: 100%; border-radius: 4px; min-width: 3px; }
.hbars__value { font-variant-numeric: tabular-nums; color: var(--text-soft); }

.heat {
    display: grid; grid-template-columns: 40px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center;
    font-size: .76rem; color: var(--text-dim);
}
.heat__hour { text-align: left; height: 16px; }
.heat__day { padding-right: 4px; }
.heat__cell { aspect-ratio: 2 / 1; min-height: 18px; border-radius: 4px; background: var(--surface-2); }
.heat__cell.is-l1 { background: color-mix(in srgb, var(--blue) 24%, var(--surface-2)); }
.heat__cell.is-l2 { background: color-mix(in srgb, var(--blue) 42%, var(--surface-2)); }
.heat__cell.is-l3 { background: color-mix(in srgb, var(--blue) 60%, var(--surface-2)); }
.heat__cell.is-l4 { background: color-mix(in srgb, var(--blue) 80%, var(--surface-2)); }
.heat__cell.is-l5 { background: var(--blue); }
.heat__legend { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 10px; font-size: .76rem; color: var(--text-dim); }
.heat__legend i { width: 14px; height: 14px; min-height: 0; aspect-ratio: auto; border-radius: 3px; }
.heat__legend span { margin: 0 4px; }

.kv { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.kv li {
    display: flex; justify-content: space-between; align-items: center; padding: 11px 14px;
    background: var(--surface-2); border-radius: var(--radius-sm); font-size: .88rem;
}
.kv li span { color: var(--text-soft); }
.kv li strong { font-variant-numeric: tabular-nums; }

.breakdown { display: grid; gap: 10px; }
.breakdown__item { padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: .86rem; }
.breakdown__item p { margin: 5px 0 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.breakdown__item i { color: var(--text-dim); font-style: normal; }

.perf { padding: 18px; }
.perf__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.perf__head .card__title { margin-bottom: 4px; }
.perf__insight { margin: 0 0 8px; font-size: .84rem; color: var(--text-soft); flex-basis: 100%; }
.perf__table { min-width: 640px; }
.perf__table th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.perf__table th[data-sort]::after { content: " \2195"; color: var(--text-dim); font-size: .7rem; }
.perf__table th.is-asc::after { content: " \2191"; color: var(--brand); }
.perf__table th.is-desc::after { content: " \2193"; color: var(--brand); }
.perf__table td { vertical-align: top; }
.perf__cat { display: inline-flex; align-items: center; gap: 8px; }
.perf__cat i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.perf__sub { display: block; font-size: .76rem; color: var(--text-dim); margin-top: 3px; }
.perf__foot { font-size: .8rem; margin: 10px 0 0; }
.perf .cell-user a { color: var(--brand); }

.delta { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px; font-size: .74rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.delta .icon { width: 10px; height: 10px; }
.delta--good { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.delta--bad { color: var(--red); background: color-mix(in srgb, var(--red) 14%, transparent); }
.delta--flat, .delta--none { color: var(--text-dim); }

/* ------------------------------------------------------ install the app --- */
/* Chrome and Edge will install this site as an app; the button in the top bar
   and the card in the corner are our own version of the offer they hide in the
   address bar. Both are rendered hidden and unhidden by app.js, so a browser
   that cannot install anything never shows them. */

.topbar__install .icon { width: 15px; height: 15px; }
.usermenu__install { display: none; }          /* phone only - see below */
.icon--inline { width: 14px; height: 14px; vertical-align: -3px; }

.installbar {
    position: fixed; right: 20px; bottom: 20px; z-index: 55;
    width: min(400px, calc(100% - 40px));
    display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px 14px; align-items: start;
    padding: 16px; background: var(--surface-solid);
    border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    animation: install-in .28s cubic-bezier(.2, .7, .2, 1);
}
.installbar__mark { border-radius: 10px; }
.installbar__text { display: grid; gap: 3px; min-width: 0; font-size: .82rem; color: var(--text-soft); }
.installbar__text > strong { color: var(--text); font-size: .93rem; font-weight: 600; }
.installbar__actions { grid-column: 2; display: flex; gap: 8px; margin-top: 4px; }
.installbar__close {
    position: absolute; top: 6px; right: 9px; padding: 0; line-height: 1; font-size: 1.2rem;
    background: none; border: 0; color: var(--text-dim); cursor: pointer;
}
.installbar__close:hover { color: var(--text); }

/* Two wordings, one card: Safari on iOS installs from its own share sheet, so
   there is nothing for an Install button to do there. */
.installbar:not([data-mode="ios"]) .installbar__copy--ios,
.installbar[data-mode="ios"] .installbar__copy--prompt,
.installbar[data-mode="ios"] .installbar__actions [data-install] { display: none; }
.installbar__copy--ios strong { color: var(--text); font-weight: 600; }

.installbar.is-hiding { animation: install-out .18s ease-in forwards; }
@keyframes install-in  { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes install-out { to   { opacity: 0; transform: translateY(10px); } }

@media (max-width: 720px) {
    /* The top bar has no room for it; the account menu carries the entry. */
    .topbar__install { display: none; }
    .usermenu__panel .usermenu__install:not([hidden]) { display: flex; }

    .installbar { left: 12px; right: 12px; bottom: 12px; width: auto; }
    .has-tabbar .installbar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px); }
}

/* =========================================================================
   Minecraft identities, punishments, translation, audit log
   Added with the LiteBans panel and the in-game sign-in; see README.
   ========================================================================= */

/* ------------------------------------------------------- link codes --- */
/* The one-time code shown on the profile card and the sign-in page. It has
   to be readable across a room and typed without a mistake, so it is large,
   monospaced and widely tracked. */
.auth__or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--text-dim); font-size: .8rem; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--border); }

.linkcode {
    display: grid; justify-items: center; gap: 4px;
    padding: 18px 14px; margin: 4px 0 14px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius);
}
.linkcode__label { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.linkcode__value { font-family: var(--mono); font-size: 1.9rem; letter-spacing: .22em; text-indent: .22em; color: var(--text); }
.linkcode__timer { font-size: .78rem; }

.linksteps { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; font-size: .86rem; color: var(--text-soft); }
.linksteps strong, .linksteps code { color: var(--text); }

.linkwait { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--text-soft); margin: 0 0 12px; }
.linkwait__spinner {
    width: 13px; height: 13px; flex: none; border-radius: 50%;
    border: 2px solid var(--border-strong); border-top-color: var(--brand);
    animation: spin .8s linear infinite;
}
.linkwait--done { color: var(--text); }
.linkwait--done .linkwait__spinner { display: none; }

/* --------------------------------------------------- verified badges --- */
/* Verified means somebody typed a code in game as that player. Unverified
   means they typed the name into a box. The difference between the two is
   the whole point, so one is coloured and the other is not. */
.verified, .unverified {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .72rem; font-weight: 500; padding: 1px 6px; border-radius: 999px;
}
.verified { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.unverified { color: var(--text-dim); background: var(--surface-2); }
.verified .icon { width: 11px; height: 11px; }

/* -------------------------------------------------------- punish panel --- */
.punish__quoted {
    padding: 10px 12px; margin-bottom: 12px;
    background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
    border-left: 3px solid var(--amber);
}
.punish__quotedlabel { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 4px; }

.punish__single { margin: 0 0 12px; display: grid; gap: 1px; }
.punish__single .muted { font-size: .74rem; }

.punish__state { margin-bottom: 12px; transition: opacity .15s ease; }
.punish__state.is-loading { opacity: .5; }

.punish__active {
    padding: 10px 12px; margin-bottom: 8px; border-radius: var(--radius-sm);
    border: 1px solid color-mix(in srgb, var(--red) 40%, var(--border));
    background: color-mix(in srgb, var(--red) 8%, transparent);
}
.punish__active--mute { border-color: color-mix(in srgb, var(--amber) 40%, var(--border)); background: color-mix(in srgb, var(--amber) 8%, transparent); }
.punish__activehead { display: flex; align-items: center; gap: 6px; font-size: .86rem; margin-bottom: 3px; }
.punish__activehead .icon { width: 13px; height: 13px; }
.punish__span { margin-left: auto; font-size: .74rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.punish__reason { margin: 0 0 3px; font-size: .86rem; }
.punish__meta { margin: 0; font-size: .76rem; color: var(--text-dim); }
.punish__clear { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 8px; font-size: .86rem; color: var(--text-soft); }
.punish__clear .icon { width: 13px; height: 13px; color: var(--green); flex: none; margin-top: 2px; }
.punish__unknown { font-size: .84rem; }

.punish__counts { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 12px; padding: 0; font-size: .76rem; color: var(--text-dim); }
.punish__counts span { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }

.punish__form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.punish__form .field { margin: 0; }
.punish__mode { margin: 0; }

/* ------------------------------------------------------ player history --- */
.history__stats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 10px; padding: 0; text-align: center; }
.history__stats li { padding: 8px 4px; background: var(--surface-2); border-radius: var(--radius-sm); display: grid; gap: 1px; }
.history__stats strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.history__stats span { font-size: .72rem; color: var(--text-dim); }
.history__since { font-size: .78rem; margin: 0 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.history__cats { list-style: none; display: grid; gap: 5px; margin: 0 0 12px; padding: 0; }
.history__cats li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; }
.history__cats > li > span { color: var(--text-soft); font-variant-numeric: tabular-nums; }

.history__list { list-style: none; display: grid; gap: 8px; margin: 0 0 10px; padding: 0; }
.history__list li { display: grid; gap: 3px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.history__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.history__list a { display: grid; gap: 1px; }
.history__list a:hover .history__subject { color: var(--brand); }
.history__ref { font-family: var(--mono); font-size: .74rem; color: var(--text-dim); letter-spacing: .03em; }
.history__subject { font-size: .84rem; }
.history__meta { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--text-dim); }

/* -------------------------------------------------------- translation --- */
.msg__translate {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: auto; padding: 2px 7px;
    background: none; border: 1px solid transparent; border-radius: 999px;
    color: var(--text-dim); font: inherit; font-size: .74rem; cursor: pointer;
    opacity: 0; transition: opacity .14s ease, color .14s ease, border-color .14s ease;
}
.msg:hover .msg__translate, .msg__translate:focus-visible, .msg__translate[data-showing="translation"] { opacity: 1; }
.msg__translate:hover { color: var(--text); border-color: var(--border-strong); }
.msg__translate .icon { width: 11px; height: 11px; }
.msg__translate.is-loading { opacity: 1; color: var(--brand); }
/* A translated body is marked, so nobody mistakes a machine's words for the
   sender's own. */
.msg__content--translated { border-left: 2px solid var(--brand-soft); padding-left: 10px; }
.msg__rule { border: 0; border-top: 1px dashed var(--border-strong); margin: 12px 0; }

/* ---------------------------------------------------------- audit log --- */
.table--audit td { font-size: .82rem; vertical-align: top; }
.audit__detail { color: var(--text-soft); max-width: 380px; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .78rem; }
.ta-center { text-align: center; }
.link-muted { color: var(--text-dim); font-size: .82rem; }
.link-muted:hover { color: var(--text); }
.form--tight { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.searchbar--inline { max-width: 320px; }

.auditdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--text-dim); vertical-align: 1px; }
.auditdot--good { background: var(--green); }
.auditdot--bad  { background: var(--red); }

/* ---------------------------------------------------------- lightbox --- */
/* A picture in a ticket is usually the evidence, and opening it in a new tab
   loses the conversation. This keeps both. */
.lightbox {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 24px;
    background: rgba(8, 9, 12, .88);
    animation: fade-in .16s ease;
}
.is-lightboxed { overflow: hidden; }
.lightbox__figure { margin: 0; display: grid; gap: 10px; justify-items: center; max-width: 100%; max-height: 100%; }
.lightbox__img {
    max-width: min(1200px, 100%); max-height: calc(100vh - 120px);
    object-fit: contain; border-radius: var(--radius); background: #000;
}
.lightbox__cap { display: flex; align-items: center; gap: 10px; color: #d8dae1; font-size: .82rem; }
.lightbox__count { color: #8f96a6; font-variant-numeric: tabular-nums; }

.lightbox__close, .lightbox__nav {
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
    color: #fff; cursor: pointer; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    transition: background .14s ease;
}
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .18); }
.lightbox__close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; font-size: 1.4rem; line-height: 1; }
.lightbox__nav { width: 40px; height: 40px; flex: none; font-size: 1.6rem; line-height: 1; }
.lightbox--single .lightbox__nav { visibility: hidden; }

.msg__content img.msg__image, a[data-lightbox] { cursor: zoom-in; }

@keyframes fade-in { from { opacity: 0; } }

@media (pointer: coarse) {
    /* No hover on a touch screen, so the control is simply always there. */
    .msg__translate { opacity: 1; }
}

@media (max-width: 720px) {
    .lightbox { padding: 12px; }
    .lightbox__nav { width: 34px; height: 34px; }
    .lightbox__img { max-height: calc(100vh - 150px); }
    .linkcode__value { font-size: 1.5rem; }
    .searchbar--inline { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lightbox { animation: none; }
    .linkwait__spinner { animation-duration: 2s; }
}

/* AI support reuses the ticket card and button styles. */
.ai-support { padding: 18px; margin-bottom: 20px; border-left: 3px solid var(--accent, #6366f1); }
.ai-support p { margin: 8px 0 12px; }
.ai-support__actions { display: flex; flex-wrap: wrap; gap: 8px; }