/* Same design, now with image PATH support via background-image and fallbacks */
:root{
  --bg: #e9edf1;
  --text: #1d2630;
  --muted: #5b6b7a;
  --brand-2: #1f2d3b;
  --brand-3: #233545;
  --primary: #3b82f6;
  --card-bg: #ffffff;
  --shadow-sm: 0 4px 14px rgba(0,0,0,.08);
  --shadow-md: 0 10px 24px rgba(0,0,0,.12);
  --radius: 14px;
}
*{ box-sizing:border-box }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:var(--bg); color:var(--text) }

/* topbar */
.topbar{ position:sticky; top:0; z-index:50; background:linear-gradient(90deg,var(--brand-2),var(--brand-3)); box-shadow:var(--shadow-sm) }
.topbar__container{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px clamp(12px,4vw,28px); max-width:1200px; margin-inline:auto }
.brand{ display:flex; gap:10px; color:#fff; text-decoration:none; font-weight:700 }
.brand__logo{ display:grid; place-items:center; width:34px; height:34px; border-radius:9px; background:radial-gradient(120% 100% at 0 0,#3f8cff 0,#00c2ff 100%); color:#fff; font-weight:800; box-shadow:inset 0 0 0 2px rgba(255,255,255,.15) }
.menu{ display:flex; gap:22px; flex-wrap:wrap }
.menu a{ color:#cfe3ff; text-decoration:none; font-weight:600; font-size:15px; padding:8px 6px; border-radius:10px; transition:.2s }
.menu a:hover{ color:#fff; background:rgba(255,255,255,.06) }

/* layout */
.shell{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:24px; max-width:1200px; margin:18px auto 40px; padding:0 clamp(10px,4vw,28px) }
@media (max-width:992px){ .shell{ grid-template-columns:1fr } }

/* sidebar */
.sidebar__inner{ position:sticky; top:90px; background:linear-gradient(180deg,#111c22,#1a2730); color:#f1f5fb; border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden }
.sidebar__header-overflow{ height:80px; background:linear-gradient(90deg,#0ea5e9,#7c3aed); opacity:.25 }
/* AVATAR as background-image (path) with graceful gradient fallback */
.avatar{ width:180px; height:180px; margin:-60px auto 8px; border-radius:50%; border:6px solid rgba(255,255,255,.12); box-shadow:var(--shadow-sm);
  background: radial-gradient(110% 90% at 0% 0%, #173f61, #0e2c43 70%) center/cover no-repeat;
  background-image: var(--avatar-fallback, linear-gradient(110deg,#173f61,#0e2c43)), var(--avatar-image);
  /* above trick ensures we still have a gradient if the url fails */
}
/* for browsers: 'background-image:url(...)' set inline on .avatar; we also set size/pos */
.avatar{ background-size: cover; background-position: center }

.sidebar__content{ padding:8px 22px 22px }
.sidebar__title{ margin:8px 0 12px; font-size:22px; font-weight:800 }
.sidebar__block{ margin:12px 0 14px }
.sidebar__subtitle{ margin:0 0 4px; font-weight:700; opacity:.9 }
.sidebar__text{ margin:2px 0; color:#d5e2ef; opacity:.9; line-height:1.45 }

/* content */
.search{ position:relative; margin:10px 0 22px }
.search__icon{ position:absolute; left:16px; top:50%; transform:translateY(-50%); font-size:20px; opacity:.6 }
.search__input{ width:100%; border:none; outline:none; background:#f3f6fa; color:var(--text); padding:16px 16px 16px 44px; border-radius:999px; font-size:18px; box-shadow:inset 0 0 0 2px rgba(0,0,0,.03) }
.search__input::placeholder{ color:#8898a7 }

.category{ margin:18px 0 30px }
.category__title{ font-size: clamp(24px,3.2vw,40px); margin:6px 6px 14px; color:#233041 }

.cards{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px }
@media (max-width:1200px){ .cards{ grid-template-columns:repeat(8,1fr) } }
@media (max-width:768px){ .cards{ grid-template-columns:repeat(4,1fr) } }

.card{ grid-column:span 4; display:flex; flex-direction:column; background:var(--card-bg); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; min-height:280px }
/* THUMB uses background-image with fallback gradient */
.card__thumb{ height:160px;
  background: linear-gradient(120deg,#8fbfff,#c1d9ff 40%,#f0f4ff) center/cover no-repeat;
  /* when inline style sets background-image:url(...), browser layers it over gradient;
     if URL fails, gradient stays visible (no broken icon) */
}
.card__title{ margin:12px 14px 4px; font-size:20px; line-height:1.25 }
.card__lead{ margin:0 14px; color:var(--muted); line-height:1.6 }
.card__actions{ margin:auto 14px 14px }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:12px; font-weight:700; text-decoration:none }
.btn--outline{ border:2px solid #d6e1f1; color:#1b3b6d; background:#fff }
.btn--outline:hover{ background:#f6f9ff }
.btn--primary{ background:var(--primary); color:#fff; box-shadow:0 6px 14px rgba(59,130,246,.35) }
.btn--primary:hover{ filter:brightness(1.05) }

.divider{ border:0; height:1px; background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent); margin:28px 0 }
.footer{ margin:30px 0 10px; color:#667788; text-align:center; font-size:14px }