/* КакЧина — дизайн-токены (рабочее название бренда, уточняется)
   Идея: графит кабины ночью + янтарь габаритного огня + холодный иней Сибири.
   Подпись системы: «шильд» — артикул как штампованная табличка на металле. */
@font-face{font-family:"Onest";src:url("fonts/Onest.ttf") format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"JBM";src:url("fonts/JetBrainsMono.ttf") format("truetype");font-weight:100 800;font-display:swap}
:root{
  /* графит */
  --g-980:#0B0C0E; --g-950:#101215; --g-900:#16191D; --g-850:#1C2025; --g-800:#23282E; --g-700:#2F353C;
  --steel-600:#56606A; --steel-500:#7A858F; --steel-400:#98A2AB; --steel-300:#B9C1C8; --steel-100:#E3E7EA;
  /* янтарь габарита */
  --amber:#E9A13B; --amber-hi:#F5BC62; --amber-lo:#B8761C; --amber-ink:#2A1A05;
  /* иней — второй, холодный акцент: только Иркутск/инфо */
  --frost:#9DB8CC; --frost-lo:#4E6E86;
  /* сигналы */
  --ok:#5FAE7E; --warn:#E9A13B; --bad:#D8583F;
  /* светлая тема бэк-офиса: бетон цеха */
  --c-bg:#E9ECEE; --c-surface:#FFFFFF; --c-sunk:#F3F5F6; --c-line:#D2D8DC; --c-line-2:#E3E7EA;
  --c-ink:#14171A; --c-ink-2:#4A535B; --c-ink-3:#7A848C;
  /* типографика */
  --f-sans:"Onest",system-ui,sans-serif; --f-mono:"JBM",ui-monospace,monospace;
  --t-xs:12px; --t-sm:13.5px; --t-md:15px; --t-lg:18px; --t-xl:24px; --t-2xl:34px; --t-3xl:clamp(40px,6.2vw,88px);
  /* форма */
  --r-1:3px; --r-2:6px; --r-3:10px;
  --gap:clamp(16px,2.2vw,28px);
  --wrap:1320px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--f-sans);font-size:var(--t-md);line-height:1.5;font-feature-settings:"tnum" 1}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
.mono{font-family:var(--f-mono);font-feature-settings:normal;letter-spacing:0}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ШИЛЬД — фирменный элемент: артикул на штампованной табличке */
.plate{--pl-bg:linear-gradient(180deg,#2B3036,#1D2126);display:inline-flex;align-items:center;gap:10px;
  padding:5px 12px 5px 22px;position:relative;border-radius:var(--r-1);background:var(--pl-bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.5),0 0 0 1px #0A0B0D;
  font-family:var(--f-mono);font-size:13px;color:var(--steel-100);letter-spacing:.02em;white-space:nowrap}
.plate::before,.plate::after{content:"";position:absolute;left:8px;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#8C959D,#3A4047 70%);box-shadow:0 0 0 1px #0A0B0D}
.plate::before{top:5px}.plate::after{bottom:5px}
.plate.is-light{--pl-bg:linear-gradient(180deg,#F7F8F9,#E4E8EB);color:var(--c-ink);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #C4CBD1}
.plate.is-light::before,.plate.is-light::after{background:radial-gradient(circle at 35% 35%,#fff,#A9B2BA 70%);box-shadow:0 0 0 1px #AEB6BD}
.plate.is-amber{--pl-bg:linear-gradient(180deg,var(--amber-hi),var(--amber));color:var(--amber-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px var(--amber-lo)}

/* метка «демо-данные» и «рабочее название» — честная маркировка выдуманного */
.demo{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;line-height:1;padding:4px 7px;border-radius:99px;
  border:1px dashed currentColor;opacity:.75;white-space:nowrap}
.tbd{border:1px dashed var(--amber);color:var(--amber);border-radius:4px;padding:1px 6px;font-size:11px;vertical-align:middle;white-space:nowrap}
.mock-switch{position:fixed;left:12px;bottom:12px;z-index:999;font:500 12.5px var(--f-sans);color:#fff}
.mock-switch summary{list-style:none;cursor:pointer;background:#000c;border:1px solid #fff3;padding:7px 12px;border-radius:99px;backdrop-filter:blur(6px)}
.mock-switch summary::-webkit-details-marker{display:none}
.mock-switch nav{position:absolute;bottom:40px;left:0;background:#0d0f12f2;border:1px solid #fff2;border-radius:10px;padding:10px 14px;display:grid;gap:2px;min-width:190px;max-height:70vh;overflow:auto}
.mock-switch nav b{color:var(--amber);font-weight:600;margin-top:8px}
.mock-switch nav a{text-decoration:none;opacity:.85;padding:2px 0}.mock-switch nav a:hover{opacity:1;color:var(--amber-hi)}
.shooting .mock-switch{display:none}
.logo-mark{width:30px;height:30px;flex:none}
html{overflow-x:clip}