.prob-page{max-width:1380px;margin-inline:auto}

.prob-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:28px;
  align-items:start;
}

.prob-main{min-width:0;max-width:880px}
.prob-main.prob-wrap{max-width:880px}

.prob-section{scroll-margin-top:calc(var(--topbar-h,64px) + 24px)}

.prob-side{
  display:flex;flex-direction:column;gap:14px;
  position:sticky;
  top:calc(var(--topbar-h,64px) + 16px);
  align-self:start;
  max-height:calc(100vh - var(--topbar-h,64px) - 32px);
}
.prob-side > .pss-card{min-height:0}
.pss-card--prog{flex:0 0 auto}
.pss-card--toc,
.pss-card--mist{
  flex:0 1 auto;min-height:0;
  display:flex;flex-direction:column;
}
.pss-card--toc > .pss-head,
.pss-card--mist > .pss-head{flex:0 0 auto}
.pss-card--toc .pss-nav,
.pss-card--mist .pss-mist-list{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;scrollbar-width:thin;
}
.pss-card--toc .pss-nav::-webkit-scrollbar,
.pss-card--mist .pss-mist-list::-webkit-scrollbar{width:5px}
.pss-card--toc .pss-nav::-webkit-scrollbar-thumb,
.pss-card--mist .pss-mist-list::-webkit-scrollbar-thumb{
  background:color-mix(in srgb,var(--text-primary) 20%,transparent);
  border-radius:99px;
}
.pss-card--toc .pss-nav::-webkit-scrollbar-track,
.pss-card--mist .pss-mist-list::-webkit-scrollbar-track{background:transparent}

@media (max-width:1100px){
  .prob-grid{grid-template-columns:1fr;gap:18px}
  .prob-main,.prob-main.prob-wrap{max-width:none}
  .prob-side{
    position:static;
    top:auto;
    align-self:auto;
    height:auto;
    max-height:none;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .prob-side > .pss-card{flex:0 0 auto;min-height:auto}
  .pss-card--toc,
  .pss-card--mist{display:block;flex:none}
  .pss-card--toc .pss-nav,
  .pss-card--mist .pss-mist-list{
    overflow-y:visible;min-height:auto;flex:none;
  }
}

@media (min-width:1600px){
  .prob-page{max-width:1720px}
  .prob-grid{
    grid-template-columns:minmax(0,1fr) auto;
    gap:24px;
    align-items:start;
  }
  .prob-main{max-width:1020px}
  .prob-side{
    display:grid;
    grid-template-columns:272px 312px;
    grid-template-rows:auto auto;
    gap:14px 24px;
    position:sticky;
    top:calc(var(--topbar-h,64px) + 16px);
    align-self:start;
    align-content:start;
    max-height:calc(100vh - var(--topbar-h,64px) - 32px);
  }
  .pss-card--prog{grid-column:1;grid-row:1;flex:none;display:flex;align-self:start}
  .pss-card--toc{
    grid-column:1;grid-row:2;
    display:flex;flex-direction:column;
    min-height:0;
    align-self:start;
    max-height:calc(100vh - var(--topbar-h,64px) - 260px);
  }
  .pss-card--mist{
    grid-column:2;grid-row:1 / span 2;
    display:flex;flex-direction:column;
    min-height:0;
    align-self:start;
    max-height:calc(100vh - var(--topbar-h,64px) - 32px);
  }
  .pss-card--toc .pss-nav,
  .pss-card--mist .pss-mist-list{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
  }
}
@media (min-width:1920px){
  .prob-page{max-width:1840px}
  .prob-main{max-width:1080px}
  .prob-side{
    grid-template-columns:296px 340px;
    gap:14px 28px;
  }
}

@media (max-width:1100px){
  .pss-card--toc .pss-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .pss-card--mist .pss-mist-list{max-height:none}
}
@media (max-width:640px){
  .prob-page{padding-inline:0}
  .pss-card{border-radius:12px;padding:12px 12px}
  .pss-card--toc .pss-nav{grid-template-columns:1fr}
  .pss-card--ring{display:flex;align-items:center;gap:14px}
  .pss-card--ring .pss-prog-ring{width:96px;flex-shrink:0}
  .pss-card--ring .pss-prog-meta{margin-top:0}
}
.pss-mist-sec{font-size:calc(10.5px * var(--fs-scale, 1));color:var(--text-secondary);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}

.pss-card{
  padding:14px 16px;border-radius:14px;
  background:var(--surface-raised);
  border:1px solid var(--border-subtle);
}

.pss-head{
  display:flex;align-items:center;gap:8px;
  padding-bottom:10px;margin-bottom:10px;
  border-bottom:1px solid var(--border-subtle);
  font-size:calc(13px * var(--fs-scale, 1));font-weight:800;color:var(--text-primary);
}
.pss-head svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}

.pss-head--toggle{
  width:100%;
  border:none;
  background:transparent;
  font-family:inherit;
  cursor:pointer;
  text-align:start;
  transition:color .18s var(--ease);
  padding-inline:0;
}
.pss-head--toggle:hover{color:var(--accent)}
.pss-head--toggle[aria-expanded="true"]{color:var(--accent)}
.pss-chev{
  margin-inline-start:auto;
  display:grid;place-items:center;
  width:16px;height:16px;
  color:var(--text-tertiary);
    transform:rotate(-90deg);
  transition:transform .25s var(--ease-ios), color .18s var(--ease);
}
.pss-head--toggle:hover .pss-chev{color:var(--accent)}
.pss-head--toggle[aria-expanded="true"] .pss-chev{
  transform:rotate(90deg);
}

.pss-nav{display:flex;flex-direction:column;gap:3px}

.pss-item{
  display:grid;grid-template-columns:26px 1fr;gap:10px;
  padding:8px 10px;border-radius:10px;text-decoration:none;
  color:var(--text-secondary);
  transition:background .18s var(--ease),color .18s var(--ease);
}
.pss-item:hover,
.pss-item.on{
  background:color-mix(in srgb,var(--accent) 10%,var(--surface-nested));
  color:var(--text-primary);
}

.pss-num{
  display:grid;place-items:center;
  width:26px;height:26px;border-radius:8px;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  color:var(--accent);
  font-size:calc(11.5px * var(--fs-scale, 1));font-weight:800;
  font-variant-numeric:tabular-nums;flex-shrink:0;
}

.pss-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.pss-body b{
  font-size:calc(12.5px * var(--fs-scale, 1));font-weight:700;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pss-meta{
  font-size:calc(10.5px * var(--fs-scale, 1));color:var(--text-tertiary);
  font-variant-numeric:tabular-nums;
}
.pss-bar{
  display:block;height:3px;border-radius:99px;
  background:color-mix(in srgb,var(--border-strong) 50%,transparent);
  overflow:hidden;margin-top:3px;
}
.pss-bar>i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--color-cyan));
  transition:width .5s var(--ease);
}

.pss-empty{
  font-size:calc(12px * var(--fs-scale, 1));color:var(--text-tertiary);
  line-height:1.8;text-align:center;padding:6px 4px;
}

.pss-count{
  margin-inline-start:auto;
  font-size:calc(11px * var(--fs-scale, 1));font-weight:800;
  color:var(--color-rose);
  padding:1px 8px;
  border-radius:99px;
  background:color-mix(in srgb,var(--color-rose) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--color-rose) 32%,transparent);
  font-variant-numeric:tabular-nums;
  line-height:1.6;
}

.pss-mist-list{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:0 -4px;
  padding:0 4px;
}
.pss-mist-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 26px;
  gap:6px;
  align-items:center;
  padding:6px 6px 6px 10px;
  border-radius:9px;
  border:1px solid transparent;
  transition:
    background .16s var(--ease),
    border-color .16s var(--ease);
}
.pss-mist-item:hover{
  background:color-mix(in srgb,var(--color-rose) 6%,var(--surface-nested));
  border-color:color-mix(in srgb,var(--color-rose) 18%,transparent);
}
.pss-mist-main{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  text-decoration:none;
  color:var(--text-secondary);
  transition:color .16s var(--ease);
}
.pss-mist-main:hover{ color:var(--text-primary); }
.pss-mist-title{
  font-size:calc(12.5px * var(--fs-scale, 1));
  font-weight:600;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pss-mist-sec{
  font-size:calc(10.5px * var(--fs-scale, 1));
  color:var(--text-tertiary);
  opacity:.85;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pss-mist-badge{
  font-family:var(--font-mono,monospace);
  font-size:calc(10.5px * var(--fs-scale, 1));
  font-weight:800;
  color:var(--color-rose);
  font-variant-numeric:tabular-nums;
  padding:2px 7px;
  border-radius:6px;
  background:color-mix(in srgb,var(--color-rose) 10%,transparent);
  flex-shrink:0;
  line-height:1.3;
  user-select:none;
  cursor:default;
}
.pss-mist-del{
  width:26px;
  height:26px;
  border-radius:7px;
  display:grid;
  place-items:center;
  border:none;
  background:transparent;
  color:var(--text-tertiary);
  cursor:pointer;
  padding:0;
  opacity:0;
  transition:
    opacity .15s var(--ease),
    background .15s var(--ease),
    color .15s var(--ease);
  flex-shrink:0;
}
.pss-mist-del svg{ width:12px; height:12px; display:block; }
.pss-mist-item:hover .pss-mist-del{ opacity:1; }
.pss-mist-del:hover{
  background:color-mix(in srgb,var(--color-rose) 16%,transparent);
  color:var(--color-rose);
}
.pss-mist-del:focus-visible{
  opacity:1;
  outline:2px solid var(--accent);
  outline-offset:1px;
}
@media (hover: none){
  .pss-mist-del{ opacity:.55; }
}

.pss-card--prog{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:20px 16px 18px;
  background:linear-gradient(160deg,
    color-mix(in srgb,var(--accent) 9%,var(--surface-raised)),
    var(--surface-raised));
  border-color:color-mix(in srgb,var(--accent) 24%,var(--border-subtle));
  box-shadow:0 12px 30px -22px color-mix(in srgb,var(--accent) 55%,transparent);
}

.pss-prog-ring{
  position:relative;width:130px;height:130px;
  display:grid;place-items:center;
}

.pss-prog-ring svg{
  width:100%;height:100%;
  transform:rotate(-90deg);
}

.pss-prog-bg{
  fill:none;
  stroke:color-mix(in srgb,var(--border-strong) 55%,transparent);
  stroke-width:9;
}

.pss-prog-fg{
  fill:none;
  stroke:url(#pssProgGrad);
  stroke-width:9;
  stroke-linecap:round;
  transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 55%,transparent));
}

.pss-prog-tx{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;pointer-events:none;
}

.pss-prog-tx b{
  font-family:var(--font-mono);
  font-size:calc(1.7rem * var(--fs-scale, 1));font-weight:800;line-height:1;
  letter-spacing:-.03em;color:var(--text-primary);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px color-mix(in srgb,var(--accent) 40%,transparent);
}

.pss-prog-tx span{
  font-size:calc(10.5px * var(--fs-scale, 1));font-weight:700;
  color:var(--text-tertiary);
  letter-spacing:.04em;
}

.pss-prog-meta{
  display:flex;align-items:baseline;gap:5px;
  font-size:calc(11.5px * var(--fs-scale, 1));color:var(--text-tertiary);
}

.pss-prog-meta b{
  font-size:calc(14px * var(--fs-scale, 1));font-weight:800;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}

.prob-wrap h2{
  position:relative;
  margin:30px 0 14px;
  padding-inline-start:12px;
  font-size:calc(17px * var(--fs-scale, 1));
  font-weight:800;
  line-height:1.5;
  color:var(--text-primary);
  background:none;
  border:none;
  border-radius:0;
}
.prob-wrap h2::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:4px;
  bottom:4px;
  width:3px;
  border-radius:2px;
  background:var(--accent);
}
.prob-wrap .card{
  background:linear-gradient(160deg,var(--surface-raised),var(--surface-recess));
  border:1px solid var(--border-subtle);
  border-radius:var(--radius);
  padding:16px 18px;
  margin:14px 0;
  box-shadow:var(--shadow-base);
  /* رندر تنبل — بزرگ‌ترین برد روی صفحات بلند */
  content-visibility:auto;
  contain-intrinsic-size:auto 320px;
}
.prob-wrap .card h3{display:flex;align-items:center;gap:8px;font-size:calc(14.5px * var(--fs-scale, 1));color:var(--color-cyan);margin-bottom:10px}
.prob-wrap p{font-size:calc(var(--font-size-base) * 0.89);color:var(--text-primary);margin:8px 0}
.prob-map{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 4px}

.prob-wrap .meta-box{background:var(--surface-nested);border:1px solid var(--border-subtle);border-right:4px solid var(--color-blue);padding:8px 12px;margin:8px 0 14px;border-radius:8px;font-size:calc(var(--font-size-base) * 0.84);line-height:1.9;color:var(--text-secondary)}
.prob-wrap .meta-box b{color:var(--text-primary)}
.prob-wrap .en{direction:ltr;text-align:left;font-size:calc(var(--font-size-base) * 0.77);color:var(--text-tertiary);line-height:1.8;border-inline-start:2px solid var(--border-subtle);padding:6px 10px;margin:4px 0 10px;background:rgba(140,160,255,.04);border-radius:6px;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
.prob-wrap .note{background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.25);color:var(--note-txt);border-radius:12px;padding:12px 14px;margin:14px 0;font-size:calc(var(--font-size-base) * 0.84)}
.prob-wrap .assumption{background:rgba(96,165,250,.07);border:1px solid rgba(96,165,250,.25);color:#dbeafe;border-radius:10px;padding:10px 12px;margin:10px 0;font-size:calc(var(--font-size-base) * 0.83)}
.prob-wrap .conf{color:var(--color-amber);font-size:calc(.8rem * var(--fs-scale, 1));letter-spacing:-1px;margin-inline-start:6px;white-space:nowrap}
.prob-wrap .answer{background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.25);color:var(--ex-txt);border-radius:10px;padding:10px 12px;margin:12px 0 4px;font-size:calc(var(--font-size-base) * 0.85)}
.prob-wrap .answer b{color:var(--color-green)}

.prob-wrap .katex{direction:ltr;unicode-bidi:isolate}
.prob-wrap .katex-display{direction:ltr;text-align:center;margin:.85em 0;overflow-x:auto;overflow-y:hidden;padding:4px 2px}
.prob-wrap table{width:100%;border-collapse:collapse;margin:10px 0}
.prob-wrap th,.prob-wrap td{border:1px solid var(--border-subtle);padding:8px 10px;text-align:center;white-space:nowrap}
.prob-wrap th{background:var(--surface-nested);color:var(--color-cyan)}

.frefs{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 10px}
.frefs-label{font-size:calc(11.5px * var(--fs-scale, 1));color:var(--text-tertiary);font-weight:700}
.fchip{padding:4px 12px;border-radius:999px;background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.35);color:var(--color-cyan);font-size:calc(11.5px * var(--fs-scale, 1));cursor:help;user-select:none;transition:.2s}
.fchip:hover{background:rgba(34,211,238,.18);border-color:var(--color-cyan);color:var(--text-primary)}

#fpop{
  position:fixed;
  z-index:300;
  width:fit-content;
  min-width:180px;
  max-width:min(90vw, 520px);
  background:var(--surface-raised);
  border:1px solid var(--border-strong);
  border-radius:14px;
  box-shadow:var(--shadow-base);
  padding:12px 14px;
  display:none;
  pointer-events:auto;
}
#fpop .fp-t{
  font-size:calc(12px * var(--fs-scale, 1));font-weight:800;color:var(--color-cyan);margin-bottom:6px;
  white-space:nowrap;
}
#fpop .fp-x{
  direction:ltr;
  text-align:center;
  overflow-x:auto;
  padding:4px 2px;
  max-width:min(85vw, 480px);
}
#fpop .fp-u{
  font-size:calc(11px * var(--fs-scale, 1));color:var(--text-secondary);margin-top:6px;line-height:1.7;
  white-space:nowrap;
  max-width:min(85vw, 480px);
  overflow:hidden;text-overflow:ellipsis;
}

details.sol{border:1px solid var(--border-subtle);border-radius:13px;background:var(--surface-recess);margin-top:10px;overflow:hidden}
details.sol summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:14px 16px;color:var(--color-cyan);font-weight:700;font-size:calc(13.5px * var(--fs-scale, 1));transition:background .25s,color .25s;position:relative;z-index:2}
details.sol summary svg{width:14px;height:14px;display:block;flex-shrink:0;opacity:.9}
details.sol summary:hover{background:rgba(34,211,238,.06)}
details.sol[open] summary{border-bottom:1px dashed var(--border-subtle)}
details.sol .sol-body{padding:16px 18px}
details.sol[open] > *:not(summary){padding-inline:18px}
details.sol[open] > p:first-of-type,
details.sol[open] > .meta-box:first-of-type{padding-top:12px}
details.sol[open] > *:last-child{padding-bottom:12px}

.prob-wrap .card h3{
  display:flex;align-items:flex-start;gap:10px;
  font-size:calc(14.5px * var(--fs-scale, 1));color:var(--color-cyan);margin-bottom:10px;
}
.prob-title{
  flex:1;min-width:0;
  overflow-wrap:anywhere;
  line-height:1.5;
}

.prob-actions{
  display:inline-flex;align-items:center;gap:6px;
  flex-shrink:0;
  padding-top:1px;
}

.prob-act{
  display:grid;place-items:center;
  width:28px;height:28px;
  border-radius:9px;
  border:1.5px solid var(--border-strong);
  background:var(--surface-nested);
  color:var(--text-tertiary);
  cursor:pointer;
  font-family:inherit;
  padding:0;
  transition:transform .15s var(--ease-ios),
             background .15s var(--ease-ios),
             border-color .15s var(--ease-ios),
             color .15s var(--ease-ios);
}
.prob-act svg{width:14px;height:14px;display:block;pointer-events:none}
.prob-act:hover{transform:scale(1.08);color:var(--text-primary)}
.prob-act:active{transform:scale(.94)}
.prob-act:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.prob-act.solve[aria-pressed="true"]{
  background:var(--color-green);border-color:var(--color-green);color:#0b0f1e;
}
.prob-act.solve[aria-pressed="true"]:hover{border-color:var(--color-green)}

.prob-act.mistake[aria-pressed="true"]{
  background:color-mix(in srgb,var(--color-rose) 14%,var(--surface-nested));
  border-color:color-mix(in srgb,var(--color-rose) 48%,var(--border-strong));
  color:var(--color-rose);
}
.prob-act.mistake[aria-pressed="true"]:hover{
  background:color-mix(in srgb,var(--color-rose) 20%,var(--surface-nested));
  border-color:var(--color-rose);
}

@media (hover: none){
  .prob-act:hover{transform:none;color:var(--text-tertiary)}
  .prob-act.solve[aria-pressed="true"]:hover{border-color:var(--color-green)}
  .prob-act.mistake[aria-pressed="true"]:hover{border-color:color-mix(in srgb,var(--color-rose) 48%,var(--border-strong))}
}