:root{
  --bg:#0a1210; --bg-2:#0e1a17; --panel:#101d1a; --panel-2:#152623;
  --line:#1e332e; --line-2:#274641;
  --ink:#eaf5f1; --ink-2:#a9c2bb; --ink-3:#6f8a83;
  --free:#5ce0a6; --busy:#ff9166; --mine:#7cc4ff; --gold:#e8c37a;
  --water-1:#0a3946; --water-2:#0d5364; --water-3:#12798a;
  --sand:#c9b184; --reed:#4d6a4a;
  --r:14px; --shadow:0 18px 44px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 700px at 20% -10%,#12241f 0%,var(--bg) 60%);
  color:var(--ink); font:15px/1.5 Manrope,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,p{margin:0}

/* ---------- каркас ---------- */
.app{display:grid;grid-template-rows:auto 1fr;height:100vh;height:100dvh}
.top{
  display:flex;align-items:center;gap:18px;padding:12px 20px;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(19,38,34,.92),rgba(10,18,16,.92));
  backdrop-filter:blur(8px);z-index:20
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand .mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(150deg,var(--water-3),var(--water-1));
  display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.brand h1{font-size:16px;font-weight:800;letter-spacing:.2px;white-space:nowrap}
.brand span{display:block;font-size:11.5px;color:var(--ink-3);font-weight:600}
.top-mid{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.datebox{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:7px 10px}
.datebox label{font-size:11px;color:var(--ink-3);font-weight:700;text-transform:uppercase;letter-spacing:.6px}
.datebox input{background:none;border:0;color:var(--ink);font:600 14px Manrope,sans-serif;outline:none;color-scheme:dark}
.pillstat{display:flex;gap:6px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:7px 12px;font-weight:700;font-size:13px}
.pillstat b{color:var(--free)}
.ghost{border:1px solid var(--line);border-radius:12px;padding:8px 13px;font-weight:700;font-size:13px;
  background:var(--panel);transition:.16s}
.ghost:hover{border-color:var(--line-2);background:var(--panel-2)}
.ghost .cnt{color:var(--mine)}

/* ---------- рабочая зона ---------- */
.work{display:grid;grid-template-columns:1fr 372px;min-height:0}
.mapwrap{position:relative;min-height:0;overflow:hidden}
#map{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
#map.drag{cursor:grabbing}

.filters{position:absolute;left:16px;top:14px;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 32px);z-index:5}
.chip{border:1px solid var(--line);background:rgba(16,29,26,.86);backdrop-filter:blur(6px);border-radius:999px;
  padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--ink-2);transition:.16s;white-space:nowrap}
.chip:hover{color:var(--ink);border-color:var(--line-2)}
.chip.on{background:rgba(92,224,166,.14);border-color:rgba(92,224,166,.5);color:var(--free)}

.mapcard{position:absolute;left:16px;bottom:16px;max-width:calc(100% - 108px);background:rgba(13,24,21,.88);backdrop-filter:blur(9px);
  border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;z-index:5;box-shadow:var(--shadow)}
.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.legend i{width:11px;height:11px;border-radius:4px;display:inline-block;margin-right:8px;vertical-align:-1px}
.layers{display:flex;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);flex-wrap:wrap}
.layers button{font-size:11.5px;font-weight:700;color:var(--ink-3);border:1px solid var(--line);border-radius:8px;padding:5px 9px}
.layers button.on{color:var(--ink);border-color:var(--line-2);background:var(--panel-2)}

.zoomer{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;gap:6px;z-index:5}
.zoomer button{width:38px;height:38px;border-radius:11px;background:rgba(13,24,21,.9);border:1px solid var(--line);
  font-size:17px;font-weight:700;color:var(--ink-2);backdrop-filter:blur(6px)}
.zoomer button:hover{color:var(--ink);border-color:var(--line-2)}
.zoomer button.small{font-size:11px;letter-spacing:.3px}

.tip{position:absolute;pointer-events:none;z-index:8;background:rgba(8,16,14,.95);border:1px solid var(--line-2);
  border-radius:10px;padding:8px 11px;font-size:12.5px;font-weight:700;box-shadow:var(--shadow);opacity:0;
  transform:translate(-50%,-130%);transition:opacity .12s}
.tip.show{opacity:1}
.tip small{display:block;font-weight:600;color:var(--ink-3);font-size:11.5px;margin-top:2px}

/* ---------- карта: SVG ---------- */
.water-body{fill:url(#gWater)}
.contour{fill:none;stroke:rgba(155,231,238,.16);stroke-width:1.2;stroke-dasharray:5 7}
.contour-fill{fill:rgba(3,26,34,.42)}
.depth-tag{fill:rgba(168,226,232,.55);font-size:12px;font-weight:700;letter-spacing:.4px}
.bank{fill:#1b241f;stroke:rgba(201,177,132,.45);stroke-width:1.4}
.island{fill:#1d2a20;stroke:rgba(201,177,132,.5);stroke-width:1.4}
.tree{fill:#31543c}
.reeds{stroke:var(--reed);stroke-width:2;stroke-linecap:round;opacity:.75}
.wave{fill:none;stroke:rgba(160,235,240,.10);stroke-width:1.5;stroke-linecap:round}
#waves{animation:drift 26s linear infinite}
#lyr-sectors,#lyr-poi{animation:rise .55s ease-out}
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes drift{from{transform:translateX(-40px)}to{transform:translateX(40px)}}

.sector{cursor:pointer}
.sector .shape{fill:rgba(92,224,166,.13);stroke:rgba(92,224,166,.55);stroke-width:1.6;transition:.18s}
.sector .num{fill:var(--free);font-size:17px;font-weight:800;text-anchor:middle;pointer-events:none;transition:.18s}
.sector .nm{fill:rgba(234,245,241,.66);font-size:11.5px;font-weight:700;text-anchor:middle;pointer-events:none}
.sector:hover .shape{fill:rgba(92,224,166,.26)}
.sector.busy .shape{fill:rgba(255,145,102,.13);stroke:rgba(255,145,102,.5)}
.sector.busy .num{fill:var(--busy)}
.sector.busy:hover .shape{fill:rgba(255,145,102,.24)}
.sector.mine .shape{fill:rgba(124,196,255,.18);stroke:rgba(124,196,255,.65)}
.sector.mine .num{fill:var(--mine)}
.sector.dim{opacity:.22}
.sector.hi .shape{fill:rgba(255,255,255,.12);stroke-width:2.2}
.sector.sel .shape{stroke-width:2.6;stroke:#fff;fill:rgba(255,255,255,.16);filter:url(#glow)}
.sector.sel .num{fill:#fff}
.pier{stroke:rgba(201,177,132,.75);stroke-width:5;stroke-linecap:round}
.poi circle{fill:rgba(9,22,26,.9);stroke:rgba(232,195,122,.75);stroke-width:1.4}
.poi text.ic{font-size:12px;text-anchor:middle;fill:var(--gold)}
.poi text.lb{font-size:11.5px;font-weight:700;fill:rgba(232,195,122,.75);text-anchor:middle}

/* ---------- боковая панель ---------- */
.side{background:linear-gradient(180deg,var(--panel),#0c1614);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0;z-index:10}
.side-head{padding:15px 18px 12px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:10px}
.side-head h2{font-size:17px;font-weight:800;line-height:1.25}
.side-head .sub{font-size:12px;color:var(--ink-3);font-weight:600;margin-top:3px}
.close{margin-left:auto;color:var(--ink-3);font-size:20px;line-height:1;padding:2px 6px;border-radius:8px}
.close:hover{color:var(--ink);background:var(--panel-2)}
.side-body{overflow:auto;padding:16px 18px 22px;flex:1;scrollbar-width:thin}
.side-body::-webkit-scrollbar{width:8px}
.side-body::-webkit-scrollbar-thumb{background:#1c302b;border-radius:8px}

.status{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:800}
.status i{width:8px;height:8px;border-radius:50%;background:currentColor}
.s-free{color:var(--free);background:rgba(92,224,166,.12)}
.s-busy{color:var(--busy);background:rgba(255,145,102,.12)}
.s-mine{color:var(--mine);background:rgba(124,196,255,.12)}

.hero{border-radius:12px;overflow:hidden;border:1px solid var(--line);margin-bottom:14px;position:relative}
.hero svg{display:block;width:100%;height:132px}
.hero .cap{position:absolute;left:11px;bottom:9px;font-size:11px;font-weight:700;color:rgba(255,255,255,.82);
  text-shadow:0 1px 6px rgba(0,0,0,.6)}

.facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.fact{background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:9px 11px}
.fact b{display:block;font-size:14.5px;font-weight:800}
.fact span{font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-3);font-weight:700}
.blk{margin-bottom:14px}
.blk>h4{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;font-weight:800}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{border:1px solid var(--line-2);border-radius:8px;padding:5px 9px;font-size:12px;font-weight:700;color:var(--ink-2);background:var(--panel-2)}
.tag.fish{border-color:rgba(232,195,122,.3);color:var(--gold)}
.note{background:rgba(232,195,122,.07);border:1px solid rgba(232,195,122,.22);border-radius:11px;padding:10px 12px;
  font-size:13px;color:#f0dcb4;line-height:1.5}
.note b{color:var(--gold)}

.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.day{border:1px solid var(--line);border-radius:9px;padding:7px 3px;text-align:center;transition:.15s;background:var(--panel-2)}
.day span{display:block;font-size:10px;color:var(--ink-3);font-weight:700;text-transform:uppercase}
.day b{font-size:13px;font-weight:800}
.day.free b{color:var(--free)} .day.busy b{color:var(--busy)} .day.mine b{color:var(--mine)}
.day.cur{border-color:var(--line-2);box-shadow:0 0 0 1px var(--line-2) inset;background:#1a2d29}
.day:hover{border-color:var(--line-2)}

.buybar{border-top:1px solid var(--line);padding:14px 18px;display:flex;align-items:center;gap:12px;background:rgba(8,15,13,.6)}
.price b{font-size:20px;font-weight:800} .price span{font-size:12px;color:var(--ink-3);font-weight:700}
.cta{margin-left:auto;background:linear-gradient(160deg,#5ce0a6,#28a97a);color:#062018;font-weight:800;font-size:14px;
  padding:12px 20px;border-radius:12px;transition:.16s;box-shadow:0 10px 24px rgba(40,169,122,.28)}
.cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
.cta:disabled{background:#1b2a27;color:var(--ink-3);box-shadow:none;cursor:not-allowed;transform:none}
.cta.warn{background:linear-gradient(160deg,#ffb08a,#e07043);color:#2a0f05;box-shadow:none}

.list{display:flex;flex-direction:column;gap:8px}
.row{display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:var(--panel-2);
  border-radius:12px;padding:10px 12px;text-align:left;transition:.15s;width:100%}
.row:hover{border-color:var(--line-2);transform:translateX(2px)}
.row .n{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:13px;
  background:rgba(92,224,166,.12);color:var(--free)}
.row.busy .n{background:rgba(255,145,102,.12);color:var(--busy)}
.row.mine .n{background:rgba(124,196,255,.12);color:var(--mine)}
.row .t{min-width:0}
.row .t b{display:block;font-size:13.5px;font-weight:700}
.row .t span{font-size:11.5px;color:var(--ink-3);font-weight:600}
.row .p{margin-left:auto;font-size:12.5px;font-weight:800;color:var(--ink-2);white-space:nowrap}
.empty{color:var(--ink-3);font-size:13px;text-align:center;padding:22px 10px;line-height:1.6}

/* ---------- модалка / тост ---------- */
.veil{position:fixed;inset:0;background:rgba(4,10,9,.72);backdrop-filter:blur(4px);z-index:60;display:grid;place-items:center;padding:18px}
.modal{width:min(420px,100%);background:var(--panel);border:1px solid var(--line-2);border-radius:18px;padding:20px;
  box-shadow:var(--shadow);animation:pop .18s ease-out}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:0}}
.modal h3{font-size:18px;font-weight:800;margin-bottom:4px}
.modal .mm{font-size:12.5px;color:var(--ink-3);font-weight:600;margin-bottom:16px}
.field{margin-bottom:11px}
.field label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-3);font-weight:800;margin-bottom:5px}
.field input,.field select{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;
  padding:11px 12px;color:var(--ink);font:600 14px Manrope,sans-serif;outline:none;color-scheme:dark}
.field input:focus,.field select:focus{border-color:var(--line-2)}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px dashed var(--line-2);
  margin-top:14px;padding-top:12px;font-weight:800}
.total b{font-size:20px;color:var(--free)}
.mrow{display:flex;gap:9px;margin-top:16px}
.mrow .cta{margin:0;flex:1;text-align:center}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);background:#0f2420;border:1px solid rgba(92,224,166,.4);
  color:var(--ink);border-radius:13px;padding:12px 18px;font-weight:700;font-size:13.5px;box-shadow:var(--shadow);
  z-index:70;opacity:0;transition:.22s;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast b{color:var(--free)}

.foot{font-size:11.5px;color:var(--ink-3);line-height:1.6;border-top:1px solid var(--line);margin-top:18px;padding-top:12px}

/* ---------- мобильная раскладка ---------- */
@media (max-width:960px){
  body{overflow:auto}
  .work{grid-template-columns:1fr;grid-template-rows:1fr}
  .mapwrap{height:100%}
  .mapcard{bottom:72px}
  .zoomer{bottom:72px}
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;max-height:78vh;border-left:0;border-top:1px solid var(--line-2);
    border-radius:20px 20px 0 0;transform:translateY(calc(100% - 58px));transition:transform .26s cubic-bezier(.32,.72,0,1);
    box-shadow:0 -20px 50px rgba(0,0,0,.5)}
  body.sheet .side{transform:translateY(0)}
  .side-head{border-radius:20px 20px 0 0}
  .side-head::before{content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);width:38px;height:4px;
    border-radius:3px;background:var(--line-2)}
  .side-head{position:relative;padding-top:18px;cursor:pointer}
  .mapcard{padding:9px 11px}
  .legend{font-size:11.5px}
  .filters{max-width:100%;left:0;right:0;top:10px;padding:0 12px;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filters::-webkit-scrollbar{display:none}
  .top{flex-wrap:wrap;gap:10px}
  .side-body{overscroll-behavior:contain}
}
@media (max-width:560px){
  .top{padding:10px 14px;gap:8px}
  .brand h1{font-size:15px}
  .brand .mark{width:30px;height:30px;border-radius:9px}
  .top-mid{gap:8px;width:100%;justify-content:space-between}
  .datebox{padding:5px 9px;gap:6px}
  .datebox label{display:none}
  .datebox input{font-size:13px}
  .pillstat,.ghost{padding:6px 10px;font-size:12px}
  [data-act="today"]{display:none}
  .mapcard{left:12px;bottom:70px;padding:8px 10px;max-width:calc(100% - 78px)}
  .legend{gap:10px;font-size:11.5px}
  .legend i{width:9px;height:9px;margin-right:5px}
  .layers{margin-top:7px;padding-top:7px;gap:5px}
  .layers button{padding:4px 8px;font-size:11px}
  .zoomer{right:12px;bottom:70px;gap:5px}
  .zoomer button{width:34px;height:34px}
  .facts{grid-template-columns:1fr 1fr;gap:7px}
}

/* службове */
.hidden{display:none !important}