/* ============================================================
   Классификация средств размещения — Республика Абхазия
   Дизайн: чистый, современный, «морско-горный» (бирюза + песок).
   Без внешних зависимостей. Работает на любом хостинге и из файла.
   ============================================================ */

:root {
  --sea-900:#0a3d3a; --sea-800:#0d5350; --sea-700:#0f6f6a;
  --sea-600:#13918a; --sea-500:#1aab9f; --sea-400:#46c7bb;
  --sea-100:#d6f3ef; --sea-50:#eafaf8;
  --sand-500:#e0a458; --sand-400:#eab873; --gold:#f5b942;
  --ink:#16302e; --ink-soft:#3f5b58; --muted:#6f8784;
  --line:#e3ecea; --line-soft:#eef4f3;
  --bg:#f4f8f7; --card:#ffffff;
  --ok:#1f9d6b; --ok-bg:#e7f6ee;
  --warn:#c7791a; --warn-bg:#fdf3e3;
  --danger:#c83f3f; --danger-bg:#fdecec;
  --shadow:0 10px 30px -12px rgba(13,83,80,.25);
  --shadow-sm:0 3px 10px -4px rgba(13,83,80,.20);
  --radius:18px; --radius-sm:12px;
  --font:'Segoe UI', system-ui, -apple-system, 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--font); color:var(--ink);
  background:var(--bg);
  background-image:
    radial-gradient(1200px 500px at 80% -10%, rgba(70,199,187,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(245,185,66,.10), transparent 55%);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3 { line-height:1.2; margin:0; }
p { margin:0 0 .6em; }
small { font-size:.82em; }
.muted { color:var(--muted); font-size:.92rem; margin:0 0 1rem; }
.hint { color:var(--muted); font-size:.84rem; margin:.45rem 0 0; }

/* ───────── ШАПКА ───────── */
.hero {
  color:#fff; padding:46px 20px 60px;
  background:linear-gradient(135deg, var(--sea-800) 0%, var(--sea-600) 55%, var(--sea-500) 100%);
  position:relative; overflow:hidden;
}
.hero__inner { max-width:1180px; margin:0 auto; position:relative; z-index:1; }
.hero__badge {
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25);
  padding:5px 14px; border-radius:999px; margin-bottom:16px; backdrop-filter:blur(4px);
}
.hero__title { font-size:clamp(1.7rem, 4vw, 3rem); font-weight:800; letter-spacing:-.01em; }
.hero__subtitle { font-size:clamp(1rem,1.6vw,1.18rem); max-width:760px; margin:14px 0 0; color:rgba(255,255,255,.92); }
.hero__note { margin-top:18px; font-size:.86rem; color:rgba(255,255,255,.78); max-width:760px; }

/* ───────── РАСКЛАДКА ───────── */
.layout {
  max-width:1180px; margin:-34px auto 0; padding:0 20px 120px;
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start;
  position:relative; z-index:2;
}
.content { display:flex; flex-direction:column; gap:22px; min-width:0; }

/* ───────── КАРТОЧКИ ───────── */
.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.card__head {
  display:flex; align-items:center; gap:14px;
  padding:18px 24px; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,#fff,var(--sea-50));
}
.card__head h2 { font-size:1.16rem; font-weight:700; }
.card__body { padding:22px 24px; }
.card--result { border-color:var(--sea-400); box-shadow:var(--shadow); }
.step {
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  display:grid; place-items:center; font-weight:800; font-size:.95rem;
  background:var(--sea-600); color:#fff; box-shadow:var(--shadow-sm);
}
.step--ok { background:var(--ok); }

/* ───────── ВЫБОР ТИПА ───────── */
.type-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.type-tile {
  text-align:left; cursor:pointer; font-family:inherit;
  border:1.5px solid var(--line); background:#fff; border-radius:var(--radius-sm);
  padding:16px; display:flex; flex-direction:column; gap:4px; transition:.18s;
}
.type-tile:hover { border-color:var(--sea-400); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.type-tile.is-active { border-color:var(--sea-600); background:var(--sea-50); box-shadow:0 0 0 3px var(--sea-100); }
.type-tile__icon { font-size:1.7rem; line-height:1; }
.type-tile__name { font-weight:700; font-size:.98rem; }
.type-tile__desc { font-size:.8rem; color:var(--muted); }

.claim-row { margin-top:6px; padding-top:18px; border-top:1px dashed var(--line); }
.field-label { display:block; font-weight:600; font-size:.95rem; margin-bottom:10px; }
.claim-stars { display:flex; gap:8px; flex-wrap:wrap; }
.claim-star {
  cursor:pointer; font-family:inherit; font-weight:700; font-size:.95rem;
  border:1.5px solid var(--line); background:#fff; color:var(--ink-soft);
  padding:9px 16px; border-radius:10px; transition:.15s;
}
.claim-star:hover { border-color:var(--sand-400); }
.claim-star.is-active { background:var(--gold); border-color:var(--gold); color:#5a3d00; box-shadow:var(--shadow-sm); }

/* переключатель санатория */
.switch-row { display:flex; align-items:center; gap:12px; margin-top:18px; cursor:pointer; user-select:none; }
.switch-row input { position:absolute; opacity:0; pointer-events:none; }
.switch { flex:0 0 auto; width:44px; height:26px; border-radius:999px; background:var(--line); position:relative; transition:.2s; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:.2s; }
.switch-row input:checked + .switch { background:var(--sea-500); }
.switch-row input:checked + .switch::after { transform:translateX(18px); }
.switch-row__text { font-size:.95rem; font-weight:600; }
.switch-row__text small { display:block; font-weight:400; color:var(--muted); }

/* ───────── CALLOUT ───────── */
.callout { border-radius:var(--radius-sm); padding:12px 16px; font-size:.9rem; background:var(--sea-50); border:1px solid var(--sea-100); color:var(--ink-soft); margin-bottom:16px; }
.callout--warn { background:var(--warn-bg); border-color:#f4dcb0; color:#8a5a13; }

/* ───────── CHECK-LIST (да/нет) ───────── */
.check-list { display:flex; flex-direction:column; gap:10px; }
.check-item {
  display:flex; gap:12px; align-items:flex-start; padding:13px 15px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff; transition:.15s; cursor:pointer;
}
.check-item:hover { border-color:var(--sea-300,#9fded6); background:var(--sea-50); }
.check-item input { margin-top:3px; width:20px; height:20px; accent-color:var(--sea-600); flex:0 0 auto; cursor:pointer; }
.check-item__body { min-width:0; }
.check-item__code { font-size:.74rem; font-weight:700; color:var(--sea-600); letter-spacing:.03em; }
.check-item__text { font-size:.92rem; }
.check-item__help { font-size:.82rem; color:var(--muted); margin-top:2px; }
.check-list--danger .check-item input { accent-color:var(--danger); }
.check-list--danger .check-item.is-on { border-color:var(--danger); background:var(--danger-bg); }
.check-list--warn .check-item input { accent-color:var(--warn); }
.check-list--warn .check-item.is-on { border-color:var(--warn); background:var(--warn-bg); }
.check-item.is-on { border-color:var(--sea-500); background:var(--sea-50); }

/* ───────── TOOLBAR / КНОПКИ ───────── */
.toolbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.btn {
  font-family:inherit; cursor:pointer; border:none; border-radius:10px;
  padding:10px 16px; font-weight:600; font-size:.9rem; transition:.15s;
}
.btn--ghost { background:var(--sea-50); color:var(--sea-700); border:1px solid var(--line); }
.btn--ghost:hover { background:var(--sea-100); }
.btn--primary { background:var(--sea-600); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover { background:var(--sea-700); }
.btn--sm { padding:8px 14px; font-size:.85rem; }

/* ───────── БЛОКИ ───────── */
.block { border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:14px; overflow:hidden; background:#fff; }
.block__head {
  display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; user-select:none;
  background:linear-gradient(180deg,#fff,#fbfdfd);
}
.block__num { flex:0 0 auto; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-weight:800; font-size:.85rem; background:var(--sea-100); color:var(--sea-700); }
.block__title { flex:1; min-width:0; font-weight:700; font-size:.98rem; }
.block__title small { display:block; font-weight:400; font-size:.78rem; color:var(--muted); }
.block__score { flex:0 0 auto; font-weight:800; font-size:.95rem; color:var(--sea-700); white-space:nowrap; }
.block__score .max { color:var(--muted); font-weight:600; font-size:.82rem; }
.block__chevron { flex:0 0 auto; transition:.2s; color:var(--muted); }
.block.is-open .block__chevron { transform:rotate(180deg); }
.block__bar { height:4px; background:var(--line-soft); }
.block__fill { height:100%; width:0; background:linear-gradient(90deg,var(--sea-500),var(--sea-400)); transition:width .25s; }
.block__min { display:none; }
.block.has-min .block__min {
  display:inline-block; font-size:.72rem; font-weight:700; padding:2px 8px; border-radius:999px; margin-left:8px;
}
.block__min.ok { background:var(--ok-bg); color:var(--ok); }
.block__min.bad { background:var(--danger-bg); color:var(--danger); }
.block__body { padding:6px 16px 16px; display:none; }
.block.is-open .block__body { display:block; }

/* критерий */
.crit { padding:14px 0; border-top:1px solid var(--line-soft); }
.crit:first-child { border-top:none; }
.crit__top { display:flex; justify-content:space-between; gap:14px; align-items:baseline; }
.crit__label { font-size:.92rem; }
.crit__code { font-weight:700; color:var(--sea-600); font-size:.8rem; margin-right:6px; }
.crit__help { font-size:.8rem; color:var(--muted); margin-top:3px; }
.crit__valwrap { flex:0 0 auto; text-align:right; white-space:nowrap; }
.crit__val { font-weight:800; font-size:1.05rem; color:var(--sea-700); min-width:1.6em; display:inline-block; }
.crit__valmax { color:var(--muted); font-weight:600; font-size:.82rem; }
.crit__slider { display:flex; align-items:center; gap:12px; margin-top:10px; }
.crit__slider input[type=range] { flex:1; }
.stepbtn {
  width:30px; height:30px; flex:0 0 auto; border-radius:8px; border:1px solid var(--line);
  background:#fff; color:var(--sea-700); font-weight:800; font-size:1.1rem; cursor:pointer; line-height:1; transition:.15s;
}
.stepbtn:hover { background:var(--sea-50); border-color:var(--sea-400); }

/* range styling */
input[type=range] { -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:var(--sea-100); outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--sea-600); cursor:pointer; border:3px solid #fff; box-shadow:var(--shadow-sm); transition:.12s; }
input[type=range]::-webkit-slider-thumb:hover { background:var(--sea-700); transform:scale(1.08); }
input[type=range]::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--sea-600); cursor:pointer; border:3px solid #fff; }

/* ───────── ФАКТИЧЕСКОЕ СОСТОЯНИЕ ───────── */
.phys-list { display:flex; flex-direction:column; gap:8px; }
.phys-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); }
.phys-row__name { flex:1; font-size:.92rem; }
.phys-row.key .phys-row__name::after { content:" ★"; color:var(--gold); font-weight:700; }
.phys-row.key { background:var(--sea-50); border-color:var(--sea-100); }
.seg { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden; flex:0 0 auto; }
.seg button { width:38px; height:34px; border:none; background:#fff; cursor:pointer; font-weight:700; font-family:inherit; color:var(--ink-soft); border-left:1px solid var(--line); transition:.12s; }
.seg button:first-child { border-left:none; }
.seg button:hover { background:var(--sea-50); }
.seg button.is-active { background:var(--sea-600); color:#fff; }

/* ───────── САНАТОРНЫЙ РЕЗУЛЬТАТ ───────── */
.sk-result { margin-top:16px; padding:14px 16px; border-radius:var(--radius-sm); background:var(--sea-50); border:1px solid var(--sea-100); font-weight:600; }
.sk-result b { color:var(--sea-700); }

/* ───────── SIDEBAR / ПАНЕЛЬ РЕЗУЛЬТАТА ───────── */
.sidebar { position:sticky; top:18px; display:flex; flex-direction:column; gap:16px; }
.result-panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
.result-panel__label { padding:12px 18px; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line-soft); }
.verdict { padding:22px 18px; text-align:center; background:linear-gradient(180deg,var(--sea-50),#fff); }
.verdict__stars { font-size:2.6rem; font-weight:800; color:var(--gold); letter-spacing:.05em; line-height:1; min-height:2.6rem; }
.verdict__stars.none { color:var(--muted); font-size:1.4rem; }
.verdict__text { margin-top:8px; font-weight:700; font-size:1rem; color:var(--ink); }
.verdict.is-ok .verdict__text { color:var(--ok); }
.verdict.is-none .verdict__text { color:var(--danger); }

.gauge { padding:16px 18px; border-top:1px solid var(--line-soft); }
.gauge__row { display:flex; justify-content:space-between; font-size:.88rem; margin-bottom:8px; }
.gauge__bar { height:10px; border-radius:999px; background:var(--line-soft); overflow:hidden; }
.gauge__fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--sea-600),var(--sea-400),var(--gold)); transition:width .3s; }

.status-list { list-style:none; margin:0; padding:14px 18px; border-top:1px solid var(--line-soft); display:flex; flex-direction:column; gap:9px; }
.status-list li { display:flex; gap:9px; align-items:flex-start; font-size:.85rem; }
.status-list .ic { flex:0 0 auto; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:.7rem; font-weight:800; color:#fff; margin-top:1px; }
.st-ok .ic { background:var(--ok); }
.st-bad .ic { background:var(--danger); }
.st-warn .ic { background:var(--warn); }
.st-neutral .ic { background:var(--muted); }
.st-bad { color:#9a2d2d; }
.st-warn { color:#8a5a13; }

.thresholds { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:14px 18px; }
.thresholds h4 { font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 10px; }
.thresholds table { width:100%; border-collapse:collapse; font-size:.85rem; }
.thresholds td { padding:5px 0; }
.thresholds td:last-child { text-align:right; color:var(--muted); }
.thresholds tr.is-current { font-weight:800; color:var(--sea-700); }
.thresholds tr.is-current td:last-child { color:var(--sea-600); }

/* ───────── ИТОГ (полный) ───────── */
.result-full__verdict { display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding:18px 20px; border-radius:var(--radius-sm); margin-bottom:18px; }
.result-full__verdict.ok { background:var(--ok-bg); border:1px solid #bfe6cf; }
.result-full__verdict.none { background:var(--danger-bg); border:1px solid #f3c9c9; }
.result-full__big { font-size:2.4rem; font-weight:800; color:var(--gold); }
.result-full__big.none { color:var(--danger); font-size:1.5rem; }
.result-full__cap { font-size:1.1rem; font-weight:700; }
.result-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-bottom:18px; }
.result-cell { border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; }
.result-cell__k { font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.result-cell__v { font-weight:700; font-size:1.02rem; margin-top:3px; }
.result-cell__v.ok { color:var(--ok); } .result-cell__v.bad { color:var(--danger); } .result-cell__v.warn { color:var(--warn); }
.reason-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.reason-list li { padding:11px 14px; border-radius:var(--radius-sm); font-size:.9rem; border-left:4px solid var(--muted); background:#fafcfb; }
.reason-list li.bad { border-color:var(--danger); background:var(--danger-bg); }
.reason-list li.warn { border-color:var(--warn); background:var(--warn-bg); }
.reason-list li.ok { border-color:var(--ok); background:var(--ok-bg); }
.block-mini { width:100%; border-collapse:collapse; font-size:.85rem; margin-top:8px; }
.block-mini th, .block-mini td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--line-soft); }
.block-mini th { color:var(--muted); font-weight:600; font-size:.78rem; text-transform:uppercase; }
.block-mini td.num { text-align:right; font-variant-numeric:tabular-nums; }
.block-mini .bad { color:var(--danger); font-weight:700; }
.subhead { font-size:1rem; font-weight:700; margin:22px 0 4px; }
.subhead--danger { color:var(--danger); }
.subhead--warn { color:var(--warn); }
.subhead:first-child { margin-top:0; }

.page-foot { color:var(--muted); font-size:.82rem; padding:8px 4px 0; }

/* ───────── МОБИЛЬНАЯ ПЛАШКА ───────── */
.mobile-bar { display:none; }

/* ───────── АДАПТИВ ───────── */
@media (max-width:980px) {
  .layout { grid-template-columns:1fr; }
  .sidebar { position:static; order:-1; }
  .type-grid { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .hero { padding:32px 16px 56px; }
  .layout { padding:0 14px 110px; }
  .card__body { padding:18px 16px; }
  .card__head { padding:15px 16px; }
  .sidebar { display:none; }
  .mobile-bar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    align-items:center; justify-content:space-between; gap:12px;
    background:#fff; border-top:1px solid var(--line); padding:10px 16px;
    box-shadow:0 -6px 20px -8px rgba(13,83,80,.25);
  }
  .mobile-bar__main { display:flex; align-items:center; gap:12px; }
  .mobile-bar__stars { font-size:1.4rem; font-weight:800; color:var(--gold); }
  .mobile-bar__pts { font-size:.9rem; color:var(--ink-soft); }
  .crit__slider { flex-wrap:wrap; }
}

/* ───────── ПЕЧАТЬ ───────── */
@media print {
  .no-print, .hero__note, .toolbar { display:none !important; }
  body { background:#fff; }
  .hero { background:var(--sea-800) !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; padding:20px; }
  .layout { display:block; margin:0; padding:0; max-width:100%; }
  .card { box-shadow:none; border:1px solid #ccc; page-break-inside:avoid; margin-bottom:12px; }
  .block { page-break-inside:avoid; }
  .card--result { border-color:#999; }
}