/* ===== Base layout ===== */
*{box-sizing:border-box}
:root{
  --bg:#ffffff; --text:#111827; --muted:#6b7280; --card:#ffffff;
  --border:#e5e7eb; --brand:#2563eb; --brand-2:#00C2FF;
}
html,body{height:100%}
body{
  margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg); color:var(--text);
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

/* Containers */
.container{width:min(1100px, 92vw); margin:0 auto}
.row{display:grid; grid-template-columns:1fr; gap:20px}
@media (min-width: 980px){ .row{grid-template-columns: minmax(0,1fr) 280px} }

/* Navbar */
.navbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px}
.hamburger{font-size:22px; border:1px solid var(--border); padding:6px 10px; border-radius:10px; background:#fff}
nav ul{list-style:none; padding:0; margin:0; display:flex; gap:10px}
nav a{padding:8px 10px; border-radius:8px}
nav a.active, nav a:hover{background:#f3f4f6}
@media (max-width: 880px){
  nav ul{display:none}
  nav ul.show{display:flex; position:absolute; left:12px; right:12px; top:60px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px; flex-direction:column; z-index:30}
}
.actions{display:flex; align-items:center; gap:10px}
.btn{padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer}
.btn.brand{background:var(--brand); border-color:var(--brand); color:#fff}
.btn.secondary{background:#eef2ff}
.btn.danger{background:#fee2e2; border-color:#fecaca; color:#991b1b}

/* Brand (bigger + gradient “AI”) */
.brand-title{
  font-weight:800; letter-spacing:-0.02em;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color:#111827; text-decoration:none; display:inline-block;
}
.brand-title .brand-AI{
  background: linear-gradient(90deg, #2B6EF4 0%, var(--brand-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (min-width: 1024px){
  .brand-title{ font-size: clamp(1.4rem, 1.6vw, 2rem); }
}

/* Cards & lists */
.card{background:var(--card); border:1px solid var(--border); border-radius:14px; padding:14px}
.grid{display:grid; grid-template-columns:1fr; gap:14px}
@media (min-width: 720px){ .grid{grid-template-columns:1fr 1fr} }
.sidebar-card .list{display:grid; gap:8px}
.list{list-style:none; padding:0; margin:0}
.list li a{display:flex; align-items:center; justify-content:space-between; padding:8px 10px; border-radius:8px}
.list li a:hover{background:#f3f4f6}

/* Metadata */
.meta{color:var(--muted); font-size:.9rem}
.badge{display:inline-block; font-size:.75rem; padding:2px 8px; border-radius:999px; background:#eef2ff; color:#29327a; border:1px solid #dbe3ff; margin-left:.5rem}

/* Search */
.searchbar{display:flex; gap:10px}
.input, .select, textarea{
  width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:10px; background:#fff; font:inherit;
}

/* Hero */
.hero{border:1px solid var(--border); border-radius:18px; padding:12px; background:linear-gradient(180deg,#f6fbff 0%, #ffffff 60%)}
.hero-img{width:100%; height:auto; border-radius:12px; object-fit:cover}

/* Clickable cards (stretched link) */
.card{position:relative}
.card .card-link{position:absolute; inset:0; z-index:1; text-indent:-9999px}

/* Footer */
.foot{padding:30px 0; color:#6b7280}

/* ===== Drawer + overlay (mobile hamburger) ===== */
.body-overlay {position: fixed; inset: 0; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 40;}
.body-overlay.show { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; left: 0; height: 100dvh; width: 280px; background: #fff; border-right: 1px solid var(--border);
  box-shadow: 0 10px 30px rgba(0,0,0,.06); transform: translateX(-100%); transition: transform .2s ease; z-index: 50; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; }
.drawer.open { transform: translateX(0); }
.drawer .nav { margin-top: 8px; }
.drawer .nav a { display:block; padding:10px 8px; border-radius:8px; color:#111827; }
.drawer .nav a.active, .drawer .nav a:hover { background: #f3f4f6; }
body.nav-open, body.modal-open { overflow: hidden; }

/* ===== Modal (login popup) ===== */
.modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; }
.modal.show { display: flex; }
.modal .backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.modal .panel { position: relative; z-index: 1; width: min(92vw, 420px); background: #fff; border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.18); padding: 20px; }
.modal .panel h3 { margin: 0 0 6px; font-size: 1.15rem; }
.modal .panel p { margin: 0 0 14px; color:#4b5563; }
.modal .row { display:flex; gap:10px; justify-content:flex-end; margin-top:14px }

/* Utility */
.visually-hidden{position:absolute!important; height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px); white-space:nowrap}