/* ===== Theme & Base ===== */
:root{
  --bg:#0b0f15; --panel:#0f1420; --elev:#131a2a; --glass:#101627cc;
  --text:#e8edf7; --muted:#92a0b9; --line:#1c263a;
  --pri:#6c8cff; --pri-2:#5876ff; --ok:#14b8a6; --warn:#f59e0b; --chip:#182238;
  --shadow: 0 20px 50px rgba(0,0,0,.35);
}
html[data-theme="light"]{
  --bg:#f6f8fc; --panel:#ffffff; --elev:#ffffff; --glass:#ffffffcc;
  --text:#0f1422; --muted:#5a647a; --line:#e7ecf6;
  --pri:#3b5bff; --pri-2:#304de6; --chip:#eef2ff;
  --shadow: 0 20px 50px rgba(17,24,39,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial;
  background:
    radial-gradient(1000px 600px at 5% -10%, rgba(108,140,255,.15), transparent 50%),
    radial-gradient(800px 500px at 90% -20%, rgba(20,184,166,.18), transparent 40%),
    var(--bg);
  color:var(--text);
}

/* ===== Top App Bar ===== */
.appbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem; background:var(--glass); backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.appbar__left{display:flex; align-items:center; gap:.75rem}
.logo{width:auto; height:75px; object-fit:contain}
.brand__title{font-weight:700; font-size:1.02rem}
.brand__sub{font-size:.85rem; color:var(--muted)}
.appbar__right{display:flex; align-items:center; gap:.5rem}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem .9rem; border-radius:.8rem;
  color:var(--text); text-decoration:none; background:#add8e6;
  border:none; box-shadow:var(--shadow); cursor:pointer;
}
.btn--ghost{background:transparent; border:1px solid var(--line); box-shadow:none}
.btn.small{padding:.45rem .7rem; font-size:.9rem}
.icon-btn{
  all:unset; cursor:pointer; font-size:1.1rem; color:var(--muted);
}

/* ===== Layout ===== */
.layout{display:grid; grid-template-columns:280px 1fr; gap:1rem; padding:1rem}
@media (max-width:980px){ .layout{grid-template-columns:1fr} }

/* Sidebar */
.sidebar{
  position:sticky; top:72px; align-self:start; background:var(--panel); border:1px solid var(--line);
  border-radius:1rem; padding:.9rem; box-shadow:var(--shadow);
  max-height:calc(100vh - 92px); overflow:auto;
}
.sidebar__section{margin-bottom:1rem}
.sidebar__title{font-weight:700; margin-bottom:.5rem}
.input-icon{position:relative}
.input-icon input{
  width:100%; padding:.75rem 2.4rem .75rem .9rem; border-radius:.8rem; border:1px solid var(--line); background:var(--elev); color:var(--text);
}
.input-icon span{position:absolute; right:.7rem; top:50%; transform:translateY(-50%); color:var(--muted)}
.select{
  width:100%; padding:.7rem .9rem; border-radius:.8rem; border:1px solid var(--line); background:var(--elev); color:var(--text);
}
.checklist{display:flex; flex-direction:column; gap:.4rem}
.check{
  display:flex; gap:.6rem; align-items:center; padding:.45rem .55rem; border:1px solid var(--line); border-radius:.6rem;
  background:var(--elev);
}
.check input{accent-color:var(--pri)}
.sidebar__footer{display:flex; justify-content:flex-end}

/* Content */
.content{display:flex; flex-direction:column; gap:1rem}

/* Hero */
.hero{
  display:flex; gap:1rem; align-items:stretch; flex-wrap:wrap;
  
}
.hero__text{
  flex:1 1 420px; background:linear-gradient(180deg, color-mix(in oklab, var(--pri) 16%, transparent), transparent);
  border:1px solid var(--line); border-radius:1rem; padding:1rem;
}
.hero__text h1{margin:.2rem 0 .3rem; font-size:1.4rem}
.hero__text p{margin:0; color:var(--muted)}
.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; flex:1 1 380px;
}
.stat{
  background:var(--panel); border:1px solid var(--line); border-radius:1rem; padding:1rem; text-align:center; box-shadow:var(--shadow);
}
.stat__num{font-size:1.4rem; font-weight:800}
.stat__label{color:var(--muted); font-size:.9rem}

/* Active filter chips */
.active-filters{display:flex; gap:.4rem; flex-wrap:wrap}
.chip{
  padding:.35rem .6rem; border-radius:999px; border:1px solid var(--line); background:var(--chip); font-size:.86rem;
}
.chip .x{margin-left:.5rem; opacity:.8; cursor:pointer}

/* Grid & Cards */
.grid{
  display:grid; gap:1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.card{
  overflow:hidden; border-radius:1rem; background:linear-gradient(180deg, color-mix(in oklab, var(--panel) 85%, transparent), var(--panel));
  border:1px solid var(--line); box-shadow:var(--shadow); display:flex; flex-direction:column;
  transition:transform .18s ease;
}
.card:hover{transform:translateY(-2px)}
.card__media{position:relative}
.card__media img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#0003}
.ribbon{
  position:absolute; left:.8rem; top:.8rem; padding:.25rem .5rem; border-radius:.5rem; font-size:.75rem;
  background:color-mix(in oklab, var(--ok) 26%, transparent);
}
.ribbon.warn{background:color-mix(in oklab, var(--warn) 26%, transparent)}
.fav-btn{
  position:absolute; right:.8rem; top:.8rem; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:999px; padding:.35rem .5rem; cursor:pointer;
}
.card__body{padding:.9rem}
.card__title{margin:.1rem 0 .25rem; font-size:1.02rem}
.card__meta{margin:0 0 .6rem; color:var(--muted); font-size:.92rem}
.chips{display:flex; gap:.35rem; flex-wrap:wrap}
.card__footer{
  display:flex; align-items:center; justify-content:space-between; padding:.75rem .9rem; border-top:1px dashed var(--line)
}
.link-btn{all:unset; color:var(--pri); font-weight:700; cursor:pointer}

/* Badges */
.badge{padding:.25rem .5rem; border-radius:.5rem; font-size:.75rem; border:1px solid var(--line); background:var(--chip)}
.badge.ok{background:color-mix(in oklab, var(--ok) 20%, transparent)}
.badge.warn{background:color-mix(in oklab, var(--warn) 20%, transparent)}

/* Empty */
.empty{display:grid; place-items:center; text-align:center; gap:.4rem; padding:2rem 0}
.empty img{max-width:200px; opacity:.9}
.empty p{color:var(--muted)}

/* Drawer */
.drawer__overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); z-index:60;
}
.drawer{
  position:fixed; top:0; right:-560px; width:min(560px, 100%); height:100dvh; z-index:70;
  background:var(--panel); border-left:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition:right .25s ease;
}
.drawer[aria-hidden="false"]{right:0}
.drawer__header{
  display:flex; align-items:center; justify-content:space-between; padding:.9rem 1rem; border-bottom:1px solid var(--line);
}
.drawer__body{padding:1rem; overflow:auto}
.drawer__cover{position:relative; margin-bottom:.8rem}
.drawer__cover img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:.8rem; background:#0003}
.drawer__cover .badge{position:absolute; left:.8rem; top:.8rem}
.fav{
  position:absolute; right:.8rem; top:.8rem; border:1px solid var(--line); background:rgba(0,0,0,.3); color:#fff;
  border-radius:999px; padding:.3rem .55rem; cursor:pointer;
}
.muted{color:var(--muted)}
.copy{white-space:pre-wrap; line-height:1.55}
.split{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.list{margin:.4rem 0; padding-left:1.1rem}
.links{display:flex; gap:.5rem; flex-wrap:wrap}
.links a{padding:.5rem .7rem; border-radius:.6rem; border:1px solid var(--line); text-decoration:none; color:var(--text); background:var(--chip)}
.links a:hover{transform:translateY(-1px)}

/* Footer */
.footer{padding:1.2rem; text-align:center; color:var(--muted); border-top:1px solid var(--line); margin-top:1rem}

/* Utilities */
.hide{display:none}