/* Стили сайта dcfleet (ADR 0006 §4). Перенесены без изменений из утверждённого прототипа
   web/prototype/site.html (образ — морская навигационная карта: устройства — суда, сервер —
   маяк, который только знакомит; каждая сеть поднимает свой флаг из сида). Дополнения для
   серверных страниц — в конце файла. */
:root{
  --paper:#E4EBE8; --paper-2:#F4F6F2; --land:#EADFBE; --shoal:#CCDDE3;
  --ink:#0F2236; --ink-2:#3A5165; --line:#B2C2C5; --contour:#93B0BB;
  --red:#C8322B; --yellow:#F2B705; --blue:#1F4FA0; --fw:#F7F7F2; --fk:#14171A;
  --link:#1F4FA0; --ok:#1C7343; --warn:#9A5200; --bad:#B42318;
  --on-ink:#F4F6F2; --code-bg:#0F2236; --code-fg:#DCE6E3; --code-dim:#8FA7B5;
  --f-display:'Tektur','Golos Text',system-ui,sans-serif;
  --f-body:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'Cascadia Mono',Menlo,monospace;
  --wrap:1240px; --gut:24px; --r:4px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#091521; --paper-2:#0F1F2E; --land:#1F2A22; --shoal:#0E2635;
  --ink:#E2EBE8; --ink-2:#9DB1BC; --line:#22394B; --contour:#1E4A5F;
  --red:#E0483F; --blue:#6E9BEA; --link:#8DB3F2; --ok:#4CC38A; --warn:#F0A43A; --bad:#F07063;
  --on-ink:#0A1622; --code-bg:#050E17; --code-fg:#DCE6E3; --code-dim:#7E97A6; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#091521; --paper-2:#0F1F2E; --land:#1F2A22; --shoal:#0E2635;
  --ink:#E2EBE8; --ink-2:#9DB1BC; --line:#22394B; --contour:#1E4A5F;
  --red:#E0483F; --blue:#6E9BEA; --link:#8DB3F2; --ok:#4CC38A; --warn:#F0A43A; --bad:#F07063;
  --on-ink:#0A1622; --code-bg:#050E17; --code-fg:#DCE6E3; --code-dim:#7E97A6; color-scheme:dark}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased}
a{color:var(--link)}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.eyebrow{font:500 12px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* шапка-рубка */
.bridge{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bridge .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;padding-block:10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 21px/1 var(--f-display);letter-spacing:.02em}
.logo svg{display:block}
.nav{display:flex;flex-wrap:wrap;gap:2px;flex:1 1 auto}
.nav a{color:var(--ink);text-decoration:none;padding:10px 12px;border-radius:var(--r);font-size:15px}
.nav a:hover{background:var(--paper-2)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--on-ink)}
.tools{display:flex;align-items:center;gap:8px}
.lang{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.lang button{border:0;background:transparent;padding:8px 10px;font:500 13px var(--f-mono);cursor:pointer;color:var(--ink-2)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:11px 18px;border-radius:var(--r);border:1px solid var(--ink);background:transparent;color:var(--ink);text-decoration:none;font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--paper-2)}
.btn.solid{background:var(--ink);color:var(--on-ink)}
.btn.solid:hover{background:color-mix(in srgb,var(--ink) 86%,var(--blue))}
.btn.signal{background:var(--yellow);border-color:var(--yellow);color:#14171A}
.btn.signal:hover{background:#FFC51F}
.btn.big{min-height:54px;padding:14px 24px;font-size:17px}
.btn.ghost{border-color:var(--line)}

.view{display:block}
.view[hidden]{display:none!important}

/* ===== ГЕРОЙ: живая карта ===== */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 82%,transparent) 34%,transparent 58%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,600px) 1fr;gap:32px;padding-block:72px 40px;min-height:600px}
.hero h1{font-size:clamp(40px,6.2vw,84px);margin:18px 0 22px;font-weight:700}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 80%,var(--yellow) 80% 94%,transparent 94%);padding-inline:2px}
.hero .lead{font-size:19px;max-width:34em;color:var(--ink-2)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .plat{margin-top:18px;display:flex;gap:16px;flex-wrap:wrap;color:var(--ink-2);font-size:14px}
.legend{align-self:end;justify-self:end;display:grid;gap:8px;padding:14px 16px;background:color-mix(in srgb,var(--paper-2) 92%,transparent);border:1px solid var(--line);border-radius:var(--r);font-size:13px;min-width:0}
.legend div{display:flex;align-items:center;gap:10px}
.legend i{display:inline-block;width:26px;flex:0 0 26px}
.lg-intro{border-top:2px dashed var(--ink-2)}
.lg-direct{border-top:2px solid var(--ink)}
.lg-file{height:8px;background:radial-gradient(circle,var(--yellow) 3px,transparent 4px) 0 50%/9px 8px repeat-x}
.lg-light{height:12px;background:conic-gradient(from 60deg,transparent 0 50%,color-mix(in srgb,var(--yellow) 70%,transparent) 50% 62%,transparent 62%)}
.seedtag{position:absolute;z-index:3;right:16px;top:12px;display:flex;align-items:center;gap:6px;font:500 12px var(--f-mono);color:var(--ink-2)}
.seedtag button{border:1px solid var(--line);background:var(--paper-2);border-radius:var(--r);min-width:32px;min-height:32px;cursor:pointer;color:var(--ink)}

/* телеметрия */
.ticker{background:var(--ink);color:var(--on-ink);overflow:hidden;white-space:nowrap;font:500 13px/1 var(--f-mono)}
.ticker .run{display:inline-flex;gap:48px;padding:13px 0;animation:tick 48s linear infinite}
.ticker span b{color:var(--yellow);font-weight:500}
@keyframes tick{to{transform:translateX(-50%)}}

/* секции */
.sec{padding-block:72px;border-bottom:1px solid var(--line)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:36px}
.sec-head h2{font-size:clamp(30px,3.6vw,46px)}
.sec-head p{max-width:36em;color:var(--ink-2)}

/* маршрут: три точки */
.route{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.route::before{content:"";position:absolute;left:28px;right:28px;top:27px;border-top:2px dashed var(--ink-2)}
.wp{position:relative;padding-right:28px}
.wp .mk{position:relative;width:56px;height:56px;display:grid;place-items:center;background:var(--paper);border:2px solid var(--ink);border-radius:50%;font:700 18px var(--f-display)}
.wp .mk::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid var(--ink-2)}
.wp .brg{margin:18px 0 8px;font:500 12px var(--f-mono);color:var(--ink-2);letter-spacing:.08em}
.wp h3{font-size:24px;margin-bottom:10px}
.wp p{color:var(--ink-2)}
.wp .chip{display:inline-flex;margin-top:14px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r);font:500 13px var(--f-mono);background:var(--paper-2)}

/* наборы — грузовые манифесты */
.manifests{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mf{display:flex;flex-direction:column;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mf.hot{border:2px solid var(--ink)}
.mf .top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font:500 13px var(--f-mono)}
.mf .top b{font-weight:600;letter-spacing:.06em}
.mf .body{padding:18px;display:flex;flex-direction:column;gap:14px;flex:1}
.mf h3{font-size:24px}
.mf dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
.mf dt{color:var(--ink-2)}
.mf dd{margin:0;font-family:var(--f-mono);font-size:13px}
.mf .foot{padding:14px 18px;border-top:1px dashed var(--line);display:flex;gap:10px;flex-wrap:wrap}
.mf.next{background:repeating-linear-gradient(-45deg,transparent 0 10px,color-mix(in srgb,var(--line) 40%,transparent) 10px 11px);border-style:dashed}

/* рецепт: команда / скрипт */
.recipe{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start}
.recipe ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.recipe li{display:grid;grid-template-columns:28px 1fr;gap:10px;color:var(--ink-2)}
.recipe li b{color:var(--ink);font-weight:600}
.recipe li svg{margin-top:3px}
.term{background:var(--code-bg);color:var(--code-fg);border-radius:var(--r);overflow:hidden;min-width:0}
.term .tabs{display:flex;border-bottom:1px solid #22384C}
.term .tabs button{background:transparent;border:0;padding:13px 18px;font:500 13px var(--f-mono);color:var(--code-dim);cursor:pointer;border-right:1px solid #22384C}
.term .tabs button[aria-selected="true"]{color:#14171A;background:var(--yellow)}
.term pre{margin:0;padding:20px;overflow-x:auto;font:13.5px/1.7 var(--f-mono)}
.term .k{color:#F2B705}.term .s{color:#9FD6B5}.term .c{color:var(--code-dim)}.term .n{color:#8DB3F2}
.term .bar{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 18px;border-top:1px solid #22384C;font:12px var(--f-mono);color:var(--code-dim)}

/* флаги и карточки сетей */
.flag{display:block;flex:0 0 auto;filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--ink) 30%,transparent))}
.nets{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,350px),1fr));gap:20px}
.net{display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);transition:transform .2s,border-color .2s}
.net:hover{transform:translateY(-2px);border-color:var(--ink)}
.net .hd{display:flex;gap:14px;align-items:flex-start}
.net .hd > div{min-width:0}
.net h3{font-size:20px;font-family:var(--f-body);font-weight:600;letter-spacing:0;line-height:1.25}
.net .own{font-size:13px;color:var(--ink-2)}
.net p{font-size:15px;color:var(--ink-2)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:var(--r);font:500 12px var(--f-mono);border:1px solid var(--line);background:var(--paper);white-space:nowrap}
.badge.dark{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.prog{height:8px;background:var(--shoal);border-radius:2px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--ink)}
.stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;font:500 13px var(--f-mono);color:var(--ink-2)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok)}
.dot.warn{background:var(--yellow)}
.dot.off{background:var(--line)}

/* призыв */
.callout{background:var(--ink);color:var(--on-ink);position:relative;overflow:hidden}
.callout .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;padding-block:56px;position:relative}
.callout h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:12px}
.callout p{opacity:.8;max-width:40em}
.callout .flags{position:absolute;right:-20px;top:-10px;bottom:-10px;display:flex;gap:10px;opacity:.16;transform:rotate(-8deg);pointer-events:none}
.callout .btn{border-color:var(--yellow)}

footer.foot{padding-block:36px 48px}
footer.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;align-items:center;color:var(--ink-2);font-size:14px}
footer.foot a{color:var(--ink-2)}

/* общие страницы */
.page{padding-block:44px 72px}
.page-head{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:end;justify-content:space-between;margin-bottom:30px}
.page-head h1{font-size:clamp(34px,4.4vw,56px);margin-top:10px}
.page-head p{color:var(--ink-2);max-width:40em;margin-top:12px}
.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:20px;min-width:0}
.field{display:grid;gap:6px}
.field label{font-weight:500;font-size:15px}
.field .hint{font-size:13px;color:var(--ink-2)}
.input{width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink)}
.input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--yellow) 60%,transparent)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:22px}
.chip-btn{min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper-2);cursor:pointer;font-size:14px}
.chip-btn[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.cols > .main{flex:999 1 560px;min-width:0;display:grid;gap:24px}
.cols > .side{flex:1 1 340px;min-width:0;display:grid;gap:16px}
.table-box{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font:500 12px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px 14px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* страница сети */
.nethead{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;padding:28px;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden}
.nethead .mast{position:relative;padding-left:10px}
.nethead .mast::before{content:"";position:absolute;left:0;top:-14px;bottom:-40px;width:3px;background:var(--ink)}
.wave{animation:wave 3.2s ease-in-out infinite;transform-origin:left center}
@keyframes wave{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-2deg) scaleX(.97)}}
.nethead h1{font-size:clamp(30px,4vw,50px);margin:10px 0}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2)}
.strip > div{padding:16px 18px;border-right:1px solid var(--line);min-width:0}
.strip > div:last-child{border-right:0}
.strip .v{font:600 26px/1.1 var(--f-display);margin-top:6px}
.join{border:2px solid var(--ink);background:var(--paper-2)}
.code{font:600 26px var(--f-mono);letter-spacing:.12em}
.warnbox{padding:16px;border-radius:var(--r);background:color-mix(in srgb,var(--yellow) 20%,var(--paper-2));border:1px solid color-mix(in srgb,var(--yellow) 60%,var(--line));font-size:14px}

/* загрузки */
.osbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;padding:24px;background:var(--ink);color:var(--on-ink);border-radius:var(--r);margin-bottom:28px}
.osbar .ic{width:64px;height:64px;border:2px solid var(--yellow);border-radius:50%;display:grid;place-items:center}
.osbar h2{font-size:26px}
.osbar p{opacity:.8;margin-top:6px}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:20px}
.ex{display:flex;flex-direction:column;gap:12px}
.ex h3{font:600 19px/1.3 var(--f-body)}
.ex .term pre{font-size:12.5px;padding:16px}
.ex .term{flex:1}

/* создать */
.create{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:36px;align-items:start}
.vis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vis button{text-align:left;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);cursor:pointer;display:grid;gap:6px}
.vis button[aria-pressed="true"]{border:2px solid var(--ink);padding:15px;background:var(--paper)}
.vis b{font-size:16px}.vis span{font-size:14px;color:var(--ink-2)}
.preview{position:sticky;top:calc(env(safe-area-inset-top,0px) + 84px);display:grid;gap:14px}
.bigflag{display:grid;place-items:center;padding:34px;background:var(--shoal);border:1px solid var(--line);border-radius:var(--r);position:relative}
.bigflag .pole{position:absolute;left:calc(50% - 128px);top:18px;bottom:18px;width:3px;background:var(--ink)}

/* панель */
.dash{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0;border-top:1px solid var(--line);min-height:70vh}
.side-nav{border-right:1px solid var(--line);padding:18px 12px;display:grid;align-content:start;gap:2px;background:var(--paper-2)}
.side-nav .netsel{display:flex;gap:10px;align-items:center;padding:10px;margin-bottom:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.side-nav button{display:flex;justify-content:space-between;align-items:center;text-align:left;min-height:42px;padding:8px 12px;border:0;border-radius:var(--r);background:transparent;cursor:pointer;font-size:15px}
.side-nav button[aria-current="true"]{background:var(--ink);color:var(--on-ink)}
.side-nav button span{font:500 12px var(--f-mono);opacity:.75}
.dash-main{padding:24px;display:grid;gap:20px;align-content:start;min-width:0}
.hostbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:14px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2);font-size:15px}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--paper-2)}
.kpis > div{padding:14px 16px;border-right:1px solid var(--line)}
.kpis > div:last-child{border-right:0}
.kpis .v{font:600 22px/1.1 var(--f-display);margin-top:4px}
.job{display:grid;gap:14px}
.spark{width:100%;height:120px;display:block}
.state{display:inline-flex;align-items:center;gap:8px;font-size:14px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

/* вход */
.login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:40px;align-items:center}
.mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-content:center}
.mosaic svg{width:100%;height:auto;animation:float 6s ease-in-out infinite}
.mosaic svg:nth-child(3n){animation-delay:-2s}.mosaic svg:nth-child(4n){animation-delay:-4s}
@keyframes float{50%{transform:translateY(-6px)}}
.providers{display:grid;gap:10px}
.providers .btn{justify-content:flex-start;border-color:var(--line);background:var(--paper)}
.or{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:13px;margin:6px 0}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line)}

/* адаптив */
@media (max-width:980px){
  .manifests{grid-template-columns:1fr}
  .recipe,.create,.login{grid-template-columns:1fr}
  .preview{position:static}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis > div{border-bottom:1px solid var(--line)}
  .dash{grid-template-columns:1fr}
  .side-nav{border-right:0;border-bottom:1px solid var(--line);grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;align-items:center}
  .side-nav .netsel{margin:0}
  .two{grid-template-columns:1fr}
  .mosaic{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media (max-width:820px){
  .hero{display:flex;flex-direction:column}
  .hero::after{display:none}
  .hero canvas{position:relative;height:340px;order:2}
  .seedtag{top:auto;bottom:12px}
  .hero .wrap{grid-template-columns:1fr;min-height:0;padding-block:40px 24px}
  .legend{justify-self:start}
  .route{grid-template-columns:1fr;gap:28px}
  .route::before{left:27px;right:auto;top:28px;bottom:28px;border-top:0;border-left:2px dashed var(--ink-2)}
  .wp{padding-left:76px;padding-right:0}
  .wp .mk{position:absolute;left:0;top:0}
  .wp .brg{margin-top:0}
  .callout .wrap{grid-template-columns:1fr}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip > div:nth-child(2){border-right:0}
  .strip > div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .osbar{grid-template-columns:1fr}
  .nethead{grid-template-columns:1fr}
}
@media (max-width:520px){
  :root{--gut:16px}
  .vis{grid-template-columns:1fr}
  .hero .lead{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .ticker .run,.wave,.mosaic svg{animation:none}
  .net{transition:none}
}

/* ===== дополнения для серверных страниц (не было в прототипе) ===== */
[hidden]{display:none!important}
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:50;padding:10px 14px;background:var(--yellow);color:#14171A;border-radius:var(--r)}
/* переключатель языка — ссылки (меняют путь), вид как у кнопок прототипа */
.lang a{display:block;padding:8px 10px;font:500 13px var(--f-mono);color:var(--ink-2);text-decoration:none}
.lang a[aria-current="true"]{background:var(--ink);color:var(--on-ink)}
/* фильтры каталога — ссылки-чипы */
a.chip-btn[aria-pressed="true"]{color:var(--on-ink)!important}
.formerr{padding:12px 14px;border-radius:var(--r);border:1px solid color-mix(in srgb,var(--bad) 55%,var(--line));background:color-mix(in srgb,var(--bad) 10%,var(--paper-2));color:var(--bad);font-size:14px}
.btn[disabled]{opacity:.6;cursor:progress}
.tg-login{min-height:44px;display:flex;align-items:center}
.tg-login iframe{max-width:100%}
/* панель: пункты меню — ссылки и неактивные заглушки вместо кнопок прототипа */
.side-nav .navbtn{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;min-height:42px;padding:8px 12px;border-radius:var(--r);font-size:15px;color:var(--ink);text-decoration:none}
.side-nav a.navbtn:hover{background:var(--paper)}
.side-nav .navbtn[aria-current="true"]{background:var(--ink);color:var(--on-ink)}
.side-nav .navbtn[aria-disabled="true"]{color:var(--ink-2);cursor:default}
.side-nav .navbtn span{font:500 12px var(--f-mono);opacity:.75}
.side-nav .netsel select{flex:1 1 auto;min-width:0;text-overflow:ellipsis}
/* страница вступления /j/<код> */
.joinpage{display:grid;gap:20px;max-width:980px}
.joincard{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:28px}
/* 404 */
.lost{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;min-height:52vh}
.lost-chart svg{display:block;max-width:100%;height:auto}
@media (max-width:820px){
  .joincard{grid-template-columns:1fr}
  .lost{grid-template-columns:1fr}
}