/* REMIRO — холодная ночная палитра: голубое, зелёное, синее.
   Тёплый цвет остался только у костра и у кнопки срока, чтобы взгляд
   цеплялся ровно за то, что надо нажать.
   Внешних шрифтов нет намеренно: из России Google Fonts часто не
   доходит, а приложение обязано открываться всегда. */

:root{
  --bg:#04111c;
  --bg2:#0a2230;
  --bg3:#0d2d3d;
  --ink:#d8f6ff;
  --dim:#6f9aab;
  --line:#164a5c;
  --line2:#1f6b80;
  --cyan:#38d8ff;
  --mint:#3fe0b0;
  --teal:#2aa8a0;
  --amber:#ffc240;
  --bad:#ff6b6b;
  --sh:4px 4px 0 rgba(0,0,0,.55);
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Consolas","DejaVu Sans Mono","Courier New",monospace;
  font-size:14px;line-height:1.5;
  -webkit-font-smoothing:none;
  text-rendering:optimizeSpeed;
}
body{
  max-width:620px;margin:0 auto;
  padding:0 12px calc(88px + env(safe-area-inset-bottom));
  min-height:100vh;
  /* Мягкое свечение от горизонта вместо голой клетки */
  background-image:
    radial-gradient(120% 60% at 50% 0%, #0a2838 0%, #04111c 60%),
    linear-gradient(rgba(56,216,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,216,255,.035) 1px,transparent 1px);
  background-size:auto, 18px 18px, 18px 18px;
  /* attachment:fixed не ставим: на телефонах он даёт рваную
     перерисовку при прокрутке — экран мигает пустотой. */
}

canvas{image-rendering:pixelated;image-rendering:crisp-edges;display:block}

/* ── Сцена ─────────────────────────────────────────────── */
.scene{
  position:relative;margin:0 -12px 12px;
  border-bottom:3px solid var(--line2);
  overflow:hidden;background:var(--bg);
}
.scene canvas{width:100%;height:auto}
/* Низ сцены растворяем в фоне, чтобы не было шва */
.scene-fade{
  position:absolute;left:0;right:0;bottom:3px;height:26%;
  background:linear-gradient(transparent,rgba(4,17,28,.8));
  pointer-events:none;
}
.brand{
  position:absolute;left:14px;top:10px;
  text-shadow:0 2px 0 #000, 0 0 14px rgba(0,0,0,.9);
}
.brand-name{
  display:block;font-size:30px;font-weight:700;letter-spacing:6px;
  color:var(--cyan);
  text-shadow:3px 3px 0 #04111c, 0 0 18px rgba(56,216,255,.45);
}
.brand-sub{
  display:block;font-size:11px;letter-spacing:1px;color:#9fd6e8;
  margin-top:2px;
}

/* ── Плитки ────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.tile{
  background:linear-gradient(180deg,var(--bg3),var(--bg2));
  border:3px solid var(--line);box-shadow:var(--sh);
  padding:9px 11px;display:flex;flex-direction:column;gap:1px;min-width:0;
}
.t-cap{font-size:10px;letter-spacing:1.5px;color:var(--dim);text-transform:uppercase}
.t-val{font-size:25px;font-weight:700;line-height:1.15;word-break:break-all}
.t-money .t-val{color:var(--cyan)}
.t-ok    .t-val{color:var(--mint)}
.t-all   .t-val{color:var(--ink)}
.t-bad   .t-val{color:var(--bad)}
.tile.flash{animation:flash .5s steps(2) 2}
@keyframes flash{50%{background:#14455a}}

/* ── Вкладки ───────────────────────────────────────────── */
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tab{
  flex:1;padding:12px 4px;font:inherit;font-size:11px;letter-spacing:1.5px;
  background:var(--bg2);color:var(--dim);
  border:3px solid var(--line);box-shadow:var(--sh);
  cursor:pointer;text-transform:uppercase;
}
.tab.on{color:#032029;background:var(--mint);border-color:var(--teal)}
.tab:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.55)}

.pane{display:none}
.pane.on{display:block}

/* ── Карточки ──────────────────────────────────────────── */
.card{
  background:var(--bg2);border:3px solid var(--line);
  box-shadow:var(--sh);padding:10px;margin-bottom:8px;
}
.card.warn{border-color:#6b3a2a}
.card-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.addr{font-size:13px;font-weight:700;word-break:break-all;color:#bfeaf7}
.days{font-size:11px;white-space:nowrap}
.days.ok{color:var(--mint)}
.days.soon{color:var(--amber)}
.days.dead{color:var(--bad)}
.profs{font-size:11px;color:var(--dim);margin-top:4px;word-break:break-word}
.flag{font-size:10px;color:#4e7f90;text-transform:uppercase;letter-spacing:1px}

/* ── Блок действия ─────────────────────────────────────── */
.block{
  border:3px solid var(--bad);box-shadow:var(--sh);
  background:linear-gradient(180deg,#24121a,#1a0f14);
  padding:12px;margin-bottom:12px;
}
.block h2{font-size:14px;letter-spacing:1.5px;color:var(--bad);margin-bottom:6px}
.block.calm{border-color:var(--teal);
  background:linear-gradient(180deg,#0c2c34,#08212a)}
.block.calm h2{color:var(--mint)}
.block .muted{margin-bottom:8px}

.pick-cap{
  font-size:10px;letter-spacing:1.5px;color:var(--dim);
  text-transform:uppercase;margin:12px 0 6px;
}
.periods{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.periods.more{grid-template-columns:repeat(5,1fr);margin-top:7px}
.per{
  padding:14px 2px;font:inherit;font-size:13px;font-weight:700;
  min-height:44px;
  background:var(--bg2);color:var(--ink);
  border:3px solid var(--line);box-shadow:var(--sh);cursor:pointer;
  line-height:1.1;
}
.periods.more .per{padding:13px 2px;font-size:12px;min-height:44px}
.per small{display:block;font-size:9px;color:var(--dim);font-weight:400;
  margin-top:2px;letter-spacing:0}
.per:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.55)}
.per.pick{background:var(--amber);color:#2a1c00;border-color:#8a6400}
.per.pick small{color:#5a4200}

/* ── Кнопки ────────────────────────────────────────────── */
.btn{
  font:inherit;font-size:12px;font-weight:700;letter-spacing:1.5px;
  padding:14px 16px;cursor:pointer;text-transform:uppercase;
  border:3px solid var(--line);box-shadow:var(--sh);
  background:var(--bg2);color:var(--ink);
}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.55)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-go{background:var(--mint);color:#032029;border-color:var(--teal)}
.btn-ghost{background:var(--bg2);color:var(--dim)}
.btn-wide{width:100%;margin-top:10px}

/* ── Поиск ─────────────────────────────────────────────── */
.filter{margin-bottom:10px}
#q{
  width:100%;font:inherit;font-size:13px;padding:12px;
  background:var(--bg2);color:var(--ink);
  border:3px solid var(--line);box-shadow:var(--sh);
}
#q::placeholder{color:#44707f}

/* ── Подвал ────────────────────────────────────────────── */
.ftr{
  position:fixed;left:0;right:0;bottom:0;
  display:flex;gap:10px;align-items:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(4,17,28,.96);border-top:3px solid var(--line2);
  max-width:620px;margin:0 auto;
}
.ftr span{font-size:10px;color:var(--dim)}

/* ── Нижний лист ───────────────────────────────────────── */
.sheet-bg{
  position:fixed;inset:0;background:rgba(2,10,16,.88);
  display:flex;align-items:flex-end;justify-content:center;z-index:50;
}
/* Свой display перебивает атрибут hidden из браузерных стилей —
   без этого окно висело поверх приложения с запуска. */
.sheet-bg[hidden],.toast[hidden]{display:none !important}
.sheet{
  width:100%;max-width:620px;
  background:linear-gradient(180deg,var(--bg3),var(--bg2));
  border:3px solid var(--teal);box-shadow:0 -4px 0 rgba(0,0,0,.6);
  padding:16px 14px calc(16px + env(safe-area-inset-bottom));
  text-align:center;
}
.sheet canvas{margin:0 auto 6px}
.sheet h2{font-size:17px;color:var(--mint);letter-spacing:1px}
.sheet .sum{
  font-size:26px;font-weight:700;color:var(--amber);margin:8px 0 2px;
}
.sheet .note{font-size:11px;color:var(--dim);margin:6px 0 14px;line-height:1.6}
.sheet .note b{color:var(--ink)}
.sheet-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ── Всплывашка ────────────────────────────────────────── */
.toast{
  position:fixed;left:12px;right:12px;bottom:86px;z-index:60;
  background:var(--bg3);border:3px solid var(--teal);
  box-shadow:var(--sh);padding:11px 12px;font-size:12px;
  max-width:596px;margin:0 auto;
}
.toast.bad{border-color:#7a3030;color:#ffb3aa}

/* ── Мелочи ────────────────────────────────────────────── */
.muted{color:var(--dim);font-size:12px}
.empty{text-align:center;padding:24px 10px;color:var(--dim);font-size:12px}
.empty canvas{margin:0 auto 10px}
.rowline{display:flex;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:2px dotted var(--line);font-size:12px}
.rowline:last-child{border-bottom:0}
.rowline b{color:var(--ink)}
.warnbar{
  border:3px solid var(--amber);background:#26200a;color:var(--amber);
  padding:10px;margin-bottom:10px;font-size:12px;box-shadow:var(--sh);
}
.hero-row{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.hero-row canvas{flex:0 0 auto}

@media (max-width:360px){
  .t-val{font-size:21px}
  .brand-name{font-size:24px;letter-spacing:4px}
  .periods.more{grid-template-columns:repeat(3,1fr)}
}