/* ─────────────────────────────────────────────────────────────────────────────
   24/7 Trader - gamer-tema (24-09-2026)
   Moerk bund, neon-accenter, gloed paa det vigtige, tal i Orbitron. Formen (kort,
   sidehoved, tom side) er skabelonernes; farverne og stemningen er appens egne.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
    --t-bg: #0B1020;
    --t-flade: #141B2E;
    --t-flade-2: #1A2340;
    --t-kant: rgba(111,227,176,.16);
    --t-neon: #6FE3B0;
    --t-cyan: #4CC9F0;
    --t-lilla: #9D7BFF;
    --t-roed: #FF5C7A;
    --t-gul: #FFD166;
    --t-tekst: #E8EEF9;
    --t-tekst-2: #8FA0BF;
    --t-tal: 'Orbitron', 'Inter', sans-serif;
}

html, body { background: var(--t-bg); color: var(--t-tekst); font-family: 'Inter', sans-serif; }
body {
    background-image:
        radial-gradient(1200px 600px at 10% -10%, rgba(76,201,240,.12), transparent 60%),
        radial-gradient(900px 500px at 100% 0%, rgba(157,123,255,.12), transparent 60%),
        linear-gradient(rgba(111,227,176,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111,227,176,.035) 1px, transparent 1px);
    background-size: auto, auto, 32px 32px, 32px 32px;
    background-attachment: fixed;
}
h1:focus { outline: none; }
a, .btn-link { color: var(--t-cyan); }
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--t-neon); }
.invalid { outline: 1px solid var(--t-roed); }
.validation-message { color: var(--t-roed); }

#blazor-error-ui {
    background: #1A2340; color: var(--t-tekst); border-top: 1px solid var(--t-roed);
    bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.4); display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
#blazor-error-ui a.reload { color: var(--t-neon); }

/* ── Kort og flader (skabelonens klasser faar gamer-look) ────────────────── */
.mud-paper, .cg-tal, .cg-sidehoved {
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) , var(--t-flade) !important;
    border: 1px solid var(--t-kant);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.mud-drawer .mud-paper, .mud-appbar { border: none; box-shadow: none; }
.cg-tal { position: relative; overflow: hidden; }
.cg-tal::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, var(--t-cyan), var(--t-neon)); opacity: .7;
}
.cg-tal-klik:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(111,227,176,.35), 0 14px 34px rgba(111,227,176,.12); }
.cg-tal-vaerdi { font-family: var(--t-tal) !important; font-size: 1.55rem !important; letter-spacing: .01em; }
.cg-sidehoved-titel { font-family: var(--t-tal) !important; letter-spacing: .03em; }
.cg-tabel .mud-table-head .mud-table-cell { font-family: var(--t-tal); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--t-tekst-2); }
.mud-table-cell { border-color: rgba(143,160,191,.12) !important; }
.mud-chip { font-weight: 600; }
.mud-chip.mud-chip-filled.mud-chip-color-success { box-shadow: 0 0 12px rgba(111,227,176,.45); }
.mud-chip.mud-chip-filled.mud-chip-color-error { box-shadow: 0 0 12px rgba(255,92,122,.45); }

/* ── Toplinje ───────────────────────────────────────────────────────────── */
.cg-app-navn { white-space: nowrap; font-family: var(--t-tal) !important; letter-spacing: .06em; font-weight: 800 !important; color: var(--t-tekst) !important; display: flex; align-items: center; gap: 10px; }
.cg-logo { width: 30px; height: 30px; filter: drop-shadow(0 0 6px rgba(111,227,176,.6)); }
.cg-ansvar {
    background: rgba(255,209,102,.10); color: var(--t-gul);
    font-size: .8rem; font-weight: 600; text-align: center; padding: 5px 16px;
    border-bottom: 1px solid rgba(255,209,102,.25); letter-spacing: .02em;
}
.mud-nav-link.active { background: rgba(111,227,176,.10) !important; box-shadow: inset 3px 0 0 var(--t-neon); }
.mud-nav-link.active .mud-nav-link-text { color: var(--t-neon); font-weight: 700; }

/* ── Helten (forsiden) ──────────────────────────────────────────────────── */
.cg-helt {
    position: relative; overflow: hidden; border-radius: 18px;
    background: linear-gradient(135deg, #0E152A 0%, #16234A 55%, #1B2C5A 100%) !important;
    border: 1px solid rgba(76,201,240,.25);
    box-shadow: 0 0 0 1px rgba(111,227,176,.08), 0 24px 60px rgba(0,0,0,.5);
}
.cg-helt::after {
    content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; height: 140%;
    background: radial-gradient(closest-side, rgba(111,227,176,.16), transparent 70%); pointer-events: none;
}
.cg-helt-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; padding: 20px 22px 6px; }
.cg-helt-label { color: var(--t-tekst-2) !important; letter-spacing: .12em; text-transform: uppercase; font-family: var(--t-tal); font-size: .68rem !important; }
.cg-helt-tal { font-family: var(--t-tal); font-size: 3.2rem; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
.cg-helt-enhed { font-size: 1rem; font-weight: 600; opacity: .8; margin-left: 6px; font-family: 'Inter', sans-serif; }
.cg-helt-under { color: var(--t-tekst-2) !important; }
.cg-helt-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.cg-helt-chip { background: rgba(255,255,255,.08) !important; color: var(--t-tekst) !important; border: 1px solid rgba(255,255,255,.08); }
.cg-helt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; padding: 12px 22px 8px; }
.cg-helt-stats div { display: flex; flex-direction: column; }
.cg-helt-stats span { font-size: .66rem; color: var(--t-tekst-2); text-transform: uppercase; letter-spacing: .1em; font-family: var(--t-tal); }
.cg-helt-stats b { font-size: 1.05rem; font-family: var(--t-tal); font-weight: 600; }
.cg-helt-kurve { padding: 4px 8px 4px; }
.cg-plus { color: var(--t-neon); text-shadow: 0 0 18px rgba(111,227,176,.55); }
.cg-minus { color: var(--t-roed); text-shadow: 0 0 18px rgba(255,92,122,.55); }
.cg-styring { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; justify-content: flex-end; margin-bottom: 4px; }

/* ── Spil-elementer: level, streak, HP-bar ──────────────────────────────── */
.cg-spil { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; padding: 6px 22px 14px; }
.cg-spil-kort { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; }
.cg-spil-titel { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--t-tal); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--t-tekst-2); }
.cg-spil-titel b { font-size: .95rem; color: var(--t-tekst); letter-spacing: .02em; }
.cg-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 8px; box-shadow: inset 0 1px 2px rgba(0,0,0,.5); }
.cg-bar > i { display: block; height: 100%; border-radius: 6px; transition: width .6s ease; }
.cg-bar-hp > i { background: linear-gradient(90deg, #FF5C7A, #FFD166 60%, #6FE3B0); box-shadow: 0 0 12px rgba(111,227,176,.5); }
.cg-bar-xp > i { background: linear-gradient(90deg, #4CC9F0, #9D7BFF); box-shadow: 0 0 12px rgba(157,123,255,.5); }
.cg-bar-win > i { background: linear-gradient(90deg, #4CC9F0, #6FE3B0); box-shadow: 0 0 12px rgba(76,201,240,.5); }
.cg-spil-under { font-size: .74rem; color: var(--t-tekst-2); margin-top: 6px; }
.cg-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cg-badge { font-size: .7rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); color: var(--t-tekst-2); background: rgba(255,255,255,.04); }
.cg-badge.on { color: #0B1020; background: linear-gradient(90deg, var(--t-cyan), var(--t-neon)); border-color: transparent; box-shadow: 0 0 12px rgba(111,227,176,.45); }
.cg-puls { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--t-neon); box-shadow: 0 0 0 0 rgba(111,227,176,.7); animation: cg-puls 1.8s infinite; margin-right: 6px; vertical-align: middle; }
.cg-puls.off { background: var(--t-roed); animation: none; }
@keyframes cg-puls { 0% { box-shadow: 0 0 0 0 rgba(111,227,176,.7); } 70% { box-shadow: 0 0 0 10px rgba(111,227,176,0); } 100% { box-shadow: 0 0 0 0 rgba(111,227,176,0); } }

/* ── Login-siden (ingen menu) ───────────────────────────────────────────── */
.cg-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px; }
.cg-login-kort { width: 100%; max-width: 440px; background: var(--t-flade); border: 1px solid rgba(76,201,240,.25); border-radius: 18px; padding: 26px 24px; box-shadow: 0 0 0 1px rgba(111,227,176,.08), 0 24px 60px rgba(0,0,0,.6); }
.cg-login-hoved { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.cg-login-logo { width: 56px; height: 56px; filter: drop-shadow(0 0 10px rgba(111,227,176,.6)); }
.cg-login-navn { font-family: var(--t-tal); font-weight: 800; font-size: 1.35rem; color: var(--t-tekst); line-height: 1.1; letter-spacing: .06em; }
.cg-login-under { color: var(--t-tekst-2); font-size: .85rem; }
.cg-login-kort h1 { font-family: var(--t-tal); font-size: 1.2rem; font-weight: 700; color: var(--t-tekst); letter-spacing: .03em; }
.cg-login-kort .text-secondary { color: var(--t-tekst-2) !important; }
.cg-login-kort .row { --bs-gutter-x: 0; }
.cg-login-kort .col-lg-5, .cg-login-kort .col-md-8 { width: 100%; max-width: 100%; flex: 0 0 100%; }
.cg-login-kort .form-control { background: #0E152A; color: var(--t-tekst); border-color: rgba(143,160,191,.35); }
.cg-login-kort .form-control:focus { border-color: var(--t-neon); box-shadow: 0 0 0 .2rem rgba(111,227,176,.2); background: #0E152A; color: var(--t-tekst); }
.cg-login-kort .form-floating > label { color: var(--t-tekst-2); }
.cg-login-kort .form-floating > .form-control:focus ~ label, .cg-login-kort .form-floating > .form-control:not(:placeholder-shown) ~ label { color: var(--t-neon); }
.cg-login-kort .form-floating > .form-control:focus ~ label::after, .cg-login-kort .form-floating > .form-control:not(:placeholder-shown) ~ label::after { background: transparent; }
.cg-login-kort .btn-primary { background: linear-gradient(90deg, var(--t-cyan), var(--t-neon)); border: none; color: #0B1020; font-weight: 800; font-family: var(--t-tal); letter-spacing: .04em; box-shadow: 0 0 18px rgba(111,227,176,.35); }
.cg-login-kort .btn-primary:hover { filter: brightness(1.08); color: #0B1020; }
.cg-login-kort .btn-outline-primary { color: var(--t-cyan); border-color: var(--t-cyan); }
.cg-login-kort .alert-warning { background: rgba(255,209,102,.1); color: var(--t-gul); border-color: rgba(255,209,102,.3); }
.cg-login-kort .alert-danger, .cg-login-kort .alert { background: rgba(255,92,122,.1); color: var(--t-roed); border-color: rgba(255,92,122,.3); }
.cg-login-kort .form-check-input { background: #0E152A; border-color: var(--t-tekst-2); }
.cg-login-kort .form-check-input:checked { background: var(--t-neon); border-color: var(--t-neon); }
.cg-login-ansvar { color: var(--t-tekst-2); font-size: .8rem; margin-top: 16px; text-align: center; }

/* ── Telefon ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .cg-app-navn { font-size: .95rem; }
    .cg-toplinje-hoejre { display: none; }
    .cg-skjul-mobil { display: none !important; }
    .cg-toplinje-midt { flex-wrap: nowrap; }
    .cg-helt-tal { font-size: 2.2rem; }
    .cg-helt-chips { justify-content: flex-start; }
    .cg-styring { justify-content: flex-start; }
}
.cg-ansvar.cg-live { background: rgba(255,92,122,.16); color: #FF5C7A; border-bottom-color: rgba(255,92,122,.4); animation: cg-live-blink 2.4s ease-in-out infinite; }
@keyframes cg-live-blink { 0%,100% { box-shadow: inset 0 -2px 0 rgba(255,92,122,.3); } 50% { box-shadow: inset 0 -2px 0 rgba(255,92,122,.9); } }
.cg-kontovalg .mud-input { font-family: var(--t-tal); font-size: .8rem; }
.cg-kontovalg .mud-input-outlined-border { border-color: rgba(111,227,176,.35) !important; }
.cg-maskin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.cg-maskin-kort { background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.07); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cg-maskin-kort span { font-family: var(--t-tal); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--t-tekst-2); }
.cg-maskin-kort small { color: var(--t-tekst-2); font-size: .74rem; }
.cg-count { font-family: var(--t-tal); font-size: 1.35rem; font-weight: 700; color: var(--t-neon); text-shadow: 0 0 14px rgba(111,227,176,.45); }
.cg-feed { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 260px; overflow: auto; }
.cg-feed-linje { display: flex; align-items: center; gap: 8px; font-size: .84rem; padding: 4px 6px; border-radius: 8px; background: rgba(255,255,255,.03); }
.cg-feed-tid { font-family: var(--t-tal); font-size: .7rem; color: var(--t-tekst-2); min-width: 62px; }
/* ── Puls-linjen (oeverst, alle sider) ──────────────────────────────────── */
.cg-puls-linje { display: flex; gap: 18px; align-items: center; overflow-x: auto; white-space: nowrap; padding: 6px 16px; font-size: .78rem; color: var(--t-tekst-2); background: rgba(76,201,240,.06); border-bottom: 1px solid rgba(76,201,240,.15); scrollbar-width: none; }
.cg-puls-linje::-webkit-scrollbar { display: none; }
.cg-puls-del { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.cg-puls-del b { color: var(--t-tekst); font-family: var(--t-tal); font-size: .78rem; font-weight: 600; }
.cg-puls-del small { color: var(--t-tekst-2); font-size: .7rem; }
.cg-puls-hoved { color: var(--t-neon); font-family: var(--t-tal); letter-spacing: .08em; text-transform: uppercase; font-size: .7rem; }