/* 3IN1.cc — страницы: лендинг, форум, тема, профиль, админка. */

/* ================================================================ ЛЕНДИНГ */
.hero { padding: 64px 0 44px; }

/* минималистичный герой: одна колонка, по центру */
.hero-min { padding: 76px 0 30px; text-align: center; }
/* специфичность 0,2,1 — иначе .hero h1 ниже в файле сбрасывает margin:auto */
.hero.hero-min h1 { margin: 16px auto 14px; max-width: 820px; text-align: center; }
.hero-min .hero-lede { margin: 0 auto; font-size: 16px; }
.hero-min .hero-cta { justify-content: center; margin-top: 26px; }
.hero-nums {
  display: flex; justify-content: center; gap: 22px; flex-wrap: wrap;
  margin-top: 26px; font-size: 13px; color: var(--tx-3);
}
.hero-nums b { font-family: var(--mono); font-weight: 600; color: var(--tx); }

/* компактные карточки продуктов */
.prods-min { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.prod-min {
  background: rgba(255,255,255,.025); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px; display: grid; gap: 8px;
  align-content: start; transition: border-color .16s, background .16s;
}
.prod-min:hover { border-color: var(--line-2); background: rgba(255,255,255,.04); }
.prod-min .prod-ic { width: 34px; height: 34px; border-radius: 10px; font-size: 16px; }
.prod-min b { font-size: 14.5px; font-weight: 600; }
.prod-min p { font-size: 12.5px; color: var(--tx-3); line-height: 1.5; }

/* плитки-переходы (купить / поддержка / как запустить) */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.tile {
  display: flex; align-items: center; gap: 12px; padding: 15px 16px;
  background: rgba(255,255,255,.025); border: 1px solid var(--line);
  border-radius: var(--r-lg); transition: border-color .16s, background .16s, transform .16s;
}
.tile:hover { border-color: var(--line-3); background: rgba(255,255,255,.05); transform: translateY(-2px); }
.tile-pri { border-color: var(--acc-line); background: var(--acc-soft); }
.tile-pri:hover { border-color: var(--acc); background: rgba(255,122,47,.16); }
.tile-ic {
  flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  font-size: 17px; background: rgba(255,255,255,.06); color: var(--tx-2);
}
.tile-pri .tile-ic { background: rgba(255,122,47,.2); color: var(--acc-2); }
.tile-tx { flex: 1; min-width: 0; }
.tile-tx b { display: block; font-size: 14.5px; font-weight: 600; }
.tile-tx i { display: block; font-style: normal; font-size: 12px; color: var(--tx-4); margin-top: 1px; }
.tile-arr { flex: none; width: 17px; height: 17px; fill: none; stroke: var(--tx-4); stroke-width: 2; }
.tile:hover .tile-arr { stroke: var(--acc-2); }

/* ================================================================ ТАРИФЫ */
.plans-min { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.plan-min {
  position: relative; background: rgba(255,255,255,.025); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 18px 16px; text-align: center;
  display: grid; gap: 6px; align-content: start;
}
.plan-min.hit { border-color: var(--acc-line); background: var(--acc-soft); }
.plan-min .plan-tag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, var(--acc-2), var(--acc)); color: #1a0800;
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--pill);
  text-transform: uppercase; letter-spacing: .04em;
}
.pm-name { font-size: 13px; color: var(--tx-3); font-weight: 500; }
.pm-price { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -.6px; }
.pm-price i { font-style: normal; font-size: 15px; color: var(--tx-3); }
.pm-note { font-size: 11.5px; color: var(--tx-4); margin-bottom: 8px; }

/* мои покупки */
.ord-list { display: grid; gap: 8px; }
.ord-row {
  display: grid; grid-template-columns: 88px minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; background: rgba(255,255,255,.025);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.ord-row:hover { border-color: var(--line-2); background: rgba(255,255,255,.04); }
.ord-days { font-family: var(--mono); font-size: 12.5px; color: var(--tx-2); }
.ord-main b { font-size: 14px; font-weight: 600; }
.ord-main i { font-style: normal; font-size: 11.5px; color: var(--tx-4); margin-left: 8px; }
.ord-st { font-size: 11.5px; padding: 3px 9px; border-radius: var(--pill); border: 1px solid var(--line-2); color: var(--tx-3); }
.ord-fulfilled { color: #8ff0b0; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.1); }

/* ================================================================ ОПЛАТА */
.pay-card {
  max-width: 520px; margin: 10px auto 0; text-align: center;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); padding: 34px 26px; box-shadow: var(--sh-2);
}
.pay-card h2 { font-size: 21px; font-weight: 700; letter-spacing: -.4px; margin: 14px 0 8px; }
.pay-card.ok { border-color: rgba(34,197,94,.3); }
.pay-ic {
  width: 54px; height: 54px; margin: 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px;
  background: rgba(34,197,94,.14); color: #8ff0b0; border: 1px solid rgba(34,197,94,.35);
}
.pay-spin {
  width: 40px; height: 40px; margin: 0 auto; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.1); border-top-color: var(--acc);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.pay-acts { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.key-box {
  display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap;
  background: rgba(0,0,0,.35); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 14px; margin: 18px 0 14px;
}
.key-box code { font-family: var(--mono); font-size: 17px; letter-spacing: .06em; color: var(--acc-2); }
.note { border-radius: var(--r-sm); padding: 10px 13px; font-size: 13px; text-align: left; }
.note-ok { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.3); color: #a9f0c0; }
.note-warn { background: rgba(234,179,8,.1); border: 1px solid rgba(234,179,8,.3); color: #f3dc9a; }

/* ================================================================ ПОДДЕРЖКА */
.tk-list { display: grid; gap: 8px; }
.tk-row {
  display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 13px 14px; background: rgba(255,255,255,.025);
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: border-color .16s, background .16s;
}
.tk-row:hover { border-color: var(--line-2); background: rgba(255,255,255,.045); }
.tk-row.unread { border-left: 2px solid var(--acc); }
.tk-ic { font-family: var(--mono); font-size: 12.5px; color: var(--tx-4); }
.tk-main { min-width: 0; }
.tk-main b { display: block; font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-main i { display: block; font-style: normal; font-size: 11.5px; color: var(--tx-4); margin-top: 2px; }
.tk-st { font-size: 11.5px; padding: 3px 10px; border-radius: var(--pill); border: 1px solid var(--line-2); color: var(--tx-3); white-space: nowrap; }
.st-open { color: #ffc79a; border-color: rgba(255,122,47,.35); background: rgba(255,122,47,.1); }
.st-ans { color: #8ff0b0; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.1); }
.st-closed { color: var(--tx-4); }

.tk-thread { display: grid; gap: 10px; }
.tk-msg {
  background: rgba(255,255,255,.025); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px;
}
.tk-msg.staff { border-color: var(--acc-line); background: rgba(255,122,47,.06); }
.tk-msg-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; }
.tk-msg-h b { font-weight: 600; }
.tk-at { margin-left: auto; font-size: 11.5px; color: var(--tx-4); }
.tk-acts { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* ------------------------------------------------- моя подписка */
.sub-card {
  background: rgba(255,255,255,.025); border: 1px solid var(--line-2);
  border-radius: var(--r-xl); padding: 22px;
}
.sub-card.sub-ok { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.05); }
.sub-card.sub-off { border-color: rgba(234,179,8,.3); background: rgba(234,179,8,.05); }
.sub-card.sub-ban { border-color: rgba(244,82,63,.3); background: rgba(244,82,63,.05); }
.sub-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sub-big b {
  display: block; font-family: var(--mono); font-size: 44px; font-weight: 600;
  line-height: 1; letter-spacing: -1.5px;
}
.sub-big span { display: block; font-size: 12.5px; color: var(--tx-3); margin-top: 5px; }
.sub-badge { font-size: 11.5px; padding: 4px 11px; border-radius: var(--pill); border: 1px solid var(--line-2); color: var(--tx-3); white-space: nowrap; }
.sub-b-ok { color: #8ff0b0; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.12); }
.sub-b-off { color: #f3dc9a; border-color: rgba(234,179,8,.35); background: rgba(234,179,8,.12); }
.sub-b-ban { color: #ff9c8f; border-color: rgba(244,82,63,.35); background: rgba(244,82,63,.12); }
.sub-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin: 18px 0 4px; }
.sub-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--acc), var(--acc-2)); border-radius: 3px; }
.sub-rows { display: grid; gap: 1px; margin-top: 18px; }
.sub-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.sub-row:last-child { border-bottom: 0; }
.sub-row span { color: var(--tx-3); }
.sub-row b { font-weight: 500; text-align: right; }
.sub-row code { font-family: var(--mono); font-size: 13px; color: var(--acc-2); }
.sub-acts { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.sub-acts .btn { display: inline-flex; align-items: center; gap: 7px; }

.hwid-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; flex-wrap: wrap; }
.hwid-price b { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -.6px; }
.hwid-price i { font-style: normal; font-size: 15px; color: var(--tx-3); }
.hwid-price span { display: block; font-size: 11px; color: var(--tx-4); }

/* ------------------------------------------------- account extras */
.tg-code {
  margin-top: 14px; padding: 14px; border-radius: var(--r-md);
  background: rgba(34,200,230,.07); border: 1px solid rgba(34,200,230,.28);
}
.tg-code p { font-size: 12.5px; color: var(--tx-2); margin-bottom: 11px; }
.tg-manual { margin-top: 11px; font-size: 11.5px; color: var(--tx-4); }
.tg-manual code {
  font-family: var(--mono); font-size: 12px; color: var(--cyan);
  background: rgba(0,0,0,.35); padding: 3px 7px; border-radius: 5px;
  user-select: all; -webkit-user-select: all;
}

.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 46px; align-items: center; }
.hero h1 {
  font-size: clamp(34px, 5vw, 56px); line-height: 1.02; font-weight: 800;
  letter-spacing: -.032em; margin: 14px 0 16px;
}
.hero h1 .gr {
  background: linear-gradient(100deg, var(--acc-2) 10%, var(--acc) 45%, var(--vio) 105%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lede { font-size: 16.5px; color: var(--tx-2); max-width: 560px; line-height: 1.62; }
.hero-cta { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.hero-marks { display: flex; gap: 16px; margin-top: 20px; flex-wrap: wrap; font-size: 13px; color: var(--tx-3); }
.hero-marks span { display: inline-flex; align-items: center; gap: 6px; }
.hero-marks svg { width: 14px; height: 14px; fill: none; stroke: var(--grn); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 30px; max-width: 460px; }
.hero-stats div { background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.hero-stats b { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.5px; font-family: var(--mono); }
.hero-stats span { font-size: 11.5px; color: var(--tx-4); }

/* мок окна лоадера */
.mock {
  border: 1px solid var(--line-2); border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--sh-3);
}
.mock-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.mock-dots { display: flex; gap: 5px; }
.mock-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.mock-dots i:first-child { background: rgba(244,82,63,.6); }
.mock-dots i:nth-child(2) { background: rgba(234,179,8,.6); }
.mock-dots i:nth-child(3) { background: rgba(34,197,94,.6); }
.mock-title { font-family: var(--mono); font-size: 11.5px; color: var(--tx-4); }
.mock-title b { color: var(--acc-2); font-weight: 500; }
.mock-body { padding: 16px; display: grid; gap: 12px; }
.mock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mock-card { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; }
.mock-card .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-4); margin-bottom: 8px; }
.mock-line { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; padding: 4px 0; color: var(--tx-2); }
.mock-line b { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.mock-line .ok { color: var(--grn); }
.mock-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; padding: 4px 9px; border-radius: var(--pill); border: 1px solid var(--line-2); color: var(--tx-3); }
.mock-chip.on { border-color: var(--acc-line); background: var(--acc-soft); color: var(--acc-2); }
.mock-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mock-bar-meter { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 10px; }
.mock-bar-meter i { display: block; height: 100%; width: 78%; background: linear-gradient(90deg, var(--acc), var(--acc-2)); border-radius: 3px; }
.mock-code { font-family: var(--mono); font-size: 11px; color: var(--tx-4); line-height: 1.7; background: rgba(0,0,0,.35); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 11px; }
.mock-code b { color: var(--grn); font-weight: 500; }
.mock-foot { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
.mock-foot div { padding: 11px 8px; text-align: center; border-right: 1px solid var(--line); }
.mock-foot div:last-child { border-right: 0; }
.mock-foot b { display: block; font-family: var(--mono); font-size: 14px; }
.mock-foot span { font-size: 10.5px; color: var(--tx-4); }

/* полоса-баннер */
.strip {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--acc-line); background: linear-gradient(90deg, rgba(255,122,47,.1), rgba(124,92,255,.06));
  border-radius: var(--r-md); padding: 13px 16px; margin: 8px 0 0; flex-wrap: wrap;
}
.strip p { font-size: 13.5px; color: var(--tx-2); }
.strip b { color: var(--tx); }

/* секции */
.sect { padding: 52px 0; }
.sect-tight { padding: 34px 0; }

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }

.prod {
  background: rgba(255,255,255,.022); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px; transition: border-color .18s, transform .18s, background .18s;
}
.prod:hover { border-color: var(--line-3); transform: translateY(-2px); background: rgba(255,255,255,.035); }
.prod-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; color: #150800; font-weight: 700; margin-bottom: 14px; }
.prod h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.25px; margin-bottom: 7px; }
.prod p { font-size: 13.5px; color: var(--tx-3); line-height: 1.6; }
.prod ul { list-style: none; margin-top: 12px; display: grid; gap: 6px; }
.prod li { font-size: 13px; color: var(--tx-2); display: flex; gap: 8px; align-items: flex-start; }
.prod li::before { content: '▹'; color: var(--acc); flex: none; }

/* тарифы */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.plan {
  background: rgba(255,255,255,.022); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; display: flex; flex-direction: column; gap: 12px; position: relative;
  transition: border-color .18s, transform .18s;
}
.plan:hover { border-color: var(--line-3); transform: translateY(-2px); }
.plan.hit { border-color: var(--acc-line); background: linear-gradient(180deg, rgba(255,122,47,.07), rgba(255,255,255,.02)); }
.plan-tag { position: absolute; top: -10px; left: 16px; background: var(--acc); color: #180800; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--pill); letter-spacing: .04em; }
.plan-name { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-4); }
.plan-price { font-size: 27px; font-weight: 800; letter-spacing: -.9px; font-family: var(--mono); }
.plan-price i { font-style: normal; font-size: 12px; color: var(--tx-4); font-weight: 400; letter-spacing: 0; font-family: var(--sans); }
.plan-sub { font-size: 12px; color: var(--tx-4); }
.plan ul { list-style: none; display: grid; gap: 6px; font-size: 12.5px; color: var(--tx-2); }
.plan li { display: flex; gap: 7px; }
.plan li::before { content: '✓'; color: var(--grn); }
.plan .btn { margin-top: auto; }

/* шаги */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; counter-reset: st; }
.step { background: rgba(255,255,255,.022); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
.step-n { width: 26px; height: 26px; border-radius: 8px; background: var(--acc-soft); border: 1px solid var(--acc-line); color: var(--acc-2); font-family: var(--mono); font-size: 12px; font-weight: 600; display: grid; place-items: center; margin-bottom: 11px; }
.step b { display: block; font-size: 14.5px; margin-bottom: 5px; }
.step p { font-size: 13px; color: var(--tx-3); line-height: 1.55; }

/* FAQ */
.faq { display: grid; gap: 8px; }
.faq details { background: rgba(255,255,255,.022); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.faq details[open] { border-color: var(--line-3); background: rgba(255,255,255,.035); }
.faq summary { padding: 14px 16px; cursor: pointer; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--acc); font-size: 18px; font-weight: 400; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '−'; }
.faq p { padding: 0 16px 15px; font-size: 13.5px; color: var(--tx-3); line-height: 1.65; }

/* последние темы на главной */
.mini-topics { display: grid; gap: 8px; }
.mini-topic { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,.022); transition: border-color .15s, background .15s; }
.mini-topic:hover { border-color: var(--line-3); background: rgba(255,255,255,.04); }
.mini-topic .tt { flex: 1; min-width: 0; }
.mini-topic .tt b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-topic .tt span { font-size: 11.5px; color: var(--tx-4); }
.mini-topic .mt-meta { display: flex; gap: 12px; font-size: 12px; color: var(--tx-4); font-family: var(--mono); flex: none; }

/* =================================================================== ФОРУМ */
.page-head { padding: 26px 0 18px; }
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tx-4); margin-bottom: 10px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--acc-2); }
.crumbs i { font-style: normal; opacity: .5; }
.page-head h1 { font-size: clamp(24px, 3.4vw, 33px); font-weight: 800; letter-spacing: -.028em; }
.page-head p { color: var(--tx-3); font-size: 14.5px; margin-top: 7px; max-width: 720px; }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.forum-layout { display: grid; grid-template-columns: minmax(0,1fr) 296px; gap: 22px; padding-bottom: 40px; align-items: start; }
.side { display: grid; gap: 12px; position: sticky; top: calc(var(--hdr-h) + 16px); }
.side-card { background: rgba(255,255,255,.022); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.side-card > b { display: block; font-size: 13px; margin-bottom: 12px; letter-spacing: -.01em; }
.side-rows { display: grid; gap: 8px; }
.side-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--tx-3); }
.side-row b { font-family: var(--mono); font-size: 13px; color: var(--tx); font-weight: 500; }
.side-list { display: grid; gap: 8px; }
.side-user { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.side-user .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user .num { font-family: var(--mono); font-size: 12px; color: var(--tx-4); }
.side-avas { display: flex; flex-wrap: wrap; gap: 5px; }
.side-note { font-size: 12.5px; color: var(--tx-4); line-height: 1.6; }
.side-card ul.rules-list { list-style: none; display: grid; gap: 7px; }
.rules-list li { font-size: 12.5px; color: var(--tx-3); display: flex; gap: 7px; line-height: 1.5; }
.rules-list li::before { content: '§'; color: var(--acc); flex: none; }

/* категории */
.cats { display: grid; gap: 10px; }
.cat-row {
  display: grid; grid-template-columns: 46px minmax(0,1fr) 130px 190px; gap: 14px; align-items: center;
  background: rgba(255,255,255,.022); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; transition: border-color .16s, background .16s, transform .16s;
}
.cat-row:hover { border-color: var(--line-3); background: rgba(255,255,255,.04); transform: translateX(2px); }
.cat-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; font-weight: 700; }
.cat-main b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.cat-main p { font-size: 12.5px; color: var(--tx-4); margin-top: 3px; line-height: 1.45; }
.cat-nums { display: flex; gap: 14px; font-size: 12px; color: var(--tx-4); font-family: var(--mono); }
.cat-nums b { display: block; color: var(--tx-2); font-size: 14px; font-weight: 500; }
.cat-last { font-size: 12px; color: var(--tx-4); min-width: 0; }
.cat-last b { display: block; color: var(--tx-2); font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-lock { font-size: 10.5px; color: var(--tx-4); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: middle; }

/* панель фильтров */
.bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(255,255,255,.022); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 9px 11px; margin-bottom: 14px;
}
.bar-chips { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; }
.chip {
  border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--tx-3);
  border-radius: var(--pill); padding: 5px 12px; font-size: 12.5px; font-weight: 500;
  transition: background .14s, color .14s, border-color .14s;
}
.chip:hover { background: rgba(255,255,255,.06); color: var(--tx); }
.chip.on { background: var(--acc-soft); border-color: var(--acc-line); color: var(--acc-2); }
.bar .sel { width: auto; min-width: 148px; padding: 7px 32px 7px 11px; font-size: 13px; }

/* список тем */
.topics { display: grid; gap: 9px; }
.topic {
  display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 13px;
  background: rgba(255,255,255,.022); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 15px; transition: border-color .16s, background .16s;
  align-items: start;
}
.topic:hover { border-color: var(--line-3); background: rgba(255,255,255,.04); }
.topic.pin { border-color: rgba(255,122,47,.26); background: linear-gradient(90deg, rgba(255,122,47,.055), rgba(255,255,255,.02)); }
.topic-main { min-width: 0; }
.topic-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 5px; }
.topic-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--pill); border: 1px solid var(--line-2); }
.topic-title { font-size: 15.5px; font-weight: 650; letter-spacing: -.018em; line-height: 1.35; display: block; }
.topic:hover .topic-title { color: var(--acc-2); }
.topic-exc { font-size: 13px; color: var(--tx-4); margin-top: 5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.topic-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--tx-4); flex-wrap: wrap; }
.topic-meta a { color: var(--tx-3); font-weight: 500; }
.topic-meta a:hover { color: var(--acc-2); }
.topic-nums { display: flex; gap: 14px; align-items: center; flex: none; padding-left: 6px; }
.topic-num { text-align: center; min-width: 44px; }
.topic-num b { display: block; font-family: var(--mono); font-size: 15px; font-weight: 500; }
.topic-num span { font-size: 10.5px; color: var(--tx-4); }
.flag { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 5px; letter-spacing: .03em; text-transform: uppercase; }
.flag-pin { background: rgba(255,122,47,.16); color: var(--acc-2); }
.flag-lock { background: rgba(255,255,255,.07); color: var(--tx-3); }
.flag-solved { background: rgba(34,197,94,.15); color: #7ee2a4; }

/* пагинация */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 22px 0 6px; flex-wrap: wrap; }
.pager button {
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: var(--r-xs);
  border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--tx-3);
  font-size: 13px; font-weight: 600; font-family: var(--mono);
}
.pager button:hover:not(:disabled) { background: rgba(255,255,255,.07); color: var(--tx); }
.pager button.on { background: var(--acc-soft); border-color: var(--acc-line); color: var(--acc-2); }
.pager button:disabled { opacity: .35; cursor: default; }
.pager span { color: var(--tx-4); font-size: 13px; padding: 0 4px; }

/* ============================================================== ТЕМА/ПОСТЫ */
.topic-head { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 18px; }
.topic-head h1 { font-size: clamp(21px, 3vw, 30px); font-weight: 750; letter-spacing: -.026em; line-height: 1.2; }
.topic-head-meta { display: flex; align-items: center; gap: 12px; margin-top: 11px; flex-wrap: wrap; font-size: 12.5px; color: var(--tx-4); }
.topic-tools { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 13px; }

.posts { display: grid; gap: 12px; }
.post {
  display: grid; grid-template-columns: 158px minmax(0,1fr); gap: 0;
  background: rgba(255,255,255,.022); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; scroll-margin-top: calc(var(--hdr-h) + 14px);
}
.post.op { border-color: var(--line-2); background: rgba(255,255,255,.032); }
.post.solution { border-color: rgba(34,197,94,.36); box-shadow: 0 0 0 1px rgba(34,197,94,.12); }
.post.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%,20% { box-shadow: 0 0 0 2px var(--acc-line); } 100% { box-shadow: none; } }
.post-side {
  padding: 16px 14px; border-right: 1px solid var(--line);
  background: rgba(0,0,0,.18); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.post-side .nm { font-size: 13.5px; font-weight: 650; word-break: break-word; }
.post-side .nm:hover { color: var(--acc-2); }
.post-side .ut { font-size: 11px; color: var(--tx-4); }
.post-side .stats { font-size: 11px; color: var(--tx-4); font-family: var(--mono); display: grid; gap: 2px; margin-top: 2px; }
.post-body { padding: 15px 18px 12px; min-width: 0; display: flex; flex-direction: column; }
.post-head { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--tx-4); border-bottom: 1px solid var(--line); padding-bottom: 9px; margin-bottom: 12px; flex-wrap: wrap; }
.post-head .num { font-family: var(--mono); margin-left: auto; }
.post-head .num:hover { color: var(--acc-2); }
.post-quote { border-left: 2px solid var(--acc-line); background: rgba(255,122,47,.05); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 7px 11px; margin-bottom: 11px; font-size: 12.5px; color: var(--tx-3); }
.post-quote b { color: var(--tx-2); }
.post-foot { display: flex; align-items: center; gap: 7px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.post-sig { margin-top: 12px; padding-top: 9px; border-top: 1px dashed var(--line-2); font-size: 12px; color: var(--tx-4); font-style: italic; }
.like-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: rgba(255,255,255,.02); border-radius: var(--pill); padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--tx-3); transition: all .15s; }
.like-btn:hover { border-color: rgba(255,122,47,.4); color: var(--acc-2); }
.like-btn.on { background: var(--acc-soft); border-color: var(--acc-line); color: var(--acc-2); }
.solved-mark { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #7ee2a4; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); border-radius: var(--pill); padding: 3px 10px; }

/* контент поста */
.md { font-size: 14.5px; line-height: 1.72; color: var(--tx-2); word-wrap: break-word; overflow-wrap: anywhere; flex: 1; }
.md > * + * { margin-top: 12px; }
.md h3 { font-size: 18px; color: var(--tx); font-weight: 700; letter-spacing: -.02em; }
.md h4 { font-size: 16px; color: var(--tx); font-weight: 650; }
.md h5, .md h6 { font-size: 14.5px; color: var(--tx); font-weight: 650; }
.md strong { color: var(--tx); font-weight: 650; }
.md em { font-style: italic; }
.md del { opacity: .6; }
.md a { color: var(--acc-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255,122,47,.4); }
.md a:hover { text-decoration-color: var(--acc); }
.md a.mention { color: var(--vio); background: rgba(124,92,255,.12); border-radius: 4px; padding: 0 4px; text-decoration: none; font-weight: 600; }
.md ul, .md ol { padding-left: 22px; display: grid; gap: 5px; }
.md li { padding-left: 2px; }
.md ul li::marker { color: var(--acc); }
.md ol li::marker { color: var(--acc); font-family: var(--mono); font-size: .9em; }
.md code { font-family: var(--mono); font-size: 12.8px; background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: #ffd6b8; }
.md pre { background: #05060700; background-color: rgba(0,0,0,.42); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 12px 14px; overflow-x: auto; position: relative; }
.md pre code { background: none; border: 0; padding: 0; font-size: 12.6px; color: #d8e3ea; line-height: 1.6; }
.md pre[data-lang]::before { content: attr(data-lang); position: absolute; right: 10px; top: 6px; font-family: var(--mono); font-size: 10px; color: var(--tx-4); text-transform: uppercase; letter-spacing: .08em; }
.md blockquote { border-left: 3px solid var(--acc-line); background: rgba(255,122,47,.05); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 9px 14px; color: var(--tx-3); }
.md hr { border: 0; border-top: 1px solid var(--line-2); margin: 16px 0; }
.md .spoiler { background: rgba(255,255,255,.14); color: transparent; border-radius: 4px; padding: 0 4px; cursor: pointer; transition: color .18s, background .18s; }
.md .spoiler.show { background: rgba(255,255,255,.06); color: var(--tx-2); }
.md .spoiler:hover { background: rgba(255,255,255,.18); }

/* редактор ответа */
.editor { background: rgba(255,255,255,.022); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; margin-top: 16px; }
.editor-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; flex-wrap: wrap; }
.editor-head b { font-size: 14.5px; }
.editor-tools { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.editor-tools button {
  width: 30px; height: 28px; border-radius: var(--r-xs); border: 1px solid var(--line);
  background: rgba(255,255,255,.02); color: var(--tx-3); font-size: 12px; font-family: var(--mono);
  display: grid; place-items: center;
}
.editor-tools button:hover { background: rgba(255,255,255,.07); color: var(--tx); }
.editor-tools .gap { width: 1px; background: var(--line); margin: 0 4px; }
.editor-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; flex-wrap: wrap; }
.editor-hint { font-size: 11.5px; color: var(--tx-4); }
.editor-hint code { font-family: var(--mono); background: rgba(255,255,255,.07); border-radius: 4px; padding: 0 4px; }
.counter { font-size: 11.5px; color: var(--tx-4); font-family: var(--mono); }
.counter.warn { color: var(--yel); }
.preview-box { border: 1px dashed var(--line-2); border-radius: var(--r-sm); padding: 13px; margin-top: 10px; background: rgba(0,0,0,.18); }
.preview-box .lbl2 { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx-4); margin-bottom: 8px; }

.login-note { background: rgba(255,255,255,.022); border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 22px; text-align: center; margin-top: 16px; }
.login-note b { display: block; font-size: 15.5px; margin-bottom: 5px; }
.login-note p { font-size: 13.5px; color: var(--tx-3); margin-bottom: 14px; }
.login-note .btns { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

/* ================================================================ ПРОФИЛЬ */
.prof-head { display: flex; gap: 20px; align-items: flex-start; background: rgba(255,255,255,.022); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; flex-wrap: wrap; }
.prof-id { flex: 1; min-width: 220px; }
.prof-id h1 { font-size: 26px; font-weight: 750; letter-spacing: -.03em; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.prof-id .ut { font-size: 13.5px; color: var(--acc-2); margin-top: 3px; }
.prof-id .bio { font-size: 13.5px; color: var(--tx-3); margin-top: 9px; max-width: 620px; line-height: 1.6; }
.prof-nums { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.prof-num { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: var(--r-md); padding: 11px 13px; }
.prof-num b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 500; }
.prof-num span { font-size: 11px; color: var(--tx-4); }

/* ============================================================= УВЕДОМЛЕНИЯ */
.notif { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255,255,255,.022); }
.notif.new { border-color: var(--acc-line); background: rgba(255,122,47,.055); }
.notif-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; flex: none; background: rgba(255,255,255,.06); }
.notif-b { flex: 1; min-width: 0; }
.notif-b b { font-size: 13.5px; }
.notif-b p { font-size: 12.5px; color: var(--tx-4); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.notif-at { font-size: 11.5px; color: var(--tx-4); flex: none; font-family: var(--mono); }

/* ================================================================= ТАБЛИЦА */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 720px; }
table.tbl th { text-align: left; padding: 10px 13px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-4); background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.tbl td { padding: 10px 13px; border-bottom: 1px solid var(--line); color: var(--tx-2); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tr:hover td { background: rgba(255,255,255,.02); }
.row-acts { display: flex; gap: 5px; flex-wrap: wrap; }

/* ================================================================= АДАПТИВ */
@media (max-width: 1080px) {
  .forum-layout { grid-template-columns: minmax(0,1fr); }
  .side { position: static; grid-template-columns: repeat(2, minmax(0,1fr)); display: grid; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .plans, .steps, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .plans-min { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cat-row { grid-template-columns: 42px minmax(0,1fr) 120px; }
  .cat-last { display: none; }
}
@media (max-width: 760px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .prods-min, .tiles { grid-template-columns: 1fr; }
  .post { grid-template-columns: 1fr; }
  .post-side {
    flex-direction: row; align-items: center; text-align: left;
    border-right: 0; border-bottom: 1px solid var(--line); padding: 11px 14px; gap: 10px;
  }
  .post-side .stats { display: none; }
  .post-side .ava { width: 32px; height: 32px; font-size: 13px; border-radius: 9px; }
  .post-body { padding: 13px 15px 11px; }
  .prof-nums { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .hero { padding: 34px 0 26px; }
  .hero-min { padding: 42px 0 22px; }
  .sect { padding: 34px 0; }
  .plans, .steps, .grid-4, .side { grid-template-columns: 1fr; }
  .plans-min { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .hero-nums { gap: 14px; font-size: 12.5px; }
  .cat-row { grid-template-columns: 38px minmax(0,1fr); row-gap: 8px; }
  .cat-nums { grid-column: 1 / -1; gap: 18px; }
  .topic { grid-template-columns: minmax(0,1fr); }
  .topic > .ava { display: none; }
  .topic-nums { padding-left: 0; gap: 16px; }
  .topic-num { min-width: 38px; text-align: left; }
  .mini-topic .mt-meta { display: none; }
  .strip { flex-direction: column; align-items: flex-start; }
  .tk-row { grid-template-columns: 42px minmax(0,1fr); row-gap: 6px; }
  .tk-st { grid-column: 1 / -1; justify-self: start; }
  .ord-row { grid-template-columns: 70px minmax(0,1fr); row-gap: 6px; }
  .ord-st { grid-column: 1 / -1; justify-self: start; }
  .pay-card { padding: 26px 18px; }
  .key-box code { font-size: 15px; }
}