/* Design tokens, body, topbar, footer and .btn all come from /assets/site.css,
   loaded before this file so the account pages share the same chrome as the
   rest of the site. This file only adds what's specific to account pages. */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; max-width: 420px; width: 100%; margin: 0 auto; padding: 3rem 20px; display: flex; flex-direction: column; gap: 1.5rem; }

/* Navbar-only "Beta" sticker - pinned to the bottom-right corner of the
   Tickets nav item, tilted like a little stamp rather than sitting inline
   with the text. */
.nav-tickets-link { position: relative; padding-right: .3rem; }
.beta-tag {
  position: absolute; right: -.35rem; top: -.5rem; z-index: 1;
  display: inline-flex; align-items: center; line-height: 1; transform: rotate(8deg);
  font-size: .48rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  padding: .09rem .3rem; border-radius: 999px;
  background: linear-gradient(90deg, #00b8e6, #0047ff); color: #fff;
  box-shadow: 0 2px 6px rgba(0,71,255,.5); pointer-events: none;
}

/* Marketing-site-style section bands (same pattern as server-info/network's
   own inline styles) - used by the public ticket pages so they read like
   the rest of the site instead of the account-dashboard look. */
.band { padding-block: clamp(3rem, 7vw, 5rem); }
.band .wrap { display: flex; flex-direction: column; gap: 2rem; }
.band.alt { background: linear-gradient(180deg, var(--ink-0), #070c1a 50%, var(--ink-0)); border-block: 1px solid var(--line); }

/* Header notification bell + account popovers: styled in /assets/site.css. */

/* Admin panel shell - its own app layout, no topbar/footer, full width. */
/* Hard-clamped to exactly the viewport, never taller - the sidebar and
   main content area each scroll internally (see their own overflow-y)
   instead of the whole document ever growing past 100vh. That's what
   actually guarantees zero stray page-level scrollbar, rather than
   relying on every page's content happening to add up to a precise
   sub-pixel match. */
.admin-body { margin: 0; height: 100vh; overflow: hidden; background: var(--ink-1); }
.admin-shell { display: flex; height: 100vh; }
.admin-sidebar {
  width: 240px; flex: none; background: var(--ink-1); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 1.5rem 1rem; box-sizing: border-box;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.admin-brand { display: flex; align-items: center; gap: .6rem; padding: 0 .5rem; margin-bottom: 2rem; text-decoration: none; color: var(--text); }
.admin-brand img { width: 28px; height: 28px; flex: none; }
.admin-brand span {
  font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .95rem;
  background: linear-gradient(90deg, #00e5ff, #4d8fff); -webkit-background-clip: text; background-clip: text; color: transparent;
}

.admin-nav-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding: 0 .6rem; margin-bottom: .5rem; }
.admin-nav { display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.admin-nav a {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 7px; border-left: 3px solid transparent;
  color: var(--dim); text-decoration: none; font-weight: 600; font-size: .85rem;
}
.admin-nav a .nav-icon, .admin-nav-group-toggle .nav-icon { width: 16px; height: 16px; flex: none; }
.admin-nav a:hover { background: var(--ink-2); color: var(--text); }
.admin-nav a[aria-current="page"] { background: var(--ink-2); color: var(--ice); border-left-color: var(--ice); }
.admin-nav a .nav-badge {
  margin-left: auto; font-family: var(--mono); font-size: .68rem; font-weight: 700; line-height: 1;
  padding: .2rem .45rem; border-radius: 999px; background: linear-gradient(135deg, #ff1f4b, #c40024); color: #fff;
}

.admin-nav-group-toggle {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .6rem; border-radius: 7px; border: none; border-left: 3px solid transparent;
  background: none; color: var(--dim); font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; text-align: left;
}
.admin-nav-group-toggle:hover { background: var(--ink-2); color: var(--text); }
.admin-nav-group-toggle .admin-nav-group-chevron { margin-left: auto; width: 14px; height: 14px; flex: none; transition: transform .15s ease; }
.admin-nav-group.is-open .admin-nav-group-toggle .admin-nav-group-chevron { transform: rotate(180deg); }
.admin-nav-submenu {
  display: flex; flex-direction: column; gap: .2rem; overflow: hidden; max-height: 0;
  margin-left: 1.3rem; padding-left: .55rem; border-left: 1px solid var(--line);
}
.admin-nav-submenu a { padding-left: .5rem; }
.admin-nav-group.is-open .admin-nav-submenu { max-height: 220px; margin-top: .2rem; }
.admin-nav-divider { height: 1px; background: var(--line); margin: .55rem .6rem; }

.admin-sidebar-footer { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }

.admin-user-chip { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .65rem; min-width: 0; }
.admin-user-chip img, .admin-user-chip .avatar-placeholder { width: 44px; height: 44px; border-radius: 10px; image-rendering: pixelated; flex: none; }
.admin-user-chip .avatar-placeholder { display: flex; align-items: center; justify-content: center; background: #000; color: #fff; font-weight: 800; }
.admin-user-chip .name { font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; text-align: left; }
.sidebar-rank-text {
  font-weight: 700; font-size: .76rem; margin-top: .1rem; width: fit-content;
  background: linear-gradient(90deg, var(--rank-start), var(--rank-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.admin-sidebar-divider { height: 1px; background: var(--line); margin: 1rem 0; }
.admin-back-link {
  display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--dim); text-decoration: none; font-size: .85rem; font-weight: 600;
}
.admin-back-link svg { width: 16px; height: 16px; }
.admin-back-link:hover { color: var(--ice); }

.admin-main { flex: 1; min-width: 0; max-width: none; width: auto; margin: 0; padding: 2.5rem 3rem 4rem; overflow-x: auto; overflow-y: auto; display: flex; flex-direction: column; gap: 2rem; }
.admin-main .table-wrap { overflow-x: auto; background: var(--ink-2); }

.admin-section { display: flex; flex-direction: column; gap: 1rem; }
.admin-section-label { font-family: var(--mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

@media (max-width: 900px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: static; }
  .admin-main { padding: 1.75rem 1.25rem 3rem; }
}

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; background: var(--ink-2); border: 1px solid var(--line-strong); color: var(--dim); cursor: pointer;
}
.icon-btn:hover { color: var(--ice); border-color: var(--ice); }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn:disabled:hover { color: var(--dim); border-color: var(--line-strong); }

/* Admin "Ticket Forms" page - per-category custom field list/editor. */
.ticket-form-field-list { display: flex; flex-direction: column; gap: .5rem; }
.ticket-form-field-section {
  font-family: var(--display); font-weight: 800; font-size: .88rem; color: var(--ice);
  margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--line);
}
.ticket-form-field-list > .ticket-form-field-section:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ticket-form-field-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; padding: .75rem .9rem;
}
.ticket-form-field-info { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.ticket-form-field-label { font-weight: 700; font-size: .9rem; overflow-wrap: anywhere; }
.ticket-form-field-meta { color: var(--dim); font-size: .78rem; }
.ticket-form-field-actions { display: flex; align-items: center; gap: .4rem; flex: none; }
.add-field-btn { align-self: flex-start; }

/* Dashboard (/account) breaks out of the narrow auth-form layout entirely
   and lays out like a normal site page: full-width main, sections manage
   their own centering via .wrap / .page-head from site.css. */
main.dashboard { display: block; max-width: none; width: 100%; padding: 0; gap: 0; }
.dash-content { padding-block: 3rem 5rem; display: flex; flex-direction: column; gap: 2.5rem; }

/* /account - three-column dashboard layout (identity+details | ranks,
   linked accounts, password | tickets, death, quick links), built from
   the same .ticket-sidebar-card/.ticket-detail-row boxes the admin panel
   uses, so a player's own account page reads like a lighter version of
   the same dashboard staff already know. */
.account-dashboard-layout { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 1.5rem; align-items: start; }
.account-col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (max-width: 1100px) {
  .account-dashboard-layout { grid-template-columns: 2fr 1fr; }
  .account-col-left { grid-column: 1 / -1; }
  .account-col-left .account-identity-card { flex-direction: row; text-align: left; align-items: center; }
}
@media (max-width: 760px) {
  .account-dashboard-layout { grid-template-columns: 1fr; }
  .account-col-left { grid-column: auto; }
}

.account-identity-card { align-items: center; text-align: center; }
.account-identity-card .avatar { width: 84px; height: 84px; border-radius: 14px; image-rendering: pixelated; flex: none; border: 1px solid var(--line-strong); }
.account-identity-card .avatar.placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #000; color: #fff; font-weight: 800; font-size: 34px;
}
.account-identity-card h2 { font-family: var(--display); font-weight: 800; font-size: 1.3rem; }
.account-identity-card .sub { color: var(--dim); font-size: .85rem; }

.account-rank-row { display: flex; flex-wrap: wrap; gap: .5rem; }

.account-link-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.account-link-row-info { display: flex; align-items: center; gap: .6rem; }
.account-link-row-info .k { color: var(--dim); font-size: .85rem; }
.account-link-row form { margin: 0; }

.account-ticket-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  color: var(--text); text-decoration: none; font-size: .85rem; padding: .3rem 0;
}
.account-ticket-row:hover .account-ticket-row-subject { color: var(--ice); }
.account-ticket-row-subject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.account-quick-links { display: flex; flex-direction: column; gap: .65rem; }
.account-quick-links a { color: var(--text); font-size: .88rem; font-weight: 600; text-decoration: none; }
.account-quick-links a:hover { color: var(--ice); }

.account-view-all-link { color: var(--ice); font-size: .78rem; font-weight: 700; text-decoration: none; }
.account-view-all-link:hover { text-decoration: underline; }

.dash-error-banner {
  background: rgba(255, 90, 95, .12); border: 1px solid rgba(255, 90, 95, .4); color: #ff9a9d;
  font-size: .88rem; font-weight: 600; padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem;
}

.card { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; }
.card h1 { font-size: 1.5rem; font-family: var(--display); }
.card .lede { color: var(--dim); font-size: .92rem; margin-top: -.75rem; }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.field label { font-size: .82rem; color: var(--dim); font-weight: 600; }
.required-asterisk { color: var(--blood); font-weight: 700; }
.field input {
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text);
  padding: .7rem .85rem; font-size: .95rem; font-family: var(--body);
}
.field input:focus { outline: 2px solid var(--ice); outline-offset: 1px; }
.field textarea {
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text);
  padding: .7rem .85rem; font-size: .95rem; font-family: var(--body); resize: vertical; min-height: 120px;
}
.field textarea:focus { outline: 2px solid var(--ice); outline-offset: 1px; }
/* Ticket compose boxes (new ticket + reply, both player and staff side) -
   a long message shows its own scrollbar, so it gets the same custom
   thin/themed treatment as every other scrollable box on the site. */
.message-field textarea, #reply-body {
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.message-field textarea::-webkit-scrollbar, #reply-body::-webkit-scrollbar { width: 8px; }
.message-field textarea::-webkit-scrollbar-track, #reply-body::-webkit-scrollbar-track { background: transparent; }
.message-field textarea::-webkit-scrollbar-thumb, #reply-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.message-field textarea::-webkit-scrollbar-thumb:hover, #reply-body::-webkit-scrollbar-thumb:hover { background: var(--ice); }

/* New Ticket form's per-category custom fields (see ticketCategoryFields.js) -
   #custom-fields-container is populated client-side, one .field per
   question, with this as the section divider for grouped questions
   (e.g. Staff Application's General/Scenario split). */
#custom-fields-container { display: flex; flex-direction: column; gap: 1rem; }
.custom-field-section-label {
  font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--ice);
  padding-top: .5rem; border-top: 1px solid var(--line);
}
#custom-fields-container > .custom-field-section-label:first-child { padding-top: 0; border-top: 0; }
#custom-fields-container textarea { min-height: 90px; }
.field select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text);
  padding: .7rem 2.4rem .7rem .85rem; font-size: .95rem; font-family: var(--body); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237ee8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 18px;
}
.field select:hover { border-color: var(--ice); }
.field select:focus { outline: 2px solid var(--ice); outline-offset: 1px; }
.field select:disabled { opacity: .7; cursor: not-allowed; }
.field input:disabled, .field input[readonly] { opacity: .8; cursor: not-allowed; }
.field-note { color: var(--dim); font-size: .78rem; }
/* The dropdown's own popup list is largely browser/OS-controlled (Chrome
   on Windows especially), so this only fully applies in some browsers -
   it's the most control CSS actually has over a native <select>'s options
   without replacing it with a custom-built dropdown component. */
.field select option { background: var(--ink-2); color: var(--text); }

.ticket-status-badge.open { color: #5ee29a; border-color: transparent; background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, linear-gradient(90deg, #5ee29a, #2ec4b6) border-box; }
.ticket-status-badge.closed { color: var(--dim); border-color: var(--line-strong); }

/* Pulsing notification pulse, shared by the nav-item badge and the
   per-ticket bell badge - a ringing box-shadow plus a slight scale pop,
   tuned to actually catch your eye rather than just a subtle glow. */
@keyframes ticket-badge-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,23,68,.7); transform: scale(1); }
  50% { box-shadow: 0 0 0 9px rgba(255,23,68,0); transform: scale(1.15); }
  100% { box-shadow: 0 0 0 0 rgba(255,23,68,0); transform: scale(1); }
}
.is-pulsing { animation: ticket-badge-pulse 1.4s ease-in-out infinite; }

/* Admin ticket list - a plain table; an unread row gets a bold subject and
   its own pulsing "!" indicator, in its own column, separate from the
   subject itself (not inline with it). */
.admin-welcome h1 { display: flex; align-items: center; gap: .7rem; }
.ticket-row-unread td:nth-child(2) a { font-weight: 800; color: var(--text); }
.ticket-unread-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #ff1f4b, #c40024); color: #fff;
  font-size: 11px; font-weight: 900; line-height: 1;
}
.admin-table th.ticket-unread-col, .admin-table td.ticket-unread-col { width: 28px; padding-right: 0; }

/* Tickets overview page layout: main column (Assigned-to-you highlight +
   the status table) plus a sidebar of three stat cards, all sharing the
   same card look the ticket detail page already established. */
.tickets-page-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }
@media (max-width: 900px) { .tickets-page-layout { grid-template-columns: 1fr; } }

/* Overview page: same two-column idea (main stats + a sidebar), but a
   plain flowing grid - no viewport-height-fill/scroll behavior, since
   this page's content is meant to read top-to-bottom, not scroll inside
   a fixed box the way a table does. */
.overview-page-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }
.overview-main-stack { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
@media (max-width: 900px) { .overview-page-layout { grid-template-columns: 1fr; } }

/* Staff Online sidebar card - avatar with a presence dot, name + gradient
   rank underneath. Offline staff stay listed (so you can see the full
   roster at a glance) but dimmed, sorted to the bottom. */
.staff-presence-row { display: flex; align-items: center; gap: .7rem; padding: .4rem 0; }
.staff-presence-avatar {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--ink-2); border: 1px solid var(--line-strong);
}
.staff-presence-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.staff-presence-dot {
  position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--dim); border: 2px solid var(--ink-1);
}
.staff-presence-dot.is-online { background: #5ee29a; box-shadow: 0 0 6px rgba(94,226,154,.7); }
.staff-presence-info { min-width: 0; }
.staff-presence-name { font-weight: 700; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-presence-sub { font-size: .76rem; color: var(--dim); }

.ticket-main-stack { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.ticket-list-card {
  background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem;
}
/* Toolbar row: status tabs on the left, search on the right. */
.ticket-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* Segmented pill tab switch - same look as the Promotion page's
   Templates/Recent Posts toggle (.promotion-tab-switch/.promotion-tab-btn). */
.ticket-tab-buttons {
  display: flex; gap: 2px; background: var(--ink-2); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 3px; flex-wrap: wrap;
}
.ticket-tab-btn {
  display: inline-flex; align-items: center; border: none; background: none; color: var(--dim);
  cursor: pointer; text-align: center; text-decoration: none; font-size: .85rem; font-weight: 700;
  padding: .5rem 1.1rem; border-radius: 999px; transition: background .15s ease, color .15s ease;
}
.ticket-tab-btn:hover { color: var(--text); }
.ticket-tab-btn.is-active { background: var(--ink-1); color: var(--ice); }
.ticket-search-input {
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text);
  padding: .5rem .8rem; font-size: .85rem; font-family: var(--body); min-width: 220px; flex: 1 1 220px; max-width: 320px;
}
.ticket-search-input:focus { outline: 2px solid var(--ice); outline-offset: 1px; }
.ticket-search-input { margin-left: auto; }

/* Logs page filters - real server-side narrowing (see adminLogs.js), not
   just a client-side sort of whatever's already on screen. */
.log-filter-group { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
.log-filter-group .custom-select { width: 160px; flex: none; }
.log-filter-select {
  margin-left: 0; min-width: 140px; max-width: 180px; flex: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%237ee8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .6rem center; background-size: 16px; padding-right: 2rem;
}

/* Bulk-action bar (Users and Tickets pages) - appears in place of empty
   space/the status tabs once at least one row is checked. */
.users-bulk-bar { display: flex; align-items: center; }
.users-bulk-default { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: var(--dim); }
.users-bulk-bar .delete-confirm { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.users-bulk-bar .confirm-text { font-size: .82rem; color: #ff9a9d; font-weight: 600; }
.users-bulk-bar .btn:hover { background: var(--ink-2); border-color: var(--ice); color: var(--ice); }
.users-bulk-bar .btn-danger:hover { color: #ff9a9d; }

/* Custom checkbox (select-all + per-row) matching the site's rounded,
   gradient-accent look instead of the browser's native box. */
.custom-checkbox {
  appearance: none; -webkit-appearance: none; margin: 0; position: relative; flex: none;
  width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line-strong);
  background: var(--ink-2); cursor: pointer; vertical-align: middle;
  transition: background .15s ease, border-color .15s ease;
}
.custom-checkbox:hover { border-color: var(--ice); }
.custom-checkbox:checked { background: linear-gradient(135deg, #00e5ff, #4d8fff); border-color: transparent; }
.custom-checkbox:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px;
  border: solid #04141c; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.custom-checkbox:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }

/* Sortable column headers - click to sort, click again to reverse. */
.admin-table th.sortable { cursor: pointer; user-select: none; }
.admin-table th.sortable:hover { color: var(--ice); }
.admin-table th.sortable .sort-arrow { margin-left: .3rem; font-size: .7em; }
.admin-table th.sortable.is-sorted { color: var(--ice); }

/* The whole ticket row is clickable (not just the subject text), so the
   subject link drops its underline - it no longer needs to signal "this
   bit specifically is the link" since the entire row already is one. A
   clearly-tinted hover (not just a faint shade) marks which row you're
   actually about to open. */
#ticket-rows tr[data-ticket-id] { cursor: pointer; transition: background .12s ease; }
#ticket-rows tr[data-ticket-id]:hover { background: rgba(0, 229, 255, .1); }
#ticket-rows td a { text-decoration: none; color: inherit; }
.ticket-subject-cell { max-width: 260px; }
.ticket-subject-cell a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tickets overview (and Logs, which reuses this same layout) page: the
   table card fills the rest of the viewport (same idea as the ticket
   detail page's thread box) so you can see at a glance how many rows fit
   before you'd need to scroll - and once there are more than that, the
   table body itself grows a scrollbar instead of the whole page growing
   taller. min-height:0 on every link of this chain matters - without it,
   a flex/grid item's default content-based minimum size wins over the
   explicit height above it, and the "don't grow the page" part silently
   stops working once there's enough content to want to. */
.tickets-page-layout { height: calc(100vh - 145px); }
.ticket-main-stack { align-self: stretch; height: 100%; min-height: 0; }
/* .fill-scroll opts a specific card into the fill-and-scroll treatment -
   deliberately NOT every .ticket-list-card in a stack, since a page like
   Users has a second, normal-height card (Accounts) above the table that
   should stay its natural size instead of sharing the flex space. */
.ticket-main-stack .ticket-list-card.fill-scroll { flex: 1 1 auto; min-height: 0; }
.ticket-main-stack .ticket-list-card.fill-scroll .table-wrap {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.ticket-main-stack .ticket-list-card.fill-scroll .table-wrap::-webkit-scrollbar { width: 8px; }
.ticket-main-stack .ticket-list-card.fill-scroll .table-wrap::-webkit-scrollbar-track { background: transparent; }
.ticket-main-stack .ticket-list-card.fill-scroll .table-wrap::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.ticket-main-stack .ticket-list-card.fill-scroll .table-wrap::-webkit-scrollbar-thumb:hover { background: var(--ice); }

/* The header row stays pinned while the body scrolls beneath it, so Time/
   Staff/Action/Detail (or Subject/Category/etc.) are always visible no
   matter how far down you've scrolled. */
.ticket-main-stack .ticket-list-card.fill-scroll .table-wrap thead th {
  position: sticky; top: 0; z-index: 2; background: var(--ink-2);
}

/* Console page's version of the same fill-and-scroll idea - the output
   pane grows to fill the card instead of a flat 480px, with the toolbar
   and input row staying put at top/bottom. */
.ticket-main-stack .ticket-list-card.fill-scroll .console-layout {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch;
}
.ticket-main-stack .ticket-list-card.fill-scroll .console-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ticket-main-stack .ticket-list-card.fill-scroll .console-output { flex: 1 1 auto; min-height: 0; height: auto; }

/* My Activity sidebar card - reuses the sidebar's own avatar+name+rank
   chip styling (left-aligned here instead of centered) plus its divider. */
.ticket-sidebar-card .admin-user-chip { justify-content: flex-start; }
.ticket-sidebar-card .admin-sidebar-divider { margin: .6rem 0; }
.ticket-sidebar-card .ticket-detail-row { align-items: center; }
.ticket-sidebar-card .ticket-detail-row .pill { flex: none; }

.ticket-list-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.ticket-list-card-head h2 { font-size: 1rem; font-weight: 700; margin: 0; }

/* Owner dashboard-visibility page: one card per admin page instead of
   three giant disconnected matrices - the "full page access" row is
   visually pulled out from the finer-grained toggles below it, and ticket
   categories get their own small divider within the Tickets card. */
.owner-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }
.owner-layout.is-single { grid-template-columns: 1fr; }
.owner-toggle input[data-locked] { cursor: not-allowed; }
.owner-sections { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (max-width: 900px) { .owner-layout { grid-template-columns: 1fr; } }
/* Staff agreement gate page - a standalone page with no dashboard chrome
   (no sidebar nav - nothing else is usable until this is signed anyway),
   just a back-to-site button, a title, and a single centered, readable
   card. */
.staff-agreement-page { min-height: 100vh; padding: 2rem 1.5rem 4rem; }
.staff-agreement-topbar { display: flex; align-items: center; gap: .9rem; max-width: 680px; margin: 0 auto 1.5rem; }
.staff-agreement-topbar h1 { font-family: var(--display); font-size: 1.3rem; font-weight: 800; }
.staff-agreement-wrap { display: flex; justify-content: center; }
.staff-agreement-card { max-width: 680px; width: 100%; display: flex; flex-direction: column; gap: .85rem; }
.staff-agreement-section-title { display: flex; flex-direction: column; }
.staff-agreement-part {
  font-family: var(--mono); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ice); margin-bottom: .25rem;
}
.staff-agreement-section h2 { font-size: 1.02rem; font-weight: 700; }
.staff-agreement-section p { font-size: .88rem; line-height: 1.6; color: var(--text); }
.staff-agreement-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .85rem; line-height: 1.5; cursor: pointer; }
.staff-agreement-check .custom-checkbox { margin-top: .15rem; }
.staff-agreement-check-all {
  font-weight: 700; padding: .75rem .9rem; background: var(--ink-2); border: 1px solid var(--line-strong);
  border-radius: 8px; margin-bottom: 1rem;
}
.staff-agreement-sign-row { display: flex; align-items: flex-end; gap: .75rem; }
.staff-agreement-name-field { flex: 1; max-width: 320px; margin-bottom: 0; }
.staff-agreement-sign-row .btn { flex: none; }
.staff-agreement-error {
  background: rgba(255, 90, 95, .12); border: 1px solid rgba(255, 90, 95, .4); color: #ff9a9d;
  font-size: .85rem; font-weight: 600; padding: .65rem .9rem; border-radius: 8px;
}
/* Bigger, clearly-a-button expand/collapse toggle for the agreement's own
   sections - still icon-only, but the plain small toggle used in tight
   sidebar cards elsewhere isn't prominent enough on a full page like
   this one. */
.staff-agreement-toggle {
  width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--ink-2); color: var(--text);
}
.staff-agreement-toggle:hover { color: var(--ice); background: var(--ink-2); border-color: var(--ice); }
.staff-agreement-toggle svg { width: 20px; height: 20px; }
/* Owner page's signature roster sidebar card - each row is the same
   avatar+name+rank chip used in the admin sidebar footer, plus a status
   badge and a View button opening the shared popup below. */
.owner-signature-list { display: flex; flex-direction: column; gap: .7rem; }
.owner-signature-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .83rem; }
.owner-signature-row .admin-user-chip { justify-content: flex-start; min-width: 0; }
.owner-signature-row .admin-user-chip .name { max-width: 110px; }
.owner-signature-right { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; flex: none; }
.status { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; white-space: nowrap; }
.status.is-signed { background: rgba(94, 226, 154, .15); color: #5ee29a; }
.status.is-pending { background: rgba(255, 90, 95, .15); color: #ff5a5f; }
.status.is-revoked { background: rgba(255, 180, 84, .15); color: #ffb454; }
.owner-pill-btn {
  flex: none; background: none; border: 1px solid var(--line-strong); color: var(--dim);
  font-size: .68rem; font-weight: 600; padding: .15rem .6rem; border-radius: 999px; cursor: pointer;
}
.owner-pill-btn:hover { color: var(--ice); border-color: var(--ice); }
/* Header "Revoke all" trigger/confirm swap, same pattern used elsewhere
   (restart card, delete buttons) - no native confirm(), no "are you
   sure" text, just the two buttons. */
.owner-revoke-all-wrap { display: flex; }
.owner-revoke-all-btn {
  background: none; border: 1px solid rgba(255, 90, 95, .4); color: #ff5a5f;
  font-size: .72rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px; cursor: pointer;
}
.owner-revoke-all-btn:hover { background: rgba(255, 90, 95, .12); }
.owner-revoke-all-confirm { display: flex; gap: .4rem; }
/* Signature "View" popup. */
.owner-signature-popup-identity { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.owner-signature-popup-identity img, .owner-signature-popup-identity .avatar-placeholder {
  width: 64px; height: 64px; border-radius: 12px; image-rendering: pixelated;
  display: flex; align-items: center; justify-content: center; background: #000; color: #fff; font-weight: 800;
}
.owner-signature-popup-identity .sidebar-rank-text { font-size: .9rem; }
.owner-signature-popup-actions { margin-top: .5rem; }
.owner-signature-popup-actions .delete-confirm { display: flex; gap: .5rem; }
.owner-signature-popup-actions .delete-confirm .btn { flex: 1; }
.owner-page-row { background: rgba(0, 229, 255, .05); }
.owner-page-row td:first-child { font-weight: 700; }
.owner-subgroup-row td {
  padding-top: 1rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim); text-align: left; border-top: 1px solid var(--line);
}

/* Logs page action pills - each action type gets its own color language,
   distinct from priority pills so the two never get visually confused. */
.log-action-pill { font-weight: 700; }
.log-action-pill.log-action-console_command { color: #ffb454; border-color: rgba(255,180,84,.55); background: rgba(255,180,84,.14); }
.log-action-pill.log-action-console_restart { color: #ff5a5f; border-color: rgba(255,90,95,.6); background: rgba(255,90,95,.16); }
.log-action-pill.log-action-ticket_view { color: var(--ice); border-color: rgba(0,229,255,.5); background: rgba(0,229,255,.12); }
.log-action-pill.log-action-ticket_reply { color: #5ee29a; border-color: rgba(94,226,154,.5); background: rgba(94,226,154,.14); }
.log-action-pill.log-action-ticket_create { color: #c9a2ff; border-color: rgba(201,162,255,.5); background: rgba(201,162,255,.14); }
.log-detail { color: var(--dim); font-size: .85rem; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Board category pills - same colored border/bg/text language as the Logs
   page's action pills, one fixed color per category so a glance at a card
   tells you what kind of thing it is before reading the title. */
.board-category-pill { font-weight: 700; }
.board-category-pill.board-category-general { color: #9aa6c0; border-color: rgba(154,166,192,.5); background: rgba(154,166,192,.14); }
.board-category-pill.board-category-bug { color: #ff5a5f; border-color: rgba(255,90,95,.55); background: rgba(255,90,95,.16); }
.board-category-pill.board-category-feature { color: var(--ice); border-color: rgba(0,229,255,.5); background: rgba(0,229,255,.12); }
.board-category-pill.board-category-improvement { color: #5ee29a; border-color: rgba(94,226,154,.5); background: rgba(94,226,154,.14); }
.board-category-pill.board-category-task { color: #c9a2ff; border-color: rgba(201,162,255,.5); background: rgba(201,162,255,.14); }
.board-category-pill.board-category-infrastructure { color: #ffb454; border-color: rgba(255,180,84,.55); background: rgba(255,180,84,.14); }
.board-category-pill.board-category-event { color: #ff8cc8; border-color: rgba(255,140,200,.5); background: rgba(255,140,200,.14); }
.ticket-empty-inline { color: var(--dim); font-size: .85rem; margin: 0; }

.priority-pill.priority-low { color: var(--dim); border-color: var(--line-strong); background: rgba(255,255,255,.05); font-weight: 700; }
.priority-pill.priority-medium { color: #ffb454; border-color: rgba(255,180,84,.55); background: rgba(255,180,84,.16); font-weight: 700; }
.priority-pill.priority-high { color: #ff5a5f; border-color: rgba(255,90,95,.6); background: rgba(255,90,95,.16); font-weight: 700; }

/* Same color language applied to the actual editable dropdown in the
   ticket detail sidebar, not just the read-only list-page pill. */
.ticket-sidebar-card select.priority-low { color: var(--dim); }
.ticket-sidebar-card select.priority-medium { color: #ffb454; border-color: rgba(255,180,84,.5); }
.ticket-sidebar-card select.priority-high { color: #ff5a5f; border-color: rgba(255,90,95,.6); }

/* Shared toolbar-header for both player ticket pages (New Ticket, and the
   thread/detail view below) - same round back-button + title pattern the
   admin ticket detail page uses, inside a .page-head band with a
   brighter, more obvious version of the gradient glow every other public
   page uses, and tighter padding so the page sits high instead of
   centered in a tall band. */
.ticket-glow-head {
  border-bottom: none;
  background: radial-gradient(55% 140% at 85% 0%, rgba(47,107,255,.4), rgba(126,232,255,.12) 45%, transparent 75%);
}
.ticket-glow-head .wrap { padding-block: 1.5rem 1.25rem; }

/* Player-facing "New Ticket" page - a wide two-column layout (form + a
   tips sidebar) instead of a narrow centered column, so the page uses the
   site's normal full width. */
.ticket-new-band { padding-block: 0 clamp(2.5rem, 6vw, 4rem); }
.ticket-new-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }
/* Sized to whatever the selected category's form actually needs (a 2-field
   category like Ban Appeal stays short, Staff Application's 13 questions
   grow the card) - no cap, the card just grows downward with its content
   instead of scrolling internally. */
.ticket-new-card { display: flex; flex-direction: column; height: auto; box-sizing: border-box; box-shadow: 0 20px 50px -30px rgba(0,0,0,.6); }
.ticket-new-card .message-field textarea { min-height: 160px; resize: vertical; }
.ticket-tip-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .55rem; font-size: .85rem; color: var(--dim); line-height: 1.45; }
.ticket-tip-list strong { color: var(--text); }
.ticket-tip-list code {
  font-family: var(--mono); font-size: .78em; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 4px; padding: .05rem .3rem; color: var(--ice);
}
.ticket-sidebar-text { font-size: .85rem; color: var(--dim); line-height: 1.5; margin: 0; }
.ticket-sidebar-text a { text-decoration: none; }
.ticket-sidebar-text a:hover { text-decoration: underline; }
@media (max-width: 900px) { .ticket-new-layout { grid-template-columns: 1fr; } }

/* Player-facing ticket thread/detail page - same wide layout idea as New
   Ticket (main column + a 300px details sidebar). The thread card's height
   is viewport-relative (not a fixed px guess) so it fills the screen the
   same way the admin dashboard's own ticket view does, with the
   conversation scrolling inside it instead of making the whole page tall. */
.ticket-chat-band { padding-block: 0 clamp(2.5rem, 6vw, 4rem); }
.ticket-chat-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; align-items: start; }
.ticket-chat-layout .ticket-thread-card {
  height: calc(100vh - 280px); min-height: 400px; box-sizing: border-box; box-shadow: 0 20px 50px -30px rgba(0,0,0,.6);
}
.ticket-chat-layout .ticket-thread { flex: 1 1 auto; min-height: 0; max-height: none; gap: .6rem; }

/* Each viewer sees their OWN messages on the right and the other side on
   the left (like any normal chat app) - this is the player's view, so it's
   the exact mirror of the base .ticket-msg-row.is-staff rule that puts
   staff on the right for everyone by default (which is what the admin
   dashboard's own thread view still uses, unscoped). */
.ticket-chat-layout .ticket-msg-row { align-self: flex-end; flex-direction: row-reverse; }
.ticket-chat-layout .ticket-msg-row .ticket-msg-footer { flex-direction: row-reverse; }
.ticket-chat-layout .ticket-msg-row.is-staff { align-self: flex-start; flex-direction: row; }
.ticket-chat-layout .ticket-msg-row.is-staff .ticket-msg-footer { flex-direction: row; }

/* Smaller message rows on this page specifically - more of the
   conversation fits in the (now also shorter) thread box without
   scrolling, rather than a few large bubbles filling it up. */
.ticket-chat-layout .ticket-msg-row { gap: .5rem; }
.ticket-chat-layout .ticket-msg-avatar { width: 26px; height: 26px; border-radius: 7px; }
.ticket-chat-layout .ticket-msg { padding: .55rem .7rem; }
.ticket-chat-layout .ticket-msg-author { font-size: .76rem; margin-bottom: .2rem; }
.ticket-chat-layout .ticket-msg-body { font-size: .84rem; line-height: 1.4; margin-bottom: .35rem; }
.ticket-chat-layout .ticket-msg-footer { font-size: .66rem; }
/* Reply box stays as compact as the admin panel's own version - the
   thread above it is what should get the extra room. */
.ticket-chat-layout #reply-body { min-height: 64px; }
@media (max-width: 900px) { .ticket-chat-layout { grid-template-columns: 1fr; } .ticket-chat-layout .ticket-thread-card { height: calc(100vh - 260px); } }

/* Minecraft username pulled from a linked account - visibly locked
   (dashed border, muted fill, trailing lock icon) rather than just a
   plain readonly input that looks editable at a glance. */
.locked-field { position: relative; }
.locked-field input {
  width: 100%; box-sizing: border-box;
  padding-right: 2.6rem; background: var(--ink-1); border-style: dashed; color: var(--dim); cursor: not-allowed;
}
.locked-field-icon {
  position: absolute; top: 50%; right: .85rem; transform: translateY(-50%);
  display: flex; color: var(--dim); pointer-events: none;
}
.locked-field-icon svg { width: 16px; height: 16px; }
.linked-pill {
  display: inline-flex; align-items: center; font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 999px;
  background: rgba(126,232,255,.12); color: var(--ice); margin-right: .3rem;
}

/* Player-facing "My Tickets" page - built from the same pieces the rest
   of the public site uses (server-info.html's section-head/eyebrow,
   gradient stat-box numbers, and bordered icon-swatch rows), not the
   admin panel's card/table look. */
.ticket-hero-band { padding-block: clamp(1.75rem, 4vw, 2.75rem); }
.ticket-hero-head { align-items: center; text-align: center; max-width: 56ch; margin-inline: auto; gap: .75rem; }
.ticket-hero-head h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }

/* Standalone /account/login page - built from the exact same pieces as
   the Tickets page (ticket-hero-band hero + a ticket-list-card box with a
   ticket-tab-buttons pill switch), instead of the old bare .card form.
   The Login/Create Account fields reuse the .account-panel/.field/
   .pw-requirements/.account-error markup and behavior the navbar's own
   login dropdown already uses (site.css), just inside one bigger card
   with the two sections toggled by tab instead of a 380px dropdown. */
.auth-band { padding-top: clamp(2rem, 5vw, 3rem); }
.auth-card { max-width: 480px; margin-inline: auto; width: 100%; }
.auth-tab-buttons { justify-content: center; }
.auth-tab-buttons .ticket-tab-btn { flex: 1; justify-content: center; }
.auth-panel { display: flex; flex-direction: column; gap: 1.1rem; }
.auth-panel-head { text-align: center; }
.auth-panel-head h3 { font-family: var(--display); font-weight: 800; font-size: 1.3rem; margin-bottom: .35rem; }
.auth-panel-head p { color: var(--dim); font-size: .88rem; line-height: 1.4; }
.auth-inline-form { display: inline; }

.discord-link-card {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 1.75rem;
  background: var(--ink-2); border: 1px solid rgba(88,101,242,.35); border-radius: 14px;
  padding: 1rem 1.25rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  transition: border-color .15s ease;
}
.discord-link-card:hover { border-color: #5865f2; }
.discord-link-card-icon {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(88,101,242,.15); color: #5865f2;
}
.discord-link-card-icon svg { width: 20px; height: 20px; }
.discord-link-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .3rem; text-align: left; min-width: 0; }
.discord-link-card-body h3 { margin: 0; font-size: .95rem; color: var(--text); }
.discord-link-card-body p { margin: 0; font-size: .8rem; color: var(--dim); line-height: 1.45; }
.discord-link-card-btn { flex: none; gap: .4rem; }
@media (max-width: 700px) {
  .discord-link-card { flex-direction: column; align-items: flex-start; }
  .discord-link-card-btn { align-self: stretch; justify-content: center; }
}
.ticket-history-band { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.ticket-history-head { margin-top: 0; margin-bottom: 1.25rem; }

.ticket-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.ticket-card {
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1.35rem; background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ticket-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.4); }
.ticket-card.has-new-reply { border-color: rgba(255,31,75,.5); }
.ticket-card-top { display: flex; gap: .9rem; align-items: flex-start; }
/* Priority is a staff-only concept - a player never sees it colored or
   labeled anywhere on their own ticket list, so every card's icon badge
   uses the same fixed accent regardless of the ticket's actual priority. */
.ticket-card-icon {
  position: relative; flex: none; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-2); border: 1.5px solid var(--line-strong); color: var(--ice);
}
.ticket-card-icon svg { width: 20px; height: 20px; }
/* New-reply indicator - a small pulsing "!" circle on the icon's corner,
   not a text pill, so it reads as a notification dot at a glance. */
.ticket-card-reply-dot {
  position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff1f4b, #c40024); color: #fff;
  font-size: 11px; font-weight: 900; line-height: 1; border: 2px solid var(--ink-1);
}
.ticket-card-head { min-width: 0; }
.ticket-card-subject {
  font-family: var(--display); font-weight: 800; font-size: 1.02rem; line-height: 1.3; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ticket-card-meta { color: var(--dim); font-size: .82rem; margin-top: .35rem; }
.ticket-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
  padding-top: 1rem; border-top: 1px solid var(--line); margin-top: auto;
}
.ticket-card-tags { display: flex; gap: .5rem; flex-wrap: wrap; }
.ticket-card-date { color: var(--dim); font-size: .78rem; white-space: nowrap; }
@media (max-width: 560px) { .ticket-card-grid { grid-template-columns: 1fr; } }

.ticket-empty-state {
  text-align: center; color: var(--dim); padding: 3.5rem 1.5rem; border: 1px dashed var(--line-strong);
  border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.ticket-empty-state img { width: 48px; height: 48px; opacity: .6; }
.ticket-empty-state p { max-width: 40ch; }

/* Ticket conversation thread */
.ticket-thread-card {
  position: relative; background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem;
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.6);
}
/* Auto-scrolling, fixed-height panel - a long thread scrolls inside this
   box instead of pushing the whole page taller and taller. Deliberately
   NOT scroll-behavior: smooth - every "jump to bottom" in ticketForm.js /
   adminTicketDetail.ejs sets scrollTop directly and expects it to land
   instantly; smooth-scrolling turned each one into a brief animation, so
   a screenshot (or just a quick glance) taken mid-animation looked like
   it had stopped short of the real bottom even though the target was
   already correct.
   overflow-anchor: none is the other half of that same class of bug -
   the browser's own automatic "scroll anchoring" tries to keep whatever
   content is currently in view from visually jumping whenever something
   on the page resizes (e.g. an attachment image finishing its decode and
   taking on its real height), by quietly adjusting scrollTop itself. On
   a first-ever visit, images are still resolving their size as the page
   settles, so the browser keeps nudging scrollTop to compensate WHILE our
   own JS is also trying to pin it to the bottom - the two fight, and the
   browser's own adjustment can win, leaving it short of the true bottom.
   On a cached reload every image's size is already known before the
   first layout pass, so there's nothing left to compensate for and it
   lands correctly. Disabling anchoring here means our own JS is the only
   thing ever moving this box's scroll position. */
.ticket-thread {
  display: flex; flex-direction: column; gap: 1rem;
  max-height: 360px; overflow-y: auto; overflow-x: hidden;
  padding-right: .4rem; overflow-anchor: none;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}

/* Admin detail page only: the WHOLE main column (header toolbar + thread
   card) is sized to reach the bottom of the viewport, and the thread card
   fills whatever's left over after the toolbar's own natural height - so
   nothing here is a guessed px budget that can drift and cause a stray
   page scrollbar. Inside the thread card, the thread is the flexible part
   and the composer is sized to its own content, so attaching a file
   (which grows the composer) eats into the thread's space from below -
   visually pushing the split line UP - instead of growing the whole
   card/page downward. The connected thread card also gets its top
   padding removed, so content starts right at the divider line instead
   of leaving a gap ("lip") above it. */
.ticket-detail-layout { align-items: stretch; height: calc(100vh - 145px); }
.ticket-detail-layout .ticket-main-col { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.ticket-detail-layout .ticket-thread-card.is-connected {
  box-sizing: border-box; display: flex; flex-direction: column;
  flex: 1 1 auto; min-height: 0;
}
.ticket-detail-layout .ticket-thread-card.is-connected .ticket-thread {
  flex: 1 1 auto; min-height: 110px; max-height: none; height: auto; overflow-y: auto;
}
.ticket-detail-layout .ticket-thread-card.is-connected #reply-section { flex: none; }
/* The typing box itself stays compact - it's the thread above that should
   get the extra room, not the textarea. */
.ticket-detail-layout #reply-body { min-height: 64px; }
.ticket-thread-card.is-connected { padding-top: .35rem; }
.ticket-thread::-webkit-scrollbar { width: 8px; }
.ticket-thread::-webkit-scrollbar-track { background: transparent; }
.ticket-thread::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.ticket-thread::-webkit-scrollbar-thumb:hover { background: var(--ice); }
.ticket-msg-row { display: flex; gap: .7rem; max-width: 85%; align-self: flex-start; }
.ticket-msg-row.is-staff { align-self: flex-end; flex-direction: row-reverse; }

/* Admin Chat tab + the Teams detail popup's own chat log - a read-only
   scrollback with a real avatar per row (the sender's Minecraft head for
   a game-side message, a generic Discord mark for a Discord-side one -
   there's no per-user Discord avatar synced, just the author's name). */
.chat-thread { max-height: calc(100vh - 320px); display: flex; flex-direction: column; gap: .15rem; }
.chat-msg-row { display: flex; gap: .65rem; padding: .5rem .2rem; border-bottom: 1px solid var(--line); }
.chat-msg-row:last-child { border-bottom: none; }
.chat-msg-avatar { width: 34px; height: 34px; border-radius: 8px; flex: none; image-rendering: pixelated; object-fit: cover; }
.chat-msg-avatar-discord { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #5865f2; }
.chat-msg-avatar-system { display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #6b7280; }
.chat-msg-avatar-fallback {
  width: 34px; height: 34px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--ink-2); color: var(--dim); font-weight: 800; font-size: .9rem;
}
.chat-msg-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.chat-msg-head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.chat-msg-author { font-weight: 700; font-size: .85rem; }
.chat-msg-text { font-size: .88rem; color: var(--text); white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
.chat-msg-time { align-self: flex-end; font-size: .68rem; color: var(--dim); font-family: var(--mono); }
.cause-breakdown { display: flex; flex-direction: column; gap: .65rem; }
.cause-breakdown-full { gap: 1.1rem; padding: 1.2rem; }
.cause-breakdown-full .cause-label { font-size: .92rem; }
.cause-breakdown-full .cause-count { font-size: .8rem; }
.cause-breakdown-full .cause-bar-track { height: 9px; }
.cause-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.cause-label { font-size: .78rem; font-weight: 600; color: var(--text); }
.cause-count { font-size: .72rem; font-family: var(--mono); color: var(--dim); flex: none; }
.cause-bar-track { height: 6px; border-radius: 999px; background: var(--ink-2); overflow: hidden; }
.cause-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff5a5f, #ff8a5f); }

.chat-direction-pill { font-weight: 700; margin-left: 0; }
.chat-direction-pill.chat-direction-game { color: #5ee29a; border-color: rgba(94,226,154,.5); background: rgba(94,226,154,.12); }
.chat-direction-pill.chat-direction-discord { color: #8b93ff; border-color: rgba(88,101,242,.5); background: rgba(88,101,242,.15); }
.chat-direction-pill.chat-direction-system,
.chat-direction-pill.chat-direction-presence { color: #c4c9d4; border-color: rgba(107,114,128,.5); background: rgba(107,114,128,.18); }

/* Admin Chat page (Server / Private / Staff) - each message is its own
   bubble sized to its text (up to ~75% of the thread), with a colored edge
   for its side (SMP green, Discord blurple, System gray). Consecutive
   messages from the same sender within a few minutes stack without a
   repeated avatar/name; a day separator splits the scrollback by date.
   Scoped to .chat-card so the Teams popup's compact chat log is unchanged. */
.chat-card { gap: .85rem; }
/* The chat box: status bar on top (same look as the Console toolbar),
   scrolling thread, and - on Server/Staff Chat - a composer at the bottom. */
.chat-box {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.chat-box-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  padding: .5rem .9rem; border-bottom: 1px solid var(--line); background: var(--ink-1);
}
.chat-status { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--dim); font-family: var(--mono); }
.chat-card .chat-thread {
  flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; display: flex; flex-direction: column; gap: .35rem;
  padding: .9rem .9rem 1rem; background: transparent; border: none; border-radius: 0;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.chat-composer {
  display: flex; align-items: center; gap: .6rem; flex: none; padding: .6rem .75rem;
  border-top: 1px solid var(--line); background: var(--ink-1);
}
.chat-composer input {
  flex: 1; min-width: 0; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px;
  color: var(--text); padding: .55rem .75rem; font: inherit; font-size: .88rem;
}
.chat-composer input:focus { outline: 2px solid var(--ice); outline-offset: 1px; }
.chat-composer-avatar { width: 30px; height: 30px; border-radius: 7px; flex: none; image-rendering: pixelated; }
.chat-composer-disabled { color: var(--dim); font-size: .82rem; justify-content: center; }
.chat-composer input:disabled { opacity: .55; cursor: not-allowed; }
.chat-composer input:disabled::placeholder { color: var(--dim); font-style: italic; }

/* Pulsing status dot - green (online), yellow (reconnecting), red (offline). */
.status-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #6b7280; }
.status-dot.is-green { background: #5ee29a; animation: status-pulse-green 1.8s ease-in-out infinite; }
.status-dot.is-yellow { background: #f5a623; animation: status-pulse-yellow 1.2s ease-in-out infinite; }
.status-dot.is-red { background: #ff5a5f; animation: status-pulse-red 1.8s ease-in-out infinite; }
@keyframes status-pulse-green { 0%, 100% { box-shadow: 0 0 0 0 rgba(94,226,154,.55); } 50% { box-shadow: 0 0 0 5px rgba(94,226,154,0); } }
@keyframes status-pulse-yellow { 0%, 100% { box-shadow: 0 0 0 0 rgba(245,166,35,.6); } 50% { box-shadow: 0 0 0 5px rgba(245,166,35,0); } }
@keyframes status-pulse-red { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,90,95,.6); } 50% { box-shadow: 0 0 0 5px rgba(255,90,95,0); } }
@media (prefers-reduced-motion: reduce) { .status-dot { animation: none !important; } }
.chat-online-title { display: flex; align-items: center; gap: .5rem; }
.chat-card .chat-thread::-webkit-scrollbar { width: 8px; }
.chat-card .chat-thread::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.chat-card .chat-msg-row { display: flex; align-items: flex-start; gap: .65rem; padding: 0; border-bottom: none; margin-top: .45rem; }
.chat-card .chat-msg-row.is-grouped { margin-top: 0; }
.chat-card .chat-msg-avatar, .chat-card .chat-msg-avatar-spacer { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.chat-card .chat-msg-avatar-spacer { height: 0; }
.chat-avatar-fallback {
  display: flex; align-items: center; justify-content: center; background: var(--ink-1); color: var(--dim);
  font-weight: 800; font-size: .9rem; border: 1px solid var(--line);
}
.chat-bubble {
  width: fit-content; max-width: min(75%, 760px); min-width: 0; display: flex; flex-direction: column; gap: .25rem;
  padding: .5rem .8rem .55rem; background: var(--ink-1); border: 1px solid var(--line);
  border-left: 3px solid #5ee29a; border-radius: 12px;
}
.chat-bubble-discord { border-left-color: #5865f2; }
.chat-bubble-web { border-left-color: #35d7ff; }
.chat-bubble-system { border-left-color: #8b93a3; background: rgba(107,114,128,.10); }
.chat-bubble-presence { border-left-color: #8b93a3; background: rgba(107,114,128,.06); }
.chat-card .chat-msg-head { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.chat-card .chat-msg-author { font-weight: 700; font-size: .86rem; color: var(--text); }
/* Compact direction pill inside a bubble (the global .pill is sized for tables). */
.chat-card .chat-direction-pill { font-size: .6rem; padding: .05rem .4rem; line-height: 1.4; letter-spacing: .02em; }
.chat-direction-pill.chat-direction-web { color: #35d7ff; border-color: rgba(53,215,255,.45); background: rgba(53,215,255,.12); }
.chat-card .chat-msg-time { margin-left: auto; padding-left: .6rem; font-size: .68rem; color: var(--dim); font-family: var(--mono); align-self: center; }
.chat-card .chat-msg-text { font-size: .9rem; line-height: 1.45; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.chat-day-separator { display: flex; align-items: center; gap: .75rem; margin: .9rem 0 .2rem; color: var(--dim); font-size: .7rem; font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.chat-day-separator::before, .chat-day-separator::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.chat-day-separator:first-child { margin-top: 0; }
.chat-empty-note { margin: auto; color: var(--dim); font-size: .88rem; text-align: center; }
.chat-search-status { font-size: .8rem; color: var(--dim); margin-top: -.25rem; }

/* Right-hand "Online" box - fills the column height and scrolls on its own. */
.chat-sidebar { align-self: stretch; height: 100%; }
.chat-online-card { flex: 1 1 auto; min-height: 0; }
.chat-online-count { font-family: var(--mono); font-size: .75rem; color: var(--dim); }
.chat-online-list {
  flex: 1 1 auto; display: flex; flex-direction: column; gap: .3rem; overflow-y: auto; min-height: 0; margin: 0 -.35rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.chat-online-row {
  display: flex; align-items: center; gap: .6rem; width: 100%; padding: .4rem .45rem; border-radius: 8px;
  background: transparent; border: 1px solid transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.chat-online-row:hover { background: var(--ink-2); border-color: var(--line); }
.chat-online-row.is-vanished { opacity: .6; }
.chat-online-avatar { width: 30px; height: 30px; border-radius: 7px; flex: none; image-rendering: pixelated; object-fit: cover; }
.chat-online-info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.chat-online-name { display: flex; align-items: center; gap: .4rem; font-size: .86rem; font-weight: 600; min-width: 0; }
.chat-online-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-online-tag {
  flex: none; font-family: var(--mono); font-size: .62rem; font-weight: 800; letter-spacing: .04em;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chat-online-nick { font-size: .74rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-online-vanished { flex: none; font-size: .6rem; color: #c4c9d4; border-color: rgba(107,114,128,.5); background: rgba(107,114,128,.18); }
.chat-online-empty { font-size: .82rem; color: var(--dim); margin: .2rem .35rem; line-height: 1.45; }
@media (max-width: 900px) {
  .chat-sidebar { height: auto; }
  .chat-online-list { max-height: 260px; }
  .chat-bubble { max-width: 100%; }
}

/* Square-with-rounded-corners avatars, not circles. A skin face (linked
   account) fills the tile; an unlinked sender gets a black tile with a
   white "?", matching the site's existing .avatar-placeholder look; the
   public page's staff messages get the branded Support tile instead of a
   real face, since staff identity is intentionally hidden there. */
.ticket-msg-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 9px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-2); border: 1px solid var(--line-strong);
}
.ticket-msg-avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.ticket-msg-avatar .avatar-placeholder-mark {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: #000; color: #fff; font-weight: 800; font-size: 1.05rem;
}
.ticket-msg-avatar.is-support {
  background: linear-gradient(135deg, #00e5ff, #4d8fff); border-color: transparent; padding: 7px; box-sizing: border-box;
}
.ticket-msg-avatar.is-support img { object-fit: contain; }

.ticket-msg { border-radius: 10px; border: 1px solid var(--line); background: var(--ink-2); padding: .8rem 1rem; min-width: 0; }
.ticket-msg-row.is-staff .ticket-msg { background: rgba(0,71,255,.1); border-color: rgba(0,71,255,.3); }
/* Admin-only note (e.g. "player rated this ticket") - never sent to the
   player, so it reads visually distinct from a real staff reply. */
.ticket-msg-row.is-staff-note .ticket-msg { background: rgba(255,180,84,.1); border-color: rgba(255,180,84,.4); }
.ticket-msg-row.is-staff-note .ticket-msg-author { color: #ffb454; }
.ticket-msg-author { display: flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--text); font-size: .85rem; margin-bottom: .35rem; }
.ticket-msg-body { font-size: .92rem; line-height: 1.5; white-space: pre-wrap; word-break: break-word; margin-bottom: .55rem; }
.ticket-msg-footer { display: flex; justify-content: space-between; gap: .75rem; font-size: .72rem; color: var(--dim); font-family: var(--mono); }
.ticket-msg-row.is-staff .ticket-msg-footer { flex-direction: row-reverse; }
.ticket-closed-notice { color: var(--dim); font-size: .88rem; text-align: center; padding: .9rem; border: 1px dashed var(--line-strong); border-radius: 10px; }
@media (max-width: 640px) { .ticket-msg-row { max-width: 100%; } .ticket-thread { max-height: 50vh; } }

/* Read-only star display - two identical rows of star SVGs stacked via
   position:absolute, the top one clipped to a width% by rating/5 so it
   can land on an exact half-star fill. Reused by the player-facing
   review card, the admin Reviews tab's table/popup, and the picker
   below (same bg/fill layers, plus a hit-row overlay). */
.star-rating { position: relative; display: inline-flex; vertical-align: middle; }
.star-rating-row { display: flex; gap: 2px; }
.star-rating-bg, .star-rating-fill { display: flex; gap: 2px; }
.star-rating-fill { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; }
.star-rating svg { width: var(--star-size, 14px); height: var(--star-size, 14px); flex: none; }
.star-rating-bg svg { color: var(--line-strong); }
.star-rating-fill svg { color: #ffd24d; }

/* Interactive picker (player-facing review form only) - 5 real buttons,
   one per star, each sized to exactly --star-size so its own
   offsetX/offsetWidth (not some computed fraction of the whole row) is
   all that's needed to tell a left-half click from a right-half one. */
.star-rating.is-picker { gap: 2px; cursor: pointer; }
.star-pick-btn {
  position: relative; width: var(--star-size, 22px); height: var(--star-size, 22px);
  background: none; border: none; padding: 0; margin: 0; flex: none; cursor: pointer;
}
.star-pick-btn:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; border-radius: 4px; }
.star-pick-bg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--line-strong); }
.star-pick-fill { position: absolute; inset: 0; overflow: hidden; width: 0; }
.star-pick-fill svg { position: absolute; top: 0; left: 0; width: var(--star-size, 22px); height: var(--star-size, 22px); color: #ffd24d; }

/* Positioned overlay, not a block in the normal flow - covers the whole
   thread card (position:relative on .ticket-thread-card above) with a
   very light veil in the site's own dark-overlay tone (same rgb as
   .death-popup-overlay's backdrop, just much lower alpha) so the chat
   is still visible through it but reads as "disabled", while the card
   itself stays pinned to the bottom/left/right edges (justify-content:
   flex-end) rather than being centered in the dimmed area. */
.ticket-review-overlay {
  position: absolute; inset: 0; z-index: 20;
  border-radius: var(--radius);
  background: rgba(5, 7, 13, .3);
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end;
  gap: 1rem; overflow-y: auto;
}
.ticket-review-card {
  background: var(--ink-1); border: 1px solid var(--line); border-left: none; border-right: none; border-bottom: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 1.1rem 1.3rem; display: flex; flex-direction: column; gap: .6rem;
  width: 100%; flex: none; box-shadow: 0 20px 50px -30px rgba(0,0,0,.6);
}
/* Final "all done" state - a centered dialog in the middle of the chat
   box instead of the bottom-docked, full-width rating forms. */
.ticket-review-overlay.is-done { justify-content: center; align-items: center; }
.ticket-review-card.ticket-review-done {
  border: 1px solid var(--line); border-radius: var(--radius);
  width: auto; max-width: 360px; align-items: center; text-align: center; padding: 1.5rem 1.6rem;
}
.ticket-review-done p { color: var(--dim); font-size: .88rem; margin: 0; }
.ticket-review-card h3 { margin: 0; font-size: 1.02rem; }
.ticket-review-sub { color: var(--dim); font-size: .85rem; margin: 0 0 .3rem; }
.ticket-review-question { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .9rem; }
.ticket-review-question label { font-size: .88rem; font-weight: 600; }
.ticket-review-question textarea {
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text);
  padding: .65rem .8rem; font-size: .88rem; font-family: var(--body); resize: vertical; min-height: 70px;
}
.ticket-review-question textarea:focus { outline: 2px solid var(--ice); outline-offset: 1px; }
.ticket-review-foot { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.ticket-review-foot button:disabled { opacity: .6; cursor: not-allowed; }
.ticket-review-error { color: #ff9a9d; font-size: .82rem; }
.ticket-review-thanks h3 { margin-bottom: .5rem; }
.ticket-review-summary-row { display: flex; align-items: center; justify-content: space-between; font-size: .88rem; gap: .6rem; }
.ticket-review-summary-row .k { color: var(--dim); flex: none; }

/* Admin Reviews tab - sidebar "Average Ratings" card rows (star display
   + numeric average + review count) and the table/popup pieces. */
.ticket-review-stat-row { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.ticket-review-stat-row .k { color: var(--dim); flex: none; }
.ticket-review-stat-value { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.ticket-review-stat-num { font-family: var(--mono); font-size: .8rem; }
.ticket-review-stat-count { color: var(--dim); }
#review-table td { vertical-align: middle; }
.ticket-review-pending { color: var(--dim); font-style: italic; font-size: .85rem; }

/* Admin ticket detail - two-column layout with a details sidebar. The
   header (back button/title/meta/toolbar) and the thread box are styled
   as one visually connected unit - header keeps its bottom border off,
   thread keeps its top border off, so the shared edge reads as one card. */
.ticket-header-card {
  background: var(--ink-1); border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0; padding: 1rem 1.4rem;
}
.ticket-header-toolbar { display: flex; gap: .4rem; flex-wrap: wrap; }
.ticket-header-toolbar form { margin: 0; }
.ticket-toolbar-btn {
  display: flex; align-items: center; gap: .45rem; padding: .5rem .8rem; border-radius: 8px;
  background: var(--ink-2); border: 1px solid var(--line-strong); color: var(--text); font-weight: 600; font-size: .85rem; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.ticket-toolbar-btn:hover { background: var(--ink-1); border-color: var(--ice); }
.ticket-toolbar-btn svg { width: 16px; height: 16px; flex: none; color: var(--dim); }
.ticket-toolbar-btn.is-danger { color: #ff9a9d; }
.ticket-toolbar-btn.is-danger svg { color: #ff9a9d; }

.ticket-thread-card.is-connected { border-top: none; border-radius: 0 0 var(--radius) var(--radius); }

/* Page-level nav row: back button + title/meta side by side, sitting above
   the ticket card rather than embedded inside it. Admin pages normally get
   generous top padding from .admin-main, but this page's content is tall
   enough on its own that we pull it up closer to the sidebar nav instead. */
.admin-main:has(.ticket-detail-layout), .admin-main:has(.tickets-page-layout) { padding-top: 1.1rem; gap: .5rem; }
.ticket-page-nav { display: flex; align-items: center; gap: .9rem; margin-bottom: 0; }
.ticket-page-title h1 { font-size: 1.25rem; margin: 0; line-height: 1.3; }
.ticket-header-meta { color: var(--dim); font-size: .82rem; margin: .2rem 0 0; }
.ticket-back-btn {
  flex: none; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--line-strong); background: var(--ink-1); color: var(--text); text-decoration: none;
}
.ticket-back-btn:hover { border-color: var(--ice); color: var(--ice); }
.ticket-back-btn svg { width: 18px; height: 18px; }

/* Fully custom dropdown (replaces a native <select> visually) - the real
   <select> stays in the DOM (hidden) so form submission is unchanged,
   this is purely a themed stand-in for its popup, which browsers mostly
   don't let CSS control directly. */
.custom-select { position: relative; }
.custom-select-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background-color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text);
  padding: .55rem .7rem; font-size: .85rem; font-family: var(--body); cursor: pointer; text-align: left;
}
.custom-select-trigger:hover, .custom-select-trigger.is-open { border-color: var(--ice); }
.custom-select-trigger svg { width: 15px; height: 15px; flex: none; color: var(--ice); transition: transform .15s ease; }
.custom-select-trigger.is-open svg { transform: rotate(180deg); }
.custom-select-trigger.priority-low { color: var(--dim); }
.custom-select-trigger.priority-medium { color: #ffb454; border-color: rgba(255,180,84,.5); }
.custom-select-trigger.priority-high { color: #ff5a5f; border-color: rgba(255,90,95,.6); }
.custom-select-menu {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; overflow-y: auto;
  max-height: 220px; box-shadow: 0 16px 36px -12px rgba(0,0,0,.7);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
/* Priority/Assign-to in the ticket sidebar sit near the bottom of a short
   card, so their menu opens upward over the trigger instead of spilling
   past the card. */
.custom-select.opens-up .custom-select-menu { top: auto; bottom: calc(100% + 4px); }
.custom-select-menu::-webkit-scrollbar { width: 8px; }
.custom-select-menu::-webkit-scrollbar-track { background: transparent; }
.custom-select-menu::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.custom-select-menu::-webkit-scrollbar-thumb:hover { background: var(--ice); }
.custom-select-option {
  display: block; width: 100%; text-align: left; padding: .55rem .7rem; background: none; border: none;
  color: var(--text); font-size: .85rem; cursor: pointer;
}
.custom-select-option:hover { background: var(--ink-1); }
.custom-select-option.is-selected { color: var(--ice); font-weight: 700; }

/* Compact reply composer - plain textarea, Send bottom-left, a square
   attach-file icon button beside it (no visible dropzone box here). */
.ticket-composer-actions { display: flex; align-items: center; gap: .5rem; }
.ticket-attach-btn {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none;
  border-radius: 8px; border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--dim); cursor: pointer; padding: 0;
}
.ticket-attach-btn:hover { border-color: var(--ice); color: var(--ice); }
.ticket-attach-btn svg { width: 18px; height: 18px; }
.ticket-detail-layout { display: grid; grid-template-columns: 1fr 300px; gap: 1.5rem; }
.ticket-detail-sidebar { display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
.ticket-sidebar-card { background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; display: flex; flex-direction: column; gap: .85rem; }
.ticket-sidebar-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
/* Collapsible card header - label plus an up/down arrow toggle that
   hides/shows everything below it (.ticket-sidebar-body carries the gap
   the card itself used to apply directly to its rows). */
.ticket-sidebar-label-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ticket-sidebar-toggle {
  flex: none; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
  background: none; border: none; color: var(--dim); cursor: pointer; border-radius: 6px;
}
.ticket-sidebar-toggle:hover { color: var(--ice); background: var(--ink-2); }
.ticket-sidebar-toggle svg { width: 14px; height: 14px; transition: transform .15s ease; }
.ticket-sidebar-toggle.is-collapsed svg { transform: rotate(180deg); }
.ticket-sidebar-body { display: flex; flex-direction: column; gap: .85rem; }

/* Death Info popups - a server-rendered PNG of the inventory (same look as
   the server's own [inv] Discord embed) and a plain totem-save timestamp
   list, both shown as a centered overlay rather than a separate page. */
.death-popup-overlay {
  position: fixed; inset: 0; background: rgba(5,7,13,.75); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 2rem;
}
/* Board popups can stack (Column View -> item detail -> attachment
   lightbox, or Column View -> item detail -> edit form), so each needs
   a higher z-index than whatever it can open on top of. */
#board-column-view-overlay { z-index: 200; }
#board-detail-overlay { z-index: 205; }
#board-form-overlay { z-index: 210; }
.death-popup {
  background: var(--ink-1); border: 1px solid var(--line-strong); border-radius: var(--radius);
  max-width: 520px; width: 100%; max-height: 80vh; overflow-y: auto;
  padding: 1.5rem; box-shadow: 0 24px 60px rgba(0,0,0,.6);
  /* Same thin, ice-hover scrollbar as the rest of the admin panel (e.g. long totem lists). */
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.death-popup::-webkit-scrollbar { width: 8px; }
.death-popup::-webkit-scrollbar-track { background: transparent; }
.death-popup::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.death-popup::-webkit-scrollbar-thumb:hover { background: var(--ice); }
.death-popup-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.1rem; }
.death-popup-head h3 { font-family: var(--display); font-size: 1.05rem; font-weight: 800; }

/* Tickets admin page's "How to handle tickets" staff guide - a view
   (?view=guide) alongside Open/Closed/Automatic Messages/Reviews, not a
   popup, so it shares the exact same tab-row active/inactive treatment. */
.ticket-guide-trigger { width: 44px; height: 44px; flex: none; }
.ticket-guide-trigger svg { width: 22px; height: 22px; }
.ticket-guide-trigger.is-active { background: var(--ink-1); color: var(--ice); border-color: var(--ice); }
.ticket-guide-body { display: flex; flex-direction: column; gap: 1.25rem; }
/* Guide/Ticket Forms detail content stays inside the exact same box/toolbar
   as the category list (no page takeover) - .ticket-back-btn (same square
   icon button as every other admin page's top-left back arrow) plus a
   plain-text label next to it is the only way back, since the surrounding
   chrome never changes. */
.ticket-guide-header-row { display: flex; align-items: center; gap: .75rem; }
.ticket-back-text { color: var(--text); font-size: .9rem; font-weight: 700; text-decoration: none; }
.ticket-back-text:hover { text-decoration: underline; }
.ticket-guide-edit-btn { margin-left: auto; }
.guide-header-actions { display: flex; align-items: center; gap: .5rem; }
/* Info button: a bare "i" glyph (no square drawn inside the square button). */
.ticket-guide-trigger svg { width: 20px; height: 20px; }
/* Same 1rem breathing room on the Info button's left as the toolbar
   already gives it on the right (before the search box). */
.ticket-tab-row-group .ticket-guide-trigger { margin-left: 1rem; }
/* "+ New Category" lives in the bottom pagination-style bar, right side. */
.guide-new-category-btn { flex: none; white-space: nowrap; margin-left: auto; }
.guide-custom-tag {
  display: inline-block; margin-left: .45rem; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); vertical-align: middle;
}
.guide-category-name-popup { max-width: 460px; }
.guide-category-name-form { display: flex; flex-direction: column; gap: 1rem; }
.guide-category-name-form .guide-editor-row-title { width: 100%; box-sizing: border-box; }
.guide-category-name-popup .account-error { margin-bottom: .75rem; }
.ticket-list-card-inner { display: flex; flex-direction: column; gap: 1rem; }
/* Guide category detail: content sits in its own inset box (same look as
   the Automatic Messages text box). The header mirrors the page's own
   top-left nav: square back arrow, title, and a small description under it. */
.ticket-guide-content-box { background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; padding: 1.25rem 1.4rem; gap: 1.25rem; }
.ticket-guide-title h2 { font-family: var(--display); font-size: 1.05rem; font-weight: 800; margin: 0; line-height: 1.3; }
.ticket-guide-title .ticket-header-meta { margin-top: .15rem; }
.ticket-guide-content-box .ticket-guide-subsection h4 {
  display: flex; align-items: center; gap: .55rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .75rem;
}
.ticket-guide-content-box .ticket-guide-subsection h4::before {
  content: ""; width: 3px; height: 1em; border-radius: 2px; background: var(--ice); flex: none;
}
.ticket-guide-content-box .ticket-tip-list { list-style: none; padding-left: 0; gap: .6rem; font-size: .92rem; line-height: 1.6; color: var(--text); }
.ticket-guide-content-box .ticket-tip-list li { position: relative; padding-left: 1.1rem; opacity: .88; }
.ticket-guide-content-box .ticket-tip-list li::before {
  content: ""; position: absolute; left: .15rem; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: var(--ice);
}
.ticket-guide-content-box .admin-sidebar-divider { margin: 0; }
/* The whole guide (every section for this scope) lives directly inside
   the page's one regular box - no nested card - so its background
   matches every other admin list/detail view. The one Edit button lives
   above the box, next to the back link, instead of inside it. */
.ticket-guide-subsection h4 { font-family: var(--display); font-weight: 800; font-size: .92rem; margin-bottom: .6rem; color: var(--ice); }
/* Guide editor popup: fixed standard size (doesn't grow/shrink with the
   number of sections), editable section list on the left scrolling on its
   own, detailed help panel on the right. */
.ticket-guide-editor-popup {
  max-width: 1320px; width: 100%; height: min(900px, 90vh); max-height: none; padding: 1.75rem 2rem;
  display: flex; flex-direction: column; overflow: hidden;
}
.guide-editor-head { align-items: flex-start; }
.guide-editor-head h3 { margin: 0; }
.guide-editor-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.5rem; }
.guide-editor-main { display: flex; flex-direction: column; min-height: 0; gap: .75rem; }
.guide-editor-main .account-error { margin: 0; }
#guide-section-editor-fields {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding-right: .35rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.guide-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .85rem; border-top: 1px solid var(--line); }
/* Right column: the same .ticket-sidebar-card boxes as the main Tickets
   page sidebar (and same .6rem stacking gap). The help card scrolls on
   its own if it runs out of room; Details stays at its natural height. */
.guide-editor-side { display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
.guide-editor-help {
  flex: 0 1 auto; overflow-y: auto; min-height: 0;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.guide-editor-help p { margin: 0; font-size: .85rem; color: var(--dim); line-height: 1.5; }
.guide-editor-help p strong { color: var(--text); }
.guide-editor-details { flex: none; }
/* Same thin ice-hover scrollbar as the fill-scroll ticket tables. */
#guide-section-editor-fields::-webkit-scrollbar, .guide-editor-help::-webkit-scrollbar { width: 8px; }
#guide-section-editor-fields::-webkit-scrollbar-track, .guide-editor-help::-webkit-scrollbar-track { background: transparent; }
#guide-section-editor-fields::-webkit-scrollbar-thumb, .guide-editor-help::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
#guide-section-editor-fields::-webkit-scrollbar-thumb:hover, .guide-editor-help::-webkit-scrollbar-thumb:hover { background: var(--ice); }
@media (max-width: 760px) {
  .ticket-guide-editor-popup { height: 90vh; }
  .guide-editor-layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .guide-editor-help { max-height: 30vh; }
}
/* Guide editor popup rows - each one a removable title+tips pair, built
   dynamically from JS (see adminTickets.ejs) so sections can be added or
   removed, not just edited. */
.guide-editor-row { display: flex; flex-direction: column; gap: .5rem; padding: .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--ink-1); }
.guide-editor-row-head { display: flex; align-items: center; gap: .5rem; }
.guide-editor-row-title {
  flex: 1; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text);
  padding: .7rem .85rem; font-size: .95rem; font-family: var(--body); font-weight: 700;
}
.guide-editor-row-title:focus { outline: 2px solid var(--ice); outline-offset: 1px; }
.guide-editor-row textarea {
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text);
  padding: .7rem .85rem; font-size: .9rem; font-family: var(--body); line-height: 1.55; min-height: 110px;
  /* No drag handle or inner scrollbar - JS auto-grows each box to fit its
     text, so only the section list itself scrolls. */
  resize: none; overflow: hidden;
}
.guide-editor-row textarea:focus { outline: 2px solid var(--ice); outline-offset: 1px; }
.guide-editor-row-remove { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--dim); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.guide-editor-row-remove:hover { color: var(--text); border-color: var(--ice); }
#guide-add-section-btn { align-self: flex-start; }
.death-inv-image { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 6px; }
.death-totem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.death-totem-list li {
  padding: .55rem .75rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--mono); font-size: .8rem; color: var(--text);
}
/* Automatic Messages - its own tab in the Tickets page's toolbar (right
   side, separated from the Open/Closed/Archived/Assigned status tabs by
   the group's own auto-margin). The category list looks like every other
   admin list table; opening one looks like a ticket's own detail page
   (two columns - editor on the left, tips on the right). */
.ticket-tab-row-group { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; }
.ticket-tab-buttons-secondary { margin-left: auto; }
.row-clickable { cursor: pointer; }
.admin-table tbody tr.row-clickable { transition: background-color .1s ease; }
.admin-table tbody tr.row-clickable:hover td { background: var(--ink-3, rgba(255, 255, 255, .06)); }
.auto-message-edit-card { display: flex; flex-direction: column; gap: 1rem; flex: 1 1 auto; min-height: 0; }
.auto-message-body-input {
  width: 100%; min-height: 360px; flex: 1 1 auto; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px;
  color: var(--text); font-family: var(--mono); font-size: .82rem; line-height: 1.5; padding: .7rem; resize: vertical;
  box-sizing: border-box;
}
.auto-message-body-input:focus { outline: 2px solid var(--ice); outline-offset: 1px; }
/* On/off toggle switch - used on the auto-message detail page's "Details"
   card header to enable/disable right from the sidebar. */
.toggle-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex: none; }
.toggle-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.toggle-switch-track {
  width: 38px; height: 21px; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 999px;
  position: relative; transition: background .15s ease, border-color .15s ease;
}
.toggle-switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--dim);
  transition: transform .15s ease, background .15s ease;
}
.toggle-switch input:checked + .toggle-switch-track { background: rgba(94, 226, 154, .18); border-color: #5ee29a; }
.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb { transform: translateX(17px); background: #5ee29a; }
.toggle-switch input:focus-visible + .toggle-switch-track { outline: 2px solid var(--ice); outline-offset: 2px; }
.death-stat-trio { display: flex; gap: .5rem; }
.death-stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 6px; padding: .45rem .3rem;
}
.death-stat .k { font-family: var(--mono); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.death-stat .v { font-weight: 700; font-size: .85rem; }
.death-btn-row { display: flex; gap: .5rem; }
.death-btn-row .btn { flex: 1; }
.death-share-btn {
  flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #35d7ff, #2563eb); border: 1px solid rgba(53,215,255,.5); border-radius: 8px;
  color: #fff; cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.death-share-btn svg { width: 16px; height: 16px; }
.death-share-btn:hover { background: linear-gradient(135deg, #5fe3ff, #3b82f6); transform: translateY(-1px); }
/* Death Info card shared into a ticket's own chat thread - same rows as
   the sidebar card, just dropped inline as a message bubble's body. */
.shared-death-info {
  display: flex; flex-direction: column; gap: .5rem; max-width: 280px;
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; padding: .75rem;
}
.ticket-detail-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; font-size: .85rem; }
.ticket-detail-row .k { color: var(--dim); flex: none; }
.ticket-detail-row .v { font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .stat-value-sub's 1.1rem is tuned for the big stat-card context (next to
   a 2.1rem main value) - in this much smaller sidebar row, that fixed size
   is actually bigger than the row's own .85rem, making the "/ 5m / 15m"
   bit read as more prominent than the 1m figure it's secondary to. */
.ticket-detail-row .v .stat-value-sub { font-size: .72rem; font-weight: 600; }
.ticket-sidebar-card .field { gap: .3rem; }
.ticket-sidebar-card .field label { font-size: .72rem; }
.ticket-sidebar-card .field select { padding: .5rem .6rem; font-size: .85rem; }
@media (max-width: 900px) { .ticket-detail-layout { grid-template-columns: 1fr; } }

/* Attachments - image thumbnails in a small grid, other files as a chip */
.ticket-msg-attachments { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
/* No fixed width/height here on purpose - the box shrink-wraps to whatever
   size the capped <img> ends up at, so a square photo gets a square box
   and a wide/tall photo keeps its own shape instead of being cropped. */
.ticket-attachment-thumb {
  display: inline-flex; max-width: 220px; max-height: 160px; min-width: 48px; min-height: 48px;
  border-radius: 8px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--ink-1);
}
.ticket-attachment-thumb img { display: block; max-width: 220px; max-height: 160px; width: auto; height: auto; }
.ticket-attachment-file {
  display: flex; flex-direction: column; gap: .6rem; padding: .65rem .8rem; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--ink-1); color: var(--text);
  font-size: .8rem; max-width: 260px;
}
.ticket-attachment-file-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ticket-attachment-file svg { flex: none; width: 16px; height: 16px; color: var(--ice); }
.ticket-attachment-file .file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ticket-attachment-file .file-size { color: var(--dim); flex: none; font-size: .7rem; }
.ticket-attachment-file-actions { display: flex; gap: .4rem; }
.ticket-attachment-file-actions > * { flex: 1; }
.ticket-attachment-download-btn, .ticket-attachment-view-btn {
  display: flex; align-items: center; justify-content: center; background: var(--ink-2);
  border: 1px solid var(--line-strong); color: var(--ice); text-decoration: none; font-weight: 700;
  font-size: .72rem; padding: .35rem .5rem; border-radius: 6px; cursor: pointer;
}
.ticket-attachment-download-btn:hover, .ticket-attachment-view-btn:hover { border-color: var(--ice); background: var(--ink-1); }
/* Inline partial preview for .txt/.log attachments - short, scrollable,
   so staff/players can glance at the content without downloading, with
   a "View full" button opening a bigger popup for the rest. */
.ticket-attachment-text { max-width: 320px; }
.ticket-attachment-text-preview {
  max-height: 90px; overflow-y: auto; margin: 0; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 6px; padding: .5rem .6rem; font-family: var(--mono); font-size: .7rem; line-height: 1.4;
  white-space: pre-wrap; word-break: break-word; color: var(--dim);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.ticket-attachment-text-preview::-webkit-scrollbar { width: 7px; }
.ticket-attachment-text-preview::-webkit-scrollbar-track { background: transparent; }
.ticket-attachment-text-preview::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.ticket-attachment-text-preview::-webkit-scrollbar-thumb:hover { background: var(--ice); }
/* Wide, horizontal-rectangle popup (not a tall square) so a line of log
   text has room to breathe before wrapping. */
.text-popup { max-width: 1100px; width: 92vw; max-height: 85vh; }
.text-popup-content {
  max-height: calc(85vh - 120px); overflow-y: auto; margin: 0; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 8px; padding: .75rem; font-family: var(--mono); font-size: .8rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.text-popup-content::-webkit-scrollbar { width: 8px; }
.text-popup-content::-webkit-scrollbar-track { background: transparent; }
.text-popup-content::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.text-popup-content::-webkit-scrollbar-thumb:hover { background: var(--ice); }
.text-popup-truncated-note { font-size: .75rem; color: var(--dim); margin-top: .5rem; }
/* Staff-only "X is typing..." indicator, shown above the reply composer -
   never rendered on the player-facing ticket page at all. */
.ticket-typing-indicator {
  font-size: .78rem; color: var(--dim); font-style: italic; padding: 0 .1rem; min-height: 1.1em;
}
/* Image attachment popup - reuses the death-popup overlay chrome, sized
   for a full-resolution image instead of fixed text content. */
/* max-height here (not inherited from .death-popup's 80vh) plus the image's
   own cap leaves room for the popup's head + padding, so the whole image
   always fits without the popup's own overflow-y:auto ever kicking in. */
.image-popup { max-width: 90vw; width: auto; max-height: 90vh; overflow: visible; }
.image-popup-img, #image-popup-img { display: block; max-width: 100%; max-height: calc(90vh - 110px); border-radius: 8px; margin: 0 auto; }
/* Board attachment popup - same component, deliberately capped smaller
   than the ticket one so a reference screenshot doesn't fill the whole
   screen; the title also carries the filename here. */

/* File picker for the reply/new-ticket forms */
.attachment-picker { display: flex; flex-direction: column; gap: .5rem; }
.attachment-drop {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 8px;
  border: 1px dashed var(--line-strong); background: var(--ink-2); color: var(--dim); font-size: .85rem; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.attachment-drop:hover, .attachment-drop.is-dragover { border-color: var(--ice); color: var(--ice); }
.attachment-drop svg { flex: none; width: 18px; height: 18px; }
.attachment-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.attachment-preview-list { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.attachment-preview-chip {
  display: flex; align-items: center; gap: .4rem; padding: .35rem .6rem; border-radius: 999px;
  background: var(--ink-2); border: 1px solid var(--line-strong); font-size: .78rem; color: var(--text);
}
.attachment-preview-chip button {
  background: none; border: none; color: var(--dim); cursor: pointer; font-size: .9rem; line-height: 1; padding: 0;
}
.attachment-preview-chip button:hover { color: #ff5a5f; }
.attachment-hint-error { color: #ff9a9d; font-size: .78rem; }

/* Discord-style preview card for an image picked but not yet sent - an
   actual thumbnail (via a local object URL, since nothing's uploaded yet)
   with a remove button that appears on hover, filename below. */
.attachment-preview-card {
  position: relative; width: 76px; min-width: 76px; max-width: 76px; flex: none;
  box-sizing: border-box; border-radius: 8px; overflow: hidden; border: 1px solid var(--line-strong); background: var(--ink-2);
}
.attachment-preview-card .thumb {
  width: 76px; height: 54px; max-width: 100%; max-height: 54px;
  object-fit: cover; object-position: center; display: block; background: var(--ink-1);
}
.attachment-preview-card .name {
  display: block; padding: .25rem .4rem; font-size: .64rem; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attachment-preview-card .remove {
  position: absolute; top: .25rem; right: .25rem; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(5,7,13,.75); color: #fff;
  border: none; cursor: pointer; opacity: 0; transition: opacity .15s ease;
}
.attachment-preview-card:hover .remove { opacity: 1; }
.attachment-preview-card .remove:hover { background: #ff5a5f; }

.error { background: rgba(255,90,95,.1); border: 1px solid rgba(255,90,95,.4); color: #ff9a9d; border-radius: 8px; padding: .75rem 1rem; font-size: .9rem; }

.switch { text-align: center; color: var(--dim); font-size: .9rem; }

.stat-row { display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; border-top: 1px solid var(--line); }
.stat-row:first-child { border-top: 0; }
.stat-row .k { color: var(--dim); font-size: .88rem; }
.stat-row .v { font-family: var(--mono); font-weight: 600; }

.pill { display: inline-flex; font-family: var(--mono); font-size: .75rem; padding: .25rem .7rem; border-radius: 999px; border: 1px solid currentColor; }
.pill.good {
  color: #5ee29a; border-color: transparent;
  background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, linear-gradient(90deg, #5ee29a, #2ec4b6) border-box;
}
.pill.dim {
  color: var(--dim); border-color: transparent;
  background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, linear-gradient(90deg, var(--line-strong), var(--dim)) border-box;
}

.rank-pill {
  font-family: var(--mono); font-weight: 700; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
  padding: .3rem .85rem; border-radius: 999px; border: 1px solid transparent;
  background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, linear-gradient(90deg, var(--rank-start), var(--rank-end)) border-box;
}
.rank-pill span {
  background: linear-gradient(90deg, var(--rank-start), var(--rank-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.code-display {
  font-family: var(--mono); font-size: 2rem; font-weight: 700; letter-spacing: .3em;
  text-align: center; padding: 1rem; background: var(--ink-2); border-radius: var(--radius); border: 1px solid var(--line-strong);
}

/* Admin panel */
.admin-welcome .admin-date { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.admin-welcome h1 { font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.4rem); margin-top: .4rem; }
.admin-welcome h1 .accent {
  background: linear-gradient(90deg, #00e5ff, #4d8fff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.admin-welcome .sub { color: var(--dim); margin-top: .5rem; font-size: .95rem; }

/* Every admin page except Overview wraps its title in .ticket-page-nav
   (back button beside it) - on those, match the exact compact sizing the
   ticket detail page's own title/meta uses, instead of the much bigger
   "Welcome back" styling above (which stays Overview-only). */
.ticket-page-nav .admin-welcome h1 { font-size: 1.25rem; font-weight: 800; margin-top: 0; }
.ticket-page-nav .admin-welcome .sub { font-size: .82rem; margin-top: .2rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; }
/* Stat cards relocated into a 300px sidebar - always one column, tighter
   gap than the wide main-column grid. */
.stat-grid-sidebar { grid-template-columns: 1fr; gap: 1rem; }
.stat-card {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.5rem; display: flex; flex-direction: column; gap: .3rem;
  transition: border-color .15s ease, transform .15s ease;
}
.stat-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.stat-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.stat-icon svg { width: 21px; height: 21px; }
.stat-pill {
  font-family: var(--mono); font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px;
  border: 1px solid transparent;
  background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, linear-gradient(90deg, var(--pill-start), var(--pill-end)) border-box;
}
.stat-pill span {
  background: linear-gradient(90deg, var(--pill-start), var(--pill-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-value-sub { font-size: 1.1rem; font-weight: 700; color: var(--dim); }

.admin-empty-card {
  background: var(--ink-2); border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 1.5rem; color: var(--dim); font-size: .9rem; text-align: center;
}

.chart-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.chart-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.chart-title { font-weight: 700; font-size: .95rem; }
.chart-sub { color: var(--dim); font-size: .82rem; margin-top: .2rem; }
.chart-sub strong { color: var(--text); }
.range-toggle { display: flex; gap: .25rem; background: var(--ink-3, rgba(255,255,255,.04)); border: 1px solid var(--line); border-radius: 999px; padding: .2rem; }
.range-btn { border: none; background: transparent; color: var(--dim); font-size: .78rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; cursor: pointer; transition: color .15s, background .15s; }
.range-btn:hover { color: var(--text); }
.range-btn.active { color: #04141c; background: linear-gradient(135deg, #35d7ff, #4d8fff); }
.chart-svg { width: 100%; height: 160px; display: block; }
.chart-svg-wrap { position: relative; }
.chart-dot { fill: #04141c; stroke: #35d7ff; stroke-width: 2; cursor: pointer; transition: r .1s; }
.chart-dot:hover, .chart-dot.hovered { stroke-width: 3; }
.chart-dot-hit { fill: transparent; cursor: pointer; }
.chart-tooltip {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -100%) translateY(-10px);
  background: var(--ink-3, #0d1b26); border: 1px solid var(--line-strong, var(--line)); border-radius: 8px;
  padding: .4rem .6rem; font-size: .78rem; line-height: 1.3; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .1s; z-index: 5;
}
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip .tt-count { font-weight: 700; color: var(--text); }
.chart-tooltip .tt-delta { margin-left: .35rem; }
.chart-tooltip .tt-delta.up { color: #5ee29a; }
.chart-tooltip .tt-delta.down { color: #ff5a5f; }
.chart-tooltip .tt-delta.flat { color: var(--dim); }
.stat-label { color: var(--dim); font-size: .84rem; font-weight: 600; }
.stat-value { font-family: var(--display); font-weight: 800; font-size: 2.1rem; font-variant-numeric: tabular-nums; }

.owner-matrix th:first-child, .owner-matrix td:first-child { text-align: left; }
.owner-matrix-cell { text-align: center; }
.owner-toggle { position: relative; display: inline-block; width: 38px; height: 22px; }
.owner-toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.owner-toggle-slider {
  position: absolute; inset: 0; background: var(--ink-3, rgba(255,255,255,.08)); border: 1px solid var(--line-strong);
  border-radius: 999px; transition: background .15s, border-color .15s;
}
.owner-toggle-slider::before {
  content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--dim); transition: transform .15s, background .15s;
}
.owner-toggle input:checked + .owner-toggle-slider { background: linear-gradient(135deg, #35d7ff, #4d8fff); border-color: transparent; }
.owner-toggle input:checked + .owner-toggle-slider::before { transform: translateX(16px); background: #04141c; }
.owner-toggle input:disabled + .owner-toggle-slider { opacity: .5; }

.goal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (max-width: 640px) { .goal-grid { grid-template-columns: 1fr; } }
.goal-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.goal-row-head { display: flex; align-items: baseline; justify-content: space-between; }
.goal-title { font-weight: 700; font-size: .92rem; }
.goal-title .hint { font-weight: 500; font-size: .78rem; color: var(--dim); }
.goal-amount { color: var(--dim); font-size: .85rem; font-variant-numeric: tabular-nums; }
.goal-track { position: relative; height: 18px; border-radius: 999px; background: var(--ink-3, rgba(255,255,255,.06)); border: 1px solid var(--line); overflow: hidden; }
.goal-fill { height: 100%; border-radius: 999px; transition: width .3s ease; }
.goal-fill-vps { background: linear-gradient(90deg, #35d7ff, #4d8fff); }
.goal-fill-dedicated { background: linear-gradient(90deg, #5ee29a, #2ec4b6); }
.goal-pct-row { position: relative; height: 1.5rem; }
.goal-pct-marker {
  position: absolute; top: 0; left: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; transition: left .3s ease;
}
.goal-pct-line { width: 1px; height: 6px; background: var(--line-strong); }
.goal-pct {
  margin-top: 2px; font-size: .72rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.console-wrap { background: var(--ink-0); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.console-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; background: var(--ink-2); border-bottom: 1px solid var(--line);
}
.console-status { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--dim); font-family: var(--mono); }
.console-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5f; flex: none; }
.console-dot.live { background: #5ee29a; box-shadow: 0 0 6px #5ee29a; }
.console-toolbar-right { display: flex; align-items: center; gap: 1.1rem; }
.console-badge { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--dim); font-family: var(--mono); }
.console-badge-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; padding: 0; border: none; }
.console-badge-dot.is-warn { background: #f5a623; box-shadow: 0 0 6px rgba(245,166,35,.6); animation: badge-pulse-warn 1.6s ease-in-out infinite; }
.console-badge-dot.is-error { background: #ff5a5f; box-shadow: 0 0 6px rgba(255,90,95,.6); animation: badge-pulse-error 1.6s ease-in-out infinite; }
@keyframes badge-pulse-warn {
  0%, 100% { box-shadow: 0 0 6px rgba(245,166,35,.6); }
  50% { box-shadow: 0 0 10px 3px rgba(245,166,35,.9); }
}
@keyframes badge-pulse-error {
  0%, 100% { box-shadow: 0 0 6px rgba(255,90,95,.6); }
  50% { box-shadow: 0 0 10px 3px rgba(255,90,95,.9); }
}
.console-autoscroll { position: relative; display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--dim); cursor: pointer; user-select: none; padding-left: 20px; }
.console-autoscroll input { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; width: 16px; height: 16px; margin: 0; cursor: pointer; z-index: 1; }
.console-autoscroll .checkbox-box {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid var(--line-strong); background: var(--ink-3, rgba(255,255,255,.06)); transition: background .15s, border-color .15s;
}
.console-autoscroll input:checked ~ .checkbox-box { background: linear-gradient(135deg, #35d7ff, #4d8fff); border-color: transparent; }
.console-autoscroll .checkbox-box::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px;
  border: solid #04141c; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity .1s;
}
.console-autoscroll input:checked ~ .checkbox-box::after { opacity: 1; }
.console-output {
  margin: 0; padding: 1rem; height: 480px; overflow-y: auto; overflow-x: auto;
  font-family: var(--mono); font-size: .8rem; line-height: 1.5; color: var(--text);
  white-space: pre; background: var(--ink-0);
  scrollbar-width: thin; scrollbar-color: var(--ice) var(--ink-0);
}
.console-output div { white-space: pre-wrap; word-break: break-word; }
.console-output::-webkit-scrollbar { width: 10px; height: 10px; }
.console-output::-webkit-scrollbar-track { background: var(--ink-0); }
.console-output::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 2px solid var(--ink-0); }
.console-output::-webkit-scrollbar-thumb:hover { background: var(--ice); }
.console-input-row {
  display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem;
  background: var(--ink-2); border-top: 1px solid var(--line);
}
.console-prompt { color: var(--ice); font-family: var(--mono); font-weight: 700; }
.console-input {
  flex: 1; background: transparent; border: none; outline: none; color: var(--text);
  font-family: var(--mono); font-size: .85rem;
}
.console-input::placeholder { color: var(--dim); }
.console-input:disabled { color: var(--dim); }

.console-layout { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }


.quick-action-card {
  display: flex; flex-direction: column; gap: .7rem; max-width: 320px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem;
}
.quick-action-title { font-weight: 700; font-size: .92rem; }
.minutes-input-wrap {
  width: 100%; display: flex; align-items: center; gap: .4rem;
  background: var(--ink-3, rgba(255,255,255,.06)); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: .5rem .7rem;
}
.restart-minutes-input {
  flex: 1; min-width: 0; width: auto; background: transparent; border: none; color: var(--text);
  padding: 0; font-family: var(--mono); font-size: .9rem; text-align: left;
}
.restart-minutes-input:focus { outline: none; }
.restart-minutes-input:disabled { color: var(--dim); }
.restart-minutes-input::-webkit-outer-spin-button,
.restart-minutes-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.restart-minutes-input[type="number"] { -moz-appearance: textfield; }
.minutes-input-suffix { color: var(--dim); font-size: .82rem; white-space: nowrap; }
.quick-action-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: linear-gradient(135deg, #ff8a8d, #e6262b); color: #fff; border: 1px solid rgba(255,90,95,.5);
  border-radius: var(--radius); padding: .75rem 1rem; font: 700 .88rem/1 var(--body, inherit);
  cursor: pointer; transition: transform .15s ease, background .15s ease;
}
.quick-action-btn svg { width: 16px; height: 16px; flex: none; }
.quick-action-btn:hover:not(:disabled) { background: linear-gradient(135deg, #ffa1a3, #ff3b3f); transform: translateY(-1px); }
.quick-action-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Neutral variant for a secondary action sitting right under the red
   "Schedule Restart" button (cancelling one shouldn't look as alarming as
   scheduling one does). */
.quick-action-btn.is-ghost { background: var(--ink-2); color: var(--dim); border-color: var(--line-strong); }
.quick-action-btn.is-ghost:hover:not(:disabled) { background: var(--ink-2); color: var(--ice); border-color: var(--ice); transform: translateY(-1px); }

/* Restart card's two swappable views (nothing scheduled vs. a live
   countdown) - each one is a flex column carrying the gap the card itself
   used to apply directly to its rows, same trick as .ticket-sidebar-body. */
.restart-view { display: flex; flex-direction: column; gap: .85rem; }
.restart-countdown-wrap {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  background: var(--ink-3, rgba(255,255,255,.06)); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: .7rem;
}
.restart-countdown-label { color: var(--dim); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-family: var(--mono); }
.restart-countdown-value { font-family: var(--mono); font-size: 1.6rem; font-weight: 700; color: var(--ice); }

.toast-container {
  position: fixed; bottom: 1.5rem; right: 1.5rem; display: flex; flex-direction: column;
  gap: .6rem; z-index: 1000; max-width: 340px;
}
.toast {
  background: var(--ink-2); border: 1px solid var(--line-strong); border-left: 3px solid #35d7ff;
  border-radius: 8px; padding: .8rem 1rem; color: var(--text); font-size: .85rem; line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); animation: toast-in .2s ease;
}
.toast-error { border-left-color: #ff5a5f; }
.toast-out { animation: toast-out .2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }


.admin-search { margin-bottom: 1.25rem; max-width: 320px; }
.admin-search input {
  width: 100%; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text);
  padding: .7rem .9rem; font-size: .92rem; font-family: var(--body);
}
.admin-search input:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(126,232,255,.15); }

.admin-table th, .admin-table td { text-align: center; vertical-align: middle; }
.admin-table th { white-space: nowrap; }

.row-identity { display: inline-flex; align-items: center; gap: .6rem; justify-content: center; }
.row-avatar { width: 28px; height: 28px; border-radius: 6px; image-rendering: pixelated; flex: none; }
.row-avatar.placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #000; color: #fff; font-weight: 800; font-size: 12px;
}

.email-cell { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: .6rem; }
.email-cell form { margin: 0; }
.discord-cell { position: relative; }
.discord-cell .copy-discord-btn {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.discord-cell:hover .copy-discord-btn { opacity: 1; pointer-events: auto; }
.email-text-btn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; }
.email-text-btn:hover { text-decoration: underline; }
.pill-btn { background: none; cursor: pointer; font: inherit; }
.pill-btn:hover { filter: brightness(1.4); }
.email-value { display: inline-block; width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; vertical-align: middle; }

.delete-cell .delete-confirm { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; }
.delete-cell .delete-confirm form { margin: 0; }
.delete-cell .confirm-text { font-size: .82rem; color: #ff9a9d; font-weight: 600; }
.ticket-sidebar-card .delete-confirm { display: flex; flex-direction: column; gap: .5rem; }
.ticket-sidebar-card .confirm-text { font-size: .82rem; color: #ff9a9d; font-weight: 600; }

/* Shared bottom-of-table pagination bar - Logs/Users/Tickets. */
.pagination-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; flex: none; }
.pagination-info { font-size: .78rem; color: var(--dim); }
.pagination-controls { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.pagination-goto { display: flex; align-items: center; gap: .4rem; margin: 0; }
.pagination-btn {
  width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-2); border: 1px solid var(--line-strong); color: var(--text);
  border-radius: 8px; cursor: pointer; text-decoration: none;
}
.pagination-btn svg { width: 18px; height: 18px; }
.pagination-btn:hover { border-color: var(--ice); color: var(--ice); }
.pagination-btn.is-disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.pagination-page-input {
  width: 56px; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px;
  color: var(--text); font-size: .8rem; text-align: center; padding: .4rem .3rem;
}
.pagination-page-input:focus { outline: 2px solid var(--ice); outline-offset: 1px; }
/* Without this, the browser's native up/down spinner reserves space on
   the right only, so centered text sits visibly left of true-center. */
.pagination-page-input::-webkit-outer-spin-button,
.pagination-page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pagination-page-input[type="number"] { -moz-appearance: textfield; }

/* Planning board - two rows of three equal-width columns. Row 1 is
   SMP / Website / Network, each its own self-contained card list. Row 2
   is read-only cross-section views (In Progress / Completed / a Changes
   placeholder) built by filtering across all three sections instead of
   by section - see board.flattenItems. Reuses .priority-pill and .pill
   dim from the tickets/tebex pages for the tag language instead of
   inventing a new one. */
/* Two rows of three - sized to always fit in one screen with no page
   scrollbar (.tickets-page-layout itself is already clamped to
   calc(100vh - 145px) - see below), rather than letting 5-ish cards per
   column push the whole board taller than the viewport. Every column
   height is viewport-relative (clamp, not a flat px guess) so it scales
   down on a short window and doesn't overgrow on a tall one, and it's
   the same value everywhere so both rows read as one consistent grid
   instead of a big row sitting over a small one. */
.board-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
@media (max-width: 900px) { .board-columns { grid-template-columns: 1fr; } }
.board-column {
  background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .75rem; display: flex; flex-direction: column; gap: .5rem;
}
.board-column-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.board-column-title { font-family: var(--display); font-weight: 800; font-size: .92rem; display: flex; align-items: center; gap: .4rem; }
.board-column-count {
  font-family: var(--mono); font-size: .66rem; color: var(--dim); background: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px; padding: .05rem .45rem;
}
.board-column-list { display: flex; flex-direction: column; gap: .4rem; }
/* margin: auto on a flex child centers it on both axes within its flex
   container - works whether the list is empty (nothing else to lay out)
   or not (the paragraph is simply hidden once there are real cards), and
   needs no separate rule for the Changes placeholder's "Coming soon". */
.board-column-empty { color: var(--dim); font-size: .8rem; margin: auto; text-align: center; }
.board-column-list:not(.board-completed-list) {
  height: clamp(130px, 19vh, 200px); overflow-y: auto; padding-right: .3rem; padding-bottom: .1rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
/* Row 1 (SMP/Website/Network - the first 3 columns) is the primary work
   list and stays clearly taller; row 2 (In Progress/Completed/Changes -
   a cross-section overview) keeps the size it already had - only row 1
   grows from here. Targeted by DOM position rather than a template
   change, since the two rows are already rendered in a fixed order. */
.board-columns > .board-column:nth-child(-n+3) .board-column-list:not(.board-completed-list) {
  height: clamp(320px, 44vh, 520px);
}
.board-columns > .board-column:nth-child(n+4) .board-column-list:not(.board-completed-list) {
  height: clamp(220px, 30vh, 370px);
}
.board-column-list:not(.board-completed-list)::-webkit-scrollbar { width: 7px; }
.board-column-list:not(.board-completed-list)::-webkit-scrollbar-track { background: transparent; }
.board-column-list:not(.board-completed-list)::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.board-column-list:not(.board-completed-list)::-webkit-scrollbar-thumb:hover { background: var(--ice); }
.board-card {
  background: var(--ink-2); border: 1px solid var(--line-strong); border-left: 3px solid var(--line-strong); border-radius: 7px;
  padding: .5rem .6rem; cursor: pointer; display: flex; flex-direction: column; gap: .35rem;
  transition: border-color .12s ease, background .12s ease;
}
.board-card:hover { border-color: var(--ice); background: var(--ink-3, rgba(255, 255, 255, .06)); }
.board-card[data-status="in_progress"] { border-left-color: #ffb454; }
.board-card[data-status="completed"] { border-left-color: #5ee29a; }
.board-card.is-completed { opacity: .55; }
.board-card.is-completed .board-card-title { text-decoration: line-through; }
.board-card-title { font-weight: 700; font-size: .82rem; line-height: 1.3; }
.board-card-footer { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.board-card-meta { flex: none; display: flex; align-items: center; gap: .55rem; }
.board-card-comments, .board-card-media {
  flex: none; display: flex; align-items: center; gap: .25rem; color: var(--dim);
  font-family: var(--mono); font-size: .66rem;
}
.board-card-comments svg, .board-card-media svg { width: 12px; height: 12px; }
.board-card-top { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
/* Tighter pills specifically on the (now more compact) board cards -
   the site-wide .pill base is sized for ticket/log tables, which have
   more room to work with than a 5-cards-tall board column does. */
.board-card-top .pill { font-size: .62rem; padding: .12rem .42rem; }
/* Section-origin pill - present in every card's markup (so a card
   moving between a section's own list and a cross-section box never
   needs its HTML rebuilt, only relocated), but only visible once it's
   actually sitting in a cross-section box - in its own section's list
   the section is already implied by which column it's in. */
.board-list-own .board-section-pill { display: none; }
.board-section-pill { font-weight: 700; }
.board-section-pill.board-section-smp { color: #4fd18b; border-color: rgba(79, 209, 139, .5); background: rgba(79, 209, 139, .12); }
.board-section-pill.board-section-website { color: var(--ice); border-color: rgba(126, 232, 255, .5); background: rgba(126, 232, 255, .12); }
.board-section-pill.board-section-network { color: #b98bff; border-color: rgba(185, 139, 255, .5); background: rgba(185, 139, 255, .12); }

/* By Status sidebar card on the main board page - same colors as the
   detail popup's own status picker (amber in-progress, green completed). */
.board-status-pill { font-weight: 700; }
.board-status-pill.board-status-todo { color: var(--dim); border-color: var(--line-strong); background: rgba(255,255,255,.05); }
.board-status-pill.board-status-in_progress { color: #ffb454; border-color: rgba(255,180,84,.55); background: rgba(255,180,84,.16); }
.board-status-pill.board-status-completed { color: #5ee29a; border-color: rgba(94,226,154,.5); background: rgba(94,226,154,.12); }

/* "+ New" - a dashed outline box in the column header, same visual
   language as a drop-zone/ghost-add control, just compact enough to
   sit inline next to the column title instead of spanning full width. */
.board-header-add-btn {
  display: flex; align-items: center; gap: .3rem; flex: none;
  border: 1px dashed var(--line-strong); border-radius: 8px; background: none; cursor: pointer;
  color: var(--dim); font-size: .78rem; font-weight: 600; padding: .35rem .65rem;
  transition: border-color .12s ease, color .12s ease;
}
.board-header-add-btn svg { width: 14px; height: 14px; }
.board-header-add-btn:hover { border-color: var(--ice); color: var(--ice); }
.board-column-head-actions { display: flex; align-items: center; gap: .4rem; flex: none; }
.board-column-view-btn {
  display: flex; align-items: center; gap: .3rem; flex: none;
  border: 1px solid var(--line-strong); border-radius: 8px; background: none; cursor: pointer;
  color: var(--dim); font-size: .78rem; font-weight: 600; padding: .35rem .65rem;
  transition: border-color .12s ease, color .12s ease;
}
.board-column-view-btn svg { width: 14px; height: 14px; }
.board-column-view-btn:hover { border-color: var(--ice); color: var(--ice); }
/* Column View popup - the whole column's full list at a much bigger
   size than its own small clamped-height box on the board itself: a
   75% box on the left holding the filter toolbar + search + list +
   pagination (all scoped to that column, not the full popup width),
   and a stat-breakdown sidebar on the right (25%). */
.board-column-view-popup {
  position: relative; width: min(1100px, 96vw); max-width: none; height: 85vh;
  display: flex; flex-direction: column;
}
.board-column-view-layout { display: grid; grid-template-columns: 3fr 1fr; gap: 1.5rem; flex: 1 1 auto; min-height: 0; }
/* Toolbar (two value-filter selects + search) and the pagination bar
   reuse the exact same .ticket-toolbar-row/.log-filter-select/
   .ticket-search-input/.pagination-bar components Logs/Tickets/Revenue/
   Users already use - no popup-specific styling needed for those,
   just the box that contains them below. */
.board-column-view-main { display: flex; flex-direction: column; gap: 1rem; min-height: 0; }
.board-column-view-main .ticket-toolbar-row { flex: none; }
.board-column-view-main .pagination-bar { flex: none; }
.board-column-view-list {
  display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: .3rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.board-column-view-list::-webkit-scrollbar { width: 8px; }
.board-column-view-list::-webkit-scrollbar-track { background: transparent; }
.board-column-view-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.board-column-view-list::-webkit-scrollbar-thumb:hover { background: var(--ice); }
/* List rows reuse the real .board-card/.board-activity-row look as-is
   (see those classes elsewhere) - just give cloned-into-this-popup cards
   a touch more breathing room than their cramped column-grid padding. */
.board-column-view-list .board-card { padding: .7rem .85rem; cursor: pointer; }
.board-column-view-list .board-activity-row.is-clickable { cursor: pointer; }
/* Right sidebar - stat breakdown cards, same .ticket-sidebar-card
   component the Tickets/Logs pages use for this exact thing. */
.board-column-view-details {
  display: flex; flex-direction: column; gap: .9rem; min-height: 0; overflow-y: auto; padding-left: .2rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.board-column-view-details::-webkit-scrollbar { width: 8px; }
.board-column-view-details::-webkit-scrollbar-track { background: transparent; }
.board-column-view-details::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.board-column-view-details::-webkit-scrollbar-thumb:hover { background: var(--ice); }

.board-form-popup { max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; }
.board-form-popup textarea {
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.board-form-popup textarea::-webkit-scrollbar { width: 8px; }
.board-form-popup textarea::-webkit-scrollbar-track { background: transparent; }
.board-form-popup textarea::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.board-form-popup textarea::-webkit-scrollbar-thumb:hover { background: var(--ice); }
.board-form-section-label {
  display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); margin: 1.4rem 0 .7rem;
}
.board-form-popup > form > .board-form-section-label:first-child { margin-top: 0; }
.board-form-existing-files { display: flex; flex-direction: column; gap: .5rem; }
.board-form-existing-files:not(:empty) { margin-bottom: .7rem; }
.board-form-file-chip {
  display: flex; align-items: center; gap: .6rem; background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 8px; padding: .5rem .6rem;
}
.board-form-file-chip-name {
  flex: 1; min-width: 0; font-size: .82rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-form-file-chip-size { flex: none; font-family: var(--mono); font-size: .7rem; color: var(--dim); }
.board-form-file-chip-remove {
  flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--dim); cursor: pointer; border-radius: 6px;
}
.board-form-file-chip-remove svg { width: 13px; height: 13px; }
.board-form-file-chip-remove:hover { color: #ff6b6b; background: var(--ink-1); }
.board-form-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  text-align: center; border: 1px dashed var(--line-strong); border-radius: 10px; padding: 1.4rem 1rem;
  cursor: pointer; color: var(--dim); transition: border-color .15s ease, background .15s ease;
}
.board-form-dropzone svg { width: 26px; height: 26px; opacity: .6; margin-bottom: .2rem; }
.board-form-dropzone p { margin: 0; font-size: .85rem; color: var(--text); }
.board-form-dropzone span { font-size: .74rem; }
.board-form-dropzone:hover, .board-form-dropzone.is-dragover { border-color: var(--ice); background: rgba(126, 232, 255, .05); }
.board-form-staged-files { display: flex; flex-direction: column; gap: .5rem; }
.board-form-staged-files:not(:empty) { margin-top: .7rem; }

/* Detail popup - a fixed, generously-sized modal (not shrink-wrapped to
   content) with three columns: Comments / title+description / a
   ticket-style Details panel. position:relative so the close button can
   float in the corner instead of needing its own header row. */
.board-detail-popup {
  position: relative; width: min(1480px, 95vw); max-width: none; height: min(880px, 92vh);
  display: flex; flex-direction: column; padding: 2.25rem;
}
.board-detail-close-btn {
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 1;
  width: 36px; height: 36px; border-radius: 8px;
  background: var(--ink-2); border: 1px solid var(--line-strong); color: var(--dim);
}
.board-detail-close-btn:hover { background: var(--ink-2); border-color: var(--ice); color: var(--ice); }
.board-detail-close-btn svg { width: 16px; height: 16px; }
.board-detail-layout { display: grid; grid-template-columns: 320px 1fr 340px; gap: 2.25rem; flex: 1 1 auto; min-height: 0; }
/* The title only lives in the middle column, so Comments/Right would
   otherwise start flush with the popup top and sit under the close
   button - push them down to roughly clear it and land near the tags row. */
.board-detail-comments, .board-detail-right { margin-top: 3.4rem; }
@media (max-width: 760px) { .board-detail-layout { grid-template-columns: 1fr; } .board-detail-popup { height: auto; max-height: 88vh; overflow-y: auto; } }
.board-detail-section-label {
  display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 1rem;
}
.board-detail-comments {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem;
  display: flex; flex-direction: column; min-height: 0;
}
.board-detail-comments-list {
  flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .6rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.board-detail-comments-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .65rem; color: var(--dim);
}
.board-detail-comments-empty svg { width: 32px; height: 32px; opacity: .5; }
.board-detail-comments-empty p { margin: 0; font-size: .88rem; }
.board-detail-comment {
  background: var(--ink-1); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; flex: none;
}
.board-detail-comment-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  font-family: var(--mono); font-size: .66rem; color: var(--dim); margin-bottom: .35rem;
}
.board-detail-comment-who { display: flex; align-items: baseline; gap: .5rem; }
.board-detail-comment-author { color: var(--ice); font-weight: 700; }
.board-detail-comment-body { font-size: .85rem; color: var(--text); line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.board-detail-comment-actions { flex: none; display: flex; align-items: center; }
.board-detail-comment-delete-btn {
  flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--dim); cursor: pointer; border-radius: 5px; padding: 0;
}
.board-detail-comment-delete-btn svg { width: 12px; height: 12px; }
.board-detail-comment-delete-btn:hover { color: #ff6b6b; background: var(--ink-2); }
.board-detail-comment-confirm { display: flex; align-items: center; gap: .35rem; }
.board-detail-comment-confirm button {
  background: none; border: none; cursor: pointer; font-family: var(--mono); font-size: .66rem; font-weight: 700;
  padding: 0; color: var(--dim);
}
.board-detail-comment-confirm button:first-of-type { color: #ff6b6b; }
.board-detail-comment-confirm button:hover { text-decoration: underline; }
.board-detail-comment-confirm button:disabled { cursor: not-allowed; opacity: .6; text-decoration: none; }
.board-detail-comment-composer {
  display: flex; gap: .4rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line);
  align-items: flex-end;
}
.board-detail-comment-composer textarea {
  flex: 1; min-width: 0; background: var(--ink-1); border: 1px solid var(--line); border-radius: 6px;
  color: var(--text); font-size: .8rem; font-family: var(--body); padding: .5rem .6rem;
  resize: none; max-height: 110px; line-height: 1.4;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.board-detail-comment-composer textarea::-webkit-scrollbar { width: 7px; }
.board-detail-comment-composer textarea::-webkit-scrollbar-track { background: transparent; }
.board-detail-comment-composer textarea::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.board-detail-comment-composer textarea::-webkit-scrollbar-thumb:hover { background: var(--ice); }
.board-detail-comment-composer button {
  flex: none; background: var(--ink-1); border: 1px solid var(--line-strong); border-radius: 6px;
  color: var(--text); font-size: .8rem; font-weight: 700; padding: .5rem .8rem; cursor: pointer;
}
.board-detail-comment-composer button:hover { border-color: var(--ice); color: var(--ice); }
.board-detail-comment-composer textarea:disabled, .board-detail-comment-composer button:disabled { cursor: not-allowed; opacity: .7; }

/* Middle column - title, tags, an actions row (edit/delete icons, or a
   delete confirm in their place), then the description. */
.board-detail-middle { min-width: 0; min-height: 0; overflow-y: auto; padding-right: .3rem; }
.board-detail-middle h2 { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1.25; margin: 0 0 1rem; }
.board-detail-tags-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.4rem; min-height: 40px; }
.board-detail-tags { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.board-detail-row-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.board-detail-actions { display: flex; gap: .5rem; }
.board-icon-btn {
  width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: var(--ink-2); border: 1px solid var(--line-strong); color: var(--dim); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.board-icon-btn svg { width: 17px; height: 17px; }
.board-icon-btn:hover { color: var(--ice); border-color: var(--ice); }
.board-icon-btn-danger:hover { color: #ff6b6b; border-color: #ff6b6b; }
.board-detail-delete-confirm { display: flex; align-items: center; gap: .5rem; }
.board-detail-description-box {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px; padding: 1.3rem 1.4rem;
}
.board-detail-description {
  font-size: 1rem; color: var(--text); line-height: 1.7; white-space: pre-wrap; word-break: break-word;
  margin: 0;
}

/* Right column - a proper ticket-style Details panel, reusing the same
   .ticket-sidebar-card/.ticket-detail-row components the admin ticket
   detail page's own sidebar is built from. */
.board-detail-right { display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; overflow-y: auto; padding-right: .2rem; }
.board-detail-right .ticket-sidebar-card { padding: 1.3rem; }
.board-detail-media-box {
  aspect-ratio: 1 / 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55rem; background: var(--ink-1); border: 1px dashed var(--line-strong); border-radius: 8px;
  color: var(--dim); text-align: center; padding: 1rem; overflow-y: auto;
}
.board-detail-media-box svg { width: 28px; height: 28px; opacity: .5; }
.board-detail-media-box p { margin: 0; font-size: .82rem; }
/* Once there's at least one attachment, the box switches from a centered
   empty-state to a small thumbnail grid - border goes solid to read as
   "contains things" rather than an empty dropzone. */
.board-detail-media-box.has-files {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; align-content: start;
  border-style: solid; padding: .6rem;
}
.board-detail-media-tile {
  aspect-ratio: 1 / 1; border-radius: 6px; overflow: hidden; background: var(--ink-2);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  color: var(--dim); text-decoration: none; position: relative;
}
.board-detail-media-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.board-detail-media-tile.is-file { flex-direction: column; gap: .3rem; padding: .4rem; text-align: center; }
.board-detail-media-tile.is-file svg { width: 18px; height: 18px; opacity: .6; }
.board-detail-media-tile.is-file span {
  font-size: .6rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all;
}
.board-detail-media-tile:hover { border-color: var(--ice); }

/* Changes column - a cross-item activity feed (created/status/comment/
   updated), fed by board.js's recordActivity hooks. Rows for a still-
   existing item are clickable straight to its detail popup. */
.board-changes-list { gap: .55rem; }
.board-activity-row {
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 7px; padding: .5rem .6rem;
}
.board-activity-row.is-clickable { cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.board-activity-row.is-clickable:hover { border-color: var(--ice); background: var(--ink-3, rgba(255, 255, 255, .06)); }
.board-activity-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .3rem; }
.board-activity-head .pill { font-size: .6rem; padding: .1rem .4rem; }
.board-activity-time { flex: none; font-family: var(--mono); font-size: .62rem; color: var(--dim); }
.board-activity-text { font-size: .78rem; line-height: 1.4; color: var(--text); }
.board-activity-text strong { color: var(--ice); }
.board-activity-item-title { font-weight: 600; }
.board-activity-detail {
  margin-top: .3rem; font-size: .72rem; color: var(--dim); line-height: 1.4; word-break: break-word;
}
.board-activity-kind-pill.board-activity-kind-created { color: #5ee29a; border-color: rgba(94, 226, 154, .5); background: rgba(94, 226, 154, .12); }
.board-activity-kind-pill.board-activity-kind-status { color: #ffb454; border-color: rgba(255, 180, 84, .5); background: rgba(255, 180, 84, .12); }
.board-activity-kind-pill.board-activity-kind-comment { color: var(--ice); border-color: rgba(126, 232, 255, .4); background: rgba(126, 232, 255, .08); }
.board-activity-kind-pill.board-activity-kind-updated { color: var(--dim); border-color: var(--line-strong); background: var(--ink-1); }

/* Status picker - a segmented control, pick one directly rather than
   cycling through a single toggle. */
.board-status-picker {
  display: flex; gap: 2px; background: var(--ink-2); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 3px;
}
.board-status-option {
  flex: 1; border: none; background: none; color: var(--dim); cursor: pointer; text-align: center;
  font-size: .82rem; font-weight: 700; padding: .72rem .7rem; border-radius: 999px; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.board-status-option:hover { color: var(--text); }
.board-status-option:disabled { cursor: default; opacity: .6; }
.board-status-option.is-active[data-status="todo"] { background: var(--ink-1); color: var(--text); }
.board-status-option.is-active[data-status="in_progress"] { background: rgba(255, 180, 84, .2); color: #ffb454; }
.board-status-option.is-active[data-status="completed"] { background: rgba(94, 226, 154, .2); color: #5ee29a; }

/* Promotion (one-click Reddit posts) */
.promotion-pending-warning {
  background: rgba(255, 180, 84, .12); border: 1px solid rgba(255, 180, 84, .4); color: #ffb454;
  font-size: .85rem; font-weight: 600; padding: .75rem 1rem; border-radius: 8px; line-height: 1.6; margin-bottom: 1rem;
}
.promotion-toolbar-btns { display: flex; gap: .6rem; }
/* Tab switch - Templates / Recent Posts share one card instead of two
   stacked ones, so the page always fits in the fixed admin-content
   height without its own scrollbar (same as Tickets/Logs/Board). */
.promotion-tab-switch {
  display: flex; gap: 2px; background: var(--ink-2); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 3px; flex: none;
}
.promotion-tab-btn {
  border: none; background: none; color: var(--dim); cursor: pointer; text-align: center;
  font-size: .85rem; font-weight: 700; padding: .5rem 1.1rem; border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.promotion-tab-btn:hover { color: var(--text); }
.promotion-tab-btn.is-active { background: var(--ink-1); color: var(--ice); }
.promotion-tab-panel { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 1rem; }
/* Post/compose popup - sized and laid out like the Board item popup:
   a static, larger size with a Details sidebar on the right instead of
   everything crammed into one narrow column. */
.promotion-post-popup {
  position: relative; width: min(1320px, 96vw); max-width: none; height: 94vh; overflow-y: auto;
  display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.promotion-post-popup::-webkit-scrollbar { width: 8px; }
.promotion-post-popup::-webkit-scrollbar-track { background: transparent; }
.promotion-post-popup::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.promotion-post-popup::-webkit-scrollbar-thumb:hover { background: var(--ice); }
/* Create/Edit template popup - same width/close-button/sidebar family as
   the Post and Edit Post Body popups, but auto-height since a 3-field
   form has nowhere near as much content to fill a fixed 94vh with. */
.promotion-form-popup {
  position: relative; width: min(900px, 95vw); max-width: none; max-height: 90vh; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.promotion-form-popup::-webkit-scrollbar { width: 8px; }
.promotion-form-popup::-webkit-scrollbar-track { background: transparent; }
.promotion-form-popup::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.promotion-form-popup::-webkit-scrollbar-thumb:hover { background: var(--ice); }
.promotion-form-compact input {
  padding: .5rem .65rem; font-size: .85rem;
}
.promotion-post-close-btn {
  width: 36px; height: 36px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-2); border: 1px solid var(--line-strong); color: var(--dim);
}
.promotion-post-close-btn:hover { border-color: var(--ice); color: var(--ice); }
.promotion-post-close-btn svg { width: 16px; height: 16px; }
/* Grid, not flex - with a flex-basis percentage the 1.75rem gap pushes
   the total past 100% and forces an overflow scrollbar; fr units account
   for the gap automatically so 3fr:1fr always resolves to a clean ~75/25. */
/* Grid, not flex - with a flex-basis percentage the 1.75rem gap pushes
   the total past 100% and forces an overflow scrollbar; fr units account
   for the gap automatically so 3fr:1fr always resolves to a clean ~75/25. */
.promotion-post-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.75rem; align-items: start; flex: 1 1 auto; min-height: 0; }
.promotion-post-layout form { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.promotion-post-sidebar { min-width: 0; }
.promotion-post-sidebar .ticket-sidebar-card { padding: 1.1rem; }
/* Label above value instead of the shared .ticket-detail-row's side-by-
   side + ellipsis treatment - a full-width date+username line almost
   always fits on one line this way, and wraps cleanly on the rare line
   that doesn't, instead of ever truncating with "...". */
.promotion-post-sidebar .ticket-detail-row { flex-direction: column; align-items: flex-start; gap: .2rem; }
.promotion-post-sidebar .ticket-detail-row .v {
  text-align: left; white-space: normal; overflow: visible; text-overflow: clip; width: 100%;
}
/* New Template has nothing to show in the sidebar yet - hide it and let
   the form take the full width instead of a dangling empty column. */
.promotion-post-layout:has(.promotion-post-sidebar[hidden]) { grid-template-columns: 1fr; }
@media (max-width: 760px) {
  .promotion-post-layout { grid-template-columns: 1fr; }
}
/* Both popups share .promotion-post-popup's fixed 94vh height - the
   textarea is what flex-grows to actually fill it, since everything
   else (labels, hint box, buttons) is fixed-height content. */
#promotion-post-body, #promotion-body-input {
  flex: 1 1 auto; min-height: 0;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
#promotion-post-body::-webkit-scrollbar, #promotion-body-input::-webkit-scrollbar { width: 8px; }
#promotion-post-body::-webkit-scrollbar-track, #promotion-body-input::-webkit-scrollbar-track { background: transparent; }
#promotion-post-body::-webkit-scrollbar-thumb, #promotion-body-input::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
#promotion-post-body::-webkit-scrollbar-thumb:hover, #promotion-body-input::-webkit-scrollbar-thumb:hover { background: var(--ice); }
.promotion-title-cell { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.promotion-row-actions { display: flex; justify-content: center; }
.promotion-row-actions-idle { display: flex; gap: .5rem; align-items: center; }
.promotion-row-actions-confirm { display: flex; gap: .5rem; align-items: center; }
.promotion-status-pill.promotion-status-success { color: #5ee29a; border-color: rgba(94, 226, 154, .5); background: rgba(94, 226, 154, .12); }
.promotion-status-pill.promotion-status-failed { color: #ff9a9d; border-color: rgba(255, 90, 95, .5); background: rgba(255, 90, 95, .12); cursor: help; }
.promotion-status-pill.promotion-status-pending { color: #ffb454; border-color: rgba(255, 180, 84, .5); background: rgba(255, 180, 84, .12); }
.promotion-last-posted-pill {
  flex: none; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .01em;
  color: var(--ice); border-color: rgba(126, 232, 255, .45); background: rgba(126, 232, 255, .1);
  padding: .32rem .65rem; white-space: nowrap; line-height: 1;
}
.promotion-last-posted-pill.is-never {
  color: var(--dim); border-color: var(--line-strong); background: var(--ink-1);
}
.promotion-post-hint {
  background: rgba(255, 180, 84, .12); border: 1px solid rgba(255, 180, 84, .4); color: #ffb454;
  font-size: .82rem; font-weight: 600; line-height: 1.5; padding: .65rem .85rem; border-radius: 8px; margin: .9rem 0;
}
.promotion-post-result {
  font-size: .85rem; font-weight: 600; padding: .6rem .8rem; border-radius: 8px; margin-bottom: .9rem;
}
.promotion-post-result.is-success { background: rgba(94, 226, 154, .12); border: 1px solid rgba(94, 226, 154, .4); color: #5ee29a; }
.promotion-post-result.is-success a { color: inherit; text-decoration: underline; }
.promotion-post-result.is-error { background: rgba(255, 90, 95, .12); border: 1px solid rgba(255, 90, 95, .4); color: #ff9a9d; }
.promotion-manual-confirm {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 8px; padding: .75rem .85rem; margin: .9rem 0; display: flex; flex-direction: column; gap: .4rem;
}
.promotion-manual-confirm label { font-size: .78rem; font-weight: 600; color: var(--dim); }
.promotion-manual-confirm input { width: 100%; }
.promotion-manual-confirm .ticket-composer-actions { margin: 0; }


/* Recent Deaths detail popup: header with the player's head, cause and
   time; four stat tiles coloured by health (green normal / amber
   borderline / red poor) so "server lag or player mistake?" reads at a
   glance; then two buttons that open Inventory / Totem saves as their own
   popups on top (same size as the ticket page's Death Info popups). */
.death-detail-popup { max-width: 640px; width: 100%; padding: 0; overflow: hidden; }
.death-detail-header {
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,90,95,.10), transparent);
}
.death-detail-avatar { width: 56px; height: 56px; border-radius: 12px; flex: none; image-rendering: pixelated; filter: grayscale(.35); box-shadow: 0 0 0 1px var(--line-strong); }
.death-detail-heading { min-width: 0; flex: 1; }
.death-detail-heading h3 { font-family: var(--display); font-size: 1.25rem; font-weight: 800; margin: 0; }
.death-detail-cause { margin: .2rem 0 0; color: #ff9a9d; font-size: .9rem; font-weight: 600; }
.death-detail-died { margin: .15rem 0 0; color: var(--dim); font-size: .78rem; font-family: var(--mono); }
.death-detail-close { align-self: flex-start; }
.death-detail-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; padding: 1.1rem 1.4rem 0; }
.death-detail-stat {
  display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border-radius: 10px;
  background: var(--ink-2); border: 1px solid var(--line); border-top: 3px solid var(--line-strong);
}
.death-detail-stat .k { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.death-detail-stat .v { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--text); }
.death-detail-stat .hint { font-size: .7rem; color: var(--dim); }
.death-detail-stat.is-good { border-top-color: #5ee29a; }
.death-detail-stat.is-good .v { color: #5ee29a; }
.death-detail-stat.is-warn { border-top-color: #f5a623; }
.death-detail-stat.is-warn .v { color: #f5a623; }
.death-detail-stat.is-bad { border-top-color: #ff5a5f; }
.death-detail-stat.is-bad .v { color: #ff5a5f; }
.death-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: 1.1rem 1.4rem 1.4rem; }
.death-detail-action { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem 1rem; }
.death-detail-action svg { width: 16px; height: 16px; flex: none; }
/* Inventory / Totem saves popups sit above the death popup itself. */
.death-detail-sub-overlay { z-index: 210; }
@media (max-width: 640px) {
  .death-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .death-detail-actions { grid-template-columns: 1fr; }
}

/* Server Files (admin > Server Files, Owner only) - one card that is
   either the lock screen, the folder browser, or the code editor. */
.files-card { height: calc(100vh - 175px); min-height: 420px; padding: 0; gap: 0; overflow: hidden; position: relative; }
.files-locked { margin: auto; max-width: 420px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 2rem 1.5rem; }
.files-locked-icon { width: 54px; height: 54px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--ink-2); border: 1px solid var(--line-strong); color: var(--ice); }
.files-locked-icon svg { width: 26px; height: 26px; }
.files-locked h2 { font-family: var(--display); font-size: 1.2rem; font-weight: 800; margin: 0; }
.files-locked p { color: var(--dim); font-size: .88rem; line-height: 1.5; margin: 0; }
.files-unlock-form { display: flex; gap: .5rem; width: 100%; margin-top: .4rem; }
.files-unlock-form input, .files-dialog-form input {
  flex: 1; min-width: 0; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px;
  color: var(--text); padding: .6rem .8rem; font: inherit; font-size: .9rem;
}
.files-unlock-form input:focus, .files-dialog-form input:focus { outline: 2px solid var(--ice); outline-offset: 1px; }
.files-locked .files-locked-error, .files-dialog-error { color: #ff9a9d; font-size: .82rem; margin: 0; }

.files-browser, .files-editor { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.files-browser[hidden], .files-editor[hidden], .files-locked[hidden] { display: none; }
.files-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; flex: none;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--ink-1);
}
.files-toolbar-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.files-filter { width: 200px; margin-left: 0; }
.files-breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem; min-width: 0; font-family: var(--mono); font-size: .85rem; }
.files-crumb { background: none; border: none; color: var(--dim); font: inherit; padding: .25rem .4rem; border-radius: 6px; cursor: pointer; }
.files-crumb:hover { color: var(--text); background: var(--ink-2); }
.files-crumb.is-current { color: var(--text); font-weight: 700; cursor: default; background: none; }
.files-crumb-sep { color: var(--line-strong); }

.files-table-wrap {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; position: relative; background: var(--ink-2);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.files-table { width: 100%; }
.files-table th { position: sticky; top: 0; z-index: 1; background: var(--ink-1); }
.files-table th:first-child, .files-table td.files-name-cell { text-align: left; }
.files-name-cell { font-weight: 600; }
.files-name-inner { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.files-nav { display: flex; align-items: center; gap: .75rem; min-width: 0; flex-wrap: wrap; }
.files-table td, .files-table th { vertical-align: middle; }
.files-table th:nth-child(4), .files-table td.files-actions-cell { width: 170px; }
.files-icon { width: 18px; height: 18px; flex: none; display: inline-flex; }
.files-icon svg { width: 18px; height: 18px; }
.files-icon-dir { color: #f5c451; }
.files-icon-file { color: var(--dim); }
.files-actions-cell { white-space: nowrap; text-align: right !important; width: 1%; }
.files-action {
  background: none; border: 1px solid transparent; color: var(--dim); font: inherit; font-size: .76rem;
  padding: .2rem .5rem; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .1s ease;
}
.files-row:hover .files-action, .files-action:focus-visible { opacity: 1; }
.files-action:hover { color: var(--text); border-color: var(--line-strong); }
.files-action.is-danger:hover { color: #ff9a9d; border-color: rgba(255,90,95,.5); }
.files-empty { color: var(--dim); text-align: center; padding: 2rem 1rem; margin: 0; }
.files-drop-hint {
  display: none; position: absolute; inset: .6rem; border: 2px dashed var(--ice); border-radius: 12px;
  align-items: center; justify-content: center; background: rgba(53,215,255,.08); color: var(--ice); font-weight: 700; pointer-events: none;
}
.files-table-wrap.is-dragging .files-drop-hint { display: flex; }

.files-editor-title { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.files-editor-back { width: 32px; height: 32px; cursor: pointer; }
.files-editor-name { font-weight: 800; font-size: .95rem; }
.files-editor-path { font-family: var(--mono); font-size: .72rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-save-state { font-family: var(--mono); font-size: .75rem; color: var(--dim); }
.files-save-state.is-dirty { color: #f5a623; }
.files-warning { flex: none; padding: .55rem 1.1rem; font-size: .82rem; color: #f5c451; background: rgba(245,166,35,.08); border-bottom: 1px solid rgba(245,166,35,.3); }
.files-readonly { margin: 1.5rem; padding: 1rem 1.2rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); color: var(--dim); font-size: .88rem; line-height: 1.5; }
.files-cm-host { flex: 1 1 auto; min-height: 0; position: relative; }
.files-cm-host[hidden] { display: none; }
.files-cm-host .CodeMirror { position: absolute; inset: 0; height: auto; font-family: var(--mono); font-size: .85rem; line-height: 1.5; background: #16181d; }
.files-cm-host .CodeMirror-gutters { background: #16181d; border-right: 1px solid var(--line); }

.files-session-bar {
  flex: none; display: flex; align-items: center; gap: .55rem; padding: .45rem 1.1rem;
  border-top: 1px solid var(--line); background: var(--ink-1); font-family: var(--mono); font-size: .74rem; color: var(--dim);
}
.files-session-bar[hidden] { display: none; }
.files-lock-btn { margin-left: auto; background: none; border: 1px solid var(--line-strong); color: var(--dim); font: inherit; padding: .2rem .6rem; border-radius: 6px; cursor: pointer; }
.files-lock-btn:hover { color: var(--text); border-color: var(--ice); }

.files-dialog { max-width: 440px; }
.files-dialog-form { display: flex; flex-direction: column; gap: .8rem; }
.files-dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.files-confirm-text { color: var(--dim); font-size: .88rem; line-height: 1.5; margin: 0 0 1.1rem; }
@media (max-width: 760px) {
  .files-card { height: calc(100vh - 140px); }
  .files-filter { width: 100%; }
  .files-action { opacity: 1; }
}

/* Admin Users list - clicking a row (or the info button that appears on
   hover next to the username) opens that user's profile popup. */
.users-row { cursor: pointer; }
/* Whole row highlights on hover (the shared .row-clickable rule) and
   gets an ice-blue edge, so it's clear which user a click will open. */
.users-row:hover td { background: var(--ink-3, rgba(255, 255, 255, .06)); }
.users-row:hover td:first-child { box-shadow: inset 3px 0 0 var(--ice); }
.users-dim { color: var(--dim); }
.users-avatar.placeholder, .user-detail-avatar.placeholder {
  display: inline-flex; align-items: center; justify-content: center; background: #000; color: #fff; font-weight: 800; border: 1px solid var(--line-strong);
}
.users-chip {
  display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .02em;
  padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--dim); background: var(--ink-2); white-space: nowrap;
}
.users-chip.is-online { color: #5ee29a; border-color: rgba(94,226,154,.45); background: rgba(94,226,154,.10); }
.users-chip.is-alive { color: #7fdcb0; border-color: rgba(94,226,154,.3); }
.users-chip.is-dead { color: #ff8a8d; border-color: rgba(255,90,95,.45); background: rgba(255,90,95,.10); }
.users-chip.is-warn { color: #f5c451; border-color: rgba(245,166,35,.4); background: rgba(245,166,35,.08); }
.users-chip-dot { width: 6px; height: 6px; border-radius: 50%; background: #5ee29a; box-shadow: 0 0 6px #5ee29a; }

/* User profile popup */
.user-detail-popup { max-width: 1120px; width: 100%; height: min(780px, 90vh); max-height: none; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.user-detail-header {
  display: flex; align-items: center; gap: 1.1rem; padding: 1.3rem 1.5rem; flex: none; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(53,215,255,.08), transparent);
}
.user-detail-avatar { width: 72px; height: 72px; border-radius: 14px; flex: none; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--line-strong); font-size: 1.6rem; }
.user-detail-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.user-detail-heading h3 { font-family: var(--display); font-size: 1.35rem; font-weight: 800; margin: 0; }
.user-detail-ranks, .user-detail-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.user-detail-ranks:empty { display: none; }
.user-detail-close { align-self: flex-start; }
.user-detail-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.2rem 1.5rem;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.user-detail-loading { color: var(--dim); text-align: center; margin: 2rem 0; }
.user-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: stretch; }
.user-detail-section { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.user-detail-section-title { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: .15rem; }
.user-detail-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; font-size: .84rem; min-width: 0; }
.user-detail-row .k { color: var(--dim); flex: none; }
.user-detail-row .v { display: inline-flex; align-items: center; gap: .3rem; min-width: 0; text-align: right; justify-content: flex-end; overflow-wrap: anywhere; }
.user-detail-mono { font-family: var(--mono); font-size: .72rem; }
.user-detail-copy { width: 22px; height: 22px; flex: none; }
.user-detail-copy svg { width: 12px; height: 12px; }
.user-detail-note { color: var(--dim); font-size: .82rem; margin: 0; line-height: 1.45; }
.user-detail-inline-form { margin: auto 0 0; padding-top: .3rem; display: flex; justify-content: flex-end; }
.user-detail-unlink { flex-direction: column; align-items: flex-end; gap: .5rem; margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); }
.user-detail-unlink-btn { color: #ff9a9d; border-color: rgba(255,90,95,.35); }
.user-detail-unlink-btn:hover { border-color: rgba(255,90,95,.7); color: #ffb3b5; }
.user-detail-unlink-confirm { display: flex; flex-direction: column; gap: .55rem; width: 100%; padding: .7rem .8rem; border-radius: 10px; background: rgba(255,90,95,.07); border: 1px solid rgba(255,90,95,.3); }
.user-detail-unlink-confirm[hidden] { display: none; }
.user-detail-unlink-actions { display: flex; justify-content: flex-end; gap: .45rem; }
.user-detail-purchases { list-style: none; margin: .25rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .4rem; }
.user-detail-purchases li { display: flex; flex-direction: column; font-size: .8rem; gap: .05rem; }
.user-detail-purchases li .users-dim { font-size: .72rem; font-family: var(--mono); }
.user-detail-footer { flex: none; display: flex; justify-content: flex-end; gap: .5rem; padding: .8rem 1.5rem; border-top: 1px solid var(--line); background: var(--ink-1); }
@media (max-width: 760px) {
  .user-detail-grid { grid-template-columns: 1fr; }
  .user-detail-popup { height: 94vh; }
  .users-view-btn { opacity: 1; }
}

/* --- Updates & News --------------------------------------------------- */
/* Shared bits (admin list/editor and the public /news pages). */
.news-category {
  display: inline-flex; align-items: center; font-family: var(--mono); font-size: .66rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: .15rem .55rem; border-radius: 999px; color: var(--cat, #35d7ff);
  border: 1px solid color-mix(in srgb, var(--cat, #35d7ff) 45%, transparent); background: color-mix(in srgb, var(--cat, #35d7ff) 12%, transparent);
}
.news-pinned { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: #f5c451; border: 1px solid rgba(245,196,81,.4); border-radius: 999px; padding: .1rem .45rem; }
.news-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; color: var(--dim); font-size: .8rem; }
.news-body { color: var(--text); font-size: .95rem; line-height: 1.7; }
.news-body > *:first-child { margin-top: 0; }
.news-body h2 { font-family: var(--display); font-size: 1.3rem; font-weight: 800; margin: 1.6rem 0 .6rem; }
.news-body h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 800; margin: 1.3rem 0 .5rem; }
.news-body h4 { font-size: 1rem; font-weight: 800; margin: 1.1rem 0 .4rem; }
.news-body p { margin: 0 0 .9rem; }
.news-body ul, .news-body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.news-body li { margin: .25rem 0; }
.news-body ul li::marker { color: var(--ice); }
.news-body a { color: var(--ice); }
.news-body code { font-family: var(--mono); font-size: .85em; background: var(--ink-2); border: 1px solid var(--line); border-radius: 5px; padding: .05rem .35rem; }
.news-body blockquote { margin: 0 0 1rem; padding: .6rem 1rem; border-left: 3px solid var(--ice); background: var(--ink-2); border-radius: 0 8px 8px 0; color: var(--dim); }
.news-body hr { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0; }

/* Admin: list */
.news-toolbar-right { display: flex; align-items: center; gap: .6rem; margin-left: auto; }
.news-toolbar-right .ticket-search-input { margin-left: 0; }
.news-table th:first-child, .news-table td.news-title-cell { text-align: left; }
.news-title-cell { max-width: 460px; }
.news-admin-title { font-weight: 700; margin-right: .4rem; }
.news-admin-summary { display: block; color: var(--dim); font-size: .8rem; margin-top: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-status { display: inline-flex; font-family: var(--mono); font-size: .68rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--dim); }
.news-status.is-published { color: #5ee29a; border-color: rgba(94,226,154,.45); background: rgba(94,226,154,.1); }
.news-status.is-scheduled { color: #f5c451; border-color: rgba(245,196,81,.45); background: rgba(245,196,81,.08); }
.news-status-when { font-size: .72rem; color: var(--dim); margin-top: .2rem; font-family: var(--mono); }

/* Admin: editor */
.news-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 1.25rem; height: calc(100vh - 175px); min-height: 520px; }
.news-editor-card { min-height: 0; }
.news-form { display: flex; flex-direction: column; gap: 1rem; height: 100%; min-height: 0; }
.news-field { display: flex; flex-direction: column; gap: .35rem; font-size: .8rem; color: var(--dim); font-weight: 600; }
.news-field em { font-style: normal; font-weight: 400; }
.news-field input, .news-field select, .news-field textarea {
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text);
  padding: .6rem .8rem; font: inherit; font-size: .92rem; font-weight: 400;
}
.news-field input:focus, .news-field select:focus, .news-field textarea:focus { outline: 2px solid var(--ice); outline-offset: 1px; }
.news-field textarea { resize: vertical; line-height: 1.5; }
.news-field-grow { flex: 1 1 auto; min-height: 0; }
.news-field-grow textarea { flex: 1 1 auto; min-height: 220px; resize: none; font-family: var(--mono); font-size: .85rem; }
.news-field-row { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.news-field-row .news-field { min-width: 200px; }
.news-check { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text); padding-bottom: .55rem; cursor: pointer; }
.news-format-help { margin: 0; font-size: .75rem; color: var(--dim); line-height: 1.8; }
.news-format-help code { font-family: var(--mono); font-size: .72rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: .05rem .3rem; }
.news-editor-side { display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
.news-status-text { margin: 0; font-size: .82rem; color: var(--dim); line-height: 1.45; }
.news-actions { display: flex; flex-direction: column; gap: .5rem; }
.news-schedule { display: flex; gap: .4rem; }
.news-schedule input { flex: 1; min-width: 0; background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 8px; color: var(--text); padding: .45rem .6rem; font: inherit; font-size: .82rem; color-scheme: dark; }
.news-hint { margin: 0; font-size: .74rem; color: var(--dim); }
.news-side-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.news-meta { font-size: .72rem; color: var(--dim); font-family: var(--mono); line-height: 1.5; }
.news-preview-card { flex: 1 1 auto; min-height: 0; }
.news-preview-scroll { overflow-y: auto; min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: .5rem; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.news-preview-title { font-family: var(--display); font-size: 1.2rem; font-weight: 800; margin: 0; }
.news-preview-summary { margin: 0; color: var(--dim); font-size: .88rem; }
.news-preview-summary:empty { display: none; }
.news-preview-card .news-body { font-size: .86rem; }
@media (max-width: 1100px) {
  .news-editor-layout { grid-template-columns: 1fr; height: auto; }
  .news-field-grow textarea { min-height: 320px; }
}

/* Public /news pages */
.news-preview-banner { background: rgba(245,196,81,.12); border-bottom: 1px solid rgba(245,196,81,.35); color: #f5c451; text-align: center; font-size: .85rem; padding: .6rem 1rem; }
.news-preview-banner a { color: inherit; font-weight: 700; margin-left: .4rem; }
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.1rem; }
.news-card {
  display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem 1.4rem; border-radius: 14px; text-decoration: none; color: inherit;
  background: var(--ink-1); border: 1px solid var(--line); transition: border-color .15s ease, transform .15s ease;
}
.news-card:hover { border-color: var(--ice); transform: translateY(-2px); }
.news-card.is-pinned, .news-card.is-latest { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(53,215,255,.08), var(--ink-1) 55%); }
.news-card h3 { font-family: var(--display); font-size: 1.2rem; font-weight: 800; margin: 0; color: var(--text); }
.news-card.is-pinned h3, .news-card.is-latest h3 { font-size: 1.5rem; }
.news-card p { margin: 0; color: var(--dim); line-height: 1.55; }
.news-read-more { margin-top: auto; color: var(--ice); font-weight: 700; font-size: .88rem; }
.news-empty { display: flex; align-items: center; gap: 1rem; padding: 2rem; border: 1px dashed var(--line-strong); border-radius: 14px; }
.news-empty img { width: 48px; height: 48px; }
.news-empty h3 { margin: 0 0 .3rem; }
.news-empty p { margin: 0; color: var(--dim); }
.news-article-wrap { max-width: 780px; }
.news-back { display: inline-block; color: var(--dim); text-decoration: none; font-size: .88rem; margin-bottom: 1.2rem; }
.news-back:hover { color: var(--ice); }
.news-article-title { font-family: var(--display); font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; margin: .7rem 0 .6rem; line-height: 1.15; }
.news-article-summary { font-size: 1.1rem; color: var(--dim); margin: 0 0 1.8rem; line-height: 1.55; }
.news-author { font-size: .8rem; }

/* News editor: category dropdown dots, themed date picker, big preview. */
.custom-select-trigger .custom-select-value, .custom-select-option { display: inline-flex; align-items: center; gap: .5rem; }
.custom-select-option { display: flex; }
.custom-select-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.news-field .custom-select-trigger { padding: .6rem .8rem; font-size: .92rem; }

.date-picker { position: relative; flex: 1; min-width: 0; }
.date-picker-trigger {
  width: 100%; display: flex; align-items: center; gap: .5rem; background: var(--ink-2); border: 1px solid var(--line-strong);
  border-radius: 8px; color: var(--text); padding: .45rem .6rem; font: inherit; font-size: .82rem; cursor: pointer; text-align: left;
}
.date-picker-trigger svg { width: 15px; height: 15px; flex: none; color: var(--ice); }
.date-picker-trigger span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-picker-trigger.is-empty span { color: var(--dim); }
.date-picker-trigger:hover, .date-picker-trigger.is-open { border-color: var(--ice); }
.date-picker-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 290px; padding: .8rem;
  background: var(--ink-2); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.75);
  display: flex; flex-direction: column; gap: .6rem;
}
.date-picker-pop[hidden] { display: none; }
.date-picker-head { display: flex; align-items: center; justify-content: space-between; }
.date-picker-title { font-weight: 800; font-size: .9rem; }
.date-picker-nav {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px;
  background: none; border: 1px solid var(--line-strong); color: var(--text); cursor: pointer;
}
.date-picker-nav svg { width: 14px; height: 14px; }
.date-picker-nav:hover:not(:disabled) { border-color: var(--ice); color: var(--ice); }
.date-picker-nav:disabled { opacity: .35; cursor: default; }
.date-picker-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; text-align: center; }
.date-picker-dow { font-family: var(--mono); font-size: .62rem; color: var(--dim); padding: .2rem 0; }
.date-picker-day {
  height: 32px; border-radius: 7px; background: none; border: 1px solid transparent; color: var(--text); font: inherit; font-size: .82rem; cursor: pointer;
}
.date-picker-day:hover:not(:disabled) { background: var(--ink-1); border-color: var(--line-strong); }
.date-picker-day.is-today { border-color: var(--line-strong); color: var(--ice); font-weight: 700; }
.date-picker-day.is-selected { background: var(--ice); border-color: var(--ice); color: #04141c; font-weight: 800; }
.date-picker-day:disabled { color: var(--line-strong); cursor: default; }
.date-picker-time { display: flex; align-items: center; gap: .4rem; padding-top: .55rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--dim); }
.date-picker-time > span:first-child { margin-right: auto; }
.date-picker-colon { color: var(--text); font-weight: 700; }
.date-picker-select { width: 70px; }
.date-picker-select .custom-select-trigger { padding: .35rem .5rem; font-size: .82rem; }
.date-picker-select .custom-select-menu { max-height: 180px; }
.date-picker-foot { display: flex; justify-content: flex-end; gap: .4rem; }

.news-view-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; }
.news-view-btn svg { width: 13px; height: 13px; }
.news-view-popup { max-width: 1400px; width: 100%; height: min(860px, 92vh); max-height: none; padding: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ink-0, #0a0e18); }
.news-view-head { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.4rem; border-bottom: 1px solid var(--line); background: var(--ink-1); flex: none; }
.news-view-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.6rem 2.2rem 2.4rem; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.news-view-section-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 0 0 .7rem; }
.news-view-card-wrap { margin-bottom: 2rem; }
.news-view-card { pointer-events: none; }
.news-view-article { max-width: none; padding-top: 1.4rem; border-top: 1px dashed var(--line-strong); }
.news-view-article .news-article-title { margin-top: .6rem; }
/* --- Admin Teams page: team cards, overview sidebar, team popup ---------
   Each team gets a stable hue (--team-hue, from its name) for its badge and
   card accent, so the same team always has the same color. */
.teams-card { gap: 1rem; }
.teams-sort { display: flex; align-items: center; gap: .5rem; }
.teams-sort-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.teams-sort .custom-select { width: 210px; }
.teams-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .15rem .25rem .25rem 0; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.teams-scroll::-webkit-scrollbar { width: 8px; }
.teams-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .9rem; }
.teams-empty { color: var(--dim); text-align: center; padding: 2rem 1rem; margin: 0; }

.team-badge {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-size: 1.15rem; color: #fff;
  background: linear-gradient(135deg, hsl(var(--team-hue, 200) 75% 55%), hsl(calc(var(--team-hue, 200) + 40) 70% 42%));
  box-shadow: 0 6px 18px -6px hsl(var(--team-hue, 200) 80% 50% / .6);
}
.team-badge.is-small { width: 26px; height: 26px; border-radius: 8px; font-size: .78rem; box-shadow: none; }
.team-badge.is-large { width: 64px; height: 64px; border-radius: 16px; font-size: 1.7rem; }

.team-tile {
  display: flex; flex-direction: column; gap: .85rem; text-align: left; font: inherit; color: inherit; cursor: pointer;
  padding: 1rem 1.05rem; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line);
  border-top: 3px solid hsl(var(--team-hue, 200) 70% 55%);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.team-tile:hover { transform: translateY(-2px); border-color: hsl(var(--team-hue, 200) 70% 55% / .7); box-shadow: 0 14px 30px -18px hsl(var(--team-hue, 200) 80% 50% / .8); }
.team-tile[hidden] { display: none; }
.team-tile-head { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.team-tile-title { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: .15rem; }
.team-name { font-family: var(--display); font-weight: 800; font-size: 1.05rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-owner { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--dim); min-width: 0; }
.team-owner img { width: 16px; height: 16px; border-radius: 4px; image-rendering: pixelated; }
.team-discord { width: 28px; height: 28px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(88,101,242,.18); color: #8b93ff; }
.team-discord svg { width: 15px; height: 15px; }
.team-heads { display: flex; align-items: center; padding-left: 6px; min-height: 30px; }
.team-heads img {
  width: 30px; height: 30px; border-radius: 8px; margin-left: -6px; image-rendering: pixelated;
  border: 2px solid var(--ink-2); background: var(--ink-1);
}
.team-heads img.is-eliminated { filter: grayscale(1); opacity: .55; }
.team-heads-more {
  margin-left: -6px; min-width: 30px; height: 30px; padding: 0 .35rem; border-radius: 8px; border: 2px solid var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; background: var(--ink-1); color: var(--dim); font-size: .72rem; font-weight: 700;
}
.team-stats { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .78rem; color: var(--dim); }
.team-stat { display: inline-flex; align-items: center; gap: .3rem; }
.team-stat strong { color: var(--text); font-weight: 800; }
.team-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.team-stat.is-online { color: #5ee29a; }
.team-stat.is-online strong { color: #5ee29a; }
.team-stat.is-online .team-dot { background: #5ee29a; box-shadow: 0 0 6px #5ee29a; }
.team-stat.is-dead, .team-stat.is-dead strong { color: #ff8a8d; }
.team-tile-foot { display: flex; justify-content: space-between; gap: .5rem; padding-top: .7rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .68rem; color: var(--dim); }

.teams-overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.teams-overview-stat { display: flex; flex-direction: column; gap: .1rem; padding: .65rem .7rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); }
.teams-overview-stat .v { font-family: var(--display); font-weight: 900; font-size: 1.35rem; color: var(--text); }
.teams-overview-stat .k { font-size: .7rem; color: var(--dim); }
.teams-rank-list { display: flex; flex-direction: column; gap: .3rem; margin: 0 -.35rem; }
.teams-rank-row {
  display: flex; align-items: center; gap: .6rem; padding: .4rem .45rem; border-radius: 8px; border: 1px solid transparent;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.teams-rank-row:hover { background: var(--ink-2); border-color: var(--line); }
.teams-rank-n { font-family: var(--mono); font-size: .7rem; color: var(--dim); width: 22px; }
.teams-rank-name { flex: 1; font-weight: 700; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teams-rank-count { font-family: var(--mono); font-size: .78rem; color: var(--dim); }

/* Team popup */
.team-popup { max-width: 1080px; width: 100%; height: min(760px, 90vh); max-height: none; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.team-popup-header {
  display: flex; align-items: center; gap: 1.1rem; padding: 1.3rem 1.5rem; flex: none; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, hsl(var(--team-hue, 200) 70% 50% / .14), transparent);
}
.team-popup-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.team-popup-heading h3 { font-family: var(--display); font-size: 1.45rem; font-weight: 900; margin: 0; }
.team-popup-sub { display: flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--dim); }
.team-popup-sub img { width: 20px; height: 20px; border-radius: 5px; image-rendering: pixelated; }
.team-popup-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.users-chip.is-discord { color: #8b93ff; border-color: rgba(88,101,242,.5); background: rgba(88,101,242,.12); }
.team-popup-close { align-self: flex-start; }
.team-popup-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.team-popup-col { display: flex; flex-direction: column; min-height: 0; padding: 1.1rem 1.3rem; }
.team-popup-col + .team-popup-col { border-left: 1px solid var(--line); }
.team-popup-col-title { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: .75rem; flex: none; }
.team-member-list, .team-chat {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.team-member-list { gap: .4rem; }
.team-member-list::-webkit-scrollbar, .team-chat::-webkit-scrollbar { width: 8px; }
.team-member-list::-webkit-scrollbar-thumb, .team-chat::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.team-member { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); }
.team-member.is-eliminated { opacity: .6; }
.team-member.is-eliminated img { filter: grayscale(1); }
.team-member-avatar { position: relative; flex: none; }
.team-member-avatar img { width: 34px; height: 34px; border-radius: 8px; image-rendering: pixelated; display: block; }
.team-member-online { position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; background: #5ee29a; border: 2px solid var(--ink-2); box-shadow: 0 0 6px #5ee29a; }
.team-member-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.team-member-name { font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-member-sub { font-size: .72rem; color: var(--dim); }
.team-role { flex: none; font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .12rem .45rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--dim); }
.team-role.is-owner { color: #f5c451; border-color: rgba(245,196,81,.5); background: rgba(245,196,81,.1); }
.team-role.is-admin { color: #35d7ff; border-color: rgba(53,215,255,.45); background: rgba(53,215,255,.08); }

.team-chat { gap: .35rem; padding: .8rem; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; }
.team-chat-empty { margin: auto; color: var(--dim); font-size: .86rem; text-align: center; max-width: 320px; }
.team-chat-row { display: flex; align-items: flex-start; gap: .6rem; margin-top: .4rem; }
.team-chat-row.is-grouped { margin-top: 0; }
.team-chat-avatar, .team-chat-spacer { width: 32px; height: 32px; flex: none; border-radius: 8px; image-rendering: pixelated; }
.team-chat-spacer { height: 0; }
.team-chat-avatar.is-discord { display: inline-flex; align-items: center; justify-content: center; background: #5865f2; }
.team-chat-avatar.is-discord svg { width: 17px; height: 17px; }
.team-chat-bubble {
  width: fit-content; max-width: min(80%, 620px); display: flex; flex-direction: column; gap: .2rem;
  padding: .45rem .75rem .5rem; background: var(--ink-1); border: 1px solid var(--line); border-left: 3px solid #5ee29a; border-radius: 12px;
}
.team-chat-bubble.is-discord { border-left-color: #5865f2; }
.team-chat-head { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.team-chat-author { font-weight: 700; font-size: .84rem; }
.team-chat-head .chat-direction-pill { font-size: .6rem; padding: .05rem .4rem; line-height: 1.4; }
.team-chat-time { margin-left: auto; padding-left: .6rem; font-family: var(--mono); font-size: .66rem; color: var(--dim); }
.team-chat-text { font-size: .88rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 860px) {
  .team-popup-body { grid-template-columns: 1fr; overflow-y: auto; }
  .team-popup-col + .team-popup-col { border-left: none; border-top: 1px solid var(--line); }
  .team-member-list, .team-chat { max-height: 320px; flex: none; }
}

/* Revived = died before, but no longer banned (see eliminationStatus.js). */
.users-chip.is-revived { color: #b69cff; border-color: rgba(167,139,250,.45); background: rgba(167,139,250,.12); }
.death-detail-status { align-self: flex-start; margin-top: .4rem; }

/* Teams page with pagination: 8 teams per page fill a 4 x 2 grid on wide
   screens (2 x 4 on medium, 1 column on small); the pagination bar sits at
   the bottom of the card like the Logs page. */
.teams-card .teams-scroll { display: flex; flex-direction: column; }
/* The 8 cards of a page fill the whole box: rows share the height evenly,
   but never shrink below a card's natural height (the box scrolls then). */
.teams-card .teams-grid { flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(min-content, 1fr)); align-content: stretch; }
.teams-card .team-tile { min-height: 0; }
/* Inside a stretched card: identity on top, heads in the middle, stats +
   footer pinned to the bottom. */
.teams-card .team-heads { flex: 1 1 auto; align-items: center; }
.teams-card .team-heads img, .teams-card .team-heads-more { width: 36px; height: 36px; min-width: 36px; }
.teams-card .team-tile-foot { margin-top: auto; }
.teams-card .pagination-bar { padding-top: .85rem; border-top: 1px solid var(--line); }
@media (max-width: 1500px) { .teams-card .teams-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(min-content, 1fr)); } }
@media (max-width: 700px) { .teams-card .teams-grid { grid-template-columns: 1fr; grid-template-rows: none; } }

/* --- Admin dashboard (Overview) ----------------------------------------
   Hero (greeting, date, live SMP status, quick actions) -> server health
   tiles with meters -> full-width player chart -> Activity / Accounts /
   Revenue panels; sidebar: staff online, players online, tickets, deaths. */
.dash-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 1.6rem 1.8rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: radial-gradient(120% 140% at 0% 0%, rgba(53,215,255,.14), transparent 55%), radial-gradient(90% 120% at 100% 100%, rgba(77,143,255,.10), transparent 60%), var(--ink-1);
}
.dash-hero-text { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.dash-date { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.dash-hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin: 0; }
.dash-hero h1 .accent { background: linear-gradient(90deg, #00e5ff, #4d8fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dash-status-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: .25rem; }
.dash-server-pill {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .75rem; border-radius: 999px;
  font-family: var(--mono); font-size: .74rem; font-weight: 700; border: 1px solid var(--line-strong); background: var(--ink-2);
}
.dash-server-pill.is-online { color: #5ee29a; border-color: rgba(94,226,154,.45); }
.dash-server-pill.is-offline { color: #ff8a8d; border-color: rgba(255,90,95,.45); }
.dash-hero-meta { color: var(--dim); font-size: .85rem; }
.dash-quick { display: flex; gap: .5rem; flex-wrap: wrap; }
.dash-quick-btn {
  display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border-radius: 10px; text-decoration: none;
  font-size: .85rem; font-weight: 700; color: var(--text); background: var(--ink-2); border: 1px solid var(--line-strong);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.dash-quick-btn svg { width: 16px; height: 16px; color: var(--ice); }
.dash-quick-btn:hover { border-color: var(--ice); color: var(--ice); transform: translateY(-1px); }
.dash-quick-badge { min-width: 18px; height: 18px; padding: 0 .3rem; border-radius: 999px; background: #ff5a5f; color: #fff; font-size: .68rem; display: inline-flex; align-items: center; justify-content: center; }

.dash-layout { margin-top: 1.5rem; }
.dash-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; }
.dash-health-tile {
  display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.15rem; border-radius: var(--radius);
  background: var(--ink-1); border: 1px solid var(--line);
}
.dash-health-top { display: flex; align-items: center; gap: .6rem; margin-bottom: .2rem; }
.dash-health-top .stat-icon { width: 34px; height: 34px; }
.dash-health-tile .stat-value { font-size: 1.7rem; }
.dash-health-tile .stat-value-sub { font-size: .74rem; color: var(--dim); min-height: 1em; }
.dash-meter { height: 6px; border-radius: 999px; background: var(--ink-2); overflow: hidden; margin-top: .45rem; }
.dash-meter span { display: block; height: 100%; border-radius: 999px; transition: width .6s ease, background .6s ease; }

.dash-chart-card { background: var(--ink-1); }
.dash-chart-card .chart-svg-wrap { min-height: 160px; }
.dash-chart-range { font-family: var(--mono); font-size: .7rem; font-weight: 600; color: var(--dim); margin-left: .35rem; }

.dash-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.dash-panel { display: flex; flex-direction: column; gap: .8rem; padding: 1.2rem 1.25rem; border-radius: var(--radius); background: var(--ink-1); border: 1px solid var(--line); }
.dash-panel-title { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.dash-panel-sub { margin-left: .35rem; opacity: .7; }
.dash-kv { display: flex; align-items: center; gap: .7rem; font-size: .9rem; }
.dash-kv .k { color: var(--dim); flex: 1; }
.dash-kv .v { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: var(--text); }
.dash-kv-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.dash-kv-icon svg { width: 16px; height: 16px; }
.dash-progress { display: flex; flex-direction: column; gap: .1rem; }
.dash-progress-top { display: flex; justify-content: space-between; font-size: .84rem; color: var(--dim); }
.dash-progress-top strong { color: var(--text); }
.dash-big-money { display: flex; flex-direction: column; gap: .1rem; }
.dash-big-money .k { font-size: .8rem; color: var(--dim); }
.dash-big-money .v { font-family: var(--display); font-weight: 900; font-size: 1.8rem; color: #5ee29a; }
.dash-panel-link { margin-top: auto; align-self: flex-start; color: var(--ice); font-size: .82rem; font-weight: 700; text-decoration: none; }
.dash-panel-link:hover { text-decoration: underline; }

.dash-sidebar .ticket-sidebar-card { gap: .7rem; }
.dash-sidebar-count { font-family: var(--mono); font-size: .75rem; color: var(--dim); }
.dash-heads { display: flex; flex-wrap: wrap; gap: .35rem; }
.dash-heads img { width: 32px; height: 32px; border-radius: 8px; image-rendering: pixelated; border: 1px solid var(--line); }
.dash-heads img.is-vanished { opacity: .45; }
.dash-ticket-callout { display: flex; align-items: baseline; gap: .5rem; padding: .7rem .85rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); }
.dash-ticket-callout .v { font-family: var(--display); font-weight: 900; font-size: 1.6rem; color: var(--text); }
.dash-ticket-callout .k { font-size: .82rem; color: var(--dim); }
.dash-ticket-callout.is-attention { border-color: rgba(245,166,35,.5); background: rgba(245,166,35,.08); }
.dash-ticket-callout.is-attention .v { color: #f5a623; }
.dash-priority-row { display: flex; gap: .35rem; flex-wrap: wrap; }
.dash-priority-row .pill { font-size: .68rem; padding: .15rem .55rem; }
.dash-deaths { display: flex; flex-direction: column; gap: .45rem; }
.dash-death-row { display: flex; align-items: center; gap: .6rem; }
.dash-death-row img { width: 28px; height: 28px; border-radius: 7px; image-rendering: pixelated; flex: none; }
.dash-death-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-death-name { font-weight: 700; font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-death-cause { font-size: .72rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-death-row .users-chip { font-size: .6rem; }
@media (max-width: 900px) {
  .dash-hero { padding: 1.2rem; }
  .dash-quick { width: 100%; }
}

/* --- Dashboard tickets card ------------------------------------------- */
.dash-card-link { font-size: .76rem; font-weight: 700; color: var(--ice); text-decoration: none; }
.dash-card-link:hover { text-decoration: underline; }
.dash-ticket-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.dash-ticket-stat {
  display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .65rem .3rem; border-radius: 10px;
  background: var(--ink-2); border: 1px solid var(--line); text-decoration: none; transition: border-color .15s ease;
}
.dash-ticket-stat:hover { border-color: var(--line-strong); }
.dash-ticket-stat .v { font-family: var(--display); font-weight: 900; font-size: 1.35rem; color: var(--text); line-height: 1.1; }
.dash-ticket-stat .k { font-size: .68rem; color: var(--dim); white-space: nowrap; }
.dash-ticket-stat.is-attention { border-color: rgba(245,166,35,.5); background: rgba(245,166,35,.08); }
.dash-ticket-stat.is-attention .v { color: #f5a623; }
.dash-priority { display: flex; flex-direction: column; gap: .45rem; }
.dash-priority-head { font-size: .74rem; color: var(--dim); }
.dash-priority-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--ink-2); gap: 2px; }
.dash-priority-bar span { display: block; height: 100%; }
.dash-priority-bar .is-high, .dash-priority-legend i.is-high { background: #ff5a5f; }
.dash-priority-bar .is-medium, .dash-priority-legend i.is-medium { background: #f5a623; }
.dash-priority-bar .is-low, .dash-priority-legend i.is-low { background: #6b7a99; }
.dash-priority-legend { display: flex; justify-content: space-between; gap: .4rem; font-size: .72rem; color: var(--dim); }
.dash-priority-legend span { display: inline-flex; align-items: center; gap: .3rem; }
.dash-priority-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.dash-priority-legend strong { color: var(--text); }

/* --- Admin sidebar (left nav), restyled to match the dashboard ---------- */
.admin-sidebar {
  width: 250px; padding: 1.25rem .85rem 1rem;
  background: linear-gradient(180deg, rgba(53,215,255,.05), transparent 220px), var(--ink-1);
  scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.admin-brand {
  gap: .7rem; padding: .7rem .75rem; margin-bottom: 1.4rem; border-radius: 12px;
  background: var(--ink-2); border: 1px solid var(--line);
}
.admin-brand:hover { border-color: var(--line-strong); }
.admin-brand img { width: 32px; height: 32px; filter: drop-shadow(0 4px 10px rgba(53,215,255,.35)); }
.admin-brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.admin-brand span.admin-brand-name {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; font-size: .98rem;
  background: linear-gradient(90deg, #00e5ff, #4d8fff); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.admin-brand span.admin-brand-sub { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: none; -webkit-text-fill-color: currentColor; }
.admin-nav-label { padding: 0 .75rem; margin-bottom: .45rem; font-size: .64rem; }
.admin-nav { gap: .15rem; }
.admin-nav a, .admin-nav-group-toggle {
  position: relative; gap: .7rem; padding: .55rem .75rem; border-radius: 10px; border-left: none;
  font-size: .86rem; transition: background .15s ease, color .15s ease;
}
.admin-nav a .nav-icon, .admin-nav-group-toggle .nav-icon { width: 17px; height: 17px; opacity: .85; }
.admin-nav a:hover, .admin-nav-group-toggle:hover { background: rgba(255,255,255,.04); color: var(--text); }
.admin-nav a[aria-current="page"] {
  background: linear-gradient(90deg, rgba(53,215,255,.16), rgba(53,215,255,.04));
  color: var(--text); border-left: none; box-shadow: inset 0 0 0 1px rgba(53,215,255,.18);
}
.admin-nav a[aria-current="page"] .nav-icon { color: var(--ice); opacity: 1; }
.admin-nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: -.85rem; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--ice); box-shadow: 0 0 10px var(--ice);
}
.admin-nav a .nav-badge {
  padding: .18rem .48rem; font-size: .66rem; background: #ff5a5f; box-shadow: 0 0 10px rgba(255,90,95,.45);
}
.admin-nav-group.is-open > .admin-nav-group-toggle { color: var(--text); }
.admin-nav-submenu { margin-left: 1.45rem; padding-left: .5rem; gap: .1rem; }
.admin-nav-submenu a { padding: .45rem .65rem; font-size: .84rem; }
.admin-nav-submenu a[aria-current="page"]::before { left: -.6rem; }
.admin-nav-group.is-open .admin-nav-submenu { max-height: 260px; }
/* Sidebar groups slide open / closed, links easing in one after another */
.admin-nav-submenu { opacity: 0; transition: max-height .3s cubic-bezier(.2, .8, .3, 1), margin-top .3s ease, opacity .22s ease; }
.admin-nav-group.is-open .admin-nav-submenu { opacity: 1; }
.admin-nav-submenu a { opacity: 0; transform: translateX(-8px); transition: opacity .2s ease, transform .25s cubic-bezier(.2, .8, .3, 1), background-color .15s ease, color .15s ease; }
.admin-nav-group.is-open .admin-nav-submenu a { opacity: 1; transform: none; }
.admin-nav-group.is-open .admin-nav-submenu a:nth-child(2) { transition-delay: .03s, .03s, 0s, 0s; }
.admin-nav-group.is-open .admin-nav-submenu a:nth-child(3) { transition-delay: .06s, .06s, 0s, 0s; }
.admin-nav-group.is-open .admin-nav-submenu a:nth-child(4) { transition-delay: .09s, .09s, 0s, 0s; }
.admin-nav-group.is-open .admin-nav-submenu a:nth-child(5) { transition-delay: .12s, .12s, 0s, 0s; }
.admin-nav-group-toggle .admin-nav-group-chevron { transition: transform .25s cubic-bezier(.2, .8, .3, 1); }
@media (prefers-reduced-motion: reduce) {
  .admin-nav-submenu, .admin-nav-submenu a, .admin-nav-group-toggle .admin-nav-group-chevron { transition: none !important; }
}
.admin-nav-divider { margin: .6rem .75rem; }

.admin-sidebar-footer { border-top: none; padding-top: .5rem; margin-top: 1rem; }
.admin-profile-card {
  display: flex; align-items: center; gap: .65rem; padding: .6rem .65rem; border-radius: 12px;
  background: var(--ink-2); border: 1px solid var(--line);
}
.admin-profile-card img, .admin-profile-card .avatar-placeholder { width: 38px; height: 38px; border-radius: 9px; image-rendering: pixelated; flex: none; }
.admin-profile-card .avatar-placeholder { display: flex; align-items: center; justify-content: center; background: #000; color: #fff; font-weight: 800; }
.admin-profile-text { flex: 1; min-width: 0; }
.admin-profile-text .name { font-weight: 800; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-profile-exit {
  width: 32px; height: 32px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--dim); border: 1px solid var(--line-strong); transition: color .15s ease, border-color .15s ease;
}
.admin-profile-exit svg { width: 15px; height: 15px; }
.admin-profile-exit:hover { color: var(--ice); border-color: var(--ice); }
@media (max-width: 900px) {
  .admin-sidebar { width: 100%; }
  .admin-nav a[aria-current="page"]::before { display: none; }
}

/* --- Admin Tickets page revamp ----------------------------------------- */
/* Table: category chips, player heads, relative times, roomier rows. */
.ticket-category-chip {
  display: inline-flex; align-items: center; padding: .16rem .6rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap;
  color: hsl(var(--cat-hue, 200) 80% 72%); background: hsl(var(--cat-hue, 200) 70% 50% / .12); border: 1px solid hsl(var(--cat-hue, 200) 70% 60% / .35);
}
.ticket-person { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.ticket-person img, .ticket-person-ph { width: 22px; height: 22px; border-radius: 6px; flex: none; image-rendering: pixelated; }
.ticket-person-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--ink-1); border: 1px solid var(--line-strong); color: var(--dim); font-size: .66rem; font-weight: 800; }
.ticket-person.is-empty { color: var(--dim); font-style: italic; font-size: .82rem; }
.ticket-time-cell { color: var(--dim); font-size: .82rem; white-space: nowrap; }
.ticket-main-stack .ticket-list-card.fill-scroll .table-wrap { border-radius: 12px; border: 1px solid var(--line); }
#ticket-rows td { padding-top: .7rem; padding-bottom: .7rem; }
#ticket-rows .ticket-subject-cell a { font-weight: 600; }
#ticket-rows tr.ticket-row-unread td:first-child { box-shadow: inset 3px 0 0 #ff5a5f; }
#ticket-rows tr.ticket-row-unread .ticket-subject-cell a { color: var(--text); font-weight: 800; }
.ticket-tab-btn { transition: background .15s ease, color .15s ease; }

/* Sidebar */
.tickets-sidebar .ticket-sidebar-card { gap: .75rem; }
.tickets-me { display: flex; align-items: center; gap: .7rem; }
.tickets-me img, .tickets-me .avatar-placeholder { width: 42px; height: 42px; border-radius: 10px; image-rendering: pixelated; flex: none; }
.tickets-me .avatar-placeholder { display: flex; align-items: center; justify-content: center; background: #000; color: #fff; font-weight: 800; }
.tickets-me-text { min-width: 0; }
.tickets-me-text .name { font-weight: 800; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tickets-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.tickets-mini-stat {
  display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .6rem .3rem; border-radius: 10px;
  background: var(--ink-2); border: 1px solid var(--line); text-decoration: none; color: inherit;
}
a.tickets-mini-stat:hover { border-color: var(--line-strong); }
.tickets-mini-stat .v { font-family: var(--display); font-weight: 900; font-size: 1.3rem; color: var(--text); line-height: 1.1; }
.tickets-mini-stat .k { font-size: .66rem; color: var(--dim); white-space: nowrap; }
.tickets-mini-stat.is-attention { border-color: rgba(245,166,35,.5); background: rgba(245,166,35,.08); }
.tickets-mini-stat.is-attention .v { color: #f5a623; }
.tickets-mini-stat.is-accent { border-color: rgba(53,215,255,.45); background: rgba(53,215,255,.07); }
.tickets-mini-stat.is-accent .v { color: var(--ice); }
.tickets-priority-list { display: flex; flex-direction: column; gap: .35rem; }
.tickets-priority-row { display: flex; align-items: center; gap: .55rem; font-size: .84rem; }
.tickets-priority-row .k { flex: 1; color: var(--dim); }
.tickets-priority-row .v { font-weight: 800; color: var(--text); }
.tickets-priority-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tickets-priority-dot.is-high { background: #ff5a5f; box-shadow: 0 0 6px rgba(255,90,95,.5); }
.tickets-priority-dot.is-medium { background: #f5a623; }
.tickets-priority-dot.is-low { background: #6b7a99; }
.tickets-rating { display: flex; flex-direction: column; gap: .25rem; padding: .65rem .75rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); }
.tickets-rating-top { display: flex; align-items: baseline; justify-content: space-between; }
.tickets-rating-top .k { font-size: .82rem; color: var(--dim); }
.tickets-rating-num { font-family: var(--display); font-weight: 900; font-size: 1.25rem; color: #f5c451; }
.tickets-rating-num span { font-size: .75rem; color: var(--dim); font-weight: 600; margin-left: .1rem; }
.tickets-rating-bottom { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tickets-rating-count { font-size: .72rem; color: var(--dim); font-family: var(--mono); }

/* --- Tabs (shared across the admin panel): active tab gets the same soft
   blue tint + outline as the active sidebar item. --- */
.ticket-tab-buttons { background: var(--ink-2); border-color: var(--line); padding: 4px; gap: 3px; }
.ticket-tab-btn { padding: .48rem 1.05rem; font-size: .84rem; }
.ticket-tab-btn:hover { color: var(--text); background: rgba(255,255,255,.035); }
.ticket-tab-btn.is-active {
  background: linear-gradient(180deg, rgba(53,215,255,.18), rgba(53,215,255,.07)); color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(53,215,255,.32);
}
.ticket-guide-trigger { border-radius: 12px; background: var(--ink-2); border-color: var(--line); }
.ticket-guide-trigger:hover { color: var(--ice); border-color: rgba(53,215,255,.4); }
.ticket-guide-trigger.is-active { background: linear-gradient(180deg, rgba(53,215,255,.18), rgba(53,215,255,.07)); color: var(--ice); border-color: rgba(53,215,255,.45); }

/* --- Tables on every Tickets tab: rounded frame, roomier rows --- */
.tickets-page-layout .table-wrap { border-radius: 12px; border: 1px solid var(--line); }
.tickets-page-layout .admin-table tbody td { padding-top: .72rem; padding-bottom: .72rem; }
.tickets-page-layout .admin-table tbody tr.row-clickable:hover td { background: rgba(53,215,255,.05); }
.tk-preview-cell { max-width: 380px; text-align: left !important; }
.tk-preview { display: block; color: var(--dim); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-by { color: var(--dim); font-size: .76rem; }
.ticket-category-chip.is-general { --cat-hue: 195 !important; }
.guide-custom-tag { margin-left: .35rem; }

/* --- Detail pages (Automatic Message / Ticket Form / Info category):
   header actions on the right, content card scrolls on its own. --- */
.ticket-page-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.ticket-page-actions .btn { display: inline-flex; align-items: center; gap: .4rem; }
.ticket-page-actions .btn svg { width: 14px; height: 14px; }
.detail-page-card { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.detail-page-card::-webkit-scrollbar { width: 8px; }
.detail-page-card::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
.detail-page-card .ticket-guide-content-box { border-radius: 12px; }
.ticket-form-field-row { border-radius: 10px; }

/* --- Admin ticket page (single ticket) revamp -------------------------- */
.td-head { align-items: flex-start; flex-wrap: wrap; row-gap: .7rem; }
.td-title { flex: 1; min-width: 280px; }
.td-title h1 { font-size: 1.35rem; font-weight: 900; }
.td-chips { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .45rem; }
.td-chips .pill { font-size: .68rem; padding: .16rem .6rem; }
.td-id { font-family: var(--mono); font-size: .76rem; color: var(--dim); padding: .14rem .5rem; border-radius: 999px; border: 1px solid var(--line-strong); }
.td-opened { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--dim); margin-left: .25rem; }
.td-opened img { width: 18px; height: 18px; border-radius: 5px; image-rendering: pixelated; }
.td-opened strong { color: var(--text); }
.td-actions .ticket-header-toolbar { gap: .35rem; justify-content: flex-end; }
.td-actions .ticket-toolbar-btn { padding: .42rem .7rem; font-size: .8rem; border-radius: 9px; background: var(--ink-1); border-color: var(--line); }
.td-actions .ticket-toolbar-btn:hover { border-color: var(--ice); color: var(--ice); }
.td-actions .ticket-toolbar-btn:hover svg { color: var(--ice); }
.td-actions .ticket-toolbar-btn.is-danger:hover { border-color: rgba(255,90,95,.6); color: #ff9a9d; }
.td-actions .delete-confirm { display: flex; gap: .4rem; }
.td-actions .delete-confirm[hidden] { display: none; }

/* Thread: full card again (no separate toolbar card above it). */
.ticket-thread-card.is-connected.td-thread-card { border-top: 1px solid var(--line); border-radius: var(--radius); padding-top: 1rem; }
.td-thread-card .ticket-msg { border-radius: 14px; padding: .8rem 1rem .7rem; box-shadow: 0 6px 18px -14px rgba(0,0,0,.8); }
.td-thread-card .ticket-msg-row:not(.is-staff) .ticket-msg { border-top-left-radius: 5px; }
.td-thread-card .ticket-msg-row.is-staff .ticket-msg { border-top-right-radius: 5px; background: linear-gradient(180deg, rgba(53,215,255,.11), rgba(53,215,255,.05)); border-color: rgba(53,215,255,.28); }
.td-thread-card .ticket-msg-row.is-staff-note .ticket-msg { background: rgba(245,166,35,.08); border: 1px dashed rgba(245,166,35,.5); }
.td-thread-card .ticket-msg-row.is-auto .ticket-msg { background: rgba(167,139,250,.08); border-color: rgba(167,139,250,.35); }
.td-thread-card .ticket-msg-row.is-auto .ticket-msg-author { color: #b69cff; }
.td-thread-card .ticket-msg-avatar { border-radius: 10px; overflow: hidden; }
.td-thread-card .ticket-msg-footer { opacity: .8; }
.td-thread-card #reply-section { padding-top: .8rem; border-top: 1px solid var(--line); }
.td-thread-card #reply-body { border-radius: 12px; background: var(--ink-2); transition: border-color .15s ease, box-shadow .15s ease; }
.td-thread-card #reply-body:focus { outline: none; border-color: rgba(53,215,255,.55); box-shadow: 0 0 0 3px rgba(53,215,255,.12); }

/* Sidebar */
.td-requester { display: flex; align-items: center; gap: .7rem; }
.td-requester img, .td-requester-ph { width: 42px; height: 42px; border-radius: 10px; image-rendering: pixelated; flex: none; }
.td-requester-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--ink-2); border: 1px solid var(--line-strong); color: var(--dim); font-weight: 800; }
.td-requester-text { display: flex; flex-direction: column; min-width: 0; }
.td-requester-text .name { font-weight: 800; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-requester-text .sub { font-size: .74rem; color: var(--dim); }
.td-participants { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; }
.td-participants .k { font-size: .76rem; color: var(--dim); }
.td-participant-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.td-death-stats .death-stat { border-top: 3px solid var(--line-strong); }
.td-death-stats .death-stat.is-good { border-top-color: #5ee29a; }
.td-death-stats .death-stat.is-good .v { color: #5ee29a; }
.td-death-stats .death-stat.is-warn { border-top-color: #f5a623; }
.td-death-stats .death-stat.is-warn .v { color: #f5a623; }
.td-death-stats .death-stat.is-bad { border-top-color: #ff5a5f; }
.td-death-stats .death-stat.is-bad .v { color: #ff5a5f; }

/* --- Shared Tickets-page table (tk-table) ----------------------------- */
.tickets-page-layout .table-wrap { background: var(--ink-1); }
.tk-table { border-collapse: separate; border-spacing: 0; }
.tk-table thead th {
  background: var(--ink-2); font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); font-weight: 700; padding: .7rem .9rem; border-bottom: 1px solid var(--line);
}
.tk-table thead th.tk-th-main { text-align: left; }
.tk-table tbody td { padding: .8rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tk-table tbody tr:last-child td { border-bottom: none; }
.tk-table tbody tr.row-clickable { transition: background .12s ease; }
.tk-table tbody tr.row-clickable:hover td { background: rgba(53,215,255,.05); }
.tk-table tbody tr.row-clickable:hover td:first-child { box-shadow: inset 3px 0 0 var(--ice); }
.tk-cell-main { text-align: left !important; }
.tk-cell-main > .ticket-category-chip, .tk-main-line { display: inline-flex; align-items: center; gap: .4rem; }
.tk-sub { display: block; margin-top: .3rem; font-size: .78rem; color: var(--dim); max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ticket-subject { font-weight: 700; color: var(--text); }
.tk-count { display: inline-flex; min-width: 30px; justify-content: center; padding: .15rem .5rem; border-radius: 8px; background: var(--ink-2); border: 1px solid var(--line); font-weight: 800; font-size: .84rem; }
.tk-count.is-accent { color: var(--ice); border-color: rgba(53,215,255,.35); }
.tk-state { display: inline-flex; align-items: center; gap: .45rem; padding: .22rem .7rem; border-radius: 999px; font-size: .76rem; font-weight: 800; border: 1px solid var(--line-strong); color: var(--dim); }
.tk-state-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tk-state.is-on { color: #5ee29a; border-color: rgba(94,226,154,.45); background: rgba(94,226,154,.10); }
.tk-state.is-on .tk-state-dot { box-shadow: 0 0 8px #5ee29a; }
.tk-state.is-off { color: #8a94ab; background: rgba(255,255,255,.02); }
.tk-score { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: .18rem .5rem; border-radius: 8px; font-family: var(--display); font-weight: 900; font-size: .9rem; border: 1px solid var(--line-strong); }
.tk-score.is-good { color: #5ee29a; border-color: rgba(94,226,154,.45); background: rgba(94,226,154,.10); }
.tk-score.is-warn { color: #f5a623; border-color: rgba(245,166,35,.45); background: rgba(245,166,35,.08); }
.tk-score.is-bad { color: #ff5a5f; border-color: rgba(255,90,95,.45); background: rgba(255,90,95,.08); }
.tk-score.is-big { min-width: 56px; padding: .45rem .7rem; font-size: 1.35rem; border-radius: 12px; }
.tk-score[hidden] { display: none; }
#ticket-rows .ticket-subject-cell { text-align: left; }

/* --- Automatic Message page: status banner with the on/off switch ------- */
.am-banner {
  display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 12px; border: 1px solid var(--line-strong);
  transition: background .2s ease, border-color .2s ease;
}
.am-banner.is-on { background: linear-gradient(90deg, rgba(94,226,154,.14), rgba(94,226,154,.04)); border-color: rgba(94,226,154,.45); }
.am-banner.is-off { background: rgba(255,255,255,.025); }
.am-banner-icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; }
.am-banner.is-on .am-banner-icon { background: rgba(94,226,154,.18); color: #5ee29a; }
.am-banner.is-off .am-banner-icon { background: var(--ink-2); color: #8a94ab; }
.am-banner-icon svg { width: 20px; height: 20px; }
.am-banner.is-on .am-icon-off, .am-banner.is-off .am-icon-on { display: none; }
.am-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.am-banner-text strong { font-size: .95rem; }
.am-banner.is-on .am-banner-text strong { color: #5ee29a; }
.am-banner-text span { font-size: .8rem; color: var(--dim); }
.am-banner-toggle { flex: none; transform: scale(1.15); }
.am-unsaved { margin: 0; font-size: .8rem; color: #f5a623; }

/* --- Review popup ------------------------------------------------------- */
.review-popup { max-width: 760px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.review-popup-head {
  display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(245,196,81,.08), transparent);
}
.review-popup-avatar {
  width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-2); border: 1px solid var(--line-strong); font-weight: 900; font-size: 1.3rem; color: var(--dim);
}
.review-popup-avatar img { width: 100%; height: 100%; image-rendering: pixelated; }
.review-popup-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.review-popup-title h3 { font-family: var(--display); font-size: 1.25rem; font-weight: 900; margin: 0; }
.review-popup-ticket { font-size: .86rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-popup-when { font-size: .74rem; color: var(--dim); font-family: var(--mono); }
.review-popup-close { align-self: flex-start; }
.review-popup-body { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; padding: 1.2rem 1.4rem 1.4rem; }
.review-card { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.05rem; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); }
.review-card.is-pending { opacity: .7; }
.review-card-head { display: flex; flex-direction: column; gap: .1rem; }
.review-card-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text); font-weight: 700; }
.review-card-sub { font-size: .74rem; color: var(--dim); }
.review-card-score { display: flex; align-items: center; gap: .6rem; }
.review-card-text { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word; padding-top: .6rem; border-top: 1px solid var(--line); }
.review-card-text.is-empty { color: var(--dim); font-style: italic; }
@media (max-width: 680px) { .review-popup-body { grid-template-columns: 1fr; } }

/* --- Player ratings card: label top-left, score + stars below ---------- */
.tickets-rating-head { display: flex; align-items: center; justify-content: space-between; }
.tickets-rating-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text); font-weight: 700; }
.tickets-rating-body { display: flex; align-items: center; gap: .6rem; margin-top: .2rem; }

/* --- Ticket page composer: one box, attach left, send right ----------- */
.td-composer { margin: 0; }
.td-composer-box {
  display: flex; flex-direction: column; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line-strong);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.td-composer-box:focus-within { border-color: rgba(53,215,255,.55); box-shadow: 0 0 0 3px rgba(53,215,255,.12); }
.td-thread-card .td-composer-box #reply-body {
  border: none; background: transparent; box-shadow: none; border-radius: 14px 14px 0 0; padding: .85rem 1rem .4rem; min-height: 56px; resize: none;
}
.td-thread-card .td-composer-box #reply-body:focus { outline: none; box-shadow: none; }
.td-composer-box .attachment-preview-list { padding: 0 .8rem; }
.td-composer-bar { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem .5rem .6rem; }
.td-composer-icon {
  width: 34px; height: 34px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid transparent; color: var(--dim); cursor: pointer;
}
.td-composer-icon:hover { color: var(--ice); background: rgba(53,215,255,.08); }
.td-composer-icon svg { width: 18px; height: 18px; }
.td-composer-hint { font-size: .72rem; color: var(--dim); }
.td-composer-hint kbd { font-family: var(--mono); font-size: .66rem; padding: .05rem .3rem; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--ink-1); }
.td-composer-bar .attachment-hint-error { font-size: .74rem; }
.td-send-btn {
  margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #35d7ff, #4d8fff); color: #04141c; font: inherit; font-weight: 800; font-size: .84rem;
  box-shadow: 0 6px 18px -8px rgba(53,215,255,.7); transition: transform .12s ease, filter .12s ease;
}
.td-send-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.td-send-btn:disabled { opacity: .6; cursor: default; transform: none; }
.td-send-btn svg { width: 15px; height: 15px; }
.td-thread-card #reply-section { border-top: none; padding-top: .6rem; }

/* --- Dashboard chart range buttons (same segmented style as the tabs) -- */
.range-toggle { background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 3px; }
.range-btn { font-family: var(--mono); font-size: .74rem; font-weight: 700; padding: .38rem .75rem; border-radius: 8px; letter-spacing: .02em; }
.range-btn:hover { color: var(--text); background: rgba(255,255,255,.035); }
.range-btn.active {
  color: var(--text); background: linear-gradient(180deg, rgba(53,215,255,.2), rgba(53,215,255,.08));
  box-shadow: inset 0 0 0 1px rgba(53,215,255,.35);
}

/* --- Info + Ticket Forms detail pages (shared bits) -------------------- */
.gd-title-chip { font-size: 1.05rem; padding: .3rem .8rem; border-radius: 10px; font-family: var(--display); font-weight: 900; }
.gd-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .5rem;
  padding: 3rem 1.5rem; border: 1px dashed var(--line-strong); border-radius: 14px; background: rgba(255,255,255,.015); margin: auto 0;
}
.gd-empty-icon {
  width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .3rem;
  background: rgba(53,215,255,.1); color: var(--ice); border: 1px solid rgba(53,215,255,.3);
}
.gd-empty-icon svg { width: 24px; height: 24px; }
.gd-empty strong { font-family: var(--display); font-size: 1.05rem; }
.gd-empty > span:not(.gd-empty-icon) { max-width: 420px; font-size: .86rem; color: var(--dim); line-height: 1.5; }
.gd-empty .btn { margin-top: .6rem; }
.gd-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: .2rem 0 .35rem; }
.gd-stat { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); }
.gd-stat-num { font-family: var(--display); font-weight: 900; font-size: 1.35rem; line-height: 1.1; color: var(--text); }
.gd-stat-label { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.gd-stat.is-required .gd-stat-num { color: #ff7b7f; }

/* --- Info page: filter, section cards, tips ---------------------------- */
.gd-page { display: flex; flex-direction: column; gap: 1rem; }
.gd-toolbar { display: flex; align-items: center; gap: .75rem; position: sticky; top: -1px; z-index: 2; padding-bottom: .1rem; background: var(--ink-1); }
.gd-search {
  flex: 1; display: flex; align-items: center; gap: .55rem; padding: 0 .8rem; border-radius: 10px;
  background: var(--ink-2); border: 1px solid var(--line-strong); transition: border-color .15s ease, box-shadow .15s ease;
}
.gd-search:focus-within { border-color: rgba(53,215,255,.55); box-shadow: 0 0 0 3px rgba(53,215,255,.12); }
.gd-search svg { width: 16px; height: 16px; color: var(--dim); flex: none; }
.gd-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: .88rem; padding: .62rem 0; }
.gd-filter-count { flex: none; font-family: var(--mono); font-size: .72rem; color: var(--ice); padding: .25rem .6rem; border-radius: 999px; background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.3); }
.gd-filter-count[hidden] { display: none; }
.gd-sections { display: flex; flex-direction: column; gap: .8rem; }
.gd-section { border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); overflow: hidden; transition: border-color .15s ease; }
.gd-section[hidden], .gd-tip[hidden] { display: none; }
.gd-section:hover { border-color: var(--line-strong); }
.gd-section-head {
  display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(53,215,255,.07), transparent 70%);
}
.gd-section-num {
  flex: none; min-width: 34px; height: 30px; padding: 0 .4rem; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 800; font-size: .78rem; color: var(--ice); background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.3);
}
.gd-section-title { flex: 1; min-width: 0; margin: 0; font-family: var(--display); font-weight: 800; font-size: 1rem; color: var(--text); overflow-wrap: anywhere; }
.gd-section-count { flex: none; font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.gd-tips { list-style: none; margin: 0; padding: .5rem .6rem; display: flex; flex-direction: column; }
.gd-tip { display: flex; align-items: flex-start; gap: .7rem; padding: .55rem .6rem; border-radius: 9px; font-size: .92rem; line-height: 1.6; color: var(--text); transition: background .12s ease; }
.gd-tip:hover { background: rgba(255,255,255,.03); }
.gd-tip.is-hit { background: rgba(53,215,255,.08); }
.gd-tip-mark { flex: none; width: 7px; height: 7px; margin-top: .62em; border-radius: 2px; background: var(--ice); transform: rotate(45deg); box-shadow: 0 0 8px rgba(53,215,255,.5); }
.gd-tip-text { flex: 1; min-width: 0; overflow-wrap: anywhere; opacity: .92; }
.gd-section-empty { margin: 0; padding: .9rem 1.1rem; font-size: .85rem; color: var(--dim); font-style: italic; }
.gd-no-match { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--dim); font-size: .88rem; }
.gd-no-match[hidden] { display: none; }
.gd-toc-card { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; }
.gd-toc { display: flex; flex-direction: column; gap: .15rem; margin-top: .35rem; overflow-y: auto; min-height: 0; max-height: 34vh; }
.gd-toc-link {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 8px; text-decoration: none; color: var(--dim);
  font-size: .84rem; border-left: 2px solid transparent; transition: background .12s ease, color .12s ease;
}
.gd-toc-link:hover { color: var(--text); background: rgba(255,255,255,.035); }
.gd-toc-link.is-active { color: var(--text); background: rgba(53,215,255,.08); border-left-color: var(--ice); }
.gd-toc-num { flex: none; width: 20px; font-family: var(--mono); font-size: .72rem; font-weight: 800; color: var(--ice); text-align: center; }
.gd-toc-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-toc-count { flex: none; font-family: var(--mono); font-size: .68rem; color: var(--dim); padding: .05rem .4rem; border-radius: 6px; background: var(--ink-2); border: 1px solid var(--line); }

/* --- Info editor popup: numbered rows with reorder + counters --------- */
.guide-editor-row { gap: .6rem; padding: .8rem; border-radius: 12px; background: var(--ink-2); transition: border-color .15s ease; }
.guide-editor-row:focus-within { border-color: rgba(53,215,255,.45); }
.guide-editor-row-head { gap: .45rem; }
.guide-editor-row .guide-editor-row-title, .guide-editor-row textarea { background: var(--ink-1); }
.gd-row-num {
  flex: none; min-width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 800; font-size: .78rem; color: var(--ice); background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.3);
}
.gd-row-tips { flex: none; font-family: var(--mono); font-size: .68rem; color: var(--dim); padding: 0 .35rem; white-space: nowrap; }
.guide-editor-row .icon-btn { width: 32px; height: 32px; }
.guide-editor-row .guide-editor-row-remove { font-size: inherit; }
.guide-editor-row .guide-editor-row-remove:hover { color: #ff5a5f; border-color: rgba(255,90,95,.6); }
.gd-add-section {
  flex: none; display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px dashed var(--line-strong); color: var(--dim); font: inherit; font-weight: 700; font-size: .86rem;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.gd-add-section:hover { color: var(--ice); border-color: var(--ice); background: rgba(53,215,255,.05); }
.gd-add-section svg { width: 16px; height: 16px; }
.gd-editor-summary { font-family: var(--mono); font-size: .74rem; color: var(--dim); }
.gd-editor-footer-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.gd-editor-footer-actions[hidden] { display: none; }
.gd-editor-dirty { font-size: .78rem; color: #f5a623; font-weight: 600; }
.gd-editor-dirty[hidden] { display: none; }

/* --- Ticket Forms page: grouped field cards --------------------------- */
.ff-page .ticket-form-field-list { gap: .9rem; flex: 1; }
.ff-page { display: flex; flex-direction: column; }
.ff-group { display: flex; flex-direction: column; gap: .45rem; padding: .75rem; border-radius: 14px; background: rgba(255,255,255,.015); border: 1px solid var(--line); }
.ff-group-head { display: flex; align-items: center; gap: .55rem; padding: .1rem .3rem .35rem; }
.ff-group-icon { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(53,215,255,.1); color: var(--ice); }
.ff-group-icon svg { width: 15px; height: 15px; }
.ff-group-title { flex: 1; min-width: 0; font-family: var(--display); font-weight: 800; font-size: .95rem; color: var(--ice); }
.ff-group-title.is-plain { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.ff-group-count { font-family: var(--mono); font-size: .68rem; color: var(--dim); }
.ticket-form-field-row.ff-field {
  align-items: flex-start; justify-content: flex-start; gap: .85rem; padding: .85rem .9rem; border-radius: 12px; border-color: var(--line);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ff-field:hover { border-color: var(--line-strong); box-shadow: inset 3px 0 0 var(--ice); }
.ff-num {
  flex: none; width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-weight: 800; font-size: .76rem; color: var(--dim); background: var(--ink-1); border: 1px solid var(--line-strong);
}
.ff-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.ff-top .ticket-form-field-label { font-size: .95rem; }
.ff-asterisk { color: var(--blood); }
.ff-mock {
  padding: .5rem .75rem; border-radius: 8px; background: var(--ink-1); border: 1px solid var(--line); font-size: .82rem; color: var(--dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ff-mock.is-long { min-height: 52px; white-space: normal; }
.ff-mock.is-empty { font-style: italic; opacity: .6; }
.ff-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.ff-tag {
  display: inline-flex; align-items: center; gap: .3rem; padding: .14rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 700;
  color: var(--dim); border: 1px solid var(--line-strong); background: var(--ink-1);
}
.ff-tag svg { width: 12px; height: 12px; }
.ff-tag.is-required { color: #ff7b7f; border-color: rgba(255,90,95,.4); background: rgba(255,90,95,.07); }
.ff-tag.is-optional { color: #8a94ab; }
.ff-actions { display: flex; align-items: center; gap: .3rem; opacity: .55; transition: opacity .15s ease; }
.ff-field:hover .ff-actions, .ff-actions:focus-within { opacity: 1; }
.ff-actions[hidden], .ff-delete-confirm[hidden] { display: none; }
.ff-actions .icon-btn { width: 32px; height: 32px; }
.ff-delete-icon:hover { color: #ff5a5f !important; border-color: rgba(255,90,95,.6) !important; }
.ff-delete-confirm { display: flex; align-items: center; gap: .45rem; padding: .3rem .3rem .3rem .7rem; border-radius: 10px; background: rgba(255,90,95,.08); border: 1px solid rgba(255,90,95,.35); }
.ff-delete-confirm > span { font-size: .8rem; font-weight: 700; color: #ff7b7f; white-space: nowrap; }
.ff-page .gd-empty { flex: 1; }

/* --- Ticket Forms: field editor + player preview popups ---------------- */
.ff-editor-popup { max-width: 880px; padding: 1.5rem 1.6rem; max-height: 90vh; }
.ff-editor-popup > .account-error { margin: 0 0 .9rem; }
.ff-editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.3rem; }
.ff-editor-fields { display: flex; flex-direction: column; gap: .95rem; margin: 0; padding: 0; background: none; border: none; }
.ff-optional { font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); opacity: .7; margin-left: .3rem; font-weight: 600; }
.ff-type-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ff-type-choice {
  display: flex; align-items: center; gap: .65rem; padding: .7rem .8rem; border-radius: 10px; cursor: pointer; text-align: left;
  background: var(--ink-2); border: 1px solid var(--line-strong); color: var(--text); font: inherit; transition: border-color .12s ease, background .12s ease;
}
.ff-type-choice:hover { border-color: rgba(53,215,255,.45); }
.ff-type-choice.is-active { border-color: var(--ice); background: rgba(53,215,255,.09); box-shadow: inset 0 0 0 1px rgba(53,215,255,.35); }
.ff-type-icon { width: 32px; height: 32px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink-1); color: var(--dim); }
.ff-type-choice.is-active .ff-type-icon { color: var(--ice); background: rgba(53,215,255,.14); }
.ff-type-icon svg { width: 17px; height: 17px; }
.ff-type-text { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.ff-type-text strong { font-size: .86rem; }
.ff-type-text span { font-size: .74rem; color: var(--dim); }
.ff-required-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .85rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line-strong); }
.ff-editor-preview { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.ff-editor-preview-box {
  flex: 1; display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: 1rem; border-radius: 12px;
  background: var(--ink-0, #05070d); border: 1px dashed var(--line-strong);
}
.ff-editor-preview-box .custom-field-section-label { padding-top: 0; border-top: 0; }
.ff-editor-preview-box [hidden] { display: none; }
.ff-editor-preview-box label.is-placeholder { opacity: .5; font-style: italic; }
.ff-editor-preview-box textarea { min-height: 90px; resize: none; }
.ff-editor-preview-box input:disabled, .ff-editor-preview-box textarea:disabled { opacity: 1; cursor: default; }
.ff-editor-footer { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .5rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.ff-preview-popup { max-width: 640px; padding: 1.5rem 1.6rem; max-height: 90vh; }
.ff-preview-body { display: flex; flex-direction: column; gap: 1rem; margin: 0; padding: 1.2rem; border-radius: 12px; background: var(--ink-0, #05070d); border: 1px solid var(--line); }
.ff-preview-body input:disabled, .ff-preview-body textarea:disabled { opacity: 1; cursor: default; }
.ff-preview-body textarea { min-height: 90px; resize: none; }
.ff-preview-body .ticket-composer-actions .btn:disabled { opacity: .7; cursor: default; }
@media (max-width: 760px) {
  .ff-editor-layout { grid-template-columns: 1fr; }
  .ff-type-choices { grid-template-columns: 1fr; }
  .ticket-form-field-row.ff-field { flex-wrap: wrap; }
}
#guide-section-editor-fields { flex: 0 1 auto; }
.gd-add-section { width: 100%; align-self: stretch; }
.guide-editor-main .guide-editor-footer { margin-top: auto; }
.ff-editor-preview-box { flex: 0 0 auto; }
.tickets-rating-body { justify-content: space-between; }

/* --- Tickets page header: tool links (Reviews / Auto Messages / Forms / Info) */
.tk-page-head { align-items: center; }
.tk-tools { margin-left: auto; display: flex; align-items: center; gap: 3px; padding: 4px; border-radius: 12px; background: var(--ink-1); border: 1px solid var(--line); flex-wrap: wrap; }
.tk-tool {
  display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .85rem; border-radius: 9px; text-decoration: none;
  color: var(--dim); font-size: .82rem; font-weight: 700; transition: background .15s ease, color .15s ease;
}
.tk-tool svg { width: 16px; height: 16px; flex: none; }
.tk-tool:hover { color: var(--text); background: rgba(255,255,255,.04); }
.tk-tool.is-active { color: var(--text); background: linear-gradient(180deg, rgba(53,215,255,.2), rgba(53,215,255,.08)); box-shadow: inset 0 0 0 1px rgba(53,215,255,.35); }
.tk-tool.is-active svg { color: var(--ice); }

/* --- Card toolbar: status tabs with counts + search ------------------- */
.tk-toolbar { position: relative; flex: none; min-height: 46px; display: flex; align-items: center; }
.tk-toolbar-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.tk-toolbar-main[hidden] { display: none; }
.tk-status-tabs { display: flex; align-items: center; gap: 3px; padding: 4px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); flex-wrap: wrap; }
.tk-status-tab {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .7rem .45rem .8rem; border-radius: 9px; text-decoration: none;
  color: var(--dim); font-size: .84rem; font-weight: 700; transition: background .15s ease, color .15s ease;
}
.tk-status-tab:hover { color: var(--text); background: rgba(255,255,255,.035); }
.tk-status-tab.is-active { color: var(--text); background: linear-gradient(180deg, rgba(53,215,255,.2), rgba(53,215,255,.08)); box-shadow: inset 0 0 0 1px rgba(53,215,255,.35); }
.tk-status-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; opacity: .7; }
.tk-status-tab.is-open .tk-status-dot { background: #5ee29a; opacity: 1; box-shadow: 0 0 6px rgba(94,226,154,.6); }
.tk-status-tab.is-closed .tk-status-dot { background: #8a94ab; opacity: 1; }
.tk-status-tab.is-archived .tk-status-dot { background: #f5a623; opacity: 1; }
.tk-status-tab.is-assigned .tk-status-dot { background: var(--ice); opacity: 1; }
.tk-status-count {
  min-width: 22px; padding: .05rem .4rem; border-radius: 999px; text-align: center; font-family: var(--mono); font-size: .7rem; font-weight: 700;
  background: var(--ink-1); border: 1px solid var(--line); color: var(--dim);
}
.tk-status-tab.is-active .tk-status-count { color: var(--ice); border-color: rgba(53,215,255,.35); background: rgba(53,215,255,.1); }
.tk-search {
  margin-left: auto; flex: 0 1 340px; min-width: 200px; display: flex; align-items: center; gap: .55rem; padding: 0 .8rem; border-radius: 11px;
  background: var(--ink-2); border: 1px solid var(--line); transition: border-color .15s ease, box-shadow .15s ease; cursor: text;
}
.tk-search:focus-within { border-color: rgba(53,215,255,.55); box-shadow: 0 0 0 3px rgba(53,215,255,.12); }
.tk-search svg { width: 16px; height: 16px; color: var(--dim); flex: none; }
.tk-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: .86rem; padding: .66rem 0; }

/* --- Selection mode: replaces the tabs + search while rows are checked */
.tk-bulk { flex: 1; min-width: 0; animation: tk-bulk-in .18s ease; }
.tk-bulk[hidden] { display: none; }
@keyframes tk-bulk-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tk-bulk-inner {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: 5px 5px 5px 6px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(53,215,255,.14), rgba(53,215,255,.04)); border: 1px solid rgba(53,215,255,.4);
}
.tk-bulk-inner[hidden] { display: none; }
.tk-bulk-confirm { background: linear-gradient(90deg, rgba(255,90,95,.16), rgba(255,90,95,.04)); border-color: rgba(255,90,95,.5); padding-left: .7rem; }
.tk-bulk-clear {
  width: 34px; height: 34px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(5,7,13,.35); border: 1px solid rgba(53,215,255,.3); color: var(--ice); transition: background .12s ease;
}
.tk-bulk-clear:hover { background: rgba(53,215,255,.15); }
.tk-bulk-clear svg { width: 16px; height: 16px; }
.tk-bulk-count { font-size: .88rem; color: var(--text); white-space: nowrap; }
.tk-bulk-count strong { font-family: var(--display); font-weight: 900; font-size: 1rem; color: var(--ice); }
.tk-bulk-confirm .tk-bulk-count { white-space: normal; }
.tk-bulk-confirm .tk-bulk-count strong { color: #ff7b7f; }
.tk-bulk-warn { color: #ff7b7f; display: inline-flex; }
.tk-bulk-warn svg { width: 18px; height: 18px; }
.tk-bulk-sep { width: 1px; height: 22px; background: rgba(53,215,255,.3); }
.tk-bulk-actions { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.tk-bulk-confirm .tk-bulk-actions { margin-left: auto; }
.tk-bulk-btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .48rem .8rem; border-radius: 9px; cursor: pointer;
  background: rgba(5,7,13,.35); border: 1px solid var(--line-strong); color: var(--text); font: inherit; font-size: .82rem; font-weight: 700;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.tk-bulk-btn svg { width: 15px; height: 15px; }
.tk-bulk-btn:hover { border-color: var(--ice); color: var(--ice); background: rgba(53,215,255,.08); }
.tk-bulk-btn:disabled { opacity: .55; cursor: default; }
.tk-bulk-btn.is-danger { color: #ff7b7f; border-color: rgba(255,90,95,.4); }
.tk-bulk-btn.is-danger:hover { color: #ff9a9d; border-color: #ff5a5f; background: rgba(255,90,95,.1); }
.tk-bulk-btn.is-danger-solid { background: #ff5a5f; border-color: #ff5a5f; color: #fff; }
.tk-bulk-btn.is-danger-solid:hover { background: #ff6f73; color: #fff; border-color: #ff6f73; }
#ticket-rows tr:has(.ticket-select-checkbox:checked) td { background: rgba(53,215,255,.06); }
#ticket-rows tr:has(.ticket-select-checkbox:checked) td:first-child { box-shadow: inset 3px 0 0 var(--ice); }

/* --- Pagination (shared by every paginated admin list) ---------------- */
.pagination-bar { padding-top: .2rem; }
.pagination-info { font-size: .8rem; }
.pagination-info strong { color: var(--text); font-weight: 700; }
.pagination-controls { gap: .35rem; }
.pagination-pages { display: flex; align-items: center; gap: .3rem; }
.pagination-btn, .pagination-page {
  width: auto; min-width: 34px; height: 34px; padding: 0 .55rem; border-radius: 9px; background: var(--ink-2); border: 1px solid var(--line);
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.pagination-page {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: var(--dim);
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
}
.pagination-page:hover { color: var(--text); border-color: var(--line-strong); }
.pagination-page.is-current { color: var(--text); background: linear-gradient(180deg, rgba(53,215,255,.22), rgba(53,215,255,.08)); border-color: rgba(53,215,255,.45); }
.pagination-gap { min-width: 20px; text-align: center; color: var(--dim); font-size: .85rem; }
.pagination-goto { margin-left: .5rem; padding-left: .75rem; border-left: 1px solid var(--line); }
.pagination-goto-label { font-size: .76rem; color: var(--dim); white-space: nowrap; }
.pagination-page-input { width: 52px; height: 34px; border-radius: 9px; border-color: var(--line); }
@media (max-width: 760px) {
  .tk-tools { margin-left: 0; width: 100%; }
  .tk-search { flex: 1 1 100%; margin-left: 0; }
  .pagination-goto { display: none; }
}
.tk-toolbar { height: 46px; }
.tk-status-tabs { height: 46px; box-sizing: border-box; }
.tk-status-tab { height: 36px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.tk-search { height: 46px; box-sizing: border-box; }
.tk-search input { padding: 0; height: 100%; }
.tk-bulk-inner { height: 46px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
.tk-bulk-clear, .tk-bulk-btn { height: 34px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
@media (max-width: 900px) { .tk-toolbar, .tk-bulk-inner { height: auto; } .tk-bulk-inner { flex-wrap: wrap; padding-top: 5px; padding-bottom: 5px; } }

/* --- Users page ---------------------------------------------------------- */
.us-filter-linked .tk-status-dot { background: #5ee29a; opacity: 1; }
.us-filter-unlinked .tk-status-dot { background: #8a94ab; opacity: 1; }
.us-filter-online .tk-status-dot { background: #5ee29a; opacity: 1; box-shadow: 0 0 6px rgba(94,226,154,.7); }
.us-filter-eliminated .tk-status-dot { background: #ff5a5f; opacity: 1; }
.us-table .us-check-col { width: 44px; }
.us-table tbody tr:has(.user-select-checkbox:checked) td { background: rgba(53,215,255,.06); }
.us-table tbody tr:has(.user-select-checkbox:checked) td:first-child { box-shadow: inset 3px 0 0 var(--ice); }
.us-identity { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.us-avatar {
  position: relative; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
}
.us-avatar img { width: 100%; height: 100%; border-radius: 9px; image-rendering: pixelated; }
.us-avatar.is-small { width: 32px; height: 32px; border-radius: 9px; }
.us-avatar-letter { font-family: var(--display); font-weight: 900; font-size: .95rem; color: var(--dim); }
.us-avatar.is-online::after, .us-avatar.is-eliminated::after {
  content: ""; position: absolute; right: -3px; bottom: -3px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink-1);
}
.us-avatar.is-online::after { background: #5ee29a; box-shadow: 0 0 8px rgba(94,226,154,.7); }
.us-avatar.is-eliminated::after { background: #ff5a5f; }
.us-avatar.is-eliminated img { filter: grayscale(.85) brightness(.8); }
.us-names { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.us-username { font-weight: 800; color: var(--text); font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.us-sub { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.us-sub.is-muted { opacity: .7; font-style: italic; }
.us-mc-tag { font-family: var(--mono); font-size: .58rem; font-weight: 800; letter-spacing: .06em; padding: .05rem .3rem; border-radius: 4px; color: #5ee29a; background: rgba(94,226,154,.12); border: 1px solid rgba(94,226,154,.3); font-style: normal; }
.us-muted { color: var(--dim); opacity: .7; font-size: .84rem; font-style: italic; }
.us-copy-line { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; max-width: 100%; }
.us-copy-line .email-value, .us-copy-line .discord-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.us-copy-line form { margin: 0; min-width: 0; display: inline-flex; }
.us-discord-mark { color: #8b97ff; display: inline-flex; flex: none; }
.us-discord-mark svg { width: 15px; height: 15px; }
.us-copy-btn {
  width: 26px; height: 26px; flex: none; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--dim); opacity: 0; transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
.us-copy-btn svg { width: 14px; height: 14px; }
tr:hover .us-copy-btn, .us-copy-btn:focus-visible { opacity: 1; }
.us-copy-btn:hover { color: var(--ice); border-color: rgba(53,215,255,.4); background: rgba(53,215,255,.08); }
.us-verified { width: 16px; height: 16px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(94,226,154,.16); color: #5ee29a; }
.us-verified svg { width: 10px; height: 10px; }
.us-hidden-pill {
  display: inline-flex; align-items: center; padding: .15rem .6rem; border-radius: 999px; font: inherit; font-size: .74rem; font-weight: 700;
  color: var(--dim); background: var(--ink-2); border: 1px dashed var(--line-strong); cursor: pointer;
}
span.us-hidden-pill { cursor: default; }
.us-table .email-text-btn { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.us-actions-cell { width: 1%; white-space: nowrap; }
.us-row-delete {
  width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--dim); opacity: .45; transition: opacity .12s ease, color .12s ease, border-color .12s ease, background .12s ease;
}
.us-row-delete svg { width: 16px; height: 16px; }
tr:hover .us-row-delete { opacity: 1; }
.us-row-delete:hover { color: #ff7b7f; border-color: rgba(255,90,95,.5); background: rgba(255,90,95,.08); }
.us-row-confirm { display: inline-flex; align-items: center; gap: .35rem; }
.us-row-confirm[hidden] { display: none; }
.us-row-confirm form { margin: 0; }
.us-empty { text-align: center; color: var(--dim); padding: 2.5rem 1rem !important; }
/* Sidebar: account stats with progress bars + recent signups */
.us-stats { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.us-stat {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: .7rem; row-gap: .5rem;
  padding: .7rem .8rem; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line);
}
.us-stat-icon { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; }
.us-stat-icon svg { width: 17px; height: 17px; }
.us-stat-icon.is-blue { background: rgba(53,215,255,.14); color: #35d7ff; }
.us-stat-icon.is-green { background: rgba(94,226,154,.14); color: #5ee29a; }
.us-stat-text { display: flex; flex-direction: column; min-width: 0; }
.us-stat-label { font-size: .74rem; color: var(--dim); }
.us-stat-value { font-family: var(--display); font-weight: 900; font-size: 1.25rem; line-height: 1.15; color: var(--text); }
.us-stat-pct { font-family: var(--mono); font-size: .76rem; font-weight: 700; color: var(--text); }
.us-stat-side { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--dim); white-space: nowrap; }
.us-bar { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--ink-1); overflow: hidden; }
.us-bar-fill { display: block; height: 100%; border-radius: inherit; }
.us-bar-fill.is-green { background: linear-gradient(90deg, #2ec4b6, #5ee29a); }
.us-bar-fill.is-blue { background: linear-gradient(90deg, #4d8fff, #35d7ff); }
.us-recent { display: flex; flex-direction: column; gap: .2rem; margin-top: .45rem; }
.us-recent-row {
  display: flex; align-items: center; gap: .65rem; width: 100%; padding: .45rem .5rem; border-radius: 10px; cursor: pointer; text-align: left;
  background: transparent; border: 1px solid transparent; color: inherit; font: inherit; transition: background .12s ease, border-color .12s ease;
}
.us-recent-row:hover { background: rgba(255,255,255,.035); border-color: var(--line); }
.us-recent-row .us-names { flex: 1; }
.us-recent-row .us-username { font-size: .86rem; }
.us-recent-time { flex: none; font-family: var(--mono); font-size: .7rem; color: var(--dim); }

/* --- Server Files redesign ---------------------------------------------- */
.files-session-bar {
  margin-left: auto; align-self: center; border: 1px solid rgba(94,226,154,.35); border-radius: 999px; background: rgba(94,226,154,.07);
  padding: .3rem .35rem .3rem .85rem; gap: .55rem; color: var(--text); font-size: .74rem;
}
.files-lock-btn {
  margin-left: .2rem; display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .3rem .75rem;
  background: var(--ink-2); border-color: var(--line-strong); color: var(--text); font-family: var(--body); font-weight: 700; font-size: .74rem;
}
.files-lock-btn svg { width: 13px; height: 13px; }
.files-lock-btn:hover { color: #ff9a9d; border-color: rgba(255,90,95,.55); }
.files-card { border-radius: 16px; }
.files-toolbar { padding: .8rem 1rem; gap: .75rem; }
.files-nav { flex: 1; min-width: 0; }
.files-path {
  display: flex; align-items: center; gap: .5rem; min-width: 0; padding: 0 .55rem 0 .7rem; height: 42px; border-radius: 11px;
  background: var(--ink-2); border: 1px solid var(--line);
}
.files-path-icon { display: inline-flex; color: #f5c451; flex: none; }
.files-path-icon svg { width: 16px; height: 16px; }
.files-breadcrumbs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.files-breadcrumbs::-webkit-scrollbar { display: none; }
.files-crumb { white-space: nowrap; padding: .28rem .5rem; border-radius: 7px; }
.files-crumb:hover { background: rgba(53,215,255,.08); color: var(--ice); }
.files-crumb.is-current { color: var(--text); background: rgba(255,255,255,.04); }
.files-crumb-sep { color: var(--dim); opacity: .5; }
.files-filter-box { margin-left: 0; flex: 0 1 230px; min-width: 160px; height: 42px; box-sizing: border-box; }
.files-filter-box input { padding: 0; height: 100%; }
.files-tool-btn {
  display: inline-flex; align-items: center; gap: .4rem; height: 38px; padding: 0 .85rem; border-radius: 10px; cursor: pointer; text-decoration: none;
  background: var(--ink-2); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: .82rem; font-weight: 700; white-space: nowrap;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.files-tool-btn[hidden] { display: none; }
.files-tool-btn svg { width: 15px; height: 15px; }
.files-tool-btn:hover { border-color: rgba(53,215,255,.45); color: var(--ice); background: rgba(53,215,255,.06); }
.files-upload-btn { display: inline-flex; align-items: center; gap: .4rem; height: 38px; }
.files-upload-btn svg { width: 15px; height: 15px; }
.files-table-wrap { background: var(--ink-1); }
.files-table thead th {
  background: var(--ink-2); font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); font-weight: 700; padding: .65rem 1rem; border-bottom: 1px solid var(--line);
}
.files-table tbody td { padding: .55rem 1rem; border-bottom: 1px solid rgba(28,42,74,.6); }
.files-table tbody tr.files-row { transition: background .1s ease; }
.files-table tbody tr.files-row:hover td { background: rgba(53,215,255,.05); }
.files-table tbody tr.files-row:hover td:first-child { box-shadow: inset 3px 0 0 var(--ice); }
.files-name-cell { font-weight: 600; font-size: .88rem; }
.files-name-inner { gap: .7rem; }
.files-icon {
  width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center; background: var(--ink-2); border: 1px solid var(--line);
}
.files-icon svg { width: 16px; height: 16px; }
.files-icon-dir { color: #f5c451; background: rgba(245,196,81,.1); border-color: rgba(245,196,81,.25); }
.files-up-row .files-name-inner { color: var(--dim); font-family: var(--mono); }
.files-icon.kind-config { color: #35d7ff; background: rgba(53,215,255,.1); border-color: rgba(53,215,255,.25); }
.files-icon.kind-code { color: #b18cff; background: rgba(177,140,255,.1); border-color: rgba(177,140,255,.28); }
.files-icon.kind-jar { color: #5ee29a; background: rgba(94,226,154,.1); border-color: rgba(94,226,154,.28); }
.files-icon.kind-archive { color: #f5a623; background: rgba(245,166,35,.1); border-color: rgba(245,166,35,.28); }
.files-icon.kind-text { color: #c7cfdf; }
.files-icon.kind-image { color: #ff7bc5; background: rgba(255,123,197,.1); border-color: rgba(255,123,197,.28); }
.files-icon.kind-data { color: #2ec4b6; background: rgba(46,196,182,.1); border-color: rgba(46,196,182,.28); }
.files-size-col { font-family: var(--mono); font-size: .78rem; color: var(--dim); text-align: right !important; width: 110px; }
.files-time-cell { font-size: .82rem; color: var(--dim); white-space: nowrap; }
.files-actions-cell { width: 1% !important; }
.files-action {
  width: 30px; height: 30px; padding: 0; margin-left: .2rem; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid transparent; opacity: 0;
}
.files-action svg { width: 15px; height: 15px; }
.files-action:hover { color: var(--ice); border-color: rgba(53,215,255,.4); background: rgba(53,215,255,.08); }
.files-action.is-danger:hover { color: #ff7b7f; border-color: rgba(255,90,95,.5); background: rgba(255,90,95,.08); }
.files-drop-hint { gap: .5rem; font-size: .95rem; }
.files-drop-hint svg { width: 22px; height: 22px; }
.files-statusline {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1rem;
  border-top: 1px solid var(--line); background: var(--ink-1); font-family: var(--mono); font-size: .72rem; color: var(--dim);
}
.files-statusline-hint { opacity: .75; }
.files-locked { max-width: 460px; padding: 2.5rem 2rem; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line); box-shadow: 0 24px 60px -30px rgba(53,215,255,.35); }
.files-locked-icon { width: 60px; height: 60px; border-radius: 16px; background: rgba(53,215,255,.1); border-color: rgba(53,215,255,.35); }
.files-unlock-form input { height: 42px; box-sizing: border-box; border-radius: 10px; }
.files-unlock-form .btn { height: 42px; }
@media (max-width: 760px) {
  .files-session-bar { margin-left: 0; }
  .files-filter-box { flex: 1 1 100%; }
  .files-statusline-hint { display: none; }
}

/* --- Permissions page ---------------------------------------------------- */
.pm-main { gap: 1rem; }
.pm-toolbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem; margin: -.6rem -.6rem 0; border-radius: 14px; background: rgba(5,7,13,.85); backdrop-filter: blur(8px);
}
.pm-search { margin-left: 0; flex: 0 1 300px; height: 42px; box-sizing: border-box; }
.pm-search input { padding: 0; height: 100%; }
.pm-jump { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.pm-jump-chip {
  padding: .38rem .75rem; border-radius: 999px; text-decoration: none; font-size: .78rem; font-weight: 700; color: var(--dim);
  background: var(--ink-2); border: 1px solid var(--line); transition: color .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
}
.pm-jump-chip:hover { color: var(--ice); border-color: rgba(53,215,255,.45); background: rgba(53,215,255,.07); }
.pm-jump-chip.is-dim { opacity: .35; pointer-events: none; }
.pm-no-match { margin: 0; padding: 2.5rem 1rem; text-align: center; color: var(--dim); }
.pm-no-match[hidden], .pm-section[hidden] { display: none; }
.pm-section { padding: 0; gap: 0; overflow: hidden; border-radius: 16px; scroll-margin-top: 70px; transition: box-shadow .3s ease; }
.pm-section.is-flash { animation: pm-flash 1.2s ease; }
@keyframes pm-flash { 0% { box-shadow: 0 0 0 2px rgba(53,215,255,.7); } 100% { box-shadow: 0 0 0 2px transparent; } }
.pm-section-head {
  display: flex; align-items: center; gap: .8rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(53,215,255,.08), transparent 65%);
}
.pm-section-icon {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-size: 1rem; color: var(--ice); background: rgba(53,215,255,.12); border: 1px solid rgba(53,215,255,.3);
}
.pm-section-title h2 { margin: 0; font-family: var(--display); font-size: 1.02rem; font-weight: 800; }
.pm-section-sub { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.pm-table-wrap { background: transparent; border: none; border-radius: 0; }
.pm-matrix { border-collapse: separate; border-spacing: 0; }
.pm-matrix thead th {
  background: var(--ink-2); font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  font-weight: 700; padding: .6rem 1rem; border-bottom: 1px solid var(--line);
}
.pm-matrix .pm-item-col { text-align: left; }
.pm-matrix .pm-role-col { width: 130px; text-align: center; }
.pm-role-pill {
  display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; letter-spacing: .04em;
  color: var(--text); background: var(--ink-1); border: 1px solid var(--line-strong);
}
.pm-role-pill svg { width: 11px; height: 11px; }
.pm-role-pill.is-locked { color: var(--dim); border-style: dashed; }
.pm-matrix tbody td { padding: .6rem 1rem; border-bottom: 1px solid rgba(28,42,74,.6); vertical-align: middle; transition: background .2s ease; }
.pm-matrix tbody tr:last-child td { border-bottom: none; }
.pm-matrix tbody tr[data-pm-row]:hover td { background: rgba(255,255,255,.025); }
.pm-matrix tbody tr[hidden] { display: none; }
.pm-item-name { display: block; font-size: .88rem; color: var(--text); }
.pm-item-sub { display: block; margin-top: .1rem; font-size: .74rem; color: var(--dim); }
.pm-page-row td { background: rgba(53,215,255,.05); }
.pm-page-row .pm-item-name { font-weight: 800; }
.pm-page-row td:first-child { box-shadow: inset 3px 0 0 var(--ice); }
.pm-subgroup-row td {
  padding: .5rem 1rem !important; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ice); background: var(--ink-2) !important; font-weight: 700;
}
.owner-matrix-cell.is-page-off .owner-toggle { opacity: .35; }
.owner-matrix-cell.is-saved { background: rgba(94,226,154,.12) !important; }
.owner-matrix-cell { position: relative; }
.owner-matrix-cell.is-saved::after {
  content: "Saved"; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); font-family: var(--mono); font-size: .56rem;
  font-weight: 700; color: #5ee29a; letter-spacing: .06em; animation: pm-saved 1.1s ease forwards;
}
@keyframes pm-saved { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
/* Staff Agreement sidebar */
.pm-agree-card { display: flex; flex-direction: column; gap: .85rem; }
.pm-agree-head { display: flex; align-items: center; gap: .7rem; }
.pm-agree-icon {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #5ee29a;
  background: linear-gradient(145deg, rgba(94,226,154,.18), rgba(94,226,154,.05)); border: 1px solid rgba(94,226,154,.28);
}
.pm-agree-icon svg { width: 19px; height: 19px; }
.pm-agree-title { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.pm-agree-title .ticket-sidebar-label { margin: 0; }
.pm-agree-meta { font-family: var(--mono); font-size: .72rem; color: var(--dim); }
.pm-agree-meta b { color: var(--text); font-weight: 700; }

.pm-agree-summary {
  position: relative; display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: .85rem; margin: 0;
  padding: .75rem .85rem; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line);
}
.pm-agree-ring { width: 58px; height: 58px; transform: rotate(-90deg); grid-column: 1; grid-row: 1; }
.pm-ring-track, .pm-ring-fill { fill: none; stroke-width: 4.5; }
.pm-ring-track { stroke: rgba(255,255,255,.07); }
.pm-ring-fill { stroke: #5ee29a; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(94,226,154,.45)); }
.pm-agree-pct {
  grid-column: 1; grid-row: 1; justify-self: center; font-family: var(--mono); font-weight: 800; font-size: .78rem; color: #5ee29a;
}
.pm-agree-stats { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.pm-agree-big { font-size: .8rem; color: var(--dim); }
.pm-agree-big strong { font-family: var(--display); font-weight: 900; font-size: 1.25rem; color: var(--text); margin-right: .1rem; }
.pm-agree-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.pm-chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .45rem; border-radius: 999px; font-size: .68rem; font-weight: 700;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--dim); white-space: nowrap;
}
.pm-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pm-chip.is-signed { color: #5ee29a; }
.pm-chip.is-pending { color: #ff5a5f; }
.pm-chip.is-revoked { color: #ffb454; }

.pm-agree-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; width: 100%; }
.pm-agree-card > * { align-self: stretch; }
.pm-agree-actions > .pm-agree-btn, .pm-agree-actions > .owner-revoke-all-wrap > .pm-agree-btn { width: 100%; box-sizing: border-box; }
.pm-agree-actions .owner-revoke-all-wrap { display: contents; }
.pm-agree-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 34px; padding: 0 .7rem; border-radius: 10px;
  font: inherit; font-size: .78rem; font-weight: 700; white-space: nowrap; cursor: pointer; text-decoration: none;
  color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line);
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pm-agree-btn svg { width: 14px; height: 14px; flex: none; }
.pm-agree-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
.pm-agree-btn.is-danger { color: #ff7b7f; border-color: rgba(255,90,95,.3); background: rgba(255,90,95,.06); }
.pm-agree-btn.is-danger:hover { background: rgba(255,90,95,.14); border-color: rgba(255,90,95,.55); }
.pm-agree-btn.is-danger-solid { color: #fff; background: #e5484d; border-color: #e5484d; }
.pm-agree-btn.is-danger-solid:hover { background: #ff5a5f; }
.pm-agree-btn:disabled { opacity: .6; cursor: progress; }
.pm-agree-btn[hidden], .pm-agree-actions .owner-revoke-all-confirm[hidden] { display: none; }
.pm-agree-actions .owner-revoke-all-confirm {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; padding: .3rem .3rem .3rem .65rem; border-radius: 11px;
  background: rgba(255,90,95,.08); border: 1px solid rgba(255,90,95,.35); animation: tk-bulk-in .15s ease;
}
.pm-agree-actions .owner-revoke-all-confirm span { flex: 1; font-size: .76rem; font-weight: 700; color: #ff7b7f; }
.pm-agree-actions .owner-revoke-all-confirm .pm-agree-btn { height: 28px; padding: 0 .65rem; }
.pm-agree-actions:has(.owner-revoke-all-confirm:not([hidden])) .ae-edit-link { display: none; }

.pm-agree-card .owner-signature-list { gap: .25rem; padding-top: .2rem; border-top: 1px solid var(--line); }
.pm-agree-card .owner-signature-row {
  padding: .45rem .45rem .45rem .5rem; border-radius: 11px; border: 1px solid transparent; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.pm-agree-card .owner-signature-row:first-child { margin-top: .5rem; }
.pm-agree-card .owner-signature-row:hover { background: rgba(255,255,255,.035); border-color: var(--line); }
.pm-agree-card .admin-user-chip img, .pm-agree-card .admin-user-chip .avatar-placeholder { width: 36px; height: 36px; border-radius: 9px; }
.pm-agree-card .owner-signature-row .admin-user-chip { flex: 1 1 auto; }
.pm-agree-card .admin-user-chip > div { min-width: 0; }
.pm-agree-card .admin-user-chip .name { max-width: none; }
.pm-agree-card .owner-signature-right { flex-direction: row; align-items: center; gap: .3rem; }
.pm-agree-card .status { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; padding: .18rem .5rem; }
.pm-agree-card .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pm-agree-card .status.is-signed { border: 1px solid rgba(94,226,154,.25); }
.pm-agree-card .status.is-pending { border: 1px solid rgba(255,90,95,.3); }
.pm-agree-card .status.is-revoked { border: 1px solid rgba(255,180,84,.3); }
.pm-agree-card .owner-view-btn {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 8px; cursor: pointer;
  color: var(--dim); background: transparent; border: 1px solid transparent; transition: color .12s ease, background .12s ease, transform .12s ease;
}
.pm-agree-card .owner-view-btn svg { width: 14px; height: 14px; }
.pm-agree-card .owner-signature-row:hover .owner-view-btn { color: var(--text); background: rgba(255,255,255,.06); border-color: var(--line); transform: translateX(1px); }
@media (max-width: 760px) {
  .pm-toolbar { position: static; margin: 0; }
  .pm-search { flex: 1 1 100%; }
  .files-action { opacity: 1; }
}
.us-table .us-hidden-pill { flex: none; width: auto; min-width: 0; }
.us-recent-row .us-names { gap: 0; }
.files-toolbar-actions { flex-wrap: nowrap; flex: none; }
.pm-toolbar { position: static; margin: 0; padding: 0; background: none; backdrop-filter: none; border-radius: 0; }
.pm-section { scroll-margin-top: 16px; }
@media (max-width: 900px) { .files-toolbar-actions { flex-wrap: wrap; flex: 1 1 100%; } }
.us-table .email-value { width: auto; max-width: 240px; text-align: left; }

/* --- Users: compact inline row delete confirm --------------------------- */
.us-table .delete-cell .us-row-confirm {
  display: inline-flex; flex-wrap: nowrap; align-items: center; gap: .3rem; padding: .2rem .25rem .2rem .6rem; border-radius: 10px;
  background: rgba(255,90,95,.1); border: 1px solid rgba(255,90,95,.4); animation: tk-bulk-in .15s ease;
}
.us-table .delete-cell .us-row-confirm[hidden] { display: none; }
.us-row-confirm-label { font-size: .76rem; font-weight: 800; color: #ff7b7f; margin-right: .1rem; }
.us-confirm-btn {
  width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(5,7,13,.4); border: 1px solid var(--line-strong); color: var(--text); transition: background .12s ease, border-color .12s ease;
}
.us-confirm-btn svg { width: 14px; height: 14px; }
.us-confirm-btn:hover { border-color: var(--ice); color: var(--ice); }
.us-confirm-btn.is-yes { background: #ff5a5f; border-color: #ff5a5f; color: #fff; }
.us-confirm-btn.is-yes:hover { background: #ff6f73; color: #fff; }

/* --- Permissions: sidebar jump list ------------------------------------ */
.owner-layout { grid-template-columns: 1fr 300px; }
.pm-sidebar { position: sticky; top: 1rem; align-self: start; max-height: calc(100vh - 2rem); overflow-y: auto; }
.pm-jump { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin-top: .55rem; }
.pm-jump-chip {
  display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .4rem .5rem; border-radius: 9px; text-decoration: none;
  font-size: .8rem; font-weight: 700; color: var(--dim); background: transparent; border: 1px solid transparent;
}
.pm-jump-chip:hover { color: var(--text); background: rgba(53,215,255,.07); border-color: rgba(53,215,255,.25); }
.pm-jump-icon {
  width: 22px; height: 22px; flex: none; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-size: .7rem; color: var(--ice); background: rgba(53,215,255,.1);
}
.pm-jump-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-jump-count { flex: none; font-family: var(--mono); font-size: .64rem; color: var(--dim); opacity: .8; }
.pm-search { flex: 1 1 auto; }

/* --- Permissions: staff agreement popup -------------------------------- */
.pm-sig-popup { max-width: 520px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pm-sig-head {
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.3rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(53,215,255,.09), transparent);
}
.pm-sig-avatar {
  width: 60px; height: 60px; flex: none; border-radius: 14px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink-2); border: 1px solid var(--line-strong);
}
.pm-sig-avatar img { width: 100%; height: 100%; image-rendering: pixelated; }
.pm-sig-avatar img[hidden], .pm-sig-avatar-letter[hidden] { display: none; }
.pm-sig-avatar-letter { font-family: var(--display); font-weight: 900; font-size: 1.4rem; color: var(--dim); }
.pm-sig-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pm-sig-kicker { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.pm-sig-title h3 { margin: 0; font-family: var(--display); font-size: 1.25rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-sig-title .sidebar-rank-text[hidden] { display: none; }
.pm-sig-status { flex: none; padding: .3rem .75rem; border-radius: 999px; font-size: .76rem; font-weight: 800; border: 1px solid var(--line-strong); }
.pm-sig-status.is-signed { color: #5ee29a; background: rgba(94,226,154,.12); border-color: rgba(94,226,154,.45); }
.pm-sig-status.is-revoked { color: #ffb454; background: rgba(255,180,84,.12); border-color: rgba(255,180,84,.45); }
.pm-sig-status.is-pending { color: #ff7b7f; background: rgba(255,90,95,.1); border-color: rgba(255,90,95,.45); }
.pm-sig-close { align-self: flex-start; }
.pm-sig-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.3rem; }
.pm-sig-tile { display: flex; align-items: center; gap: .8rem; padding: .75rem .85rem; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); }
.pm-sig-tile[hidden], .pm-sig-empty[hidden], .pm-sig-footer[hidden], .pm-sig-confirm[hidden] { display: none; }
.pm-sig-tile-icon { width: 34px; height: 34px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(53,215,255,.12); color: var(--ice); }
.pm-sig-tile-icon svg { width: 16px; height: 16px; }
.pm-sig-tile-icon.is-green { background: rgba(94,226,154,.12); color: #5ee29a; }
.pm-sig-tile-icon.is-orange { background: rgba(255,180,84,.12); color: #ffb454; }
.pm-sig-tile-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.pm-sig-tile-label { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pm-sig-tile-value { font-size: .9rem; color: var(--text); font-weight: 600; }
.pm-sig-signature { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.3rem; font-weight: 400; color: var(--ice); }
.pm-sig-empty { display: flex; align-items: center; gap: .7rem; padding: 1rem; border-radius: 12px; border: 1px dashed var(--line-strong); color: var(--dim); font-size: .86rem; }
.pm-sig-empty svg { width: 20px; height: 20px; flex: none; }
.pm-sig-footer { padding: .9rem 1.3rem 1.1rem; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.pm-sig-confirm { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; width: 100%; }
.pm-sig-confirm > span { flex: 1; min-width: 160px; font-size: .8rem; color: #ff9a9d; }

/* --- Server Files editor: header, status bar, One Life code theme ------ */
.files-editor .files-toolbar { padding: .75rem 1rem; }
.files-editor-title .files-icon { width: 36px; height: 36px; border-radius: 10px; }
.files-editor-title .files-icon svg { width: 18px; height: 18px; }
.files-editor-heading { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.files-editor-name-row { display: flex; align-items: center; gap: .55rem; }
.files-editor-name { font-family: var(--display); font-weight: 900; font-size: 1.02rem; }
.files-lang-chip {
  padding: .08rem .5rem; border-radius: 999px; font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ice); background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.3);
}
.files-editor-path { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem; font-size: .72rem; white-space: normal; }
.files-editor-seg { color: var(--dim); }
.files-editor-seg::after { content: "/"; margin: 0 .3rem; opacity: .45; }
.files-editor-meta { margin-left: .5rem; padding-left: .6rem; border-left: 1px solid var(--line-strong); color: var(--dim); opacity: .85; }
.files-save-state { padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-2); }
.files-save-state.is-dirty { color: #f5a623; border-color: rgba(245,166,35,.45); background: rgba(245,166,35,.08); }
.files-editor-status {
  flex: none; display: flex; align-items: center; gap: 1.1rem; padding: .4rem 1rem; border-top: 1px solid var(--line);
  background: #070c18; font-family: var(--mono); font-size: .7rem; color: var(--dim);
}
.files-editor-status-right { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; }
.files-kbd-hint kbd { font-family: var(--mono); font-size: .62rem; padding: 0 .3rem; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--text); }
.files-editor[hidden] .files-editor-status { display: none; }
.files-cm-host .CodeMirror { background: #080e1c; font-size: .86rem; line-height: 1.6; }
.cm-s-onelife.CodeMirror { background: #080e1c; color: #d6deeb; }
.cm-s-onelife .CodeMirror-gutters { background: #070c18; border-right: 1px solid var(--line); }
.cm-s-onelife .CodeMirror-linenumber { color: #3a4a6e; padding: 0 .9rem 0 .6rem; }
.cm-s-onelife .CodeMirror-activeline-background { background: rgba(53,215,255,.055); }
.cm-s-onelife .CodeMirror-activeline-gutter .CodeMirror-linenumber { color: var(--ice); }
.cm-s-onelife .CodeMirror-activeline-gutter { background: rgba(53,215,255,.06); }
.cm-s-onelife .CodeMirror-cursor { border-left: 2px solid var(--ice); }
.cm-s-onelife div.CodeMirror-selected, .cm-s-onelife.CodeMirror-focused div.CodeMirror-selected { background: rgba(53,215,255,.2); }
.cm-s-onelife .CodeMirror-line::selection, .cm-s-onelife .CodeMirror-line > span::selection, .cm-s-onelife .CodeMirror-line > span > span::selection { background: rgba(53,215,255,.25); }
.cm-s-onelife .CodeMirror-matchingbracket { color: #fff !important; background: rgba(53,215,255,.25); outline: none; }
.cm-s-onelife .cm-comment { color: #56658a; font-style: italic; }
.cm-s-onelife .cm-atom { color: #7ee8ff; }
.cm-s-onelife .cm-number { color: #f5a623; }
.cm-s-onelife .cm-def, .cm-s-onelife .cm-property { color: #7ee8ff; }
.cm-s-onelife .cm-variable { color: #d6deeb; }
.cm-s-onelife .cm-variable-2 { color: #7ee8ff; }
.cm-s-onelife .cm-variable-3, .cm-s-onelife .cm-type { color: #b18cff; }
.cm-s-onelife .cm-keyword { color: #b18cff; }
.cm-s-onelife .cm-string, .cm-s-onelife .cm-string-2 { color: #5ee29a; }
.cm-s-onelife .cm-operator, .cm-s-onelife .cm-meta { color: #4d8fff; }
.cm-s-onelife .cm-tag { color: #ff7b7f; }
.cm-s-onelife .cm-attribute { color: #f5c451; }
.cm-s-onelife .cm-header { color: #35d7ff; font-weight: 700; }
.cm-s-onelife .cm-builtin { color: #2ec4b6; }
.cm-s-onelife .cm-bracket { color: #8a94ab; }
.cm-s-onelife .cm-error { color: #fff; background: rgba(255,90,95,.6); }
.cm-s-onelife .CodeMirror-vscrollbar, .cm-s-onelife .CodeMirror-hscrollbar { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.CodeMirror-dialog { background: var(--ink-2) !important; color: var(--text); border-bottom: 1px solid var(--line-strong) !important; font-family: var(--body); padding: .5rem .8rem !important; }
.CodeMirror-dialog input { background: var(--ink-1); border: 1px solid var(--line-strong) !important; border-radius: 6px; color: var(--text); padding: .25rem .5rem !important; font-family: var(--mono); }
.cm-searching { background: rgba(245,196,81,.3) !important; }
@media (max-width: 900px) { .files-kbd-hint { display: none; } }
.us-table th:last-child, .us-table td.us-actions-cell { width: 150px; min-width: 150px; text-align: right; }
.pm-jump { grid-template-columns: 1fr; gap: .1rem; }
.pm-jump-chip { padding: .32rem .5rem; }

/* --- Site switches (permissions matrix + every .toggle-switch) ---------- */
.owner-toggle { width: 44px; height: 24px; }
.owner-toggle-slider, .toggle-switch-track {
  background: #070c18; border: 1px solid var(--line-strong); border-radius: 999px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.owner-toggle-slider::before, .toggle-switch-thumb {
  top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #3a4a6e;
  box-shadow: 0 1px 3px rgba(0,0,0,.5); transition: transform .2s cubic-bezier(.3,1.4,.6,1), background .2s ease, box-shadow .2s ease;
}
.toggle-switch-track { width: 44px; height: 24px; box-sizing: border-box; }
.toggle-switch-thumb { top: 3px; left: 3px; }
.owner-toggle input:checked + .owner-toggle-slider,
.toggle-switch input:checked + .toggle-switch-track {
  background: linear-gradient(180deg, rgba(53,215,255,.32), rgba(53,215,255,.16)); border-color: rgba(53,215,255,.75);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35), 0 0 12px -2px rgba(53,215,255,.55);
}
.owner-toggle input:checked + .owner-toggle-slider::before,
.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb {
  transform: translateX(20px); background: #e9fbff; box-shadow: 0 0 0 2px rgba(53,215,255,.35), 0 1px 4px rgba(0,0,0,.4);
}
.owner-toggle:hover .owner-toggle-slider, .toggle-switch:hover .toggle-switch-track { border-color: rgba(53,215,255,.55); }
.owner-toggle input:focus-visible + .owner-toggle-slider { outline: 2px solid var(--ice); outline-offset: 2px; }
.owner-toggle input:disabled + .owner-toggle-slider { opacity: .4; cursor: not-allowed; }
.owner-toggle input:disabled { cursor: not-allowed; }

/* --- Server Files: grouped toolbar ------------------------------------- */
.files-actions-group {
  display: flex; align-items: center; height: 42px; box-sizing: border-box; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.files-actions-group:focus-within { border-color: rgba(53,215,255,.5); box-shadow: 0 0 0 3px rgba(53,215,255,.1); }
.files-filter-box { display: flex; align-items: center; gap: .5rem; padding: 0 .8rem; height: 100%; width: 220px; cursor: text; border: none; background: none; min-width: 0; flex: 0 1 220px; }
.files-filter-box svg { width: 16px; height: 16px; color: var(--dim); flex: none; }
.files-filter-box input { flex: 1; min-width: 0; height: 100%; padding: 0; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: .85rem; }
.files-group-sep { width: 1px; align-self: stretch; margin: 8px 0; background: var(--line-strong); }
.files-group-btn {
  display: inline-flex; align-items: center; gap: .4rem; height: 34px; margin: 0 3px; padding: 0 .75rem; border-radius: 9px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: var(--dim); font: inherit; font-size: .82rem; font-weight: 700; white-space: nowrap;
  transition: color .12s ease, background .12s ease, border-color .12s ease;
}
.files-group-btn svg { width: 16px; height: 16px; }
.files-group-btn:hover { color: var(--text); background: rgba(53,215,255,.08); border-color: rgba(53,215,255,.25); }
.files-group-btn:hover svg { color: var(--ice); }
.files-upload-btn {
  display: inline-flex; align-items: center; gap: .45rem; height: 42px; padding: 0 1.05rem; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #35d7ff, #4d8fff); color: #04141c; font: inherit; font-size: .86rem; font-weight: 800; white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(53,215,255,.8); transition: transform .12s ease, filter .12s ease;
}
.files-upload-btn svg { width: 16px; height: 16px; }
.files-upload-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.files-upload-btn:disabled { opacity: .65; transform: none; cursor: default; }

/* --- Server Files: lock screen ------------------------------------------ */
.files-card:has(.files-locked:not([hidden])) {
  background: radial-gradient(ellipse at 50% 35%, rgba(53,215,255,.09), transparent 60%), var(--ink-1);
}
.files-locked {
  max-width: 440px; width: calc(100% - 2rem); box-sizing: border-box; padding: 2.4rem 2.2rem 2rem; gap: .55rem; border-radius: 20px;
  background: linear-gradient(180deg, rgba(16,26,51,.95), rgba(10,17,34,.95)); border: 1px solid var(--line-strong);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(53,215,255,.05);
}
.files-lock-ring {
  width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: .5rem;
  background: radial-gradient(circle, rgba(53,215,255,.16), transparent 70%); position: relative;
}
.files-lock-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(53,215,255,.3);
  animation: files-lock-pulse 2.6s ease-out infinite;
}
@keyframes files-lock-pulse { 0% { transform: scale(.85); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.files-locked .files-locked-icon {
  width: 62px; height: 62px; border-radius: 18px; background: linear-gradient(180deg, rgba(53,215,255,.22), rgba(53,215,255,.08));
  border: 1px solid rgba(53,215,255,.5); color: var(--ice); box-shadow: 0 0 24px -6px rgba(53,215,255,.6);
}
.files-locked .files-locked-icon svg { width: 28px; height: 28px; }
.files-locked-kicker { font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ice); }
.files-locked h2 { font-size: 1.35rem; font-weight: 900; }
.files-locked p strong { color: var(--text); }
.files-unlock-form { flex-direction: column; gap: .6rem; margin-top: .8rem; }
.files-unlock-field {
  display: flex; align-items: center; gap: .55rem; height: 46px; padding: 0 .4rem 0 .85rem; border-radius: 12px; box-sizing: border-box;
  background: #070c18; border: 1px solid var(--line-strong); transition: border-color .15s ease, box-shadow .15s ease; cursor: text;
}
.files-unlock-field:focus-within { border-color: rgba(53,215,255,.6); box-shadow: 0 0 0 3px rgba(53,215,255,.12); }
.files-unlock-field > svg { width: 17px; height: 17px; color: var(--dim); flex: none; }
.files-unlock-form .files-unlock-field input { flex: 1; min-width: 0; height: 100%; padding: 0; border: none; background: none; outline: none; box-shadow: none; font-size: .92rem; }
.files-unlock-form .files-unlock-field input:focus { outline: none; }
.files-unlock-eye {
  width: 34px; height: 34px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--dim);
}
.files-unlock-eye svg { width: 16px; height: 16px; }
.files-unlock-eye:hover, .files-unlock-eye.is-on { color: var(--ice); background: rgba(53,215,255,.08); }
.files-unlock-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 46px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #35d7ff, #4d8fff); color: #04141c; font: inherit; font-size: .92rem; font-weight: 800;
  box-shadow: 0 10px 24px -12px rgba(53,215,255,.9); transition: transform .12s ease, filter .12s ease;
}
.files-unlock-btn svg { width: 17px; height: 17px; }
.files-unlock-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.files-unlock-btn:disabled { opacity: .65; transform: none; }
.files-locked .files-locked-error { padding: .5rem .75rem; border-radius: 9px; background: rgba(255,90,95,.1); border: 1px solid rgba(255,90,95,.35); width: 100%; box-sizing: border-box; }
.files-locked .files-locked-error[hidden] { display: none; }
.files-locked-facts { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); width: 100%; display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.files-locked-facts li { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--dim); }
.files-locked-facts svg { width: 15px; height: 15px; flex: none; color: var(--ice); opacity: .8; }

/* --- Revenue page --------------------------------------------------------- */
.rv-goals { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; flex: none; }
.rv-goal {
  display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem; border-radius: 16px; background: var(--ink-1); border: 1px solid var(--line);
  --goal-a: #35d7ff; --goal-b: #4d8fff;
}
.rv-goal.is-dedicated { --goal-a: #b18cff; --goal-b: #ff7bc5; }
.rv-goal.is-done { --goal-a: #5ee29a; --goal-b: #2ec4b6; }
.rv-goal-head { display: flex; align-items: center; gap: .7rem; }
.rv-goal-icon {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--goal-a); background: color-mix(in srgb, var(--goal-a) 14%, transparent); border: 1px solid color-mix(in srgb, var(--goal-a) 35%, transparent);
}
.rv-goal-icon svg { width: 18px; height: 18px; }
.rv-goal-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rv-goal-title strong { font-size: .92rem; }
.rv-goal-title span { font-size: .74rem; color: var(--dim); }
.rv-goal-pct { font-family: var(--display); font-weight: 900; font-size: 1.15rem; color: var(--goal-a); }
.rv-goal-amount { display: flex; align-items: baseline; gap: .4rem; }
.rv-goal-amount strong { font-family: var(--display); font-weight: 900; font-size: 1.5rem; }
.rv-goal-amount span { font-size: .86rem; color: var(--dim); }
.rv-goal-track { height: 10px; border-radius: 999px; background: #070c18; border: 1px solid var(--line); overflow: hidden; }
.rv-goal-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--goal-b), var(--goal-a)); box-shadow: 0 0 12px -2px var(--goal-a); }
.rv-goal-foot { font-family: var(--mono); font-size: .7rem; color: var(--dim); }
.rv-goal.is-done .rv-goal-foot { color: #5ee29a; }
.rv-filter-complete .tk-status-dot, .rv-status-dot.is-complete { background: #5ee29a; opacity: 1; }
.rv-filter-refund .tk-status-dot, .rv-status-dot.is-refund { background: #f5a623; opacity: 1; }
.rv-filter-chargeback .tk-status-dot, .rv-status-dot.is-chargeback { background: #ff5a5f; opacity: 1; }
.rv-table .rv-amount-col { text-align: right; padding-right: 1.4rem; }
.rv-amount { font-family: var(--mono); font-weight: 700; font-size: .9rem; color: var(--text); }
.rv-row.is-refund .rv-amount, .rv-row.is-chargeback .rv-amount { color: var(--dim); text-decoration: line-through; }
.rv-packages { display: flex; flex-wrap: wrap; gap: .3rem; }
.rv-package { padding: .16rem .55rem; border-radius: 7px; font-size: .78rem; font-weight: 700; color: var(--text); background: var(--ink-2); border: 1px solid var(--line-strong); }
.rv-status { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 800; border: 1px solid var(--line-strong); color: var(--dim); }
.rv-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; display: inline-block; }
.rv-status.is-complete { color: #5ee29a; border-color: rgba(94,226,154,.4); background: rgba(94,226,154,.08); }
.rv-status.is-refund { color: #f5a623; border-color: rgba(245,166,35,.4); background: rgba(245,166,35,.08); }
.rv-status.is-chargeback { color: #ff7b7f; border-color: rgba(255,90,95,.45); background: rgba(255,90,95,.08); }
.rv-source { font-family: var(--mono); font-size: .7rem; padding: .15rem .5rem; border-radius: 6px; color: var(--dim); background: var(--ink-2); border: 1px solid var(--line); text-transform: uppercase; letter-spacing: .05em; }
.rv-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: .5rem; }
.rv-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); min-width: 0; }
.rv-kpi.is-wide { grid-column: 1 / -1; }
.rv-kpi-label { font-size: .72rem; color: var(--dim); }
.rv-kpi-hint { opacity: .7; }
.rv-kpi-value { font-family: var(--display); font-weight: 900; font-size: 1.15rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-kpi.is-pos { border-color: rgba(94,226,154,.35); background: linear-gradient(180deg, rgba(94,226,154,.08), var(--ink-2)); }
.rv-kpi.is-pos .rv-kpi-value { color: #5ee29a; }
.rv-kpi.is-neg { border-color: rgba(255,90,95,.35); background: linear-gradient(180deg, rgba(255,90,95,.08), var(--ink-2)); }
.rv-kpi.is-neg .rv-kpi-value { color: #ff7b7f; }
.rv-split { display: flex; height: 8px; margin: .65rem 0 .7rem; border-radius: 999px; overflow: hidden; background: #070c18; gap: 2px; }
.rv-split span { display: block; height: 100%; }
.rv-split .is-complete { background: #5ee29a; }
.rv-split .is-refund { background: #f5a623; }
.rv-split .is-chargeback { background: #ff5a5f; }
.rv-legend { display: flex; flex-direction: column; gap: .45rem; }
.rv-legend > div { display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: var(--dim); }
.rv-legend strong { margin-left: auto; color: var(--text); font-family: var(--mono); font-size: .84rem; }
.rv-legend-sep { height: 1px; background: var(--line); margin: .15rem 0; }
.rv-legend-icon { display: inline-flex; color: #ff7bc5; }
.rv-legend-icon svg { width: 14px; height: 14px; }
.rv-top { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; }
.rv-top-row { display: flex; align-items: center; gap: .6rem; padding: .4rem .45rem; border-radius: 10px; }
.rv-top-row:hover { background: rgba(255,255,255,.03); }
.rv-top-rank { width: 20px; flex: none; text-align: center; font-family: var(--display); font-weight: 900; font-size: .85rem; color: var(--dim); }
.rv-top-rank.is-1 { color: #f5c451; }
.rv-top-rank.is-2 { color: #c7cfdf; }
.rv-top-rank.is-3 { color: #d98a4e; }
.rv-top-name { flex: 1; min-width: 0; font-weight: 700; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-top-count { flex: none; font-family: var(--mono); font-size: .7rem; color: var(--dim); }
@media (max-width: 900px) { .rv-goals { grid-template-columns: 1fr; } }

/* Revenue search: wider, result count, clear button, "/" shortcut hint */
.owner-matrix-cell.is-saved, .owner-matrix-cell.is-saved::after { background: none !important; content: none; }
.rv-search { flex: 0 1 380px; height: 46px; padding: 0 .45rem 0 .9rem; border-radius: 12px; background: linear-gradient(180deg, var(--ink-2), #0c1429); border-color: var(--line-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.rv-search > svg { width: 17px; height: 17px; transition: color .15s ease; }
.rv-search:focus-within > svg { color: var(--ice); }
.rv-search:focus-within { border-color: rgba(53,215,255,.6); box-shadow: 0 0 0 3px rgba(53,215,255,.12), 0 8px 24px -14px rgba(53,215,255,.6); }
.rv-search input { font-size: .88rem; }
.rv-search input::placeholder { color: var(--dim); opacity: .8; }
.rv-search-count { flex: none; font-family: var(--mono); font-size: .68rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px; color: var(--ice); background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.3); white-space: nowrap; }
.rv-search-count.is-none { color: #ff9a9d; background: rgba(255,90,95,.1); border-color: rgba(255,90,95,.35); }
.rv-search-count[hidden], .rv-search-clear[hidden], .rv-search-kbd[hidden] { display: none; }
.rv-search-clear { width: 30px; height: 30px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--dim); }
.rv-search-clear svg { width: 14px; height: 14px; }
.rv-search-clear:hover { color: var(--text); background: rgba(255,255,255,.05); border-color: var(--line-strong); }
.rv-search-kbd { flex: none; min-width: 24px; height: 24px; margin-right: .2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--dim); background: #070c18; border: 1px solid var(--line-strong); box-shadow: inset 0 -2px 0 rgba(255,255,255,.04); }
.rv-search:focus-within .rv-search-kbd { opacity: .4; }

/* --- Logs page ----------------------------------------------------------- */
.lg-filters { display: flex; align-items: center; gap: .4rem; height: 46px; box-sizing: border-box; padding: 4px 4px 4px .7rem; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); margin: 0; }
.lg-filter-label { display: inline-flex; color: var(--dim); margin-right: .15rem; }
.lg-filter-label svg { width: 15px; height: 15px; }
.lg-filters .custom-select { min-width: 150px; }
.lg-filters .custom-select-trigger { height: 36px; border-radius: 9px; background: #070c18; border-color: var(--line); font-size: .82rem; font-weight: 700; }
.lg-filters .custom-select-trigger:hover, .lg-filters .custom-select-trigger.is-open { border-color: rgba(53,215,255,.5); }
.lg-filters .custom-select-menu { max-height: 320px; overflow-y: auto; z-index: 30; }
.lg-clear {
  display: inline-flex; align-items: center; gap: .3rem; height: 36px; padding: 0 .7rem; border-radius: 9px; text-decoration: none;
  font-size: .78rem; font-weight: 700; color: #ff9a9d; background: rgba(255,90,95,.08); border: 1px solid rgba(255,90,95,.35);
}
.lg-clear svg { width: 12px; height: 12px; }
.lg-clear:hover { background: rgba(255,90,95,.15); }
.lg-table .lg-time-col { width: 84px; text-align: left; padding-left: 1.1rem; }
.lg-time { font-family: var(--mono); font-size: .8rem; color: var(--dim); }
.lg-table tbody tr.lg-row td { padding-top: .6rem; padding-bottom: .6rem; }
.lg-table tbody tr.lg-row:hover td { background: rgba(255,255,255,.025); }
.lg-day-row td { padding: .9rem 1.1rem .45rem !important; background: var(--ink-1) !important; border-bottom: 1px solid var(--line); position: sticky; top: 37px; z-index: 1; }
.lg-day-row[hidden] { display: none; }
.lg-day { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ice); font-weight: 700; }
.lg-staff { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .88rem; }
.lg-staff-avatar {
  width: 26px; height: 26px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 900; font-size: .74rem; color: var(--ice); background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.28);
}
.lg-action {
  display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .65rem .22rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
  --c: #8a94ab; color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); white-space: nowrap;
}
.lg-action svg { width: 13px; height: 13px; flex: none; }
.lg-action.is-console { --c: #f5a623; }
.lg-action.is-ticket { --c: #35d7ff; }
.lg-action.is-files { --c: #f5c451; }
.lg-action.is-danger { --c: #ff5a5f; }
.lg-action.is-perm { --c: #ff7b7f; }
.lg-action.is-news { --c: #b18cff; }
.lg-action.is-board { --c: #ff7bc5; }
.lg-action.is-guide { --c: #2ec4b6; }
.lg-action.is-chat { --c: #5ee29a; }
.lg-action.is-mod { --c: #ff8a8d; }
.lg-detail { font-size: .86rem; color: var(--text); opacity: .9; overflow-wrap: anywhere; }
.lg-detail.is-code { font-family: var(--mono); font-size: .78rem; padding: .15rem .45rem; border-radius: 6px; background: #070c18; border: 1px solid var(--line); color: #f5c451; opacity: 1; }
.lg-today-total { display: flex; align-items: baseline; gap: .45rem; margin: .55rem 0 .6rem; }
.lg-today-total strong { font-family: var(--display); font-weight: 900; font-size: 2rem; line-height: 1; }
.lg-today-total span { font-size: .82rem; color: var(--dim); }
.lg-today-total.is-small strong { font-size: 1.5rem; }
.lg-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.lg-tile { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .7rem; border-radius: 11px; background: var(--ink-2); border: 1px solid var(--line); --c: #35d7ff; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--c) 70%, transparent); }
.lg-tile.is-console { --c: #f5a623; }
.lg-tile-num { font-family: var(--display); font-weight: 900; font-size: 1.2rem; color: var(--text); }
.lg-tile-label { font-size: .72rem; color: var(--dim); }
.lg-staff-list { display: flex; flex-direction: column; gap: .2rem; margin-top: .5rem; }
.lg-staff-row { display: flex; align-items: center; gap: .6rem; padding: .4rem .45rem; border-radius: 10px; text-decoration: none; color: inherit; border: 1px solid transparent; }
.lg-staff-row:hover { background: rgba(53,215,255,.05); border-color: rgba(53,215,255,.2); }
.lg-staff-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.lg-staff-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.lg-staff-name { font-weight: 700; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-staff-n { font-family: var(--mono); font-size: .76rem; color: var(--text); }
.lg-staff-bar { height: 4px; border-radius: 999px; background: #070c18; overflow: hidden; }
.lg-staff-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4d8fff, #35d7ff); }

/* --- Recent Deaths page ----------------------------------------------------- */
.dt-views { margin-left: auto; }
.dt-filter-eliminated .tk-status-dot { background: #ff5a5f; opacity: 1; }
.dt-filter-revived .tk-status-dot { background: #5ee29a; opacity: 1; }
.dt-row.is-eliminated .dt-avatar img { filter: grayscale(.8) brightness(.75); }
.dt-row.is-eliminated .dt-avatar { border-color: rgba(255,90,95,.45); }
.dt-row.is-revived .dt-avatar { border-color: rgba(94,226,154,.45); }
.dt-cause { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.dt-cause-icon { width: 26px; height: 26px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #ff7b7f; background: rgba(255,90,95,.08); border: 1px solid rgba(255,90,95,.25); }
.dt-cause-icon svg { width: 15px; height: 15px; }
.dt-cause-text { font-size: .88rem; overflow-wrap: anywhere; }
.dt-metric { display: inline-flex; align-items: baseline; gap: .1rem; padding: .16rem .5rem; border-radius: 7px; font-family: var(--mono); font-size: .8rem; font-weight: 700; color: var(--dim); background: var(--ink-2); border: 1px solid var(--line); }
.dt-metric small { font-size: .64rem; opacity: .75; }
.dt-metric.is-good { color: #5ee29a; border-color: rgba(94,226,154,.35); }
.dt-metric.is-warn { color: #f5a623; border-color: rgba(245,166,35,.4); }
.dt-metric.is-bad { color: #ff7b7f; border-color: rgba(255,90,95,.45); background: rgba(255,90,95,.08); }
.dt-total { display: flex; align-items: center; gap: .75rem; margin: .55rem 0 .8rem; }
.dt-total-icon { width: 42px; height: 42px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #ff7b7f; background: rgba(255,90,95,.1); border: 1px solid rgba(255,90,95,.35); }
.dt-total-icon svg { width: 22px; height: 22px; }
.dt-total-text { display: flex; flex-direction: column; }
.dt-total-text strong { font-family: var(--display); font-weight: 900; font-size: 1.6rem; line-height: 1.1; }
.dt-total-text span { font-size: .76rem; color: var(--dim); }
.dt-split { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: #070c18; gap: 2px; margin-bottom: .75rem; }
.dt-split span { display: block; height: 100%; }
.dt-split .is-elim { background: #ff5a5f; }
.dt-split .is-rev { background: #5ee29a; }
.dt-mini { display: flex; flex-direction: column; gap: .6rem; margin-top: .6rem; }
.dt-mini-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; color: var(--dim); margin-bottom: .3rem; }
.dt-mini-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-mini-top strong { font-family: var(--mono); color: var(--text); font-size: .8rem; }
.dt-bar { height: 10px; border-radius: 999px; background: #070c18; border: 1px solid var(--line); overflow: hidden; }
.dt-bar.is-thin { height: 5px; border: none; }
.dt-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff5a5f, #ff9a5f); }
.dt-breakdown-head { display: flex; align-items: center; justify-content: space-between; padding: .1rem .2rem .2rem; flex: none; }
.dt-breakdown-head h2 { margin: 0; font-family: var(--display); font-size: 1.05rem; font-weight: 800; }
.dt-breakdown-head p { margin: .15rem 0 0; font-size: .8rem; color: var(--dim); }
.dt-breakdown-wrap { background: transparent; border: none; }
.dt-breakdown { display: flex; flex-direction: column; gap: .4rem; }
.dt-cause-row { display: flex; align-items: center; gap: .85rem; padding: .7rem .9rem; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); }
.dt-rank { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 900; font-size: .85rem; color: var(--dim); background: var(--ink-1); border: 1px solid var(--line-strong); }
.dt-cause-row.is-top-1 .dt-rank { color: #f5c451; border-color: rgba(245,196,81,.5); background: rgba(245,196,81,.1); }
.dt-cause-row.is-top-2 .dt-rank { color: #c7cfdf; border-color: rgba(199,207,223,.4); }
.dt-cause-row.is-top-3 .dt-rank { color: #d98a4e; border-color: rgba(217,138,78,.45); }
.dt-cause-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .45rem; }
.dt-cause-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.dt-cause-label { font-weight: 700; font-size: .9rem; }
.dt-cause-count { font-family: var(--mono); font-size: .76rem; color: var(--dim); white-space: nowrap; }
.dt-cause-count strong { color: var(--text); }
@media (max-width: 760px) { .dt-views { margin-left: 0; width: 100%; } .lg-filters { flex-wrap: wrap; height: auto; } }
.lg-table .lg-day-row td { text-align: left !important; }

/* --- Logs: last-24h stat list ------------------------------------------- */
.lg-stat-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.lg-stat-row { display: flex; align-items: center; gap: .65rem; padding: .6rem .1rem; border-bottom: 1px solid var(--line); }
.lg-stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.lg-stat-icon { width: 28px; height: 28px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; --c: #35d7ff; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.lg-stat-icon.is-console { --c: #f5a623; }
.lg-stat-icon svg { width: 15px; height: 15px; }
.lg-stat-label { flex: 1; font-size: .85rem; color: var(--dim); }
.lg-stat-num { font-family: var(--display); font-weight: 900; font-size: 1.05rem; color: var(--text); }

/* --- Deaths: inventory + totem sub-popups ------------------------------- */
.dt-sub-popup { max-width: 640px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.dt-sub-head {
  display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(53,215,255,.09), transparent);
}
.dt-sub-head.is-gold { background: linear-gradient(180deg, rgba(245,196,81,.1), transparent); }
.dt-sub-avatar { width: 52px; height: 52px; flex: none; border-radius: 12px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line-strong); }
.dt-sub-avatar img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.dt-sub-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.dt-sub-kicker { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ice); }
.dt-sub-head.is-gold .dt-sub-kicker { color: #f5c451; }
.dt-sub-kicker svg { width: 12px; height: 12px; }
.dt-sub-title h3 { margin: 0; font-family: var(--display); font-size: 1.2rem; font-weight: 900; }
.dt-sub-meta { font-size: .78rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-sub-icon-btn { width: 34px; height: 34px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: var(--dim); border: 1px solid var(--line-strong); background: var(--ink-2); }
.dt-sub-icon-btn svg { width: 15px; height: 15px; }
.dt-sub-icon-btn:hover { color: var(--ice); border-color: rgba(53,215,255,.5); }
.dt-sub-icon-btn[hidden] { display: none; }
.dt-sub-head .ticket-sidebar-toggle { align-self: flex-start; }
.dt-inv-stage {
  margin: 1.1rem 1.2rem 1.2rem; min-height: 200px; border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: radial-gradient(ellipse at center, rgba(53,215,255,.06), transparent 70%), #070c18; border: 1px solid var(--line);
}
.dt-inv-image { max-width: 100%; height: auto; image-rendering: pixelated; border-radius: 8px; box-shadow: 0 14px 40px -18px rgba(0,0,0,.9); }
.dt-inv-loading { display: flex; flex-direction: column; align-items: center; gap: .7rem; color: var(--dim); font-size: .86rem; text-align: center; }
.dt-inv-loading[hidden] { display: none; }
.dt-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--ice); animation: dt-spin .8s linear infinite; }
.dt-inv-loading.is-error .dt-spinner { animation: none; border-color: rgba(255,90,95,.45); }
.dt-inv-loading.is-error { color: #ff9a9d; }
@keyframes dt-spin { to { transform: rotate(360deg); } }
.dt-totem-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: 1rem 1.2rem 0; }
.dt-totem-stats[hidden] { display: none; }
.dt-totem-stat { display: flex; flex-direction: column; gap: .1rem; padding: .65rem .75rem; border-radius: 11px; background: var(--ink-2); border: 1px solid var(--line); }
.dt-totem-stat .v { font-family: var(--display); font-weight: 900; font-size: 1.2rem; color: #f5c451; }
.dt-totem-stat .k { font-size: .7rem; color: var(--dim); }
.dt-totem-scroll { max-height: 46vh; overflow-y: auto; padding: .8rem 1.2rem 1.2rem; }
.dt-totem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.dt-totem-day { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); padding: .55rem .2rem .15rem; }
.dt-totem-day:first-child { padding-top: 0; }
.dt-totem-item { display: flex; align-items: center; gap: .7rem; padding: .5rem .65rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); }
.dt-totem-item.is-recent { border-color: rgba(245,196,81,.4); background: linear-gradient(90deg, rgba(245,196,81,.08), var(--ink-2)); }
.dt-totem-num { width: 26px; height: 26px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: .72rem; font-weight: 800; color: #f5c451; background: rgba(245,196,81,.1); border: 1px solid rgba(245,196,81,.3); }
.dt-totem-main { flex: 1; display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; }
.dt-totem-time { font-family: var(--mono); font-size: .86rem; font-weight: 700; color: var(--text); }
.dt-totem-rel { font-size: .76rem; color: var(--dim); }
.dt-totem-empty { display: flex; align-items: center; gap: .7rem; padding: 1rem; border-radius: 12px; border: 1px dashed var(--line-strong); color: var(--dim); font-size: .86rem; }
.dt-totem-empty[hidden] { display: none; }
.dt-totem-empty svg { width: 20px; height: 20px; flex: none; color: #f5c451; }

/* --- Dashboard: player graph tooltip ------------------------------------ */
.chart-tooltip {
  display: flex; flex-direction: column; gap: .3rem; min-width: 130px; padding: .6rem .75rem; border-radius: 12px; white-space: nowrap;
  background: rgba(10,17,34,.96); border: 1px solid rgba(53,215,255,.4); box-shadow: 0 14px 34px -14px rgba(0,0,0,.9), 0 0 18px -8px rgba(53,215,255,.6);
  transform: translate(-50%, -100%) translateY(-14px); transition: opacity .12s ease;
}
.chart-tooltip::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; transform: translateX(-50%) rotate(45deg);
  background: rgba(10,17,34,.96); border-right: 1px solid rgba(53,215,255,.4); border-bottom: 1px solid rgba(53,215,255,.4);
}
.chart-tooltip .tt-time { font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--ice); }
.chart-tooltip .tt-time em { font-style: normal; color: var(--dim); font-weight: 500; margin-left: .4rem; }
.chart-tooltip .tt-main { display: flex; align-items: baseline; gap: .35rem; }
.chart-tooltip .tt-count { font-family: var(--display); font-weight: 900; font-size: 1.35rem; line-height: 1; color: var(--text); }
.chart-tooltip .tt-unit { font-size: .76rem; color: var(--dim); }
.chart-tooltip .tt-delta { margin-left: 0; align-self: flex-start; padding: .08rem .45rem; border-radius: 999px; font-family: var(--mono); font-size: .68rem; font-weight: 800; border: 1px solid currentColor; }
.chart-tooltip .tt-delta em { font-style: normal; font-weight: 500; opacity: .75; }
.chart-tooltip .tt-delta.up { color: #5ee29a; background: rgba(94,226,154,.08); }
.chart-tooltip .tt-delta.down { color: #ff7b7f; background: rgba(255,90,95,.08); }
.chart-tooltip .tt-delta.flat { color: var(--dim); }

/* --- Dashboard: online player head hover card ---------------------------- */
.dash-head-tip {
  position: fixed; z-index: 400; display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem .5rem .5rem; border-radius: 12px; pointer-events: none;
  background: rgba(10,17,34,.97); border: 1px solid rgba(53,215,255,.4); box-shadow: 0 14px 34px -14px rgba(0,0,0,.9), 0 0 18px -8px rgba(53,215,255,.5);
  opacity: 0; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease;
}
.dash-head-tip.is-visible { opacity: 1; transform: none; }
.dash-head-tip[hidden] { display: none; }
.dash-head-tip > img { width: 34px; height: 34px; border-radius: 8px; image-rendering: pixelated; }
.dash-head-tip-text { display: flex; flex-direction: column; gap: .2rem; }
.dash-head-tip-text strong { font-size: .9rem; font-weight: 800; color: var(--text); }
.dash-head-tip-sub { display: flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--dim); }
.dash-head-tip-rank {
  --rs: #35d7ff; --re: #4d8fff; padding: .02rem .45rem; border-radius: 999px; font-family: var(--mono); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: linear-gradient(90deg, var(--rs), var(--re));
}
.dash-head-tip-vanished { padding: .02rem .45rem; border-radius: 999px; font-size: .64rem; font-weight: 700; color: #b18cff; border: 1px dashed rgba(177,140,255,.5); }
.death-totem-list.dt-totem-list > li.dt-totem-day { background: none; border: none; box-shadow: none; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; padding: .6rem .2rem .1rem; color: var(--dim); }
.death-totem-list.dt-totem-list > li.dt-totem-item { font-family: inherit; font-size: inherit; }

/* Readable rank badges (solid gradient, JS picks dark/white text) + nickname colours */
.chat-online-tag, .dash-head-tip-rank { display: inline-flex; align-items: center; padding: .1rem .45rem; border-radius: 6px; font-family: var(--mono); font-size: .66rem; font-weight: 800; letter-spacing: .05em; line-height: 1.3; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 2px rgba(0,0,0,.4); text-shadow: none; }
.dash-head-tip-nick { display: inline-flex; align-items: baseline; gap: 0; font-weight: 700; }
.dash-head-tip-aka { color: var(--dim); font-weight: 500; margin-right: .25rem; }
.dash-head-tip-nick span:not(.dash-head-tip-aka), .chat-online-nick span { filter: drop-shadow(0 0 1px rgba(255,255,255,.35)); }

/* --- Console page --------------------------------------------------------- */
.cs-card { gap: .9rem; }
.cs-server { gap: .45rem; padding-left: .65rem; }
.cs-server-icon { display: inline-flex; }
.cs-server-icon svg { width: 14px; height: 14px; }
.cs-server.is-active .cs-server-icon { color: var(--ice); }
.cs-terminal {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden;
  background: #060a14; border: 1px solid var(--line-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 18px 40px -28px rgba(0,0,0,.9);
}
.cs-term-bar {
  flex: none; display: flex; align-items: center; gap: .9rem; padding: .55rem .6rem .55rem .85rem; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0d1528, #0a1122);
}
.cs-status { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .65rem; border-radius: 999px; font-family: var(--mono); font-size: .7rem; font-weight: 700; border: 1px solid var(--line-strong); color: var(--dim); }
.cs-status.is-live { color: #5ee29a; border-color: rgba(94,226,154,.4); background: rgba(94,226,154,.07); }
.cs-status.is-connecting { color: #f5a623; border-color: rgba(245,166,35,.4); background: rgba(245,166,35,.06); }
.cs-term-title { font-family: var(--mono); font-size: .74rem; color: var(--text); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-term-file { color: var(--dim); font-weight: 500; }
.cs-term-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; }
.cs-levels { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #060a14; border: 1px solid var(--line); }
.cs-level {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border-radius: 7px; cursor: pointer; border: none; background: none;
  font: inherit; font-size: .74rem; font-weight: 700; color: var(--dim); transition: background .12s ease, color .12s ease;
}
.cs-level:hover { color: var(--text); background: rgba(255,255,255,.04); }
.cs-level.is-active { color: var(--text); background: rgba(53,215,255,.14); box-shadow: inset 0 0 0 1px rgba(53,215,255,.35); }
.cs-level-dot { width: 7px; height: 7px; border-radius: 50%; }
.cs-level.is-warn .cs-level-dot { background: #f5a623; }
.cs-level.is-error .cs-level-dot { background: #ff5a5f; }
.cs-level-count { font-family: var(--mono); font-size: .66rem; padding: 0 .35rem; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line); }
.cs-level.is-warn.is-active { background: rgba(245,166,35,.12); box-shadow: inset 0 0 0 1px rgba(245,166,35,.4); }
.cs-level.is-error.is-active { background: rgba(255,90,95,.12); box-shadow: inset 0 0 0 1px rgba(255,90,95,.45); }
.cs-autoscroll { gap: .45rem; }
.cs-autoscroll .toggle-switch-track { transform: scale(.85); transform-origin: right center; }
.cs-autoscroll-label { font-size: .74rem; font-weight: 700; color: var(--dim); }
.cs-icon-btn { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: 1px solid var(--line); color: var(--dim); }
.cs-icon-btn svg { width: 15px; height: 15px; }
.cs-icon-btn:hover { color: #ff9a9d; border-color: rgba(255,90,95,.45); }
.cs-output-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ticket-main-stack .ticket-list-card.fill-scroll .cs-output, .cs-output {
  flex: 1 1 auto; min-height: 0; height: auto; overflow-y: auto; margin: 0; padding: .5rem 0; background: transparent; border: none; border-radius: 0;
  font-family: var(--mono); font-size: .78rem; line-height: 1.55; color: #c7d0e0;
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 2px, rgba(255,255,255,.008) 2px, rgba(255,255,255,.008) 4px);
}
.cs-line { display: grid; grid-template-columns: 64px 46px minmax(0, 1fr); align-items: baseline; column-gap: .55rem; padding: .08rem .9rem .08rem .75rem; border-left: 2px solid transparent; }
.cs-line[hidden] { display: none; }
.cs-line:hover { background: rgba(255,255,255,.025); }
.cs-time { color: #3f5076; font-size: .72rem; }
.cs-lvl { font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-align: center; padding: .02rem 0; border-radius: 4px; color: #4d6a93; }
.cs-msg { white-space: pre-wrap; word-break: break-word; min-width: 0; }
.cs-line.is-cont { padding-left: calc(.75rem + 64px + 46px + 1.1rem); grid-template-columns: minmax(0, 1fr); }
.cs-line.is-cont .cs-msg { color: inherit; opacity: .85; }
.cs-line.lv-warn { background: rgba(245,166,35,.05); border-left-color: rgba(245,166,35,.7); }
.cs-line.lv-warn .cs-lvl { color: #1a1205; background: #f5a623; }
.cs-line.lv-error { background: rgba(255,90,95,.07); border-left-color: #ff5a5f; }
.cs-line.lv-error .cs-lvl { color: #fff; background: #ff5a5f; }
.cs-line.is-cont.lv-warn .cs-lvl, .cs-line.is-cont.lv-error .cs-lvl { display: none; }
.cs-src {
  display: inline-block; margin-right: .5rem; padding: 0 .4rem; border-radius: 4px; font-size: .68rem; font-weight: 700;
  color: #b18cff; background: rgba(177,140,255,.1); border: 1px solid rgba(177,140,255,.25);
}
.cs-line.is-command .cs-who { color: var(--text); font-weight: 700; }
.cs-line.is-command .cs-verb { color: #4d6a93; }
.cs-line.is-command .cs-cmd { color: #f5c451; }
.cs-line.is-join { border-left-color: rgba(94,226,154,.6); }
.cs-line.is-join .cs-msg { color: #8ff0b8; }
.cs-line.is-leave { border-left-color: rgba(255,123,127,.45); }
.cs-line.is-leave .cs-msg { color: #ffb0b3; }
.cs-line.is-local { margin: .15rem 0; }
.cs-line.is-local.is-cmd { background: rgba(53,215,255,.07); border-left-color: var(--ice); }
.cs-line.is-local.is-cmd .cs-lvl { color: #04141c; background: var(--ice); }
.cs-line.is-local.is-cmd .cs-msg { color: var(--ice); font-weight: 700; }
.cs-line.is-local.is-reply { border-left-color: rgba(53,215,255,.35); }
.cs-line.is-local.is-reply .cs-lvl { color: var(--ice); background: rgba(53,215,255,.12); }
.cs-line.is-local.is-error { background: rgba(255,90,95,.08); border-left-color: #ff5a5f; }
.cs-line.is-local.is-error .cs-lvl { color: #fff; background: #ff5a5f; }
.cs-no-match { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: .86rem; pointer-events: none; }
.cs-no-match[hidden] { display: none; }
.cs-jump {
  position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem;
  border-radius: 999px; border: none; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 800; color: #04141c;
  background: linear-gradient(135deg, #35d7ff, #4d8fff); box-shadow: 0 10px 24px -10px rgba(53,215,255,.8); animation: tk-bulk-in .15s ease;
}
.cs-jump svg { width: 14px; height: 14px; }
.cs-jump[hidden] { display: none; }
.cs-input-row { flex: none; display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem .55rem .85rem; border-top: 1px solid var(--line); background: #0a1122; margin: 0; }
.cs-input-row:focus-within { box-shadow: inset 0 2px 0 rgba(53,215,255,.5); }
.cs-prompt { display: inline-flex; color: var(--ice); }
.cs-prompt svg { width: 18px; height: 18px; }
.cs-input { flex: 1; min-width: 0; height: 38px; background: none; border: none; outline: none; color: var(--text); font-family: var(--mono); font-size: .86rem; }
.cs-input::placeholder { color: #4d6a93; }
.cs-input:disabled { cursor: not-allowed; }
.cs-input-hint { display: inline-flex; align-items: center; gap: .2rem; font-size: .68rem; color: #4d6a93; white-space: nowrap; }
.cs-input-hint kbd { font-family: var(--mono); font-size: .62rem; padding: 0 .3rem; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--dim); }
.cs-send-btn {
  display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .95rem; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #35d7ff, #4d8fff); color: #04141c; font: inherit; font-size: .84rem; font-weight: 800;
}
.cs-send-btn svg { width: 15px; height: 15px; }
.cs-send-btn:disabled { opacity: .4; cursor: not-allowed; }
/* Sidebar: restart + stats */
.cs-restart-hint { margin: .45rem 0 .7rem; font-size: .8rem; color: var(--dim); line-height: 1.45; }
.cs-minutes { display: flex; align-items: center; gap: .3rem; height: 46px; padding: 4px; border-radius: 12px; background: #070c18; border: 1px solid var(--line-strong); box-sizing: border-box; }
.cs-minutes:focus-within { border-color: rgba(53,215,255,.55); }
.cs-minutes-step { width: 36px; height: 36px; flex: none; border-radius: 9px; border: 1px solid var(--line); background: var(--ink-2); color: var(--text); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.cs-minutes-step:hover { border-color: rgba(53,215,255,.5); color: var(--ice); }
.cs-minutes-input { flex: 1; min-width: 0; height: 100%; text-align: right; background: none; border: none; outline: none; color: var(--text); font-family: var(--display); font-weight: 900; font-size: 1.3rem; -moz-appearance: textfield; }
.cs-minutes-input::-webkit-outer-spin-button, .cs-minutes-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-minutes-suffix { flex: 1; font-size: .8rem; color: var(--dim); }
.cs-minute-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: .45rem 0 .7rem; }
.cs-minute-presets button { height: 30px; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-2); color: var(--dim); font: inherit; font-family: var(--mono); font-size: .74rem; font-weight: 700; cursor: pointer; }
.cs-minute-presets button:hover { color: var(--ice); border-color: rgba(53,215,255,.45); }
.cs-restart-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 42px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(245,166,35,.55); background: linear-gradient(180deg, rgba(245,166,35,.2), rgba(245,166,35,.08)); color: #ffc46b; font: inherit; font-size: .88rem; font-weight: 800;
}
.cs-restart-btn svg { width: 16px; height: 16px; }
.cs-restart-btn:hover { background: linear-gradient(180deg, rgba(245,166,35,.3), rgba(245,166,35,.12)); }
.cs-restart-btn.is-ghost { border-color: rgba(255,90,95,.45); background: rgba(255,90,95,.08); color: #ff9a9d; }
.cs-restart-btn[hidden], .restart-default[hidden], .restart-scheduled-default[hidden] { display: none !important; }
.cs-confirm { display: flex; flex-direction: column; gap: .55rem; padding: .7rem; border-radius: 12px; background: rgba(255,90,95,.07); border: 1px solid rgba(255,90,95,.35); }
.cs-confirm[hidden] { display: none; }
.cs-confirm-text { font-size: .82rem; color: #ffb0b3; line-height: 1.45; }
.cs-confirm-actions { display: flex; gap: .4rem; justify-content: flex-end; }
.cs-countdown { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .9rem; margin: .5rem 0 .7rem; border-radius: 12px; background: rgba(245,166,35,.07); border: 1px solid rgba(245,166,35,.35); }
.cs-countdown-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; color: #ffc46b; font-weight: 700; }
.cs-countdown-dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a623; box-shadow: 0 0 8px #f5a623; animation: pulse-dot 1.4s ease-in-out infinite; }
.cs-countdown-value { font-family: var(--mono); font-weight: 800; font-size: 2rem; color: var(--text); letter-spacing: .04em; }
.cs-meters { display: flex; flex-direction: column; gap: .7rem; margin-top: .6rem; }
.cs-meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .3rem; }
.cs-meter-top .k { font-size: .8rem; color: var(--dim); }
.cs-meter-top .v { font-family: var(--display); font-weight: 900; font-size: 1rem; }
.cs-bar { height: 6px; border-radius: 999px; background: #070c18; overflow: hidden; }
.cs-bar span { display: block; height: 100%; border-radius: inherit; transition: width .4s ease; }
.cs-meter-sub { display: block; margin-top: .25rem; font-family: var(--mono); font-size: .66rem; color: var(--dim); }
.cs-stats-note { margin: .35rem 0 .6rem; padding: .45rem .6rem; border-radius: 8px; font-size: .74rem; line-height: 1.35; color: var(--dim); background: color-mix(in srgb, var(--dim) 10%, transparent); }
.cs-stats-note[hidden], .cs-meter[hidden], .cs-player-strip[hidden], .cs-restart-card[hidden] { display: none; }
.cs-players { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.cs-player-stat { display: flex; flex-direction: column; padding: .55rem .65rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); }
.cs-player-stat .v { font-family: var(--display); font-weight: 900; font-size: 1.15rem; color: var(--text); }
.cs-player-stat .k { font-size: .7rem; color: var(--dim); }
.cs-player-stat.is-main .v { color: #5ee29a; }
@media (max-width: 900px) {
  .cs-term-bar { flex-wrap: wrap; }
  .cs-term-actions { margin-left: 0; width: 100%; justify-content: space-between; }
  .cs-input-hint { display: none; }
  .cs-line { grid-template-columns: 58px minmax(0, 1fr); }
  .cs-line .cs-lvl { display: none; }
}
.cs-server { border: 0; font: inherit; cursor: pointer; }
.cs-server:not(.is-active) { background: transparent; }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* --- Ticket page: death info action buttons ---------------------------- */
.death-btn-row .td-death-action {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 36px; padding: 0 .6rem; border-radius: 10px; cursor: pointer;
  background: rgba(53,215,255,.08); border: 1px solid rgba(53,215,255,.3); color: var(--ice); font: inherit; font-size: .8rem; font-weight: 800;
  transition: background .12s ease, border-color .12s ease;
}
.td-death-action svg { width: 15px; height: 15px; }
.td-death-action:hover { background: rgba(53,215,255,.15); border-color: rgba(53,215,255,.55); }
.td-death-action.is-gold { color: #f5c451; background: rgba(245,196,81,.08); border-color: rgba(245,196,81,.32); }
.td-death-action.is-gold:hover { background: rgba(245,196,81,.15); border-color: rgba(245,196,81,.55); }
.td-death-count { margin-left: .1rem; min-width: 18px; padding: 0 .3rem; border-radius: 999px; font-family: var(--mono); font-size: .66rem; background: rgba(245,196,81,.18); }
.dt-totem-footer { padding: 0 1.2rem 1.1rem; display: flex; justify-content: center; }
.dt-totem-footer .tk-bulk-btn { width: 100%; justify-content: center; }
.dt-totem-scroll[hidden] { display: none; }

/* --- Console: restart timer -------------------------------------------- */
.cs-restart-head { display: flex; align-items: center; gap: .65rem; }
.cs-restart-icon { width: 34px; height: 34px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #f5a623; background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.35); }
.cs-restart-icon svg { width: 17px; height: 17px; }
.cs-restart-titles { display: flex; flex-direction: column; gap: .1rem; }
.cs-restart-sub { font-size: .76rem; color: var(--dim); }
.cs-timer {
  margin: .9rem 0 .6rem; padding: 1rem 1rem .8rem; border-radius: 14px; text-align: center;
  background: radial-gradient(ellipse at top, rgba(245,166,35,.1), transparent 70%), #070c18; border: 1px solid var(--line-strong);
}
.cs-timer-readout { display: flex; align-items: baseline; justify-content: center; gap: .4rem; }
.cs-timer-input {
  width: 3.4ch; padding: 0; text-align: right; background: none; border: none; outline: none; border-bottom: 2px dashed transparent;
  font-family: var(--display); font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--text); -moz-appearance: textfield;
}
.cs-timer-input:hover, .cs-timer-input:focus { border-bottom-color: rgba(245,166,35,.5); }
.cs-timer-input::-webkit-outer-spin-button, .cs-timer-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-timer-unit { font-size: .9rem; font-weight: 700; color: var(--dim); }
.cs-timer-at { display: block; margin-top: .3rem; font-family: var(--mono); font-size: .7rem; color: #ffc46b; }
.cs-timer-at.is-center { text-align: center; margin: -.2rem 0 .8rem; }
.cs-range { --fill: 6.8%; width: 100%; margin: .9rem 0 .2rem; height: 18px; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.cs-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, #f5a623 0, #ffc46b var(--fill), #1c2a4a var(--fill)); }
.cs-range::-moz-range-track { height: 6px; border-radius: 999px; background: #1c2a4a; }
.cs-range::-moz-range-progress { height: 6px; border-radius: 999px; background: #f5a623; }
.cs-range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: #fff3dc; border: 3px solid #f5a623; box-shadow: 0 0 10px rgba(245,166,35,.6); }
.cs-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff3dc; border: 3px solid #f5a623; }
.cs-range-scale { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .6rem; color: #4d6a93; }
.cs-minute-presets { grid-template-columns: repeat(5, 1fr); margin: 0 0 .8rem; }
.cs-minute-presets button.is-active { color: #1a1205; background: #f5a623; border-color: #f5a623; }
.cs-restart-btn { height: 44px; border-radius: 12px; font-size: .9rem; box-shadow: 0 10px 24px -16px rgba(245,166,35,.9); }
.cs-confirm-top { display: flex; align-items: flex-start; gap: .55rem; }
.cs-confirm-icon { width: 28px; height: 28px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #ff7b7f; background: rgba(255,90,95,.12); }
.cs-confirm-icon svg { width: 15px; height: 15px; }
.cs-confirm-actions .tk-bulk-btn { flex: 1; justify-content: center; }
/* Countdown ring */
.cs-ring-wrap { position: relative; width: 168px; height: 168px; margin: .9rem auto .6rem; }
.cs-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.cs-ring-track { fill: none; stroke: #1c2a4a; stroke-width: 8; }
.cs-ring-fill { fill: none; stroke: #f5a623; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s ease; filter: drop-shadow(0 0 6px rgba(245,166,35,.55)); }
.is-final .cs-ring-fill { stroke: #ff5a5f; filter: drop-shadow(0 0 6px rgba(255,90,95,.6)); }
.cs-ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; }
.cs-ring-center .cs-countdown-value { font-size: 2.1rem; }
.is-final .cs-ring-center .cs-countdown-value { color: #ff9a9d; }
.cs-ring-label { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: #ffc46b; font-weight: 700; }

/* --- Console: player stats ---------------------------------------------- */
.cs-players { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.cs-online-hero {
  display: flex; align-items: center; gap: .75rem; padding: .85rem .9rem; border-radius: 14px;
  background: linear-gradient(135deg, rgba(94,226,154,.14), rgba(94,226,154,.03)); border: 1px solid rgba(94,226,154,.35);
}
.cs-online-icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: #5ee29a; background: rgba(94,226,154,.15); }
.cs-online-icon svg { width: 19px; height: 19px; }
.cs-online-text { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cs-online-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 800; color: var(--text); }
.cs-online-sub { font-size: .72rem; color: var(--dim); }
.cs-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #5ee29a; box-shadow: 0 0 8px #5ee29a; animation: pulse-dot 1.6s ease-in-out infinite; }
.cs-online-value { font-family: var(--display); font-weight: 900; font-size: 2rem; line-height: 1; color: #5ee29a; }
.cs-player-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); }
.cs-player-cell { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .7rem .3rem; text-align: center; }
.cs-player-cell + .cs-player-cell { border-left: 1px solid var(--line); }
.cs-cell-icon { width: 24px; height: 24px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .15rem; --c: #35d7ff; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.cs-cell-icon svg { width: 13px; height: 13px; }
.cs-cell-icon.is-gold { --c: #f5c451; }
.cs-cell-icon.is-purple { --c: #b18cff; }
.cs-player-cell .v { font-family: var(--display); font-weight: 900; font-size: 1.15rem; color: var(--text); }
.cs-player-cell .k { font-size: .66rem; color: var(--dim); white-space: nowrap; }
.cs-confirm-actions .tk-bulk-btn { white-space: nowrap; padding-left: .6rem; padding-right: .6rem; font-size: .8rem; }

/* --- Updates & News: list --------------------------------------------------- */
.nw-tab-draft .tk-status-dot { background: #8a94ab; opacity: 1; }
.nw-tab-scheduled .tk-status-dot { background: #f5a623; opacity: 1; }
.nw-tab-published .tk-status-dot { background: #5ee29a; opacity: 1; }
.nw-title-wrap { display: flex; align-items: stretch; gap: .75rem; min-width: 0; }
.nw-cat-bar { width: 3px; flex: none; border-radius: 3px; background: var(--cat, var(--ice)); box-shadow: 0 0 8px color-mix(in srgb, var(--cat, #35d7ff) 60%, transparent); }
.nw-title-text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.nw-title-line { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.nw-table .news-admin-title { font-weight: 800; font-size: .92rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-table .news-admin-summary { font-size: .78rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.nw-pinned { flex: none; display: inline-flex; align-items: center; gap: .25rem; padding: .05rem .45rem; border-radius: 999px; font-size: .66rem; font-weight: 800; color: #f5c451; background: rgba(245,196,81,.1); border: 1px solid rgba(245,196,81,.35); }
.nw-pinned svg { width: 10px; height: 10px; }
.nw-status { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 800; border: 1px solid var(--line-strong); color: #8a94ab; }
.nw-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.nw-status.is-published { color: #5ee29a; border-color: rgba(94,226,154,.4); background: rgba(94,226,154,.08); }
.nw-status.is-scheduled { color: #f5a623; border-color: rgba(245,166,35,.4); background: rgba(245,166,35,.08); }
.nw-status.is-scheduled .nw-status-dot { animation: pulse-dot 1.6s ease-in-out infinite; }
.nw-status-when { margin-top: .25rem; font-family: var(--mono); font-size: .68rem; color: var(--dim); }
.nw-new-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem; height: 44px; border-radius: 12px; text-decoration: none;
  background: linear-gradient(135deg, #35d7ff, #4d8fff); color: #04141c; font-weight: 800; font-size: .9rem; box-shadow: 0 10px 24px -14px rgba(53,215,255,.9);
}
.nw-new-btn svg { width: 17px; height: 17px; }
.nw-new-btn:hover { filter: brightness(1.06); }
.nw-public { display: flex; align-items: center; gap: .55rem; margin-top: .7rem; padding: .6rem .75rem; border-radius: 10px; font-size: .8rem; color: var(--dim); border: 1px solid var(--line); background: var(--ink-2); }
.nw-public strong { color: var(--text); }
.nw-public-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #8a94ab; }
.nw-public.is-live .nw-public-dot { background: #5ee29a; box-shadow: 0 0 8px #5ee29a; }
.nw-public.is-off { border-color: rgba(245,166,35,.35); background: rgba(245,166,35,.06); }
.nw-public.is-off .nw-public-dot { background: #f5a623; }
.nw-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: .55rem; }
.nw-tiles.is-two { grid-template-columns: 1fr 1fr; }
.nw-tile { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .7rem; border-radius: 11px; background: var(--ink-2); border: 1px solid var(--line); --c: #8a94ab; box-shadow: inset 0 2px 0 color-mix(in srgb, var(--c) 70%, transparent); }
.nw-tile.is-published { --c: #5ee29a; }
.nw-tile.is-scheduled { --c: #f5a623; }
.nw-tile .v { font-family: var(--display); font-weight: 900; font-size: 1.3rem; color: var(--text); }
.nw-tile .k { font-size: .7rem; color: var(--dim); }
.nw-next { display: flex; align-items: center; gap: .65rem; margin-top: .6rem; padding: .65rem .7rem; border-radius: 11px; text-decoration: none; color: inherit; background: rgba(245,166,35,.06); border: 1px solid rgba(245,166,35,.3); }
a.nw-next:hover { background: rgba(245,166,35,.1); }
.nw-next-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #f5a623; background: rgba(245,166,35,.14); }
.nw-next-icon svg { width: 15px; height: 15px; }
.nw-next-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.nw-next-label { font-family: var(--mono); font-size: .66rem; color: #ffc46b; }
.nw-next-title { font-size: .84rem; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-poll { display: flex; flex-direction: column; gap: .35rem; margin-top: .55rem; }
.nw-poll + .nw-poll { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.nw-poll-title { font-weight: 700; font-size: .86rem; color: var(--text, inherit); text-decoration: none; line-height: 1.3; }
.nw-poll-title:hover { text-decoration: underline; }
.nw-poll-state { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); }
.nw-poll-state.is-open { color: #5ee29a; }
.nw-poll-opt { display: flex; flex-direction: column; gap: .25rem; }
.nw-poll-row { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; }
.nw-poll-num { font-family: var(--mono); font-size: .72rem; color: var(--dim); white-space: nowrap; }
.nw-poll-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 14%, transparent); overflow: hidden; }
.nw-poll-bar span { display: block; height: 100%; border-radius: inherit; background: var(--acc); transition: width .4s ease; }
.nw-poll-total { font-size: .72rem; color: var(--dim); }
.nw-recent { display: flex; flex-direction: column; gap: .2rem; margin-top: .5rem; }
.nw-recent-row { display: flex; align-items: stretch; gap: .6rem; padding: .45rem .5rem; border-radius: 10px; text-decoration: none; color: inherit; border: 1px solid transparent; }
.nw-recent-row:hover { background: rgba(255,255,255,.03); border-color: var(--line); }
.nw-recent-bar { width: 3px; flex: none; border-radius: 3px; background: var(--cat, var(--ice)); }
.nw-recent-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.nw-recent-title { font-size: .85rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-recent-when { font-size: .72rem; color: var(--dim); }

/* --- Updates & News: editor polish ---------------------------------------- */
.news-editor-card { border-radius: 16px; }
.news-field > span { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.news-field > span em { font-family: var(--body); letter-spacing: 0; text-transform: none; font-size: .76rem; }
.news-field input, .news-field select, .news-field textarea {
  background: #070c18; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--text); padding: .7rem .85rem; font-size: .92rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.news-field input:focus, .news-field select:focus, .news-field textarea:focus { outline: none; border-color: rgba(53,215,255,.6); box-shadow: 0 0 0 3px rgba(53,215,255,.12); }
#news-title { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.news-field-grow textarea { line-height: 1.65; }
.news-format-help { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .6rem .75rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); font-size: .74rem; color: var(--dim); }
.news-format-help code { padding: .05rem .4rem; border-radius: 5px; background: #070c18; border: 1px solid var(--line); color: var(--ice); font-size: .7rem; }
.news-actions { display: flex; flex-direction: column; gap: .45rem; }
.news-actions > .btn, .news-side-links > .btn { width: 100%; justify-content: center; height: 40px; border-radius: 11px; }
.news-actions #news-publish-btn { background: linear-gradient(135deg, #35d7ff, #4d8fff); color: #04141c; border: none; font-weight: 800; box-shadow: 0 10px 24px -14px rgba(53,215,255,.9); }
.news-schedule { padding: .55rem; border-radius: 12px; background: rgba(245,166,35,.05); border: 1px dashed rgba(245,166,35,.35); }
.news-schedule #news-schedule-btn { border-color: rgba(245,166,35,.5); color: #ffc46b; }
.news-preview-card { border-radius: 16px; }

/* --- Promotion ---------------------------------------------------------------- */
.pr-warning { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem 1rem; border-radius: 14px; font-size: .84rem; line-height: 1.5; color: #ffd9a0; background: linear-gradient(90deg, rgba(245,166,35,.12), rgba(245,166,35,.04)); border: 1px solid rgba(245,166,35,.4); }
.pr-warning strong { color: #ffc46b; }
.pr-warning-icon { display: inline-flex; color: #f5a623; flex: none; margin-top: .1rem; }
.pr-warning-icon svg { width: 18px; height: 18px; }
.pr-toolbar-btns { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.pr-toolbar-btns[hidden] { display: none; }
.pr-toolbar-btns .files-upload-btn, .pr-toolbar-btns .files-tool-btn { height: 42px; }
.pr-name { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: .9rem; }
.pr-name-icon { width: 28px; height: 28px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #ff6a33; background: rgba(255,69,0,.12); border: 1px solid rgba(255,69,0,.3); }
.pr-name-icon svg { width: 16px; height: 16px; }
.pr-sub { display: inline-flex; padding: .16rem .55rem; border-radius: 7px; font-family: var(--mono); font-size: .76rem; font-weight: 700; color: #ff8a5c; background: rgba(255,69,0,.08); border: 1px solid rgba(255,69,0,.28); }
.pr-title { font-size: .86rem; color: var(--text); opacity: .92; }
.pr-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--ice); text-decoration: none; font-size: .86rem; }
.pr-link svg { width: 13px; height: 13px; opacity: .7; }
.pr-link:hover { text-decoration: underline; }
.pr-table .pr-actions-col { width: 1%; white-space: nowrap; text-align: right; }
.pr-table .promotion-row-actions-idle { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.pr-table .promotion-row-actions-idle[hidden] { display: none; }
.pr-last { font-size: .7rem; font-weight: 700; padding: .18rem .55rem; border-radius: 999px; color: #5ee29a; background: rgba(94,226,154,.08); border: 1px solid rgba(94,226,154,.3); margin-right: .2rem; }
.pr-last.is-never { color: var(--dim); background: var(--ink-2); border-color: var(--line); }
.pr-post-btn {
  display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 .75rem; border-radius: 9px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #ff6a33, #ff4500); color: #fff; font: inherit; font-size: .78rem; font-weight: 800; box-shadow: 0 6px 16px -10px rgba(255,69,0,.9);
}
.pr-post-btn svg { width: 14px; height: 14px; }
.pr-post-btn:hover { filter: brightness(1.08); }
.pr-table .pr-icon-btn:hover { color: var(--ice); border-color: rgba(53,215,255,.45); background: rgba(53,215,255,.08); }
.pr-table .promotion-row-actions-confirm { display: inline-flex; }
.pr-table .promotion-row-actions-confirm[hidden] { display: none; }
.pr-conn { display: flex; align-items: center; gap: .7rem; margin-top: .55rem; padding: .75rem .8rem; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); }
.pr-conn-icon { width: 36px; height: 36px; flex: none; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #ff6a33; background: rgba(255,69,0,.12); }
.pr-conn-icon svg { width: 20px; height: 20px; }
.pr-conn-text { display: flex; flex-direction: column; gap: .1rem; font-size: .76rem; color: var(--dim); }
.pr-conn-text strong { font-size: .88rem; color: var(--text); }
.pr-conn.is-ok { border-color: rgba(94,226,154,.35); background: rgba(94,226,154,.06); }
.pr-conn.is-manual { border-color: rgba(245,166,35,.35); background: rgba(245,166,35,.06); }
.pr-last-post { background: rgba(255,69,0,.05); border-color: rgba(255,69,0,.25); }
.pr-last-post .nw-next-icon { color: #ff6a33; background: rgba(255,69,0,.12); }
.pr-last-post .nw-next-label { color: #ff8a5c; }
.cs-server { font-family: inherit; font-size: .84rem; font-weight: 700; line-height: inherit; }
.news-side-links #news-delete-btn { background: rgba(255,90,95,.08); border: 1px solid rgba(255,90,95,.45); color: #ff9a9d; box-shadow: none; }
.news-side-links #news-delete-btn:hover { background: rgba(255,90,95,.16); }

/* --- Promotion popups (template / post body / post to Reddit) ---------- */
.pr-pop { max-width: 1080px; width: 100%; height: min(820px, 92vh); max-height: none; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.pr-pop.pr-pop-sm { height: auto; max-height: 92vh; max-width: 920px; }
.pr-pop-head { flex: none; display: flex; align-items: center; gap: .85rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(53,215,255,.08), transparent); }
.pr-pop-head.is-reddit { background: linear-gradient(180deg, rgba(255,69,0,.1), transparent); }
.pr-pop-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--ice); background: rgba(53,215,255,.12); border: 1px solid rgba(53,215,255,.35); }
.pr-pop-head.is-reddit .pr-pop-icon { color: #ff6a33; background: rgba(255,69,0,.12); border-color: rgba(255,69,0,.4); }
.pr-pop-icon svg { width: 19px; height: 19px; }
.pr-pop-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pr-pop-kicker { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ice); }
.pr-pop-head.is-reddit .pr-pop-kicker { color: #ff8a5c; }
.pr-pop-titles h3 { margin: 0; font-family: var(--display); font-size: 1.2rem; font-weight: 900; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-pop-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: minmax(0, 1fr) auto; margin: 0; }
.pr-pop-main { display: flex; flex-direction: column; gap: .95rem; padding: 1.2rem 1.3rem; min-height: 0; overflow-y: auto; }
.pr-pop-side { display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem 1.3rem; border-left: 1px solid var(--line); background: rgba(255,255,255,.012); min-height: 0; overflow-y: auto; }
.pr-pop-foot { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: .5rem; padding: .85rem 1.3rem; border-top: 1px solid var(--line); background: #0a1122; }
.pr-pop-foot[hidden] { display: none; }
.pr-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.pr-field-grow { flex: 1 1 auto; min-height: 0; }
.pr-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.pr-label { display: flex; align-items: baseline; gap: .4rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.pr-label em { font-family: var(--body); font-style: normal; letter-spacing: 0; text-transform: none; font-size: .74rem; font-weight: 500; opacity: .8; }
.pr-count { margin-left: auto; letter-spacing: 0; font-weight: 600; opacity: .8; }
.pr-count.is-near { color: #f5a623; opacity: 1; }
.pr-field input, .pr-field textarea {
  width: 100%; box-sizing: border-box; background: #070c18; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--text);
  padding: .7rem .85rem; font: inherit; font-size: .92rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.pr-field input:focus, .pr-field textarea:focus { outline: none; border-color: rgba(53,215,255,.6); box-shadow: 0 0 0 3px rgba(53,215,255,.12); }
.pr-field textarea { resize: none; line-height: 1.6; }
.pr-field-grow textarea { flex: 1 1 auto; min-height: 220px; }
.pr-title-input { font-family: var(--display) !important; font-weight: 800; font-size: 1rem !important; }
.pr-affix { display: flex; align-items: stretch; border-radius: 11px; background: #070c18; border: 1px solid var(--line-strong); overflow: hidden; transition: border-color .15s ease, box-shadow .15s ease; }
.pr-affix:focus-within { border-color: rgba(53,215,255,.6); box-shadow: 0 0 0 3px rgba(53,215,255,.12); }
.pr-affix-pre { display: inline-flex; align-items: center; padding: 0 .2rem 0 .8rem; font-family: var(--mono); font-weight: 700; color: #ff8a5c; }
.pr-affix input { border: none; border-radius: 0; background: none; padding-left: .2rem; box-shadow: none !important; }
.pr-note { margin: 0; padding: .6rem .75rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); font-size: .76rem; color: var(--dim); line-height: 1.5; }
.pr-note strong { color: var(--text); }
.pr-note code { padding: .03rem .35rem; border-radius: 5px; background: #070c18; border: 1px solid var(--line); color: var(--ice); font-size: .7rem; }
.pr-side-label { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.pr-primary-btn {
  display: inline-flex; align-items: center; gap: .45rem; height: 38px; padding: 0 1rem; border-radius: 10px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #35d7ff, #4d8fff); color: #04141c; font: inherit; font-size: .85rem; font-weight: 800; box-shadow: 0 8px 20px -12px rgba(53,215,255,.9);
}
.pr-primary-btn svg { width: 15px; height: 15px; }
.pr-primary-btn:hover { filter: brightness(1.06); }
.pr-primary-btn:disabled { opacity: .6; cursor: default; }
.pr-pop-foot .tk-bulk-btn { height: 38px; }
.pr-post-big { height: 38px; padding: 0 1.1rem; font-size: .85rem; }
/* Reddit-style preview card */
.pr-pv { display: flex; flex-direction: column; gap: .5rem; padding: .85rem .9rem; border-radius: 12px; background: #0b0f17; border: 1px solid #262b36; font-family: var(--body); }
.pr-pv-top { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: #8c95a6; min-width: 0; }
.pr-pv-sub-icon { width: 20px; height: 20px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #ff4500; }
.pr-pv-sub-icon svg { width: 13px; height: 13px; }
.pr-pv-sub { font-weight: 700; color: #d7dadc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-pv-title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; }
.pr-pv-flair { padding: .05rem .5rem; border-radius: 999px; font-size: .68rem; font-weight: 700; color: #fff; background: #3a4150; }
.pr-pv-flair[hidden] { display: none; }
.pr-pv-title { font-size: 1rem; font-weight: 700; line-height: 1.35; color: #f1f3f5; overflow-wrap: anywhere; }
.pr-pv-title.is-placeholder { color: #5b6476; font-style: italic; }
.pr-pv-body { max-height: 220px; overflow: hidden; font-size: .8rem; line-height: 1.55; color: #b8bec9; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
.pr-pv-body[hidden] { display: none; }
.pr-pv-actions { display: flex; gap: .4rem; }
.pr-pv-actions span { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px; background: #1a1f29; font-size: .68rem; font-weight: 700; color: #8c95a6; }
.pr-pv-actions svg { width: 12px; height: 12px; }
.pr-details { display: flex; flex-direction: column; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); }
.pr-details[hidden] { display: none; }
.pr-detail { display: flex; justify-content: space-between; gap: .8rem; padding: .55rem .8rem; font-size: .8rem; }
.pr-detail + .pr-detail { border-top: 1px solid var(--line); }
.pr-detail .k { color: var(--dim); }
.pr-detail .v { color: var(--text); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.pr-hint { margin: 0; padding: .65rem .8rem; border-radius: 10px; font-size: .78rem; line-height: 1.5; color: #ffd9a0; background: rgba(245,166,35,.08); border: 1px solid rgba(245,166,35,.35); }
.pr-hint[hidden], .pr-manual[hidden] { display: none; }
.pr-manual { display: flex; flex-direction: column; gap: .6rem; padding: .8rem; border-radius: 12px; background: rgba(94,226,154,.06); border: 1px solid rgba(94,226,154,.35); }
.pr-manual-actions { display: flex; justify-content: flex-end; gap: .45rem; }
@media (max-width: 860px) {
  .pr-pop { height: 94vh; }
  .pr-pop-body { grid-template-columns: 1fr; grid-template-rows: auto auto auto; overflow-y: auto; }
  .pr-pop-side { border-left: none; border-top: 1px solid var(--line); }
  .pr-field-row { grid-template-columns: 1fr; }
}

/* --- Promotion: "View" buttons + big Reddit-style preview -------------- */
.pr-side-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pr-view-btn {
  display: inline-flex; align-items: center; gap: .35rem; height: 28px; padding: 0 .65rem; border-radius: 8px; cursor: pointer;
  background: rgba(53,215,255,.08); border: 1px solid rgba(53,215,255,.35); color: var(--ice); font: inherit; font-size: .74rem; font-weight: 800;
}
.pr-view-btn svg { width: 13px; height: 13px; }
.pr-view-btn:hover { background: rgba(53,215,255,.16); }
.pr-view-overlay { z-index: 260; background: rgba(3,5,10,.82); }
.pr-view-popup { max-width: 860px; width: 100%; height: min(860px, 92vh); max-height: none; padding: 0; overflow: hidden; display: flex; flex-direction: column; background: #030303; border-color: #343536; }
.pr-view-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .7rem .9rem .7rem 1.1rem; background: #0b1416; border-bottom: 1px solid #343536; }
.pr-view-bar-title { display: inline-flex; align-items: center; gap: .55rem; font-size: .82rem; font-weight: 700; color: #d7dadc; }
.pr-view-reddit { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #ff4500; }
.pr-view-reddit svg { width: 15px; height: 15px; }
.pr-view-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 0 1.4rem; scrollbar-color: #343536 transparent; }
.pr-view-sub-banner { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.4rem; background: linear-gradient(180deg, #1a282d, #030303); border-bottom: 1px solid #1a1a1b; }
.pr-view-sub-avatar { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #ff4500; border: 3px solid #030303; box-shadow: 0 0 0 1px #343536; }
.pr-view-sub-avatar svg { width: 28px; height: 28px; }
.pr-view-sub-name { font-size: 1.25rem; font-weight: 800; color: #f2f4f5; font-family: var(--body); }
.pr-view-post { display: flex; gap: .9rem; margin: 1.1rem 1.4rem 0; padding: 1rem 1.1rem; border-radius: 14px; background: #0f1a1c; border: 1px solid #1f2b2e; font-family: -apple-system, "Segoe UI", Roboto, var(--body), sans-serif; }
.pr-view-vote { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding-top: .15rem; color: #818384; font-size: .78rem; font-weight: 700; }
.pr-view-vote svg { width: 18px; height: 18px; }
.pr-view-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .55rem; }
.pr-view-meta { font-size: .76rem; color: #818384; }
.pr-view-meta span:first-child { color: #d7dadc; font-weight: 700; }
.pr-view-user { color: #818384; }
.pr-view-title { margin: 0; font-size: 1.45rem; font-weight: 700; line-height: 1.3; color: #f2f4f5; overflow-wrap: anywhere; }
.pr-view-title.is-placeholder { color: #5b6476; font-style: italic; }
.pr-view-flair { align-self: flex-start; padding: .12rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #fff; background: #3a4150; }
.pr-view-flair[hidden] { display: none; }
.pr-view-body { font-size: .94rem; line-height: 1.6; color: #d7dadc; overflow-wrap: anywhere; }
.pr-view-body p { margin: 0 0 .85rem; }
.pr-view-body ul, .pr-view-body ol { margin: 0 0 .85rem; padding-left: 1.4rem; }
.pr-view-body li { margin: .2rem 0; }
.pr-view-body h3, .pr-view-body h4, .pr-view-body h5 { margin: .4rem 0 .6rem; color: #f2f4f5; }
.pr-view-body a { color: #4fbcff; text-decoration: none; }
.pr-view-body a:hover { text-decoration: underline; }
.pr-view-body code { padding: .05rem .35rem; border-radius: 4px; background: #1a282d; font-size: .86em; }
.pr-view-body blockquote { margin: 0 0 .85rem; padding-left: .8rem; border-left: 4px solid #343536; color: #a5a9ab; }
.pr-view-body hr { border: none; border-top: 1px solid #343536; margin: 1rem 0; }
.pr-view-empty { color: #5b6476; font-style: italic; }
.pr-view-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem; }
.pr-view-actions span { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: 999px; background: #1a282d; font-size: .78rem; font-weight: 700; color: #d7dadc; }
.pr-view-actions svg { width: 15px; height: 15px; }
.pr-view-note { margin: .9rem 1.4rem 0; font-size: .74rem; color: #6a7380; }
@media (max-width: 700px) { .pr-view-post { margin: 1rem .8rem 0; } .pr-view-vote { display: none; } }
.pr-view-popup { height: auto; max-height: 92vh; }

/* ===== Board rework ===================================================== */
.board-column { --bc: #35d7ff; border-radius: 16px; padding: .85rem; gap: .65rem; position: relative; overflow: hidden; }
.board-column::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--bc), transparent 85%); opacity: .8; }
.bc-smp { --bc: #4fd18b; }
.bc-website { --bc: #35d7ff; }
.bc-network { --bc: #b98bff; }
.bc-in_progress { --bc: #f5a623; }
.bc-completed { --bc: #5ee29a; }
.bc-changes { --bc: #ff7bc5; }
.board-column-head { padding-bottom: .55rem; border-bottom: 1px solid var(--line); }
.board-column-title { gap: .5rem; font-size: .95rem; }
.bc-icon { width: 26px; height: 26px; flex: none; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--bc, var(--ice)); background: color-mix(in srgb, var(--bc, #35d7ff) 14%, transparent); border: 1px solid color-mix(in srgb, var(--bc, #35d7ff) 35%, transparent); }
.bc-icon svg { width: 14px; height: 14px; }
.board-column-count { color: var(--text); font-weight: 700; }
.board-column-view-btn, .board-header-add-btn { height: 30px; padding: 0 .6rem; border-radius: 9px; font-size: .74rem; font-weight: 700; }
.board-column-view-btn { border-color: var(--line); background: var(--ink-2); }
.board-header-add-btn { border: 1px solid color-mix(in srgb, var(--bc) 45%, transparent); background: color-mix(in srgb, var(--bc) 12%, transparent); color: var(--bc); }
.board-header-add-btn:hover { border-color: var(--bc); color: var(--bc); background: color-mix(in srgb, var(--bc) 20%, transparent); }
.board-column-view-btn svg, .board-header-add-btn svg { width: 13px; height: 13px; }
.board-column-list { gap: .5rem; }
/* Cards */
.board-card {
  --prio: #8a94ab; position: relative; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 11px;
  padding: .65rem .7rem .6rem .9rem; gap: .5rem; background: var(--ink-2);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.board-card::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--prio); }
.board-card.prio-high { --prio: #ff5a5f; }
.board-card.prio-medium { --prio: #f5a623; }
.board-card.prio-low { --prio: #5d6b86; }
.board-card:hover { border-color: color-mix(in srgb, var(--bc, #35d7ff) 55%, transparent); background: #13203d; transform: translateY(-1px); box-shadow: 0 10px 22px -16px rgba(0,0,0,.9); }
.board-card[data-status="in_progress"], .board-card[data-status="completed"] { border-left-color: var(--line); }
.board-card[data-status="in_progress"] { box-shadow: inset 0 0 0 1px rgba(245,166,35,.12); }
.board-card.is-completed { opacity: .6; }
.board-card-title { font-size: .86rem; font-weight: 700; line-height: 1.35; color: var(--text); }
.board-card-footer { align-items: center; }
.board-card-comments, .board-card-media { font-size: .68rem; gap: .3rem; padding: .1rem .4rem; border-radius: 6px; background: #070c18; border: 1px solid var(--line); }
.board-card-top .pill { font-size: .6rem; padding: .1rem .45rem; border-radius: 6px; }
/* Changes column: timeline */
.bc-changes .board-column-list { gap: 0; }
.board-activity-row {
  position: relative; padding: .55rem .4rem .6rem 1.35rem; border: none !important; background: none !important; border-radius: 0 !important;
}
.board-activity-row::before { content: ""; position: absolute; left: .4rem; top: 0; bottom: 0; width: 1px; background: var(--line-strong); }
.board-activity-row::after { content: ""; position: absolute; left: calc(.4rem - 4px); top: .85rem; width: 9px; height: 9px; border-radius: 50%; background: #0a1122; border: 2px solid #ff7bc5; }
.board-activity-row.is-clickable:hover { background: rgba(255,255,255,.025) !important; border-radius: 8px !important; }
.board-activity-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.board-activity-time { font-family: var(--mono); font-size: .64rem; color: var(--dim); }
.board-activity-text { font-size: .8rem; color: var(--dim); line-height: 1.45; margin-top: .25rem; }
.board-activity-text strong { color: var(--text); }
.board-activity-item-title { color: var(--ice); font-weight: 700; }
.board-activity-detail { margin-top: .3rem; padding: .3rem .5rem; border-radius: 7px; background: var(--ink-2); border: 1px solid var(--line); font-size: .76rem; color: var(--dim); font-style: italic; }
.board-section-pill { font-size: .6rem !important; padding: .08rem .45rem !important; border-radius: 6px !important; }
/* Sidebar */
.bs-total { display: flex; align-items: baseline; gap: .45rem; margin: .55rem 0 .7rem; }
.bs-total strong { font-family: var(--display); font-weight: 900; font-size: 1.8rem; line-height: 1; }
.bs-total span { font-size: .8rem; color: var(--dim); }
.bs-total em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: .74rem; font-weight: 700; color: #5ee29a; }
.bs-split { display: flex; height: 8px; gap: 2px; border-radius: 999px; overflow: hidden; background: #070c18; margin-bottom: .75rem; }
.bs-split span { display: block; height: 100%; }
.bs-split .is-todo, .bs-dot-todo { background: #5d6b86 !important; }
.bs-split .is-progress, .bs-dot-progress { background: #f5a623 !important; }
.bs-split .is-done, .bs-dot-done { background: #5ee29a !important; }
.bs-bars { display: flex; flex-direction: column; gap: .7rem; margin-top: .6rem; }
.bs-bar-row { --c: #8a94ab; }
.bs-bar-row.is-high { --c: #ff5a5f; }
.bs-bar-row.is-medium { --c: #f5a623; }
.bs-bar-row.is-low { --c: #5d6b86; }
.bs-bar-row.is-smp { --c: #4fd18b; --bc: #4fd18b; }
.bs-bar-row.is-website { --c: #35d7ff; --bc: #35d7ff; }
.bs-bar-row.is-network { --c: #b98bff; --bc: #b98bff; }
.bs-bar-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; font-size: .82rem; color: var(--dim); }
.bs-bar-top > span { display: inline-flex; align-items: center; gap: .45rem; }
.bs-bar-top .bc-icon { width: 22px; height: 22px; border-radius: 7px; }
.bs-bar-top .bc-icon svg { width: 12px; height: 12px; }
.bs-bar-top strong { font-family: var(--mono); color: var(--text); font-size: .82rem; }
.bs-bar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.bs-bar { height: 6px; border-radius: 999px; background: #070c18; overflow: hidden; }
.bs-bar span { display: block; height: 100%; border-radius: inherit; background: var(--c); }

/* --- Board: new/edit item popup ----------------------------------------- */
.board-form-popup { max-width: 720px; padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: 92vh; }
.board-form-popup > form { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.1rem 1.3rem 0; gap: .45rem; }
.board-form-popup .board-form-section-label { margin: 1.1rem 0 .55rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line); font-size: .64rem; color: var(--ice); }
.board-form-popup > form > .board-form-section-label:first-of-type { margin-top: 0; }
.board-form-popup label { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.board-form-popup input[type="text"], .board-form-popup textarea, .board-form-popup .custom-select-trigger {
  background: #070c18; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--text);
}
.board-form-popup input[type="text"]:focus, .board-form-popup textarea:focus { outline: none; border-color: rgba(53,215,255,.6); box-shadow: 0 0 0 3px rgba(53,215,255,.12); }
#board-form-title-input { font-family: var(--display); font-weight: 800; font-size: 1.02rem; }
.board-form-popup textarea { resize: vertical; min-height: 130px; line-height: 1.6; }
.board-form-dropzone { border-radius: 12px; padding: 1.2rem 1rem; background: rgba(53,215,255,.025); }
.board-form-dropzone svg { color: var(--ice); opacity: .85; }
.board-form-file-chip { border-radius: 10px; background: #070c18; }
.bf-foot { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: .5rem; margin: 1.1rem -1.3rem 0; padding: .85rem 1.3rem; border-top: 1px solid var(--line); background: #0a1122; }
.bf-foot .tk-bulk-btn { height: 38px; }

/* --- Board: item detail popup -------------------------------------------- */
.board-detail-popup { padding: 1.6rem 1.8rem; background: linear-gradient(180deg, #0d1528, var(--ink-1) 160px); }
.board-detail-close-btn { top: 1.1rem; right: 1.1rem; border-radius: 10px; }
.board-detail-layout { gap: 1.6rem; }
.board-detail-comments, .board-detail-right { margin-top: 0; }
.board-detail-middle { display: flex; flex-direction: column; gap: .9rem; min-height: 0; }
.bd-kicker { font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ice); }
.bd-kicker-smp { color: #4fd18b; }
.bd-kicker-network { color: #b98bff; }
#board-detail-title { margin: -.4rem 0 0; font-family: var(--display); font-weight: 900; font-size: 1.6rem; line-height: 1.2; padding-right: 3rem; }
.board-detail-tags-row { flex-wrap: wrap; gap: .7rem; padding: .7rem .8rem; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); }
.board-status-picker { display: flex; gap: 3px; padding: 3px; border-radius: 11px; background: #070c18; border: 1px solid var(--line); }
.board-status-option { height: 32px; padding: 0 .8rem; border-radius: 8px; border: none; background: none; color: var(--dim); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.board-status-option:hover { color: var(--text); background: rgba(255,255,255,.04); }
.board-status-option.is-active[data-status="todo"] { color: var(--text); background: rgba(93,107,134,.35); box-shadow: inset 0 0 0 1px rgba(138,148,171,.5); }
.board-status-option.is-active[data-status="in_progress"] { color: #1a1205; background: #f5a623; }
.board-status-option.is-active[data-status="completed"] { color: #04140c; background: #5ee29a; }
.board-detail-actions .board-icon-btn { width: 34px; height: 34px; border-radius: 9px; }
.board-detail-description-box { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.1rem 1.2rem; border-radius: 14px; background: #070c18; border: 1px solid var(--line); }
.board-detail-description { font-size: .95rem; line-height: 1.7; }
.board-detail-comments { border-radius: 14px; padding: 1rem; }
.board-detail-section-label { font-size: .64rem; color: var(--ice); margin-bottom: .8rem; }
.board-detail-comment { border-radius: 12px; padding: .65rem .75rem; background: var(--ink-1); }
.board-detail-comment-author { color: var(--text); }
.board-detail-comment-composer { display: flex; align-items: flex-end; gap: .45rem; margin-top: .7rem; padding: 4px 4px 4px .7rem; border-radius: 12px; background: #070c18; border: 1px solid var(--line-strong); }
.board-detail-comment-composer:focus-within { border-color: rgba(53,215,255,.55); box-shadow: 0 0 0 3px rgba(53,215,255,.1); }
.board-detail-comment-composer textarea { flex: 1; min-width: 0; border: none !important; background: none !important; box-shadow: none !important; outline: none; resize: none; color: var(--text); font: inherit; font-size: .86rem; padding: .45rem 0; }
#board-detail-comment-submit { width: 34px; height: 34px; flex: none; padding: 0; border-radius: 9px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #35d7ff, #4d8fff); color: #04141c; }
#board-detail-comment-submit svg { width: 15px; height: 15px; }
.board-detail-right .ticket-sidebar-card { border-radius: 14px; }
.board-detail-media-box { border-radius: 12px; }
.board-detail-delete-confirm.us-row-confirm { display: inline-flex; }
.board-detail-delete-confirm.us-row-confirm[hidden] { display: none; }

/* --- Board: column view popup -------------------------------------------- */
.board-column-view-popup { border-radius: 18px; }
.board-column-view-popup .death-popup-head { padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.bcv-head-title { display: flex; align-items: center; gap: .8rem; }
.bcv-head-title .pr-pop-titles h3 { margin: 0; }
.bcv-search { margin-left: auto; flex: 0 1 300px; height: 42px; box-sizing: border-box; }
.bcv-search input { padding: 0; height: 100%; }
.board-column-view-main .log-filter-group { gap: .4rem; }
.board-column-view-main .custom-select-trigger { height: 42px; border-radius: 11px; background: var(--ink-2); }
.board-column-view-list .board-card { --bc: #35d7ff; }
.board-column-view-details .ticket-sidebar-card { border-radius: 14px; }
.board-detail-right { margin-top: 3.1rem; }
@media (max-width: 760px) { .board-detail-right { margin-top: 0; } }

/* ===== Board item popup (rebuilt on the shared pr-pop frame) =========== */
.bd-pop { --bc: #35d7ff; max-width: 1240px; height: min(860px, 92vh); }
.bd-pop[data-section="smp"] { --bc: #4fd18b; }
.bd-pop[data-section="network"] { --bc: #b98bff; }
.bd-head { background: linear-gradient(180deg, color-mix(in srgb, var(--bc) 12%, transparent), transparent); }
.bd-head-icon { color: var(--bc); background: color-mix(in srgb, var(--bc) 14%, transparent); border-color: color-mix(in srgb, var(--bc) 40%, transparent); }
.bd-pop .bd-kicker { color: var(--bc); }
.bd-pop #board-detail-title { margin: 0; padding: 0; font-size: 1.3rem; white-space: normal; overflow: visible; line-height: 1.25; }
.bd-head-actions { display: flex; align-items: center; gap: .45rem; flex: none; align-self: flex-start; }
.bd-head-actions .board-detail-actions { display: flex; align-items: center; gap: .4rem; }
.bd-head-actions .board-detail-actions[hidden] { display: none; }
.bd-edit-btn { height: 34px; }
.bd-delete-btn { opacity: 1; width: 34px; height: 34px; border: 1px solid var(--line); background: var(--ink-2); }
.bd-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 380px; }
.bd-main { display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem 1.3rem; min-height: 0; overflow-y: auto; }
.bd-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem 1.2rem; padding: .75rem .9rem; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); }
.bd-strip-group { display: flex; align-items: center; gap: .6rem; }
.bd-strip-label { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.bd-pop .board-detail-tags { display: flex; gap: .35rem; }
.bd-pop .board-status-option { display: inline-flex; align-items: center; gap: .4rem; }
.bd-status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
.bd-pop .board-status-option[data-status="todo"] .bd-status-dot { background: #8a94ab; }
.bd-pop .board-status-option[data-status="in_progress"] .bd-status-dot { background: #f5a623; }
.bd-pop .board-status-option[data-status="completed"] .bd-status-dot { background: #5ee29a; }
.bd-pop .board-status-option.is-active .bd-status-dot { background: currentColor; opacity: 1; }
.bd-section { display: flex; flex-direction: column; gap: .5rem; }
.bd-pop .board-detail-description-box { flex: none; min-height: 120px; max-height: none; padding: 1rem 1.15rem; border-radius: 14px; background: #070c18; border: 1px solid var(--line); }
.bd-pop .board-detail-description { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .94rem; line-height: 1.7; color: var(--text); }
.bd-pop .board-detail-media-box { aspect-ratio: auto; min-height: 110px; border-radius: 14px; background: #070c18; }
.bd-pop .board-detail-media-box.has-files { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); padding: .7rem; }
.bd-pop .board-detail-media-tile { border-radius: 10px; }
.bd-details { flex: none; }
.bd-comments { display: flex; flex-direction: column; min-height: 0; padding: 1.2rem 1.1rem 1rem; border-left: 1px solid var(--line); background: rgba(255,255,255,.012); }
.bd-comments-head { margin-bottom: .7rem; }
.bd-pop .board-detail-comments-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; padding-right: .2rem; }
.bd-pop .board-detail-comments-empty { color: var(--dim); }
.bd-pop .board-detail-comment { flex: none; padding: .65rem .75rem; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); }
.bd-pop .board-detail-comment-meta { font-family: var(--mono); font-size: .64rem; }
.bd-pop .board-detail-comment-author { color: var(--bc); font-weight: 800; }
.bd-pop .board-detail-comment-body { font-size: .86rem; line-height: 1.55; }
.bd-pop .board-detail-comment-composer { flex: none; margin-top: .8rem; }
@media (max-width: 900px) {
  .bd-body { grid-template-columns: 1fr; overflow-y: auto; }
  .bd-comments { border-left: none; border-top: 1px solid var(--line); min-height: 360px; }
  .bd-pop { height: 94vh; }
}

/* ===== Board column view popup (rebuilt) ================================ */
.bcv-pop { max-width: 1240px; height: min(860px, 92vh); }
.bcv-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.bcv-pop .board-column-view-main { display: flex; flex-direction: column; gap: .9rem; padding: 1.1rem 1.3rem; min-height: 0; }
.bcv-toolbar { flex: none; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.bcv-toolbar .lg-filters .custom-select { min-width: 160px; }
.bcv-pop .bcv-search { margin-left: auto; flex: 0 1 300px; height: 46px; }
.bcv-pop .board-column-view-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; gap: .5rem; padding-right: .3rem; }
.bcv-pop .board-column-view-list .board-card { padding: .8rem .9rem .75rem 1.05rem; }
.bcv-pop .board-column-view-list .board-card-title { font-size: .92rem; }
.bcv-pop .board-column-view-details { padding: 1.1rem 1.1rem; border-left: 1px solid var(--line); background: rgba(255,255,255,.012); gap: .7rem; }
.bcv-pop .board-column-view-details .ticket-sidebar-card { padding: .9rem 1rem; border-radius: 14px; background: var(--ink-2); }
.bcv-pop .board-column-view-details .admin-sidebar-divider { margin: .55rem 0; }
.bcv-pop .board-column-view-details .ticket-detail-row { padding: .3rem 0; }
.bcv-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.3rem; border-top: 1px solid var(--line); background: #0a1122; }
.bcv-foot .pagination-goto { margin-left: .2rem; }
@media (max-width: 900px) {
  .bcv-body { grid-template-columns: 1fr; overflow-y: auto; }
  .bcv-pop .board-column-view-details { border-left: none; border-top: 1px solid var(--line); }
}
.bcv-pop .board-column-view-details .ticket-detail-row { padding: .15rem 0; margin: 0; min-height: 0; }
.bcv-pop .board-column-view-details .pill { font-size: .66rem; padding: .12rem .5rem; }
.bcv-pop .board-column-view-details .ticket-sidebar-card { gap: .35rem; }

/* ===== Teams page rework ================================================ */
.tm-sort .custom-select { min-width: 210px; }
.tm-tile { gap: .8rem; border-radius: 16px; border-top-width: 1px; border-top-color: var(--line); position: relative; overflow: hidden; padding: 1rem 1rem .85rem; }
.tm-tile::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, hsl(var(--team-hue, 200) 75% 55%), hsl(calc(var(--team-hue, 200) + 40) 70% 45%)); }
.tm-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at top left, hsl(var(--team-hue, 200) 80% 55% / .1), transparent 55%); }
.tm-tile > * { position: relative; z-index: 1; }
.tm-tile-head { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.tm-tile-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.tm-name { font-family: var(--display); font-weight: 900; font-size: 1.08rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-owner { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--dim); min-width: 0; }
.tm-owner img { width: 16px; height: 16px; border-radius: 4px; image-rendering: pixelated; }
.tm-owner-tag { font-family: var(--mono); font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .02rem .35rem; border-radius: 5px; color: #f5c451; background: rgba(245,196,81,.1); border: 1px solid rgba(245,196,81,.35); }
.tm-discord { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .5rem; border-radius: 999px; font-size: .66rem; font-weight: 800; color: #9aa3ff; background: rgba(88,101,242,.14); border: 1px solid rgba(88,101,242,.4); }
.tm-discord svg { width: 12px; height: 12px; }
.tm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 12px; background: #070c18; border: 1px solid var(--line); }
.tm-stat { display: flex; flex-direction: column; align-items: center; gap: .05rem; padding: .5rem .2rem; text-align: center; min-width: 0; }
.tm-stat + .tm-stat { border-left: 1px solid var(--line); }
.tm-stat .v { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--display); font-weight: 900; font-size: 1.05rem; color: var(--text); line-height: 1.2; }
.tm-stat .k { font-size: .6rem; font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tm-stat.is-online .v { color: #5ee29a; }
.tm-stat.is-alive .v { color: #7ee8ff; }
.tm-stat.is-dead .v { color: #ff7b7f; }
.tm-live { width: 7px; height: 7px; border-radius: 50%; background: #5ee29a; box-shadow: 0 0 8px #5ee29a; animation: pulse-dot 1.6s ease-in-out infinite; }
.tm-heads { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-content: center; gap: .3rem; min-height: 36px; }
.tm-head { position: relative; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--ink-1); }
.tm-head img { width: 100%; height: 100%; border-radius: 7px; image-rendering: pixelated; display: block; }
.tm-head.is-online::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%; background: #5ee29a; border: 2px solid var(--ink-2); }
.tm-head.is-eliminated img { filter: grayscale(1) brightness(.7); }
.tm-head.is-eliminated { border-color: rgba(255,90,95,.4); }
.tm-heads-more { min-width: 32px; height: 32px; padding: 0 .35rem; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #070c18; border: 1px solid var(--line); color: var(--dim); font-size: .72rem; font-weight: 800; }
.tm-foot { display: flex; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .65rem; border-top: 1px solid var(--line); font-size: .7rem; color: var(--dim); }
.tm-foot span { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-foot svg { width: 12px; height: 12px; flex: none; opacity: .8; }
.teams-card .tm-tile .team-badge { width: 44px; height: 44px; }
/* Sidebar */
.tm-overview { margin-bottom: .75rem; }
.tm-linked { padding: .65rem .75rem; border-radius: 11px; background: var(--ink-2); border: 1px solid var(--line); }
.tm-linked-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .45rem; font-size: .8rem; color: var(--dim); }
.tm-linked-top > span { display: inline-flex; align-items: center; gap: .45rem; }
.tm-linked-icon { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: #9aa3ff; background: rgba(88,101,242,.16); }
.tm-linked-icon svg { width: 13px; height: 13px; }
.tm-linked-top strong { font-family: var(--mono); color: var(--text); font-size: .8rem; }
.tm-rank-list { display: flex; flex-direction: column; gap: .25rem; margin-top: .45rem; }
.tm-rank-row { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .45rem; border-radius: 10px; border: 1px solid transparent; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tm-rank-row:hover { background: rgba(255,255,255,.03); border-color: var(--line); }
.tm-rank-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.tm-rank-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tm-rank-name { font-weight: 800; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-rank-count { font-family: var(--mono); font-size: .76rem; color: var(--text); }
.tm-rank-bar { height: 4px; border-radius: 999px; background: #070c18; overflow: hidden; }
.tm-rank-bar span { display: block; height: 100%; border-radius: inherit; background: hsl(var(--team-hue, 200) 70% 55%); }

/* ===== Team popup (pr-pop frame) ======================================== */
.tm-pop { max-width: 1160px; height: min(820px, 92vh); }
.tm-pop-head { background: linear-gradient(180deg, hsl(var(--team-hue, 200) 70% 50% / .16), transparent); padding: 1.2rem 1.3rem; }
.tm-pop-head .team-badge.is-large { width: 58px; height: 58px; border-radius: 15px; font-size: 1.5rem; }
.tm-pop-kicker { color: hsl(var(--team-hue, 200) 80% 70%); }
.tm-pop #team-detail-title { font-size: 1.4rem; white-space: normal; }
.tm-pop-sub { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--dim); margin-top: .15rem; }
.tm-pop-sub img { width: 18px; height: 18px; border-radius: 5px; image-rendering: pixelated; }
.tm-pop-head > .ticket-sidebar-toggle { align-self: flex-start; }
.tm-pop-stats { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 1rem 1.3rem 0; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); }
.tm-pop-stats .tm-stat { padding: .65rem .3rem; }
.tm-pop-stats .tm-stat .v { font-size: 1.25rem; }
.tm-stat-discord .v { font-size: .9rem !important; color: var(--dim); padding: .18rem 0; }
.tm-stat-discord.is-linked .v { color: #9aa3ff; }
.tm-pop-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 1rem; padding: 1rem 1.3rem 1.2rem; }
.tm-pop-col { display: flex; flex-direction: column; min-height: 0; }
.tm-pop-col-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; flex: none; }
.tm-pop-count { min-width: 20px; padding: 0 .4rem; border-radius: 999px; text-align: center; font-family: var(--mono); font-size: .66rem; font-weight: 700; color: var(--text); background: var(--ink-2); border: 1px solid var(--line); }
.tm-pop-count:empty { display: none; }
.tm-member-list { gap: .35rem; padding-right: .2rem; }
.tm-pop .team-member { border-radius: 12px; padding: .55rem .65rem; }
.tm-pop .team-member:hover { border-color: var(--line-strong); }
.tm-chat { border-radius: 14px; background: #070c18; padding: .9rem 1rem; }
.tm-pop .team-chat-bubble { border-radius: 4px 14px 14px 14px; background: var(--ink-2); border-left-width: 1px; border-left-color: var(--line); box-shadow: inset 3px 0 0 #5ee29a; }
.tm-pop .team-chat-bubble.is-discord { box-shadow: inset 3px 0 0 #5865f2; }
.tm-pop .team-chat-avatar { border-radius: 10px; }
@media (max-width: 900px) {
  .tm-pop-body { grid-template-columns: 1fr; overflow-y: auto; }
  .tm-pop-stats { grid-template-columns: repeat(3, 1fr); }
  .tm-member-list, .tm-chat { max-height: 340px; flex: none; }
}
.tm-pop .team-chat-bubble { border-radius: 14px; }

/* ===== Chat page rework ================================================== */
.ch-card { gap: .9rem; }
.ch-tab .cs-server-icon svg { width: 14px; height: 14px; }
.ch-tab.is-active .cs-server-icon { color: var(--ice); }
.ch-box { border-radius: 14px; background: #060a14; border-color: var(--line-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 18px 40px -28px rgba(0,0,0,.9); }
.ch-bar { flex: none; display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .55rem .6rem .55rem .85rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #0d1528, #0a1122); }
.ch-status { padding: .25rem .65rem; border-radius: 999px; border: 1px solid var(--line-strong); font-weight: 700; font-size: .7rem; }
.ch-status.is-green { color: #5ee29a; border-color: rgba(94,226,154,.4); background: rgba(94,226,154,.07); }
.ch-status.is-yellow { color: #f5a623; border-color: rgba(245,166,35,.4); background: rgba(245,166,35,.06); }
.ch-status.is-red { color: #ff7b7f; border-color: rgba(255,90,95,.4); background: rgba(255,90,95,.06); }
.ch-channel { font-family: var(--mono); font-size: .76rem; font-weight: 700; color: var(--text); }
.ch-hash { color: var(--ice); margin-right: .1rem; }
.ch-sources { margin-left: auto; }
.ch-src-game .cs-level-dot { background: #5ee29a; }
.ch-src-discord .cs-level-dot { background: #8b97ff; }
.ch-src-web .cs-level-dot { background: #35d7ff; }
.ch-src-system .cs-level-dot { background: #f5a623; }
.ch-search-status { flex: none; margin: 0; padding: .45rem .9rem; font-size: .76rem; color: var(--ice); background: rgba(53,215,255,.06); border-bottom: 1px solid var(--line); }
.ch-search-status[hidden] { display: none; }
.ch-thread-wrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.chat-card .ch-thread { padding: .6rem 1rem 1rem; gap: .2rem; }
.chat-card .chat-msg-row[hidden] { display: none; }
.chat-card .chat-msg-row { margin-top: .55rem; }
.chat-card .chat-msg-avatar, .chat-card .chat-msg-avatar-spacer { width: 38px; height: 38px; border-radius: 11px; }
.chat-card .chat-msg-avatar-spacer { height: 0; }
.chat-card .chat-msg-avatar-discord { background: #5865f2; display: flex; align-items: center; justify-content: center; }
.chat-card .chat-msg-avatar-system { background: #3a4150; display: flex; align-items: center; justify-content: center; }
/* Bubbles: fully rounded, tinted by source */
.chat-card .chat-bubble { --src: #5ee29a; border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 16px; padding: .55rem .85rem .6rem; background: linear-gradient(180deg, color-mix(in srgb, var(--src) 6%, var(--ink-2)), var(--ink-2)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--src) 70%, transparent); }
.chat-card .chat-bubble-discord { --src: #8b97ff; }
.chat-card .chat-bubble-web { --src: #35d7ff; }
.chat-card .chat-msg-row.is-grouped .chat-bubble { margin-top: -.25rem; }
.chat-card .chat-msg-author { font-weight: 800; color: color-mix(in srgb, var(--src, #fff) 35%, #fff); }
.chat-card .chat-msg-time { font-size: .64rem; }
.chat-card .chat-msg-text { font-size: .92rem; line-height: 1.5; }
/* Event rows: joins / leaves / announcements */
.ch-event { align-items: center !important; gap: .55rem !important; margin-top: .35rem !important; padding: .3rem .6rem !important; border-radius: 10px; font-size: .8rem; color: var(--dim); }
.ch-event-icon { width: 22px; height: 22px; flex: none; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.ch-event-icon svg { width: 13px; height: 13px; }
.ch-event-head { width: 20px; height: 20px; border-radius: 5px; image-rendering: pixelated; flex: none; }
.ch-event-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ch-event-time { flex: none; font-family: var(--mono); font-size: .64rem; color: var(--dim); opacity: .8; }
.ch-event.is-join .ch-event-icon { color: #5ee29a; background: rgba(94,226,154,.12); }
.ch-event.is-leave .ch-event-icon { color: #ff7b7f; background: rgba(255,90,95,.1); }
.ch-event.is-system { margin: .6rem 0 .2rem !important; padding: .6rem .8rem !important; border-radius: 12px; background: linear-gradient(90deg, rgba(245,166,35,.1), rgba(245,166,35,.02)); border: 1px solid rgba(245,166,35,.3); color: var(--text); font-size: .86rem; }
.ch-event.is-system .ch-event-icon { width: 28px; height: 28px; border-radius: 9px; background: rgba(245,166,35,.18); }
.ch-event.is-system .ch-event-icon svg { width: 15px; height: 15px; stroke: #f5a623; }
.chat-card .chat-day-separator { margin: 1rem 0 .3rem; }
.chat-card .chat-day-separator span { padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-2); color: var(--text); font-size: .62rem; }
.ch-jump { bottom: 1rem; }
/* Composer */
.ch-composer { gap: .55rem; padding: .55rem .6rem .55rem .7rem; background: #0a1122; }
.ch-composer:focus-within { box-shadow: inset 0 2px 0 rgba(53,215,255,.5); }
.ch-sender { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem .25rem .25rem; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line); font-size: .76rem; font-weight: 700; color: var(--text); }
.ch-sender .chat-composer-avatar { width: 24px; height: 24px; border-radius: 50%; }
.ch-composer input { height: 40px; border-radius: 11px; background: #070c18; border-color: var(--line-strong); font-size: .9rem; }
.ch-composer input:focus { outline: none; border-color: rgba(53,215,255,.6); box-shadow: 0 0 0 3px rgba(53,215,255,.12); }
.ch-count { flex: none; font-family: var(--mono); font-size: .66rem; color: #4d6a93; }
.ch-count.is-near { color: #f5a623; }
.ch-composer .cs-send-btn { height: 40px; }
.ch-composer.is-locked { display: flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem; font-size: .82rem; color: var(--dim); }
.ch-composer.is-locked svg { width: 16px; height: 16px; color: var(--ice); }
/* Sidebar */
.ch-online-card { display: flex; flex-direction: column; }
/* Players online: hero like the console's "Online now", tinted by connection state (--oc) */
.ch-online-hero { --oc: #5ee29a; display: flex; flex-direction: column; gap: .7rem; padding: .85rem .9rem; margin-bottom: .7rem; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--oc) 14%, transparent), color-mix(in srgb, var(--oc) 3%, transparent)); border: 1px solid color-mix(in srgb, var(--oc) 35%, transparent); }
.ch-online-hero.is-yellow { --oc: #f5a623; }
.ch-online-hero.is-red { --oc: #ff5a5f; }
.ch-online-head { display: flex; align-items: center; gap: .75rem; }
.ch-online-icon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; color: var(--oc); background: color-mix(in srgb, var(--oc) 15%, transparent); }
.ch-online-icon svg { width: 19px; height: 19px; }
.ch-online-text { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ch-online-label { font-size: .86rem; font-weight: 800; color: var(--text); }
.ch-online-sub { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; color: var(--dim); }
.ch-online-sub .status-dot { width: 7px; height: 7px; }
.ch-online-figure { display: flex; align-items: baseline; gap: .2rem; flex: none; }
.ch-online-num { font-family: var(--display); font-weight: 900; font-size: 2rem; line-height: 1; color: var(--oc); }
.ch-online-max { font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--dim); }
.ch-online-bar { height: 5px; border-radius: 999px; background: rgba(7,12,24,.7); overflow: hidden; }
.ch-online-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--oc); box-shadow: 0 0 8px color-mix(in srgb, var(--oc) 60%, transparent); transition: width .4s ease; }
.ch-online-filter { display: flex; align-items: center; gap: .45rem; height: 34px; padding: 0 .65rem; margin-bottom: .55rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line); color: var(--dim); }
.ch-online-filter[hidden] { display: none; }
.ch-online-filter:focus-within { border-color: rgba(53,215,255,.45); }
.ch-online-filter svg { width: 14px; height: 14px; flex: none; }
.ch-online-filter input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font: inherit; font-size: .8rem; }
.ch-online-list { gap: .15rem; }
.ch-online-list .chat-online-row { border-radius: 11px; padding: .45rem .55rem; gap: .7rem; transition: background .12s ease, border-color .12s ease; }
.ch-online-list .chat-online-row[hidden] { display: none; }
.ch-online-face { position: relative; flex: none; display: inline-flex; }
.ch-online-face::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: #5ee29a; border: 2px solid var(--ink-1); }
.chat-online-row.is-vanished .ch-online-face::after { background: #8d97ad; }
.ch-online-list .chat-online-avatar { width: 34px; height: 34px; border-radius: 9px; }
.ch-online-list .chat-online-nick { font-size: .7rem; }
.ch-online-go { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--dim); opacity: 0; transition: opacity .12s ease, color .12s ease, background .12s ease; }
.ch-online-go svg { width: 13px; height: 13px; }
.chat-online-row:hover .ch-online-go, .chat-online-row:focus-visible .ch-online-go { opacity: 1; color: var(--ice); background: rgba(53,215,255,.1); }
.ch-online-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: .4rem .35rem; padding: 1.4rem .8rem; border-radius: 12px; border: 1px dashed var(--line); text-align: center; }
.ch-online-empty svg { width: 22px; height: 22px; color: var(--dim); opacity: .7; }
.ch-activity-card { flex: none; }
.ch-activity-total { display: flex; align-items: baseline; gap: .45rem; margin: .5rem 0 .2rem; }
.ch-activity-total strong { font-family: var(--display); font-weight: 900; font-size: 1.6rem; line-height: 1; }
.ch-activity-total span { font-size: .78rem; color: var(--dim); }
.bs-bar-row.ch-act-game { --c: #5ee29a; }
.bs-bar-row.ch-act-discord { --c: #8b97ff; }
.bs-bar-row.ch-act-web { --c: #35d7ff; }
.bs-bar-row.ch-act-system { --c: #f5a623; }
@media (max-width: 900px) { .ch-sources { margin-left: 0; } .ch-count, .ch-sender span { display: none; } }

/* Chat: delete messages (hover button + inline confirm) */
.ch-del { flex: none; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: var(--ink-1); border: 1px solid var(--line-strong); color: var(--dim); opacity: 0; transition: opacity .12s ease, color .12s ease, border-color .12s ease; }
.ch-del svg { width: 13px; height: 13px; }
.chat-msg-row:hover .ch-del, .ch-del:focus-visible { opacity: 1; }
.ch-del:hover { color: #ff7b7f; border-color: rgba(255,90,95,.55); background: rgba(255,90,95,.1); }
.chat-card .chat-bubble { position: relative; }
.chat-card .chat-bubble > .ch-del, .chat-card .chat-bubble > .ch-del-confirm { position: absolute; top: -10px; right: -10px; box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.ch-event > .ch-del { margin-left: .2rem; }
.ch-del-confirm { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .25rem .2rem .55rem; border-radius: 999px; background: #1a0f14; border: 1px solid rgba(255,90,95,.5); font-size: .7rem; font-weight: 800; color: #ff9a9d; white-space: nowrap; z-index: 2; }
.ch-del-confirm button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--ink-1); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ch-del-confirm button svg { width: 11px; height: 11px; }
.ch-del-confirm .ch-del-yes { background: #ff5a5f; border-color: #ff5a5f; color: #fff; }
.chat-msg-row.is-confirming .chat-bubble { border-color: rgba(255,90,95,.5); box-shadow: inset 3px 0 0 #ff5a5f; }
.chat-msg-row.is-confirming.ch-event { background: rgba(255,90,95,.06); }
.ch-search-status { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.ch-search-status[hidden] { display: none; }
.ch-search-status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-search-back { flex: none; display: inline-flex; align-items: center; gap: .35rem; height: 28px; padding: 0 .7rem; border-radius: 999px; cursor: pointer; border: 1px solid rgba(53,215,255,.45); background: rgba(53,215,255,.12); color: var(--ice); font: inherit; font-size: .74rem; font-weight: 800; }
.ch-search-back svg { width: 12px; height: 12px; }
.ch-search-back:hover { background: rgba(53,215,255,.22); }
.ch-event-name { color: var(--text); font-weight: 800; }

/* ==========================================================================
   Ticket chat attachments + shared death info (player + admin ticket views)
   Markup: partials/ticketAttachments.ejs + public/ticketAttachments.js,
   partials/deathInfoShareCard.ejs.
   ========================================================================== */
.ta-list { display: flex; flex-direction: column; gap: .5rem; margin: .35rem 0 .45rem; min-width: 0; }
html.ta-lock { overflow: hidden; }

/* images */
.ta-images { display: grid; gap: .35rem; width: 340px; max-width: 100%; }
.ta-images.ta-n-1 { grid-template-columns: 1fr; }
.ta-images.ta-n-2, .ta-images.ta-n-3, .ta-images.ta-n-4 { grid-template-columns: 1fr 1fr; }
.ta-images.ta-n-3 .ta-img:first-child { grid-column: 1 / -1; }
.ta-img {
  position: relative; display: block; overflow: hidden; border-radius: 12px;
  background: var(--ink-0); border: 1px solid var(--line-strong); cursor: zoom-in;
}
.ta-images.ta-n-1 .ta-img img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; }
.ta-images:not(.ta-n-1) .ta-img { aspect-ratio: 4 / 3; }
.ta-images:not(.ta-n-1) .ta-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ta-img img { transition: transform .25s ease, filter .25s ease; }
.ta-img-zoom {
  position: absolute; right: .45rem; bottom: .45rem; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; color: #fff; background: rgba(5,7,13,.7); border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease;
}
.ta-img-zoom svg { width: 14px; height: 14px; }
.ta-img:hover img { transform: scale(1.03); filter: brightness(1.08); }
.ta-img:hover .ta-img-zoom, .ta-img:focus-visible .ta-img-zoom { opacity: 1; transform: none; }

/* file cards */
.ta-file {
  --k: var(--ice);
  width: 380px; max-width: 100%; border-radius: 12px; overflow: hidden;
  background: var(--ink-0); border: 1px solid var(--line-strong);
}
.ta-k-log { --k: #f5a623; }
.ta-k-pdf { --k: #ff5a5f; }
.ta-k-zip { --k: #b98bff; }
.ta-file-head { display: flex; align-items: center; gap: .65rem; padding: .55rem .5rem .55rem .6rem; }
.ta-file-ico {
  width: 34px; height: 34px; flex: none; border-radius: 9px; display: grid; place-items: center; color: var(--k);
  background: color-mix(in srgb, var(--k) 12%, var(--ink-2)); border: 1px solid color-mix(in srgb, var(--k) 32%, transparent);
}
.ta-file-ico svg { width: 17px; height: 17px; }
.ta-file-info { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.ta-file-info b { font-size: .84rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-file-info span { font-family: var(--mono); font-size: .64rem; letter-spacing: .04em; color: #8794ae; }
.ta-btn {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 8px; cursor: pointer;
  color: var(--dim); background: transparent; border: 1px solid transparent; text-decoration: none; padding: 0;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.ta-btn svg { width: 15px; height: 15px; }
.ta-btn:hover { color: var(--ice); background: var(--ink-2); border-color: var(--line-strong); }
.ta-text-preview {
  position: relative; display: block; width: 100%; text-align: left; cursor: pointer; padding: 0; margin: 0;
  background: #070b16; border: 0; border-top: 1px solid var(--line); font: inherit; color: inherit;
}
.ta-lines { display: block; padding: .45rem 0; font-family: var(--mono); font-size: .7rem; line-height: 1.55; }
.ta-ln { display: flex; min-width: 0; padding-right: .7rem; }
.ta-ln i {
  flex: none; width: 2.6em; padding-right: .7em; text-align: right; font-style: normal; color: #44547a;
  user-select: none; -webkit-user-select: none;
}
.ta-ln .ta-tx { min-width: 0; flex: 1; white-space: pre; overflow: hidden; text-overflow: ellipsis; color: #c5cee0; }
.ta-ln.is-err .ta-tx { color: #ff8a8d; }
.ta-ln.is-warn .ta-tx { color: #ffcf7a; }
.ta-ln.is-err i { color: #a8484c; }
.ta-ln.is-warn i { color: #9a7a3a; }
.ta-loading { display: block; padding: .3rem .8rem; color: var(--dim); font-family: var(--body); font-size: .78rem; }
.ta-preview-open {
  position: absolute; inset: auto 0 0 0; height: 46px; display: flex; align-items: flex-end; justify-content: center; gap: .35rem;
  padding-bottom: .4rem; font-size: .72rem; font-weight: 700; color: var(--ice);
  background: linear-gradient(180deg, transparent, #070b16 70%); opacity: 0; transition: opacity .15s ease;
}
.ta-preview-open svg { width: 12px; height: 12px; }
.ta-text.has-more .ta-preview-open { opacity: .9; }
.ta-text-preview:hover .ta-preview-open { opacity: 1; }
.ta-text-preview:hover .ta-lines { background: rgba(126,232,255,.03); }

/* overlay + text viewer */
.ta-overlay {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.25rem 2rem;
  background: rgba(3,5,10,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: ta-fade .15s ease-out;
}
.ta-overlay[hidden] { display: none; }
.ta-lightbox { z-index: 220; }
@keyframes ta-fade { from { opacity: 0; } to { opacity: 1; } }
.ta-viewer {
  --k: var(--ice);
  width: min(1600px, 100%); height: min(90vh, 1100px); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #0d1630, var(--ink-1) 140px);
  box-shadow: 0 40px 90px -20px rgba(0,0,0,.85);
}
.ta-viewer.ta-k-log { --k: #f5a623; }
.ta-viewer-head { display: flex; align-items: center; gap: .85rem; padding: 1rem 1rem .85rem 1.1rem; }
.ta-viewer-head .ta-file-ico { width: 44px; height: 44px; border-radius: 12px; }
.ta-viewer-head .ta-file-ico svg { width: 21px; height: 21px; }
.ta-viewer-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.ta-kicker { font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--k); }
.ta-viewer-title h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-viewer-meta { font-family: var(--mono); font-size: .7rem; color: #8794ae; }
.ta-close { width: 36px; height: 36px; border-color: var(--line-strong); background: var(--ink-2); }
.ta-viewer-tools { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: 0 1rem .85rem 1.1rem; border-bottom: 1px solid var(--line); }
.ta-search { position: relative; display: flex; align-items: center; flex: 1 1 240px; min-width: 0; }
.ta-search > svg { position: absolute; left: .7rem; width: 15px; height: 15px; color: #6f7b94; pointer-events: none; }
.ta-search input {
  width: 100%; padding: .55rem 4.5rem .55rem 2.1rem; border-radius: 10px; font: 500 .84rem var(--body); color: var(--text);
  background: var(--ink-0); border: 1px solid var(--line-strong); transition: border-color .15s ease, box-shadow .15s ease;
}
.ta-search input:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(126,232,255,.12); }
.ta-search-count { position: absolute; right: .7rem; font-family: var(--mono); font-size: .66rem; color: #8794ae; pointer-events: none; }
.ta-tool {
  display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .75rem; border-radius: 10px; cursor: pointer;
  font: 700 .8rem var(--body); color: var(--text); text-decoration: none; background: var(--ink-2); border: 1px solid var(--line-strong);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ta-tool svg { width: 14px; height: 14px; color: var(--ice); }
.ta-tool:hover { border-color: var(--ice); }
.ta-tool[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, var(--ink-2)); border-color: rgba(53,215,255,.55); }
.ta-tool[data-act="problems"] svg { color: #ffcf7a; }
.ta-tool[data-act="problems"][aria-pressed="true"] { background: rgba(245,166,35,.12); border-color: rgba(245,166,35,.55); }
.ta-tool-n { font-family: var(--mono); font-size: .64rem; padding: .08rem .38rem; border-radius: 6px; background: rgba(245,166,35,.15); color: #ffcf7a; }
.ta-tool[hidden] { display: none; }
.ta-viewer-body { flex: 1; min-height: 0; overflow: auto; background: #070b16; }
.ta-code { padding: .7rem 0 1.2rem; font-family: var(--mono); font-size: .76rem; line-height: 1.6; min-width: max-content; }
.ta-code .ta-ln { padding-right: 1.2rem; }
.ta-code .ta-ln i { width: 4.2em; padding-right: 1em; position: sticky; left: 0; background: #070b16; border-right: 1px solid var(--line); margin-right: .9em; }
.ta-code .ta-ln .ta-tx { overflow: visible; text-overflow: clip; }
.ta-code .ta-ln:hover { background: rgba(126,232,255,.04); }
.ta-code.is-wrap { min-width: 0; }
.ta-code.is-wrap .ta-ln .ta-tx { white-space: pre-wrap; word-break: break-word; }
.ta-code.is-problems .ta-ln:not(.is-err):not(.is-warn) { display: none; }
.ta-code.is-searching .ta-ln:not(.is-match) .ta-tx { opacity: .45; }
.ta-ln.is-err { background: rgba(255,90,95,.05); }
.ta-ln.is-warn { background: rgba(245,166,35,.04); }
.ta-ln mark { background: rgba(255,210,77,.28); color: #fff; border-radius: 3px; padding: 0 1px; }
.ta-ln.is-current { background: rgba(53,215,255,.12); box-shadow: inset 3px 0 0 var(--accent); }
.ta-ln.is-current mark { background: #ffd24d; color: #1a1300; }
.ta-viewer-foot { padding: .65rem 1.1rem; border-top: 1px solid var(--line); font-size: .76rem; color: var(--dim); }

/* image lightbox */
.ta-lightbox { flex-direction: column; padding: 0; background: rgba(3,5,10,.92); }
.ta-lb-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; background: linear-gradient(180deg, rgba(3,5,10,.85), transparent);
}
.ta-lb-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ta-lb-info b { color: #fff; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-lb-info span { font-family: var(--mono); font-size: .7rem; color: #9aa6c0; }
.ta-lb-actions { display: flex; gap: .35rem; }
.ta-lightbox .ta-btn { width: 38px; height: 38px; color: #dfe6f3; background: rgba(16,26,51,.75); border-color: rgba(255,255,255,.12); }
.ta-lightbox .ta-btn:hover { color: #fff; border-color: var(--ice); }
.ta-lb-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 4.5rem 4.5rem 2rem; box-sizing: border-box; }
.ta-lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); animation: ta-fade .2s ease-out; }
.ta-lb-nav {
  position: absolute; top: 50%; z-index: 2; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(16,26,51,.75); border: 1px solid rgba(255,255,255,.14);
  transition: background-color .15s ease, border-color .15s ease;
}
.ta-lb-nav svg { width: 20px; height: 20px; }
.ta-lb-nav:hover { border-color: var(--ice); background: rgba(16,26,51,.95); }
.ta-lb-nav.is-prev { left: 1rem; }
.ta-lb-nav.is-next { right: 1rem; }
.ta-lb-nav[hidden] { display: none; }

/* shared death info card ("death report") */
.di-card {
  width: 400px; max-width: 100%; display: flex; flex-direction: column; margin: .25rem 0 .45rem; overflow: hidden;
  border-radius: 14px; border: 1px solid rgba(255,90,95,.32); background: var(--ink-0);
  box-shadow: 0 18px 40px -26px rgba(255,40,50,.55);
}
.di-banner {
  position: relative; display: flex; align-items: center; gap: .85rem; padding: .95rem 1rem;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,90,95,.28), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #2a0d13, #12090f);
  border-bottom: 1px solid rgba(255,90,95,.25);
}
.di-avatar { position: relative; width: 52px; height: 52px; flex: none; }
.di-avatar img { width: 100%; height: 100%; display: block; border-radius: 12px; image-rendering: pixelated; filter: grayscale(.55) brightness(.85); border: 1px solid rgba(255,90,95,.45); }
.di-avatar-x {
  position: absolute; right: -5px; bottom: -5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: #e6262b; border: 2px solid #1a0a0f;
}
.di-avatar-x svg { width: 10px; height: 10px; }
.di-title { display: flex; flex-direction: column; min-width: 0; gap: .12rem; line-height: 1.2; }
.di-kicker { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--mono); font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #ff8a8d; }
.di-kicker svg { width: 12px; height: 12px; }
.di-title b { font-family: var(--display); font-weight: 800; font-size: 1.15rem; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.di-time { font-size: .74rem; color: #c9a9ad; }
.di-time .sep { color: rgba(255,138,141,.45); }
.di-cause { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.di-cause-ico { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; color: #ff8a8d; background: rgba(255,90,95,.1); border: 1px solid rgba(255,90,95,.3); }
.di-cause-ico svg { width: 16px; height: 16px; }
.di-cause .k, .di-section { display: block; font-family: var(--mono); font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8794ae; }
.di-cause p { margin: .15rem 0 0; font-size: .95rem; font-weight: 700; color: var(--text); line-height: 1.35; }
.di-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding: .8rem 1rem .9rem; border-bottom: 1px solid var(--line); }
.di-section { grid-column: 1 / -1; margin-bottom: -.1rem; }
.di-metric { --t: #8794ae; display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: .55rem .6rem .5rem; border-radius: 10px; background: var(--ink-1); border: 1px solid var(--line); }
.di-metric.is-good { --t: #5ee29a; }
.di-metric.is-warn { --t: #ffcf7a; }
.di-metric.is-bad { --t: #ff8a8d; border-color: rgba(255,90,95,.35); background: linear-gradient(180deg, rgba(255,90,95,.08), var(--ink-1)); }
.di-metric .k { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #8794ae; }
.di-metric .v { font-family: var(--mono); font-size: 1rem; font-weight: 700; color: var(--t); line-height: 1; }
.di-bar { display: block; height: 4px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; }
.di-bar span { display: block; height: 100%; border-radius: inherit; background: var(--t); }
.di-metric .w { font-size: .66rem; font-weight: 700; color: var(--t); opacity: .85; }
.di-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .8rem 1rem 1rem; }
.di-action {
  --a: var(--ice);
  display: flex; align-items: center; gap: .6rem; padding: .55rem .55rem .55rem .6rem; border-radius: 11px; cursor: pointer; text-align: left;
  background: var(--ink-1); border: 1px solid var(--line-strong); color: var(--text); font: inherit;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.di-action.is-gold { --a: #f5c451; }
.di-action-ico {
  width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--a);
  background: color-mix(in srgb, var(--a) 12%, var(--ink-2)); border: 1px solid color-mix(in srgb, var(--a) 32%, transparent);
}
.di-action-ico svg { width: 14px; height: 14px; }
.di-action-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.di-action-text b { font-size: .82rem; }
.di-action-text span { font-size: .7rem; color: var(--dim); }
.di-go { width: 15px; height: 15px; color: #6f7b94; flex: none; transition: transform .15s ease, color .15s ease; }
.di-action:hover { border-color: color-mix(in srgb, var(--a) 60%, var(--line-strong)); background: var(--ink-2); }
.di-action:hover .di-go { color: var(--a); transform: translateX(2px); }
@media (max-width: 480px) {
  .di-metrics { grid-template-columns: 1fr; }
  .di-actions { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ta-overlay { padding: .5rem; }
  .ta-viewer { height: 92vh; border-radius: 14px; }
  .ta-tool span:not(.ta-tool-n) { display: none; }
  .ta-lb-stage { padding: 4rem .75rem 1.5rem; }
  .ta-lb-nav { top: auto; bottom: 1rem; margin-top: 0; }
}

/* ==========================================================================
   Moderation page (/admin/moderation) + the Users popup's Moderation section
   ========================================================================== */
.md-page { display: flex; flex-direction: column; gap: 1.1rem; padding-bottom: 1.5rem; }
.md-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.1rem; align-items: start; }
.md-main, .md-side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.md-side { position: sticky; top: 1rem; }


/* ---------- stat strip ---------- */
.md-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.md-stat {
  --c: #8a94ab; display: flex; align-items: center; gap: .85rem; padding: .95rem 1.05rem; border-radius: 16px; cursor: pointer; text-align: left;
  font: inherit; color: var(--text); border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--ink-1)), var(--ink-1) 65%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c) 25%, transparent);
  transition: border-color .15s ease, transform .15s ease;
}
.md-stat:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); transform: translateY(-1px); }
.md-stat-ico { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.md-stat-ico svg { width: 20px; height: 20px; }
.md-stat-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.md-stat-txt b { font-family: var(--display); font-weight: 900; font-size: 1.55rem; }
.md-stat-txt span { font-size: .76rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- cards ---------- */
.md-card { background: var(--ink-1); border: 1px solid var(--line); border-radius: 18px; padding: 1.15rem 1.25rem; display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
.md-card-head { display: flex; align-items: center; gap: .6rem; }
.md-card-head h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.md-card-head .md-count { margin-left: auto; }
.md-card-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--ice); background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.25); flex: none; }
.md-card-ico svg { width: 15px; height: 15px; }
.md-count { font: 700 .7rem var(--mono); padding: .08rem .45rem; border-radius: 999px; background: var(--ink-0); border: 1px solid var(--line); color: var(--dim); }

/* ---------- take action ---------- */
.md-action-card { background: linear-gradient(180deg, #0d1630, var(--ink-1) 160px); }
.md-action-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
.md-controls { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.md-controls .field label { font-size: .74rem; }
.md-controls [hidden] { display: none !important; }
.md-optional { color: var(--dim); font-weight: 500; }

.md-target { display: flex; min-width: 0; }
.md-target-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; padding: 1.5rem 1rem; text-align: center; cursor: pointer;
  border-radius: 14px; border: 1.5px dashed var(--line-strong); background: var(--ink-0); color: var(--text); font: inherit;
  transition: border-color .15s ease, background-color .15s ease;
}
.md-target-empty:hover { border-color: var(--ice); background: rgba(53,215,255,.04); }
.md-target-empty-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: var(--ice); background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.25); margin-bottom: .2rem; }
.md-target-empty-ico svg { width: 24px; height: 24px; }
.md-target-empty b { font-size: .95rem; }
.md-target-empty span { font-size: .78rem; color: var(--dim); max-width: 26ch; }
.md-target-card { flex: 1; display: flex; flex-direction: column; gap: .75rem; padding: 1rem; border-radius: 14px; background: var(--ink-0); border: 1px solid var(--line); min-width: 0; }
.md-target-card[hidden] { display: none; }
.md-target-top { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.md-target-head { position: relative; flex: none; }
.md-target-head img { width: 60px; height: 60px; border-radius: 14px; image-rendering: pixelated; display: block; background: var(--ink-2); box-shadow: 0 10px 24px -12px rgba(0,120,255,.6); }
.md-target-head .md-online-dot { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border: 2px solid var(--ink-0); box-shadow: none; }
.md-target-id { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.md-target-id b { font-size: 1.1rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-target-ranks { display: flex; flex-wrap: wrap; gap: .25rem; }
.md-target-ranks .rank-pill { font-size: .62rem; padding: .08rem .45rem; }
.md-target-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.md-target-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .75rem; font-size: .8rem; }
.md-target-facts dt { color: var(--dim); }
.md-target-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.md-target-change { margin-top: auto; align-self: stretch; justify-content: center; }
.md-target-change svg { width: 14px; height: 14px; }

.md-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.md-action {
  --c: #8a94ab; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem; border-radius: 10px; cursor: pointer;
  font: 700 .82rem var(--body); color: var(--dim); background: var(--ink-2); border: 1px solid var(--line);
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, opacity .15s ease;
}
.md-action svg { width: 15px; height: 15px; }
.md-action:hover:not(:disabled) { color: var(--text); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.md-action.is-active { color: var(--c); border-color: color-mix(in srgb, var(--c) 70%, transparent); background: color-mix(in srgb, var(--c) 13%, var(--ink-2)); box-shadow: 0 6px 16px -10px var(--c); }
.md-action:disabled { opacity: .38; cursor: not-allowed; }
.md-action-hint { margin: .45rem 0 0; font-size: .74rem; color: var(--dim); }

.md-durations { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.md-chip { padding: .38rem .72rem; border-radius: 999px; cursor: pointer; font: 600 .78rem var(--body); color: var(--dim); background: var(--ink-2); border: 1px solid var(--line); }
.md-chip:hover { color: var(--text); }
.md-chip.is-active { color: #f5c451; border-color: rgba(245,196,81,.6); background: rgba(245,196,81,.1); }
.md-picker .md-chip.is-active { color: var(--ice); border-color: rgba(53,215,255,.55); background: rgba(53,215,255,.1); }
.md-custom-duration { width: 130px; padding: .38rem .7rem !important; border-radius: 999px !important; font-size: .78rem !important; font-family: var(--mono); }

.md-ban-warning { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem .9rem; border-radius: 11px; background: rgba(255,90,95,.08); border: 1px solid rgba(255,90,95,.35); color: #ffb3b5; font-size: .82rem; line-height: 1.45; }
.md-ban-warning svg { width: 18px; height: 18px; flex: none; color: #ff5a5f; margin-top: .05rem; }
.md-ban-warning p { margin: 0; }
.md-ban-warning b { color: #ffd0d1; }
.md-ban-warning code, .md-panel-note code { font-family: var(--mono); font-size: .9em; }
.md-submit-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: auto; }
.md-submit { min-width: 170px; justify-content: center; }
.md-confirm { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .45rem .55rem .45rem .85rem; border-radius: 11px; background: rgba(255,90,95,.08); border: 1px solid rgba(255,90,95,.35); font-size: .84rem; color: #ffb3b5; }
.md-confirm b { color: #fff; }

/* ---------- lists ---------- */
.md-tabs-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.md-tabs { display: flex; gap: .25rem; flex-wrap: wrap; padding: .25rem; border-radius: 12px; background: var(--ink-0); border: 1px solid var(--line); }
.md-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .48rem .8rem; border-radius: 9px; border: 0; background: none; cursor: pointer; font: 700 .82rem var(--body); color: var(--dim); }
.md-tab svg { width: 14px; height: 14px; }
.md-tab:hover { color: var(--text); background: var(--ink-2); }
.md-tab.is-active { color: #fff; background: linear-gradient(90deg, #00b8e6, #0047ff); box-shadow: 0 6px 16px -8px rgba(0,120,255,.9); }
.md-tab.is-active .md-count { background: rgba(0,0,0,.25); border-color: transparent; color: #fff; }
.md-search { margin-left: auto; min-width: 220px; }
.md-panel { display: flex; flex-direction: column; gap: .7rem; }
.md-panel[hidden] { display: none; }
.md-panel-note { margin: 0; font-size: .78rem; color: var(--dim); }
.md-table-wrap { border: 1px solid var(--line); border-radius: 12px; overflow: auto; max-height: 560px; }
.md-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.md-table th { position: sticky; top: 0; z-index: 1; background: var(--ink-2); text-align: left; padding: .65rem .9rem; font: 700 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line); white-space: nowrap; }
.md-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; }
.md-table tbody tr:last-child td { border-bottom: 0; }
.md-table tbody tr:hover td { background: rgba(53,215,255,.035); }
.md-reason-cell { color: var(--dim); max-width: 340px; overflow-wrap: anywhere; }
.md-when { white-space: nowrap; color: var(--dim); font-size: .8rem; }
.md-row-actions { text-align: right !important; white-space: nowrap; width: 1%; }
.md-row-actions .is-armed { color: #ff9a9d; border-color: rgba(255,90,95,.6); }
.md-cell-stack { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.md-cell-row { display: flex; align-items: center; gap: .45rem; }
.md-mini-chip { font-size: .64rem; padding: .06rem .45rem; }
.md-dim { color: var(--dim); }
.md-small { font-size: .76rem; }
.md-name { display: inline-flex; align-items: center; gap: .55rem; padding: 0; border: 0; background: none; cursor: pointer; font: 600 .86rem var(--body); color: var(--text); text-align: left; }
.md-name:hover span { color: var(--ice); text-decoration: underline; }
.md-head { border-radius: 7px; image-rendering: pixelated; background: var(--ink-2); flex: none; }
.md-staff { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.md-staff .md-head { border-radius: 5px; }
.md-src { font: 700 .6rem var(--mono); text-transform: uppercase; letter-spacing: .06em; padding: .05rem .35rem; border-radius: 6px; color: var(--ice); background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.3); }
.md-online-dot { width: 8px; height: 8px; border-radius: 50%; background: #5ee29a; box-shadow: 0 0 0 3px rgba(94,226,154,.18); flex: none; display: inline-block; }
.md-pill { --c: #8a94ab; display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 999px; font: 700 .74rem var(--body); white-space: nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.md-pill svg { width: 12px; height: 12px; }
.md-result { font-weight: 700; font-size: .8rem; }
.md-result.is-ok { color: #5ee29a; }
.md-result.is-fail { color: #ff8a8d; cursor: help; }
.md-empty { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 2.6rem 1rem; text-align: center; border: 1px dashed var(--line); border-radius: 12px; color: var(--dim); }
.md-empty svg { width: 26px; height: 26px; color: var(--line-strong); margin-bottom: .2rem; }
.md-empty b { color: var(--text); font-size: .92rem; }
.md-empty span { font-size: .8rem; }
.md-filter-empty { text-align: center; color: var(--dim); font-size: .85rem; padding: 1.5rem; margin: 0; }
.md-filter-empty[hidden] { display: none; }

/* ---------- sidebar ---------- */
.md-side-note { color: var(--dim); font-size: .8rem; margin: 0; }
.md-online-list { display: flex; flex-direction: column; gap: .2rem; max-height: 300px; overflow-y: auto; margin: 0 -.4rem; }
.md-online-item { padding: .35rem .45rem; border-radius: 9px; width: 100%; }
.md-online-item:hover { background: var(--ink-2); }
.md-help ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.md-help li { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; font-size: .8rem; color: var(--dim); line-height: 1.4; }

/* ---------- player picker ---------- */
.md-picker-overlay { z-index: 230; }
.md-picker { width: min(1000px, calc(100vw - 2rem)); max-width: none; height: min(780px, calc(100vh - 3rem)); max-height: none; display: flex; flex-direction: column; padding: 0; overflow: hidden; border-radius: 18px; }
.md-picker-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem .8rem; border-bottom: 1px solid var(--line); }
.md-picker-head h3 { margin: 0; font-size: 1.1rem; }
.md-picker-head p { margin: .2rem 0 0; color: var(--dim); font-size: .8rem; }
.md-picker-tools { flex: none; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .8rem 1.3rem; border-bottom: 1px solid var(--line); background: var(--ink-1); }
.md-picker-search { flex: 1 1 260px; min-width: 0; }
.md-picker-filters { display: flex; flex-wrap: wrap; gap: .3rem; }
.md-picker-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1rem 1.3rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem; align-content: start; }
.md-picker-grid > .md-filter-empty { grid-column: 1 / -1; }
.md-pcard {
  display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .85rem .6rem .75rem; border-radius: 14px; cursor: pointer; text-align: center; min-width: 0;
  background: var(--ink-2); border: 1px solid var(--line); color: var(--text); font: inherit;
  transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}
.md-pcard:hover, .md-pcard:focus-visible { border-color: var(--ice); background: color-mix(in srgb, var(--ice) 6%, var(--ink-2)); transform: translateY(-2px); outline: none; }
.md-pcard-head { position: relative; width: 56px; height: 56px; }
.md-pcard-head img { width: 56px; height: 56px; border-radius: 12px; image-rendering: pixelated; display: block; background: var(--ink-1); box-shadow: 0 8px 18px -10px rgba(0,0,0,.8); }
.md-pcard-head .md-online-dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border: 2px solid var(--ink-2); box-shadow: none; }
.md-pcard.is-banned .md-pcard-head img, .md-pcard.is-dead .md-pcard-head img { filter: grayscale(.7) brightness(.8); }
.md-pcard-name { font-weight: 700; font-size: .86rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-pcard-ranks { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; min-height: 1.1rem; }
.md-pcard-ranks .rank-pill { font-size: .62rem; padding: .08rem .45rem; }
.md-pcard-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; align-items: center; }
.md-pcard-tags .users-chip { font-size: .64rem; padding: .08rem .4rem; }
.md-pcard-pt { font: 600 .66rem var(--mono); color: var(--dim); }
.md-picker-foot { flex: none; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .7rem 1.3rem; border-top: 1px solid var(--line); background: var(--ink-1); font-size: .78rem; color: var(--dim); }
#md-picker-count { margin-right: auto; font-family: var(--mono); }
.md-pager { display: flex; align-items: center; gap: .25rem; }
.md-page-btn { min-width: 32px; height: 32px; padding: 0 .55rem; border-radius: 9px; display: inline-grid; place-items: center; cursor: pointer; font: 700 .8rem var(--body); color: var(--dim); background: var(--ink-2); border: 1px solid var(--line); }
.md-page-btn svg { width: 15px; height: 15px; }
.md-page-btn:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
.md-page-btn.is-active { color: #fff; background: linear-gradient(90deg, #00b8e6, #0047ff); border-color: transparent; }
.md-page-btn:disabled { opacity: .35; cursor: default; }
.md-page-gap { color: var(--dim); padding: 0 .15rem; }

/* ---------- Users popup Moderation section ---------- */
.user-detail-moderation { grid-column: 1 / -1; }
.ud-mod-status { display: flex; flex-wrap: wrap; gap: .35rem; }
.ud-mod-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.ud-mod-actions .md-action { padding: .45rem .75rem; font-size: .8rem; }
.ud-mod-form { display: flex; flex-direction: column; gap: .55rem; padding: .75rem; border-radius: 10px; background: var(--ink-1); border: 1px solid var(--line); }
.ud-mod-form[hidden] { display: none; }
.ud-mod-form [hidden] { display: none !important; }
.ud-mod-form input[type="text"] { width: 100%; }
.ud-mod-form-actions { display: flex; justify-content: flex-end; gap: .45rem; flex-wrap: wrap; align-items: center; }
.ud-mod-history { list-style: none; margin: 0; padding: .5rem 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .45rem; }
.ud-mod-history li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8rem; }
.ud-mod-history .when { margin-left: auto; color: var(--dim); font-family: var(--mono); font-size: .72rem; }
.ud-mod-history .why { color: var(--dim); flex-basis: 100%; padding-left: .2rem; overflow-wrap: anywhere; }

@media (max-width: 1250px) {
  .md-layout { grid-template-columns: minmax(0, 1fr); }
  .md-side { position: static; display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .md-stats { grid-template-columns: 1fr 1fr; }
  .md-action-grid { grid-template-columns: minmax(0, 1fr); }
  .md-search { margin-left: 0; min-width: 0; width: 100%; }
  .md-side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .md-picker-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); padding: .8rem; }
  .md-picker-tools, .md-picker-head, .md-picker-foot { padding-left: .9rem; padding-right: .9rem; }
}

/* Action colours - placed after the components above so they beat each
   component's own grey --c default. */
:is(.md-action, .md-pill, .md-stat).is-kick { --c: #f5a623; }
:is(.md-action, .md-pill, .md-stat).is-mute { --c: #f5c451; }
:is(.md-action, .md-pill, .md-stat).is-unmute { --c: #5ee29a; }
:is(.md-action, .md-pill, .md-stat).is-ban { --c: #ff5a5f; }
:is(.md-action, .md-pill, .md-stat).is-unban { --c: #35d7ff; }
:is(.md-action, .md-pill, .md-stat).is-alt { --c: #b18cff; }
:is(.md-action, .md-pill, .md-stat).is-act { --c: #35d7ff; }
.tk-search.md-search { flex: 0 1 280px; width: auto; min-width: 200px; margin-left: auto; }
@media (max-width: 900px) { .tk-search.md-search { flex: 1 1 100%; margin-left: 0; } }

/* ==========================================================================
   Admin > Wiki (/admin/wiki) - reuses the Moderation page's md-* layout
   ========================================================================== */
.aw-flash { padding: .7rem 1rem; border-radius: 12px; font-size: .88rem; color: #8ff0bd; background: rgba(94,226,154,.08); border: 1px solid rgba(94,226,154,.35); }
.aw-flash.is-error { color: #ffb3b5; background: rgba(255,90,95,.08); border-color: rgba(255,90,95,.35); }
.aw-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .75rem; }
.aw-cat { --c: #8a94ab; display: flex; flex-direction: column; gap: .55rem; padding: .9rem; border-radius: 14px; background: var(--ink-0); border: 1px solid var(--line); border-top: 3px solid var(--c); }
.aw-cat.is-new { border-style: dashed; border-top: 1px dashed var(--line-strong); }
.aw-cat input[type="text"], .aw-cat input[type="number"], .aw-cat select { padding: .45rem .6rem; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--ink-1); color: var(--text); font: inherit; font-size: .84rem; }
.aw-cat input:focus, .aw-cat select:focus { outline: none; border-color: var(--ice); }
.aw-cat-top { display: flex; align-items: center; gap: .6rem; }
.aw-name { flex: 1; font-weight: 800 !important; font-size: .95rem !important; }
.aw-pages a { font: 600 .72rem var(--mono); color: var(--dim); white-space: nowrap; text-decoration: none; }
.aw-pages a:hover { color: var(--ice); }
.aw-cat-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.aw-order { width: 64px; }
.aw-del { color: #ff9a9d; }
.aw-swatches { display: flex; gap: .25rem; }
.aw-swatch { position: relative; cursor: pointer; }
.aw-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.aw-swatch span { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--sw); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line-strong); }
.aw-swatch input:checked + span { border-color: var(--ink-0); box-shadow: 0 0 0 2px var(--sw); }
.aw-swatch input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 2px; }
.aw-hidden td { opacity: .55; }
.aw-del-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.aw-del-row div { display: flex; flex-direction: column; min-width: 0; }
.aw-del-row a { color: var(--text); text-decoration: none; }
.aw-del-row form { margin: 0; }
.aw-edit { display: flex; flex-direction: column; gap: .1rem; padding: .45rem .3rem; border-radius: 8px; text-decoration: none; color: var(--text); font-size: .84rem; }
.aw-edit:hover { background: var(--ink-2); }
.aw-edit span { color: var(--dim); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   Staff agreement - signing page (/admin/agreement) + Owner editor
   ========================================================================== */
/* The page uses .admin-body (locked to 100vh, overflow hidden - the admin
   layout scrolls its own panels). This page has no panels, so it scrolls
   normally; the glow is pinned to the window so it never repeats. */
.admin-body.ag-body { height: auto; min-height: 100vh; overflow: visible; background: var(--ink-0) radial-gradient(60% 50% at 80% 0%, rgba(47,107,255,.14), transparent 70%) no-repeat fixed; }
.ag-page { width: 100%; box-sizing: border-box; max-width: 1180px; margin: 0 auto; padding: 1.2rem 1.5rem 4rem; }
.ag-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.ag-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--dim); text-decoration: none; font-size: .9rem; }
.ag-brand b { color: var(--text); }
.ag-brand img { image-rendering: pixelated; }
.ag-top-actions { display: flex; gap: .5rem; }
.ag-top-actions .btn svg { width: 15px; height: 15px; }
.ag-hero { padding: 2.4rem 0 1.6rem; display: flex; flex-direction: column; gap: .8rem; }
.ag-kicker { display: inline-flex; align-items: center; gap: .45rem; width: fit-content; padding: .3rem .7rem; border-radius: 999px; font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ice); background: rgba(53,215,255,.08); border: 1px solid rgba(53,215,255,.3); }
.ag-kicker svg { width: 14px; height: 14px; }
.ag-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.1; }
.ag-hero > p { color: var(--dim); max-width: 64ch; }
.ag-meta { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.ag-chip { padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; color: var(--dim); background: var(--ink-1); border: 1px solid var(--line-strong); }
.ag-chip b { color: var(--text); }
.ag-status { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .75rem; border-radius: 999px; font-weight: 800; font-size: .8rem; }
.ag-status svg { width: 14px; height: 14px; }
.ag-status.is-signed { color: #5ee29a; background: rgba(94,226,154,.1); border: 1px solid rgba(94,226,154,.45); }
.ag-status.is-pending { color: #f5c451; background: rgba(245,196,81,.08); border: 1px solid rgba(245,196,81,.4); }
.ag-updated, .ag-error { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1.1rem; border-radius: 14px; margin-bottom: 1.2rem; font-size: .9rem; }
.ag-updated { color: #cdeefb; background: rgba(53,215,255,.07); border: 1px solid rgba(53,215,255,.35); }
.ag-updated svg { width: 18px; height: 18px; color: var(--ice); flex: none; margin-top: .1rem; }
.ag-updated-note { margin-top: .4rem; color: var(--text); }
.ag-updated-note span { color: var(--ice); font-weight: 700; }
.ag-error { color: #ffb3b5; background: rgba(255,90,95,.08); border: 1px solid rgba(255,90,95,.4); }
.ag-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.ag-rail { position: sticky; top: 1rem; }
.ag-rail-card { padding: 1rem .7rem .7rem; border-radius: 18px; background: var(--ink-1); border: 1px solid var(--line); }
.ag-progress { padding: 0 .4rem .9rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line); }
.ag-progress-top { display: flex; justify-content: space-between; font-size: .78rem; color: var(--dim); margin-bottom: .45rem; }
.ag-progress-top b { color: var(--text); font-family: var(--mono); }
.ag-progress-bar { height: 6px; border-radius: 999px; background: var(--ink-2); overflow: hidden; }
.ag-progress-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #00b8e6, #5ee29a); transition: width .35s cubic-bezier(.2, .8, .3, 1); }
.ag-rail ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; }
.ag-rail-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .45rem; border-radius: 10px; color: var(--dim); text-decoration: none; font-size: .84rem; font-weight: 600; line-height: 1.25; }
.ag-rail-item:hover, .ag-rail-item.is-current { background: var(--ink-2); color: var(--text); }
.ag-rail-num { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem var(--mono); color: var(--dim); background: var(--ink-2); border: 1px solid var(--line-strong); transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.ag-rail-num .n svg, .ag-rail-num > svg { width: 13px; height: 13px; }
.ag-rail-num > svg { display: none; }
.ag-rail-item.is-done .ag-rail-num { color: #06210f; background: #5ee29a; border-color: #5ee29a; }
.ag-rail-item.is-done .ag-rail-num .n { display: none; }
.ag-rail-item.is-done .ag-rail-num > svg { display: block; stroke-width: 3; }
.ag-rail-item.is-ready .ag-rail-num { border-color: var(--ice); color: var(--ice); }
.ag-rail-text { display: flex; flex-direction: column; min-width: 0; }
.ag-rail-text small { font: 700 .62rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ag-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.ag-section { padding: 1.4rem 1.6rem; border-radius: 18px; background: var(--ink-1); border: 1px solid var(--line); scroll-margin-top: 1rem; transition: border-color .2s ease, box-shadow .2s ease; }
.ag-section.is-agreed { border-color: rgba(94,226,154,.35); box-shadow: inset 3px 0 0 #5ee29a; }
.ag-section header { display: flex; align-items: center; gap: .85rem; margin-bottom: .9rem; }
.ag-section-num { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; font: 800 .9rem var(--mono); color: var(--ice); background: rgba(53,215,255,.08); border: 1px solid rgba(53,215,255,.28); }
.ag-part { font: 700 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ag-section h2 { font-family: var(--display); font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.ag-section-body p { margin: 0 0 .85rem; color: #d3dbea; line-height: 1.75; font-size: .95rem; }
.ag-section-body p:last-child { margin-bottom: 0; }
.ag-section footer { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.ag-agree { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .7rem .85rem; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; font-size: .9rem; color: var(--text); background: var(--ink-2); border: 1px solid var(--line-strong); transition: border-color .15s ease, background-color .15s ease; }
.ag-agree:hover { border-color: var(--ice); }
.ag-agree-box { width: 22px; height: 22px; flex: none; border-radius: 7px; display: grid; place-items: center; border: 2px solid var(--line-strong); background: var(--ink-0); transition: background-color .15s ease, border-color .15s ease; }
.ag-agree-box svg { width: 14px; height: 14px; stroke-width: 3.2; opacity: 0; color: #06210f; }
.ag-agree[aria-pressed="true"] { border-color: rgba(94,226,154,.55); background: rgba(94,226,154,.08); }
.ag-agree[aria-pressed="true"] .ag-agree-box { background: #5ee29a; border-color: #5ee29a; }
.ag-agree[aria-pressed="true"] .ag-agree-box svg { opacity: 1; }
.ag-sign-card { padding: 1.5rem 1.6rem; border-radius: 20px; scroll-margin-top: 1rem; border: 1px solid transparent; background: linear-gradient(180deg, #0d1630, var(--ink-1) 200px) padding-box, linear-gradient(140deg, rgba(0,229,255,.45), rgba(47,107,255,.2) 40%, var(--line)) border-box; box-shadow: 0 30px 70px -40px rgba(0,120,255,.7); }
.ag-sign-head h2 { font-family: var(--display); font-weight: 800; font-size: 1.3rem; }
.ag-sign-head p { color: var(--dim); font-size: .88rem; margin-top: .2rem; }
.ag-sign-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.3rem; margin-top: 1.2rem; align-items: stretch; }
.ag-paper { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.4rem 1.4rem 1rem; border-radius: 14px; background: linear-gradient(180deg, #f6f1e6, #ece4d2); color: #1d2433; min-height: 190px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ag-paper-sig { min-height: 70px; display: flex; align-items: flex-end; padding: 0 .4rem; overflow: hidden; }
.ag-signature-text { font-family: "Caveat", cursive; font-weight: 700; font-size: 2.6rem; line-height: 1; color: #1b2f6e; white-space: nowrap; }
.ag-signature-text.is-small { font-size: 1.6rem; color: var(--ice); }
.ag-sig-placeholder { font-family: "Caveat", cursive; font-size: 2rem; color: rgba(29,36,51,.28); }
.ag-paper-line { height: 2px; margin: .3rem 0 .6rem; background: repeating-linear-gradient(90deg, rgba(29,36,51,.55) 0 8px, transparent 8px 12px); }
.ag-paper-meta { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; font-size: .76rem; color: #4a5468; font-family: var(--mono); }
.ag-paper-meta span { display: inline-flex; align-items: center; gap: .35rem; }
.ag-paper-meta img { border-radius: 4px; image-rendering: pixelated; }
.ag-sign-controls { display: flex; flex-direction: column; gap: .7rem; justify-content: center; }
.ag-field { display: flex; flex-direction: column; gap: .35rem; font-size: .78rem; font-weight: 700; color: var(--dim); }
.ag-field input { padding: .75rem .85rem; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--ink-0); color: var(--text); font: inherit; font-size: 1rem; }
.ag-field input:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(53,215,255,.12); }
.ag-agree-all { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem; border-radius: 11px; cursor: pointer; font: 700 .84rem var(--body); color: #5ee29a; background: rgba(94,226,154,.06); border: 1px dashed rgba(94,226,154,.45); }
.ag-agree-all svg { width: 15px; height: 15px; }
.ag-agree-all:hover { background: rgba(94,226,154,.12); }
.ag-submit { padding-block: .85rem; justify-content: center; font-size: .98rem; }
.ag-hint { margin: 0; font-size: .8rem; color: var(--dim); text-align: center; }
.ag-signed { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ag-signed-ico { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #06210f; background: #5ee29a; box-shadow: 0 0 0 6px rgba(94,226,154,.15); }
.ag-signed-ico svg { width: 24px; height: 24px; stroke-width: 3; }
.ag-signed > div { flex: 1; min-width: 220px; }
.ag-signed h2 { font-family: var(--display); font-weight: 800; font-size: 1.2rem; }
.ag-signed p { color: var(--dim); font-size: .9rem; margin-top: .15rem; }
@media (max-width: 900px) {
  .ag-layout { grid-template-columns: minmax(0, 1fr); }
  .ag-rail { position: static; }
  .ag-rail ol { display: none; }
  .ag-sign-grid { grid-template-columns: minmax(0, 1fr); }
  .ag-section, .ag-sign-card { padding: 1.15rem; }
}

/* ---------- Owner editor (/admin/agreement/edit) ---------- */
.ae-edit-link { text-decoration: none; margin-left: auto; margin-right: .4rem; }
.ae-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.1rem; align-items: start; padding-bottom: 2rem; }
.ae-main { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.ae-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.ae-toolbar { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.ae-tabs { display: inline-flex; gap: .2rem; padding: .25rem; border-radius: 11px; background: var(--ink-0); border: 1px solid var(--line); }
.ae-tabs button { padding: .42rem .9rem; border: 0; border-radius: 8px; background: none; color: var(--dim); font: 700 .82rem var(--body); cursor: pointer; }
.ae-tabs button.is-active { color: #fff; background: linear-gradient(90deg, #00b8e6, #0047ff); }
.ae-draft-state { font-size: .8rem; color: var(--dim); margin-right: auto; }
.ae-changes { padding: .65rem .9rem; border-radius: 12px; font-size: .84rem; background: var(--ink-1); border: 1px solid var(--line-strong); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ae-badge { display: inline-flex; padding: .1rem .5rem; border-radius: 999px; font: 700 .68rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line-strong); }
.ae-badge.is-new { color: #5ee29a; border-color: rgba(94,226,154,.45); background: rgba(94,226,154,.08); }
.ae-badge.is-changed { color: #f5c451; border-color: rgba(245,196,81,.45); background: rgba(245,196,81,.08); }
.ae-badge.is-removed { color: #ff9a9d; border-color: rgba(255,90,95,.45); background: rgba(255,90,95,.08); text-transform: none; letter-spacing: 0; }
.ae-sections { display: flex; flex-direction: column; gap: .75rem; }
.ae-section { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.05rem; border-radius: 16px; background: var(--ink-1); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); }
.ae-section.is-new { border-left-color: #5ee29a; }
.ae-section.is-changed { border-left-color: #f5c451; }
.ae-section-head { display: flex; align-items: center; gap: .55rem; }
.ae-num { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; font: 800 .78rem var(--mono); color: var(--ice); background: rgba(53,215,255,.08); border: 1px solid rgba(53,215,255,.28); }
.ae-section-tools { display: flex; gap: .2rem; margin-left: auto; }
.ae-section-tools button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-2); color: var(--dim); cursor: pointer; }
.ae-section-tools button svg { width: 15px; height: 15px; }
.ae-section-tools button:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
.ae-section-tools button.is-danger:hover { color: #ff8a8d; border-color: rgba(255,90,95,.5); }
.ae-section-tools button:disabled { opacity: .35; cursor: default; }
.ae-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: .6rem; }
.ae-field { display: flex; flex-direction: column; gap: .3rem; font-size: .74rem; font-weight: 700; color: var(--dim); }
.ae-field em { font-style: normal; font-weight: 500; }
.ae-field input, .ae-field textarea { padding: .55rem .7rem; border-radius: 9px; border: 1px solid var(--line-strong); background: var(--ink-0); color: var(--text); font: inherit; font-size: .9rem; font-weight: 500; }
.ae-field textarea { resize: vertical; line-height: 1.6; }
.ae-heading input { font-weight: 800; }
.ae-field input:focus, .ae-field textarea:focus { outline: none; border-color: var(--ice); }
.ae-add { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .85rem; border-radius: 14px; cursor: pointer; font: 700 .88rem var(--body); color: var(--ice); background: rgba(53,215,255,.04); border: 1.5px dashed rgba(53,215,255,.35); }
.ae-add svg { width: 16px; height: 16px; }
.ae-add:hover { background: rgba(53,215,255,.09); }
.ae-add[hidden] { display: none; }
.ae-preview { display: flex; flex-direction: column; gap: .75rem; }
.ae-preview[hidden] { display: none; }
.ae-pv-section { padding: 1.15rem 1.3rem; border-radius: 16px; background: var(--ink-1); border: 1px solid var(--line); }
.ae-pv-section header { display: flex; align-items: center; gap: .7rem; margin-bottom: .7rem; }
.ae-pv-part { display: block; font: 700 .64rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.ae-pv-section h3 { font-family: var(--display); font-weight: 800; font-size: 1.1rem; }
.ae-pv-section p { margin: 0 0 .7rem; color: #d3dbea; line-height: 1.7; font-size: .9rem; }
.ae-publish { gap: .8rem; }
.ae-mode { display: flex; flex-direction: column; gap: .45rem; }
.ae-mode-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .7rem; border-radius: 11px; border: 1px solid var(--line); background: var(--ink-0); cursor: pointer; font-size: .84rem; }
.ae-mode-opt input { margin-top: .2rem; accent-color: #00b8e6; }
.ae-mode-opt span { display: flex; flex-direction: column; gap: .15rem; }
.ae-mode-opt small { color: var(--dim); font-size: .76rem; line-height: 1.4; }
.ae-mode-opt:has(input:checked) { border-color: rgba(53,215,255,.5); background: rgba(53,215,255,.06); }
.ae-publish-btn { justify-content: center; }
.ae-publish-btn[hidden] { display: none; }
.ae-confirm { display: flex; flex-direction: column; gap: .55rem; padding: .75rem; border-radius: 11px; background: rgba(255,90,95,.07); border: 1px solid rgba(255,90,95,.35); font-size: .83rem; color: #ffcfd0; }
.ae-confirm[hidden] { display: none; }
.ae-confirm p { margin: 0; }
.ae-confirm div { display: flex; justify-content: flex-end; gap: .45rem; }
.ae-discard { background: none; border: 0; padding: 0; color: var(--dim); font: 600 .78rem var(--body); cursor: pointer; text-decoration: underline; }
.ae-discard:hover { color: #ff9a9d; }
.ae-discard[hidden] { display: none; }
.ae-sig-bar { height: 6px; border-radius: 999px; background: var(--ink-2); overflow: hidden; }
.ae-sig-bar span { display: block; height: 100%; background: linear-gradient(90deg, #00b8e6, #5ee29a); }
.ae-sig-list { display: flex; flex-direction: column; gap: .35rem; max-height: 260px; overflow-y: auto; }
.ae-sig-row { display: flex; align-items: center; gap: .55rem; font-size: .84rem; }
.ae-sig-row img { border-radius: 6px; image-rendering: pixelated; }
.ae-sig-row .users-chip { margin-left: auto; font-size: .66rem; }
.ae-versions { display: flex; flex-direction: column; gap: .5rem; }
.ae-version { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.ae-version > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; font-size: .86rem; }
.ae-version-note { font-size: .78rem; color: var(--text); opacity: .85; }
.ae-version-pop { max-width: 760px; width: calc(100vw - 2rem); max-height: 85vh; display: flex; flex-direction: column; gap: .9rem; }
.ae-version-pop .ae-preview { overflow-y: auto; }
.ae-version-actions { display: flex; justify-content: flex-end; }
@media (max-width: 1100px) {
  .ae-layout { grid-template-columns: minmax(0, 1fr); }
  .ae-side { position: static; }
}
@media (max-width: 600px) { .ae-row { grid-template-columns: minmax(0, 1fr); } }
.ae-version > div > .users-chip { width: fit-content; }
/* Signature is plain text: one column - who you're signing as, then the name field */
.ag-sign-plain { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.1rem; max-width: 560px; }
.ag-signing-as { display: flex; align-items: center; gap: .6rem; padding: .65rem .85rem; border-radius: 11px; font-size: .86rem; color: var(--dim); background: var(--ink-0); border: 1px solid var(--line); }
.ag-signing-as img { border-radius: 6px; image-rendering: pixelated; flex: none; }
.ag-signing-as b { color: var(--text); }
.ag-signed p b { color: var(--text); }

/* Signature card v2: checklist panel + signature panel */
.ag-sign-head { display: flex; flex-direction: column; gap: .3rem; }
.ag-step { width: fit-content; padding: .18rem .6rem; border-radius: 999px; font: 700 .64rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ice); background: rgba(53,215,255,.08); border: 1px solid rgba(53,215,255,.3); }
.ag-sign-panels { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; margin-top: 1.2rem; }
.ag-panel { display: flex; flex-direction: column; gap: .9rem; padding: 1.1rem; border-radius: 16px; background: rgba(5,9,20,.55); border: 1px solid var(--line); }
.ag-ring-row { display: flex; align-items: center; gap: .85rem; }
.ag-ring { width: 54px; height: 54px; flex: none; transform: rotate(-90deg); }
.ag-ring circle { fill: none; stroke-width: 4.5; }
.ag-ring-track { stroke: var(--ink-2); }
.ag-ring-fill { stroke: #5ee29a; stroke-linecap: round; transition: stroke-dasharray .35s cubic-bezier(.2, .8, .3, 1); }
.ag-ring-text { display: flex; flex-direction: column; line-height: 1.2; }
.ag-ring-text b { font: 800 1.2rem var(--display); }
.ag-ring-text span { color: var(--dim); font-size: .8rem; }
.ag-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; max-height: 260px; overflow-y: auto; }
.ag-check { display: flex; align-items: center; gap: .6rem; padding: .38rem .45rem; border-radius: 9px; color: var(--dim); text-decoration: none; font-size: .84rem; font-weight: 600; }
.ag-check:hover { background: var(--ink-2); color: var(--text); }
.ag-check-box { width: 18px; height: 18px; flex: none; border-radius: 6px; display: grid; place-items: center; border: 2px solid var(--line-strong); transition: background-color .2s ease, border-color .2s ease; }
.ag-check-box svg { width: 11px; height: 11px; stroke-width: 3.4; color: #06210f; opacity: 0; }
.ag-check.is-done { color: var(--text); }
.ag-check.is-done .ag-check-box { background: #5ee29a; border-color: #5ee29a; }
.ag-check.is-done .ag-check-box svg { opacity: 1; }
.ag-checklist .ag-agree-all { margin-top: auto; }
.ag-agree-all[hidden] { display: none; }
.ag-signer { display: flex; align-items: center; gap: .8rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.ag-signer img { border-radius: 11px; image-rendering: pixelated; flex: none; box-shadow: 0 8px 20px -12px rgba(0,120,255,.7); }
.ag-signer > div:first-of-type { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ag-signer b { font-size: 1rem; }
.ag-signer span { color: var(--dim); font-size: .8rem; }
.ag-signer-chips { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; }
.ag-signer-chips span { padding: .18rem .55rem; border-radius: 999px; font: 600 .72rem var(--mono); color: var(--dim); background: var(--ink-2); border: 1px solid var(--line); }
.ag-name-input { position: relative; display: flex; align-items: center; }
.ag-name-input svg { position: absolute; left: .85rem; width: 17px; height: 17px; color: var(--dim); pointer-events: none; transition: color .15s ease; }
.ag-name-input input { width: 100%; padding: .85rem .9rem .85rem 2.6rem !important; font-size: 1.02rem !important; font-weight: 600; }
.ag-name-input:focus-within svg { color: var(--ice); }
.ag-legal { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--dim); }
.ag-submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding-block: .9rem; font-size: 1rem; }
.ag-submit svg { width: 17px; height: 17px; transition: transform .2s ease; }
.ag-submit:disabled { opacity: .5; cursor: not-allowed; filter: saturate(.6); }
#ag-form.is-ready .ag-submit { background: linear-gradient(90deg, #22c55e, #10b981); border-color: transparent; box-shadow: 0 12px 28px -14px rgba(34,197,94,.9); opacity: 1; filter: none; }
#ag-form.is-ready .ag-submit:hover svg { transform: translateX(3px); }
#ag-form.is-ready .ag-hint { color: #5ee29a; }
@media (max-width: 900px) {
  .ag-sign-panels { grid-template-columns: minmax(0, 1fr); }
  .ag-signer-chips { margin-left: 0; width: 100%; justify-content: flex-start; }
  .ag-signer { flex-wrap: wrap; }
}

/* ================= Analytics (/admin/analytics) ================= */
.an-page { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 2rem; }
.an-dim { color: var(--dim); }
.an-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.an-ranges { display: inline-flex; gap: .2rem; padding: .25rem; border-radius: 12px; background: var(--ink-1); border: 1px solid var(--line); }
.an-ranges a { padding: .45rem .85rem; border-radius: 9px; color: var(--dim); text-decoration: none; font-weight: 700; font-size: .84rem; white-space: nowrap; }
.an-ranges a:hover { color: var(--text); }
.an-ranges a[aria-current="page"] { color: #fff; background: linear-gradient(90deg, #00b8e6, #0047ff); }
.an-live { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 12px; font-size: .84rem; color: var(--dim); background: var(--ink-1); border: 1px solid var(--line); }
.an-live b { font: 800 1rem var(--display); color: var(--text); }
.an-live-sep { width: 1px; height: 16px; margin: 0 .3rem; background: var(--line-strong); }
.an-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #6b7280; }
.an-live-dot.is-on { background: #5ee29a; animation: status-pulse-green 1.8s ease-in-out infinite; }

.an-card { display: flex; flex-direction: column; gap: .9rem; min-width: 0; padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--ink-1); border: 1px solid var(--line); }
.an-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.an-card-head h2 { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--display); font-weight: 800; font-size: 1rem; }
.an-card-head h2 svg { width: 17px; height: 17px; color: var(--ice); align-self: center; }
.an-card-head > .an-dim { font-size: .76rem; }
.an-none { margin: 0; color: var(--dim); font-size: .88rem; }
.an-none.is-good { color: #8ff0bd; }
.an-note { margin: 0; font-size: .74rem; color: var(--dim); line-height: 1.45; }
.an-sub { display: block; margin-bottom: .45rem; font: 700 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.an-sub em { font: 500 .72rem var(--body); letter-spacing: 0; text-transform: none; font-style: normal; }

.an-empty { align-items: center; text-align: center; gap: .5rem; padding: 2rem 1rem; }
.an-empty b { font-size: 1.05rem; }
.an-empty > span:last-child { color: var(--dim); font-size: .88rem; max-width: 520px; }
.an-empty-ico { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; color: var(--ice); background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.3); }
.an-empty-ico svg { width: 22px; height: 22px; }

/* KPIs */
.an-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.an-kpi { position: relative; display: flex; flex-direction: column; gap: .3rem; min-width: 0; padding: 1rem 1.05rem; border-radius: 16px; background: var(--ink-1); border: 1px solid var(--line); overflow: hidden; }
.an-kpi.is-main { background: linear-gradient(150deg, rgba(53,215,255,.14), var(--ink-1) 65%); border-color: rgba(53,215,255,.3); }
.an-kpi-ico { position: absolute; top: .9rem; right: .9rem; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--ice); background: rgba(53,215,255,.08); }
.an-kpi-ico svg { width: 15px; height: 15px; }
.an-kpi-label { font-size: .76rem; font-weight: 700; color: var(--dim); }
.an-kpi > b { font: 900 1.75rem/1.1 var(--display); color: var(--text); letter-spacing: -.01em; }
.an-kpi-foot { min-height: 1.1rem; font-size: .72rem; color: var(--dim); }
.an-delta { display: inline-block; padding: .05rem .4rem; border-radius: 6px; font: 700 .7rem var(--mono); }
.an-delta.is-good { color: #5ee29a; background: rgba(94,226,154,.1); }
.an-delta.is-bad { color: #ff7b7f; background: rgba(255,90,95,.1); }
.an-delta.is-flat { color: var(--dim); background: var(--ink-2); }

/* chart */
.an-chart { position: relative; height: 270px; }
.an-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.an-grid-line { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.an-axis { fill: var(--dim); font: 600 10.5px var(--mono); }
.an-bar { fill: rgba(53,215,255,.18); }
.an-line { fill: none; stroke: #35d7ff; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(53,215,255,.45)); }
.an-dot { fill: #0a1022; stroke: #35d7ff; stroke-width: 2; }
.an-hover { fill: rgba(255,255,255,.04); pointer-events: none; }
.an-legend { display: flex; gap: .9rem; font-size: .76rem; color: var(--dim); }
.an-legend span, .an-tip span { display: inline-flex; align-items: center; gap: .35rem; }
.an-legend i, .an-tip i { width: 10px; height: 10px; border-radius: 3px; }
.an-legend .is-views i, .an-tip i.is-views { background: rgba(53,215,255,.35); }
.an-legend .is-visitors i, .an-tip i.is-visitors { height: 3px; background: #35d7ff; }
.an-tip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: .25rem; padding: .55rem .7rem; border-radius: 10px; font-size: .78rem; color: var(--text); background: rgba(6,10,24,.96); border: 1px solid var(--line-strong); box-shadow: 0 12px 30px -12px #000; pointer-events: none; white-space: nowrap; }

/* small numbers */
.an-minis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.an-mini { display: flex; flex-direction: column; gap: .4rem; min-width: 0; padding: .9rem 1rem; border-radius: 14px; background: var(--ink-1); border: 1px solid var(--line); }
.an-mini-label { display: flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700; color: var(--dim); }
.an-mini-label svg { width: 14px; height: 14px; color: var(--ice); flex: none; }
.an-mini-big { font: 800 1.3rem var(--display); color: var(--text); }
.an-mini-foot { font-size: .72rem; color: var(--dim); line-height: 1.4; }
.an-mini-foot b { color: var(--text); }
.an-split { display: flex; height: 10px; margin: .35rem 0 .15rem; border-radius: 999px; overflow: hidden; background: rgba(245,196,81,.55); }
.an-split .is-new { background: #35d7ff; }

/* live */
.an-live-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.2rem; }
.an-now-pages { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .84rem; }
.an-now-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .4rem .3rem .65rem; border-radius: 9px; font-size: .8rem; background: var(--ink-2); border: 1px solid var(--line); }
.an-now-chip b { min-width: 20px; padding: .05rem .35rem; border-radius: 6px; text-align: center; font: 700 .72rem var(--mono); color: #5ee29a; background: rgba(94,226,154,.12); }
.an-feed { display: flex; flex-direction: column; max-height: 300px; overflow-y: auto; font-size: .82rem; }
.an-feed-row { display: grid; grid-template-columns: 46px 44px minmax(0, 1fr) auto; gap: .6rem; align-items: center; padding: .38rem .2rem; border-bottom: 1px solid var(--line); }
.an-feed-row:last-child { border-bottom: 0; }
.an-feed-time { font: 600 .74rem var(--mono); color: var(--dim); }
.an-feed-tag { justify-self: start; padding: .05rem .35rem; border-radius: 6px; font: 700 .68rem var(--mono); color: hsl(var(--h), 85%, 72%); background: hsla(var(--h), 85%, 60%, .12); }
.an-feed-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.an-feed-meta { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--dim); white-space: nowrap; }

/* grid of cards */
.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.an-span-2 { grid-column: 1 / -1; }
.an-bars { display: flex; flex-direction: column; gap: .3rem; }
.an-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .7rem; align-items: center; font-size: .85rem; }
.an-bar-row b { font: 700 .8rem var(--mono); color: var(--text); text-align: right; }
.an-bar-row em { min-width: 34px; font: 600 .72rem var(--mono); font-style: normal; color: var(--dim); text-align: right; }
.an-bar-cell { position: relative; display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .38rem .6rem; border-radius: 8px; overflow: hidden; }
.an-bar-cell > i { position: absolute; inset: 0 auto 0 0; border-radius: 8px; background: rgba(53,215,255,.1); }
.an-bar-cell.is-exit > i { background: rgba(245,196,81,.1); }
.an-bar-cell.is-bot > i { background: rgba(167,139,250,.12); }
.an-bar-cell.is-scan > i { background: rgba(255,90,95,.1); }
.an-bar-cell > *:not(i) { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-bar-cell code { font: 600 .76rem var(--mono); color: #ffb3b5; }
.an-path { color: var(--text); text-decoration: none; }
.an-path:hover { color: var(--ice); text-decoration: underline; }
.an-flag { font-size: 1rem; line-height: 1; }
.an-ref-ico { flex: none; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; font: 800 .66rem var(--mono); color: hsl(var(--h), 80%, 75%); background: hsla(var(--h), 80%, 60%, .18); }
.an-ref-ico.is-direct { color: var(--dim); background: var(--ink-2); }
.an-ok { color: #5ee29a !important; }
.an-warn { color: #f5c451 !important; }
.an-bad { color: #ff7b7f !important; }

.an-table { display: flex; flex-direction: column; font-size: .85rem; }
.an-tr { display: grid; grid-template-columns: minmax(0, 1fr) 80px 80px 110px; gap: .7rem; align-items: center; padding: .2rem 0; }
.an-table-3 .an-tr { grid-template-columns: minmax(0, 1fr) 54px 140px; }
.an-tr > span:not(:first-child) { font: 600 .8rem var(--mono); text-align: right; color: var(--text); }
.an-table-3 .an-tr > span:last-child { font: 500 .74rem var(--body); color: var(--dim); }
.an-th { padding-bottom: .4rem; border-bottom: 1px solid var(--line); margin-bottom: .2rem; }
.an-th > span, .an-th > span:not(:first-child) { font: 700 .64rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.an-path-text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.an-path-text em { font-style: normal; font-weight: 500; font-size: .72rem; color: var(--dim); }

.an-devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.an-device { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .8rem .5rem; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); }
.an-device-ico { color: var(--ice); }
.an-device-ico svg { width: 22px; height: 22px; }
.an-device b { font: 800 1.15rem var(--display); }
.an-device span:last-child { font-size: .74rem; color: var(--dim); }
.an-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.an-kv { display: flex; justify-content: space-between; gap: .5rem; padding: .28rem 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.an-kv:last-child { border-bottom: 0; }
.an-kv b { font: 700 .78rem var(--mono); }

.an-heat { display: grid; grid-template-columns: 38px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.an-heat-h { font: 600 .62rem var(--mono); color: var(--dim); text-align: left; }
.an-heat-d { font: 700 .7rem var(--mono); color: var(--dim); }
.an-heat-c { height: 22px; border-radius: 4px; background: rgba(53,215,255, var(--a)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }

.an-foot { display: flex; gap: .6rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 14px; font-size: .78rem; line-height: 1.5; color: var(--dim); background: var(--ink-1); border: 1px dashed var(--line-strong); }
.an-foot svg { width: 16px; height: 16px; flex: none; margin-top: .15rem; color: #5ee29a; }
.an-foot b { color: var(--text); }

@media (max-width: 1400px) {
  .an-kpis, .an-minis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .an-grid { grid-template-columns: minmax(0, 1fr); }
  .an-live-grid { grid-template-columns: minmax(0, 1fr); }
  .an-kpis, .an-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-tr { grid-template-columns: minmax(0, 1fr) 60px 60px 80px; }
  .an-feed-row { grid-template-columns: 42px 40px minmax(0, 1fr); }
  .an-feed-meta { grid-column: 3; }
}
.an-cc { flex: none; min-width: 24px; padding: .08rem .3rem; border-radius: 5px; text-align: center; font: 800 .64rem var(--mono); letter-spacing: .04em; color: #cfe9ff; background: rgba(53,215,255,.12); border: 1px solid rgba(53,215,255,.25); }

/* Analytics v2: standard admin layout (main + right sidebar), dashboard-style chart */
.an-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.5rem; align-items: start; padding-bottom: 2rem; }
.an-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.an-main .an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-chart-card .chart-card-head { gap: 1rem; flex-wrap: wrap; }
.an-chart-card .range-btn { display: inline-block; text-decoration: none; }
.an-chart-wrap { min-height: 200px; }
.an-chart-svg { height: 200px; }
.chart-dot.an-dot-hidden { opacity: 0; }
.chart-dot.an-dot-hidden.is-shown { opacity: 1; }
.chart-tooltip .tt-views { display: block; font-size: .74rem; color: #aab6ff; }
.an-chart-legend { display: flex; gap: 1rem; margin-top: .6rem; font-size: .76rem; color: var(--dim); }
.an-chart-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.an-chart-legend i { width: 16px; height: 0; border-top: 2px solid #35d7ff; }
.an-chart-legend .is-views i { border-top: 2px dashed #8b9cff; opacity: .8; }

.an-side { gap: .75rem; }
.an-tiny { font-size: .7rem; }
.an-side-count { font: 700 .8rem var(--mono); color: #c4b5fd; }
.an-side-count.is-red { color: #ff7b7f; }
.an-live-big { display: flex; align-items: center; gap: .7rem; }
.an-live-big > b { font: 900 2.1rem/1 var(--display); color: var(--text); }
.an-live-big > span { font-size: .8rem; line-height: 1.35; color: var(--text); }
.an-live-big em { font-style: normal; font-size: .74rem; }
.an-live-big em b { color: var(--text); }
.an-side .an-feed { max-height: 330px; }
.an-side .an-feed-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: .1rem; }
.an-side .an-feed-meta { grid-column: 2; font-size: .7rem; white-space: normal; flex-wrap: wrap; }
.an-legend-rows { display: flex; flex-direction: column; }
.an-legend-rows > div { display: flex; align-items: center; gap: .55rem; padding: .38rem 0; font-size: .84rem; color: var(--dim); border-bottom: 1px solid var(--line); }
.an-legend-rows > div:last-child { border-bottom: 0; }
.an-legend-rows b { margin-left: auto; font: 700 .8rem var(--mono); color: var(--text); }
.an-sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.an-sw.is-new { background: #35d7ff; }
.an-sw.is-ret { background: #f5c451; }
.an-sw.is-acc { background: #5ee29a; }
.an-sw.is-link { background: #a78bfa; }
.an-kv-ico { display: grid; color: var(--ice); }
.an-kv-ico svg { width: 14px; height: 14px; }
.an-side .an-devices { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); }
.an-side .an-device { padding: .65rem .4rem; }
.an-side .an-two { grid-template-columns: 1fr; gap: .8rem; }
.an-side .an-bar-row { font-size: .8rem; }
.an-about p { margin: 0; font-size: .76rem; line-height: 1.5; color: var(--dim); }
.an-about b { color: var(--text); }
@media (max-width: 1500px) { .an-main .an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  .an-layout { grid-template-columns: minmax(0, 1fr); }
  .an-main .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== In-site confirm / prompt dialog (public/siteDialog.js) ===== */
.ol-dlg-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(2,5,14,.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .16s ease; }
.ol-dlg-overlay[hidden] { display: none; }
.ol-dlg-overlay.is-open { opacity: 1; }
.ol-dlg { width: min(420px, 100%); display: flex; flex-direction: column; gap: .9rem; padding: 1.3rem 1.35rem 1.2rem; border-radius: 18px; background: var(--ink-1); border: 1px solid var(--line-strong); box-shadow: 0 30px 70px -25px rgba(0,0,0,.9), 0 0 0 1px rgba(126,232,255,.05); transform: translateY(8px) scale(.98); transition: transform .18s ease; }
.ol-dlg-overlay.is-open .ol-dlg { transform: none; }
.ol-dlg-head { display: flex; align-items: center; gap: .7rem; }
.ol-dlg-head h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.08rem; color: var(--text); }
.ol-dlg-ico { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.3); }
.ol-dlg-ico::before { content: "?"; font: 800 1rem var(--display); color: var(--ice); }
.ol-dlg.is-danger .ol-dlg-ico { background: rgba(255,90,95,.1); border-color: rgba(255,90,95,.35); }
.ol-dlg.is-danger .ol-dlg-ico::before { content: "!"; color: #ff7b7f; }
.ol-dlg-msg { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--dim); }
.ol-dlg-input { width: 100%; box-sizing: border-box; padding: .65rem .8rem; border-radius: 11px; border: 1px solid var(--line-strong); background: var(--ink-0); color: var(--text); font: inherit; font-size: .92rem; }
.ol-dlg-input:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(53,215,255,.12); }
.ol-dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .2rem; }
.ol-dlg-actions button { height: 38px; padding: 0 1rem; border-radius: 10px; font: 700 .88rem var(--body); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ol-dlg-cancel { color: var(--text); background: var(--ink-2); border: 1px solid var(--line-strong); }
.ol-dlg-cancel:hover { border-color: var(--ice); }
.ol-dlg-ok { color: #fff; border: 0; background: linear-gradient(90deg, #00b8e6, #0047ff); }
.ol-dlg-ok:hover { filter: brightness(1.1); }
.ol-dlg.is-danger .ol-dlg-ok { background: #e5484d; }
.ol-dlg.is-danger .ol-dlg-ok:hover { background: #ff5a5f; filter: none; }
.ol-dlg-actions button:focus-visible { outline: 2px solid var(--ice); outline-offset: 2px; }

/* ===== Admin wiki categories: order stepper + built-in badge ===== */
.aw-order { width: auto; flex: none; display: inline-flex; align-items: center; height: 36px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--ink-0); overflow: hidden; }
.aw-order input { width: 38px; height: 100%; padding: 0; border: 0; background: none; color: var(--text); text-align: center; font: 700 .86rem var(--mono); -moz-appearance: textfield; appearance: textfield; }
.aw-order input::-webkit-outer-spin-button, .aw-order input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aw-order input:focus { outline: none; }
.aw-order:focus-within { border-color: var(--ice); }
.aw-order button { width: 30px; height: 100%; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--dim); cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.aw-order button svg { width: 13px; height: 13px; }
.aw-order button:hover { color: var(--text); background: var(--ink-2); }
.aw-builtin { margin-right: .45rem; padding: .08rem .45rem; border-radius: 999px; font: 700 .62rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #ff9a9d; background: rgba(255,90,95,.1); border: 1px solid rgba(255,90,95,.35); }
.aw-builtin-note { font-size: .74rem; color: var(--dim); }
.aw-order input[type="number"] { border: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; min-width: 0; }

/* ===== Admin wiki: custom icon picker ===== */
.aw-icon-pick { position: relative; }
.aw-icon-btn { display: inline-flex; align-items: center; gap: .5rem; height: 36px; padding: 0 .55rem 0 .35rem; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--ink-0); color: var(--text); font: 600 .84rem var(--body); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.aw-icon-btn:hover, .aw-icon-pick.is-open .aw-icon-btn { border-color: var(--ice); background: var(--ink-1); }
.aw-icon-cur { width: 26px; height: 26px; flex: none; border-radius: 7px; display: grid; place-items: center; color: var(--c, var(--ice)); background: color-mix(in srgb, var(--c, #35d7ff) 14%, transparent); }
.aw-icon-cur svg { width: 15px; height: 15px; }
.aw-icon-name { min-width: 58px; text-align: left; }
.aw-icon-caret { width: 14px; height: 14px; color: var(--dim); transition: transform .18s ease; }
.aw-icon-pick.is-open .aw-icon-caret { transform: rotate(180deg); }
.aw-icon-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; width: 300px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; padding: .4rem; border-radius: 14px; background: var(--ink-1); border: 1px solid var(--line-strong); box-shadow: 0 22px 45px -18px rgba(0,0,0,.85); animation: aw-icon-in .14s ease; }
.aw-icon-menu[hidden] { display: none; }
@keyframes aw-icon-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.aw-icon-opt { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .55rem .3rem; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--dim); font: 600 .72rem var(--body); cursor: pointer; transition: background-color .12s ease, color .12s ease, border-color .12s ease; }
.aw-icon-opt svg { width: 20px; height: 20px; }
.aw-icon-opt:hover, .aw-icon-opt:focus-visible { outline: none; color: var(--text); background: var(--ink-2); }
.aw-icon-opt[aria-selected="true"] { color: var(--c, var(--ice)); border-color: color-mix(in srgb, var(--c, #35d7ff) 45%, transparent); background: color-mix(in srgb, var(--c, #35d7ff) 10%, transparent); }

/* staff heads (staffAvatar helper) in place of the letter */
img.lg-staff-avatar.is-head { padding: 0; object-fit: cover; image-rendering: pixelated; background: var(--ink-2); border-color: var(--line-strong); }

/* Server Files unlock: authenticator code field */
.files-unlock-form .files-unlock-field input.files-unlock-code { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; letter-spacing: .22em; }
.files-unlock-form .files-unlock-field input.files-unlock-code::placeholder { font-family: inherit; font-weight: 400; font-size: .92rem; letter-spacing: normal; }
.files-locked .files-unlock-hint { margin: -.2rem 0 0; font-size: .78rem; color: var(--dim); }

/* Server Files unlock: six code boxes (same feel as the sign-in code page) */
.files-digits { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; }
.files-digits[hidden], .files-unlock-field[hidden], .files-unlock-btn[hidden] { display: none; }
.files-unlock-form .files-digits input.files-digit {
  flex: none; width: 50px; height: 60px; padding: 0; border-radius: 13px; box-sizing: border-box; text-align: center;
  font: 800 1.55rem var(--mono); color: var(--text); background: #070c18; border: 1px solid var(--line-strong);
  caret-color: var(--ice); outline: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.files-unlock-form .files-digits input.files-digit:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px rgba(53,215,255,.15); background: #08142a; }
.files-digits.is-full input.files-digit { border-color: rgba(94,226,154,.55); }
.files-digit-gap { width: 10px; height: 2px; flex: none; border-radius: 2px; background: var(--line-strong); }
.files-digits.is-shake { animation: files-shake .35s ease; }
@keyframes files-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.files-code-switch { margin-top: -.1rem; padding: .25rem .5rem; border: 0; background: none; color: var(--dim); font: inherit; font-size: .8rem; cursor: pointer; }
.files-code-switch b { color: var(--ice); }
.files-code-switch:hover b { text-decoration: underline; }
@media (max-width: 420px) {
  .files-unlock-form .files-digits input.files-digit { width: 40px; height: 52px; font-size: 1.3rem; }
  .files-digits { gap: .3rem; }
}

/* news editor: quick access buttons */
.news-links { display: flex; flex-direction: column; gap: .45rem; }
.news-links[hidden] { display: none; }
.news-link-row { display: flex; flex-direction: column; gap: .45rem; padding: .45rem; border-radius: 12px; background: var(--ink-0); border: 1px solid var(--line); }
.news-link-main { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: .45rem; }
.news-link-grip { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--ice); background: rgba(53,215,255,.1); }
.news-link-grip svg { width: 16px; height: 16px; }
.news-field .news-link-row input { min-width: 0; padding: .5rem .7rem; font-size: .88rem; }
.news-field .news-link-row .news-link-url { font-family: var(--mono); font-size: .8rem; }
.news-link-tools { display: flex; gap: .25rem; }
.news-link-tool { width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 8px; cursor: pointer; color: var(--dim); background: var(--ink-2); border: 1px solid var(--line-strong); transition: color .15s ease, border-color .15s ease; }
.news-link-tool svg { width: 14px; height: 14px; }
.news-link-tool:hover:not(:disabled) { color: var(--text); border-color: var(--ice); }
.news-link-tool:disabled { opacity: .35; cursor: default; }
.news-link-remove:hover:not(:disabled) { color: #ff8a8d; border-color: rgba(255,90,95,.6); }
.news-link-add { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 10px; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; color: var(--ice); background: rgba(53,215,255,.06); border: 1px dashed rgba(53,215,255,.45); }
.news-link-add svg { width: 14px; height: 14px; }
.news-link-add:hover { background: rgba(53,215,255,.12); }
.news-link-add[hidden] { display: none; }
.news-preview-links { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .9rem; }
.news-preview-links[hidden] { display: none; }
.news-preview-link { padding: .3rem .65rem; border-radius: 9px; font-size: .76rem; font-weight: 700; color: var(--text); background: var(--ink-0); border: 1px solid var(--line-strong); }
.news-preview-link.is-primary { color: #04141c; border-color: transparent; background: linear-gradient(135deg, #35d7ff, #4d8fff); }
@media (max-width: 640px) {
  .news-link-main { grid-template-columns: minmax(0, 1fr) auto; }
  .news-link-grip { display: none; }
  .news-link-main .news-link-url { grid-column: 1; }
}

/* ===== News buttons ({{button:Text}} in articles + sidebar) - 7 styles ===== */
.news-btn {
  --b1: #35d7ff; --b2: #4d8fff; --fg: #04141c;
  display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; padding: .55rem .9rem .55rem .55rem; border-radius: 13px; vertical-align: middle; box-sizing: border-box;
  font-weight: 800; font-size: .92rem; line-height: 1.2; color: var(--fg); text-decoration: none !important; border: 1px solid transparent;
  background: linear-gradient(135deg, var(--b1), var(--b2)); box-shadow: 0 12px 26px -16px color-mix(in srgb, var(--b1) 90%, transparent);
  transition: transform .14s ease, filter .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.news-btn:hover { transform: translateY(-1px); filter: brightness(1.07); color: var(--fg); }
.news-btn-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.24); border: 1px solid rgba(255,255,255,.3); }
.news-btn-ico svg { width: 16px; height: 16px; }
.news-btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-btn-go { flex: none; display: grid; place-items: center; opacity: .8; transition: transform .14s ease; }
.news-btn-go svg { width: 15px; height: 15px; }
.news-btn:hover .news-btn-go { transform: translateX(2px); }
.news-btn.is-green { --b1: #5ee29a; --b2: #22b573; --fg: #03170c; }
.news-btn.is-gold { --b1: #ffd36b; --b2: #f5a623; --fg: #1d1300; }
.news-btn.is-red { --b1: #ff7a7f; --b2: #e5484d; --fg: #fff; }
.news-btn.is-purple { --b1: #b69bff; --b2: #7c5cff; --fg: #fff; }
.news-btn.is-discord { --b1: #7984f5; --b2: #5865f2; --fg: #fff; }
.news-btn.is-secondary { --fg: var(--text); background: var(--ink-0); border-color: var(--line-strong); box-shadow: none; }
.news-btn.is-secondary .news-btn-ico { color: var(--ice); background: rgba(53,215,255,.1); border-color: rgba(53,215,255,.3); }
.news-btn.is-secondary:hover { border-color: var(--ice); filter: none; color: var(--text); }
.news-btn.is-block { display: flex; width: 100%; }
.news-btn.is-block .news-btn-label { flex: 1; }
.news-btn-row { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0 0 1.1rem; }
.news-btn-row:empty { display: none; }
p .news-btn { margin: .1rem .15rem; }
.news-btn-missing { display: inline-block; padding: .35rem .7rem; border-radius: 10px; font: 700 .78rem var(--mono); color: #ffb3b5; background: rgba(255,90,95,.08); border: 1px dashed rgba(255,90,95,.55); }

/* editor: button options row */
.news-link-opts { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .8rem; padding: .1rem .2rem .1rem 2.6rem; }
.news-link-optlabel { font: 700 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.news-style-dots { display: inline-flex; gap: .35rem; }
.news-style-dot { width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer; border: 2px solid transparent; outline: 1px solid var(--line-strong); outline-offset: 1px;
  background: linear-gradient(135deg, #35d7ff, #4d8fff); transition: transform .12s ease, outline-color .12s ease; }
.news-style-dot:hover { transform: scale(1.1); }
.news-style-dot.is-on { outline: 2px solid #fff; }
.news-style-dot.is-secondary { background: var(--ink-2); border-color: var(--line-strong); }
.news-style-dot.is-green { background: linear-gradient(135deg, #5ee29a, #22b573); }
.news-style-dot.is-gold { background: linear-gradient(135deg, #ffd36b, #f5a623); }
.news-style-dot.is-red { background: linear-gradient(135deg, #ff7a7f, #e5484d); }
.news-style-dot.is-purple { background: linear-gradient(135deg, #b69bff, #7c5cff); }
.news-style-dot.is-discord { background: linear-gradient(135deg, #7984f5, #5865f2); }
.news-link-sample { pointer-events: none; padding: .3rem .7rem; font-size: .76rem; border-radius: 9px; box-shadow: none; }
.news-link-sidebar { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--text); cursor: pointer; text-transform: none; letter-spacing: 0; font-family: var(--body); }
.news-link-used { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; color: #5ee29a; }
.news-link-used svg { width: 13px; height: 13px; }
.news-link-used[hidden] { display: none; }
.news-link-insert { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 9px; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700;
  color: var(--ice); background: rgba(53,215,255,.06); border: 1px solid rgba(53,215,255,.4); }
.news-link-insert svg { width: 13px; height: 13px; }
.news-link-insert:hover { background: rgba(53,215,255,.14); }
.news-preview-link.news-btn { padding: .3rem .65rem; font-size: .76rem; border-radius: 9px; box-shadow: none; }
@media (max-width: 640px) { .news-link-opts { padding-left: .2rem; } .news-link-insert { margin-left: 0; } }
/* in-article buttons keep their own text colour (beats .news-body a) */
.news-body a.news-btn, .news-body a.news-btn:hover { color: var(--fg); }
/* editor grows with the quick access rows instead of squeezing the article box */
.news-editor-layout { height: auto; min-height: calc(100vh - 175px); flex-shrink: 0; }
.news-field-grow textarea { min-height: 460px; }
/* the card grows with its content (the form must not shrink to the card height) */
.news-editor-card { min-height: auto; }
.news-form { flex: none; height: auto; min-height: 0; }
.news-field-grow { flex: none; }

/* ===== Custom colour picker (public/colorPicker.js) ===== */
.ocp {
  position: fixed; z-index: 3000; width: 248px; box-sizing: border-box; padding: .8rem; border-radius: 16px; display: flex; flex-direction: column; gap: .7rem;
  background: var(--ink-1, #0e1526); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(53,215,255,.06);
  animation: ocp-in .14s ease;
}
@keyframes ocp-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.ocp-sv { position: relative; height: 150px; border-radius: 11px; cursor: crosshair; touch-action: none; outline: none; overflow: hidden; }
.ocp-sv:focus-visible { box-shadow: 0 0 0 2px var(--ice); }
.ocp-sv-white, .ocp-sv-black { position: absolute; inset: 0; pointer-events: none; }
.ocp-sv-white { background: linear-gradient(90deg, #fff, rgba(255,255,255,0)); }
.ocp-sv-black { background: linear-gradient(0deg, #000, rgba(0,0,0,0)); }
.ocp-sv-thumb, .ocp-hue-thumb {
  position: absolute; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.4);
}
.ocp-hue { position: relative; height: 14px; border-radius: 999px; cursor: pointer; touch-action: none; outline: none;
  background: linear-gradient(90deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); }
.ocp-hue:focus-visible { box-shadow: 0 0 0 2px var(--ice); }
.ocp-hue-thumb { top: 50%; }
.ocp-row { display: flex; align-items: center; gap: .45rem; }
.ocp-preview { flex: none; width: 32px; height: 32px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.ocp-hexwrap { flex: 1; min-width: 0; display: flex; align-items: center; gap: .15rem; height: 32px; padding: 0 .55rem; border-radius: 9px; box-sizing: border-box;
  background: var(--ink-0); border: 1px solid var(--line-strong); font: 700 .82rem var(--mono); color: var(--dim); cursor: text; }
.ocp-hexwrap:focus-within { border-color: var(--ice); }
.ocp-hex { flex: 1; min-width: 0; width: 100%; padding: 0 !important; border: 0 !important; background: none !important; outline: none !important; box-shadow: none !important;
  font: 700 .85rem var(--mono) !important; letter-spacing: .06em; color: var(--text) !important; text-transform: uppercase; }
.ocp-done { flex: none; height: 32px; padding: 0 .75rem; border-radius: 9px; border: 0; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 800;
  color: #04141c; background: linear-gradient(135deg, #35d7ff, #4d8fff); }
.ocp-done:hover { filter: brightness(1.06); }
.ocp-presets { display: grid; grid-template-columns: repeat(10, 1fr); gap: .3rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.ocp-preset { aspect-ratio: 1; width: 100%; padding: 0; border-radius: 6px; cursor: pointer; background: var(--p); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); transition: transform .1s ease; }
.ocp-preset:hover { transform: scale(1.12); }
.ocp-preset.is-on { box-shadow: 0 0 0 2px var(--ink-1), 0 0 0 3.5px #fff; }

/* "custom colour" swatches: dark circle with a thin rainbow ring and a "+";
   once a colour is picked it fills with that colour (the ring stays, so it
   still reads as "custom") */
.aw-swatch.is-custom span, .news-style-dot.is-custom {
  position: relative; box-sizing: border-box; border: 2px solid transparent;
  background:
    linear-gradient(var(--ink-2), var(--ink-2)) padding-box,
    conic-gradient(#ff5a5f, #f5c451, #5ee29a, #35d7ff, #8b97ff, #ff7bc5, #ff5a5f) border-box;
}
.aw-swatch.is-custom span::after, .news-style-dot.is-custom::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px;
  background:
    linear-gradient(var(--text), var(--text)) center / 100% 2px no-repeat,
    linear-gradient(var(--text), var(--text)) center / 2px 100% no-repeat;
  opacity: .85;
}
.aw-swatch.is-custom.has-color span, .news-style-dot.is-custom.has-color {
  background:
    linear-gradient(var(--sw), var(--sw)) padding-box,
    conic-gradient(#ff5a5f, #f5c451, #5ee29a, #35d7ff, #8b97ff, #ff7bc5, #ff5a5f) border-box;
}
.aw-swatch.is-custom.has-color span::after, .news-style-dot.is-custom.has-color::after { display: none; }
.aw-swatch.is-custom:hover span::after, .news-style-dot.is-custom:hover::after { opacity: 1; }
/* selected: keep the rainbow ring visible, add the usual white outline */
.aw-swatch.is-custom input:checked + span { border-color: transparent; box-shadow: 0 0 0 2px var(--ink-0), 0 0 0 3.5px #fff; }
.news-style-dot.is-custom.is-on { outline: 2px solid #fff; }

/* news editor: formatting toolbar (same look as the wiki editor's) */
.news-toolbar { position: relative; display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; padding: .3rem; border-radius: 11px; background: var(--ink-0); border: 1px solid var(--line); }
.news-tool { height: 32px; min-width: 32px; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: 0 .45rem; border: 0; border-radius: 8px; background: none; color: var(--dim); cursor: pointer; font: inherit; }
.news-tool svg { width: 16px; height: 16px; flex: none; }
.news-tool:hover, .news-tool[aria-expanded="true"] { color: var(--text); background: var(--ink-2); }
.news-tool-text { font: 800 .74rem var(--mono); letter-spacing: .02em; }
.news-tool-label { font-size: .78rem; font-weight: 700; }
.news-tool.is-wide { padding: 0 .6rem; color: var(--ice); }
.news-tool-sep { width: 1px; height: 20px; margin: 0 .2rem; background: var(--line-strong); }
.news-field > .news-toolbar + textarea { margin-top: .1rem; }
.news-btn-menu {
  position: absolute; top: calc(100% + 6px); z-index: 30; min-width: 260px; max-width: 340px; padding: .35rem; border-radius: 12px; display: flex; flex-direction: column; gap: .2rem;
  background: var(--ink-1); border: 1px solid var(--line-strong); box-shadow: 0 22px 48px -18px rgba(0,0,0,.7);
}
.news-btn-menu[hidden] { display: none; }
.news-btn-menu-item { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .45rem .5rem; border: 0; border-radius: 9px; background: none; cursor: pointer; font: inherit; text-align: left; }
.news-btn-menu-item:hover { background: var(--ink-2); }
.news-btn-menu-item small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .7rem var(--mono); color: var(--dim); text-transform: none; letter-spacing: 0; }
.news-btn-menu-empty { padding: .6rem .6rem .4rem; font-size: .8rem; font-weight: 500; color: var(--dim); text-transform: none; letter-spacing: 0; font-family: var(--body); }
.news-btn-menu-add { margin-top: .15rem; padding: .5rem; border-radius: 9px; border: 1px dashed rgba(53,215,255,.45); background: rgba(53,215,255,.05); color: var(--ice); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 700; text-transform: none; letter-spacing: 0; }
.news-btn-menu-add:hover { background: rgba(53,215,255,.12); }
.news-btn-menu-item .news-btn { flex: none; white-space: nowrap; }
/* live preview: shows only the top part of the article (it scrolls inside
   itself, the fade hints there is more below) instead of the whole thing */
.news-editor-side { align-self: start; }
.news-preview-card { flex: none; display: flex; flex-direction: column; height: min(560px, 70vh); min-height: 300px; overflow: hidden; }
.news-preview-scroll { position: relative; -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); padding-bottom: 2.5rem; }

/* custom gradient buttons: the gradient swatch + From/To colour chips */
.news-style-dot.is-gradient { background: linear-gradient(135deg, #ff7bc5, #35d7ff); }
.news-style-dot.is-gradient.has-color { background: linear-gradient(135deg, var(--sw), var(--sw2)); }
.news-style-dot.is-gradient.is-on { outline: 2px solid #fff; }
.news-grad { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line-strong); }
.news-grad[hidden] { display: none; }
.news-grad-chip { display: inline-flex; align-items: center; gap: .35rem; height: 26px; padding: 0 .55rem 0 .3rem; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--ink-0); color: var(--text); cursor: pointer; font: inherit; font-size: .74rem; font-weight: 700; }
.news-grad-chip i { width: 16px; height: 16px; border-radius: 5px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.news-grad-chip:hover { border-color: var(--ice); }
.news-grad-swap { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--dim); cursor: pointer; }
.news-grad-swap svg { width: 14px; height: 14px; }
.news-grad-swap:hover { color: var(--text); background: var(--ink-1); }

/* admin wiki: approved button links */
.aw-link-row .aw-link-url { display: block; font-family: var(--mono); font-size: .72rem; word-break: break-all; }
.aw-link-form { display: flex; flex-direction: column; gap: .45rem; margin-top: .3rem; }
.aw-link-form input { height: 38px; padding: 0 .7rem; border-radius: 9px; box-sizing: border-box; background: var(--ink-0); border: 1px solid var(--line-strong); color: var(--text); font: inherit; font-size: .86rem; }
.aw-link-form input:focus { outline: none; border-color: var(--ice); }

/* admin wiki: lock a category */
.aw-lock { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap; }
.aw-lock span { display: inline-flex; align-items: center; gap: .3rem; }
.aw-lock svg { width: 13px; height: 13px; color: #f5c451; }
.aw-builtin.aw-locked { color: #f5c451; border-color: rgba(245,196,81,.45); background: rgba(245,196,81,.08); }

/* admin wiki category cards: colours + icon row, then one fixed footer row */
.aw-cat .aw-cat-row { flex-wrap: nowrap; justify-content: space-between; }
.aw-cat .aw-cat-row .aw-swatches { flex-wrap: wrap; min-width: 0; }
.aw-cat-foot { display: flex; align-items: center; gap: .45rem; padding-top: .6rem; margin-top: .1rem; border-top: 1px solid var(--line); }
.aw-foot-gap { flex: 1; }
.aw-foot-note { font: 700 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: .3rem .55rem; border-radius: 999px; border: 1px dashed var(--line-strong); }
.aw-lock-pill { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 .7rem; border-radius: 10px; cursor: pointer; font-size: .78rem; font-weight: 700; white-space: nowrap;
  color: var(--dim); background: var(--ink-1); border: 1px solid var(--line-strong); transition: color .15s ease, border-color .15s ease, background-color .15s ease; }
.aw-lock-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.aw-lock-pill span { display: inline-flex; align-items: center; gap: .35rem; }
.aw-lock-pill svg { width: 14px; height: 14px; }
.aw-lock-pill .is-on { display: none; }
.aw-lock-pill:hover { color: var(--text); border-color: rgba(245,196,81,.5); }
.aw-lock-pill:has(input:checked) { color: #f5c451; background: rgba(245,196,81,.1); border-color: rgba(245,196,81,.5); }
.aw-lock-pill:has(input:checked) .is-on { display: inline-flex; }
.aw-lock-pill:has(input:checked) .is-off { display: none; }
.aw-lock-pill:has(input:focus-visible) { outline: 2px solid var(--ice); outline-offset: 2px; }
.aw-icon-del { width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 10px; cursor: pointer; color: #ff9a9d; background: none; border: 1px solid rgba(255,90,95,.35); transition: background-color .15s ease, border-color .15s ease; }
.aw-icon-del svg { width: 16px; height: 16px; }
.aw-icon-del:hover { background: rgba(255,90,95,.1); border-color: rgba(255,90,95,.6); }
.aw-cat-foot .btn { height: 36px; display: inline-flex; align-items: center; }
.aw-lock-pill.is-saving { opacity: .7; pointer-events: none; }

/* Overview: needs attention + staff activity */
.dash-attn-clear { display: flex; align-items: center; gap: .5rem; margin: .5rem 0 0; color: #8ff0bd; font-size: .86rem; }
.dash-attn-clear svg { width: 16px; height: 16px; flex: none; }
.dash-attn-row { display: flex; align-items: center; gap: .65rem; margin-top: .5rem; padding: .55rem .7rem; border-radius: 10px; text-decoration: none; color: var(--text); background: var(--ink-2); border: 1px solid var(--line); font-size: .85rem; }
.dash-attn-row:hover { border-color: var(--line-strong); }
.dash-attn-row .n { min-width: 1.8rem; text-align: center; font-family: var(--display); font-weight: 900; font-size: 1.05rem; }
.dash-attn-row .k { flex: 1; }
.dash-attn-row .go { color: var(--dim); }
.dash-attn-row.is-hot { border-color: rgba(255,90,95,.35); background: rgba(255,90,95,.07); }
.dash-attn-row.is-hot .n { color: #ff8a8e; }
.dash-attn-row.is-calm .n { color: #7ee8ff; }
.dash-activity-range { color: var(--dim); font-size: .74rem; }
.dash-activity-head, .dash-activity-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(4, 2.25rem); align-items: center; gap: .1rem; font-size: .8rem; }
.dash-activity-head { margin-top: .55rem; padding: 0 .3rem .3rem; color: var(--dim); font-size: .6rem; text-transform: uppercase; letter-spacing: 0; border-bottom: 1px solid var(--line); }
.dash-activity-head span, .dash-activity-row > span:not(.who) { text-align: center; }
.dash-activity-row { padding: .4rem .3rem; border-bottom: 1px solid var(--line); }
.dash-activity-row:last-of-type { border-bottom: 0; }
.dash-activity-row > span:not(.who) { font-family: var(--display); font-weight: 800; }
.dash-activity-row .who { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.dash-activity-row .who img { border-radius: 5px; flex: none; image-rendering: pixelated; }
.dash-activity-row .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dash-activity-row.is-idle { opacity: .5; }

/* Users: 2FA column */
.us-2fa { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--dim); background: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; }
.us-2fa svg { width: 13px; height: 13px; }
.us-2fa.is-on { color: #5ee29a; background: rgba(94,226,154,.1); border-color: rgba(94,226,154,.35); }
.btn.aw-danger { color: #ff8a8e; }
.btn.aw-danger:hover { color: #ff5a5f; border-color: rgba(255,90,95,.45); }

/* ---------- ticket forms (staff applications, appeals, reports) shown as a form ---------- */
.ticket-msg:has(.tf) { width: 100%; max-width: 820px; }
.tf { display: flex; flex-direction: column; gap: 1rem; margin-top: .35rem; }
.tf-section { display: flex; flex-direction: column; gap: .6rem; }
.tf-section-head { display: flex; align-items: baseline; gap: .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.tf-section-head span { font: 700 .72rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ice); }
.tf-section-head small { font-size: .74rem; color: var(--dim); }
.tf-facts { display: flex; flex-direction: column; margin: 0; border-radius: 12px; background: var(--ink-1); border: 1px solid var(--line); overflow: hidden; }
.tf-fact { display: grid; grid-template-columns: minmax(150px, 40%) minmax(0, 1fr); gap: 1rem; align-items: baseline; padding: .6rem .9rem; }
.tf-fact + .tf-fact { border-top: 1px solid var(--line); }
.tf-fact dt { font-size: .82rem; color: var(--dim); line-height: 1.4; }
.tf-fact dd { margin: 0; font-size: .9rem; font-weight: 600; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.tf-qa { display: flex; flex-direction: column; gap: .4rem; padding: .8rem .9rem; border-radius: 12px; background: var(--ink-1); border: 1px solid var(--line); }
.tf-q { display: flex; align-items: flex-start; gap: .6rem; font-size: .84rem; font-weight: 700; color: var(--text); line-height: 1.4; }
.tf-n { flex: none; min-width: 1.6rem; height: 1.6rem; padding: 0 .3rem; border-radius: 7px; display: grid; place-items: center; font: 800 .72rem var(--mono); color: var(--ice); background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.3); }
.tf-a { padding-left: 2.2rem; font-size: .9rem; line-height: 1.6; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.tf-a.is-empty { color: var(--dim); font-style: italic; }
@media (max-width: 640px) { .tf-a { padding-left: 0; } .tf-fact { grid-template-columns: minmax(0, 1fr); gap: .2rem; } }

/* ticket list: one-line preview under the subject */
.ticket-subject-cell .ticket-row-preview { display: block; margin-top: .15rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; font-weight: 500; color: var(--dim); }
.ticket-subject-cell { max-width: 320px; }
/* drop the less important columns before the tables run off the screen */
@media (max-width: 1800px) { .tk-table .tk-col-created, .us-table .us-col-registered { display: none; } }
@media (max-width: 1600px) { .tk-table .tk-col-assigned, .us-table .us-col-discord { display: none; } }
@media (max-width: 1500px) { .us-table .us-col-lastlogin, .tk-table .tk-col-updated { display: none; } .tk-table .ticket-subject-cell { max-width: 240px; } }

/* Admin -> Wiki: compact category list - click a row to open its edit form */
.aw-cats { display: flex !important; flex-direction: column; gap: .4rem; }
.aw-cat-item { border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); overflow: hidden; }
.aw-cat-item[open] { border-color: color-mix(in srgb, var(--c, #35d7ff) 45%, transparent); }
.aw-cat-sum { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; cursor: pointer; list-style: none; }
.aw-cat-sum::-webkit-details-marker { display: none; }
.aw-cat-sum:hover { background: var(--ink-1); }
.aw-cat-sum-ico { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--c, var(--ice)); background: color-mix(in srgb, var(--c, #35d7ff) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c, #35d7ff) 32%, transparent); }
.aw-cat-sum-ico svg { width: 16px; height: 16px; }
.aw-cat-sum-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.aw-cat-sum-text b { font-size: .9rem; }
.aw-cat-sum-text small { font-size: .76rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-cat-sum-tags { display: flex; align-items: center; gap: .5rem; flex: none; }
.aw-cat-sum-count { font: 700 .72rem var(--mono); color: var(--dim); min-width: 4.5rem; text-align: right; }
.aw-cat-sum-order { font: 700 .7rem var(--mono); color: var(--dim); opacity: .7; min-width: 2rem; text-align: right; }
.aw-builtin.aw-open { color: #5ee29a; border-color: rgba(94,226,154,.35); background: rgba(94,226,154,.08); }
.aw-cat-sum-edit { display: inline-flex; align-items: center; gap: .25rem; flex: none; font-size: .78rem; font-weight: 700; color: var(--ice); }
.aw-cat-sum-edit svg { width: 14px; height: 14px; transition: transform .15s ease; }
.aw-cat-item[open] .aw-cat-sum-edit svg { transform: rotate(180deg); }
.aw-cat-item > .aw-cat { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; }
.aw-cat-item.is-new .aw-cat-sum-ico { color: var(--ice); }
.aw-reports-top.has-reports { border-color: rgba(255,90,95,.4); box-shadow: inset 3px 0 0 #ff5a5f; }
@media (max-width: 760px) { .aw-cat-sum-order, .aw-cat-sum-text small { display: none; } }

/* Admin -> Wiki: category pages */
.aw-cat-pager { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .3rem .1rem; }
.aw-cat-pager > a { font-size: .82rem; font-weight: 700; color: var(--ice); text-decoration: none; }
.aw-cat-pager-pages { display: flex; gap: .3rem; }
.aw-cat-pager-pages a { min-width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 8px; font: 700 .78rem var(--mono); color: var(--dim); text-decoration: none; border: 1px solid var(--line); background: var(--ink-2); }
.aw-cat-pager-pages a.is-active { color: var(--text); border-color: rgba(53,215,255,.5); background: rgba(53,215,255,.1); }

/* Admin -> Player page (playerTimeline.js) */
.pl-head { width: 52px; height: 52px; border-radius: 12px; image-rendering: pixelated; flex: none; border: 1px solid var(--line); }
.pl-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.pl-status { display: inline-flex; align-items: center; padding: .1rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 800; border: 1px solid currentColor; }
.pl-status.is-alive, .pl-status.is-online { color: #5ee29a; }
.pl-status.is-eliminated { color: #ff5a5f; }
.pl-filters { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .8rem; }
.pl-filter { padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--ink-2); color: var(--dim); font-family: inherit; font-weight: 700; font-size: .78rem; cursor: pointer; }
.pl-filter:hover { color: var(--text, #fff); }
.pl-filter.is-on { color: var(--ice); border-color: color-mix(in srgb, var(--ice) 50%, transparent); background: color-mix(in srgb, var(--ice) 10%, transparent); }
.pl-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.pl-timeline::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.pl-ev { --c: #8a94a6; position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: .7rem; align-items: start; padding: .45rem 0; }
.pl-ev[hidden] { display: none; }
.pl-ev[data-group="game"] { --c: #35d7ff; }
.pl-ev[data-kind="death"] { --c: #ff5a5f; }
.pl-ev[data-group="tickets"] { --c: #b18cff; }
.pl-ev[data-group="wiki"] { --c: #5ee29a; }
.pl-ev[data-group="purchases"] { --c: #ffcc4d; }
.pl-ev.is-kick { --c: #f5a623; } .pl-ev.is-mute { --c: #f5c451; } .pl-ev.is-unmute { --c: #5ee29a; }
.pl-ev.is-ban { --c: #ff5a5f; } .pl-ev.is-unban { --c: #35d7ff; } .pl-ev.is-alt { --c: #b18cff; }
.pl-ev.is-failed { opacity: .55; }
.pl-ev-ico { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 14%, var(--ink-1, #0d1117)); border: 1px solid color-mix(in srgb, var(--c) 38%, transparent); }
.pl-ev-ico svg { width: 15px; height: 15px; }
.pl-ev-body { min-width: 0; padding-top: .3rem; }
.pl-ev-title { font-size: .88rem; font-weight: 700; overflow-wrap: anywhere; }
.pl-ev-title a { color: inherit; }
.pl-ev-title a:hover { color: var(--ice); }
.pl-ev-ref { margin-left: .4rem; font: 700 .72rem var(--mono); color: var(--dim); }
.pl-ev-detail { margin-top: .1rem; font-size: .8rem; color: var(--dim); overflow-wrap: anywhere; }
.pl-ev-when { padding-top: .3rem; font-size: .76rem; color: var(--dim); text-align: right; white-space: nowrap; display: flex; flex-direction: column; }
.pl-ev-when small { font-size: .7rem; opacity: .8; }
.pl-side { display: flex; flex-direction: column; gap: 1rem; }
.pl-side .md-card { margin: 0; }
.pl-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .4rem .8rem; margin: 0; font-size: .82rem; }
.pl-facts dt { color: var(--dim); }
.pl-facts dd { margin: 0; text-align: right; }
.pl-break { overflow-wrap: anywhere; }
.pl-mono { font: .72rem var(--mono); }
.pl-yes { color: #5ee29a; font-weight: 700; } .pl-no { color: #f5a623; font-weight: 700; }
.pl-rank { display: inline-block; margin: 0 0 .2rem .25rem; padding: .05rem .45rem; border-radius: 6px; font-size: .72rem; font-weight: 800; color: #0b0f14; background: linear-gradient(90deg, var(--a), var(--b)); }
.pl-tickets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.pl-tickets a { display: flex; flex-direction: column; padding: .45rem .6rem; border-radius: 10px; border: 1px solid var(--line); background: var(--ink-2); color: inherit; text-decoration: none; }
.pl-tickets a:hover { border-color: color-mix(in srgb, var(--ice) 45%, transparent); }
.pl-tickets b { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-tickets span { font-size: .74rem; color: var(--dim); }
.pl-side-link { display: inline-block; margin-top: .7rem; font-size: .8rem; font-weight: 700; color: var(--ice); }
@media (max-width: 640px) { .pl-ev { grid-template-columns: 32px minmax(0, 1fr); } .pl-ev-when { grid-column: 2; text-align: left; padding-top: 0; flex-direction: row; gap: .4rem; } }

/* Shared moderation panel (public/modPanel.js) - player page + ticket sidebar */
.mp { display: flex; flex-direction: column; gap: .6rem; font-size: .82rem; }
.mp-note { margin: 0; color: var(--dim); font-size: .8rem; }
.mp-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.mp-chip { padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--line); font-size: .72rem; font-weight: 700; color: var(--dim); }
.mp-chip.is-good { color: #5ee29a; border-color: rgba(94,226,154,.4); }
.mp-chip.is-warn { color: #f5c451; border-color: rgba(245,196,81,.4); }
.mp-chip.is-bad { color: #ff5a5f; border-color: rgba(255,90,95,.4); }
.mp-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.mp-btn { padding: .3rem .7rem; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-2); color: inherit; font-weight: 700; font-size: .78rem; cursor: pointer; }
.mp-btn:hover { border-color: color-mix(in srgb, var(--ice) 50%, transparent); color: var(--ice); }
.mp-btn.is-danger:hover { border-color: rgba(255,90,95,.6); color: #ff5a5f; }
.mp-form { display: flex; flex-direction: column; gap: .45rem; padding: .6rem; border-radius: 10px; border: 1px solid var(--line); background: var(--ink-1, rgba(0,0,0,.2)); }
.mp-form[hidden] { display: none; }
.mp-form-title { font-weight: 800; }
.mp-durs { display: flex; flex-wrap: wrap; gap: .3rem; }
.mp-dur { padding: .2rem .5rem; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--dim); font-size: .74rem; font-weight: 700; cursor: pointer; }
.mp-dur.is-on { color: var(--ice); border-color: color-mix(in srgb, var(--ice) 55%, transparent); }
.mp-reason { width: 100%; box-sizing: border-box; padding: .4rem .55rem; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-2); color: inherit; font: inherit; }
.mp-form-row { display: flex; gap: .35rem; }
.mp-hist-head { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.mp-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.mp-hist li { display: flex; flex-direction: column; padding-left: .55rem; border-left: 2px solid var(--line); }
.mp-hist li.is-failed { opacity: .55; }
.mp-hist b { font-size: .8rem; }
.mp-hist span { font-size: .74rem; color: var(--dim); overflow-wrap: anywhere; }

/* Admin ticket sidebar: player history link, application review */
.td-player-link { display: inline-block; margin-top: .6rem; font-size: .8rem; font-weight: 700; color: var(--ice); }
.ta-status { display: inline-flex; align-items: center; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 800; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); --c: #8a94ab; }
.ta-status.is-sm { padding: .02rem .45rem; font-size: .66rem; vertical-align: 1px; }
.ta-status.is-interview { --c: #35d7ff; } .ta-status.is-accepted { --c: #5ee29a; } .ta-status.is-rejected { --c: #ff5a5f; }
.ta-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ta-dim { color: var(--dim); font-size: .76rem; font-weight: 500; }
.ta-tally { display: flex; gap: .4rem; margin: .7rem 0; }
.ta-tally span { flex: 1; text-align: center; padding: .35rem 0; border-radius: 9px; border: 1px solid var(--line); font-size: .74rem; color: var(--dim); }
.ta-tally b { display: block; font-size: 1.05rem; color: var(--c); }
.ta-tally .is-yes, .ta-vote.is-yes, .ta-vote-pick .is-yes { --c: #5ee29a; }
.ta-tally .is-unsure, .ta-vote.is-unsure, .ta-vote-pick .is-unsure { --c: #f5c451; }
.ta-tally .is-no, .ta-vote.is-no, .ta-vote-pick .is-no { --c: #ff5a5f; }
.ta-votes { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ta-votes li { font-size: .8rem; }
.ta-votes p { margin: .2rem 0 0; padding-left: .55rem; border-left: 2px solid var(--line); color: var(--dim); white-space: pre-wrap; overflow-wrap: anywhere; }
.ta-vote { display: inline-block; margin-right: .3rem; padding: 0 .4rem; border-radius: 6px; font-size: .7rem; font-weight: 800; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); }
.ta-form { display: flex; flex-direction: column; gap: .45rem; padding-top: .75rem; margin-top: .75rem; border-top: 1px solid var(--line); }
.ta-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.ta-label .ta-dim { text-transform: none; letter-spacing: 0; }
.ta-vote-pick { display: flex; gap: .35rem; }
.ta-vote-pick label { flex: 1; cursor: pointer; }
.ta-vote-pick input { position: absolute; opacity: 0; pointer-events: none; }
.ta-vote-pick span { display: block; text-align: center; padding: .35rem 0; border-radius: 8px; border: 1px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--dim); }
.ta-vote-pick input:checked + span { color: var(--c); border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); }
.ta-vote-pick input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 2px; }
.ta-form textarea, .ta-select { width: 100%; box-sizing: border-box; padding: .45rem .55rem; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-2); color: inherit; font: inherit; font-size: .82rem; resize: vertical; }
.ta-form textarea[hidden] { display: none; }
.ta-check { display: flex; align-items: center; gap: .4rem; font-size: .8rem; cursor: pointer; }
.ta-row { display: flex; gap: .35rem; }
.ta-form .btn { align-self: flex-start; }

/* Admin quick search (Ctrl+K) - public/adminSearch.js */
.admin-search-btn { display: flex; align-items: center; gap: .55rem; width: 100%; margin: 0 0 1rem; padding: .5rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--ink-2); color: var(--dim); font-family: inherit; font-weight: 600; font-size: .84rem; cursor: pointer; text-align: left; }
.admin-search-btn:hover { color: var(--ice); border-color: color-mix(in srgb, var(--ice) 45%, transparent); }
.admin-search-btn svg { width: 16px; height: 16px; flex: none; }
.admin-search-btn span { flex: 1; }
.admin-search-btn kbd, .qs-kbd { font: 700 .66rem var(--mono); padding: .1rem .35rem; border-radius: 5px; border: 1px solid var(--line); color: var(--dim); }
.qs-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(3, 6, 14, .6); backdrop-filter: blur(3px); }
.qs-overlay[hidden] { display: none; }
.qs-box { width: 100%; max-width: 600px; max-height: 70vh; display: flex; flex-direction: column; border-radius: 16px; border: 1px solid var(--line); background: var(--ink-1, #0b1224); box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; }
.qs-bar { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; border-bottom: 1px solid var(--line); color: var(--dim); }
.qs-bar svg { width: 18px; height: 18px; flex: none; }
.qs-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font-family: inherit; font-weight: 600; font-size: 1rem; color: var(--text, #e8eefc); }
.qs-input::-webkit-search-cancel-button { display: none; }
.qs-list { overflow-y: auto; padding: .4rem; }
.qs-group { padding: .55rem .6rem .25rem; font: 700 .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.qs-item { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: 10px; color: inherit; text-decoration: none; }
.qs-item.is-active { background: color-mix(in srgb, var(--ice) 12%, transparent); }
.qs-head { width: 28px; height: 28px; border-radius: 7px; image-rendering: pixelated; flex: none; }
.qs-dot { width: 28px; height: 28px; border-radius: 8px; flex: none; background: color-mix(in srgb, var(--c, #35d7ff) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c, #35d7ff) 40%, transparent); }
.qs-dot-tickets { --c: #b18cff; } .qs-dot-wiki { --c: #5ee29a; } .qs-dot-pages { --c: #35d7ff; }
.qs-text { display: flex; flex-direction: column; min-width: 0; }
.qs-text b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-text small { font-size: .74rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-empty { margin: 0; padding: 1rem .6rem; color: var(--dim); font-size: .84rem; }
html.qs-open { overflow: hidden; }
.pl-ev[data-kind="reported"] { --c: #ff8a5c; }

/* Admin ticket sidebar: main card (requester + details) + accordion cards */
.td-main-card .td-requester { display: flex; align-items: center; gap: .7rem; }
.td-main-card .td-requester-text { flex: 1; min-width: 0; }
.td-main-card .td-requester-text .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.td-history-btn { flex: none; padding: .3rem .6rem; border-radius: 8px; border: 1px solid var(--line); font-size: .74rem; font-weight: 700; color: var(--ice); text-decoration: none; }
.td-history-btn:hover { border-color: color-mix(in srgb, var(--ice) 50%, transparent); background: color-mix(in srgb, var(--ice) 8%, transparent); }
.td-main-rows { margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); }
.td-main-card .td-participants { margin-top: .7rem; }
.ticket-detail-sidebar .ticket-sidebar-card:not(.td-main-card) .ticket-sidebar-label-row { cursor: pointer; user-select: none; }
.ticket-detail-sidebar .ticket-sidebar-card:not(.td-main-card):not(.is-open):hover .ticket-sidebar-label { color: var(--ice); }
.ticket-detail-sidebar .ticket-sidebar-body[hidden] { display: none; }
.td-label-name { margin-left: .35rem; color: var(--text, #e9eef8); letter-spacing: .04em; }
.td-main-rows { display: flex; flex-direction: column; gap: .45rem; }
.ticket-detail-sidebar .ticket-sidebar-card:not(.td-main-card):not(.is-open) { padding-top: .8rem; padding-bottom: .8rem; }

/* Death info: staff ban instead of a normal death */
.td-ban-box { padding: .6rem .75rem; border-radius: 10px; border: 1px solid rgba(255,90,95,.4); background: rgba(255,90,95,.08); }
.td-ban-title { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #ff6b6f; }
.td-ban-box p { margin: .25rem 0 0; font-size: .84rem; overflow-wrap: anywhere; }
/* custom dropdown menus can be long (categories) */
.ticket-detail-sidebar .custom-select-menu { max-height: 260px; overflow-y: auto; }

/* Teams: member head hover card extras (card itself is .dash-head-tip from the Overview) */
.tm-tip-status { font-weight: 600; }
.tm-tip-status.is-online { color: #5ee29a; }
.tm-tip-status.is-dead { color: #ff6b6f; }
.tm-chat-range { margin-left: .35rem; font-size: .9em; opacity: .7; text-transform: none; letter-spacing: 0; }

/* Saved replies - picker in the ticket reply box */
.td-composer-box { position: relative; }
.td-composer-icon.sr-open-btn { width: auto; gap: .35rem; padding: 0 .55rem; font-size: .76rem; font-weight: 700; }
.sr-open-btn svg { width: 15px; height: 15px; }
.sr-open-btn[aria-expanded="true"] { color: var(--ice); border-color: color-mix(in srgb, var(--ice) 50%, transparent); }
.sr-pop { position: absolute; left: .6rem; right: .6rem; bottom: calc(100% + 6px); z-index: 30; max-width: 560px; display: flex; flex-direction: column; max-height: 360px; border-radius: 12px; border: 1px solid var(--line-strong, var(--line)); background: var(--ink-2); box-shadow: 0 18px 40px -12px rgba(0,0,0,.7); overflow: hidden; }
.sr-pop[hidden] { display: none; }
.sr-pop-head { display: flex; align-items: center; gap: .5rem; padding: .55rem; border-bottom: 1px solid var(--line); }
.sr-pop-search { flex: 1; min-width: 0; padding: .4rem .6rem; border-radius: 8px; border: 1px solid var(--line); background: var(--ink-1); color: inherit; font: inherit; font-size: .84rem; }
.sr-pop-manage { font-size: .76rem; font-weight: 700; color: var(--ice); white-space: nowrap; }
.sr-pop-list { overflow-y: auto; padding: .35rem; }
.sr-item { display: flex; align-items: stretch; gap: .25rem; }
.sr-item-pick { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; padding: .5rem .6rem; border: 0; border-radius: 9px; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.sr-item-pick.is-active { background: color-mix(in srgb, var(--ice) 11%, transparent); }
.sr-item-top { display: flex; align-items: center; gap: .45rem; }
.sr-item-top b { font-size: .84rem; }
.sr-item-cat { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); padding: .02rem .35rem; border-radius: 5px; border: 1px solid var(--line); }
.sr-item-body { font-size: .76rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-item-edit { align-self: center; padding: .3rem .5rem; border-radius: 7px; font-size: .72rem; font-weight: 700; color: var(--dim); text-decoration: none; }
.sr-item-edit:hover { color: var(--ice); background: var(--ink-1); }
.sr-empty { margin: 0; padding: .8rem .6rem; font-size: .82rem; color: var(--dim); }
/* Saved replies - config view (Tickets -> Saved Replies) */
.sr-new-line { display: flex; align-items: center; gap: .6rem; }
.sr-new-plus { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; color: var(--ice); border: 1px dashed color-mix(in srgb, var(--ice) 55%, transparent); }
.sr-new-row b { color: var(--ice); }
.sr-list-flash { margin-left: auto; font-size: .78rem; color: #5ee29a; font-weight: 700; }
.sr-all-chip { display: inline-flex; padding: .1rem .5rem; border-radius: 999px; border: 1px dashed var(--line-strong, var(--line)); font-size: .72rem; font-weight: 700; color: var(--dim); }
.sr-edit-card { display: flex; flex-direction: column; gap: 1rem; }
.sr-field { display: flex; flex-direction: column; gap: .4rem; }
.sr-field > span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.sr-field input[type="text"] { padding: .55rem .7rem; border-radius: 9px; border: 1px solid var(--line); background: var(--ink-2); color: inherit; font: inherit; }
.sr-cat-pick { display: flex; flex-wrap: wrap; gap: .4rem; }
.sr-cat-pick input { position: absolute; opacity: 0; pointer-events: none; }
.sr-cat-pick span { display: inline-flex; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line); font-size: .78rem; font-weight: 700; color: var(--dim); cursor: pointer; --c: hsl(var(--cat-hue, 195) 80% 62%); }
.sr-cat-pick span.is-all { --c: var(--ice); }
.sr-cat-pick span:hover { color: var(--c); }
.sr-cat-pick input:checked + span { color: var(--c); border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 12%, transparent); }
.sr-cat-pick input:focus-visible + span { outline: 2px solid var(--ice); outline-offset: 2px; }
.sr-actions { display: flex; gap: .5rem; }
.sr-delete:hover { color: #ff6b6f; border-color: rgba(255,90,95,.5); }
/* Appeal decision card (ticket sidebar) */
.ap-error { margin: .6rem 0 0; padding: .5rem .65rem; border-radius: 8px; border: 1px solid rgba(255,90,95,.45); background: rgba(255,90,95,.08); color: #ff8a8d; font-size: .8rem; }
.ap-form { margin-top: .7rem; }
.ap-unban[hidden] { display: none; }
.ap-unban > span { display: flex; flex-direction: column; }
.ap-unban small { font-size: .72rem; color: var(--dim); }
.ap-form .ta-check input[disabled] + span { opacity: .6; }
/* Account page: standing card */
.ac-standing-line { margin: .2rem 0 0; font-size: .86rem; color: var(--dim); }
.ac-standing-item { display: flex; flex-direction: column; gap: .2rem; margin-top: .7rem; padding: .65rem .8rem; border-radius: 10px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 8%, transparent); }
.ac-standing-item.is-ban { --c: rgba(255,90,95,.45); }
.ac-standing-item.is-mute { --c: rgba(245,196,81,.45); }
.ac-standing-item b { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.ac-standing-item.is-ban b { color: #ff6b6f; }
.ac-standing-item.is-mute b { color: #f5c451; }
.ac-standing-item span { font-size: .88rem; overflow-wrap: anywhere; }
.ac-standing-item small { font-size: .76rem; color: var(--dim); }
.ac-standing-item a { font-size: .82rem; font-weight: 700; color: var(--ice); margin-top: .15rem; }
.ac-standing-appeals { display: flex; flex-direction: column; gap: .4rem; margin-top: .85rem; }
.ac-standing-sub { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.ac-appeal { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .65rem; border-radius: 9px; border: 1px solid var(--line); color: inherit; text-decoration: none; }
.ac-appeal:hover { border-color: color-mix(in srgb, var(--ice) 45%, transparent); }
.ac-appeal > span:first-child { display: flex; flex-direction: column; }
.ac-appeal b { font-size: .84rem; }
.ac-appeal small { font-size: .74rem; color: var(--dim); }
.ac-appeal-status { flex: none; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 800; border: 1px solid currentColor; }
.ac-appeal-status.is-approved { color: #5ee29a; }
.ac-appeal-status.is-denied { color: #ff6b6f; }
.ac-appeal-status.is-waiting { color: #f5c451; }
.ac-appeal-status.is-closed { color: var(--dim); }

/* Appeal decision card: standard buttons/checkboxes, reply box only after picking */
.ap-form.ta-form { margin-top: .2rem; padding-top: .85rem; gap: .65rem; }
.ap-picks { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ap-picks .btn { justify-content: center; width: 100%; }
.ta-check { gap: .55rem; font-size: .84rem; }
.ap-form .ap-unban { align-items: flex-start; padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--ink-2); }
.ap-form .ap-unban .custom-checkbox { margin-top: .1rem; }
.ap-form .ta-message { min-height: 110px; line-height: 1.45; }

/* Tickets -> Decision Messages */
.dm-tone { display: inline-flex; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 800; color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: color-mix(in srgb, var(--c) 10%, transparent); --c: #8a94ab; }
.dm-tone.is-good { --c: #5ee29a; } .dm-tone.is-bad { --c: #ff6b6f; } .dm-tone.is-info { --c: #35d7ff; }
.dm-used { display: flex; align-items: center; gap: .6rem; font-size: .84rem; color: var(--dim); }
.dm-used .dm-tone { margin-left: 0; }
/* Tickets tool tabs: six of them now - tighter, and icon-only (except the active one) on narrower screens */
.tk-tool { padding: .48rem .65rem; gap: .4rem; }
.tk-tools { flex-wrap: nowrap; }
@media (max-width: 1440px) { .tk-tool:not(.is-active) span { display: none; } .tk-tool:not(.is-active) { padding: .48rem .55rem; } }
@media (max-width: 760px) { .tk-tools { flex-wrap: wrap; } }
/* Owner-only "View as": banner at the top while previewing, picker on the Permissions page */
.view-as-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem; padding: .55rem .8rem; border-radius: 12px; border: 1px solid #f5a623; background: color-mix(in srgb, #f5a623 12%, transparent); font-size: .8rem; color: var(--text); }
.view-as-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: #f5a623; box-shadow: 0 0 0 4px color-mix(in srgb, #f5a623 25%, transparent); flex: none; }
.view-as-text { flex: 1 1 260px; }
.view-as-stop { background: #f5a623; color: #1a1205; border: 0; border-radius: 8px; padding: .35rem .75rem; font: inherit; font-weight: 700; cursor: pointer; }
.view-as-stop:hover { filter: brightness(1.08); }
.va-sub { margin: .35rem 0 .75rem; font-size: .76rem; line-height: 1.4; color: var(--dim); }
.va-dd { position: relative; }
.va-dd-btn { width: 100%; display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--ink-2); color: var(--text); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; text-align: left; transition: border-color .12s ease, box-shadow .12s ease; }
.va-dd-btn:hover, .va-dd.is-open .va-dd-btn { border-color: #35d7ff; box-shadow: 0 0 0 3px color-mix(in srgb, #35d7ff 18%, transparent); }
.va-dd-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: color-mix(in srgb, #35d7ff 15%, transparent); color: #35d7ff; flex: none; }
.va-dd-icon svg { width: 15px; height: 15px; }
.va-dd-value { flex: 1; }
.va-dd-chevron { width: 16px; height: 16px; color: var(--dim); transition: transform .15s ease; flex: none; }
.va-dd.is-open .va-dd-chevron { transform: rotate(180deg); }
.va-dd-menu { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: .3rem; list-style: none; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); box-shadow: 0 14px 34px rgba(0, 0, 0, .45); }
.va-dd-menu[hidden] { display: none; }
.va-dd-option { display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem; border-radius: 8px; cursor: pointer; outline: none; }
.va-dd-option:hover, .va-dd-option:focus { background: color-mix(in srgb, #35d7ff 12%, transparent); }
.va-dd-option-text { flex: 1; display: flex; flex-direction: column; gap: .1rem; }
.va-dd-option-label { font-size: .84rem; font-weight: 700; color: var(--text); }
.va-dd-option-hint { font-size: .7rem; color: var(--dim); }
.va-dd-check { width: 15px; height: 15px; color: #35d7ff; visibility: hidden; flex: none; }
.va-dd-option.is-selected .va-dd-check { visibility: visible; }
/* Test Server power controls, inside the restart card. The card's pw-<state> class sets --pw (the state colour). */
.cs-restart-card { --pw: #8d97ad; }
.cs-restart-card.pw-online { --pw: #5ee29a; }
.cs-restart-card.pw-offline { --pw: #ff5a5f; }
.cs-restart-card.pw-starting, .cs-restart-card.pw-stopping { --pw: #f5a623; }
.cs-restart-card .cs-restart-titles { flex: 1; min-width: 0; }
.cs-restart-card.is-power-off .restart-view { display: none !important; }
.cs-restart-card.is-power-off .cs-restart-icon { color: var(--pw); background: color-mix(in srgb, var(--pw) 12%, transparent); border-color: color-mix(in srgb, var(--pw) 35%, transparent); }
.cs-power-pill { flex: none; display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .55rem; border-radius: 999px; font-family: var(--mono); font-size: .66rem; font-weight: 700; color: var(--pw); border: 1px solid color-mix(in srgb, var(--pw) 40%, transparent); background: color-mix(in srgb, var(--pw) 8%, transparent); }
.cs-power-pill[hidden] { display: none; }
.cs-power-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pw); }
.cs-restart-card.pw-online .cs-power-pill-dot { box-shadow: 0 0 6px var(--pw); animation: pulse-dot 1.6s ease-in-out infinite; }
.cs-power-view { display: flex; flex-direction: column; }
.cs-power-view[hidden] { display: none; }
/* same size and look as the restart timer well, so the card doesn't jump around when the server comes up */
.cs-power-well { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin: .9rem 0 .8rem; padding: 1.4rem 1rem 1.1rem; border-radius: 14px; text-align: center;
  background: radial-gradient(ellipse at top, color-mix(in srgb, var(--pw) 13%, transparent), transparent 70%), #070c18; border: 1px solid var(--line-strong); }
.cs-power-orb { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: .45rem; border-radius: 50%; color: var(--pw);
  background: color-mix(in srgb, var(--pw) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pw) 40%, transparent); box-shadow: 0 0 28px -6px color-mix(in srgb, var(--pw) 60%, transparent); }
.cs-power-orb svg { width: 28px; height: 28px; }
.cs-power-orb::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--pw); opacity: 0; }
.cs-restart-card.pw-starting .cs-power-orb::after, .cs-restart-card.pw-stopping .cs-power-orb::after { animation: cs-power-ping 1.2s ease-out infinite; }
@keyframes cs-power-ping { from { transform: scale(.9); opacity: .8; } to { transform: scale(1.35); opacity: 0; } }
.cs-power-state { font-family: var(--display); font-weight: 900; font-size: 2.2rem; line-height: 1; color: var(--pw); letter-spacing: -.01em; }
.cs-power-detail { font-family: var(--mono); font-size: .7rem; color: color-mix(in srgb, var(--pw) 55%, var(--dim)); }
.cs-power-track { width: 100%; height: 6px; margin-top: .8rem; border-radius: 999px; background: #1c2a4a; overflow: hidden; position: relative; }
.cs-power-track span { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: inherit; background: var(--pw); }
.cs-restart-card.pw-starting .cs-power-track span, .cs-restart-card.pw-stopping .cs-power-track span { width: 35%; animation: cs-power-slide 1.3s ease-in-out infinite; }
@keyframes cs-power-slide { from { left: -35%; } to { left: 100%; } }
.cs-power-btn[hidden] { display: none; }
.cs-power-btn svg { width: 14px; height: 14px; }
.cs-power-btn.is-start { border-color: rgba(94,226,154,.55); background: linear-gradient(180deg, rgba(94,226,154,.22), rgba(94,226,154,.08)); color: #8ff0bd; box-shadow: 0 10px 24px -16px rgba(94,226,154,.9); }
.cs-power-btn.is-start:hover { background: linear-gradient(180deg, rgba(94,226,154,.32), rgba(94,226,154,.14)); }
.cs-power-btn.is-stop { border-color: rgba(255,90,95,.45); background: rgba(255,90,95,.08); color: #ff9a9d; box-shadow: none; }
.cs-power-btn.is-stop:hover { background: rgba(255,90,95,.16); }
.cs-power-btn.is-busy { cursor: default; border-color: rgba(245,166,35,.35); background: rgba(245,166,35,.06); color: #ffc46b; box-shadow: none; }
.cs-restart-card.pw-unknown .cs-power-btn.is-busy { border-color: var(--line); background: var(--ink-2); color: var(--dim); }
.cs-power-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 30%, transparent); border-top-color: currentColor; animation: cs-power-spin .8s linear infinite; }
@keyframes cs-power-spin { to { transform: rotate(360deg); } }
.cs-restart-actions { display: flex; gap: .5rem; }
.cs-restart-actions[hidden] { display: none; }
.cs-restart-actions .cs-restart-btn { flex: 1 1 0; min-width: 0; }
.cs-restart-actions.has-stop .cs-restart-btn { font-size: .85rem; }
.restart-default[hidden] ~ .cs-power-btn { display: none; }
.cs-power-view.is-confirming .cs-power-btn { display: none; }
.cs-restart-card .cs-power-confirm { margin-top: .6rem; }
/* Stats card + console while the selected server is off */
.cs-stats-card-offline, #cs-stats-card.is-offline .cs-meters, #cs-stats-card.is-offline .cs-players { display: none; }
.cs-stats-offline { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; margin-top: .7rem; padding: 1.4rem 1rem; border-radius: 14px; border: 1px dashed color-mix(in srgb, #ff5a5f 35%, var(--line)); background: color-mix(in srgb, #ff5a5f 5%, transparent); }
.cs-stats-offline[hidden] { display: none; }
.cs-stats-offline-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #ff7a7e; background: color-mix(in srgb, #ff5a5f 13%, transparent); margin-bottom: .2rem; }
.cs-stats-offline-icon svg { width: 20px; height: 20px; }
.cs-stats-offline-title { font-weight: 800; color: var(--text); font-size: .95rem; }
.cs-stats-offline-sub { font-size: .76rem; color: var(--dim); line-height: 1.4; max-width: 240px; }
.cs-status.is-offline { color: #ff7a7e; border-color: rgba(255,90,95,.4); background: rgba(255,90,95,.07); }
.cs-offline-banner { flex: none; display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem; font-size: .78rem; color: #ffb0b2; background: rgba(255,90,95,.08); border-bottom: 1px solid rgba(255,90,95,.25); }
.cs-offline-banner[hidden] { display: none; }
.cs-offline-banner svg { width: 15px; height: 15px; flex: none; color: #ff7a7e; }
.cs-offline-banner b { color: #fff; }


/* ---- Overview revamp: network strip in the hero, ring gauges for SMP health ---- */
.dash-network { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .4rem; max-width: 660px; }
.dash-net-server { --sc: #5ee29a; display: inline-flex; align-items: center; gap: .45rem; height: 32px; padding: 0 .4rem 0 .65rem; border-radius: 999px; text-decoration: none; color: var(--text);
  background: color-mix(in srgb, var(--sc) 8%, rgba(7,12,24,.6)); border: 1px solid color-mix(in srgb, var(--sc) 30%, var(--line)); transition: border-color .15s ease, transform .15s ease; }
.dash-net-server:hover { border-color: color-mix(in srgb, var(--sc) 60%, transparent); transform: translateY(-1px); }
.dash-net-server.is-offline { --sc: #ff5a5f; }
.dash-net-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--sc); box-shadow: 0 0 8px var(--sc); }
.dash-net-server.is-offline .dash-net-dot { box-shadow: none; }
.dash-net-name { font-size: .78rem; font-weight: 700; white-space: nowrap; }
.dash-net-val { min-width: 22px; height: 22px; padding: 0 .45rem; display: inline-grid; place-items: center; border-radius: 999px; font-family: var(--mono); font-size: .68rem; font-weight: 800; color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, transparent); }
.dash-net-vps-link { display: inline-flex; align-items: center; gap: .35rem; height: 32px; padding: 0 .7rem; border-radius: 999px; font-size: .76rem; font-weight: 700; color: var(--ice); text-decoration: none; border: 1px solid rgba(53,215,255,.3); background: rgba(53,215,255,.06); }
.dash-net-vps-link:hover { background: rgba(53,215,255,.12); }
.dash-net-vps-link svg { width: 14px; height: 14px; }

.dash-gauge { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto auto; column-gap: .7rem; row-gap: .1rem; align-content: center; padding: 1rem .9rem; position: relative; overflow: hidden; }
.dash-gauge .dash-health-top { display: contents; }
.dash-gauge .dash-ring-wrap { grid-row: 1 / 4; grid-column: 1; align-self: center; }
.dash-gauge .stat-label { grid-column: 2; align-self: end; font-size: .72rem; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dash-gauge .stat-value { grid-column: 2; font-size: 1.5rem; line-height: 1.05; }
.dash-gauge .stat-value-sub { grid-column: 2; font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-ring-wrap { position: relative; width: 46px; height: 46px; display: block; }
.dash-ring { width: 46px; height: 46px; transform: rotate(-90deg); display: block; }
.dash-ring-track { fill: none; stroke: var(--ink-2); stroke-width: 5; }
.dash-ring-fill { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 157.08; transition: stroke-dashoffset .6s ease, stroke .6s ease; filter: drop-shadow(0 0 4px rgba(94,226,154,.25)); }
.dash-ring-wrap .dash-ring-icon { position: absolute; inset: 9px; width: auto; height: auto; border-radius: 50%; }
.dash-ring-wrap .dash-ring-icon svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .dash-network { justify-content: flex-start; max-width: none; }
}

/* ---- VPS page ---- */
.vps-hero h1 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.vps-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .35rem; }
.vps-chip { padding: .25rem .6rem; border-radius: 999px; font-size: .76rem; color: var(--text); background: rgba(7,12,24,.5); border: 1px solid var(--line); }
.vps-chip b { font-weight: 800; }
.vps-chip.is-dim { color: var(--dim); }
.vps-hero-side { display: flex; gap: .7rem; flex-wrap: wrap; }
.vps-hero-stat { display: flex; flex-direction: column; gap: .2rem; min-width: 130px; padding: .75rem .95rem; border-radius: 12px; background: rgba(7,12,24,.55); border: 1px solid var(--line); }
.vps-hero-stat .k { font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.vps-hero-stat .v { font-family: var(--display); font-weight: 900; font-size: 1.35rem; }
.vps-hero-stat .v.is-mono { font-family: var(--mono); font-size: 1rem; font-weight: 700; padding-top: .2rem; }
.vps-gauges { margin-top: 1.2rem; }
.vps-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.vps-span-2 { grid-column: 1 / -1; }
.vps-card-note { font-family: var(--mono); font-size: .66rem; color: var(--dim); }
.vps-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.vps-chart { padding: .7rem .8rem .5rem; border-radius: 12px; background: #070c18; border: 1px solid var(--line-strong); min-width: 0; }
.vps-chart-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: .78rem; font-weight: 800; }
.vps-legend { display: inline-flex; align-items: center; gap: .35rem; font-size: .66rem; font-weight: 600; color: var(--dim); }
.vps-legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); margin-left: .25rem; }
.vps-chart svg { width: 100%; height: 110px; display: block; overflow: hidden; }
.vps-split { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #1c2a4a; }
.vps-split span { height: 100%; transition: width .5s ease; }
.vps-split-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .74rem; color: var(--dim); }
.vps-split-key { display: inline-flex; align-items: center; gap: .35rem; }
.vps-split-key i { width: 8px; height: 8px; border-radius: 2px; }
.vps-split-key b { color: var(--text); font-weight: 800; }
.vps-cores-label { display: flex; justify-content: space-between; align-items: baseline; margin-top: .3rem; font-size: .74rem; font-weight: 700; color: var(--dim); }
.vps-cores { display: grid; grid-template-columns: repeat(auto-fit, minmax(14px, 1fr)); gap: .3rem; height: 86px; }
.vps-core { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .2rem; min-width: 0; }
.vps-core-track { flex: 1; width: 100%; display: flex; align-items: flex-end; border-radius: 4px; background: var(--ink-2); overflow: hidden; }
.vps-core-track span { width: 100%; border-radius: 4px; background: #5ee29a; transition: height .5s ease, background .5s ease; }
.vps-core small { font-family: var(--mono); font-size: .56rem; color: var(--dim); }
.vps-kv-list { display: flex; flex-direction: column; gap: .1rem; }
.vps-kv { display: flex; justify-content: space-between; gap: .5rem; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
.vps-kv:last-of-type { border-bottom: none; }
.vps-kv .k { color: var(--dim); }
.vps-kv .v { font-weight: 800; font-variant-numeric: tabular-nums; }
.vps-hint { margin: .2rem 0 0; font-size: .72rem; line-height: 1.45; color: var(--dim); }
.vps-srv-list { display: flex; flex-direction: column; gap: .5rem; }
.vps-srv { --sc: #5ee29a; display: grid; grid-template-columns: minmax(170px, 1.3fr) 1fr 1fr 1fr; align-items: center; gap: 1.2rem; padding: .75rem .9rem; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--line); }
.vps-srv.is-off { --sc: #ff5a5f; }
.vps-srv-id { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.vps-srv-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 11px; color: var(--sc); background: color-mix(in srgb, var(--sc) 13%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent); }
.vps-srv-icon svg { width: 18px; height: 18px; }
.vps-srv-names { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.vps-srv-name { font-weight: 800; font-size: .92rem; }
.vps-srv-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; color: var(--dim); white-space: nowrap; }
.vps-srv-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 6px var(--sc); }
.vps-srv.is-off .vps-srv-status i { box-shadow: none; }
.vps-srv-metric { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.vps-srv-metric-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.vps-srv-metric-top .k { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.vps-srv-metric-top .v { font-weight: 800; font-size: .84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vps-srv-bar { height: 5px; border-radius: 999px; background: #070c18; overflow: hidden; }
.vps-srv-bar span { display: block; height: 100%; border-radius: inherit; transition: width .5s ease; }
.vps-srv-off { grid-column: span 2; font-size: .76rem; color: var(--dim); font-style: italic; }
.vps-storage { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
@media (max-width: 900px) {
  .vps-srv { grid-template-columns: 1fr 1fr; }
  .vps-srv-id { grid-column: 1 / -1; }
  .vps-srv-off { grid-column: 1 / -1; }
  .vps-storage { grid-template-columns: 1fr; }
}
.vps-fs { display: flex; flex-direction: column; gap: .1rem; }
.vps-fs + .vps-fs { margin-top: .4rem; }
.vps-fs-top { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; }
.vps-fs-name { font-weight: 700; }
.vps-fs-val { font-family: var(--mono); font-size: .72rem; color: var(--dim); }
.vps-folder { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: .6rem; padding: .3rem 0; font-size: .8rem; }
.vps-folder-name { font-family: var(--mono); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vps-folder-bar { height: 6px; border-radius: 999px; background: var(--ink-2); overflow: hidden; }
.vps-folder-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4d8fff, #35d7ff); }
.vps-folder-val { font-family: var(--mono); font-size: .72rem; color: var(--dim); }
@media (max-width: 900px) {
  .vps-grid, .vps-charts { grid-template-columns: 1fr; }
}
.vps-core { cursor: default; }
.vps-core:hover .vps-core-track { box-shadow: 0 0 0 1px var(--line-strong); }
.vps-core-tip-badge { width: 42px; height: 34px; display: grid; place-items: center; border-radius: 8px; font-family: var(--display); font-weight: 900; font-size: .82rem; }
.vps-core-tip .vps-mini { margin-left: .2rem; width: 56px; }

/* ---- Permissions rebuild: role summary, one sticky column header, collapsible sections ---- */
.pm-board { --pm-col: 112px; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.pm-roles { display: grid; grid-template-columns: repeat(var(--pm-roles), minmax(0, 1fr)); gap: .7rem; }
.pm-role-card { display: flex; flex-direction: column; gap: .55rem; padding: .9rem 1rem; border-radius: var(--radius); background: var(--ink-1); border: 1px solid var(--line); }
.pm-role-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pm-role-name { font-family: var(--mono); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.pm-role-lock svg { width: 13px; height: 13px; color: var(--dim); }
.pm-role-figures { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.pm-role-figures span { display: inline-flex; align-items: baseline; gap: .15rem; }
.pm-role-figures b { font-family: var(--display); font-weight: 900; font-size: 1.45rem; line-height: 1; color: var(--text); }
.pm-role-figures small { font-size: .72rem; color: var(--dim); }
.pm-role-bar { height: 5px; border-radius: 999px; background: var(--ink-2); overflow: hidden; }
.pm-role-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #4d8fff, #35d7ff); transition: width .4s ease; }
.pm-role-card.is-locked { opacity: .7; }
.pm-board .pm-toolbar { display: flex; align-items: center; gap: .5rem; position: static; margin: 0; }
.pm-board .pm-search { flex: 1; }
.pm-tool-btn { height: 38px; padding: 0 .85rem; border-radius: 10px; border: 1px solid var(--line); background: var(--ink-1); color: var(--dim); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.pm-tool-btn:hover { color: var(--text); border-color: var(--line-strong); }
.pm-colhead, .pm-sec-head, .pm-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--pm-roles), var(--pm-col)); align-items: center; }
.pm-colhead { position: sticky; top: 0; z-index: 5; padding: .55rem 1rem; border-radius: 12px; background: rgba(10,17,34,.96); border: 1px solid var(--line); backdrop-filter: blur(6px); }
.pm-colhead .pm-item-col, .pm-colhead-role { font-family: var(--mono); font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pm-colhead-role { text-align: center; color: var(--text); }
.pm-colhead-role.is-locked { color: var(--dim); }
.pm-section { border-radius: var(--radius); background: var(--ink-1); border: 1px solid var(--line); overflow: hidden; transition: border-color .15s ease; }
.pm-section[hidden] { display: none; }
.pm-section.is-open { border-color: var(--line-strong); }
.pm-sec-head { padding: .75rem 1rem; cursor: pointer; transition: background .12s ease; }
.pm-section.is-single .pm-sec-head { cursor: default; }
.pm-section:not(.is-single) .pm-sec-head:hover { background: rgba(255,255,255,.025); }
.pm-sec-id { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.pm-board .pm-section-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--ice); background: rgba(53,215,255,.1); border: 1px solid rgba(53,215,255,.25); font-size: 0; }
.pm-board .pm-section-icon svg { width: 17px; height: 17px; }
.pm-sec-text { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.pm-sec-title { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.pm-sec-title h2 { margin: 0; font-size: .95rem; font-weight: 800; }
.pm-board .pm-section-sub { font-size: .72rem; color: var(--dim); font-family: inherit; letter-spacing: 0; text-transform: none; }
.pm-chevron { margin-left: auto; margin-right: .6rem; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--dim); transition: transform .2s ease, color .12s ease, background .12s ease; }
.pm-chevron svg { width: 15px; height: 15px; }
.pm-sec-head:hover .pm-chevron { color: var(--text); background: rgba(255,255,255,.05); }
.pm-section.is-open .pm-chevron { transform: rotate(180deg); }
.pm-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; }
.pm-cell.is-page-off .owner-toggle { opacity: .35; }
.pm-sec-count { font-family: var(--mono); font-size: .62rem; font-weight: 700; color: var(--dim); }
.pm-sec-count.is-full { color: #5ee29a; }
.pm-sec-count.is-off { color: #ff8a8d; }
.pm-sec-body { display: none; border-top: 1px solid var(--line); background: rgba(7,12,24,.35); }
.pm-section.is-open .pm-sec-body, .pm-board.is-filtering .pm-sec-body { display: block; }
.pm-row { padding: .55rem 1rem .55rem 4.1rem; border-bottom: 1px solid rgba(255,255,255,.04); transition: background .12s ease; }
.pm-row:last-child { border-bottom: none; }
.pm-row:hover { background: rgba(255,255,255,.025); }
.pm-row[hidden] { display: none; }
.pm-row .pm-item-col { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.pm-row .pm-item-name { font-size: .84rem; font-weight: 600; color: var(--text); }
.pm-tag { display: inline-flex; align-items: center; padding: .08rem .45rem; border-radius: 999px; font-family: var(--mono); font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pm-tag.is-sensitive { color: #ff8a8d; background: rgba(255,90,95,.1); border: 1px solid rgba(255,90,95,.35); }
.pm-subgroup { padding: .6rem 1rem .35rem 4.1rem; font-family: var(--mono); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid rgba(255,255,255,.04); }
.pm-subgroup[hidden] { display: none; }
@media (max-width: 760px) {
  .pm-board { --pm-col: 64px; }
  .pm-roles { grid-template-columns: 1fr; }
  .pm-row, .pm-subgroup { padding-left: 1rem; }
  .pm-colhead-role { font-size: .54rem; }
}

/* ---- Two staff agreements: tabs on the Permissions card, steps on the sign page, doc tabs in the editor ---- */
.pm-agree-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; padding: .25rem; border-radius: 11px; background: var(--ink-2); border: 1px solid var(--line); }
.pm-agree-tab { height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--dim); font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.pm-agree-tab:hover { color: var(--text); }
.pm-agree-tab.is-active { color: var(--text); background: var(--ink-1); box-shadow: 0 0 0 1px var(--line-strong); }
.pm-agree-doc { display: flex; flex-direction: column; gap: .85rem; }
.pm-agree-doc[hidden] { display: none; }
.pm-agree-doc-title { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .82rem; }
.pm-agree-unpublished { display: flex; gap: .6rem; align-items: flex-start; padding: .75rem .8rem; border-radius: 11px; font-size: .78rem; line-height: 1.45; color: var(--dim); background: rgba(245,166,35,.06); border: 1px dashed rgba(245,166,35,.35); }
.pm-agree-unpublished svg { width: 16px; height: 16px; flex: none; color: #f5a623; margin-top: .1rem; }
.pm-agree-unpublished b { color: var(--text); }
.ag-steps { list-style: none; display: flex; gap: .6rem; flex-wrap: wrap; margin: 1rem 0 0; padding: 0; }
.ag-step-item a { display: flex; align-items: center; gap: .6rem; padding: .55rem .85rem .55rem .55rem; border-radius: 12px; text-decoration: none; color: var(--dim); background: rgba(7,12,24,.5); border: 1px solid var(--line); }
.ag-step-item.is-current a { color: var(--text); border-color: rgba(53,215,255,.45); background: rgba(53,215,255,.07); }
.ag-step-num { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: .8rem; background: var(--ink-2); border: 1px solid var(--line-strong); }
.ag-step-num svg { width: 14px; height: 14px; }
.ag-step-item.is-done .ag-step-num { color: #062314; background: #5ee29a; border-color: #5ee29a; }
.ag-step-item.is-current .ag-step-num { border-color: var(--ice); color: var(--ice); }
.ag-step-text { display: flex; flex-direction: column; font-size: .84rem; font-weight: 700; }
.ag-step-text small { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.ae-doc-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.ae-doc-tab { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .95rem; border-radius: 12px; text-decoration: none; color: var(--dim); background: var(--ink-1); border: 1px solid var(--line); }
.ae-doc-tab:hover { color: var(--text); border-color: var(--line-strong); }
.ae-doc-tab.is-active { color: var(--text); border-color: rgba(53,215,255,.45); background: rgba(53,215,255,.07); }
.ae-doc-tab-title { font-weight: 800; font-size: .88rem; }
.ae-doc-tab-meta { font-family: var(--mono); font-size: .64rem; color: var(--dim); }
.ae-section-tools button.is-armed, .ae-discard.is-armed, #ae-version-load.is-armed { width: auto; padding: 0 .6rem; color: #fff; background: #ff5a5f; border-color: #ff5a5f; }
.ae-armed-label { font-size: .74rem; font-weight: 800; white-space: nowrap; }
.pm-former { border-top: 1px solid var(--line); padding-top: .7rem; }
.pm-former summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-family: var(--mono); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pm-former summary::-webkit-details-marker { display: none; }
.pm-former summary::after { content: "▾"; margin-left: .4rem; transition: transform .15s ease; }
.pm-former[open] summary::after { transform: rotate(180deg); }
.pm-former summary span:first-child { flex: 1; }
.pm-former-count { padding: .05rem .45rem; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line); color: var(--text); }
.pm-former-note { margin: .5rem 0 .4rem; font-size: .74rem; color: var(--dim); }
.owner-signature-row.is-former { opacity: .8; }
.pm-former-sub { font-size: .7rem; color: var(--dim); }
.pm-agree-card .status.is-former { color: #c4c9d4; background: rgba(107,114,128,.18); border: 1px solid rgba(107,114,128,.45); }

/* chat channel labels matching in-game: staff chat in staff orange, DMs in pink */
.chat-direction-pill.is-staff { color: #ffa500; border-color: rgba(255,165,0,.5); background: rgba(255,165,0,.12); }
.chat-direction-pill.is-staff.chat-direction-discord { color: #ffb84d; }
.chat-direction-pill.is-dm { color: #ff6bd6; border-color: rgba(255,107,214,.5); background: rgba(255,107,214,.12); }
.chat-thread[data-channel="private"] .chat-msg-text { color: #ffe8f7; }
.chat-thread[data-channel="staff"] .chat-bubble-discord .chat-msg-text,
.chat-thread[data-channel="staff"] .chat-bubble-web .chat-msg-text { color: #ffd9a0; }

/* --- Admin panel on phones ------------------------------------------------
   Below 900px the sidebar becomes a slim sticky top bar (logo + menu button);
   the full menu (search, nav, profile) opens as a drop-down under it. The page
   scrolls normally instead of being clamped to the viewport, so the content
   gets the whole screen. Wide tables keep scrolling sideways inside their box. */
.admin-mobile-menu { display: none; }
@media (max-width: 900px) {
  .admin-body { height: auto; min-height: 100vh; overflow: visible; }
  .admin-shell { display: block; height: auto; }
  .admin-sidebar {
    position: sticky; top: 0; z-index: 60; width: 100%; height: auto; max-height: none; overflow: visible;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: .6rem;
    padding: .6rem .85rem; border-right: none; border-bottom: 1px solid var(--line);
    background: rgba(8, 12, 22, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .admin-brand { margin: 0; padding: .45rem .6rem; flex: 1 1 auto; min-width: 0; }
  .admin-brand img { width: 26px; height: 26px; }
  .admin-mobile-menu {
    display: inline-flex; align-items: center; justify-content: center; position: relative; flex: none;
    width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong);
    background: var(--ink-2); color: var(--text); cursor: pointer;
  }
  .admin-mobile-menu svg { width: 22px; height: 22px; }
  .admin-mobile-menu .icon-close { display: none; }
  .admin-menu-open .admin-mobile-menu .icon-open { display: none; }
  .admin-menu-open .admin-mobile-menu .icon-close { display: block; }
  .admin-mobile-menu-dot {
    position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%;
    background: #ff5a5f; box-shadow: 0 0 8px rgba(255, 90, 95, .7);
  }
  /* the menu itself: hidden until the button is tapped */
  .admin-sidebar > :not(.admin-brand):not(.admin-mobile-menu):not(script) { display: none; }
  .admin-menu-open .admin-sidebar {
    max-height: 100vh; overflow-y: auto; align-content: flex-start;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  }
  .admin-menu-open .admin-sidebar > :not(.admin-brand):not(.admin-mobile-menu):not(script) { display: flex; flex: 1 1 100%; }
  .admin-menu-open .admin-sidebar > .admin-nav-label { display: block; margin-top: .4rem; }
  .admin-menu-open .admin-sidebar > .admin-nav { flex-direction: column; }
  .admin-menu-open .admin-sidebar > .admin-sidebar-footer { display: block; padding-bottom: .4rem; }
  .admin-nav a, .admin-nav-group-toggle { padding: .7rem .8rem; font-size: .95rem; }
  .admin-nav-submenu a { padding: .6rem .7rem; }
  .admin-search-btn kbd { display: none; }

  .admin-main { overflow: visible; padding: 1.1rem .85rem 3rem; gap: 1.25rem; }
  .admin-main .table-wrap { -webkit-overflow-scrolling: touch; }
  .admin-main img, .admin-main video, .admin-main canvas { max-width: 100%; }
  /* one-column page layouts must be allowed to shrink below their widest child (a "1fr" column won't) */
  .admin-main :is(.overview-page-layout, .tickets-page-layout, .ticket-detail-layout, .ticket-new-layout,
    .ticket-chat-layout, .owner-layout, .board-detail-layout, .board-columns) { grid-template-columns: minmax(0, 1fr); }
  .admin-main > *, .admin-main section, .admin-main .overview-main-stack { min-width: 0; max-width: 100%; }
  .chart-card-head { flex-wrap: wrap; gap: .6rem; }
  .range-toggle { flex-wrap: wrap; }
  /* moderation / wiki stat tiles: let the text wrap instead of pushing the column off-screen */
  .md-stat { min-width: 0; padding: .8rem .85rem; gap: .65rem; }
  .md-stat > * { min-width: 0; overflow-wrap: anywhere; }
  /* console: the log toolbar (levels, voice chat, follow, buttons) wraps onto a second line */
  .cs-term-actions { flex-wrap: wrap; row-gap: .45rem; justify-content: flex-start; }
  .tk-status-tabs { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .dash-health { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
  .dash-gauge { grid-template-columns: 38px 1fr; padding: .85rem .7rem; column-gap: .55rem; }
  .dash-health-tile .stat-value { font-size: 1.35rem; }
}