/* Kordon v2: тёмный интерфейс в духе системных приложений. Inter, системные цвета тёмной темы, без декора. */
@font-face { font-family: Inter; src: url(../fonts/inter-cyrillic-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Inter; src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+20BD, U+2122, U+2191, U+2193, U+2212, U+2215; }

:root {
  --bg: #000; --s1: #111113; --s2: #1C1C1E; --s3: #2C2C2E; --line: rgba(255,255,255,.1);
  --t1: #F5F5F7; --t2: #A1A1A6; --t3: #6E6E73;
  --blue: #0A84FF; --green: #30D158; --orange: #FF9F0A; --red: #FF453A; --teal: #64D2FF;
  --r: 22px; --r2: 14px; --w: 1120px;
  --font: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--t1); font: 400 17px/1.47 var(--font); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: var(--w); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 780px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Панель навигации: полупрозрачная, закреплённая */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(0,0,0,.72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.bar-in { display: flex; align-items: center; gap: 24px; height: 52px; }
.brand { font-weight: 700; font-size: 19px; letter-spacing: -.02em; color: var(--t1); }
.brand:hover { text-decoration: none; }
.links { display: flex; gap: 22px; margin-left: auto; font-size: 13px; }
.links a { color: var(--t2); }
.links a:hover, .links a[aria-current=page] { color: var(--t1); text-decoration: none; }
.bar-cta { font-size: 13px; font-weight: 600; color: #fff; background: var(--blue); padding: 6px 13px; border-radius: 999px; }
.bar-cta:hover { text-decoration: none; filter: brightness(1.1); }
@media (max-width: 640px) { .links { gap: 16px; } .links a:nth-child(3) { display: none; } .bar-in { gap: 14px; } }

/* Первый экран */
.hero { padding: 84px 0 36px; text-align: center; }
.hero h1 { font-size: clamp(44px, 8.4vw, 88px); line-height: 1.04; font-weight: 700; letter-spacing: -.045em; margin: 0; }
.hero h1 span { color: var(--t3); }
.hero-sub { font-size: clamp(19px, 2.4vw, 24px); line-height: 1.35; color: var(--t2); max-width: 640px; margin: 22px auto 0; letter-spacing: -.02em; }
@media (max-width: 640px) { .hero { padding: 56px 0 26px; } }

/* Форма проверки */
.panel { max-width: 720px; margin: 0 auto; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.search { position: relative; }
.search-ico { position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--t3); pointer-events: none; }
.search input { width: 100%; height: 60px; border-radius: 16px; border: 1px solid var(--line); background: var(--s2); color: var(--t1); font: 500 20px/1 var(--font); letter-spacing: -.02em; padding: 0 18px 0 50px; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--t3); }
.search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(10,132,255,.25); }
.suggest { position: absolute; z-index: 5; left: 0; right: 0; top: 66px; background: var(--s2); border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.6); max-height: 320px; overflow: auto; }
.suggest button { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; background: none; border: 0; color: var(--t1); font: 500 17px/1.2 var(--font); text-align: left; padding: 12px 12px; border-radius: 10px; cursor: pointer; }
.suggest button:hover, .suggest button[aria-selected=true] { background: var(--s3); }
.suggest small { font-size: 13px; color: var(--t2); font-weight: 400; }
.suggest p { color: var(--t2); margin: 10px; font-size: 15px; }
.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px -22px 0; padding: 0 22px 2px; }
.pills::-webkit-scrollbar { display: none; }
.pill { flex: none; font: 500 15px/1 var(--font); color: var(--t1); background: var(--s2); border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; height: 40px; cursor: pointer; }
.pill:hover { background: var(--s3); }
.pill[aria-pressed=true] { background: var(--t1); color: #000; border-color: var(--t1); }
.pills.small .pill { height: 34px; font-size: 14px; padding: 0 13px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.fld { display: block; min-width: 0; }
.fld > span { display: block; font-size: 13px; color: var(--t2); margin: 0 0 6px 4px; }
.fld input, .fld select { width: 100%; min-width: 0; height: 50px; border-radius: 12px; border: 1px solid var(--line); background: var(--s2); color: var(--t1); font: 500 16px/1 var(--font); padding: 0 14px; -webkit-appearance: none; appearance: none; color-scheme: dark; }
.fld select { background: var(--s2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A1A1A6' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 34px; }
.fld input:focus, .fld select:focus { outline: none; border-color: var(--blue); }
.more { margin-top: 16px; border-top: 1px solid var(--line); }
.more summary { cursor: pointer; list-style: none; padding: 16px 4px 4px; color: var(--blue); font-size: 15px; font-weight: 500; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: " +"; }
.more[open] summary::after { content: " −"; }
.more-in .fld { margin-top: 12px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 4px; cursor: pointer; }
.switch-row span { font-size: 16px; }
.switch-row small { display: block; color: var(--t2); font-size: 13px; margin-top: 2px; }
.switch-row input { order: 2; flex: none; appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 999px; background: var(--s3); position: relative; cursor: pointer; transition: background .2s; margin: 0; }
.switch-row input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.switch-row input:checked { background: var(--green); }
.switch-row input:checked::after { transform: translateX(20px); }
.err { color: var(--red); font-size: 15px; margin: 14px 4px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 26px; border-radius: 14px; border: 0; font: 600 17px/1 var(--font); cursor: pointer; text-decoration: none; letter-spacing: -.01em; }
.btn:hover { text-decoration: none; }
.btn.primary { background: var(--blue); color: #fff; width: 100%; margin-top: 20px; }
.btn.primary:hover { filter: brightness(1.12); }
.btn.primary.inline { width: auto; margin-top: 26px; }
.btn.quiet { background: var(--s2); color: var(--t1); border: 1px solid var(--line); height: 46px; font-size: 15px; font-weight: 500; }
.btn.quiet:hover { background: var(--s3); }
.btn:disabled { opacity: .45; cursor: default; }

/* Результат */
.result { max-width: 720px; margin: 22px auto 0; scroll-margin-top: 70px; }
.r-card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.r-head { padding: 26px 24px 22px; }
.r-dest { font-size: clamp(34px, 6vw, 48px); line-height: 1.05; font-weight: 700; letter-spacing: -.035em; margin: 0; }
.r-dates { color: var(--t2); font-size: 15px; margin: 8px 0 0; font-variant-numeric: tabular-nums; }
.r-verdict { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.r-verdict::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent); }
.ok { color: var(--green); } .warn { color: var(--orange); } .visa { color: var(--teal); } .no { color: var(--red); } .unknown { color: var(--t2); }
.group-h { font-size: 13px; font-weight: 600; color: var(--t2); text-transform: uppercase; letter-spacing: .04em; margin: 0; padding: 18px 24px 8px; border-top: 1px solid var(--line); }
.list { list-style: none; margin: 0; padding: 0 24px 10px; }
.list li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--t1); }
.list li:last-child { border-bottom: 0; }
.todo li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.todo input { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--t3); margin: 1px 0 0; cursor: pointer; position: relative; }
.todo input:checked { background: var(--green); border-color: var(--green); }
.todo input:checked::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid #000; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.todo .due { display: block; font-size: 13px; color: var(--t2); margin-bottom: 2px; font-variant-numeric: tabular-nums; }
.todo li.checked label > span { color: var(--t3); text-decoration: line-through; }
.r-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px 24px 22px; border-top: 1px solid var(--line); }
@media (max-width: 560px) { .r-actions { grid-template-columns: 1fr; } }
.src-d { padding: 4px 24px 18px; font-size: 15px; }
.src-d summary { cursor: pointer; color: var(--t2); padding: 10px 0; }
.src { list-style: none; margin: 0; padding: 0; }
.src li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.src li span { color: var(--t3); font-size: 13px; flex: none; }
.fine { font-size: 13px; color: var(--t3); line-height: 1.5; }
.r-fine { padding: 0 4px; margin: 14px 0 0; }
.box { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin-top: 14px; }
.box h3 { font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin: 0 0 6px; }
.box p { color: var(--t2); margin: 0 0 16px; }
.box .fld { margin-bottom: 12px; }
.check-row { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--t2); margin: 4px 0 4px; cursor: pointer; }
.check-row input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); }
.box .btn.primary { margin-top: 14px; }
.offer { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; align-items: end; }
.offer .price { font-size: 34px; font-weight: 700; letter-spacing: -.03em; }
.offer .btn { grid-column: 1 / -1; margin-top: 10px; }
.ok-msg { color: var(--t1); margin: 0; }

/* Разделы */
.sec { padding: 96px 0 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sec h2, .page h2 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -.04em; margin: 0; }
.page h2 { font-size: 28px; margin: 44px 0 14px; }
.more-link { font-size: 17px; white-space: nowrap; }
.more-link::after { content: " ›"; }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -22px 18px; padding: 0 22px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; height: 36px; padding: 0 16px; border-radius: 999px; border: 0; background: transparent; color: var(--t2); font: 500 15px/1 var(--font); cursor: pointer; }
.tab:hover { color: var(--t1); }
.tab[aria-selected=true] { background: var(--s3); color: var(--t1); }
.dests { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(170px, 46%), 1fr)); }
@media (min-width: 720px) { .dests { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.dest { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 132px; padding: 16px; background: var(--s1); border: 1px solid var(--line); border-radius: 18px; color: var(--t1); overflow: hidden; transition: background .2s, transform .2s; }
.dest:hover { text-decoration: none; background: var(--s2); transform: scale(1.015); }
.dest[hidden] { display: none; }
.dest-code { position: absolute; top: 12px; right: 14px; font-size: 40px; font-weight: 800; letter-spacing: -.05em; color: rgba(255,255,255,.07); line-height: 1; }
.dest-name { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.dot-line { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; margin-top: 4px; }
.dot-line::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -22px; padding: 0 22px 4px; }
.rail::-webkit-scrollbar { display: none; }
@media (min-width: 1000px) { .rail { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; } }
.tile { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; min-height: 180px; padding: 22px; background: linear-gradient(160deg, #1C1C1E, #111113); border: 1px solid var(--line); border-radius: var(--r); color: var(--t1); }
.tile:hover { text-decoration: none; border-color: rgba(255,255,255,.22); }
.tile b { font-size: 21px; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
.tile span { color: var(--t2); font-size: 15px; }
.log { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.log li { display: grid; gap: 4px 28px; padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .log li { grid-template-columns: 130px 1fr; } .log li p { grid-column: 2; } }
.log time { color: var(--t3); font-size: 15px; font-variant-numeric: tabular-nums; }
.log a { color: var(--t1); font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.log p { margin: 0; color: var(--t2); font-size: 16px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--t2); font-weight: 300; font-size: 26px; line-height: .8; }
.faq details[open] summary::after { content: "−"; }
.faq p { color: var(--t2); margin: -6px 0 22px; }

/* Страницы */
.phero { padding: 64px 0 8px; }
.crumbs { margin: 0 0 10px; font-size: 15px; }
.crumbs a::before { content: "‹ "; }
.phero h1 { font-size: clamp(48px, 9vw, 96px); line-height: 1; font-weight: 700; letter-spacing: -.05em; margin: 0; }
.status-big { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; margin: 22px 0 0; letter-spacing: -.02em; }
.status-big::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.answer { font-size: clamp(19px, 2.3vw, 24px); line-height: 1.4; color: var(--t2); max-width: 760px; margin: 14px 0 0; letter-spacing: -.02em; }
.page { padding-bottom: 8px; }
.notice { background: rgba(255,159,10,.12); color: #FFD08A; border-radius: var(--r2); padding: 14px 16px; margin: 30px 0 0; font-size: 15px; }
.kv { margin: 0; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r2); padding: 0 18px; }
.kv-row { display: grid; gap: 4px 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.kv-row:last-child { border-bottom: 0; }
@media (min-width: 720px) { .kv-row { grid-template-columns: 200px 1fr; } }
.kv dt { color: var(--t2); font-size: 15px; } .kv dd { margin: 0; }
.kv ul, .notes { margin: 0; padding-left: 20px; } .notes li, .kv li { margin: 6px 0; }
.notes { color: var(--t1); }
.prose p { color: var(--t2); font-size: 18px; }

.foot { margin-top: 120px; border-top: 1px solid var(--line); background: var(--s1); }
.foot-in { padding: 34px 22px 46px; font-size: 13px; color: var(--t2); }
.foot-brand { color: var(--t1); font-weight: 700; font-size: 17px; margin: 0 0 6px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0; }
.foot nav a { color: var(--t2); }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: var(--s3); color: var(--t1); padding: 12px 18px; border-radius: 14px; font-size: 15px; z-index: 30; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.reveal { animation: rise .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media (min-width: 720px) { .pills { flex-wrap: wrap; overflow: visible; margin: 14px 0 0; padding: 0; } }
