@font-face { font-family: "Montserrat"; src: url("./fonts/montserrat-variable.ttf") format("truetype"); font-style:normal; font-weight:100 900; font-display:swap; }
@font-face { font-family: "Montserrat"; src: url("./fonts/montserrat-italic-variable.ttf") format("truetype"); font-style:italic; font-weight:100 900; font-display:swap; }

.admin-tournament-preview-entry{width:100%;margin:-6px 0 18px;padding:13px 16px;border:1px solid #b69a42;border-radius:13px;background:#d2b84724;color:#f2db72;font:inherit;font-size:12px;font-weight:800;text-align:left;cursor:pointer}.tournament-demo-banner{margin:0 0 12px;padding:12px 15px;border:1px solid #d7b746;border-radius:12px;background:#d7b74622;color:#f7df79;font-size:11px;font-weight:800;line-height:1.45}

:root {
  color-scheme: dark;
  --yellow: #ffd840;
  --yellow-strong: #ffd840;
  --accent: #ffd840;
  --accent-strong: #ffd840;
  --accent-ink: #111510;
  --ink: #f4f5f1;
  --muted: #929993;
  --canvas: #0d1110;
  --card: #161e1b;
  --line: #2e3a35;
  --topbar: rgba(13, 17, 16, .82);
  --nav-bg: rgba(13, 17, 16, .96);
  --task-bg: #ffd840;
  --task-ink: #111510;
  --task-muted: #57533b;
  --task-track: rgba(17, 21, 16, .2);
  --task-progress: #111510;
  --task-button: #101411;
  --stat-accent-bg: #ffd840;
  --stat-accent-ink: #111510;
  --stat-balance-bg: #20271c;
  --stat-balance-line: #4b512a;
  --success: #24c47e;
  --danger: #c74332;
  --radius: 26px;
  --shadow: none;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="business"] {
  --yellow: #ffd840;
  --yellow-strong: #ffd840;
  --accent: #ffd840;
  --accent-strong: #ffd840;
  --accent-ink: #0d0e0d;
  --ink: #f6f4ed;
  --muted: #a09d95;
  --canvas: #090b0a;
  --card: #131614;
  --line: #373931;
  --topbar: rgba(9, 11, 10, .84);
  --nav-bg: rgba(9, 11, 10, .97);
  --task-bg: #ffd840;
  --task-ink: #10110f;
  --task-muted: #51462d;
  --task-track: rgba(16, 17, 15, .22);
  --task-progress: #11120f;
  --task-button: #0b0d0b;
  --stat-accent-bg: #1b1a14;
  --stat-accent-ink: #ffd840;
  --stat-balance-bg: #141612;
  --stat-balance-line: #645730;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  overflow-x: clip;
  background:
    radial-gradient(circle at 92% 0%, rgba(1, 61, 37, .32), transparent 34rem),
    var(--canvas);
  color: var(--ink);
}

:root[data-theme="business"] body {
  background:
    radial-gradient(circle at 92% 0%, rgba(129, 98, 25, .18), transparent 32rem),
    var(--canvas);
}

body {
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

button, input, textarea { font: inherit; }
button { color: inherit; }
.ui-icon { width: 24px; height: 24px; display: block; flex: 0 0 auto; }

.app-shell {
  width: min(100%, 540px);
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

/* Turnover tournament is visually and functionally separate from Checkers contests. */
.tournament-entry{position:relative;width:100%;min-height:165px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;margin:0 0 18px;padding:22px;border:1px solid #b99a35;border-radius:23px;background:radial-gradient(circle at 94% 20%,#ac843c8a,transparent 36%),linear-gradient(135deg,#2f2919,#101815 73%);color:#f8f2d8;text-align:left;overflow:hidden;cursor:pointer;box-shadow:0 16px 40px #0004}.tournament-entry:before{content:"♛";position:absolute;right:16px;top:-42px;color:#f6d9662a;font-size:180px;line-height:1;transform:rotate(-17deg)}.tournament-entry-kicker,.tournament-small-label{position:relative;color:#f2d35a;font-size:10px;font-weight:900;letter-spacing:.16em}.tournament-entry>strong{position:relative;max-width:80%;font-size:24px;line-height:1.1;letter-spacing:-.05em}.tournament-entry-bottom{position:relative;width:100%;display:flex;align-items:end;justify-content:space-between;gap:10px;color:#ccc9b6;font-size:11px}.tournament-entry-bottom b{color:#f4d750;white-space:nowrap}.tournament-hero{position:relative;min-height:285px;display:flex;flex-direction:column;align-items:flex-start;padding:24px;border:1px solid #b49533;border-radius:24px;background:radial-gradient(circle at 100% 0,#a87b32a6,transparent 38%),linear-gradient(145deg,#2f2b1d,#111714 72%);overflow:hidden}.tournament-hero:after{content:"♛";position:absolute;right:-8px;top:35px;color:#f9de6942;font-size:175px;line-height:1;transform:rotate(-14deg)}.tournament-hero>span{position:relative;z-index:1;color:#efd45d;font-size:10px;font-weight:900;letter-spacing:.12em}.tournament-hero h1{position:relative;z-index:1;max-width:82%;margin:24px 0 9px;font-size:35px;line-height:1.04;letter-spacing:-.06em}.tournament-hero p{position:relative;z-index:1;max-width:78%;margin:0 0 28px;color:#d1d0bd;font-size:12px;line-height:1.5}.tournament-hero>strong{position:relative;z-index:1;font-size:29px;letter-spacing:-.04em}.tournament-hero>small{position:relative;z-index:1;color:#b9b69f;font-size:10px}.tournament-section-title{margin:28px 0 12px}.tournament-section-title span{color:#e9cc55;font-size:10px;font-weight:900;letter-spacing:.15em}.tournament-section-title h2{margin:5px 0 0;font-size:23px;letter-spacing:-.04em}.tournament-leagues{display:grid;grid-template-columns:1fr 1fr;gap:9px}.tournament-leagues button{min-height:88px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:13px;border:1px solid #485049;border-radius:15px;background:linear-gradient(145deg,#242d28,#111916);color:#f3f4ee;text-align:left;cursor:pointer}.tournament-leagues button.yellow{background:linear-gradient(145deg,#46401e,#171b16)}.tournament-leagues button.black{background:linear-gradient(145deg,#343a3d,#111618)}.tournament-leagues button.active{border-color:#e5c846;box-shadow:inset 0 0 0 1px #e5c84688,0 0 23px #e8c43b1a}.tournament-leagues small{color:#ebce5b;font-size:9px;font-weight:900;letter-spacing:.1em}.tournament-leagues strong{font-size:13px}.tournament-board{margin-top:12px;border:1px solid #35403a;border-radius:17px;background:#121b17;overflow:hidden}.tournament-board header{display:flex;justify-content:space-between;gap:10px;padding:16px;border-bottom:1px solid #344039;color:#dfce6c;font-size:10px;font-weight:900;letter-spacing:.06em}.tournament-board header span:last-child{color:#8c9b90}.tournament-driver{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;padding:13px 15px;border-bottom:1px solid #29352e}.tournament-driver:last-child{border:0}.tournament-driver>b{color:#ecd05b;font-size:14px}.tournament-driver>span{min-width:0;display:grid;gap:4px}.tournament-driver span strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.tournament-driver small{color:#96a49a;font-size:9px}.tournament-driver>strong{font-size:11px;white-space:nowrap}.tournament-empty{margin:0;padding:25px;color:#96a49a;font-size:12px;text-align:center}.tournament-myplace{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding:17px;border:1px solid #a18637;border-radius:14px;background:#43391c66}.tournament-myplace>span{color:#f2d66a;font-size:10px;font-weight:900;letter-spacing:.08em}.tournament-myplace>strong{text-align:right;font-size:20px}.tournament-myplace small{display:block;color:#d3c99b;font-size:10px;font-weight:500}.tournament-nearby{margin-top:22px}.tournament-nearby h2{font-size:18px}.tournament-nearby>div{display:grid;grid-template-columns:24px 1fr auto;gap:9px;padding:10px 12px;border-bottom:1px solid #29352e;font-size:11px}.tournament-nearby>div.me{border-radius:9px;background:#c9ab3433;color:#ffdf6b}.tournament-nearby>div strong{font-size:11px}.tournament-personal{margin-top:26px;padding:22px;border:1px solid #65532b;border-radius:20px;background:radial-gradient(circle at 100% 0,#78613155,transparent 48%),#171d17}.tournament-personal h2{margin:15px 0 5px;font-size:36px;letter-spacing:-.05em}.tournament-personal p{color:#aab4a8;font-size:12px;line-height:1.5}.tournament-step-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:22px 0 15px}.tournament-step-strip span{display:grid;gap:4px;padding:11px 6px;border:1px solid #404c3d;border-radius:10px;color:#a4aea2;text-align:center}.tournament-step-strip span.reached{border-color:#d6b83d;background:#e1c43b1f;color:#f3da6b}.tournament-step-strip b{font-size:10px}.tournament-step-strip small{font-size:9px}.tournament-personal>small{color:#939f91;font-size:10px;line-height:1.5}.tournament-disclaimer{margin:17px 0;color:#91a093;font-size:10px;line-height:1.5}
.tournament-goal{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 13px;padding:11px 12px;border:1px solid #776333;border-radius:10px;background:#dcc34219}.tournament-goal span{color:#c6c3a1;font-size:10px}.tournament-goal strong{color:#f6da69;font-size:15px;white-space:nowrap}
.tournament-entry{min-height:184px;gap:25px}.tournament-entry:before{right:8px;top:-52px;opacity:.6}.tournament-entry-metrics{position:relative;z-index:1;width:100%;display:grid;grid-template-columns:.8fr .9fr 1.5fr;gap:8px}.tournament-entry-metrics>span{min-width:0;display:flex;flex-direction:column;gap:6px}.tournament-entry-metrics>span+span{padding-left:12px;border-left:1px solid #e5ce5c42}.tournament-entry-metrics small{color:#c9c5a9;font-size:9px;font-weight:800;letter-spacing:.12em}.tournament-entry-metrics strong{overflow:hidden;color:#fff8dc;font-size:clamp(19px,5.3vw,30px);font-weight:850;line-height:1;letter-spacing:-.06em;white-space:nowrap;text-overflow:ellipsis}.tournament-entry-metrics>span:first-child strong{color:#f5d55f}.tournament-entry-bottom>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.boot-screen {
  min-height: 100vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  color: var(--muted);
}

.brand-mark {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.brand-mark img { width: 100%; height: 100%; display: block; }
.brand-logo-wide { width: 180px; aspect-ratio: 8 / 3; display: block; flex: 0 0 auto; }
.brand-logo-wide img { width: 100%; height: 100%; display: block; object-fit: contain; }
.boot-logo { width: 220px; }

.loader {
  width: 90px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #dddcd6;
}

.loader span {
  display: block;
  width: 45%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-strong);
  animation: loading 1.1s ease-in-out infinite alternate;
}

@keyframes loading { to { transform: translateX(122%); } }

.topbar {
  position: sticky;
  z-index: 5;
  top: 0;
  padding: calc(9px + env(safe-area-inset-top)) 20px 8px;
  background: var(--topbar);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark { display: flex; align-items: center; }
.wordmark .topbar-logo { width: 142px; }

.message-permission-banner {
  position: sticky;
  z-index: 6;
  top: calc(55px + env(safe-area-inset-top));
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 14px 8px;
  padding: 11px 11px 11px 12px;
  border: 1px solid rgba(17, 21, 16, .18);
  border-radius: 18px;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .42);
}
.message-permission-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(17, 21, 16, .12); }
.message-permission-icon .ui-icon { width: 21px; height: 21px; }
.message-permission-banner div { min-width: 0; }
.message-permission-banner strong, .message-permission-banner div > span { display: block; }
.message-permission-banner strong { font-size: 14px; line-height: 1.2; }
.message-permission-banner div > span { margin-top: 2px; font-size: 10px; line-height: 1.3; opacity: .72; }
.message-permission-banner button { min-height: 38px; padding: 8px 12px; border: 0; border-radius: 12px; background: var(--accent-ink); color: #fff; font-size: 11px; font-weight: 850; cursor: pointer; }
.message-permission-banner button:disabled { cursor: wait; opacity: .62; }

.icon-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  cursor: pointer;
}
.icon-button .ui-icon { width: 19px; height: 19px; margin: auto; }

.content { padding: 4px 20px 28px; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
h1 { margin: 0; font-size: clamp(34px, 10vw, 46px); line-height: 1.02; letter-spacing: -0.055em; font-weight: 750; }
h2 { margin: 0; font-size: 24px; letter-spacing: -0.035em; }
h3 { margin: 0; font-size: 17px; }
p { line-height: 1.45; }

.hero { position: relative; padding: 24px 2px 28px; }
.hero p { color: var(--muted); margin: 12px 0 0; max-width: 390px; }
.hero-avatar { position: absolute; top: 20px; right: 0; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 24px; font-weight: 850; }
.hero-status { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; padding: 10px 14px; border-radius: 999px; background: #103524; color: #48d99a; font-size: 13px; font-weight: 750; }
.hero-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2bce87; }
.hero-compact { padding: 13px 2px 15px; }
.hero-compact .eyebrow { margin-bottom: 5px; font-size: 10px; }
.hero-compact h1 { font-size: clamp(27px, 7.5vw, 34px); line-height: 1; letter-spacing: -0.045em; }

.card {
  position: relative;
  overflow: hidden;
  padding: 22px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.task-card {
  border: 0;
  padding: 28px 24px 24px;
  background: var(--task-bg);
  color: var(--task-ink);
}

.task-card-compact { padding: 19px 20px 18px; margin-bottom: 0; border-radius: 23px; }
.task-card-compact .task-title { margin: 10px 0 6px; font-size: 25px; }
.task-card-compact .task-copy { margin-bottom: 13px; font-size: 14px; line-height: 1.4; }
.task-card-compact .progress-track { height: 9px; margin: 6px 0; }
.task-card-compact .card-link { min-height: 44px; margin-top: 13px; padding: 11px 14px; }
.recent-goal-card { margin-top: 14px; background: #f7f7f3; box-shadow: none; }
.recent-goal-card .card-label { color: var(--muted); }
.recent-goal-card h2 { margin: 9px 0 5px; font-size: 18px; }
.recent-goal-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.recent-goal-card ul { margin: 10px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.5; }

.task-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -75px;
  top: -75px;
  border: 32px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
}

.card-label { color: var(--task-muted); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .11em; }
.data-status-banner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(164, 105, 0, .2);
  border-radius: 14px;
  background: #fff2c9;
  color: #503600;
  font-size: 13px;
  line-height: 1.35;
}
.data-status-banner strong { font-size: 14px; }
.task-title { max-width: 88%; margin: 16px 0 10px; font-size: 29px; line-height: 1.08; letter-spacing: -0.045em; }
.task-copy { position: relative; z-index: 1; max-width: 100%; color: #3d3d31; margin: 0 0 20px; font-size: 15px; font-weight: 560; }
.task-copy-target { color: var(--task-ink); font-weight: 750; }
.task-inline-checkers { margin-inline: .08em; color: var(--task-ink); font-weight: 900; }
.task-inline-checkers .checker-symbol { width: 1em; height: 1em; }
.stage-item small > i { margin: 0 1px; font-style: normal; opacity: .55; }
.progress-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--task-muted); }
.progress-meta strong { color: var(--task-ink); }
.progress-percent { color: var(--task-muted); font-size: 13px; }
.task-progress-footer { min-height: 31px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.task-total-reward { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 999px; background: rgba(17, 21, 16, .1); color: var(--task-ink); font-size: 17px; line-height: 1; white-space: nowrap; }
.task-total-reward > i { font-style: normal; opacity: .5; }

.progress-track {
  height: 11px;
  margin: 9px 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--task-track);
}

.progress-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--task-progress);
  transition: width .55s ease;
}

.card-link {
  width: 100%;
  margin-top: 20px;
  padding: 15px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--task-button);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.stat-card {
  min-height: 151px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  cursor: pointer;
  text-align: left;
}
.stat-card > * { position: relative; z-index: 1; }
.stat-card .stat-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 14px;
  display: grid;
  place-items: center;
  border-radius: 14px;
}
.stat-card .stat-icon .ui-icon { width: 21px; height: 21px; }
.stat-card small { margin-bottom: 5px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.stat-card strong { display: block; font-size: 30px; line-height: 1; letter-spacing: -0.05em; }
.stat-card .stat-note { margin-top: auto; padding-top: 12px; font-size: 11px; }
.checkers-stat {
  border-color: #55451c;
  background:
    linear-gradient(180deg, rgba(7, 9, 8, .18) 8%, rgba(7, 9, 8, .94) 100%),
    url("./checkers.webp") 54% 54% / cover no-repeat;
  color: #fff;
}
.checkers-stat .stat-icon { background: rgba(255, 216, 64, .12); }
.checkers-stat > small { color: var(--accent); }
.checkers-stat strong { font-size: 30px; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.checkers-stat .stat-note { color: rgba(255, 255, 255, .78); }
.balance-stat {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 216, 64, .19), transparent 38%),
    linear-gradient(145deg, var(--stat-balance-bg) 20%, #101612 100%);
  border-color: var(--stat-balance-line);
}
.balance-stat .stat-icon { background: rgba(255, 216, 64, .12); color: var(--accent); }
.balance-stat small { color: var(--accent); }
.balance-stat > strong { max-width: 100%; font-size: clamp(18px, 5vw, 24px); font-variant-numeric: tabular-nums; white-space: nowrap; }
.balance-stat .stat-note { color: var(--muted); }
.stat-watermark { position: absolute; z-index: 0; top: 7px; right: -17px; color: var(--accent); opacity: .075; transform: rotate(-9deg); }
.stat-watermark .ui-icon { width: 108px; height: 108px; stroke-width: .9; }

.profile-status-banner {
  position: fixed;
  z-index: 40;
  top: calc(59px + env(safe-area-inset-top));
  left: 50%;
  width: min(calc(100% - 28px), 510px);
  min-height: 38px;
  padding: 9px 14px;
  transform: translate(-50%, -18px);
  border: 1px solid rgba(72, 217, 154, .28);
  border-radius: 13px;
  background: rgba(16, 53, 36, .96);
  color: #62e2aa;
  box-shadow: 0 10px 32px rgba(0, 0, 0, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  backdrop-filter: blur(14px);
}
.profile-status-banner.visible { opacity: 1; transform: translate(-50%, 0); }

.ui-icon.spin { animation: driver-refresh-spin .8s linear infinite; }
.icon-button:disabled { cursor: wait; opacity: .7; }
@keyframes driver-refresh-spin { to { transform: rotate(360deg); } }

.quick-list { display: grid; gap: 12px; }
.list-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 68px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--card);
  text-align: left;
  cursor: pointer;
}
.list-button .list-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: #26302c; }
.list-button .list-icon .ui-icon { width: 23px; height: 23px; }
.list-button span:nth-child(2) { flex: 1; font-weight: 700; }
.list-button span:nth-child(2) strong, .list-button span:nth-child(2) small { display: block; }
.list-button span:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 600; }
.chevron { width: 20px; height: 20px; color: #aaa9a3; }

.admin-preview-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 4px;
  padding: 11px 12px;
  border: 1px solid rgba(255, 216, 64, .38);
  border-radius: 15px;
  background: rgba(255, 216, 64, .1);
}
.admin-preview-banner div, .admin-preview-banner strong, .admin-preview-banner span { min-width: 0; display: block; }
.admin-preview-banner strong { color: var(--accent); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.admin-preview-banner span { margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.admin-preview-banner button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 11px; font-weight: 800; cursor: pointer; }

.bottom-nav {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 0;
  width: min(100%, 540px);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 11px 8px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
}

.nav-button {
  min-height: 55px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: none;
  color: #8a8984;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.nav-button .nav-icon { width: 25px; height: 25px; stroke-width: 1.75; }
.nav-button span { line-height: 1; }
.nav-button.active { color: var(--accent); }

.screen-title { padding: 13px 2px 15px; }
.screen-title .eyebrow { margin-bottom: 5px; font-size: 10px; }
.screen-title h1 { font-size: clamp(27px, 7.5vw, 34px); line-height: 1; letter-spacing: -0.045em; }
.screen-title p { max-width: 440px; margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.screen-title.compact-title { padding-top: 3px; }

.finance-balance { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; align-items: center; background: radial-gradient(circle at 90% 5%, rgba(255,216,64,.17), transparent 43%), var(--card); }
.finance-balance > span { grid-row: 1 / 4; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,216,64,.13); color: var(--accent); }
.finance-balance > span .ui-icon { width: 23px; height: 23px; }
.finance-balance small { color: var(--muted); }
.finance-balance strong { font-size: 36px; line-height: 1.08; letter-spacing: -.04em; }
.finance-balance p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.finance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 16px; }
.finance-grid .card { min-height: 108px; margin: 0; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 18px; }
.finance-grid small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.finance-grid strong { font-size: 22px; letter-spacing: -.035em; }
.preview-readonly { border-color: rgba(255,216,64,.3); background: rgba(255,216,64,.07); }
.preview-readonly p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.preview-readonly.compact { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 12px; border-radius: 13px; font-size: 12px; }
.preview-readonly.compact strong { color: var(--accent); }
.preview-readonly.compact span { color: var(--muted); }

.stage-list { margin: 16px 0 0; padding: 0; list-style: none; }
.stage-item { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid rgba(22, 25, 20, .18); }
.stage-dot { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(22, 25, 20, .16); color: #55533c; font-size: 12px; font-weight: 800; }
.stage-item.done .stage-dot { background: var(--success); color: #fff; }
.stage-item.active .stage-dot { background: #171a16; color: var(--accent); }
.stage-item small { display: block; margin-top: 4px; color: #5f5c42; }
.stage-item small .checker-amount { display: inline-flex; }

.checkers-visual { min-height: 245px; padding: 0; background: #151613; color: #fff; }
.checkers-visual img { width: 100%; height: 245px; display: block; object-fit: cover; opacity: .72; }
.checkers-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; background: linear-gradient(transparent 20%, rgba(0,0,0,.9)); }
.checkers-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-bottom: 7px; padding: 7px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 850; }
.checkers-badge .ui-icon { width: 17px; height: 17px; }
.checkers-value { font-size: 44px; font-weight: 900; letter-spacing: -0.06em; }
.info-note { border: 1px solid #5b5430; background: #2b2818; box-shadow: none; }

.settings-entry {
  width: 100%; min-height: 72px; margin: 0 0 16px; padding: 12px 15px;
  display: grid; grid-template-columns: 44px 1fr 20px; align-items: center; gap: 13px;
  border: 1px solid rgba(255, 216, 64, .3); border-radius: 19px;
  background: linear-gradient(135deg, rgba(255, 216, 64, .14), rgba(255, 216, 64, .035));
  text-align: left; cursor: pointer;
}
.settings-entry .list-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--accent); color: var(--accent-ink); }
.settings-entry .list-icon .ui-icon { width: 23px; height: 23px; }
.settings-entry span:nth-child(2) { min-width: 0; }
.settings-entry strong, .settings-entry small { display: block; }
.settings-entry strong { font-size: 16px; }
.settings-entry small { margin-top: 3px; color: var(--muted); font-size: 11px; }

.vehicle-change-card { padding: 20px; }
.vehicle-change-card .eyebrow { margin-bottom: 7px; font-size: 10px; }
.vehicle-change-card > p:not(.eyebrow) { margin: 8px 0 16px; color: var(--muted); font-size: 13px; }
.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 13px; }
.upload-tile {
  min-height: 128px; padding: 15px 11px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 7px; border: 1px dashed #52605a;
  border-radius: 17px; background: rgba(255, 255, 255, .025); text-align: center; cursor: pointer;
}
.upload-tile.selected { border-style: solid; border-color: var(--accent); background: rgba(255, 216, 64, .075); }
.upload-tile > .ui-icon { width: 27px; height: 27px; color: var(--accent); }
.upload-tile strong { font-size: 12px; }
.upload-tile span { max-width: 100%; color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-tile input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.settings-card { padding: 19px; }
.settings-card-head { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 13px; margin-bottom: 16px; }
.settings-card-head h2 { font-size: 20px; }
.settings-card-head p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.settings-card-head p strong { color: var(--ink); }
.settings-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: rgba(255, 216, 64, .12); color: var(--accent); }
.settings-icon .ui-icon { width: 24px; height: 24px; }
.tariff-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 12px; }
.tariff-option input { position: absolute; opacity: 0; pointer-events: none; }
.tariff-option span { min-height: 47px; padding: 11px 12px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 14px; background: #202824; color: var(--muted); font-size: 13px; font-weight: 800; cursor: pointer; }
.tariff-option input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.settings-footnote { display: block; margin-top: 11px; color: var(--muted); font-size: 10px; text-align: center; }
.settings-empty { padding: 15px; border-radius: 14px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 12px; }
.switch-row { width: 100%; min-height: 51px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 15px; background: #202824; cursor: pointer; }
.switch-row > span { font-size: 13px; font-weight: 800; }
.switch { width: 48px; height: 28px; padding: 3px; display: block; border-radius: 999px; background: #4a514d; transition: .2s ease; }
.switch b { width: 22px; height: 22px; display: block; border-radius: 50%; background: #fff; transition: transform .2s ease; }
.switch.on { background: var(--accent); }
.switch.on b { transform: translateX(20px); background: var(--accent-ink); }
.phone-card .settings-card-head { margin-bottom: 12px; }
.vk-message-settings-card .settings-card-head { margin-bottom: 12px; }
.vk-message-status { display: grid; gap: 3px; margin-bottom: 12px; padding: 12px 13px; border-radius: 14px; background: #202824; }
.vk-message-status > span { display: flex; align-items: center; gap: 8px; }
.vk-message-status i { width: 8px; height: 8px; border-radius: 50%; background: #727873; box-shadow: 0 0 0 4px rgba(114, 120, 115, .12); }
.vk-message-status.enabled i { background: var(--success); box-shadow: 0 0 0 4px rgba(36, 196, 126, .12); }
.vk-message-status strong { font-size: 13px; }
.vk-message-status small { color: var(--muted); font-size: 10px; line-height: 1.35; }
.vk-message-manage-link { width: 100%; min-height: 42px; margin-top: 8px; padding: 8px 4px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; background: transparent; color: var(--accent); font-size: 12px; font-weight: 800; text-align: left; cursor: pointer; }
.vk-message-manage-link .chevron { width: 18px; height: 18px; color: currentColor; }

.support-title { padding-bottom: 18px; }
.support-card { padding: 20px; }
.support-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.support-heading h3 { margin-bottom: 4px; }
.support-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.support-main-icon { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; background: rgba(255, 216, 64, .12); color: var(--accent); }
.support-main-icon .ui-icon { width: 26px; height: 26px; }
.support-channels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.support-channel {
  min-height: 52px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #202824;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.support-channel > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .06); color: var(--accent); }
.support-channel .ui-icon { width: 19px; height: 19px; }
.support-channel-max > span { background: var(--accent); }
.support-channel-max .max-brand-icon { width: 18px; height: 18px; object-fit: contain; }
.support-channel strong { font-size: 12px; }
.support-message-button {
  width: 100%;
  min-height: 56px;
  margin-top: 12px;
  padding: 12px 15px;
  display: grid;
  grid-template-columns: 24px 1fr 20px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 16px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}
.support-message-button > .ui-icon:first-child { width: 22px; height: 22px; }
.support-message-button .chevron { color: currentColor; }

.data-list { padding: 4px 18px; }
.data-row { display: flex; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.data-row:last-child { border-bottom: 0; }
.data-row span { color: var(--muted); }
.data-row strong { max-width: 62%; text-align: right; overflow-wrap: anywhere; }

.primary-button, .secondary-button, .danger-button {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 0;
  font-weight: 800;
  cursor: pointer;
}
.primary-button { background: var(--accent); color: var(--accent-ink); }
.login-dial-link { display: grid; place-items: center; text-decoration: none; }
.login-copy-fallback { min-height: 44px; border: 0; background: transparent; color: var(--accent); font-size: 14px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.call-number { user-select: text; -webkit-user-select: text; }
.secondary-button { background: var(--card); border: 1px solid var(--line); }
.danger-button { background: #351f1d; color: #ff9589; }
.button-stack { display: grid; gap: 10px; }

.admin-picker-close {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--card);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.admin-picker { padding-bottom: calc(30px + env(safe-area-inset-bottom)); }
.admin-search { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 14px; }
.admin-search input { min-width: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; outline: 0; background: #202824; color: var(--ink); }
.admin-search input:focus { border-color: var(--accent); }
.admin-search button { padding: 11px 14px; border: 0; border-radius: 14px; background: var(--accent); color: var(--accent-ink); font-weight: 800; cursor: pointer; }
.admin-driver-list { display: grid; gap: 9px; }
.admin-driver-card { width: 100%; margin: 0; padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; color: var(--ink); text-align: left; cursor: pointer; }
.admin-driver-card > span { min-width: 0; }
.admin-driver-card strong, .admin-driver-card small { display: block; }
.admin-driver-card > span:first-child strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.admin-driver-card small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.admin-driver-meta { text-align: right; }
.admin-driver-meta strong { color: var(--accent); font-size: 13px; }
.admin-driver-empty { display: grid; justify-items: center; gap: 14px; padding: 30px 20px; text-align: center; }
.admin-driver-empty p { margin: 0; color: var(--muted); font-size: 13px; }
.admin-picker-error { padding: 11px 13px; border-radius: 12px; background: #351f1d; color: #ff9589; font-size: 12px; }

/* The illustration extends 28px above the banner; keep a visible 16px gap after the vehicle card. */
.ip-banner { display:flex; flex-direction:column; gap:16px; width:100%; min-width:0; margin:44px 0 16px; padding:16px; border:0; border-radius:16px; background:#f0cc0a; color:#1e1e1e; cursor:pointer; text-align:left; }
.ip-banner-top { position:relative; display:flex; align-items:center; min-height:40px; padding-left:92px; }
.ip-banner-icon { position:absolute; top:-44px; left:-17px; width:109px; height:109px; overflow:hidden; border-radius:16px; }
.ip-banner-icon img { position:absolute; top:1.04%; left:-15.28%; width:130.56%; height:97.92%; max-width:none; }
.ip-banner-top strong { min-width:0; font-size:16px; line-height:normal; font-weight:700; }
.ip-banner-copy { display:block; font-size:14px; line-height:normal; font-weight:500; }
.ip-banner-cta { display:flex; align-self:stretch; align-items:center; justify-content:center; width:100%; min-height:56px; border-radius:16px; background:#1e1e1e; color:#f0cc0a; font-size:16px; font-weight:600; }
.ip-banner:focus-visible, .ip-back:focus-visible, .ip-primary:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.app-shell.ip-flow-mode { padding-bottom:0; }
.ip-page { min-height:100dvh; padding:calc(20px + env(safe-area-inset-top)) 20px calc(100px + env(safe-area-inset-bottom)); overflow-x:clip; touch-action:pan-y; background:#0d100f url('./assets/ip-opening/page-background.svg') center top / min(100%, 390px) 600px no-repeat; color:#fff; }
.ip-content { width:100%; max-width:420px; margin:0 auto; }
.ip-header { display:flex; align-items:center; gap:12px; margin-bottom:40px; font-size:16px; font-weight:500; }
.ip-preview-note { margin:-24px 0 24px; padding:9px 11px; border:1px solid #ebcf5d77; border-radius:9px; background:#ebcf5d1c; color:#f0cc0a; font-size:11px; font-weight:700; }
.ip-back { width:40px; height:40px; flex:0 0 40px; display:grid; place-items:center; padding:8px; border:1px solid #ffffff1a; border-radius:16px; background:#ffffff0d; cursor:pointer; }
.ip-back .ui-icon { width:24px; height:24px; }
.ip-intro { position:relative; display:flex; flex-direction:column; gap:16px; }
.ip-intro-heading { position:relative; min-height:80px; }
.ip-intro h1 { position:relative; z-index:1; width:min(68%, 235px); margin:0; font-size:24px; line-height:1.12; letter-spacing:-.025em; font-weight:700; }
.ip-intro h1 em { display:block; margin-top:4px; color:#f0cc0a; font-size:20px; font-style:normal; font-weight:800; }
.ip-intro-heading img { position:absolute; top:-14px; right:-26px; width:144px; height:144px; object-fit:contain; }
.ip-intro > p { position:relative; z-index:1; margin:0; font-size:14px; line-height:1.25; }
.ip-price { display:grid; gap:8px; padding:16px; border-radius:16px; background:#ffffff0d; }
.ip-price strong { font-size:20px; line-height:1.2; white-space:normal; }
.ip-price em { color:#f0cc0a; font-style:normal; font-size:24px; font-weight:800; white-space:nowrap; }
.ip-price span { color:#ffffffb3; font-size:14px; }
.ip-primary { width:100%; min-height:56px; padding:16px 24px; border:0; border-radius:16px; background:#f0cc0a; color:#1e1e1e; font-weight:600; font-size:16px; cursor:pointer; }
.ip-primary:disabled { opacity:.65; cursor:wait; }
.ip-section { margin-top:40px; }
.ip-section h2 { margin:0 0 16px; font-size:16px; font-weight:600; }
.ip-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.ip-feature { position:relative; min-width:0; min-height:122px; overflow:hidden; padding:16px; border-radius:16px; background:#ffffff0d; }
.ip-feature-number { position:absolute; top:0; right:10px; color:#f0cc0a0d; font-size:64px; font-weight:800; line-height:1; }
.ip-feature h3, .ip-feature p { position:relative; }
.ip-feature h3 { margin:0 0 8px; font-size:13px; line-height:1.2; font-weight:600; }
.ip-feature p { margin:0; font-size:11px; line-height:1.25; }
.ip-quote { position:relative; min-height:239px; display:flex; align-items:center; margin-top:40px; padding:16px 150px 16px 16px; border-radius:16px; }
.ip-quote::before { content:''; position:absolute; inset:0; border-radius:16px; background:url('./assets/ip-opening/quote-background.png') center / 124% auto no-repeat; filter:blur(1.1px); clip-path:inset(0 round 16px); }
.ip-quote::after { content:''; position:absolute; inset:0; border-radius:16px; background:linear-gradient(90deg,#0d100f 0%,#0d100f66 100%); }
.ip-quote-copy { position:relative; z-index:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.ip-quote-mark { position:absolute; display:block; width:29px; max-width:none; pointer-events:none; }
.ip-quote-mark-open { top:-6px; left:-11px; height:28px; }
.ip-quote-mark-close { top:54px; left:155px; height:26px; }
.ip-quote blockquote { position:relative; margin:0; color:#f0cc0a; font-size:16px; font-weight:700; font-style:italic; line-height:normal; }
.ip-quote p { margin:0; font-size:12px; line-height:normal; }
.ip-quote strong { padding-top:12px; border-top:1px solid #ffffff1a; font-size:12px; font-weight:600; }
.ip-quote span { margin-top:-12px; font-size:12px; line-height:normal; }
.ip-quote-photo { position:absolute; z-index:2; top:-34.67px; right:0; bottom:0; width:154px; overflow:hidden; }
.ip-quote-photo-inner { position:absolute; right:-84px; bottom:-10.16px; width:231px; height:274px; overflow:hidden; }
.ip-quote-photo-inner img { position:absolute; top:0; left:-13.58%; width:119.03%; height:100%; max-width:none; }
.ip-tags { display:flex; flex-wrap:wrap; gap:4px; }
.ip-tags span { padding:4px 8px; border-radius:4px; background:#ffffff0d; font-size:12px; line-height:1.2; font-weight:500; }
.ip-steps { margin-bottom:20px; }
.ip-step { position:relative; display:flex; align-items:center; gap:12px; min-height:56px; }
.ip-step:not(:last-child) { margin-bottom:12px; }
.ip-step:not(:last-child)::after { content:''; position:absolute; top:100%; left:27px; width:1px; height:12px; background:#f0cc0a; }
.ip-step > span { width:56px; height:56px; flex:0 0 56px; display:grid; place-items:center; border-radius:16px; background:#ffffff0d; }
.ip-step img { width:24px; height:24px; }
.ip-step p { margin:0; font-size:14px; line-height:1.25; font-weight:500; }
.ip-sticky { position:fixed; z-index:20; bottom:0; left:50%; width:min(100%,540px); padding:12px 20px calc(12px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:#0d100f; }
.ip-sticky[hidden] { display:none; }
.ip-success { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; max-width:540px; margin:auto; padding-bottom:calc(40px + env(safe-area-inset-bottom)); }
.ip-success .ip-back { position:absolute; top:calc(20px + env(safe-area-inset-top)); }
.ip-success-mark { width:66px; height:66px; display:grid; place-items:center; border-radius:50%; background:#f2d545; color:#183b27; font-size:43px; font-weight:800; }
.ip-success h1 { margin:25px 0 9px; font-size:30px; }
.ip-success p { margin:0 0 26px; color:#c1c8be; font-size:15px; line-height:1.5; }
.ip-success .ip-success-demo { margin:0 0 14px; padding:10px 12px; border:1px solid #ebcf5d77; border-radius:9px; background:#ebcf5d1c; color:#f0cc0a; font-size:13px; font-weight:700; }
@media (max-width:360px) { .ip-page { padding-left:16px; padding-right:16px; } .ip-banner-top { padding-left:80px; } .ip-banner-icon { width:100px; height:100px; } .ip-intro h1 { font-size:21px; } .ip-intro h1 em { font-size:18px; } .ip-intro-heading img { right:-20px; width:120px; height:120px; } .ip-price strong { font-size:17px; } .ip-price em { font-size:22px; } .ip-feature { padding:14px 12px; } .ip-quote { padding-right:130px; } .ip-quote-photo { width:130px; } .ip-quote blockquote { font-size:14px; } }

.app-shell.login-mode { height: 100dvh; min-height: 100dvh; padding-bottom: 0; }
.login-screen {
  height: 100dvh;
  min-height: 100dvh;
  padding: calc(18px + env(safe-area-inset-top)) 20px calc(12px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 12px;
  overflow: hidden;
}
.login-screen:focus-within { overflow-y: auto; }
.login-hero { min-width: 0; padding: 0 4px; }
.login-hero .login-logo { width: 174px; margin-bottom: 8px; }
.login-hero h1 { max-width: 430px; font-size: clamp(30px, 8.5vw, 40px); line-height: 1; }
.login-hero p { color: var(--muted); }
.login-hero .login-lead { max-width: 440px; margin: 9px 0 12px; font-size: 13px; line-height: 1.35; }
.benefit-marquee {
  width: calc(100% + 48px);
  margin-left: -24px;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-y;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.benefit-marquee.is-dragging { cursor: grabbing; }
.benefit-track {
  width: max-content;
  display: flex;
  gap: 7px;
  will-change: scroll-position;
}
.benefit-marquee::-webkit-scrollbar { display: none; }
.benefit-set { display: flex; gap: 7px; }
.benefit-set span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 216, 64, .2);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255, 216, 64, .11), rgba(255, 255, 255, .025));
  color: #e6e7e2;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 7px 22px rgba(0, 0, 0, .12);
  font-size: 11px;
  font-weight: 740;
  white-space: nowrap;
}
.benefit-set span b { font-size: 14px; line-height: 1; }
.checker-title { display: flex; align-items: center; gap: 10px; }
.checker-title .ui-icon { width: .9em; height: .9em; color: var(--accent); stroke-width: 1.55; }
.checker-amount { display: inline-flex; align-items: center; gap: .25em; white-space: nowrap; }
.checker-amount .checker-symbol { width: .9em; height: .9em; stroke-width: 1.7; }
.task-checker-amount .checker-symbol { width: 1.05em; height: 1.05em; }
.checker-wallet { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checker-wallet > div { display: flex; flex-direction: column; gap: 7px; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.045); }
.checker-wallet span, .checker-wallet small { color: var(--muted); }
.checker-wallet strong { color: var(--ink); font-size: 38px; line-height: 1; }
.checker-wallet strong .checker-amount { color: var(--ink); }
.checker-wallet strong .checker-amount span { color: var(--ink); }
.checker-wallet strong .ui-icon { color: var(--accent); }
.checker-wallet small { min-height: 1em; font-size: 11px; }
.checkers-about { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; padding: 18px; border-color: rgba(255,216,64,.28); background: radial-gradient(circle at 0 0, rgba(255,216,64,.18), transparent 52%), linear-gradient(135deg, #1b211d, #131714); }
.checkers-about > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 15px; background: var(--accent); color: var(--accent-ink); }
.checkers-about > span .ui-icon { width: 25px; height: 25px; }
.checkers-about p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.checkers-about strong { color: var(--ink); }
.contest-card { overflow: hidden; }
.contest-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.contest-head h2 { margin-top: 3px; }
.contest-head > span { padding: 6px 9px; border-radius: 999px; background: rgba(255,216,64,.13); color: var(--accent); font-size: 11px; white-space: nowrap; }
.contest-prizes-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 15px 0 9px; }
.contest-prize-card { position: relative; min-width: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)); overflow: hidden; }
.contest-prize-card.main { grid-column: 1 / -1; grid-template-columns: 128px minmax(0, 1fr); padding: 13px; border-color: rgba(255,216,64,.38); background: radial-gradient(circle at 12% 10%, rgba(255,216,64,.14), transparent 42%), linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018)); }
.contest-prize-place { position: absolute; z-index: 1; top: 8px; right: 9px; color: rgba(255,216,64,.72); font-size: 8px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.contest-prize-picture { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 14px; background: var(--accent); color: var(--accent-ink); overflow: hidden; }
.contest-prize-card.main .contest-prize-picture { width: 128px; height: 128px; border-radius: 19px; }
.contest-prize-picture img, .contest-prize-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.contest-prize-picture b { font-size: 38px; }
.contest-prize-card.main .contest-prize-picture b { font-size: 52px; }
.contest-prize-card > div:last-child, .contest-prize-cloud > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.contest-prize-card strong, .contest-prize-cloud strong { overflow-wrap: anywhere; }
.contest-prize-card small, .contest-prize-cloud small, .contest-date { color: var(--muted); }
.contest-prize-clouds { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 15px; }
.contest-prize-cloud { min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.025); }
.contest-prize-thumb { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); overflow: hidden; }
.contest-prize-thumb b { font-size: 19px; }
.contest-prize-cloud strong { font-size: 11px; }
.contest-prize-cloud small { font-size: 9px; }
.contest-entry { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 9px; }
.contest-entry .field { margin: 0; }
.contest-entry-done { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 13px; border-radius: 13px; background: rgba(255,216,64,.12); color: var(--accent); }
.contest-entry-done .checker-amount { font-size: 18px; font-weight: 850; }
.checker-field-label { display: flex !important; align-items: center; gap: 6px; }
.checker-field-label .ui-icon { width: 17px; height: 17px; color: var(--accent); }
.contest-date { display: block; margin-top: 11px; font-size: 11px; }
@media (max-width: 520px) {
  .contest-prizes-featured { grid-template-columns: 1fr; }
  .contest-prize-card, .contest-prize-card.main { grid-column: auto; grid-template-columns: 112px minmax(0, 1fr); padding: 11px; }
  .contest-prize-picture, .contest-prize-card.main .contest-prize-picture { width: 112px; height: 112px; border-radius: 17px; }
  .contest-prize-picture b, .contest-prize-card.main .contest-prize-picture b { font-size: 46px; }
}
@media (max-width: 370px) {
  .contest-prize-card, .contest-prize-card.main { grid-template-columns: 96px minmax(0, 1fr); }
  .contest-prize-picture, .contest-prize-card.main .contest-prize-picture { width: 96px; height: 96px; }
}
.form-card { padding: 16px; margin-bottom: 0; }
.form-card h2 { font-size: 22px; }
.form-card .form-hint { margin: 7px 0 12px; line-height: 1.35; }
.form-card .form-hint strong { color: var(--ink); }
.form-card .form-hint .call-free { color: var(--accent); }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; margin: 0 0 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
.field input, .field textarea {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  background: #202824;
  color: var(--ink);
}
.field input:focus, .field textarea:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(245, 200, 66, .2); }
.field textarea { min-height: 115px; resize: vertical; }
.form-hint { color: var(--muted); font-size: 13px; }
.error-text { color: var(--danger); font-size: 13px; min-height: 18px; }
.form-card .error-text { margin: 8px 0 0; }
.access-state-card { display: grid; gap: 12px; }
.access-state-card .form-hint { margin: 0; }
.access-state-card .primary-button { margin-top: 2px; }
.login-actions { display: grid; gap: 4px; }
.auth-progress { display: flex; align-items: center; gap: 9px; margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.auth-spinner { width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid #ffffff40; border-top-color: var(--accent); border-radius: 50%; animation: auth-spin .75s linear infinite; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .auth-spinner { animation-duration: 2s; } }
.login-back-button {
  min-height: 38px;
  padding: 7px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.login-switch-button {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 216, 64, .55);
  border-radius: 14px;
  background: rgba(255, 216, 64, .08);
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.login-switch-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-login-entry {
  width: 100%;
  min-height: 42px;
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255,216,64,.25);
  border-radius: 13px;
  background: rgba(255,216,64,.07);
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.entered-phone {
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .035);
  font-size: 17px;
  font-weight: 760;
  letter-spacing: .01em;
}
.success-mark {
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #163c2a;
  color: #62e2aa;
  font-size: 20px;
  font-weight: 850;
}

@media (max-height: 640px) {
  .login-screen { gap: 8px; padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
  .login-hero .login-logo { width: 146px; margin-bottom: 2px; }
  .login-hero h1 { font-size: clamp(25px, 7.4vw, 32px); }
  .login-hero .login-lead { margin: 6px 0 8px; font-size: 12px; }
  .benefit-set span { min-height: 30px; padding: 5px 9px; font-size: 10px; }
  .benefit-set span b { font-size: 12px; }
  .form-card { padding: 13px 14px; }
  .form-card h2 { font-size: 20px; }
  .form-card .form-hint { margin: 5px 0 9px; font-size: 11px; }
  .field { margin-bottom: 10px; }
  .field span { margin-bottom: 5px; font-size: 11px; }
  .field input { padding: 11px 13px; }
  .primary-button { min-height: 46px; }
  .login-switch-button { min-height: 44px; margin-top: 8px; }
  .form-card .error-text { min-height: 12px; margin-top: 5px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .benefit-track { animation: none; }
}

.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(18,18,16,.46); }
.modal { width: min(100%, 540px); padding: 26px 20px calc(26px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--canvas); }
.modal h2 { margin-bottom: 8px; }
.modal > p { color: var(--muted); }

.empty-state { text-align: center; padding: 40px 20px; }
.empty-state .emoji { font-size: 42px; }
.empty-state p { color: var(--muted); }

.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); transform: translate(-50%, 18px); padding: 11px 15px; border-radius: 13px; background: #20211e; color: #fff; opacity: 0; pointer-events: none; transition: .2s ease; font-size: 13px; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.hidden { display: none !important; }

@media (max-width: 370px) {
  .content { padding-inline: 15px; }
  .task-card { padding-inline: 20px; }
  .hero-avatar { width: 54px; height: 54px; }
  .stats-grid { gap: 10px; }
  .stat-card { min-height: 164px; padding: 16px; }
}
.tournament-prizes{margin-top:14px;padding:15px;border:1px solid #554f30;border-radius:16px;background:linear-gradient(125deg,#24291f,#151d18)}
.tournament-prize-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:12px}
.tournament-prize{display:grid;gap:7px;min-width:0;padding:10px;border:1px solid #364238;border-radius:11px;background:#121b16}
.tournament-prize:first-child{border-color:#b99a35;background:#3a351e}
.tournament-prize span{display:flex;align-items:center;gap:4px;color:#9eaa9f;font-size:9px;font-weight:800;white-space:nowrap}
.tournament-prize:first-child span,.tournament-prize:first-child strong{color:#f0d256}
.tournament-prize strong{font-size:14px;white-space:nowrap}
.tournament-prize-trophy{width:14px;height:14px;flex:none}
.tournament-prize-trophy.place-2{color:#d4dfdc}
.tournament-prize-trophy.place-3{color:#ca946a}

.tournament-hero{min-height:0;gap:8px;padding:18px 20px;border-radius:18px;background:linear-gradient(120deg,#2d291c,#141b16 78%)}
.tournament-hero:after{display:none}
.tournament-hero h1{max-width:none;margin:0;font-size:29px;line-height:1.1}
.tournament-fund{display:flex;align-items:baseline;gap:7px;color:#b9bda8;font-size:10px}
.tournament-fund strong{color:#e9d061;font-size:15px}
.tournament-section-title{margin:23px 0 10px}
.tournament-leagues{grid-template-columns:1fr;gap:7px}
.tournament-leagues .tournament-league{min-width:0;min-height:0;border-radius:13px}
.tournament-leagues .tournament-league.active{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 9px;min-height:68px;padding:11px 14px}
.tournament-league.active small{grid-column:1/-1}
.tournament-league.active strong{font-size:17px}
.tournament-league.active em{color:#e9cd5b;font-size:11px;font-style:normal;text-align:right}
.tournament-other-leagues{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tournament-leagues .tournament-league.compact{display:grid;align-content:center;gap:5px;min-height:52px;padding:8px 7px}
.tournament-league.compact small{font-size:7px;line-height:1.15;letter-spacing:.03em}
.tournament-league.compact strong{font-size:10px;line-height:1.15}
.tournament-league.compact em{color:#b9bda8;font-size:8px;font-style:normal;line-height:1.1}
.tournament-rank{display:flex;align-items:center;justify-content:center;gap:2px}
.tournament-rank span{font-size:10px}
.tournament-rank-trophy{width:20px;height:20px;flex:none}
.tournament-rank-trophy.place-1,.tournament-hint .place-1{color:#f1d557}
.tournament-rank-trophy.place-2,.tournament-hint .place-2{color:#d4dfdc}
.tournament-rank-trophy.place-3,.tournament-hint .place-3{color:#ca946a}
.tournament-driver.me{margin:6px;border:1px solid #b99a35;border-radius:12px;background:linear-gradient(115deg,#3b341e,#292c1e)}
.tournament-you-label{grid-column:1/-1;color:#f0d35a;font-size:9px;font-weight:900;letter-spacing:.1em}
.tournament-driver.me .tournament-driver-name strong,.tournament-driver.me .tournament-turnover{color:#f7df78}
.tournament-driver-hints{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.tournament-hint{display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #81713b;border-radius:8px;background:#dfc1441f;color:#ece1af;font-size:9px;font-weight:700;line-height:1.2}
.tournament-hint svg{width:14px;height:14px;flex:none}
.tournament-ranking-gap{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #29352e;color:#8d9c90;font-size:10px}
.tournament-gap-stack{display:grid;gap:2px;width:24px}
.tournament-gap-stack i{height:3px;border-radius:2px;background:#536150}
.tournament-gap-stack i:nth-child(2){width:19px;margin-left:3px}
.tournament-gap-stack i:nth-child(3){width:14px;margin-left:5px}
.tournament-step-strip span{min-height:66px;align-content:center}
.tournament-step-strip strong{font-size:12px;line-height:1.3}
.tournament-step-strip small{line-height:1.25}
.tournament-personal-status{margin-top:15px;color:#f2d762;font-size:14px;font-weight:800;line-height:1.35}
.tournament-level-heading{margin-top:20px;color:#d8d0aa;font-size:11px;font-weight:750}
.tournament-level-heading+.tournament-step-strip{margin-top:9px}
.tournament-personal-reward{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:13px;border:1px solid #a78d37;border-radius:11px;background:#e0bd3c21}
.tournament-personal-reward svg{width:23px;height:23px;flex:none;color:#f0d158}
.tournament-personal-reward span{display:grid;gap:5px}
.tournament-personal-reward strong{color:#f2d762;font-size:12px;line-height:1.35}
.tournament-personal-reward small{color:#d6cda4;font-size:10px;line-height:1.4}
.tournament-period{display:flex;align-items:center;gap:7px;color:#d7d4b6;font-size:11px}
.tournament-period svg{width:15px;height:15px;color:#e9d061}
.tournament-hero .tournament-fund{margin-top:3px}
.tournament-growth-summary{margin:3px 0 13px;color:#d5cda8;font-size:11px;line-height:1.4}
.tournament-growth-summary strong{color:#f2d762}
.tournament-level-amount-heading{margin-top:17px;color:#aeb9aa;font-size:10px;line-height:1.35}
.tournament-level-amount-heading+.tournament-step-strip{margin-top:9px}
.tournament-step-strip span.growth-level{min-height:83px}
.tournament-step-strip em{color:#d9d6b8;font-size:9px;font-style:normal;font-weight:750;line-height:1.2}
.tournament-board-refresh{padding:8px 15px;border-bottom:1px solid #29352e;color:#92a092;font-size:9px;line-height:1.4}