/* topshiriqlar_two_modes.css — ikki rejimli sahifa */
*{box-sizing:border-box}
:root{
  --bg:#0b1f35;
  --glass:rgba(255,255,255,.12);
  --glass-2:rgba(255,255,255,.18);
  --border:rgba(255,255,255,.28);
  --text:#ebffff;
  --muted:#cfe9ff;
  --accent:#00ff7f;
  --accent-2:#00bfa5;
  --shadow:0 12px 28px rgba(0,0,0,.28);
  --r:16px;
}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 600px at 0% 0%, rgba(0,191,165,.08), transparent 60%),
    radial-gradient(1000px 600px at 100% 100%, rgba(0,255,127,.08), transparent 60%),
    var(--bg);
}
.hero{
  text-align:center; padding:24px 16px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--border);
}
.hero h1{ margin:0 0 8px; font-size:clamp(22px,3.4vw,36px) }
.hero p{ margin:0 auto; max-width:720px; color:var(--muted) }
.view-switch{ display:inline-flex; gap:8px; margin-top:14px; background:rgba(255,255,255,.06); padding:6px; border-radius:999px; border:1px solid var(--border) }
.tab{
  border:0; background:transparent; color:var(--muted); padding:10px 14px; border-radius:999px; cursor:pointer; font-weight:800;
}
.tab.active{ background:#fff; color:#0a2a44; box-shadow:var(--shadow) }

.container{ max-width:1100px; margin:0 auto; padding:18px }
.panel{ display:none; margin-top:12px }
.panel.active{ display:block }
.types-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px }
.pill{ padding:8px 12px; border-radius:999px; border:1px solid var(--border); background:var(--glass); color:var(--muted); cursor:pointer }
.pill.active{ background:linear-gradient(180deg,#fff,#e9f6ff); color:#0a2a44; border-color:#b2f5ea; box-shadow:var(--shadow) }

.grid{ display:grid; gap:clamp(12px,2.2vw,20px); grid-template-columns:repeat(3, 1fr) }
.grid.row{ grid-template-columns:repeat(3, 1fr) }
@media (max-width:980px){ .grid, .grid.row{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px){ .grid, .grid.row{ grid-template-columns:1fr } }

.card{
  background:var(--glass); border:1px solid var(--border); border-radius:var(--r);
  padding:clamp(14px,2.6vw,18px); box-shadow:var(--shadow); backdrop-filter:blur(10px) saturate(130%);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-3px); border-color:#7fffd4; box-shadow:0 14px 32px rgba(0,0,0,.32) }
.card .title{ margin:0 0 6px; font-size:clamp(16px,2.2vw,20px); color:#00ff7f; font-weight:800 }
.card .brief{ margin:0 0 8px; color:var(--muted) }
.card .reqs{ margin:0 0 10px 18px; padding:0; color:var(--text) }
.card .reqs li{ margin:4px 0 }
.actions{ display:flex; gap:10px }
.button{ display:inline-flex; gap:8px; align-items:center; justify-content:center; padding:10px 14px; border-radius:12px; border:1px solid var(--border); background:var(--glass); color:var(--text); font-weight:800; text-decoration:none }
.button.primary{ background:#fff; color:#0a2a44 }
.button.ghost:hover{ background:#fff; color:#0a2a44 }


/* Difficulty badges */
.level{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px}
.tag{display:inline-block;padding:3px 8px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.12);font-weight:800}
.tag.b{background:#e8fff3;color:#0a7f4f;border-color:#b7f5d6}
.tag.m{background:#fff8e6;color:#8a5a00;border-color:#ffe2a8}
.tag.a{background:#ffe9e9;color:#8a0019;border-color:#ffc2c2}


/* === Sidebar category cards (left column) === */
.layout{display:grid;grid-template-columns:260px 1fr;gap:18px}
@media(max-width:980px){ .layout{grid-template-columns:1fr} .side-cats{display:none} }
.side-cats{position:sticky; top:12px; align-self:start; display:flex; flex-direction:column; gap:10px}
.cat-card{
  display:flex; align-items:center; justify-content:flex-start; padding:12px 14px;
  border-radius:16px; border:1px solid var(--border); background:var(--glass);
  color:var(--muted); cursor:pointer; font-weight:800; letter-spacing:.2px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.cat-card:hover{ background:rgba(0,255,127,.10); color:#eafff8; border-color:#7fffd4;
  box-shadow:0 0 0 2px rgba(0,255,127,.25), 0 10px 24px rgba(0,255,127,.20); transform:translateX(4px) }
.cat-card.active{ background:linear-gradient(180deg,#eafff8,#c8fff1); color:#0a2a44; border-color:#a0fbe0; box-shadow:var(--shadow) }

/* neon hover for primary/ghost buttons */
.button{ position:relative; overflow:hidden }
.button:hover{ box-shadow:0 0 0 2px rgba(0,255,127,.25), 0 12px 30px rgba(0,255,127,.25) }
.button:active{ transform:translateY(1px); box-shadow:0 0 0 2px rgba(0,255,127,.4), 0 6px 14px rgba(0,255,127,.35) }
.button.primary:hover{ background:#00ff7f; color:#00332a }
.button.ghost:hover{ background:rgba(0,255,127,.15); color:#eafff8 }

/* card hover stronger green neon */
.card:hover{ border-color:#00ff7f; box-shadow:0 14px 34px rgba(0,255,127,.25) }

/* grid entrance animation */
.grid.enter .card{animation:pop .25s ease both}
@keyframes pop{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:none}}


/* === Sidebar category cards (left column) === */
.layout{position:relative; display:grid;grid-template-columns:260px 1fr;gap:18px}
@media(max-width:980px){ .layout{grid-template-columns:1fr} .side-cats,.cat-peek{display:none} .types-nav{display:flex} }
.side-cats{position:sticky; top:12px; align-self:start; display:flex; flex-direction:column; gap:10px}
.cat-card{
  display:flex; align-items:center; justify-content:flex-start; padding:12px 14px;
  border-radius:16px; border:1px solid var(--border); background:var(--glass);
  color:var(--muted); cursor:pointer; font-weight:800; letter-spacing:.2px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.cat-card:hover{ background:rgba(0,255,127,.10); color:#eafff8; border-color:#7fffd4;
  box-shadow:0 0 0 2px rgba(0,255,127,.25), 0 10px 24px rgba(0,255,127,.20); transform:translateX(4px) }
.cat-card.active{ background:linear-gradient(180deg,#eafff8,#c8fff1); color:#0a2a44; border-color:#a0fbe0; box-shadow:var(--shadow) }

/* Toggle top pills: hidden on desktop, visible on mobile */
.types-nav{ display:none }

/* Peek panel that slides from sidebar */
.cat-peek{
  position:absolute; left:260px; top:0; width:min(420px, calc(100% - 260px));
  background:var(--glass); border:1px solid var(--border); border-radius:16px;
  padding:12px 14px; opacity:0; transform:translateX(-8px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease; box-shadow:var(--shadow)
}
.cat-peek.show{ opacity:1; transform:translateX(0); pointer-events:auto }
.cat-peek h4{ margin:0 0 6px; color:#eafff8 }
.peek-list{ margin:0 0 0 18px; padding:0 }
.peek-list li{ margin:4px 0; color:var(--muted) }

/* neon hover for primary/ghost buttons */
.button{ position:relative; overflow:hidden }
.button:hover{ box-shadow:0 0 0 2px rgba(0,255,127,.25), 0 12px 30px rgba(0,255,127,.25) }
.button:active{ transform:translateY(1px); box-shadow:0 0 0 2px rgba(0,255,127,.4), 0 6px 14px rgba(0,255,127,.35) }
.button.primary:hover{ background:#00ff7f; color:#00332a }
.button.ghost:hover{ background:rgba(0,255,127,.15); color:#eafff8 }

/* stronger card hover */
.card:hover{ border-color:#00ff7f; box-shadow:0 14px 34px rgba(0,255,127,.25) }

/* grid entrance animation */
.grid.enter .card{animation:pop .25s ease both}
@keyframes pop{from{opacity:.0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ==== "Barchasini ko‘rish" rejimi uchun tartibli layout ==== */
#all .all-wrapper{
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 0 24px;
}

.all-section{ margin: 14px 0 26px; }
.all-title{
  margin: 6px 0 10px;
  font-weight: 800;
  letter-spacing: .4px;
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--muted);
}

/* Responsiv, toza grid: avtomatik ustunlar */
.all-grid{
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* Kichik ekranlar uchun – bitta ustun */
@media (max-width: 640px){
  .all-grid{ grid-template-columns: 1fr; }
}

/* Sidebar faqat "Turkumlar bo‘yicha" panelida ko‘rinsin */
#by-type .layout{ display: grid; }
#all .layout, #all .side-cats, #all .cat-peek{ display: none; }