/* Кодоген — liquid glass, но читаемый. Общий дизайн-слой. */
:root{
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* акценты */
  --blue:#0a84ff; --blue2:#3d7bfd; --teal:#30d0c0; --purple:#7c6cff;
  --pink:#ff5b8a; --amber:#ff9f0a; --green:#34c759; --red:#ff453a;

  /* радиусы / тени */
  --r-lg:26px; --r-md:20px; --r-sm:14px; --r-xs:10px;
  --shadow-1:0 1px 2px rgba(15,23,42,.06),0 8px 24px rgba(15,23,42,.08);
  --shadow-2:0 2px 8px rgba(15,23,42,.10),0 22px 50px rgba(15,23,42,.16);
  --ring: 0 0 0 4px color-mix(in srgb, var(--acc) 22%, transparent);

  --dur:.22s; --ease:cubic-bezier(.32,.72,0,1);
  --tabbar-h: env(safe-area-inset-bottom, 0px);
}

/* ---------- LIGHT ---------- */
:root{
  --acc:var(--blue2);
  --bg-0:#eef2fb; --bg-1:#e7ecfa; --bg-2:#f4f0ff;
  --ink:#0d1526; --ink-2:#41506d; --ink-3:#7c88a3;
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.80);
  --glass-brd:rgba(255,255,255,.85);
  --hair:rgba(17,28,53,.10);
  --field:rgba(255,255,255,.72);
  --field-brd:rgba(17,28,53,.14);
  --shade:rgba(17,24,45,.05);
  --seg-on:#ffffff; --seg-on-ink:#0d1526;
  --tab-ink:#8590a8;
  --scrim:rgba(20,26,44,.34);
  --grid:rgba(17,28,53,.09);
}
/* ---------- DARK ---------- */
@media (prefers-color-scheme: dark){
  :root{
    --acc:var(--blue);
    --bg-0:#0a0e19; --bg-1:#0e1424; --bg-2:#161033;
    --ink:#f2f5fc; --ink-2:#b6c0d8; --ink-3:#7d89a6;
    --glass:rgba(28,34,52,.55);
    --glass-strong:rgba(32,39,60,.74);
    --glass-brd:rgba(150,170,210,.16);
    --hair:rgba(160,180,220,.12);
    --field:rgba(18,24,40,.66);
    --field-brd:rgba(150,170,210,.16);
    --shade:rgba(255,255,255,.05);
    --seg-on:#4d5a7d; --seg-on-ink:#ffffff;
    --tab-ink:#7a86a2;
    --scrim:rgba(2,5,12,.58);
    --grid:rgba(160,180,220,.12);
  }
}
/* ручной оверрайд темы */
:root[data-theme="dark"]{
  --acc:var(--blue);
  --bg-0:#0a0e19; --bg-1:#0e1424; --bg-2:#161033;
  --ink:#f2f5fc; --ink-2:#b6c0d8; --ink-3:#7d89a6;
  --glass:rgba(28,34,52,.55); --glass-strong:rgba(32,39,60,.74);
  --glass-brd:rgba(150,170,210,.16); --hair:rgba(160,180,220,.12);
  --field:rgba(18,24,40,.66); --field-brd:rgba(150,170,210,.16);
  --shade:rgba(255,255,255,.05); --seg-on:#4d5a7d; --seg-on-ink:#ffffff;
  --tab-ink:#7a86a2;
  --scrim:rgba(2,5,12,.58); --grid:rgba(160,180,220,.12);
}
:root[data-theme="light"]{
  --acc:var(--blue2);
  --bg-0:#eef2fb; --bg-1:#e7ecfa; --bg-2:#f4f0ff;
  --ink:#0d1526; --ink-2:#41506d; --ink-3:#7c88a3;
  --glass:rgba(255,255,255,.62); --glass-strong:rgba(255,255,255,.80);
  --glass-brd:rgba(255,255,255,.85); --hair:rgba(17,28,53,.10);
  --field:rgba(255,255,255,.72); --field-brd:rgba(17,28,53,.14);
  --shade:rgba(17,24,45,.05); --seg-on:#ffffff; --seg-on-ink:#0d1526;
  --tab-ink:#8590a8;
  --scrim:rgba(20,26,44,.34); --grid:rgba(17,28,53,.09);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
html{overflow-x:hidden}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg-0);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
/* мягкий подвижный «мэш» фон */
body::before{
  content:"";position:fixed;inset:-25vmax;z-index:-2;
  background:
    radial-gradient(42vmax 42vmax at 12% 8%, color-mix(in srgb,var(--blue2) 40%,transparent), transparent 60%),
    radial-gradient(40vmax 40vmax at 88% 12%, color-mix(in srgb,var(--teal) 34%,transparent), transparent 62%),
    radial-gradient(48vmax 48vmax at 78% 92%, color-mix(in srgb,var(--purple) 36%,transparent), transparent 60%),
    radial-gradient(40vmax 40vmax at 8% 90%, color-mix(in srgb,var(--pink) 26%,transparent), transparent 60%);
  filter:saturate(1.05);
  animation:drift 26s ease-in-out infinite alternate;
}
body::after{ /* лёгкая зернистость поверх, чтобы стекло не «пластилинило» */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:var(--bg-0);
  -webkit-mask:radial-gradient(140vmax 120vmax at 50% -10%, transparent, #000 75%);
          mask:radial-gradient(140vmax 120vmax at 50% -10%, transparent, #000 75%);
}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(0,-3%,0) scale(1.06)}
}
@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
  *{scroll-behavior:auto!important}
}

a{color:var(--acc);text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px} /* 16px = iOS не зумит */

/* ---------- стекло ---------- */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(28px) saturate(1.7);
          backdrop-filter:blur(28px) saturate(1.7);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);
}
.glass-strong{background:var(--glass-strong)}

/* ---------- кнопки ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 20px;border-radius:var(--r-sm);
  font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  background:var(--glass-strong);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur);
}
.btn:active{transform:scale(.965)}
.btn.primary{
  color:#fff;border:0;
  background:linear-gradient(180deg, color-mix(in srgb,var(--acc) 92%,#fff 8%), var(--acc));
  box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 42%,transparent);
}
.btn.primary:active{box-shadow:0 3px 10px color-mix(in srgb,var(--acc) 42%,transparent)}
.btn.wide{width:100%}
.btn.ghost{background:transparent;border:1px solid var(--hair)}
.btn.sm{height:38px;padding:0 14px;font-size:14.5px;border-radius:11px}
.btn.icon{width:44px;height:44px;padding:0;border-radius:13px}
.btn:disabled{opacity:.5;pointer-events:none}

.chip{
  display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;
  border-radius:11px;font-size:14px;font-weight:600;color:var(--ink-2);
  background:var(--shade);border:1px solid transparent;transition:all var(--dur) var(--ease);
}
.chip[aria-pressed="true"]{
  color:#fff;background:var(--acc);
  box-shadow:0 4px 12px color-mix(in srgb,var(--acc) 38%,transparent);
}

/* ---------- поля ---------- */
.field{
  width:100%;height:50px;padding:0 15px;border-radius:var(--r-sm);
  background:var(--field);border:1px solid var(--field-brd);color:var(--ink);
  transition:border-color var(--dur), box-shadow var(--dur);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
textarea.field{height:auto;padding:12px 15px;resize:vertical;min-height:70px;line-height:1.45}
.field::placeholder{color:var(--ink-3)}
.field:focus{outline:none;border-color:var(--acc);box-shadow:var(--ring)}
.lbl{display:block;font-size:13px;font-weight:600;color:var(--ink-3);
     margin:0 0 7px 4px;letter-spacing:.01em}
select.field{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237c88a3' stroke-width='3' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}

/* ---------- служебное ---------- */
.muted{color:var(--ink-3)}
.dim{color:var(--ink-2)}
.hstack{display:flex;align-items:center;gap:12px}
.vstack{display:flex;flex-direction:column}
.spread{display:flex;align-items:center;justify-content:space-between;gap:12px}
.grow{flex:1;min-width:0}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hidden{display:none!important}

/* всплывающий тост */
#toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar-h) + 16px);transform:translateX(-50%) translateY(20px);
  z-index:80;max-width:min(92vw,420px);padding:12px 18px;border-radius:14px;
  font-size:14.5px;font-weight:600;color:var(--ink);opacity:0;pointer-events:none;
  background:var(--glass-strong);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-2);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#toast.err{border-color:color-mix(in srgb,var(--red) 60%,transparent)}
#toast.ok{border-color:color-mix(in srgb,var(--green) 55%,transparent)}