/* LuterTrainer design system (dark only). Fonts are self-hosted: CSP allows font-src 'self' only. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/barlow-700.woff2') format('woff2'); }

:root { color-scheme: dark; --lt-accent: #f97316; }

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; background: #000; }
body {
    color: #f5f5f5;
    font: 400 14px/1.45 Inter, system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    min-height: 100vh;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
a { color: inherit; }
h1:focus { outline: none; }
h1, h2, h3, .hd {
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    font-weight: 700; letter-spacing: .02em; text-transform: uppercase; margin: 0; line-height: 1.05;
}
h1 { font-size: 36px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
p { margin: 0; }
button { font-family: inherit; }

/* layout */
.app { display: flex; flex-direction: column; min-height: 100vh; }
.app > main { flex: 1; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 28px 24px 48px; display: flex; flex-direction: column; gap: 20px; }
.nar { max-width: 720px; }
.row { display: flex; gap: 16px; align-items: center; } .sp { justify-content: space-between; } .wr { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 16px; } .c8 { gap: 8px; } .c12 { gap: 12px; }
.grid { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g21 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.g12 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .gm { grid-template-columns: 220px minmax(0, 1fr); }
.pn { background: #0a0a0a; border: 1px solid #262626; border-radius: 6px; padding: 18px; }
.pn.flat { padding: 0; } .pnh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pn.red { border-color: #4a1a1b; } .pn.hl { border-color: #7c3a0c; }
.mut { color: #a3a3a3; } .dim { color: #8a8a8a; } .sm { font-size: 12px; } .up { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 11px; }
.ok { color: #4ade80; } .er { color: #ff6b6d; } .wa { color: #f9d423; } .ac { color: #f97316; } .bl { color: #60a5fa; }
.strong { color: #f5f5f5; font-weight: 700; }
.sep { border: 0; border-top: 1px solid #262626; margin: 0; }
.vh { position: absolute; left: -9999px; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; }
.tx { line-height: 1.7; color: #d4d4d4; font-size: 15px; } .tx h2 { margin: 22px 0 6px; color: #fff; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 4px; border: 1px solid #3a3a3a; background: transparent; color: #f5f5f5; font: 600 14px Inter, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: #171717; }
.btn:disabled, .btn.dis { opacity: .55; cursor: not-allowed; }
.btn-p { background: #f97316; border-color: #f97316; color: #1a0e05; } .btn-p:hover { background: #ea580c; border-color: #ea580c; }
.btn-d { border-color: #7f2a2b; color: #ff7a7c; } .btn-d:hover { background: #1f0b0b; }
.btn-s { min-height: 32px; padding: 0 12px; font-size: 13px; } .btn-w { width: 100%; }
.lk { color: #f97316; text-decoration: none; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; }
.lk:hover { color: #fb923c; text-decoration: underline; }
.spin { width: 14px; height: 14px; border: 2px solid rgba(26,14,5,.3); border-top-color: #1a0e05; border-radius: 50%; display: inline-block; animation: lt-spin .8s linear infinite; }
.spin.l { border-color: #444; border-top-color: #f97316; }
@keyframes lt-spin { to { transform: rotate(360deg); } }

/* forms */
.lbl { display: block; font-size: 12px; font-weight: 600; color: #c4c4c4; margin-bottom: 6px; }
.in, select.in { width: 100%; min-height: 42px; background: #000; border: 1px solid #333; border-radius: 4px; color: #f5f5f5; padding: 0 12px; font: 400 14px Inter, sans-serif; }
.in:focus { outline: 2px solid #f97316; outline-offset: 1px; } .in.bad, .in.invalid { border-color: #ff4e50; }
.pw { position: relative; } .pw .in { padding-right: 44px; }
.pw-t { position: absolute; top: 0; right: 0; bottom: 0; width: 44px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: #d4d4d4; cursor: pointer; border-radius: 4px; }
.pw .in::placeholder { color: rgba(163,163,163,.45); letter-spacing: 2px; }
.pw-t:hover { color: #f5f5f5; } .pw-t:focus-visible { outline: 2px solid #f97316; outline-offset: -2px; }
.pw-t .pw-hide, .pw-t.on .pw-show { display: none; } .pw-t.on .pw-hide { display: inline-flex; } .pw-t .pw-show { display: inline-flex; }
.hint { font-size: 12px; color: #8a8a8a; margin-top: 6px; }
.ck { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: 14px; } .ck input { width: 18px; height: 18px; accent-color: #f97316; }
.seg { display: inline-flex; border: 1px solid #333; border-radius: 4px; overflow: hidden; }
.seg button { min-height: 38px; padding: 0 16px; background: transparent; border: 0; border-right: 1px solid #333; color: #a3a3a3; font: 600 13px Inter, sans-serif; cursor: pointer; }
.seg button:last-child { border-right: 0; } .seg .on { background: #f97316; color: #1a0e05; }
.sw { width: 46px; height: 26px; border-radius: 4px; border: 1px solid #444; background: #1a1a1a; padding: 2px; display: flex; align-items: center; cursor: pointer; }
.sw i { width: 20px; height: 20px; border-radius: 2px; background: #8a8a8a; display: block; }
.sw.on { background: #f97316; border-color: #f97316; justify-content: flex-end; } .sw.on i { background: #1a0e05; }
.cp { display: flex; gap: 8px; } .cp .in { min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #d4d4d4; }
.k { font-size: 11px; color: #8a8a8a; text-transform: uppercase; letter-spacing: .05em; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #4ade80; }
.invalid { outline: 1px solid #ff4e50; }
.validation-message { color: #ff6b6d; font-size: 12px; margin-top: 6px; }
.validation-errors, .vs { color: #ff6b6d; font-size: 13px; margin: 0; padding-left: 18px; }

/* badges and alerts */
.bd { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 3px; border: 1px solid #3a3a3a; color: #d4d4d4; font: 600 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.bd-ok { color: #4ade80; border-color: #14532d; background: #06180d; } .bd-wa { color: #f9d423; border-color: #5c4d00; background: #1a1500; }
.bd-er { color: #ff7a7c; border-color: #6b1d1e; background: #210a0a; } .bd-in { color: #60a5fa; border-color: #1e3a5f; background: #07121f; }
.bd-ac { color: #fb923c; border-color: #7c3a0c; background: #1c0d03; }
.al { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid; border-radius: 4px; font-size: 14px; }
.al svg { flex: none; margin-top: 1px; } .al .btn { margin-left: auto; align-self: center; }
.al-ok { border-color: #14532d; background: #04170b; color: #86efac; } .al-wa { border-color: #5c4d00; background: #1a1500; color: #fde047; }
.al-er { border-color: #6b1d1e; background: #210a0a; color: #ffa0a2; } .al-in { border-color: #1e3a5f; background: #07121f; color: #93c5fd; }
.al-ac { border-color: #7c3a0c; background: #1c0d03; color: #fdba74; }
.bar { height: 6px; background: #1f1f1f; border-radius: 2px; overflow: hidden; } .bar i { display: block; height: 100%; background: #f97316; }
.mt .l { font-size: 11px; font-weight: 600; color: #a3a3a3; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px; }
.mt .v { font: 700 40px/1 'Barlow Condensed', 'Arial Narrow', sans-serif; } .mt .v small { font-size: 16px; color: #a3a3a3; font-weight: 600; margin-left: 3px; }
.dl { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; } .dl-up { color: #4ade80; } .dl-wa { color: #f9d423; } .dl-er { color: #ff6b6d; } .dl-0 { color: #a3a3a3; }

/* tables */
.tb { width: 100%; border-collapse: separate; border-spacing: 0; }
.tb th { position: sticky; top: 0; z-index: 2; background: #0a0a0a; text-align: left; font: 600 11px Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #a3a3a3; padding: 10px 12px; border-bottom: 1px solid #3a3a3a; white-space: nowrap; }
.tb td { padding: 11px 12px; border-bottom: 1px solid #1d1d1d; }
.tb tbody tr:hover td { background: #101010; } .tb .n { text-align: right; }
.tb tr.last td { border-bottom: 0; } .tb .mu td { color: #777; }
.stk th:first-child, .stk td:first-child { position: sticky; left: 0; z-index: 1; background: #0a0a0a; font-weight: 600; } .stk th:first-child { z-index: 3; }
.sc { overflow-x: auto; }
/* Same column widths in every card; long values wrap instead of stretching the table. */
.tb-fixed { table-layout: fixed; } .tb-fixed td { overflow-wrap: anywhere; }
.cm td, .cm th { padding: 10px 12px; } .tb td.ty { color: #a3a3a3; font-size: 13px; }
.h0 { color: #777; } .h1 { background: rgba(249,115,22,.10); } .h2 { background: rgba(249,115,22,.22); } .h3 { background: rgba(249,115,22,.36); }
.h4 { background: rgba(249,115,22,.55); } .h5 { background: #f97316; color: #1a0e05; font-weight: 700; }
/* The row hover (.tb tbody tr:hover td) is more specific than the heat classes: keep the heat colors on hover. */
.tb tbody tr:hover td.h1 { background: rgba(249,115,22,.10); } .tb tbody tr:hover td.h2 { background: rgba(249,115,22,.22); } .tb tbody tr:hover td.h3 { background: rgba(249,115,22,.36); }
.tb tbody tr:hover td.h4 { background: rgba(249,115,22,.55); } .tb tbody tr:hover td.h5 { background: #f97316; }
.cur { font-weight: 700; color: #fff; box-shadow: inset 2px 0 0 #f97316; }
.vm td.c, .vm th.c { text-align: right; min-width: 74px; } .vm td.c { border-left: 1px solid #000; } .vm td.cur { box-shadow: none; border-left: 2px solid #f97316; }
.lg { display: inline-block; width: 22px; height: 12px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }

/* lists */
.li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #1d1d1d; text-decoration: none; min-height: 56px; }
.li:last-child { border-bottom: 0; } .li:hover .t { color: #f97316; } .li .t { font-weight: 600; }
.wl { display: flex; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid #1d1d1d; text-decoration: none; min-height: 64px; }
.wl:last-child { border-bottom: 0; } .wl:hover { background: #101010; } .wl:hover .t { color: #f97316; }
.wl .t { font: 700 20px 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.wl .r { text-align: right; white-space: nowrap; color: #a3a3a3; font-size: 13px; } .wl .r b { display: block; color: #f5f5f5; font-weight: 600; }
.ar { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 16px 18px; border-bottom: 1px solid #1d1d1d; }
.ar:last-child { border-bottom: 0; }
.ar .ty { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #a3a3a3; }
.ar .tx2 { margin-top: 6px; color: #e5e5e5; font-size: 15px; line-height: 1.5; } .ar .ac2 { display: flex; gap: 8px; }
.sr { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid #1d1d1d; } .sr:last-of-type { border-bottom: 0; }
.eb { padding: 12px 14px; border-bottom: 1px solid #1d1d1d; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.eb .k { font-size: 11px; color: #8a8a8a; text-transform: uppercase; letter-spacing: .05em; }
.eb .pl { grid-column: 1 / -1; display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; font-size: 13px; }
.cb { padding: 14px; border-bottom: 1px solid #1d1d1d; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.cb .nm { font-weight: 600; } .cb .ch { font: 700 22px 'Barlow Condensed', sans-serif; text-align: right; }
.cb .st { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cb .st small { display: block; color: #8a8a8a; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
details.xr { border-bottom: 1px solid #1d1d1d; }
details.xr summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 62px 44px 44px 20px; gap: 6px; align-items: center; min-height: 56px; padding: 6px 14px; cursor: pointer; }
details.xr summary::-webkit-details-marker { display: none; }
details.xr .xb { padding: 4px 14px 14px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.xb div { border: 1px solid #1d1d1d; border-radius: 4px; padding: 6px 8px; text-align: right; }
.xb small { display: block; color: #8a8a8a; font-size: 11px; text-align: left; }

/* top bar, tab bar, footer */
.tn { display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 20px; background: #0a0a0a; border-bottom: 1px solid #262626; position: sticky; top: 0; z-index: 40; }
.tn .br { display: flex; align-items: center; gap: 10px; margin-right: 18px; text-decoration: none; }
.tn .br b { font: 700 22px 'Barlow Condensed', sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.tl { display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px; color: #a3a3a3; text-decoration: none; font-weight: 500; font-size: 14px; white-space: nowrap; background: none; border: 0; cursor: pointer; }
.tl:hover { color: #fff; } .tl.active { color: #fff; box-shadow: inset 0 -2px #f97316; } .tl.active svg { color: #f97316; }
.tb2 { display: none; align-items: center; justify-content: space-between; gap: 6px; padding: 0 16px; padding-top: env(safe-area-inset-top); min-height: 56px; background: #0a0a0a; border-bottom: 1px solid #262626; position: sticky; top: 0; z-index: 40; }
.av { width: 44px; height: 44px; border: 1px solid #3a3a3a; border-radius: 4px; background: #111; color: #f5f5f5; font: 700 15px 'Barlow Condensed', sans-serif; letter-spacing: .05em; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tab { display: none; grid-template-columns: repeat(6, 1fr); background: #0a0a0a; border-top: 1px solid #262626; padding-bottom: env(safe-area-inset-bottom, 0px); position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; }
.tab a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; color: #a3a3a3; text-decoration: none; font-size: 11px; font-weight: 600; }
.tab a.active { color: #f97316; }
.ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px 24px; border-top: 1px solid #1d1d1d; font-size: 12px; color: #8a8a8a; }
.ft a { color: #a3a3a3; text-decoration: none; } .ft a:hover { color: #fff; text-decoration: underline; }
.au { max-width: 420px; margin: 0 auto; padding: 40px 0; display: flex; flex-direction: column; gap: 16px; } .au .pn { padding: 24px; }
.ah { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 56px 0 40px; } .hero .big { font-size: 76px; line-height: .95; }
.m-only { display: none; }

/* dialogs */
dialog.md { width: calc(100% - 32px); max-width: 360px; background: #0a0a0a; color: #f5f5f5; border: 1px solid #333; border-radius: 6px; padding: 20px; }
dialog.md::backdrop { background: rgba(0, 0, 0, .7); }
dialog.md[open] { display: flex; flex-direction: column; gap: 14px; }
dialog.pm { padding: 0; max-width: 360px; width: calc(100% - 32px); margin: 64px 16px 0 auto; background: #0a0a0a; color: #f5f5f5; border: 1px solid #333; border-radius: 6px; }
dialog.pm::backdrop { background: rgba(0, 0, 0, .6); }
.pm a, .pm button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; color: #f5f5f5; text-decoration: none; border: 0; border-bottom: 1px solid #1d1d1d; background: none; font: 500 14px Inter, sans-serif; cursor: pointer; text-align: left; }
.pm > :last-child { border-bottom: 0; }
.big404 { font: 700 96px/0.9 'Barlow Condensed', sans-serif; color: #f97316; }

/* Blazor */
.blazor-error-boundary { background: #6b1d1e; padding: 1rem; color: #fff; border-radius: 4px; }
.blazor-error-boundary::after { content: "An error has occurred."; }
#blazor-error-ui { background: #210a0a; color: #ffa0a2; border-top: 1px solid #6b1d1e; bottom: 0; box-sizing: border-box; display: none; left: 0; padding: .6rem 3rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1100; }
#blazor-error-ui .reload { color: #fff; margin-left: .5rem; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; background: none; border: 0; color: inherit; font-size: 1rem; }

.mn{display:flex;flex-direction:column;gap:2px}.mn a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:4px;color:#a3a3a3;text-decoration:none;font-weight:500;white-space:nowrap}.mn a:hover{color:#fff;background:#111}.mn a.on{color:#fff;background:#141414;box-shadow:inset 2px 0 #f97316}
.rc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.rc span{border:1px solid #262626;border-radius:4px;padding:8px 10px;background:#000}

@media (max-width: 760px) {
    .mn{flex-direction:row;overflow-x:auto;gap:4px;border-bottom:1px solid #262626;padding-bottom:6px;margin:0 -16px;padding-left:16px;padding-right:16px}.mn a.on{box-shadow:inset 0 -2px #f97316;background:transparent;border-radius:0}
    .d-only { display: none !important; }
    .m-only { display: block; } .m-only.fx { display: flex; } .m-only.gr { display: grid; }
    .tb2 { display: flex; } .tab { display: grid; }
    h1 { font-size: 30px; }
    .wrap { padding: 16px 16px 24px; gap: 16px; }
    .app > main { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
    .g4, .g3, .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .g21, .g12, .gm { grid-template-columns: minmax(0, 1fr); }
    .btn, .btn-s { min-height: 44px; } .in, select.in { min-height: 46px; font-size: 16px; }
    .seg { display: flex; width: 100%; } .seg button { flex: 1; min-height: 44px; }
    .al { flex-wrap: wrap; } .al .btn { margin-left: 0; width: 100%; }
    .pn { padding: 14px; } .mt .v { font-size: 34px; }
    .ck { min-height: 44px; } .li { min-height: 60px; }
    .au { padding: 20px 0; } .au .pn { padding: 18px; }
    .ft { padding: 16px; padding-bottom: 20px; }
    .rw { flex-direction: column; align-items: stretch; }
    .wl { padding: 12px 14px; } .wl .r { font-size: 12px; }
    .cm td, .cm th { padding: 10px 7px; } .cm td.ty { font-size: 12px; }
    .ar { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; } .ar .ac2 { display: grid; grid-template-columns: 1fr 1fr; }
    .sr { flex-direction: column; align-items: stretch; gap: 10px; } .sr .sw-r { justify-content: space-between; }
    .hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px 0; } .hero .big { font-size: 52px; } .hero img { width: 96px; height: 96px; }
    #blazor-error-ui { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}