/* ==========================================================================
   ThaiGovAgency — SHARED DESIGN SYSTEM
   --------------------------------------------------------------------------
   ONE source of truth for the whole platform. Every layer loads this file
   FIRST, then its own stylesheet for the few extras that layer needs.

   The user panel is the reference design. The public site and the admin panel
   are deliberately styled to match it exactly — same header, same sidebar,
   same cards, tables, buttons and badges. Only the navigation CONTENT differs
   between layers, never the look.

   The component rules below are written with multi-layer selectors
   (.m-card, .a-card) because the three layers already use their own prefixes
   in the views; unifying the declaration here is what stops the three themes
   drifting apart again.
   ========================================================================== */

:root {
    /* ---- brand ---------------------------------------------------------- */
    /* The deep navy the public hero uses. All four areas share it, so the public
       site, the member/agent area and the admin panel read as one product rather
       than three skins. */
    --t-purple:      #6a1b9a;
    --t-purple-2:    #a51b6f;
    --t-pink:        #e91e63;
    --t-head-grad:   linear-gradient(100deg, #0d1226 0%, #151d38 52%, #241a3a 100%);

    /* ---- shell ---------------------------------------------------------- */
    --t-side:        #131a2e;
    --t-side-2:      #1e2740;
    --t-side-txt:    #aab3c8;
    --t-head-h:      58px;

    /* ---- surfaces ------------------------------------------------------- */
    --t-bg:          #f4f6f9;
    --t-surface:     #ffffff;
    --t-text:        #333333;
    --t-muted:       #7a8290;
    --t-line:        #e3e7ef;

    /* ---- accents -------------------------------------------------------- */
    --t-red:         #d32f2f;
    --t-red-2:       #b71c1c;
    --t-green:       #2e7d32;
    --t-amber:       #ef6c00;
    --t-blue:        #1565c0;
    --t-teal:        #00897b;

    /* ---- tints (the reference's light-blue cards and summary rows) ------ */
    --t-blue-card:   #e3f2fd;
    --t-blue-line:   #cfe6fb;
    --t-blue-head:   #b3e5fc;
    --t-yellow-tint: #fff9c4;
    --t-green-tint:  #c8e6c9;
    /* One tint per accent, so a coloured surface always has a matching wash
       instead of borrowing the blue one. */
    --t-red-tint:    #fdeaea;
    --t-amber-tint:  #fff2e0;
    --t-teal-tint:   #e0f4f2;
    --t-purple-tint: #f3ebfa;

    /* ---- shape ---------------------------------------------------------- */
    --t-radius:      12px;
    --t-radius-lg:   18px;
    --t-shadow:      0 1px 2px rgba(16, 24, 40, .04), 0 8px 20px rgba(16, 24, 40, .06);
    --t-shadow-lg:   0 18px 40px rgba(9, 14, 30, .22);

    /* ---- call to action ------------------------------------------------- */
    /* The one gradient action. Built from the brand red and purple so it stays
       in-palette. Used by the .cta button modifier (auth, play and member CTAs);
       the admin panel keeps the flat primary. */
    --t-cta-grad:       linear-gradient(100deg, #d32f2f 0%, #a51b6f 55%, #6a1b9a 100%);
    --t-cta-grad-hover: linear-gradient(100deg, #b71c1c 0%, #8e1559 55%, #561680 100%);
    --t-cta-shadow:     0 8px 20px rgba(165, 27, 111, .28);
    --t-ring:           0 0 0 3px rgba(211, 47, 47, .28);
}

* { box-sizing: border-box; }

body {
    margin: 0; background: var(--t-bg); color: var(--t-text); line-height: 1.5;
    font-family: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    font-size: 13px; -webkit-font-smoothing: antialiased;
}
a { color: var(--t-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: var(--t-text); }

/* ==========================================================================
   THE SHELL — identical in every layer
   ========================================================================== */
.t-shell { min-height: 100vh; }

/* full-width gradient header, sitting above the sidebar */
.t-head {
    position: sticky; top: 0; z-index: 100;
    height: var(--t-head-h);
    /* Safe-area aware. env() resolves to 0 unless the viewport opts into the notch,
       so this is identical to 16px on every device without one. */
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
    display: flex; align-items: center; gap: 12px;
    background: var(--t-head-grad); color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.t-head .burger {
    background: none; border: 0; cursor: pointer; padding: 6px;
    display: grid; place-items: center; gap: 4px; border-radius: 6px;
}
.t-head .burger span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }
.t-head .burger:hover { background: rgba(255, 255, 255, .14); }
.t-head .brand { font-size: 15.5px; font-weight: 700; color: #fff; letter-spacing: .2px; }
.t-head .brand:hover { text-decoration: none; }
/* An uploaded logo replaces the wordmark. Height is capped so a tall file cannot
   stretch the bar, and the width follows the file's own proportions. */
.t-head .brand img { height: 26px; width: auto; display: block; }
.t-head .spacer { flex: 1; }
.t-head .t-bell { color: #fff; font-size: 17px; position: relative; text-decoration: none; }
.t-head .t-bell .dot {
    position: absolute; top: -4px; right: -6px; background: #fff; color: var(--t-red);
    font-size: 10px; font-weight: 700; border-radius: 999px; padding: 0 5px;
    min-width: 15px; text-align: center;
}
.t-head .who { font-size: 13px; font-weight: 600; color: #fff; }
.t-head .who b { display: block; }
.t-head .who span { font-size: 11px; opacity: .85; }

.t-avatar {
    width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .22); color: #fff; font-weight: 700; font-size: 11px;
    overflow: hidden; flex: 0 0 auto;
}
.t-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* account dropdown in the header */
/* ---------------------------- the account chip ---------------------------- */
/* Avatar first, then the name with the balance under it, inside a pill. The balance
   is the number an agent checks constantly, so it belongs in the header rather than
   three clicks into a profile page. */
.t-user { position: relative; }
.t-user-btn {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px; padding: 3px 9px 3px 4px;
    cursor: pointer; font-family: inherit; color: #fff;
    transition: background .15s, border-color .15s, transform .12s ease;
}
.t-user-btn:hover { background: rgba(255, 255, 255, .19); border-color: rgba(255, 255, 255, .30); }
.t-user-btn:active { transform: translateY(1px); }
.t-user-btn .t-avatar { width: 29px; height: 29px; font-size: 11.5px; }
.t-user-btn .who { font-size: 12.5px; font-weight: 700; line-height: 1.25; text-align: left; }
.t-user-btn .who b { display: block; }
.t-user-btn .who .bal { font-size: 11px; font-weight: 600; opacity: .88; font-variant-numeric: tabular-nums; }
.t-user-btn .caret { font-size: 9px; opacity: .75; transition: transform .18s ease; }
.t-user.open .t-user-btn .caret { transform: rotate(180deg); }

/* ---------------------------- the account menu ---------------------------- */
/* The chip and the panel are one control: the panel drops out of the chip (um-drop)
   instead of snapping in, and the chevron flips while it is open. */
.t-user-menu {
    position: absolute; right: 0; top: calc(100% + 12px); z-index: 120; min-width: 280px;
    background: #fff; border: 1px solid var(--t-line); border-radius: 14px;
    box-shadow: var(--t-shadow-lg); display: none; overflow: hidden; padding-bottom: 7px;
    transform-origin: top right;
}
.t-user.open .t-user-menu { display: block; animation: um-drop .18s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes um-drop {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* Identity band. The avatar is a solid chip here -- the header's translucent white
   one is invisible against a light panel. */
.um-head {
    display: flex; align-items: center; gap: 11px; padding: 13px 14px 12px;
    background: linear-gradient(135deg, #eef4ff 0%, #fff 82%);
    border-bottom: 1px solid var(--t-line); margin-bottom: 7px;
}
.um-head .t-avatar { width: 42px; height: 42px; font-size: 14px; background: var(--t-blue); color: #fff; }
.um-id b { display: block; font-size: 14px; line-height: 1.3; }
.um-id span { display: block; font-size: 11.5px; color: var(--t-muted); font-variant-numeric: tabular-nums; }

/* Balances read as label/value pairs, not four items strung across one row. */
.um-bal {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 12px;
    margin: 0 9px 8px; padding: 10px 12px; border-radius: 10px;
    background: linear-gradient(135deg, var(--t-blue-card) 0%, #fff 80%);
    border: 1px solid var(--t-blue-line);
}
.um-bal span { font-size: 11px; font-weight: 700; color: #14507f; }
.um-bal b { font-size: 13.5px; font-variant-numeric: tabular-nums; text-align: right; }

/* The list, then a hairline, then sign out -- so signing out never reads as just
   the next item in the list. */
.um-list {
    display: grid; gap: 2px; padding: 0 6px 7px; margin-bottom: 6px;
    border-bottom: 1px solid var(--t-line);
}
.t-user-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 9px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--t-text);
    transition: background .13s ease;
}
.t-user-menu a:hover { background: #f4f6fb; text-decoration: none; }
.t-user-menu a:active { background: #e9eef7; }
.t-user-menu a .i {
    width: 28px; height: 28px; border-radius: 9px; flex: 0 0 auto;
    display: grid; place-items: center; font-size: 12px;
    background: var(--t-blue-card); color: #14507f; transition: background .13s ease;
}
.t-user-menu a:hover .i { background: var(--t-blue-line); }
.t-user-menu a.um-out { color: var(--t-red); margin: 0 6px; }
.t-user-menu a.um-out .i { background: var(--t-red-tint); color: var(--t-red); }
.t-user-menu a.um-out:hover { background: var(--t-red-tint); }
.t-user-menu a.um-out:hover .i { background: #f7d3d3; }

.t-wrap { display: flex; align-items: flex-start; }

/* ------------------------------- sidebar --------------------------------- */
.t-side {
    width: 240px; flex: 0 0 240px; background: var(--t-side);
    min-height: calc(100vh - var(--t-head-h));
    position: sticky; top: var(--t-head-h); height: calc(100vh - var(--t-head-h));
    display: flex; flex-direction: column; overflow: hidden;
}
.t-shell.collapsed .t-side { display: none; }

/* The list does the scrolling, so the footer below it stays pinned. min-height:0 lets
   the flex child shrink to the sidebar and scroll instead of growing to its content,
   and the dark-track scrollbar belongs to the navy rail in every layer. */
.t-nav {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;            /* never chain the scroll to the page */
    -webkit-overflow-scrolling: touch;       /* momentum on iOS */
    padding: 12px 0 18px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .20) transparent;
}
.t-nav::-webkit-scrollbar { width: 8px; }
.t-nav::-webkit-scrollbar-track { background: transparent; }
.t-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 999px; }
.t-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .30); }

/* Section headings. The admin sidebar labels its groups with `.grp`, the member panel
   with `.label`; a COLLAPSIBLE group uses `.t-group` below, so the heading padding can
   never land on a group container again. */
.t-nav > .label,
.t-nav > .grp {
    font-size: 10px; letter-spacing: 1.3px; text-transform: uppercase;
    color: #7c88a4; padding: 18px 16px 8px; font-weight: 700; display: block;
}
.t-nav > .label:first-child,
.t-nav > .grp:first-child { padding-top: 6px; }

/* One row: a plain link, or a group's toggle button. */
.t-nav a, .t-nav .grp-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 16px; color: var(--t-side-txt); font-size: 13.5px; font-weight: 500;
    border-left: 3px solid transparent; line-height: 1.35; text-align: left;
    transition: background .14s, color .14s;
    background: none; border-top: 0; border-right: 0; border-bottom: 0;
    font-family: inherit; cursor: pointer; text-decoration: none;
}
.t-nav a:hover, .t-nav .grp-row:hover { background: var(--t-side-2); color: #fff; text-decoration: none; }
/* The title of a group is a toggle, so it reads bold and a shade brighter than the
   plain links around it; the rows it opens stay regular weight. */
.t-nav .grp-row { font-weight: 700; color: #c2cadb; }
.t-nav a.active {
    background: linear-gradient(90deg, rgba(211, 47, 47, .18), rgba(211, 47, 47, 0) 72%), var(--t-side-2);
    color: #fff; border-left-color: var(--t-red); font-weight: 600;
}
/* An open group reads as the current section, the same way an active link does. */
.t-nav .t-group.open > .grp-row,
.t-nav .t-group.open > .grp-head > .grp-row { background: var(--t-side-2); color: #fff; }
/* A group whose title is also a link keeps a separate caret control, so the title can
   navigate while the caret still opens and closes the child list. */
.t-nav .grp-head { display: flex; align-items: center; }
.t-nav .grp-head .grp-row { flex: 1 1 auto; width: auto; }
.t-nav .grp-tog {
    flex: 0 0 auto; display: grid; place-items: center; padding: 11px 14px;
    background: none; border: 0; color: #c2cadb; font: inherit; cursor: pointer;
    transition: background .14s, color .14s;
}
.t-nav .grp-tog:hover { background: var(--t-side-2); color: #fff; }

/* Every nav icon sits in its own chip. The tone classes below colour the chip
   per section, which is what gives the sidebar its colour without shouting. */
.t-nav .ico {
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; font-size: 13.5px;
    display: grid; place-items: center; opacity: 1;
    background: rgba(255, 255, 255, .07); color: var(--t-side-txt);
    transition: background .14s, color .14s;
}
.t-nav a:hover .ico, .t-nav .grp-row:hover .ico { background: rgba(255, 255, 255, .14); color: #fff; }
.t-nav a.active .ico { background: rgba(255, 255, 255, .18); color: #fff; }

.t-nav .tone-blue   .ico { background: rgba(79, 140, 255, .20); color: #8fb7ff; }
.t-nav .tone-teal   .ico { background: rgba(0, 191, 165, .20); color: #4fd8c8; }
.t-nav .tone-amber  .ico { background: rgba(239, 140, 0, .22);  color: #ffb257; }
.t-nav .tone-purple .ico { background: rgba(139, 92, 246, .22); color: #b9a2ff; }
.t-nav .tone-red    .ico { background: rgba(229, 62, 62, .22);  color: #ff8f8f; }
.t-nav .tone-green  .ico { background: rgba(34, 160, 90, .22);  color: #79dd9f; }

.t-nav .dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--t-red);
    display: inline-block; flex: 0 0 auto; margin-left: auto;
}
/* Two auto margins would split the free space, so the caret only claims it when it
   is the last thing in the row. */
.t-nav .dot + .caret { margin-left: 0; }
/* admin pill and member count are the same badge */
.t-nav .count, .t-nav .pill {
    margin-left: auto; background: var(--t-red); color: #fff; font-size: 10px;
    font-weight: 700; padding: 1px 7px; border-radius: 999px;
}
.t-nav .count.gray, .t-nav .pill.gray { background: #4a5262; color: #c8ccd4; }

.t-nav .grp-row .caret, .t-nav .grp-tog .caret {
    margin-left: auto; font-size: 10px; opacity: .55;
    transition: transform .2s ease, opacity .15s ease;
}
.t-nav .t-group.open > .grp-row .caret,
.t-nav .t-group.open > .grp-tog .caret { transform: rotate(90deg); opacity: .95; }

/* ---------------------------- group dropdown ----------------------------- */
/* Sub-items slide open in their own panel. The indent puts their text directly under
   the parent row's LABEL (icon 30 + gap 12 + row padding 16), not under its icon. */
.t-nav .sub {
    position: relative; max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;
    background: rgba(0, 0, 0, .18);
    transition: max-height .24s ease, opacity .18s ease, visibility .24s;
}
.t-nav .t-group.open > .sub { max-height: 900px; opacity: 1; visibility: visible; }

/* A hairline rail in the gutter, so a long list of children reads as one block. */
.t-nav .sub::before {
    content: ''; position: absolute; left: 31px; top: 8px; bottom: 8px; width: 1px;
    background: rgba(255, 255, 255, .10);
}

.t-nav .sub a {
    position: relative; font-size: 12.5px; padding: 9px 16px 9px 58px;
    color: #98a2b8; border-left-width: 0;
}
.t-nav .sub a:hover { background: rgba(255, 255, 255, .045); color: #fff; }
.t-nav .sub a.active { color: #fff; background: rgba(0, 0, 0, .26); }
/* A red tick in the gutter marks the child you are actually on. */
.t-nav .sub a.active::before {
    content: ''; position: absolute; left: 40px; top: 50%; margin-top: -3px;
    width: 6px; height: 6px; border-radius: 50%; background: var(--t-red);
}

/* --------------------------- section collapse ----------------------------- */
/* The admin sidebar's headings double as collapse toggles, so a long list (eight game
   consoles) can be tucked away. The rows inside keep their icon chips and tones --
   only the heading is interactive. Sections arrive open, so the default view is
   unchanged until someone closes one. */
/* The heading is a control, so it carries a surface on hover and a flipped chevron,
   not just a colour shift. Its left inset lands the label on the same 16px edge as
   the rows below it. */
.t-nav .t-sec-head {
    display: flex; align-items: center; gap: 8px;
    margin: 5px 8px 2px; padding: 8px; border-radius: 9px;
    font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 800;
    color: #8693ad; text-align: left;
    background: none; border: 0; font-family: inherit; cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.t-nav .t-sec-head:hover,
.t-nav .t-sec.open > .t-sec-head:hover { background: rgba(255, 255, 255, .06); color: #d7dfec; }
/* An open section's title brightens, the same cue a member group uses. */
.t-nav .t-sec.open > .t-sec-head { color: #b9c3d8; }
.t-nav .t-sec:first-child .t-sec-head { margin-top: 2px; }
.t-nav .t-sec-head .caret {
    margin-left: auto; font-size: 10px; opacity: .5;
    transition: transform .2s ease, opacity .15s ease;
}
.t-nav .t-sec.open > .t-sec-head .caret { transform: rotate(90deg); opacity: .95; }

.t-nav .t-sec-body {
    max-height: 0; opacity: 0; visibility: hidden; overflow: hidden;
    transition: max-height .26s ease, opacity: .2s ease, visibility: .26s;
}
.t-nav .t-sec.open > .t-sec-body { max-height: 1400px; opacity: 1; visibility: visible; }

/* ------------------------- menu filter + bulk toggle ---------------------- */
/* The admin menu runs long: one box narrows it, one control opens or closes every
   section at once. */
.t-nav-tools { display: flex; gap: 6px; align-items: center; padding: 6px 12px 8px; }
.t-nav-filter {
    flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 12.5px;
    padding: 7px 10px; border-radius: 8px; color: #e7ebf3;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10);
}
.t-nav-filter::placeholder { color: #7c88a4; }
.t-nav-filter:focus {
    outline: none; border-color: rgba(211, 47, 47, .55); background: rgba(255, 255, 255, .10);
}
.t-nav-all {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    display: grid; place-items: center; font-family: inherit; font-size: 13px;
    color: var(--t-side-txt);
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .10);
}
.t-nav-all:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.t-nav-all:focus-visible, .t-nav-filter:focus-visible { outline: 2px solid var(--t-red); outline-offset: 1px; }

/* How many rows a section holds; the caret then follows it to the right edge. */
.t-nav .t-sec-n {
    margin-left: auto; padding: 1px 7px; border-radius: 999px;
    font-size: 10px; font-weight: 700; letter-spacing: 0; color: #6f7b96;
    background: rgba(255, 255, 255, .06);
}
.t-nav .t-sec-n + .caret { margin-left: 8px; }

/* A filtered-out row, and a section the filter emptied. Declared here because
   `.t-nav a { display: flex }` would otherwise out-specify the browser's [hidden]. */
.t-nav a[hidden] { display: none !important; }
.t-nav .t-sec.is-empty { display: none; }

.t-side-foot {
    flex: 0 0 auto; padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .18);
}
.t-side-foot .who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.t-side-foot .who b { display: block; color: #e7ebf3; font-size: 13px; }
.t-side-foot .who div span { display: block; color: #7c88a4; font-size: 11.5px; }
.t-side-foot a {
    color: var(--t-side-txt); font-size: 12.5px; font-weight: 600;
    display: flex; gap: 8px; align-items: center;
}
.t-side-foot a:hover { color: #fff; text-decoration: none; }

/* --------------------------------- main ---------------------------------- */
.t-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.t-pagehead { padding: 20px 22px 14px; }
.t-pagehead h1 { font-size: 23px; font-weight: 700; margin: 0; letter-spacing: -.7px; }
.t-pagehead .crumb { font-size: 12px; color: var(--t-muted); margin-top: 3px; }
.t-pagehead .crumb a { color: var(--t-muted); }
.t-pagehead .crumb a:hover { color: var(--t-blue); }
/* Depth on the bar and a divider under the title: the two cues that separate chrome
   from content, in every layer. */
.t-head { box-shadow: 0 1px 0 rgba(255, 255, 255, .07), 0 6px 22px rgba(9, 14, 30, .20); }
.t-pagehead { border-bottom: 1px solid var(--t-line); }

.t-body { padding: 16px 22px 26px; flex: 1; }
.t-foot {
    padding: 13px 22px; color: var(--t-muted); font-size: 12px;
    border-top: 1px solid var(--t-line); background: var(--t-surface);
}

/* ==========================================================================
   COMPONENTS — one declaration, used by every layer
   ========================================================================== */

/* ------------------------------- alerts ---------------------------------- */
.t-alert, .m-alert, .a-alert, .alert {
    padding: 10px 13px; border-radius: 8px; font-size: 12.5px; margin-bottom: 13px;
    border: 1px solid transparent;
}
.t-alert-success, .m-alert-success, .a-alert-success, .alert-success {
    background: var(--t-green-tint); border-color: #a5d6a7; color: #1b5e20;
}
.t-alert-error, .m-alert-error, .a-alert-error, .alert-error {
    background: #fdecea; border-color: #f5c6cb; color: #a51f28;
}
.t-alert-info, .m-alert-info, .a-alert-info, .alert-info {
    background: var(--t-blue-card); border-color: var(--t-blue-line); color: #14507f;
}
.t-alert-warn, .m-alert-warn, .a-alert-warn {
    background: var(--t-yellow-tint); border-color: #f0e0a0; color: #8a6100;
}

/* ------------------------------- badges ---------------------------------- */
.t-badge, .m-badge, .a-badge, .badge {
    display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10px;
    font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
}
.t-badge-success, .m-badge-success, .a-badge-success, .badge-success { background: var(--t-green-tint); color: #1b5e20; }
.t-badge-warning, .m-badge-warning, .a-badge-warning, .badge-warning { background: var(--t-yellow-tint); color: #8a6100; }
.t-badge-danger,  .m-badge-danger,  .a-badge-danger,  .badge-danger  { background: #fdecea; color: var(--t-red); }
.t-badge-info,    .m-badge-info,    .a-badge-info,    .badge-info    { background: var(--t-blue-card); color: var(--t-blue); }
.t-badge-muted,   .m-badge-muted,   .a-badge-muted,   .badge-muted   { background: #eef1f6; color: var(--t-muted); }
.t-badge-purple,  .a-badge-purple                                  { background: #f3e5f5; color: var(--t-purple); }

/* ------------------------------- buttons --------------------------------- */
.t-btn, .m-btn, .a-btn, .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 7px 13px; border-radius: 9px; border: 1px solid transparent;
    font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .15s;
    text-align: center; font-family: inherit; text-decoration: none; line-height: 1.2;
}
.t-btn:hover, .m-btn:hover, .a-btn:hover, .btn:hover { text-decoration: none; }

/* primary = the reference's red PLAY NOW button */
.t-btn-primary, .m-btn-primary, .a-btn-primary, .btn-primary, .btn-gold {
    background: var(--t-red); color: #fff;
}
.t-btn-primary:hover, .m-btn-primary:hover, .a-btn-primary:hover, .btn-primary:hover, .btn-gold:hover {
    background: var(--t-red-2); color: #fff; filter: none;
}
/* dark = the reference's dark "ADD ROW +" / "Select Game" surface */
.t-btn-dark, .m-btn-dark, .a-btn-dark {
    background: var(--t-side); color: #fff; border-color: var(--t-side);
}
.t-btn-dark:hover, .m-btn-dark:hover, .a-btn-dark:hover { background: var(--t-side-2); color: #fff; }
.t-btn-ghost, .m-btn-ghost, .a-btn-ghost, .btn-ghost {
    background: #fff; border-color: var(--t-line); color: var(--t-text);
}
.t-btn-ghost:hover, .m-btn-ghost:hover, .a-btn-ghost:hover, .btn-ghost:hover {
    background: #f2f4f8; color: var(--t-text);
}
.t-btn-teal, .m-btn-teal, .a-btn-green, .btn-teal { background: var(--t-teal); color: #fff; }
.t-btn-teal:hover, .m-btn-teal:hover, .a-btn-green:hover, .btn-teal:hover { filter: brightness(1.06); color: #fff; }
.t-btn-danger, .m-btn-danger { background: #fdecea; color: var(--t-red); border-color: #f5c6cb; }
.t-btn-danger:hover, .m-btn-danger:hover { background: #fbd9d6; color: var(--t-red); }
.a-btn-red, .t-btn-red { background: var(--t-red); color: #fff; }
.a-btn-red:hover, .t-btn-red:hover { background: var(--t-red-2); color: #fff; }
.a-btn-amber, .t-btn-amber { background: var(--t-amber); color: #fff; }
.a-btn-amber:hover, .t-btn-amber:hover { filter: brightness(1.06); color: #fff; }

.t-btn-sm, .m-btn-sm, .a-btn-sm, .btn-sm { padding: 5px 10px; font-size: 11.5px; }
.t-btn-block, .m-btn-block, .a-btn-block, .btn-block { width: 100%; }
.btn-lg { padding: 11px 20px; font-size: 13px; }
.t-btn:disabled, .m-btn:disabled, .a-btn:disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }

/* One focus ring for every button in every layer. The panels are dense enough that
   the browser default is easy to lose. */
.t-btn:focus-visible, .m-btn:focus-visible, .a-btn:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--t-red); outline-offset: 2px;
}

/* ---------------------------- call-to-action ----------------------------- */
/* The gradient CTA. Opt-in, so the admin panel and the flat .btn-primary
   stay exactly as they are. Works on top of any layer's button base class. */
.t-cta, .m-cta, .a-cta, .cta {
    background: var(--t-cta-grad); color: #fff; border-color: transparent;
    font-weight: 800; letter-spacing: .2px;
    box-shadow: var(--t-cta-shadow);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.t-cta:hover, .m-cta:hover, .a-cta:hover, .cta:hover {
    background: var(--t-cta-grad-hover); color: #fff;
    transform: translateY(-1px); box-shadow: 0 12px 26px rgba(165, 27, 111, .34);
}
.t-cta:active, .m-cta:active, .a-cta:active, .cta:active { transform: translateY(0); }
.t-cta:focus-visible, .m-cta:focus-visible, .a-cta:focus-visible, .cta:focus-visible {
    outline: 2px solid #fff; outline-offset: 2px;
}
.t-cta:disabled, .m-cta:disabled, .a-cta:disabled, .cta:disabled {
    filter: grayscale(.35); opacity: .6; transform: none; box-shadow: none; cursor: not-allowed;
}

/* ------------------------------- cards ----------------------------------- */
.t-card, .m-card, .a-card, .card {
    background: var(--t-surface); border: 1px solid var(--t-line);
    border-radius: var(--t-radius); box-shadow: var(--t-shadow);
}
.m-card, .a-card { margin-bottom: 24px; }
/* the public layer's cards carry their content directly (no .head/.body wrapper) */
.card { padding: 18px; }
.t-card .head, .m-card .head, .a-card .head {
    padding: 13px 18px; border-bottom: 1px solid var(--t-line);
    display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    background: var(--t-blue-card);
}
.t-card .head h3, .m-card .head h3, .a-card .head h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.a-card .head .sub { font-size: 12px; color: var(--t-muted); }
.t-card .body, .m-card .body, .a-card .body { padding: 18px; }
.m-card .body.tight, .a-card .body.flush { padding: 0; }

/* ------------------------------- tables ---------------------------------- */
.t-table-wrap, .m-table-wrap, .a-table-wrap, .table-wrap { overflow-x: auto; }
.t-table, .m-table, .a-table, table.data {
    width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.t-table th, .m-table th, .a-table th, table.data th {
    text-align: left; padding: 10px 16px; font-size: 10.5px; text-transform: uppercase;
    letter-spacing: .6px; color: #14507f; background: var(--t-blue-head);
    border-bottom: 1px solid var(--t-blue-line); font-weight: 700; white-space: nowrap;
}
.t-table td, .m-table td, .a-table td, table.data td {
    padding: 11px 16px; border-bottom: 1px solid var(--t-line); vertical-align: middle;
}
.t-table tr:last-child td, .m-table tr:last-child td, .a-table tr:last-child td { border-bottom: 0; }
.m-table tbody tr:hover td, .a-table tbody tr:hover td, table.data tr:hover td { background: #fafbfe; }
.m-table tfoot th, .a-table tfoot th, .t-table tfoot th {
    background: var(--t-blue-card); color: var(--t-text); border-top: 1px solid var(--t-line);
    font-size: 11.5px; letter-spacing: 0; text-transform: none;
}
.a-table .actions, .m-table .actions { white-space: nowrap; }
.a-table .actions a, .a-table .actions button { margin-right: 5px; }

/* ---------------------- ticket lists, by outcome ------------------------- */
/* A won ticket reads green, a lost one red. Declared AFTER the generic row-hover
   above (and repeated for :hover) so the outcome colour is what the reader sees,
   not the hover wash. Open / cancelled tickets keep the plain surface. */
.m-table tbody tr.tr-won > td,
.m-table tbody tr.tr-won:hover > td,
.a-table tbody tr.tr-won > td,
.a-table tbody tr.tr-won:hover > td {
    background: var(--t-green-tint);
}
.m-table tbody tr.tr-lost > td,
.m-table tbody tr.tr-lost:hover > td,
.a-table tbody tr.tr-lost > td,
.a-table tbody tr.tr-lost:hover > td {
    background: var(--t-red-tint);
    color: var(--t-red);
}

/* ------------------------------- forms ----------------------------------- */
.t-field, .m-field, .a-field, .form-group { margin-bottom: 13px; }
.t-field label, .m-field label, .a-field label, .form-group label {
    display: block; font-size: 12px; font-weight: 700; color: #4a5262; margin-bottom: 5px;
}
.t-input, .m-input, .a-input, .form-control {
    width: 100%; padding: 8px 11px; border-radius: 8px; border: 1px solid #d7dce6;
    background: #fff; color: var(--t-text); font-size: 12.5px; font-family: inherit;
}
/* the reference draws its dropdowns and its dark action buttons on the same surface */
.t-select, .m-select, .a-select {
    width: 100%; padding: 8px 11px; border-radius: 8px; border: 1px solid var(--t-side);
    background: var(--t-side); color: #fff; font-size: 12.5px; font-family: inherit;
}
.t-select option, .m-select option, .a-select option { background: #fff; color: var(--t-text); }
.t-textarea, .m-textarea, .a-textarea {
    width: 100%; padding: 8px 11px; border-radius: 8px; border: 1px solid #d7dce6;
    background: #fff; color: var(--t-text); font-size: 12.5px; font-family: inherit;
    min-height: 92px; resize: vertical;
}
.t-input:focus, .m-input:focus, .a-input:focus, .form-control:focus,
.t-textarea:focus, .m-textarea:focus, .a-textarea:focus {
    outline: none; border-color: var(--t-red); box-shadow: 0 0 0 3px rgba(211, 47, 47, .12);
}
.t-select:focus, .m-select:focus, .a-select:focus { outline: none; box-shadow: 0 0 0 3px rgba(47, 54, 64, .25); }
/* A field the live validation has rejected (game ticket rows). */
.t-input.is-invalid, .m-input.is-invalid, .a-input.is-invalid, .form-control.is-invalid,
.t-select.is-invalid, .m-select.is-invalid, .a-select.is-invalid {
    border-color: var(--t-red); background: #fff6f6;
}
.field-error { color: var(--t-red); font-size: 11.5px; margin-top: 3px; }
.t-hint, .m-hint, .a-hint, .form-hint { font-size: 11.5px; color: var(--t-muted); margin-top: 4px; }

.t-row, .m-row, .a-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.t-row-3, .m-row-3, .a-row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.a-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; }
.a-check input { width: 15px; height: 15px; accent-color: var(--t-red); }

.t-filter, .a-filter {
    display: flex; gap: 9px; align-items: flex-end; flex-wrap: wrap;
    padding: 12px 14px; background: var(--t-surface); border: 1px solid var(--t-line);
    border-radius: var(--t-radius); margin-bottom: 14px; box-shadow: var(--t-shadow);
}
.t-filter .t-field, .a-filter .a-field { margin: 0; min-width: 150px; }

/* ------------------------------- grids ----------------------------------- */
.t-grid, .m-grid, .a-grid { display: grid; gap: 16px; }
.t-grid-2, .m-grid-2, .a-grid-2 { grid-template-columns: repeat(2, 1fr); }
.t-grid-3, .m-grid-3, .a-grid-3 { grid-template-columns: repeat(3, 1fr); }
.t-grid-4, .m-grid-4, .a-grid-4 { grid-template-columns: repeat(4, 1fr); }
.t-grid-5, .a-grid-5 { grid-template-columns: repeat(5, 1fr); }
.t-cards, .m-cards { display: grid; gap: 13px; }
.t-cards-2, .m-cards-2 { grid-template-columns: repeat(2, 1fr); }
.t-cards-3, .m-cards-3 { grid-template-columns: repeat(3, 1fr); }
.t-cards-4, .m-cards-4 { grid-template-columns: repeat(4, 1fr); }
.t-cards-5, .m-cards-5 { grid-template-columns: repeat(5, 1fr); }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* statistic tile — the reference's light-blue card with a red round icon */
.t-stat, .m-stat, .a-stat {
    background: var(--t-surface); border: 1px solid var(--t-line);
    border-radius: var(--t-radius); padding: 13px 15px; box-shadow: var(--t-shadow);
}
.t-stat .k, .m-stat .k, .a-stat .k {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
    color: var(--t-muted); font-weight: 700;
}
.t-stat .v, .m-stat .v, .a-stat .v { font-size: 20px; font-weight: 800; margin-top: 4px; letter-spacing: -.5px; }
.t-stat .d, .m-stat .d, .a-stat .d { font-size: 12px; color: var(--t-muted); margin-top: 3px; }
/* A tinted wash on the tile itself, not just a stripe down the side, so a row of
   statistics reads as a colour-coded group rather than four white boxes. */
.m-stat.gold, .a-stat.amber, .t-stat.amber {
    border-left: 4px solid var(--t-amber);
    background: linear-gradient(135deg, var(--t-amber-tint) 0%, #fff 68%);
}
.m-stat.teal, .t-stat.teal {
    border-left: 4px solid var(--t-teal);
    background: linear-gradient(135deg, var(--t-teal-tint) 0%, #fff 68%);
}
.m-stat.green, .a-stat.green, .t-stat.green {
    border-left: 4px solid var(--t-green);
    background: linear-gradient(135deg, var(--t-green-tint) 0%, #fff 68%);
}
.m-stat.blue, .a-stat.blue, .t-stat.blue {
    border-left: 4px solid var(--t-blue);
    background: linear-gradient(135deg, var(--t-blue-card) 0%, #fff 68%);
}
.a-stat.red, .t-stat.red {
    border-left: 4px solid var(--t-red);
    background: linear-gradient(135deg, var(--t-red-tint) 0%, #fff 68%);
}
.a-stat.purple, .t-stat.purple {
    border-left: 4px solid var(--t-purple);
    background: linear-gradient(135deg, var(--t-purple-tint) 0%, #fff 68%);
}

/* ------------------------------- pager ----------------------------------- */
.t-pager, .m-pager, .a-pager, .pagination {
    display: flex; gap: 5px; justify-content: center; padding: 12px; flex-wrap: wrap;
}
.t-pager a, .t-pager span, .m-pager a, .m-pager span, .a-pager a, .a-pager span,
.pagination a, .pagination span {
    padding: 5px 10px; border-radius: 6px; border: 1px solid var(--t-line); background: #fff;
    color: var(--t-muted); font-size: 12px; font-weight: 700; text-decoration: none;
}
.t-pager a:hover, .m-pager a:hover, .a-pager a:hover { background: #f2f4f8; text-decoration: none; }
.t-pager .active, .m-pager .active, .a-pager .active, .pagination .active {
    background: var(--t-red); border-color: var(--t-red); color: #fff;
}

/* ------------------------------- empty ----------------------------------- */
.t-empty, .m-empty, .a-empty, .empty-state {
    text-align: center; padding: 34px 18px; color: var(--t-muted);
}
.t-empty .big, .m-empty .big, .a-empty .big, .empty-state .big {
    font-size: 30px; opacity: .4; margin-bottom: 7px;
}

/* ------------------------------ utilities -------------------------------- */
.t-muted, .m-muted, .a-muted, .muted { color: var(--t-muted); }
.t-green, .m-green, .a-green, .text-green { color: var(--t-green); }
.t-red, .m-red, .a-red, .text-danger { color: var(--t-red); }
.t-amber, .m-gold, .a-amber, .text-gold { color: var(--t-amber); }
.t-teal, .text-teal { color: var(--t-teal); }
.t-right, .m-right, .a-right, .text-right { text-align: right; }
.t-center, .m-center, .a-center, .text-center { text-align: center; }
.a-nowrap { white-space: nowrap; }
.t-mono, .m-mono, .a-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; }
.is-hidden { display: none !important; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.t-flex, .m-flex, .a-flex, .flex { display: flex; }
.t-between, .m-between, .a-between, .between { justify-content: space-between; }
.t-items, .m-items, .a-items, .center { align-items: center; }
.t-gap, .m-gap, .a-gap, .gap { gap: 12px; }
.t-wrapx, .m-wrap, .a-wrap, .wrap { flex-wrap: wrap; }

/* ==========================================================================
   RESPONSIVE — one set of breakpoints for every layer
   --------------------------------------------------------------------------
   The panels keep the SAME vertical navigation at every width. Below 860px the
   sidebar becomes an off-canvas drawer rather than a horizontal strip: a strip of
   fifteen items with dropdown submenus cannot be operated with a thumb, and an
   absolutely positioned submenu inside an overflow-x container is simply clipped.

   The scrim element (.t-scrim) is part of the shell markup; it stays display:none
   everywhere except the drawer breakpoint below.
   ========================================================================== */

/* ---------------------------- full width ---------------------------------- */
/* Content runs the full width of the pane. A data screen has no readable line length
   to protect -- a table or a card grid only gets better with the room -- so the page
   padding is the only gutter, and it is the same 28px on every layer. */
.t-pagehead, .t-body, .t-foot { width: 100%; max-width: none; }

/* -------------------------- scroll affordance ---------------------------- */
/* A table that scrolls horizontally with no cue reads as a table that is cut off.
   The paired local/scroll gradients keep the shadows pinned to the edges and
   fade them away when there is nothing left to scroll. */
.t-table-wrap, .m-table-wrap, .a-table-wrap {
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, var(--t-surface) 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
        linear-gradient(to left,  var(--t-surface) 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(16, 24, 40, .16), rgba(16, 24, 40, 0)) left center / 15px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(16, 24, 40, .16), rgba(16, 24, 40, 0)) right center / 15px 100% no-repeat scroll;
}

/* ---------------------------- touch devices ------------------------------ */
/* Keyed on the input, not the screen: a touch laptop and a phone both need this,
   a narrow window on a desktop does not. */
@media (pointer: coarse) {
    .t-head .burger { min-width: 44px; min-height: 44px; }
    .t-nav a, .t-nav .grp-row { min-height: 46px; padding-block: 11px; }
    .t-nav .sub a { min-height: 42px; }
    .t-btn, .m-btn, .a-btn, .btn { min-height: 44px; }
    .t-btn-sm, .m-btn-sm, .a-btn-sm, .btn-sm { min-height: 38px; }
    .t-pager a, .t-pager span, .m-pager a, .m-pager span,
    .a-pager a, .a-pager span, .pagination a, .pagination span {
        min-width: 44px; min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .t-user-menu a { min-height: 46px; display: flex; align-items: center; }
    .a-check input { width: 20px; height: 20px; }
}

/* --------------------------- focus visibility ---------------------------- */
/* The drawer is opened by keyboard as often as by thumb. */
.t-nav a:focus-visible, .t-nav .grp-row:focus-visible, .t-nav .grp-tog:focus-visible,
.t-head .burger:focus-visible, .t-user-btn:focus-visible {
    outline: 2px solid #fff; outline-offset: -2px; border-radius: 6px;
}
.t-user-menu a:focus-visible { outline: 2px solid var(--t-red); outline-offset: -2px; }

/* ------------------------------ the scrim -------------------------------- */
.t-scrim { display: none; }

@media (max-width: 1100px) {
    .t-grid-5, .a-grid-5, .t-cards-5, .m-cards-5, .t-cards-4, .m-cards-4,
    .t-grid-4, .m-grid-4, .a-grid-4, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .t-grid-3, .m-grid-3, .a-grid-3 { grid-template-columns: 1fr; }
}

/* ------------------------ off-canvas drawer, ≤ 860px --------------------- */
@media (max-width: 860px) {
    /* The sidebar leaves the flow completely. */
    .t-side {
        position: fixed; top: var(--t-head-h); bottom: 0; left: 0;
        width: min(86vw, 320px); height: auto; min-height: 0; flex: none;
        z-index: 95;
        transform: translateX(-102%);
        transition: transform .24s cubic-bezier(.22, .61, .36, 1);
        overflow: hidden; overscroll-behavior: contain;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 0 42px rgba(0, 0, 0, .38);
    }
    .t-shell.nav-open .t-side { transform: none; }
    /* The desktop collapse toggle must not hide the drawer. Same specificity, later
       in the sheet, so it wins inside this breakpoint only. */
    .t-shell.collapsed .t-side { display: block; }

    /* Everything behind the drawer dims and stops taking taps. */
    .t-scrim {
        display: block;
        position: fixed; top: var(--t-head-h); right: 0; bottom: 0; left: 0;
        z-index: 90;
        background: rgba(15, 20, 30, .48);
        opacity: 0; pointer-events: none; transition: opacity .24s;
    }
    .t-shell.nav-open .t-scrim { opacity: 1; pointer-events: auto; }

    /* Scrolling the page behind an open drawer is the classic iOS scroll-trap. */
    body.nav-open { overflow: hidden; }

    /* The nav IS the drawer's scroll region. The drawer is a fixed, full-height shell
       with overflow:hidden, so if the menu does not scroll inside itself every row
       below the fold is clipped and unreachable -- which a long rail (the admin menu
       carries 23 rows) always hits on a phone. overflow:visible here was the bug:
       the list grew to its content and the parent simply cut it off. */
    .t-nav {
        display: block; min-height: 0;
        overflow-y: auto; overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 8px 0 16px;
    }
    .t-nav > .label, .t-nav > .grp { display: block; }
    .t-nav a, .t-nav .grp-row {
        border-left: 3px solid transparent; border-bottom: 0; white-space: normal;
    }
    .t-nav a.active { border-left-color: var(--t-red); }
    .t-nav .sub {
        position: relative; min-width: 0; border-radius: 0; box-shadow: none; z-index: auto;
    }

    .t-wrap { flex-direction: column; }
    .t-main { width: 100%; }

    .t-pagehead { padding: 15px 14px 12px; }
    .t-body { padding: 14px 14px calc(20px + env(safe-area-inset-bottom)); }
    .t-foot { padding: 13px; }

    /* One column for every multi-column grid. */
    .t-grid-2, .t-grid-3, .t-grid-4, .t-grid-5,
    .m-grid-2, .m-grid-3, .m-grid-4,
    .a-grid-2, .a-grid-3, .a-grid-4, .a-grid-5,
    .t-row, .t-row-3, .m-row, .m-row-3, .a-row, .a-row-3,
    .t-cards-2, .t-cards-3, .t-cards-4, .t-cards-5,
    .m-cards-2, .m-cards-3, .m-cards-4, .m-cards-5,
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

    /* Filters stop being a single row and become full-width controls. */
    .t-filter, .a-filter { padding: 14px; }
    .t-filter .t-field, .a-filter .a-field { min-width: 0; flex: 1 1 140px; }
}

/* iOS Safari zooms the whole viewport when a field under 16px takes focus. The
   rule has to beat the component declarations above, hence the width query here
   rather than a bare type selector. */
@media (max-width: 640px) {
    .t-input, .m-input, .a-input, .form-control,
    .t-select, .m-select, .a-select,
    .t-textarea, .m-textarea, .a-textarea { font-size: 16px; }

    .t-head .who { display: none; }
    .t-head .brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .t-user-menu { max-width: calc(100vw - 24px); }
    .t-pagehead h1 { font-size: 19px; }
}

@media (max-width: 380px) {
    .t-body { padding: 12px; }
    .t-head .brand { font-size: 14px; }
    .t-avatar { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .t-side, .t-scrim { transition: none; }
    .t-cta, .m-cta, .a-cta, .cta { transition: none; }
    .t-cta:hover, .m-cta:hover, .a-cta:hover, .cta:hover { transform: none; }
    /* The account menu still appears; it just stops moving, and the chevrons snap. */
    .t-user.open .t-user-menu { animation: none; }
    .t-user-btn .caret, .t-nav .t-sec-head .caret, .t-nav .t-sec-body { transition: none; }
}

/* ==========================================================================
   LIVE WIDGETS — the shared realtime layer (assets/js/tga-live.js)
   --------------------------------------------------------------------------
   Toasts, the market button panel the buy screens use, and the "betting
   closed" state. Declared here so the engine looks identical in every layer.
   ========================================================================== */

/* ------------------------------- toasts ---------------------------------- */
.t-toasts {
    position: fixed; right: 18px; bottom: 18px; z-index: 9500;
    display: flex; flex-direction: column; gap: 8px; max-width: min(92vw, 360px);
}
.t-toast {
    padding: 10px 13px; border-radius: 9px; font-size: 12.5px; font-weight: 600;
    color: #fff; box-shadow: 0 10px 26px rgba(19, 26, 46, .22);
    opacity: 1; transform: translateY(0); transition: opacity .35s ease, transform .35s ease;
}
.t-toast.out { opacity: 0; transform: translateY(8px); }
.t-toast-success { background: var(--t-green); }
.t-toast-error { background: var(--t-red); }

/* --------------------------- market button panel ------------------------- */
/* The "Select Game" grid: one button per market with a coloured top stripe and a
   live countdown underneath. */
.mk-panel { border: 1px solid var(--t-line); border-radius: var(--t-radius); overflow: hidden; background: var(--t-surface); }
.mk-panel .mk-head {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 14px; background: var(--t-side); color: #fff; font-weight: 700; font-size: 13px;
}
.mk-panel .mk-head .mk-check {
    margin-left: auto; width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center; background: var(--t-green); color: #fff; font-size: 11px;
}
.mk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 11px; }
.mk-btn {
    display: flex; flex-direction: column; border: 1px solid var(--t-line); border-radius: 9px;
    background: #fff; padding: 0; overflow: hidden; cursor: pointer; font-family: inherit;
    text-align: center; transition: .14s;
}
.mk-btn .mk-top {
    padding: 8px 7px; font-weight: 800; font-size: 12px; letter-spacing: .2px;
    background: var(--t-blue-card); color: #14507f;
}
.mk-btn .mk-time {
    padding: 6px 5px; font-size: 11.5px; font-weight: 700; color: var(--t-muted);
    font-variant-numeric: tabular-nums; background: #fff;
}
/* Green when the market is on and playable; red when it is off or cannot be played. */
.mk-btn.is-on { border-color: var(--t-green); }
.mk-btn.is-on .mk-top { background: var(--t-green-tint); color: var(--t-green); }
.mk-btn.is-off { border-color: var(--t-red); }
.mk-btn.is-off .mk-top { background: var(--t-red-tint); color: var(--t-red); }
.mk-btn.is-off .mk-time { color: var(--t-red); }

.mk-btn:hover { border-color: var(--t-red); }
.mk-btn.is-on:hover { border-color: var(--t-green); }
.mk-btn.is-selected { border-color: var(--t-red); box-shadow: 0 0 0 2px rgba(211, 47, 47, .18); }
.mk-btn.is-selected .mk-top { background: var(--t-cta-grad); color: #fff; }
.mk-btn.is-norule, .mk-btn.is-notype, .mk-btn.is-off { opacity: .55; cursor: not-allowed; }
.mk-btn.is-closed .mk-time { color: var(--t-red); }

/* One tone per market, mirroring the sidebar tones. */
.mk-btn.tone-teal   .mk-top { background: var(--t-teal-tint);   color: #00695c; }
.mk-btn.tone-amber  .mk-top { background: var(--t-amber-tint);  color: #8a4b00; }
.mk-btn.tone-purple .mk-top { background: var(--t-purple-tint); color: var(--t-purple); }
.mk-btn.tone-red    .mk-top { background: var(--t-red-tint);    color: var(--t-red); }
.mk-btn.tone-green  .mk-top { background: var(--t-green-tint);  color: var(--t-green); }

/* "Betting closed" banner, revealed only once the scope is closed. */
.mk-closed-note {
    display: none; padding: 9px 12px; font-size: 12px; font-weight: 700;
    color: #8a6100; background: var(--t-yellow-tint); border-top: 1px solid #f0e0a0;
}
[data-close-scope].is-closed .mk-closed-note { display: block; }

/* Time remaining until the draw itself, shown wherever a draw date is listed. */
.t-draw-timer {
    display: inline-block; font-variant-numeric: tabular-nums; font-weight: 700;
    color: var(--t-red); white-space: nowrap;
}
.t-draw-timer i { font-style: normal; }

@media (max-width: 620px) {
    .mk-grid { gap: 8px; padding: 10px; }
    .mk-btn .mk-top { font-size: 12px; padding: 9px 6px; }
    .t-toasts { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}

/* ==========================================================================
   RIGHT-SIDE DRAWER — the shared detail / action panel
   --------------------------------------------------------------------------
   One panel, every layer. Unlike the nav drawer it is not tied to a breakpoint:
   it opens from any [data-drawer-target="#id"] control and is filled from a
   <template> in the page. assets/js/tga-live.js owns the open/close state
   (window.TGA.drawer) and the focus cycle.
   ========================================================================== */
.t-drawer-scrim {
    position: fixed; inset: 0; z-index: 9500; background: rgba(15, 20, 30, .48);
    opacity: 0; pointer-events: none; transition: opacity .24s;
}
.t-drawer-scrim.open { opacity: 1; pointer-events: auto; }

.t-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 9510;
    width: min(94vw, 460px); max-width: 100%;
    background: var(--t-surface); border-left: 1px solid var(--t-line);
    box-shadow: var(--t-shadow-lg); display: flex; flex-direction: column;
    transform: translateX(103%); visibility: hidden;
    transition: transform .26s cubic-bezier(.22, .61, .36, 1), visibility .26s;
}
.t-drawer.open { transform: none; visibility: visible; }

.t-drawer-head {
    display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
    padding: 13px 15px; background: var(--t-head-grad); color: #fff;
}
.t-drawer-head h3 { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
.t-drawer-close {
    margin-left: auto; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    display: grid; place-items: center; font: inherit; font-size: 16px; line-height: 1;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); color: #fff;
}
.t-drawer-close:hover { background: var(--t-red); border-color: var(--t-red); }
.t-drawer-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 24px; }
.t-drawer-foot {
    flex: 0 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--t-line); background: #fafbfe;
}
body.t-drawer-open { overflow: hidden; }

/* The hero number at the top of a request detail. */
.mr-hero { text-align: center; padding: 4px 0 16px; }
.mr-hero .lbl { font-size: 11px; color: var(--t-muted); text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.mr-hero .amt { font-size: 27px; font-weight: 800; letter-spacing: -.6px; margin-top: 3px; }

/* Definition list used for the detail rows. */
.t-dl { margin: 0; }
.t-dl .r { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--t-line); }
.t-dl .r:last-child { border-bottom: 0; }
.t-dl .r dt { color: var(--t-muted); font-weight: 600; font-size: 12.5px; margin: 0; }
.t-dl .r dd { margin: 0; font-weight: 700; font-size: 12.5px; text-align: right; }

/* The panel footer's action row. */
.t-drawer-foot .row { display: flex; gap: 8px; }
.t-drawer-foot .row > * { flex: 1 1 0; }

/* --------------------------- table tools bar ----------------------------- */
/* "Show N entries" + the instant filter above a table (the reference's grid bar). */
.t-tools {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 15px; border-bottom: 1px solid var(--t-line); background: #fff;
}
.t-tools label { font-size: 12px; color: var(--t-muted); font-weight: 600; }
.t-tools select, .t-tools input {
    font-family: inherit; font-size: 12px; padding: 6px 9px; border-radius: 8px;
    border: 1px solid #d7dce6; background: #fff; color: var(--t-text);
}
.t-tools .right { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.t-tools input[type="search"] { min-width: 160px; }

/* Sortable column headers. */
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort] .arw { opacity: .32; font-size: 9px; margin-left: 3px; }
th[data-sort].asc .arw, th[data-sort].desc .arw { opacity: 1; color: var(--t-red); }

/* A row action: the textual "cash" link and the eye button. */
.mr-act { display: inline-flex; align-items: center; gap: 6px; }
.mr-cash {
    background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
    font-weight: 700; color: var(--t-green); cursor: pointer;
}
.mr-cash:hover { text-decoration: underline; }
.mr-eye {
    width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: inline-grid;
    place-items: center; font: inherit; font-size: 13px;
    background: var(--t-blue-card); color: #14507f; border: 1px solid var(--t-blue-line);
}
.mr-eye:hover { background: var(--t-blue-head); }

@media (max-width: 640px) {
    .t-tools { padding: 10px 12px; }
    .t-tools input[type="search"] { min-width: 0; flex: 1 1 140px; }
}

@media (prefers-reduced-motion: reduce) {
    .t-drawer, .t-drawer-scrim { transition: none; }
}