/* Laiks: тёмный стеклянный стиль. Подключается после основных стилей.
   Принцип: фон тёмный и ровный, карточки чуть светлее фона с чёткой кромкой и тенью,
   плитки внутри карточек темнее самих карточек (как верхние приборы). Свечения вокруг нет.
   Чтобы откатить дизайн, достаточно убрать <link> на этот файл в index.html. */

:root{
  /* Шрифт: свой веб-шрифт можно добавить первым в список. */
  --font:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  --bg:#070c14;
  --edge:rgba(255,255,255,.09);
  --card-fill:linear-gradient(165deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.03) 55%,rgba(255,255,255,.045) 100%);
  --tile-fill:rgba(4,9,16,.46);
  --tile-edge:rgba(255,255,255,.07);
  --hi:inset 0 1px 0 rgba(255,255,255,.10);
  --glow:rgba(92,200,255,.12);
}

/* ---------- типографика ---------- */
body,button,input,select,textarea{font-family:var(--font)}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;letter-spacing:-.005em}
h2{font-size:1.02rem;font-weight:650;letter-spacing:-.012em;color:#d6e4ef;margin-bottom:14px}
.big{font-weight:200;letter-spacing:-.05em}
.cond{font-weight:600;letter-spacing:-.015em}
.place{font-weight:500}
.sub,.nst,.note,.dhint,.src{line-height:1.45}
.row .nm,.sr .nm,.ar b,.pr b,.drow b,.fact b,.hc b,.when,.dstat b,.rp,.big,.live b,.gv{font-variant-numeric:tabular-nums}

/* ---------- фон: тёмный, спокойный, без цветных пятен ---------- */
html{background:var(--bg)}
body{background:
  radial-gradient(900px 520px at 88% -10%,rgba(36,70,106,.55) 0%,transparent 62%),
  radial-gradient(700px 420px at -8% 32%,rgba(22,46,76,.38) 0%,transparent 60%),
  var(--bg)}

/* ---------- карточки: чуть светлее фона, чёткая кромка и тень ---------- */
.card{position:relative;background:var(--card-fill);border:1px solid var(--edge);border-radius:24px;
  -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:var(--hi),0 1px 2px rgba(0,0,0,.5),0 22px 44px -26px rgba(0,0,0,.9),0 26px 46px -38px var(--glow)}
.card:hover{border-color:rgba(255,255,255,.14)}
/* тонкий блик по верхней кромке стекла */
.card::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.04) 24%,rgba(255,255,255,0) 55%,rgba(255,255,255,.10) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* едва заметная цветная подсветка снизу у разных блоков */
.hero{--glow:rgba(92,170,255,.22)}
.today,.plan{--glow:rgba(255,181,71,.16)}
.drive,.pollen{--glow:rgba(74,222,128,.14)}
.moon,.acc,.util{--glow:rgba(160,130,255,.16)}
.warn{--glow:rgba(255,120,80,.16)}
.mapc{border-radius:24px}

/* ---------- плитки внутри: темнее карточек, как верхние приборы ---------- */
.fact,.hc,.pb,.drow,.xfc,.sky,.rib-ch{background:var(--tile-fill);border:1px solid var(--tile-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.fact,.sky,.xfc,.drow,.hc{border-radius:16px}
.pb{border-radius:20px}
.hc.nt{background:rgba(0,0,0,.34)}
.hc.now{background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 8px 20px -10px rgba(92,200,255,.35)}
.hc:hover{background:rgba(255,255,255,.07)}
.xp{background:var(--tile-fill);border-color:var(--tile-edge)}
.row,.sr,.rp,.cfg,.ptire,.pseason,.xlegal{border-color:rgba(255,255,255,.07)}
.gauge{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(4,9,16,.55));border:1px solid rgba(255,255,255,.10);border-radius:20px;
  box-shadow:var(--hi),0 10px 24px -14px rgba(0,0,0,.7)}
.gauge::after{font-family:var(--font);font-style:normal;font-weight:600}

/* ---------- кнопки, чипы, переключатели ---------- */
.chip,.wbtn,.nowbtn,.install,.pd{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);box-shadow:var(--hi);color:#bdd0df;font-weight:500}
.chip:hover,.wbtn:hover,.nowbtn:hover{color:#fff;background:rgba(255,255,255,.09)}
.chip[aria-pressed=true],.seg button[aria-pressed=true]{background:#e9f1f8;color:#0a1522;border-color:#e9f1f8;font-weight:600;box-shadow:0 4px 14px -6px rgba(255,255,255,.35)}
.chip.geo{background:rgba(92,200,255,.10);border-color:rgba(92,200,255,.32)}
.chip.geo[aria-pressed=true]{background:#e9f1f8;color:#0a1522}
.seg{background:rgba(4,9,16,.5);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.seg .tog[aria-pressed=true]{background:rgba(92,200,255,.22);color:#d8f1ff}
.wbtn.on,.nowbtn[aria-pressed=true]{background:rgba(74,222,128,.16);border-color:rgba(74,222,128,.5);color:#8fe8b0}
.dbtn{background:rgba(92,200,255,.14);border-color:rgba(92,200,255,.45);color:#fff}
.dbtn.on{background:rgba(255,107,74,.18);border-color:rgba(255,107,74,.55);color:#ffcdbf}
.play{background:linear-gradient(180deg,#ffc371,#ffa02e);box-shadow:0 6px 16px -6px rgba(255,170,60,.5),inset 0 1px 0 rgba(255,255,255,.45)}

/* ---------- поля ввода ---------- */
.search input,.cr input[type=number],.cr select,.rsel select,.dopts select{background:rgba(4,9,16,.5);border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.search input{padding:10px 16px}
.qres{background:rgba(12,24,38,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 18px 40px -12px rgba(0,0,0,.7)}

/* ---------- нижняя панель и всплывающие окна ---------- */
@media(max-width:860px){
  .bnav{background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(8,16,26,.82));border:1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);box-shadow:var(--hi),0 16px 36px -10px rgba(0,0,0,.8)}
  .bnav button[aria-current=true]{background:rgba(255,255,255,.12);box-shadow:var(--hi)}
  .nsheet:not([hidden]){background:linear-gradient(165deg,rgba(255,255,255,.09),rgba(10,20,32,.92));border-color:rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
  .nsheet button{background:var(--tile-fill);border-color:var(--tile-edge)}
}
.gi-in{background:linear-gradient(180deg,rgba(24,44,68,.96),rgba(9,18,30,.98) 62%)}
.rmap{border-radius:18px}

@media(prefers-reduced-transparency:reduce){
  .card,.chip,.wbtn,.seg,.bnav{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- крупная температура: читается поверх облаков ---------- */
.hero::after{background:linear-gradient(180deg,rgba(10,21,34,.36) 0%,rgba(10,21,34,.14) 30%,rgba(10,21,34,.62) 58%,rgba(10,21,34,.88) 100%)}
.hero .big{font-weight:400;color:#fff;letter-spacing:-.045em;text-shadow:0 1px 2px rgba(5,12,22,.55),0 8px 34px rgba(5,12,22,.75)}
.hero .place{color:#fff;font-weight:600;text-shadow:0 1px 10px rgba(5,12,22,.6)}

/* ---------- столбики «лучшее время»: объём вместо плоского цвета ---------- */
.pbars i{border-radius:5px 5px 2px 2px;background-image:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,0) 72%)}