:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #e8edf1; background: #101820; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { width: min(100%, 620px); margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
h1 { font-size: clamp(1.7rem, 6vw, 2.3rem); line-height: 1.15; margin-bottom: 10px; }
h2 { font-size: 1.3rem; }
p, small, footer { line-height: 1.55; color: #b9c7d2; }
.badge { display: inline-block; border: 1px solid #688345; border-radius: 20px; padding: 4px 12px; color: #d2eead; font-size: .85rem; }
#notice { min-height: 26px; overflow-wrap: anywhere; }
#notice.error { color: #ffb5ad; }
section { background: #17242f; border: 1px solid #33434f; border-radius: 18px; padding: 20px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
.tabs button, .secondary { background: transparent; color: #d6e1e9; border: 1px solid #536573; }
.tabs button { flex: 1 1 110px; padding: 10px; font-size: .9rem; }
.tabs button[aria-pressed=true] { background: #c3e69a; color: #152011; border-color: #c3e69a; }
label { display: grid; gap: 8px; margin-top: 20px; font-weight: 600; }
input, select { width: 100%; min-width: 0; min-height: 48px; background: #0e1922; color: #fff; border: 1px solid #697b89; border-radius: 9px; font: inherit; padding: 12px; }
small { display: block; margin-top: 8px; font-size: .85rem; }
button { min-height: 44px; background: #c3e69a; border: 1px solid #c3e69a; border-radius: 9px; padding: 11px 16px; color: #152011; font: inherit; font-weight: 650; cursor: pointer; }
form > button { width: 100%; margin-top: 24px; }
button:disabled { opacity: .6; cursor: wait; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #a6c9f5; outline-offset: 3px; }
.account-heading { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.account-heading h2 { overflow-wrap: anywhere; min-width: 0; }
aside { margin-top: 28px; border-top: 1px solid #536573; padding-top: 10px; }
footer { margin-top: 28px; font-size: .8rem; }
a { color: #c3e69a; }
#history { margin-top: 18px; }
#recording { margin-bottom: 18px; }
#recording h2 { margin-top: 0; }
.recording-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
#recording-state, #recording-times { overflow-wrap: anywhere; }
#statistics { margin-top: 18px; }
#game-profile { border-top: 1px solid #536573; margin-top: 20px; padding: 12px 0; }
#stats-toggle { margin-top: 20px; }
.stats-family { border-top: 1px solid #536573; padding: 18px 0; overflow-wrap: anywhere; }
.stats-configuration { border: 1px solid #536573; border-radius: 12px; padding: 14px; margin-top: 14px; }
.stats-configuration h4 { margin: 0; }
.stats-configuration p { margin: 8px 0; }
#data-panel { border-top: 1px solid #536573; margin-top: 24px; }
#data-download { display: block; margin-top: 18px; }
#delete-data { border: 1px solid #aa6f67; border-radius: 12px; margin-top: 20px; padding: 16px; }
.date-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.battle-list { list-style: none; padding: 0; }
.battle-row { border-top: 1px solid #536573; padding: 20px 0; overflow-wrap: anywhere; }
.battle-heading { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; justify-content: space-between; }
.battle-heading time { font-size: .85rem; color: #b9c7d2; }
.result-win { color: #a8e5bf; }
.result-loss { color: #ffb5ad; }
.result-unknown { color: #d8cfb1; }
.battle-row p { margin: 8px 0; }
summary { cursor: pointer; padding: 12px 0; color: #c3e69a; }
.card-names { padding-left: 20px; font-size: .9rem; line-height: 1.6; color: #b9c7d2; }
.coverage { font-size: .85rem; overflow-wrap: anywhere; }
.pwa-panel { margin: 16px 0; padding: 0 16px; border: 1px solid #536573; border-radius: 12px; }
.pwa-panel p { font-size: .9rem; }
.pwa-panel button { margin-bottom: 16px; }
.connection-banner { margin: 16px 0; padding: 16px; border: 1px solid #aa9167; border-radius: 12px; }
.connection-banner h2 { margin-top: 0; }
.offline-action { display: inline-block; border: 1px solid #c3e69a; border-radius: 9px; padding: 12px 18px; }
@media (max-width: 360px) { .date-filters { grid-template-columns: minmax(0, 1fr); } }