: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;
  /* Additional colors for landing page */
  --light-gray: #f8f9fa;
  --border-light: #e9ecef;
}
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; padding: 1rem; border-radius: var(--radius); text-align: center;}
.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){
  /* On small screens hide the nav by default and show a hamburger */
  .topnav{display:none}
  .topnav.topnav--open{display:flex; flex-direction:column; gap:0.4rem; margin-top:0.6rem}
  .hamburger{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:transparent; border:1px solid rgba(255,255,255,0.06); border-radius:8px; margin-left:0.5rem; cursor:pointer}
  .hamburger-box{display:inline-block; width:20px; height:16px; position:relative}
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after{display:block; background:white; height:2px; border-radius:2px; position:absolute; left:0; right:0; transition:transform 200ms ease, opacity 200ms ease}
  .hamburger-inner{top:50%; transform:translateY(-50%)}
  .hamburger-inner::before{content:''; top:-6px}
  .hamburger-inner::after{content:''; top:6px}
  .hamburger.is-active .hamburger-inner{transform:rotate(45deg)}
  .hamburger.is-active .hamburger-inner::before{transform:rotate(-90deg) translateX(-6px); top:0}
  .hamburger.is-active .hamburger-inner::after{opacity:0}

  /* Backdrop */
  .nav-backdrop{position:fixed; inset:0; background:rgba(0,0,0,0); pointer-events:none; transition:background 200ms ease; z-index:20}
  .nav-backdrop--visible{background:rgba(0,0,0,0.45); pointer-events:auto}
  .topnav{position:relative; z-index:30}
  .topnav.topnav--open{transform:translateY(0); animation:slideDown 220ms ease forwards}
  @keyframes slideDown{from{transform:translateY(-8px); opacity:0} to{transform:translateY(0); opacity:1}}
  .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)}