/* =========================================================
   JC Shell (Header + Base + Drawer) — PRODUCTION
   File: /assets/ui/jc-shell.css
   Safe to add; does not remove listing.css
   ========================================================= */

:root{
  --line: rgba(15,23,42,.14);
  --muted: rgba(15,23,42,.65);
  --bg: #f6f7fb;
  --card: rgba(255,255,255,.92);
  --shadow: 0 18px 45px rgba(15,23,42,.10);

  --brand1:#ff2d55;
  --brand2:#ffcc00;
  --wa1:#25D366;
  --wa2:#b7f7d2;

  --r: 18px;
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1100px 650px at 12% 10%, rgba(255,45,85,.08), transparent 55%),
    radial-gradient(1000px 650px at 88% 18%, rgba(255,204,0,.10), transparent 55%),
    var(--bg);
  color:#0f172a;
}

.wrap{max-width:1200px;margin:0 auto;padding:18px}

/* TOPBAR */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-radius: calc(var(--r) + 6px);
  border:1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.92));
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  position:sticky;
  top:12px;
  z-index:999;
}

.brandRow{display:flex;align-items:center;gap:12px;min-width:240px}
.logoWrap{display:flex;align-items:center;text-decoration:none;}
.logoImg{height:44px;width:auto;display:block;transition:.2s ease;}
.logoWrap:hover .logoImg{transform:translateY(-1px);}
.brandText{display:flex;flex-direction:column;}
.brandTitle{font-size:18px;font-weight:1000;letter-spacing:.4px;color:#fff;}
.brandSub{font-size:12px;color:rgba(255,255,255,.65);font-weight:900;letter-spacing:.3px;}

.nav{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}
.nav a{
  text-decoration:none;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  font-weight:1000;
  color:#ffffff;
  box-shadow:none;
  transition:.2s ease;
}
.nav a:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);}
.nav a.active{
  border:none;
  background:linear-gradient(135deg, var(--brand2), #fff);
  color:#0f172a;
}

/* Mobile button */
.navBtn{
  display:none;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:14px;
  padding:10px 12px;
  font-weight:1100;
  cursor:pointer;
}
.navBtn:active{transform:translateY(1px);}

@media(max-width:900px){
  .nav{display:none;}
  .navBtn{display:inline-flex;}
}

/* DRAWER */
.jcDrawer{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.55);
  z-index:2000;
  display:none;
}
.jcDrawer[data-open="1"]{ display:block; }

.jcDrawerPanel{
  position:absolute;
  top:0; right:0;
  height:100%;
  width:min(380px, 92vw);
  background:#fff;
  border-left:1px solid rgba(15,23,42,.10);
  box-shadow:-40px 0 120px rgba(0,0,0,.28);
  padding:14px;
}

.jcDrawerHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.jcDrawerTitle{font-weight:1100;font-size:16px;}
.jcDrawerClose{
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  font-weight:1100;
  cursor:pointer;
}
.jcDrawerLinks a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  text-decoration:none;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.12);
  margin:10px 0;
  font-weight:1100;
  background:#fff;
}
.jcDrawerLinks a.active{
  border-color:rgba(255,204,0,.50);
  background:linear-gradient(135deg, rgba(255,204,0,.18), rgba(255,255,255,.95));
}
.jcDrawerNote{
  margin-top:12px;
  color:rgba(15,23,42,.65);
  font-weight:900;
  font-size:12px;
  line-height:1.55;
}

/* Page blocks (kept compatible with your pages) */
.pageHero{
  margin-top:14px;
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(255,204,0,.18), rgba(255,45,85,.10));
  border-radius: calc(var(--r) + 8px);
  padding:14px 16px;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
}
.pageHero b{font-weight:1000}
.pageHero .sub{color:var(--muted);font-weight:900;font-size:12px;margin-top:4px}

.cardLite{
  margin-top:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  border-radius: calc(var(--r) + 6px);
  padding:14px;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
}

.footerNote{
  margin:28px 0 12px;
  text-align:center;
  color:rgba(15,23,42,.60);
  font-weight:900;
  font-size:12px;
}