/* ========== Base ========== */
:root{
  --primary:#0D6EFD;
  --accent:#FFC107;
  --success:#198754;
  --bg:#f8fafc;
  --text:#0b1324;
  --muted:#6c757d;
  --danger:#dc3545;
  --header:#0d1b2a;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(2,8,23,.06);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Lato,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  margin:0;
}
h1,h2,h3,h4{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; line-height:1.2}
a{color:var(--primary); text-decoration:none}
a:focus{outline:3px solid var(--accent); outline-offset:2px}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
button{font-family:inherit}

/* ========== Header ========== */
.site-header{background:var(--header); color:#fff; position:sticky; top:0; z-index:50; box-shadow:var(--shadow)}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0}
.logo{display:flex; gap:10px; align-items:center; color:#fff}
.logo .mark{background:var(--primary); color:#fff; font-weight:700; padding:6px 10px; border-radius:10px}
.logo span{font-weight:700}
.nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.nav a{color:#cfe0ff; padding:8px 10px; border-radius:10px}
.nav a:hover, .nav a[aria-current="page"]{background:#0f2640;color:#fff}
.pill-18{background:#6610f2; color:#fff; padding:6px 10px; border-radius:999px; font-size:.85rem;}

/* ========== Banner ========== */
.banner{position:fixed; inset:auto 0 0 0; background:#091625; color:#d9ebff; padding:14px 16px; z-index:60; border-top:3px solid var(--accent); display:none}
.banner.show{display:block}
.banner .inner{display:flex; gap:14px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.banner button{background:var(--accent); border:0; padding:8px 12px; border-radius:10px; cursor:pointer}

/* ========== Hero ========== */
.hero{background:linear-gradient(180deg,#0d1b2a,#0d1b2a 56%,transparent 56%); color:#fff; padding:36px 0 16px}
.hero .box{background:var(--card); color:var(--text); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; margin-top:16px}
.cta{display:inline-flex; gap:10px; align-items:center; background:var(--primary); color:#fff; padding:12px 16px; border-radius:12px; border:0; cursor:pointer}
.cta:hover{filter:brightness(.95)}
.small{color:#e2ecff; font-size:.95rem; max-width:780px}

/* ========== Table Card ========== */
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:0; overflow:hidden}
.table-controls{display:flex; gap:10px; padding:14px; flex-wrap:wrap; align-items:center}
input[type=\"search\"], select{padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; min-width:180px}
.table{width:100%; border-collapse:separate; border-spacing:0}
.table thead th{background:#f1f5f9; text-align:left; padding:12px; font-weight:700; position:sticky; top:0; z-index:1}
.table tbody td{padding:14px; border-top:1px solid #eef2f7; vertical-align:middle}
.badge{background:#ecf3ff; color:#0d47a1; padding:4px 8px; border-radius:999px; font-weight:700; font-size:.85rem}
.rating{color:#ffb703}
.visit{background:var(--success); color:#fff; padding:10px 12px; border-radius:10px; display:inline-flex; gap:8px; align-items:center}
.visit:focus{outline:3px solid var(--accent); outline-offset:2px}
.note{padding:12px 16px; color:#334155; background:#f8fafc}

/* ========== Promo row ========== */
.promo{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px}
.promo a{display:flex; gap:10px; align-items:center; justify-content:center; padding:12px; border-radius:12px; background:#e8f5e9}
.promo a:hover{filter:brightness(.98)}

/* ========== Footer ========== */
.footer{margin-top:40px; background:#0b1324; color:#c8d4f0; padding:24px 0}
.footer a{color:#b6cffd}
.footer .grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:24px}
.smallnote{color:#93a6d1; font-size:.9rem}

/* ========== Responsive: Desktop vs Mobile Distinct Layouts ========== */
/* Desktop (>= 960px) shows wide table and side rail hero; Mobile (< 960px) uses card list layout */
@media (min-width: 960px){
  .hero .grid{display:grid; grid-template-columns:1.6fr 1fr; gap:16px}
  .mobile-list{display:none}
  .desktop-table{display:block}
}
@media (max-width: 959.98px){
  .hero{padding:24px 0 8px}
  .hero h1{font-size:1.75rem}
  .hero .box{margin-top:10px}
  .desktop-table{display:none}
  .mobile-list{display:grid; gap:12px}
  .mobile-card{background:#fff; border-radius:14px; box-shadow:var(--shadow); padding:12px; display:grid; grid-template-columns:56px 1fr; gap:12px}
  .mobile-card img{width:56px; height:56px; border-radius:10px; object-fit:cover}
  .mobile-card .name{font-weight:700}
  .mobile-card .meta{font-size:.92rem; color:#475569}
  .mobile-card .actions{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap}
}
/* Accessibility helpers */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}