/* ==========================================================================
   Обратная связь — багтрекер «Профишопса».
   Всё на переменных темы: любая из 11 схем должна работать без правок.
   Тон: плотный список обращений, спокойные карточки сообщений, один акцент.
   ========================================================================== */

/* ---------- шапка страницы ---------- */
.fb-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap}
.fb-hero .sub{max-width:640px}
.fb-hero-cta{flex:0 0 auto;padding-bottom:6px}

/* ---------- служебные мелочи ---------- */
.fb-n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}
.fb-status + .fb-n,.fb-type + .fb-n{font-weight:600}
.fb-sep{color:var(--muted3)}
.fb-when{color:var(--muted);font-size:12.5px;white-space:nowrap}
.fb-label{font-size:12.5px;color:var(--muted);font-weight:500}
.fb-hint{font-size:12px;color:var(--muted);line-height:1.45}
.fb-link{background:none;border:0;padding:3px 8px;border-radius:7px;font:inherit;font-size:12.5px;
  color:var(--muted);cursor:pointer;transition:color .15s,background-color .15s}
.fb-link:hover{color:var(--bad-fg);background:var(--bad-bg)}
.fb-inline{display:inline-flex}

/* ---------- бейджи типа и статуса ---------- */
.fb-type{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px;
  border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;
  color:color-mix(in srgb,var(--tone,var(--muted)) 62%,var(--text));
  background:var(--surface2);border:1px solid var(--line);
  background:color-mix(in srgb,var(--tone,var(--muted)) 12%,transparent);
  border-color:color-mix(in srgb,var(--tone,var(--muted)) 34%,transparent)}
.fb-type svg{width:12px;height:12px;flex:0 0 12px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.fb-type.t-suggestion{--tone:var(--accent)}
.fb-type.t-bug{--tone:var(--bad-fg)}
.fb-type.t-payment{--tone:var(--warn-fg)}

.fb-status{display:inline-flex;align-items:center;font-size:12px;font-weight:600;
  padding:3px 9px;border-radius:999px;white-space:nowrap;
  color:var(--text-soft);background:var(--surface2);border:1px solid var(--line)}
.fb-status.s-accent{color:color-mix(in srgb,var(--accent) 62%,var(--text));
  background:color-mix(in srgb,var(--accent) 13%,transparent);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.fb-status.s-ok{color:var(--ok-fg);background:var(--ok-bg);border-color:var(--ok-line)}
.fb-status.s-closed{color:var(--muted);background:transparent;border-style:dashed}

.fb-priv{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;
  padding:3px 8px;border-radius:999px;color:var(--muted);border:1px dashed var(--line-hover);
  background:transparent;white-space:nowrap}
.fb-priv svg{width:11px;height:11px;flex:0 0 11px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- голоса ---------- */
.fb-vote{display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  font-variant-numeric:tabular-nums}
.fb-vote-btn{width:26px;height:22px;padding:0;display:grid;place-items:center;cursor:pointer;
  border:1px solid transparent;border-radius:7px;background:none;color:var(--muted2);
  transition:color .15s,background-color .15s,border-color .15s}
.fb-vote-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.fb-vote-btn:hover{color:var(--text);background:var(--surface2);border-color:var(--line)}
.fb-vote-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.fb-vote-btn.up.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 42%,transparent);
  background:color-mix(in srgb,var(--accent) 14%,transparent)}
.fb-vote-btn.down.on{color:var(--bad-fg);border-color:var(--bad-line);background:var(--bad-bg)}
.fb-score{min-width:20px;text-align:center;font-size:13px;font-weight:650;line-height:1.3;
  color:var(--text-soft)}
.fb-score.up{color:color-mix(in srgb,var(--accent) 62%,var(--text))}
.fb-score.down{color:color-mix(in srgb,var(--bad-fg) 82%,var(--text))}
.fb-vote.off .fb-vote-btn{color:var(--muted3);opacity:.6;cursor:not-allowed;background:none;
  border-color:transparent}
.fb-vote.off .fb-score{color:var(--muted)}

.fb-vote.big{flex-direction:row;align-items:center;gap:4px;padding:4px 12px 4px 4px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.fb-vote.big .fb-vote-btn{width:30px;height:30px;border-radius:50%}
.fb-vote.big .fb-vote-btn:hover{border-color:var(--line-hover)}
.fb-vote.big .fb-score{font-size:15px;min-width:28px}

/* ---------- список тем ---------- */
.fb-toolbar{gap:8px}
.fb-toolbar .seg{flex-wrap:wrap;max-width:100%}
.fb-toolbar .toolbar-form{flex:1 1 180px;min-width:170px;justify-content:flex-end}
.fb-toolbar .inp.search{flex:1 1 auto;max-width:none}
.fb-toolbar .seg a{display:inline-flex;align-items:center;gap:6px}
.fb-toolbar .seg a .fb-n{transition:color .15s}
.fb-toolbar .seg a.on .fb-n{color:var(--text)}

.fb-list{list-style:none;margin:0 0 8px;padding:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.fb-row{display:grid;grid-template-columns:54px minmax(0,1fr) 44px;align-items:stretch;
  border-top:1px solid var(--line-soft);transition:background-color .15s ease}
.fb-row:first-child{border-top:0}
.fb-row:hover{background:var(--hover)}
.fb-row-vote{display:flex;align-items:center;justify-content:center;padding:10px 0;
  border-right:1px solid var(--line-soft)}
.fb-row-vote .fb-vote-btn{width:28px;height:24px}
.fb-row-vote .fb-vote-btn svg{width:16px;height:16px}
.fb-row-main{display:flex;flex-direction:column;gap:7px;padding:13px 14px 12px;min-width:0}
.fb-row-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-width:0}
.fb-row-title{font-size:15.5px;line-height:1.35;font-weight:600;letter-spacing:-.012em;
  color:var(--text);min-width:0;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .15s}
a.fb-row-title:hover{color:var(--accent)}
a.fb-row-title:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.fb-row-text{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.fb-row-meta{display:flex;align-items:center;gap:4px 11px;flex-wrap:wrap;font-size:12.5px;
  color:var(--muted)}
.fb-row-meta .fb-n{color:var(--muted)}
.fb-row-who{color:var(--text-soft);font-weight:500}
.fb-row-live{color:var(--muted)}
.fb-row-go{display:grid;place-items:center;color:var(--muted2);
  transition:color .15s,transform .15s}
.fb-row-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.fb-row-go:hover{color:var(--accent);transform:translateX(2px)}
.fb-row-go:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:8px}

.fb-empty{gap:10px;text-align:center}
.fb-empty b{color:var(--text);font-size:16px}
.fb-empty a{color:var(--link)}

/* ---------- страница темы ---------- */
.fb-topic{max-width:780px;padding-bottom:60px}
.fb-topic-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 2px}
.fb-title{font-size:clamp(22px,3vw,30px);line-height:1.18;letter-spacing:-.028em;
  margin:10px 0 10px;overflow-wrap:anywhere;text-wrap:balance;max-width:24em}
.fb-topic-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:14px}
.fb-topic-meta .fb-who{font-size:13.5px;color:var(--text)}
.fb-ava{width:22px;height:22px;flex:0 0 22px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--ava-ph);background:var(--surface2);
  border:1px solid var(--line)}
.fb-tag{font-size:11px;font-weight:600;padding:1px 6px;border-radius:5px;
  border:1px solid var(--line);color:var(--muted);background:var(--surface2)}
.fb-tag.soft{color:var(--muted);background:transparent}

.fb-toolbar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.fb-status-form{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.fb-status-form .inp{padding:6px 10px;font-size:13px}
.fb-close{display:flex}
.fb-toolbar-row .fb-close:only-of-type{margin-left:auto}

.fb-subject{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:20px}
.fb-body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15.5px;line-height:1.65;
  color:var(--text-soft)}
.fb-body.fb-deleted{color:var(--muted);font-style:italic}
.fb-closed-note{margin:0 0 16px}

.fb-thread-title{font-size:13px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:24px 0 12px}
.fb-thread-empty{margin:0 0 18px;color:var(--muted);font-size:14px;max-width:60ch}

/* ветки: каждый следующий уровень — тонкая вертикальная линия, не бесконечный отступ */
.fb-thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fb-thread .fb-thread{margin-top:10px;padding-left:20px;
  border-left:1px solid var(--line);gap:8px}
.fb-item{min-width:0}
.fb-item:target > .fb-post{border-color:var(--line-hover);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent)}

.fb-post{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:13px 15px 11px;transition:border-color .15s}
.fb-post:hover{border-color:var(--line-hover)}
.fb-post.is-deleted{background:transparent;border-style:dashed}
.fb-post-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.fb-post-head .fb-who{font-size:13.5px;color:var(--text)}
.fb-hash{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;
  padding:1px 5px;border-radius:5px;transition:color .15s,background-color .15s}
.fb-hash:hover{color:var(--accent);background:var(--surface2)}
.fb-post .fb-body{font-size:14.5px;line-height:1.6}
.fb-post-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line-soft)}
.fb-post-foot .fb-vote{flex-direction:row;align-items:center;gap:1px}
.fb-post-foot .fb-vote-btn{width:23px;height:21px}
.fb-post-foot .fb-vote-btn svg{width:13px;height:13px}
.fb-post-foot .fb-score{font-size:12.5px;min-width:17px}

/* форма ответа под сообщением */
.fb-reply{margin-left:2px}
.fb-reply summary{list-style:none;cursor:pointer;font-size:12.5px;color:var(--muted);
  padding:3px 9px;border-radius:7px;transition:color .15s,background-color .15s}
.fb-reply summary::-webkit-details-marker{display:none}
.fb-reply summary:hover{color:var(--text);background:var(--surface2)}
.fb-reply summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fb-reply[open]{display:block;width:100%;margin-top:6px}
.fb-reply[open] summary{color:var(--text);margin-bottom:8px;padding-left:0}

/* ---------- формы ---------- */
.fb-form{display:flex;flex-direction:column;gap:9px;width:100%}
.fb-textarea{width:100%;resize:vertical;min-height:76px;line-height:1.55;font-family:inherit;
  caret-color:var(--accent)}
.fb-form-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:2px}
.fb-compose{margin-top:22px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px 16px;scroll-margin-top:96px}
.fb-login{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-top:20px}
.fb-login span{color:var(--text-soft)}
.fb-fineprint{margin:14px 0 0;max-width:64ch;line-height:1.5}

/* ---------- новая тема ---------- */
.fb-new{max-width:760px;padding-bottom:70px}
.fb-new h1{font-size:30px;letter-spacing:-.03em;margin:0 0 8px}
.fb-new .sub{margin-bottom:20px}
.fb-new-form{gap:16px;margin-top:6px}
.fb-field{display:flex;flex-direction:column;gap:6px}
.fb-field .inp{padding:10px 12px;font-size:14.5px}
.fb-new .inp::placeholder,.fb-textarea::placeholder{color:var(--muted);opacity:1}

.fb-kinds{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;min-width:0}
.fb-kinds legend{grid-column:1/-1;padding:0 0 8px;font-size:12.5px;color:var(--muted)}
.fb-kind{position:relative;display:flex;flex-direction:column;gap:3px;padding:12px 13px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);cursor:pointer;
  transition:border-color .15s,background-color .15s}
.fb-kind input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fb-kind-top{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;
  color:var(--text-soft)}
.fb-kind-top svg{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;color:var(--tone,var(--muted))}
.fb-kind-hint{font-size:12px;color:var(--muted);line-height:1.4}
.fb-kind.t-suggestion{--tone:var(--accent)}
.fb-kind.t-bug{--tone:var(--bad-fg)}
.fb-kind.t-payment{--tone:var(--warn-fg)}
.fb-kind:hover{border-color:var(--line-hover)}
.fb-kind:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.fb-kind:has(input:checked),.fb-kind.is-on{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  background:color-mix(in srgb,var(--accent) 9%,var(--surface))}
.fb-kind:has(input:checked) .fb-kind-top,.fb-kind.is-on .fb-kind-top{color:var(--text)}
.fb-kind-mark{position:absolute;top:11px;right:11px;width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--line-hover);color:transparent;
  transition:background-color .15s,border-color .15s,color .15s}
.fb-kind-mark svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.fb-kind:has(input:checked) .fb-kind-mark,.fb-kind.is-on .fb-kind-mark{
  background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.fb-check{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;cursor:pointer;
  border:1px dashed var(--line-hover);border-radius:12px;background:var(--surface);
  transition:border-color .15s,background-color .15s}
.fb-check:hover{border-color:var(--accent)}
.fb-check:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.fb-check input{width:16px;height:16px;flex:0 0 16px;margin-top:2px;accent-color:var(--accent);
  cursor:pointer}
.fb-check b{display:block;font-size:13.5px;font-weight:600;margin-bottom:2px}
.fb-check small{display:block;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* ---------- правила ---------- */
.fb-rules{margin:36px 0 0;padding-top:22px;border-top:1px solid var(--line);max-width:860px;
  padding-bottom:40px}
.fb-rules h2{font-size:17px;letter-spacing:-.02em;margin:0 0 14px}
.fb-rules dl{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px 22px;margin:0}
.fb-rules dt{font-size:13.5px;font-weight:600;color:var(--text)}
.fb-rules dd{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:66ch}

/* ---------- адаптив ---------- */
@media (max-width:820px){
  .fb-topic{max-width:none}
  .fb-row{grid-template-columns:44px minmax(0,1fr)}
  .fb-row-go{display:none}
  .fb-row-main{padding:12px 12px 11px}
  .fb-row-title{font-size:15px}
  .fb-status-form{margin-left:0;width:100%}
  .fb-thread .fb-thread{padding-left:14px;margin-top:8px}
  .fb-rules dl{grid-template-columns:1fr;gap:4px}
  .fb-rules dd{margin-bottom:12px}
}
@media (max-width:640px){
  .fb-kinds{grid-template-columns:1fr}
  .fb-hero-cta{width:100%}
  .fb-hero-cta .btn{width:100%;justify-content:center}
  .fb-title{font-size:22px;max-width:none}
  .fb-subject{padding:15px 16px}
  .fb-post{padding:12px 13px 10px}
  .fb-thread .fb-thread{padding-left:11px}
  .fb-row-head{gap:7px}
  .fb-toolbar .seg{width:100%;overflow:visible}
}
@media (prefers-reduced-motion:reduce){
  .fb-row,.fb-row-go,.fb-kind,.fb-vote-btn,.fb-check,.fb-post{transition:none}
}