:root {
  color-scheme: dark;
  font-family: Tahoma, Arial, sans-serif;
  color: #edf2fc;
  background: #080d18;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --muted: #8792a8;
  --line: rgba(163, 180, 211, .13);
  --accent: #9d7aff;
  --accent-bright: #b49aff;
}

* { box-sizing: border-box; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(105, 72, 185, .24), transparent 48%),
    radial-gradient(ellipse at 0% 100%, rgba(34, 103, 132, .12), transparent 38%),
    #080d18;
}
button, input { font: inherit; }
button { cursor: pointer; }
.shell { width: min(100% - 32px, 480px); margin: 0 auto; padding: 9vh 0 28px; }
.login-card, .dashboard-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(155deg, rgba(22, 30, 49, .97), rgba(14, 20, 34, .98));
  box-shadow: 0 28px 100px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .035);
}
.login-card { padding: 40px; }
.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(180, 154, 255, .38);
  border-radius: 15px;
  color: white;
  background: linear-gradient(145deg, #9a76fa, #5c43b1);
  box-shadow: 0 8px 30px rgba(138, 99, 239, .3);
  font: 700 22px Arial, sans-serif;
}
.eyebrow { margin: 25px 0 8px; color: var(--accent-bright); font: 600 10px Arial, sans-serif; letter-spacing: .16em; }
h1 { margin: 0; font-size: 29px; font-weight: 600; letter-spacing: -.04em; }
.intro { margin: 9px 0 30px; color: var(--muted); font-size: 13px; line-height: 1.8; }
form label { display: block; margin: 18px 0 8px; color: #c7cede; font-size: 12px; font-weight: 500; }
.phone-field, .password-field { display: flex; min-height: 49px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: rgba(6, 11, 21, .7); }
.phone-field:focus-within, .password-field:focus-within { border-color: rgba(157, 122, 255, .7); box-shadow: 0 0 0 3px rgba(157, 122, 255, .1); }
input { width: 100%; min-width: 0; border: 0; outline: 0; color: #f4f6ff; background: transparent; font-size: 14px; }
.phone-field input { padding: 0 14px; direction: ltr; text-align: right; }
.phone-field input::placeholder { color: #5e697d; }
.country-code { display: grid; min-width: 76px; place-content: center; border-right: 1px solid var(--line); color: #d2d8e8; direction: ltr; font: 500 13px Arial, sans-serif; }
.country-code span { color: var(--muted); }
.password-field input { padding: 0 14px; }
.reveal-password { padding: 0 14px; border: 0; color: var(--muted); background: transparent; font-size: 11px; }
.primary-button { display: flex; width: 100%; min-height: 49px; align-items: center; justify-content: center; gap: 12px; margin-top: 25px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(100deg, #8e68eb, #7256d6); box-shadow: 0 8px 22px rgba(117, 86, 214, .2); font-size: 13px; font-weight: 600; transition: filter .2s, transform .2s; }
.primary-button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.primary-button:disabled { cursor: wait; opacity: .65; }
.primary-button span { font: 18px 'DM Sans', sans-serif; }
.message { min-height: 20px; margin: 12px 0 0; color: #ff9696; font-size: 12px; }
.secure-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; color: #737f95; font-size: 10px; }
.secure-note span { color: #7bb9a2; font-size: 9px; }
.page-footer { margin: 23px 0 0; color: #606b80; text-align: center; font: 9px Arial, sans-serif; letter-spacing: .16em; }
.page-footer span { padding: 0 5px; color: #9d7aff; }
.dashboard-card { width: min(100%, 720px); margin-inline: 50%; padding: 30px; transform: translateX(50%); }
.dashboard-header, .panel-heading, .status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dashboard-actions { display: flex; align-items: center; gap: 8px; }
.dashboard-actions a { display: inline-flex; align-items: center; text-decoration: none; }
.dashboard-header .eyebrow { margin-top: 0; }
.dashboard-header h1 { font-size: 25px; }
.dashboard-header .intro { margin: 7px 0 0; }
.dashboard-header strong { color: #dde3f2; font-family: 'DM Sans', sans-serif; }
.secondary-button, .copy-button { min-height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; color: #cbd2e2; background: rgba(255, 255, 255, .025); font-size: 11px; }
.secondary-button:hover, .copy-button:hover { border-color: rgba(157, 122, 255, .5); color: white; }
.status-row { justify-content: flex-start; flex-wrap: wrap; margin: 24px 0 14px; }
.status-pill { padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; color: #9da8bc; background: rgba(255, 255, 255, .03); font-size: 11px; }
.status-active { border-color: rgba(91, 190, 149, .25); color: #78d3ab; background: rgba(60, 161, 119, .09); }
.status-warning { border-color: rgba(237, 180, 87, .25); color: #e9bb72; background: rgba(193, 133, 41, .09); }
.status-danger { border-color: rgba(235, 103, 115, .25); color: #ed8991; background: rgba(188, 66, 78, .09); }
.status-matched { border-color: rgba(91, 190, 149, .25); color: #78d3ab; background: rgba(60, 161, 119, .09); }
.status-mismatch, .status-unavailable { border-color: rgba(235, 103, 115, .25); color: #ed8991; background: rgba(188, 66, 78, .09); }
.updated-at { color: var(--muted); font-size: 10px; }
.secret-panel { margin-top: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: rgba(5, 9, 17, .32); }
.identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.identity-item { min-width: 0; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, .055); border-radius: 8px; background: rgba(0, 0, 0, .13); }
.identity-item span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.identity-item strong { display: block; overflow-wrap: anywhere; color: #e0d6ff; font: 500 12px/1.5 Arial, Tahoma, sans-serif; }
.match-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.match-item { padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 10px; }
.match-ok { border-color: rgba(91, 190, 149, .25); color: #78d3ab; }
.match-failed { border-color: rgba(235, 103, 115, .25); color: #ed8991; }
.identity-checked { margin: 12px 0 0; color: var(--muted); font-size: 10px; }
.token-log-list { max-height: 280px; overflow: auto; margin-top: 12px; }
.token-log-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid rgba(255, 255, 255, .055); }
.token-log-row:last-child { border-bottom: 0; }
.token-log-state { font-size: 10px; }
.token-log-message { color: #b8c1d3; font-size: 10px; overflow-wrap: anywhere; }
.token-log-row time { color: var(--muted); font: 10px Arial, sans-serif; direction: ltr; }
.panel-heading .eyebrow { margin: 0 0 3px; font-size: 9px; }
.panel-heading h2 { margin: 0; font-size: 15px; font-weight: 500; }
.secret-value { overflow-wrap: anywhere; margin: 14px 0; padding: 13px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; color: #c9bbf5; background: rgba(0, 0, 0, .2); font: 11px/1.7 Consolas, monospace; white-space: pre-wrap; }
.masked { filter: blur(5px); user-select: none; }
.cookie-list { max-height: 300px; overflow: auto; margin: 14px 0; border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; }
.cookie-row { display: grid; grid-template-columns: minmax(90px, 150px) 1fr; gap: 12px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .055); font-size: 10px; }
.cookie-row:last-child { border-bottom: 0; }
.cookie-name { color: #9ea9bd; overflow-wrap: anywhere; }
.cookie-content { overflow-wrap: anywhere; color: #d5cafa; font: 10px/1.6 Consolas, monospace; }
.copy-button { min-height: 31px; color: var(--accent-bright); }
.warning-note { margin: 15px 0 0; color: #efa0a5; font-size: 11px; }
.dashboard-footer { margin-top: 17px; color: #748097; font-size: 10px; text-align: center; }
.live-shell { width: min(100% - 32px, 860px); padding-top: 5vh; }
.live-card { width: 100%; margin: 0; padding: 30px; transform: none; }
.back-link { display: inline-flex; align-items: center; color: #cbd2e2; text-decoration: none; }
.live-toolbar, .live-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.live-toolbar { margin: 24px 0 10px; }
.live-indicator { display: flex; align-items: center; gap: 8px; color: #8bd9b3; font-size: 11px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #60cf98; box-shadow: 0 0 12px rgba(96, 207, 152, .65); }
.live-state-connected { color: #8bd9b3; }
.live-state-error, .live-error { color: #ed8991; }
.live-error { padding: 11px 13px; border: 1px solid rgba(235, 103, 115, .2); border-radius: 8px; background: rgba(188, 66, 78, .08); font-size: 11px; }
.live-section { margin-top: 16px; padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: rgba(5, 9, 17, .32); }
.live-section-heading .eyebrow { margin: 0 0 4px; font-size: 9px; }
.live-section-heading h2 { margin: 0; font-size: 16px; font-weight: 500; }
.leaderboard-section { padding: 15px 19px; }
.leaderboard-toggle { cursor: pointer; list-style: none; }
.leaderboard-toggle::-webkit-details-marker { display: none; }
.leaderboard-toggle > span:first-child { display: grid; gap: 4px; }
.leaderboard-title { color: #e5e9f3; font-size: 14px; font-weight: 500; }
.leaderboard-toggle-meta { display: flex; align-items: center; gap: 10px; }
.leaderboard-chevron { width: 8px; height: 8px; border-right: 1px solid #a98bff; border-bottom: 1px solid #a98bff; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.leaderboard-section[open] .leaderboard-chevron { transform: rotate(225deg) translate(-2px, -1px); }
.leaderboard-section .rank-list { margin-top: 12px; }
.live-count { color: var(--muted); font-size: 10px; }
.balance-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.balance-card { display: flex; min-height: 82px; flex-direction: column; justify-content: space-between; gap: 12px; padding: 13px 11px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 9px; background: rgba(255, 255, 255, .018); }
.balance-card span, .game-detail span { color: var(--muted); font-size: 10px; }
.balance-card strong { color: #e2e7f2; font: 600 18px Arial, sans-serif; direction: ltr; text-align: right; }
.balance-primary { border-color: rgba(157, 122, 255, .2); background: rgba(157, 122, 255, .06); }
.balance-primary strong { color: #c1aaff; }
.balance-country strong { color: #91dbb4; }
.rank-list { margin-top: 12px; }
.rank-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 8px; border-bottom: 1px solid rgba(255, 255, 255, .055); }
.rank-row:last-child { border-bottom: 0; }
.rank-position { color: #8691a7; font: 600 13px Arial, sans-serif; direction: ltr; }
.rank-details, .rank-value { display: grid; gap: 4px; min-width: 0; }
.rank-details strong { overflow: hidden; color: #e5e9f3; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.rank-details span, .rank-diamond-label { color: var(--muted); font: 10px Arial, sans-serif; }
.rank-value { justify-items: end; }
.rank-diamonds { color: #c2aaff; font: 600 13px Arial, sans-serif; direction: ltr; }
.rank-top-1 .rank-position { color: #f1cc7c; }
.rank-top-2 .rank-position { color: #c4cee0; }
.rank-top-3 .rank-position { color: #d8a17c; }
.food-heat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.food-heat-card { display: grid; gap: 12px; padding: 12px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 9px; background: rgba(255, 255, 255, .018); }
.food-heat-red { border-color: rgba(236, 117, 126, .26); background: rgba(188, 66, 78, .055); }
.food-heat-blue { border-color: rgba(106, 160, 242, .26); background: rgba(67, 117, 191, .06); }
.food-heat-card > strong { color: #e2d8ff; font-size: 11px; font-weight: 500; }
.food-heat-stats { display: flex; justify-content: space-between; gap: 6px; color: var(--muted); font: 10px Arial, Tahoma, sans-serif; }
.food-heat-stats span:last-child { color: #c1aaff; }
.food-heat-legend { margin: 9px 0 0; color: var(--muted); font-size: 10px; }
.stage-banner { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 16px; padding: 15px 16px; border: 1px solid rgba(157, 122, 255, .2); border-radius: 10px; background: linear-gradient(100deg, rgba(157, 122, 255, .09), rgba(96, 207, 152, .035)); }
.stage-type-wrap { display: flex; align-items: center; gap: 10px; color: #c9b8ff; }
.stage-type-wrap strong { font: 600 17px Arial, sans-serif; direction: ltr; }
.stage-clock { display: flex; align-items: baseline; gap: 7px; }
.stage-clock strong { color: #91dbb4; font: 600 23px Arial, sans-serif; direction: ltr; }
.stage-clock span, .phase-config { color: var(--muted); font-size: 10px; }
.game-details { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.phase-config { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 13px; }
.phase-config strong { color: #dce2ef; font: 600 11px Arial, sans-serif; direction: ltr; }
.game-detail { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; }
.game-detail strong { color: #e2d8ff; font: 600 14px Arial, sans-serif; direction: ltr; text-align: right; }
.round-sequence-label { margin: 16px 0 9px; color: var(--muted); font-size: 10px; }
.round-sequence { display: flex; flex-wrap: wrap; gap: 8px; direction: ltr; }
.sequence-item { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: #d7dced; background: rgba(255, 255, 255, .035); font: 600 12px Arial, sans-serif; }
.sequence-red { border-color: rgba(236, 117, 126, .22); color: #ee979d; background: rgba(188, 66, 78, .08); }
.sequence-blue { border-color: rgba(106, 160, 242, .22); color: #8fbbfa; background: rgba(67, 117, 191, .09); }
.live-sequence-bar { position: sticky; z-index: 5; bottom: 10px; margin-top: 16px; padding: 13px 15px 12px; border: 1px solid rgba(157, 122, 255, .24); border-radius: 13px; background: rgba(13, 19, 32, .96); box-shadow: 0 12px 36px rgba(0, 0, 0, .4); backdrop-filter: blur(14px); }
.sequence-bar-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sequence-bar-header .eyebrow { margin: 0 0 3px; font-size: 8px; }
.sequence-bar-header strong { color: #e9e0ff; font-size: 11px; font-weight: 500; }
.sequence-bar-header > span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.own-sequence-list { display: flex; gap: 7px; overflow-x: auto; padding: 10px 1px 3px; scrollbar-color: rgba(157, 122, 255, .4) transparent; scrollbar-width: thin; }
.own-sequence-chip { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; flex: 0 0 auto; min-width: 81px; gap: 2px 7px; align-items: center; padding: 6px 9px; border: 1px solid rgba(157, 122, 255, .16); border-radius: 8px; background: rgba(157, 122, 255, .055); }
.own-sequence-chip > strong { color: #c7b4ff; font: 600 13px Arial, sans-serif; direction: ltr; }
.own-sequence-chip > span { color: #dbe1ee; font-size: 9px; white-space: nowrap; }
.own-sequence-chip > small { grid-column: 1 / -1; color: #758198; font: 8px Arial, sans-serif; direction: ltr; }
.own-sequence-empty { padding: 8px 2px; color: var(--muted); font-size: 10px; }
.hidden { display: none !important; }
@media (max-width: 560px) {
  .shell { width: min(100% - 24px, 440px); padding-top: 5vh; }
  .login-card { padding: 30px 23px; }
  .dashboard-card { padding: 22px 16px; }
  .dashboard-header { align-items: flex-start; }
  .dashboard-header h1 { font-size: 21px; }
  .dashboard-header .secondary-button { flex: 0 0 auto; }
  .dashboard-actions { flex-direction: column; align-items: stretch; }
  .dashboard-actions .secondary-button { white-space: nowrap; }
  .cookie-row { grid-template-columns: 95px 1fr; gap: 8px; }
  .live-card { padding: 22px 15px; }
  .live-section { padding: 15px 12px; }
  .leaderboard-section { padding: 13px 12px; }
  .balance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .balance-primary { grid-column: 1 / -1; }
  .food-heat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-sequence-bar { bottom: 6px; padding: 11px 10px 9px; }
  .game-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rank-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; }
}