/* =========================================================================
   BestPixel Portal — Liquid Glass (dark) design system  ·  v2
   ========================================================================= */

:root {
    /* Brand palette */
    --bp-indigo:     #6c63ff;
    --bp-indigo-600: #564dff;
    --bp-indigo-300: #8b85ff;
    --bp-indigo-200: #a8a4ff;
    --bp-violet:     #b06cff;
    --bp-ink:        #07091a;

    /* Base surfaces */
    --bg-0: #050612;
    --bg-1: #080a1c;

    /* Glass tokens */
    --glass-bg:     rgba(22, 25, 52, 0.55);
    --glass-bg-2:   rgba(28, 31, 64, 0.40);
    --glass-hi:     rgba(255, 255, 255, 0.07);
    --glass-hair:   rgba(255, 255, 255, 0.10);
    --stroke:       rgba(255, 255, 255, 0.09);
    --stroke-soft:  rgba(255, 255, 255, 0.06);
    --stroke-brand: rgba(139, 133, 255, 0.35);

    /* Text */
    --text:      #eef0ff;
    --text-soft: #c3c4ee;
    --text-dim:  #8b8dc0;
    --text-faint:#63658f;

    /* State colors */
    --green:  #4ade80;
    --amber:  #fbbf24;
    --red:    #fb7185;
    --blue:   #5fb0ff;
    --cyan:   #4fe0d0;

    /* Effects */
    --radius:    20px;
    --radius-sm: 13px;
    --radius-lg: 28px;
    --blur:      30px;
    --shadow:    0 26px 64px -28px rgba(2, 3, 12, 0.9);
    --shadow-sm: 0 12px 30px -16px rgba(2, 3, 12, 0.8);
    --ring:      0 0 0 1px rgba(139, 133, 255, 0.35), 0 20px 46px -18px rgba(108, 99, 255, 0.6);

    --sidebar-w: 268px;
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif;
    --mono: "SF Mono", ui-monospace, "JetBrains Mono", "Cascadia Code", monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background-color: var(--bg-0);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    letter-spacing: 0.1px;
}

/* Ambient aurora — a luminous, subtly living backdrop the glass refracts. */
body::before {
    content: "";
    position: fixed;
    inset: -20vmax;
    z-index: -2;
    background:
        radial-gradient(44vmax 34vmax at 6% -4%,   rgba(108, 99, 255, 0.60), transparent 62%),
        radial-gradient(46vmax 36vmax at 104% 2%,  rgba(176, 108, 255, 0.50), transparent 62%),
        radial-gradient(50vmax 44vmax at 50% 114%, rgba(90, 82, 255, 0.38), transparent 62%),
        radial-gradient(34vmax 34vmax at 82% 58%,  rgba(79, 224, 208, 0.14), transparent 60%),
        var(--bg-0);
    filter: saturate(125%);
    animation: aurora 26s ease-in-out infinite alternate;
}
/* Very light vignette only — keep the colour alive. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(130vmax 100vmax at 50% -10%, transparent 55%, rgba(4, 5, 16, 0.35) 100%);
    pointer-events: none;
}
@keyframes aurora {
    0%   { transform: translate3d(0,0,0) scale(1);      }
    50%  { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
    100% { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

a { color: var(--bp-indigo-200); text-decoration: none; transition: color .15s; }
a:hover { color: var(--bp-indigo-300); }

h1, h2, h3, h4 { margin: 0 0 .35em; font-weight: 650; letter-spacing: -0.02em; }
h1 { font-size: 1.55rem; }
h2 { font-size: 1.18rem; }
p { margin: 0 0 1rem; color: var(--text-soft); }

::selection { background: rgba(139,133,255,.4); color: #fff; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: rgba(139,133,255,.32) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(139,133,255,.28); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(139,133,255,.5); background-clip: content-box; }

/* =========================================================================
   Glass primitive — frosted, lighter than the backdrop, bright top hairline
   ========================================================================= */
.glass {
    position: relative;
    background:
        linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.018) 42%),
        var(--glass-bg);
    backdrop-filter: blur(var(--blur)) saturate(160%);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(160%);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow:
        inset 0 1px 0 var(--glass-hair),
        inset 0 0 0 1px rgba(255,255,255,0.012),
        var(--shadow);
}

/* =========================================================================
   App shell
   ========================================================================= */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
    position: sticky; top: 0; height: 100vh;
    display: flex; flex-direction: column; gap: 4px;
    padding: 22px 16px 18px;
    background:
        linear-gradient(180deg, rgba(16,18,46,0.72), rgba(8,9,26,0.5)),
        linear-gradient(160deg, rgba(255,255,255,0.05), transparent 40%);
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border-right: 1px solid var(--stroke-soft);
    z-index: 30;
}

.brand { display: flex; align-items: center; gap: 12px; padding: 6px 10px 20px; }
.brand-mark {
    width: 40px; height: 40px; border-radius: 13px; flex: 0 0 auto;
    background: linear-gradient(140deg, var(--bp-indigo-300), var(--bp-indigo) 45%, var(--bp-violet));
    box-shadow: var(--ring), inset 0 1px 0 rgba(255,255,255,.5);
    position: relative; overflow: hidden;
    display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.15rem;
}
.brand-mark::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.4), transparent 48%); }
/* Official BestPixel icon (renders white) inside the branded badge. */
.brand-mark img { position: relative; z-index: 1; width: 62%; height: 62%; object-fit: contain; }
.brand-name { font-weight: 700; font-size: 1.04rem; letter-spacing: -.01em; line-height: 1.1; }
.brand-name small { display:block; font-weight: 600; font-size: .64rem; color: var(--text-dim); letter-spacing: .2em; text-transform: uppercase; margin-top: 2px; }

.nav-group-label { font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); padding: 16px 12px 7px; font-weight: 700; }

.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 12px; margin: 1px 0;
    color: var(--text-dim); font-weight: 550; font-size: .92rem;
    transition: background .18s, color .18s, box-shadow .18s;
    position: relative;
}
.nav-item svg { width: 18px; height: 18px; opacity: .9; flex: 0 0 auto; }
.nav-item:hover { background: var(--glass-hi); color: var(--text); }
.nav-item.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(108,99,255,.34), rgba(176,108,255,.20));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px -14px rgba(108,99,255,1);
}
.nav-item.active svg { opacity: 1; color: var(--bp-indigo-200); }
.nav-item.active::before { content:""; position:absolute; left:-16px; top:50%; transform:translateY(-50%); width:4px; height:20px; border-radius:0 4px 4px 0; background: linear-gradient(var(--bp-indigo-300), var(--bp-violet)); box-shadow: 0 0 12px var(--bp-indigo); }
.nav-badge { margin-left:auto; font-size:.7rem; font-weight:750; padding:2px 8px; border-radius:20px; background: rgba(139,133,255,.20); color: var(--bp-indigo-200); }

.sidebar-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--stroke-soft); }
.user-chip { display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:12px; transition: background .15s; }
.user-chip:hover { background: var(--glass-hi); }
.user-chip .meta { min-width:0; }
.user-chip .meta strong { display:block; font-size:.87rem; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.user-chip .meta span { font-size:.72rem; color:var(--text-dim); }

/* Main column */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 16px;
    padding: 15px 32px;
    background: linear-gradient(180deg, rgba(8,10,26,0.72), rgba(8,10,26,0.35));
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-bottom: 1px solid var(--stroke-soft);
}
.topbar .page-title { font-size: 1.1rem; font-weight: 680; letter-spacing: -.02em; }
.topbar .spacer { flex: 1; }

.content { padding: 32px; max-width: 1520px; width: 100%; margin: 0 auto; }

/* =========================================================================
   Avatars
   ========================================================================= */
.avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
    display: grid; place-items: center;
    font-size: .78rem; font-weight: 700; color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 4px 12px -4px rgba(0,0,0,.6);
    /* Per-user colour is applied via the --avatar-color custom property (set by enhance.js from
       the data-avatar-color attribute), falling back to the brand indigo. */
    background: linear-gradient(135deg, var(--avatar-color, var(--bp-indigo)), var(--bp-violet));
}
.avatar.sm { width: 26px; height: 26px; font-size: .64rem; }
.avatar.lg { width: 50px; height: 50px; font-size: 1.05rem; }
.avatar-stack { display:flex; }
.avatar-stack .avatar { margin-left: -8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 0 0 2px var(--bg-1); }
.avatar-stack .avatar:first-child { margin-left: 0; }

/* =========================================================================
   Buttons
   ========================================================================= */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 17px; border-radius: 12px; border: 1px solid transparent;
    font-family: inherit; font-size: .9rem; font-weight: 620; cursor: pointer;
    transition: transform .12s ease, box-shadow .2s, background .2s, border-color .2s;
    color: var(--text); background: var(--glass-hi); white-space: nowrap;
    -webkit-user-select: none; user-select: none;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
    background: linear-gradient(135deg, var(--bp-indigo-300) -10%, var(--bp-indigo) 45%, var(--bp-violet));
    color: #fff; box-shadow: var(--ring), inset 0 1px 0 rgba(255,255,255,.28);
    border-color: rgba(255,255,255,.10);
}
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(139,133,255,.5), 0 22px 50px -16px rgba(108,99,255,.85), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-ghost { background: var(--glass-bg-2); border-color: var(--stroke); color: var(--text-soft); backdrop-filter: blur(12px); }
.btn-ghost:hover { border-color: var(--stroke-brand); color: var(--text); background: var(--glass-hi); }
.btn-danger { background: rgba(251,113,133,.14); border-color: rgba(251,113,133,.35); color: #ffc4cd; }
.btn-danger:hover { background: rgba(251,113,133,.24); border-color: rgba(251,113,133,.5); }
.btn-sm { padding: 7px 12px; font-size: .82rem; border-radius: 10px; }
.btn-icon { padding: 9px; border-radius: 11px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* =========================================================================
   Cards / panels
   ========================================================================= */
.panel { padding: 22px; border-radius: var(--radius); }
.panel-head { display:flex; align-items:center; gap:10px; margin-bottom:18px; }
.panel-head h2 { margin:0; display:flex; align-items:center; gap:9px; }
.panel-head h2 svg { width:19px; height:19px; color: var(--bp-indigo-200); }
.panel-head .spacer { flex:1; }

.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1100px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr;} }
@media (max-width: 720px){ .grid-4,.grid-2{grid-template-columns:1fr;} }

/* Stat cards — compact, dense, brand-accented */
.stat {
    padding: 18px 18px 16px; border-radius: var(--radius); position: relative; overflow: hidden;
    display: flex; flex-direction: column; min-height: 118px;
    transition: transform .16s, box-shadow .2s, border-color .2s;
}
.stat:hover { transform: translateY(-2px); border-color: var(--stroke-brand); }
.stat::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; background: linear-gradient(90deg, transparent, rgba(139,133,255,.55), transparent); opacity:.7; }
.stat .label { font-size:.7rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:.12em; font-weight:700; }
.stat .value { font-size: 2.35rem; font-weight: 760; letter-spacing:-.035em; margin-top: auto; line-height:1; font-variant-numeric: tabular-nums; }
.stat .sub { font-size:.78rem; color: var(--text-dim); margin-top: 9px; display:flex; align-items:center; gap:6px; }
.stat .sub svg { width:13px; height:13px; }
.stat .icon {
    position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:12px;
    display:grid; place-items:center;
    background: linear-gradient(140deg, rgba(139,133,255,.28), rgba(176,108,255,.14));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.stat .icon svg { width:20px; height:20px; color: var(--bp-indigo-200); }
.stat.accent-red   .value { color:#ffb3bd; } .stat.accent-red   .icon { background: linear-gradient(140deg, rgba(251,113,133,.3), rgba(251,113,133,.12)); } .stat.accent-red .icon svg { color:#ff9aa8; } .stat.accent-red::before { background: linear-gradient(90deg, transparent, rgba(251,113,133,.6), transparent); }
.stat.accent-green .value { color:#a7f3cf; } .stat.accent-green .icon { background: linear-gradient(140deg, rgba(74,222,128,.28), rgba(74,222,128,.1)); } .stat.accent-green .icon svg { color:#86efac; } .stat.accent-green::before { background: linear-gradient(90deg, transparent, rgba(74,222,128,.55), transparent); }
.stat.accent-amber .value { color:#fde3a7; } .stat.accent-amber .icon { background: linear-gradient(140deg, rgba(251,191,36,.28), rgba(251,191,36,.1)); } .stat.accent-amber .icon svg { color:#fcd34d; } .stat.accent-amber::before { background: linear-gradient(90deg, transparent, rgba(251,191,36,.5), transparent); }

/* =========================================================================
   Badges / pills
   ========================================================================= */
.badge {
    display:inline-flex; align-items:center; gap:6px;
    padding: 3px 10px; border-radius: 20px; font-size:.73rem; font-weight:650;
    border: 1px solid var(--stroke-soft); background: var(--glass-hi); color: var(--text-soft);
    letter-spacing:.01em; text-transform: capitalize; white-space: nowrap;
}
.badge .dot { width:7px; height:7px; border-radius:50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

.s-open       { color:#8fb8ff; border-color: rgba(95,176,255,.32); background: rgba(95,176,255,.12); }
.s-in_progress{ color:#c3a7ff; border-color: rgba(176,108,255,.34); background: rgba(176,108,255,.14); }
.s-blocked    { color:#ffb3bd; border-color: rgba(251,113,133,.34); background: rgba(251,113,133,.13); }
.s-testing    { color:#7fe6da; border-color: rgba(79,224,208,.32); background: rgba(79,224,208,.12); }
.s-resolved   { color:#a7f3cf; border-color: rgba(74,222,128,.32); background: rgba(74,222,128,.12); }
.s-closed     { color:#a2a4cc; border-color: var(--stroke); background: var(--glass-hi); }
.s-wontfix    { color:#a2a4cc; border-color: var(--stroke); background: var(--glass-hi); }

.sev-critical { color:#ff9aa8; border-color: rgba(251,113,133,.42); background: rgba(251,113,133,.17); }
.sev-high     { color:#fdba74; border-color: rgba(251,146,60,.37); background: rgba(251,146,60,.13); }
.sev-medium   { color:#fcd34d; border-color: rgba(251,191,36,.32); background: rgba(251,191,36,.11); }
.sev-low      { color:#93c5fd; border-color: rgba(96,165,250,.3); background: rgba(96,165,250,.11); }

.pri-urgent { color:#ff9aa8; } .pri-high { color:#fdba74; } .pri-medium { color:#fcd34d; } .pri-low { color:#93c5fd; }
.pri-flag { display:inline-flex; align-items:center; gap:5px; font-size:.76rem; font-weight:650; text-transform:capitalize; }
.pri-flag svg { width:13px; height:13px; }

.type-pill { font-size:.71rem; padding:2px 8px; border-radius:8px; background: var(--glass-hi); color: var(--text-dim); border:1px solid var(--stroke-soft); text-transform:capitalize; }

/* ── FiveM workflow chips: resource · category · environment ─────────────── */
/* Resource chip — monospace slug, per-resource hue. See App\Support\Fivem::RESOURCES. */
.rb {
    display:inline-flex; align-items:center; font-family: var(--mono); font-size:.7rem; font-weight:650;
    padding:2px 9px 2px 8px; border-radius:7px; letter-spacing:-.01em; white-space:nowrap;
    border:1px solid var(--stroke-soft); background: var(--glass-hi); color: var(--text-soft); position:relative;
}
.rb::before { content:""; width:6px; height:6px; border-radius:50%; margin-right:6px; background: currentColor; box-shadow:0 0 7px currentColor; }
.rb-core       { color:#8b85ff; border-color: rgba(139,133,255,.34); background: rgba(139,133,255,.13); }
.rb-api        { color:#7fe6da; border-color: rgba(79,224,208,.32);  background: rgba(79,224,208,.12); }
.rb-db         { color:#f0abfc; border-color: rgba(217,119,255,.32); background: rgba(217,119,255,.12); }
.rb-identity   { color:#8fb8ff; border-color: rgba(95,176,255,.32);  background: rgba(95,176,255,.12); }
.rb-economy    { color:#86efac; border-color: rgba(74,222,128,.32);  background: rgba(74,222,128,.12); }
.rb-appearance { color:#fca5f1; border-color: rgba(244,114,182,.3);  background: rgba(244,114,182,.11); }
.rb-voice      { color:#fdba74; border-color: rgba(251,146,60,.32);  background: rgba(251,146,60,.12); }
.rb-hud        { color:#fcd34d; border-color: rgba(251,191,36,.3);   background: rgba(251,191,36,.11); }
.rb-loading    { color:#67e8f9; border-color: rgba(34,211,238,.3);   background: rgba(34,211,238,.11); }
.rb-loader     { color:#a5b4fc; border-color: rgba(129,140,248,.32); background: rgba(129,140,248,.12); }
.rb-example    { color:#a2a4cc; border-color: var(--stroke);         background: var(--glass-hi); }
.rb-portal     { color:#c3a7ff; border-color: rgba(176,108,255,.32); background: rgba(176,108,255,.12); }
.rb-server     { color:#93c5fd; border-color: rgba(96,165,250,.3);   background: rgba(96,165,250,.11); }
.rb-other      { color:#a2a4cc; border-color: var(--stroke);         background: var(--glass-hi); }

/* Category chip — how it fails. */
.cat {
    display:inline-flex; align-items:center; gap:5px; font-size:.71rem; font-weight:650;
    padding:2px 9px; border-radius:20px; white-space:nowrap; text-transform:capitalize;
    border:1px solid var(--stroke-soft); background: var(--glass-hi); color: var(--text-dim);
}
.cat svg { width:12px; height:12px; }
.cat-crash       { color:#ff9aa8; border-color: rgba(251,113,133,.36); background: rgba(251,113,133,.13); }
.cat-economy     { color:#86efac; border-color: rgba(74,222,128,.3);  background: rgba(74,222,128,.11); }
.cat-sync        { color:#7fe6da; border-color: rgba(79,224,208,.3);  background: rgba(79,224,208,.11); }
.cat-performance { color:#fdba74; border-color: rgba(251,146,60,.3);  background: rgba(251,146,60,.11); }
.cat-nui         { color:#c3a7ff; border-color: rgba(176,108,255,.3); background: rgba(176,108,255,.11); }
.cat-gameplay    { color:#8fb8ff; border-color: rgba(95,176,255,.3);  background: rgba(95,176,255,.11); }
.cat-cosmetic    { color:#93c5fd; border-color: rgba(96,165,250,.28); background: rgba(96,165,250,.1); }
.cat-security    { color:#ff8497; border-color: rgba(251,113,133,.5); background: rgba(251,113,133,.2); font-weight:750; }

/* Environment chip — where it was seen. */
.envb {
    display:inline-flex; align-items:center; font-size:.68rem; font-weight:700; letter-spacing:.04em;
    text-transform:uppercase; padding:2px 8px; border-radius:6px; white-space:nowrap;
    border:1px solid var(--stroke-soft); background: var(--glass-hi); color: var(--text-dim);
}
.envb-dev     { color:#93c5fd; border-color: rgba(96,165,250,.3);  background: rgba(96,165,250,.11); }
.envb-staging { color:#fcd34d; border-color: rgba(251,191,36,.3);  background: rgba(251,191,36,.11); }
.envb-live    { color:#a7f3cf; border-color: rgba(74,222,128,.36); background: rgba(74,222,128,.14); }

/* Section label inside forms/detail panels. */
.form-section-label {
    display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:750;
    letter-spacing:.09em; text-transform:uppercase; color: var(--text-faint);
    margin: 4px 0 -4px; padding-top: 4px;
}
.form-section-label svg { width:14px; height:14px; color: var(--bp-indigo-200); }

/* Filter bar — controls flow in a wrapping row instead of stacking full-width (selects are
   width:100% by default). Search grows to fill; selects share the remaining width and wrap. */
.filter-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.filter-bar select { width:auto; min-width:158px; flex:1 1 158px; }
.filter-bar .filter-search { position:relative; flex:3 1 260px; min-width:220px; }
.filter-bar .filter-search input { width:100%; padding-left:40px; }
.filter-bar .filter-search-ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); display:flex; color:var(--text-faint); }
.filter-bar .filter-search-ico svg { width:16px; height:16px; }
.filter-bar .btn, .filter-bar .checkbox { flex:0 0 auto; }
@media (max-width: 720px){ .filter-bar select { flex-basis:100%; } }

/* Centered form cards — balanced in the wide content column instead of hugging the left edge. */
.form-card { width: 100%; margin-inline: auto; }
.form-card.fc-wide { max-width: 1000px; }
.form-card.fc-md   { max-width: 820px; }
.form-card.fc-sm   { max-width: 660px; }

/* ── Player picker (live bpx-api account lookup on the bug form) ─────────────── */
.player-pick { position: relative; }
.player-input-wrap { position: relative; display:flex; align-items:center; }
.player-input-ico { position:absolute; left:12px; display:grid; place-items:center; color: var(--text-faint); pointer-events:none; }
.player-input-ico svg { width:16px; height:16px; }
.player-pick input[data-player-input] { padding-left: 38px; padding-right: 92px; width:100%; }
.player-linked {
    position:absolute; right:10px; display:inline-flex; align-items:center; gap:4px;
    font-size:.7rem; font-weight:650; color:#a7f3cf; padding:2px 8px; border-radius:20px;
    background: rgba(74,222,128,.14); border:1px solid rgba(74,222,128,.32);
}
.player-linked svg { width:12px; height:12px; }
.player-linked[hidden] { display: none; }  /* [hidden] must win over display:inline-flex above */
.player-results {
    position:absolute; z-index:30; left:0; right:0; top:calc(100% + 6px);
    background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border:1px solid var(--stroke); border-radius:12px; box-shadow: var(--shadow-sm);
    overflow:hidden; max-height:260px; overflow-y:auto;
}
.player-results button {
    display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
    padding:9px 12px; background:none; border:0; border-bottom:1px solid var(--stroke-soft); color: var(--text-soft);
}
.player-results button:last-child { border-bottom:0; }
.player-results button:hover, .player-results button.active { background: var(--glass-hi); color:#fff; }
.player-results .pr-name { font-weight:600; font-size:.86rem; }
.player-results .pr-id { font-family: var(--mono); font-size:.72rem; color: var(--text-faint); }
.player-results .pr-empty { padding:11px 13px; font-size:.8rem; color: var(--text-faint); }

/* ── Dashboard: exploit alert banner + resource bars ────────────────────────── */
.exploit-banner {
    display:flex; align-items:center; gap:14px; margin-bottom:20px; padding:13px 16px;
    border-radius:14px; text-decoration:none; color: var(--text-soft);
    background: linear-gradient(100deg, rgba(251,113,133,.16), rgba(251,113,133,.05));
    border:1px solid rgba(251,113,133,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.exploit-banner:hover { border-color: rgba(251,113,133,.62); color: var(--text); }
.exploit-banner .eb-ico { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; flex:0 0 auto;
    background: rgba(251,113,133,.2); color:#ff8497; box-shadow: inset 0 0 0 1px rgba(251,113,133,.4); }
.exploit-banner .eb-ico svg { width:18px; height:18px; }
.exploit-banner .eb-body { flex:1; font-size:.88rem; }
.exploit-banner .eb-body strong { color:#ff9aa8; }
.exploit-banner .eb-cta { display:inline-flex; align-items:center; gap:5px; font-size:.8rem; font-weight:650; color:#ff9aa8; white-space:nowrap; }
.exploit-banner .eb-cta svg { width:14px; height:14px; transform: rotate(180deg); }

.res-bars { display:flex; flex-direction:column; gap:9px; }
.res-bar-row { display:flex; align-items:center; gap:12px; text-decoration:none; padding:2px 0; }
.res-bar-row:hover .bar-fill { filter: brightness(1.15); }
.res-bar-label { flex:0 0 130px; display:flex; }
.res-bar-count { flex:0 0 28px; text-align:right; color: var(--text-soft); }
@media (max-width:720px){ .res-bar-label { flex-basis:104px; } }

/* Type icon tile — clean item-type indicator for list rows */
.type-ico { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:0 0 auto; }
.type-ico svg { width:17px; height:17px; }
.type-ico.bug    { background: linear-gradient(140deg, rgba(251,113,133,.22), rgba(251,113,133,.09)); color:#ff9aa8; box-shadow: inset 0 0 0 1px rgba(251,113,133,.28), inset 0 1px 0 rgba(255,255,255,.1); }
.type-ico.ticket { background: linear-gradient(140deg, rgba(95,176,255,.22), rgba(95,176,255,.09)); color:#8fb8ff; box-shadow: inset 0 0 0 1px rgba(95,176,255,.28), inset 0 1px 0 rgba(255,255,255,.1); }
.type-ico.task   { background: linear-gradient(140deg, rgba(176,108,255,.22), rgba(176,108,255,.09)); color:#c3a7ff; box-shadow: inset 0 0 0 1px rgba(176,108,255,.28), inset 0 1px 0 rgba(255,255,255,.1); }
.mono { font-family: var(--mono); font-size: .82em; color: var(--bp-indigo-200); letter-spacing: -.02em; }

/* =========================================================================
   Lists / rows
   ========================================================================= */
.list { display: flex; flex-direction: column; }
.row-item {
    display: grid; align-items: center; gap: 14px;
    padding: 14px 18px; border-bottom: 1px solid var(--stroke-soft);
    transition: background .15s;
}
.row-item:last-child { border-bottom: none; }
.row-item:hover { background: var(--glass-hi); }
.row-item .title { font-weight: 600; color: var(--text); }
.row-item .title:hover { color: #fff; }
.row-item .meta { font-size:.8rem; color: var(--text-dim); display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:2px; }
.row-item .meta svg { width:13px; height:13px; vertical-align:-2px; }
.row-item .meta.chips { gap:8px; }
.meta-player { display:inline-flex; align-items:center; gap:4px; color: var(--text-soft); }

.tickets-row { grid-template-columns: 78px 1fr auto auto auto; }
.bugs-row    { grid-template-columns: 78px 1fr auto auto auto; }
@media (max-width: 820px){ .tickets-row,.bugs-row { grid-template-columns: 60px 1fr auto; } .row-item .hide-sm { display:none; } }

/* =========================================================================
   Forms
   ========================================================================= */
.form-grid { display:grid; gap:18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size:.84rem; font-weight:600; color: var(--text-soft); }
.field .hint { font-size:.76rem; color: var(--text-faint); }
.field.error input, .field.error textarea, .field.error select { border-color: rgba(251,113,133,.6); }
.field .err-msg { font-size:.78rem; color:#ff9aa8; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], input[type=search], textarea, select {
    width: 100%; padding: 11px 14px;
    background: rgba(5,7,20,.55);
    border: 1px solid var(--stroke-soft); border-radius: 12px;
    color: var(--text); font-family: inherit; font-size: .92rem;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--stroke-brand);
    box-shadow: 0 0 0 4px rgba(108,99,255,.16);
    background: rgba(5,7,20,.8);
}
select { appearance: none; -webkit-appearance:none; 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='%238b85ff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px; cursor: pointer; }
option { background: #0b0e24; color: var(--text); }

.form-actions { display:flex; gap:12px; align-items:center; margin-top: 8px; }
.form-actions .spacer { flex:1; }

.checkbox { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:.9rem; color: var(--text-soft); }
.checkbox input { width:18px; height:18px; accent-color: var(--bp-indigo); }

.segmented { display:inline-flex; gap:4px; padding:4px; background: rgba(5,7,20,.5); border:1px solid var(--stroke-soft); border-radius:12px; flex-wrap:wrap; }
.segmented a, .segmented button { padding:7px 13px; border-radius:9px; font-size:.82rem; font-weight:600; color:var(--text-dim); border:none; background:transparent; cursor:pointer; }
.segmented a.active, .segmented button.active { background: var(--glass-bg); color:#fff; box-shadow: inset 0 1px 0 var(--glass-hi); }

/* =========================================================================
   Flash
   ========================================================================= */
.flash-stack { position: fixed; top: 20px; right: 20px; z-index: 90; display:flex; flex-direction:column; gap:10px; max-width: 380px; }
.flash {
    display:flex; align-items:flex-start; gap:12px; padding: 13px 16px; border-radius: 14px;
    background: var(--glass-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--stroke); box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hair);
    animation: flashIn .35s cubic-bezier(.2,.8,.2,1);
    font-size: .9rem; color: var(--text);
}
.flash .fi { width:18px;height:18px;flex:0 0 auto;margin-top:1px; }
.flash-success { border-color: rgba(74,222,128,.4); } .flash-success .fi { color: var(--green); }
.flash-error   { border-color: rgba(251,113,133,.45); } .flash-error .fi { color: var(--red); }
.flash .x { margin-left:auto; cursor:pointer; color: var(--text-dim); background:none;border:none;padding:0; }
@keyframes flashIn { from { opacity:0; transform: translateX(20px) scale(.96);} to {opacity:1;transform:none;} }

/* =========================================================================
   Empty state
   ========================================================================= */
.empty { text-align:center; padding: 44px 20px; color: var(--text-dim); }
.empty .ei { width:60px;height:60px;margin:0 auto 16px; border-radius:18px; display:grid;place-items:center; background: linear-gradient(140deg, rgba(139,133,255,.22), rgba(176,108,255,.1)); border:1px solid var(--stroke); box-shadow: inset 0 1px 0 var(--glass-hair); }
.empty .ei svg { width:26px;height:26px;color:var(--bp-indigo-200); }
.empty h3 { color: var(--text); margin-bottom: 6px; }
.empty p { max-width: 380px; margin: 0 auto 18px; }

/* =========================================================================
   Kanban
   ========================================================================= */
.board-wrap { overflow-x: auto; padding-bottom: 12px; margin: 0 -4px; }
.board { display: flex; gap: 16px; align-items: flex-start; min-height: 60vh; padding: 0 4px; }
.column {
    flex: 0 0 296px; width: 296px; display:flex; flex-direction:column;
    background: linear-gradient(180deg, rgba(20,23,54,0.5), rgba(11,13,34,0.34));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--stroke-soft); border-radius: var(--radius);
    box-shadow: inset 0 1px 0 var(--glass-hair);
    max-height: calc(100vh - 190px);
    transition: border-color .18s, box-shadow .18s;
}
.column-head { display:flex; align-items:center; gap:9px; padding: 15px 16px 11px; }
.column-head .cname { font-weight:660; font-size:.94rem; display:flex; align-items:center; gap:9px; letter-spacing:-.01em; }
.column-head .cdot { width:9px;height:9px;border-radius:50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.column-head .count { font-size:.72rem; font-weight:750; color: var(--text-dim); background: var(--glass-hi); padding:2px 9px; border-radius:20px; }
.column-head .wip { font-size:.68rem; color: var(--text-faint); margin-left:auto; font-weight:600; }
.column-head .wip.over { color:#ff9aa8; }
.column-body { padding: 6px 12px 8px; overflow-y: auto; display:flex; flex-direction:column; gap:10px; flex:1; min-height: 12px; }
.column .btn { margin: 6px 12px 12px; justify-content:flex-start; color: var(--text-dim); }
.column .btn:hover { color: var(--text); }

.kcard {
    background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015) 45%), var(--glass-bg);
    border: 1px solid var(--stroke); border-radius: 14px;
    padding: 13px 14px 12px 16px; cursor: grab; position: relative;
    box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-hair);
    transition: border-color .15s, transform .1s, box-shadow .2s;
}
.kcard:hover { border-color: var(--stroke-brand); transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgba(2,3,12,.9), inset 0 1px 0 var(--glass-hair); }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .45; }
.kcard .kc-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.kc-type { display:inline-block; font-size:.64rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:3px 8px; border-radius:6px; }
.kc-type.bug    { color:#ff9aa8; background: rgba(251,113,133,.16); }
.kc-type.ticket { color:#8fb8ff; background: rgba(95,176,255,.16); }
.kc-type.task   { color:#c3a7ff; background: rgba(176,108,255,.16); }
.kcard .kc-code { font-family: var(--mono); font-size:.72rem; color: var(--text-dim); margin-left:auto; }
.kcard .kc-title { font-size:.9rem; font-weight:560; color: var(--text); line-height:1.4; }
.kcard .kc-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.kcard .kc-tags .rb, .kcard .kc-tags .cat { font-size:.64rem; padding:1px 7px; }
.kcard .kc-tags .cat svg { width:10px; height:10px; }
.kcard .kc-foot { display:flex; align-items:center; gap:10px; margin-top:11px; }
.kcard .kc-foot .meta { font-size:.72rem; color: var(--text-dim); display:flex; align-items:center; gap:5px; }
.kcard .kc-foot .meta svg { width:13px;height:13px; }
.kcard .kc-foot .push { margin-left:auto; }
.kcard .kc-accent { position:absolute; left:0; top:11px; bottom:11px; width:3px; border-radius:3px; box-shadow: 0 0 10px currentColor; color: var(--bp-violet); }

.column.drop-target { border-color: var(--stroke-brand); box-shadow: inset 0 0 0 1px var(--stroke-brand), 0 0 40px -12px rgba(108,99,255,.6); }
.card-placeholder { height: 60px; border: 1.5px dashed var(--stroke-brand); border-radius: 14px; background: rgba(108,99,255,.07); }

/* =========================================================================
   Detail pages
   ========================================================================= */
.detail-grid { display:grid; grid-template-columns: minmax(0,1fr) 330px; gap: 20px; align-items:start; }
@media (max-width: 980px){ .detail-grid { grid-template-columns: 1fr; } }
.prose { color: var(--text-soft); line-height:1.7; white-space: pre-wrap; word-wrap: break-word; }
.prose:empty::before { content:"No description provided."; color: var(--text-faint); font-style: italic; }

.meta-list { display:flex; flex-direction:column; gap:0; }
.meta-list .mrow { display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--stroke-soft); font-size:.88rem; gap: 12px; }
.meta-list .mrow:last-child { border-bottom:none; }
.meta-list .mrow .k { color: var(--text-dim); }
.meta-list .mrow .v { color: var(--text); font-weight:550; display:flex; align-items:center; gap:8px; text-align:right; }

.section-title { font-size:.7rem; text-transform:uppercase; letter-spacing:.13em; color:var(--text-faint); font-weight:700; margin: 2px 0 12px; display:flex; align-items:center; gap:6px; }
.section-title svg { width:14px; height:14px; }

/* Comments */
.comment { display:flex; gap:12px; padding: 14px 0; border-bottom: 1px solid var(--stroke-soft); }
.comment:last-child { border-bottom:none; }
.comment .body { flex:1; min-width:0; }
.comment .chead { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.comment .chead strong { font-size:.88rem; }
.comment .chead time { font-size:.74rem; color: var(--text-faint); }
.comment .ctext { color: var(--text-soft); font-size:.9rem; line-height:1.6; white-space: pre-wrap; word-wrap:break-word; }

.link-chip { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:12px; background: var(--glass-hi); border:1px solid var(--stroke); font-size:.85rem; transition: border-color .15s, background .15s; }
.link-chip:hover { border-color: var(--stroke-brand); background: rgba(108,99,255,.1); }
.link-chip svg { width:16px; height:16px; color: var(--bp-indigo-200); }

/* =========================================================================
   Modal
   ========================================================================= */
.modal-backdrop { position: fixed; inset:0; z-index: 80; background: rgba(3,4,12,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display:grid; place-items:center; padding:20px; animation: fadeIn .2s; }
.modal { width: 100%; max-width: 560px; max-height: 88vh; overflow:auto; padding: 26px; border-radius: var(--radius-lg); }
.modal-head { display:flex; align-items:flex-start; gap:12px; margin-bottom: 18px; }
.modal-head h2 { margin:0; }
.modal-head .x { margin-left:auto; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* =========================================================================
   Auth pages
   ========================================================================= */
.auth-wrap { min-height:100vh; display:grid; place-items:center; padding: 24px; }
.auth-card { width:100%; max-width: 430px; padding: 40px 36px; border-radius: var(--radius-lg); position:relative; overflow:hidden; }
.auth-card::before { content:""; position:absolute; inset:0; background: radial-gradient(560px 220px at 50% -22%, rgba(139,133,255,.3), transparent 70%); pointer-events:none; }
.auth-brand { display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom: 28px; text-align:center; position:relative; }
.auth-brand .brand-mark { width:58px; height:58px; border-radius:17px; font-size:1.5rem; }
.auth-brand h1 { font-size:1.4rem; margin:0; }
.auth-brand p { margin:0; font-size:.9rem; color: var(--text-dim); }
.auth-foot { text-align:center; margin-top: 22px; font-size:.8rem; color: var(--text-faint); position:relative; }

/* =========================================================================
   Utilities
   ========================================================================= */
.flex { display:flex; } .items-center { align-items:center; } .gap-8{gap:8px;} .gap-12{gap:12px;} .gap-16{gap:16px;}
.between { justify-content:space-between; } .wrap{flex-wrap:wrap;}
.spacer { flex:1; }
.muted { color: var(--text-dim); } .faint { color: var(--text-faint); }
.small { font-size:.82rem; } .tiny{font-size:.74rem;}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.text-right{text-align:right;} .nowrap{white-space:nowrap;}
.divider { height:1px; background: var(--stroke-soft); margin: 18px 0; border:none; }
.page-head { display:flex; align-items:center; gap:16px; margin-bottom: 26px; flex-wrap:wrap; }
.page-head h1 { margin:0; display:flex; align-items:center; gap:11px; }
.page-head h1 svg { width:24px; height:24px; color: var(--bp-indigo-200); }
.page-head .spacer { flex:1; }
.crumb { color: var(--text-dim); font-size:.85rem; display:inline-flex; align-items:center; gap:8px; }
.crumb a { color: var(--text-soft); }

@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .sidebar { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .25s; width: var(--sidebar-w); }
    .sidebar.open { transform: none; }
    .content { padding: 20px 16px; }
    .topbar { padding: 14px 16px; }
    .detail-grid { grid-template-columns: 1fr; }
    .menu-toggle { display:inline-flex !important; }
}
.menu-toggle { display:none; }
.scrim { display:none; }
@media (max-width:860px){ .scrim.show { display:block; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:25; } }

/* =========================================================================
   Consistency & accessibility polish
   ========================================================================= */

/* Brand-tinted text selection. */
::selection { background: rgba(108,99,255,.34); color: #fff; }

/* Progress-bar fills — width (and plain bg) applied by enhance.js from data-bar / data-bg. */
.bar-fill { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--bp-indigo), var(--bp-violet)); }
.bar-fill-plain { display: block; height: 100%; border-radius: 8px; }

/* Keyboard focus — a clear ring for keyboard users only (mouse clicks stay clean).
   :where() keeps specificity at 0 so component styles are never overridden. */
:where(a, button, .btn, .nav-item, .user-chip, summary, [role="button"], [tabindex],
       .link-chip, .segmented a, .segmented button, input, textarea, select):focus-visible {
    outline: 2px solid var(--bp-indigo-200);
    outline-offset: 2px;
}

/* Semantic colour variants for badges (green/red/amber) — used across Game/Security/Legal. */
.badge.green { color:#86efac; border-color: rgba(74,222,128,.34);  background: rgba(74,222,128,.12); }
.badge.red   { color:#ff9aa8; border-color: rgba(251,113,133,.36); background: rgba(251,113,133,.13); }
.badge.amber { color:#fcd34d; border-color: rgba(251,191,36,.32);  background: rgba(251,191,36,.11); }

/* Destructive intent on buttons (alias used in views: `btn ... accent-red`). */
.btn.accent-red { background: rgba(251,113,133,.14); border-color: rgba(251,113,133,.35); color:#ffc4cd; }
.btn.accent-red:hover { background: rgba(251,113,133,.24); border-color: rgba(251,113,133,.55); color:#ffd4da; }

/* Tinted panel edges for status callouts (offline/error → red, warning → amber). */
.panel.accent-red   { border-color: rgba(251,113,133,.42); }
.panel.accent-amber { border-color: rgba(251,191,36,.42); }
.panel.accent-green { border-color: rgba(74,222,128,.38); }

/* Smooth in-page anchor jumps (docs / legal). */
html { scroll-behavior: smooth; }

/* Respect users who prefer reduced motion (WCAG 2.3.3 / a professional courtesy). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Game connection + items admin ─────────────────────────────────────────── */
.conn-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.conn-row .spacer { flex:1; }

.cfg-snippet {
    margin:0; overflow-x:auto; padding:14px 16px; border-radius:12px;
    background: rgba(4,6,16,.5); border:1px solid var(--stroke-soft);
    font-size:12.5px; line-height:1.65; color: var(--text-soft);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:pre;
}
.cfg-snippet code { font:inherit; color:inherit; background:none; padding:0; }

.item-row { align-items:flex-start; gap:14px; }
.item-row.is-off { opacity:.5; }
.item-thumb {
    width:52px; height:52px; flex:0 0 auto; border-radius:12px; overflow:hidden;
    background: var(--glass-hi); display:flex; align-items:center; justify-content:center; color: var(--text-faint);
}
.item-thumb img { width:100%; height:100%; object-fit:cover; }
.item-body { flex:1 1 auto; min-width:0; }
.item-forms { display:flex; flex-wrap:wrap; gap:20px; margin-top:12px; }
.item-line { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; }
.item-line .field { gap:5px; }
.item-line .field.w-price input { width:120px; }
.item-line .field.w-label input { width:190px; }
.field.check { flex-direction:row; align-items:center; gap:8px; }
.field.check input { width:auto; }