:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --muted:#6b7280;
  /* Cannareporter-inspired palette (red to blue) */
  --accent:#b02f3a; /* deep red */
  --accent-2:#2b6fb8; /* medium blue */
  --danger:#B03A2E;
  --max-width:1200px;
  --radius:12px;
}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #f4fbf9 0%, var(--bg) 60%);
  color:#052029; margin:0; padding:0;
}
.topbar{background:linear-gradient(90deg,var(--accent), var(--accent-2)); color:white; padding:0.6rem 0}
.topbar-inner{max-width:var(--max-width); margin:0 auto; padding:0 1rem; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; gap:0.8rem; align-items:center}
.logo{width:64px; height:64px; border-radius:10px; background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1.1rem}
.brand-logo{max-width:56px; max-height:56px; display:block; border-radius:8px}
.site-title{font-size:1.15rem; font-weight:700}
.muted{opacity:0.9}
.topnav{display:flex; gap:0.5rem}
.nav-pill{display:inline-block; padding:0.4rem 0.7rem; border-radius:999px; text-decoration:none; color:rgba(255,255,255,0.95); font-weight:600; opacity:0.95}
.nav-pill--accent{background:rgba(255,255,255,0.08); box-shadow:inset 0 -2px 0 rgba(255,255,255,0.04)}
.nav-pill--active{background:rgba(255,255,255,0.14); box-shadow:inset 0 -3px 0 rgba(255,255,255,0.12)}
.category-pill{background:linear-gradient(90deg,var(--accent), var(--accent-2)); color:white; border:1px solid #000}
.category-pill-btn{display:inline-block; padding:0.5rem 0.9rem; border-radius:999px; text-decoration:none; color:white; font-weight:700; opacity:1; background:linear-gradient(90deg,var(--accent), var(--accent-2)); border:1px solid #000; box-shadow:0 3px 8px rgba(11,107,91,0.08); transition:transform 120ms ease, box-shadow 120ms ease}

.container.app{max-width:var(--max-width); margin:1.5rem auto; padding:1rem}
.content-area{display:flex; gap:1rem; flex-direction:column}
.card{background:var(--card); padding:1rem; border-radius:var(--radius); box-shadow:0 6px 18px rgba(11,107,91,0.06); margin-bottom:1rem}
.details summary{cursor:pointer}
.details[open]{padding:0.5rem}
.row{display:flex; gap:1rem; flex-wrap:wrap}
.col{flex:1}

/* Hero */
.hero{background:linear-gradient(90deg,var(--accent), var(--accent-2)); color:white}
.hero .card{background:transparent; box-shadow:none; padding:1.25rem}
.hero-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.hero-text h1{margin:0 0 0.25rem 0; font-size:1.6rem}
.hero-text .small{color:rgba(255,255,255,0.9)}
.hero-ctas{margin-top:0.75rem; display:flex; gap:0.5rem}
.hero .button{background:linear-gradient(90deg,var(--accent), var(--accent-2)); color:white; padding:0.5rem 0.9rem; border-radius:999px; font-weight:800; border:1px solid #000}
.hero-lang{align-self:flex-start}

.table{width:100%; border-collapse:collapse}
.table th, .table td{padding:0.6rem 0.9rem; border-bottom:1px solid #f1f6f5; vertical-align:top}
.table th{background:#fbfeff; text-align:left}
.badge{display:inline-block; padding:0.28rem 0.6rem; border-radius:999px; font-weight:700; font-size:0.82rem}
.badge--active{background:rgba(31,169,122,0.12); color:var(--accent-2);}
.badge--inactive{background:rgba(176,58,46,0.1); color:var(--danger);}
.badge-list{display:flex; gap:0.35rem; flex-wrap:wrap; align-items:center}
.badge-list span{margin:0}
.input, input[type=text], input[type=date], select{padding:0.6rem; border-radius:8px; border:1px solid #e8f2ef;}
.button{background:linear-gradient(90deg,var(--accent), var(--accent-2)); color:white; padding:0.55rem 0.95rem; border-radius:999px; border:1px solid #000; cursor:pointer; font-weight:800; box-shadow:0 6px 18px rgba(11,107,91,0.06); transition:transform 120ms ease, box-shadow 120ms ease}
.button:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(11,107,91,0.12)}
.button--danger{background:linear-gradient(180deg,#ff5a5a,#d64545); color:white; padding:0.4rem 0.6rem; border-radius:8px; border:1px solid #8b2525; font-weight:700}
.button--danger:hover{transform:translateY(-1px); box-shadow:0 6px 12px rgba(176,58,46,0.12)}
.small{font-size:0.9rem; color:var(--muted)}
.footer{max-width:var(--max-width); margin:2rem auto; padding:0 1rem 2rem 1rem}

/* make tables visually pleasant */
.table thead th{font-weight:700; color:#08343a}
.table tbody tr:hover{background:linear-gradient(90deg, rgba(31,169,122,0.03), rgba(11,107,91,0.02))}

/* Clean collapsible table styles */
.clean-table summary{cursor:pointer; padding:0.4rem 0.6rem; border-radius:8px; background:#f6f9f8; display:inline-block}
.table-wrapper table{width:100%; border-collapse:collapse; border:1px solid #eef6f5; background:#fff}
.table-wrapper th, .table-wrapper td{padding:0.6rem 0.8rem; border-bottom:1px solid #f1f6f5; text-align:left}
.table-wrapper thead th{background:#fbfeff}

/* Map sizing: keep width but double height and maintain ratio via aspect-ratio when supported */
.map-wrapper{width:100%; height:auto}
.map-wrapper .js-plotly-plot, .map-wrapper iframe{width:100% !important}
.map-wrapper .plotly-graph-div{width:100% !important; height:800px !important}

/* responsive */
@media (max-width:980px){
  .topnav{display:none}
  .topbar-inner{justify-content:flex-start}
  .hero-inner{flex-direction:column; align-items:flex-start}
}
@media (max-width:800px){.row{flex-direction:column}}

/* Cards grid for compare results */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:0.8rem}
.small-card{padding:0.6rem; border-radius:10px; background:linear-gradient(180deg,#fff,#fbfeff); box-shadow:0 6px 18px rgba(11,107,91,0.04)}
.small-card .card-title{font-weight:700; margin-bottom:0.25rem}
.small-card .card-body{font-size:0.9rem; color:var(--muted)}