/* ClaimYourBox — дизайн-система.
   Тёплые нейтрали (hue ~30) вместо сине-серых: холодный оттенок читается
   как терминал, тёплый — как живой продукт. Акцент коралловый: рынок весь
   в фиолете и бирюзе. Фиолетовый оставлен как цвет Pro. */

:root{
  /* ——— светлая тема (по умолчанию) ——— */
  --bg:#FDFAF6; --bg-2:#F5F0E9; --surface:#FFFFFF; --surface-2:#FBF8F4;
  --line:#E8E0D5; --line-2:#D6CCBE;
  --ink:#1B1714; --ink-2:#6B6259; --ink-3:#9A9086;

  --brand:#F2542D; --brand-hov:#D8431F; --brand-soft:#FFEDE6; --brand-ring:#F2542D33;
  --pro:#7C5CFF; --pro-soft:#F0EBFF;
  --ok:#16A34A; --ok-soft:#E7F6ED;
  --warn:#D97706; --warn-soft:#FEF3E2;
  --err:#DC2626; --err-soft:#FDECEC;

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;

  --sh-1:0 1px 2px rgba(60,40,25,.06),0 1px 1px rgba(60,40,25,.04);
  --sh-2:0 4px 12px rgba(60,40,25,.08),0 1px 3px rgba(60,40,25,.05);
  --sh-3:0 12px 32px rgba(60,40,25,.11),0 2px 8px rgba(60,40,25,.06);
  --sh-pop:0 20px 50px rgba(60,40,25,.16);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px;

  --mw:1120px; --tap:44px; --ease:cubic-bezier(.32,.72,0,1);

  --f-head:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-display:clamp(32px,7.5vw,56px);
  --t-h1:clamp(26px,5vw,40px);
  --t-h2:clamp(20px,3.4vw,28px);
}

:root[data-theme="dark"]{
  --bg:#14110F; --bg-2:#1D1916; --surface:#241F1B; --surface-2:#2C2621;
  --line:#362F29; --line-2:#4A4139;
  --ink:#F5EFE8; --ink-2:#A99E92; --ink-3:#7A7066;

  --brand:#FF7A52; --brand-hov:#FF9470; --brand-soft:#33201A; --brand-ring:#FF7A5240;
  --pro:#9B85FF; --pro-soft:#241E3D;
  --ok:#4ADE80; --ok-soft:#14281C;
  --warn:#FBBF24; --warn-soft:#2E2210;
  --err:#FF6B6B; --err-soft:#2E1717;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 4px 12px rgba(0,0,0,.45);
  --sh-3:0 12px 32px rgba(0,0,0,.55);
  --sh-pop:0 20px 50px rgba(0,0,0,.65);
}

/* Onest 700 — только заголовки. Два подмножества: браузер тянет нужное
   (кириллица 6 КБ, латиница 15 КБ), а не весь шрифт. */
@font-face{
  font-family:'Onest';
  src:url('/static/fonts/onest-700-cyrillic.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Onest';
  src:url('/static/fonts/onest-700-latin.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ——— база ——— */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.6 var(--f-body);      /* ровно 16px: меньше — iOS зумит инпуты */
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
*{-webkit-tap-highlight-color:transparent}
img,video{max-width:100%;height:auto}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--f-head);font-weight:700;letter-spacing:-.02em;line-height:1.2}
code{font:13px/1.6 var(--f-mono);background:var(--bg-2);padding:.15em .4em;border-radius:var(--r-xs)}
pre{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
    padding:var(--s3);overflow-x:auto;margin:var(--s3) 0}
pre code{background:none;padding:0}
.muted{color:var(--ink-2)}
.small{font-size:14px}
.tiny{font-size:13px;color:var(--ink-3)}
.wrap{max-width:var(--mw);margin:0 auto;padding:var(--s8) var(--s4)}
@media(min-width:768px){.wrap{padding:var(--s12) var(--s6)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ——— кнопки ——— */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--tap);padding:0 var(--s5);
  border:1px solid transparent;border-radius:var(--r-full);
  font:600 15px/1 var(--f-body);cursor:pointer;white-space:nowrap;
  transition:transform .12s var(--ease),box-shadow .2s var(--ease),background-color .15s linear;
}
.btn:hover{text-decoration:none}
.btn:active{transform:scale(.975)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--brand-ring)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--sh-2)}
.btn-primary:hover{background:var(--brand-hov);transform:translateY(-1px);box-shadow:var(--sh-3)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--bg-2);border-color:var(--ink-3)}
.btn-pro{background:var(--pro);color:#fff}
.btn-pro:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-lg{min-height:52px;padding:0 var(--s8);font-size:17px}
.btn-block{width:100%}
.icon-btn{
  width:var(--tap);height:var(--tap);border:0;background:none;color:var(--ink-2);
  display:grid;place-items:center;border-radius:var(--r-sm);cursor:pointer;
}
.icon-btn:hover{background:var(--bg-2);color:var(--ink)}

/* ——— поля ——— */
.input,.textarea{
  width:100%;min-height:var(--tap);padding:12px var(--s4);
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-md);
  font:16px/1.5 var(--f-body);
  transition:border-color .15s,box-shadow .15s;
}
.input:focus,.textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.textarea{resize:none;max-height:180px;overflow-y:auto}

/* ——— карточки ——— */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--sh-1);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s linear;
}
.card-int:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--line-2)}
.card-int:active{transform:translateY(0) scale(.995)}
.grid{display:grid;gap:var(--s4);grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}

/* ——— шапка ——— */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);
     backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--mw);margin:0 auto;padding:var(--s2) var(--s4);
        display:flex;align-items:center;gap:var(--s4);min-height:56px}
.logo{font:700 17px/1 var(--f-head);color:var(--ink);letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo b{color:var(--brand)}
.nav .l{color:var(--ink-2);font-size:14px;font-weight:500}
.nav .l:hover{color:var(--ink);text-decoration:none}
.sp{flex:1}
.chip{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-full);
      padding:7px 13px;font:600 13px/1 var(--f-mono);color:var(--ink);
      font-variant-numeric:tabular-nums}
.chip:hover{text-decoration:none;border-color:var(--line-2)}
.chip-pro{background:var(--pro-soft);border-color:transparent;color:var(--pro);font-family:var(--f-body)}
@media(max-width:600px){ .nav .l{display:none} .nav-in{gap:var(--s2)} }

/* ——— вкладки категорий ——— */
.tabs{display:flex;gap:var(--s2);overflow-x:auto;scroll-snap-type:x proximity;
      padding:var(--s2) 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{
  scroll-snap-align:start;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:var(--tap);padding:0 var(--s4);
  border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--surface);color:var(--ink-2);
  font:600 14px/1 var(--f-body);transition:.15s var(--ease);
}
.tab:hover{border-color:var(--line-2);color:var(--ink);text-decoration:none;transform:translateY(-1px)}
.tab.is-active{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--sh-2)}
.tab-e{font-size:16px;line-height:1}
.tab-badge{font:700 10px/1 var(--f-body);text-transform:uppercase;letter-spacing:.04em;
  padding:3px 6px;border-radius:var(--r-full);background:var(--warn-soft);color:var(--warn)}
.tab.is-active .tab-badge{background:rgba(255,255,255,.25);color:#fff}
@media(min-width:768px){.tabs{justify-content:center;overflow-x:visible}}

/* ——— карточки моделей ——— */
.mgrid{display:grid;gap:var(--s3);grid-template-columns:1fr}
@media(min-width:640px){.mgrid{grid-template-columns:1fr 1fr;gap:var(--s4)}}
@media(min-width:1000px){.mgrid{grid-template-columns:repeat(3,1fr)}}
.mcard{display:flex;flex-direction:column;gap:var(--s4);color:inherit}
.mcard:hover{text-decoration:none}
.mcard-top{display:flex;gap:var(--s3);align-items:flex-start}
.mcard-av{flex:0 0 auto;width:40px;height:40px;border-radius:var(--r-sm);
  background:var(--bg-2);display:grid;place-items:center;font-size:20px}
.mcard-name{font-size:18px;display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.mcard-desc{font-size:14px;color:var(--ink-2);margin-top:2px}
.mcard-meta{display:flex;justify-content:space-between;align-items:center;
  padding-top:var(--s3);border-top:1px solid var(--line)}
.price{font:600 13px/1 var(--f-mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.speed{display:inline-flex;gap:3px;align-items:center}
.speed i{width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.speed i.on{background:var(--ok)}
.is-pro{border-color:var(--pro-soft)}
.is-pro:hover{border-color:var(--pro)}
.pro-chip{font:700 10px/1 var(--f-body);text-transform:uppercase;letter-spacing:.04em;
  padding:3px 7px;border-radius:var(--r-full);background:var(--pro-soft);color:var(--pro)}

/* ——— герой ——— */
.hero{position:relative;overflow:hidden;padding:var(--s12) var(--s4) var(--s10);text-align:center}
@media(min-width:768px){.hero{padding:var(--s20) var(--s6) var(--s16)}}
.hero-glow{
  position:absolute;inset:-30% -10% auto -10%;height:120%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 46% at 22% 26%,var(--brand) 0%,transparent 62%),
    radial-gradient(38% 42% at 78% 18%,var(--pro) 0%,transparent 60%);
  opacity:.16;filter:blur(64px);
}
:root[data-theme="dark"] .hero-glow{opacity:.24}
.hero-in{position:relative;z-index:1;max-width:860px;margin:0 auto}
.hero-h1{font-size:var(--t-display);line-height:1.05;letter-spacing:-.03em}
.hero-h1 em{font-style:normal;background:linear-gradient(96deg,var(--brand),var(--pro));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{max-width:600px;margin:var(--s5) auto var(--s6);font-size:17px;color:var(--ink-2)}
.hero-try{display:flex;gap:var(--s2);max-width:560px;margin:var(--s5) auto var(--s6)}
.hero-try .btn{flex:0 0 auto}
@media(max-width:480px){.hero-try{flex-direction:column}.hero-try .btn{width:100%}}
.hero-note{font-size:13px;color:var(--ink-3);margin-top:var(--s3)}

/* ——— секции ——— */
.sec-h{text-align:center;margin-bottom:var(--s8)}
.sec-h h2{font-size:var(--t-h1)}
.sec-h p{color:var(--ink-2);margin-top:var(--s3);max-width:560px;margin-inline:auto}
.big{font:700 34px/1 var(--f-head);color:var(--brand);display:block;margin-bottom:var(--s3)}

/* лента «Сделано здесь» */
.strip{display:flex;gap:var(--s3);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:var(--s2) var(--s4);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.strip::-webkit-scrollbar{display:none}
.strip-it{scroll-snap-align:center;flex:0 0 auto;width:min(74vw,280px);
  border-radius:var(--r-md);overflow:hidden;position:relative;background:var(--bg-2)}
.strip-it img{width:100%;display:block;aspect-ratio:4/5;object-fit:cover}
.strip-cap{position:absolute;inset:auto 0 0 0;padding:var(--s5) var(--s3) var(--s2);
  background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font:600 11px/1.4 var(--f-mono)}

/* FAQ */
.faq{max-width:720px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:var(--s4) 0}
.faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;gap:var(--s4);min-height:auto}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--ink-3);font-size:20px;line-height:1}
.faq details[open] summary::after{content:'−'}
.faq p{color:var(--ink-2);margin-top:var(--s3);font-size:15px}

/* футер */
.ft{border-top:1px solid var(--line);background:var(--bg-2);padding:var(--s8) var(--s4);margin-top:var(--s12)}
.ft-in{max-width:var(--mw);margin:0 auto;display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.ft a{color:var(--ink-2);font-size:14px}
.ft a:hover{color:var(--ink)}

/* ——— ПРИЛОЖЕНИЕ (чат) ——— */
.app{display:flex;height:100dvh;overflow:hidden}   /* 100dvh — фикс iOS: 100vh
      включает адресную строку, композер уезжал под экран */
@supports not (height:100dvh){.app{height:100vh}}
.chat{flex:1;display:flex;flex-direction:column;min-width:0}  /* min-width:0 — иначе
      длинный код распирает flex-ребёнка */
.chat-hd{flex:0 0 auto;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s4);padding-top:calc(var(--s2) + env(safe-area-inset-top));
  border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:20}
.bal-chip{margin-left:auto;font:600 13px/1 var(--f-mono);padding:8px 12px;
  border-radius:var(--r-full);background:var(--ok-soft);color:var(--ok);
  font-variant-numeric:tabular-nums}
.bal-chip:hover{text-decoration:none}

.msgs{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:var(--s5) var(--s4);
  -webkit-overflow-scrolling:touch}
.msgs-in{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s6)}
.m{animation:fade-up .2s var(--ease) both}
@keyframes fade-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.m-u{align-self:flex-end;max-width:85%}
.m-u .m-b{background:var(--brand);color:#fff;padding:12px var(--s4);
  border-radius:var(--r-lg) var(--r-lg) var(--r-xs) var(--r-lg);white-space:pre-wrap;word-wrap:break-word}
.m-a{align-self:stretch}
.m-a .m-b{background:var(--surface);border:1px solid var(--line);color:var(--ink);
  padding:var(--s4);border-radius:var(--r-lg) var(--r-lg) var(--r-lg) var(--r-xs);
  white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.m-b img{border-radius:var(--r-md);display:block;margin-top:var(--s2)}
.m-ft{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s2);
  font-size:12px;color:var(--ink-3);animation:fade-in .3s var(--ease) .1s both}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.m-cost{font:600 12px/1 var(--f-mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.m-b.is-streaming::after{content:'';display:inline-block;width:7px;height:1.05em;
  background:var(--brand);margin-left:2px;vertical-align:-2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}

.comp{flex:0 0 auto;padding:var(--s3) var(--s4);
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom));  /* home-indicator */
  border-top:1px solid var(--line);background:var(--bg)}
.comp-in{max-width:760px;margin:0 auto}
.comp-box{display:flex;align-items:flex-end;gap:var(--s2);background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-xl);padding:var(--s2);
  transition:border-color .15s,box-shadow .15s}
.comp-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
.comp-ta{border:0;background:none;box-shadow:none!important;padding:10px var(--s2);
  min-height:auto;font-size:16px;border-radius:0}
.comp-send{flex:0 0 auto;width:40px;height:40px;border:0;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;cursor:pointer;
  transition:transform .12s var(--ease),background-color .15s}
.comp-send:hover{background:var(--brand-hov)}
.comp-send:active{transform:scale(.92)}
.comp-send:disabled{background:var(--line-2);cursor:default}
.comp-hint{font-size:11px;color:var(--ink-3);text-align:center;margin-top:6px}

/* переключатель модели */
.msw{position:relative}
.msw summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2);
  min-height:38px;padding:0 var(--s3);border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--surface);font:600 13px/1 var(--f-body);color:var(--ink)}
.msw summary::-webkit-details-marker{display:none}
.msw summary:hover{border-color:var(--line-2)}
.msw-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:260px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-pop);padding:var(--s2);max-height:60vh;overflow-y:auto}
.msw-it{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:9px var(--s3);border-radius:var(--r-sm);color:var(--ink);font-size:14px}
.msw-it:hover{background:var(--bg-2);text-decoration:none}
.msw-it.is-on{background:var(--brand-soft);color:var(--brand);font-weight:600}
@media(max-width:600px){
  .msw-pop{position:fixed;inset:auto 0 0 0;border-radius:var(--r-lg) var(--r-lg) 0 0;
    max-height:70vh;padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom))}
}

/* ——— сайдбар / история ——— */
.side{flex:0 0 260px;display:flex;flex-direction:column;
  border-right:1px solid var(--line);background:var(--bg-2)}
.side-hd{padding:var(--s3);border-bottom:1px solid var(--line)}
.side-list{flex:1;overflow-y:auto;padding:var(--s2);overscroll-behavior:contain}
.side-it{display:flex;align-items:center;gap:var(--s2);min-height:40px;padding:0 var(--s3);
  border-radius:var(--r-sm);color:var(--ink-2);font-size:14px}
.side-it:hover{background:var(--surface);color:var(--ink);text-decoration:none}
.side-it.is-active{background:var(--brand-soft);color:var(--brand);font-weight:600}
.side-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-ft{padding:var(--s3);border-top:1px solid var(--line)}
.bal{display:flex;justify-content:space-between;margin-bottom:var(--s2)}
.bal-l{font-size:13px;color:var(--ink-3)}
.bal-v{font:700 15px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.only-mob{display:none}
.scrim{display:none}
@media(max-width:999px){
  .only-mob{display:grid}
  .side{position:fixed;inset:0 auto 0 0;width:min(84vw,300px);z-index:60;
    transform:translateX(-100%);transition:transform .26s var(--ease);box-shadow:var(--sh-pop);
    padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .side.is-open{transform:none}
  .scrim{display:block;position:fixed;inset:0;z-index:50;background:rgba(20,15,10,.45);
    opacity:0;transition:opacity .26s var(--ease)}
  .scrim.is-on{opacity:1}
  .scrim[hidden]{display:none}
}

/* ——— галерея ——— */
.gal{columns:2;column-gap:var(--s3);padding:var(--s4)}
@media(min-width:768px){.gal{columns:3}}
@media(min-width:1200px){.gal{columns:4;column-gap:var(--s4)}}
.gal-it{break-inside:avoid;margin-bottom:var(--s3);position:relative;
  border-radius:var(--r-md);overflow:hidden;background:var(--bg-2)}
.gal-it img{width:100%;display:block}
.gal-cap{position:absolute;inset:auto 0 0 0;padding:var(--s5) var(--s2) var(--s2);
  background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:11px;
  opacity:0;transition:opacity .18s}
.gal-it:hover .gal-cap,.gal-it:focus-within .gal-cap{opacity:1}
@media(hover:none){.gal-cap{opacity:1}}

/* ——— таблицы (на мобиле превращаются в карточки) ——— */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{text-align:left;padding:11px var(--s3);border-bottom:1px solid var(--line)}
.tbl th{color:var(--ink-3);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.tbl td.n{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:600px){
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tr{display:block;background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-md);padding:var(--s3);margin-bottom:var(--s2)}
  .tbl td{display:flex;justify-content:space-between;gap:var(--s3);padding:6px 0;
    border:0;white-space:normal;text-align:left}
  .tbl td.n{text-align:right}
  .tbl td::before{content:attr(data-l);color:var(--ink-3);font-size:13px;flex:0 0 auto}
}

/* ——— уведомления ——— */
.note{background:var(--warn-soft);border:1px solid var(--warn);color:var(--warn);
  border-radius:var(--r-sm);padding:10px var(--s3);font-size:13px;margin-bottom:var(--s2)}
.note.err{background:var(--err-soft);border-color:var(--err);color:var(--err)}

@media(max-width:600px){ .wrap{padding:var(--s6) var(--s3)} .msgs{padding:var(--s4) var(--s3)}
  .comp{padding-left:var(--s3);padding-right:var(--s3)} }