/* WinUp visual system: calm midnight surfaces with mint and guava accents. */
:root {
  --bg: #08131c;
  --bg2: #0d1c27;
  --panel: #10232e;
  --panel2: #17313c;
  --line: #2b4952;
  --text: #f2f7f6;
  --muted: #a9c1c6;
  --mint: #62dfc9;
  --pink: #f38dbb;
  --amber: #f2c47f;
  --danger: #fa8192;
  --blue: #88cde8;
  --purple: #bea3e7;
  --focus: #b3fff0;
}

html { color-scheme: dark; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI Variable", "Aptos", "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand, .stat strong, .winner { letter-spacing: -.035em; }
h1 { font-size: clamp(29px, 2.4vw, 42px); font-weight: 730; }
h2 { font-size: 20px; font-weight: 700; }
h3 { font-weight: 690; }
.muted { color: var(--muted); }
.accent, .up { color: var(--mint); }
.pink-text, .down { color: var(--pink); }

:where(button, input, select, textarea, a):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
::selection { background: #57d9c885; color: #fff; }

.wrap {
  background:
    radial-gradient(ellipse 54% 38% at 88% -10%, #184a50a6, transparent 75%),
    linear-gradient(145deg, #0b1922, #08131c 64%);
}
.shell { grid-template-columns: 232px minmax(0, 1fr); }
.sidebar {
  padding: 27px 14px;
  border-right: 1px solid #28444c;
  background: linear-gradient(180deg, #0c1d26, #0a1a22 72%, #0b1c25);
  scrollbar-color: #49636b transparent;
}
.brand {
  gap: 10px;
  margin-bottom: 30px;
  font-size: 22px;
  letter-spacing: -.045em;
  line-height: 1.03;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border: 1px solid #73e6d47a;
  border-radius: 12px;
  color: var(--mint);
  background: linear-gradient(145deg, #234c50, #113037);
  font-size: 30px;
  filter: none;
  box-shadow: inset 0 1px #ffffff26, 0 6px 20px #0003;
}
.brand em { color: var(--mint); }
.brand small {
  margin-top: 5px;
  color: #b8cbcc;
  font-size: 10px;
  line-height: 1.25;
}
.side-list { gap: 3px; }
.nav-btn {
  min-height: 43px;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 10px;
  color: #c9d9dc;
  font-size: 13px;
  font-weight: 590;
  transition: background .17s ease, color .17s ease, border-color .17s ease;
}
.nav-btn .ni { width: 23px; color: #a9c3c6; font-size: 18px; }
.nav-btn:hover { background: #ffffff0e; color: #fff; }
.nav-btn.active {
  border-color: #59cdbb62;
  background: linear-gradient(100deg, #22564f, #16383c);
  color: #e8fff9;
  box-shadow: inset 3px 0 var(--mint), 0 7px 20px #0002;
}
.nav-btn.active .ni { color: var(--mint); }
.side-foot { position: static; margin: 25px 8px 0; color: #819da3; }
.side-promo {
  margin-top: 24px;
  min-height: 135px;
  padding: 16px;
  border: 1px solid #73d7cb6b;
  border-radius: 15px;
  background: linear-gradient(135deg, #102d34ee, #081b27b3), url('./assets/tacos.png') center/cover;
  box-shadow: 0 12px 30px #0004;
  font-size: 16px;
}
.sidebar > .mini-card {
  border-color: #5471787c;
  border-radius: 14px;
  box-shadow: 0 9px 20px #0003;
}

.main { padding: 26px clamp(19px, 2.2vw, 36px) 48px; }
.topbar { min-height: 53px; margin-bottom: 23px; }
.topbar h1 { line-height: 1.04; }
.topbar .muted.small { margin-top: 5px; }
.top-actions { gap: 12px; }
.search {
  padding: 10px 13px;
  border: 1px solid #385762;
  border-radius: 11px;
  background: #142834;
  color: #c0d2d3;
  box-shadow: inset 0 1px #ffffff0b;
}
.search:focus-within { border-color: var(--mint); box-shadow: 0 0 0 3px #62dfc927; }
.search input { color: var(--text); }
.search input::placeholder { color: #97adb3; }
.profile-chip {
  border-color: #38515a;
  background: #142832;
  border-radius: 11px;
  box-shadow: inset 0 1px #ffffff0c;
}
.avatar { background: #2c7676; color: #ecfffa; }
.bell:after { background: var(--pink); box-shadow: none; }

.card {
  border: 1px solid #35535c;
  border-radius: 15px;
  background: linear-gradient(153deg, #152d39, #10232e 73%);
  box-shadow: inset 0 1px #ffffff0b, 0 9px 24px #020b1030;
}
.card.pad { padding: 19px; }
.card-head { margin-bottom: 16px; }
.card-head h2 { font-size: 18px; }
.link-btn { color: #81ecd9; font-weight: 650; }
.link-btn:hover { color: #c7fff4; }
.btn {
  border-color: #4b6970;
  border-radius: 10px;
  background: #1a3540;
  color: #f0faf7;
  box-shadow: inset 0 1px #ffffff14;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.btn:hover { transform: translateY(-2px); filter: none; background: #254753; }
.btn:active { transform: translateY(0); }
.btn.mint {
  border: 1px solid #8ff4e0;
  background: #67e5cf;
  color: #092b30;
  box-shadow: 0 7px 18px #37cab838;
}
.btn.mint:hover { background: #91f2df; }
.btn.pink {
  border: 1px solid #ffd1e2;
  background: #f48fbd;
  color: #361b2e;
  box-shadow: 0 7px 18px #dc629f38;
}
.btn.pink:hover { background: #ffb1d1; }
.btn.danger { color: #ffb6c1; }
.btn.tiny { border-radius: 8px; }

.hero-business {
  min-height: 148px;
  margin: -26px calc(-1 * clamp(19px, 2.2vw, 36px)) 22px;
  padding: 31px clamp(19px, 2.2vw, 36px);
  border-bottom-color: #365862;
  background:
    linear-gradient(90deg, #0b1b26fa 0%, #0b1b26e8 39%, #0b1b2670 73%, #0b1b2633),
    url('./assets/tacos.png') center 52%/cover;
}
.hero-business h1 { font-size: clamp(28px, 2.45vw, 38px); }
.hero-business p { max-width: 660px; color: #e0e8e5; line-height: 1.5; }
.stat-grid { gap: 12px; margin-bottom: 19px; }
.stat {
  min-height: 135px;
  padding: 17px;
  background: linear-gradient(158deg, #193441, #112630 80%);
}
.stat .stat-icon { margin-bottom: 10px; font-size: 25px; color: var(--mint); }
.stat:nth-child(2) .stat-icon,
.stat:nth-child(6) .stat-icon { color: var(--pink); }
.stat strong { font-size: clamp(24px, 2.2vw, 31px); font-weight: 740; margin: 3px 0; line-height: 1.1; }
.stat span { color: #d1dedf; }
.stat .muted { color: #9eb5ba; }
.stat .up, .stat .down { font-size: 12px; }
.grid-2, .grid-3, .stack, .admin-grid { gap: 16px; }
.stack { align-content: start; }
.section { margin-bottom: 18px; }
.data-table { font-size: 12px; }
.data-table th { padding: 10px 9px; border-color: #42606a; color: #9fb9c0; font-weight: 660; }
.data-table td { padding: 10px 9px; border-color: #2d4b55; }
.data-table tr:hover td { background: #a5e5da0d; }
.product-thumb { border-radius: 8px; }
.status { border-color: #65d6bc8a; background: #225a4e5e; color: #adf6df; font-weight: 660; }
.status.review { border-color: #c99b617f; background: #6c492843; color: #f3d9a9; }
.status.block { border-color: #d779867f; background: #7a374443; color: #ffc0c6; }
.bar-chart { border-color: #47616c; background: repeating-linear-gradient(to top, transparent 0, transparent 46px, #ffffff13 47px); }
.bar { background: linear-gradient(0deg, #2d8d84, #77e4cc); box-shadow: none; }
.bar.pinkbar { background: linear-gradient(0deg, #975278, #f296c2); box-shadow: none; }
.line-chart .gridline { stroke: #345562; }
.line-chart .l1 { stroke: var(--mint); filter: none; }
.line-chart .l2 { stroke: var(--pink); filter: none; }
.line-chart .l3 { stroke: var(--purple); }
.track { background: #2b424b; }
.mini-card, .choice {
  border-color: #375862;
  border-radius: 11px;
  background: #172f3a;
}
.choice:hover { border-color: #76dbcb; background: #1d3c45; }
.choice.selected { border-color: var(--mint); background: #1e4a49; box-shadow: inset 0 0 0 1px #66ddc899; }
.tab { border-color: #41606a; background: #19313c; color: #d6e4e4; }
.tab:hover { border-color: #80b8b3; }
.tab.active { border-color: #65e3cc; background: #245c54; color: #e8fff8; }
.field { color: #c9dddf; }
.field input, .field select, .field textarea {
  border-color: #45636e;
  background: #0d222c;
  color: #f3fbfa;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 3px #62dfc926;
}
.field input::placeholder, .field textarea::placeholder { color: #8ca7ae; }
.step b { border-color: #63818a; }
.step.active b, .step.done b { background: var(--mint); box-shadow: 0 0 0 4px #63dbc621; }
.settings-row { border-color: #304e58; }
.switch.on { background: #31b99f; }
.badge { background: #285b50; color: #b8f7e3; }
.city-map { border-color: #3c6069; background: radial-gradient(circle at 36% 45%, #60d8bb42, transparent 6%), linear-gradient(140deg, #18313e, #102631); }
.city-map:before { color: #2f6c6c; }

/* Player experience: a little warmer and more tactile than the operator panels. */
.user-world {
  background:
    radial-gradient(ellipse 60% 38% at 50% -8%, #1c5152a8, transparent 78%),
    radial-gradient(circle at 6% 77%, #4a2d4c55, transparent 28%),
    linear-gradient(150deg, #0a141e, #0a1c25 70%, #0c1520);
}
.user-top { color: #b5d2d3; }
.user-headline { margin-top: 19px; }
.user-headline .brand { font-size: clamp(38px, 4vw, 52px); }
.user-headline .brand-mark { width: 60px; height: 60px; font-size: 43px; border-radius: 18px; }
.user-headline p { color: #c4d8d9; }
.user-layout { gap: 19px; }
.mobile {
  border: 7px solid #050b11;
  outline: 1px solid #789298;
  background: #0e2029;
  box-shadow: 0 26px 55px #0009, 0 0 0 5px #d9f6ee0a;
}
.mobile .notch { background: #050b11; }
.mobile-head { background: linear-gradient(#15303a, #10242e); }
.mobile-head .brand { font-size: 19px; }
.mobile-head .brand-mark { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; font-size: 20px; }
.mobile-scroll { scrollbar-color: #42656d transparent; }
.mobile-bottom { border-color: #3d5960; background: #112833; }
.mobile-bottom button.active { color: var(--mint); }
.reward-card { border-color: #49616a; background: #1a323d; box-shadow: 0 6px 15px #0002; }
.reward-card:hover { border-color: #70cbbb; background: #22414a; }
.reward-copy small { color: #bed0d2; }
.detail-hero, .game-surface { border: 1px solid #627981; }
.game-surface { background: linear-gradient(#0d1c27aa,#0d1c2799),url('./assets/tacos.png') center/cover; }
.catcher { border-color: var(--mint); background: #173c40; color: #e9fff9; }
.winner { font-family: "Segoe UI Variable Display", "Segoe UI", sans-serif; color: var(--mint); text-shadow: 0 5px 25px #26bca250; }
.qr { border-radius: 10px; }
.user-explainer { color: #a7c9c7; }

.system-home {
  background:
    linear-gradient(105deg, #091923ee, #0a1d28d8 62%, #091923b8),
    url('./assets/tacos.png') center/cover;
}
.home-inner { max-width: 1080px; }
.home-inner > .brand { font-size: 28px; }
.home-inner h1 { max-width: 760px; font-size: clamp(44px, 6vw, 76px); line-height: 1.02; }
.home-inner > p { font-size: 17px; max-width: 600px; }
.home-grid { gap: 18px; margin-top: 39px; }
.home-tile { min-height: 246px; padding: 26px; background: linear-gradient(150deg, #193640ed, #10242eea); }
.home-tile:hover { transform: translateY(-5px); border-color: var(--mint); background: #1d3c45; }
.home-tile b { display: grid; place-items: center; width: 51px; height: 51px; border: 1px solid #79ddcd79; border-radius: 14px; background: #26544f; color: var(--mint); font-size: 32px; }
.home-tile h2 { margin-top: 20px; }
.toast { border-color: #84e5d3; background: #17443f; color: #edfff9; box-shadow: 0 18px 38px #0008; }

@media (min-width: 1501px) {
  .admin-stats { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
@media (max-width: 1500px) {
  .admin-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-grid:not(.admin-stats) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1450px) {
  .user-layout { grid-template-columns: repeat(2, minmax(0, 340px)); }
}
@media (max-width: 1050px) {
  .topbar { align-items: flex-start; }
  .search { width: 225px; min-width: 0; }
  .admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
  .sidebar { left: -240px; width: 232px; box-shadow: 14px 0 35px #0005; }
  .main { padding: 17px; }
  .hero-business { margin: -17px -17px 17px; padding: 24px 17px; }
  .topbar { gap: 12px; }
  .top-actions:last-child { margin-left: auto; }
}
@media (max-width: 650px) {
  .main { padding: 13px; }
  .hero-business { margin: -13px -13px 15px; padding: 24px 15px; min-height: 170px; }
  .hero-business h1 { font-size: 28px; }
  .hero-business p { font-size: 13px; }
  .stat-grid:not(.admin-stats), .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-height: 127px; padding: 14px; }
  .stat strong { font-size: 25px; }
  .topbar h1 { font-size: 25px; }
  .search { width: min(47vw, 210px); }
  .home-grid { grid-template-columns: 1fr; }
  .home-tile { min-height: 180px; }
  .home-inner h1 { font-size: 42px; }
  .user-layout { grid-template-columns: 1fr; }
  .mobile { box-shadow: 0 16px 35px #000a; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}