/* Клиентски екрани — активация и панел. */

@font-face {
  font-family: Manrope;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/manrope-var.woff2) format('woff2-variations');
}

:root{
  --navy:#0B2A45; --deep:#071B2E; --teal:#14B8A6; --mint:#3DDC97;
  --paper:#fff; --ground:#F1F5F8; --rule:#E3EAF0; --muted:#61798C;
  --danger:#D2453F; --warn:#E08A2B; --ok:#12A26F;
  --shadow:0 2px 6px rgba(7,27,46,.05), 0 22px 44px -28px rgba(7,27,46,.38);
}
*{box-sizing:border-box}
/* display в класовете бие [hidden] — затова е с !important. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--navy);
  font:500 17px/1.6 Manrope,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.028em;line-height:1.1}
h1{font-size:clamp(27px,4.6vw,38px)}
h2{font-size:22px}
h3{font-size:18px;letter-spacing:-.02em}
p{margin:0}
a{color:#0E8F92}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px}

.bar{background:var(--deep);color:#fff;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 20px;padding-top:max(14px,env(safe-area-inset-top))}
.bar-brand svg{height:21px;width:auto;display:block}
.bar-nav{display:flex;gap:18px;align-items:center}
.bar-nav a{color:#B9CEDC;text-decoration:none;font-weight:700;font-size:14.5px}
.bar-nav a:hover{color:#fff}

.page{min-height:70vh;padding:0 0 60px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.wrap.narrow{max-width:620px}
.page-foot{padding:22px 20px 40px;text-align:center;color:#8399A9;font-size:13px}

.hero-mini{padding:34px 0 22px}
.eyebrow{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#0E8F92;font-weight:800}
.hero-mini h1{margin-top:10px}
.lead{color:var(--muted);margin-top:12px;font-size:16.5px}

.card{background:var(--paper);border:1px solid var(--rule);border-radius:18px;
  padding:24px;box-shadow:var(--shadow)}
.card + .card{margin-top:14px}

.form .field{margin-bottom:18px}
.form label{display:block;font-weight:800;font-size:14.5px;margin-bottom:7px}
.form input[type=text],.form input[type=email],.form input[type=password],
.form input[type=number],.form input[type=tel],.form textarea,.form select{
  width:100%;padding:14px 15px;border:2px solid var(--rule);border-radius:12px;
  font:600 16.5px Manrope,system-ui,sans-serif;color:var(--navy);background:#fff}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--teal);outline:0}
.form textarea{min-height:92px;resize:vertical;line-height:1.5}
.form input.big{font-size:22px;letter-spacing:.09em;font-weight:800;text-align:center}
.form small{display:block;margin-top:6px;color:var(--muted);font-size:13.5px;line-height:1.45}
.form hr{border:0;border-top:1px solid var(--rule);margin:22px 0}
.sect{margin:0 0 16px}
.sect b{display:block;font-weight:800;font-size:15.5px}
.sect span{display:block;color:var(--muted);font-size:14px;margin-top:3px}
.fineprint{margin-top:14px;color:var(--muted);font-size:13px;text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;
  padding:16px 22px;border-radius:999px;border:2px solid transparent;cursor:pointer;
  font:800 16.5px Manrope,system-ui,sans-serif;letter-spacing:-.01em;text-decoration:none}
.btn-primary{background:var(--teal);color:#04262A}
.btn-primary:hover{background:var(--mint)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--navy)}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{width:auto;padding:10px 18px;font-size:14.5px}

.alert{border-radius:14px;padding:15px 18px;margin-bottom:18px;font-size:15.5px}
.alert.err{background:#FDECEB;color:#7A1C18;border:1px solid #F3C9C6}
.alert.ok{background:#E6F7F0;color:#0B5E42;border:1px solid #B9E6D4}
.alert.warn{background:#FDF3E4;color:#7A5312;border:1px solid #F0DCB8}
.alert p+p{margin-top:6px}

.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{background:#fff;border:1px solid var(--rule);border-radius:999px;
  padding:6px 13px;font-size:13.5px;font-weight:700;color:var(--muted)}
.chip.ok{border-color:#B9E6D4;background:#E6F7F0;color:#0B5E42}
.chip.hot{border-color:#F3C9C6;background:#FDECEB;color:#9B2B26}

.help{margin-top:26px;padding:22px 24px;background:#fff;border:1px solid var(--rule);border-radius:18px}
.help h3{margin-bottom:10px}
.help ul{margin:0 0 16px;padding-left:20px;color:var(--muted);font-size:15px}
.help li{margin-bottom:7px}

/* ── Списък с устройства ───────────────────────────────── */
.dev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.dev{background:#fff;border:1px solid var(--rule);border-radius:18px;padding:20px 22px;
  display:grid;gap:10px;text-decoration:none;color:inherit;box-shadow:var(--shadow);
  transition:transform .15s ease,border-color .15s ease}
.dev:hover{transform:translateY(-2px);border-color:var(--navy)}
.dev .row1{display:flex;align-items:center;gap:13px}
.dev .ava{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;background:var(--ground)}
.dev .ava.ph{display:grid;place-items:center;color:#fff;font-weight:800;font-size:20px;
  background:linear-gradient(140deg,#11395C,#0E8F92)}
.dev .nm{font-weight:800;font-size:18px;letter-spacing:-.02em;line-height:1.15}
.dev .tp{color:var(--muted);font-size:13.5px}
.dev .meta{display:flex;gap:8px;flex-wrap:wrap}
.dev .last{color:var(--muted);font-size:13.5px}

.empty{background:#fff;border:1px dashed var(--rule);border-radius:18px;padding:46px 26px;text-align:center}
.empty h3{margin-bottom:8px}
.empty p{color:var(--muted);margin-bottom:20px}

/* ── Редактор ──────────────────────────────────────────── */
.editor{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.vis{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.vis label{display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;
  border:2px solid var(--rule);border-radius:10px;padding:9px 6px;font-size:13px;font-weight:700;
  color:var(--muted);text-align:center;margin:0;line-height:1.2}
.vis input{position:absolute;opacity:0;pointer-events:none}
.vis input:checked + span{color:var(--navy)}
.vis label:has(input:checked){border-color:var(--teal);background:#E9F9F6;color:var(--navy)}
.vis label.locked{opacity:.55;cursor:not-allowed}

.lost-box{border:2px solid var(--rule);border-radius:18px;padding:22px 24px;background:#fff}
.lost-box.on{border-color:var(--danger);background:#FDECEB}
.lost-box h3{display:flex;align-items:center;gap:10px}
.dotr{width:10px;height:10px;border-radius:50%;background:var(--danger);
  animation:bk 1.6s ease-in-out infinite}
@keyframes bk{0%,100%{opacity:1}50%{opacity:.25}}

.contacts .c{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;
  border:1px solid var(--rule);border-radius:14px;margin-bottom:12px}
@media (max-width:560px){.contacts .c{grid-template-columns:1fr}}
.contacts .c .full{grid-column:1/-1}

.sticky-save{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(241,245,248,0),var(--ground) 40%);
  padding:20px 0 max(20px,env(safe-area-inset-bottom));margin-top:8px;z-index:20}

.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 14px;-webkit-overflow-scrolling:touch}
.tabs a{white-space:nowrap;padding:9px 16px;border-radius:999px;text-decoration:none;
  font-weight:700;font-size:14.5px;color:var(--muted);background:#fff;border:1px solid var(--rule)}
.tabs a.on{background:var(--navy);color:#fff;border-color:var(--navy)}

.kvs{display:grid;gap:0}
.kvs .r{display:flex;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--rule)}
.kvs .r:first-child{border-top:0}
.kvs .r span{color:var(--muted)}
.kvs .r b{font-weight:800;text-align:right}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ── Известия в браузъра ───────────────────────────────── */
.push-card { margin-bottom: 16px; border-left: 4px solid var(--teal); }
.push-state { margin: 12px 0 0; font-weight: 800; font-size: 15px; color: var(--muted); }
.push-state.ok { color: var(--ok); }
.push-state.warn { color: #B26200; }
.push-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.push-note { margin-top: 12px; color: var(--muted); font-size: 13.5px; }
.push-ios { margin-top: 14px; background: var(--ground); border-radius: 12px; padding: 16px 18px; }
.push-ios b { display: block; font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.push-ios ol { margin: 0 0 10px; padding-left: 20px; color: var(--muted); font-size: 14.5px; }
.push-ios li { margin-bottom: 5px; }
.push-ios span { color: var(--muted); font-size: 13px; }


/* ── Инсталиране на приложението ───────────────────────── */
.install-card { margin-bottom: 16px; border-left: 4px solid var(--navy); }
.install-head { display: flex; gap: 16px; align-items: flex-start; }
.install-icon { border-radius: 14px; flex: none; box-shadow: var(--shadow); }
.install-head h2 { font-size: 20px; }
.install-head p { color: var(--muted); font-size: 15px; margin-top: 5px; }
.install-why {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.install-why li {
  background: var(--ground); border-radius: 999px; padding: 7px 14px;
  font-size: 13.5px; font-weight: 700; color: var(--muted);
}
.install-card .btn { margin-top: 16px; }
.install-steps { margin-top: 16px; background: var(--ground); border-radius: 12px; padding: 16px 18px; }
.install-steps b { display: block; font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.install-steps ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; }
.install-steps li { margin-bottom: 5px; }
.install-steps span { display: block; margin-top: 10px; color: var(--muted); font-size: 13px; }
.install-done {
  background: #E6F7F0; border-radius: 12px; padding: 16px 18px; color: #0B5E42;
}
.install-done b { display: block; font-weight: 800; font-size: 15.5px; }
.install-done span { font-size: 14px; }

/* ── Съгласия ──────────────────────────────────────────── */
.consents { display: grid; gap: 12px; margin: 20px 0 22px; }
.consent { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; line-height: 1.45; }
.consent input { margin-top: 3px; width: 19px; height: 19px; flex: 0 0 19px; accent-color: #14B8A6; }
.consent span { font-size: 14.5px; color: #43596b; }
.consent a { color: #0B2A45; font-weight: 600; }
.consent.required span::after { content: " *"; color: #D2453F; font-weight: 700; }
.consent-note { font-size: 13px; color: #61798C; margin: -6px 0 16px 30px; }
.card.danger { border-color: #F3C9C7; background: #FDF7F6; }
.btn-danger { background: #D2453F; color: #fff; border-color: #D2453F; }
.btn-danger:hover { background: #B8332D; border-color: #B8332D; }
.om-legal { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.om-legal th, .om-legal td { border: 1px solid #E4EAEF; padding: 9px 11px; text-align: left; vertical-align: top; }
.om-legal th { background: #F4F7F9; font-weight: 700; }