:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #20223a;
  background: #eff0ff;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

.app-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  background: radial-gradient(circle at top left, #dfe1ff 0, transparent 34rem), linear-gradient(135deg, #f9f9ff, #eef0ff);
}

.todo-card {
  width: min(100%, 640px);
  padding: clamp(24px, 6vw, 46px);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 28px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 24px 70px rgba(58, 63, 160, .16);
}

.eyebrow { margin: 0 0 8px; color: #696bc4; font-size: .75rem; font-weight: 800; letter-spacing: .12em; }
.title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.15rem); letter-spacing: -.06em; }
.header-tools { display: flex; align-items: center; gap: 12px; }
.summary { color: #777993; font-size: .9rem; }
.theme-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dedff1; border-radius: 999px; padding: 7px 10px; color: #5a5c7a; background: #fff; font-size: .8rem; font-weight: 700; }
.theme-toggle:hover { border-color: #aeb0e6; background: #f5f5ff; }
.page-tools { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.logout-link { display: inline-block; margin-top: 16px; color: #5a5c7a; font-size: .85rem; text-decoration: none; }
.logout-link:hover { color: #bd3345; text-decoration: underline; }

.login-card { width: min(100%, 440px); }
.public-card { width: min(100%, 640px); }
.public-content { padding: 12px 0 8px; }
.public-description { max-width: 34rem; margin: 20px 0 0; color: #777993; font-size: 1.05rem; line-height: 1.8; }
.public-actions { margin-top: 30px; }
.admin-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 13px; padding: 0 20px; color: #fff; background: #5b5ce2; font-weight: 750; text-decoration: none; }
.admin-link:hover { background: #4849c9; }
.login-loading { display: grid; justify-items: center; gap: 14px; min-height: 148px; padding: 30px 0; color: #777993; text-align: center; }
.login-loading[hidden] { display: none; }
.login-loading p { margin: 0; }
.loading-spinner { width: 34px; height: 34px; border: 3px solid #dedff1; border-top-color: #5b5ce2; border-radius: 50%; animation: spin .8s linear infinite; }
.login-description { margin: 12px 0 0; color: #777993; }
.login-form { display: grid; gap: 10px; margin-top: 28px; }
.login-form label { color: #5a5c7a; font-size: .9rem; font-weight: 700; }
.login-form button { min-height: 48px; border-radius: 13px; color: #fff; background: #5b5ce2; font-weight: 750; }
.login-form button:hover { background: #4849c9; }
.login-form button:disabled { cursor: wait; opacity: .7; }

.dashboard-shell { place-items: start center; }
.dashboard-card { width: min(100%, 1200px); }
.dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.dashboard-header .title-row { align-items: center; }
.dashboard-header h1 { font-size: clamp(1rem, 2.5vw, 1.325rem); }
.dashboard-header .summary { margin: 0; max-width: 27rem; font-weight: 650; }
.secondary-button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; border: 1px solid #dedff1; border-radius: 999px; padding: 7px 10px; color: #5a5c7a; background: #fff; font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.secondary-button:hover { border-color: #aeb0e6; background: #f5f5ff; }
.secondary-button:disabled { cursor: wait; opacity: .7; }
.logout-button { color: #bd3345; border-color: #efb5be; background: #fff6f7; text-decoration: none; }
.logout-button:hover { color: #a82b3b; border-color: #dc8794; background: #ffe9ec; }
.game-picker { margin-top: 18px; }
.game-control { display: grid; gap: 8px; width: min(100%, 540px); }
.game-picker label { color: #5a5c7a; font-size: .9rem; font-weight: 700; }
.game-picker select { width: 100%; border: 1px solid #dedff1; border-radius: 13px; padding: 12px 14px; color: inherit; background: #fff; font: inherit; }
.game-list-section { margin-top: 26px; }
.game-sort-control { display: inline-flex; align-items: center; gap: 8px; color: #777993; font-size: .82rem; font-weight: 700; }
.game-sort-control select { border: 1px solid #dedff1; border-radius: 10px; padding: 9px 30px 9px 11px; color: inherit; background: #fff; font: inherit; }
.settings-list { display: grid; gap: 12px; max-width: 680px; margin-top: 26px; }
.settings-item { display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #edeeff; border-radius: 14px; padding: 16px 18px; background: #fbfbff; }
.settings-item h2 { margin: 0; font-size: .95rem; }
.settings-item p { margin: 5px 0 0; color: #777993; font-size: .84rem; }
.alias-editor { display: flex; gap: 8px; min-width: 250px; }
.game-alias-input { min-width: 150px; padding: 9px 11px; font-size: .86rem; }
.alias-save-button { border-radius: 10px; padding: 0 12px; color: #fff; background: #5b5ce2; font-size: .82rem; font-weight: 750; white-space: nowrap; }
.alias-save-button:hover { background: #4849c9; }
.alias-save-button:disabled { cursor: wait; opacity: .65; }
.game-detail-link { justify-content: center; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.overview-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.metric-card { display: grid; gap: 7px; min-height: 102px; padding: 16px; border: 1px solid #edeeff; border-radius: 16px; background: #fbfbff; }
.metric-card span { color: #777993; font-size: .84rem; }
.metric-card strong { font-size: clamp(1.1rem, 2.5vw, 1.55rem); overflow-wrap: anywhere; }
.overview-link-card { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.overview-link-card small { color: #5b5ce2; font-size: .82rem; font-weight: 700; }
.overview-link-card:hover { border-color: #aeb0e6; box-shadow: 0 10px 22px rgba(55, 58, 136, .1); transform: translateY(-1px); }
.metric-card:nth-child(3) strong, .metric-card:nth-child(4) strong { font-size: clamp(.95rem, 1.65vw, 1.18rem); line-height: 1.35; }
.dashboard-section { margin-top: 26px; }
.dashboard-section h2 { margin: 0; font-size: 1rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.section-meta { min-height: 1.2em; margin: 4px 0 0; color: #777993; font-size: .8rem; }
.event-filter { width: min(100%, 270px); }
.event-filter input { width: 100%; padding: 10px 12px; font-size: .86rem; }
.event-type-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.event-type-list li { display: flex; flex: 0 1 auto; align-items: center; gap: 10px; max-width: 100%; padding: 10px 12px; border: 1px solid #edeeff; border-radius: 12px; background: #fbfbff; font-size: .88rem; }
.event-type-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-type-list strong { color: #5b5ce2; white-space: nowrap; }
.table-scroll { overflow-x: auto; border: 1px solid #edeeff; border-radius: 14px; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { padding: 12px 14px; border-bottom: 1px solid #edeeff; text-align: left; }
td { vertical-align: middle; }
th { color: #5a5c7a; background: #fbfbff; font-size: .78rem; letter-spacing: .04em; }
tbody tr:last-child td { border-bottom: 0; }
td:last-child { max-width: 340px; overflow-wrap: anywhere; }
.table-empty { padding: 28px 14px; color: #777993; text-align: center; }

.new-todo-form { display: flex; gap: 10px; margin-top: 32px; }
input { min-width: 0; flex: 1; border: 1px solid #dedff1; border-radius: 13px; padding: 14px 16px; color: inherit; font: inherit; outline: none; }
input:focus { border-color: #6869d6; box-shadow: 0 0 0 4px #e4e5ff; }
button { border: 0; cursor: pointer; font: inherit; }
.new-todo-form button { border-radius: 13px; padding: 0 19px; color: white; background: #5b5ce2; font-weight: 750; }
.new-todo-form button:hover { background: #4849c9; }

.message { min-height: 1.3em; margin: 10px 2px 0; color: #bf3c4d; font-size: .9rem; }
.message[data-type="success"] { color: #238452; }
.todo-list { display: grid; gap: 10px; padding: 0; margin: 20px 0 0; list-style: none; }
.todo-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 12px; border: 1px solid #edeeff; border-radius: 15px; padding: 12px; transition: transform .15s, box-shadow .15s; }
.todo-item:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(55, 58, 136, .08); }
.toggle { width: 24px; height: 24px; border: 2px solid #bbbde0; border-radius: 50%; color: white; background: transparent; font-weight: 900; line-height: 1; }
.completed .toggle { border-color: #5b5ce2; background: #5b5ce2; }
.todo-text { overflow-wrap: anywhere; }
.completed .todo-text { color: #9899aa; text-decoration: line-through; }
.delete { padding: 6px 8px; border-radius: 8px; color: #9697a7; background: transparent; font-size: .85rem; }
.delete:hover { color: #bd3345; background: #fff0f2; }
.empty-state { display: grid; place-items: center; gap: 8px; min-height: 190px; color: #80829a; text-align: center; }
.empty-state span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: #5b5ce2; background: #ececff; font-size: 1.5rem; font-weight: 800; }
.empty-state p { margin: 0; }
.deployment-status { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 28px 0 0; color: #777993; font-size: .78rem; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #45ae71; box-shadow: 0 0 0 4px #e5f6ec; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

:root[data-theme="dark"] { color: #ecedff; background: #151625; }
:root[data-theme="dark"] .app-shell { background: radial-gradient(circle at top left, #292b55 0, transparent 34rem), linear-gradient(135deg, #161725, #20213a); }
:root[data-theme="dark"] .todo-card { border-color: rgba(255, 255, 255, .08); background: rgba(31, 33, 56, .92); box-shadow: 0 24px 70px rgba(0, 0, 0, .32); }
:root[data-theme="dark"] .eyebrow { color: #aeb1ff; }
:root[data-theme="dark"] .summary, :root[data-theme="dark"] .deployment-status { color: #afb1c8; }
:root[data-theme="dark"] input { border-color: #4c4e70; color: inherit; background: #272942; }
:root[data-theme="dark"] input:focus { border-color: #9d9ff8; box-shadow: 0 0 0 4px #363860; }
:root[data-theme="dark"] .theme-toggle { border-color: #4c4e70; color: #e3e4ff; background: #272942; }
:root[data-theme="dark"] .theme-toggle:hover { border-color: #777ad4; background: #323457; }
:root[data-theme="dark"] .logout-button { color: #ffb7c0; border-color: #744453; background: #3a2630; }
:root[data-theme="dark"] .logout-button:hover { color: #ffd0d5; border-color: #ad6373; background: #4a2933; }
:root[data-theme="dark"] .logout-link { color: #c7c9e2; }
:root[data-theme="dark"] .logout-link:hover { color: #ffafb8; }
:root[data-theme="dark"] .login-description, :root[data-theme="dark"] .login-form label { color: #afb1c8; }
:root[data-theme="dark"] .public-description { color: #afb1c8; }
:root[data-theme="dark"] .login-loading { color: #afb1c8; }
:root[data-theme="dark"] .loading-spinner { border-color: #4c4e70; border-top-color: #aeb1ff; }
:root[data-theme="dark"] .game-picker label { color: #c7c9e2; }
:root[data-theme="dark"] .secondary-button { border-color: #4c4e70; color: #e3e4ff; background: #272942; }
:root[data-theme="dark"] .secondary-button:hover { border-color: #777ad4; background: #323457; }
:root[data-theme="dark"] .game-picker select { border-color: #4c4e70; color: inherit; background: #272942; }
:root[data-theme="dark"] .game-sort-control { color: #c7c9e2; }
:root[data-theme="dark"] .game-sort-control select { border-color: #4c4e70; color: inherit; background: #272942; }
:root[data-theme="dark"] .field-hint, :root[data-theme="dark"] .section-meta, :root[data-theme="dark"] .table-empty { color: #afb1c8; }
:root[data-theme="dark"] .metric-card { border-color: #40425f; background: #272942; }
:root[data-theme="dark"] .metric-card span { color: #afb1c8; }
:root[data-theme="dark"] .overview-link-card small { color: #b8baff; }
:root[data-theme="dark"] .overview-link-card:hover { border-color: #777ad4; box-shadow: 0 10px 22px rgba(0, 0, 0, .22); }
:root[data-theme="dark"] .event-type-list li, :root[data-theme="dark"] .table-scroll { border-color: #40425f; }
:root[data-theme="dark"] .settings-item { border-color: #40425f; background: #272942; }
:root[data-theme="dark"] .settings-item p { color: #afb1c8; }
:root[data-theme="dark"] .event-type-list li { background: #272942; }
:root[data-theme="dark"] .event-type-list strong { color: #b8baff; }
:root[data-theme="dark"] th, :root[data-theme="dark"] td { border-color: #40425f; }
:root[data-theme="dark"] th { color: #c7c9e2; background: #272942; }

@keyframes spin { to { transform: rotate(360deg); } }
:root[data-theme="dark"] .todo-item { border-color: #40425f; }
:root[data-theme="dark"] .todo-item:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, .26); }
:root[data-theme="dark"] .completed .todo-text { color: #8588a3; }
:root[data-theme="dark"] .delete { color: #aaacc2; }
:root[data-theme="dark"] .delete:hover { color: #ffafb8; background: #4a2933; }
:root[data-theme="dark"] .empty-state { color: #afb1c8; }
:root[data-theme="dark"] .empty-state span { color: #b8baff; background: #323457; }
:root[data-theme="dark"] .status-dot { box-shadow: 0 0 0 4px #294936; }
:root[data-theme="dark"] .message[data-type="success"] { color: #72d99b; }

@media (max-width: 440px) {
  .todo-card { border-radius: 22px; }
  .new-todo-form { flex-direction: column; }
  .new-todo-form button { min-height: 48px; }
  .header-tools { width: 100%; justify-content: space-between; }
  .dashboard-header { flex-direction: column; }
  .dashboard-header .title-row { align-items: flex-start; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .event-filter { width: 100%; }
  .game-sort-control { justify-content: space-between; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alias-editor { min-width: 230px; }
}