/* TeamDocks AI Overwatch — shared design system.
   Dark glassmorphism, deliberately flat: no gradient text, no pill badges,
   no glow blobs, no stock gradient app-icon. Component classes (td-*) keep
   every page's chrome identical instead of each page inventing its own. */

:root {
    --td-bg: #08090b;
    --td-line: rgba(255, 255, 255, 0.08);
    --td-line-soft: rgba(255, 255, 255, 0.05);
    --td-accent: #818cf8;
    --td-text-dim: #8b8f9a;
    /* Real scrim, not just a tint - cards sit on top of an animated/moving
       backdrop on every page now (see .td-ambient-canvas + match.php's map
       backdrop), so a near-transparent background let text contrast collapse
       against bright backdrop regions. Matches .td-killfeed-row's existing
       0.55 scrim, which solved this exact problem there already. */
    --td-card-bg: rgba(8, 9, 11, 0.55);
    /* Near-opaque variant for .td-card - no backdrop-filter behind it (that
       blur repainted on every scroll frame across dozens of cards per page
       and was the main source of scroll jank), so the fill needs to be
       solid enough on its own to still read as a distinct card plane. */
    --td-card-bg-solid: rgba(9, 10, 12, 0.94);

    /* Canonical semantic colors - single source of truth so every page
       (and its JS) references the SAME hex, instead of the ~8 duplicated
       trustColor()/quality/side-color copies that had drifted apart. The
       trust bands are: >=70 good, 40-69 watch, <40 risk (unified site-wide;
       match.php's old 80/50 split is retired). PHP/JS helpers in
       partials/ui.php read these same values. */
    --td-good: #34d399;   /* trusted / good / positive */
    --td-warn: #fbbf24;   /* watch / ok / neutral-caution */
    --td-risk: #f87171;   /* high-risk / bad / negative */
    --td-muted: #64748b;  /* weak / no-data / descriptive */
    --td-ct: #5aa9e6;     /* Counter-Terrorist side blue */
    --td-t:  #e6a23c;     /* Terrorist side orange */
}

body {
    background-color: var(--td-bg);
    color: #f2f2f4;
    font-family: 'Inter', sans-serif;
}

::selection { background: rgba(129, 140, 248, 0.3); }

/* --- Loader spinner (match.php) --- */
.td-loader {
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid #f2f2f4;
    border-radius: 50%;
    width: 28px; height: 28px;
    animation: td-spin 0.8s linear infinite;
}
@keyframes td-spin { to { transform: rotate(360deg); } }

/* --- Full-page map backdrop (match.php) - sits behind the glassmorphism
   cards (.td-card has backdrop-filter: blur + translucent bg), so the map
   shows through blurred rather than being its own small cropped banner. --- */
.td-page-backdrop {
    position: fixed;
    inset: -20px;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: blur(5px) brightness(0.72) saturate(1.08);
    transform: scale(1.04);
    opacity: 0;
    transition: opacity 0.6s ease;
}
.td-page-backdrop-visible { opacity: 1; }
/* Lighter veil - just enough for card/text contrast, lets the map show. */
.td-page-backdrop-visible::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,9,11,0.32) 0%, rgba(8,9,11,0.62) 100%);
}

/* --- Premier rating badge (profile.php) - real Valve badge frame asset
   (grey/undyed by default), tinted per rating-tier color via mix-blend-mode
   rather than baking fake official colored assets ourselves. --- */
.td-premier-badge {
    position: relative;
    width: 98px;
    height: 35px;
    flex-shrink: 0;
}
.td-premier-frame { width: 100%; height: 100%; display: block; }
/* Two-pass tint: `color` recolors the grey frame to the tier hue, a faint
   `overlay` pass under it deepens the saturation so lower tiers don't read as
   washed-out grey. */
.td-premier-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--premier-color);
    mix-blend-mode: color;
    opacity: 0.98;
    pointer-events: none;
}
.td-premier-num {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The badge frame carries decorative angled stripes on its left third;
       nudge the number into the main body so it doesn't sit over them. */
    padding-left: 15%;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.85);
}

/* --- Tabs (settings.php) --- */
.td-tab-active { border-bottom: 1px solid #f2f2f4; color: #fff; }
.td-tab-inactive { color: #6b7280; }

/* --- Nav --- */
.td-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(9, 10, 12, 0.96);
    border-bottom: 1px solid var(--td-line-soft);
    /* faint accent hairline under the blur, so the bar reads as a distinct
       plane above the page instead of just a blurred cutoff */
    box-shadow: 0 1px 0 rgba(129,140,248,0.08);
}
.td-nav-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.8rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.td-brand { display: flex; align-items: center; gap: 0.55rem; color: #fff; text-decoration: none; }
.td-brand-logo { width: 1.35rem; height: 1.35rem; flex-shrink: 0; }
/* Plain solid wordmark - no gradient fill, no perpetual shine sweep. A logo
   that animates forever is exactly the kind of decoration we're avoiding.
   "team" white / "docks" accent-tinted, single weight. */
.td-brand-mark {
    font-weight: 700;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    color: #f2f2f4;
}
.td-brand-accent { color: #a5b4fc; }
.td-brand:hover .td-brand-accent { color: #c7d2fe; }
.td-nav-group { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }
.td-nav-right { display: flex; align-items: center; gap: 0.35rem; }
/* Real glass buttons, same translucent-fill/blur/hairline-border language as
   .td-search-input and .td-card - not bare underlined text, so the nav reads
   as a row of actual controls rather than an inline sentence of links. */
.td-nav-link {
    position: relative;
    display: inline-flex; align-items: center;
    font-size: 0.83rem; font-weight: 500; color: #9a9eaa; text-decoration: none;
    padding: 0.42rem 0.65rem;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    background: transparent;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
    white-space: nowrap;
}
.td-nav-link:hover {
    color: #e5e7eb;
    background: rgba(255,255,255,0.045); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-color: rgba(255,255,255,0.10);
}
.td-nav-link.is-active {
    color: #fff;
    background: rgba(129,140,248,0.10); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-color: rgba(129,140,248,0.35);
}
.td-nav-user {
    display: flex; align-items: center; gap: 0.55rem; text-decoration: none; color: #d5d6da;
    padding: 0.2rem 0.5rem 0.2rem 0.2rem; border-radius: 9999px;
    border: 1px solid transparent; transition: border-color .15s ease, color .15s ease;
}
.td-nav-user:hover { color: #fff; border-color: var(--td-line); }
.td-nav-avatar { width: 1.85rem; height: 1.85rem; border-radius: 9999px; border: 1px solid var(--td-line); }
.td-nav-name { font-size: 0.82rem; font-weight: 500; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Profile-in-dropdown row (nav.php renders it inside #td-nav-right too) -
   desktop already has the .td-nav-user avatar chip outside the dropdown, so
   this duplicate stays hidden until the mobile breakpoint folds everything
   but logo+search into the burger menu. */
.td-nav-link-profile { display: none; }

/* Hamburger toggle - hidden on desktop, shown + functional under the
   breakpoint below. A plain icon button, same ghost-button sizing language
   as the rest of the nav so it doesn't look like a bolted-on afterthought. */
.td-nav-toggle {
    display: none;
    align-items: center; justify-content: center;
    width: 2.2rem; height: 2.2rem;
    border-radius: 0.5rem;
    border: 1px solid var(--td-line);
    background: transparent;
    color: #c9cad0;
    cursor: pointer;
}
.td-nav-toggle:hover { border-color: rgba(255,255,255,0.25); color: #fff; }

/* Below ~640px the full link row (up to 5 buttons for a logged-in owner)
   doesn't fit next to the brand + avatar - collapse it into a toggled
   dropdown instead of letting it wrap into a second messy row or force
   horizontal scroll on the whole nav bar. */
@media (max-width: 640px) {
    .td-nav-toggle { display: flex; }
    .td-nav-right {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0.1rem;
        padding: 0.6rem 1rem 1rem;
        background: rgba(8, 9, 11, 0.97);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--td-line-soft);
    }
    .td-nav-right.td-nav-right-open { display: flex; }
    /* Full-width tappable rows instead of the desktop's inline glass buttons -
       a hairline divider between rows, active page gets a solid left accent
       bar in addition to its usual glass fill. */
    .td-nav-link {
        border-radius: 0;
        padding: 0.85rem 0.2rem 0.85rem 0.7rem;
        border-bottom: 1px solid var(--td-line-soft);
        border-left: 2px solid transparent;
    }
    .td-nav-link:last-child { border-bottom: none; }
    .td-nav-link.is-active { border-left-color: #a5b4fc; }
    /* Avatar chip dropped from the header bar entirely (not just its name
       text) - the docked search box's 12rem min-width plus brand + avatar +
       hamburger structurally cannot all fit in a phone-width header (measured
       ~500px required vs ~330px available at 375px viewport). Mobile header
       is now just logo + search-icon + hamburger; the profile link moves
       into the dropdown instead (.td-nav-link-profile below). */
    .td-nav-user { display: none; }
    .td-nav-link-profile {
        display: flex; align-items: center; gap: 0.65rem;
    }
    .td-nav-link-avatar { width: 1.6rem; height: 1.6rem; border-radius: 9999px; flex-shrink: 0; }

    /* Search collapses to an icon (.td-search-toggle-btn - carries the
       .td-nav-toggle class in nav.php too, so it already inherits that
       class's own display:none/flex show-on-mobile behaviour with no extra
       rule needed here) that opens the real #td-search-input as a full-width
       fixed bar - see the toggle script in nav.php. This is what actually
       frees the ~200px the docked input's min-width was permanently reserving. */
    .td-nav-search { display: none; }
    .td-nav-search.td-search-mobile-open {
        display: flex;
        position: fixed;
        top: 0; left: 0; right: 0;
        z-index: 65;
        margin: 0;
        padding: 0.65rem 0.9rem;
        background: rgba(8, 9, 11, 0.97);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid var(--td-line-soft);
    }
    .td-search-mobile-open .td-search-box { flex: 1; }
    /* Reclaim the kbd-hint's reserved right padding (kbd is hidden at this
       breakpoint already) now that the close button lives outside the input
       as its own flex sibling, not absolutely positioned inside it. */
    .td-search-mobile-open .td-search-input { padding-right: 0.9rem; }
    .td-search-mobile-open .td-search-close {
        display: grid; place-items: center;
        width: 2rem; height: 2rem; margin-left: 0.5rem; flex-shrink: 0;
        border-radius: 0.5rem; border: 1px solid transparent;
        background: transparent; color: #9a9eaa; cursor: pointer;
    }
    .td-search-mobile-open .td-search-close:hover { color: #fff; background: rgba(255,255,255,0.06); }
    /* Panel already goes position:fixed at this breakpoint (see .td-search-panel
       rule below) - just push it under the now-fixed input bar instead of the
       old static-header offset. */
    .td-search-mobile-open .td-search-panel { top: 3.6rem; }
}

/* Close button only ever appears via the more-specific .td-search-mobile-open
   .td-search-close rule above - unconditional hide needed here since a bare
   <button> defaults to visible (unlike .td-search-toggle-btn, which already
   inherits .td-nav-toggle's own unconditional display:none). */
.td-search-close { display: none; }

/* --- Footer (partials/footer.php) - a real (small) site map above the
   required legal disclaimer, instead of pure legal filler. Sits above
   .td-decor-bg/.td-page-backdrop (positive z-index, default stacking), with
   its own scrim so it stays readable regardless of what backdrop is behind
   it, same principle as --td-card-bg. --- */
.td-footer {
    position: relative;
    margin-top: 4rem;
    border-top: 1px solid var(--td-line-soft);
    background: rgba(8, 9, 11, 0.6);
    backdrop-filter: blur(10px);
}
.td-footer-inner {
    max-width: 72rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 2rem;
}
.td-footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2.25rem;
}
.td-footer-brand { max-width: 22rem; }
.td-footer-logo { margin-bottom: 0.85rem; }
.td-footer-tagline { font-size: 0.8rem; line-height: 1.55; color: var(--td-text-dim); }
.td-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
.td-footer-heading {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
    color: #565c68; margin-bottom: 0.15rem;
}
.td-footer-col a {
    font-size: 0.83rem; color: #a1a5b0; text-decoration: none; transition: color .15s ease;
}
.td-footer-col a:hover { color: #fff; }
.td-footer-rule { height: 1px; background: var(--td-line-soft); margin-bottom: 1.4rem; }
.td-footer-legal { display: flex; flex-direction: column; gap: 0.7rem; align-items: center; }
.td-footer-legal p {
    font-size: 0.71rem;
    line-height: 1.6;
    color: #565c68;
    text-align: center;
    max-width: 56rem;
    margin: 0 auto;
}
.td-footer-copy { font-size: 0.7rem; color: #43474f; }
@media (max-width: 768px) {
    .td-footer-top { grid-template-columns: repeat(2, 1fr); gap: 1.75rem; row-gap: 2rem; }
    .td-footer-brand { grid-column: 1 / -1; max-width: none; }
}

/* --- Buttons (flat, sharp-ish corners, no glow) --- */
.td-btn-primary, .td-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-weight: 500; border-radius: 0.5rem; padding: 0.6rem 1.05rem; font-size: 0.85rem;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.td-btn-primary { background: #f2f2f4; color: #0a0a0c; }
.td-btn-primary:hover { background: #d9dae0; }
.td-btn-ghost { background: transparent; border-color: var(--td-line); color: #c9cad0; }
.td-btn-ghost:hover { border-color: rgba(255,255,255,0.25); color: #fff; }
.td-btn-sm { padding: 0.4rem 0.75rem; font-size: 0.78rem; }

/* --- Cards --- */
.td-card {
    background: var(--td-card-bg-solid);
    border: 1px solid var(--td-line);
    border-radius: 0.9rem;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
/* Opt-in interactive card: lifts + brightens on hover. Use on clickable
   cards (match tiles, player rows, stat cards) - not on static containers. */
.td-card-hover { cursor: pointer; }
.td-card-hover:hover {
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
    transform: translateY(-2px);
}

/* --- Metric / stat card (profile + match analysis) --- */
.td-stat {
    background: var(--td-card-bg);
    border: 1px solid var(--td-line);
    border-radius: 0.75rem;
    padding: 0.85rem 1rem;
    transition: border-color .18s ease, background .18s ease;
}
.td-stat:hover { border-color: rgba(255,255,255,0.14); background: rgba(15,16,19,0.6); }
.td-stat-label { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--td-text-dim); display: flex; align-items: center; gap: 0.3rem; }
.td-stat-value { font-size: 1.35rem; font-weight: 650; color: #f2f2f4; margin-top: 0.2rem; line-height: 1.1; }
.td-stat-sub { font-size: 0.7rem; color: var(--td-text-dim); margin-top: 0.15rem; }

/* --- Flat tags/labels instead of pill badges --- */
.td-tag {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; font-weight: 500; letter-spacing: 0.01em;
    padding: 0.2rem 0.05rem; border-bottom: 1px solid currentColor; color: var(--td-text-dim);
}
.td-tag-value { color: #f2f2f4; font-weight: 600; }

/* --- Status dot instead of rounded pill status badge --- */
.td-status { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 500; }
.td-status-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }

/* --- Section headers --- */
.td-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--td-text-dim); }

/* --- Table rhythm reused across pages --- */
.td-table th { text-align: left; font-weight: 500; color: var(--td-text-dim); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.6rem 0.85rem; }
.td-table td { padding: 0.65rem 0.85rem; border-top: 1px solid var(--td-line-soft); font-size: 0.87rem; }
.td-table tr:hover td { background: rgba(255,255,255,0.015); }

/* --- Ambient animated background (site-wide) -----------------------------
   Deliberately restrained: a static fine grid for a technical feel, plus two
   very-low-opacity aurora bands that drift slowly. GPU-cheap (only transform
   + opacity animate, on a single fixed layer), and fully disabled under
   prefers-reduced-motion. Not glowy blobs - subtle depth behind flat cards. */
/* tsParticles' fullscreen canvas (see partials/nav.php) - forced non-
   interactive regardless of what the library does internally by default.
   A negative z-index alone controls paint order, NOT click capture; without
   this, the canvas could sit on top of the hit-testing order in some browser/
   library-version combinations and silently eat clicks on buttons/links
   across the whole site (exactly the kind of bug that reads as "load more
   doesn't work" with no console error). */
#td-particles, #td-particles canvas, #tsparticles, #tsparticles canvas {
    pointer-events: none !important;
}

.td-ambient {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px) 0 0 / 46px 46px,
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px) 0 0 / 46px 46px,
        var(--td-bg);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
            mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.td-ambient::before,
.td-ambient::after {
    content: '';
    position: absolute;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.05;
    will-change: transform;
}
.td-ambient::before {
    top: -20vw; left: -10vw;
    background: radial-gradient(circle, #4f5bd5 0%, transparent 70%);
    animation: td-drift-a 34s ease-in-out infinite alternate;
}
.td-ambient::after {
    bottom: -25vw; right: -10vw;
    background: radial-gradient(circle, #2b6f8f 0%, transparent 70%);
    animation: td-drift-b 40s ease-in-out infinite alternate;
}
@keyframes td-drift-a { to { transform: translate3d(12vw, 8vh, 0); } }
@keyframes td-drift-b { to { transform: translate3d(-10vw, -6vh, 0); } }
@media (prefers-reduced-motion: reduce) {
    .td-ambient::before, .td-ambient::after { animation: none; }
}

/* --- Google Material Symbols helper --------------------------------------
   Pages load the Material Symbols Rounded font in <head>. This normalises
   sizing/alignment so icons sit inline with text without per-use overrides. */
.material-symbols-rounded {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.1em;
    line-height: 1;
    vertical-align: -0.18em;
    user-select: none;
}
.td-icon-sm { font-size: 1em; vertical-align: -0.15em; }
.td-icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
/* Real CS2 weapon killfeed icons (extracted from the game's own files) -
   white silhouettes, sized/opacity tuned to sit quietly between player names. */
.td-weapon-icon { height: 14px; width: auto; opacity: 0.82; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.td-killfeed-icon { height: 15px; width: auto; opacity: 0.9; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)); }
/* Mirrors CS2's own death-notice row: a dark translucent bar per entry, no
   border - matches the game's actual killfeed look rather than a generic list. */
.td-killfeed-row {
    background: rgba(6, 7, 9, 0.55);
    border-radius: 4px;
    padding: 0.5rem 0.7rem;
    margin-bottom: 0.35rem;
    backdrop-filter: blur(6px);
    transition: background .15s ease;
}
.td-killfeed-row:hover { background: rgba(6, 7, 9, 0.75); }
.td-killfeed-row:last-child { margin-bottom: 0; }

/* --- Skeleton loading (shimmer) ------------------------------------------ */
.td-skel {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.055);
    border-radius: 0.4rem;
}
/* Shimmer needs enough contrast to actually register on the near-black
   theme - the old 0.06-alpha highlight was invisible in practice. */
.td-skel::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
    animation: td-shimmer 1.1s infinite;
}
@keyframes td-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .td-skel::after { animation: none; }
}
.td-skel-line { height: 0.8rem; margin: 0.4rem 0; }
.td-skel-row { height: 2.6rem; margin: 0.35rem 0; }

/* --- Trust / reputation meter (csrep-style) ------------------------------
   Horizontal bar with a colored fill sized to the trust score. Color band
   comes from an inline --trust-color set by the caller. */
.td-trust-meter { height: 0.5rem; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.td-trust-fill { height: 100%; border-radius: 999px; background: var(--trust-color, #6b7280); transition: width .5s ease; }
.td-trust-num { font-weight: 700; letter-spacing: -0.01em; }

/* --- Circular progress ring (rating / accuracy dials) --------------------
   Pure CSS conic-gradient ring; --pct 0..100, --ring-color set inline. */
.td-ring {
    --pct: 0;
    --ring-color: #818cf8;
    width: 68px; height: 68px; border-radius: 50%;
    display: grid; place-items: center;
    /* half-percent crossfade at the sweep edge = antialiased end instead of a
       jagged hard stop; faint hairline + a soft static halo tinted in the ring
       color give it presence on the glass card without any animation. */
    background: conic-gradient(
        var(--ring-color) calc(var(--pct) * 1% - 0.4%),
        rgba(255,255,255,0.07) calc(var(--pct) * 1% + 0.4%)
    );
    box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 0 24px -10px var(--ring-color);
}
.td-ring-inner {
    width: 54px; height: 54px; border-radius: 50%;
    background: #0c0d10;
    display: grid; place-items: center;
    font-size: 0.9rem; font-weight: 700; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 8px 14px -10px rgba(0,0,0,0.8);
}
.td-ring-label { font-size: 0.62rem; color: var(--td-text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }

/* --- Performance Snapshot (profile Overview, glance-first cross-tab box) ---
   A faint accent border marks it as the summary plane above the plain account
   KPIs. Reuses .td-ring / .td-susbar wholesale; only adds layout + a larger
   "hero" ring for our own TeamDocks Rating so it reads as the headline number. */
.td-snapshot { border-color: rgba(129,140,248,0.22); }
/* Top row: rings on the left, a highlights side-panel on the right so that
   column isn't left empty. Collapses to stacked on narrow (in-game) widths. */
.td-snapshot-top { display: grid; grid-template-columns: 1fr; gap: 1.4rem; }
@media (min-width: 768px) {
    .td-snapshot-top { grid-template-columns: minmax(0,1fr) minmax(0,290px); gap: 2rem; align-items: center; }
}
/* Rings spread across the full left column (space-between) so the row reaches
   toward the highlights panel instead of leaving a dead gap, and all four are
   the SAME size - the TeamDocks ring is distinguished by its accent label, not
   by being larger. */
.td-snapshot-rings { display: flex; flex-wrap: wrap; gap: 1.6rem 1.2rem; align-items: flex-start; justify-content: space-between; }
.td-snapshot-ring .td-ring { width: 92px; height: 92px; }
.td-snapshot-ring .td-ring-inner { width: 73px; height: 73px; font-size: 1.2rem; }
.td-snapshot-ring .td-ring-label { margin-top: 0.55rem; }
.td-snapshot-hi { display: flex; flex-direction: column; gap: 0.5rem; }
.td-snapshot-hi-row {
    display: block; text-decoration: none;
    background: rgba(255,255,255,0.02); border: 1px solid var(--td-line-soft);
    border-radius: 0.6rem; padding: 0.55rem 0.75rem;
    transition: border-color .15s ease, background .15s ease;
}
a.td-snapshot-hi-row:hover { border-color: rgba(129,140,248,0.35); background: rgba(129,140,248,0.06); }
.td-snapshot-hi-label { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--td-text-dim); }
.td-snapshot-hi-val { font-size: 0.95rem; font-weight: 650; color: #f2f2f4; margin-top: 0.05rem; font-variant-numeric: tabular-nums; }
.td-snapshot-hi-sub { font-size: 0.62rem; color: var(--td-text-dim); opacity: 0.7; margin-top: 0.05rem; }
.td-snapshot-ring { display: flex; flex-direction: column; align-items: center; text-align: center; }
.td-snapshot-ring-sub { font-size: 0.56rem; color: var(--td-text-dim); opacity: 0.65; margin-top: 0.1rem; letter-spacing: 0.04em; }
/* TeamDocks ring: same size as the rest, set apart by the accent label and a
   slightly stronger halo - emphasis without breaking the equal-size row. */
.td-snapshot-ring.is-hero .td-ring-label { color: #c7d2fe; font-weight: 700; }
.td-snapshot-ring.is-hero .td-ring { box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 0 30px -8px var(--ring-color); }
.td-snapshot-div { height: 1px; background: var(--td-line-soft); margin: 1.5rem 0; }
.td-snapshot-subhead { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--td-text-dim); }

/* --- Suspicion bars (csrep-style) ----------------------------------------
   Per-stat horizontal bar with five zones (weak -> normal -> increasingly
   suspicious). A white marker shows the player's value; a dashed tick marks
   the pro-level reference (right of it = better-than-typical-pro = sus). */
.td-susrow { margin-bottom: 0.95rem; }
.td-susrow-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.4rem; gap: 0.6rem; }
.td-susrow-label { font-size: 0.8rem; color: #d5d6da; font-weight: 500; }
/* Value as a subtle chip tinted in its zone color (color set inline per row) -
   reads as a verdict badge instead of naked colored text floating in space. */
.td-susrow-val {
    font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums;
    padding: 0.14rem 0.5rem; border-radius: 0.4rem; white-space: nowrap;
    background: color-mix(in srgb, currentColor 11%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.td-susbar { position: relative; height: 0.55rem; }
/* Muted zone segments with hairline gaps - the zones are context, not the
   headline, so they sit back; the marker carries the attention. */
.td-susbar-track { display: flex; gap: 2px; height: 100%; border-radius: 999px; overflow: hidden; }
.td-susbar-track > span { flex: 1; opacity: 0.32; }
.td-susbar-track > span:first-child { border-radius: 999px 0 0 999px; }
.td-susbar-track > span:last-child { border-radius: 0 999px 999px 0; }
.td-susbar-marker {
    position: absolute; top: -4px; width: 3px; height: calc(100% + 8px);
    background: #fff; border-radius: 2px; transform: translateX(-1.5px);
    box-shadow: 0 0 0 2px rgba(5,6,8,0.7), 0 0 10px rgba(255,255,255,0.35);
    transition: left .5s ease;
}
.td-susbar-pro { position: absolute; top: -6px; height: calc(100% + 12px); border-left: 1px dashed rgba(255,255,255,0.5); }
/* tiny flag under the pro tick so the dashed line explains itself in place
   (below the bar - above it would collide with the row's label/value head) */
.td-susbar-pro::after {
    content: 'PRO'; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 0.1rem; font-size: 0.5rem; font-weight: 700; letter-spacing: 0.08em;
    color: rgba(255,255,255,0.38);
}
.td-suslegend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.66rem; color: var(--td-text-dim); }
.td-suslegend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.td-suslegend i { width: 0.55rem; height: 0.55rem; border-radius: 2px; display: inline-block; }

/* --- Page decoration (partials/decor.php) --------------------------------
   Full-bleed background on every non-match page, same proven treatment as
   match.php's .td-page-backdrop (fixed, cover, blurred, brightness/
   saturate-adjusted) - NOT a small corner decoration (an earlier version
   tried a single agent portrait in a back corner; even at large native
   resolution that reads as a small logo, not a background). Rotates between
   several CS2-branded, non-map images (see partials/decor.php) - background-
   image is set inline per-page there, not hardcoded here. Noticeably
   brighter than match.php's subtle map backdrop by design - the ask here was
   explicitly to brighten the rest of the site up, not add another dim
   atmosphere layer. */
.td-decor-bg {
    position: fixed;
    inset: -20px;
    z-index: -2;
    background-size: cover;
    background-position: center;
    filter: blur(1.5px) brightness(0.95) saturate(1.15);
    transform: scale(1.04);
}
.td-decor-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Just enough veil for card/text contrast (cards already carry their own
       --td-card-bg scrim on top of this) - lets the art read clearly instead
       of being smothered down to near-invisible like the old .td-ambient-only
       look. */
    background: linear-gradient(180deg, rgba(8,9,11,0.38) 0%, rgba(8,9,11,0.58) 100%);
}
.td-decor-bg-flip { transform: scale(1.04) scaleX(-1); }

/* --- FACEIT level pip ---------------------------------------------------- */
.td-faceit { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; }
.td-faceit-lvl { width: 1.35rem; height: 1.35rem; border-radius: 0.3rem; display: grid; place-items: center; font-weight: 700; font-size: 0.72rem; color: #0a0a0c; }

/* ==========================================================================
   SHARED PRIMITIVES (added in the polish pass) — these replace per-page
   hand-rolled copies of inputs, alerts, card headers, page wrappers, tab
   bars and stat strips so every page renders identical chrome. Prefer these
   over inventing new inline Tailwind strings.
   ========================================================================== */

/* --- Page wrapper: one container width + padding rhythm site-wide, aligned
   to the nav/footer's max-w (72rem). Content pages use .td-page; narrow form
   pages (settings/login/error) opt into .td-page-narrow. --- */
.td-page { max-width: 72rem; margin: 0 auto; padding: 2.5rem 1.5rem 1rem; }
.td-page-narrow { max-width: 32rem; }
@media (max-width: 640px) { .td-page { padding: 1.75rem 1rem 0.5rem; } }

/* --- Page intro (eyebrow + h1 + description), consistent spacing --- */
.td-page-head { margin-bottom: 2rem; }
.td-page-head h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; margin: 0.15rem 0 0.4rem; }
.td-page-head p { font-size: 0.875rem; color: #6b7280; max-width: 46rem; }

/* --- Card header: icon + eyebrow title + optional right-aligned action.
   Replaces the three divergent header patterns. --- */
.td-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.25rem; }
.td-card-head-l { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.td-card-head .material-symbols-rounded { color: #9ca3af; flex-shrink: 0; }
.td-card-head-sub { font-size: 0.72rem; color: var(--td-text-dim); margin: -0.9rem 0 1.1rem; }

/* --- Inputs: one treatment for text/select, replaces ~10 hand-rolled copies
   with three different value sets. --- */
.td-input {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--td-line);
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
    color: #f2f2f4;
    font-size: 0.85rem;
    transition: border-color .15s ease;
    width: 100%;
}
.td-input::placeholder { color: #565b66; }
.td-input:focus { outline: none; border-color: rgba(255,255,255,0.3); }
.td-input-sm { padding: 0.4rem 0.6rem; font-size: 0.78rem; }
select.td-input { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b8f9a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.6rem center; }
select.td-input option { background: #14151a; color: #f2f2f4; }
textarea.td-input { resize: vertical; min-height: 5rem; line-height: 1.5; font-family: inherit; }

/* --- Native form controls, restyled to the design system ------------------
   One custom treatment each for checkbox / radio / range so no page falls back
   to the raw browser widget (which ignores dark mode and looks bolted-on). All
   keep the native element for accessibility + keyboard, just repaint it. --- */
.td-check, .td-radio {
    appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; flex-shrink: 0;
    width: 1.15rem; height: 1.15rem;
    border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.03);
    transition: border-color .15s ease, background .15s ease;
    display: inline-grid; place-content: center; position: relative;
}
.td-check { border-radius: 0.35rem; }
.td-radio { border-radius: 50%; }
.td-check:hover, .td-radio:hover { border-color: rgba(129,140,248,0.6); }
.td-check:focus-visible, .td-radio:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,0.28); }
.td-check:checked, .td-radio:checked { background: #6366f1; border-color: #6366f1; }
.td-check:checked::after {
    content: ''; width: 0.62rem; height: 0.62rem;
    background: #fff; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.td-radio:checked::after { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #fff; }

/* Toggle switch - the CS2-style on/off used for privacy prefs. Wraps a real
   checkbox: <label class="td-switch"><input type="checkbox"><span></span></label> */
.td-switch { position: relative; display: inline-flex; flex-shrink: 0; width: 2.5rem; height: 1.4rem; cursor: pointer; }
.td-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.td-switch span {
    position: absolute; inset: 0; border-radius: 999px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
    transition: background .18s ease, border-color .18s ease;
}
.td-switch span::before {
    content: ''; position: absolute; top: 50%; left: 0.18rem; transform: translateY(-50%);
    width: 0.95rem; height: 0.95rem; border-radius: 50%; background: #d5d6da;
    transition: transform .18s ease, background .18s ease;
}
.td-switch input:checked + span { background: rgba(99,102,241,0.9); border-color: rgba(99,102,241,0.9); }
.td-switch input:checked + span::before { transform: translate(1.1rem, -50%); background: #fff; }
.td-switch input:focus-visible + span { box-shadow: 0 0 0 3px rgba(99,102,241,0.28); }

/* Range slider (replay scrub, playback speed). */
.td-range {
    appearance: none; -webkit-appearance: none; width: 100%; height: 4px; border-radius: 999px;
    background: rgba(255,255,255,0.12); cursor: pointer; outline: none;
}
.td-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%;
    background: #a5b4fc; border: 2px solid #0c0d10; box-shadow: 0 0 0 1px rgba(129,140,248,0.5);
    transition: background .15s ease, transform .1s ease;
}
.td-range::-webkit-slider-thumb:hover { background: #c7d2fe; transform: scale(1.12); }
.td-range::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%; background: #a5b4fc; border: 2px solid #0c0d10;
    box-shadow: 0 0 0 1px rgba(129,140,248,0.5); cursor: pointer;
}
.td-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(99,102,241,0.3); }

/* Settings row: label/description on the left, control on the right, with a
   hairline divider - fixes the cramped/misaligned checkbox rows. */
.td-setting { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding: 1rem 0; border-top: 1px solid var(--td-line-soft); }
.td-setting:first-of-type { border-top: none; }
.td-setting-text { min-width: 0; }
.td-setting-title { font-size: 0.9rem; color: #e5e7eb; font-weight: 500; }
.td-setting-desc { font-size: 0.78rem; color: #6b7280; margin-top: 0.2rem; line-height: 1.45; }

/* --- Modal (reusable overlay dialog) --------------------------------------
   Hidden by default; .is-open fades it in. Backdrop blur + centered card, same
   glass language as .td-card. Locked to viewport, scrolls internally. --- */
.td-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.td-modal.is-open { display: flex; }
.td-modal-backdrop { position: absolute; inset: 0; background: rgba(4,5,7,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.td-modal-box {
    position: relative; z-index: 1; width: 100%; max-width: 30rem; max-height: calc(100vh - 3rem); overflow-y: auto;
    background: rgba(16,18,24,0.96); border: 1px solid rgba(255,255,255,0.12); border-radius: 1rem;
    box-shadow: 0 32px 80px -20px rgba(0,0,0,0.85); animation: td-modal-in .18s ease;
}
@keyframes td-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.td-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem; border-bottom: 1px solid var(--td-line-soft); }
.td-modal-title { font-size: 1rem; font-weight: 600; color: #f2f2f4; }
.td-modal-close { display: grid; place-content: center; width: 2rem; height: 2rem; border-radius: 0.5rem; border: 1px solid transparent; background: transparent; color: #9a9eaa; cursor: pointer; transition: color .15s ease, background .15s ease; }
.td-modal-close:hover { color: #fff; background: rgba(255,255,255,0.06); }
.td-modal-body { padding: 1.25rem 1.4rem; }
.td-modal-foot { display: flex; gap: 0.75rem; justify-content: flex-end; padding: 1rem 1.4rem 1.25rem; }

/* CS2-style report category options: a stack of selectable cards, each wrapping
   a hidden radio. Selected card gets an accent border + fill. */
.td-report-opt { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0.85rem; border: 1px solid var(--td-line); border-radius: 0.65rem; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.td-report-opt:hover { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.02); }
.td-report-opt input { margin-top: 0.1rem; }
.td-report-opt:has(input:checked) { border-color: rgba(129,140,248,0.55); background: rgba(129,140,248,0.07); }
.td-report-opt-title { font-size: 0.85rem; color: #e5e7eb; font-weight: 500; }
.td-report-opt-desc { font-size: 0.72rem; color: #6b7280; margin-top: 0.1rem; line-height: 1.4; }

/* --- Live Steam presence line (profile header) - a colored status dot + label,
   live states get a soft static glow ring (no animation, per the design rules).
   Colors: offline grey, online/looking green, away/busy amber, in-game/lobby
   accent, in a live match green (the "they're playing right now" state). --- */
.td-live { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.55rem; font-size: 0.78rem; }
.td-live-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--td-muted); flex-shrink: 0; }
.td-live-label { font-weight: 600; }
.td-live-detail { color: var(--td-text-dim); }
.td-live-detail::before { content: '·'; margin-right: 0.45rem; }
.td-live.is-offline .td-live-dot { background: #6b7280; }
.td-live.is-offline .td-live-label { color: #7c828e; }
.td-live.is-online  .td-live-dot { background: var(--td-good); }
.td-live.is-online  .td-live-label { color: #86e5c4; }
.td-live.is-away    .td-live-dot { background: var(--td-warn); }
.td-live.is-away    .td-live-label { color: #fcd34d; }
.td-live.is-ingame .td-live-dot, .td-live.is-lobby .td-live-dot {
    background: var(--td-accent); box-shadow: 0 0 0 3px rgba(129,140,248,0.16);
}
.td-live.is-ingame .td-live-label, .td-live.is-lobby .td-live-label { color: #c7d2fe; }
.td-live.is-match .td-live-dot { background: var(--td-good); box-shadow: 0 0 0 3px rgba(52,211,153,0.2); }
.td-live.is-match .td-live-label { color: #86e5c4; }
/* Premade-stack marker (cswat.ch-style "≥3-stack"), accent-tinted + helps on hover. */
.td-live-stack { color: var(--td-accent); font-weight: 600; cursor: help; }
.td-live-stack::before { content: '·'; margin-right: 0.45rem; color: var(--td-text-dim); font-weight: 400; }

/* --- Stat band (landing/dashboard KPI strip) - ONE glass card with hairline
   dividers between cells instead of four disconnected boxes; reads as a
   single instrument panel. --- */
.td-statband {
    display: grid; grid-template-columns: repeat(2, 1fr);
    background: var(--td-card-bg); border: 1px solid var(--td-line);
    border-radius: 0.9rem; backdrop-filter: blur(14px); overflow: hidden;
}
@media (min-width: 768px) { .td-statband { grid-template-columns: repeat(4, 1fr); } }
.td-statband-cell { padding: 1.1rem 1.3rem; border-left: 1px solid var(--td-line-soft); }
.td-statband-cell:first-child { border-left: none; }
@media (max-width: 767px) {
    .td-statband-cell:nth-child(odd) { border-left: none; }
    .td-statband-cell:nth-child(n+3) { border-top: 1px solid var(--td-line-soft); }
}

/* Icon tile - small glass square holding a tdIcon() glyph, used in feature
   cards / stat labels so icons sit in a consistent frame instead of floating. */
.td-icontile {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: 0.55rem; flex-shrink: 0;
    background: rgba(129,140,248,0.08); border: 1px solid rgba(129,140,248,0.2);
    color: #a5b4fc;
}

/* Compact ring variant (dashboard header trust/rating) */
.td-ring-sm { width: 56px; height: 56px; }
.td-ring-sm .td-ring-inner, .td-ring.td-ring-sm .td-ring-inner { width: 44px; height: 44px; font-size: 0.82rem; }

/* Country flag image (flagcdn) - subtle ring so a white/light flag doesn't
   blend into the dark card, slight rounding to match the UI. */
.td-flag { display: inline-block; vertical-align: -0.15em; border-radius: 2px; object-fit: cover; box-shadow: 0 0 0 1px rgba(255,255,255,0.12); }

/* --- Alerts: shared error/success/info boxes --- */
.td-alert { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: 0.6rem; font-size: 0.85rem; border: 1px solid; line-height: 1.45; }
.td-alert .material-symbols-rounded { flex-shrink: 0; font-size: 1.15em; vertical-align: 0; margin-top: 0.05rem; }
.td-alert-error   { background: rgba(248,113,113,0.05); border-color: rgba(248,113,113,0.2); color: #f2a4a4; }
.td-alert-success { background: rgba(52,211,153,0.05);  border-color: rgba(52,211,153,0.2);  color: #86e5c4; }
.td-alert-info    { background: rgba(129,140,248,0.05); border-color: rgba(129,140,248,0.2); color: #b3bafc; }

/* --- Small tag modifier (boxed chip look, vs the default underline tag).
   Replaces the repeated inline style="padding:2px 8px" on td-tag. --- */
.td-tag-sm { font-size: 0.68rem; padding: 0.15rem 0.5rem; border: 1px solid currentColor; border-radius: 999px; opacity: 0.95; }
.td-tag-box { border-bottom: none; border: 1px solid currentColor; border-radius: 0.4rem; padding: 0.18rem 0.5rem; }

/* --- Stat value color states (replaces inline style="color:#..." on the
   td-stat-value element). --- */
.td-stat-value.is-good { color: var(--td-good); }
.td-stat-value.is-warn { color: var(--td-warn); }
.td-stat-value.is-risk { color: var(--td-risk); }
.td-stat-value.is-muted { color: var(--td-muted); }

/* --- Side (CT/T) text colors. Replaces the site-wide hardcoded
   style="color:#5aa9e6" / "#e6a23c" inline hex with the single-source-of-truth
   --td-ct / --td-t vars (which the JS TD.CT / TD.T constants also mirror). --- */
.td-ct { color: var(--td-ct); }
.td-t  { color: var(--td-t); }

/* --- General status text colors (unsloppify §1.6): semantic replacements for
   the scattered hardcoded status hex, exactly matching the palette vars.
   .is-* above are scoped to .td-stat-value; these are standalone utilities. --- */
.td-good { color: var(--td-good); }
.td-warn { color: var(--td-warn); }
.td-risk { color: var(--td-risk); }
.td-muted { color: var(--td-muted); }
/* Elevated "hero" stat tile for the single headline metric in a group. */
.td-stat-hero { border-color: rgba(129,140,248,0.35); background: rgba(129,140,248,0.06); }

/* --- Base tab class (index.php referenced td-tab with no definition). --- */
.td-tab { padding-bottom: 0.6rem; border-bottom: 1px solid transparent; font-weight: 500; font-size: 0.85rem; color: #6b7280; cursor: pointer; transition: color .15s ease, border-color .15s ease; background: none; }
.td-tab:hover { color: #c9cad0; }
.td-tab.td-tab-active { border-bottom-color: #f2f2f4; color: #fff; }

/* --- Diverging bar (CT vs T, or any two-sided split). Two equal halves; each
   side's fill grows OUTWARD from the shared center line, 0-100% of its half.
   Used by side-win-rate displays instead of bare % text. --- */
.td-diverge { display: flex; align-items: center; gap: 0.5rem; }
.td-diverge-track { flex: 1; height: 0.55rem; display: flex; }
.td-diverge-half { width: 50%; height: 100%; background: rgba(255,255,255,0.05); display: flex; overflow: hidden; }
.td-diverge-half-ct { justify-content: flex-end; border-radius: 999px 0 0 999px; }
.td-diverge-half-t  { justify-content: flex-start; border-radius: 0 999px 999px 0; }
.td-diverge-half-ct > i { background: var(--td-ct); height: 100%; display: block; }
.td-diverge-half-t  > i { background: var(--td-t);  height: 100%; display: block; }
.td-diverge-end { font-size: 0.72rem; font-weight: 600; min-width: 2.6rem; }

/* --- Mini horizontal metric bar (label · track · value), a lighter building
   block than td-susrow for simple 0-100 comparisons. --- */
.td-mbar { margin-bottom: 0.7rem; }
.td-mbar:last-child { margin-bottom: 0; }
.td-mbar-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.28rem; }
.td-mbar-label { font-size: 0.76rem; color: #c9cad0; }
.td-mbar-val { font-size: 0.74rem; font-weight: 600; color: #f2f2f4; }
.td-mbar-track { height: 0.4rem; border-radius: 999px; background: rgba(255,255,255,0.06); overflow: hidden; }
.td-mbar-fill { height: 100%; border-radius: 999px; background: var(--td-accent); transition: width .5s ease; }

/* --- Section divider label (thin rule with a small caption) for grouping
   inside a single card without stacking full sub-cards. --- */
.td-subhead { display: flex; align-items: center; gap: 0.6rem; margin: 1.35rem 0 0.85rem; }
.td-subhead:first-child { margin-top: 0; }
.td-subhead span { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--td-text-dim); white-space: nowrap; }
.td-subhead::after { content: ''; flex: 1; height: 1px; background: var(--td-line-soft); }

/* --- Premium / freemium gating (added in the commercial pass) ------------
   Deliberately restrained per the design brief: no pills, no colored chips,
   no badges. The premium marker is plain letterspaced uppercase text with a
   lock glyph; the locked panel is a quiet bordered placeholder. */
.td-premium-mark {
    display: inline-flex; align-items: center; gap: 0.28rem;
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: #9aa0b4; vertical-align: middle;
}
.td-premium-mark .material-symbols-rounded { font-size: 0.85rem; opacity: 0.8; }

.td-locked {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0.5rem; padding: 2.75rem 1.5rem;
    border: 1px dashed var(--td-line); border-radius: 0.9rem;
    background: rgba(255,255,255,0.012);
}
.td-locked-icon { font-size: 1.6rem; color: #6b7280; }
.td-locked-title { font-size: 0.95rem; font-weight: 600; color: #e6e7ea; }
.td-locked-desc { font-size: 0.82rem; color: var(--td-text-dim); max-width: 30rem; line-height: 1.55; margin: 0 0 0.4rem; }

/* Pricing plan columns */
.td-plan { border: 1px solid var(--td-line); border-radius: 0.9rem; padding: 1.75rem; background: var(--td-card-bg); backdrop-filter: blur(14px); display: flex; flex-direction: column; }
.td-plan-featured { border-color: rgba(129,140,248,0.4); }
.td-plan-name { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--td-text-dim); }
.td-plan-price { font-size: 2.1rem; font-weight: 650; letter-spacing: -0.02em; margin: 0.6rem 0 0.15rem; }
.td-plan-price small { font-size: 0.85rem; font-weight: 400; color: var(--td-text-dim); letter-spacing: 0; }
.td-plan-tagline { font-size: 0.82rem; color: var(--td-text-dim); margin-bottom: 1.4rem; line-height: 1.5; }
.td-plan-features { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }
.td-plan-features li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.86rem; color: #d2d4d9; line-height: 1.45; }
.td-plan-features li .material-symbols-rounded { font-size: 1.05rem; margin-top: 0.05rem; flex-shrink: 0; }
.td-plan-features li.td-feat-on .material-symbols-rounded { color: var(--td-good); }
.td-plan-features li.td-feat-off { color: #6b7280; }
.td-plan-features li.td-feat-off .material-symbols-rounded { color: #4b5563; }
.td-plan .td-plan-cta { margin-top: auto; }
/* --- Global search command bar -------------------------------------------
   Homepage players/matches search. Dropdown panel anchored under the input;
   skeleton rows reuse .td-skel. Restrained - hairline borders, no glow. */
.td-search { position: relative; }
/* Anchored in the header: grows to fill the space between the wordmark and the
   nav links, capped so it never dominates on wide screens. */
.td-nav-search { flex: 1 1 auto; max-width: 30rem; min-width: 12rem; margin: 0 1.25rem; }
.td-search-box { position: relative; display: flex; align-items: center; }
.td-search-icon { position: absolute; left: 0.75rem; color: var(--td-text-dim); font-size: 1.15rem; pointer-events: none; transition: color .15s ease; }
/* Dark glassmorphism: translucent fill + blur so the nav backdrop shows
   through, hairline border, soft inset highlight. */
.td-search-input {
    width: 100%; background: rgba(255,255,255,0.045); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.10); border-radius: 0.7rem;
    padding: 0.48rem 2.3rem 0.48rem 2.35rem; color: #e7e8ec; font-size: 0.86rem;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.td-search-input::placeholder { color: #6b7280; }
.td-search-input:focus { outline: none; border-color: rgba(129,140,248,0.5); background: rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 0 3px rgba(99,102,241,0.12); }
.td-search-box:focus-within .td-search-icon { color: #a5b4fc; }
.td-search-kbd {
    position: absolute; right: 0.55rem; top: 50%; transform: translateY(-50%);
    font-size: 0.7rem; color: #6b7280; border: 1px solid rgba(255,255,255,0.14);
    border-radius: 0.3rem; padding: 0.02rem 0.36rem; font-family: inherit; line-height: 1.45;
    background: rgba(255,255,255,0.03); transition: opacity .15s ease;
}
.td-search-box:focus-within .td-search-kbd { opacity: 0; }
.td-search-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 0.55rem); z-index: 60;
    background: rgba(15,17,23,0.86); -webkit-backdrop-filter: blur(20px) saturate(130%); backdrop-filter: blur(20px) saturate(130%);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 0.8rem;
    box-shadow: 0 24px 60px -14px rgba(0,0,0,0.8); overflow: hidden; max-height: 74vh; overflow-y: auto;
}
@media (max-width: 640px) {
    .td-nav-search { margin: 0 0.6rem; }
    .td-search-kbd { display: none; }
    /* the panel can go nearly full-bleed on a phone so results aren't cramped */
    .td-search-panel { position: fixed; left: 0.6rem; right: 0.6rem; top: 3.7rem; }
}
.td-search-group-label {
    font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280;
    padding: 0.7rem 0.9rem 0.35rem; display: flex; align-items: center; gap: 0.4rem;
}
.td-search-row {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.9rem; cursor: pointer;
    text-decoration: none; color: inherit; border-left: 2px solid transparent;
}
.td-search-row:hover, .td-search-row.is-active { background: rgba(255,255,255,0.05); border-left-color: #6366f1; }
.td-search-av { width: 1.9rem; height: 1.9rem; border-radius: 0.35rem; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.04); }
.td-search-map { width: 2.4rem; height: 1.5rem; border-radius: 0.3rem; object-fit: cover; flex-shrink: 0; background: rgba(255,255,255,0.04); }
.td-search-name { flex: 1; min-width: 0; font-size: 0.86rem; color: #d6d8de; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-search-sub { font-size: 0.72rem; color: #6b7280; }
.td-search-meta { font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.td-search-empty { padding: 1.1rem 0.9rem; font-size: 0.84rem; color: #6b7280; text-align: center; }
.td-search-skel { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.9rem; }
.td-search-skel .td-skel-av { width: 1.9rem; height: 1.9rem; border-radius: 0.35rem; flex-shrink: 0; }
.td-search-skel .td-skel-line { height: 0.7rem; border-radius: 0.3rem; }
.td-search-pro { font-size: 0.62rem; letter-spacing: 0.08em; color: #8b8f9a; flex-shrink: 0; }

/* --- Match utility tiles (per-grenade clickable icons) ------------------- */
.td-util-tile {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.45rem; background: rgba(255,255,255,0.02); cursor: pointer;
    transition: background .12s ease, transform .12s ease;
}
.td-util-tile:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); }

/* --- Rank badge hover popover (last match + provider deep-links) --------- */
.td-rankpop { position: relative; display: inline-flex; }
.td-rankpop-panel {
    position: absolute; top: calc(100% + 0.55rem); left: 0; z-index: 40;
    min-width: 15rem; padding: 0.7rem 0.8rem;
    border: 1px solid rgba(255,255,255,0.12); border-radius: 0.7rem;
    background: rgba(16,18,24,0.86); backdrop-filter: blur(18px) saturate(130%);
    box-shadow: 0 14px 34px -12px rgba(0,0,0,0.7);
    opacity: 0; visibility: hidden; transform: translateY(-4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
    pointer-events: none;
}
.td-rankpop:hover .td-rankpop-panel,
.td-rankpop:focus-within .td-rankpop-panel {
    opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
/* bridge the gap so the panel doesn't vanish while the cursor travels to it */
.td-rankpop-panel::before {
    content: ''; position: absolute; top: -0.55rem; left: 0; right: 0; height: 0.55rem;
}
.td-rankpop-title {
    font-size: 0.62rem; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgba(255,255,255,0.42); margin-bottom: 0.45rem;
}
.td-rankpop-match { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.td-rankpop-map { font-size: 0.9rem; font-weight: 600; color: #f3f4f6; }
.td-rankpop-kd { font-size: 0.82rem; color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }
.td-rankpop-date { font-size: 0.72rem; color: rgba(255,255,255,0.38); margin-top: 0.15rem; }
.td-rankpop-links { display: flex; flex-direction: column; margin-top: 0.55rem; gap: 0.1rem; }
.td-rankpop-link {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.35rem 0.4rem; margin: 0 -0.4rem; border-radius: 0.4rem;
    font-size: 0.82rem; color: rgba(255,255,255,0.78);
    transition: background .12s ease, color .12s ease;
}
.td-rankpop-link:hover { background: rgba(255,255,255,0.06); color: #fff; }
.td-rankpop-link .material-symbols-rounded { font-size: 0.95rem; opacity: 0.55; }

/* --- Segmented view toggle (radar/POV switches, utility type filter) ---- */
.td-viewseg {
    display: inline-flex; padding: 3px; gap: 2px; border-radius: 0.55rem;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
}
.td-viewseg-btn {
    padding: 0.3rem 0.9rem; border-radius: 0.42rem; font-size: 0.8rem; font-weight: 500;
    color: rgba(255,255,255,0.55); background: transparent; cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.td-viewseg-btn:hover:not(:disabled) { color: #fff; }
.td-viewseg-btn.is-active { background: rgba(255,255,255,0.12); color: #fff; }
.td-viewseg-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* --- TeamDocks Rating dimension bars ------------------------------------ */
.td-tddim-track {
    width: 100%; height: 5px; border-radius: 3px;
    background: rgba(255,255,255,0.06); overflow: hidden;
}
.td-tddim-fill {
    height: 100%; border-radius: 3px;
    transition: width .35s cubic-bezier(0.4,0,0.2,1);
}

/* --- Leaderboard data bars + rank medals --------------------------------- */
.td-lb-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.25rem; height: 1.25rem; border-radius: 9999px;
    font-size: 10px; font-weight: 700; border: 1px solid;
}
.td-lb-val { position: relative; min-width: 9rem; padding: 0.15rem 0.5rem 0.15rem 0.5rem; }
.td-lb-val > span { position: relative; z-index: 1; }
.td-lb-bar {
    position: absolute; inset: 0; border-radius: 0.3rem; overflow: hidden;
}
.td-lb-bar span {
    display: block; height: 100%;
    background: rgba(99,102,241,0.28);
    border-radius: 0.3rem;
}

/* --- Compact table density (match scoreboard: both teams on one screen) -- */
.td-table-compact th { padding: 0.4rem 0.6rem; }
.td-table-compact td { padding: 0.35rem 0.6rem; font-size: 0.82rem; }

/* --- Premier rating plate, modern CS2 look (replaces the beta-era striped
   frame asset): skewed dark plate, tier-colored edge + soft glow, italic
   rating with the sub-thousands group de-emphasized like the game's own
   scoreboard. --pc = tier color. --- */
.td-premier2 {
    display: inline-flex; align-items: stretch; gap: 4px;
    height: 32px; flex-shrink: 0;
}
.td-premier2-wing {
    width: 6px; transform: skewX(-16deg); border-radius: 1px;
    background: var(--pc); opacity: 0.9;
}
.td-premier2-wing2 { width: 4px; opacity: 0.45; }
.td-premier2-plate {
    display: flex; align-items: center; padding: 0 14px 0 12px;
    transform: skewX(-16deg); border-radius: 2px;
    background: linear-gradient(180deg, #23262d 0%, #14161b 100%);
    border: 1px solid color-mix(in srgb, var(--pc) 60%, transparent);
    box-shadow:
        0 0 12px color-mix(in srgb, var(--pc) 28%, transparent),
        inset 0 0 14px color-mix(in srgb, var(--pc) 16%, transparent);
}
.td-premier2-num {
    font-weight: 800; font-style: italic; font-size: 0.95rem;
    letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
    color: var(--pc);
    text-shadow: 0 0 8px color-mix(in srgb, var(--pc) 55%, transparent);
    /* keep the digits upright-ish against the plate skew, like the game */
    transform: skewX(6deg);
}
.td-premier2-rest { font-size: 0.78em; opacity: 0.85; }

/* --- Lab: weapon chips + horizontal meters --- */
.td-chip {
    display: inline-flex; align-items: center; gap: 0.15rem;
    font-size: 0.78rem; font-weight: 500; line-height: 1;
    padding: 0.4rem 0.7rem; border-radius: 0.5rem;
    background: rgba(255,255,255,0.03); border: 1px solid var(--td-line);
    color: #c1c3cb; cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.td-chip:hover { border-color: rgba(255,255,255,0.22); color: #fff; }
.td-chip-active { background: rgba(129,140,248,0.12); border-color: rgba(129,140,248,0.5); color: #c7d2fe; }
.td-chip-active:hover { color: #e0e7ff; }

.td-meter {
    width: 100%; height: 0.4rem; border-radius: 999px;
    background: rgba(255,255,255,0.06); overflow: hidden;
}
.td-meter-fill { height: 100%; border-radius: 999px; transition: width .35s ease; }
.td-chip-gun { height: 0.95rem; width: auto; max-width: 2.6rem; opacity: 0.85; filter: brightness(2.2) grayscale(0.4); margin-right: 0.3rem; }
.td-chip-active .td-chip-gun { opacity: 1; filter: brightness(2.6); }
.td-pcttag { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }

/* --- Utility page: map overview minimap + tooltip + jump highlight --- */
.up-ovr {
    position: relative; width: 100%; max-width: 22rem; flex-shrink: 0;
    aspect-ratio: 1 / 1; border-radius: 0.6rem; overflow: hidden;
    border: 1px solid var(--td-line); background: #05070a;
}
.up-ovr-mk { cursor: pointer; }
.up-ovr-mk .up-ovr-ring { opacity: 0; transition: opacity .15s ease; }
.up-ovr-mk:hover .up-ovr-ring { opacity: 0.55; }
.up-ovr-mk text { pointer-events: none; user-select: none; }
.up-ovr-row {
    display: flex; align-items: center; gap: 0.55rem; width: 100%;
    padding: 0.32rem 0.3rem; font-size: 0.8rem; color: #c1c3cb;
    border-radius: 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background .12s ease, color .12s ease;
}
.up-ovr-row:hover { background: rgba(255,255,255,0.045); color: #fff; }
.up-ovr-rank {
    width: 1.25rem; text-align: right; flex-shrink: 0;
    font-family: ui-monospace, monospace; font-size: 0.72rem; color: #7a8092;
}
.up-tip {
    position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none;
    background: rgba(8, 10, 15, 0.94); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 0.45rem; padding: 0.4rem 0.6rem; max-width: 15rem;
    backdrop-filter: blur(4px);
}
.up-tip-head { display: block; font-size: 0.76rem; font-weight: 600; color: #e5e7eb; white-space: nowrap; }
.up-tip-sub { display: block; font-size: 0.68rem; color: #9aa0ad; margin-top: 0.1rem; }
@keyframes up-flash-kf {
    0% { border-color: rgba(129, 140, 248, 0.65); }
    100% { border-color: var(--td-line); }
}
.up-flash { animation: up-flash-kf 1.6s ease-out 1; }

/* Admin role-assignment radio tiles (overwatch_admin.php). Rectangular,
   hairline border, accent-on-select via the per-badge --bc custom prop -
   deliberately not a pill. Native radio hidden, :has() drives the state. */
.td-badge-pick {
    position: relative; display: flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.6rem; cursor: pointer;
    border: 1px solid var(--td-line); border-radius: 0.4rem;
    font-size: 0.78rem; color: #c9cad0; user-select: none;
    transition: border-color .15s, background .15s;
}
.td-badge-pick input { position: absolute; opacity: 0; pointer-events: none; }
.td-badge-pick:hover { border-color: rgba(255,255,255,0.22); }
.td-badge-pick:has(input:checked) { border-color: var(--bc); background: color-mix(in srgb, var(--bc) 12%, transparent); }
.td-badge-pick.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* Continuous-tracking setup tutorial (tdTrackingTutorial() — settings.php +
   landing dashboard). Numbered steps, hairline connector down the left, no
   pills/gradients. Matches the analytics-terminal language. */
.td-tut-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.td-tut-step { display: flex; gap: 0.85rem; padding: 0 0 1.1rem; position: relative; }
.td-tut-step:last-child { padding-bottom: 0; }
/* connector line joining the number badges */
.td-tut-step:not(:last-child)::before {
    content: ""; position: absolute; left: 0.87rem; top: 1.9rem; bottom: 0.15rem;
    width: 1px; background: var(--td-line);
}
.td-tut-num {
    flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 9999px;
    display: grid; place-items: center; font-size: 0.82rem; font-weight: 600;
    color: #c7d2fe; background: rgba(129,140,248,0.12);
    border: 1px solid rgba(129,140,248,0.35); position: relative; z-index: 1;
}
.td-tut-body { min-width: 0; padding-top: 0.1rem; }
.td-tut-title { font-size: 0.9rem; font-weight: 500; color: #e5e7eb; }
.td-tut-hl { color: #a5b4fc; }
.td-tut-desc { font-size: 0.78rem; line-height: 1.5; color: #8b8f9a; margin-top: 0.2rem; }
.td-tut-field { color: #c9cad0; border-bottom: 1px dotted rgba(255,255,255,0.25); }
.td-tut-code {
    display: inline-block; margin-top: 0.5rem; font-family: ui-monospace, monospace;
    font-size: 0.74rem; letter-spacing: 0.02em; color: #9aa0ac;
    background: rgba(0,0,0,0.3); border: 1px solid var(--td-line);
    border-radius: 0.35rem; padding: 0.2rem 0.5rem;
}
.td-tut-foot {
    font-size: 0.72rem; line-height: 1.55; color: #6f7480;
    border-top: 1px solid var(--td-line-soft); margin-top: 1rem; padding-top: 0.85rem;
}
.td-tut-alt { display: block; margin-top: 0.4rem; color: #565b66; }