/* Дизайн-система kazkad.digital для прототипов и презентаций.
   Дистиллят из лендинга (~/PycharmProjects/kazkad-lending, папка «Kazkad Design System»).
   Главное: Manrope + Martian Mono, синий #1763e6, чернильный #272727,
   нулевые радиусы (в бренде нет скруглений), границы-хайрлайны вместо теней. */

:root{
  /* палитра */
  --bg:#ffffff; --card:#ffffff; --chip:#f5f5f5;
  --ink:#171717; --body-c:#272727; --muted:#6f6f6f; --faint:#9a9a9a;
  --line:#ebebeb; --line2:#d9d9d9;
  --brand:#1763e6; --brand-press:#0f4bb8; --brand-ink:#0f4bb8; --brand-soft:#ebf2fa;
  --navy:#223a5c;
  --good:#0f9d63; --good-soft:#e7f6ef;
  --warn:#c77a06; --warn-soft:#fdf3e2;
  --bad:#d93a34; --bad-soft:#fdeceb;
  --mark:#d6e4fb; --glow:rgba(23,99,230,.12); --dark:#272727;
  /* шрифты: подключать с Google Fonts
     Manrope:wght@400;500;600;700;800 и Martian+Mono:wght@400;500 */
  --font-core:'Manrope','Helvetica Neue',Helvetica,sans-serif;
  --font-mono:'Martian Mono',ui-monospace,'SF Mono',Menlo,monospace;
  /* тени редкие и мягкие, основную работу делают границы */
  --shadow-card:0 2px 4px rgba(34,58,92,.04),0 12px 32px rgba(34,58,92,.06);
  --shadow-raised:0 4px 8px rgba(34,58,92,.06),0 24px 56px rgba(34,58,92,.10);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1c1c1c; --card:#272727; --chip:#303030;
    --ink:#f2f2f2; --body-c:#e2e2e2; --muted:#a3a3a3; --faint:#7d7d7d;
    --line:#3a3a3a; --line2:#4c4c4c;
    --brand:#8fb6f7; --brand-press:#b7d0f9; --brand-ink:#b7d0f9; --brand-soft:#243350;
    --navy:#1e4a9b; --good:#6ccfa4; --good-soft:#1f3229;
    --warn:#d9a45c; --warn-soft:#332b1a; --bad:#e07b74; --bad-soft:#3a2422;
    --mark:#2c4370; --glow:rgba(23,99,230,.28); --dark:#141414;
  }
}
:root[data-theme="dark"]{
  --bg:#1c1c1c; --card:#272727; --chip:#303030;
  --ink:#f2f2f2; --body-c:#e2e2e2; --muted:#a3a3a3; --faint:#7d7d7d;
  --line:#3a3a3a; --line2:#4c4c4c;
  --brand:#8fb6f7; --brand-press:#b7d0f9; --brand-ink:#b7d0f9; --brand-soft:#243350;
  --navy:#1e4a9b; --good:#6ccfa4; --good-soft:#1f3229;
  --warn:#d9a45c; --warn-soft:#332b1a; --bad:#e07b74; --bad-soft:#3a2422;
  --mark:#2c4370; --glow:rgba(23,99,230,.28); --dark:#141414;
}

/* база */
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--body-c);
  font:15px/1.55 var(--font-core); letter-spacing:-.005em; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0; color:var(--ink); text-wrap:balance;}
h1{font-size:clamp(26px,4.4vw,38px); font-weight:800; line-height:1.12; letter-spacing:-.03em;}
h2{font-size:21px; font-weight:800; letter-spacing:-.02em;}
h3{font-size:15.5px; font-weight:700; letter-spacing:-.01em;}
p{margin:6px 0; text-wrap:pretty;}
a{color:var(--brand); text-decoration:none;}
a:hover{color:var(--brand-press);}
mark{background:var(--mark); color:inherit; padding:0 1px;}
:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}

/* номер в заголовке и подзаголовок (вместо приписок-ярлыков) */
.kz-num{color:var(--brand);}
.kz-sub{font-size:15px; font-weight:600; color:var(--muted); margin:3px 0 8px; letter-spacing:-.01em;}

/* кнопки: одна primary на экран, остальное secondary */
.kz-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; background:var(--brand); color:#fff;
  font:600 13.5px var(--font-core); height:40px; padding:0 18px; cursor:pointer;}
.kz-btn:active{background:var(--brand-press);}
.kz-btn.secondary{background:none; border-color:var(--line2); color:var(--ink);
  transition:border-color .15s, color .15s;}
.kz-btn.secondary:hover{border-color:var(--ink); color:var(--brand);}
:root[data-theme="dark"] .kz-btn:not(.secondary){color:#14181c;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .kz-btn:not(.secondary){color:#14181c;}
}

/* карточка и тег */
.kz-card{background:var(--card); border:1px solid var(--line); padding:16px 17px;}
.kz-tag{display:inline-flex; font-size:12.5px; font-weight:600;
  border:1px solid var(--line2); background:var(--card); padding:5px 12px; color:var(--body-c);}
.kz-tag.active{background:var(--brand); border-color:var(--brand); color:#fff;}

/* поле ввода */
.kz-input{width:100%; border:1px solid var(--line2); background:var(--card); color:var(--ink);
  padding:9px 10px; font:inherit; font-size:13.5px; border-radius:0; appearance:none;}
.kz-input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft);}
.kz-label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px;}

/* схема архитектуры: зоны пунктиром, узлы кликабельные, детали в панели */
.kz-zone{border:1px dashed var(--line2); padding:12px; display:flex; flex-direction:column; gap:8px;}
.kz-zone.row{flex-direction:row; flex-wrap:wrap;}
.kz-zlabel{font-size:11px; font-weight:600; color:var(--faint);}
.kz-node{border:1px solid var(--line2); background:var(--card); padding:10px 13px;
  font-size:13px; cursor:pointer; transition:border-color .15s;}
.kz-node:hover{border-color:var(--ink);}
.kz-node.sel{border-color:var(--brand); background:var(--brand-soft);
  box-shadow:inset 0 0 0 1px var(--brand);}
.kz-node b{display:block; color:var(--ink); font-size:13px;}
.kz-node small{color:var(--muted); font-size:11.5px; line-height:1.35; display:block; margin-top:1px;}
.kz-flow{display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  padding:9px 4px; font-size:12px; color:var(--muted);}
.kz-flow .ar{color:var(--brand); font-weight:700;}
.kz-detail{border:1px solid var(--brand); background:var(--brand-soft); padding:14px 16px;}

/* тёмная секция (CTA, футер) с фирменным свечением в углу */
.kz-dark{background:radial-gradient(circle at 88% -10%, rgba(23,99,230,.45), transparent 55%), var(--dark);
  color:#fff; padding:28px 30px;}
.kz-dark h2{color:#fff;}
.kz-dark p{color:rgba(255,255,255,.75);}

/* свечение-прожектор позади героя или устройства */
.kz-glow{position:relative;}
.kz-glow::before{content:""; position:absolute; inset:-24px;
  background:radial-gradient(ellipse 60% 46% at 50% 30%, var(--glow), transparent 72%);
  z-index:-1; pointer-events:none;}