/* Та сама система, що в макетах Skipper: світла поверхня,
   різкі чорні тіні, приглушений темний синій. */

:root{
  --bg:#e6e9ee; --card:#eaedf2; --sunk:#dfe3ea; --lift:#ffffff;
  --drop:rgba(0,0,0,.24); --drop-soft:rgba(0,0,0,.17);
  --blue:#1e3a63; --blue-hi:#35699f;
  --grad:linear-gradient(145deg,#35699f 0%,#1a3153 100%);
  --sand:#e9a63b; --sand-grad:linear-gradient(145deg,#f3bb58 0%,#c6801c 100%);
  --ink:#141a26; --muted:#5d6675; --ok:#1d6150; --warn:#8a5b10;
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --out:7px 7px 12px var(--drop), -6px -6px 11px var(--lift);
  --out-sm:4px 4px 8px var(--drop-soft), -4px -4px 8px var(--lift);
  --out-lg:12px 12px 22px var(--drop), -9px -9px 18px var(--lift);
  --in:inset 5px 5px 9px var(--drop-soft), inset -4px -4px 8px var(--lift);
  --cast:0 7px 15px rgba(0,0,0,.30);
  --cast-sm:0 4px 10px rgba(0,0,0,.26);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font:400 15px/1.55 Manrope,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
button,input,select{font:inherit}
a{color:inherit}

.wrap{max-width:1240px;margin:0 auto;padding:22px}

/* ── шапка ───────────────────────────────────────────────────────────── */
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.logo{
  width:44px;height:44px;border-radius:13px;background:var(--grad);flex:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--cast-sm), inset 0 1px 0 rgba(255,255,255,.2);
}
.logo svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.5;
          stroke-linecap:round;stroke-linejoin:round}
.top h1{font-size:20px;font-weight:800;letter-spacing:-.018em}
.top .sub{color:var(--muted);font-size:13px}
.spacer{flex:1}

.nav{display:flex;gap:7px;background:var(--card);padding:6px;
     border-radius:var(--r-md);box-shadow:var(--out-sm);flex-wrap:wrap}
.nav button{
  border:0;cursor:pointer;padding:9px 16px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:700;color:var(--muted);background:none;
}
.nav button.on{
  background:var(--grad);color:#fff;
  box-shadow:var(--cast-sm), inset 0 1px 0 rgba(255,255,255,.2);
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}

/* ── кнопки й поля ───────────────────────────────────────────────────── */
.btn{
  border:0;cursor:pointer;padding:12px 20px;border-radius:var(--r-md);
  background:var(--card);box-shadow:var(--out);
  color:var(--ink);font-weight:700;font-size:14.5px;
  transition:transform .15s,box-shadow .15s;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--out-lg)}
.btn:active{transform:translateY(1px);box-shadow:var(--in)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:var(--out-sm)}
.btn.solid{background:var(--grad);color:#fff;
           box-shadow:var(--cast), inset 0 1px 0 rgba(255,255,255,.22);
           text-shadow:0 1px 2px rgba(0,0,0,.28)}
.btn.sand{background:var(--sand-grad);color:#2a1a02;
          box-shadow:0 7px 16px rgba(198,128,28,.42), inset 0 1px 0 rgba(255,255,255,.4);
          text-shadow:none}
.btn.sm{padding:9px 14px;font-size:13px}

.field{
  width:100%;background:var(--sunk);border:0;border-radius:var(--r-md);
  box-shadow:var(--in);padding:12px 15px;font-size:14.5px;color:var(--ink);
}
.field::placeholder{color:#93a0b4}
.field:focus{outline:2px solid var(--sand);outline-offset:2px}
.lbl{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
     color:var(--muted);margin-bottom:6px}

.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--out);padding:18px}
.sect{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      color:var(--muted);margin:22px 0 10px 4px}

/* ── підсумки ────────────────────────────────────────────────────────── */
.kpi{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:13px}
.k{background:var(--card);border-radius:var(--r-md);box-shadow:var(--out);padding:15px 17px}
.k .l{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
      color:var(--muted)}
.k .v{font-size:23px;font-weight:800;letter-spacing:-.025em;margin-top:5px}
.k .v.debt{color:var(--warn)}
.k .v.ok{color:var(--ok)}

/* ── календар по місяцях ─────────────────────────────────────────────── */
.cal{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--out);
     padding:14px;overflow-x:auto}
.mgrid{border-collapse:separate;border-spacing:0 7px;width:100%;table-layout:fixed}
.mgrid th{padding:0 0 10px;font-size:10px;font-weight:700;letter-spacing:.05em;
          text-transform:uppercase;color:var(--muted);text-align:center}
.mgrid th.c{text-align:left;width:66px;padding-right:9px}
.mgrid td.slot{padding-right:9px;width:66px}
.mgrid .sn{display:block;font-size:12px;font-weight:800;padding:8px 0;
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mgrid td.m{padding:0 2px}
.cell{height:34px;border-radius:8px;background:var(--sunk);
      box-shadow:inset 2px 2px 4px rgba(0,0,0,.12), inset -2px -2px 4px #fff}
.cell.free{cursor:pointer}
.cell.free:hover{box-shadow:inset 3px 3px 6px rgba(0,0,0,.16), inset -2px -2px 4px #fff}
.cell.on{cursor:pointer;background:var(--grad);
         box-shadow:0 3px 7px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.18);
         display:flex;align-items:center;padding:0 9px;color:#fff;
         font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;
         text-overflow:ellipsis;display:block;line-height:34px;
         text-shadow:0 1px 2px rgba(0,0,0,.3)}

/* оплачено — приглушений зелений із синім підтоном */
.cell.on.paid{background:linear-gradient(145deg,#3f9b7f 0%,#1d6150 100%)}

/* треба платити — медовий, той самий сімейний відтінок, що й акцент */
.cell.on.debt{background:linear-gradient(145deg,#e0a93f 0%,#b47c17 100%);
              color:#2a1c02;text-shadow:0 1px 1px rgba(255,255,255,.3)}

/* попереду, ще не нараховано */
.cell.on.future{background:linear-gradient(145deg,#9fb2c9 0%,#74889f 100%);
                box-shadow:0 2px 5px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.22)}

/* тарифу немає — рахувати нічим */
.cell.on.unknown{background:linear-gradient(145deg,#b6b0a4 0%,#8d8779 100%)}

.cell.now{outline:2px solid var(--blue-hi);outline-offset:1px}

.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;
        font-size:12.5px;color:var(--muted);font-weight:600}
.legend i{display:inline-block;width:14px;height:12px;border-radius:4px;
          margin-right:7px;vertical-align:-1px}
.legend i.p{background:linear-gradient(145deg,#3f9b7f,#1d6150)}
.legend i.d{background:linear-gradient(145deg,#e0a93f,#b47c17)}
.legend i.f{background:var(--sunk);box-shadow:var(--in)}
.legend i.u{background:linear-gradient(145deg,#9fb2c9,#74889f)}
.legend i.q{background:linear-gradient(145deg,#b6b0a4,#8d8779)}

/* ── список ──────────────────────────────────────────────────────────── */
.row-card{background:var(--card);border-radius:var(--r-md);box-shadow:var(--out-sm);
          padding:13px 15px;display:flex;align-items:center;gap:13px;cursor:pointer}
.row-card + .row-card{margin-top:10px}
.row-card:hover{box-shadow:var(--out)}
.row-card .body{flex:1;min-width:0}
.row-card .n{font-weight:700;font-size:14.5px}
.row-card .m{color:var(--muted);font-size:12.5px;margin-top:2px}
.row-card .v{font-weight:800;font-size:14px;white-space:nowrap}
.row-card .v.debt{color:var(--warn)}
.row-card .v.ok{color:var(--ok)}
.bchip{min-width:52px;height:38px;border-radius:11px;background:var(--grad);color:#fff;
       display:flex;align-items:center;justify-content:center;font-size:12px;
       font-weight:800;flex:none;
       box-shadow:var(--cast-sm), inset 0 1px 0 rgba(255,255,255,.2);
       text-shadow:0 1px 2px rgba(0,0,0,.3)}
.bchip.debt{background:linear-gradient(145deg,#e0a93f,#b47c17);color:#2a1c02;
            text-shadow:0 1px 1px rgba(255,255,255,.3)}

/* ── вікно ───────────────────────────────────────────────────────────── */
.veil{position:fixed;inset:0;background:rgba(15,20,30,.45);z-index:40;
      display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--bg);border-radius:24px;box-shadow:0 20px 50px rgba(0,0,0,.4);
       padding:24px;width:100%;max-width:440px;max-height:88vh;overflow-y:auto}
.modal h2{font-size:19px;font-weight:800;letter-spacing:-.018em}
.modal .sub{color:var(--muted);font-size:13px;margin-top:2px}
.rows{display:flex;flex-direction:column;gap:11px}
.row{display:flex;justify-content:space-between;gap:12px;font-size:14px}
.row .k{color:var(--muted)}
.row .v{font-weight:700;text-align:right}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.note{margin-top:12px;padding:12px 15px;border-radius:var(--r-md);
      background:var(--sunk);box-shadow:var(--in);
      font-size:13px;line-height:1.5;color:var(--muted)}
.note b{color:var(--ink)}
.note.warn{color:var(--warn)}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
       background:#0f1c33;color:#fff;padding:13px 22px;border-radius:14px;
       font-size:14px;font-weight:700;box-shadow:0 12px 28px rgba(0,0,0,.4);
       opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:90vw;
       text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

.center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}

@media (max-width:700px){
  .wrap{padding:14px}
  .cal{padding:10px}
  .mgrid th.c, .mgrid td.slot{width:50px;padding-right:6px}
  .mgrid .sn{font-size:10.5px}
  .mgrid td.m{padding:0 1.5px}
  .cell{height:30px}
  .cell.on{font-size:10.5px;padding:0 5px;line-height:30px}
  .top h1{font-size:17px}
  .nav{width:100%}
  .nav button{flex:1;padding:9px 6px;font-size:12.5px}
  .modal{padding:18px;border-radius:18px}
  .two{grid-template-columns:1fr}
}

/* Плашка нової заявки — піщана, щоб не сплутати ні з боргом,
   ні з оплаченим: це не гроші, а прохання передзвонити. */
.bchip.sand-chip{background:var(--sand-grad);color:#2a1a02;
                 text-shadow:none;font-size:11px;min-width:58px}

/* Атрибут hidden мусить вигравати: інакше елемент із власним
   display (наприклад .veil із display:flex) лишається видимим. */
[hidden]{display:none !important}

/* Смужка прокрутки — тонка й ледь помітна: у рамці телефона вона
   не частина інтерфейсу, а службовий елемент браузера. */
*{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.22) transparent}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.34)}