/* ============================================================
   KIVAR Design System — portable stylesheet (v1)
   Один самодостаточный файл: шрифты + токены + классы компонентов.
   Подключите его один раз в вашем приложении:
       <link rel="stylesheet" href="kivar.css">
   Затем вешайте классы .kvr-* на свои элементы.
   Все классы используют префикс .kvr-, чтобы не конфликтовать
   с существующими стилями приложения.
   ============================================================ */

/* ---- Шрифты (Roboto / Manrope / Roboto Mono, кириллица + латиница) ---- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;600&display=swap');

/* ============================================================
   1. ТОКЕНЫ (CSS-переменные)
   ============================================================ */
:where(.kvr-theme) {
  /* ---- Brand blue ramp ---- */
  --blue-50:#eef4ff; --blue-100:#d9e6ff; --blue-200:#b3ccff; --blue-300:#80aaff;
  --blue-400:#4d88ff; --blue-500:#1f6fff; --blue-600:#1657d6; --blue-700:#1043a8;
  --blue-800:#0c317a; --blue-900:#08214f;

  /* ---- Wood accent ---- */
  --wood-50:#faf3ea; --wood-100:#f1e1cb; --wood-200:#e4c69b; --wood-300:#d4a566;
  --wood-400:#c08840; --wood-500:#a06d2c; --wood-600:#7f5520;

  /* ---- Brand yellow (логотип) ---- */
  --yellow-50:#fdf9e0; --yellow-100:#faf0b0; --yellow-300:#f2e25a;
  --yellow-400:#ecd92e; --yellow-500:#e9d52a; --yellow-600:#c9b50f;

  /* ---- Metal accent ---- */
  --metal-50:#f4f6f8; --metal-100:#e6eaef; --metal-200:#cfd6df; --metal-300:#aab4c0;
  --metal-400:#7d8a99; --metal-500:#5a6776; --metal-600:#3f4a57;

  /* ---- Neutral / ink ramp ---- */
  --ink-950:#0a0f1a; --ink-900:#11192a; --ink-800:#1c2840; --ink-700:#2b3a57;
  --ink-600:#455474; --ink-500:#647494; --ink-400:#8d9ab3; --ink-300:#b6c0d2;
  --ink-200:#d8deea; --ink-100:#eaeef6; --ink-50:#f5f7fc; --white:#ffffff;

  /* ---- Semantic colors ---- */
  --green-100:#d7f5e3; --green-500:#1f9d57; --green-600:#157a45;
  --amber-100:#fdeecb; --amber-500:#e0a008; --amber-600:#b07d00;
  --red-100:#fbdcdc; --red-500:#e03b3b; --red-600:#b62828;

  /* ---- Semantic aliases ---- */
  --brand:var(--blue-500); --brand-hover:var(--blue-600); --brand-active:var(--blue-700);
  --brand-subtle:var(--blue-50); --brand-on:var(--white);
  --accent-wood:var(--wood-500); --accent-metal:var(--metal-500); --accent-yellow:var(--yellow-500);

  --text-strong:var(--ink-950); --text-body:var(--ink-800); --text-muted:var(--ink-500);
  --text-faint:var(--ink-400); --text-on-brand:var(--white); --text-link:var(--blue-600);

  --surface-page:var(--ink-50); --surface-card:var(--white);
  --surface-sunken:var(--ink-100); --surface-inverse:var(--ink-950);

  --border-subtle:var(--ink-100); --border-default:var(--ink-200);
  --border-strong:var(--ink-300); --border-brand:var(--blue-500);

  --success:var(--green-500); --success-subtle:var(--green-100);
  --warning:var(--amber-500); --warning-subtle:var(--amber-100);
  --danger:var(--red-500); --danger-subtle:var(--red-100);

  /* ---- Liquid glass ---- */
  --glass-light:rgba(255,255,255,0.62); --glass-light-hi:rgba(255,255,255,0.78);
  --glass-blue:rgba(31,111,255,0.14); --glass-dark:rgba(13,22,42,0.45);
  --glass-border:rgba(255,255,255,0.55); --glass-border-dk:rgba(255,255,255,0.14);

  /* ---- Typography ---- */
  --font-display:'Roboto', system-ui, sans-serif;
  --font-body:'Manrope', system-ui, sans-serif;
  --font-mono:'Roboto Mono', ui-monospace, monospace;

  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;

  --text-3xs:0.6875rem; --text-2xs:0.75rem; --text-xs:0.8125rem; --text-sm:0.875rem;
  --text-md:1rem; --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:1.75rem;
  --text-3xl:2.25rem; --text-4xl:3rem; --text-5xl:4rem; --text-6xl:5.5rem;

  --lh-tight:1.05; --lh-snug:1.2; --lh-normal:1.5; --lh-relaxed:1.7;
  --ls-tighter:-0.02em; --ls-tight:-0.01em; --ls-normal:0; --ls-wide:0.04em; --ls-wider:0.12em;

  /* ---- Spacing (4px grid) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px; --space-32:128px;

  /* ---- Radii ---- */
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px;
  --radius-xl:28px; --radius-2xl:36px; --radius-pill:999px; --radius-circle:50%;

  /* ---- Control heights ---- */
  --control-sm:36px; --control-md:44px; --control-lg:54px;

  /* ---- Elevation ---- */
  --shadow-xs:0 1px 2px rgba(17,25,42,0.06);
  --shadow-sm:0 2px 6px rgba(17,25,42,0.07);
  --shadow-md:0 8px 20px rgba(17,25,42,0.09);
  --shadow-lg:0 18px 44px rgba(17,25,42,0.12);
  --shadow-xl:0 32px 72px rgba(13,22,42,0.18);
  --shadow-brand:0 14px 30px rgba(31,111,255,0.32);

  /* ---- Glass effect ---- */
  --glass-blur:saturate(180%) blur(20px);
  --glass-ring:inset 0 1px 0 rgba(255,255,255,0.65), inset 0 0 0 1px rgba(255,255,255,0.35);
  --glass-shadow:0 16px 40px rgba(13,22,42,0.16);

  /* ---- Focus + motion ---- */
  --ring-brand:0 0 0 3px rgba(31,111,255,0.30);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-spring:cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:140ms; --dur-base:220ms; --dur-slow:360ms;
  --transition:all var(--dur-base) var(--ease-out);
}

/* ============================================================
   2. ТИПОГРАФИКА-ХЕЛПЕРЫ (необязательные)
   ============================================================ */
.kvr-display{font:var(--fw-bold) var(--text-5xl)/var(--lh-tight) var(--font-display);letter-spacing:var(--ls-tighter);color:var(--text-strong);}
.kvr-h1{font:var(--fw-bold) var(--text-4xl)/var(--lh-snug) var(--font-display);letter-spacing:var(--ls-tight);color:var(--text-strong);}
.kvr-h2{font:var(--fw-semibold) var(--text-3xl)/var(--lh-snug) var(--font-display);color:var(--text-strong);}
.kvr-h3{font:var(--fw-semibold) var(--text-xl)/var(--lh-snug) var(--font-body);color:var(--text-strong);}
.kvr-body{font:var(--fw-regular) var(--text-md)/var(--lh-normal) var(--font-body);color:var(--text-body);}
.kvr-label{font:var(--fw-semibold) var(--text-sm)/var(--lh-snug) var(--font-body);color:var(--text-body);}
.kvr-mono{font:var(--fw-medium) var(--text-sm)/var(--lh-normal) var(--font-mono);}
.kvr-overline{font-family:var(--font-body);font-size:var(--text-2xs);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-wider);text-transform:uppercase;color:var(--text-muted);}

/* ============================================================
   3. BUTTON — .kvr-btn
   <button class="kvr-btn kvr-btn--primary">Новый заказ</button>
   Варианты: --primary --secondary --wood --ghost --glass
   Размеры:  --sm (по умолч. md) --lg   ·  --block (на всю ширину)
   ============================================================ */
.kvr-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  height:var(--control-md); padding:0 20px;
  font-family:var(--font-body); font-weight:var(--fw-semibold); font-size:var(--text-sm);
  line-height:1; letter-spacing:var(--ls-tight);
  border-radius:var(--radius-pill); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent;
  transition:var(--transition);
}
.kvr-btn:active{transform:scale(0.97);}
.kvr-btn:focus-visible{outline:none; box-shadow:var(--ring-brand);}
.kvr-btn:disabled,.kvr-btn.is-disabled{opacity:.5; cursor:not-allowed; transform:none;}

.kvr-btn--sm{height:var(--control-sm); padding:0 14px;}
.kvr-btn--lg{height:var(--control-lg); padding:0 26px; font-size:var(--text-md);}
.kvr-btn--block{width:100%;}

.kvr-btn--primary{background:var(--brand); color:var(--brand-on); box-shadow:var(--shadow-brand);}
.kvr-btn--primary:hover:not(:disabled){background:var(--brand-hover);}

.kvr-btn--secondary{background:var(--surface-card); color:var(--text-strong);
  border-color:var(--border-strong); box-shadow:var(--shadow-xs);}
.kvr-btn--secondary:hover:not(:disabled){border-color:var(--brand); color:var(--brand);}

.kvr-btn--wood{background:var(--accent-wood); color:#fff; box-shadow:0 12px 26px rgba(160,109,44,0.32);}
.kvr-btn--wood:hover:not(:disabled){background:var(--wood-600);}

.kvr-btn--ghost{background:transparent; color:var(--brand);}
.kvr-btn--ghost:hover:not(:disabled){background:var(--brand-subtle);}

.kvr-btn--glass{background:var(--glass-light); color:var(--text-strong);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-ring), var(--shadow-sm);}
.kvr-btn--glass:hover:not(:disabled){background:var(--glass-light-hi);}

/* ============================================================
   4. ICON BUTTON — .kvr-icon-btn  (квадратная, только иконка)
   <button class="kvr-icon-btn kvr-icon-btn--ghost"><svg.../></button>
   Варианты: --ghost --solid --glass --outline · Размеры: --sm --lg
   ============================================================ */
.kvr-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-md); border:none;
  cursor:pointer; transition:var(--transition); color:var(--text-muted); background:transparent;
}
.kvr-icon-btn:active{transform:scale(0.97);}
.kvr-icon-btn:focus-visible{outline:none; box-shadow:var(--ring-brand);}
.kvr-icon-btn:disabled{opacity:.5; cursor:not-allowed;}
.kvr-icon-btn--sm{width:32px; height:32px;}
.kvr-icon-btn--lg{width:48px; height:48px;}
.kvr-icon-btn--ghost:hover{background:var(--surface-sunken);}
.kvr-icon-btn--solid{background:var(--brand); color:#fff;}
.kvr-icon-btn--solid:hover{background:var(--brand-hover);}
.kvr-icon-btn--outline{background:var(--surface-card); color:var(--text-body); border:1px solid var(--border-default);}
.kvr-icon-btn--outline:hover{border-color:var(--brand); color:var(--brand);}
.kvr-icon-btn--glass{background:var(--glass-light); color:var(--text-strong);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); box-shadow:var(--glass-ring);}
.kvr-icon-btn--glass:hover{background:var(--glass-light-hi);}

/* ============================================================
   5. BADGE — .kvr-badge  (статус-пилюля)
   <span class="kvr-badge kvr-badge--success">Готово</span>
   РўРѕРЅС‹: --neutral(default) --brand --success --warning --danger --wood --metal
   Заливка целиком: добавить --solid · Точка: <i class="kvr-badge__dot"></i>
   ============================================================ */
.kvr-badge{
  display:inline-flex; align-items:center; gap:var(--space-2); padding:4px 10px;
  font-family:var(--font-body); font-size:var(--text-2xs); font-weight:var(--fw-bold);
  letter-spacing:0.01em; line-height:1.3; border-radius:var(--radius-pill);
  white-space:nowrap; color:var(--ink-600); background:var(--ink-100);
}
.kvr-badge__dot{width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto;}
.kvr-badge--neutral{color:var(--ink-600); background:var(--ink-100);}
.kvr-badge--brand{color:var(--blue-700); background:var(--brand-subtle);}
.kvr-badge--success{color:var(--green-600); background:var(--success-subtle);}
.kvr-badge--warning{color:var(--amber-600); background:var(--warning-subtle);}
.kvr-badge--danger{color:var(--red-600); background:var(--danger-subtle);}
.kvr-badge--wood{color:var(--wood-600); background:var(--wood-50);}
.kvr-badge--metal{color:var(--metal-600); background:var(--metal-100);}
/* solid */
.kvr-badge--solid{color:#fff;}
.kvr-badge--solid.kvr-badge--neutral{background:var(--ink-600);}
.kvr-badge--solid.kvr-badge--brand{background:var(--brand);}
.kvr-badge--solid.kvr-badge--success{background:var(--success);}
.kvr-badge--solid.kvr-badge--warning{background:var(--warning);}
.kvr-badge--solid.kvr-badge--danger{background:var(--danger);}
.kvr-badge--solid.kvr-badge--wood{background:var(--wood-500);}
.kvr-badge--solid.kvr-badge--metal{background:var(--metal-500);}

/* ============================================================
   6. AVATAR — .kvr-avatar
   <span class="kvr-avatar" style="--kvr-size:36px">ДМ</span>
   или с фото: style="background:center/cover url(...)"
   Тоны: --brand(default) --wood --metal · Размер: --kvr-size
   ============================================================ */
.kvr-avatar{
  --kvr-size:36px;
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:var(--kvr-size); height:var(--kvr-size); border-radius:50%;
  font-family:var(--font-body); font-weight:var(--fw-bold);
  font-size:calc(var(--kvr-size) * 0.38); letter-spacing:0.02em;
  background:var(--brand-subtle); color:var(--blue-700);
  box-shadow:inset 0 0 0 1px rgba(13,22,42,0.06); overflow:hidden;
}
.kvr-avatar--wood{background:var(--wood-50); color:var(--wood-600);}
.kvr-avatar--metal{background:var(--metal-100); color:var(--metal-600);}

/* ============================================================
   7. SWITCH — .kvr-switch  (тумблер on/off, CSS-only)
   <label class="kvr-switch">
     <input type="checkbox"><span class="kvr-switch__track"></span>
   </label>
   Размер: добавить --sm на label
   ============================================================ */
.kvr-switch{display:inline-flex; align-items:center; cursor:pointer; vertical-align:middle;}
.kvr-switch input{position:absolute; opacity:0; width:0; height:0;}
.kvr-switch__track{
  --kvr-w:46px; --kvr-h:26px; --kvr-k:20px;
  position:relative; display:inline-block; width:var(--kvr-w); height:var(--kvr-h);
  border-radius:var(--radius-pill); background:var(--ink-200);
  box-shadow:inset 0 1px 2px rgba(13,22,42,0.12); transition:var(--transition);
}
.kvr-switch__track::after{
  content:""; position:absolute; top:calc((var(--kvr-h) - var(--kvr-k)) / 2);
  left:calc((var(--kvr-h) - var(--kvr-k)) / 2);
  width:var(--kvr-k); height:var(--kvr-k); border-radius:50%; background:#fff;
  box-shadow:var(--shadow-sm); transition:left var(--dur-base) var(--ease-spring);
}
.kvr-switch--sm .kvr-switch__track{--kvr-w:36px; --kvr-h:20px; --kvr-k:14px;}
.kvr-switch input:checked + .kvr-switch__track{background:var(--brand); box-shadow:inset 0 1px 3px rgba(8,33,79,0.25);}
.kvr-switch input:checked + .kvr-switch__track::after{left:calc(var(--kvr-w) - var(--kvr-k) - (var(--kvr-h) - var(--kvr-k)) / 2);}
.kvr-switch input:focus-visible + .kvr-switch__track{box-shadow:var(--ring-brand);}
.kvr-switch input:disabled + .kvr-switch__track{opacity:.5; cursor:not-allowed;}

/* ============================================================
   8. CHECKBOX — .kvr-checkbox
   <label class="kvr-checkbox">
     <input type="checkbox"><span class="kvr-checkbox__box"></span> Текст
   </label>
   ============================================================ */
.kvr-checkbox{
  display:inline-flex; align-items:center; gap:var(--space-3); cursor:pointer;
  font-family:var(--font-body); font-size:var(--text-sm); color:var(--text-body);
}
.kvr-checkbox input{position:absolute; opacity:0; width:0; height:0;}
.kvr-checkbox__box{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:20px; height:20px; border-radius:var(--radius-xs);
  background:var(--surface-card); border:1px solid var(--border-strong);
  transition:var(--transition);
}
.kvr-checkbox__box::after{
  content:""; width:10px; height:6px; margin-top:-2px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) scale(0); transition:transform var(--dur-fast) var(--ease-out);
}
.kvr-checkbox input:checked + .kvr-checkbox__box{background:var(--brand); border-color:var(--brand);}
.kvr-checkbox input:checked + .kvr-checkbox__box::after{transform:rotate(-45deg) scale(1);}
.kvr-checkbox input:focus-visible + .kvr-checkbox__box{box-shadow:var(--ring-brand);}
.kvr-checkbox input:disabled + .kvr-checkbox__box{opacity:.5;}

/* ============================================================
   9. INPUT — .kvr-field / .kvr-input
   <label class="kvr-field">
     <span class="kvr-field__label">Название</span>
     <span class="kvr-input-wrap"><input class="kvr-input" placeholder="…"></span>
     <span class="kvr-field__hint">Подсказка</span>
   </label>
   Ошибка: добавить .is-error на .kvr-input-wrap (или .kvr-field)
   ============================================================ */
.kvr-field{display:flex; flex-direction:column; gap:var(--space-2); font-family:var(--font-body);}
.kvr-field__label{font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text-body);}
.kvr-field__hint{font-size:var(--text-2xs); color:var(--text-muted);}
.kvr-input-wrap{
  display:flex; align-items:center; gap:var(--space-2); height:var(--control-md); padding:0 14px;
  background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-md); box-shadow:var(--shadow-xs); transition:var(--transition);
}
.kvr-input-wrap--sm{height:var(--control-sm);}
.kvr-input-wrap--lg{height:var(--control-lg);}
.kvr-input-wrap:focus-within{border-color:var(--brand); box-shadow:var(--ring-brand);}
.kvr-input-wrap.is-error,.kvr-field.is-error .kvr-input-wrap{border-color:var(--danger);}
.kvr-field.is-error .kvr-field__hint{color:var(--danger);}
.kvr-input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font-family:var(--font-body); font-size:var(--text-sm); color:var(--text-strong);
}
.kvr-input::placeholder{color:var(--text-faint);}
/* bare <input class="kvr-input"> без обёртки тоже стилизуется: */
input.kvr-input:not(.kvr-input-wrap *){
  height:var(--control-md); padding:0 14px; background:var(--surface-card);
  border:1px solid var(--border-default); border-radius:var(--radius-md); box-shadow:var(--shadow-xs);
}
input.kvr-input:not(.kvr-input-wrap *):focus{border-color:var(--brand); box-shadow:var(--ring-brand);}

/* ============================================================
   10. SELECT — .kvr-select
   <span class="kvr-select"><select>…</select></span>
   (обёртка рисует рамку и стрелку)
   ============================================================ */
.kvr-select{
  position:relative; display:inline-flex; align-items:center; height:var(--control-md);
  background:var(--surface-card); border:1px solid var(--border-default);
  border-radius:var(--radius-md); box-shadow:var(--shadow-xs); transition:var(--transition);
}
.kvr-select:focus-within{border-color:var(--brand); box-shadow:var(--ring-brand);}
.kvr-select select{
  appearance:none; -webkit-appearance:none; flex:1; height:100%;
  padding:0 38px 0 14px; border:none; outline:none; background:transparent;
  font-family:var(--font-body); font-size:var(--text-sm); color:var(--text-strong); cursor:pointer;
}
.kvr-select::after{
  content:""; position:absolute; right:14px; width:9px; height:9px; pointer-events:none;
  border-right:2px solid var(--text-faint); border-bottom:2px solid var(--text-faint);
  transform:translateY(-2px) rotate(45deg);
}

/* ============================================================
   11. CARD — .kvr-card  (белая поверхность с мягкой тенью)
   <div class="kvr-card kvr-card--interactive">
     <div class="kvr-card__header">…</div>
     <div class="kvr-card__body">…</div>
     <div class="kvr-card__footer">…</div>
   </div>
   Просто .kvr-card даёт паддинг сам. С header/body/footer — паддинги в секциях.
   ============================================================ */
.kvr-card{
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  overflow:hidden; transition:var(--transition); padding:var(--space-6);
}
.kvr-card:has(.kvr-card__body),.kvr-card:has(.kvr-card__header){padding:0;}
.kvr-card__header{padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--border-subtle);}
.kvr-card__body{padding:var(--space-6);}
.kvr-card__footer{padding:var(--space-4) var(--space-6); border-top:1px solid var(--border-subtle); background:var(--ink-50);}
.kvr-card--interactive{cursor:pointer;}
.kvr-card--interactive:hover{box-shadow:var(--shadow-lg); transform:translateY(-2px);}

/* ============================================================
   12. STAT CARD — .kvr-stat  (KPI-плитка)
   <div class="kvr-stat kvr-stat--brand">
     <div class="kvr-stat__top">
       <span class="kvr-overline">Заказов в работе</span>
       <span class="kvr-stat__icon"><svg/></span>
     </div>
     <div class="kvr-stat__value">128<span class="kvr-stat__unit">шт</span>
       <span class="kvr-stat__delta">+12%</span></div>
     <div class="kvr-progress"><span class="kvr-progress__bar" style="width:64%"></span></div>
     <span class="kvr-stat__note">На 12% выше нормы</span>
   </div>
   Акцент: --brand(default) --wood --metal --success --warning --danger
   ============================================================ */
.kvr-stat{
  --kvr-accent:var(--brand);
  background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:var(--space-5) var(--space-6); display:flex; flex-direction:column; gap:var(--space-3);
}
.kvr-stat--wood{--kvr-accent:var(--accent-wood);}
.kvr-stat--metal{--kvr-accent:var(--accent-metal);}
.kvr-stat--success{--kvr-accent:var(--success);}
.kvr-stat--warning{--kvr-accent:var(--warning);}
.kvr-stat--danger{--kvr-accent:var(--danger);}
.kvr-stat__top{display:flex; align-items:center; justify-content:space-between;}
.kvr-stat__icon{display:inline-flex; padding:8px; border-radius:var(--radius-md);
  color:var(--kvr-accent); background:color-mix(in srgb, var(--kvr-accent) 12%, transparent);}
.kvr-stat__value{display:flex; align-items:baseline; gap:6px;
  font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--text-3xl);
  color:var(--text-strong); line-height:1;}
.kvr-stat__unit{font-size:var(--text-md); font-weight:var(--fw-semibold); color:var(--text-muted);}
.kvr-stat__delta{margin-left:auto; display:inline-flex; align-items:center; gap:2px;
  font-size:var(--text-xs); font-weight:var(--fw-bold); color:var(--success);}
.kvr-stat__delta--down{color:var(--danger);}
.kvr-stat__note{font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--kvr-accent);}
.kvr-stat .kvr-progress__bar{background:var(--kvr-accent);}

/* ============================================================
   13. PROGRESS BAR — .kvr-progress
   <div class="kvr-progress"><span class="kvr-progress__bar" style="width:64%"></span></div>
   Тон бара: --wood --metal --success --warning --danger (по умолч. brand)
   Высота: style="height:6px" на .kvr-progress
   ============================================================ */
.kvr-progress{height:8px; border-radius:var(--radius-pill); background:var(--ink-100); overflow:hidden;}
.kvr-progress__bar{display:block; height:100%; border-radius:var(--radius-pill);
  background:var(--brand); transition:width var(--dur-slow) var(--ease-out);}
.kvr-progress--wood .kvr-progress__bar{background:var(--accent-wood);}
.kvr-progress--metal .kvr-progress__bar{background:var(--accent-metal);}
.kvr-progress--success .kvr-progress__bar{background:var(--success);}
.kvr-progress--warning .kvr-progress__bar{background:var(--warning);}
.kvr-progress--danger .kvr-progress__bar{background:var(--danger);}

/* ============================================================
   14. TABS — сегментные и подчёркнутые
   Сегментные:
   <div class="kvr-tabs"><button class="kvr-tab is-active">…</button>…</div>
   Подчёркнутые:
   <div class="kvr-tabs kvr-tabs--underline"><button class="kvr-tab is-active">…</button>…</div>
   ============================================================ */
.kvr-tabs{display:inline-flex; gap:2px; padding:4px; background:var(--surface-sunken); border-radius:var(--radius-pill);}
.kvr-tabs .kvr-tab{
  border:none; cursor:pointer; padding:8px 18px; border-radius:var(--radius-pill);
  font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--fw-semibold);
  color:var(--text-muted); background:transparent; transition:var(--transition);
}
.kvr-tabs .kvr-tab.is-active{color:var(--brand); background:var(--surface-card); box-shadow:var(--shadow-sm);}
/* underline variant */
.kvr-tabs--underline{display:flex; gap:var(--space-6); padding:0; background:none;
  border-bottom:1px solid var(--border-subtle); border-radius:0;}
.kvr-tabs--underline .kvr-tab{
  padding:0 0 12px; border-radius:0; background:none; margin-bottom:-1px;
  font-size:var(--text-md); font-weight:var(--fw-medium); color:var(--text-muted);
  border-bottom:2px solid transparent; box-shadow:none;
}
.kvr-tabs--underline .kvr-tab.is-active{
  color:var(--text-strong); font-weight:var(--fw-bold); background:none;
  border-bottom-color:var(--brand); box-shadow:none;
}

/* ============================================================
   15. KANBAN CARD — .kvr-kanban  (карточка задачи на доске)
   <div class="kvr-kanban kvr-kanban--brand">… контент …</div>
   Левая цветная полоса задаётся тоном:
   --brand(default) --wood --metal --warning --success
   ============================================================ */
.kvr-kanban{
  --kvr-accent:var(--brand);
  position:relative; background:var(--surface-card); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); box-shadow:var(--shadow-xs); transition:var(--transition);
  cursor:pointer; padding:var(--space-4); padding-left:calc(var(--space-4) + 4px);
  display:flex; flex-direction:column; gap:var(--space-3); overflow:hidden;
}
.kvr-kanban::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--kvr-accent);}
.kvr-kanban:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.kvr-kanban--wood{--kvr-accent:var(--accent-wood);}
.kvr-kanban--metal{--kvr-accent:var(--accent-metal);}
.kvr-kanban--warning{--kvr-accent:var(--warning);}
.kvr-kanban--success{--kvr-accent:var(--success);}
.kvr-kanban__code{font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:var(--fw-semibold); color:var(--text-muted);}
.kvr-kanban__title{font-family:var(--font-body); font-size:var(--text-sm); font-weight:var(--fw-semibold); color:var(--text-strong); line-height:1.35;}
.kvr-kanban__row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.kvr-kanban__meta{display:inline-flex; align-items:center; gap:6px; font-size:var(--text-2xs); color:var(--text-muted);}

/* ============================================================
   16. GLASS PANEL — .kvr-glass  (фирменное «жидкое стекло»)
   <div class="kvr-glass kvr-glass--light">…</div>
   Тоны: --light(default) --dark --blue. Класть ПОВЕРХ фото/цвета/градиента.
   ============================================================ */
.kvr-glass{
  border-radius:var(--radius-lg); padding:var(--space-6);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  background:var(--glass-light); color:var(--text-strong);
  box-shadow:var(--glass-ring), var(--glass-shadow);
}
.kvr-glass--dark{background:var(--glass-dark); color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.18), var(--glass-shadow);}
.kvr-glass--blue{background:var(--glass-blue); color:var(--blue-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4), var(--glass-shadow);}

/* ============================================================
   17. УТИЛИТЫ-ФОН (необязательно)
   ============================================================ */
.kvr-bg-page{background:var(--surface-page);}
.kvr-bg-hero{background:radial-gradient(120% 120% at 20% 0%, #4d88ff 0%, #1f6fff 45%, #0c317a 100%);}

@media (prefers-reduced-motion: reduce){
  .kvr-btn,.kvr-icon-btn,.kvr-card,.kvr-kanban,.kvr-switch__track,
  .kvr-switch__track::after,.kvr-progress__bar,.kvr-tab,.kvr-input-wrap{transition:none;}
}