/* SpermaCraft — тема «Нова» (2026-10-11).
   Строгий «энтерпрайз» (чёрный фон, тонкие рамки, плотная типографика, белые основные кнопки)
   плюс эффекты в духе био-страниц: стекло, мягкое свечение, профиль с размытым фоном и светящимся ником.
   Ложится поверх app.css, меняет только вид. Контент тянется почти на всю ширину экрана.
   Откат: убрать подключение этого файла в core/View/templates/layout.php
   (исходные файлы — в _backup-design/2026-10-11/). */

:root{
  --bg:#0a0a0a;
  --panel:rgba(255,255,255,.028);
  --panel-2:rgba(255,255,255,.045);
  --panel-3:rgba(255,255,255,.07);
  --solid:#121212;          /* непрозрачная панель: выпадашки, окна */
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.13);
  --text:#fafafa;
  --text-2:#a3a3a3;
  --text-3:#737373;

  --gold:#f5b942;
  --gold-hi:#ffc95c;
  --gold-text:#f8c862;
  --gold-soft:rgba(245,185,66,.11);
  --gold-line:rgba(245,185,66,.35);
  --gold-ink:#1a1200;

  --green:#3ecf8e;
  --green-soft:rgba(62,207,142,.12);

  --r-lg:16px;
  --r:12px;
  --r-sm:9px;
  --shadow:0 24px 60px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06);
  --shadow-sm:0 6px 20px rgba(0,0,0,.4);

  --font:'Geist', 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-display:'Geist', 'Manrope', sans-serif;
  --font-mono:'Geist Mono', ui-monospace, Consolas, monospace;
  --font-pixel:var(--font-mono);

  --side:244px;
  --page:1760px;

  --glass:blur(18px);
  --ring:0 0 0 1px var(--line), inset 0 1px 0 rgba(255,255,255,.04);
}

body{ font-size:14.5px; letter-spacing:-.006em; }
h1,h2,h3,h4{ letter-spacing:-.025em; }
::selection{ background:rgba(245,185,66,.3); }

/* ===== Фон: почти чёрный, едва заметная сетка точек и слабый свет сверху =====
   Всё нейтрально-серое, без цвета. Сетка тает к низу и к краям. */
.bg{
  background:
    radial-gradient(1000px 460px at 50% -200px, rgba(255,255,255,.035), transparent 70%),
    #0a0a0a;
}
.bg::after{
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.3px);
  background-size:24px 24px;
  mask-image:radial-gradient(ellipse 85% 70% at 50% 0%, #000 0%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 0%, #000 0%, transparent 85%);
}

/* В профиле пейзажа нет: ровный тёмно-серый, а краски даёт баннер (размытый кадр .pf-backdrop). */
body:has(.pf-hero) .bg{ background:#141414; }
body:has(.pf-hero) .bg::after{ display:none; }

/* Панели — плотное матовое стекло: фон лишь проступает сквозь них. */
:root{ --panel:rgba(16,16,16,.74); }
:is(.block, .card, .post, .stat, .member-card, .tile, .pf-hero){
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
/* Стекло делает каждую панель отдельным слоем; панель с открытым меню (модерация темы)
   поднимаем, иначе меню уйдёт под следующие сообщения. */
.block:has(details[open]){ position:relative; z-index:20; }

/* ===== Боковое меню ===== */

.side{
  padding:20px 12px;
  gap:4px;
  background:rgba(10,10,10,.72);
  border-right:1px solid var(--line);
  backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass);
}
.side-brand, .top-brand{
  font-family:var(--font);
  font-weight:800;
  letter-spacing:-.04em;
}
/* Логотип — отдельной шапкой на всю ширину меню, с линией снизу: так видно, что он по центру. */
.side .side-brand{
  flex:0 0 auto;
  justify-content:center; align-items:center;
  height:84px; margin:-20px -12px 14px; padding:0 12px;
  border-bottom:1px solid var(--line);
  font-size:30px; line-height:1;
  gap:0;
}
.top-brand{ font-size:17px; }
.brand-a{
  background:linear-gradient(100deg, var(--gold) 0%, #fff3cf 45%, var(--gold) 70%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text;
}
.side-label{ padding:16px 12px 6px; font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:none; color:var(--text-3); }
.side-link{ padding:8px 12px; gap:11px; border-radius:var(--r-sm); font-weight:500; font-size:14px; color:var(--text-2); }
.side-link .i{ width:18px; height:18px; }
.side-link:hover{ background:rgba(255,255,255,.04); }
.side-link.is-active{ background:rgba(255,255,255,.07); color:var(--text); box-shadow:inset 0 0 0 1px var(--line); }
.side-link.is-active .i{ color:var(--gold); }
.side-link.is-active::before{ display:none; }

.server-card{
  padding:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:var(--r);
}
.server-card-head{ font-weight:500; color:var(--text-2); }
.server-card-head .dot{ background:var(--green); box-shadow:0 0 0 3px rgba(62,207,142,.18); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 6px rgba(62,207,142,0); } }
.server-card code{ font-family:var(--font-mono); font-weight:500; font-size:13.5px; color:var(--text); }

.topbar-me{ border-radius:var(--r); background:rgba(255,255,255,.03); }
.topbar-me:hover{ background:rgba(255,255,255,.06); }
.me-text .username{ font-weight:600; }
.me-coins{ font-family:var(--font-mono); font-weight:500; }

.pop, .modal-box, .usercard{
  background:rgba(18,18,18,.92);
  border:1px solid var(--line-2);
  border-radius:var(--r);
  backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass);
  box-shadow:var(--shadow);
}
.pop-item{ font-weight:500; border-radius:7px; }
.pop-item:hover{ background:rgba(255,255,255,.06); }

.top{ background:rgba(10,10,10,.75); }
.coin-chip{ font-family:var(--font-mono); font-weight:500; background:var(--gold-soft); }

/* ===== Каркас страницы: шире, меньше пустоты по бокам ===== */

.page{ max-width:var(--page); padding:28px 32px 64px; gap:20px; }
.page--withSide{ grid-template-columns:minmax(0, 1fr) 360px; gap:20px; }
.page-main, .page-side{ gap:20px; }
.page-foot{ padding:20px 32px; border-top:1px solid var(--line); }

.head h1{ font-family:var(--font); font-weight:700; font-size:28px; letter-spacing:-.035em; }
.crumbs{ font-weight:500; }

/* ===== Панели: стекло с тонкой рамкой ===== */

.block, .card, .stat, .tile, .post, .member-card, .step, .upg-panel, .upg-slot{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.block, .card, .post{ border-radius:var(--r-lg); }
.block-header, .block-minorHeader{
  padding:14px 20px;
  font-size:14px; font-weight:600; letter-spacing:-.01em;
  border-bottom:1px solid var(--line);
}
.block-header::before, .block-minorHeader::before{ display:none; }
.block-body > :first-child, .block-header + .block-row{ border-top:0; }
.block-header-meta{ font-weight:500; }
.card-title{ font-family:var(--font); font-weight:700; letter-spacing:-.03em; }
.card-title--small{ font-weight:600; }

/* ===== Кнопки: белая основная, остальные — стекло ===== */

.btn{
  height:38px; padding:0 15px;
  font-weight:600; font-size:13.5px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s, transform .06s;
}
.btn:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2); }
.btn .i{ width:16px; height:16px; }
.btn--accent, .btn--green{
  background:#fafafa; color:#0a0a0a;
  border-color:transparent;
  box-shadow:0 0 0 1px rgba(255,255,255,.1);
}
.btn--accent:hover, .btn--green:hover{ background:#fff; color:#0a0a0a; box-shadow:0 0 0 1px rgba(255,255,255,.2); }
.btn--ghost{ background:transparent; border-color:transparent; }
.btn--ghost:hover{ background:rgba(255,255,255,.06); border-color:transparent; }
.btn--small{ height:32px; padding:0 12px; font-size:13px; }
.btn--xs{ height:28px; padding:0 9px; font-size:12px; border-radius:7px; }
.btn--icon{ width:38px; }
.btn--small.btn--icon{ width:32px; }
.btn.is-done{ background:var(--green-soft); border-color:rgba(62,207,142,.45); color:#86efac; }

/* ===== Поля ===== */

.field-label{ font-weight:500; }
.field-input, select, textarea, .composer-title{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
}
.field-input:focus, select:focus, textarea:focus, .composer-title:focus{
  border-color:rgba(255,255,255,.35);
  box-shadow:0 0 0 4px rgba(255,255,255,.06);
}
.composer-box{ background:rgba(255,255,255,.03); border-radius:var(--r); }
.composer-box:focus-within{ border-color:rgba(255,255,255,.3); box-shadow:0 0 0 4px rgba(255,255,255,.05); }
.composer-title{ font-family:var(--font); font-weight:600; letter-spacing:-.02em; }
.tool{ font-weight:500; }
.composer-hint kbd, .post-text code{ font-family:var(--font-mono); font-weight:500; }

/* ===== Мелочи ===== */

.tag{ height:22px; font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:none; border-radius:999px; padding:0 9px; }
.chip{ font-weight:600; }
.username{ font-weight:700; }
.tabs{ border-radius:var(--r); background:rgba(255,255,255,.03); }
.tab{ font-weight:500; border-radius:8px; }
.tab.is-active{ background:rgba(255,255,255,.08); }
.pager-link{ border-radius:var(--r-sm); font-weight:600; font-family:var(--font-mono); font-size:13px; }
.pager-link.is-current{ background:#fafafa; border-color:#fafafa; color:#0a0a0a; }
.toast, .flash{ background:rgba(18,18,18,.9); border-radius:var(--r); font-weight:500; backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass); }
.notice{ border-radius:var(--r); font-weight:500; }
.empty b{ font-weight:600; }

/* ===== Главная: приветствие ===== */

.hero{
  padding:36px 36px;
  border:1px solid var(--line);
  border-radius:20px;
  background:
    radial-gradient(520px 260px at 0% 0%, rgba(245,185,66,.16), transparent 70%),
    radial-gradient(420px 260px at 100% 120%, rgba(255,255,255,.06), transparent 70%),
    rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.hero::after{
  right:0; top:0; width:55%; height:100%;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px);
  background-size:18px 18px;
  mask-image:radial-gradient(ellipse 80% 90% at 90% 20%, #000, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 80% 90% at 90% 20%, #000, transparent 70%);
  opacity:.6;
}
.hero h1{ font-family:var(--font); font-weight:700; font-size:40px; letter-spacing:-.045em; line-height:1.05; }
.hero h1 b{
  font-weight:700;
  background:linear-gradient(90deg, var(--gold) 0%, #ffe7ad 60%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(245,185,66,.35));
}
.hero p{ font-size:15.5px; margin-top:12px; }

.steps{ gap:12px; }
.step{ border-radius:var(--r); }
.step-num{ font-family:var(--font-mono); font-weight:600; border-radius:8px; }

/* ===== Форум ===== */

.node{ grid-template-columns:44px minmax(0, 1fr) 110px minmax(260px, .55fr); padding:15px 20px; }
.node:hover, .thread-row:hover{ background:rgba(255,255,255,.025); }
.node-icon{ width:44px; height:44px; padding:11px; border-radius:11px; background:rgba(255,255,255,.04); border-color:var(--line); }
.node:hover .node-icon{ color:var(--text); background:rgba(255,255,255,.08); border-color:var(--line-2); }
.node-title, .thread-row-title{ font-weight:600; letter-spacing:-.015em; }
.node-desc{ font-size:13.5px; }
.node-stats b, .mini-stats b, .stat b, .tile b, .usercard-stat b{ font-family:var(--font); font-weight:700; letter-spacing:-.03em; }
.node-extra-title{ font-weight:500; }
.thread-row.is-pinned{ background:linear-gradient(90deg, rgba(245,185,66,.07), transparent 50%); }

.thread-head h1{ font-family:var(--font); font-weight:700; font-size:28px; letter-spacing:-.035em; }
.post{ grid-template-columns:200px minmax(0, 1fr); }
.post:target{ border-color:rgba(255,255,255,.3); box-shadow:0 0 0 4px rgba(255,255,255,.05); }
.post-author{ background:rgba(255,255,255,.015); }
.post.is-op .post-author{ background:linear-gradient(180deg, rgba(245,185,66,.08), transparent 60%); }
.post-author .avatar{ box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--line-2); }
/* Цвет из аватарки автора (nav.js ставит --tint и .post--tint). Серая аватарка — остаётся как выше. */
.post--tint .post-author .avatar{ box-shadow:0 0 0 3px var(--bg), 0 0 0 4px var(--tint-line); }
.post--tint.is-op .post-author{ background:linear-gradient(180deg, var(--tint-soft), transparent 60%); }
.post-author-name{ font-weight:700; }
.post-author-title{ font-weight:500; }
.post-num{ font-family:var(--font-mono); font-size:12px; }
.post-text{ font-size:15px; color:#e5e5e5; }
.post-text blockquote{ background:rgba(255,255,255,.03); border-left-color:rgba(255,255,255,.25); border-radius:0 8px 8px 0; }
.post-images a{ border-radius:var(--r-sm); }

/* ===== Профиль: как био-страница ===== */

.pf-hero{ height:340px; border-radius:22px; border-color:var(--line); }
.has-tint .pf-hero{ box-shadow:0 30px 80px -30px var(--tint-soft); }
.pf-avatar{ box-shadow:0 0 0 4px var(--bg), 0 0 0 5px var(--line-2), 0 0 50px -6px var(--tint, rgba(245,185,66,.5)); }
.has-tint .pf-avatar{ box-shadow:0 0 0 4px var(--bg), 0 0 0 6px var(--tint), 0 0 60px -4px var(--tint); }
/* Свечение ника — фильтром, а не text-shadow: тень просвечивала бы сквозь радужный ник владельца. */
.pf-name{
  font-family:var(--font); font-weight:800; font-size:40px; letter-spacing:-.045em;
  text-shadow:none;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.22)) drop-shadow(0 2px 10px rgba(0,0,0,.6));
}
.pf-role, .mc-badge{
  background:rgba(10,10,10,.5); border:1px solid rgba(255,255,255,.14);
  font-weight:500; backdrop-filter:var(--glass); -webkit-backdrop-filter:var(--glass);
}
.pf-online.is-on .dot{ box-shadow:0 0 0 3px rgba(62,207,142,.2); }
.pf-stats{ gap:12px; }
.stat{ border-radius:var(--r); padding:16px 18px; }
.stat b{ font-size:26px; }
.stat span{ font-weight:500; }
.pf-grid{ grid-template-columns:minmax(0, 1fr) 380px; }
.pf-about dd{ font-weight:600; }

.member-card{ border-radius:var(--r-lg); }
.member-card:hover{ transform:translateY(-3px); border-color:var(--line-2); box-shadow:0 20px 40px -20px rgba(0,0,0,.8); }
.member-card .avatar{ box-shadow:0 0 0 4px var(--bg); }
.member-card-name{ font-weight:700; letter-spacing:-.02em; }
.members-grid{ grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); }

.usercard-name{ font-family:var(--font); font-weight:800; letter-spacing:-.035em; }

/* ===== Чат ===== */

.chat-log{ height:340px; }
.chat-author{ font-weight:600; }
.chat-src{ font-weight:600; letter-spacing:.02em; text-transform:none; border-radius:999px; padding:0 7px; }
.chat-time{ font-family:var(--font-mono); font-weight:400; }

/* ===== Админка ===== */

.tile{ border-radius:var(--r-lg); }
.tile .i{ color:var(--text-2); }
a.tile:hover{ border-color:var(--line-2); }
.secret{ border-color:var(--line-2); background:rgba(255,255,255,.035); }
.secret code, .mc-code-value{ font-family:var(--font-mono); font-weight:600; letter-spacing:.08em; }
.table th{ font-weight:500; letter-spacing:.02em; text-transform:none; font-size:12.5px; }
.urow-name a{ font-weight:600; }
.urow-balance, .table code{ font-family:var(--font-mono); font-weight:500; }

/* ===== Вход и регистрация ===== */

/* Слева на входе — тот же фон сайта с точками, без своей картинки. */
.auth-art{ background:transparent; }
/* Справа от картинки — сплошная тёмная панель, а не та же луна ещё раз. */
.auth-panel{ background:#0a0a0c; }
.auth-art > *{ position:relative; z-index:1; }
.auth-art .side-brand{ font-size:24px; justify-content:flex-start; }
.auth-art h2{ font-family:var(--font); font-weight:800; font-size:clamp(40px, 4.6vw, 80px); max-width:640px; letter-spacing:-.05em; line-height:1; }
.auth-art h2 b{
  font-weight:800;
  background:linear-gradient(90deg, var(--gold), #ffe7ad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.auth-art p{ font-size:16px; margin-top:16px; }
.auth-box h1{ font-family:var(--font); font-weight:700; font-size:28px; letter-spacing:-.035em; }
.auth-box .field-input{ height:44px; }
.auth-box input[name=code]{ font-family:var(--font-mono); letter-spacing:.12em; }
.auth-box .btn--wide{ height:44px; }
.auth-switch a{ color:var(--text); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }

.error-status{ font-family:var(--font); font-weight:800; font-size:96px; letter-spacing:-.06em; text-shadow:0 0 60px rgba(245,185,66,.35); }

/* ===== Игровые блоки: только шрифты и скругления ===== */

.upg-title{ font-family:var(--font); font-weight:800; letter-spacing:-.03em; }
.upg-dial-value{ font-family:var(--font); font-weight:700; letter-spacing:-.04em; }
.upg-cell{ background:rgba(255,255,255,.03); border-radius:var(--r-sm); }
.roulette-window{ background:rgba(255,255,255,.025); }
.roulette-cell{ background:rgba(255,255,255,.04); }
.mc-bar{ background:linear-gradient(90deg, rgba(245,185,66,.18), rgba(245,185,66,.05)); }

/* ===== Узкие экраны =====
   Тема подключается после app.css, поэтому всё, что она задаёт без @media (сетки, высоты, отступы),
   перебивает мобильные правила app.css. Здесь они повторены для темы. */

@media (min-width:1800px){
  .page--withSide{ grid-template-columns:minmax(0, 1fr) 400px; }
}
@media (max-width:1180px){
  .node{ grid-template-columns:44px minmax(0, 1fr) 90px; }
  .node-extra{ display:none; }
  /* Боковая колонка уходит под основную — на всю ширину, а не по содержимому. */
  .page--withSide{ align-items:stretch; }
  .pf-grid{ grid-template-columns:minmax(0, 1fr); }
  /* У сетки полей в админке колонки заданы в style="" — перебиваем только так. */
  .admin-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width:980px){
  .page{ padding:18px 16px 48px; }
  .node{ grid-template-columns:44px minmax(0, 1fr); }
  .node-extra{ display:flex; }
  .hero{ padding:26px 22px; border-radius:var(--r-lg); }
  .hero h1{ font-size:30px; }
}
@media (max-width:720px){
  .hero h1{ font-size:26px; }
  /* Сообщение: автор строкой сверху, текст под ним на всю ширину. */
  .post{ grid-template-columns:minmax(0, 1fr); }
  /* Шапка профиля растёт по содержимому, иначе обрезает кнопки снизу. */
  .pf-hero{ height:auto; border-radius:var(--r-lg); }
  .admin-grid{ grid-template-columns:minmax(0, 1fr) !important; }
  .block-header, .block-minorHeader{ padding-left:14px; padding-right:14px; }
  .pf-name{ font-size:30px; }
  .thread-head h1{ font-size:22px; }
  .page-foot{ padding:16px; }
}