/* ХАОСИНТЕЗ · Шестаковская школа — публичный сайт.
   Одна фирменная тема: чёрный, сталь, кровавый красный. Без JavaScript. */

@font-face{font-family:"Prata";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/prata-400-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Prata";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/prata-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/pf-700-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/pf-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:dark;
  --void:#060608;
  --panel:rgba(19,19,24,.72);--panel-solid:#111116;--panel-2:#1a1a21;
  --line:rgba(206,196,190,.10);--line-strong:rgba(206,196,190,.2);--edge:rgba(255,255,255,.045);
  --ash:#ece7e2;--smoke:#9c948d;--iron:#8a827a;
  --blood:#c8102e;--bright:#e8213c;--ember:#ff5566;--blood-ink:#e8556b;
  --steel:#c9ccd2;--steel-dim:#8b8f98;--mint:#4bbf94;
  --blood-rgb:200,16,46;--bright-rgb:232,33,60;--mint-rgb:75,191,148;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --logo:"Prata","Playfair Display",Georgia,serif;
  --num:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,Consolas,"Cascadia Mono",monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--void);color:var(--ash);
  font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  display:flex;flex-direction:column;position:relative}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:700;letter-spacing:-.01em}
p{margin:0}
a{color:var(--ember);text-decoration:none}
a:hover{color:#ff7d8b;text-decoration:underline}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.glyph{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.mono{font-family:var(--mono);font-size:12.5px;color:var(--smoke)}

/* ------------------------------------------------------------------ фон */
.backdrop{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.glow{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.g1{width:58vw;height:58vw;left:-16vw;top:-22vw;background:radial-gradient(circle,rgba(var(--blood-rgb),.32),transparent 62%);animation:drift1 34s ease-in-out infinite alternate}
.g2{width:46vw;height:46vw;right:-14vw;top:-6vw;background:radial-gradient(circle,rgba(160,166,176,.12),transparent 64%);animation:drift2 42s ease-in-out infinite alternate}
.g3{width:52vw;height:52vw;left:30vw;bottom:-30vw;background:radial-gradient(circle,rgba(var(--blood-rgb),.20),transparent 64%);animation:drift3 48s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(10vw,8vw) scale(1.15)}}
@keyframes drift2{to{transform:translate(-9vw,11vw) scale(1.18)}}
@keyframes drift3{to{transform:translate(-13vw,-8vw) scale(1.1)}}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 38%,transparent 30%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.88) 100%)}

/* --------------------------------------------------------------- шапка */
.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:20px 34px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.identity{display:flex;align-items:center;gap:15px;text-decoration:none;color:inherit}
.identity:hover{text-decoration:none}
.mark{width:56px;height:56px;flex:none;filter:drop-shadow(0 4px 14px rgba(var(--blood-rgb),.42))}
.titles{display:grid}
.eyebrow{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--smoke)}
.wordmark{font-family:var(--logo);font-size:25px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash);line-height:1.2;margin-top:4px}
.nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav-link{padding:9px 15px;border:1px solid transparent;color:var(--smoke);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;transition:color .25s,border-color .25s,background .25s}
.nav-link:hover{color:var(--ash);border-color:var(--line-strong);background:rgba(255,255,255,.04);text-decoration:none}

/* ------------------------------------------------------------- страница */
.page{position:relative;z-index:1;flex:1;width:100%;max-width:1080px;margin:0 auto;padding:38px 34px 56px;display:grid;gap:30px;align-content:start}
body.wide .page{max-width:1320px}

.hero-mark{width:230px;height:230px;flex:none;filter:drop-shadow(0 10px 40px rgba(var(--blood-rgb),.42))}
.hero-eyebrow{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--smoke)}
.hero-creed{margin-top:18px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
.hero-lead{margin-top:16px;font-size:16.5px;line-height:1.7;color:var(--smoke);max-width:52ch}

.formula-step{position:relative;padding:22px 20px 20px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--edge),transparent 42%),var(--panel);
  transition:border-color .35s,transform .35s var(--ease)}
.formula-step:hover{border-color:rgba(var(--blood-rgb),.5);transform:translateY(-3px)}
.formula-step::before{content:"";position:absolute;left:-1px;top:18px;width:2px;height:30px;background:linear-gradient(180deg,var(--blood),transparent)}
.formula-step b{display:block;margin-top:10px;font-family:var(--serif);font-size:21px;color:var(--ash)}
.formula-step p{margin-top:6px;color:var(--smoke);font-size:14px}

/* ---------------------------------------------------------------- текст */
.card h2{font-family:var(--logo);font-weight:400;font-size:19px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.section-note{margin-top:10px;color:var(--iron);font-size:13px}

@keyframes lvSpin{to{transform:rotate(360deg)}}

/* --------------------------------------------------------------- метка */
.chip-level{display:inline-flex;align-items:center;gap:8px;padding:6px 11px;border:1px solid var(--line-strong);white-space:nowrap}
.chip-level .glyph{stroke:var(--steel-dim)}
/* Цифры набираем Playfair: у Prata единица почти неотличима от строчной «l». */
.chip-level b{font-family:var(--num);font-weight:700;font-size:13px;letter-spacing:.04em;font-variant-numeric:lining-nums tabular-nums;color:var(--ash)}
.chip-level span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}
.chip-level.small{padding:4px 9px}
.chip-level.small b{font-size:11.5px}
.chip-level.small span{font-size:10.5px;letter-spacing:.1em}
.chip-level[data-level="1"]{border-color:rgba(var(--bright-rgb),.4)}
.chip-level[data-level="1"] .glyph{stroke:var(--blood-ink)}
.chip-level[data-level="0"]{border-color:rgba(var(--bright-rgb),.6);background:rgba(var(--blood-rgb),.14)}
.chip-level[data-level="0"] .glyph{stroke:var(--ember)}
.chip-level[data-level="0"] b{color:var(--ember)}

/* -------------------------------------------------------------- карточки */
.card{position:relative;padding:26px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--edge),transparent 38%),var(--panel);
  box-shadow:0 18px 48px rgba(0,0,0,.55)}
.card::before{content:"";position:absolute;left:-1px;top:20px;width:2px;height:36px;background:linear-gradient(180deg,var(--blood),transparent)}
.card.narrow{max-width:520px;width:100%}
body.wide .card.narrow{max-width:560px}

.badge-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:center}
.badge-left{display:grid;place-items:center;gap:10px;padding:20px 26px;border:1px solid var(--line-strong);
  background:rgba(0,0,0,.35)}
.badge-level{font-family:var(--num);font-weight:700;font-size:40px;line-height:1;font-variant-numeric:lining-nums tabular-nums;color:var(--ash)}
.badge-glyph{width:30px;height:30px;fill:none;stroke:var(--steel-dim);stroke-width:1.6;stroke-linejoin:round}
.badge-card[data-level="0"] .badge-left{border-color:rgba(var(--bright-rgb),.5);background:rgba(var(--blood-rgb),.12)}
.badge-card[data-level="0"] .badge-level{color:var(--ember);text-shadow:0 0 22px rgba(var(--bright-rgb),.7)}
.badge-card[data-level="0"] .badge-glyph{stroke:var(--ember);animation:lvSpin 28s linear infinite;transform-origin:50% 50%}
.badge-card[data-level="1"] .badge-glyph{stroke:var(--blood)}
.badge-body h2{margin-top:8px;font-family:var(--serif);font-size:26px;color:#fff}
.badge-title{margin-top:8px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-dim)}
.hint{margin-top:10px;color:var(--iron);font-size:13px;line-height:1.6}
.hint b{color:var(--smoke)}

/* ------------------------------------------------------------ материалы */
.materials{display:grid;gap:12px;margin-top:20px}
.material{padding:18px;border:1px solid var(--line);border-left:2px solid var(--line-strong);background:rgba(255,255,255,.022)}
.material[data-level="0"]{border-left-color:var(--ember)}
.material[data-level="1"]{border-left-color:var(--blood)}
.material-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.material h3{font-family:var(--serif);font-size:17px;color:var(--ash)}
.material p{margin-top:10px;color:var(--smoke);font-size:14.5px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}

/* --------------------------------------------------------------- формы */
.stack{display:grid;gap:16px;margin-top:20px}
.grid-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px;align-items:end}
.grid-form .wide,.apply .wide{grid-column:1/-1}
.field{display:grid;gap:8px;min-width:0}
.field label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}
.field small{font-size:11px;color:var(--iron)}
input,select,textarea{width:100%;min-height:46px;padding:12px 13px;background:rgba(0,0,0,.5);
  color:var(--ash);border:1px solid var(--line-strong);border-radius:2px;
  font:400 14.5px/1.4 var(--sans);transition:border-color .25s,box-shadow .3s,background .25s}
textarea{resize:vertical;line-height:1.6}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--smoke) 50%),linear-gradient(135deg,var(--smoke) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
input::placeholder,textarea::placeholder{color:var(--iron)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blood);box-shadow:0 0 0 3px rgba(var(--blood-rgb),.2);background:rgba(0,0,0,.66)}
/* Автозаполнение Chrome иначе заливает поля светло-голубым поверх чёрного фона. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ash);
  -webkit-box-shadow:0 0 0 1000px #05050a inset;
  caret-color:var(--ash);
  transition:background-color 9999s ease-out 0s}

button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 20px;
  border:1px solid var(--line-strong);border-radius:2px;background:rgba(255,255,255,.03);color:var(--ash);
  cursor:pointer;font:500 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  transition:transform .18s var(--ease),background .25s,border-color .25s,box-shadow .3s,color .25s}
button:hover{background:rgba(var(--blood-rgb),.14);border-color:rgba(var(--bright-rgb),.6);color:#fff;transform:translateY(-1px)}
button:active{transform:translateY(0) scale(.98)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:1px solid var(--ember);outline-offset:3px}
.primary{border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--blood) 0%,#8c0a20 55%,var(--blood) 100%);background-size:200% 100%;
  box-shadow:0 6px 22px rgba(var(--blood-rgb),.38),inset 0 1px 0 rgba(255,255,255,.14);font-weight:600}
.primary:hover{background-position:100% 0;box-shadow:0 10px 30px rgba(var(--bright-rgb),.48);transform:translateY(-2px)}
.ghost{background:transparent;border-style:dashed;color:var(--smoke)}
.ghost:hover{border-style:solid}
.small{min-height:34px;padding:7px 12px;font-size:11px;letter-spacing:.12em}
.inline{display:inline-flex;align-items:center;gap:6px;margin:0}

/* -------------------------------------------------------------- баннеры */
.banner{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line-strong);border-left-width:3px}
.banner.ok{border-left-color:var(--mint);background:rgba(var(--mint-rgb),.09)}
.banner.ok .glyph{color:var(--mint)}
.banner.error{border-left-color:var(--ember);background:rgba(var(--blood-rgb),.11)}
.banner.error .glyph{color:var(--ember)}
.banner span{font-size:14px}

.setup-link{padding:18px;border:1px dashed rgba(var(--bright-rgb),.5);background:rgba(var(--blood-rgb),.08)}
.setup-link code{display:block;margin-top:10px;padding:12px;background:rgba(0,0,0,.6);border:1px solid var(--line);
  font-family:var(--mono);font-size:13px;color:var(--ember);overflow-wrap:anywhere}

/* -------------------------------------------------------------- таблицы */
/* Прокрутка вынесена в обёртку: display:block на самой таблице лишал бы её
   табличной семантики для чтения с экрана. */
.grid-scroll{overflow-x:auto;margin-top:20px;-webkit-overflow-scrolling:touch}
.grid{width:100%;border-collapse:collapse;min-width:520px}
.grid td{padding:14px 12px;border-top:1px solid var(--line);vertical-align:top;font-size:14px}
.grid tr:first-child td{border-top:0}
.grid tr[data-active="0"]{opacity:.5}
.grid tr[data-handled="1"]{opacity:.55}
.grid .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.grid .actions select{min-height:34px;padding:6px 30px 6px 10px;font-size:12.5px;width:auto;min-width:150px}
.grid.log td{padding:8px 12px;font-size:12.5px}

/* --------------------------------------------------------------- подвал */
.foot{position:relative;z-index:1;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:22px 34px;border-top:1px solid var(--line);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--iron)}
.foot-creed{color:var(--smoke)}

/* -------------------------------------------------------------- адаптив */
@media (max-width:900px){
  .hero-mark{width:150px;height:150px}
  .badge-card{grid-template-columns:1fr;gap:18px}
  .grid .actions{justify-content:flex-start}
}
@media (max-width:640px){
  .topbar{padding:15px}
  .page{padding:24px 15px 40px;gap:24px}
  .foot{padding:18px 15px;gap:8px}
  .wordmark{font-size:20px}
  .mark{width:46px;height:46px}
  .formula,.level-grid,.grid-form,.apply{grid-template-columns:1fr}
  .card{padding:19px}
  .grid td{padding:11px 8px;font-size:13px}
}

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

/* ==================== печать грифа на личной карточке ==================== */
.stamp{display:inline-block;margin-top:14px;padding:7px 15px;border:2px solid var(--steel-dim);
  color:var(--steel-dim);font:700 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  transform:rotate(-2.5deg);opacity:.92}

/* ============ оформление меняется вместе с уровнем допуска ============
   Базовые стили выше — это полный фирменный вид: он достаётся владельцу (L0)
   и гостям на публичной странице. Ниже он последовательно упрощается:
   L1 — красный, но без украшений владельца; L2 — холодный титан; L3 — голая сталь. */

/* ---- L3 · Секретно: сталь, минимум, никаких украшений ---- */
body[data-clearance="3"] .g1{background:radial-gradient(circle,rgba(150,156,166,.13),transparent 62%)}
body[data-clearance="3"] .g2{background:radial-gradient(circle,rgba(150,156,166,.07),transparent 64%)}
body[data-clearance="3"] .g3{background:radial-gradient(circle,rgba(130,136,146,.09),transparent 64%)}
body[data-clearance="3"] .mark{filter:grayscale(1) opacity(.68)}
body[data-clearance="3"] .card::before{display:none}
body[data-clearance="3"] .card{box-shadow:0 12px 30px rgba(0,0,0,.5)}
body[data-clearance="3"] .primary{background:linear-gradient(180deg,#5b6068,#3d424a);
  border:1px solid #6a707a;box-shadow:none;letter-spacing:.12em}
body[data-clearance="3"] .primary:hover{background:linear-gradient(180deg,#666c75,#464c55);
  box-shadow:none;transform:translateY(-1px)}
body[data-clearance="3"] .badge-left{border-color:var(--line-strong);background:rgba(0,0,0,.4)}
body[data-clearance="3"] .badge-level,body[data-clearance="3"] .badge-glyph{color:var(--steel-dim);stroke:var(--steel-dim)}
body[data-clearance="3"] .material{border-left-color:var(--line-strong)}
body[data-clearance="3"] .stamp{border-width:1px;letter-spacing:.24em;opacity:.8}

/* ---- L2 · Совершенно секретно: титан, холодный отлив, тонкая грань ---- */
body[data-clearance="2"] .g1{background:radial-gradient(circle,rgba(146,170,198,.18),transparent 62%)}
body[data-clearance="2"] .g2{background:radial-gradient(circle,rgba(120,142,170,.12),transparent 64%)}
body[data-clearance="2"] .g3{background:radial-gradient(circle,rgba(120,140,168,.13),transparent 64%)}
body[data-clearance="2"] .mark{filter:grayscale(.55)}
body[data-clearance="2"] .card::before{background:linear-gradient(180deg,#93a6bd,transparent);opacity:.75;height:26px}
body[data-clearance="2"] .primary{background:linear-gradient(135deg,#6f8199 0%,#43536a 55%,#6f8199 100%);
  background-size:200% 100%;box-shadow:0 5px 18px rgba(90,115,150,.32),inset 0 1px 0 rgba(255,255,255,.16)}
body[data-clearance="2"] .primary:hover{background-position:100% 0;box-shadow:0 9px 26px rgba(120,150,190,.4)}
body[data-clearance="2"] .badge-left{border-color:rgba(150,175,205,.45);background:rgba(70,90,115,.14)}
body[data-clearance="2"] .badge-level{color:#c3d2e4}
body[data-clearance="2"] .badge-glyph{stroke:#a8bcd4}
body[data-clearance="2"] .material{border-left-color:rgba(150,175,205,.5)}
body[data-clearance="2"] .stamp{border-color:#a8bcd4;color:#c3d2e4;border-style:double;border-width:3px}
body[data-clearance="2"] input:focus,body[data-clearance="2"] select:focus,body[data-clearance="2"] textarea:focus{
  border-color:#7e94ad;box-shadow:0 0 0 3px rgba(126,148,173,.24)}

/* ---- L1 · Секрет особой важности: красный входит в силу ---- */
body[data-clearance="1"] .badge-left{border-color:rgba(var(--bright-rgb),.45);background:rgba(var(--blood-rgb),.1)}
body[data-clearance="1"] .badge-level{color:var(--blood-ink)}
body[data-clearance="1"] .stamp{border-color:var(--blood-ink);color:var(--blood-ink);border-width:3px;letter-spacing:.18em}
body[data-clearance="1"] .card::before{height:40px}

/* ---- L0 · Владелец: полный вид плюс собственные знаки отличия ---- */
body[data-clearance="0"] .card::before{box-shadow:0 0 12px rgba(var(--bright-rgb),.55)}
body[data-clearance="0"] .stamp{border-color:var(--ember);color:var(--ember);border-width:3px;
  box-shadow:0 0 18px rgba(var(--bright-rgb),.35),inset 0 0 14px rgba(var(--blood-rgb),.18)}
body[data-clearance="0"] .badge-left{box-shadow:0 0 26px rgba(var(--blood-rgb),.35) inset}
body[data-clearance="0"] .topbar{border-bottom-color:rgba(var(--bright-rgb),.28)}

/* ==================== обезличенная страница входа ====================
   По этим страницам нельзя понять, что за ними школа: ни имени, ни эмблемы,
   ни девизов, ни фирменного красного. Обычная форма входа на обычный сайт. */
body.auth{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;
  background:#08080b;background-image:radial-gradient(70vw 50vw at 50% -25%,rgba(255,255,255,.04),transparent 62%)}
.auth-page{width:100%;max-width:420px;display:grid;gap:14px}
.auth-card{padding:30px 26px;border:1px solid #2b2f36;border-radius:4px;background:#111318;
  box-shadow:0 24px 70px rgba(0,0,0,.7)}
.auth-title{font:600 21px/1.25 var(--sans);letter-spacing:0;text-transform:none;color:#e9ecf1;margin:0}
.auth-note{margin-top:9px;color:#9aa1ab;font-size:14px;line-height:1.6}
.auth-note b{color:#cdd3db;font-weight:600}
.auth-hint{margin-top:18px;color:#767d87;font-size:12.5px;line-height:1.6}
.auth-hint a{color:#9fb4cc}
.auth-foot{text-align:center;color:#5f666f;font-size:11.5px;letter-spacing:.02em}
body.auth .field label{font-size:12px;letter-spacing:0;text-transform:none;color:#9aa1ab}
body.auth .field small{color:#767d87}
body.auth input{background:#0a0c10;border-color:#333840;border-radius:3px}
body.auth input:focus{border-color:#6b7480;box-shadow:0 0 0 3px rgba(107,116,128,.26);background:#0d0f14}
body.auth .primary{background:linear-gradient(180deg,#3c424b,#2b3037);border:1px solid #4c535d;
  color:#e9ecf1;box-shadow:none;font-weight:600;letter-spacing:.06em;text-transform:none;font-size:13.5px}
body.auth .primary:hover{background:linear-gradient(180deg,#474e58,#343a42);box-shadow:none;transform:none}
body.auth :focus-visible{outline:2px solid #8b929c;outline-offset:2px}
body.auth .banner{border-left-width:3px}
body.auth .banner.error{border-left-color:#c05561;background:rgba(160,60,70,.12)}
body.auth .banner.error .glyph{color:#e08b94}
body.auth input:-webkit-autofill,body.auth input:-webkit-autofill:hover,body.auth input:-webkit-autofill:focus{
  -webkit-text-fill-color:#e9ecf1;-webkit-box-shadow:0 0 0 1000px #0a0c10 inset;caret-color:#e9ecf1}

/* ============================== общий чат ==============================
   Один канал на всех. Гриф сообщения решает, кто его прочитает; чужие
   закрытые сообщения видны как запертый блок без содержимого. */
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.section-heading p{margin-top:7px;color:var(--iron);font-size:12.5px}
.caption{color:var(--iron);font-size:12.5px;line-height:1.65;margin-top:12px}

.chat-card{display:flex;flex-direction:column}
.chat-stream{display:grid;gap:10px;max-height:min(58vh,560px);overflow-y:auto;padding:4px 4px 8px;
  border-block:1px solid var(--line);margin-bottom:18px}
.chat-empty{text-align:center;padding:36px 12px}
.msg{padding:12px 14px;border:1px solid var(--line);border-left:2px solid var(--line-strong);
  background:rgba(255,255,255,.022);max-width:min(78%,640px)}
.msg.own{justify-self:end;background:rgba(var(--blood-rgb),.07);border-left-color:var(--blood)}
.msg[data-level="2"]{border-left-color:#93a6bd}
.msg[data-level="1"]{border-left-color:var(--blood-ink)}
.msg[data-level="0"]{border-left-color:var(--ember)}
.msg-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px}
.msg-head b{font-size:13.5px;color:var(--ash)}
.msg-head time{margin-left:auto;color:var(--iron);font:400 11.5px/1 var(--mono)}
.msg-text{font-size:14.5px;line-height:1.65;color:var(--smoke);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.own .msg-text{color:var(--ash)}
.msg-text.broken{color:var(--iron);font-style:italic}
.msg.locked{background:repeating-linear-gradient(135deg,rgba(255,255,255,.02) 0 8px,transparent 8px 16px)}
.msg-sealed{display:flex;align-items:center;gap:9px;color:var(--iron);font-size:13.5px;line-height:1.5}
.msg-sealed .glyph{width:15px;height:15px;flex:none;color:var(--steel-dim)}
.seal{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border:1px solid var(--line-strong);
  font:600 10px/1 var(--sans);letter-spacing:.1em;color:var(--steel-dim)}
.seal .glyph{width:12px;height:12px}
.seal[data-level="1"]{border-color:rgba(var(--bright-rgb),.45);color:var(--blood-ink)}
.seal[data-level="0"]{border-color:var(--ember);color:var(--ember)}
.seal.keyed{border-color:rgba(200,164,74,.55);color:#d8b25a}

/* Настоящий шифртекст из базы: именно он там и лежит. */
.cipher{font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--steel-dim);
  overflow-wrap:anywhere;background:rgba(0,0,0,.42);border:1px solid var(--line);
  padding:10px 12px;margin-bottom:10px;user-select:all}
.unlock{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap}
.unlock input{min-height:34px;padding:7px 10px;font-size:13px;width:auto;flex:1;min-width:150px}

.mention{color:var(--ember);font-weight:600}
.mention.me{background:rgba(var(--blood-rgb),.22);padding:1px 5px;border:1px solid rgba(var(--bright-rgb),.45)}
.icon-only{min-height:26px;min-width:26px;padding:4px;border-color:transparent;background:transparent;color:var(--iron)}
.icon-only:hover{color:var(--ember);background:rgba(var(--blood-rgb),.14);border-color:transparent}
.msg-remove{margin-left:4px}

.composer{display:grid;gap:10px}
.composer-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--smoke)}
.composer textarea{min-height:84px}
.composer-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.composer-seal{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.composer-seal select{width:auto;min-width:240px}
/* шкала заполнения хранилища: ширина задаётся классом, а не встроенным стилем,
   потому что политика безопасности запрещает inline-стили */
.storage-bar{height:6px;background:rgba(255,255,255,.07);margin:16px 0 4px;overflow:hidden}
.storage-bar i{display:block;height:100%;background:linear-gradient(90deg,#7a0a1c,var(--blood),var(--ember));
  box-shadow:0 0 10px rgba(var(--blood-rgb),.7);transition:width .6s var(--ease)}
.storage-bar i[data-fill="0"]{width:2px}
.storage-bar i[data-fill="5"]{width:5%}
.storage-bar i[data-fill="10"]{width:10%}
.storage-bar i[data-fill="15"]{width:15%}
.storage-bar i[data-fill="20"]{width:20%}
.storage-bar i[data-fill="25"]{width:25%}
.storage-bar i[data-fill="30"]{width:30%}
.storage-bar i[data-fill="35"]{width:35%}
.storage-bar i[data-fill="40"]{width:40%}
.storage-bar i[data-fill="45"]{width:45%}
.storage-bar i[data-fill="50"]{width:50%}
.storage-bar i[data-fill="55"]{width:55%}
.storage-bar i[data-fill="60"]{width:60%}
.storage-bar i[data-fill="65"]{width:65%}
.storage-bar i[data-fill="70"]{width:70%}
.storage-bar i[data-fill="75"]{width:75%}
.storage-bar i[data-fill="80"]{width:80%}
.storage-bar i[data-fill="85"]{width:85%}
.storage-bar i[data-fill="90"]{width:90%}
.storage-bar i[data-fill="95"]{width:95%}
.storage-bar i[data-fill="100"]{width:100%}

/* вложения */
.attachments{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.attach{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 11px;
  border:1px solid var(--line-strong);background:rgba(0,0,0,.3)}
.attach-name{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ash);
  overflow-wrap:anywhere;text-decoration:none}
a.attach-name:hover{color:var(--ember)}
.attach-name .glyph{flex:none;color:var(--steel-dim)}
.attach-key{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.attach-key input{min-height:32px;padding:6px 9px;font-size:12.5px;width:auto;min-width:130px}
.attach .inline{margin-left:auto}

.composer-file{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.composer-file .caption{margin:0;flex:1;min-width:180px}
.file-pick{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:9px 15px;
  border:1px dashed rgba(var(--blood-rgb),.4);color:var(--smoke);cursor:pointer;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:border-color .25s,color .25s,background .25s}
.file-pick:hover{border-style:solid;color:var(--ash);background:rgba(var(--blood-rgb),.1)}
.composer-file input[type=file]{flex:1;min-width:160px;font-size:12.5px;color:var(--smoke);
  background:none;border:0;padding:0;min-height:0}
.composer-file input[type=file]::file-selector-button{display:none}

.composer-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding-top:12px;border-top:1px dashed var(--line)}
.composer-key input{width:auto;flex:1;min-width:180px;min-height:42px;font-family:var(--mono);font-size:13.5px}

@media (max-width:640px){
  .msg{max-width:100%}
  .composer-seal{margin-left:0;width:100%}
  .composer-seal select{min-width:0;flex:1}
  .composer-actions>.ghost{width:100%}
}

/* ================== обычный кабинет (уровень L4) ==================
   Ни эмблемы, ни фирменного красного, ни следа школы: спокойный тёмный интерфейс. */
body.plain{background:#0a0b0e}
body.plain .topbar{border-bottom-color:#23262c;padding:16px 24px}
body.plain .page{max-width:900px;padding:26px 24px 48px}
body.plain .plain-mark{font:600 17px/1.2 var(--sans);letter-spacing:.02em;text-transform:none;
  color:#e5e8ec;margin:0}
body.plain .nav-link{color:#8d949e;letter-spacing:.06em}
body.plain .nav-link:hover{color:#e5e8ec;border-color:#333840;background:rgba(255,255,255,.04)}
body.plain .card{background:#111318;border-color:#23262c;box-shadow:0 10px 28px rgba(0,0,0,.5)}
body.plain .card::before{display:none}
body.plain .card h2{font:600 16px/1.25 var(--sans);letter-spacing:.02em;text-transform:none;color:#e5e8ec}
body.plain .section-heading{border-bottom-color:#23262c}
body.plain .primary{background:linear-gradient(180deg,#3c424b,#2b3037);border:1px solid #4c535d;
  color:#e9ecf1;box-shadow:none;text-transform:none;letter-spacing:.04em;font-size:13px}
body.plain .primary:hover{background:linear-gradient(180deg,#474e58,#343a42);box-shadow:none;transform:none}
body.plain .ghost{border-color:#3a3f47;color:#9aa1ab}
body.plain .msg{border-color:#23262c;border-left-color:#333840;background:rgba(255,255,255,.02)}
body.plain .msg.own{background:rgba(90,110,140,.14);border-left-color:#6f7d90}
body.plain .field label{letter-spacing:0;text-transform:none;font-size:12px;color:#9aa1ab}
body.plain .composer-label{letter-spacing:0;text-transform:none;font-size:12px;color:#9aa1ab}
body.plain input:focus,body.plain textarea:focus{border-color:#6b7480;box-shadow:0 0 0 3px rgba(107,116,128,.24)}
body.plain :focus-visible{outline-color:#8b929c}
body.plain .file-pick{border-color:#3a3f47;color:#9aa1ab}
body.plain .file-pick:hover{background:rgba(255,255,255,.05);color:#e5e8ec}
body.plain .seal.keyed{border-color:#5c6470;color:#aab2be}
body.plain .mention{color:#8fb4dd}
body.plain .mention.me{background:rgba(120,150,190,.22);border-color:#5c7089}

/* ========================= телефоны ========================= */
@media (max-width:760px){
  .topbar{padding:14px 16px;gap:12px}
  .page{padding:22px 16px 40px;gap:22px}
  .nav{gap:6px;width:100%;justify-content:flex-start;flex-wrap:wrap}
  .nav-link{padding:8px 11px;font-size:10.5px}
  .card{padding:18px 16px}
  .card.narrow{max-width:100%}
  .section-heading{align-items:flex-start;flex-direction:column;gap:8px}
  .badge-card{grid-template-columns:1fr}
  .badge-left{justify-self:start;padding:16px 22px}
  .grid-form{grid-template-columns:1fr}
  .stack{gap:14px}
  .foot{padding:16px;flex-direction:column;gap:6px;text-align:center}
  .chat-stream{max-height:none}
  .msg{max-width:100%}
  .msg-head{gap:7px}
  .msg-head time{margin-left:0}
  .attach{flex-direction:column;align-items:stretch;gap:8px}
  .attach-key,.attach .inline{margin-left:0;width:100%}
  .attach-key input{flex:1 1 100%;min-width:0}
  .composer-actions{flex-direction:column;align-items:stretch}
  .composer-actions>button,.composer-seal,.composer-seal select,.composer-seal button{width:100%}
  .composer-seal{margin-left:0;flex-direction:column;align-items:stretch}
  .composer-key{flex-direction:column;align-items:stretch}
  .composer-key input,.composer-key button{width:100%}
  .composer-file{flex-direction:column;align-items:stretch;gap:8px}
  .unlock{flex-direction:column;align-items:stretch}
  .unlock input,.unlock button{width:100%}
  .danger-actions{flex-direction:column;align-items:stretch;gap:10px}
  .danger-actions .inline,.danger-actions button{width:100%}
  .grid .actions{flex-direction:column;align-items:stretch}
  .grid .actions .inline,.grid .actions select,.grid .actions button{width:100%}
  .auth-card{padding:24px 18px}
  body.plain .topbar,body.plain .page{padding-inline:16px}
}
@media (max-width:420px){
  .wordmark{font-size:19px;letter-spacing:.14em}
  .mark{width:40px;height:40px}
  .eyebrow{font-size:9.5px;letter-spacing:.16em}
  .badge-level{font-size:32px}
  .cipher{font-size:11px}
  .msg-text{font-size:14px}
  button,a.btn,.primary{font-size:11px;padding:11px 14px}
}

/* ==================== удаление учётной записи ==================== */
.danger-quiet{border-color:rgba(var(--bright-rgb),.4);color:var(--blood-ink)}
.danger-quiet:hover{background:rgba(var(--blood-rgb),.16);border-color:var(--ember);color:#fff}
.danger{border-color:transparent;color:#fff;font-weight:600;
  background:linear-gradient(135deg,#a5122a 0%,#6e0b1c 55%,#a5122a 100%);background-size:200% 100%;
  box-shadow:0 6px 20px rgba(var(--blood-rgb),.4)}
.danger:hover{background-position:100% 0;box-shadow:0 9px 26px rgba(var(--bright-rgb),.5)}
.danger-zone{padding:20px;border:1px solid rgba(var(--bright-rgb),.55);border-left-width:3px;
  background:rgba(var(--blood-rgb),.1)}
.danger-zone p{margin-top:9px;font-size:14.5px;line-height:1.6;color:var(--ash)}
.danger-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}