/* ==========================================================================
   ENGLISH FLOW — "ORBITAL" THEME
   ========================================================================== */
:root{
  --void:#02020a;
  --panel:#0d0e1e;
  --panel-2:#13142a;
  --line:#23243f;
  --violet:#9d8cff;
  --teal:#29d9c2;
  --coral:#ff6b7a;
  --star:#f2f1fb;
  --dim:#8481a0;
  --radius:14px;
  --font-display:'Orbitron', sans-serif;
  --font-body:'Space Grotesk', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  /* default accent (overridden per section via [data-planet]) */
  --accent:#9d8cff;
  --accent-2:#29d9c2;
  --accent-dim:rgba(157,140,255,.14);
}

/* per-planet themes ------------------------------------------------------ */
[data-planet="mercury"]{ --accent:#b9a9ff; --accent-2:#e4defc; --accent-dim:rgba(185,169,255,.14); }
[data-planet="venus"]  { --accent:#ffcf6b; --accent-2:#fff3c9; --accent-dim:rgba(255,207,107,.14); }
[data-planet="earth"]  { --accent:#5cb8ea; --accent-2:#6fe0c4; --accent-dim:rgba(92,184,234,.14); }
[data-planet="mars"]   { --accent:#ff7a5c; --accent-2:#ffc9b0; --accent-dim:rgba(255,122,92,.14); }
[data-planet="jupiter"]{ --accent:#e8b98a; --accent-2:#ffe3c4; --accent-dim:rgba(232,185,138,.14); }
[data-planet="saturn"] { --accent:#e0cd9a; --accent-2:#fff6de; --accent-dim:rgba(224,205,154,.14); }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

body{
  margin:0; background:var(--void); color:var(--star);
  font-family:var(--font-body); font-size:16px; line-height:1.55;
  padding-bottom:90px; position:relative; overflow-x:hidden;
}

/* ---------------- BACKGROUND: nebula + starfield ---------------- */
#starfield{position:fixed; inset:0; z-index:0; pointer-events:none;}
.bg-nebula{
  /* Млечный Путь — готовая картинка. Раньше это были градиенты с blur(28px)
     на слое в полтора экрана: браузер пересчитывал размытие каждый кадр и
     терял на этом ~36 FPS. Теперь размытие запечено. */
  position:fixed; inset:-12%; z-index:-3; pointer-events:none;
  background:url("/static/img/milkyway.jpg") center/cover no-repeat;
  opacity:.9; transition:opacity .9s ease;
  animation:nebulaDrift 120s ease-in-out infinite alternate;
}
@keyframes nebulaDrift{
  from{ transform:translate3d(0,0,0) scale(1.02); }
  to  { transform:translate3d(-1.6%,1%,0) scale(1.06); }
}

a{color:var(--accent-2);}
h1,h2,h3{font-family:var(--font-display); letter-spacing:.05em; margin:0 0 6px;}
h1{font-size:clamp(1.5em,4vw,2.3em);}
h2{font-size:1.25em;}
.eyebrow{
  font-family:var(--font-mono); font-size:.7em; letter-spacing:.18em;
  color:var(--accent); text-transform:uppercase; display:block; margin-bottom:8px;
}
.lede{color:var(--dim); max-width:620px; margin:0 auto 26px; font-size:.94em;}
/* the planet skies are bright, so lift the body copy to stay readable on them */
body.on-planet .lede{color:#cdcade;}
body.on-planet .eyebrow{color:var(--accent-2);}
::selection{background:var(--accent); color:#05050d;}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:4px;}

/* ---------------- HEADER / NAV ---------------- */
header{
  position:sticky; top:0; z-index:500;
  background:rgba(5,5,13,.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); padding:14px 20px;
}
.brand-row{display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:12px;}
.brand-mark{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(from 180deg, var(--violet), var(--teal), var(--violet));
  box-shadow:0 0 18px rgba(157,140,255,.4); animation:brandSpin 14s linear infinite;
}
@keyframes brandSpin{to{transform:rotate(360deg);}}
.brand-row h1{margin:0; font-size:1.1em;}
.brand-row span{color:var(--dim); font-family:var(--font-mono); font-size:.66em; letter-spacing:.14em;}

nav{display:flex; justify-content:center; flex-wrap:wrap; gap:7px;}
.nav-btn{
  background:transparent; border:1px solid var(--line); color:var(--dim);
  padding:8px 15px; border-radius:99px; cursor:pointer;
  font-family:var(--font-mono); font-size:.72em; letter-spacing:.07em;
  transition:.25s; text-transform:uppercase;
}
.nav-btn:hover{border-color:var(--violet); color:var(--star);}
.nav-btn.active{border-color:var(--accent); color:var(--accent); background:var(--accent-dim);}
.nav-btn.admin-link{border-color:rgba(255,107,122,.4); color:var(--coral);}
.nav-toggle{display:none;}
@media (max-width:680px){
  nav{display:none; width:100%; flex-direction:column; margin-top:10px;}
  nav.open{display:flex;}
  .nav-toggle{
    display:block; margin:0 auto; background:none; border:1px solid var(--line);
    color:var(--star); padding:8px 18px; border-radius:99px;
    font-family:var(--font-mono); font-size:.78em; cursor:pointer;
  }
}

/* ---------------- LAYOUT ---------------- */
main{position:relative; z-index:1; max-width:1020px; margin:0 auto; padding:0 18px;}
.section{display:none; padding:42px 0 20px; text-align:center;}
.section.active{display:block; animation:rise .55s cubic-bezier(.2,.8,.2,1);}
@keyframes rise{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}

/* themed atmosphere band at the top of each planet section */
.section-atmo{
  height:2px; width:min(100%,520px); margin:0 auto 26px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow:0 0 18px var(--accent); opacity:.8;
}
.panel{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; text-align:left;
}

/* ---------------- SOLAR SYSTEM ---------------- */
/* NOTE: nothing inside .solar-plane may use filter:blur() or mix-blend-mode.
   Both force layer flattening inside transform-style:preserve-3d, which paints
   a dark rectangle over the scene and dims planets passing through it. */
.orbit-hero{
  /* Блок стал шире: планетам вернули нормальный размер за счёт масштаба
     всей сцены, а не за счёт их сжатия. */
  /* Высота подобрана под вертикальный размах эллипса (2·R·cos50° плюс радиус
     самой дальней планеты и её кольца) — иначе Сатурн наезжал на кнопки. */
  /* Высота с запасом: эллипс занимает 2·R·cos50°, остальное — воздух снизу,
     чтобы дальняя планета с кольцами не подходила вплотную к кнопкам. */
  position:relative; width:min(94vw,800px); margin:2px auto 22px;
  aspect-ratio:1/0.86; overflow:visible;
}
.solar-stage{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  width:100%; aspect-ratio:1/1; perspective:1250px;
  /* сцена — квадрат внутри более низкого блока, поэтому свисает вниз
     и раньше молча съедала клики по кнопкам легенды */
  pointer-events:none;
}
.solar-plane{
  position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(50deg);
  pointer-events:none;
}
.planet-btn{ pointer-events:auto; }

.orbit-ring{
  position:absolute; top:50%; left:50%; border-radius:50%;
  border:1px solid rgba(190,180,255,.12); transform:translate(-50%,-50%);
  pointer-events:none; transition:border-color .3s, box-shadow .3s;
}
.orbit-ring.lit{ border-color:var(--ring-c); box-shadow:0 0 16px var(--ring-c); }

/* ---- SUN ---- */
.sun{
  position:absolute; top:50%; left:50%; border-radius:50%; z-index:4;
  transform:translate(-50%,-50%) rotateX(-50deg);
  background:
    radial-gradient(circle at 50% 50%, #fffdf2 0%, #ffe89a 30%, #ffb44a 58%,
                    #ff8418 80%, #e04e00 100%);
  box-shadow:0 0 22px 5px rgba(255,178,80,.55);
  animation:sunPulse 4.2s ease-in-out infinite;
  overflow:hidden;
}
/* granulation + drifting plasma cells, no blend modes */
.sun::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:
    radial-gradient(ellipse 26% 16% at 24% 30%, rgba(255,255,235,.55), transparent 70%),
    radial-gradient(ellipse 22% 13% at 68% 26%, rgba(255,236,170,.42), transparent 70%),
    radial-gradient(ellipse 30% 18% at 52% 66%, rgba(255,190,90,.45), transparent 72%),
    radial-gradient(ellipse 18% 12% at 84% 62%, rgba(255,150,50,.5), transparent 72%),
    radial-gradient(ellipse 20% 14% at 16% 74%, rgba(255,210,120,.4), transparent 72%);
  background-size:200% 100%;
  animation:surfSpin 26s linear infinite;
}
/* limb darkening — the sun's edge is dimmer than its centre, like the real thing */
.sun::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    transparent 0%, transparent 58%, rgba(190,70,0,.28) 82%, rgba(120,40,0,.55) 100%);
}
@keyframes sunPulse{
  0%,100%{ box-shadow:0 0 22px 5px rgba(255,178,80,.55); }
  50%    { box-shadow:0 0 30px 9px rgba(255,192,100,.7); }
}

/* ---- ORBIT MOTION ---- */
.orbit-path{
  position:absolute; top:50%; left:50%; width:0; height:0; transform-style:preserve-3d;
  animation:orbitSpin var(--dur) linear infinite; animation-delay:var(--delay);
}
@keyframes orbitSpin{
  from{transform:translate(-50%,-50%) rotate(0deg);}
  to{transform:translate(-50%,-50%) rotate(360deg);}
}
.planet-btn{
  position:absolute; top:0; left:var(--r); border:none; padding:0; cursor:pointer;
  width:var(--size); height:var(--size); border-radius:50%; z-index:6;
  margin-top:calc(var(--size) / -2); margin-left:calc(var(--size) / -2);
  background:transparent;
  animation:orbitCounter var(--dur) linear infinite,
            orbitDepth   var(--dur) linear infinite;
  animation-delay:var(--delay), var(--delay);
  transition:box-shadow .25s;
}
/* The counter-rotation keeps the planet facing the viewer. translateZ lifts it a
   few px off the orbital plane: without it the planet is coplanar with
   .solar-plane and the browser's 3D hit-testing gives the click to the plane. */
@keyframes orbitCounter{
  from{transform:rotate(0deg) rotateX(-50deg) translateZ(6px);}
  to{transform:rotate(-360deg) rotateX(-50deg) translateZ(6px);}
}
/* Нижняя половина орбиты — ближняя к зрителю, верхняя — дальняя.
   Поэтому на дальней половине планета должна прятаться ЗА Солнце,
   а не проезжать поверх него. z-index в кадрах меняется скачком — это то,
   что нужно: подмена происходит ровно на краю диска. */
@keyframes orbitDepth{
  0%   { z-index:6; }
  49.9%{ z-index:6; }
  50%  { z-index:1; }
  99.9%{ z-index:1; }
  100% { z-index:6; }
}
.planet-btn::before{ /* enlarged tap target, kept small enough not to reach the next orbit */
  content:''; position:absolute; inset:-9px; border-radius:50%;
}
.planet-btn.active{ box-shadow:0 0 0 2px var(--planet-c), 0 0 24px 6px var(--planet-c); }

/* ---- SPHERE LAYERS ----
   .surf  : the rotating surface texture (panned horizontally = spin illusion)
   .atmo  : optional second layer that drifts at its own speed (clouds/haze)
   .shade : FIXED lighting — highlight from the sun + night-side terminator.
            Because it never rotates, the planet always looks lit from one side. */
.surf, .atmo, .shade{
  position:absolute; inset:0; border-radius:50%; pointer-events:none;
}
.surf, .atmo{ overflow:hidden; background-repeat:repeat; background-size:200% 100%; }
.surf{ animation:surfSpin var(--spin,24s) linear infinite; }
.atmo{ animation:surfSpin var(--spin2,16s) linear infinite; }
@keyframes surfSpin{ from{background-position:0 50%;} to{background-position:-200% 50%;} }

.shade{
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.5) 0%,
                    rgba(255,255,255,.14) 17%, transparent 43%),
    radial-gradient(circle at 74% 78%, rgba(0,0,8,.72) 0%,
                    rgba(0,0,8,.34) 33%, transparent 63%);
  box-shadow:inset -2px -2px 6px rgba(0,0,12,.5);
}
.planet-btn:hover .shade{ box-shadow:inset -2px -2px 6px rgba(0,0,12,.5), 0 0 0 1px rgba(255,255,255,.25); }

/* ---- ПОВЕРХНОСТИ: процедурные текстуры из planets.css ----
   Каждая карта бесшовна по горизонтали, поэтому её можно бесконечно
   прокручивать — так планета и «вращается». Скорость у каждой своя. */
.p-mercury .surf{ --spin:20s; background-image:var(--tex-mercury); }
.p-venus   .surf{ --spin:32s; background-image:var(--tex-venus); }
.p-earth   .surf{ --spin:24s; background-image:var(--tex-earth); }
.p-earth   .atmo{ --spin2:16s; background-image:var(--tex-earth-clouds); opacity:.55; }
.p-mars    .surf{ --spin:23s; background-image:var(--tex-mars); }
.p-jupiter .surf{ --spin:12s; background-image:var(--tex-jupiter); }
.p-saturn  .surf{ --spin:14s; background-image:var(--tex-saturn); }
.p-uranus  .surf{ --spin:18s; background-image:var(--tex-uranus); }

/* атмосферный ободок — тонкое свечение по краю диска, у каждой планеты свой */
.planet-btn::after{
  content:''; position:absolute; inset:-2px; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 0 4px 1px var(--rim, transparent), 0 0 7px 1px var(--rim, transparent);
  opacity:.75;
}
.p-earth  { --rim:rgba(120,200,255,.75); }
.p-venus  { --rim:rgba(255,214,140,.6); }
.p-mars   { --rim:rgba(255,150,110,.5); }
.p-jupiter{ --rim:rgba(255,220,180,.45); }
.p-saturn { --rim:rgba(240,225,180,.4); }
.p-uranus { --rim:rgba(170,235,245,.7); }
.p-mercury{ --rim:rgba(200,195,215,.35); }

/* ---- RINGS ---- */
.pring{
  position:absolute; left:50%; top:50%; border-radius:50%;
  transform:translate(-50%,-50%) rotate(var(--ring-tilt,-17deg));
  pointer-events:none; z-index:7;
}
.p-saturn .pring{
  width:250%; height:64%;
  border:2.5px solid rgba(240,222,176,.8);
  box-shadow:0 0 8px rgba(240,222,176,.4), inset 0 0 4px rgba(240,222,176,.5);
}
.p-saturn .pring.inner{
  width:196%; height:48%;
  border:1.5px solid rgba(214,190,140,.55);
  box-shadow:none;
}
.p-uranus .pring{
  --ring-tilt:82deg;
  width:210%; height:52%;
  border:1.5px solid rgba(180,232,240,.55);
  box-shadow:0 0 6px rgba(180,232,240,.3);
}

/* ---- EARTH'S MOON ---- */
.moon{
  position:absolute; top:50%; left:50%; width:27%; height:27%; margin:-13.5% 0 0 -13.5%;
  border-radius:50%; z-index:8; pointer-events:none;
  background:
    radial-gradient(circle at 34% 30%, #ffffff 0%, #d2d5dd 45%, #8b8f9c 78%, #5a5e69 100%);
  box-shadow:0 0 5px rgba(255,255,255,.45), inset -1.5px -1.5px 3px rgba(0,0,10,.55);
  animation:moonOrbit 4.2s linear infinite;
}
@keyframes moonOrbit{
  from{transform:rotate(0deg) translateX(200%) rotate(0deg);}
  to{transform:rotate(360deg) translateX(200%) rotate(-360deg);}
}

/* ---- TOOLTIP ---- */
.planet-tip{
  position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:11px;
  white-space:nowrap; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--star); background:rgba(10,10,24,.94);
  border:1px solid var(--line); padding:3px 9px; border-radius:6px; z-index:10;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.planet-btn:hover .planet-tip, .planet-btn:focus-visible .planet-tip{opacity:1;}

/* "target lock" — freezing the system makes a moving planet easy to click */
.orbit-hero.paused .orbit-path,
.orbit-hero.paused .planet-btn,
.orbit-hero.paused .moon{animation-play-state:paused;}
.orbit-hero.paused .orbit-ring{border-color:rgba(190,180,255,.22);}

/* legend under the system */
.orbit-legend{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:8px;}
.orbit-legend button{
  display:flex; align-items:center; gap:8px; background:var(--panel);
  border:1px solid var(--line); color:var(--dim); padding:8px 15px; border-radius:99px;
  cursor:pointer; transition:.2s; font-family:var(--font-mono); font-size:.7em;
  letter-spacing:.05em; text-transform:uppercase;
}
.orbit-legend button:hover{border-color:var(--lg-c); color:var(--star); transform:translateY(-2px);}
.orbit-legend .dot{width:9px; height:9px; border-radius:50%; flex-shrink:0; box-shadow:0 0 8px var(--lg-c);}

/* ---------------- WARP TRAVEL OVERLAY ---------------- */
#warp{
  position:fixed; inset:0; z-index:1200; display:none;
  align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(circle at 50% 50%, rgba(6,6,16,.5), rgba(4,4,10,.96) 70%);
}
#warp.on{display:flex;}
.warp-streaks{position:absolute; inset:0; pointer-events:none;}
.warp-streaks i{
  position:absolute; left:50%; top:50%; width:2px; height:var(--len); border-radius:2px;
  background:linear-gradient(to bottom, transparent, var(--wc), transparent);
  transform-origin:50% 0;
  opacity:0; animation:streak 1s cubic-bezier(.45,0,.7,0) forwards; animation-delay:var(--sd);
}
@keyframes streak{
  0%{opacity:0; transform:rotate(var(--a)) translateY(var(--d0)) scaleY(.15);}
  25%{opacity:.85;}
  100%{opacity:0; transform:rotate(var(--a)) translateY(var(--d1)) scaleY(2.8);}
}
.warp-orb{
  position:relative; border-radius:50%; width:150px; height:150px;
  animation:warpArrive 1.35s cubic-bezier(.5,0,.3,1) forwards;
}
@keyframes warpArrive{
  0%{transform:scale(.1); opacity:0; filter:blur(3px);}
  22%{opacity:1; filter:blur(0);}
  68%{transform:scale(1.18);}
  100%{transform:scale(9); opacity:0; filter:blur(2px);}
}
.warp-label{
  position:absolute; left:0; right:0; bottom:19%; text-align:center;
  font-family:var(--font-mono); letter-spacing:.32em; text-transform:uppercase;
  font-size:.85em; color:var(--star); opacity:0;
  animation:warpLabel 1.35s ease forwards;
}
.warp-sub{display:block; margin-top:8px; font-size:.72em; letter-spacing:.14em; color:var(--dim);}
@keyframes warpLabel{
  0%{opacity:0; letter-spacing:.6em;}
  30%{opacity:1; letter-spacing:.32em;}
  78%{opacity:1;}
  100%{opacity:0;}
}

/* ---------------- TEXTBOOK (EARTH) ---------------- */
.tb-toolbar{display:flex; flex-wrap:wrap; gap:9px; align-items:center; justify-content:center; margin-bottom:16px;}
.tb-search{
  flex:1 1 240px; max-width:340px; background:var(--void); border:1px solid var(--line);
  color:var(--star); padding:11px 15px; border-radius:99px; font-family:var(--font-body); transition:.2s;
}
.tb-search:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-dim);}
.chip{
  background:transparent; border:1px solid var(--line); color:var(--dim);
  padding:7px 14px; border-radius:99px; cursor:pointer; transition:.2s;
  font-family:var(--font-mono); font-size:.7em; text-transform:uppercase; letter-spacing:.05em;
}
.chip:hover{border-color:var(--accent); color:var(--star);}
.chip.active{border-color:var(--accent); color:var(--accent); background:var(--accent-dim);}

.tb-progress{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin:0 auto 20px; max-width:420px; padding:12px 18px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
}
.ring{width:46px; height:46px; flex-shrink:0; transform:rotate(-90deg);}
.ring circle{fill:none; stroke-width:5; stroke-linecap:round;}
.ring .bg{stroke:var(--line);}
.ring .fg{stroke:var(--accent); transition:stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1);}
.tb-progress-text{text-align:left; font-size:.85em;}
.tb-progress-text b{color:var(--accent); font-family:var(--font-mono);}
.tb-progress-text span{display:block; color:var(--dim); font-size:.88em;}

#rules-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px;}
.rule-card{
  position:relative; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:17px; cursor:pointer; text-align:left;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
  opacity:0; animation:cardIn .45s ease forwards; animation-delay:var(--sd,0ms);
}
@keyframes cardIn{from{opacity:0; transform:translateY(14px) scale(.98);} to{opacity:1; transform:none;}}
.rule-card:hover{transform:translateY(-4px); border-color:var(--accent); box-shadow:0 12px 30px var(--accent-dim);}
.rule-card .idx{font-family:var(--font-mono); color:var(--dim); font-size:.7em; letter-spacing:.1em;}
.rule-card h3{font-size:.98em; color:var(--accent); margin:7px 0 6px;}
.rule-card p{color:var(--dim); font-size:.85em; margin:0;}
.rule-card .tag{
  display:inline-block; margin-top:10px; font-family:var(--font-mono); font-size:.62em;
  letter-spacing:.08em; text-transform:uppercase; color:var(--dim);
  border:1px solid var(--line); padding:2px 8px; border-radius:99px;
}
.rule-card.learned{border-color:rgba(41,217,194,.45);}
.rule-card .check{
  position:absolute; top:13px; right:13px; width:19px; height:19px; border-radius:50%;
  border:1.5px solid var(--line); display:grid; place-items:center;
  font-size:11px; color:transparent; transition:.25s;
}
.rule-card.learned .check{background:var(--teal); border-color:var(--teal); color:#041210;}
.empty-note{color:var(--dim); padding:30px; font-size:.9em; grid-column:1/-1;}

/* ---------------- MODAL ---------------- */
.modal-overlay{
  display:none; position:fixed; inset:0; z-index:900; padding:20px;
  background:rgba(3,3,9,.82); backdrop-filter:blur(5px);
  align-items:center; justify-content:center;
}
.modal-overlay.on{display:flex; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
.modal-box{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--accent); border-radius:var(--radius); padding:26px;
  max-width:560px; width:100%; max-height:86vh; overflow-y:auto; text-align:left;
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 40px var(--accent-dim);
  animation:modalIn .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes modalIn{from{opacity:0; transform:translateY(18px) scale(.97);} to{opacity:1; transform:none;}}
.modal-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.modal-close{
  background:none; border:none; color:var(--dim); font-size:1.5em; cursor:pointer;
  line-height:1; padding:0 4px; transition:.2s;
}
.modal-close:hover{color:var(--coral);}
#m-title{color:var(--star); margin:0;}
#m-desc{color:var(--accent); margin:6px 0 0; font-size:.94em;}
#m-full{margin:18px 0; line-height:1.65; color:var(--star); font-size:.94em;}
.example-box{
  background:var(--void); padding:14px 16px; border-left:3px solid var(--accent);
  border-radius:6px; font-size:.93em;
}
.example-box b{color:var(--accent); font-family:var(--font-mono); font-size:.8em; letter-spacing:.08em;}
.modal-foot{display:flex; gap:9px; margin-top:20px; flex-wrap:wrap; align-items:center;}
.modal-foot .spacer{flex:1;}

/* ---------------- CATALOG (VENUS) ---------------- */
#dict-cats{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:12px;}
.word-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(225px,1fr)); gap:12px; margin-top:14px;}
.word-card{
  background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:14px;
  text-align:left; transition:.22s; opacity:0;
  animation:cardIn .4s ease forwards; animation-delay:var(--sd,0ms);
}
.word-card:hover{border-color:var(--accent); transform:translateY(-2px);}
.word-card b{font-family:var(--font-mono); color:var(--accent); letter-spacing:.05em; font-size:.95em;}
.word-card p{margin:6px 0 0; color:var(--dim); font-size:.86em;}

/* ---------------- MISSION (MARS) ---------------- */
.level-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:14px; margin-top:8px;}
.level-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 18px; cursor:pointer; text-align:left; transition:.25s;
  opacity:0; animation:cardIn .45s ease forwards; animation-delay:var(--sd,0ms);
}
.level-card:hover{transform:translateY(-4px); border-color:var(--lv-c); box-shadow:0 12px 30px rgba(0,0,0,.45);}
.level-card .lv-badge{
  display:inline-block; font-family:var(--font-mono); font-size:.63em; letter-spacing:.12em;
  text-transform:uppercase; color:var(--lv-c); border:1px solid var(--lv-c);
  padding:3px 10px; border-radius:99px; margin-bottom:12px;
}
.level-card h3{font-size:1.05em; color:var(--star); margin:0 0 6px;}
.level-card p{color:var(--dim); font-size:.85em; margin:0 0 12px;}
.level-card .lv-meta{
  font-family:var(--font-mono); font-size:.68em; color:var(--dim);
  display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:10px;
}
.level-card .lv-best{color:var(--lv-c);}

.quiz-box{max-width:600px; margin:0 auto;}
.quiz-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--font-mono); font-size:.74em; color:var(--dim);
  margin-bottom:12px; text-transform:uppercase; letter-spacing:.06em; gap:10px;
}
.quiz-meta .score{color:var(--accent);}
.streak-badge{color:var(--coral); opacity:0; transition:opacity .3s;}
.streak-badge.on{opacity:1;}
.progress-track{height:5px; background:var(--line); border-radius:5px; overflow:hidden; margin-bottom:22px;}
.progress-fill{
  height:100%; border-radius:5px; width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .45s cubic-bezier(.2,.8,.2,1);
}
#q-text{
  color:var(--star); font-size:1.22em; margin:0 0 20px; line-height:1.5;
  font-family:var(--font-body); font-weight:500; min-height:2.4em;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.game-btn{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--panel); border:1px solid var(--line); color:var(--star);
  padding:14px 17px; border-radius:11px; margin-bottom:10px; cursor:pointer;
  font-family:var(--font-body); font-size:.97em; transition:.18s;
}
.game-btn .key{
  flex-shrink:0; width:24px; height:24px; border-radius:6px; display:grid; place-items:center;
  border:1px solid var(--line); font-family:var(--font-mono); font-size:.72em; color:var(--dim);
  transition:.18s;
}
.game-btn:hover:not(:disabled){border-color:var(--accent); transform:translateX(3px);}
.game-btn:hover:not(:disabled) .key{border-color:var(--accent); color:var(--accent);}
.game-btn:disabled{cursor:default;}
.game-btn.correct{border-color:var(--teal); background:rgba(41,217,194,.12); color:var(--teal);}
.game-btn.correct .key{border-color:var(--teal); color:var(--teal);}
.game-btn.wrong{border-color:var(--coral); background:rgba(255,107,122,.12); color:var(--coral);}
.game-btn.wrong .key{border-color:var(--coral); color:var(--coral);}
@keyframes shake{10%,90%{transform:translateX(-2px);}20%,80%{transform:translateX(4px);}30%,50%,70%{transform:translateX(-6px);}40%,60%{transform:translateX(6px);}}
.game-btn.shake{animation:shake .45s;}

.q-why{
  margin-top:14px; padding:13px 16px; border-radius:10px; text-align:left;
  background:var(--void); border-left:3px solid var(--accent); font-size:.89em;
  color:var(--dim); display:none;
}
.q-why.on{display:block; animation:rise .35s ease;}
.q-why b{color:var(--accent); font-family:var(--font-mono); font-size:.82em; letter-spacing:.06em;}

.result-card{max-width:520px; margin:0 auto; text-align:center;}
.result-score{
  font-family:var(--font-display); font-size:3.2em; color:var(--accent);
  line-height:1; margin:6px 0; text-shadow:0 0 30px var(--accent-dim);
}
.result-sub{color:var(--dim); font-family:var(--font-mono); font-size:.8em; letter-spacing:.1em; text-transform:uppercase;}
.result-stats{display:flex; justify-content:center; gap:26px; margin:22px 0; flex-wrap:wrap;}
.result-stats div{text-align:center;}
.result-stats b{display:block; font-family:var(--font-display); font-size:1.4em; color:var(--star);}
.result-stats span{font-family:var(--font-mono); font-size:.66em; color:var(--dim); letter-spacing:.1em; text-transform:uppercase;}
.review-list{text-align:left; margin:20px 0 0; max-height:260px; overflow-y:auto;}
.review-item{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--coral);
  border-radius:9px; padding:12px 14px; margin-bottom:9px; font-size:.87em;
}
.review-item .rq{color:var(--star); margin-bottom:5px;}
.review-item .ra{color:var(--dim); font-family:var(--font-mono); font-size:.85em;}
.review-item .ra b{color:var(--teal);}

/* ---------------- FORMS / BUTTONS ---------------- */
textarea, input[type=text]{
  width:100%; background:var(--void); border:1px solid var(--line); color:var(--star);
  padding:13px; border-radius:10px; font-family:var(--font-body); font-size:.95em; resize:vertical;
  transition:.2s;
}
textarea:focus, input[type=text]:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-dim);}
.btn-primary{
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); border:none; color:#05050d;
  padding:13px 26px; border-radius:99px; font-family:var(--font-mono); font-weight:700;
  font-size:.78em; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; transition:.2s;
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 24px var(--accent-dim);}
.btn-secondary{
  background:none; border:1px solid var(--line); color:var(--dim); padding:12px 22px;
  border-radius:99px; font-family:var(--font-mono); font-size:.76em; cursor:pointer;
  letter-spacing:.05em; text-transform:uppercase; transition:.2s;
}
.btn-secondary:hover{border-color:var(--accent); color:var(--accent);}
.output-box{
  padding:16px; background:var(--panel); border-radius:10px; min-height:52px;
  font-size:1.04em; color:var(--accent-2); border:1px dashed var(--line); margin-top:14px;
  text-align:left; white-space:pre-wrap;
}
#ocr-status{font-size:.82em; color:var(--accent); margin:10px 0; display:none; font-family:var(--font-mono);}

/* ---------------- COMMANDS (SATURN) ---------------- */
.voice-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; text-align:left;}
.voice-column{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px;
  opacity:0; animation:cardIn .45s ease forwards; animation-delay:var(--sd,0ms);
}
.voice-column h4{
  margin:0 0 10px; font-family:var(--font-mono); font-size:.74em; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
}
.voice-column ul{list-style:none; padding:0; margin:0;}
.voice-column li{color:var(--dim); font-size:.86em; margin-bottom:7px; padding-left:14px; position:relative;}
.voice-column li::before{content:'\203A'; position:absolute; left:0; color:var(--accent);}
#cmdSearch{
  width:100%; max-width:340px; margin:0 auto 18px; display:block; padding:11px 15px;
  border-radius:99px; border:1px solid var(--line); background:var(--void); color:var(--star);
  font-family:var(--font-body);
}
#cmdSearch:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-dim);}

/* voice HUD */
#voiceHUD{
  position:fixed; left:14px; bottom:14px; z-index:600;
  display:flex; align-items:center; gap:11px; cursor:pointer;
  background:rgba(8,8,20,.92); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:99px;
  padding:9px 18px 9px 12px; max-width:min(60vw,320px);
  font-family:inherit; text-align:left; transition:.25s;
}
#voiceHUD:hover{ border-color:var(--teal); }
#voiceHUD.is-on{ border-color:var(--coral); box-shadow:0 0 22px rgba(255,107,122,.22); }
#voiceHUD.is-error{ border-color:var(--coral); background:rgba(40,8,14,.92); }
.vh-body{ min-width:0; display:block; }
.mic-icon{
  width:11px; height:11px; border-radius:50%; background:var(--dim);
  flex-shrink:0; transition:.3s;
}
.mic-icon.active{ background:var(--coral); animation:micPulse 1.6s infinite; }
@keyframes micPulse{
  0%{ box-shadow:0 0 0 0 rgba(255,107,122,.55); }
  70%{ box-shadow:0 0 0 11px rgba(255,107,122,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,107,122,0); }
}
#voiceHUD .vh-label{
  display:block; font-family:var(--font-mono); color:var(--teal);
  font-size:.58em; letter-spacing:.14em;
}
#liveText{
  display:block; font-size:.75em; color:var(--dim); font-style:italic;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#voiceHUD.is-error #liveText{ color:var(--coral); font-style:normal; }

/* На телефоне HUD шириной 340px наезжал на кнопки входа справа.
   Сворачиваем его в кружок — подпись открывается по нажатию. */
@media (max-width:900px){
  #voiceHUD{
    left:12px; bottom:76px; padding:11px; max-width:none;
    width:44px; height:44px; justify-content:center; gap:0;
  }
  #voiceHUD .vh-body{ display:none; }
  #voiceHUD .mic-icon{ width:14px; height:14px; }
  #voiceHUD.is-on, #voiceHUD.is-error{
    width:auto; max-width:calc(100vw - 24px); padding:9px 16px 9px 12px; gap:10px;
  }
  #voiceHUD.is-on .vh-body, #voiceHUD.is-error .vh-body{ display:block; }
}

/* toast */
#toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:1300;
  background:var(--panel-2); border:1px solid var(--accent); color:var(--star);
  padding:12px 22px; border-radius:99px; font-size:.87em; opacity:0;
  pointer-events:none; transition:.35s; box-shadow:0 10px 30px rgba(0,0,0,.5);
}
#toast.on{opacity:1; transform:translate(-50%,0);}

footer{
  text-align:center; color:var(--dim); font-family:var(--font-mono); font-size:.7em;
  padding:34px 0 10px; position:relative; z-index:1; letter-spacing:.08em;
}

/* ---------------- ACCOUNT (optional sign-in) ---------------- */
.user-chip{display:inline-flex; align-items:center; gap:8px; border-color:var(--teal)!important; color:var(--teal)!important;}
.user-dot{width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 8px var(--teal);}
.auth-box{max-width:430px;}
.auth-box h2{color:var(--star); margin-bottom:10px;}
.auth-note{color:var(--dim); font-size:.87em; line-height:1.6; margin:0 0 18px;}
.auth-note b{color:var(--star);}
.auth-label{
  display:block; font-family:var(--font-mono); font-size:.68em; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin:12px 0 6px;
}
.auth-box input{
  width:100%; background:var(--void); border:1px solid var(--line); color:var(--star);
  padding:12px 14px; border-radius:10px; font-family:var(--font-body); font-size:.95em; transition:.2s;
}
.auth-box input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-dim);}
.auth-error{color:var(--coral); font-size:.85em; min-height:1.3em; margin-top:10px;}
.auth-stats{display:flex; gap:24px; justify-content:center; margin:20px 0;}
.auth-stats div{text-align:center;}
.auth-stats b{display:block; font-family:var(--font-display); font-size:1.5em; color:var(--teal);}
.auth-stats span{font-family:var(--font-mono); font-size:.64em; color:var(--dim); letter-spacing:.1em; text-transform:uppercase;}

/* ---------------- RULE PRACTICE ---------------- */
.pr-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px;}
.pr-rule{font-family:var(--font-mono); font-size:.72em; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);}
.pr-count{font-family:var(--font-mono); font-size:.75em; color:var(--dim);}
.pr-q{
  color:var(--star); font-size:1.15em; font-family:var(--font-body); font-weight:500;
  margin:0 0 18px; line-height:1.5; text-align:center;
}
.pr-result{text-align:center;}
.card-foot{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:10px;}
.rule-card .tag{margin-top:0;}
.tag.prac{border-color:rgba(157,140,255,.4); color:var(--violet);}
.tag.prac.done{border-color:var(--teal); color:var(--teal);}

/* ---------------- SCHEDULE (URANUS) ---------------- */
.sched-stats{color:var(--dim); font-size:.9em; margin:0 0 16px;}
.sched-stats b{color:var(--accent); font-family:var(--font-mono);}
.next-lesson{
  display:inline-flex; flex-direction:column; gap:3px; align-items:center;
  background:var(--panel); border:1px solid var(--accent); border-radius:var(--radius);
  padding:14px 26px; margin:0 auto 18px; box-shadow:0 0 24px var(--accent-dim);
}
.nl-label{font-family:var(--font-mono); font-size:.62em; letter-spacing:.14em; text-transform:uppercase; color:var(--accent);}
.next-lesson b{font-size:1.05em; color:var(--star);}
.nl-when{font-family:var(--font-mono); font-size:.75em; color:var(--dim);}

.sched-form{max-width:680px; margin:0 auto 24px;}
.sched-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px;}
.sched-row label{
  flex:1 1 120px; display:flex; flex-direction:column; gap:6px;
  font-family:var(--font-mono); font-size:.66em; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
}
.sched-row input, .sched-row select{
  background:var(--void); border:1px solid var(--line); color:var(--star);
  padding:11px 12px; border-radius:9px; font-family:var(--font-body); font-size:.92em;
  text-transform:none; letter-spacing:0; transition:.2s; width:100%;
}
.sched-row input:focus, .sched-row select:focus{
  border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-dim);
}

.sched-week{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; text-align:left;}
.sched-day{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px;
  opacity:0; animation:cardIn .4s ease forwards;
}
.sched-day.empty{opacity:.55; animation:cardIn .4s ease forwards;}
.sched-day.today{border-color:var(--accent); box-shadow:0 0 20px var(--accent-dim);}
.sched-day-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-mono); font-size:.7em; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:10px;
}
.sched-day.today .sched-day-head{color:var(--accent);}
.sched-day-head em{font-style:normal; color:var(--accent); font-size:.85em;}
.sched-item{display:flex; align-items:flex-start; gap:10px; padding:8px 0; border-bottom:1px solid rgba(35,36,63,.5);}
.sched-item:last-child{border-bottom:none;}
.sched-time{
  font-family:var(--font-mono); font-size:.82em; color:var(--accent);
  flex-shrink:0; padding-top:1px;
}
.sched-body{flex:1; min-width:0;}
.sched-body b{display:block; font-size:.9em; color:var(--star); font-weight:500;}
.sched-body em{font-style:normal; font-size:.76em; color:var(--dim); font-family:var(--font-mono);}
.sched-del{
  background:none; border:none; color:var(--dim); cursor:pointer; font-size:1.1em;
  line-height:1; padding:2px 4px; flex-shrink:0; transition:.2s; border-radius:4px;
}
.sched-del:hover{color:var(--coral); background:rgba(255,107,122,.1);}
.sched-none{color:var(--dim); font-size:.85em; opacity:.5;}

/* ---------- QUIZ: таймер и очки ---------- */
.q-timer-wrap{display:inline-flex; align-items:center; gap:6px; color:var(--dim);}
.timer-dot{
  width:6px; height:6px; border-radius:50%; background:var(--accent);
  animation:tick 1s ease-in-out infinite;
}
@keyframes tick{0%,100%{opacity:.35; transform:scale(.8);} 50%{opacity:1; transform:scale(1.15);}}
#q-score{position:relative;}
.pts-pop{
  position:absolute; left:50%; top:-4px; transform:translateX(-50%);
  font-family:var(--font-mono); font-weight:700; font-size:1.05em;
  pointer-events:none; animation:ptsPop 1.1s cubic-bezier(.2,.8,.3,1) forwards;
}
.pts-pop.up{color:var(--teal);}
.pts-pop.down{color:var(--coral);}
@keyframes ptsPop{
  0%{opacity:0; transform:translate(-50%,4px) scale(.8);}
  25%{opacity:1; transform:translate(-50%,-10px) scale(1.15);}
  100%{opacity:0; transform:translate(-50%,-30px) scale(.95);}
}
.quiz-rules{
  color:var(--dim); font-size:.74em; font-family:var(--font-mono);
  margin:16px 0 0; text-align:center; line-height:1.9;
}
.quiz-rules b{color:var(--accent);}
.quiz-rules span{display:block; opacity:.7; margin-top:2px;}
.speed-bonus{color:var(--teal); font-family:var(--font-mono); font-size:.85em; margin:4px 0 8px;}
.penalty-note{color:var(--coral); font-family:var(--font-mono); font-size:.78em; margin:0 0 10px;}
.save-hint{color:var(--dim); font-size:.78em; margin:14px 0 0;}
.save-hint a{color:var(--accent);}

/* ---------- лучшие прохождения ---------- */
.top-board{
  background:var(--void); border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; margin:18px 0; text-align:left;
}
.tb-title{
  font-family:var(--font-mono); font-size:.66em; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); margin-bottom:10px;
}
.tb-row{
  display:flex; align-items:center; gap:12px; padding:7px 0;
  border-bottom:1px solid rgba(35,36,63,.6); font-size:.9em;
}
.tb-row:last-child{border-bottom:none;}
.tb-row.is-new{
  background:var(--accent-dim); border-radius:8px; padding-left:8px; padding-right:8px;
  animation:newRun .8s ease;
}
@keyframes newRun{from{transform:scale(.96); opacity:.4;} to{transform:none; opacity:1;}}
.tb-rank{font-size:1.1em; color:var(--accent); flex-shrink:0;}
.tb-score{font-family:var(--font-display); color:var(--star); min-width:52px;}
.tb-meta{font-family:var(--font-mono); font-size:.8em; color:var(--dim); margin-left:auto;}
.lv-top{margin:10px 0; padding:8px 0; border-top:1px solid var(--line);}
.lv-top-row{display:flex; align-items:center; gap:8px; font-size:.78em; padding:2px 0;}
.lv-rank{color:var(--lv-c);}
.lv-top-score{font-family:var(--font-mono); color:var(--star);}
.lv-top-meta{font-family:var(--font-mono); font-size:.85em; color:var(--dim); margin-left:auto;}

/* ---------- ДНЕВНИК ---------- */
.diary-cards{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:14px;}
.diary-card{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:12px 20px; min-width:110px;
}
.diary-card b{display:block; font-family:var(--font-display); font-size:1.35em; color:var(--accent);}
.diary-card span{
  font-family:var(--font-mono); font-size:.62em; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim);
}
.week-bar{
  position:relative; height:26px; background:var(--panel); border:1px solid var(--line);
  border-radius:99px; overflow:hidden; max-width:520px; margin:0 auto 18px;
}
.week-bar-fill{
  position:absolute; inset:0 auto 0 0; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .7s cubic-bezier(.2,.8,.2,1); opacity:.35;
}
.week-bar-label{
  position:relative; z-index:1; display:block; line-height:26px;
  font-family:var(--font-mono); font-size:.68em; color:var(--star);
}
.plan-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line);}
.plan-label{font-family:var(--font-mono); font-size:.68em; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim);}

.sched-tick{
  flex-shrink:0; width:22px; height:22px; border-radius:7px; cursor:pointer;
  border:1.5px solid var(--line); background:transparent; color:transparent;
  font-size:12px; line-height:1; display:grid; place-items:center; transition:.2s;
}
.sched-tick:hover{border-color:var(--accent); color:var(--accent);}
.sched-tick.on{background:var(--teal); border-color:var(--teal); color:#041210;}
.sched-item.done .sched-body b{text-decoration:line-through; opacity:.55;}
.sched-item.done .sched-time{opacity:.5;}
.sched-day.all-done{border-color:rgba(41,217,194,.4);}
.sched-day-head em.ok{color:var(--teal);}
.sched-note{
  display:block; font-size:.75em; color:var(--dim); font-style:italic; margin-top:3px;
  padding-left:8px; border-left:2px solid var(--line);
}
.sched-go{
  display:inline-block; margin-top:5px; background:none; border:none; cursor:pointer;
  color:var(--accent); font-family:var(--font-mono); font-size:.7em; padding:0;
  text-decoration:underline; text-underline-offset:2px;
}
.next-lesson.soon{border-color:var(--coral); box-shadow:0 0 26px rgba(255,107,122,.25);}
.next-lesson.all-done{border-color:var(--teal); box-shadow:0 0 26px rgba(41,217,194,.2);}
.nl-done{margin-top:10px; font-size:.7em; padding:9px 18px;}

.sched-history{max-width:560px; margin:22px auto 0; text-align:left;}
.hist-title{
  font-family:var(--font-mono); font-size:.66em; letter-spacing:.12em;
  text-transform:uppercase; color:var(--dim); margin-bottom:10px;
}
.hist-row{
  display:flex; align-items:center; gap:12px; padding:7px 0;
  border-bottom:1px solid rgba(35,36,63,.6); font-size:.87em;
}
.hist-row:last-of-type{border-bottom:none;}
.hist-date{font-family:var(--font-mono); font-size:.85em; color:var(--accent); min-width:64px;}
.hist-name{color:var(--star); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.hist-mins{font-family:var(--font-mono); font-size:.85em; color:var(--dim);}
.hist-empty{color:var(--dim); font-size:.87em; line-height:1.6;}
.hist-clear{margin-top:14px; font-size:.7em; padding:9px 16px;}

/* ==========================================================================
   НЕБО РАЗДЕЛА — вид с орбиты «своей» планеты
   Один общий слой, которому JS подменяет класс. Внутри — край планеты
   с реальной текстурой, атмосферный ободок и погодные слои.
   ========================================================================== */
.planet-sky{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  contain:strict;
  /* Небо видно всегда: раскрытие даёт собственная анимация края планеты.
     Раньше видимость висела на классе .on с секундным фейдом — раздел
     успевал открыться раньше, чем появлялась планета. */
}
.planet-sky > i{ position:absolute; display:block; }

/* Край планеты. Размер в vw — чтобы кривизна читалась на любой ширине,
   а положение от vh — чтобы на экране всегда оставалась предсказуемая долька. */
.planet-sky .limb,
.planet-sky .rim,
.planet-sky .weather{
  --limb:132vw;
  --show:36vh;          /* сколько планеты остаётся на экране */
  left:50%; width:var(--limb); margin-left:calc(var(--limb) / -2);
  bottom:0; height:var(--show);
  /* Эллиптический верх даёт кривизну горизонта, но элемент остаётся низким.
     Раньше это был круг 172vw×172vw — площадь была в семь раз больше,
     и браузер каждый кадр возил этот пласт. */
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
}
.planet-sky .limb{
  overflow:hidden;
  animation:limbRise .8s cubic-bezier(.22,.9,.28,1) both;
}
/* Поверхность едет отдельным слоем двойной ширины и двигается ТРАНСФОРМОМ.
   Анимация background-position заставляла перерисовывать всю дугу каждый
   кадр (падало до 19 FPS); трансформ отдаётся композитору бесплатно. */
.planet-sky .limb::before{
  content:''; position:absolute; top:0; bottom:0; left:0; width:200%;
  background-image:var(--limbimg);
  background-repeat:repeat-x;
  /* Одна копия ровно в ширину дуги: картинка 4096px УМЕНЬШАЕТСЯ, а не
     растягивается, поэтому выглядит резче. Сдвиг на 50% = ровно один
     оборот, стык не виден. */
  background-size:50% 100%;
  animation:limbSpin var(--lspin,240s) linear infinite;
}
@keyframes limbSpin{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
@keyframes limbRise{
  from{ transform:translateY(9vh) scale(1.035); opacity:0; }
  60% { opacity:1; }
  to  { transform:none; opacity:1; }
}


/* тонкая светящаяся дуга там, где атмосфера ловит солнце */
.planet-sky .rim{
  /* Только тонкая светящаяся кромка. Раньше здесь была тень с размытием
     70px на дуге шириной в экран с лишним — она одна съедала заметную часть
     кадра. Свечение атмосферы теперь запечено в саму полосу горизонта. */
  background:transparent;
  border-top:2px solid var(--rimline, rgba(190,230,255,.9));
  box-shadow:0 -1px 10px -2px var(--rimc, rgba(120,200,255,.5));
  animation:rimBreath 9s ease-in-out infinite;
}
@keyframes rimBreath{ 0%,100%{opacity:.75;} 50%{opacity:1;} }

/* облака и бури, ползущие над поверхностью */
/* Отдельный слой облаков убран: он стоил половину частоты кадров,
   а облака теперь запечены прямо в полосу горизонта. */
.planet-sky .weather{ display:none;
  overflow:hidden; background-size:auto 130%; background-position:0 0;
  animation:weatherDrift var(--wpan,90s) linear infinite;
  opacity:.45; will-change:transform; contain:paint;
}
@keyframes weatherDrift{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-8%,0,0); }
}

@media (max-width:700px){
  .planet-sky .limb, .planet-sky .rim, .planet-sky .weather{ --limb:230vw; --show:26vh; }
}
@media (prefers-reduced-motion: reduce){ .planet-sky i{ animation:none !important; } }

/* ---------- МЕРКУРИЙ: выжженный камень у Солнца ---------- */
.sky-mercury{ background:linear-gradient(180deg, #0a0812 0%, #140f22 55%, #1b1430 100%); }
.sky-mercury .limb{
  --lspin:320s;
  --limbimg:url("/static/img/limb-mercury.jpg");
}


.sky-mercury .rim{ --rimline:rgba(228,222,245,.75); --rimc:rgba(198,190,225,.28); --rimblur:60px; }
.sky-mercury .glare{
  left:-20%; right:-20%; bottom:22vh; height:60vh;
  background:radial-gradient(ellipse at 50% 100%, rgba(255,206,140,.30), transparent 62%);
  animation:merGlare 7s ease-in-out infinite;
}
@keyframes merGlare{ 0%,100%{opacity:.5; transform:scaleY(1);} 50%{opacity:1; transform:scaleY(1.16);} }
.sky-mercury .scan{
  left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(215,205,255,.6), transparent);
  animation:merScan 11s linear infinite;
}
@keyframes merScan{ from{top:-2%;} to{top:102%;} }

/* ---------- ВЕНЕРА: плотная серная облачность ---------- */
.sky-venus{ background:linear-gradient(180deg, #140c04 0%, #241605 55%, #2e1c06 100%); }
.sky-venus .limb{
  --lspin:420s;
  --limbimg:url("/static/img/limb-venus.jpg");
}


.sky-venus .rim{ --rimline:rgba(255,238,190,.95); --rimc:rgba(255,208,124,.42); --rimblur:110px; --rimspread:16px; }
.sky-venus .weather{
  --wpan:70s;
  background-image:var(--tex-venus); opacity:.28; filter:none;
}

/* ---------- ЗЕМЛЯ: океаны, материки, сияние ---------- */
.sky-earth{ background:linear-gradient(180deg, #030a18 0%, #061428 55%, #08203c 100%); }
.sky-earth .limb{
  --lspin:240s;
  --limbimg:url("/static/img/limb-earth.jpg");
}


.sky-earth .rim{ --rimline:rgba(186,236,255,1); --rimc:rgba(96,186,242,.5); --rimblur:70px; --rimspread:18px; }
.sky-earth .weather{ --wpan:80s; background-image:var(--tex-earth-clouds); opacity:.4; }
.sky-earth .aurora, .sky-earth .aurora2{
  left:-15%; right:-15%; top:-10%; height:58%;
  background:linear-gradient(180deg, rgba(111,224,196,.30), rgba(92,184,234,.14) 45%, transparent 78%);
  transform-origin:50% 0;
}
.sky-earth .aurora { animation:aurora 14s ease-in-out infinite; }
.sky-earth .aurora2{ animation:aurora 21s ease-in-out infinite reverse; opacity:.6; }
@keyframes aurora{
  0%,100%{ transform:translateX(-6%) skewX(-8deg) scaleY(1); opacity:.7; }
  50%    { transform:translateX(6%)  skewX(9deg)  scaleY(1.25); opacity:1; }
}

/* ---------- МАРС: пыльная буря ---------- */
.sky-mars{ background:linear-gradient(180deg, #140502 0%, #240a04 55%, #300f06 100%); }
.sky-mars .limb{
  --lspin:260s;
  --limbimg:url("/static/img/limb-mars.jpg");
}


.sky-mars .rim{ --rimline:rgba(255,206,175,.9); --rimc:rgba(255,140,96,.44); --rimblur:70px; --rimspread:16px; }
.sky-mars .weather{ --wpan:60s; background-image:var(--tex-mars); opacity:.22; }
.sky-mars .dust{
  inset:-10%;
  background:
    radial-gradient(ellipse 24% 10% at 18% 30%, rgba(255,165,125,.26), transparent 70%),
    radial-gradient(ellipse 28% 12% at 62% 52%, rgba(230,125,85,.24), transparent 70%),
    radial-gradient(ellipse 20% 9% at 86% 22%, rgba(255,185,145,.2), transparent 70%);
  animation:marsDust 26s linear infinite alternate;
}
@keyframes marsDust{ from{transform:translate(-7%,0);} to{transform:translate(7%,-3%);} }

/* ---------- ЮПИТЕР: полосы и Большое красное пятно ---------- */
.sky-jupiter{ background:linear-gradient(180deg, #120a03 0%, #1f1206 55%, #2a1908 100%); }
.sky-jupiter .limb{
  --lspin:150s;
  --limbimg:url("/static/img/limb-jupiter.jpg");
}


.sky-jupiter .rim{ --rimline:rgba(255,240,214,.9); --rimc:rgba(255,214,168,.38); --rimblur:70px; --rimspread:18px; }
.sky-jupiter .spot{
  left:58%; bottom:18vh; width:30vw; height:13vw; border-radius:50%;
  background:radial-gradient(ellipse, rgba(216,96,60,.4), transparent 70%);
  animation:jupSpot 34s ease-in-out infinite;
}
@keyframes jupSpot{ 0%,100%{transform:translateX(0) scale(1);} 50%{transform:translateX(-22vw) scale(1.12);} }

/* ---------- САТУРН: кольца через всё небо ---------- */
.sky-saturn{ background:linear-gradient(180deg, #100d04 0%, #1c1707 55%, #241d09 100%); }
.sky-saturn .limb{
  --lspin:190s;
  --limbimg:url("/static/img/limb-saturn.jpg");
}


.sky-saturn .rim{ --rimline:rgba(255,246,220,.85); --rimc:rgba(246,228,180,.34); --rimblur:70px; }
.sky-saturn .ringband{
  left:-40%; right:-40%; top:26vh; height:2px;
  background:linear-gradient(90deg, transparent, rgba(244,228,182,.5), rgba(255,242,206,.7), rgba(244,228,182,.5), transparent);
  transform:rotate(-7deg); box-shadow:0 0 18px rgba(244,228,182,.35);
  animation:ringGlow 12s ease-in-out infinite;
}
.sky-saturn .ringband.b2{ top:32vh; height:5px; opacity:.75; animation-delay:-3s; }
.sky-saturn .ringband.b3{ top:39vh; height:3px; opacity:.5;  animation-delay:-6s; }
@keyframes ringGlow{ 0%,100%{opacity:.55;} 50%{opacity:1;} }

/* ---------- УРАН: кольца стоят почти вертикально ---------- */
.sky-uranus{ background:linear-gradient(180deg, #02121a 0%, #05202c 55%, #072a38 100%); }
.sky-uranus .limb{
  --lspin:300s;
  --limbimg:url("/static/img/limb-uranus.jpg");
}


.sky-uranus .rim{ --rimline:rgba(214,250,255,.95); --rimc:rgba(160,232,246,.48); --rimblur:70px; --rimspread:18px; }
.sky-uranus .haze{
  inset:-10%;
  background:
    radial-gradient(ellipse 42% 24% at 26% 32%, rgba(190,242,248,.22), transparent 72%),
    radial-gradient(ellipse 36% 20% at 74% 60%, rgba(130,212,226,.2), transparent 72%);
  animation:uraHaze 32s ease-in-out infinite alternate;
}
@keyframes uraHaze{ from{transform:translate(-3%,0) scale(1);} to{transform:translate(3%,2%) scale(1.06);} }
/* Уран лежит на боку — его кольца идут поперёк неба, а не вдоль */
.sky-uranus .vring{
  left:50%; top:50%; width:34vw; height:150vh; margin-left:-17vw; margin-top:-75vh;
  border-radius:50%; border:1.5px solid rgba(190,240,248,.30);
  transform:rotate(11deg);
  box-shadow:0 0 18px rgba(160,232,246,.18);
  animation:vringGlow 14s ease-in-out infinite;
  will-change:opacity;
}
.sky-uranus .vring.r2{ width:46vw; margin-left:-23vw; opacity:.5; animation-delay:-4s; }
.sky-uranus .vring.r3{ width:24vw; margin-left:-12vw; opacity:.7; animation-delay:-8s; }
@keyframes vringGlow{ 0%,100%{opacity:.45;} 50%{opacity:.9;} }

/* ==========================================================================
   МЕТЕОР И КОМЕТА — вход и админка рядом с солнечной системой
   Тело влетает слева по диагонали с длинным сужающимся хвостом,
   притормаживает у подписи и уходит вправо. Как настоящий метеор.
   ========================================================================== */
.space-actions{
  position:fixed; right:22px; top:170px; z-index:520;
  display:flex; flex-direction:column; gap:16px; align-items:flex-end;
}
.flyby{
  position:relative; display:inline-flex; align-items:center; justify-content:flex-end;
  width:186px; height:38px; padding:0 16px 0 0; border-radius:99px; cursor:pointer;
  background:linear-gradient(90deg, rgba(8,8,20,0) 0%, rgba(10,10,24,.55) 45%, rgba(12,12,28,.8) 100%);
  border:1px solid transparent; border-right-color:var(--line);
  color:var(--dim); text-decoration:none; overflow:hidden;
  font-family:var(--font-mono); font-size:.66em; letter-spacing:.1em; text-transform:uppercase;
  transition:color .25s, background .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.flyby:hover{ transform:translateX(-6px); background:linear-gradient(90deg, rgba(8,8,20,0), rgba(14,14,32,.9)); }
.flyby-label{ position:relative; z-index:3; }

/* голова — маленькая, яркая, с ядром */
.flyby .rock, .flyby .ice{
  position:absolute; left:0; top:50%; z-index:2;
  width:8px; height:8px; border-radius:50%; margin-top:-4px;
  animation:streakBody var(--fly,6.5s) cubic-bezier(.25,.55,.4,1) infinite;
}
/* хвост — длинная сужающаяся полоса, идёт СЗАДИ головы */
.flyby .streak{
  position:absolute; left:0; top:50%; z-index:1;
  width:120px; height:3px; margin-top:-1.5px; border-radius:3px;
  transform-origin:right center; pointer-events:none;
  animation:streakTail var(--fly,6.5s) cubic-bezier(.25,.55,.4,1) infinite;
}
@keyframes streakBody{
  0%   { transform:translate(-34px,16px) scale(.35); opacity:0; }
  10%  { opacity:1; }
  44%  { transform:translate(118px,0)    scale(1);   opacity:1; }
  60%  { transform:translate(132px,0)    scale(1);   opacity:1; }
  90%  { opacity:.8; }
  100% { transform:translate(250px,-14px) scale(.35); opacity:0; }
}
@keyframes streakTail{
  0%   { transform:translate(-34px,16px) scaleX(.1)  rotate(-9deg); opacity:0; }
  10%  { opacity:.9; }
  44%  { transform:translate(118px,0)    scaleX(1)   rotate(0deg);  opacity:.9; }
  60%  { transform:translate(132px,0)    scaleX(.85) rotate(0deg);  opacity:.8; }
  90%  { opacity:.35; }
  100% { transform:translate(250px,-14px) scaleX(.25) rotate(6deg); opacity:0; }
}
.flyby:hover .rock, .flyby:hover .ice, .flyby:hover .streak{ animation-play-state:paused; }

/* метеор: раскалённое ядро, тёплый след, вспышки при входе в атмосферу */
.flyby.meteor{ --fly:6.5s; color:#ffcf9e; border-right-color:rgba(255,170,110,.45); }
.flyby.meteor:hover{ color:#fff0dc; border-right-color:#ffb06a; }
.flyby.meteor .rock{
  background:radial-gradient(circle at 35% 32%, #fffbe8, #ffc25e 45%, #e0590d 100%);
  box-shadow:0 0 10px rgba(255,150,60,1), 0 0 22px rgba(255,110,20,.6);
  animation:streakBody var(--fly) cubic-bezier(.25,.55,.4,1) infinite,
            emberFlicker .5s ease-in-out infinite;
}
@keyframes emberFlicker{ 0%,100%{filter:brightness(1);} 50%{filter:brightness(1.4);} }
.flyby.meteor .streak{
  background:linear-gradient(90deg, transparent 0%, rgba(255,90,20,.18) 25%,
    rgba(255,140,50,.55) 60%, rgba(255,210,140,.95) 100%);
  box-shadow:0 0 12px rgba(255,130,40,.45);
}

/* комета: ледяное ядро, кома и два хвоста */
.flyby.comet{ --fly:9s; color:#a8dcff; border-right-color:rgba(140,220,255,.45); }
.flyby.comet:hover{ color:#e2f4ff; border-right-color:#7cc9ff; }
.flyby.comet .ice{
  background:radial-gradient(circle at 35% 32%, #ffffff, #cdefff 45%, #3f9ed6 100%);
  box-shadow:0 0 11px rgba(170,225,255,1), 0 0 26px rgba(90,170,255,.55);
}
.flyby.comet .ice::after{     /* кома — светящееся облако вокруг ядра */
  content:''; position:absolute; inset:-6px; border-radius:50%;
  background:radial-gradient(circle, rgba(180,230,255,.4), transparent 70%);
  animation:comaPulse 2.4s ease-in-out infinite;
}
@keyframes comaPulse{ 0%,100%{transform:scale(1); opacity:.7;} 50%{transform:scale(1.25); opacity:1;} }
.flyby.comet .streak{
  background:linear-gradient(90deg, transparent 0%, rgba(70,150,255,.16) 25%,
    rgba(120,200,255,.5) 60%, rgba(215,245,255,.95) 100%);
  box-shadow:0 0 12px rgba(120,200,255,.4);
}
.flyby.comet .streak::after{  /* второй, пылевой хвост — чуть под углом */
  content:''; position:absolute; right:0; top:4px; width:78%; height:1.5px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(200,235,255,.55));
  transform:rotate(3.5deg); transform-origin:right center;
}

/* вошедший пользователь — метеор становится «своим» */
.flyby.signed{ color:var(--teal); border-right-color:rgba(41,217,194,.6); }
.flyby.signed .rock{
  background:radial-gradient(circle at 35% 32%, #eafffb, #29d9c2 45%, #0d7d70 100%);
  box-shadow:0 0 11px rgba(41,217,194,1), 0 0 24px rgba(41,217,194,.5);
}
.flyby.signed .streak{
  background:linear-gradient(90deg, transparent 0%, rgba(41,217,194,.16) 25%,
    rgba(41,217,194,.5) 60%, rgba(160,255,240,.95) 100%);
}

@media (prefers-reduced-motion: reduce){
  .flyby .rock, .flyby .ice, .flyby .streak{ animation:none; }
  .flyby .streak{ display:none; }
  .flyby .rock, .flyby .ice{ left:auto; right:calc(100% - 26px); transform:none; opacity:1; }
}
@media (max-width:900px){
  .space-actions{ top:auto; bottom:14px; right:12px; flex-direction:row; gap:10px; }
  .flyby{ width:120px; height:32px; font-size:.58em; }
  .flyby .streak{ width:70px; }
}

/* поиск идёт по всем категориям — показываем, откуда найденное */
.dict-found{
  font-family:var(--font-mono); font-size:.7em; letter-spacing:.08em;
  color:var(--dim); margin:0 0 10px; text-transform:uppercase;
}
.word-cat{
  float:right; font-family:var(--font-mono); font-size:.62em; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); border:1px solid var(--line);
  padding:1px 7px; border-radius:99px;
}

/* ==========================================================================
   МИССИЯ — механики в духе Duolingo
   ========================================================================== */
/* дневная цель */
.daily-goal{
  max-width:420px; margin:0 auto 20px; padding:13px 18px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  text-align:left;
}
.daily-goal.done{ border-color:rgba(41,217,194,.5); }
.dg-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.dg-head span{ font-family:var(--font-mono); font-size:.66em; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); }
.dg-head b{ font-family:var(--font-mono); font-size:.8em; color:var(--accent); }
.dg-track{ height:6px; background:var(--line); border-radius:6px; overflow:hidden; }
.dg-fill{ height:100%; border-radius:6px; background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .6s cubic-bezier(.2,.8,.2,1); }
.daily-goal.done .dg-fill{ background:linear-gradient(90deg,var(--teal),#8affe4); }
.dg-note{ display:block; margin-top:7px; font-family:var(--font-mono); font-size:.65em; color:var(--dim); }

/* сердца */
.hearts{ display:inline-flex; gap:3px; }
.hearts .heart{ color:var(--coral); font-size:1.05em; line-height:1; transition:.3s;
  text-shadow:0 0 8px rgba(255,107,122,.5); }
.hearts .heart.lost{ color:var(--line); text-shadow:none; transform:scale(.85); opacity:.5; }
@keyframes heartShake{ 10%,90%{transform:translateX(-2px);} 30%,70%{transform:translateX(4px);}
  50%{transform:translateX(-5px);} }
.hearts.shake{ animation:heartShake .5s; }

/* обратный отсчёт на вопрос */
.q-clock{ display:flex; align-items:center; gap:10px; margin:-12px 0 18px; }
.q-clock-track{ flex:1; height:3px; background:var(--line); border-radius:3px; overflow:hidden; }
.q-clock-fill{ height:100%; width:100%; border-radius:3px; background:var(--accent);
  transition:width 1s linear, background .3s; }
.q-clock-fill.low{ background:var(--coral); animation:clockPulse .8s ease-in-out infinite; }
@keyframes clockPulse{ 0%,100%{opacity:1;} 50%{opacity:.45;} }
.q-clock-num{ font-family:var(--font-mono); font-size:.72em; color:var(--dim); min-width:20px; text-align:right; }

/* множитель за серию */
.streak-badge .mult{ color:var(--accent-2); font-family:var(--font-mono);
  text-shadow:0 0 10px var(--accent-2); }

/* режим работы над ошибками */
.quiz-box.review-mode{ border-color:rgba(255,207,107,.5); box-shadow:0 0 26px rgba(255,207,107,.12); }

/* карточки уровней: замок и отметка о прохождении */
.lv-top-row-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.level-card .lv-badge{ margin-bottom:0; }
.lv-check{ font-family:var(--font-mono); font-size:.62em; letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal); }
.lv-lock{ margin-left:auto; font-size:.9em; opacity:.75; }
.level-card.locked{ opacity:.55; cursor:not-allowed; }
.level-card.locked:hover{ transform:none; border-color:var(--line); box-shadow:none; }
.level-card.cleared{ border-color:rgba(41,217,194,.35); }
.lv-locked-note{ color:var(--dim); font-size:.78em; font-style:italic; }

/* итоги забега */
.bonus-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0 0 12px; }
.bonus{ font-family:var(--font-mono); font-size:.72em; color:var(--accent-2);
  border:1px solid var(--line); padding:4px 11px; border-radius:99px; }
.result-card.failed .result-score{ font-size:2.6em; text-shadow:none; }
.result-card.failed{ border-color:rgba(255,107,122,.45); }

/* Подпись на Солнце: почти сливается с плазмой, но при взгляде вблизи
   читается. На наведение проступает чуть ярче. */
.sun-sig{
  position:absolute; left:50%; top:56%; transform:translate(-50%,-50%) rotate(-7deg);
  font-family:var(--font-display); font-size:clamp(6px, 1.5vw, 11px);
  letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
  color:rgba(120,52,0,.42); mix-blend-mode:multiply;
  text-shadow:0 1px 0 rgba(255,235,180,.30);
  pointer-events:none; user-select:none; z-index:3;
  transition:color .4s, text-shadow .4s;
}
.orbit-hero:hover .sun-sig{
  color:rgba(96,38,0,.62);
  text-shadow:0 1px 0 rgba(255,245,205,.5);
}

/* ---------- ПЛАВНЫЕ ПЕРЕХОДЫ МЕЖДУ РАЗДЕЛАМИ ----------
   Раньше раздел просто «подпрыгивал». Теперь уходящий растворяется,
   приходящий выплывает — и оба в одном ритме с перелётом. */
.section{ transition:opacity .45s ease, transform .45s ease; }
.section.leaving{
  display:block !important; position:absolute; left:0; right:0; top:0;
  opacity:0; transform:translateY(-14px) scale(.995);
  pointer-events:none; z-index:0;
}
main{ position:relative; }

.section.active{
  animation:sectionIn .85s cubic-bezier(.16,.9,.24,1) both;
}
@keyframes sectionIn{
  from{ opacity:0; transform:translateY(26px) scale(.985); filter:blur(3px); }
  55% { filter:blur(0); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
/* заголовки въезжают лесенкой */
.section.active .eyebrow{ animation:slideDown .7s cubic-bezier(.16,.9,.24,1) .06s backwards; }
.section.active > h2{     animation:slideDown .7s cubic-bezier(.16,.9,.24,1) .14s backwards; }
.section.active > .lede{  animation:slideDown .7s cubic-bezier(.16,.9,.24,1) .22s backwards; }
@keyframes slideDown{
  from{ opacity:0; transform:translateY(-14px); }
  to  { opacity:1; transform:none; }
}
.section-atmo{ animation:atmoGrow 1.1s cubic-bezier(.16,.9,.24,1) both; }
@keyframes atmoGrow{ from{ width:0; opacity:0; } 60%{ opacity:.9; } to{ opacity:.8; } }

/* сам перелёт тоже мягче */
#warp{ transition:opacity .5s ease; }
.warp-orb{ animation:warpArrive 1.5s cubic-bezier(.42,0,.24,1) forwards; }

/* ==========================================================================
   ЛЕНТА
   ========================================================================== */
.feed-btn{ border-color:rgba(41,217,194,.45); color:var(--teal); }
.feed-form{ max-width:640px; margin:0 auto 26px; }
.feed-count{ font-family:var(--font-mono); font-size:.7em; color:var(--dim); }

.feed-draft{ display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.draft-img{ position:relative; width:84px; height:84px; border-radius:10px; overflow:hidden;
  border:1px solid var(--line); }
.draft-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.draft-img button{
  position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%;
  background:rgba(5,5,13,.85); border:1px solid var(--line); color:var(--star);
  cursor:pointer; font-size:13px; line-height:1; display:grid; place-items:center;
}
.draft-img button:hover{ border-color:var(--coral); color:var(--coral); }

.feed-list{ max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.post{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; text-align:left;
  opacity:0; animation:cardIn .5s cubic-bezier(.16,.9,.24,1) forwards; animation-delay:var(--sd,0ms);
}
.post-head{ display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.post-ava{
  width:34px; height:34px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--font-display); font-size:.85em; color:#04120f;
  background:linear-gradient(135deg,var(--teal),var(--violet));
}
.post-who b{ display:block; font-size:.92em; color:var(--star); }
.post-who time{ font-family:var(--font-mono); font-size:.68em; color:var(--dim); }
.post-del{
  margin-left:auto; background:none; border:none; color:var(--dim); cursor:pointer;
  font-size:1.3em; line-height:1; padding:0 4px; transition:.2s;
}
.post-del:hover{ color:var(--coral); }
.post-text{ color:var(--star); font-size:.94em; line-height:1.6; white-space:pre-wrap;
  word-break:break-word; margin-bottom:12px; }

/* сетка подстраивается под число картинок */
.post-imgs{ display:grid; gap:5px; border-radius:11px; overflow:hidden; }
.post-imgs img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in;
  transition:transform .35s cubic-bezier(.16,.9,.24,1); }
.post-imgs img:hover{ transform:scale(1.03); }
.post-imgs.count-1{ grid-template-columns:1fr; max-height:440px; }
.post-imgs.count-2{ grid-template-columns:1fr 1fr; aspect-ratio:2/1; }
.post-imgs.count-3{ grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; aspect-ratio:3/2; }
.post-imgs.count-3 img:first-child{ grid-row:span 2; }
.post-imgs.count-4{ grid-template-columns:1fr 1fr; aspect-ratio:1/1; }
.post-imgs.count-5{ grid-template-columns:repeat(6,1fr); aspect-ratio:3/2; }
.post-imgs.count-5 img:nth-child(-n+2){ grid-column:span 3; }
.post-imgs.count-5 img:nth-child(n+3){ grid-column:span 2; }
.post-imgs.count-6{ grid-template-columns:repeat(3,1fr); aspect-ratio:3/2; }

.post-foot{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.post-like{
  display:inline-flex; align-items:center; gap:7px; background:none;
  border:1px solid var(--line); color:var(--dim); padding:6px 14px; border-radius:99px;
  cursor:pointer; font-family:var(--font-mono); font-size:.74em; transition:.2s;
}
.post-like:hover{ border-color:var(--coral); color:var(--coral); }
.post-like.on{ border-color:var(--coral); color:var(--coral); background:rgba(255,107,122,.12); }
.post-like .lk{ font-size:1.05em; transition:transform .25s; }
.post-like.on .lk{ transform:scale(1.18); }

.lightbox{
  display:none; position:fixed; inset:0; z-index:1400; background:rgba(2,2,8,.93);
  align-items:center; justify-content:center; padding:24px; cursor:zoom-out;
}
.lightbox.on{ display:flex; animation:fadeIn .25s ease; }
.lightbox img{ max-width:100%; max-height:100%; border-radius:10px;
  box-shadow:0 24px 70px rgba(0,0,0,.7); }

/* ---------- НЕПТУН: тема и поверхность ---------- */
[data-planet="neptune"]{ --accent:#6a9dff; --accent-2:#bcd6ff; --accent-dim:rgba(106,157,255,.14); }
.p-neptune .surf{ --spin:17s; background-image:var(--tex-neptune); }
.p-neptune{ --rim:rgba(150,195,255,.75); }
.sky-neptune{ background:linear-gradient(180deg, #020a1e 0%, #04122e 55%, #06183c 100%); }
.sky-neptune .limb{
  --lspin:280s;
  --limbimg:url("/static/img/limb-neptune.jpg");
}
.sky-neptune .rim{ --rimline:rgba(180,215,255,.95); --rimc:rgba(106,157,255,.5); --rimblur:70px; --rimspread:16px; }
.sky-neptune .haze{
  inset:-10%;
  background:
    radial-gradient(ellipse 40% 22% at 30% 34%, rgba(150,195,255,.22), transparent 72%),
    radial-gradient(ellipse 34% 18% at 72% 60%, rgba(90,140,230,.20), transparent 72%);
  animation:uraHaze 34s ease-in-out infinite alternate;
}

/* ---------- ТАБЛИЦА ГЛАГОЛОВ ---------- */
.verb-table{ max-width:820px; margin:0 auto; text-align:left; }
.verb-head, .verb-row{
  display:grid; grid-template-columns:1fr 1fr 1.15fr 1.3fr; gap:12px;
  padding:10px 16px; align-items:baseline;
}
.verb-head{
  font-family:var(--font-mono); font-size:.64em; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); border-bottom:1px solid var(--line); position:sticky; top:0;
  background:var(--void); z-index:2;
}
.verb-row{
  border-bottom:1px solid rgba(35,36,63,.55); font-size:.92em;
  opacity:0; animation:cardIn .4s ease forwards; animation-delay:var(--sd,0ms);
  transition:background .2s;
}
.verb-row:hover{ background:rgba(106,157,255,.06); }
.verb-row .v1{ color:var(--star); font-weight:500; }
.verb-row .v2{ color:var(--accent); font-family:var(--font-mono); font-size:.94em; }
.verb-row .v3{ color:var(--accent-2); font-family:var(--font-mono); font-size:.94em; }
.verb-row .vt{ color:var(--dim); font-size:.92em; }
.vg{ font-style:normal; font-family:var(--font-mono); font-size:.78em; opacity:.7; }
#verb-groups .chip em{ font-style:normal; opacity:.6; margin-left:5px; }
.vq-tr{ display:block; font-size:.6em; color:var(--dim); font-family:var(--font-body);
  font-weight:400; margin-top:5px; }
@media (max-width:640px){
  .verb-head{ display:none; }
  .verb-row{ grid-template-columns:1fr 1fr; gap:5px 12px; padding:11px 14px; }
  .verb-row .vt{ grid-column:1/-1; }
}

/* ---------- ЖАЛОБА НА ПОСТ ---------- */
.post-report{
  margin-left:auto; background:none; border:1px solid var(--line); color:var(--dim);
  width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:.92em;
  display:grid; place-items:center; transition:.2s;
}
.post-report:hover{ border-color:var(--coral); color:var(--coral); }
.post-report.sent{ border-color:rgba(255,207,107,.6); color:var(--amber, #ffcf6b); cursor:default; }

/* ==========================================================================
   ПЕРСОНАЛЬНЫЙ ПЛАН И ДИАГНОСТИКА
   ========================================================================== */
.study-plan{ max-width:640px; margin:0 auto 22px; }
.plan-empty{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--accent); border-radius:var(--radius);
  padding:22px; text-align:center; box-shadow:0 0 28px var(--accent-dim);
}
.plan-empty b{ display:block; font-family:var(--font-display); font-size:1.05em;
  color:var(--star); margin-bottom:8px; }
.plan-empty p{ color:var(--dim); font-size:.9em; margin:0 0 16px; line-height:1.6; }

.plan-head{ display:flex; align-items:center; justify-content:space-between;
  gap:14px; margin-bottom:12px; flex-wrap:wrap; }
.plan-head b{ display:block; font-family:var(--font-display); color:var(--star); font-size:1em; }
.plan-head span{ font-family:var(--font-mono); font-size:.72em; color:var(--dim); }

.plan-bars{ display:flex; height:12px; border-radius:99px; overflow:hidden; gap:2px; }
.pb{ transition:flex .7s cubic-bezier(.2,.8,.2,1); }
.pb.known{ background:var(--teal); }
.pb.shaky{ background:#ffcf6b; }
.pb.weak{  background:var(--coral); }
.pb.none{  background:var(--line); }
.plan-legend{ display:flex; flex-wrap:wrap; gap:14px; margin:10px 0 16px;
  font-family:var(--font-mono); font-size:.68em; color:var(--dim); }
.plan-legend i{ display:inline-block; width:9px; height:9px; border-radius:2px;
  margin-right:6px; vertical-align:middle; }
.plan-legend i.known{ background:var(--teal); }
.plan-legend i.shaky{ background:#ffcf6b; }
.plan-legend i.weak{  background:var(--coral); }
.plan-legend i.none{  background:var(--line); }

.plan-next{ display:flex; flex-direction:column; gap:7px; margin-bottom:14px; }
.plan-next-title{ font-family:var(--font-mono); font-size:.66em; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin-bottom:3px; }
.plan-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--panel); border:1px solid var(--line); border-left-width:3px;
  border-radius:10px; padding:11px 15px; cursor:pointer; transition:.2s;
  color:var(--star); font-family:var(--font-body); font-size:.9em; text-align:left;
}
.plan-item:hover{ transform:translateX(3px); border-color:var(--accent); }
.plan-item.weak{  border-left-color:var(--coral); }
.plan-item.shaky{ border-left-color:#ffcf6b; }
.plan-item.none{  border-left-color:var(--line); }
.pi-tag{ font-family:var(--font-mono); font-size:.68em; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); flex-shrink:0; }
.plan-item.weak .pi-tag{ color:var(--coral); }
.plan-item.shaky .pi-tag{ color:#ffcf6b; }
.plan-go{ width:100%; }
.plan-done{ color:var(--teal); font-size:.9em; text-align:center; }

.diag-topic{ font-family:var(--font-mono); font-size:.66em; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin:0 0 8px; }
.diag-hint{ font-family:var(--font-mono); font-size:.66em; color:var(--dim); }
.diag-buckets{ display:flex; gap:14px; justify-content:center; margin:18px 0; }
.db{ background:var(--void); border:1px solid var(--line); border-radius:12px;
  padding:12px 22px; min-width:110px; }
.db b{ display:block; font-family:var(--font-display); font-size:1.5em; }
.db span{ font-family:var(--font-mono); font-size:.62em; letter-spacing:.08em;
  text-transform:uppercase; color:var(--dim); }
.db.known b{ color:var(--teal); }
.db.weak b{ color:var(--coral); }
.diag-lead{ color:var(--dim); font-size:.88em; margin:14px 0 8px; }
.diag-gaps{ text-align:left; }
.dg-cat{ background:var(--void); border-left:3px solid var(--coral); border-radius:8px;
  padding:10px 14px; margin-bottom:8px; font-size:.87em; }
.dg-cat b{ display:block; color:var(--coral); font-family:var(--font-mono);
  font-size:.78em; letter-spacing:.06em; margin-bottom:4px; }
.dg-cat span{ color:var(--dim); }

/* ---------- ИНТЕРВАЛЬНОЕ ПОВТОРЕНИЕ ---------- */
.review-card{ max-width:640px; margin:0 auto 14px; }
.review-box{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:16px 20px; text-align:left;
}
.review-box.overdue{ border-left-color:var(--coral); box-shadow:0 0 22px rgba(255,107,122,.12); }
.review-box.calm{ border-left-color:var(--teal); }
.rv-label{ display:block; font-family:var(--font-mono); font-size:.62em;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:5px; }
.review-box b{ display:block; font-family:var(--font-display); font-size:1em;
  color:var(--star); margin-bottom:5px; }
.rv-when{ display:block; font-size:.84em; color:var(--dim); line-height:1.5; }
.review-box.overdue .rv-when{ color:var(--coral); }
.rv-go{ margin-top:12px; }

/* ---------- КОММЕНТАРИИ ---------- */
.post-comment-btn{
  display:inline-flex; align-items:center; gap:7px; background:none;
  border:1px solid var(--line); color:var(--dim); padding:6px 14px; border-radius:99px;
  cursor:pointer; font-family:var(--font-mono); font-size:.74em; transition:.2s;
}
.post-comment-btn:hover{ border-color:var(--accent); color:var(--accent); }
.post-comment-btn.active{ border-color:var(--accent); color:var(--accent);
  background:var(--accent-dim); }
.post-comment-btn .ck{ font-size:.95em; }

.comments{ display:none; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.comments.on{ display:block; animation:cmIn .35s cubic-bezier(.16,.9,.24,1); }
@keyframes cmIn{ from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }

.comment{ display:flex; gap:10px; padding:9px 0; }
.comment + .comment{ border-top:1px solid rgba(35,36,63,.5); }
.cm-ava{
  width:26px; height:26px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--font-display); font-size:.7em; color:#04120f;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.cm-body{ flex:1; min-width:0; }
.cm-head{ display:flex; align-items:baseline; gap:9px; }
.cm-head b{ font-size:.85em; color:var(--star); }
.cm-head time{ font-family:var(--font-mono); font-size:.64em; color:var(--dim); }
.cm-del{
  margin-left:auto; background:none; border:none; color:var(--dim); cursor:pointer;
  font-size:1.1em; line-height:1; padding:0 3px; transition:.2s; opacity:0;
}
.comment:hover .cm-del{ opacity:1; }
.cm-del:hover{ color:var(--coral); }
.cm-text{ font-size:.88em; color:var(--star); line-height:1.55;
  white-space:pre-wrap; word-break:break-word; margin-top:2px; }
.cm-empty{ color:var(--dim); font-size:.85em; padding:4px 0 10px; }

.cm-form{ display:flex; gap:9px; margin-top:12px; }
.cm-form input{
  flex:1; background:var(--void); border:1px solid var(--line); color:var(--star);
  padding:10px 14px; border-radius:99px; font-family:var(--font-body); font-size:.88em;
  transition:.2s; min-width:0;
}
.cm-form input:focus{ border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-dim); }
.cm-send{ padding:10px 18px; font-size:.7em; flex-shrink:0; }
@media (max-width:520px){
  .cm-form{ flex-direction:column; }
  .cm-send{ width:100%; }
  .cm-del{ opacity:1; }
}