/* ===== Table layout for Challenges ===== */
.tbl-page{max-width:75rem;margin:0 auto;padding:2.5rem 1.125rem}
.tbl-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.25rem}
.tbl-title{margin:0;font-size:1.4rem;color:var(--fg)}
.tbl-title-icon{color:var(--primary);display:inline-flex}
.tbl-line{height:1px;flex:1;background:var(--border)}
.tbl-muted{font-size:.85rem;color:var(--muted)}

.tbl-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin:1.25rem 0}
.tbl-field{display:grid;gap:.4rem}
.tbl-label{font-size:.85rem;color:var(--muted)}
.tbl-filters select{
  font-family:"JetBrains Mono", monospace;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--fg);
  padding:.7rem .8rem;
  border-radius:.9rem;
  outline:none;
}

.tbl-card{
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:1rem;
  overflow:hidden;
}

.tbl-header{
  display:grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
  gap: .75rem;
  padding: .85rem 1rem;
  border-bottom:1px solid var(--border);
  color: var(--muted);
  font-size: .85rem;
}

.tbl-rows{display:block}

.tbl-row{
  display:grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr;
  gap: .75rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border);
  text-decoration:none;
  color: inherit;
}

.tbl-row:hover{background:var(--hover)}
.tbl-row:last-child{border-bottom:none}

.cell{display:flex;align-items:center}
.cell.name{font-weight:700;color:var(--fg)}
.cell.platform{color:var(--muted)}
.cell.status-cell{justify-content:flex-start}

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.72rem;
  padding:.22rem .5rem;
  border-radius:.6rem;
  border:1px solid var(--border);
  background:hsl(220 10% 10% / .35);
  color:var(--fg);
}

.pill-type{
  border-color: rgba(34,211,238,.25);
  background: rgba(34,211,238,.10);
  color: rgba(34,211,238,.95);
}

.pill-unk{ border-color: rgba(255,193,77,.25); background: rgba(255,193,77,.10); color: rgba(255,193,77,.95); }
.pill-veasy{ border-color: rgba(34,211,238,.25); background: rgba(34,211,238,.10); color: rgba(34,211,238,.95); }
.pill-easy{  border-color: rgba(34,197,94,.28);  background: rgba(34,197,94,.14);  color: rgba(34,197,94,.95); }
.pill-seasy{ border-color: rgba(163,230,53,.28); background: rgba(163,230,53,.14); color: rgba(163,230,53,.95); }
.pill-med{   border-color: rgba(255,193,77,.28); background: rgba(255,193,77,.14); color: rgba(255,193,77,.95); }
.pill-smed{  border-color: rgba(251,146,60,.28); background: rgba(251,146,60,.14); color: rgba(251,146,60,.95); }
.pill-hard{  border-color: rgba(248,113,113,.28); background: rgba(248,113,113,.14); color: rgba(248,113,113,.95); }
.pill-insane{border-color: rgba(239,68,68,.35);  background: rgba(239,68,68,.18);  color: rgba(239,68,68,.98); }

/* Status */
.status{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.9rem;
  white-space:nowrap;
}

.st-ico{width:1rem;height:1rem}

.status-ok{color: rgba(34,197,94,.95)}
.st-ico-ok{color: rgba(34,197,94,.95)}

.status-pending{color: rgba(255,193,77,.95)}      /* yellow pending */
.st-ico-pending{color: hsl(220 8% 55%)}           /* muted circle like your SVG */

/* Footer pager */
.tbl-footer{margin-top:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.tbl-pager{display:flex;align-items:center;gap:.75rem}
.tbl-btn{
  font-family:"JetBrains Mono", monospace;
  padding:.55rem .85rem;
  border-radius:.85rem;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--fg);
  cursor:pointer;
}
.tbl-btn:disabled{opacity:.45;cursor:not-allowed}

.tbl-empty{
  padding: 1.2rem 1rem;
  color: var(--muted);
}

/* Mobile: stack columns */
@media (max-width: 48rem){
  .tbl-header{display:none}
  .tbl-row{
    grid-template-columns: 1fr;
    gap: .65rem;
  }
  .cell{justify-content:flex-start}
  .cell.platform::before{content:"Platform: "; color: var(--muted); margin-right:.35rem;}
  .cell.type::before{content:"Type: "; color: var(--muted); margin-right:.35rem;}
  .cell.diff::before{content:"Difficulty: "; color: var(--muted); margin-right:.35rem;}
  .cell.status-cell::before{content:"Status: "; color: var(--muted); margin-right:.35rem;}
}

/* ===== Challenge view / solve page ===== */
.solve{ padding: 2.2rem 1.125rem 4rem; }
.solve-wrap{ max-width: 58rem; margin: 0 auto; }

.solve-back{
  display:inline-flex; gap:.5rem; align-items:center;
  text-decoration:none; color: var(--muted);
  padding:.5rem .75rem; border-radius:.85rem;
}
.solve-back:hover{
  color: var(--fg);
  background: var(--hover);
  box-shadow: 0 0 0 1px var(--border);
}

.solve-badges{
  margin-top: 1.4rem;
  display:flex; flex-wrap:wrap;
  gap:.55rem; align-items:center;
}

.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.78rem;
  padding:.28rem .6rem;
  border-radius:.65rem;
  border:1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
}

.badge-icon{ width:1rem; height:1rem; }

.badge-platform{
  border-color: rgba(34,211,238,.20);
  background: rgba(34,211,238,.08);
  color: rgba(34,211,238,.95);
}

.badge-type{
  border-color: rgba(34,211,238,.14);
  background: rgba(34,211,238,.05);
  color: var(--fg);
}

/* difficulty variants */
.badge-diff{ color: var(--fg); }
.diff-veasy{ border-color: rgba(34,211,238,.25); background: rgba(34,211,238,.10); color: rgba(34,211,238,.95); }
.diff-easy{  border-color: rgba(34,197,94,.28);  background: rgba(34,197,94,.14);  color: rgba(34,197,94,.95); }
.diff-seasy{ border-color: rgba(163,230,53,.28); background: rgba(163,230,53,.14); color: rgba(163,230,53,.95); }
.diff-med{   border-color: rgba(255,193,77,.28); background: rgba(255,193,77,.14); color: rgba(255,193,77,.95); }
.diff-smed{  border-color: rgba(251,146,60,.28); background: rgba(251,146,60,.14); color: rgba(251,146,60,.95); }
.diff-hard{  border-color: rgba(248,113,113,.28); background: rgba(248,113,113,.14); color: rgba(248,113,113,.95); }
.diff-insane{border-color: rgba(239,68,68,.35);  background: rgba(239,68,68,.18);  color: rgba(239,68,68,.98); }
.diff-unk{   border-color: rgba(255,193,77,.25); background: rgba(255,193,77,.10); color: rgba(255,193,77,.95); }

.badge-solved{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.14);
  color: rgba(34,197,94,.95);
}

.badge-pending{
  border-color: rgba(255,193,77,.28);
  background: rgba(255,193,77,.14);
  color: rgba(255,193,77,.95);
}

.solve-title{
  margin: .9rem 0 .5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(2.4rem, 4.5vw, 3.2rem);
  color: var(--fg);
}

.solve-date{
  display:flex; align-items:center; gap:.5rem;
  font-size:.95rem; color: var(--muted);
}
.meta-icon{ width:1.05rem; height:1.05rem; opacity:.9; }

.solve-label{
  margin-top: 1.6rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--primary);
}

.solve-body{ margin-top: 1.2rem; }

/* typography inside body_html */
.solve-body h2{
  margin: 1.4rem 0 .65rem;
  font-size: 1.35rem;
  color: var(--fg);
}
.solve-body p{
  margin: 0 0 1rem;
  font-size: .98rem;
  line-height: 1.7;
  color: var(--muted);
}
.solve-body code{ font-family: "JetBrains Mono", monospace; }

/* nice code blocks if your content uses <pre><code> */
.solve-body pre{
  margin: 0 0 1.2rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: hsl(220 10% 12% / .55);
  overflow: hidden;
}
.solve-body pre code{
  display:block;
  padding: 1rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--fg);
  white-space: pre;
  overflow-x: auto;
}

@media (max-width: 30rem){
  .solve{ padding-top: 1.6rem; }
  .solve-title{ font-size: clamp(2.1rem, 8vw, 2.6rem); }
}

.solve-link{
  margin-top: .6rem;
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.95rem;
  color: var(--muted);
}

.solve-link-a{
  color: var(--primary);
  text-decoration:none;
}

.solve-link-a:hover{
  text-decoration: underline;
}

/* keep images inside the writeup container */
.solve-body img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* optional: nicer look */
.solve-body img{
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--panel);
  margin: 1rem 0;
}

/* if some images are absurdly huge, hard-cap their height */
.solve-body img{
  max-height: 70vh;
  object-fit: contain;
}

.solve-body figure,
.solve-body p{
  max-width: 100%;
  overflow: hidden;
}