:root{
  --bg:#05070f;--panel:rgba(17,24,43,.72);--raise:rgba(148,163,184,.08);
  --raise2:rgba(148,163,184,.14);--text:#eef2f8;--muted:#93a1b8;
  --accent:#5cc8ff;--accent2:#8b7bff;--line:rgba(148,163,184,.16);
  --on-accent:#04101f;--soft:rgba(92,200,255,.14);
  --grad:linear-gradient(135deg,#5cc8ff 0%,#8b7bff 100%);
  --r:20px;--shadow:0 18px 50px rgba(0,0,0,.45);
  --glow1:rgba(56,130,246,.22);--glow2:rgba(139,92,246,.18);
  --tile-l:16%;--tile-l2:9%;
}
:root.light{
  --bg:#f3f6fb;--panel:rgba(255,255,255,.86);--raise:rgba(15,23,42,.045);
  --raise2:rgba(15,23,42,.09);--text:#0c1424;--muted:#55627a;
  --accent:#0b84d8;--accent2:#6a4df0;--line:rgba(15,23,42,.11);
  --on-accent:#ffffff;--soft:rgba(11,132,216,.10);
  --grad:linear-gradient(135deg,#0b84d8 0%,#6a4df0 100%);
  --shadow:0 14px 40px rgba(15,23,42,.10);
  --glow1:rgba(56,130,246,.12);--glow2:rgba(139,92,246,.10);
  --tile-l:93%;--tile-l2:97%;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--text);min-height:100vh;display:flex;flex-direction:column;
  font:16px/1.6 Inter,"SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(900px 520px at 12% -8%,var(--glow1),transparent 70%),
    radial-gradient(800px 520px at 96% 4%,var(--glow2),transparent 70%),
    var(--bg);
  background-attachment:fixed;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 20px}

/* ---------- шапка ---------- */
.top{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px)}
.top-in{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
  padding-top:12px;padding-bottom:12px}
.logo{font-weight:800;font-size:19px;letter-spacing:-.2px;white-space:nowrap;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo:hover{text-decoration:none;filter:brightness(1.15)}
.nav{display:flex;gap:2px;flex-wrap:wrap}
.nav a{color:var(--muted);padding:7px 12px;border-radius:999px;font-size:15px;font-weight:500;
  transition:color .15s,background .15s}
.nav a:hover{color:var(--text);background:var(--raise2);text-decoration:none}
.search{flex:1 1 160px;min-width:140px}
input[type=search],input[type=text]{width:100%;font:inherit;color:var(--text);
  background:var(--raise);border:1px solid var(--line);border-radius:999px;
  padding:10px 16px;outline:none;transition:border-color .15s,box-shadow .15s}
input::placeholder{color:var(--muted)}
input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--soft)}
.tools{display:flex;align-items:center;gap:4px}
.lang{font-size:13px;font-weight:700;color:var(--muted);padding:6px 10px;border-radius:999px}
.lang:hover{text-decoration:none;color:var(--text)}
.lang.on{color:var(--on-accent);background:var(--grad)}
#theme{font:inherit;font-size:17px;line-height:1;color:var(--muted);background:var(--raise);
  border:1px solid var(--line);border-radius:999px;width:36px;height:36px;cursor:pointer}
#theme:hover{color:var(--text)}

/* ---------- главная ---------- */
.hero{position:relative;text-align:center;color:#fff;padding:92px 0 96px;overflow:hidden;
  background:url(/static/art/banner.jpg) center 38%/cover}
.hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,7,15,.35) 0%,rgba(5,7,15,.62) 55%,var(--bg) 100%)}
.hero .wrap{position:relative}
.hero h1{margin:0;font-size:clamp(40px,8vw,72px);line-height:1.05;font-weight:800;
  letter-spacing:-1.5px;text-shadow:0 6px 30px rgba(0,0,0,.5)}
.hero p{margin:14px auto 28px;max-width:600px;color:#dbe4f3;font-size:clamp(16px,2.4vw,20px)}
.hero .btn{display:inline-flex;flex:none;padding:14px 26px;font-size:16px}
:root.light .hero::before{
  background:linear-gradient(180deg,rgba(5,7,15,.35) 0%,rgba(5,7,15,.55) 60%,var(--bg) 100%)}

/* ---------- содержимое ---------- */
.main{flex:1;padding-top:28px;padding-bottom:48px}
.hero + .main{margin-top:-44px;position:relative}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;margin-bottom:18px;box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.card.alert{border-color:var(--accent);background:var(--soft);box-shadow:none}
.h{margin:0 0 14px;font-size:clamp(24px,4vw,32px);line-height:1.2;font-weight:800;
  letter-spacing:-.5px;text-align:center}
.h b{font-weight:inherit}
.h + .kb{margin-top:6px}
.msg{white-space:pre-wrap;overflow-wrap:anywhere}
.msg b,.msg strong{font-weight:700}
.msg i,.msg em{color:var(--muted)}
.msg code{font:14px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
  background:var(--raise2);border-radius:7px;padding:2px 6px}
.msg pre{font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;background:var(--raise2);
  border-radius:12px;padding:12px;overflow-x:auto;white-space:pre;margin:8px 0}
.msg blockquote{margin:8px 0;padding-left:14px;border-left:3px solid var(--accent);color:var(--muted)}
.shot{display:block;margin:-8px -8px 16px}
.shot img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:14px}

/* ---------- кнопки ---------- */
.kb{display:flex;flex-direction:column;gap:10px}
.msg + .kb{margin-top:20px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.btn{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
  text-align:center;font:inherit;font-size:15px;font-weight:600;color:var(--text);
  background:var(--raise);border:1px solid var(--line);border-radius:14px;
  padding:13px 14px;cursor:pointer;
  transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
a.btn:hover,button.btn:hover{border-color:var(--accent);background:var(--soft);
  text-decoration:none;transform:translateY(-1px)}
.btn.back{background:none;color:var(--muted);border-style:dashed}
.btn.ghost{background:none;color:var(--muted);cursor:default;border-color:transparent}
.btn.ext span{color:var(--muted)}
.btn.primary{background:var(--grad);border:none;color:var(--on-accent);font-weight:700;
  box-shadow:0 10px 30px rgba(92,200,255,.28)}
.btn.primary:hover{filter:brightness(1.08);background:var(--grad);transform:translateY(-2px)}

/* ---------- карточки разделов ---------- */
.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.grid .tile{flex:0 0 calc(25% - 12px)}
.grid + .row{margin-top:10px}
.tile{position:relative;display:flex;flex-direction:column;border-radius:22px;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);color:var(--text);
  box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .22s}
.tile:hover{text-decoration:none;transform:translateY(-6px);border-color:var(--accent);
  box-shadow:0 22px 50px rgba(92,200,255,.22)}
.tile .pic{display:block;aspect-ratio:3/2;overflow:hidden;background:#0b1326}
.tile .pic img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tile:hover .pic img{transform:scale(1.07)}
.tile .cap{display:flex;align-items:center;justify-content:center;flex:1;text-align:center;
  font-weight:700;font-size:16px;line-height:1.25;padding:14px 12px 15px}
/* без рисунка: значок в мягком цветном свечении, никаких фотографий */
.tile .emo{display:flex;align-items:center;justify-content:center;
  font-size:clamp(46px,6vw,60px);line-height:1;
  background:
    radial-gradient(circle at 50% 55%,hsl(var(--h) 90% 60% / .42),transparent 62%),
    linear-gradient(160deg,hsl(var(--h) 45% var(--tile-l)),hsl(var(--h) 40% var(--tile-l2)))}
.tile .emo{filter:drop-shadow(0 8px 16px rgba(0,0,0,.25))}
.grid.icons .tile .pic{aspect-ratio:2/1}
.grid.icons .tile .emo{font-size:clamp(40px,5vw,52px)}

.banner{margin:-24px -24px 20px;height:clamp(160px,30vw,280px);overflow:hidden;
  border-radius:var(--r) var(--r) 0 0}
.banner img{display:block;width:100%;height:100%;object-fit:cover}
.card.menu{background:none;border:none;box-shadow:none;padding:0;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.card.menu .banner{margin:0 0 22px;border-radius:var(--r);box-shadow:var(--shadow)}
.card.menu .msg{text-align:center;color:var(--muted);max-width:760px;margin:0 auto}
.card.menu .row{justify-content:center}
.card.menu .row .btn{flex:0 1 320px}

/* ---------- ввод ---------- */
.ask{display:flex;gap:10px;margin-top:6px}
.ask input{border-radius:14px;padding:13px 16px}
.ask .btn{flex:none;padding:13px 22px}
.said{display:flex;justify-content:flex-end;margin-bottom:12px}
.said span{background:var(--grad);color:var(--on-accent);font-weight:600;
  border-radius:18px 18px 6px 18px;padding:9px 16px;max-width:80%;overflow-wrap:anywhere}
.note{color:var(--muted);font-size:14px;text-align:center;margin:22px 0 0}

/* ---------- график расписания ---------- */
.gantt-card{padding:24px 24px 18px}
.gantt-top{display:flex;justify-content:space-between;align-items:center;gap:10px;
  flex-wrap:wrap;margin-bottom:14px;font-size:14px}
.seg{display:inline-flex;background:var(--raise);border:1px solid var(--line);
  border-radius:999px;padding:3px}
.seg a{padding:5px 14px;border-radius:999px;color:var(--muted);font-weight:600;font-size:13px}
.seg a:hover{text-decoration:none;color:var(--text)}
.seg a.on{background:var(--grad);color:var(--on-accent)}
.gantt-scroll{overflow-x:auto;margin:0 -24px;padding:0 24px 6px;
  -webkit-overflow-scrolling:touch}
.gantt{display:flex;flex-direction:column}
.g-row{display:flex;align-items:stretch;border-top:1px solid var(--line)}
.g-row.g-head{border-top:none}
.g-name{flex:0 0 170px;position:sticky;left:-24px;z-index:3;display:flex;align-items:center;
  padding:0 12px 0 10px;font-size:14px;font-weight:650;line-height:1.2;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  border-left:4px solid hsl(var(--h,220) 85% 60%)}
.g-head .g-name{border-left-color:transparent}
.g-track{position:relative;flex:1;display:grid;grid-template-columns:repeat(var(--n),1fr);
  min-height:46px}
.g-head .g-track{min-height:0}
.g-day{display:flex;flex-direction:column;align-items:center;padding:6px 0 8px;
  font-size:12px;line-height:1.25;color:var(--muted);border-left:1px solid var(--line)}
.g-day b{font-size:13px;color:var(--text)}
.g-day.we b{color:hsl(350 85% 66%)}
.g-day.today{background:var(--soft);border-radius:10px 10px 0 0}
.g-day.today b{color:var(--accent)}
.g-cell{border-left:1px solid var(--line)}
.g-cell.we{background:var(--raise)}
.g-bar,.g-pre{position:absolute;top:9px;height:28px;border-radius:9px}
.g-bar{z-index:2;display:flex;align-items:center;overflow:hidden;min-width:8px;
  background:linear-gradient(135deg,hsl(var(--h) 88% 62%),hsl(calc(var(--h) + 28) 80% 54%));
  box-shadow:0 6px 16px hsl(var(--h) 85% 50% / .38);cursor:help}
.g-bar.cut{border-radius:0 9px 9px 0}
.g-bar i{font-style:normal;font-size:12px;font-weight:700;color:#04101f;padding:0 8px;
  white-space:nowrap}
.g-bar.live{outline:2px solid #fff;outline-offset:1px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px hsl(var(--h) 90% 60% / .25)}}
.g-pre{z-index:1;top:19px;height:8px;border-radius:99px;cursor:help;
  background:repeating-linear-gradient(90deg,hsl(var(--h) 80% 62% / .75) 0 6px,transparent 6px 11px)}
.g-dot{position:absolute;z-index:2;top:16px;width:14px;height:14px;margin-left:-7px;
  transform:rotate(45deg);border-radius:3px;background:hsl(var(--h) 88% 62%);cursor:help;
  box-shadow:0 0 0 4px hsl(var(--h) 88% 62% / .22)}
.g-now{position:absolute;z-index:4;top:0;bottom:0;width:2px;margin-left:-1px;
  background:#ff5d6c;box-shadow:0 0 10px #ff5d6c;pointer-events:none}
.g-legend{display:flex;gap:8px 20px;flex-wrap:wrap;justify-content:center;
  margin-top:16px;font-size:13px;color:var(--muted)}
.g-legend span{display:inline-flex;align-items:center;gap:7px}
.lg{display:inline-block}
.lg.bar{width:26px;height:12px;border-radius:5px;background:var(--grad)}
.lg.pre{width:26px;height:6px;border-radius:9px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 5px,transparent 5px 9px)}
.lg.dot{width:10px;height:10px;transform:rotate(45deg);border-radius:2px;background:var(--accent2)}
.lg.now{width:2px;height:14px;background:#ff5d6c}
.g-note{text-align:center;font-size:13px;margin:10px 0 0}

/* ---------- подвал ---------- */
.foot{border-top:1px solid var(--line);color:var(--muted);font-size:14px;
  background:color-mix(in srgb,var(--bg) 70%,transparent)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:28px 36px;
  padding-top:40px;padding-bottom:28px}
.foot-about p{margin:12px 0 18px;max-width:380px;line-height:1.55}
.foot-bot{display:inline-flex;flex:none;padding:10px 18px;font-size:14px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col h2{margin:0 0 4px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text)}
.foot-col a{color:var(--muted)}
.foot-col a:hover{color:var(--accent);text-decoration:none}
.foot-legal{display:flex;gap:6px 24px;flex-wrap:wrap;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:16px;padding-bottom:22px;font-size:13px}
.foot-legal span:last-child{max-width:720px}

@media (min-width:641px) and (max-width:880px){
  .grid .tile{flex-basis:calc(33.333% - 10.7px)}
}
@media (max-width:640px){
  .wrap{padding:0 14px}
  .top{position:static}
  .tools{margin-left:auto;order:2}
  .nav{order:3;flex-basis:100%;margin:0 -8px}
  .search{order:4;flex-basis:100%}
  .hero{padding:64px 0 76px}
  .card{padding:16px;border-radius:18px}
  .banner{margin:-16px -16px 16px}
  .grid{gap:10px}
  .grid .tile{flex-basis:calc(50% - 5px);border-radius:18px}
  .tile .cap{font-size:14px;padding:11px 8px 12px}
  .row{gap:8px}
  .btn{font-size:14px;padding:12px 8px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px 20px;padding-top:28px}
  .foot-about{grid-column:1 / -1}
  .gantt-card{padding:16px 16px 14px}
  .gantt-scroll{margin:0 -16px;padding:0 16px 6px}
  .g-name{flex-basis:118px;left:-16px;font-size:12.5px;padding:0 8px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ---------- путь вверху страницы ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 16px;
  font-size:14px;color:var(--muted)}
.crumbs a{color:var(--muted);padding:4px 10px;border-radius:999px;background:var(--raise)}
.crumbs a:hover{color:var(--text);background:var(--raise2);text-decoration:none}
.crumbs b{color:var(--text);font-weight:650;padding:4px 2px}
.h2{margin:0 0 14px;font-size:22px;font-weight:800;letter-spacing:-.3px;text-align:center}

/* ---------- калькуляторы-формы ---------- */
.calc-card{max-width:760px;margin-left:auto;margin-right:auto}
.calc-hint{margin:-4px auto 20px;max-width:600px;text-align:center;color:var(--muted)}
.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1 / -1}
.field[hidden]{display:none}
.field > label{font-size:13px;font-weight:650;color:var(--muted)}
.field input[type=text],.field select,.cmp-form select,.tz select{width:100%;font:inherit;
  font-size:16px;color:var(--text);background:var(--raise);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s}
.field select,.cmp-form select,.tz select{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select option{background:var(--bg);color:var(--text)}
.field input:focus,.field select:focus,.cmp-form select:focus,.tz select:focus{
  border-color:var(--accent);box-shadow:0 0 0 4px var(--soft)}
.segs{display:flex;flex-wrap:wrap;gap:4px;background:var(--raise);border:1px solid var(--line);
  border-radius:16px;padding:4px}
.segs label{flex:1 1 auto;cursor:pointer}
.segs input{position:absolute;opacity:0;pointer-events:none}
.segs span{display:block;text-align:center;padding:9px 14px;border-radius:12px;font-size:14px;
  font-weight:650;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
.segs input:checked + span{background:var(--grad);color:var(--on-accent)}
.segs input:focus-visible + span{box-shadow:0 0 0 3px var(--soft)}
.calc-go{margin-top:16px;width:100%}
.calc-go[hidden]{display:none}
.result{margin-top:20px;padding:18px 20px;border-radius:16px;border:1px solid var(--line);
  background:linear-gradient(160deg,var(--soft),transparent 70%),var(--raise);min-height:72px}
.result.empty{display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--muted);border-style:dashed;background:none}
.result .msg{font-size:16.5px}
.calc-note{font-size:13px;text-align:center;margin:12px 0 0}

/* ---------- таблицы ---------- */
.tbl-top{display:flex;gap:10px 16px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:12px}
.tbl-filter{max-width:320px;border-radius:14px!important}
.tbl-count{font-size:13px}
.tbl-scroll{overflow:auto;border:1px solid var(--line);border-radius:14px}
.tbl-scroll.tall{max-height:640px}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{padding:10px 12px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line)}
.tbl thead th{position:sticky;top:0;z-index:1;background:var(--bg);font-size:12.5px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;user-select:none}
.tbl.sortable thead th{cursor:pointer}
.tbl.sortable thead th:hover{color:var(--text)}
.tbl thead th[data-dir=asc]::after{content:" ↑";color:var(--accent)}
.tbl thead th[data-dir=desc]::after{content:" ↓";color:var(--accent)}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover td{background:var(--raise)}
.tbl .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl .strong{font-weight:650;white-space:nowrap}
.tbl .wide{min-width:260px;color:var(--muted)}
.tbl tr[hidden]{display:none}
.tbl-hint{font-size:13px;text-align:center;margin:10px 0 0}
.tbl.cmp tr.chg td:last-child{color:var(--accent);font-weight:700}
.cmp-form{display:flex;gap:10px 12px;align-items:center;justify-content:center;flex-wrap:wrap;
  margin-bottom:14px}
.cmp-form select{width:auto;min-width:130px}
.check{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--muted);cursor:pointer}
.check input{width:17px;height:17px;accent-color:var(--accent)}

/* ---------- расписание: пояс и карточки событий ---------- */
.tz{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.tz select{width:auto;padding:7px 34px 7px 12px;font-size:14px;border-radius:999px}
.events{margin:6px 0 22px}
.ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ev{position:relative;padding:16px 18px 14px;border-radius:18px;background:var(--panel);
  border:1px solid var(--line);border-top:3px solid hsl(var(--h) 85% 60%);
  box-shadow:var(--shadow)}
.ev.live{border-color:hsl(var(--h) 85% 60%);
  background:linear-gradient(160deg,hsl(var(--h) 85% 55% / .16),transparent 70%),var(--panel)}
.ev-tag{display:inline-block;margin-bottom:8px;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:hsl(var(--h) 90% 68%);background:hsl(var(--h) 85% 55% / .15)}
:root.light .ev-tag{color:hsl(var(--h) 75% 36%)}
.ev h3{margin:0;font-size:16.5px;line-height:1.3;font-weight:750}
.ev-when{margin:4px 0 10px;font-size:14px;font-weight:650;color:hsl(var(--h) 90% 68%)}
:root.light .ev-when{color:hsl(var(--h) 75% 36%)}
.ev dl{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin:0;font-size:14px}
.ev dt{color:var(--muted)}
.ev dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}

@media (max-width:880px){.ev-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .fields{grid-template-columns:1fr 1fr;gap:12px}
  .field:not(.short):not(.full){grid-column:1 / -1}
  .ev-grid{grid-template-columns:1fr}
  .tbl{font-size:13.5px}
  .tbl th,.tbl td{padding:8px 9px}
}

/* =====================================================================
   Инструменты: город, знания, VIP, распределение, добыча, кланы
   ===================================================================== */
.tool{max-width:none}
.tool-sub{margin-top:18px}
.h3{margin:22px 0 10px;font-size:17px;font-weight:750}
.note-line{font-size:13px;margin:8px 0 0}
.warn{margin:10px 0;padding:10px 14px;border-radius:12px;font-size:14px;
  background:hsl(38 95% 55% / .14);border:1px solid hsl(38 95% 55% / .45)}
.linkish{font:inherit;color:var(--accent);background:none;border:none;padding:0;cursor:pointer}
.linkish:hover{text-decoration:underline}
.btn.small{flex:0 0 auto;padding:8px 14px;font-size:14px;min-height:0;border-radius:12px}
.btn.ok{border-color:hsl(150 70% 50%);color:hsl(150 70% 60%)}
button.btn{font:inherit;cursor:pointer;color:var(--text)}
button:disabled{opacity:.4;cursor:not-allowed}

/* счётчик «− число +»: крупные кнопки, удобно пальцем */
.step{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:14px;
  background:var(--raise);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.step:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--soft)}
.step button{font:inherit;font-size:20px;font-weight:700;line-height:1;width:44px;min-height:44px;
  color:var(--text);background:none;border:none;cursor:pointer;transition:background .12s,transform .08s}
.step button:hover:not(:disabled){background:var(--raise2)}
.step button:active:not(:disabled){transform:scale(.86);background:var(--soft)}
.step input{width:52px;min-width:0;text-align:center;font:inherit;font-size:17px;font-weight:700;
  color:var(--text);background:none;border:none;border-radius:0;padding:0;outline:none;
  box-shadow:none!important;font-variant-numeric:tabular-nums}
.step.wide{display:flex}.step.wide input{flex:1;width:auto;font-size:20px}

/* верхняя панель инструмента */
.tool-bar{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 16px;margin-bottom:20px}
.lv-segs label{flex:1 1 9%}
.lv-segs span{padding:11px 6px;font-size:16px}
.segs.small span{padding:6px 12px;font-size:13px}
.tool-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.tool-out .result{margin-top:0}
.result.sticky{position:sticky;top:84px;max-height:calc(100vh - 110px);overflow:auto}
.pick-hint{display:none;font-size:14px;margin:0 0 10px}
[data-scope=pick] .pick-hint{display:block}

.bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;
  padding:12px 14px;border:1px dashed var(--line);border-radius:16px;font-size:14px;color:var(--muted)}
.bgroup{border:1px solid var(--line);border-radius:18px;padding:14px 14px 12px;margin:0 0 16px;min-width:0}
.bgroup legend{padding:0 8px;font-weight:750;font-size:15px}
.g-count{margin-left:8px;font-weight:600;font-size:13px;color:var(--muted)}
.g-count b{color:var(--accent);font-size:15px}
.bgroup.full .g-count b{color:hsl(38 95% 60%)}
.g-meter{height:6px;border-radius:99px;background:var(--raise2);overflow:hidden;margin:2px 0 12px}
.g-meter i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad);
  transition:width .35s cubic-bezier(.2,.8,.2,1)}
.bgroup.full .g-meter i{background:linear-gradient(90deg,hsl(38 95% 55%),hsl(14 90% 58%))}
.brow{display:flex;align-items:center;gap:10px;padding:7px 4px;border-top:1px solid var(--line)}
.brow:first-child{border-top:none}
.bname{flex:1;min-width:0;font-weight:600;font-size:15px}
.bkind{padding:10px 4px;border-top:1px solid var(--line)}
.bgroup .bkind:first-of-type{border-top:none}
.bkind-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bk-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;
  animation:rowin .25s ease both}
.bk-l{font-size:12.5px;color:var(--muted)}
.bk-add{font:inherit;font-size:13.5px;font-weight:650;color:var(--accent);background:var(--soft);
  border:1px dashed var(--accent);border-radius:12px;padding:7px 12px;cursor:pointer;
  transition:transform .12s,background .15s}
.bk-add:hover:not(:disabled){transform:translateY(-1px)}
.bk-del{font:inherit;font-size:20px;line-height:1;width:38px;height:38px;border-radius:12px;
  color:var(--muted);background:none;border:1px solid var(--line);cursor:pointer;
  transition:color .15s,border-color .15s,transform .1s}
.bk-del:hover{color:hsl(0 85% 66%);border-color:hsl(0 85% 66%)}
.bk-del:active{transform:scale(.88)}
.bk-del[hidden]{display:none}
/* крупная галочка */
.pick{display:none;position:relative;width:34px;height:34px;flex:0 0 34px;cursor:pointer}
[data-scope=pick] .pick{display:block}
.pick input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;width:100%;height:100%}
.pick i{position:absolute;inset:0;border-radius:11px;border:2px solid var(--line);background:var(--raise);
  transition:background .15s,border-color .15s,transform .12s}
.pick input:checked + i{background:var(--grad);border-color:transparent;transform:scale(1.04)}
.pick input:checked + i::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-style:normal;font-weight:900;font-size:19px;color:var(--on-accent)}
.pick input:focus-visible + i{box-shadow:0 0 0 4px var(--soft)}

/* карточки итога */
.sum-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.sum-card{padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--raise)}
.sum-card.on{border-color:var(--accent);background:linear-gradient(160deg,var(--soft),transparent 80%),var(--raise)}
.sum-card h3{margin:0 0 8px;font-size:13px;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px}
.sum-card dl{margin:0;display:grid;gap:3px}
.sum-card dl div{display:flex;justify-content:space-between;gap:10px;font-size:14.5px}
.sum-card dt{color:var(--muted)}
.sum-card dd{margin:0;font-weight:750;font-variant-numeric:tabular-nums}
.sum-card .big{margin:0;font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.v{cursor:help;border-bottom:1px dotted var(--line)}
.tbl tfoot td{font-weight:800;border-top:2px solid var(--line);background:var(--raise)}
.tbl tr.dim td{color:var(--muted)}
.tbl td.up{color:var(--accent);font-weight:750}
.tbl.narrow{max-width:360px}
.tbl.mono td,.tbl.mono th{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl.mono td:first-child,.tbl.mono th:first-child{text-align:left;font-weight:700}
.tbl-scroll.in-msg{margin:10px 0;white-space:normal;display:inline-block;max-width:100%;vertical-align:top}
.tbl.sticky1 td:first-child,.tbl.sticky1 th:first-child{position:sticky;left:0;z-index:2;
  background:var(--bg);min-width:170px}

/* вкладки */
.tabs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:0 0 18px}
.tab{font:inherit;font-size:14px;font-weight:650;color:var(--muted);background:var(--raise);
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;
  transition:color .15s,background .2s,transform .12s,border-color .15s}
.tab:hover{color:var(--text);transform:translateY(-1px)}
.tab.on{color:var(--on-accent);background:var(--grad);border-color:transparent}
.tab.all{border-style:dashed}
.panel{animation:fadeup .28s ease both}
.panel[hidden]{display:none}

/* знания */
.kn-sum{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px;
  position:sticky;top:70px;z-index:5}
.kn-sum .sum-card{background:color-mix(in srgb,var(--bg) 90%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.kn-bar{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center;margin-bottom:12px;font-size:14px;
  color:var(--muted)}
.kn-order{display:flex;align-items:center;gap:8px}
.kn-bar select,.kn-ord2,.pf-filters select,.tz-pick{font:inherit;font-size:14px;color:var(--text);
  background:var(--raise);border:1px solid var(--line);border-radius:12px;padding:8px 10px;cursor:pointer}
.kn-set{display:inline-flex;align-items:center;gap:6px}
.kn-filter{flex:1 1 180px;max-width:280px}
.kn-tbl td{vertical-align:middle}
.kn-tbl .step button{width:38px;min-height:38px}
.kn-tbl .step input{width:40px}
.kn-name{font-weight:600}
.kn-name .muted{font-weight:400;font-size:12.5px;white-space:nowrap}

/* VIP */
.slide{width:100%;margin-top:8px;accent-color:var(--accent)}
.cmp-add{display:flex;gap:12px 22px;flex-wrap:wrap;align-items:center;justify-content:center;
  font-size:14px;color:var(--muted);margin-bottom:14px}
.cmp-one,.cmp-range{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:12px;min-height:8px}
.chip{font:inherit;font-size:13.5px;font-weight:700;color:var(--text);background:var(--soft);
  border:1px solid var(--accent);border-radius:999px;padding:6px 12px;cursor:pointer;
  animation:pop .22s cubic-bezier(.2,1.4,.4,1) both;transition:background .15s,transform .1s}
.chip:hover{background:hsl(0 85% 60% / .18);border-color:hsl(0 85% 66%)}
.chip span{color:var(--muted);margin-left:2px}
.cmp-opts{display:flex;gap:16px;justify-content:center;align-items:center;margin-bottom:14px;font-size:14px}

/* распределение */
.di-players{margin-top:20px}
.di-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.di-head .h3{margin:0}
.di-row{display:grid;grid-template-columns:32px minmax(0,1.4fr) minmax(0,1fr) 38px;gap:8px;align-items:center;
  margin-bottom:8px;animation:rowin .22s ease both}
.di-no{text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
.di-row input{border-radius:12px;padding:11px 13px;font-size:16px}
.di-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
.di-text textarea,textarea{width:100%;font:inherit;font-size:16px;line-height:1.5;color:var(--text);
  background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:12px 14px;
  outline:none;resize:vertical;min-height:200px;transition:border-color .15s,box-shadow .15s}
textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--soft)}
textarea::placeholder{color:var(--muted)}
[data-in][hidden],[data-only][hidden]{display:none}

/* добыча */
.drop-tbl td{vertical-align:middle}
.drop-in{border-radius:12px!important;min-width:150px;padding:9px 12px!important}

/* кланы и игроки */
.clan-card{padding:22px;border-radius:20px;border:1px solid var(--accent);
  background:linear-gradient(160deg,var(--soft),transparent 60%),var(--raise);margin-bottom:16px}
.clan-card header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.clan-card h2{margin:0;font-size:22px;font-weight:800}
.clan-tag{font-weight:800;font-size:14px;padding:4px 10px;border-radius:10px;
  background:var(--grad);color:var(--on-accent)}
.clan-card .btn{margin-top:16px}
.side-card{padding:18px 20px;border-radius:18px;border:1px dashed var(--line)}
.side-card h3{margin:0 0 6px;font-size:16px}
.side-card p{margin:0 0 12px;color:var(--muted);font-size:14.5px}
.side-card .btn{display:inline-flex;flex:0 0 auto}
.how{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:12px;align-items:stretch;margin-bottom:8px}
.how > div{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:16px;
  background:var(--raise);border:1px solid var(--line);font-size:14px}
.how b{flex:0 0 28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--grad);color:var(--on-accent);font-size:14px}
.how .btn{align-self:center}
.pf-filters{display:flex;gap:10px 14px;flex-wrap:wrap;align-items:flex-end;margin:18px 0 14px;font-size:13px;
  color:var(--muted)}
.pf-filters label{display:flex;flex-direction:column;gap:4px;font-weight:650}
.pf-filters input{width:110px;border-radius:12px;padding:8px 10px}
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pf{padding:16px 18px;border-radius:18px;background:var(--raise);border:1px solid var(--line);
  transition:transform .18s,border-color .18s,box-shadow .18s}
.pf:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.pf[hidden]{display:none}
.pf header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pf h3{margin:0;font-size:18px;font-weight:800}
.pf header .muted{font-size:12px;white-space:nowrap}
.pf-tags{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 10px}
.pf-tags span{font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--soft);
  color:var(--accent)}
.pf dl{margin:0 0 10px;display:grid;gap:2px;font-size:13.5px}
.pf dl div{display:flex;justify-content:space-between;gap:10px}
.pf dt{color:var(--muted)}.pf dd{margin:0;font-weight:650;text-align:right}
.pf-about{margin:0 0 12px;font-size:14px;font-style:italic;color:var(--muted)}
.pf-contact{margin:0;font-size:14px}
.pf .btn{display:inline-flex}

/* расписание: панель над графиком и выгрузка */
.seg button{font:inherit;font-size:13px;font-weight:650;padding:6px 14px;border-radius:999px;
  color:var(--muted);background:none;border:none;cursor:pointer;transition:color .15s,background .15s}
.seg button:hover{color:var(--text);background:var(--raise2)}
.g-tip{font-size:13px}
.gantt-scroll{cursor:grab;scroll-behavior:auto;overscroll-behavior-x:contain}
.gantt-scroll.dragging{cursor:grabbing;user-select:none}
.g-cell.today{background:var(--soft)}
.g-export{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;justify-content:center;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:14px}
.g-exp{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
.g-exp i{font-style:normal;color:var(--muted)}
.g-exp .btn{text-decoration:none}

/* часовой пояс в шапке и кнопка «наверх» */
.tz-pick{padding:7px 8px;font-size:13px;border-radius:999px;max-width:108px}
#to-top{position:fixed;right:18px;bottom:18px;z-index:30;width:46px;height:46px;border-radius:50%;
  font-size:20px;font-weight:800;color:var(--on-accent);background:var(--grad);border:none;cursor:pointer;
  box-shadow:var(--shadow);animation:pop .25s cubic-bezier(.2,1.4,.4,1) both;transition:transform .15s}
#to-top:hover{transform:translateY(-4px)}
#to-top[hidden]{display:none}

/* =====================================================================
   Анимации
   ===================================================================== */
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes rowin{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes flash{0%{box-shadow:0 0 0 0 var(--accent)}60%{box-shadow:0 0 0 10px transparent}100%{box-shadow:none}}
@keyframes drift{0%{background-position:0% 0%,100% 0%,0 0}50%{background-position:18% 12%,82% 14%,0 0}
  100%{background-position:0% 0%,100% 0%,0 0}}
@keyframes sheen{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(220%) skewX(-18deg)}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes gradmove{to{background-position:200% 50%}}
@keyframes nowpulse{0%,100%{opacity:1}50%{opacity:.35}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}

/* фон медленно «дышит» */
body{background-size:140% 140%,140% 140%,auto;animation:drift 26s ease-in-out infinite}
/* появление блоков по мере прокрутки */
.rv{opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .5s ease var(--d,0ms),transform .5s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.tile.rv.in{transition:transform .25s ease,border-color .2s,box-shadow .25s,opacity .5s}
.flash{animation:flash .6s ease}
.result .msg,.result > .sum-grid,.result > .tbl-scroll{animation:fadeup .3s ease both}
/* шапка, логотип, герой */
.top{animation:fadeup .45s ease both}
.logo{transition:transform .2s,filter .2s}
.logo:hover{transform:scale(1.04) rotate(-1.5deg);filter:drop-shadow(0 0 10px var(--accent));text-decoration:none}
.hero h1{background:linear-gradient(90deg,#5cc8ff,#8b7bff,#ff8bd0,#5cc8ff);background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:gradmove 7s linear infinite,fadeup .6s ease both}
.hero p{animation:fadeup .6s ease .12s both}
.hero .btn{animation:fadeup .6s ease .22s both}
.h{animation:fadeup .4s ease both}
.crumbs{animation:fadeup .35s ease both}
/* кнопки: подъём, нажатие, блик */
.btn{position:relative;overflow:hidden;transition:transform .15s ease,background .15s,border-color .15s,box-shadow .2s,filter .15s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-120%) skewX(-18deg);pointer-events:none}
.btn.primary:hover::after{animation:sheen .8s ease}
/* плитки: значок покачивается, рамка светится */
.tile .emo{transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.tile:hover .emo{transform:scale(1.18) rotate(-6deg)}
.tile:active{transform:translateY(-2px) scale(.98)}
.tile .cap{transition:color .2s}
.tile:hover .cap{color:var(--accent)}
/* таблицы и карточки */
.tbl tbody tr{transition:background .15s}
.tbl tbody td{transition:background .15s,color .15s}
.sum-card,.ev,.card{transition:transform .2s ease,border-color .2s,box-shadow .25s}
.sum-card:hover,.ev:hover{transform:translateY(-3px);border-color:var(--accent)}
.ev.live .ev-tag{animation:nowpulse 1.6s ease-in-out infinite}
/* график: полоски вырастают, линия «сейчас» мигает */
.g-bar,.g-pre{transform-origin:left center;animation:grow .7s cubic-bezier(.2,.8,.2,1) both}
.g-bar:hover{filter:brightness(1.15);z-index:5}
.g-now{animation:nowpulse 1.8s ease-in-out infinite}
.g-dot{animation:pop .4s ease both}
/* поля ввода и переключатели */
.field input[type=text],.field select,.di-row input,.drop-in{transition:border-color .15s,box-shadow .2s,transform .15s}
.field input[type=text]:focus,.di-row input:focus,.drop-in:focus{transform:translateY(-1px)}
.segs span{transition:background .2s,color .2s,transform .12s}
.segs label:active span{transform:scale(.95)}
.segs input:checked + span{animation:pop .22s cubic-bezier(.2,1.4,.4,1)}
#theme{transition:transform .35s cubic-bezier(.2,1.4,.4,1),color .15s}
#theme:hover{transform:rotate(180deg)}
.lang{transition:color .15s,background .2s,transform .12s}
.lang:hover{transform:translateY(-1px)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav a:hover::after{transform:scaleX(1)}
.foot a{transition:color .15s,transform .15s;display:inline-block}
.foot-col a:hover{transform:translateX(3px)}
.shot img,.banner img{transition:transform .5s ease}
.shot:hover img{transform:scale(1.02)}
.said span{animation:pop .25s ease both}
/* после возврата на место (нажали переключатель) ничего не «въезжает» */
.no-anim *,.no-anim *::before,.no-anim *::after{animation:none!important}
.no-anim .rv{opacity:1;transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  body{animation:none}
  .rv{opacity:1;transform:none}
}

@media (max-width:880px){
  .tool-cols{grid-template-columns:1fr}
  .result.sticky{position:static;max-height:none}
  .pf-grid{grid-template-columns:repeat(2,1fr)}
  .how{grid-template-columns:1fr}
}
@media (max-width:640px){
  .tool-bar{grid-template-columns:1fr}
  .lv-segs label{flex:1 1 18%}
  .kn-sum{grid-template-columns:1fr 1fr;top:58px;gap:8px}
  .kn-sum .sum-card{padding:10px 12px}
  .kn-sum .sum-card dl div{font-size:13px}
  .pf-grid{grid-template-columns:1fr}
  .kn-tbl th:nth-child(4),.kn-tbl td:nth-child(4),.kn-tbl th:nth-child(5),.kn-tbl td:nth-child(5){font-size:13px}
  .tz-pick{max-width:86px}
  .di-row{grid-template-columns:24px minmax(0,1.2fr) minmax(0,1fr) 34px;gap:6px}
  .bk-row .bk-l{flex-basis:100%;margin-bottom:-4px}
  .g-tip{display:none}
}

/* город: страница шире, слева ввод, справа итог */
.main:has([data-tool=city]){max-width:1280px}
[data-tool=city] .tool-cols{grid-template-columns:minmax(0,540px) minmax(0,1fr)}
[data-tool=city] .tool-bar{max-width:900px;margin-left:auto;margin-right:auto}
.brows{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:0 18px}
.brows .brow{border-top:none;border-bottom:1px solid var(--line)}
.brow .step button,.bk-row .step button{width:38px;min-height:40px}
.brow .step input,.bk-row .step input{width:42px}
.bk-row{flex-wrap:nowrap}
.tool-out .tbl td:nth-child(3){white-space:nowrap}
.search{flex:1 1 110px;min-width:100px}
@media (max-width:880px){[data-tool=city] .tool-cols{grid-template-columns:1fr}}
@media (max-width:640px){.bk-row{flex-wrap:wrap}}
[data-tool=city] .tool-cols{grid-template-columns:minmax(0,600px) minmax(0,1fr)}
.brows{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.bname{overflow-wrap:anywhere;line-height:1.25}
@media (max-width:880px){[data-tool=city] .tool-cols{grid-template-columns:1fr}}
@media (max-width:640px){
  .bk-row{display:grid;grid-template-columns:auto auto 38px;justify-content:start;gap:2px 10px;
    grid-template-areas:"l1 l2 ." "s1 s2 d"}
  .bk-row > :nth-child(1){grid-area:l1}.bk-row > :nth-child(2){grid-area:s1}
  .bk-row > :nth-child(3){grid-area:l2}.bk-row > :nth-child(4){grid-area:s2}
  .bk-row > :nth-child(5){grid-area:d}
  .bk-row .bk-l{flex-basis:auto;margin:0}
}
.brows{grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr))}
.btn.small{white-space:normal;max-width:100%;text-align:center}
.tool-in,.tool-out{min-width:0}
@media (max-width:880px){[data-tool=city] .tool-cols,.tool-cols{grid-template-columns:minmax(0,1fr)}}
.g-head .g-name{background:var(--bg)}
.tbl-scroll:has(.narrow){max-width:380px}