/* Форум проблем и решений (Обучение → Форум, 2026-10-04) */
.fr{ --ok:#45C987; --acc:#FF6A1A; display:flex; gap:20px; align-items:flex-start; }
.fr-side{ flex:0 0 230px; position:sticky; top:12px; display:flex; flex-direction:column; gap:4px; }
.fr-side .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); margin:4px 10px 6px; font-weight:700; }
.fr-cat{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; color:var(--text-dim); font-size:13.5px; cursor:pointer; border:0; background:none; text-align:left; font-family:var(--sans); }
.fr-cat:hover{ background:var(--panel-2); color:var(--text); } .fr-cat.on{ background:rgba(255,106,26,.12); color:var(--text); }
.fr-cat small{ color:var(--text-faint); font-size:11.5px; font-variant-numeric:tabular-nums; }
.fr-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:12px; }
.fr-bar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.fr-search{ flex:1 1 260px; display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--border-soft); border-radius:10px; padding:0 12px; }
.fr-search input{ flex:1; background:none; border:0; color:var(--text); font:14px var(--sans); padding:10px 0; outline:none; }
.fr-sorts{ display:flex; gap:4px; background:var(--panel); border:1px solid var(--border-soft); padding:3px; border-radius:10px; flex-wrap:wrap; }
.fr-sorts button{ background:none; border:0; color:var(--text-dim); font:600 12.5px var(--sans); padding:7px 11px; border-radius:7px; cursor:pointer; }
.fr-sorts button.on{ background:var(--panel-3); color:var(--text); }
.fr-btn{ background:var(--acc); color:#fff; border:0; border-radius:10px; padding:10px 16px; font:700 13.5px var(--sans); cursor:pointer; white-space:nowrap; }
.fr-btn:hover{ filter:brightness(1.08); } .fr-btn.ghost{ background:var(--panel-2); color:var(--text); border:1px solid var(--border-soft); }
.fr-btn:disabled{ opacity:.5; cursor:default; }
.fr-post{ display:flex; gap:14px; padding:14px 16px; background:var(--panel); border:1px solid var(--border-soft); border-radius:14px; text-decoration:none; color:inherit; transition:border-color .15s; }
.fr-post:hover{ border-color:rgba(var(--glow),.35); }
.fr-vote{ flex:0 0 40px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.fr-vote button{ width:30px; height:26px; border-radius:7px; border:0; background:none; color:var(--text-faint); cursor:pointer; display:grid; place-items:center; }
.fr-vote button:hover{ background:var(--panel-3); color:var(--text); }
.fr-vote button.on.up{ color:var(--acc); } .fr-vote button.on.down{ color:#7FA6FF; }
.fr-vote b{ font-size:14px; color:var(--text); font-variant-numeric:tabular-nums; }
.fr-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.fr-meta{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:12px; color:var(--text-faint); }
.fr-chip{ font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:6px; background:var(--panel-3); color:var(--text-dim); }
.fr-chip.solved{ background:rgba(69,201,135,.14); color:var(--ok); } .fr-chip.open{ background:rgba(242,176,74,.13); color:#F2B04A; }
.fr-chip.src{ background:rgba(255,106,26,.12); color:#FF8A4C; } .fr-chip.pin{ background:rgba(127,166,255,.14); color:#9DB8FF; }
.fr-title{ font-size:16px; font-weight:750; color:var(--text); line-height:1.35; }
.fr-ex{ font-size:13.5px; color:var(--text-dim); line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.fr-foot{ display:flex; gap:14px; font-size:12.5px; color:var(--text-faint); align-items:center; flex-wrap:wrap; }
.fr-tag{ font-size:11.5px; color:var(--text-faint); } .fr-tag::before{ content:'#'; opacity:.6; }
.fr-empty{ padding:40px; text-align:center; color:var(--text-faint); border:1px dashed var(--border); border-radius:14px; }
/* тема */
.ft{ display:flex; flex-direction:column; gap:14px; max-width:980px; }
.ft-card{ display:flex; gap:14px; padding:18px 20px; background:var(--panel); border:1px solid var(--border-soft); border-radius:16px; }
.ft-card h1{ margin:0 0 4px; font-size:22px; line-height:1.3; color:var(--text); font-weight:800; }
.md{ font-size:14.5px; line-height:1.6; color:var(--text-dim); word-wrap:break-word; }
.md p{ margin:0 0 8px; } .md ul, .md ol{ margin:0 0 8px; padding-left:20px; } .md li{ margin:2px 0; }
.md code{ background:var(--panel-3); padding:1px 6px; border-radius:5px; font-size:13px; color:var(--text); }
.md b{ color:var(--text); } .md a{ color:#FF8A4C; }
.ft-sol{ border:1px solid rgba(69,201,135,.35); background:linear-gradient(160deg,rgba(69,201,135,.08),var(--panel) 60%); }
.ft-sol-lbl{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ok); display:flex; align-items:center; gap:6px; }
.ft-h{ font-size:14px; font-weight:750; color:var(--text); margin:6px 0 0; }
.fc{ display:flex; gap:12px; padding:14px 16px; background:var(--panel); border:1px solid var(--border-soft); border-radius:14px; scroll-margin-top:80px; }
.fc.solution{ border-color:rgba(69,201,135,.45); }
.fc.reply{ margin-left:46px; background:var(--panel-2); }
.fc.flash{ box-shadow:0 0 0 2px rgba(255,106,26,.5); }
.fc-head{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--text-faint); }
.fc-head b{ color:var(--text); font-size:13px; }
.fc-ava{ width:22px; height:22px; border-radius:50%; background:var(--panel-3); display:grid; place-items:center; font-size:10px; font-weight:800; color:var(--text); overflow:hidden; flex:0 0 22px; }
.fc-ava img{ width:100%; height:100%; object-fit:cover; }
.fc-role{ font-size:10px; font-weight:800; padding:2px 6px; border-radius:5px; background:rgba(255,106,26,.14); color:#FF8A4C; text-transform:uppercase; letter-spacing:.04em; }
.fc-acts{ display:flex; gap:12px; margin-top:4px; }
.fc-acts button{ background:none; border:0; padding:0; color:var(--text-faint); font:600 12.5px var(--sans); cursor:pointer; }
.fc-acts button:hover{ color:var(--text); } .fc-acts button.sol{ color:var(--ok); }
.fr-ta{ width:100%; min-height:110px; resize:vertical; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:12px; color:var(--text); font:14px/1.5 var(--sans); padding:12px 14px; outline:none; box-sizing:border-box; }
.fr-ta:focus, .fr-in:focus{ border-color:rgba(255,106,26,.5); }
.fr-in{ width:100%; background:var(--panel-2); border:1px solid var(--border-soft); border-radius:10px; color:var(--text); font:14px var(--sans); padding:10px 12px; outline:none; box-sizing:border-box; }
.fr-compose{ display:flex; flex-direction:column; gap:10px; padding:16px; background:var(--panel); border:1px solid var(--border-soft); border-radius:14px; }
.fr-hint{ font-size:12px; color:var(--text-faint); }
/* модалка */
.fr-modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:60px 16px; overflow:auto; }
.fr-dlg{ width:720px; max-width:100%; background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:12px; }
.fr-dlg h2{ margin:0; font-size:19px; color:var(--text); }
.fr-dlg label{ display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--text-dim); }
.fr-similar{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:10px; background:rgba(242,176,74,.07); border:1px solid rgba(242,176,74,.25); }
.fr-similar a{ font-size:13px; color:var(--text); text-decoration:none; } .fr-similar a:hover{ color:#FF8A4C; }
.fr-row{ display:flex; gap:10px; justify-content:flex-end; }
@media (max-width: 900px){ .fr{ flex-direction:column; } .fr-side{ position:static; flex:none; width:100%; flex-direction:row; flex-wrap:wrap; } .fr-side .lbl{ display:none; } .fc.reply{ margin-left:18px; } }