/* ── токени теми (з vanilla-портів Aceternity) ────────────────────────── */
:root{
  --ace-bg:#ffffff; --ace-fg:#0a0a0a; --ace-muted:#525252; --ace-border:rgba(0,0,0,.08);
  --surface:#ffffff; --surface-2:#f7f7f8; --road:#e7e5e4; --road-line:#c8c5c1;
  --paid:#059669; --partial:#d97706; --debt:#e11d48; --idle:#94a3b8; --pending:#64748b;
  --paid-soft:rgba(5,150,105,.12); --partial-soft:rgba(217,119,6,.12);
  --debt-soft:rgba(225,29,72,.10); --idle-soft:rgba(148,163,184,.12);
  --pending-soft:rgba(100,116,139,.12);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
}
html[data-theme=dark]{
  --ace-bg:#0a0a0a; --ace-fg:#fafafa; --ace-muted:#a3a3a3; --ace-border:rgba(255,255,255,.1);
  --surface:#111112; --surface-2:#161618; --road:#1c1c1f; --road-line:#3a3a40;
  --paid:#34d399; --partial:#fbbf24; --debt:#fb7185; --idle:#64748b; --pending:#94a3b8;
  --paid-soft:rgba(52,211,153,.14); --partial-soft:rgba(251,191,36,.14);
  --debt-soft:rgba(251,113,133,.12); --idle-soft:rgba(100,116,139,.14);
  --pending-soft:rgba(148,163,184,.14);
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
}
@media (prefers-color-scheme:dark){
  html:not([data-theme=light]){
    --ace-bg:#0a0a0a; --ace-fg:#fafafa; --ace-muted:#a3a3a3; --ace-border:rgba(255,255,255,.1);
    --surface:#111112; --surface-2:#161618; --road:#1c1c1f; --road-line:#3a3a40;
    --paid:#34d399; --partial:#fbbf24; --debt:#fb7185; --idle:#64748b; --pending:#94a3b8;
    --paid-soft:rgba(52,211,153,.14); --partial-soft:rgba(251,191,36,.14);
    --debt-soft:rgba(251,113,133,.12); --idle-soft:rgba(100,116,139,.14);
    --pending-soft:rgba(148,163,184,.14);
    --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ace-bg); color:var(--ace-fg);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3{letter-spacing:-.02em;margin:0}
.muted{color:var(--ace-muted)}
.tnum{font-variant-numeric:tabular-nums}

/* ── фон-сітка (ace-grid-and-dot-backgrounds) ─────────────────────────── */
.bg-grid{position:fixed;inset:0;z-index:-2;pointer-events:none;
  --ace-line:color-mix(in srgb,var(--ace-fg) 7%,transparent);
  background-image:
    linear-gradient(to right,var(--ace-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--ace-line) 1px,transparent 1px);
  background-size:40px 40px}
.bg-grid::after{content:"";position:absolute;inset:0;background:var(--ace-bg);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,transparent 10%,black);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,transparent 10%,black)}

/* ── шапка ────────────────────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);
  background:color-mix(in srgb,var(--ace-bg) 82%,transparent);
  border-bottom:1px solid var(--ace-border)}
.top-in{max-width:1140px;margin:0 auto;padding:.7rem 1.2rem;display:flex;align-items:center;gap:1rem}
.brand{display:flex;align-items:baseline;gap:.5rem;font-weight:700;letter-spacing:-.03em;text-decoration:none}
.brand b{font-size:1.05rem}
.brand span{font-size:.72rem;color:var(--ace-muted);font-weight:500;letter-spacing:.02em}
.nav{display:flex;gap:.15rem;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:.4rem .7rem;border-radius:999px;text-decoration:none;font-size:.875rem;
  color:var(--ace-muted);white-space:nowrap;transition:background .15s,color .15s}
.nav a:hover{color:var(--ace-fg);background:color-mix(in srgb,var(--ace-fg) 6%,transparent)}
.nav a.on{color:var(--ace-bg);background:var(--ace-fg)}
.icon-btn{border:1px solid var(--ace-border);background:transparent;color:inherit;
  border-radius:999px;width:32px;height:32px;cursor:pointer;font-size:.85rem;flex:none;
  display:grid;place-items:center}
.icon-btn:hover{background:color-mix(in srgb,var(--ace-fg) 6%,transparent)}

main{max-width:1140px;margin:0 auto;padding:1.6rem 1.2rem 5rem}
.page-head{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.page-head h1{font-size:clamp(1.5rem,3.4vw,2.1rem)}
.page-head p{margin:.2rem 0 0;color:var(--ace-muted);font-size:.9rem}

/* ── картка з прожектором (ace-card-spotlight) ────────────────────────── */
.card{position:relative;isolation:isolate;overflow:hidden;border-radius:14px;
  border:1px solid var(--ace-border);background:var(--surface);--x:50%;--y:50%}
.card::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;
  pointer-events:none;opacity:0;transition:opacity .3s;
  background:
    radial-gradient(340px circle at var(--x) var(--y),color-mix(in srgb,var(--ace-fg) 10%,transparent),transparent 40%),
    radial-gradient(480px circle at var(--x) var(--y),rgba(59,130,246,.13),rgba(139,92,246,.06) 40%,transparent 70%)}
.card:hover::before{opacity:1}
.card>*{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.card::before{transition:none}}

/* ── плитки чисел ─────────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem;margin-bottom:1.6rem}
.tile{padding:1.1rem 1.2rem}
.tile .k{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ace-muted)}
.tile .v{font-size:clamp(1.5rem,3.6vw,2rem);font-weight:700;letter-spacing:-.03em;margin-top:.35rem;
  font-variant-numeric:tabular-nums}
.tile .s{font-size:.8rem;color:var(--ace-muted);margin-top:.2rem}
.v.good{color:var(--paid)} .v.warn{color:var(--partial)} .v.bad{color:var(--debt)}

/* ── карта вулиці ─────────────────────────────────────────────────────── */
.street-wrap{position:relative;padding:1.2rem 0 0}
.street{display:grid;grid-template-columns:1fr 108px 1fr;align-items:stretch}

/* Обидві сторони розтягуються на однакову довжину дороги: у лівої 10 садиб,
   у правої 12, але вулиця фізично одна й та сама. */
.side{display:flex;flex-direction:column;justify-content:space-between;gap:.7rem;padding:.4rem 0}

.road{position:relative;align-self:stretch;margin:0 6px;border-radius:10px;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--ace-fg) 6%,transparent),transparent 18%,transparent 82%,color-mix(in srgb,var(--ace-fg) 6%,transparent)),
    linear-gradient(180deg,transparent,var(--road) 2%,var(--road) 98%,transparent)}
.road::before{content:"";position:absolute;left:50%;top:2%;bottom:2%;width:4px;margin-left:-2px;
  border-radius:2px;
  background:repeating-linear-gradient(180deg,var(--road-line) 0 22px,transparent 22px 44px)}
.road::after{content:"";position:absolute;left:7px;right:7px;top:2%;bottom:2%;pointer-events:none;
  border-left:2px solid var(--road-line);border-right:2px solid var(--road-line);opacity:.35}

/* ділянка */
.plot{position:relative;display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:center;
  padding:.7rem .9rem;border-radius:12px;border:1px solid var(--ace-border);
  background:var(--surface);box-shadow:var(--shadow);text-decoration:none;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s;--x:50%;--y:50%}
.plot:hover{transform:translateY(-2px)}
.plot::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .25s;
  background:radial-gradient(260px circle at var(--x) var(--y),
    color-mix(in srgb,var(--plot-color) 20%,transparent),transparent 60%)}
.plot:hover::before{opacity:1}
.plot>*{position:relative}

/* Ліва сторона дивиться вікнами на дорогу — будиночок притиснутий до неї. */
.side-l .plot{grid-template-columns:1fr auto;text-align:right;border-right-width:3px}
.side-l .plot .hut{order:2}
.side-r .plot{border-left-width:3px}

.plot.paid   {--plot-color:var(--paid);   border-color:color-mix(in srgb,var(--paid) 40%,var(--ace-border))}
.plot.partial{--plot-color:var(--partial);border-color:color-mix(in srgb,var(--partial) 40%,var(--ace-border))}
.plot.debt   {--plot-color:var(--debt);   border-color:color-mix(in srgb,var(--debt) 42%,var(--ace-border))}
.plot.pending{--plot-color:var(--pending);border-color:var(--ace-border)}
.plot.idle   {--plot-color:var(--idle);   opacity:.6;border-style:dashed}

/* будиночок */
.hut{width:40px;height:40px;flex:none;position:relative}
.hut .roof{position:absolute;top:1px;left:0;right:0;height:15px;
  background:var(--plot-color);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.92}
.hut .body{position:absolute;bottom:3px;left:6px;right:6px;height:21px;border-radius:2px;
  background:color-mix(in srgb,var(--plot-color) 18%,var(--surface));
  border:1px solid color-mix(in srgb,var(--plot-color) 45%,transparent)}
.hut .win{position:absolute;bottom:12px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:1px;
  background:color-mix(in srgb,var(--plot-color) 50%,transparent);transition:background .3s,box-shadow .3s}
.plot.paid .hut .win{background:#fde68a;box-shadow:0 0 12px 3px rgba(253,230,138,.5)}
.plot.idle .hut .win{background:transparent;border:1px solid var(--idle)}

.plot .num{font-weight:700;font-size:1.05rem;letter-spacing:-.02em;line-height:1.15}
.plot .who{font-size:.82rem;color:var(--ace-muted);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.plot .tag{display:inline-block;margin-top:.3rem;font-size:.7rem;font-weight:600;
  padding:.12rem .45rem;border-radius:6px;background:var(--tag-bg);color:var(--plot-color)}
.plot.paid .tag{--tag-bg:var(--paid-soft)}
.plot.partial .tag{--tag-bg:var(--partial-soft)}
.plot.debt .tag{--tag-bg:var(--debt-soft)}
.plot.pending .tag{--tag-bg:var(--pending-soft);color:var(--pending)}
.debt-why{margin-top:.25rem;font-size:.72rem;line-height:1.35;color:var(--debt);opacity:.85}
.plot.idle .tag{--tag-bg:var(--idle-soft);color:var(--idle)}

/* ворота внизу вулиці */
.gate{grid-column:1/-1;margin-top:1.2rem;display:grid;place-items:center;gap:.55rem;
  padding:1.2rem;border-top:1px dashed var(--ace-border)}
.gate-bars{display:flex;gap:6px;align-items:flex-end;height:46px}
.gate-bars i{width:6px;border-radius:3px;background:var(--road-line);
  animation:sway 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0)*.11s)}
.gate-bars i:nth-child(odd){height:46px}
.gate-bars i:nth-child(even){height:34px}
@keyframes sway{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.88)}}
@media (prefers-reduced-motion:reduce){.gate-bars i{animation:none}}
.gate small{color:var(--ace-muted);font-size:.75rem;letter-spacing:.09em;text-transform:uppercase}

.legend{display:flex;flex-wrap:wrap;gap:.9rem;margin:.2rem 0 1.2rem;font-size:.8rem;color:var(--ace-muted)}
.legend span{display:inline-flex;align-items:center;gap:.35rem}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}

@media (max-width:760px){
  .street{grid-template-columns:16px 1fr;column-gap:.7rem}
  .road{grid-row:1/3;grid-column:1;margin:0}
  .road::after{left:2px;right:2px}
  .side-l{grid-column:2;grid-row:1} .side-r{grid-column:2;grid-row:2}
  .side{justify-content:flex-start}
  .side-l .plot{grid-template-columns:auto 1fr;text-align:left;
    border-right-width:1px;border-left-width:3px}
  .side-l .plot .hut{order:0}
  .gate{grid-column:1/-1}
}

/* ── таблиці ──────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--ace-border);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.875rem}
th,td{padding:.55rem .7rem;text-align:right;white-space:nowrap;border-bottom:1px solid var(--ace-border)}
th:first-child,td:first-child{text-align:left;position:sticky;left:0;background:var(--surface)}
thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ace-muted);
  position:sticky;top:0;background:var(--surface-2);z-index:1}
tbody tr:hover td{background:color-mix(in srgb,var(--ace-fg) 3%,transparent)}
tbody tr:last-child td{border-bottom:none}
td.cell-paid{color:var(--paid);font-variant-numeric:tabular-nums}
td.cell-part{color:var(--partial);font-variant-numeric:tabular-nums}
td.cell-none{color:color-mix(in srgb,var(--ace-fg) 22%,transparent)}
tfoot td{font-weight:700;background:var(--surface-2)}

/* ── списки ───────────────────────────────────────────────────────────── */
.rows{display:flex;flex-direction:column;gap:.5rem}
.row{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;padding:.8rem 1rem}
.row .t{font-weight:600}
.row .m{font-size:.8rem;color:var(--ace-muted);margin-top:.15rem}
.row .a{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.chip{padding:.32rem .75rem;border-radius:999px;border:1px solid var(--ace-border);
  font-size:.82rem;text-decoration:none;color:var(--ace-muted)}
.chip.on{background:var(--ace-fg);color:var(--ace-bg);border-color:var(--ace-fg)}

/* ── вхід ─────────────────────────────────────────────────────────────── */
.login{min-height:100dvh;display:grid;place-items:center;padding:1.5rem}
.login .card{width:100%;max-width:370px;padding:2rem}
.login h1{font-size:1.5rem;margin-bottom:.3rem}
.login p{color:var(--ace-muted);font-size:.9rem;margin:0 0 1.4rem}
.login input{width:100%;padding:.7rem .9rem;border-radius:10px;font:inherit;
  border:1px solid var(--ace-border);background:var(--surface-2);color:inherit}
.login input:focus{outline:2px solid color-mix(in srgb,var(--ace-fg) 40%,transparent);outline-offset:1px}
.login button{width:100%;margin-top:.7rem;padding:.7rem;border-radius:10px;border:none;cursor:pointer;
  background:var(--ace-fg);color:var(--ace-bg);font:inherit;font-weight:600}
.err{color:var(--debt);font-size:.85rem;margin-top:.6rem}

.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:1rem;align-items:start}
@media (max-width:860px){.grid-2{grid-template-columns:1fr}}
.card-pad{padding:1.2rem}
.card-pad h2{font-size:1rem;margin-bottom:.8rem}