/* ============================================================
   Столицы Европы — минимализм-flat, токены экосистемы zenqst
   ============================================================ */
:root{
  --bg:#F6F7FB; --card:#FFFFFF; --ink:#181A20; --muted:#6F7787; --line:#E7E9F2;
  --soft:#F1F3F9;
  --accent:#2D6CDF; --accent-ink:#fff;
  --ok-bg:#E7F7EF; --ok-ink:#0F7A4A;
  --bad-bg:#FDEBEB; --bad-ink:#B33232; --bad-line:#F2C8C8;
  --near-bg:#FFF3D6; --near-ink:#8A6D1A; --near-line:#F0DFAE;
  --danger:#D64545;
  --shadow:0 4px 20px rgba(24,26,32,.06);
  --radius:16px;
  --tap:#DEE9FB;
}
html[data-theme="dark"]{
  --bg:#0F1115; --card:#171A21; --ink:#E8EAF1; --muted:#8A93A6; --line:#272C37;
  --soft:#20242E;
  --accent:#4D82EE; --accent-ink:#fff;
  --ok-bg:#13321F; --ok-ink:#4CD488;
  --bad-bg:#3A1517; --bad-ink:#F48A8A; --bad-line:#5A2325;
  --near-bg:#3A2E0D; --near-ink:#E5B93C; --near-line:#5A4717;
  --danger:#F27D7D;
  --shadow:0 4px 20px rgba(0,0,0,.4);
  --tap:#2A3550;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.5;
  transition:background .25s,color .25s;
  -webkit-tap-highlight-color:transparent;
}
button{touch-action:manipulation}
.hidden{display:none !important}
.muted{color:var(--muted)}

.wrap{max-width:1020px;margin:0 auto;padding:0 20px}

/* ---------- шапка ---------- */
.top{
  position:sticky;top:0;z-index:20;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px max(20px,calc((100vw - 1020px)/2));
}
@supports (background:color-mix(in srgb,red 50%,transparent)) and ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .top{background:color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
}
.brand{display:flex;align-items:center;gap:11px;min-width:0;cursor:pointer;-webkit-user-select:none;user-select:none}
.brand-mark{width:34px;height:34px;flex:none}
.brand-mark svg{color:var(--accent);display:block}
.brand-name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-name span{display:block;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.2px}
.hdr-right{flex:none}
.ic{width:18px;height:18px;display:block}

/* ---------- кнопки ---------- */
.btn{
  font:inherit;font-weight:600;border:1px solid transparent;cursor:pointer;
  border-radius:12px;padding:10px 18px;background:var(--soft);color:var(--ink);
  transition:filter .15s,background .15s,transform .05s;
}
.btn:hover{filter:brightness(.98)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.ghost:hover{background:var(--soft)}
.btn.link{background:none;color:var(--muted);padding:4px 8px;font-weight:500}
.btn.link:hover{color:var(--accent);filter:none}
.btn.small{padding:8px 14px;font-size:13.5px}
.btn.big{width:100%;padding:14px 20px;font-size:16px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- карточки ---------- */
.cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:18px;padding:24px 0 8px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px;margin-bottom:18px;
}
.card-title{font-size:16px;font-weight:700;margin:0 0 4px}
.card-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.card-row .card-title{margin:0}
.field{margin:16px 0}
.field-label{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.6px;margin:0 0 8px}

/* сегмент режимов */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--soft);
  border:1px solid var(--line);border-radius:14px;padding:5px}
.seg-btn{
  font:inherit;font-weight:500;border:1px solid transparent;cursor:pointer;
  background:transparent;color:var(--muted);border-radius:10px;padding:9px 6px;
  text-align:center;transition:all .15s;
}
.seg-btn b{display:block;color:var(--ink);font-weight:600;font-size:14px}
.seg-btn span{font-size:11px;display:block;margin-top:1px}
.seg-btn.active{background:var(--card);border-color:var(--line);box-shadow:var(--shadow)}
.seg-btn.active b{color:var(--accent)}

/* опции наборов */
.optlist{display:grid;gap:8px}
.opt{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;
  width:100%;text-align:left;font:inherit;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:13px;padding:10px 14px;
  transition:border-color .15s,background .15s;
}
.opt:hover{border-color:var(--accent)}
.opt.active{border-color:var(--accent);background:var(--accent)}
.opt.disabled{opacity:.55;cursor:not-allowed}
.opt.disabled:hover{border-color:var(--line)}
.opt-t{font-weight:600;font-size:14.5px;color:var(--muted)}
.opt-d{grid-column:1;font-size:12.5px;color:var(--muted)}
.opt.active .opt-t{color:#fff}
.opt.active .opt-d{color:rgba(255,255,255,.82)}
.badge{
  grid-row:1 / span 2;grid-column:2;align-self:center;
  min-width:40px;text-align:center;padding:3px 8px;border-radius:99px;
  background:var(--soft);color:var(--muted);font-size:13px;font-weight:700;
}
.opt.active .badge{background:rgba(255,255,255,.18);color:#fff}

/* чипы количества */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font:inherit;font-weight:600;cursor:pointer;min-width:46px;text-align:center;
  background:var(--card);border:1.5px solid var(--line);color:var(--muted);
  border-radius:99px;padding:8px 14px;transition:all .15s;
}
.chip:hover{border-color:var(--accent)}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* хинт */
.hint{display:none;margin-top:12px;padding:10px 14px;border-radius:12px;
  background:var(--near-bg);color:var(--near-ink);font-size:13.5px}
.hint.show{display:block}

/* ---------- правая колонка ---------- */
.stat-list{display:grid;gap:6px;margin:10px 0 4px}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;
  padding:6px 2px;border-bottom:1px dashed var(--line);font-size:14px}
.stat-row b{font-weight:700}
.block-title{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;
  letter-spacing:.6px;margin:16px 0 8px}
.hard-list,.hist-list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.muted-empty{color:var(--muted);font-size:13px;line-height:1.45}
.hard-item{display:flex;align-items:center;gap:10px;font-size:13.5px}
.hard-name{width:170px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hard-bar{flex:1;height:7px;border-radius:99px;background:var(--soft);overflow:hidden}
.hard-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}
.hard-pct{width:38px;text-align:right;font-weight:600;color:var(--muted)}
.hist-list li{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px 14px;align-items:center;
  font-size:13px;padding:6px 2px;border-bottom:1px dashed var(--line)
}
.hist-list li:last-child{border-bottom:none}
.h-time{color:var(--muted);white-space:nowrap}
.h-mode{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-num{color:var(--muted)}
.h-pct{font-weight:700;color:var(--muted);text-align:right}
.h-pct.ok{color:var(--ok-ink)}

/* ---------- экран квиза ---------- */
.quiz-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  padding:18px 0 6px}
.qbar-wrap{display:flex;flex-direction:column;gap:4px}
.qbar{height:8px;border-radius:99px;background:var(--soft);overflow:hidden;border:1px solid var(--line)}
.qfill{height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .3s ease}
.qcount{font-size:12px;font-weight:600;text-align:center}
.score-chip{
  background:var(--soft);border:1px solid var(--line);color:var(--ink);
  font-size:12.5px;font-weight:600;border-radius:99px;padding:6px 12px;white-space:nowrap
}
.qcard{padding:26px 24px 24px}
.qtag{display:inline-block;font-size:12px;font-weight:600;color:var(--accent);
  text-transform:uppercase;letter-spacing:.8px;background:var(--tap);
  border-radius:99px;padding:4px 12px}
.qtitle{font-size:clamp(26px,5vw,38px);font-weight:700;margin:14px 0 2px;letter-spacing:-.5px}
.qsub{font-size:14.5px;margin:0 0 20px}

.cap-block{display:flex;gap:10px;max-width:560px}
.text-input{
  flex:1;font:inherit;font-size:18px;font-weight:600;color:var(--ink);
  background:var(--card);border:2px solid var(--line);border-radius:13px;
  padding:12px 16px;min-width:0;transition:border-color .15s;
}
.text-input::placeholder{color:var(--muted);font-weight:400;font-size:15px}
.text-input:focus{outline:none;border-color:var(--accent)}
.text-input.ok{border-color:var(--ok-ink);background:var(--ok-bg)}
.text-input.bad{border-color:var(--bad-ink);background:var(--bad-bg)}
.text-input:disabled{opacity:.85}

.map{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  height:min(52vh,460px);min-height:300px;background:var(--soft)}
.map-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;flex-wrap:wrap}
.map-hint{font-size:13px}
.map-btns{display:flex;gap:8px;flex:auto;justify-content:flex-end;flex-wrap:wrap}

.feedback{display:none;margin-top:18px;padding:13px 16px;border-radius:13px;
  font-size:15px;font-weight:600;line-height:1.45}
.feedback.fb-ok{display:block;background:var(--ok-bg);color:var(--ok-ink)}
.feedback.fb-bad{display:block;background:var(--bad-bg);color:var(--bad-ink);border:1px solid var(--bad-line)}
.feedback.fb-near{display:block;background:var(--near-bg);color:var(--near-ink);border:1px solid var(--near-line)}

#btnNext{margin-top:16px}

/* маркер-пин пользователя */
.qpin-wrap{background:transparent}
.qpin{display:block;width:18px;height:18px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* ---------- результаты ---------- */
.result-main{text-align:center;padding:30px 24px}
.res-circle{
  --p:0;
  width:150px;height:150px;margin:0 auto 16px;border-radius:50%;
  background:conic-gradient(var(--accent) calc(var(--p)*1%), var(--soft) 0);
  display:flex;align-items:center;justify-content:center;
}
.res-circle span{
  width:118px;height:118px;border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:800;letter-spacing:-1px;
}
.res-title{font-size:22px;font-weight:700;margin-bottom:4px}
.res-detail{font-size:14px}
.res-btns{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.wrong-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.wrong-item{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  background:var(--soft);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;font-size:14px}
.wrong-name{font-weight:700;white-space:nowrap}
.wrong-detail{color:var(--muted);text-align:right}
.wrong-detail b{color:var(--ink)}
.all-good{color:var(--ok-ink);font-weight:600;padding:8px 2px}

/* ---------- вкладки ---------- */
.tabs{display:flex;gap:8px;padding:18px 0 0}
.tab{
  font:inherit;font-weight:600;font-size:14px;cursor:pointer;
  color:var(--muted);background:transparent;border:1.5px solid var(--line);
  border-radius:99px;padding:8px 20px;transition:all .15s;
}
.tab:hover{border-color:var(--accent)}
.tab.active{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- справочник ---------- */
.browse-side{display:grid;gap:18px;min-width:0;align-content:start}
.browse-map{height:min(66vh,560px);min-height:340px}
.b-empty{color:var(--muted);font-size:13.5px;line-height:1.5;padding:4px 0}
.b-flag-big{font-size:46px;line-height:1}
.b-country{font-size:22px;font-weight:700;margin-top:8px;letter-spacing:-.3px}
.b-cap-big{font-size:14.5px;color:var(--muted);margin:2px 0 10px}
.b-cap-big b{color:var(--ink)}
.b-train{margin-top:14px}
.search-input{
  width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:var(--card);border:2px solid var(--line);border-radius:12px;
  padding:9px 13px;margin-bottom:10px;transition:border-color .15s;
}
.search-input::placeholder{color:var(--muted)}
.search-input:focus{outline:none;border-color:var(--accent)}
.b-list{max-height:440px;overflow-y:auto;display:grid;gap:4px;padding-right:2px}
.b-item{
  display:grid;grid-template-columns:auto 1fr auto;gap:3px 10px;align-items:baseline;
  width:100%;text-align:left;font:inherit;color:var(--ink);cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:10px;padding:7px 10px;
  transition:background .12s,border-color .12s;
}
.b-item:hover{background:var(--soft)}
.b-item.sel{background:var(--tap);border-color:var(--accent)}
.b-flag{font-size:15px}
.b-name{font-weight:600;font-size:13.5px}
.b-cap{font-size:12.5px;color:var(--muted);text-align:right}

/* ---------- подвал ---------- */
.foot{color:var(--muted);font-size:12.5px;padding:6px 0 26px;text-align:center}

/* ---------- Leaflet ---------- */
.leaflet-container{font-family:inherit;font-size:13px;z-index:0}
.leaflet-popup-content-wrapper{border-radius:12px}
.leaflet-control-zoom a{color:var(--ink) !important;background:var(--card) !important}
.leaflet-control-attribution{
  background:rgba(255,255,255,.8) !important;font-size:10px;
  color:#555 !important;
}
html[data-theme="dark"] .leaflet-tile{
  filter:brightness(.82) contrast(1.05) saturate(.72) invert(1) hue-rotate(180deg);
}
html[data-theme="dark"] .leaflet-container{background:#1a1d24}
html[data-theme="dark"] .leaflet-control-attribution{background:rgba(20,22,28,.85) !important;color:#98a !important}

/* ---------- адаптив ---------- */
@media (max-width:880px){
  .cols{grid-template-columns:1fr}
  .col-side{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .col-side .card{margin-bottom:0}
  .browse-map{height:min(52vh,460px)}
  .b-list{max-height:none}
}
@media (max-width:620px){
  .top{padding:12px 16px}
  .wrap{padding:0 14px}
  .tabs{padding-top:14px}
  .col-side{grid-template-columns:1fr}
  .col-side .card{margin-bottom:18px}
  .card{padding:16px}
  .quiz-head{grid-template-columns:auto 1fr;gap:10px}
  .score-chip{grid-column:1 / -1;justify-self:end}
  .qcard{padding:20px 16px}
  .feedback{font-size:14.5px}
  .map{height:min(55vh,380px)}
  .browse-map{height:min(55vh,380px);min-height:300px}
  .b-list{max-height:320px}
  .map-actions{gap:8px}
  .map-hint{flex:1 1 100%}
  .map-btns{justify-content:flex-start}
  .wrong-item{flex-direction:column;align-items:flex-start;gap:4px}
  .wrong-detail{text-align:left}
  .hist-list li{grid-template-columns:auto minmax(0,1fr) auto}
  .h-num{display:none}
  .hard-name{flex:1;min-width:0;width:auto}
  .hard-pct{width:34px}
  .res-btns .btn{flex:1 1 auto}
  .b-item{padding:6px 8px}
  .b-cap{font-size:12px}
}
@media (max-width:420px){
  .top{padding:10px 12px}
  .wrap{padding:0 12px}
  .brand-name{font-size:15px}
  .brand-name span{display:none}
  .seg{padding:4px;gap:6px}
  .seg-btn{padding:12px 4px}
  .seg-btn span{display:none}
  .cap-block{flex-direction:column;max-width:none}
  .cap-block .btn{width:100%;padding:12px 18px}
  .b-list{max-height:260px}
  .hard-name{min-width:96px}
}