/* MaxDisk mini app — design system (mirrors the WheelsLine visual language). */
:root {
  color-scheme: light dark;

  /* brand palette */
  --wl-bg-01:#15171C; --wl-text-02:#E5E9F1; --wl-text-03:#A7ADBA;
  --wl-brand-light:#F2F5F7; --wl-brand-blue:#8FA1B5; --wl-brand-deep:#3D4B5C;

  /* ui tokens */
  --radius:12px; --radius-sm:8px; --radius-lg:16px;
  --control-h:46px; --page-w:760px;
  --accent:#63788e; --accent-strong:#394b5c;
  --success:#17845b; --warning:#b86414; --danger:#c43d3d;
  --warm:#b86414;

  /* telegram theme fallbacks (light) */
  --tg-bg: var(--tg-theme-bg-color, #f4f6f8);
  --tg-section-bg: var(--tg-theme-secondary-bg-color, #ffffff);
  --tg-secondary-bg: var(--tg-theme-secondary-bg-color, #eceff3);
  --tg-text: var(--tg-theme-text-color, #14181d);
  --tg-subtitle-text: var(--tg-theme-subtitle-text-color, #707886);
  --tg-hint: var(--tg-theme-hint-color, #8b95a3);
  --tg-link: var(--tg-theme-link-color, var(--accent));
  --tg-button: var(--tg-theme-button-color, var(--accent-strong));
  --tg-button-text: var(--tg-theme-button-text-color, #ffffff);

  --m-app-bg: var(--tg-bg);
  --m-card-bg: var(--tg-section-bg);
  --m-control-bg: var(--tg-secondary-bg);
  --m-hairline: color-mix(in srgb, var(--tg-subtitle-text) 22%, transparent);
  --m-shadow: 0 8px 24px rgba(18,24,32,.08);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}
html.tg-theme-dark {
  --tg-bg: var(--tg-theme-bg-color, var(--wl-bg-01));
  --tg-section-bg: var(--tg-theme-secondary-bg-color, #1c1f26);
  --tg-secondary-bg: var(--tg-theme-secondary-bg-color, #23262e);
  --tg-text: var(--tg-theme-text-color, var(--wl-text-02));
  --tg-subtitle-text: var(--tg-theme-subtitle-text-color, var(--wl-text-03));
  --tg-hint: var(--tg-theme-hint-color, #8891a0);
  --accent:#9aabba; --accent-strong:#aebdca;
  --m-hairline: color-mix(in srgb, #ffffff 12%, transparent);
  --m-shadow: 0 10px 28px rgba(0,0,0,.34);
}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
/* must beat component display rules (.banner{display:flex} etc.) */
[hidden] { display:none !important; }
html,body { margin:0; padding:0; }
body {
  font-family:"Sofia Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:var(--m-app-bg); color:var(--tg-text);
  min-height:100dvh; font-size:15px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; }

.app { max-width:var(--page-w); margin:0 auto; padding:0 14px calc(84px + var(--safe-bottom)); }

/* ---------- top bar ---------- */
.topbar {
  position:sticky; top:0; z-index:40; background:var(--m-app-bg);
  display:flex; align-items:center; gap:10px;
  padding:calc(10px + var(--safe-top)) 2px 10px;
}
.topbar .back {
  width:38px; height:38px; border-radius:50%; border:none; background:var(--m-control-bg);
  color:var(--tg-text); display:flex; align-items:center; justify-content:center; font-size:18px;
}
.topbar h1 { font-size:18px; font-weight:700; margin:0; letter-spacing:-.01em; }
.topbar .spacer { flex:1; }

/* ---------- hero ---------- */
.hero {
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:16/10; margin-top:4px; background:#0c0e12;
}
.hero img { width:100%; height:100%; object-fit:cover; }
.hero .grad { position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(8,10,14,.82)); }
.hero .cap { position:absolute; left:16px; right:16px; bottom:14px; color:#fff; }
.hero .cap .kicker { font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.hero .cap h2 { font-size:23px; line-height:1.15; margin:4px 0 0; font-weight:700; }

/* ---------- generic cards & grid ---------- */
.section-title { font-size:16px; font-weight:700; margin:22px 2px 10px; display:flex; align-items:center; gap:8px; }
.section-title .sub { font-size:12px; color:var(--tg-subtitle-text); font-weight:500; margin-left:auto; }

.card { background:var(--m-card-bg); border-radius:var(--radius); border:1px solid var(--m-hairline); }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tile {
  background:var(--m-card-bg); border:1px solid var(--m-hairline); border-radius:var(--radius);
  padding:14px; display:flex; align-items:center; gap:12px;
}
.tile .ico { width:40px; height:40px; border-radius:10px; background:var(--m-control-bg);
  display:flex; align-items:center; justify-content:center; color:var(--accent); flex:0 0 auto; }
.tile .t { font-weight:600; font-size:14px; }
.tile .s { font-size:12px; color:var(--tg-subtitle-text); }

.banner {
  display:flex; align-items:center; gap:12px; margin-top:10px; padding:14px;
  background:color-mix(in srgb, var(--accent) 12%, var(--m-card-bg));
  border:1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius:var(--radius);
}
.banner .ico { color:var(--accent); }
.banner .t { font-weight:600; }
.banner .s { font-size:12.5px; color:var(--tg-subtitle-text); }
.banner .chev { margin-left:auto; color:var(--tg-subtitle-text); }

.linkrow { text-align:center; margin-top:12px; }
.linkrow a { color:var(--tg-subtitle-text); font-size:13.5px; font-weight:500; }

/* ---------- wheel model cards ---------- */
.wheel-scroll { display:flex; gap:12px; overflow-x:auto; padding:2px 2px 6px; scroll-snap-type:x mandatory; }
.wheel-scroll::-webkit-scrollbar { display:none; }
.wcard { flex:0 0 132px; scroll-snap-align:start; }
.grid-models { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
@media (max-width:400px){ .grid-models{ grid-template-columns:repeat(2,1fr);} }
.wcard .pic {
  position:relative; aspect-ratio:1; border-radius:var(--radius); overflow:hidden;
  background:radial-gradient(circle at 50% 40%, #2a2f39, #14171c);
}
.wcard .pic img { width:100%; height:100%; object-fit:cover; }
.wcard .like { position:absolute; left:6px; bottom:6px; background:rgba(0,0,0,.62); color:#fff;
  font-size:11px; font-weight:600; padding:2px 7px 2px 6px; border-radius:20px; display:flex; align-items:center; gap:3px; }
.wcard .code { font-size:12.5px; font-weight:600; margin-top:6px; text-align:center; letter-spacing:.02em; }
.wcard .hot { position:absolute; right:6px; top:6px; font-size:10px; background:var(--warm); color:#fff;
  padding:1px 6px; border-radius:20px; font-weight:700; }

/* ---------- pills / chips ---------- */
.pills { display:flex; gap:8px; overflow-x:auto; padding:4px 2px; }
.pills::-webkit-scrollbar{ display:none; }
.pill {
  flex:0 0 auto; padding:8px 14px; border-radius:20px; background:var(--m-control-bg);
  color:var(--tg-text); font-size:13px; font-weight:600; border:1px solid transparent; white-space:nowrap;
}
.pill.is-active { background:var(--accent-strong); color:#fff; }

/* ---------- bottom nav ---------- */
.bottomnav {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:color-mix(in srgb, var(--m-app-bg) 92%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  border-top:1px solid var(--m-hairline);
  padding:6px 0 calc(6px + var(--safe-bottom));
  display:flex; justify-content:space-around;
}
.bottomnav a { display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--tg-subtitle-text); font-size:11px; font-weight:600; padding:4px 14px; }
.bottomnav a.is-active { color:var(--accent); }
.bottomnav a svg { width:22px; height:22px; }

/* ---------- buttons ---------- */
.btn {
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  height:var(--control-h); border:none; border-radius:var(--radius-sm); font-size:15px; font-weight:700;
  background:var(--tg-button); color:var(--tg-button-text); cursor:pointer;
}
.btn.secondary { background:var(--m-control-bg); color:var(--tg-text); }
.btn.ghost { background:transparent; border:1px solid var(--m-hairline); color:var(--tg-text); }
.btn:disabled { opacity:.5; }
.btn-row { display:flex; gap:10px; }

.sticky-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  padding:10px 14px calc(10px + var(--safe-bottom));
  background:linear-gradient(180deg, transparent, var(--m-app-bg) 26%);
}
.sticky-cta .inner { max-width:var(--page-w); margin:0 auto; }

/* ---------- forms ---------- */
.field { margin-bottom:14px; }
.field-label { display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; margin:0 2px 7px; }
.step-no { width:20px; height:20px; border-radius:50%; background:var(--accent-strong); color:#fff;
  font-size:11px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; }
select, input[type=text], input[type=tel], textarea {
  width:100%; height:var(--control-h); border-radius:var(--radius-sm); border:1px solid var(--m-hairline);
  background:var(--m-control-bg); color:var(--tg-text); padding:0 12px; font-size:15px; font-family:inherit;
  appearance:none;
}
textarea { height:auto; min-height:88px; padding:10px 12px; }
select {
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat; background-position:right 10px center; padding-right:34px;
}
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hint { font-size:12px; color:var(--tg-subtitle-text); margin:6px 2px 0; }

.seg { display:flex; background:var(--m-control-bg); border-radius:var(--radius-sm); padding:3px; gap:3px; }
.seg button { flex:1; height:38px; border:none; background:transparent; color:var(--tg-subtitle-text);
  font-weight:600; font-size:13.5px; border-radius:6px; }
.seg button.is-active { background:var(--m-card-bg); color:var(--tg-text); box-shadow:var(--m-shadow); }

/* ---------- gallery (detail) ---------- */
.gallery { position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:1; background:#0c0e12; }
.gallery .track { display:flex; height:100%; overflow-x:auto; scroll-snap-type:x mandatory; }
.gallery .track::-webkit-scrollbar{ display:none; }
.gallery .track img { flex:0 0 100%; width:100%; height:100%; object-fit:cover; scroll-snap-align:center; }
.gallery .dots { position:absolute; left:0; right:0; bottom:10px; display:flex; gap:6px; justify-content:center; }
.gallery .dots i { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.5); }
.gallery .dots i.on { background:#fff; width:18px; border-radius:4px; }
.thumbs { display:flex; gap:8px; margin-top:10px; }
.thumbs img { width:64px; height:64px; object-fit:cover; border-radius:10px; border:2px solid transparent; }
.thumbs img.on { border-color:var(--accent); }

.spec-list { }
.spec-list .row { display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--m-hairline); font-size:14px; }
.spec-list .row:last-child { border-bottom:none; }
.spec-list .k { color:var(--tg-subtitle-text); }
.spec-list .v { font-weight:600; }

/* ---------- coating swatches ---------- */
.swatch-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:400px){ .swatch-grid{ grid-template-columns:repeat(3,1fr);} }
.swatch { border:1px solid var(--m-hairline); border-radius:12px; padding:6px; background:var(--m-card-bg); cursor:pointer; }
.swatch.is-selected { border-color:var(--warm); box-shadow:0 0 0 2px color-mix(in srgb,var(--warm) 40%,transparent); }
.swatch .sw { aspect-ratio:1; border-radius:8px; overflow:hidden; background:#333; }
.swatch .nm { font-size:10.5px; text-align:center; margin-top:5px; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* favourite toggle: filled heart once saved */
[data-fav].on { color:var(--danger); }
[data-fav].on svg { fill:var(--danger); stroke:var(--danger); }

.empty { text-align:center; color:var(--tg-subtitle-text); padding:40px 20px; }
.spinner { width:26px; height:26px; border:3px solid var(--m-hairline); border-top-color:var(--accent);
  border-radius:50%; animation:spin .8s linear infinite; margin:24px auto; }
@keyframes spin { to { transform:rotate(360deg);} }

.toast { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:80;
  background:#111; color:#fff; padding:10px 16px; border-radius:22px; font-size:13.5px; opacity:0;
  transition:opacity .2s, transform .2s; pointer-events:none; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(-4px); }