/* ==========================================================================
   X-MOD — design system
   Charging terminal on slate: matte canvas, hairline rails, one lime signal
   and a syntax palette borrowed from code editors.
   Depth comes from surface contrast and 1px lines, never from shadows.
   ========================================================================== */

:root {
   /* surfaces */
   --canvas:        #070707;
   --inset:         #141418;
   --card:          #0d0e12;
   --raised:        #141418;

   /* borders */
   --hairline:      #2e3038;
   --steel:         #22222a;

   /* text */
   --bone:          #ffffff;
   --cloud:         #f0f0f0;
   --ash:           #c8cad0;
   --fog:           #aeaeb7;

   /* signal */
   --lime:          #a8ff53;
   --lime-dim:      rgba(168, 255, 83, .14);
   --lime-line:     rgba(168, 255, 83, .32);

   /* syntax palette — code contexts, section labels, feature icons */
   --violet:        #9c9af2;
   --pink:          #fa3abf;
   --event-violet:  #7655fd;
   --loop-green:    #afec73;
   --key-lime:      #d9f07c;
   --magenta:       #e888f8;
   --red:           #f43f5e;

   /* type */
   /* Onest — геометрический гротеск с полной кириллицей.
      Space Grotesk и Geist кириллицу не содержат: русский текст на них
      подменялся системным шрифтом. */
   --font-display: 'Unbounded', 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
   --font-ui:      'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
   --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

   /* spacing */
   --s4: 4px;   --s8: 8px;   --s12: 12px; --s16: 16px; --s24: 24px;
   --s28: 28px; --s32: 32px; --s40: 40px; --s48: 48px; --s64: 64px;
   --s96: 96px; --s120: 120px;

   /* светлая обводка панелей — край определяется яркостью, а не тенью */
   --edge:          rgba(217, 218, 229, .30);
   --edge-soft:     rgba(217, 218, 229, .14);
   --cinder:        #60606c;

   --radius:        20px;   /* панели  */
   --radius-nested: 16px;   /* вложенные поверхности */
   --radius-input:  800px;  /* поля ввода — тот же радиус, что у кнопок */
   --radius-pill:   800px;  /* кнопки и бейджи */
   --page: 1200px;
}

/* --------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: 84px; }

body {
   margin: 0;
   background: var(--canvas);
   color: var(--bone);
   font-family: var(--font-ui);
   font-size: 16px;
   font-weight: 400;
   line-height: 1.56;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   /* clip, а не hidden: hidden делает body скролл-контейнером и ломает sticky у навбара */
   overflow-x: clip;
}

img, svg { max-width: 100%; }
::selection { background: var(--lime); color: var(--inset); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* ---------------------------------------------------------- typography -- */

h1, h2, h3, h4, h5, h6 {
   font-family: var(--font-display);
   color: var(--bone);
   font-weight: 600;
   letter-spacing: -.014em;
   margin: 0 0 var(--s16);
}

/* трекинг пересчитан под Onest — он шире Space Grotesk и не требует
   такой большой разрядки, иначе строки рассыпаются */
/* Unbounded шире и тяжелее Onest — кегль и трекинг подрезаны, чтобы
   заголовки не разъезжались, а строки держались вместе */
.t-hero    { font-size: clamp(26px, 5.4vw, 60px); line-height: 1.1;  font-weight: 600; letter-spacing: -.024em; }
.t-display { font-size: clamp(22px, 3.1vw, 37px); line-height: 1.2;  font-weight: 600; letter-spacing: -.02em; }
.t-heading { font-size: clamp(19px, 2vw, 26px);   line-height: 1.26; font-weight: 600; letter-spacing: -.016em; }
.t-sub     { font-size: 18px; line-height: 1.34; font-weight: 600; letter-spacing: -.012em; }
.t-body-lg { font-family: var(--font-ui); font-size: 18px; line-height: 1.5; font-weight: 400; color: var(--fog); }
.t-body    { font-family: var(--font-ui); font-size: 16px; line-height: 1.56; color: var(--fog); }
.t-caption { font-family: var(--font-ui); font-size: 14px; line-height: 1.43; color: var(--fog); }

.t-bone { color: var(--bone) } .t-cloud { color: var(--cloud) }
.t-ash  { color: var(--ash) }  .t-fog   { color: var(--fog) }
.t-lime { color: var(--lime) } .t-violet { color: var(--violet) }
.t-pink { color: var(--pink) } .t-green { color: var(--loop-green) }
.t-magenta { color: var(--magenta) } .t-keylime { color: var(--key-lime) }

.mono { font-family: var(--font-mono); font-size: 14px; line-height: 1.43; }

/* monospaced caption above or below a panel — a signature detail */
.cap-mono {
   border: 0 !important;
   font-family: var(--font-mono);
   font-size: 13px;
   line-height: 1.43;
   color: var(--fog);
   text-align: center;
   padding: var(--s16) var(--s24);
}

/* section label; colour comes from a modifier */
.eyebrow {
   font-family: var(--font-ui);
   font-size: 12px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: .094em;
   color: var(--violet);
   display: block;
   margin-bottom: var(--s12);
}
.eyebrow.lime    { color: var(--lime) }
.eyebrow.pink    { color: var(--pink) }
.eyebrow.green   { color: var(--loop-green) }
.eyebrow.magenta { color: var(--magenta) }

a { color: var(--cloud); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--bone); }

.link-underline { color: var(--cloud); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline); }
.link-underline:hover { color: var(--bone); text-decoration-color: var(--fog); }

.link-arrow { font-size: 14px; color: var(--cloud); display: inline-flex; align-items: center; gap: 6px; }
.link-arrow i { color: var(--fog); font-size: 12px; transition: transform .18s ease; }
.link-arrow:hover { color: var(--bone); }
.link-arrow:hover i { transform: translate(2px, -2px); }

/* -------------------------------------------------------------- layout -- */

.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--s24); }

/* колонка контента; края больше не рисуем — их держат сами панели */
.rails {
   max-width: var(--page);
   margin: 0 auto;
   padding: 0 var(--s24);
}
.rails-pad { padding: 0 var(--s32); }
@media (max-width: 640px) { .rails-pad { padding: 0 var(--s16); } }

.section { padding: var(--s96) 0; }
.section-sm { padding: var(--s64) 0; }
.section-inset { background: var(--inset); }
@media (max-width: 640px) { .section { padding: var(--s64) 0; } }

.hr { height: 1px; background: var(--steel); border: 0; margin: 0; }

/* сетка панелей: край задаётся светлой обводкой, не тенью */
.cells { display: grid; gap: var(--s16); border-top: 0; }
.cells > * {
   background: var(--card);
   border: 1px solid var(--edge-soft);
   border-radius: var(--radius);
   padding: var(--s32);
   transition: border-color .25s ease, background-color .25s ease;
}
.cells > *:hover { border-color: var(--edge); }
.cells.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cells.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cells.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


@media (max-width: 900px) {
   .cells.c3, .cells.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
   .cells.c2, .cells.c3, .cells.c4 { grid-template-columns: minmax(0, 1fr); }
   .cells > * { padding: var(--s24); }
}

.grid { display: grid; gap: var(--s24); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }

.section-head { max-width: 620px; margin-bottom: var(--s40); }
.section-head p { margin: 0; }
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s24); flex-wrap: wrap; margin-bottom: var(--s40); }
.head-row .section-head { margin-bottom: 0; }

/* ----------------------------------------------------------------- nav -- */

.nav {
   position: sticky; top: 0; z-index: 100;
   background: rgba(8, 9, 11, .88);
   backdrop-filter: saturate(140%) blur(10px);
   border-bottom: 1px solid var(--edge-soft);
}
.nav-in { display: flex; align-items: center; gap: var(--s32); height: 60px; }
.nav-logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav-logo img { height: 24px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; gap: var(--s24); }
.nav-links a { font-size: 14px; color: var(--cloud); }
.nav-links a:hover, .nav-links a.is-active { color: var(--bone); }
.nav-actions { display: flex; align-items: center; gap: var(--s16); margin-left: auto; }
.nav-actions a { font-size: 14px; color: var(--cloud); }

.nav-toggle {
   display: none; margin-left: auto;
   background: none; border: 1px solid var(--edge-soft); border-radius: var(--radius-pill);
   color: var(--cloud); width: 36px; height: 36px; font-size: 18px; line-height: 1; cursor: pointer;
}

@media (max-width: 900px) {
   .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
   .nav-menu {
      position: absolute; top: 60px; left: 0; right: 0;
      display: none; flex-direction: column; align-items: stretch; gap: 0;
      padding: var(--s8) var(--s24) var(--s24);
      background: var(--canvas); border-bottom: 1px solid var(--steel);
   }
   .nav-menu.is-open { display: flex; }
   .nav-menu .nav-links, .nav-menu .nav-actions { flex-direction: column; align-items: stretch; gap: 0; margin: 0; }
   .nav-menu a { padding: var(--s12) 0; border-bottom: 1px solid var(--steel); }
   .nav-menu .btn { margin-top: var(--s16); justify-content: center; border-bottom: 0; }
}
@media (min-width: 901px) { .nav-menu { display: contents; } }

/* ------------------------------------------------------------- buttons -- */

.btn {
   display: inline-flex; align-items: center; gap: var(--s8);
   font-family: var(--font-ui); font-size: 15px; font-weight: 500; line-height: 1;
   padding: 13px 26px; border-radius: var(--radius-pill); border: 1px solid transparent;
   cursor: pointer; white-space: nowrap;
   transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* the only filled button in the system */
.btn-primary { background: var(--lime); color: #08090b; box-shadow: 0 0 0 1px rgba(168,255,83,.15) inset; }
.btn-primary:hover { background: #b6ff70; color: #08090b; }
.btn-primary i { color: #08090b; }

.btn-ghost { background: transparent; color: var(--bone); border-color: var(--edge); }
.btn-ghost:hover { color: var(--bone); border-color: #ffffff; }

.btn-quiet { background: transparent; color: var(--cloud); }
.btn-quiet:hover { color: var(--bone); }

.btn-sm { font-size: 14px; padding: 10px 20px; }
.btn-block { width: 100%; justify-content: center; }

/* --------------------------------------------------------------- cards -- */

.card-x {
   background: var(--card); border: 1px solid var(--edge-soft); border-radius: var(--radius);
   padding: var(--s32); transition: border-color .25s ease;
}
.card-x:hover { border-color: var(--edge); }
.card-x > :last-child { margin-bottom: 0; }
.card-inset { background: var(--inset); border-radius: var(--radius-nested); }
.card-flex { display: flex; flex-direction: column; }
.card-flex .spec { flex: 1 1 auto; }

/* pill with a chromatic icon — the signature tag component */
.pill {
   display: inline-flex; align-items: center; gap: 7px;
   font-size: 14px; font-family: var(--font-ui); color: var(--bone);
   border: 1px solid var(--edge-soft); border-radius: var(--radius-pill); padding: 5px 14px;
   background: transparent; transition: border-color .15s ease;
}
.pill:hover { border-color: var(--hairline); }
.pill i { font-size: 13px; }

.pill-row { display: flex; gap: var(--s8); flex-wrap: wrap; }

/* --------------------------------------------------- terminal / inset -- */

.term { background: var(--inset); border: 1px solid var(--edge-soft); border-radius: var(--radius-nested); overflow: hidden; }
.term-bar {
   display: flex; align-items: center; gap: var(--s8);
   padding: 10px var(--s16); border-bottom: 1px solid var(--steel);
   font-family: var(--font-mono); font-size: 12px; color: var(--fog);
}
.term-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--steel); }
.term-dot.on { background: var(--lime); }
.term-body {
   padding: var(--s24); font-family: var(--font-mono); font-size: 14px; line-height: 1.65;
   color: var(--fog); white-space: pre-wrap; word-break: break-word;
   /* фиксированная высота: появляющийся текст не меняет размер блока */
   height: calc(23.1em + var(--s24) * 2); overflow: hidden;
}
.term-body.is-typing .caret { animation: none; opacity: 1; }
/* syntax roles */
.term-body .kw   { color: var(--violet) }
.term-body .str  { color: var(--pink) }
.term-body .typ  { color: var(--loop-green) }
.term-body .var  { color: var(--key-lime) }
.term-body .prop { color: var(--magenta) }
.term-body .cm   { color: #5f666e }

/* ---------------------------------------------------------------- hero -- */

.hero { position: relative; padding: var(--s96) 0 var(--s64); overflow: hidden; }
/* soft canvas wash so the headline never fights the receding text */
.hero::before {
   content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
   background: radial-gradient(ellipse 52% 46% at 50% 46%, var(--canvas) 30%, rgba(8,9,11,.76) 58%, transparent 82%);
}
.hero-in { position: relative; z-index: 2; text-align: center; }
.hero h1 { margin: 0 auto var(--s24); max-width: 900px; }
.hero .lead { max-width: 620px; margin: 0 auto; }
.hero-cta { display: flex; gap: var(--s12); justify-content: center; flex-wrap: wrap; margin-top: var(--s32); align-items: center; }

/* announcement pill above the headline */
.announce {
   display: inline-flex; align-items: center; gap: var(--s8);
   font-size: 14px; color: var(--cloud);
   border: 1px solid var(--edge-soft); border-radius: var(--radius-pill); padding: 8px 18px;
   margin-bottom: var(--s32); background: rgba(255,255,255,.02);
}
.announce:hover { border-color: var(--hairline); color: var(--bone); }
.announce i { color: var(--fog); font-size: 12px; }

/* receding terminal text behind the hero */
.hero-bg {
   position: absolute; inset: -8% -20% auto -20%; height: 640px;
   z-index: 1; pointer-events: none; user-select: none;
   perspective: 620px; perspective-origin: 50% 0%;
   -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 42%, transparent 76%);
           mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.45) 42%, transparent 76%);
}
.hero-bg pre {
   margin: 0; transform: rotateX(58deg) rotateZ(-16deg); transform-origin: 50% 0%;
   font-family: var(--font-mono); font-size: 26px; line-height: 1.95; letter-spacing: .02em;
   color: #39414a; opacity: .42; white-space: pre; text-align: center;
}
@media (max-width: 900px) { .hero-bg { height: 420px; } .hero-bg pre { font-size: 17px; } }

.marks { display: flex; gap: var(--s16); flex-wrap: wrap; justify-content: center; margin-top: var(--s32); }
.marks span { font-family: var(--font-mono); font-size: 13px; color: #5f666e; }

/* ------------------------------------------------------------- metrics -- */

.metric-n {
   font-family: var(--font-display); font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: .03em;
   color: var(--bone); margin-bottom: var(--s8);
}
.metric-l { font-size: 14px; color: var(--fog); }

/* -------------------------------------------------------------- inputs -- */

.field { display: flex; gap: var(--s8); flex-wrap: wrap; }
.input {
   flex: 1 1 240px; min-width: 0;
   background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-input);
   color: var(--bone); font-family: var(--font-ui); font-size: 15px; padding: 12px var(--s16);
   transition: border-color .15s ease;
}
.input::placeholder { color: #6b727a; }
.input:focus { outline: none; border-color: var(--lime-line); }
.input-mono { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }

select.input { appearance: none; }
select.input option { background: var(--inset); color: var(--bone); }

.form-note { font-size: 13px; color: var(--fog); margin-top: var(--s12); }

.result {
   margin-top: var(--s16); border: 1px solid var(--hairline); border-radius: var(--radius-nested);
   background: var(--inset); padding: var(--s16);
   font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--fog);
}
.result h5 { font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: var(--cloud); margin: 0; line-height: 1.6; }
.result.ok { border-color: var(--lime-line); }
.result.ok b { color: var(--lime); }

/* --------------------------------------------------------------- price -- */

.price { font-family: var(--font-display); font-size: 38px; font-weight: 400; line-height: 1; letter-spacing: .03em; color: var(--bone); }
.price small { font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: var(--fog); }

.spec { list-style: none; margin: 0 0 var(--s24); padding: 0; }
.spec li {
   display: flex; gap: var(--s12); align-items: flex-start;
   font-size: 14px; color: var(--ash); padding: 8px 0; border-bottom: 1px solid var(--hairline);
}
.spec li:last-child { border-bottom: 0; }
.spec i { font-size: 12px; margin-top: 4px; flex: 0 0 auto; color: var(--fog); }

/* --------------------------------------------------------------- steps -- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li {
   counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: var(--s16);
   padding: var(--s16) 0; border-bottom: 1px solid var(--hairline);
}
.steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.steps li::before {
   content: counter(s);
   font-family: var(--font-mono); font-size: 12px; color: var(--fog);
   border: 1px solid var(--hairline); border-radius: var(--radius-pill);
   width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
}
.steps h4 { font-family: var(--font-ui); font-size: 15px; font-weight: 500; color: var(--bone); margin: 0 0 4px; }
.steps p { margin: 0; font-size: 14px; color: var(--fog); }

/* ----------------------------------------------------------- accordion -- */

.acc { border-top: 1px solid var(--hairline); }
.acc details { border-bottom: 1px solid var(--hairline); }
.acc summary {
   list-style: none; cursor: pointer; padding: var(--s24) 0;
   display: flex; align-items: center; justify-content: space-between; gap: var(--s16);
   font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: .03em; color: var(--bone);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-family: var(--font-mono); font-size: 18px; color: var(--fog); flex: 0 0 auto; }
.acc details[open] summary::after { content: "−"; color: var(--lime); }
.acc .acc-body { padding: 0 0 var(--s24); max-width: 760px; }
.acc .acc-body p { margin: 0 0 var(--s12); font-size: 15px; color: var(--fog); }
.acc .acc-body p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- reps -- */

.rep { display: flex; flex-direction: column; gap: var(--s12); height: 100%; }
.rep-city { font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: .03em; color: var(--bone); margin: 0; }
.rep-region { font-size: 13px; color: var(--fog); margin: 0; }
.rep-name { font-size: 15px; color: var(--cloud); margin: 0; }
.rep-foot { margin-top: auto; padding-top: var(--s16); }

/* -------------------------------------------------------------- footer -- */

.foot { border-top: 1px solid var(--edge-soft); padding: var(--s64) 0 var(--s32); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s32); }
.foot h5 { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ash); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 var(--s16); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: var(--s12); }
.foot a { font-size: 14px; color: var(--fog); }
.foot a:hover { color: var(--bone); }
.foot-bottom {
   display: flex; align-items: center; justify-content: space-between; gap: var(--s16); flex-wrap: wrap;
   margin-top: var(--s48); padding-top: var(--s24); border-top: 1px solid var(--hairline);
   font-size: 13px; color: var(--fog);
}
@media (max-width: 780px) { .foot-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------------------------------------------------------------- misc -- */

.cta-row { display: flex; gap: var(--s12); flex-wrap: wrap; margin-top: var(--s32); }

.alert-x {
   border: 1px solid var(--edge-soft); border-left: 2px solid var(--lime); border-radius: var(--radius-nested);
   background: var(--inset); padding: var(--s16); font-size: 14px; color: var(--ash); margin-bottom: var(--s16);
}
.alert-x.warn { border-left-color: var(--key-lime); }
.alert-x.bad  { border-left-color: var(--red); }

.doc h3 { font-size: 18px; margin: var(--s40) 0 var(--s16); color: var(--bone); }
.doc h3:first-child { margin-top: 0; }
.doc p { font-size: 15px; line-height: 1.6; color: var(--ash); margin: 0 0 var(--s12); }
.doc ul { margin: 0 0 var(--s16); padding-left: var(--s24); }
.doc li { font-size: 15px; line-height: 1.6; color: var(--ash); margin-bottom: 6px; }
.doc a { color: var(--lime); }
.doc b { color: var(--bone); }

.table-x { width: 100%; border-collapse: collapse; font-size: 14px; }
.table-x th {
   font-family: var(--font-ui); font-weight: 500; font-size: 12px; letter-spacing: .08em;
   text-transform: uppercase; color: var(--fog); text-align: left;
   padding: var(--s12) var(--s16); border-bottom: 1px solid var(--hairline);
}
.table-x td { padding: var(--s12) var(--s16); border-bottom: 1px solid var(--hairline); color: var(--cloud); }
.table-x tbody tr:hover td { background: rgba(255,255,255,.02); }
.table-x .mono { color: var(--bone); }

.alert-x.ok   { border-left-color: var(--lime); }

/* ------------------------------------------------------ панель: UI -- */

.page-head {
   display: flex; align-items: flex-end; justify-content: space-between;
   gap: var(--s16); flex-wrap: wrap; margin-bottom: var(--s24);
}

/* строка фильтров над таблицей */
.filters {
   display: flex; flex-wrap: wrap; gap: var(--s8);
   padding: var(--s16); margin-bottom: var(--s16);
   border: 1px solid var(--edge-soft); border-radius: var(--radius); background: var(--inset);
}
.filters .input { height: 38px; font-size: 14px; padding: 0 var(--s12); }
.filters .f-grow { flex: 1 1 200px; min-width: 160px; }
.filters .btn { align-self: center; }
.filters input[type="date"] { color-scheme: dark; min-width: 140px; }
.date-field { display: inline-flex; align-items: center; gap: 6px; }
.date-field > span { font-size: 13px; color: var(--fog); }

.table-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s16); margin-bottom: var(--s12); }
.table-x td.right { text-align: right; white-space: nowrap; }
.table-x tr.is-off td { opacity: .45; }

/* короткие метки в ячейках */
.tag {
   display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill);
   border: 1px solid var(--edge-soft); background: var(--raised);
   font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
   color: var(--ash); white-space: nowrap;
}
.tag-lime   { border-color: var(--lime-line);          color: var(--lime); }
.tag-violet { border-color: rgba(156,154,242,.34);     color: var(--violet); }
.tag-red    { border-color: rgba(244,63,94,.34);       color: var(--red); }

/* постраничность */
.pager { display: flex; align-items: center; gap: 6px; margin-top: var(--s24); flex-wrap: wrap; }
.pager-b {
   min-width: 34px; height: 34px; padding: 0 10px;
   display: inline-flex; align-items: center; justify-content: center;
   border: 1px solid var(--edge-soft); border-radius: var(--radius-input);
   font-family: var(--font-mono); font-size: 13px; color: var(--ash);
}
.pager-b:hover { border-color: var(--edge); color: var(--bone); }
.pager-b.is-current { border-color: var(--lime-line); background: var(--lime-dim); color: var(--lime); }
.pager-b.is-off { opacity: .35; pointer-events: none; }
.pager-gap { color: var(--fog); padding: 0 2px; }

/* вкладки */
.tabs { display: flex; gap: var(--s8); flex-wrap: wrap; border-bottom: 1px solid var(--edge-soft); }
.tab {
   padding: var(--s12) var(--s16); font-size: 14px; color: var(--fog);
   border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--bone); }
.tab.is-current { color: var(--lime); border-bottom-color: var(--lime); }

/* сырой вывод в диагностике */
.raw {
   margin: 0; padding: var(--s12) var(--s16); background: var(--canvas);
   border: 1px solid var(--edge-soft); border-radius: var(--radius-nested);
   font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--fog);
   white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow: auto;
}

/* заявки */
.lead-list { display: flex; flex-direction: column; gap: var(--s12); }
.lead-row {
   display: flex; gap: var(--s16); flex-wrap: wrap; align-items: center; justify-content: space-between;
   padding: var(--s16); border: 1px solid var(--edge-soft); border-radius: var(--radius); background: var(--card);
}
.lead-main { flex: 1 1 260px; min-width: 0; }
.lead-top { display: flex; gap: var(--s8); align-items: center; flex-wrap: wrap; font-size: 12px; margin-bottom: var(--s8); }
.lead-contact { font-size: 15px; color: var(--bone); word-break: break-word; }
.lead-actions { display: flex; gap: var(--s8); flex-wrap: wrap; align-items: center; flex: 1 1 320px; }
.lead-actions .input { height: 38px; font-size: 14px; padding: 0 var(--s12); }
.lead-actions .f-grow { flex: 1 1 140px; min-width: 120px; }

@media (max-width: 720px) {
   .filters .input, .filters .btn { width: 100%; }
   .filters .f-grow { flex: 1 1 100%; }
}

.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s24); }
.auth-card { width: 100%; max-width: 380px; }


/* ------------------------------------------- карточка регистрации -- */
/* Левая колонка — ввод, правая — карточка: пока проверки не было она
   лежит «рубашкой вверх» в тени, после ответа разворачивается. */

.check-cells > div { display: flex; flex-direction: column; justify-content: center; }
.holo-slot { padding: 0 !important; background: transparent !important; border: 0 !important; }

.holo {
   position: relative; width: 100%; aspect-ratio: 1.62 / 1; min-height: 250px;
}
.holo-inner { position: absolute; inset: 0; }

.holo-face {
   position: absolute; inset: 0; overflow: hidden;
   border-radius: var(--radius); border: 1px solid var(--edge-soft);
   background: linear-gradient(160deg, #14161c 0%, #0b0c10 55%, #08090c 100%);
   transition: opacity .55s ease, filter .55s ease, transform .55s cubic-bezier(.22,.61,.36,1),
               box-shadow .55s ease;
}

/* рубашка лежит сверху; результат проявляется под ней, без переворота */
.holo-back  { opacity: 1; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); }
.holo-front { opacity: 0; filter: blur(9px); transform: scale(.985); pointer-events: none; }
.holo-miss  { opacity: 0; filter: blur(9px); transform: scale(.985); pointer-events: none;
              background: linear-gradient(160deg, #16121a 0%, #0b0a0e 60%, #08080a 100%); }

.holo.is-open .holo-back,
.holo.is-miss .holo-back { opacity: 0; filter: blur(7px); transform: scale(1.015); }

.holo.is-open .holo-front { opacity: 1; filter: none; transform: none; pointer-events: auto;
   box-shadow: 0 34px 70px -28px rgba(0,0,0,.95), 0 0 0 1px var(--lime-line), 0 0 60px -18px rgba(168,255,83,.45); }
.holo.is-miss .holo-miss  { opacity: 1; filter: none; transform: none; pointer-events: auto;
   box-shadow: 0 30px 60px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(244,63,94,.28); }

/* гильошированная сетка — как на защищённых бланках */
.holo-weave {
   position: absolute; inset: -20%;
   background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 96 48%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%220%22 stop-color=%22%23c6ddea%22/%3E%3Cstop offset=%22.2%22 stop-color=%22%23b9b6d3%22/%3E%3Cstop offset=%22.4%22 stop-color=%22%23e5c7d6%22/%3E%3Cstop offset=%22.6%22 stop-color=%22%23e7c5b3%22/%3E%3Cstop offset=%221%22 stop-color=%22%23afd8b7%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill=%22none%22 stroke=%22url(%23g)%22 stroke-width=%22.55%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M0 0C4.1 -4.6 7.9 -4.6 12 0C16.1 4.6 19.9 4.6 24 0C28.1 -4.6 31.9 -4.6 36 0C40.1 4.6 43.9 4.6 48 0C52.1 -4.6 55.9 -4.6 60 0C64.1 4.6 67.9 4.6 72 0C76.1 -4.6 79.9 -4.6 84 0C88.1 4.6 91.9 4.6 96 0%22/%3E%3Cpath d=%22M0 4C4.1 -0.6 7.9 -0.6 12 4C16.1 8.6 19.9 8.6 24 4C28.1 -0.6 31.9 -0.6 36 4C40.1 8.6 43.9 8.6 48 4C52.1 -0.6 55.9 -0.6 60 4C64.1 8.6 67.9 8.6 72 4C76.1 -0.6 79.9 -0.6 84 4C88.1 8.6 91.9 8.6 96 4%22/%3E%3Cpath d=%22M0 8C4.1 3.4 7.9 3.4 12 8C16.1 12.6 19.9 12.6 24 8C28.1 3.4 31.9 3.4 36 8C40.1 12.6 43.9 12.6 48 8C52.1 3.4 55.9 3.4 60 8C64.1 12.6 67.9 12.6 72 8C76.1 3.4 79.9 3.4 84 8C88.1 12.6 91.9 12.6 96 8%22/%3E%3Cpath d=%22M0 12C4.1 7.4 7.9 7.4 12 12C16.1 16.6 19.9 16.6 24 12C28.1 7.4 31.9 7.4 36 12C40.1 16.6 43.9 16.6 48 12C52.1 7.4 55.9 7.4 60 12C64.1 16.6 67.9 16.6 72 12C76.1 7.4 79.9 7.4 84 12C88.1 16.6 91.9 16.6 96 12%22/%3E%3Cpath d=%22M0 16C4.1 11.4 7.9 11.4 12 16C16.1 20.6 19.9 20.6 24 16C28.1 11.4 31.9 11.4 36 16C40.1 20.6 43.9 20.6 48 16C52.1 11.4 55.9 11.4 60 16C64.1 20.6 67.9 20.6 72 16C76.1 11.4 79.9 11.4 84 16C88.1 20.6 91.9 20.6 96 16%22/%3E%3Cpath d=%22M0 20C4.1 15.4 7.9 15.4 12 20C16.1 24.6 19.9 24.6 24 20C28.1 15.4 31.9 15.4 36 20C40.1 24.6 43.9 24.6 48 20C52.1 15.4 55.9 15.4 60 20C64.1 24.6 67.9 24.6 72 20C76.1 15.4 79.9 15.4 84 20C88.1 24.6 91.9 24.6 96 20%22/%3E%3Cpath d=%22M0 24C4.1 19.4 7.9 19.4 12 24C16.1 28.6 19.9 28.6 24 24C28.1 19.4 31.9 19.4 36 24C40.1 28.6 43.9 28.6 48 24C52.1 19.4 55.9 19.4 60 24C64.1 28.6 67.9 28.6 72 24C76.1 19.4 79.9 19.4 84 24C88.1 28.6 91.9 28.6 96 24%22/%3E%3Cpath d=%22M0 28C4.1 23.4 7.9 23.4 12 28C16.1 32.6 19.9 32.6 24 28C28.1 23.4 31.9 23.4 36 28C40.1 32.6 43.9 32.6 48 28C52.1 23.4 55.9 23.4 60 28C64.1 32.6 67.9 32.6 72 28C76.1 23.4 79.9 23.4 84 28C88.1 32.6 91.9 32.6 96 28%22/%3E%3Cpath d=%22M0 32C4.1 27.4 7.9 27.4 12 32C16.1 36.6 19.9 36.6 24 32C28.1 27.4 31.9 27.4 36 32C40.1 36.6 43.9 36.6 48 32C52.1 27.4 55.9 27.4 60 32C64.1 36.6 67.9 36.6 72 32C76.1 27.4 79.9 27.4 84 32C88.1 36.6 91.9 36.6 96 32%22/%3E%3Cpath d=%22M0 36C4.1 31.4 7.9 31.4 12 36C16.1 40.6 19.9 40.6 24 36C28.1 31.4 31.9 31.4 36 36C40.1 40.6 43.9 40.6 48 36C52.1 31.4 55.9 31.4 60 36C64.1 40.6 67.9 40.6 72 36C76.1 31.4 79.9 31.4 84 36C88.1 40.6 91.9 40.6 96 36%22/%3E%3Cpath d=%22M0 40C4.1 35.4 7.9 35.4 12 40C16.1 44.6 19.9 44.6 24 40C28.1 35.4 31.9 35.4 36 40C40.1 44.6 43.9 44.6 48 40C52.1 35.4 55.9 35.4 60 40C64.1 44.6 67.9 44.6 72 40C76.1 35.4 79.9 35.4 84 40C88.1 44.6 91.9 44.6 96 40%22/%3E%3Cpath d=%22M0 44C4.1 39.4 7.9 39.4 12 44C16.1 48.6 19.9 48.6 24 44C28.1 39.4 31.9 39.4 36 44C40.1 48.6 43.9 48.6 48 44C52.1 39.4 55.9 39.4 60 44C64.1 48.6 67.9 48.6 72 44C76.1 39.4 79.9 39.4 84 44C88.1 48.6 91.9 48.6 96 44%22/%3E%3Cpath d=%22M0 48C4.1 43.4 7.9 43.4 12 48C16.1 52.6 19.9 52.6 24 48C28.1 43.4 31.9 43.4 36 48C40.1 52.6 43.9 52.6 48 48C52.1 43.4 55.9 43.4 60 48C64.1 52.6 67.9 52.6 72 48C76.1 43.4 79.9 43.4 84 48C88.1 52.6 91.9 52.6 96 48%22/%3E%3Cpath d=%22M0 52C4.1 47.4 7.9 47.4 12 52C16.1 56.6 19.9 56.6 24 52C28.1 47.4 31.9 47.4 36 52C40.1 56.6 43.9 56.6 48 52C52.1 47.4 55.9 47.4 60 52C64.1 56.6 67.9 56.6 72 52C76.1 47.4 79.9 47.4 84 52C88.1 56.6 91.9 56.6 96 52%22/%3E%3Cpath d=%22M0 2C4.1 6.6 7.9 6.6 12 2C16.1 -2.6 19.9 -2.6 24 2C28.1 6.6 31.9 6.6 36 2C40.1 -2.6 43.9 -2.6 48 2C52.1 6.6 55.9 6.6 60 2C64.1 -2.6 67.9 -2.6 72 2C76.1 6.6 79.9 6.6 84 2C88.1 -2.6 91.9 -2.6 96 2%22/%3E%3Cpath d=%22M0 6C4.1 10.6 7.9 10.6 12 6C16.1 1.4 19.9 1.4 24 6C28.1 10.6 31.9 10.6 36 6C40.1 1.4 43.9 1.4 48 6C52.1 10.6 55.9 10.6 60 6C64.1 1.4 67.9 1.4 72 6C76.1 10.6 79.9 10.6 84 6C88.1 1.4 91.9 1.4 96 6%22/%3E%3Cpath d=%22M0 10C4.1 14.6 7.9 14.6 12 10C16.1 5.4 19.9 5.4 24 10C28.1 14.6 31.9 14.6 36 10C40.1 5.4 43.9 5.4 48 10C52.1 14.6 55.9 14.6 60 10C64.1 5.4 67.9 5.4 72 10C76.1 14.6 79.9 14.6 84 10C88.1 5.4 91.9 5.4 96 10%22/%3E%3Cpath d=%22M0 14C4.1 18.6 7.9 18.6 12 14C16.1 9.4 19.9 9.4 24 14C28.1 18.6 31.9 18.6 36 14C40.1 9.4 43.9 9.4 48 14C52.1 18.6 55.9 18.6 60 14C64.1 9.4 67.9 9.4 72 14C76.1 18.6 79.9 18.6 84 14C88.1 9.4 91.9 9.4 96 14%22/%3E%3Cpath d=%22M0 18C4.1 22.6 7.9 22.6 12 18C16.1 13.4 19.9 13.4 24 18C28.1 22.6 31.9 22.6 36 18C40.1 13.4 43.9 13.4 48 18C52.1 22.6 55.9 22.6 60 18C64.1 13.4 67.9 13.4 72 18C76.1 22.6 79.9 22.6 84 18C88.1 13.4 91.9 13.4 96 18%22/%3E%3Cpath d=%22M0 22C4.1 26.6 7.9 26.6 12 22C16.1 17.4 19.9 17.4 24 22C28.1 26.6 31.9 26.6 36 22C40.1 17.4 43.9 17.4 48 22C52.1 26.6 55.9 26.6 60 22C64.1 17.4 67.9 17.4 72 22C76.1 26.6 79.9 26.6 84 22C88.1 17.4 91.9 17.4 96 22%22/%3E%3Cpath d=%22M0 26C4.1 30.6 7.9 30.6 12 26C16.1 21.4 19.9 21.4 24 26C28.1 30.6 31.9 30.6 36 26C40.1 21.4 43.9 21.4 48 26C52.1 30.6 55.9 30.6 60 26C64.1 21.4 67.9 21.4 72 26C76.1 30.6 79.9 30.6 84 26C88.1 21.4 91.9 21.4 96 26%22/%3E%3Cpath d=%22M0 30C4.1 34.6 7.9 34.6 12 30C16.1 25.4 19.9 25.4 24 30C28.1 34.6 31.9 34.6 36 30C40.1 25.4 43.9 25.4 48 30C52.1 34.6 55.9 34.6 60 30C64.1 25.4 67.9 25.4 72 30C76.1 34.6 79.9 34.6 84 30C88.1 25.4 91.9 25.4 96 30%22/%3E%3Cpath d=%22M0 34C4.1 38.6 7.9 38.6 12 34C16.1 29.4 19.9 29.4 24 34C28.1 38.6 31.9 38.6 36 34C40.1 29.4 43.9 29.4 48 34C52.1 38.6 55.9 38.6 60 34C64.1 29.4 67.9 29.4 72 34C76.1 38.6 79.9 38.6 84 34C88.1 29.4 91.9 29.4 96 34%22/%3E%3Cpath d=%22M0 38C4.1 42.6 7.9 42.6 12 38C16.1 33.4 19.9 33.4 24 38C28.1 42.6 31.9 42.6 36 38C40.1 33.4 43.9 33.4 48 38C52.1 42.6 55.9 42.6 60 38C64.1 33.4 67.9 33.4 72 38C76.1 42.6 79.9 42.6 84 38C88.1 33.4 91.9 33.4 96 38%22/%3E%3Cpath d=%22M0 42C4.1 46.6 7.9 46.6 12 42C16.1 37.4 19.9 37.4 24 42C28.1 46.6 31.9 46.6 36 42C40.1 37.4 43.9 37.4 48 42C52.1 46.6 55.9 46.6 60 42C64.1 37.4 67.9 37.4 72 42C76.1 46.6 79.9 46.6 84 42C88.1 37.4 91.9 37.4 96 42%22/%3E%3Cpath d=%22M0 46C4.1 50.6 7.9 50.6 12 46C16.1 41.4 19.9 41.4 24 46C28.1 50.6 31.9 50.6 36 46C40.1 41.4 43.9 41.4 48 46C52.1 50.6 55.9 50.6 60 46C64.1 41.4 67.9 41.4 72 46C76.1 50.6 79.9 50.6 84 46C88.1 41.4 91.9 41.4 96 46%22/%3E%3Cpath d=%22M0 50C4.1 54.6 7.9 54.6 12 50C16.1 45.4 19.9 45.4 24 50C28.1 54.6 31.9 54.6 36 50C40.1 45.4 43.9 45.4 48 50C52.1 54.6 55.9 54.6 60 50C64.1 45.4 67.9 45.4 72 50C76.1 54.6 79.9 54.6 84 50C88.1 45.4 91.9 45.4 96 50%22/%3E%3Cpath d=%22M0 54C4.1 58.6 7.9 58.6 12 54C16.1 49.4 19.9 49.4 24 54C28.1 58.6 31.9 58.6 36 54C40.1 49.4 43.9 49.4 48 54C52.1 58.6 55.9 58.6 60 54C64.1 49.4 67.9 49.4 72 54C76.1 58.6 79.9 58.6 84 54C88.1 49.4 91.9 49.4 96 54%22/%3E%3C/g%3E%3C/svg%3E");
   background-size: 150px 75px;
   opacity: .13; mix-blend-mode: screen;
   /* к низу узор гаснет, чтобы не мешать номеру и подписям */
   -webkit-mask-image: radial-gradient(120% 95% at 78% 6%, #000 12%, rgba(0,0,0,.45) 46%, transparent 78%);
           mask-image: radial-gradient(120% 95% at 78% 6%, #000 12%, rgba(0,0,0,.45) 46%, transparent 78%);
   transition: opacity .6s ease;
}
.holo.is-open .holo-front .holo-weave { opacity: .26; }

/* радужный блик, идущий за курсором */
/* радужный блик: светлое пятно и косая полоса, обе сами ходят по карточке */
.holo-sheen {
   position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .38;
   background:
      radial-gradient(closest-side,
         rgba(198,221,234,.55) 0%, rgba(185,182,211,.42) 26%, rgba(229,199,214,.32) 48%,
         rgba(231,197,179,.22) 66%, rgba(175,216,183,.16) 82%, transparent 100%),
      linear-gradient(104deg,
         transparent 18%, rgba(198,221,234,.16) 32%, rgba(229,199,214,.20) 42%,
         rgba(231,197,179,.16) 50%, rgba(175,216,183,.14) 60%, transparent 74%);
   background-repeat: no-repeat, no-repeat;
   background-size: 86% 120%, 260% 100%;
   background-position: 12% 0%, 0% 0;
   transition: opacity .6s ease;
}
.holo.is-open .holo-front .holo-sheen { opacity: .8; }

/* радужная фольга: плотные полосы спектра, которые всё время ползут.
   Это и даёт «голограмму»; блик под курсором работает поверх неё. */
.holo-foil {
   position: absolute; inset: -30%; pointer-events: none;
   mix-blend-mode: screen; opacity: .1;
   background: repeating-linear-gradient(
      104deg,
      rgba(198,221,234,0)   0px,
      rgba(198,221,234,.55) 60px,
      rgba(185,182,211,.55) 120px,
      rgba(229,199,214,.55) 180px,
      rgba(231,197,179,.55) 240px,
      rgba(217,240,124,.40) 300px,
      rgba(175,216,183,.55) 360px,
      rgba(198,221,234,0)   430px
   );
   background-size: 220% 220%;
   filter: blur(21px) saturate(140%);
   /* к низу, где номер и подписи, перелив уходит */
   -webkit-mask-image: radial-gradient(130% 100% at 76% 2%, #000 8%, rgba(0,0,0,.5) 42%, transparent 76%);
           mask-image: radial-gradient(130% 100% at 76% 2%, #000 8%, rgba(0,0,0,.5) 42%, transparent 76%);
   transition: opacity .6s ease;
}
.holo.is-open .holo-front .holo-foil { opacity: .4; }

/* разовая вспышка в момент проявки — по карточке проходит луч */
.holo-flare {
   position: absolute; inset: -40%; pointer-events: none; opacity: 0;
   mix-blend-mode: screen;
   background: linear-gradient(104deg,
      transparent 40%,
      rgba(198,221,234,.35) 46%, rgba(229,199,214,.55) 50%, rgba(231,197,179,.35) 54%,
      transparent 60%);
   filter: blur(6px);
}

.holo-edge {
   position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
   background: linear-gradient(150deg, rgba(255,255,255,.16), transparent 34%, transparent 66%, rgba(255,255,255,.07));
   -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
           mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
   -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}

/* ---- рубашка ---- */
.holo-back-in {
   position: relative; z-index: 2; height: 100%;
   display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s16);
   text-align: center; padding: var(--s24);
}
.holo-mark { display: block; }
.holo-q {
   font-family: var(--font-display); font-size: 54px; line-height: 1; font-weight: 600;
   color: transparent; -webkit-text-stroke: 1px rgba(217,218,229,.32);
}
.holo-back-t { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
   letter-spacing: .06em; color: var(--fog); }

/* ---- лицевая сторона ---- */
.holo-front-in {
   position: relative; z-index: 2; height: 100%;
   display: flex; flex-direction: column; padding: var(--s24) clamp(20px, 3vw, 30px);
}
.holo-top { display: flex; align-items: center; gap: var(--s12); }
.holo-status {
   font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
   color: var(--lime); padding: 3px 11px; border: 1px solid var(--lime-line);
   border-radius: var(--radius-pill); background: var(--lime-dim);
}
.holo-plate {
   margin-top: auto; font-family: var(--font-mono); font-weight: 500;
   font-size: clamp(26px, 3.6vw, 40px); line-height: 1; letter-spacing: .04em;
   color: #fff; text-shadow: 0 0 22px rgba(255,255,255,.22);
}
.holo-grid {
   display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s12);
   margin-top: var(--s16); padding-top: var(--s16); border-top: 1px solid var(--edge-soft);
}
.holo-grid span {
   display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
   text-transform: uppercase; color: var(--fog); margin-bottom: 4px;
}
.holo-grid b { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--cloud); }
.holo-bottom { display: flex; align-items: center; gap: var(--s12); margin-top: var(--s16); }
.holo-chip {
   flex: 0 0 auto; width: 26px; height: 19px; border-radius: 4px;
   background: linear-gradient(135deg, #d9dae5, #8f95a3 45%, #eef0f5 62%, #7f8593);
   box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.holo-fine { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; color: var(--fog); }

/* ---- ничего не найдено ---- */
.holo-miss-in {
   position: relative; z-index: 2; height: 100%;
   display: flex; flex-direction: column; align-items: center; justify-content: center;
   text-align: center; padding: var(--s24) clamp(20px, 3vw, 34px); gap: var(--s8);
}
.holo-q-miss { -webkit-text-stroke-color: rgba(244,63,94,.45); font-size: 40px; }
.holo-miss-in h4 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--bone); }
.holo-miss-in p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--fog); max-width: 34ch; }
.holo-miss-in b { color: var(--cloud); font-family: var(--font-mono); }
.holo-miss-in button.link-underline {
   background: none; border: 0; padding: 0; font: inherit; color: var(--lime); cursor: pointer;
   border-bottom: 1px solid var(--lime-line);
}

/* во время запроса — только подсветка рамки, без движения */
.holo.is-busy .holo-back { border-color: var(--lime-line); }

.form-note.bad { color: var(--red); }

/* Движение живёт только на проявленной карточке.
   До проверки рубашка полностью статична. */
@media (prefers-reduced-motion: no-preference) {
   .holo.is-open .holo-front .holo-foil  { animation: holoFoil 9s linear infinite; }
   .holo.is-open .holo-front .holo-sheen { animation: holoShift 7s ease-in-out infinite alternate; }
   .holo.is-open .holo-front .holo-flare { animation: holoFlare 1.15s cubic-bezier(.22,.61,.36,1) .05s both; }
   .holo.is-miss .holo-q-miss { animation: holoRise .5s cubic-bezier(.22,.61,.36,1) .1s both; }

   /* содержимое всплывает по очереди, пока карточка проявляется */
   .holo.is-open .holo-front-in > * { animation: holoRise .55s cubic-bezier(.22,.61,.36,1) both; }
   .holo.is-open .holo-top      { animation-delay: .06s; }
   .holo.is-open .holo-plate    { animation-delay: .16s; }
   .holo.is-open .holo-grid     { animation-delay: .26s; }
   .holo.is-open .holo-bottom   { animation-delay: .34s; }
}
@keyframes holoFoil {
   0%   { background-position:   0% 50%; filter: blur(21px) saturate(140%) hue-rotate(0deg); }
   50%  { background-position: 100% 50%; filter: blur(21px) saturate(170%) hue-rotate(28deg); }
   100% { background-position:   0% 50%; filter: blur(21px) saturate(140%) hue-rotate(0deg); }
}
@keyframes holoFlare {
   0%   { opacity: 0;   transform: translateX(-42%); }
   22%  { opacity: .95; }
   100% { opacity: 0;   transform: translateX(42%); }
}
@keyframes holoShift {
   0%   { background-position: 10% 4%,  0% 0;   filter: hue-rotate(0deg); }
   50%  { background-position: 78% 66%, 55% 0;  filter: hue-rotate(18deg); }
   100% { background-position: 26% 22%, 100% 0; filter: hue-rotate(30deg); }
}
}
@keyframes holoRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
   .holo { min-height: 230px; }
}
@media (max-width: 620px) {
   /* на узком экране пропорция визитки не держит содержимое — задаём высоту */
   .holo { aspect-ratio: auto; height: 252px; min-height: 0; }
   .holo-front-in { padding: var(--s16) var(--s16); }
   .holo-plate { font-size: 30px; }
   .holo-grid { margin-top: var(--s12); padding-top: var(--s12); gap: var(--s8); }
   .holo-bottom { margin-top: var(--s12); align-items: flex-start; }
   .holo-fine { font-size: 10px; line-height: 1.4; }
   .holo-miss-in { padding: var(--s16); }
   .holo-miss-in p { font-size: 13px; }
}

/* --------------------------------------------------------- animations -- */

@media (prefers-reduced-motion: no-preference) {
   .reveal { opacity: 0; transform: translateY(12px); }
   .reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
   .reveal.d1.in { transition-delay: .05s } .reveal.d2.in { transition-delay: .1s } .reveal.d3.in { transition-delay: .15s }
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
.caret { display: inline-block; width: 8px; height: 1em; background: var(--lime); vertical-align: -2px; animation: blink .9s steps(1) infinite; }

/* accept notice */
.accept-wrap { position: fixed; inset: auto 0 0 0; z-index: 1080; padding: 0 var(--s24) var(--s24); pointer-events: none; }
.accept-in { max-width: var(--page); margin: 0 auto; display: flex; justify-content: flex-end; }
.accept {
   pointer-events: auto; max-width: min(22rem, 100%); background: var(--raised);
   border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--s16);
   font-size: 14px; line-height: 1.5; color: var(--ash);
}
.accept b { color: var(--bone); }
.accept a { color: var(--lime); }

/* utility */
.mt0 { margin-top: 0 } .mb0 { margin-bottom: 0 }
.mt8 { margin-top: var(--s8) } .mt16 { margin-top: var(--s16) } .mt24 { margin-top: var(--s24) }
.mt32 { margin-top: var(--s32) } .mt48 { margin-top: var(--s48) }
.mb8 { margin-bottom: var(--s8) } .mb16 { margin-bottom: var(--s16) } .mb24 { margin-bottom: var(--s24) }
.mb32 { margin-bottom: var(--s32) }
.center { text-align: center }
.flex { display: flex } .between { justify-content: space-between } .items-center { align-items: center }
.gap8 { gap: var(--s8) } .gap16 { gap: var(--s16) } .gap24 { gap: var(--s24) }
.wrapflex { flex-wrap: wrap }
@media (max-width: 640px) { .hide-sm { display: none !important } }

/* ===================================================== legacy compat ==
   Markup emitted by existing PHP logic keeps its Bootstrap class names.
   ==================================================================== */

.alert {
   position: relative; border: 1px solid var(--steel); border-left: 2px solid var(--fog);
   border-radius: var(--radius); background: var(--inset);
   padding: var(--s16) var(--s40) var(--s16) var(--s16);
   font-size: 14px; line-height: 1.5; color: var(--ash); text-align: left; margin-bottom: var(--s16);
}
.alert h5, .alert .alert-heading { font-family: var(--font-ui); font-size: 15px; font-weight: 500; color: var(--bone); margin: 0; }
.alert strong { color: var(--bone); font-weight: 500; }
.alert hr { border: 0; border-top: 1px solid var(--steel); margin: var(--s12) 0; }
.alert-success { border-left-color: var(--lime); }
.alert-danger  { border-left-color: var(--red); }
.alert-warning { border-left-color: var(--key-lime); }
.alert-dark    { border-left-color: var(--hairline); }

.btn-close, .alert .close {
   position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; padding: 0;
   background: none; border: 0; color: var(--fog); font-size: 18px; line-height: 1; cursor: pointer; opacity: 1;
}
.btn-close::before { content: "×"; }
.btn-close:hover, .alert .close:hover { color: var(--bone); }
.alert .close span { display: none; }

.form-control, .form-select {
   display: block; width: 100%; background: var(--card);
   border: 1px solid var(--hairline); border-radius: var(--radius-input); color: var(--bone);
   font-family: var(--font-ui); font-size: 15px; padding: 12px var(--s16); transition: border-color .15s ease;
}
.form-control::placeholder { color: #6b727a; }
.form-control:focus, .form-select:focus { outline: none; border-color: var(--lime-line); }
.form-select { appearance: none; }
.form-select option { background: var(--inset); color: var(--bone); }

.table-responsive { overflow-x: auto; border: 1px solid var(--edge-soft); border-radius: var(--radius); }
.table-responsive .table-x { min-width: 560px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* ------------------------------------------------------------ dyno ---- */

.dyno { width: 100%; height: auto; display: block; overflow: visible; }
.dyno-grid line { stroke: var(--steel); stroke-width: 1; }
.dyno-axis line { stroke: var(--hairline); stroke-width: 1; }
.dyno-line { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dyno-line.base  { stroke: #454d57; }
.dyno-line.tuned { stroke: var(--lime); }
.dyno-line.dash  { stroke-dasharray: 7 6; stroke-width: 1.8; }
.dyno-line.tuned.dash { stroke: rgba(168,255,83,.65); }
.dyno-cap { font-family: var(--font-mono); font-size: 11px; fill: var(--fog); letter-spacing: .04em; }
.dyno-cap.end { text-anchor: end; }
.dyno-area { opacity: 0; }
.dyno-peak { fill: var(--lime); opacity: 0; }
.dyno-runner { fill: #ffffff; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
   /* сетка проявляется первой */
   .dyno-grid line, .dyno-axis line { opacity: 0; }
   .in .dyno-grid line, .in .dyno-axis line { animation: dynoFade .5s ease both; }
   .in .dyno-axis line { animation-delay: .1s; }

   /* линии прорисовываются по очереди */
   .dyno-line { stroke-dasharray: 1600; stroke-dashoffset: 1600; }
   .in .dyno-line.base       { animation: dynoDraw 1.15s cubic-bezier(.35,.05,.2,1) .25s both; }
   .in .dyno-line.base.dash  { animation: dynoDrawDash 1.15s cubic-bezier(.35,.05,.2,1) .4s both; }
   .in .dyno-line.tuned.dash { animation: dynoDrawDash 1.25s cubic-bezier(.35,.05,.2,1) .9s both; }
   .in .dyno-line.tuned.glow { animation: dynoDraw 1.35s cubic-bezier(.35,.05,.2,1) 1.05s both; }

   /* заливка под кривой, пики и бегунок — после отрисовки */
   .in .dyno-area   { animation: dynoFade .9s ease 2.1s both; }
   .in .dyno-peak   { animation: dynoPop .5s cubic-bezier(.2,1.4,.4,1) 2.35s both, dynoPulse 2.6s ease-in-out 2.9s infinite; }
   .in .dyno-peak.d1{ animation-delay: 2.5s, 3.1s; }
   .in .dyno-runner { animation: dynoFade .6s ease 2.6s both; }

   @keyframes dynoDraw     { from { stroke-dashoffset: 1600 } to { stroke-dashoffset: 0 } }
   @keyframes dynoDrawDash { from { stroke-dashoffset: 1600; stroke-dasharray: 1600 }
                             99%  { stroke-dasharray: 1600 }
                             to   { stroke-dashoffset: 0; stroke-dasharray: 7 6 } }
   @keyframes dynoFade  { from { opacity: 0 } to { opacity: 1 } }
   @keyframes dynoPop   { from { opacity: 0; r: 0 } to { opacity: 1; r: 4 } }
   @keyframes dynoPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
}
@media (prefers-reduced-motion: reduce) {
   .dyno-area, .dyno-peak { opacity: 1; }
   .dyno-line.dash { stroke-dasharray: 7 6; }
}

/* ----------------------------------------------------------- modal ---- */

.modal-x {
   position: fixed; inset: 0; z-index: 1200;
   display: none; align-items: flex-start; justify-content: center;
   padding: 5vh var(--s24);
   overflow-y: auto;
   background: rgba(2, 3, 4, .8);
   backdrop-filter: blur(3px);
}
.modal-x.is-open { display: flex; }
.modal-card {
   width: 100%; max-width: 480px; margin: auto;
   background: var(--card); border: 1px solid var(--edge); border-radius: var(--radius);
   padding: var(--s32);
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s16); margin-bottom: var(--s24); }
.modal-close {
   background: none; border: 0; color: var(--fog); font-size: 22px; line-height: 1;
   cursor: pointer; padding: 0; margin: -4px -4px 0 0;
}
.modal-close:hover { color: var(--bone); }

.f-label { display: block; font-size: 13px; color: var(--fog); margin-bottom: var(--s8); }
.f-group { margin-bottom: var(--s24); }
.f-group:last-of-type { margin-bottom: var(--s16); }

/* segmented choice */
.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s8); }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
   display: flex; align-items: center; justify-content: center; gap: 6px;
   padding: 11px 12px; font-size: 14px; color: var(--cloud);
   border: 1px solid var(--hairline); border-radius: var(--radius-pill); cursor: pointer;
   transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.seg label:hover { border-color: var(--hairline); color: var(--bone); }
.seg input:checked + label { border-color: var(--lime-line); color: var(--bone); background: var(--lime-dim); }
.seg input:focus-visible + label { outline: 2px solid var(--lime); outline-offset: 2px; }

.seg-3 { grid-template-columns: repeat(3, 1fr); }

/* на узком экране подписи не должны обрезаться */
.seg label { min-width: 0; text-align: center; }
.seg label i { flex: 0 0 auto; }
@media (max-width: 420px) {
   .seg label { padding: 11px 8px; font-size: 13px; gap: 5px; }
   .seg label i { display: none; }
   .seg-3 label { padding: 11px 4px; }
}

/* блок «Город»: место под него зарезервировано, окно не прыгает
   при переключении «Представитель / Дистанционно» */
.f-swap .f-swap-alt {
   display: none; margin: 0; padding: 0 var(--s16); min-height: 46px;
   align-items: center; font-size: 13.5px; line-height: 1.35; color: var(--fog);
   border: 1px dashed var(--edge-soft); border-radius: var(--radius-input);
}
.f-swap.is-remote > label { visibility: hidden; }
.f-swap.is-remote > select { display: none; }
.f-swap.is-remote .f-swap-alt { display: flex; }

.check-row { display: flex; gap: var(--s12); align-items: flex-start; font-size: 13px; color: var(--ash); line-height: 1.45; }
.check-row input { margin: 3px 0 0; accent-color: var(--lime); width: 16px; height: 16px; flex: 0 0 auto; }
.check-row a { color: var(--lime); }

.form-msg { font-size: 14px; margin-top: var(--s16); }
.form-msg.ok  { color: var(--lime); }
.form-msg.bad { color: var(--red); }


/* ==========================================================================
   Атмосфера: фактура холста, свечения, стекло, интерактив
   ========================================================================== */

/* тонкая техническая сетка на всём холсте */
body::before {
   content: "";
   position: fixed; inset: 0; z-index: 0; pointer-events: none;
   background-image:
      linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
   background-size: 64px 64px;
   -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 70%);
           mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 70%);
}
/* мягкое зерно поверх — убирает «пластиковость» плоских заливок */
body::after {
   content: "";
   position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .028;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero, section, .rails, footer { position: relative; z-index: 1; }
/* nav и модалка живут в своих слоях — position им переопределять нельзя */
.nav { z-index: 100; }
.modal-x { z-index: 1200; }

/* полоса прогресса чтения */
.scroll-progress {
   position: fixed; top: 0; left: 0; height: 2px; width: 0;
   background: linear-gradient(90deg, var(--violet), var(--lime));
   z-index: 200; transition: width .1s linear;
}

/* ------------------------------------------------------------ hero ---- */

/* цветные ауры за первым экраном */
.hero-aura {
   position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.hero-aura span {
   position: absolute; display: block; border-radius: 50%;
   filter: blur(90px); opacity: .5;
}
.hero-aura .a1 { width: 620px; height: 420px; left: 50%; top: -160px; transform: translateX(-50%);
   background: radial-gradient(closest-side, rgba(168,255,83,.22), transparent); }
.hero-aura .a2 { width: 520px; height: 380px; left: 8%; top: 40px;
   background: radial-gradient(closest-side, rgba(118,85,253,.20), transparent); }
.hero-aura .a3 { width: 460px; height: 340px; right: 4%; top: 120px;
   background: radial-gradient(closest-side, rgba(250,58,191,.14), transparent); }

@media (prefers-reduced-motion: no-preference) {
   .hero-aura .a2 { animation: drift 26s ease-in-out infinite alternate; }
   .hero-aura .a3 { animation: drift 32s ease-in-out infinite alternate-reverse; }
   @keyframes drift { from { transform: translate3d(0,0,0) } to { transform: translate3d(40px,-24px,0) } }
}

/* заголовок с лёгким световым градиентом */
.t-hero {
   background: linear-gradient(180deg, #ffffff 0%, #cfd3d9 62%, #9aa1aa 100%);
   -webkit-background-clip: text; background-clip: text;
   -webkit-text-fill-color: transparent; color: transparent;
}

/* плашка-анонс: стеклянная, с бегущим бликом */
.announce {
   position: relative; overflow: hidden;
   background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
   border-color: var(--hairline);
   backdrop-filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference) {
   .announce::after {
      content: ""; position: absolute; inset: 0;
      background: linear-gradient(105deg, transparent 40%, rgba(168,255,83,.16) 50%, transparent 60%);
      transform: translateX(-120%);
      animation: sheen 5.5s ease-in-out 1.6s infinite;
   }
   @keyframes sheen { 0% { transform: translateX(-120%) } 22%,100% { transform: translateX(120%) } }
}

/* --------------------------------------------------------- surfaces --- */

/* у ячеек — едва заметный верхний свет, как у металла */
.cells > * { position: relative; }
.cells > *::before {
   content: ""; position: absolute; inset: 0; pointer-events: none;
   background: linear-gradient(180deg, rgba(255,255,255,.028), transparent 42%);
   opacity: 0; transition: opacity .35s ease;
}
.cells > *:hover::before { opacity: 1; }

/* подсветка под курсором */
.spot { position: relative; overflow: hidden; }
.spot::after {
   content: ""; position: absolute; inset: 0; pointer-events: none;
   background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(168,255,83,.10), transparent 62%);
   opacity: 0; transition: opacity .3s ease;
}
.spot:hover::after { opacity: 1; }

/* карточка с градиентной рамкой — для главного тарифа */
.edge-lime {
   background: var(--inset) !important;
   border: 1px solid var(--lime-line) !important;
}
.edge-lime:hover { border-color: rgba(168,255,83,.6) !important; }

/* ---------------------------------------------------------- buttons --- */

.btn-primary {
   position: relative;
   background: linear-gradient(180deg, #b9ff6c, var(--lime));
   box-shadow: 0 0 0 1px rgba(168,255,83,.2) inset, 0 8px 26px -12px rgba(168,255,83,.7);
   transition: transform .16s ease, box-shadow .2s ease, background-color .15s ease;
}
.btn-primary:hover {
   background: linear-gradient(180deg, #c6ff86, #b0ff62);
   box-shadow: 0 0 0 1px rgba(168,255,83,.3) inset, 0 12px 34px -12px rgba(168,255,83,.85);
   transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
   background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
   transition: transform .16s ease, border-color .15s ease, color .15s ease, background-color .2s ease;
}
.btn-ghost:hover { transform: translateY(-1px); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)); }

/* ------------------------------------------------------------ pills --- */

.pill {
   background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
   transition: border-color .18s ease, transform .18s ease, background-color .2s ease;
}
.pill:hover { transform: translateY(-1px); border-color: var(--hairline); }

/* --------------------------------------------------------- metrics ---- */

.metric-n {
   background: linear-gradient(180deg, #ffffff, #b6bcc4);
   -webkit-background-clip: text; background-clip: text;
   -webkit-text-fill-color: transparent;
   font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- nav ---- */

.nav { background: rgba(8,9,11,.78); backdrop-filter: saturate(160%) blur(14px); }
.nav::after {
   content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
   background: linear-gradient(90deg, transparent, rgba(168,255,83,.35), transparent);
   opacity: .6;
}
.nav-logo { color: var(--bone); display: flex; align-items: center; }
.nav-logo svg, .nav-logo img { height: 24px; width: auto; display: block; }
.nav-links a { position: relative; }
.nav-links a::after {
   content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px;
   background: var(--lime); transition: right .25s ease;
}
.nav-links a:hover::after { right: 0; }

/* ------------------------------------------------------------ misc ---- */

.acc summary { transition: color .18s ease; }
.acc details[open] summary { color: var(--lime); }
.acc summary:hover { color: var(--bone); }

.term { box-shadow: 0 30px 80px -50px rgba(0,0,0,.9); }

.foot { position: relative; }
.foot::before {
   content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
   background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}

.section-inset { background: var(--card); }

/* модалка — стекло */
.modal-card {
   background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)) , var(--raised);
   box-shadow: 0 40px 120px -40px rgba(0,0,0,.9);
}