/* ============================================================
   Losiv Roman Borisovich — TOTAL PREMIUM UI (Apple-grade)
   Full redesign without changing behavior/mechanics.
   ============================================================ */

/* Premium background: floating mac windows (auth only) */
body.auth .container{ position: relative; z-index: 1; }

body.auth .bg-float{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

body.auth .bg-float .float-item{
  position: absolute;
  opacity: .16;
  filter: blur(.25px) saturate(1.05);
  transform-origin: center;
}

html[data-theme="light"] body.auth .bg-float .float-item{ opacity: .10; }

body.auth .bg-float .mac-window{
  width: 420px;
  box-shadow: none !important;
  border-color: rgba(255,255,255,.12);
}

html[data-theme="light"] body.auth .bg-float .mac-window{
  border-color: rgba(0,0,0,.10);
}

body.auth .bg-float .mac-top{ background: rgba(0,0,0,.14); }
html[data-theme="light"] body.auth .bg-float .mac-top{ background: rgba(255,255,255,.52); }

body.auth .bg-float .mac-body{ max-height: 220px; }
body.auth .bg-float .mac-code{ font-size: 11.6px; line-height: 1.5; opacity: .95; }

body.auth .bg-float .fi1{ left: -120px; top: 18%; transform: rotate(-10deg) scale(.92); animation: drift1 26s ease-in-out infinite; }
body.auth .bg-float .fi2{ right: -140px; top: 10%; transform: rotate(10deg) scale(.88); animation: drift2 30s ease-in-out infinite; }
body.auth .bg-float .fi3{ left: 12%; bottom: -160px; transform: rotate(-6deg) scale(.86); animation: drift3 34s ease-in-out infinite; }

@keyframes drift1{
  0%,100%{ transform: translate3d(0,0,0) rotate(-10deg) scale(.92); }
  50%{ transform: translate3d(80px,-38px,0) rotate(-6deg) scale(.94); }
}
@keyframes drift2{
  0%,100%{ transform: translate3d(0,0,0) rotate(10deg) scale(.88); }
  50%{ transform: translate3d(-90px,40px,0) rotate(6deg) scale(.90); }
}
@keyframes drift3{
  0%,100%{ transform: translate3d(0,0,0) rotate(-6deg) scale(.86); }
  50%{ transform: translate3d(40px,-90px,0) rotate(-2deg) scale(.88); }
}

@media (prefers-reduced-motion: reduce){
  body.auth .bg-float .float-item{ animation: none !important; }
}

/* ============================================================
   Premium ambient background — on the whole site
   (very subtle, page-specific, does not hurt readability)
   ============================================================ */
body.lux{ position: relative; isolation: isolate; }
body.lux header.site,
body.lux .container,
body.lux footer.site-footer{ position: relative; z-index: 1; }

.bg-ambient{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.bg-ambient .ambient-item{
  position: absolute;
  opacity: var(--op, .075);
  filter: blur(.35px) saturate(1.02);
  transform-origin: center;
  will-change: transform;
  animation: ambientDrift var(--dur, 36s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
html[data-theme="light"] .bg-ambient .ambient-item{ opacity: var(--opL, .052); }

.bg-ambient .mac-window{
  width: min(520px, 84vw);
  box-shadow: none !important;
  border-color: rgba(255,255,255,.10);
}
html[data-theme="light"] .bg-ambient .mac-window{ border-color: rgba(0,0,0,.10); }

.bg-ambient .mac-top{ background: rgba(0,0,0,.16); }
html[data-theme="light"] .bg-ambient .mac-top{ background: rgba(255,255,255,.58); }

.bg-ambient .mac-body{ max-height: 240px; }
.bg-ambient .mac-code{ font-size: 11.8px; line-height: 1.5; opacity: .95; }

/* HUD / schematic — Tesla + Dev OS (very subtle) */
.bg-ambient .hud-panel{
  width: min(520px, 84vw);
  border-radius: 26px;
  border: 1px solid var(--border);
  background:
    radial-gradient(900px 340px at 25% 0%, rgba(0,113,227,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  overflow:hidden;
}
html[data-theme="light"] .bg-ambient .hud-panel{
  background:
    radial-gradient(900px 340px at 25% 0%, rgba(0,113,227,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.96));
}
.hud-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(0,0,0,.08);
}
html[data-theme="light"] .hud-head{ background: rgba(255,255,255,.46); }
.hud-title{ font-weight: 860; letter-spacing:-.02em; font-size: 13px; }
.hud-pill{ font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.hud-body{ padding: 12px 14px 14px; }
.hud-svg{ width: 100%; height: 210px; display:block; opacity: .9; }
.hud-foot{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
}
.hud-chip{
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
  font-family: var(--mono);
  font-size: 11px;
}

@keyframes ambientDrift{
  0%,100%{ transform: translate3d(var(--px, 0px), var(--py, 0px), 0) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); }
  50%{ transform: translate3d(calc(var(--px, 0px) + var(--dx, 48px)), calc(var(--py, 0px) + var(--dy, -44px)), 0) rotate(var(--rot2, 0deg)) scale(calc(var(--sc, 1) + .02)); }
}

@media (prefers-reduced-motion: reduce){
  .bg-ambient .ambient-item{ animation: none !important; }
}

/* Auth form actions */
.auth-actions{
  display:flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

@media (max-width: 520px){
  .auth-actions{ flex-direction: column-reverse; align-items: stretch; }
  .auth-actions .btn{ width: 100%; justify-content: center; }
}

.btn.subtle{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.14);
}
.btn.subtle:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}
html[data-theme="light"] .btn.subtle{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.14);
}
html[data-theme="light"] .btn.subtle:hover{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.22);
}

/* ---------- Tokens ---------- */
:root{
  --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Apple-ish accent */
  --accent: #0071E3;
  --accent2:#00C2FF;
  --tesla:#E31937;
  --ok:#1FC96E;
  --danger:#FF3B30;

  /* Dark (default) */
  --bg: #05060A;
  --bg2:#070A10;
  --surface: rgba(255,255,255,.055);
  --surface2: rgba(255,255,255,.035);
  --surface3: rgba(255,255,255,.020);
  --text:#F4F6FA;
  --muted:#A8B1C2;
  --border: rgba(255,255,255,.11);
  --border2: rgba(255,255,255,.16);
  --shadow: 0 24px 70px rgba(0,0,0,.52);
  --shadow2: 0 14px 32px rgba(0,0,0,.34);
  --ring: 0 0 0 4px rgba(0,113,227,.20);

  --r: 16px;
  --r2: 22px;
  --r3: 28px;

  --container: 1280px;
  --gap: 18px;

  --ease: cubic-bezier(.2,.9,.2,1);
}

/* ---------- OS UI: pagebar (Developer OS) ---------- */
.pagebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(8,10,16,.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow2);
}
html[data-theme="light"] .pagebar{ background: rgba(255,255,255,.70); }

.pagebar-left{ display:flex; align-items:center; gap: 12px; min-width: 0; }
.pagebar-text{ display:flex; flex-direction:column; min-width: 0; }
.pagebar-title{
  font-weight: 860;
  letter-spacing: -.02em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pagebar-path{
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pagebar-right{ display:flex; align-items:center; gap: 12px; flex-wrap:wrap; justify-content:flex-end; text-align:right; }
.pagebar-hint{ color: var(--muted); font-size: 12.5px; font-weight: 650; }
.pagebar-kbd{ display:flex; gap: 6px; align-items:center; }

.os-dots{ display:flex; align-items:center; gap: 6px; padding: 6px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface3); }
.os-dots span{ width: 9px; height: 9px; border-radius: 999px; display:block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.16); }
.os-dots span:nth-child(1){ background: #FF5F57; }
.os-dots span:nth-child(2){ background: #FEBC2E; }
.os-dots span:nth-child(3){ background: #28C840; }

.kbd{
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--muted);
}

@media (max-width: 720px){
  .pagebar{ border-radius: var(--r2); }
  .pagebar-right{ width: 100%; justify-content:space-between; }
}

/* ---------- OS UI: Dock (MacOS premium + Tesla minimal) ---------- */
.dock{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 90;
  pointer-events: none;
}
.dock-inner{
  pointer-events: auto;
  display:flex;
  gap: 8px;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(8,10,16,.60);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .dock-inner{ background: rgba(255,255,255,.70); }

.dock-item{
  position: relative;
  width: 46px; height: 46px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface2);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
  transform: translateY(0) scale(var(--s, 1));
  will-change: transform;
  overflow: hidden;
}
.dock-item:hover{ border-color: var(--border2); background: var(--surface); transform: translateY(-2px) scale(var(--s, 1)); }
.dock-item.active{
  border-color: rgba(0,113,227,.55);
  background: radial-gradient(120% 120% at 20% 10%, rgba(0,194,255,.20), rgba(0,113,227,.14));
}
.dock-ico svg{ width: 20px; height: 20px; opacity: .92; }

.dock-tip{
  position: absolute;
  left: 50%;
  bottom: 56px;
  transform: translateX(-50%);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(8,10,16,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow2);
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: -.01em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s var(--ease), transform .14s var(--ease);
}
html[data-theme="light"] .dock-tip{ background: rgba(255,255,255,.86); }
.dock-item:hover .dock-tip{ opacity: 1; transform: translateX(-50%) translateY(-2px); }

@media (max-width: 980px){
  .dock{ display:none; }
}

/* Make native form controls match theme (fixes white dropdowns in dark theme) */
html{ color-scheme: dark; }
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="light"]{ color-scheme: light; }

html[data-theme="light"]{
  --bg:#F6F7FA;
  --bg2:#FFFFFF;
  --surface: rgba(10,18,36,.045);
  --surface2: rgba(10,18,36,.028);
  --surface3: rgba(10,18,36,.020);
  --text:#0A1020;
  --muted:#53607A;
  --border: rgba(10,18,36,.12);
  --border2: rgba(10,18,36,.18);
  --shadow: 0 22px 60px rgba(10,18,36,.14);
  --shadow2: 0 12px 26px rgba(10,18,36,.11);
  --ring: 0 0 0 4px rgba(0,113,227,.16);
}

/* ---------- Base / reset ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%); }
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  /* NOTE: background moved to a fixed pseudo-element to avoid
     rare but nasty "band" seams caused by background-attachment: fixed
     on some browsers/GPUs. */
  background: none;
  position: relative;
  overflow-x:hidden;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fixed base background layer (no seams) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(1200px 650px at 15% -10%, rgba(0,113,227,.24), transparent 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(0,194,255,.18), transparent 62%),
    radial-gradient(700px 500px at 60% 120%, rgba(31,201,110,.10), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  transform: translateZ(0);
}

@media (min-width: 981px){
  body{ padding-bottom: 86px; }
}

/* Subtle grid + noise (premium, barely visible) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  z-index:-1;
  opacity:.34;
  background:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  /* Extra-soft mask to avoid any visible edge/band */
  mask-image: radial-gradient(2000px 1400px at 50% 0%, rgba(0,0,0,.92) 0%, rgba(0,0,0,.62) 46%, rgba(0,0,0,.30) 72%, rgba(0,0,0,.12) 88%, transparent 100%);
}
html[data-theme="light"] body::before{
  opacity:.26;
  background:
    linear-gradient(to right, rgba(10,18,36,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,18,36,.07) 1px, transparent 1px);
}

a{ color: inherit; text-decoration: none; }
a:hover{ opacity:.98; }
img{ max-width:100%; display:block; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 22px;
  display:flex;
  flex-direction:column;
  gap: var(--gap);
}

.stack{ display:flex; flex-direction:column; gap: var(--gap); }
.grid{ display:grid; gap: var(--gap); }
.grid.two{ grid-template-columns: 1.15fr .85fr; }
@media (max-width: 980px){ .grid.two{ grid-template-columns: 1fr; } }

/* ---------- Header / top bar ---------- */
header.site{
  position: sticky;
  top: 0;
  z-index: 80;
  border-bottom: 1px solid var(--border);
  background: rgba(8,10,16,.70);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html[data-theme="light"] header.site{ background: rgba(246,247,250,.82); }

.navbar{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap: 12px;
}

.brand{ display:flex; align-items:center; gap: 12px; min-width: 0; flex: 0 1 auto; }
.brand-badge{
  width: 38px; height: 38px;
  border-radius: 14px;
  position: relative;
  overflow:hidden;

  /* Premium badge background (fully opaque to avoid the page grid showing through) */
  background: radial-gradient(130% 130% at 10% 5%, #00C2FF 0%, #0097FF 34%, #0071E3 60%, #0051C6 80%, #00358C 100%);
  border: none;
box-shadow: 0 18px 40px rgba(0,113,227,.22), inset 0 1px 0 rgba(255,255,255,.18);

  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.brand:hover .brand-badge{
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 22px 55px rgba(0,113,227,.30), inset 0 1px 0 rgba(255,255,255,.22);
}

.brand-badge[data-brandlogo]::before{
  content:"";
  width: 72%;
  height: 72%;
  background: rgba(255,255,255,.96);
  -webkit-mask: url("img/logo-r-mask.png") center / contain no-repeat;
          mask: url("img/logo-r-mask.png") center / contain no-repeat;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
  transform: translateZ(0);
}

.brand-badge::after{ content:none; display:none !important; }

html[data-theme="light"] .brand-badge{
  /* Keep badge readable and avoid any background pattern bleed */
  background: radial-gradient(140% 140% at 20% 15%, #DDF6FF 0%, #DCE8FF 55%, #EEF2FF 100%);
  border: none;
box-shadow: 0 12px 28px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.55);
}

html[data-theme="light"] .brand-badge[data-brandlogo]::before{
  background: rgba(0,0,0,.86);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

.brand-title{ font-weight: 860; letter-spacing: -.02em; }
.brand-sub{ font-size:12.5px; color: var(--muted); margin-top: 2px; }

.navlinks{
  display:flex;
  align-items:center;
  justify-content: space-evenly;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
  width: 100%;
  max-width: 100%;
  flex-wrap: nowrap;
}
.navlinks-main{
  margin: 0 auto;
  width: 100%;
}


.navlinks::-webkit-scrollbar{ height: 0; }

.navlink{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 740;
  font-size: 13px;
  letter-spacing: -.01em;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.navlink .nav-ico{ width: 16px; height: 16px; display:grid; place-items:center; opacity: .95; }
.navlink .nav-ico svg{ width: 16px; height: 16px; }
.navlink .nav-txt{ white-space: nowrap; }
.navlink:hover{ background: var(--surface); color: var(--text); transform: translateY(-1px); }
.navlink.active{ background: linear-gradient(180deg, rgba(0,113,227,.26), rgba(0,113,227,.12)); color: var(--text); box-shadow: 0 18px 45px rgba(0,113,227,.12), inset 0 1px 0 rgba(255,255,255,.10); }

.right-tools{ display:flex; align-items:center; gap: 10px; justify-content:flex-end; }

/* Mobile header */
.nav-mobile-btn{ display:inline-flex; }
@media (max-width: 1040px){
  /* Make header fit on touch devices even in "desktop viewport" mode */
  header.site .navbar{ gap: 10px; }
  header.site .navbar-top{ flex-wrap: wrap; justify-content: space-between; }
  header.site .brand{ min-width: auto; }
  header.site .right-tools{ flex: 1 1 100%; flex-wrap: wrap; justify-content:flex-end; gap: 10px; }
  header.site .right-tools .class-switch{ flex: 1 1 100%; order: 50; justify-content: center; }

  /* Main nav: keep inside the capsule, allow 2 lines without horizontal overflow */
  .navlinks{ flex-wrap: wrap !important; justify-content: center !important; row-gap: 6px; overflow:hidden; }
  .navlinks .navlink{ padding: 9px 10px; font-size: 13px; }
}

/* ---------- Class switch ---------- */
.class-switch{
  display:flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.class-switch::-webkit-scrollbar{ display:none; }

.class-btn{
  appearance:none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 9px 12px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 780;
  letter-spacing: -.01em;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.class-btn:hover{ background: var(--surface); color: var(--text); transform: translateY(-1px); }
.class-btn.active{
  background: radial-gradient(120% 140% at 20% 20%, rgba(0,194,255,.22), rgba(0,113,227,.16));
  border-color: rgba(0,113,227,.40);
  color: var(--text);
}

/* ---------- Buttons ---------- */
.btn{
  appearance:none;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  user-select:none;
  transition:
    transform .18s var(--ease),
    box-shadow .20s var(--ease),
    border-color .20s var(--ease),
    background .20s var(--ease);
  position: relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap: 10px;
}
.btn:hover{ transform: translateY(-1px); border-color: var(--border2); box-shadow: var(--shadow2); background: var(--surface); }
.btn:active{ transform: translateY(0) scale(.99); }
.btn:focus{ outline:none; box-shadow: var(--ring); }

.btn.primary{
  border-color: rgba(0,113,227,.46);
  background: radial-gradient(120% 120% at 20% 10%, rgba(0,194,255,.24), rgba(0,113,227,.18));
}
.btn.primary:hover{ border-color: rgba(0,113,227,.70); box-shadow: 0 22px 60px rgba(0,113,227,.22); }

.btn.icon{ padding: 10px; width: 42px; justify-content:center; }
.btn .icon-svg{ width: 18px; height: 18px; opacity: .92; }

/* Smaller buttons (used in modals/toolbars) */
.btn.sm{ padding: 7px 10px; border-radius: 12px; font-size: 12px; gap: 8px; }
.btn.sm.icon{ width: 38px; padding: 8px; }

/* Elegant ripple */
.btn::after{
  content:"";
  position:absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  width: 0; height: 0;
  border-radius: 999px;
  background: rgba(0,113,227,.18);
  transform: translate(-50%,-50%);
  transition: width .52s var(--ease), height .52s var(--ease), opacity .60s var(--ease);
  opacity:0;
}
.btn.ripple::after{ width: 460px; height: 460px; opacity:1; }

/* ---------- Inputs ---------- */
.input,select.input,textarea.input{
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  outline: none;
  transition: box-shadow .20s var(--ease), border-color .20s var(--ease), background .20s var(--ease);
}

/* Date & time inputs */
input[type="date"].input,
input[type="datetime-local"].input{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
}
input[type="date"].input::-webkit-calendar-picker-indicator,
input[type="datetime-local"].input::-webkit-calendar-picker-indicator{
  opacity: .75;
  cursor: pointer;
}
html[data-theme="dark"] input[type="date"].input::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="datetime-local"].input::-webkit-calendar-picker-indicator{
  filter: invert(1);
  opacity: .65;
}
.input:focus{ border-color: rgba(0,113,227,.55); box-shadow: var(--ring); background: var(--surface); }
textarea.input{ min-height: 120px; resize: vertical; }

select.input{
  -webkit-appearance:none; appearance:none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.70) 50%),
    linear-gradient(135deg, rgba(255,255,255,.70) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 55%,
    calc(100% - 14px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
html[data-theme="light"] select.input{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(10,18,36,.55) 50%),
    linear-gradient(135deg, rgba(10,18,36,.55) 50%, transparent 50%);
}

/* Dark theme dropdown menu (Chrome uses native UI; color-scheme handles most, but keep explicit colors too) */
html[data-theme="dark"] select.input,
html:not([data-theme="light"]) select.input{
  background-color: rgba(8,10,16,.62);
  color: var(--text);
}
html[data-theme="dark"] option,
html[data-theme="dark"] optgroup,
html:not([data-theme="light"]) option,
html:not([data-theme="light"]) optgroup{
  background-color: rgba(8,10,16,.92);
  color: var(--text);
}

/* ---------- Typography helpers ---------- */
.small{ font-size: 13px; color: var(--muted); }
code.inline{
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12px;
}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}
.badge.ok{ border-color: rgba(31,201,110,.40); color: rgba(31,201,110,1); background: rgba(31,201,110,.10); }
.badge.danger{ border-color: rgba(255,59,48,.42); color: rgba(255,59,48,1); background: rgba(255,59,48,.12); }

/* ---------- Cards / items ---------- */
.card{
  border-radius: var(--r3);
  border: 1px solid var(--border);
  background:
    radial-gradient(800px 260px at var(--mx, 50%) var(--my, 0%), rgba(0,113,227,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
  padding: 18px;
  position: relative;
  overflow:hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card::before{
  content:"";
  position:absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227,25,55,.26), rgba(0,113,227,.20), transparent);
  opacity: .95;
}
html[data-theme="light"] .card{
  background:
    radial-gradient(800px 260px at var(--mx, 50%) var(--my, 0%), rgba(0,113,227,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.96));
}
.card:hover{ transform: translateY(-1px); border-color: rgba(0,113,227,.22); box-shadow: var(--shadow); }

.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.card-title{ margin:0; font-size: 18px; letter-spacing: -.01em; }

.list{ display:flex; flex-direction:column; gap: 12px; }

/* ---------- Chips / filters ---------- */
.chips{ display:flex; flex-wrap:wrap; gap: 8px; margin: 10px 0 16px; }
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--muted);
  font-weight: 780;
  font-size: 13px;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.chip:hover{ transform: translateY(-1px); background: var(--surface2); border-color: var(--border2); color: var(--text); }
.chip.active{ background: rgba(0,113,227,.16); border-color: rgba(0,113,227,.42); color: var(--text); }
.item{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 14px 14px;
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: var(--surface3);
  transition: transform .18s var(--ease), box-shadow .20s var(--ease), border-color .20s var(--ease), background .20s var(--ease);
}
.item:hover{ transform: translateY(-1px); border-color: rgba(0,113,227,.24); box-shadow: var(--shadow2); background: var(--surface2); }
.item strong{ font-size: 15px; letter-spacing: -.01em; }
.item .meta{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; color: var(--muted); font-size: 12.5px; }

/* Rich HTML inside content blocks */
.item :where(h1,h2,h3){ letter-spacing:-.01em; margin: 10px 0 6px; }
.item :where(p){ margin: 8px 0; }
.item :where(ul,ol){ margin: 8px 0 8px 18px; }
.item :where(li){ margin: 6px 0; }
.item :where(a){ text-decoration: underline; text-decoration-color: rgba(0,113,227,.35); text-underline-offset: 3px; }
.item :where(a:hover){ text-decoration-color: rgba(0,113,227,.65); }
.item :where(code){ font-family: var(--mono); font-size: 13px; }
.item :where(pre){ overflow:auto; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(0,0,0,.22); }
html[data-theme="light"] .item :where(pre){ background: rgba(10,18,36,.06); }

/* ---------- Tools (materials sidebar) ---------- */
.tool-box{
  border-radius: var(--r3);
  border: 1px solid var(--border);
  background: var(--surface3);
  padding: 14px;
}
.tool-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.tool-row{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr auto;
  gap: 10px;
}
@media (max-width: 720px){ .tool-row{ grid-template-columns: 1fr; } }
.tool-out{
  margin-top: 10px;
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  padding: 14px;
  min-height: 96px;
}
html[data-theme="light"] .tool-out{ background: rgba(10,18,36,.04); }

/* Task generator output: preserve line breaks in statements */
.tg-statement{ white-space: pre-wrap; }
.tool-actions{ display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap:wrap; margin-top: 10px; }

.pomodoro{ display:flex; flex-direction:column; gap: 10px; }
.pom-time{
  font-weight: 920;
  font-size: clamp(34px, 4vw, 54px);
  letter-spacing: -.04em;
  text-align:center;
  padding: 10px 12px;
  border-radius: var(--r3);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
}
html[data-theme="light"] .pom-time{ background: rgba(10,18,36,.03); }

/* ---------- Hero ---------- */
.hero{
  border-radius: 32px;
  border: 1px solid var(--border);
  background:
    radial-gradient(1000px 560px at 18% -20%, rgba(0,113,227,.26), transparent 60%),
    radial-gradient(900px 500px at 88% 10%, rgba(0,194,255,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  padding: 26px;
  align-items: stretch;
}
@media (max-width: 980px){ .hero-grid{ grid-template-columns: 1fr; } }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 780;
}
.hero h1{
  margin: 14px 0 8px;
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.04;
  letter-spacing: -.03em;
}
.hero p{ margin: 0; color: var(--muted); max-width: 72ch; font-size: 15px; }
.hero-actions{ margin-top: 16px; display:flex; flex-wrap:wrap; gap: 10px; }
.hero-badges{ margin-top: 14px; display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }

.hero-media{
  border-radius: 26px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.12);
  overflow:hidden;
  height: clamp(300px, 34vw, 440px);
  max-height: 440px;
  position: relative;
  box-shadow:
    inset 0 -160px 160px -120px rgba(0,0,0,.58),
    0 18px 52px rgba(0,0,0,.28);
}
html[data-theme="light"] .hero-media{
  background: rgba(10,18,36,.04);
  box-shadow:
    inset 0 -160px 160px -120px rgba(246,247,250,.92),
    0 16px 46px rgba(10,18,36,.10);
}
.hero-media img{
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 18%;
  transform: scale(1.02);
  transition: transform .85s var(--ease);
}
.hero:hover .hero-media img{ transform: scale(1.06); }

/* Hero widgets (compact + premium) */
.hero-widgets{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  max-width: 780px;
}
@media (max-width: 980px){ .hero-widgets{ grid-template-columns: 1fr; max-width: 100%; } }
.mini{
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(800px 240px at 10% -30%, rgba(0,194,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  padding: 12px 12px;
  transition: transform .18s var(--ease), box-shadow .20s var(--ease), border-color .20s var(--ease);
}
html[data-theme="light"] .mini{ background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.96)); }
.mini:hover{ transform: translateY(-1px); border-color: rgba(0,113,227,.22); box-shadow: var(--shadow2); }
.mini .topline{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom: 8px; }
.mini .pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 820;
  letter-spacing: .02em;
}
.mini .value{ margin:0; font-size: 13px; font-weight: 880; letter-spacing: -.01em; line-height: 1.25; }
.mini .value a{ color: var(--text); }

/* Clickable mini (used for quick class switch to Feed) */
.mini.pick{ cursor: pointer; }
.mini.pick:focus{ outline: none; }
.mini.pick:focus-visible{ box-shadow: 0 0 0 3px rgba(0,113,227,.18), var(--shadow2); border-color: rgba(0,113,227,.28); }
.mini-open{ display:inline-flex; align-items:center; gap:6px; margin-top: 8px; font-size: 11.5px; font-weight: 760; color: var(--muted); text-decoration: none; }
.mini-open:hover{ color: var(--text); }


.mini-foot{ margin-top: 10px; }
.mini-link{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 740;
  letter-spacing: .01em;
  color: var(--muted);
  text-decoration: none;
  opacity: .96;
}
.mini-link + .mini-link{ margin-top: 6px; }
.mini-link:hover{ color: var(--text); opacity: 1; }
.mini-link.muted{ opacity: .78; }

.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.dot--live{
  background: linear-gradient(180deg, rgba(0,194,255,1), rgba(0,113,227,1));
  box-shadow: 0 0 0 4px rgba(0,113,227,.14), 0 10px 30px rgba(0,113,227,.22);
}
.dot--idle{
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 4px rgba(255,255,255,.05);
}
html[data-theme="light"] .dot{ background: rgba(10,18,36,.18); box-shadow: 0 0 0 4px rgba(10,18,36,.06); }
html[data-theme="light"] .dot--idle{ background: rgba(10,18,36,.18); box-shadow: 0 0 0 4px rgba(10,18,36,.07); }

/* ---------- Carousel (certificates) ---------- */
.carousel{ display:flex; gap: 14px; overflow-x:auto; padding-bottom: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.carousel-block{ display:flex; flex-direction:column; gap: 10px; }
.carousel--no-scrollbar{ scrollbar-width: none; }
.carousel--no-scrollbar::-webkit-scrollbar{ display:none; }
.carousel::-webkit-scrollbar{ height: 10px; }
.carousel::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 999px; border: 2px solid rgba(0,0,0,0); background-clip: padding-box; }
html[data-theme="light"] .carousel::-webkit-scrollbar-thumb{ background: rgba(10,18,36,.18); }

.carousel-card{
  width: 290px;
  flex: 0 0 auto;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--surface2);
  overflow:hidden;
  scroll-snap-align: start;
  box-shadow: none;
  transition: transform .20s var(--ease), box-shadow .20s var(--ease), border-color .20s var(--ease);
}
.carousel-card:hover{ transform: translateY(-2px); border-color: rgba(0,113,227,.26); box-shadow: var(--shadow2); }
.carousel-media{ height: 170px; background: rgba(0,0,0,.10); position: relative; overflow:hidden; }
html[data-theme="light"] .carousel-media{ background: rgba(10,18,36,.04); }
.carousel-media img{ width:100%; height:100%; object-fit: cover; transform: scale(1.02); transition: transform .85s var(--ease); }
.carousel-card:hover .carousel-media img{ transform: scale(1.07); }
.carousel-fallback{ height: 100%; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding: 14px; gap: 10px; }
.carousel-body{ padding: 14px 14px 16px; }
.carousel-title{ font-weight: 860; letter-spacing: -.01em; margin-bottom: 6px; }

/* --- Home: diplomas / achievements carousel --- */
/* Show exactly 3 cards on desktop (instead of 5–6 tiny ones), make previews larger and readable. */
.carousel--certs{ gap: 18px; }
.carousel--certs .carousel-card{
  width: calc((100% - 36px) / 3);
  flex: 0 0 calc((100% - 36px) / 3);
}
.carousel--certs .carousel-media{
  height: 280px;
  padding: 10px;
}
.carousel--certs .carousel-media img{
  object-fit: contain;
  object-position: center;
  transform: none;
}
.carousel--certs .carousel-card:hover .carousel-media img{ transform:none; }

@media (max-width: 1100px){
  .carousel--certs .carousel-card{
    width: calc((100% - 18px) / 2);
    flex-basis: calc((100% - 18px) / 2);
  }
  .carousel--certs .carousel-media{ height: 260px; }
}

@media (max-width: 640px){
  .carousel--certs{ gap: 14px; }
  .carousel--certs .carousel-card{
    width: 86%;
    flex-basis: 86%;
  }
  .carousel--certs .carousel-media{ height: 240px; }
}

.carousel-nav{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-top: 10px; }
.carousel-hint{ opacity: .78; text-align:center; flex: 1 1 auto; }

.carousel-btn{
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(0,113,227,.26);
  background: var(--surface2);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  box-shadow: 0 14px 34px rgba(0,0,0,.36);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.carousel-btn:hover{ transform: translateY(-1px); border-color: rgba(0,113,227,.50); box-shadow: 0 18px 44px rgba(0,0,0,.44), 0 0 0 4px rgba(0,113,227,.10); }
.carousel-btn:active{ transform: translateY(0) scale(.98); }
.carousel-btn:disabled{ opacity: .35; cursor:not-allowed; transform:none; box-shadow:none; }

/* ---------- Footer ---------- */
.site-footer{
  margin-top: 6px;
  border-top: 1px solid var(--border);
  background: rgba(8,10,16,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---------- Toast ---------- */
.toast{
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  pointer-events:none;
  z-index: 1400;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(10,12,18,.80);
  box-shadow: var(--shadow2);
  color: var(--text);
  font-weight: 780;
  letter-spacing: -.01em;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
html[data-theme="light"] .toast{ background: rgba(255,255,255,.92); }
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); }
html[data-theme="light"] .site-footer{ background: rgba(246,247,250,.72); }
.footer-inner{ display:flex; align-items:flex-end; justify-content:space-between; gap: 18px; padding: 18px 0 22px; flex-wrap:wrap; }
.footer-title{ font-weight: 860; letter-spacing: -.02em; }
.footer-sub{ color: var(--muted); font-size: 13px; margin-top: 4px; }
.footer-right{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; color: var(--muted); }
.footer-pill{ padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface3); }

/* Lead Dev signature (public footer) */
.footer-devsig{
  margin-top: -10px;
  padding: 0 0 18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 8px;
  text-align:center;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .02em;
  color: rgba(255,255,255,.46);
  text-shadow: 0 1px 0 rgba(0,0,0,.65);
  user-select:none;
}
html[data-theme="light"] .footer-devsig{ color: rgba(0,0,0,.46); text-shadow: 0 1px 0 rgba(255,255,255,.75); }
.footer-devsig-dot{ opacity: .65; }


/* ---------- Intro overlay ---------- */
.intro{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 22px;
  background:
    radial-gradient(1100px 560px at 18% -10%, rgba(0,113,227,.55), transparent 62%),
    radial-gradient(900px 520px at 92% 20%, rgba(0,194,255,.32), transparent 62%),
    linear-gradient(180deg, rgba(5,6,10,.94), rgba(5,6,10,.82));
  backdrop-filter: blur(20px);
}
html[data-theme="light"] .intro{
  background:
    radial-gradient(1100px 560px at 18% -10%, rgba(0,113,227,.18), transparent 62%),
    radial-gradient(900px 520px at 92% 20%, rgba(0,194,255,.10), transparent 62%),
    linear-gradient(180deg, rgba(246,247,250,.94), rgba(246,247,250,.80));
}
.intro .box{
  width: min(920px, 100%);
  border-radius: 32px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  overflow:hidden;
  opacity: 0;
  transform: translate3d(0,12px,0);
  animation: pop .58s var(--ease) forwards;
}
html[data-theme="light"] .intro .box{ background: rgba(255,255,255,.86); }
.intro .top{ padding: 22px; }
.intro .bottom{ padding: 16px 22px 22px; display:flex; align-items:center; justify-content:space-between; gap: 12px; flex-wrap:wrap; border-top: 1px solid var(--border); background: rgba(255,255,255,.03); }
html[data-theme="light"] .intro .bottom{ background: rgba(10,18,36,.03); }
.intro h1{ margin: 12px 0 0; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.05; letter-spacing: -.03em; }
.intro p{ margin: 10px 0 0; color: var(--muted); font-size: 14.5px; }
.dots{ display:flex; gap:6px; align-items:center; }
.dots span{ width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.35); animation: dot 1.05s ease-in-out infinite; }
.dots span:nth-child(2){ animation-delay: .12s; opacity:.75; }
.dots span:nth-child(3){ animation-delay: .24s; opacity:.55; }
html[data-theme="light"] .dots span{ background: rgba(10,18,36,.26); }
@keyframes dot{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-8px); } }

/* ---------- Drawer (mobile nav) ---------- */
.drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events:none;
  transition: opacity .22s var(--ease);
  z-index: 1200;
}
html[data-theme="light"] .drawer-backdrop{ background: rgba(10,18,36,.28); }

.drawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(420px, 92vw);
  background:
    radial-gradient(900px 360px at 20% 0%, rgba(0,113,227,.16), transparent 60%),
    linear-gradient(180deg, rgba(10,12,18,.92), rgba(10,12,18,.82));
  border-left: 1px solid var(--border);
  transform: translateX(102%);
  transition: transform .26s var(--ease);
  z-index: 1201;
  display:flex;
  flex-direction:column;
}
html[data-theme="light"] .drawer{ background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90)); }
.drawer.open{ transform: translateX(0); }
.drawer-backdrop.open{ opacity: 1; pointer-events:auto; }

.drawer-head{ padding: 18px; display:flex; align-items:center; justify-content:space-between; gap: 10px; border-bottom: 1px solid var(--border); }
.drawer-nav{ padding: 14px 18px 22px; display:flex; flex-direction:column; gap: 8px; overflow:auto; }
.drawer-link{ padding: 12px 12px; border-radius: 16px; border: 1px solid var(--border); background: var(--surface3); color: var(--text); font-weight: 780; }
.drawer-link:hover{ background: var(--surface2); border-color: var(--border2); }
.drawer-meta{ padding: 18px; border-top: 1px solid var(--border); display:flex; gap: 10px; flex-wrap:wrap; }

/* ---------- Search (command palette) ---------- */
.search{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 22px;
  z-index: 1300;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(14px);
}
html[data-theme="light"] .search{ background: rgba(10,18,36,.28); }
.search.open{ display:flex; }
.search-card{
  width: min(860px, 100%);
  border-radius: 28px;
  border: 1px solid var(--border);
  background: rgba(10,12,18,.82);
  box-shadow: var(--shadow);
  overflow:hidden;
}
html[data-theme="light"] .search-card{ background: rgba(255,255,255,.92); }
.search-top{ padding: 16px; display:flex; gap: 10px; align-items:center; border-bottom: 1px solid var(--border); }
.search-input{
  flex: 1 1 auto;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  outline:none;
}
.search-input:focus{ box-shadow: var(--ring); border-color: rgba(0,113,227,.55); }
.search-kbd{ padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface3); color: var(--muted); font-size: 12px; font-weight: 800; }
.search-body{ max-height: 60vh; overflow:auto; padding: 10px; }
.search-item{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid transparent;
  cursor:pointer;
}
.search-item:hover{ border-color: var(--border); background: var(--surface3); }
.search-kind{ font-size: 12px; color: var(--muted); }
.search-title{ font-weight: 860; letter-spacing: -.01em; }
.search-snippet{ font-size: 13px; color: var(--muted); }

/* ---------- Motion reveal ---------- */
.reveal{ opacity: 0; transform: translate3d(0,14px,0); filter: blur(5px); }
.reveal.show{ animation: fadeUp .58s var(--ease) forwards; }
@keyframes fadeUp{ from{ opacity:0; transform: translate3d(0,14px,0); filter: blur(5px);} to{ opacity:1; transform: translate3d(0,0,0); filter: blur(0);} }
@keyframes pop{ 0%{ transform: translateY(12px) scale(.985); opacity:0; } 100%{ transform: translateY(0) scale(1); opacity:1; } }
@keyframes fadeOut{ from{opacity:1} to{opacity:0} }
.intro.hide{ animation: fadeOut .55s ease forwards; }

/* ---------- Auth (admin login) ---------- */
body.auth{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
}
.auth-shell{
  min-height: calc(100vh - 40px);
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){ .auth-shell{ grid-template-columns: 1fr; } }
.auth-hero{
  border-radius: 32px;
  border: 1px solid var(--border);
  background:
    radial-gradient(1100px 560px at 20% -10%, rgba(0,113,227,.28), transparent 62%),
    radial-gradient(900px 520px at 92% 18%, rgba(0,194,255,.18), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: var(--shadow);
  padding: 26px;
  overflow:hidden;
  position: relative;
}
.auth-hero h1{ margin: 10px 0 8px; font-size: clamp(30px, 3vw, 48px); letter-spacing: -.03em; line-height: 1.05; }
.auth-hero p{ margin: 0; color: var(--muted); max-width: 62ch; }
.auth-hero .auth-lead{ font-size: 15px; letter-spacing: -.01em; opacity: .96; }
.auth-mac{ margin-top: 18px; margin-bottom: 14px; display:flex; justify-content:center; }
.auth-mac{ perspective: 980px; }
.mac-window, .macwin{
  width: min(560px, 100%);
  border-radius: 26px;
  border: 1px solid var(--border);
  background:
    radial-gradient(900px 360px at 10% 0%, rgba(0,113,227,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(0,0,0,.18));
  overflow:hidden;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
  will-change: transform;
}
.auth-mac:hover .mac-window{ box-shadow: 0 26px 90px rgba(0,0,0,.55); }
.mac-top, .macwin-bar{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid var(--border);
}
html[data-theme="light"] .mac-top,
html[data-theme="light"] .macwin-bar{ background: rgba(255,255,255,.58); }
.mac-dots{ display:flex; gap:8px; }
.mac-dot{ width: 10px; height: 10px; border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 1px 2px rgba(0,0,0,.35); }
.mac-dot.red{ background:#ff5f57; }
.mac-dot.yellow{ background:#febc2e; }
.mac-dot.green{ background:#28c840; }
.mac-title, .macwin-title{ flex: 1 1 auto; text-align:center; font-size: 12px; font-weight: 820; letter-spacing: -.01em; color: var(--muted); }
.mac-pill{ font-size: 11px; font-weight: 820; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.06); color: var(--muted); }
html[data-theme="light"] .mac-pill{ background: rgba(255,255,255,.78); }
.mac-body, .macwin-body{ padding: 14px 16px 16px; max-height: 360px; overflow:auto; }
.mac-code{ margin:0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12.7px; line-height: 1.55; color: rgba(255,255,255,.86); }
html[data-theme="light"] .mac-code{ color: rgba(10,13,20,.92); }
.tok-com{ color: rgba(255,255,255,.45); }
html[data-theme="light"] .tok-com{ color: rgba(10,13,20,.46); }
.tok-kw{ color: rgba(125,211,252,.92); font-weight: 860; }
html[data-theme="light"] .tok-kw{ color: rgba(0,113,227,.92); }
.tok-str{ color: rgba(186,230,253,.88); }
html[data-theme="light"] .tok-str{ color: rgba(17,94,89,.92); }
.tok-fn{ color: rgba(167,139,250,.92); font-weight: 860; }
html[data-theme="light"] .tok-fn{ color: rgba(88,28,135,.9); }
.mac-sheen{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .78;
  background: radial-gradient(600px 260px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 60%);
  mix-blend-mode: screen;
  transform: translateZ(60px);
}

/* details: macwin accordion */
details.macwin > summary.macwin-bar{ cursor:pointer; user-select:none; list-style:none; }
details.macwin > summary.macwin-bar::-webkit-details-marker{ display:none; }
details.macwin > summary.macwin-bar::marker{ content:""; }
.auth-hero .auth-mark{ margin-top: 18px; display:flex; gap: 10px; flex-wrap:wrap; }

.auth-card{
  border-radius: 32px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  padding: 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
html[data-theme="light"] .auth-card{ background: rgba(255,255,255,.92); }
.auth-title{ margin: 0 0 10px; font-size: 22px; letter-spacing: -.02em; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  body{ background-attachment: scroll; }
}

/* ============================================================
   Premium section layouts (Feed / Assignments / Materials / Practice / Plan / Calendar)
   ============================================================ */

.section-card{ padding: 26px; }
.section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  flex-wrap:wrap;
  margin-bottom: 14px;
}
.section-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.section-title{
  margin: 10px 0 0;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -.04em;
  line-height: 1.04;
}
.section-sub{
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 66ch;
  font-size: 14px;
  line-height: 1.6;
}
.section-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap:wrap;
}

.segmented{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
}
.seg{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 860;
  font-size: 13px;
  letter-spacing: -.01em;
  transition: background .18s var(--ease), transform .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  border: 1px solid transparent;
}
.seg:hover{ transform: translateY(-1px); background: var(--surface2); color: var(--text); border-color: var(--border2); }
.seg.active{ background: rgba(0,113,227,.18); color: var(--text); border-color: rgba(0,113,227,.35); }
.seg .seg-count{
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.12);
  color: var(--muted);
}
html[data-theme="light"] .seg .seg-count{ background: rgba(10,18,36,.04); }
.seg.active .seg-count{ border-color: rgba(0,113,227,.35); color: var(--text); background: rgba(0,113,227,.12); }

.view-toggle{
  display:inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
}
.view-btn{
  width: 38px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: background .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.view-btn:hover{ transform: translateY(-1px); background: var(--surface2); border-color: var(--border2); color: var(--text); }
.view-btn.active{ background: rgba(0,113,227,.18); border-color: rgba(0,113,227,.35); color: var(--text); }
.view-btn svg{ width: 18px; height: 18px; }

.entries{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

/* ---------- Scrollable section (for long lists, e.g. Materials) ---------- */
.section-scroll{
  display:flex;
  flex-direction:column;
  min-height: 0;
  /* Prevent endless page height when списков много */
  max-height: calc(100svh - 170px);
  overflow: hidden;
}
.section-scroll .entries{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 8px;
  margin-right: -8px;
}
.section-scroll .entries::-webkit-scrollbar{ width: 10px; }
.section-scroll .entries::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
html[data-theme="light"] .section-scroll .entries::-webkit-scrollbar-thumb{ background: rgba(10,18,36,.18); }
.section-scroll .entries::-webkit-scrollbar-track{ background: transparent; }

@media (max-width: 980px){
  /* Avoid scroll-in-scroll on mobile */
  .section-scroll{ max-height: none; }
  .section-scroll .entries{ overflow: visible; padding-right: 0; margin-right: 0; }
}
.entries[data-view="grid"] .entry-card{ grid-column: span 6; }
@media (min-width: 980px){ .entries[data-view="grid"] .entry-card{ grid-column: span 4; } }
@media (max-width: 640px){ .entries[data-view="grid"] .entry-card{ grid-column: 1 / -1; } }

.entry-card{
  position: relative;
  border-radius: var(--r3);
  border: 1px solid var(--border);
  background:
    radial-gradient(700px 220px at var(--mx, 50%) var(--my, 0%), rgba(0,113,227,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.020));
  overflow:hidden;
  padding: 14px;
  box-shadow: var(--shadow2);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}
html[data-theme="light"] .entry-card{
  background:
    radial-gradient(700px 220px at var(--mx, 50%) var(--my, 0%), rgba(0,113,227,.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.96));
}
.entry-card::before{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227,25,55,.28), rgba(0,113,227,.24), transparent);
  opacity: .95;
}
.entry-card:hover{ transform: translateY(-2px); border-color: rgba(0,113,227,.26); box-shadow: var(--shadow); }

.entry-top{ display:flex; align-items:flex-start; gap: 12px; }
.entry-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0,113,227,.10);
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.92);
}
html[data-theme="light"] .entry-icon{ color: rgba(10,18,36,.92); }
.entry-icon svg{ width: 22px; height: 22px; }

.entry-main{ min-width: 0; flex: 1; }
.entry-title{
  font-weight: 900;
  font-size: 15.5px;
  letter-spacing: -.015em;
  line-height: 1.25;
  margin-top: 2px;
}

/* Clamp long titles/excerpts in list view to keep rows tidy */
.entries[data-view="list"] .entry-title{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.entries[data-view="list"] .entry-excerpt{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.entry-meta{ margin-top: 7px; display:flex; flex-wrap:wrap; gap: 8px; align-items:center; color: var(--muted); }

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
  font-size: 12px;
  font-weight: 820;
}
.pill.ok{ border-color: rgba(31,201,110,.40); background: rgba(31,201,110,.10); color: rgba(31,201,110,1); }
.pill.warn{ border-color: rgba(255,149,0,.45); background: rgba(255,149,0,.10); color: rgba(255,149,0,.98); }
.pill.danger{ border-color: rgba(255,59,48,.42); background: rgba(255,59,48,.12); color: rgba(255,59,48,1); }
.pill.mono{ font-family: var(--mono); font-weight: 760; }

.entry-excerpt{ margin-top: 12px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.entry-foot{ margin-top: 12px; display:flex; align-items:center; justify-content:space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.entry-go{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
  display:grid;
  place-items:center;
  color: var(--muted);
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}
.entry-card:hover .entry-go{ transform: translateX(2px); background: rgba(0,113,227,.16); border-color: rgba(0,113,227,.32); color: var(--text); }

/* Mobile: keep pills aligned to the left (avoid centered prefixes in Feed) */
@media (max-width: 560px){
  .entry-card{ text-align:left; }
  .entry-main{ text-align:left; }
  .entry-meta{ justify-content:flex-start; }
}

/* Apple Presentation list: single "collection" container with rows */
.entries[data-view="list"]{
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: calc(var(--r3) - 2px);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.028);
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
html[data-theme="light"] .entries[data-view="list"]{
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 26px rgba(10,18,36,.10);
}

.entries[data-view="list"] .entry-card{
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 16px 18px;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.entries[data-view="list"] .entry-card::before{ display:none; }
.entries[data-view="list"] .entry-card + .entry-card{ border-top: 1px solid var(--border); }

.entries[data-view="list"] .entry-card:hover{
  transform: none;
  border-color: transparent;
  box-shadow: none;
  background: rgba(0,113,227,.075);
}
html[data-theme="light"] .entries[data-view="list"] .entry-card:hover{ background: rgba(0,113,227,.06); }

.entries[data-view="list"] .entry-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
}
.entries[data-view="list"] .entry-title{ font-size: 16.5px; }
.entries[data-view="list"] .entry-excerpt{ margin-top: 10px; max-width: 92ch; }

/* left accent (Finder-like) per kind */
.entry-card{ isolation:isolate; }
.entry-card[data-kind="assignment"]::after,
.entry-card[data-kind="post"]::after,
.entry-card[data-kind="material"]::after,
.entry-card[data-kind="practice"]::after{
  content:"";
  position:absolute;
  left:0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  opacity: .75;
  z-index: 0;
}
.entry-card[data-kind="assignment"]::after{ background: linear-gradient(180deg, rgba(0,194,255,.95), rgba(0,113,227,.95)); }
.entry-card[data-kind="post"]::after{ background: linear-gradient(180deg, rgba(255,149,0,.95), rgba(227,25,55,.75)); }
.entry-card[data-kind="material"]::after{ background: linear-gradient(180deg, rgba(31,201,110,.95), rgba(0,194,255,.75)); }
.entry-card[data-kind="practice"]::after{ background: linear-gradient(180deg, rgba(167,139,250,.95), rgba(0,113,227,.75)); }

.empty{
  margin-top: 14px;
  border-radius: var(--r3);
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  padding: 16px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
html[data-theme="light"] .empty{ border-color: rgba(0,0,0,.14); background: rgba(0,0,0,.03); }
.empty-ico{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface3);
  display:grid;
  place-items:center;
  color: var(--muted);
}
.empty-title{ font-weight: 920; letter-spacing: -.01em; }
.empty-sub{ color: var(--muted); margin-top: 4px; line-height: 1.55; }

/* Small table-like timeline (calendar list) */
.timeline{ display:flex; flex-direction:column; gap: 12px; margin-top: 12px; }
.timeline-item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border-radius: var(--r3);
  border: 1px solid var(--border);
  background: var(--surface3);
  padding: 14px;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.timeline-item:hover{ transform: translateY(-1px); border-color: rgba(0,113,227,.22); background: var(--surface2); box-shadow: var(--shadow2); }
.timeline-time{ min-width: 148px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.timeline-body{ flex: 1; min-width: 0; }
.timeline-title{ font-weight: 900; letter-spacing: -.01em; }
.timeline-desc{ color: var(--muted); margin-top: 6px; line-height: 1.55; }

/* Mobile: calendar timeline should stack (date/time on top, text below) */
@media (max-width: 560px){
  .timeline-item{ flex-direction: column; gap: 8px; }
  .timeline-time{ min-width: 0; }
  .timeline-body{ width: 100%; }
}


/* ============================================================
   Apple Presentation filterbar (Practice)
   ============================================================ */
.filterbar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.026);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html[data-theme="light"] .filterbar{ background: rgba(255,255,255,.72); }
.filterbar-row{ display:flex; gap: 10px; flex-wrap:wrap; align-items:center; }
.filterbar-field{ display:flex; gap: 8px; align-items:center; }
.filterbar-label{ opacity:.82; }
.filterbar .input{ height: 36px; padding: 6px 10px; min-width: 180px; }
@media (max-width: 520px){ .filterbar .input{ min-width: 150px; } }
.filterbar-actions{ display:flex; gap: 10px; align-items:center; }
.filterbar-actions .btn{ height: 36px; }

/* ============================================================
   Article / detail pages (Apple Presentation)
   ============================================================ */
.article{ padding: 26px; }
.article-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.article-path{ color: var(--muted); font-size: 12px; }
.article-head{ margin-bottom: 14px; }
.article-title{
  margin: 0;
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -.035em;
  line-height: 1.06;
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}
.article-lead{
  margin: 12px 0 0;
  color: var(--muted);
  max-width: 78ch;
  font-size: 14.5px;
  line-height: 1.65;
}
.article-h{
  margin: 16px 0 10px;
  font-size: 16px;
  font-weight: 920;
  letter-spacing: -.01em;
}
.article-split{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  margin: 16px 0 4px;
}
html[data-theme="light"] .article-split{
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.14), transparent);
}

.prose{
  margin-top: 12px;
  border-radius: var(--r3);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  padding: 16px 18px;
  overflow:hidden;
}
html[data-theme="light"] .prose{ background: rgba(0,0,0,.02); }

.prose :where(h1,h2,h3){
  letter-spacing: -.02em;
  margin: 14px 0 8px;
}
.prose :where(p){ margin: 10px 0; }
.prose :where(ul,ol){ margin: 10px 0 10px 18px; }
.prose :where(li){ margin: 6px 0; }
.prose :where(code){
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12.5px;
}
.prose :where(pre){
  margin: 12px 0;
  padding: 14px 14px;
  border-radius: var(--r3);
  background: rgba(0,0,0,.22);
  border: 1px solid var(--border);
  overflow:auto;
}
html[data-theme="light"] .prose :where(pre){ background: rgba(10,18,36,.06); }
.prose :where(a){ text-decoration: underline; text-decoration-color: rgba(0,113,227,.45); text-underline-offset: 3px; }

.attachments{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 12px;
}
.attachment{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: var(--r3);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.attachment:hover{ transform: translateY(-1px); background: rgba(0,113,227,.06); border-color: rgba(0,113,227,.22); }
html[data-theme="light"] .attachment{ background: rgba(0,0,0,.02); }
html[data-theme="light"] .attachment:hover{ background: rgba(0,113,227,.05); }

.attachment-ico{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface3);
  display:grid;
  place-items:center;
  color: var(--muted);
  font-weight: 920;
}
.attachment-main{ flex: 1; min-width: 0; }
.attachment-name{ font-weight: 920; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attachment-go{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface3);
  display:grid;
  place-items:center;
  color: var(--muted);
}

/* Attachments: inline image preview (posts/assignments/materials) */
.attachment--image{
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  cursor: zoom-in;
}
.attachment--image .attachment-img{
  width: 100%;
  display: block;
  max-height: 62vh;
  object-fit: contain;
  background: rgba(0,0,0,.14);
}
.attachment--image .attachment-bar{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px;
}

/* Attachments: inline video preview (posts) */
.attachment--video{
  padding: 0;
  overflow: hidden;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  background:
    radial-gradient(120% 120% at 100% 0, rgba(0,194,255,.10), rgba(0,113,227,.04)),
    rgba(255,255,255,.02);
}
.attachment--video:hover{
  transform: none;
  border-color: rgba(0,113,227,.34);
  background:
    radial-gradient(120% 120% at 100% 0, rgba(0,194,255,.16), rgba(0,113,227,.07)),
    rgba(255,255,255,.03);
}
html[data-theme="light"] .attachment--video{
  background:
    radial-gradient(120% 120% at 100% 0, rgba(0,113,227,.10), rgba(0,113,227,.03)),
    rgba(0,0,0,.02);
}

.attachment-video-shell{
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}
.attachment-video{
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  max-height: min(72vh, 640px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: #02050d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(2,8,22,.42);
}
html[data-theme="light"] .attachment-video{
  border-color: rgba(10,18,36,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 44px rgba(10,18,36,.12);
}

.attachment-video-bar{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
html[data-theme="light"] .attachment-video-bar{
  border-top-color: rgba(10,18,36,.08);
  background: linear-gradient(180deg, rgba(10,18,36,.03), rgba(10,18,36,.015));
}

.attachment-video-actions{
  margin-left: auto;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.attachment-video-actions .btn{
  min-width: 110px;
  justify-content: center;
}

/* Inline video card for standalone links inside article body */
.prose-video-card{
  margin: 12px 0;
  border-radius: 22px;
  border: 1px solid rgba(0,113,227,.24);
  background:
    radial-gradient(120% 120% at 100% 0, rgba(0,194,255,.11), rgba(0,113,227,.05)),
    rgba(255,255,255,.02);
  overflow: hidden;
}
html[data-theme="light"] .prose-video-card{
  border-color: rgba(0,113,227,.20);
  background:
    radial-gradient(120% 120% at 100% 0, rgba(0,113,227,.09), rgba(0,113,227,.03)),
    rgba(0,0,0,.02);
}
.prose-video-shell{
  padding: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.prose-video{
  width: 100%;
  display:block;
  aspect-ratio: 16 / 9;
  max-height: min(72vh, 620px);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: #02050d;
}
.prose-video-meta{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
}
html[data-theme="light"] .prose-video-meta{
  border-top-color: rgba(10,18,36,.08);
  background: linear-gradient(180deg, rgba(10,18,36,.03), rgba(10,18,36,.012));
}
.prose-video-main{
  min-width: 0;
  flex: 1;
}
.prose-video-title{
  font-weight: 860;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prose-video-link{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prose-video-actions{
  margin-left: auto;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.prose-video-actions .btn{
  min-width: 110px;
  justify-content: center;
}

/* Material previews (diplomas, методички, etc.) */
.file-preview-single{
  margin-top: 12px;
  border-radius: var(--r4);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.file-preview-link{ display:block; }
.file-preview-img{
  display:block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  background: rgba(0,0,0,.24);
}
html[data-theme="light"] .file-preview-img{ background: rgba(10,18,36,.06); }

.file-previews{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.file-preview-tile{
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 10px;
  border-radius: var(--r3);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.file-preview-tile:hover{ transform: translateY(-1px); background: rgba(0,113,227,.06); border-color: rgba(0,113,227,.22); }
.file-preview-tile-img{
  width: 100%;
  height: 180px;
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.24);
}
.file-preview-pdf-ico{
  height: 180px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.24);
  display:grid;
  place-items:center;
  font-family: var(--mono);
  letter-spacing: .08em;
  font-weight: 950;
  color: rgba(255,255,255,.72);
}
.file-preview-tile-cap{ white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }

.file-preview-pdf{
  margin-top: 12px;
  border-radius: var(--r4);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.file-preview-iframe{
  width: 100%;
  height: min(72vh, 840px);
  border: 0;
  background: transparent;
}

@media (max-width: 900px){
  .file-previews{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .file-preview-tile-img, .file-preview-pdf-ico{ height: 150px; }
}

@media (max-width: 560px){
  .file-previews{ grid-template-columns: 1fr; }
  .file-preview-tile-img, .file-preview-pdf-ico{ height: 170px; }
}

/* ---------- Material detail: premium layout ---------- */
.article-grid{ align-items: start; }
.article-side{ position: relative; }
.article-side .side-card{
  position: sticky;
  top: 96px;
}
@media (max-width: 980px){
  .article-side .side-card{ position: static; top: auto; }
}

.article-kicker{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--muted);
  font-weight: 760;
  letter-spacing: -.01em;
}
.article-kicker .kicker-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: radial-gradient(120% 120% at 30% 20%, rgba(0,194,255,.95), rgba(0,113,227,.85));
  box-shadow: 0 10px 26px rgba(0,113,227,.24);
}
.article-kicker .kicker-sep{ opacity: .6; }

.article-card .article-nav,
.article-card .article-head,
.article-card .prose,
.article-card .article-h,
.article-card .attachments{
  max-width: 92ch;
  margin-left: auto;
  margin-right: auto;
}
.article-card .file-preview-single,
.article-card .file-preview-pdf,
.article-card .file-previews{
  max-width: 110ch;
  margin-left: auto;
  margin-right: auto;
}

.prose{
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.prose :where(p, li, blockquote, pre, code){
  overflow-wrap: anywhere;
  word-break: break-word;
}
.prose a{
  color: rgba(120,200,255,.98);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
html[data-theme="light"] .prose a{ color: rgba(0,97,214,.95); }

/* If a link sits alone in a paragraph (common case for materials), render it as a "link card" */
.prose p > a:only-child{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,113,227,.26);
  background: radial-gradient(120% 120% at 20% 10%, rgba(0,194,255,.12), rgba(0,113,227,.06));
  text-decoration: none;
  font-weight: 840;
  letter-spacing: -.01em;
}
.prose p > a:only-child::before{
  content:"↗";
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(0,113,227,.22);
  background: rgba(0,0,0,.18);
  display:grid;
  place-items:center;
  font-family: var(--mono);
  font-weight: 950;
}
html[data-theme="light"] .prose p > a:only-child::before{ background: rgba(10,18,36,.06); }
.prose p > a:only-child:hover{
  transform: translateY(-1px);
  border-color: rgba(0,113,227,.42);
  box-shadow: 0 22px 60px rgba(0,113,227,.14);
}
.prose p > a:only-child::after{
  content:"Открыть";
  margin-left: auto;
  color: var(--muted);
  font-weight: 760;
}

.side-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}
.side-k{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.side-t{
  font-weight: 950;
  letter-spacing: -.02em;
  margin-top: 2px;
}
.side-actions{ display:flex; flex-direction:column; gap: 10px; margin-top: 12px; }
.side-rows{ margin-top: 14px; display:flex; flex-direction:column; gap: 10px; }
.side-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.side-row span{ color: var(--muted); font-size: 13px; }
.side-row strong{ font-weight: 900; letter-spacing: -.01em; text-align:right; }
.side-note{
  margin-top: 14px;
  color: rgba(255,255,255,.62);
}
html[data-theme="light"] .side-note{ color: rgba(10,18,36,.62); }

.side-files{ display:flex; flex-direction:column; gap: 8px; }
.side-file{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.side-file:hover{ transform: translateY(-1px); background: rgba(0,113,227,.06); border-color: rgba(0,113,227,.22); }
.sf-ico{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface3);
  display:grid;
  place-items:center;
  font-family: var(--mono);
  font-weight: 950;
  color: var(--muted);
}
.sf-name{
  min-width:0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 820;
}

/* ---------- Material page: diploma variant (clean enterprise UI) ---------- */
.article-grid--diploma{
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 20px;
}

.article-grid--diploma > .article-card--diploma{
  width: min(100%, 1120px);
  margin-left: auto;
  margin-right: auto;
}

.article-grid--diploma > .article-side--diploma{
  display: none;
}

.article-card--diploma{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(136,159,196,.34);
  background:
    radial-gradient(980px 360px at 8% -12%, rgba(44,132,255,.20), transparent 58%),
    linear-gradient(180deg, rgba(12,18,30,.94), rgba(8,12,22,.94));
  box-shadow: 0 30px 90px rgba(2,10,24,.58);
}
.article-card--diploma::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(130,165,220,.42), transparent);
  pointer-events:none;
}
html[data-theme="light"] .article-card--diploma{
  border-color: rgba(22,58,112,.14);
  background:
    radial-gradient(980px 360px at 8% -12%, rgba(0,113,227,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,255,.96));
  box-shadow: 0 24px 66px rgba(10,18,36,.14);
}
html[data-theme="light"] .article-card--diploma::before{
  background: linear-gradient(90deg, transparent, rgba(0,113,227,.30), transparent);
}

.article-grid--diploma .article-nav{
  margin-bottom: 18px;
  align-items: center;
}
.article-grid--diploma .article-path{
  font-size: 11.8px;
  opacity: .92;
}
.article-grid--diploma .article-head{
  margin-bottom: 18px;
}
.article-grid--diploma .article-title{
  font-size: clamp(32px, 3.5vw, 48px);
  line-height: 1.03;
  letter-spacing: -.04em;
  max-width: 26ch;
}
.article-grid--diploma .article-lead{
  margin-top: 14px;
  font-size: 14px;
  max-width: 70ch;
}
.article-grid--diploma .article-meta .pill{
  border-color: rgba(130,165,220,.28);
  background: rgba(6,19,39,.42);
}
html[data-theme="light"] .article-grid--diploma .article-meta .pill{
  border-color: rgba(0,113,227,.20);
  background: rgba(0,113,227,.05);
}

.article-grid--diploma .prose{
  margin-top: 16px;
  border-radius: 24px;
  border-color: rgba(136,159,196,.24);
  background: rgba(3,10,20,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
html[data-theme="light"] .article-grid--diploma .prose{
  border-color: rgba(0,113,227,.14);
  background: rgba(245,250,255,.82);
}

.article-grid--diploma .article-h{
  margin-top: 22px;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(191,208,236,.96);
}
html[data-theme="light"] .article-grid--diploma .article-h{
  color: rgba(14,44,84,.86);
}

.article-grid--diploma .file-preview-single,
.article-grid--diploma .file-preview-pdf{
  border-radius: 24px;
  border-color: rgba(136,159,196,.32);
  background: rgba(3,9,18,.52);
  box-shadow: 0 24px 72px rgba(2,8,18,.48);
}
html[data-theme="light"] .article-grid--diploma .file-preview-single,
html[data-theme="light"] .article-grid--diploma .file-preview-pdf{
  border-color: rgba(0,113,227,.18);
  background: rgba(255,255,255,.92);
  box-shadow: 0 20px 52px rgba(10,18,36,.12);
}
.article-grid--diploma .file-preview-link{
  display:block;
  padding: 12px;
}
.article-grid--diploma .file-preview-img{
  border-radius: 16px;
  border: 1px solid rgba(136,159,196,.26);
  background: rgba(0,0,0,.18);
}
html[data-theme="light"] .article-grid--diploma .file-preview-img{
  border-color: rgba(0,113,227,.12);
}
.article-grid--diploma .file-preview-iframe{
  height: min(78vh, 920px);
  border-radius: 16px;
}

.article-side--diploma .side-card{
  position: sticky;
  top: 96px;
  border-radius: 24px;
  border: 1px solid rgba(136,159,196,.28);
  background:
    radial-gradient(920px 320px at 8% -10%, rgba(44,132,255,.18), transparent 58%),
    linear-gradient(180deg, rgba(12,18,30,.92), rgba(8,12,22,.92));
  box-shadow: 0 24px 70px rgba(2,10,24,.50);
}
html[data-theme="light"] .article-side--diploma .side-card{
  border-color: rgba(0,113,227,.15);
  background:
    radial-gradient(920px 320px at 8% -10%, rgba(0,113,227,.09), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,255,.96));
  box-shadow: 0 20px 56px rgba(10,18,36,.12);
}
.article-side--diploma .side-k{
  letter-spacing: .08em;
}
.article-side--diploma .side-t{
  font-size: 18px;
}
.article-side--diploma .side-actions .btn{
  min-height: 42px;
  justify-content:flex-start;
  border-radius: 14px;
  font-weight: 760;
}
.article-side--diploma .side-rows{
  gap: 9px;
}
.article-side--diploma .side-row{
  border-radius: 14px;
  border-color: rgba(136,159,196,.24);
  background: rgba(6,18,38,.44);
}
html[data-theme="light"] .article-side--diploma .side-row{
  border-color: rgba(0,113,227,.15);
  background: rgba(0,113,227,.04);
}
.article-side--diploma .side-note{
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(136,159,196,.22);
  line-height: 1.55;
}
html[data-theme="light"] .article-side--diploma .side-note{
  border-top-color: rgba(0,113,227,.14);
}

@media (max-width: 1080px){
  .article-grid--diploma{ grid-template-columns: 1fr; }
  .article-side--diploma .side-card{ position: static; top: auto; }
}
@media (max-width: 640px){
  .article-card--diploma{
    border-radius: 22px;
  }
  .article-grid--diploma .article-title{
    font-size: clamp(28px, 8.3vw, 38px);
  }
  .article-grid--diploma .file-preview-link{
    padding: 8px;
  }
}

@media (max-width: 760px){
  .article{ padding: 20px 14px; }
  .article-nav{ flex-wrap: wrap; align-items: flex-start; }
  .article-path{ font-size: 11px; }
  .prose{ padding: 14px 12px; border-radius: 18px; }

  .attachment--image .attachment-bar{
    flex-direction: column;
    align-items: flex-start;
  }
  .attachment--image .attachment-bar .btn{
    width: 100%;
    justify-content: center;
  }

  .attachment-video-shell,
  .prose-video-shell{ padding: 8px; }

  .attachment-video,
  .prose-video{
    border-radius: 14px;
    max-height: 58vh;
  }

  .attachment-video-bar,
  .prose-video-meta{
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 12px 12px;
  }

  .attachment-video-actions,
  .prose-video-actions{
    width: 100%;
    margin-left: 0;
  }

  .attachment-video-actions .btn,
  .prose-video-actions .btn{
    flex: 1 1 calc(50% - 4px);
  }
}

@media (max-width: 520px){
  .article-title{ font-size: clamp(24px, 8.5vw, 35px); }

  .attachment-video-actions .btn,
  .prose-video-actions .btn{
    flex: 1 1 100%;
  }
}

/* Slightly tighter title for huge screens (keeps the "hero" feel but prevents ultra-long lines) */
@media (min-width: 1200px){
  .article-title{ max-width: 32ch; }
}

/* ============================================================
   ADMIN UI — Developer OS x Apple Presentation (premium)
   ============================================================ */

.btn.danger{
  border-color: rgba(255,59,48,.42);
  background: radial-gradient(120% 120% at 20% 10%, rgba(255,59,48,.20), rgba(227,25,55,.12));
}
.btn.danger:hover{
  border-color: rgba(255,59,48,.70);
  box-shadow: 0 22px 60px rgba(255,59,48,.16);
}

body.admin-ui .container.admin-grid{
  max-width: 1320px;
  display: grid;
  grid-template-columns: 272px 1fr;
  gap: 18px;
  align-items: start;
}

.admin-top{ position: sticky; top: 0; z-index: 30; }
.admin-top::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(900px 260px at 16% 10%, rgba(0,194,255,.16), transparent 60%),
              radial-gradient(900px 260px at 84% 10%, rgba(227,25,55,.14), transparent 60%);
  pointer-events:none;
  opacity: .9;
}
.admin-topbar{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
  padding: 14px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
}
html[data-theme="light"] .admin-topbar{
  border-color: rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
}
.admin-topbrand{ display:flex; align-items:center; gap: 12px; }
.admin-toptitle{ font-weight: 920; letter-spacing:-.02em; }
.admin-topsub{ color: var(--muted); font-size: 12.5px; }
.admin-topgreet{ margin-top: 8px; }
.admin-topgreet .badge{ font-weight: 900; letter-spacing: -.01em; }
.admin-topactions{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }

.admin-side{
  position: sticky;
  top: 92px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(1000px 360px at 25% 0%, rgba(0,113,227,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: var(--shadow2);
  overflow: hidden;
}
html[data-theme="light"] .admin-side{
  border-color: rgba(0,0,0,.10);
  background:
    radial-gradient(1000px 360px at 25% 0%, rgba(0,113,227,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.92));
}
.admin-side-head{ padding: 14px 14px 12px; border-bottom: 1px solid var(--border); }
.admin-side-title{ font-weight: 920; letter-spacing:-.02em; }
.admin-side-sub{ color: var(--muted); font-size: 12px; margin-top: 2px; }

.admin-nav{ padding: 10px; display:flex; flex-direction:column; gap: 8px; }
.admin-navlink{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  color: var(--muted);
  background: transparent;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.admin-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.10));
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
}
.admin-navlink:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: var(--text);
}
html[data-theme="light"] .admin-navlink:hover{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.10);
}
.admin-navlink.active{
  color: var(--text);
  border-color: rgba(0,113,227,.42);
  background: radial-gradient(120% 140% at 20% 10%, rgba(0,194,255,.22), rgba(0,113,227,.16));
  box-shadow: 0 18px 46px rgba(0,113,227,.14);
}
.admin-navlink.active .admin-dot{
  background: linear-gradient(180deg, rgba(0,194,255,1), rgba(0,113,227,.75));
  box-shadow: 0 0 0 1px rgba(0,113,227,.50) inset, 0 0 24px rgba(0,194,255,.25);
}

.admin-side-foot{
  padding: 12px 12px 14px;
  border-top: 1px solid var(--border);
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.admin-side-foot .btn{ flex: 1; justify-content:center; }

body.admin-ui .pagebar{ margin-bottom: 14px; }
body.admin-ui .pagebar-right .pagebar-hint{ max-width: 520px; }

/* Admin list rows: more presentable */
body.admin-ui .list > .item{
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
body.admin-ui .list > .item > div:first-child{ min-width: 0; }
body.admin-ui .list > .item a.btn{ white-space: nowrap; }

/* Forms */
.admin-form{ display:flex; flex-direction:column; gap: 12px; }
.admin-grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.admin-grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 900px){
  .admin-grid2,.admin-grid3{ grid-template-columns: 1fr; }
}
.field{ display:flex; flex-direction:column; gap: 6px; }
.field .label{ color: var(--muted); font-size: 12px; }
.field .help{ color: var(--muted); font-size: 12px; }
.section-split{ height: 1px; background: var(--border); margin: 8px 0; }

/* Textareas in admin: more comfortable */
body.admin-ui textarea.input{ min-height: 160px; font-family: var(--mono); font-size: 13px; line-height: 1.45; }

/* Responsive admin */
@media (max-width: 980px){
  body.admin-ui .container.admin-grid{ display:block; max-width: 920px; }
  body.admin-ui .admin-side{ display:none; }
  body.admin-ui .dock{ display:flex; }
}
@media (min-width: 981px){
  body.admin-ui .dock{ display:none; }
}

/* ============================================================
   ADMIN UI v2 — Developer OS × macOS polish
   (visual-only upgrade; no backend changes)
   ============================================================ */

.card-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

body.admin-ui .admin-card{
  position: relative;
  overflow: hidden;
}

/* macOS window chrome */
body.admin-ui .admin-card::after{
  content:"";
  position:absolute;
  top: 14px;
  left: 16px;
  width: 52px;
  height: 14px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 10px 7px, rgba(255,95,87,.95) 0 4.8px, rgba(255,95,87,0) 5.4px),
    radial-gradient(circle at 26px 7px, rgba(254,188,46,.95) 0 4.8px, rgba(254,188,46,0) 5.4px),
    radial-gradient(circle at 42px 7px, rgba(40,200,64,.92) 0 4.8px, rgba(40,200,64,0) 5.4px);
  opacity: .78;
  filter: saturate(1.15);
  pointer-events: none;
}

/* Give room for chrome, like a real window header */
body.admin-ui .admin-card .card-head{
  padding-left: 74px;
  padding-top: 2px;
  min-height: 54px;
}
@media (max-width: 720px){
  body.admin-ui .admin-card .card-head{ padding-left: 14px; min-height: 0; }
  body.admin-ui .admin-card::after{ display:none; }
}

/* Titles feel more "Settings.app" / Apple presentation */
body.admin-ui .admin-card .card-title{ font-size: 24px; letter-spacing: -.02em; }
body.admin-ui .admin-card .card-sub{ color: var(--muted); max-width: 74ch; }

/* List rows: Finder-like */
body.admin-ui .list{ gap: 10px; }
body.admin-ui .list > .item{
  position: relative;
  padding: 14px 14px;
}
body.admin-ui .list > .item::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(0,194,255,.55), rgba(0,113,227,.45));
  opacity: 0;
  transition: opacity .18s var(--ease);
}
body.admin-ui .list > .item:hover::before{ opacity: .9; }

/* Buttons in admin: slightly tighter + more "tool" feel */
body.admin-ui .btn{
  backdrop-filter: blur(10px);
}

/* Admin forms: calmer spacing + section dividers */
body.admin-ui .admin-form .input{ background: rgba(0,0,0,.22); }
html[data-theme="light"] body.admin-ui .admin-form .input{ background: rgba(10,18,36,.05); }
body.admin-ui .admin-form .input:focus{ box-shadow: 0 0 0 4px rgba(0,113,227,.16); }

/* Chips inside admin cards: more contrast */
body.admin-ui .chips{ margin-top: 6px; }
body.admin-ui .chip{ background: rgba(0,0,0,.18); }
html[data-theme="light"] body.admin-ui .chip{ background: rgba(10,18,36,.05); }


/* ============================================================
   Code playground (Python in-browser)
   ============================================================ */

.code-card{ position: relative; }
.code-grid{ display:grid; grid-template-columns: 1.35fr .85fr; gap: 16px; align-items:start; }
@media (max-width: 1040px){ .code-grid{ grid-template-columns: 1fr; } }

.code-tilt{ perspective: 1100px; }

.code-window, .console-window{ width: 100%; max-width: none; }
.code-body{ max-height: none; }

/* Editor shell (gutter + overlay highlight) */
.code-editor-shell{
  display:flex;
  align-items:stretch;
  gap: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.18);
  overflow: hidden;
}
html[data-theme="light"] .code-editor-shell{
  background: rgba(255,255,255,.72);
  border-color: rgba(0,0,0,.08);
}

.code-gutter{
  width: 52px;
  padding: 12px 10px;
  text-align: right;
  font-family: var(--mono);
  font-size: 12.6px;
  line-height: 1.55;
  letter-spacing: -.01em;
  color: rgba(255,255,255,.34);
  background: rgba(0,0,0,.18);
  border-right: 1px solid rgba(255,255,255,.08);
  user-select: none;
  white-space: pre;
}
@media (max-width: 520px){
  .code-gutter{ width: 40px; padding: 12px 8px; font-size: 12px; }
}
html[data-theme="light"] .code-gutter{
  color: rgba(10,13,20,.34);
  background: rgba(10,18,36,.04);
  border-right-color: rgba(0,0,0,.08);
}

.code-editor-wrap{
  position: relative;
  flex: 1 1 auto;
  min-height: 520px;
}
@media (max-width: 720px){
  .code-editor-wrap{ min-height: 440px; }
}

.code-highlight,
.code-editor{
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 12px 12px;
  border: 0;
  outline: 0;
  font-family: var(--mono);
  font-size: 13.2px;
  line-height: 1.55;
  letter-spacing: -.01em;
  tab-size: 4;
  white-space: pre;
  overflow: auto;
}

.code-highlight{
  pointer-events: none;
  color: rgba(255,255,255,.86);
  scrollbar-width: none;
}
.code-highlight::-webkit-scrollbar{ width: 0; height: 0; }
html[data-theme="light"] .code-highlight{ color: rgba(10,13,20,.92); }

.code-editor{
  background: transparent;
  color: transparent;
  caret-color: var(--text);
  resize: none;
}

.code-editor::selection{ background: rgba(0,113,227,.26); }
.code-editor::-moz-selection{ background: rgba(0,113,227,.26); }

/* Token colors (modern Python) */
.code-highlight .tok-com{ color: rgba(255,255,255,.38); }
html[data-theme="light"] .code-highlight .tok-com{ color: rgba(10,13,20,.44); }

.code-highlight .tok-kw{ color: rgba(125,211,252,.95); font-weight: 860; }
html[data-theme="light"] .code-highlight .tok-kw{ color: rgba(0,113,227,.95); }

.code-highlight .tok-str{ color: rgba(186,230,253,.9); }
html[data-theme="light"] .code-highlight .tok-str{ color: rgba(17,94,89,.92); }

.code-highlight .tok-fn{ color: rgba(167,139,250,.95); font-weight: 860; }
html[data-theme="light"] .code-highlight .tok-fn{ color: rgba(88,28,135,.92); }

.code-highlight .tok-num{ color: rgba(251,191,36,.95); }
html[data-theme="light"] .code-highlight .tok-num{ color: rgba(180,83,9,.92); }

.code-highlight .tok-builtin{ color: rgba(244,114,182,.92); }
html[data-theme="light"] .code-highlight .tok-builtin{ color: rgba(190,24,93,.9); }

.code-highlight .tok-decor{ color: rgba(74,222,128,.92); }
html[data-theme="light"] .code-highlight .tok-decor{ color: rgba(22,101,52,.92); }

.mac-actions{ display:flex; align-items:center; gap: 10px; }

/* Premium switch (macOS-like) */
.lux-switch{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.06);
}
html[data-theme="light"] .lux-switch{ background: rgba(255,255,255,.78); }
.lux-switch-text{ font-size: 11.5px; font-weight: 860; letter-spacing: -.01em; color: var(--muted); }
.lux-switch input{ position:absolute; opacity:0; width:1px; height:1px; }
.lux-switch-ui{
  width: 40px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
html[data-theme="light"] .lux-switch-ui{ background: rgba(10,18,36,.06); }
.lux-switch-ui:after{
  content:"";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  position:absolute;
  top: 1px;
  left: 1px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .18s var(--ease);
}
html[data-theme="light"] .lux-switch-ui:after{
  background: rgba(10,13,20,.90);
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.32);
}
.lux-switch input:checked + .lux-switch-ui{ background: rgba(0,113,227,.28); border-color: rgba(0,113,227,.55); }
html[data-theme="light"] .lux-switch input:checked + .lux-switch-ui{ background: rgba(0,113,227,.20); }
.lux-switch input:checked + .lux-switch-ui:after{ transform: translateX(18px); }
.lux-switch:focus-within{ box-shadow: var(--ring); }
@media (max-width: 520px){ .lux-switch-text{ display:none; } }

/* Pin: disable 3D tilt for a specific mac-window */
.mac-window.tilt-fixed{
  transform: none !important;
  will-change: auto;
  transition: box-shadow .18s var(--ease), border-color .20s var(--ease), background .20s var(--ease) !important;
}

.code-under{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; margin-top: 12px; }
.code-hint{ font-size: 12px; color: var(--muted); padding-left: 6px; }

.code-help{ margin-top: 12px; padding: 14px 16px; border-radius: 22px; background: rgba(255,255,255,.06); }
html[data-theme="light"] .code-help{ background: rgba(255,255,255,.92); }
.code-help-title{ font-weight: 860; letter-spacing: -.02em; margin-bottom: 6px; }
.code-help-text{ color: var(--muted); font-size: 13px; line-height: 1.45; }

.console-body{ max-height: 340px; }
.console-output{
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--mono);
  font-size: 12.8px;
  line-height: 1.55;
  color: rgba(255,255,255,.86);
}
html[data-theme="light"] .console-output{ color: rgba(10,13,20,.92); }

.code-templates{ padding: 16px; border-radius: 22px; }
.code-templates-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 14px; flex-wrap:wrap; margin-bottom: 12px; }
.code-templates-title{ font-weight: 900; letter-spacing: -.02em; }
.code-templates-sub{ color: var(--muted); font-size: 12.8px; margin-top: 4px; max-width: 48ch; }

.template-list{ display:grid; gap: 10px; }
.template-card{
  text-align:left;
  border: 1px solid var(--border);
  background: var(--surface2);
  border-radius: 18px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.template-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 50px rgba(0,0,0,.35); border-color: rgba(255,255,255,.22); }
html[data-theme="light"] .template-card:hover{ box-shadow: 0 18px 50px rgba(0,0,0,.12); border-color: rgba(0,0,0,.16); }
.template-top{ display:flex; align-items:flex-start; justify-content:space-between; gap: 10px; }
.template-title{ font-weight: 880; letter-spacing: -.02em; }
.template-meta{ display:flex; gap: 8px; flex-wrap:wrap; }
.template-sub{ color: var(--muted); font-size: 12.6px; margin-top: 6px; }

.code-stdin{ padding: 16px; border-radius: 22px; }
.code-stdin-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 10px; }
.code-stdin-title{ font-weight: 900; letter-spacing: -.02em; }
.code-stdin-area{ min-height: 120px; resize: vertical; font-family: var(--mono); }
.code-stdin-open{ margin-top: 12px; display:flex; }

/* Small segmented control (re-use existing .seg styles if present) */
.seg{ display:inline-flex; gap: 0; padding: 4px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255,255,255,.06); }
html[data-theme="light"] .seg{ background: rgba(255,255,255,.92); }
.seg-btn{
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 860;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.seg-btn.active{ background: rgba(0,113,227,.18); color: var(--text); }
html[data-theme="light"] .seg-btn.active{ background: rgba(0,113,227,.14); }


/* ---------- Achievements (Diplomas) ---------- */
.ach-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface2);
  margin: 10px 0 14px;
}
.ach-chips{ display:flex; gap: 8px; flex-wrap:wrap; }
.chip{
  appearance:none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .01em;
  transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.chip:hover{ transform: translateY(-1px); border-color: rgba(0,113,227,.45); }
.chip.active{
  background: rgba(0,113,227,.14);
  border-color: rgba(0,113,227,.55);
  box-shadow: 0 10px 30px rgba(0,113,227,.12);
}
.ach-sort{ display:flex; align-items:center; gap: 10px; }
.select{
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  padding: 10px 12px;
  outline: none;
  min-width: 190px;
}
.select:focus{ border-color: rgba(0,113,227,.65); box-shadow: 0 0 0 6px rgba(0,113,227,.12); }

.ach-grid{
  --gap: 14px;
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.ach-grid[data-ach-view-mode="grid"] .ach-card{ grid-column: span 4; }
@media (max-width: 1080px){ .ach-grid[data-ach-view-mode="grid"] .ach-card{ grid-column: span 6; } }
@media (max-width: 680px){ .ach-grid[data-ach-view-mode="grid"] .ach-card{ grid-column: span 12; } }

.ach-grid[data-ach-view-mode="masonry"]{
  display:block;
  column-count: 3;
  column-gap: var(--gap);
}
@media (max-width: 1080px){ .ach-grid[data-ach-view-mode="masonry"]{ column-count: 2; } }
@media (max-width: 680px){ .ach-grid[data-ach-view-mode="masonry"]{ column-count: 1; } }
.ach-grid[data-ach-view-mode="masonry"] .ach-card{
  display:inline-block;
  width: 100%;
  margin: 0 0 var(--gap);
}

.ach-card{
  border-radius: 26px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow:hidden;
  transform: translateZ(0);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
  transition: transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}
.ach-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,113,227,.35);
  box-shadow: 0 26px 80px rgba(0,0,0,.42);
}
.ach-card.is-hidden{ display:none !important; }

.ach-media{
  position:relative;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  cursor: pointer;
}
.ach-grid[data-ach-view-mode="grid"] .ach-media{ aspect-ratio: 4 / 3; }
.ach-grid[data-ach-view-mode="masonry"] .ach-media{ aspect-ratio: 16 / 10; }
.ach-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1);
  transition: transform .35s var(--ease), filter .35s var(--ease);
  filter: saturate(1.02) contrast(1.02);
}
.ach-card:hover .ach-media img{ transform: scale(1.04); filter: saturate(1.08) contrast(1.05); }

.ach-type{
  position:absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(12px);
}
html[data-theme="light"] .ach-type{
  background: rgba(255,255,255,.6);
  border-color: rgba(10,18,36,.14);
  color: rgba(10,18,36,.75);
}

.ach-file{
  height: 100%;
  width: 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 20px;
}
.ach-file-icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,113,227,.10);
  font-weight: 800;
  letter-spacing:.06em;
}
.ach-file-icon.big{ width: 68px; height: 68px; border-radius: 18px; }
.ach-file-name{
  max-width: 92%;
  text-align:center;
  color: var(--muted);
  font-size: 12px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ach-media-actions{
  position:absolute;
  right: 10px;
  top: 10px;
  display:flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.ach-card:hover .ach-media-actions{ opacity: 1; transform: translateY(0); }
.ach-iconbtn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter: blur(12px);
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.ach-iconbtn:hover{ transform: translateY(-1px); border-color: rgba(0,113,227,.45); }
.ach-iconbtn svg{ width: 18px; height: 18px; }

.ach-body{ padding: 14px 14px 16px; display:flex; flex-direction:column; gap: 8px; }
.ach-title{
  font-size: 16px;
  font-weight: 750;
  letter-spacing: -.02em;
  line-height: 1.18;
}
.ach-meta{
  color: var(--muted);
  font-size: 12px;
  display:flex;
  align-items:center;
  gap: 8px;
}
.ach-meta .dot{ opacity:.55; }
.ach-excerpt{
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.35;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
html[data-theme="light"] .ach-excerpt{ color: rgba(10,18,36,.74); }
.ach-row{ display:flex; gap: 10px; margin-top: 6px; }
.ach-row .btn{ flex:1; }

/* Modal */
.ach-modal{
  position: fixed;
  inset: 0;
  z-index: 70;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .20s var(--ease);
}
.ach-modal.show{ opacity: 1; pointer-events: auto; }
.ach-modal-backdrop{
  position:absolute;
  inset: 0;
  z-index: 0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(16px);
}
.ach-modal-card{
  position:relative;
  z-index: 1;
  width: min(1040px, 96vw);
  height: min(780px, 88vh);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,12,18,.72);
  box-shadow: 0 30px 120px rgba(0,0,0,.68);
  backdrop-filter: blur(18px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
html[data-theme="light"] .ach-modal-card{
  background: rgba(255,255,255,.78);
  border-color: rgba(10,18,36,.14);
  box-shadow: 0 30px 120px rgba(10,18,36,.28);
}

.ach-modal-head{
  padding: 14px 14px 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ach-modal-title{ font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.ach-modal-meta{ margin-top: 4px; color: var(--muted); font-size: 12px; }
.ach-modal-actions{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
.ach-modal-body{
  position:relative;
  flex:1;
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding: 12px;
}
.ach-view{
  position:relative;
  flex:1;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
html[data-theme="light"] .ach-view{ background: rgba(10,18,36,.04); border-color: rgba(10,18,36,.12); }
.ach-view img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display:block;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}
.ach-view-file{
  display:none;
  text-align:center;
  padding: 26px;
  color: var(--text);
}
.ach-nav{
  width: 48px;
  flex: 0 0 48px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 10px;
  transition: transform .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease);
}
.ach-nav:hover{ transform: translateY(-1px); border-color: rgba(0,113,227,.45); }
.ach-nav svg{ width: 18px; height: 18px; }
@media (max-width: 820px){
  .ach-nav{ display:none; }
  .ach-modal-actions{ width: 100%; justify-content:space-between; }
}
.ach-modal-foot{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}
html.modal-open{ overflow:hidden; }


/* Generic modal (shared) */
.modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.2vw, 26px);
  z-index: 1200;
}
.modal[hidden]{ display:none !important; }
.modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
html[data-theme="light"] .modal-backdrop{ background: rgba(10,18,36,.34); }
.modal-panel{
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
}
.modal-panel .mac-window{ width: 100%; }
.modal-panel .mac-body{ max-height: min(74vh, 780px); }



/* ------------------------------------------------------------
   HANDBOOKS / CHEATS — Class → Topic → Cheat (premium)
   ------------------------------------------------------------ */

.handbooks-tabbar{
  display:flex;
  gap: 10px;
  padding: 10px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: fit-content;
}

.cheats-toolbar{
  margin-top: 14px;
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.cheats-filters{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.cheats-tree{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.cheats-class{
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.015);
  overflow:hidden;
}

.cheats-class-head{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(800px 180px at 0% 0%, rgba(0,113,227,.14), transparent 55%),
    rgba(0,0,0,.14);
}
html[data-theme="light"] .cheats-class-head{
  background:
    radial-gradient(800px 180px at 0% 0%, rgba(0,113,227,.10), transparent 55%),
    rgba(10,18,36,.03);
  border-bottom-color: rgba(10,18,36,.10);
}

.cheats-class-title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.cheats-class-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(0,113,227,.78);
  box-shadow: 0 0 0 4px rgba(0,113,227,.16);
}

.cheats-topics{
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.cheats-topic{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  overflow:hidden;
}
html[data-theme="light"] .cheats-topic{
  border-color: rgba(10,18,36,.12);
  background: rgba(10,18,36,.03);
}


.cheats-topic-sum{
  list-style: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  cursor:pointer;
  user-select:none;
  border-radius:16px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  color:var(--text);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.cheats-topic-sum:hover{
  background:rgba(255,255,255,.05);
  border-color: rgba(120,180,255,.32);
}
.cheats-topic[open] .cheats-topic-sum{
  background:rgba(255,255,255,.06);
  border-color: rgba(120,180,255,.22);
}

.cheats-topic-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.cheats-topic-name{
  font-weight:650;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.cheats-topic-chevron{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:var(--muted);
  opacity:.95;
  transform: rotate(0deg);
  transition: transform .18s ease, color .18s ease, opacity .18s ease;
}
.cheats-topic[open] .cheats-topic-chevron{
  transform: rotate(90deg);
  color: var(--text);
  opacity: 1;
}

.cheats-topic-sum::-webkit-details-marker{ display:none; }
html[data-theme="light"] .cheats-topic-sum{
  background:rgba(255,255,255,.72);
}
html[data-theme="light"] .cheats-topic-sum:hover{
  background:rgba(255,255,255,.88);
}
html[data-theme="light"] .cheats-topic[open] .cheats-topic-sum{
  background:rgba(255,255,255,.84);
}
.cheats-topic .entries{ padding: 10px 10px 14px; }
.cheats-entries{ display:flex !important; flex-direction:column; gap:10px; padding: 8px 2px 2px; }
.cheats-entries .entry-card{ width:100%; text-align:left; padding: 12px 12px; border-radius: 18px; }
.cheats-entries .entry-top{ gap:10px; }
.cheats-entries .entry-title{ font-weight: 700; letter-spacing:.2px; }
.cheats-entries .entry-excerpt{ opacity:.82; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cheats-entries .entry-tags{ gap:6px; }
.cheats-entries .pill{ font-size: 11px; padding: 4px 8px; }
.cheats-entries .entry-go{ opacity:.8; }
.cheats-entries .entry-card:hover .entry-go{ opacity:1; }


@media (max-width: 720px){
  .handbooks-tabbar{ width: 100%; }
  .cheats-filters{ width: 100%; }
  .cheats-filters .select{ flex: 1 1 180px; }
}

/* Cheats list inside topic: keep list layout, but without heavy container chrome */
.cheats-entries.entries[data-view="list"]{
  margin-top: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.cheats-entries.entries[data-view="list"] .entry-card{
  padding: 14px 14px;
}
.cheats-entries.entries[data-view="list"] .entry-card + .entry-card{
  border-top: 1px solid rgba(255,255,255,.08);
}
html[data-theme="light"] .cheats-entries.entries[data-view="list"] .entry-card + .entry-card{
  border-top-color: rgba(10,18,36,.12);
}

/* Cheat modal body typography */
.cheat-body{
  padding: 14px 16px;
  overflow: auto;
  max-height: min(72vh, 760px);
}
.cheat-body :where(h2,h3){
  margin: 14px 0 8px;
  letter-spacing: -.02em;
}
.cheat-body :where(p){ margin: 10px 0; }
.cheat-body :where(ul,ol){ margin: 10px 0 10px 18px; }
.cheat-body :where(li){ margin: 6px 0; }
.cheat-body :where(code){
  padding: 2px 6px;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 12.5px;
}
.cheat-body :where(pre){
  margin: 12px 0;
  padding: 14px 14px;
  border-radius: var(--r3);
  background: rgba(0,0,0,.22);
  border: 1px solid var(--border);
  overflow:auto;
}
html[data-theme="light"] .cheat-body :where(pre){ background: rgba(10,18,36,.06); }

/* ===== Admin: premium toggle (maintenance switch) ===== */
.switch-row{display:flex;align-items:flex-start;gap:14px;padding:12px 14px;border:1px solid rgba(255,255,255,.10);border-radius:16px;background:rgba(255,255,255,.04);box-shadow:0 18px 50px rgba(0,0,0,.22) inset;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.switch-row:hover{border-color:rgba(0,153,255,.28);background:rgba(255,255,255,.05);transform:translateY(-1px)}
.switch-row input{position:absolute;opacity:0;pointer-events:none}
.switch-ui{position:relative;flex:0 0 auto;width:56px;height:32px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 20px rgba(0,0,0,.25) inset;transition:background .18s ease,border-color .18s ease}
.switch-ui:before{content:"";position:absolute;left:3px;top:3px;width:26px;height:26px;border-radius:999px;background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.55));box-shadow:0 8px 18px rgba(0,0,0,.35);transform:translateX(0);transition:transform .18s ease}
.switch-row input:checked + .switch-ui{background:linear-gradient(180deg, rgba(0,153,255,.65), rgba(0,92,204,.55));border-color:rgba(0,153,255,.45)}
.switch-row input:checked + .switch-ui:before{transform:translateX(24px)}
.switch-copy{display:block;min-width:0}
.switch-title{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
.switch-help{display:block;margin-top:4px;color:rgba(255,255,255,.68);font-size:12.8px;line-height:1.35}
.switch-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:-.01em;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06)}
.switch-badge.on{border-color:rgba(255,64,64,.28);background:linear-gradient(180deg, rgba(255,64,64,.18), rgba(255,64,64,.08));color:#ffeaea}
.switch-badge.off{border-color:rgba(0,153,255,.22);background:rgba(0,153,255,.10);color:#d9f0ff}
html[data-theme="light"] .switch-row{background:rgba(10,18,36,.035);border-color:rgba(0,0,0,.10)}
html[data-theme="light"] .switch-help{color:rgba(0,0,0,.60)}
html[data-theme="light"] .switch-ui{background:rgba(10,18,36,.05);border-color:rgba(0,0,0,.10)}

/* ===== Premium CTA: "Р’С…од РІ LMS" ===== */
.btn.lms-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg, rgba(12,20,34,.92), rgba(10,18,30,.56));box-shadow:0 18px 60px rgba(0,0,0,.35),0 0 0 1px rgba(98,180,255,.18) inset;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.btn.lms-btn .lms-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;opacity:.92}
.btn.lms-btn .lms-ico svg{width:18px;height:18px}
.btn.lms-btn .lms-text{white-space:nowrap;font-weight:800;letter-spacing:-.01em}
.btn.lms-btn .lms-shine{position:absolute;width:56%;height:240%;left:-70%;top:-70%;pointer-events:none;z-index:1;transform:rotate(14deg);background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,.06) 22%, rgba(98,180,255,.34) 45%, rgba(255,255,255,.10) 62%, transparent 100%);filter:blur(1.2px);opacity:.42;animation:lmsShimmer 3.8s ease-in-out infinite}
.btn.lms-btn::before{content:"";position:absolute;inset:-40%;pointer-events:none;background:radial-gradient(600px 220px at 18% 10%, rgba(98,180,255,.30), transparent 62%),radial-gradient(520px 210px at 88% 85%, rgba(255,120,150,.16), transparent 64%),radial-gradient(520px 220px at 60% 0%, rgba(180,255,240,.10), transparent 62%);filter:blur(18px);opacity:.62;animation:lmsAura 5.5s ease-in-out infinite alternate}
.btn.lms-btn::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));mix-blend-mode:overlay;opacity:.65}
.btn.lms-btn > span:not(.lms-shine){position:relative;z-index:2}
.btn.lms-btn:hover{transform:translateY(-1px);border-color:rgba(98,180,255,.32);box-shadow:0 20px 70px rgba(0,0,0,.45),0 0 0 1px rgba(98,180,255,.30) inset}
.btn.lms-btn:hover .lms-shine{opacity:.78;animation-duration:2.4s}
.btn.lms-btn:active{transform:translateY(0)}
.btn.lms-btn:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(98,180,255,.28),0 22px 70px rgba(0,0,0,.45),0 0 0 1px rgba(98,180,255,.30) inset}

.drawer-lms{width:100%;justify-content:center;margin:10px 0 6px}

html[data-theme="light"] .btn.lms-btn{border-color:rgba(0,0,0,.10);background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,247,250,.76));box-shadow:0 18px 60px rgba(0,0,0,.12),0 0 0 1px rgba(40,120,255,.18) inset}
html[data-theme="light"] .btn.lms-btn::before{opacity:.22;filter:blur(18px)}
html[data-theme="light"] .btn.lms-btn::after{opacity:.45}

@media (max-width: 980px){
  .btn.lms-btn{padding:10px 12px}
  .btn.lms-btn .lms-text{display:none}
}
@media (max-width: 720px){
  header.site .right-tools .lms-btn{display:none}
}

@keyframes lmsAura{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,1%,0) scale(1.02)}}
@keyframes lmsShimmer{0%{transform:translateX(0) rotate(14deg)}55%{transform:translateX(260%) rotate(14deg)}100%{transform:translateX(260%) rotate(14deg)}}

@media (prefers-reduced-motion: reduce){
  .btn.lms-btn::before{animation:none}
  .btn.lms-btn .lms-shine{animation:none;opacity:.18}
}


/* Meetups / Eventbar */
.eventbar-wrap{margin-top:10px}
.eventbar{
  position:relative;
  display:flex;
  align-items:stretch;
  gap:14px;
  padding:12px 12px;
  border-radius:18px;
  border:1px solid var(--stroke);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.theme-light .eventbar{
  background:linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.02));
}
.eventbar:before{
  content:'';
  position:absolute; inset:-1px;
  background:radial-gradient(1000px 300px at 15% 0%, rgba(85,170,255,.18), transparent 60%),
             radial-gradient(700px 220px at 85% 100%, rgba(255,120,150,.12), transparent 60%);
  pointer-events:none;
  filter:blur(0.2px);
}
.eventbar > *{position:relative; z-index:1}
.eventbar-left{display:flex; align-items:center; gap:10px; min-width:230px}
.eventbar-dot{
  width:12px; height:12px; border-radius:50%;
  background:linear-gradient(180deg, rgba(120,255,210,.95), rgba(70,180,255,.85));
  box-shadow:0 0 0 6px rgba(120,255,210,.12);
}
.eventbar-meta .eventbar-k{font-size:12px; color:var(--muted)}
.eventbar-meta .eventbar-h{font-size:15px; font-weight:650; letter-spacing:.2px}
.eventbar-track{
  display:flex;
  gap:12px;
  flex:1;
  overflow:hidden;
  scroll-behavior:smooth;
}
.eventbar-card{
  flex:0 0 420px;
  max-width:420px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.14);
  text-decoration:none;
}
.theme-light .eventbar-card{background:rgba(255,255,255,.65); border-color:rgba(0,0,0,.08)}
.eventbar-card:hover{transform:translateY(-1px); box-shadow:var(--shadow-soft)}
.eventbar-title{font-weight:650; font-size:14px}
.eventbar-sub{margin-top:4px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.eventbar-right{display:flex; align-items:center; gap:8px}
.eventbar-btn,.eventbar-close{
  width:38px; height:38px; border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:var(--text);
}
.theme-light .eventbar-btn,.theme-light .eventbar-close{border-color:rgba(0,0,0,.10); background:rgba(0,0,0,.03)}
.eventbar-btn:hover,.eventbar-close:hover{background:rgba(255,255,255,.10)}
.eventbar-close{font-size:18px; line-height:1}
@media (max-width: 980px){
  .eventbar{flex-direction:column; align-items:stretch}
  .eventbar-left{min-width:auto}
  .eventbar-card{flex-basis: 82vw; max-width:none}
  .eventbar-right{justify-content:flex-end}
}

/* Registration form UI */
.event-page{display:flex; flex-direction:column; gap:14px}
.event-hero{padding:18px}
.event-hero-top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.event-hero-badges{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.event-hero-actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.event-hero-title{margin:6px 0 0; font-size: clamp(24px, 2.6vw, 36px); letter-spacing:-.03em; line-height:1.1}
.event-meta-row{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.event-meta-item{padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04)}
.theme-light .event-meta-item{border-color:rgba(0,0,0,.10); background:rgba(0,0,0,.02)}
/* Event page layout shell */
.event-shell{padding:16px; overflow:visible}
.event-shell:hover{transform:none; box-shadow: var(--shadow2); border-color: var(--border)}
.event-shell .macwin{width:100%}

.event-layout{display:grid; grid-template-columns: 1fr 1fr; gap:16px; align-items:start}
@media (max-width: 980px){ .event-layout{grid-template-columns:1fr} }
.event-main{display:flex; flex-direction:column; gap:14px; min-width:0}
.event-panel{padding:16px 16px}
.event-panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px}
.event-panel-title{text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:860; color:var(--muted)}
.event-side{display:flex; flex-direction:column; gap:14px; min-width:0}
.event-actions{display:flex; gap:10px; flex-wrap:wrap}
.event-side .reg-form{grid-template-columns:1fr}
.event-side .reg-inline{flex-wrap:wrap}
.event-side .reg-inline .input{min-width: 180px}
.event-side .macwin-body{max-height:none; overflow:visible}
.event-main .macwin-body{max-height:none; overflow:visible}

.event-grid{display:grid; grid-template-columns: 1.2fr .85fr; gap:18px; margin-top:14px}
@media (max-width: 980px){ .event-grid{grid-template-columns:1fr} }
.event-body{display:flex; flex-direction:column; gap:14px}
.event-manage{padding:14px; border-radius:16px; border:1px solid var(--stroke); background:rgba(255,255,255,.02)}
.theme-light .event-manage{background:rgba(0,0,0,.02)}
.reg-inline{display:flex; gap:10px}
.reg-inline .input{flex:1}
.reg-form{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.reg-field.wide{grid-column: 1 / -1}
.reg-field .label{font-size:12px; color:var(--muted); margin-bottom:6px}
.reg-field .req{color:rgba(255,120,150,.95); margin-left:4px}
.reg-filecard{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:16px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04)}
.theme-light .reg-filecard{border-color:rgba(0,0,0,.10); background:rgba(0,0,0,.02)}
.reg-fileleft{display:flex; align-items:center; gap:12px; min-width:0}
.reg-fileicon{width:40px; height:40px; flex:none; border-radius:14px; border:1px solid rgba(255,255,255,.14); background:radial-gradient(120% 120% at 20% 15%, rgba(90,190,255,.18), rgba(0,113,227,.06)); display:flex; align-items:center; justify-content:center; font-size:18px; line-height:1}
.theme-light .reg-fileicon{border-color:rgba(0,0,0,.10); background:radial-gradient(120% 120% at 20% 15%, rgba(0,113,227,.10), rgba(0,0,0,.02))}
.reg-filetext{display:flex; flex-direction:column; gap:2px; min-width:0}
.reg-filetitle{font-weight:850; font-size:14px; line-height:1.15; letter-spacing:-.01em}
.reg-filename{font-size:13px; color:rgba(255,255,255,.78); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:min(520px, 58vw)}
.theme-light .reg-filename{color:rgba(0,0,0,.70)}
.reg-filemeta{font-size:12px; color:var(--muted)}
.reg-fileactions{display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap}
@media (max-width: 560px){
  .reg-filecard{align-items:flex-start}
  .reg-filename{max-width: 52vw}
}
.reg-divider{grid-column:1/-1; height:1px; background:var(--stroke); opacity:.9; margin:6px 0}
.reg-heading{grid-column:1/-1}
.reg-heading h3{margin:0; font-size:15px}
.reg-note{grid-column:1/-1; padding:10px 12px; border-radius:14px; border:1px dashed rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:var(--muted); font-size:13px}
.theme-light .reg-note{border-color:rgba(0,0,0,.14); background:rgba(0,0,0,.02)}
.reg-classgrid{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.reg-checkgrid{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.reg-checkitem,.reg-radioitem{display:flex; gap:8px; align-items:center; padding:10px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04)}
.theme-light .reg-checkitem,.theme-light .reg-radioitem{border-color:rgba(0,0,0,.10); background:rgba(0,0,0,.02)}
.reg-checkline{display:flex; gap:10px; align-items:flex-start; padding:10px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04)}
.theme-light .reg-checkline{border-color:rgba(0,0,0,.10); background:rgba(0,0,0,.02)}
.help{margin-top:6px; font-size:12px; color:var(--muted)}
.codebox{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:14px; border:1px solid var(--stroke); background:rgba(0,0,0,.14)}
.theme-light .codebox{background:rgba(255,255,255,.6)}
.codeval{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:18px; letter-spacing:.6px}
.successbox .success-hero{font-weight:750; font-size:15px}

.eventlist{display:grid; gap:12px}
.eventcard{display:block; padding:14px 14px; border-radius:18px; border:1px solid var(--stroke); background:rgba(255,255,255,.02); text-decoration:none}
.theme-light .eventcard{background:rgba(0,0,0,.02)}
.eventcard-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.eventcard-title{font-weight:750}
.eventcard-sub{margin-top:6px; color:var(--muted); font-size:13px}

/* Admin meetups UI */
.admin-split{display:grid; grid-template-columns: 1fr 1.1fr; gap:16px; margin-top:10px}
@media (max-width: 980px){ .admin-split{grid-template-columns:1fr} }
.admin-section-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-top:12px; margin-bottom:12px}
.admin-section-actions{display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap}

.meetups-grid{display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:12px; margin-top:12px}
@media (max-width: 980px){ .meetups-grid{grid-template-columns:1fr} }
.meetup-card{padding:14px 14px; border-radius:18px; border:1px solid var(--stroke); background:rgba(255,255,255,.02); display:flex; flex-direction:column; gap:10px}
.theme-light .meetup-card{background:rgba(0,0,0,.02)}
.meetup-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.meetup-card-title{font-weight:800; font-size:15px; line-height:1.2}
.meetup-card-sub{margin-top:6px; font-size:12px; color:var(--muted); max-width: 46ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.meetup-card-pills{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.meetup-card-meta{display:flex; gap:8px; flex-wrap:wrap}
.meetup-card-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.list{display:grid; gap:10px}
.list-item{display:flex; justify-content:space-between; gap:12px; padding:12px 12px; border-radius:16px; border:1px solid var(--stroke); background:rgba(255,255,255,.02)}
.theme-light .list-item{background:rgba(0,0,0,.02)}
.list-item.active{outline:2px solid rgba(85,170,255,.30)}
.list-title{font-weight:700}
.list-sub{margin-top:6px; display:flex; gap:6px; flex-wrap:wrap}
.list-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.grid3{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px}
.grid4{display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:10px}
@media (max-width: 980px){ .grid3,.grid4{grid-template-columns:1fr} .grid2{grid-template-columns:1fr} }
.field .label{font-size:12px; color:var(--muted); margin-bottom:6px}
.htmlfield-actions{display:flex; gap:8px; align-items:center; margin-bottom:8px}
.htmlfield-actions .hint{font-size:12px; color:var(--muted)}
.checkline{display:flex; gap:10px; align-items:center; padding:10px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04)}
.theme-light .checkline{border-color:rgba(0,0,0,.10); background:rgba(0,0,0,.02)}

/* Admin: meetup constructor grade picker (5–11) */
.grade-picks{display:flex; flex-wrap:wrap; gap:8px}
.grade-chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); cursor:pointer; user-select:none}
.theme-light .grade-chip{border-color:rgba(0,0,0,.12); background:rgba(0,0,0,.02)}
.grade-chip input{margin:0}
.seg{display:flex; gap:8px}
.seg-item{flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); cursor:pointer}
.theme-light .seg-item{border-color:rgba(0,0,0,.10); background:rgba(0,0,0,.02)}
.seg-item input{accent-color: var(--accent); }
.aud-box{margin-top:10px; padding:12px; border-radius:14px; border:1px dashed rgba(255,255,255,.14); background:rgba(255,255,255,.03)}
.theme-light .aud-box{border-color:rgba(0,0,0,.14); background:rgba(0,0,0,.02)}
.aud-grid{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px}
.checkchip{display:flex; gap:10px; align-items:center; padding:10px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04)}
.theme-light .checkchip{border-color:rgba(0,0,0,.10); background:rgba(0,0,0,.02)}
.stats-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}
.stat{padding:12px 12px; border-radius:16px; border:1px solid var(--stroke); background:rgba(255,255,255,.02); min-width:160px}
.theme-light .stat{background:rgba(0,0,0,.02)}
.stat.grow{flex:1; min-width:260px}
.stat-k{font-size:12px; color:var(--muted)}
.stat-v{font-size:22px; font-weight:800; margin-top:4px}
.spark{display:flex; gap:8px; align-items:flex-end; height:92px; margin-top:10px}
.spark-col{display:flex; flex-direction:column; align-items:center; gap:6px; width:36px}
.spark-bar{width:100%; border-radius:10px; background:linear-gradient(180deg, rgba(85,170,255,.95), rgba(140,255,210,.75))}
.spark-lab{font-size:10px; color:var(--muted)}
.table{display:grid; gap:8px}
.tr{display:grid; grid-template-columns: 160px 130px 1fr 80px 120px 120px; gap:10px; align-items:center; padding:10px 12px; border-radius:14px; border:1px solid var(--stroke); background:rgba(255,255,255,.02)}
.theme-light .tr{background:rgba(0,0,0,.02)}
.tr.head{background:transparent; border:none; padding:0 2px; color:var(--muted); font-size:12px}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.modal-overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(0,0,0,.55); backdrop-filter: blur(10px); z-index:9999}
/* IMPORTANT: respect the hidden attribute (UA stylesheet may be overridden by .modal-overlay display:flex). */
.modal-overlay[hidden],
.modal-overlay[aria-hidden="true"]{display:none !important;}

/* ---------- Feed: class picker modal ---------- */
.classpick-modal{
  width: min(720px, 96vw);
  max-height: 88vh;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,15,17,.92);
  box-shadow: var(--shadow);
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
}
.theme-light .classpick-modal{ background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.10); }
.modal-overlay.open .classpick-modal{ transform: translateY(0) scale(1); opacity: 1; }
.classpick-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(140% 120% at 20% 0%, rgba(0,194,255,.12), rgba(0,113,227,.06));
}
.theme-light .classpick-head{ border-bottom-color: rgba(0,0,0,.08); }
.classpick-title{ font-weight: 880; letter-spacing: -.02em; font-size: 16px; }
.classpick-body{ padding: 14px; overflow:auto; }
.classpick-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 680px){ .classpick-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
.classpick-btn{
  text-align:left;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 12px 12px;
  cursor:pointer;
  transition: transform .18s var(--ease), border-color .20s var(--ease), box-shadow .20s var(--ease), background .20s var(--ease);
}
.theme-light .classpick-btn{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.03); }
.classpick-btn:hover{ transform: translateY(-1px); border-color: rgba(0,113,227,.28); box-shadow: var(--shadow2); background: rgba(255,255,255,.06); }
.theme-light .classpick-btn:hover{ background: rgba(0,0,0,.04); }
.classpick-btn.active{ border-color: rgba(0,194,255,.55); box-shadow: 0 0 0 3px rgba(0,113,227,.14), var(--shadow2); }
.cp-k{ font-weight: 920; letter-spacing: -.02em; font-size: 18px; }
.cp-s{ margin-top: 4px; font-size: 12px; color: var(--muted); font-weight: 720; }
.classpick-foot{ margin-top: 12px; display:flex; justify-content:flex-end; }

/* ---------- Dev signature modal (public): triple click on teacher photo ---------- */
.devsig-modal{
  width: min(680px, 94vw);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,15,17,.86);
  box-shadow: var(--shadow);
  position: relative;
  padding: 18px 18px;
  transform: translateY(8px) scale(.98);
  opacity: 0;
  transition: transform .18s var(--ease), opacity .18s var(--ease);
  overflow: hidden;
}
.theme-light .devsig-modal{ background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.10); }
.modal-overlay.open .devsig-modal{ transform: translateY(0) scale(1); opacity: 1; }
.devsig-close{ position:absolute; top: 12px; right: 12px; }
.devsig-stone{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(140% 120% at 16% 0%, rgba(0,194,255,.16), rgba(0,113,227,.08)),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: 16px 16px;
}
.theme-light .devsig-stone{
  border-color: rgba(0,0,0,.10);
  background:
    radial-gradient(140% 120% at 16% 0%, rgba(0,113,227,.10), rgba(0,0,0,.02)),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.01));
}
.devsig-kicker{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 820;
}
.devsig-phrase{
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 920;
  letter-spacing: -.02em;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.devsig-sub{
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 740;
}

/* HTML editor modal */
.html-modal{
  width: min(1060px, 96vw);
  max-height: min(86vh, 860px);
  display:flex;
  flex-direction:column;
  background: rgba(10,14,22,.72);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.html-modal-head{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  justify-content:space-between;
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(140% 120% at 20% 0%, rgba(0,194,255,.10), rgba(0,113,227,.06));
}
.html-modal-title{ font-weight: 860; letter-spacing: -.02em; font-size: 16px; }
.html-modal-actions{ display:flex; gap: 10px; align-items:center; }
.html-modal-body{ padding: 12px 14px 14px; display:flex; flex-direction:column; gap: 10px; overflow:auto; }
.html-editor-area{ min-height: 520px; resize: vertical; }
.html-modal-foot{ opacity: .9; }

/* TinyMCE in dark glass UI */
.html-modal .tox{ border-radius: 18px; overflow:hidden; }
.html-modal .tox .tox-editor-container{ background: transparent; }
.html-modal .tox .tox-edit-area__iframe{ background: rgba(255,255,255,.02) !important; }

/* TinyMCE floating UI (menus/tooltips) is appended to <body> and may sit behind our high-z modal overlay.
   Force it above the overlay so dropdowns (File/Edit/Insert/Format/Table) appear on top. */
.tox-tinymce-aux,
.tox .tox-dialog-wrap,
.tox .tox-dialog,
.tox .tox-tooltip,
.tox .tox-menu{ z-index: 10050 !important; }

@media (max-width: 700px){
  .html-editor-area{ min-height: 420px; }
  .html-modal-actions{ flex-wrap:wrap; justify-content:flex-end; }
}
body.modal-open{overflow:hidden}
.reg-modal{width:min(920px, 96vw); max-height:90vh; overflow:auto; padding:16px; border-radius:22px; border:1px solid rgba(255,255,255,.12); background:rgba(15,15,17,.92); box-shadow:0 40px 120px rgba(0,0,0,.55)}
.theme-light .reg-modal{background:rgba(255,255,255,.92); border-color:rgba(0,0,0,.10)}
.reg-modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.reg-modal-title{font-weight:800; font-size:16px}
.reg-kv{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px}
@media (max-width: 980px){ .reg-kv{grid-template-columns:1fr} .tr{grid-template-columns: 140px 120px 1fr; grid-auto-rows:auto} .tr > div:nth-child(n+4){display:none} }
.kv{padding:10px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04)}
.theme-light .kv{border-color:rgba(0,0,0,.10); background:rgba(0,0,0,.02)}
.kv .k{font-size:12px; color:var(--muted)}
.kv .v{margin-top:6px; font-weight:700}
.reg-answers{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
@media (max-width: 980px){ .reg-answers{grid-template-columns:1fr} }
.ans{padding:10px 10px; border-radius:14px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04)}
.theme-light .ans{border-color:rgba(0,0,0,.10); background:rgba(0,0,0,.02)}
.ans .k{font-size:12px; color:var(--muted)}
.ans .v{margin-top:6px; white-space:pre-wrap}
.reg-statusbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.filters{margin-top:12px}

/* ---------- Image quick view (diplomas on главной) ---------- */
.img-modal{
  width: min(1100px, 96vw);
  max-height: 92vh;
  overflow: hidden;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(15,15,17,.92);
  box-shadow:0 40px 120px rgba(0,0,0,.55);
  display:flex;
  flex-direction:column;
  gap: 12px;
}
.theme-light .img-modal{ background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.10); }
.img-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.img-modal-title{ font-weight: 900; font-size: 15px; letter-spacing: -.01em; }
.img-modal-meta{ margin-top: 4px; }
.img-modal-body{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.theme-light .img-modal-body{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.02); }
.img-modal-body img{
  width: 100%;
  height: 100%;
  max-height: 74vh;
  object-fit: contain;
  border-radius: 14px;
}
@media (max-width: 720px){
  .img-modal{ padding: 12px; }
  .img-modal-body{ padding: 8px; }
  .img-modal-body img{ max-height: 78vh; }
}

/* --- About page (О себе) --- */
.about-wrap{ margin-top: 10px; }
.about-card{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 18px; align-items: start; }
.about-left{ min-width: 0; }
.about-kicker{ display:inline-block; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); font-size: 12px; }
.theme-light .about-kicker{ background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.10); }
.about-name{ margin-top: 12px; font-size: 34px; font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.about-sub{ margin-top: 10px; opacity: .88; }
.about-links{ margin-top: 12px; display:flex; flex-wrap:wrap; gap: 10px; }
.about-link{ display:inline-flex; align-items:center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); text-decoration:none; color: inherit; font-size: 13px; }
.about-link:hover{ background: rgba(255,255,255,.08); }
.theme-light .about-link{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.03); }
.theme-light .about-link:hover{ background: rgba(0,0,0,.05); }

.about-photo.fit-contain img{ object-fit: contain; background: rgba(0,0,0,.18); }
.theme-light .about-photo.fit-contain img{ background: rgba(0,0,0,.04); }

.about-body{ margin-top: 18px; display:grid; gap: 12px; }

.about-section{
  padding: 14px 14px 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
}
.theme-light .about-section{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
}

.about-section h3{
  margin: 0 0 10px 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .90;
  display:flex;
  align-items:center;
  gap: 10px;
}
.about-section h3::before{
  /* Removed decorative blue dot — it looked visually redundant */
  content: none;
  display: none;
}

.about-section-body{ display:grid; gap: 8px; }
.about-section-body > p{
  margin: 0;
  padding-left: 0;
  line-height: 1.55;
  opacity: .95;
}
.about-section-body > p::before{
  /* Убрали СЃРµрую точку Сѓ абзацев */
  content: none;
  display: none;
}
.theme-light .about-section-body > p::before{ content: none; display:none; }

/*
  Bullet markers are needed only in specific sections
  (for example: "Awards...", "Professional development").
  Such sections are marked with .about-section--list in markup.
*/
.about-section--list .about-section-body > p{
  padding-left: 18px;
  position: relative;
}
.about-section--list .about-section-body > p::before{
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  position: absolute;
  left: 0;
  top: .68em;
  background: rgba(255,255,255,.28);
}
.theme-light .about-section--list .about-section-body > p::before{
  background: rgba(0,0,0,.28);
}

.about-section-body ul{ margin: 0 0 0 18px; }
.about-section-body a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35);
  text-underline-offset: 3px;
}
.theme-light .about-section-body a{ text-decoration-color: rgba(0,0,0,.30); }

.about-right{ display:flex; flex-direction:column; gap: 14px; }
.about-photo{ position:relative; display:block; border-radius: 22px; overflow:hidden; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.theme-light .about-photo{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.02); box-shadow: 0 18px 50px rgba(0,0,0,.15); }
.about-photo img{ width:100%; height: 420px; object-fit: cover; display:block; }
.about-photo.placeholder{ height: 420px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 6px; }
.about-photo-cap{ position:absolute; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.16); font-size: 12px; opacity: .95; }


/* --- Exams page (ОГЭ/ЕГЭ) --- */
.exams-tabs,
.exams-admin-tabs{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.exams-tab{
  text-decoration:none;
  color: inherit;
  display:flex;
  flex-direction:column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
  min-width: 148px;
}
.exams-tab:hover{ background: rgba(255,255,255,.08); transform: translateY(-1px); }
.theme-light .exams-tab{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.03); }
.theme-light .exams-tab:hover{ background: rgba(0,0,0,.05); }

.exams-tab.active{
  border-color: rgba(143,200,255,.55);
  background: linear-gradient(135deg, rgba(90,170,255,.20), rgba(255,255,255,.04));
}
.theme-light .exams-tab.active{
  border-color: rgba(70,140,255,.55);
  background: rgba(70,140,255,.10);
}

.exams-tab-label{ font-weight: 900; letter-spacing: -.01em; }
.exams-tab-hint{ font-size: 12px; opacity: .72; }

.exams-content{ margin-top: 6px; }
.exams-grid{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .exams-grid{ grid-template-columns: 1fr; }
  .exams-tab{ min-width: 132px; }
}

.exams-block{
  padding: 14px 14px 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow: 0 18px 55px rgba(0,0,0,.22);
  overflow:hidden;
}
.theme-light .exams-block{
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  box-shadow: 0 18px 55px rgba(0,0,0,.08);
}

.exams-block-title{
  margin: 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -.02em;
}

.exams-block-body{
  margin-top: 10px;
  display:grid;
  gap: 10px;
  line-height: 1.55;
}
.exams-block-body p{ margin: 0; opacity: .95; }
.exams-block-body h3{
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .88;
}
.exams-block-body ul{
  margin: 0 0 0 18px;
}

.exams-block-body a,
.exams-links a{
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35);
  text-underline-offset: 3px;
}
.theme-light .exams-block-body a,
.theme-light .exams-links a{
  text-decoration-color: rgba(0,0,0,.30);
}

.exams-block-links{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.theme-light .exams-block-links{ border-top-color: rgba(0,0,0,.10); }

.exams-links{
  margin: 0 0 0 18px;
  display:grid;
  gap: 6px;
}
.theme-light .about-photo-cap{ background: rgba(255,255,255,.70); border-color: rgba(0,0,0,.12); }
.about-gallery{ padding: 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.03); }
.theme-light .about-gallery{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.02); }
.about-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.about-thumb{ display:block; border-radius: 14px; overflow:hidden; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); }
.theme-light .about-thumb{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.02); }
.about-thumb img{ width:100%; height: 90px; object-fit: cover; display:block; }
@media (max-width: 980px){
  .about-card{ grid-template-columns: 1fr; }
  .about-photo img, .about-photo.placeholder{ height: 360px; }
  .about-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px){
  .about-name{ font-size: 28px; }
  .about-photo img, .about-photo.placeholder{ height: 300px; }
  .about-grid{ grid-template-columns: repeat(3, 1fr); }
}


/* --- About page polish (О себе) --- */
.section-card--about{ overflow: visible; }

.about-shell{
  margin-top: 12px;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 360px at 18% -10%, rgba(0,113,227,.18), transparent 60%),
    radial-gradient(700px 320px at 92% 10%, rgba(227,25,55,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  position: relative;
}
.theme-light .about-shell{
  border-color: rgba(0,0,0,.10);
  background:
    radial-gradient(900px 360px at 18% -10%, rgba(0,113,227,.10), transparent 60%),
    radial-gradient(700px 320px at 92% 10%, rgba(227,25,55,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,.96));
}
.about-shell::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 26px;
  pointer-events:none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  opacity: .55;
}

.about-card{
  grid-template-columns: 1.25fr .75fr;
  gap: 24px;
}
.about-left{ padding: 10px 10px 8px; }
.about-kicker{
  padding: 7px 12px;
  font-weight: 700;
  letter-spacing: .01em;
  backdrop-filter: blur(10px);
}
.about-name{
  font-size: 42px;
  letter-spacing: -.03em;
  line-height: 1.02;
}
.about-sub{
  font-size: 15px;
  line-height: 1.45;
}
.about-tags{ margin-top: 14px; display:flex; flex-wrap:wrap; gap: 8px; }
.about-tag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  opacity: .95;
}
.theme-light .about-tag{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.03); }

.about-facts{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.fact{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.theme-light .fact{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.02); }
.fact .k{ font-size: 11px; color: var(--muted); }
.fact .v{ margin-top: 4px; font-weight: 900; letter-spacing: -.01em; }
.fact .s{ margin-top: 4px; font-size: 12px; color: var(--muted); }

.about-links{ margin-top: 14px; gap: 8px; }
.about-link{
  padding: 9px 12px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
}
.about-link::before{
  content:"рџ”—";
  font-size: 13px;
  line-height: 1;
}
.about-link.type-mail::before{ content:"вњ‰пёЏ"; }
.about-link.type-tel::before{ content:"рџ“ћ"; }
.about-link.type-tg::before{ content:"вњ€пёЏ"; }
.about-link.type-vk::before{ content:"рџџ¦"; }

.about-body{
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.75;
  max-width: 78ch;
}
.about-body p{ margin: 0 0 14px 0; }
.about-body a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.about-body a:hover{ opacity: .9; }

.about-right{ padding: 10px 10px 8px; gap: 16px; }
.about-photo{
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  box-shadow: 0 26px 80px rgba(0,0,0,.40);
}
.theme-light .about-photo{
  border-color: rgba(0,0,0,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.14);
}
.about-photo img{ height: 460px; }
.about-photo-cap{
  right: 14px;
  bottom: 14px;
  padding: 9px 12px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.about-gallery{
  padding: 16px;
  border-radius: 22px;
}
.about-grid{ grid-template-columns: repeat(4, 1fr); gap: 10px; }
.about-thumb{ border-radius: 16px; }
.about-thumb img{ height: 96px; }

@media (max-width: 980px){
  .about-shell{ padding: 14px; }
  .about-card{ grid-template-columns: 1fr; }
  .about-name{ font-size: 34px; }
  .about-photo img, .about-photo.placeholder{ height: 360px; }
  .about-grid{ grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 560px){
  .about-name{ font-size: 28px; }
  .about-facts{ grid-template-columns: 1fr; }
  .about-photo img, .about-photo.placeholder{ height: 310px; }
  .about-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* === Cloud (Admin) === */
.cloud-bar{ height: 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface3); overflow:hidden; position:relative; }
.cloud-bar > span{ display:block; height:100%; width:0; background: linear-gradient(90deg, rgba(0,113,227,.95), rgba(94,92,230,.9)); border-radius: 999px; box-shadow: 0 10px 30px rgba(0,113,227,.14); }

.cloud-ring{ width: 120px; height: 120px; border-radius: 50%; position: relative; display:flex; align-items:center; justify-content:center; 
  background: conic-gradient(rgba(0,113,227,.95) calc(var(--p)*1%), rgba(255,255,255,.08) 0);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow2);
}
.cloud-ring::after{ content:""; position:absolute; inset: 12px; border-radius: 50%; background: radial-gradient(120px 120px at 30% 20%, rgba(255,255,255,.10), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.10); }
.cloud-ring-center{ position:absolute; inset: 12px; border-radius: 50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px; z-index:2; }
.cloud-ring-num{ font-size: 22px; font-weight: 920; letter-spacing: -.02em; }
.cloud-ring-sub{ font-size: 12px; font-weight: 800; color: var(--muted); }

.cloud-kpi-row{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 720px){
  .cloud-kpi-row{ grid-template-columns: 1fr; }
  .cloud-ring{ width: 104px; height: 104px; }
}
.cloud-kpi{ border: 1px solid var(--border); background: var(--surface3); border-radius: 18px; padding: 12px 12px; }
.cloud-kpi-v{ font-size: 20px; font-weight: 920; letter-spacing:-.02em; margin-top:4px; }

.cloud-upload-grid{ display:grid; grid-template-columns: 1.3fr .9fr; gap: 12px; align-items:start; }
 (max-width: 860px){ .cloud-upload-grid{ grid-template-columns: 1fr; } }

.cloud-drop{ position:relative; border: 1px dashed var(--border); background: radial-gradient(900px 260px at 20% 10%, rgba(0,113,227,.10), rgba(255,255,255,.03)); border-radius: 22px; padding: 18px; min-height: 180px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.cloud-drop.dragover{ border-color: rgba(0,113,227,.85); background: radial-gradient(900px 260px at 20% 10%, rgba(0,113,227,.18), rgba(255,255,255,.04)); transform: translateY(-1px); }
.cloud-file{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.cloud-drop-inner{ text-align:center; pointer-events:none; }
.cloud-drop-ico{ width: 44px; height: 44px; border-radius: 14px; display:inline-flex; align-items:center; justify-content:center; background: rgba(0,113,227,.12); border: 1px solid rgba(0,113,227,.22); font-size: 22px; margin: 0 auto 10px; }
.cloud-drop-title{ font-weight: 920; letter-spacing:-.02em; font-size: 18px; }
.cloud-drop-sub{ margin-top: 4px; font-size: 12px; color: var(--muted); font-weight: 800; }

.cloud-meta{ margin-top: 10px; }
.cloud-pill{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface3); }
.cloud-pill strong{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cloud-prog{ height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--border); overflow:hidden; margin-top: 10px; }
.cloud-prog > span{ display:block; height:100%; width:0; background: linear-gradient(90deg, rgba(52,199,89,.95), rgba(0,113,227,.92)); border-radius: 999px; transition: width .08s linear; }

.cloud-msg{ margin-top: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,.04); font-weight: 800; }
.cloud-msg.ok{ border-color: rgba(52,199,89,.35); background: rgba(52,199,89,.10); }
.cloud-msg.warn{ border-color: rgba(255,159,10,.35); background: rgba(255,159,10,.10); }


/* ---------- Easter egg: Kozhemya heart ---------- */
.easter-heart-overlay{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1600;
  opacity: 0;
  transition: opacity .18s var(--ease);
}
.easter-heart-overlay.show{ opacity: 1; }

.easter-heart{
  font-size: clamp(64px, 10vw, 92px);
  filter: drop-shadow(0 20px 44px rgba(0,0,0,.45));
  transform: translateY(8px) scale(.82);
  opacity: 0;
  animation: easterPop .55s var(--ease) forwards;
}
.easter-heart.broken{
  animation: easterShatter 1.05s var(--ease) forwards;
}

@keyframes easterPop{
  0%{ opacity: 0; transform: translateY(10px) scale(.72); }
  55%{ opacity: 1; transform: translateY(0) scale(1.06); }
  100%{ opacity: 1; transform: translateY(0) scale(1.00); }
}

@keyframes easterShatter{
  0%{ opacity: 1; transform: translateY(0) scale(1.00) rotate(0deg); }
  18%{ transform: translateY(0) scale(1.02) rotate(-5deg); }
  32%{ transform: translateY(0) scale(1.02) rotate(6deg); }
  46%{ transform: translateY(0) scale(1.00) rotate(-4deg); }
  60%{ transform: translateY(2px) scale(.98) rotate(3deg); }
  100%{ opacity: 0; transform: translateY(14px) scale(.78) rotate(0deg); }
}

/* ---------- Cloud: files list + QR modal ---------- */
.cloud-tools{ display:flex; gap: 10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.cloud-search{ flex: 1; min-width: 220px; }
.cloud-tool-row{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

.cloud-files{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 860px){ .cloud-files{ grid-template-columns: 1fr; } }

.cloud-item{ border: 1px solid var(--border); background: var(--surface3); border-radius: 22px; padding: 14px; display:flex; flex-direction:column; gap: 10px; }
.cloud-item[hidden]{ display:none !important; }
.cloud-item-top{ display:flex; gap: 12px; align-items:flex-start; justify-content:space-between; }
.cloud-item-title{ font-weight: 920; letter-spacing:-.02em; font-size: 16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cloud-item-sub{ margin-top: 2px; font-size: 12px; color: var(--muted); word-break: break-all; }
.cloud-item-badges{ display:flex; gap: 8px; flex-wrap:wrap; justify-content:flex-end; }
.cloud-item-actions{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }

/* Cloud thumbnails */
.cloud-thumb{ width: 56px; height: 56px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,.04); display:flex; align-items:center; justify-content:center; overflow:hidden; flex: 0 0 auto; cursor:pointer; transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); }
.theme-light .cloud-thumb{ background: rgba(0,0,0,.02); }
.cloud-thumb:hover{ transform: translateY(-1px); border-color: rgba(0,113,227,.45); box-shadow: 0 18px 60px rgba(0,113,227,.10); }
.cloud-thumb:focus{ outline: none; border-color: rgba(0,113,227,.55); box-shadow: 0 0 0 4px rgba(0,113,227,.18); }
.cloud-thumb img{ width: 100%; height: 100%; object-fit: cover; display:block; }
.cloud-thumb-ico{ display:inline-flex; align-items:center; justify-content:center; width: 100%; height: 100%; font-weight: 940; letter-spacing:-.02em; font-size: 12px; color: var(--text); background: radial-gradient(120px 70px at 30% 20%, rgba(0,113,227,.20), rgba(255,255,255,.03)); }
.cloud-thumb[data-kind="pdf"] .cloud-thumb-ico{ background: radial-gradient(120px 70px at 30% 20%, rgba(255,159,10,.22), rgba(255,255,255,.03)); }
.cloud-thumb[data-kind="doc"] .cloud-thumb-ico{ background: radial-gradient(120px 70px at 30% 20%, rgba(48,209,88,.18), rgba(255,255,255,.03)); }
.cloud-thumb[data-kind="video"] .cloud-thumb-ico{ background: radial-gradient(120px 70px at 30% 20%, rgba(175,82,222,.20), rgba(255,255,255,.03)); }
.cloud-thumb[data-kind="audio"] .cloud-thumb-ico{ background: radial-gradient(120px 70px at 30% 20%, rgba(255,55,95,.18), rgba(255,255,255,.03)); }
.cloud-thumb[data-kind="archive"] .cloud-thumb-ico{ background: radial-gradient(120px 70px at 30% 20%, rgba(90,200,250,.18), rgba(255,255,255,.03)); }

/* View mode */
.cloud-files.is-list{ grid-template-columns: 1fr; }

/* Preview modal */
.cloudprev-modal{ width: min(1040px, 96vw); max-height: 92vh; overflow:hidden; display:flex; flex-direction:column; border-radius: 24px; border: 1px solid rgba(255,255,255,.12); background: rgba(15,15,17,.92); box-shadow: 0 40px 120px rgba(0,0,0,.55); transform: translateY(8px) scale(.98); opacity: 0; transition: transform .18s var(--ease), opacity .18s var(--ease); }
.theme-light .cloudprev-modal{ background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.10); }
.modal-overlay.open .cloudprev-modal{ transform: translateY(0) scale(1); opacity: 1; }
.cloudprev-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid rgba(255,255,255,.08); background: radial-gradient(140% 120% at 20% 0%, rgba(0,113,227,.10), rgba(255,159,10,.06)); }
.theme-light .cloudprev-head{ border-bottom-color: rgba(0,0,0,.08); }
.cloudprev-title{ font-weight: 920; letter-spacing:-.02em; font-size: 16px; margin-top: 4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cloudprev-sub{ font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-all; }
.cloudprev-actions{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
.cloudprev-body{ padding: 14px; display:grid; grid-template-columns: 1.25fr .75fr; gap: 12px; align-items:start; overflow:auto; }
@media (max-width: 920px){ .cloudprev-body{ grid-template-columns: 1fr; } }
.cloudprev-frame{ min-height: 520px; border-radius: 22px; border: 1px solid var(--border); background: rgba(255,255,255,.04); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.theme-light .cloudprev-frame{ background: rgba(0,0,0,.02); }
.cloudprev-frame img{ width: 100%; height: 100%; object-fit: contain; background: rgba(0,0,0,.02); }
.cloudprev-frame iframe{ width: 100%; height: 520px; border: 0; background: #fff; }
.cloudprev-frame video{ width: 100%; max-height: 520px; }
.cloudprev-frame audio{ width: 100%; }
.cloudprev-side{ border-radius: 22px; border: 1px solid var(--border); background: rgba(255,255,255,.04); padding: 12px; }
.theme-light .cloudprev-side{ background: rgba(0,0,0,.02); }
.cloudprev-link{ margin-top: 6px; font-weight: 800; word-break: break-all; padding: 10px 12px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,.04); }
.theme-light .cloudprev-link{ background: rgba(0,0,0,.02); }

/* ---------- Cloud admin: selection + dialogs ---------- */
.cloud-check{ width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255,255,255,.03); display:flex; align-items:center; justify-content:center; flex: 0 0 auto; }
.theme-light .cloud-check{ background: rgba(0,0,0,.02); }
.cloud-check input{ width: 18px; height: 18px; }
.cloud-item.is-selected{ border-color: rgba(0,113,227,.55); box-shadow: 0 22px 70px rgba(0,113,227,.12); }

.cloud-bulk{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 10px 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: radial-gradient(140% 120% at 20% 0%, rgba(0,113,227,.12), rgba(255,255,255,.03)); }
.theme-light .cloud-bulk{ border-color: rgba(0,0,0,.10); background: rgba(0,0,0,.03); }
.cloud-bulk-left{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; }
.cloud-bulk-right{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
.cloud-checkall{ display:flex; align-items:center; gap: 8px; font-weight: 800; font-size: 12px; color: var(--muted); }
.cloud-checkall input{ width: 18px; height: 18px; }

.cloudedit-modal{ width: min(720px, 96vw); max-height: 90vh; overflow:hidden; display:flex; flex-direction:column; border-radius: 24px; border: 1px solid rgba(255,255,255,.12); background: rgba(15,15,17,.92); box-shadow: 0 40px 120px rgba(0,0,0,.55); transform: translateY(8px) scale(.98); opacity: 0; transition: transform .18s var(--ease), opacity .18s var(--ease); }
.theme-light .cloudedit-modal{ background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.10); }
.modal-overlay.open .cloudedit-modal{ transform: translateY(0) scale(1); opacity: 1; }
.cloudedit-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid rgba(255,255,255,.08); background: radial-gradient(140% 120% at 20% 0%, rgba(255,159,10,.08), rgba(0,113,227,.06)); }
.theme-light .cloudedit-head{ border-bottom-color: rgba(0,0,0,.08); }
.cloudedit-title{ font-weight: 920; letter-spacing:-.02em; font-size: 16px; margin-top: 4px; }
.cloudedit-actions{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
.cloudedit-body{ padding: 14px; overflow:auto; }

.cloudqr-modal{ width: min(760px, 96vw); max-height: 90vh; overflow:auto; padding: 14px; border-radius: 24px; border: 1px solid rgba(255,255,255,.12); background: rgba(15,15,17,.92); box-shadow: 0 40px 120px rgba(0,0,0,.55); }
.theme-light .cloudqr-modal{ background: rgba(255,255,255,.92); border-color: rgba(0,0,0,.10); }
.cloudqr-head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; }
.cloudqr-title{ font-weight: 920; letter-spacing:-.02em; font-size: 16px; margin-top: 4px; }
.cloudqr-actions{ display:flex; gap: 10px; flex-wrap:wrap; justify-content:flex-end; }
.cloudqr-body{ margin-top: 12px; display:grid; grid-template-columns: 260px 1fr; gap: 14px; align-items:start; }
@media (max-width: 820px){ .cloudqr-body{ grid-template-columns: 1fr; } }
.cloudqr-qr{ width: 260px; max-width: 100%; border-radius: 22px; border: 1px solid var(--border); background: rgba(255,255,255,.04); padding: 12px; display:flex; align-items:center; justify-content:center; }
.theme-light .cloudqr-qr{ background: rgba(0,0,0,.02); }
.cloudqr-qr img{ width: 220px; height: 220px; border-radius: 16px; background: #fff; }
.cloudqr-link{ margin-top: 6px; font-weight: 800; word-break: break-all; padding: 10px 12px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255,255,255,.04); }
.theme-light .cloudqr-link{ background: rgba(0,0,0,.02); }


/* === Cloud (Upload) === */
.cloud-upload-grid{ display:grid; grid-template-columns: 1.3fr .9fr; gap: 12px; align-items:start; }
@media (max-width: 860px){ .cloud-upload-grid{ grid-template-columns: 1fr; } }

.cloud-drop{ position:relative; border: 1px dashed var(--border); background: radial-gradient(900px 260px at 20% 10%, rgba(0,113,227,.10), rgba(255,255,255,.03)); border-radius: 22px; padding: 18px; min-height: 178px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.cloud-drop.dragover{ border-color: rgba(0,113,227,.85); background: radial-gradient(900px 260px at 20% 10%, rgba(0,113,227,.16), rgba(255,255,255,.03)); transform: translateY(-1px); }
.cloud-file{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.cloud-drop-inner{ text-align:center; pointer-events:none; }
.cloud-drop-ico{ width: 44px; height: 44px; border-radius: 14px; display:inline-flex; align-items:center; justify-content:center; background: rgba(0,113,227,.12); border: 1px solid rgba(0,113,227,.22); font-size: 22px; margin: 0 auto 10px; }
.cloud-drop-title{ font-weight: 920; letter-spacing: -.02em; font-size: 18px; }
.cloud-drop-sub{ margin-top: 4px; font-size: 12px; color: var(--muted); font-weight: 800; }

.cloud-meta{ margin-top: 10px; }
.cloud-pill{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface3); }
.cloud-pill strong{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cloud-prog{ height: 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--border); overflow:hidden; margin-top: 10px; }
.cloud-prog > span{ display:block; height:100%; width:0; background: linear-gradient(90deg, rgba(52,199,89,.95), rgba(0,113,227,.92)); border-radius: 999px; transition: width .08s linear; }

.cloud-msg{ margin-top: 10px; padding: 10px 12px; border-radius: 16px; border: 1px solid var(--border); background: rgba(255,255,255,.04); font-weight: 800; }
.cloud-msg.ok{ border-color: rgba(52,199,89,.35); background: rgba(52,199,89,.10); }
.cloud-msg.warn{ border-color: rgba(255,159,10,.35); background: rgba(255,159,10,.10); }

/* ==========================================================
   Mobile UX pack (v91)
   Goal: better phone UX + no iPhone zoom on input focus.
   ========================================================== */
html{ -webkit-text-size-adjust: 100%; }

:root{
  --safeL: env(safe-area-inset-left, 0px);
  --safeR: env(safe-area-inset-right, 0px);
  --safeT: env(safe-area-inset-top, 0px);
  --safeB: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 820px){
  body{ overflow-x: hidden; }
  .container{
    padding-left: calc(14px + var(--safeL));
    padding-right: calc(14px + var(--safeR));
  }
}

/* iOS: РЅРµ зумить при фокусе (font-size >= 16px) */
@media (max-width: 820px){
  .input, select.input, textarea.input,
  .search-input,
  input, textarea, select{
    font-size: 16px;
    line-height: 1.25;
  }
}

/* Header: компактнее, без "ломания" ширины */
@media (max-width: 720px){
  header.site .container{ padding-top: 10px !important; padding-bottom: 10px !important; }
  .navbar{ flex-wrap: wrap; gap: 10px; }
  .brand-badge{ width: 34px; height: 34px; border-radius: 13px; }
  .brand-title{ font-size: 15px; line-height: 1.1; }
  .brand-sub{ display:none; }

  /* Hide extra header icons on mobile (they are present in the menu) */
  header.site .right-tools [data-open-search],
  header.site .right-tools [data-theme-toggle]{
    display:none !important;
  }

  header.site .right-tools{ width:100%; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  header.site .right-tools .class-switch{ flex: 0 0 100%; order: 99; justify-content: center; }
  header.site .right-tools .nav-mobile-btn{ order: 1; }
  header.site .right-tools > a.btn{ order: 2; margin-left: auto; border-radius: 999px; padding: 10px 12px; }

  .class-btn{ padding: 8px 10px; font-size: 13px; }
}

/* Pagebar: меньше, не занимает пол-экрана */
@media (max-width: 600px){
  .pagebar{ padding: 12px 12px; border-radius: 18px; }
  .pagebar-right{ display:none; }
  .pagebar-path{ display:none; }
  .pagebar-title{ font-size: 14px; }
}

/* Hero + карточки: плотнее РЅР° мобиле */
@media (max-width: 600px){
  :root{ --gap: 14px; }
  .hero-grid{ padding: 18px; }
  .hero h1{ font-size: 34px; }
  .hero p{ font-size: 15px; }
  .hero-media{ height: 260px; max-height: 320px; border-radius: 22px; }
  .hero-widgets{ gap: 10px; }
  .mini{ border-radius: 18px; }
}
@media (max-width: 420px){
  .hero-grid{ padding: 16px; }
  .hero h1{ font-size: 32px; }
  .btn{ border-radius: 14px; }
}

/* Eventbar: swipe instead of arrows + compact layout */
@media (max-width: 720px){
  .eventbar{ border-radius: 18px; }
  .eventbar-track{ overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .eventbar-card{ scroll-snap-align: start; }
}
@media (max-width: 520px){
  .eventbar{ padding: 10px; gap: 10px; }
  .eventbar-left{ gap: 10px; }
  .eventbar-meta .eventbar-h{ font-size: 14px; }
  .eventbar-card{ flex: 0 0 86vw; }
  .eventbar-right{ display:none; }
}

/* Модалки/поиск: чтобы РЅРµ вылезало Р·Р° экран */
@media (max-width: 520px){
  .search{ padding: 14px; align-items: flex-start; }
  .search-card{ border-radius: 22px; margin-top: 10px; }
  .search-top{ padding: 12px; }
  .search-kbd{ display:none; }
}

/* Р’ целом: РЅР° телефонах меньше "вылета" РІ С€ирину */
@media (max-width: 820px){
  img, video, canvas, svg{ max-width:100%; height:auto; }
  pre{ overflow:auto; }
}

/* Calendar (mobile): center month switcher nicely */
@media (max-width: 720px){
  body[data-page="calendar.php"] .section-actions{
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  body[data-page="calendar.php"] .section-actions .segmented{
    justify-content: center;
  }
  body[data-page="calendar.php"] .section-actions .segmented[aria-label="Месяц"]{
    margin-left: auto;
    margin-right: auto;
  }
}



/* === Practice: filter bar (class → topic → difficulty) === */
.filterbar--practice .filterbar-row{ flex-wrap: nowrap; }
.filterbar--practice .input{ min-width: 170px; }
.filterbar--practice .input--compact{ min-width: 120px; }
@media (max-width: 860px){
  .filterbar--practice .filterbar-row{ flex-wrap: wrap; }
  .filterbar--practice .input{ min-width: 150px; }
}


/* === PERF MODE (auto-enabled on Safari and some low-res displays) === */
html.perf{
  scroll-behavior: auto;
}

/* Remove fixed masked overlays (very expensive on some GPUs/Safari) */
html.perf body{
  background:
    radial-gradient(1200px 650px at 15% -10%, rgba(0,113,227,.22), transparent 60%),
    radial-gradient(900px 520px at 92% 0%, rgba(0,194,255,.16), transparent 62%),
    radial-gradient(700px 500px at 60% 120%, rgba(31,201,110,.09), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
html.perf body::before,
html.perf body::after{
  display:none !important;
}

/* Disable animated ambient layer */
html.perf .bg-ambient{
  display:none !important;
}

/* Turn off blur-based reveal animation (use transform+opacity only) */
html.perf .reveal{ filter:none !important; }
html.perf .reveal.show{ animation: fadeUpLite .42s var(--ease) forwards !important; }
@keyframes fadeUpLite{
  from{ opacity:0; transform: translate3d(0,12px,0); }
  to{ opacity:1; transform: translate3d(0,0,0); }
}

/* Remove backdrop/filters on large glass surfaces */
html.perf header.site,
html.perf .pagebar,
html.perf .filterbar,
html.perf .dock-inner,
html.perf .dock-tip,
html.perf .intro,
html.perf .search,
html.perf .drawer-backdrop,
html.perf .modal-backdrop,
html.perf .modal-overlay,
html.perf .handbooks-tabbar,
html.perf .site-footer,
html.perf body.admin-ui .btn{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}

/* Slightly reduce heavy shadows (keeps look but cheaper to composite) */
html.perf .card,
html.perf .hero,
html.perf .item{
  box-shadow: 0 10px 26px rgba(0,0,0,.28) !important;
}



/* === NAV TWO ROWS (public header) === */
@media (min-width: 1041px){
  .navlinks-rows{
    order: 3;
    flex: 0 0 100%;
    display:flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .navlinks-rows .navlinks{
    /* override generic desktop nav styles to look like two balanced rows */
    flex: 0 0 auto !important;
    width: fit-content;
    max-width: 100%;
    justify-content: center;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    padding: 10px 12px;
  }
  /* Slightly tighter pills so 2 rows look proportional */
  .navlinks-rows .navlink{ padding: 8px 11px; }
}

@media (max-width: 1240px) and (min-width: 1041px){
  .navlinks-rows .navlink{ padding: 7px 10px; }
}


/* --- Header nav: mostly one row, last items wrap down inside one continuous pill --- */
/* HEADER NAV NO ICONS */
.navlinks .navlink{ padding: 10px 10px; }


/* NAV ONE ROW */
.navlinks{ gap: 0px; }
.navlink{ padding: 10px 10px; }


.right-tools .auth-stack .btn{ white-space:nowrap; }


.navbar-top{ display:flex; align-items:center; justify-content:space-between; gap: 14px; }


/* NAV STRETCH */
.navlinks .navlink{ flex: 0 0 auto; }


/* Header container should match page container */
header.site > .container{ max-width: var(--container); }

/* ============================================================
   Practice task detail (task.php): polished visual
   ============================================================ */
body[data-page="task.php"]{
  --task-shell-border: rgba(129, 161, 255, .30);
  --task-shell-shadow: 0 34px 84px rgba(1, 8, 24, .44);
  --task-shell-surface:
    radial-gradient(1200px 460px at -14% -18%, rgba(0, 194, 255, .18), transparent 58%),
    radial-gradient(980px 420px at 114% -12%, rgba(38, 112, 255, .16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  --task-card-border: rgba(148, 163, 184, .24);
  --task-card-surface: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  --task-pane-surface: linear-gradient(180deg, rgba(4, 12, 30, .58), rgba(4, 12, 30, .36));
  --task-soft-text: rgba(214, 223, 238, .86);
}

html[data-theme="light"] body[data-page="task.php"]{
  --task-shell-border: rgba(0, 113, 227, .20);
  --task-shell-shadow: 0 20px 46px rgba(10, 18, 36, .12);
  --task-shell-surface:
    radial-gradient(1200px 460px at -14% -18%, rgba(0, 168, 232, .10), transparent 58%),
    radial-gradient(980px 420px at 114% -12%, rgba(0, 113, 227, .09), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.91));
  --task-card-border: rgba(10, 18, 36, .11);
  --task-card-surface: linear-gradient(180deg, rgba(10,18,36,.03), rgba(10,18,36,.01));
  --task-pane-surface: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.78));
  --task-soft-text: rgba(10, 18, 36, .74);
}

body[data-page="task.php"] .practice-task{
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  border: 1px solid var(--task-shell-border);
  background: var(--task-shell-surface);
  box-shadow: var(--task-shell-shadow);
}

body[data-page="task.php"] .practice-task::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(126deg, rgba(255,255,255,.14), transparent 23%),
    linear-gradient(180deg, transparent 54%, rgba(255,255,255,.028)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 40px);
  opacity: .48;
}

body[data-page="task.php"] .practice-task::after{
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(89, 176, 255, .22), rgba(89, 176, 255, 0));
  filter: blur(4px);
  pointer-events: none;
}

body[data-page="task.php"] .practice-task .article-head,
body[data-page="task.php"] .practice-task .task-pane{
  position: relative;
  z-index: 1;
}

body[data-page="task.php"] .practice-task .article-head{
  margin-bottom: 18px;
  padding: clamp(16px, 2vw, 24px);
  border-radius: 24px;
  border: 1px solid var(--task-card-border);
  background: var(--task-card-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 16px 34px rgba(2, 8, 22, .22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html[data-theme="light"] body[data-page="task.php"] .practice-task .article-head{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 10px 24px rgba(10, 18, 36, .09);
}

body[data-page="task.php"] .practice-task .article-title{
  max-width: 20ch;
  margin-bottom: 2px;
}

body[data-page="task.php"] .practice-task .article-meta{
  gap: 9px;
  margin-top: 12px;
}

body[data-page="task.php"] .practice-task .article-meta .pill{
  background: rgba(255,255,255,.065);
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
}

html[data-theme="light"] body[data-page="task.php"] .practice-task .article-meta .pill{
  background: rgba(255,255,255,.82);
  border-color: rgba(10,18,36,.14);
  box-shadow: none;
}

body[data-page="task.php"] .practice-task .article-lead{
  margin-top: 14px;
  color: var(--task-soft-text);
  max-width: 74ch;
  line-height: 1.74;
}

body[data-page="task.php"] .task-glance{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body[data-page="task.php"] .task-glance-item{
  --task-glance-accent: 125, 211, 252;
  position: relative;
  overflow: hidden;
  padding: 14px 14px 13px;
  border-radius: 18px;
  border: 1px solid rgba(var(--task-glance-accent), .34);
  background:
    radial-gradient(180px 100px at -10% -30%, rgba(var(--task-glance-accent), .22), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(2, 8, 22, .2);
  transition: transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease);
}

html[data-theme="light"] body[data-page="task.php"] .task-glance-item{
  background:
    radial-gradient(180px 100px at -10% -30%, rgba(var(--task-glance-accent), .14), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.7));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 18px rgba(10,18,36,.08);
}

body[data-page="task.php"] .task-glance-item::after{
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(var(--task-glance-accent), .95);
}

body[data-page="task.php"] .task-glance-item:nth-child(1){ --task-glance-accent: 90, 203, 255; }
body[data-page="task.php"] .task-glance-item:nth-child(2){ --task-glance-accent: 32, 184, 145; }
body[data-page="task.php"] .task-glance-item:nth-child(3){ --task-glance-accent: 255, 186, 92; }

body[data-page="task.php"] .task-glance-item:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--task-glance-accent), .48);
  box-shadow: 0 16px 32px rgba(2,8,24,.25), inset 0 1px 0 rgba(255,255,255,.18);
}

body[data-page="task.php"] .task-glance-k{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .08em;
  color: var(--muted);
}

body[data-page="task.php"] .task-glance-v{
  margin-top: 6px;
  font-size: clamp(20px, 2.3vw, 26px);
  line-height: 1.1;
  font-weight: 920;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

body[data-page="task.php"] .task-pane{
  --task-accent: 90, 203, 255;
  margin-top: 14px;
  padding: clamp(12px, 1.7vw, 18px);
  border-radius: 24px;
  border: 1px solid rgba(var(--task-accent), .30);
  background:
    radial-gradient(620px 120px at 12% -12%, rgba(var(--task-accent), .18), transparent 72%),
    var(--task-pane-surface);
  box-shadow: 0 20px 46px rgba(3, 8, 22, .28);
  overflow: hidden;
}

html[data-theme="light"] body[data-page="task.php"] .task-pane{
  box-shadow: 0 10px 24px rgba(10,18,36,.09);
}

body[data-page="task.php"] .task-pane::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.09);
}

html[data-theme="light"] body[data-page="task.php"] .task-pane::before{
  border-color: rgba(255,255,255,.7);
}

body[data-page="task.php"] .task-pane--statement{ --task-accent: 90, 203, 255; }
body[data-page="task.php"] .task-pane--solution{ --task-accent: 32, 184, 145; }
body[data-page="task.php"] .task-pane--hints{ --task-accent: 255, 186, 92; }

body[data-page="task.php"] .task-pane--statement{
  border-color: rgba(92, 176, 255, .46);
  background:
    radial-gradient(760px 240px at 8% -16%, rgba(90, 177, 255, .24), transparent 72%),
    linear-gradient(180deg, rgba(2, 12, 34, .74), rgba(2, 10, 28, .42));
  box-shadow: 0 26px 60px rgba(1, 7, 20, .42), inset 0 1px 0 rgba(178, 227, 255, .2);
}

html[data-theme="light"] body[data-page="task.php"] .task-pane--statement{
  border-color: rgba(0, 113, 227, .32);
  background:
    radial-gradient(760px 240px at 8% -16%, rgba(0, 144, 240, .16), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  box-shadow: 0 12px 28px rgba(10, 18, 36, .11), inset 0 1px 0 rgba(255,255,255,.88);
}

body[data-page="task.php"] .task-pane--statement .task-pane-head{
  margin-bottom: 14px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(92, 176, 255, .28);
  background: linear-gradient(90deg, rgba(56, 147, 255, .16), rgba(56, 147, 255, .03));
}

html[data-theme="light"] body[data-page="task.php"] .task-pane--statement .task-pane-head{
  border-color: rgba(0, 113, 227, .2);
  background: linear-gradient(90deg, rgba(0, 113, 227, .10), rgba(0, 113, 227, .02));
}

body[data-page="task.php"] .task-pane--statement .article-h{
  font-size: clamp(24px, 2.45vw, 32px);
  letter-spacing: -.03em;
}

body[data-page="task.php"] .task-pane--statement .task-prose--statement{
  position: relative;
  isolation: isolate;
  margin-top: 0;
  padding: clamp(18px, 2.25vw, 30px);
  border-radius: 20px;
  border: 1px solid rgba(92, 176, 255, .34);
  background:
    radial-gradient(640px 220px at 4% 0%, rgba(92, 176, 255, .16), transparent 72%),
    linear-gradient(180deg, rgba(1, 9, 26, .84), rgba(1, 8, 22, .58));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(62, 136, 223, .12),
    0 22px 46px rgba(1, 6, 18, .34);
}

body[data-page="task.php"] .task-pane--statement .task-prose--statement::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(132, 204, 255, .13), transparent 17%),
    repeating-linear-gradient(90deg, rgba(140, 187, 255, .045) 0, rgba(140, 187, 255, .045) 1px, transparent 1px, transparent 38px);
  opacity: .72;
}

body[data-page="task.php"] .task-pane--statement .task-prose--statement::after{
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(92, 176, 255, .92), rgba(92, 176, 255, .18));
  box-shadow: 0 0 22px rgba(92, 176, 255, .38);
}

html[data-theme="light"] body[data-page="task.php"] .task-pane--statement .task-prose--statement{
  border-color: rgba(0, 113, 227, .2);
  background:
    radial-gradient(640px 220px at 4% 0%, rgba(0, 113, 227, .1), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(0, 113, 227, .06),
    0 12px 26px rgba(10, 18, 36, .1);
}

html[data-theme="light"] body[data-page="task.php"] .task-pane--statement .task-prose--statement::after{
  background: linear-gradient(180deg, rgba(0, 113, 227, .78), rgba(0, 113, 227, .12));
  box-shadow: 0 0 14px rgba(0, 113, 227, .25);
}

body[data-page="task.php"] .task-pane--statement .task-prose--statement > *{
  position: relative;
  z-index: 1;
}

body[data-page="task.php"] .task-pane--statement .task-prose--statement > p:first-child{
  margin-top: 0;
  margin-bottom: 18px;
  font-size: clamp(19px, 1.55vw, 24px);
  font-weight: 620;
  line-height: 1.68;
  color: rgba(239, 246, 255, .98);
}

html[data-theme="light"] body[data-page="task.php"] .task-pane--statement .task-prose--statement > p:first-child{
  color: rgba(10, 18, 36, .94);
}

body[data-page="task.php"] .task-pane--statement .task-prose--statement :where(h2,h3,h4){
  margin-top: 24px;
  margin-bottom: 10px;
  font-size: clamp(18px, 1.45vw, 22px);
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(236, 244, 255, .98);
}

html[data-theme="light"] body[data-page="task.php"] .task-pane--statement .task-prose--statement :where(h2,h3,h4){
  color: rgba(10, 18, 36, .95);
}

body[data-page="task.php"] .task-pane--statement .task-prose--statement :where(p, li){
  color: rgba(226, 236, 252, .95);
}

html[data-theme="light"] body[data-page="task.php"] .task-pane--statement .task-prose--statement :where(p, li){
  color: rgba(10, 18, 36, .86);
}

body[data-page="task.php"] .task-pane--statement .task-prose--statement :where(u){
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(92, 176, 255, .42);
  background: rgba(56, 147, 255, .18);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 780;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(221, 238, 255, .95);
}

html[data-theme="light"] body[data-page="task.php"] .task-pane--statement .task-prose--statement :where(u){
  border-color: rgba(0, 113, 227, .28);
  background: rgba(0, 113, 227, .1);
  color: rgba(10, 18, 36, .88);
}

body[data-page="task.php"] .task-pane--statement .task-prose--statement :where(pre){
  border-color: rgba(92, 176, 255, .34);
  background:
    linear-gradient(180deg, rgba(1, 8, 21, .84), rgba(1, 7, 18, .62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-theme="light"] body[data-page="task.php"] .task-pane--statement .task-prose--statement :where(pre){
  border-color: rgba(0, 113, 227, .18);
  background: linear-gradient(180deg, rgba(10,18,36,.05), rgba(10,18,36,.02));
}

body[data-page="task.php"] .task-pane--statement .task-prose--statement :where(blockquote){
  margin: 14px 0;
  padding: 10px 14px;
  border-left: 3px solid rgba(92, 176, 255, .65);
  border-radius: 10px;
  background: rgba(56, 147, 255, .1);
}

html[data-theme="light"] body[data-page="task.php"] .task-pane--statement .task-prose--statement :where(blockquote){
  background: rgba(0, 113, 227, .07);
  border-left-color: rgba(0, 113, 227, .45);
}

body[data-page="task.php"] .task-pane-head{
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

body[data-page="task.php"] .task-pane-no{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(var(--task-accent), .66);
  background: rgba(var(--task-accent), .16);
  color: rgba(255,255,255,.95);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}

html[data-theme="light"] body[data-page="task.php"] .task-pane-no{
  color: rgba(10,18,36,.88);
  background: rgba(var(--task-accent), .20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

body[data-page="task.php"] .task-pane .article-h{
  margin: 0;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.08;
  letter-spacing: -.022em;
}

body[data-page="task.php"] .task-prose{
  margin-top: 2px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.24);
  background: linear-gradient(180deg, rgba(2,8,22,.46), rgba(2,8,22,.28));
  padding: clamp(14px, 1.9vw, 24px);
  line-height: 1.84;
}

html[data-theme="light"] body[data-page="task.php"] .task-prose{
  border-color: rgba(10,18,36,.1);
  background: linear-gradient(180deg, rgba(10,18,36,.03), rgba(10,18,36,.012));
}

body[data-page="task.php"] .task-prose :where(h1,h2,h3){
  margin-top: 16px;
  margin-bottom: 9px;
}

body[data-page="task.php"] .task-prose :where(pre){
  background: rgba(4, 10, 24, .7);
  border-color: rgba(148,163,184,.34);
}

html[data-theme="light"] body[data-page="task.php"] .task-prose :where(pre){
  background: rgba(10,18,36,.07);
}

body[data-page="task.php"] .task-prose :where(table){
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

body[data-page="task.php"] .task-prose :where(th, td){
  border: 1px solid rgba(148,163,184,.22);
  padding: 8px 10px;
  text-align: left;
}

@media (max-width: 1080px){
  body[data-page="task.php"] .task-glance{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 740px){
  body[data-page="task.php"] .practice-task{
    border-radius: 24px;
    box-shadow: 0 18px 40px rgba(2,8,24,.3);
  }

  body[data-page="task.php"] .practice-task .article-nav{
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  body[data-page="task.php"] .practice-task .article-path{
    font-size: 11px;
  }
}

@media (max-width: 640px){
  body[data-page="task.php"] .practice-task{
    border-radius: 20px;
  }

  body[data-page="task.php"] .practice-task .article-head{
    border-radius: 18px;
    padding: 14px;
  }

  body[data-page="task.php"] .task-glance{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body[data-page="task.php"] .task-glance-v{
    font-size: 20px;
  }

  body[data-page="task.php"] .task-pane{
    margin-top: 10px;
    padding: 10px;
    border-radius: 16px;
  }

  body[data-page="task.php"] .task-pane-no{
    width: 31px;
    height: 31px;
    border-radius: 10px;
  }

  body[data-page="task.php"] .task-pane .article-h{
    font-size: 18px;
  }

  body[data-page="task.php"] .task-prose{
    border-radius: 13px;
    padding: 12px 11px;
    line-height: 1.72;
  }

  body[data-page="task.php"] .task-pane--statement .task-pane-head{
    margin-bottom: 10px;
    padding: 7px 8px;
    border-radius: 11px;
  }

  body[data-page="task.php"] .task-pane--statement .article-h{
    font-size: clamp(21px, 6.2vw, 26px);
  }

  body[data-page="task.php"] .task-pane--statement .task-prose--statement{
    border-radius: 14px;
    padding: 14px 12px 14px 14px;
  }

  body[data-page="task.php"] .task-pane--statement .task-prose--statement::after{
    top: 12px;
    bottom: 12px;
    width: 2px;
  }

  body[data-page="task.php"] .task-pane--statement .task-prose--statement > p:first-child{
    font-size: 17px;
    line-height: 1.62;
    margin-bottom: 14px;
  }

  body[data-page="task.php"] .task-pane--statement .task-prose--statement :where(u){
    padding: 5px 9px;
    font-size: 10.5px;
    letter-spacing: .05em;
  }
}

@media (prefers-reduced-motion: no-preference){
  body[data-page="task.php"] .practice-task .article-head{
    animation: taskRiseIn .34s var(--ease) both;
  }

  body[data-page="task.php"] .task-glance-item{
    animation: taskRiseIn .38s var(--ease) both;
  }

  body[data-page="task.php"] .task-glance-item:nth-child(2){ animation-delay: .04s; }
  body[data-page="task.php"] .task-glance-item:nth-child(3){ animation-delay: .08s; }

  body[data-page="task.php"] .task-pane{
    animation: taskRiseIn .46s var(--ease) both;
  }

  body[data-page="task.php"] .task-pane--solution{ animation-delay: .05s; }
  body[data-page="task.php"] .task-pane--hints{ animation-delay: .1s; }
}

@keyframes taskRiseIn{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================
   Mobile redesign layer (global override)
   Keeps desktop untouched, improves touch UX and rhythm.
   ========================================================== */
@media (max-width: 980px){
  :root{ --gap: 14px; }

  .container{
    padding-top: 14px;
    padding-left: calc(14px + var(--safeL));
    padding-right: calc(14px + var(--safeR));
    padding-bottom: calc(120px + var(--safeB));
    gap: 14px;
  }

  header.site .container{
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  header.site .navbar{ gap: 8px; }
  header.site .navbar-top{
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    align-items: center;
  }
  header.site .brand-badge{
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }
  header.site .brand-title{ font-size: 15px; }
  header.site .brand-sub{ display: none; }

  /* Mobile navigation uses drawer + bottom dock */
  header.site .navlinks-main{ display: none; }

  header.site .right-tools{
    width: 100%;
    display: grid;
    grid-template-columns: auto auto minmax(0,1fr);
    gap: 8px;
    align-items: center;
  }
  header.site .right-tools > .btn,
  header.site .right-tools > a.btn{ min-height: 40px; }
  header.site .right-tools .class-switch{
    grid-column: 1 / -1;
    order: 30;
    justify-content: flex-start;
    padding: 6px;
    border-radius: 14px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  header.site .right-tools .class-switch::-webkit-scrollbar{ display:none; }
  header.site .right-tools .class-btn{
    min-height: 40px;
    padding: 9px 14px;
    border-radius: 11px;
    white-space: nowrap;
  }

  .pagebar{
    padding: 12px 14px;
    border-radius: 18px;
  }
  .pagebar-right{ display:none; }
  .pagebar-path{ font-size: 11px; }

  .section-card{ padding: 16px 14px; }
  .section-head{ margin-bottom: 10px; gap: 10px; }
  .section-title{
    font-size: clamp(24px, 8.2vw, 34px);
    line-height: 1.05;
  }
  .section-sub{
    font-size: 13px;
    line-height: 1.5;
  }
  .section-actions{
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .section-actions::-webkit-scrollbar{ height: 0; }
  .segmented,
  .view-toggle,
  .ach-toolbar,
  .filterbar{ border-radius: 16px; }

  .ach-toolbar{
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
  }
  .ach-sort{
    width: 100%;
    justify-content: space-between;
  }
  .ach-sort .select{
    width: 100%;
    min-width: 0;
  }

  .card{ border-radius: 20px; }
  .card-title{ font-size: 17px; }
  .entries{ gap: 10px; }
  .entry-card{
    border-radius: 18px;
    padding: 13px 12px;
  }
  .entry-title{ font-size: 16px; }
  .entry-excerpt{
    font-size: 13px;
    line-height: 1.45;
  }

  .btn{ min-height: 40px; }
  .btn.sm{ min-height: 34px; }
  .input,
  select.input,
  textarea.input{ border-radius: 12px; }

  .article{ padding: 16px 14px; }
  .article-title{ font-size: clamp(25px, 7.8vw, 34px); }
  .article-meta{ gap: 6px; }
  .article-meta .pill{ font-size: 11px; }
  .prose{
    border-radius: 16px;
    padding: 13px 12px;
    font-size: 14.5px;
    line-height: 1.72;
  }
  .attachments{ gap: 8px; }
  .attachment{
    border-radius: 14px;
    padding: 11px 12px;
  }
  .file-previews{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .file-preview-tile-img,
  .file-preview-pdf-ico{ height: 160px; }

  .search{
    padding: 12px;
    align-items: flex-start;
  }
  .search-card{
    width: 100%;
    border-radius: 20px;
  }
  .search-top{ padding: 12px; }
  .search-body{
    max-height: 70vh;
    padding: 8px;
  }

  .modal-overlay{ padding: 10px; }
  .classpick-modal,
  .html-modal,
  .devsig-modal{ width: 100%; border-radius: 20px; }

  .drawer{
    width: min(92vw, 380px);
    border-radius: 22px 0 0 22px;
  }

  .site-footer{
    margin-top: 4px;
    padding-bottom: calc(88px + var(--safeB));
  }
  .toast{
    bottom: calc(86px + var(--safeB));
    max-width: calc(100vw - 20px);
    text-align: center;
  }

  /* Enable bottom dock on mobile for one-tap navigation */
  body:not(.auth) .dock{
    display: block;
    left: 0;
    right: 0;
    bottom: calc(8px + var(--safeB));
    transform: none;
    padding: 0 10px;
  }
  body:not(.auth) .dock-inner{
    width: min(720px, 100%);
    margin: 0 auto;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 18px;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
  }
  body:not(.auth) .dock-item{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    flex: 0 0 auto;
  }
  body:not(.auth) .dock-tip{ display:none; }
}

@media (max-width: 720px){
  header.site .right-tools{
    grid-template-columns: auto auto auto minmax(0,1fr);
  }
  header.site .right-tools .lms-btn{ justify-content: center; }

  .eventbar{
    border-radius: 16px;
    padding: 10px;
  }
  .eventbar-card{ flex: 0 0 84vw; }
  .eventbar-right{ display:none; }

  .drawer{
    width: 100%;
    border-radius: 0;
  }
}

@media (max-width: 560px){
  .container{
    padding-left: calc(12px + var(--safeL));
    padding-right: calc(12px + var(--safeR));
    padding-bottom: calc(116px + var(--safeB));
  }
  .section-card{ padding: 14px 12px; }
  .pagebar{
    padding: 10px 12px;
    border-radius: 16px;
  }
  .pagebar-title{ font-size: 14px; }
  .os-dots{ padding: 5px 7px; }

  header.site .right-tools{
    grid-template-columns: auto auto minmax(0,1fr);
  }
  header.site .right-tools .lms-btn .lms-text{ display:none; }

  .entry-card{ padding: 12px 11px; }

  body:not(.auth) .dock-inner{
    padding: 7px 8px;
    gap: 4px;
  }
  body:not(.auth) .dock-item{
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }
}

/* ==========================================================
   Mobile stability hardening (v2)
   Goal: zero horizontal overflow on narrow screens.
   ========================================================== */
@media (max-width: 980px){
  html,
  body{
    max-width: 100%;
    overflow-x: clip;
  }

  .container,
  .stack,
  .grid,
  .grid.two,
  .entries,
  .entry-card,
  .section-card,
  .card,
  .pagebar,
  .pagebar-left,
  .pagebar-text,
  .section-head,
  .section-actions,
  .ach-toolbar,
  .ach-chips,
  .filterbar,
  .article-grid,
  .article,
  .article-head,
  .article-meta,
  .article-side,
  .attachments,
  .attachment,
  .file-previews,
  .file-preview-tile,
  .side-actions,
  .side-rows,
  .search-card,
  .search-top,
  .search-body,
  .classpick-modal,
  .html-modal,
  .devsig-modal,
  .drawer,
  .drawer-nav,
  .eventbar,
  .eventbar-track,
  .eventbar-card,
  .cloud-upload-grid,
  .cloud-files,
  .cloud-item,
  .about-card,
  .about-grid,
  .reg-form,
  .reg-kv,
  .reg-answers,
  .table,
  .tr{
    min-width: 0;
    max-width: 100%;
  }

  .pagebar-title,
  .pagebar-path,
  .section-title,
  .section-sub,
  .entry-title,
  .entry-excerpt,
  .article-title,
  .article-lead,
  .attachment-name,
  .sf-name,
  .cloud-item-title,
  .cloud-pill strong,
  .eventbar-title,
  .eventbar-sub,
  .search-title,
  .search-snippet,
  .prose :where(p,li,blockquote),
  .small,
  .pill,
  .chip{
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  .btn,
  a.btn{
    max-width: 100%;
  }
  .btn .nav-txt,
  .btn .lms-text{
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .input,
  select.input,
  textarea.input,
  .select,
  select,
  input,
  textarea{
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }

  .section-actions,
  .ach-chips,
  .article-meta{
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .section-actions::-webkit-scrollbar,
  .ach-chips::-webkit-scrollbar,
  .article-meta::-webkit-scrollbar{ display:none; }

  img,
  video,
  canvas,
  svg,
  iframe{
    max-width: 100%;
    height: auto;
  }
  .file-preview-iframe{
    width: 100%;
    max-width: 100%;
  }

  pre{
    max-width: 100%;
    overflow: auto;
  }
  .prose :where(table){
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 720px){
  .tr{
    grid-template-columns: 1fr !important;
    gap: 8px;
  }
  .tr > div{
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .eventbar-card{
    max-width: 88vw;
  }

  .drawer-link{
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.35;
  }
}