html{ scroll-behavior: smooth; }

/* zodat de titel niet onder je sticky nav valt */
:target{ scroll-margin-top: 90px; } /* pas 90px aan naar jouw nav hoogte */
:root{
  --bg:var(--ref-bg);
  --card:var(--ref-card);
  --muted:var(--ref-muted);
  --text:var(--ref-text);
  --brandBlue:var(--ref-brand-blue);
  --brandRed:var(--ref-brand-red);
  --line:var(--ref-line);
  --shadow:var(--ref-shadow-card);
  --radius:12px;
}

/* ✅ Scrollbar verbergen op mobiel (scroll blijft werken) */
@media (pointer:coarse){
  html, body{
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* oude Edge/IE */
  }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar{
    width: 0;
    height: 0;
    display: none;              /* Chrome/Safari */
  }
}

*{box-sizing:border-box}
html, body{ overflow-x:hidden; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color:var(--text);
  line-height:1.55;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 1600px at 20% 0%, rgba(10,132,255,.22), transparent 60%),
    radial-gradient(1200px 1600px at 80% 80%, rgba(255,59,48,.16), transparent 60%),
    var(--bg);
}

a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:28px 18px 70px}

.muted{color:var(--muted)}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; font-size:12px}

/* pas dit getal aan aan de hoogte van je sticky header */
#tab-flessen{
  scroll-margin-top: 80px; 
}

.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.logoRing{
  width:38px;height:38px;border-radius:12px;padding:2px;flex:0 0 auto;
  background: linear-gradient(135deg, var(--brandBlue), var(--brandRed));
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
}
.logoImg{width:34px;height:34px;border-radius:12px;object-fit:cover;display:block;}
.brand span{
  font-weight:800;letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:220px;
}

.navlinks{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  -webkit-overflow-scrolling: touch;
  justify-content:flex-end;
  width:auto;
  min-width:0;
}

.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 10px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  text-decoration:none; font-weight:700; font-size:11px;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  color:inherit;
}

#flessenMsg{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
	margin-right: 12px;
    border-radius: 12px;
    border: 1px solid rgb(251 0 0);
    background: rgb(255 133 133 / 46%);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    /* cursor: pointer; */
    color: inherit;
}

.pill:hover{border-color:rgba(10,132,255,.35); background:rgba(10,132,255,.08)}
.pill.primary{border-color:rgba(10,132,255,.40); background:rgba(10,132,255,.12)}
.pill.icon{ padding:8px 10px; min-width:40px; justify-content:center; }

.navlinks > *{ flex: 0 0 auto; }

:root{ --navScrollThumb: rgba(255,255,255,.18); }
html[data-theme="light"]{ --navScrollThumb: rgba(0,0,0,.18); }

.navlinks{ scrollbar-width: thin; }
.navlinks::-webkit-scrollbar{ height: 8px; }
.navlinks::-webkit-scrollbar-thumb{ background: var(--navScrollThumb); border-radius: 12px; }

@keyframes refPulse {
  0%{ transform:scale(1); opacity:.7; }
  50%{ transform:scale(1.1); opacity:1; }
  100%{ transform:scale(1); opacity:.7; }
}
.liveDot{
  width:10px;height:10px;border-radius:12px;display:inline-block;
  background: rgba(201,247,215,.92);
  box-shadow: 0 0 0 4px rgba(201,247,215,.12);
  animation: refPulse 1.9s ease-in-out infinite;
}
.liveDot.off{
  background: rgba(255,215,168,.92);
  box-shadow: 0 0 0 4px rgba(255,215,168,.12);
  animation: none;
}

/* page spacing under fixed nav */
.pageTopSpace{height:60px}

/* Hamburger */
.hamburger{
  display:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  border-radius:12px;
  padding:10px 12px;
  font-weight:800;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  flex:0 0 auto;
  color:inherit;
}
.hamburger:hover{border-color:rgba(10,132,255,.35); background:rgba(10,132,255,.08)}

    /* Mobile dropdown menu */
    .mobileMenu{
      display:none;
      border:1px solid var(--line);
      border-radius:12px;
      box-shadow: var(--shadow);
      overflow:hidden;
      width:100%;
    }
.mobileMenu.open{display:block}

.mobileMenu a{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px;
  text-decoration:none;
  border-top:1px solid rgba(255,255,255,.06);
  font-weight:800;
  background:transparent;
  color:inherit;
}
.mobileMenu a:first-of-type{border-top:none}
.mobileMenu .sub{
  color:var(--muted);
  font-weight:800;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 55%;
}
.mobileRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

.mobileBtn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 14px;
  border:0;
  border-top:1px solid rgba(255,255,255,.06);
  font-weight:900;
  background:transparent;
  color:inherit;
  cursor:pointer;
}
.mobileBtn:hover{ background:rgba(10,132,255,.08); }
.mobileBtn.primary{ background:rgba(10,132,255,.12); }

/* Cards */
.card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px;
  background:rgba(17,24,38,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  min-width:0;
}
.k{font-size:12px;color:var(--muted);font-weight:900;letter-spacing:.2px}
.sectionTitle{margin:6px 0 0;font-size:20px;font-weight:950}
.sectionTitleSm{margin:4px 0 0;font-size:16px;font-weight:950}

.sectionMeta{margin:8px 0 0;font-size:13px;font-weight:800;color:var(--muted)}
.sectionMeta:empty{display:none}
.sub{color:var(--muted);font-size:13px;font-weight:800;margin-top:6px}
.hr{height:1px;background:var(--line);margin:16px 0}

.notice{
  margin-top:10px;
  color:#ffd38a;
  font-weight:800;
  min-height:20px;
}

#infoCard{ margin-bottom:16px; }   /* pas 12–24px aan naar smaak */

/* Info card (boven login) */
.infoGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.infoItem{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:14px;
}
.infoItem .v{
  margin-top:6px;
  font-weight:850;
  color:rgba(234,240,247,.88);
  font-size:13px;
  line-height:1.6;
}
.infoWide{ grid-column: 1 / -1; }

@media (max-width:700px){
  .infoGrid{ grid-template-columns: 1fr; }
  .infoWide{ grid-column:auto; }
}

/* Login form */
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.field span{display:block;font-size:12px;color:var(--muted);font-weight:900;letter-spacing:.2px;margin-bottom:6px}
.field input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
  font-weight:800;
}
.field input:focus{border-color:rgba(10,132,255,.35); background:rgba(10,132,255,.06)}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}

/* Profile header */
.profileTop{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.profileLeft{display:flex;align-items:center;gap:14px;min-width:0}
.avatarRing{
  width:54px;height:54px;border-radius:12px;padding:2px;flex:0 0 auto;
  background: linear-gradient(135deg, var(--brandBlue), var(--brandRed));
  box-shadow: 0 10px 25px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
}
.avatar{
  width:50px;height:50px;border-radius:12px;
  object-fit:cover;display:block;
  background:rgba(0,0,0,.25);
}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{
  display:inline-flex;align-items:center;
  padding:7px 10px;border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:12px;
  font-weight:900;
}


/* Simplify app header: hide redundant profile summary and chips above tabs */
#appCard > .profileTop,
#appCard > .chips,
#appCard > .hr{
  display:none;
}
#appCard > .tabs{
  margin-top:0;
}

/* Tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 4px 0}
.tab{
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
    cursor: pointer;
    font-weight: 900;
    font-size: 12px;
}
.tab:hover{border-color:rgba(10,132,255,.35); background:rgba(10,132,255,.08)}
.tab.active{
  background:rgba(10,132,255,.12);
  border-color:rgba(10,132,255,.40);
}

/* Panels */
.panel{margin-top:12px}
.panelHead{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:10px;
}
.panelActions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.input{
  padding:10px 12px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--text);outline:none;font-weight:800;
  min-width: 260px;
}
.input:focus{border-color:rgba(10,132,255,.35); background:rgba(10,132,255,.06)}

/* Key/Value grid */
.kv{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:10px 14px;
}
.kv .k{color:var(--muted);font-size:13px}
.kv .v{color:var(--text);font-size:13px;word-break:break-word;white-space:pre-wrap}

/* Lists (flessen) */
.list{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
.item{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:14px;
}
.item .h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.item .t{font-weight:950;font-size:15px}
.item .s{color:var(--muted);font-size:12px;font-weight:900}

.pre{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  min-height:140px;
  overflow:auto;
  color:var(--text);
}

/* Footer */
.footer{margin-top:18px;color:var(--muted);font-size:12.5px;font-weight:800}
.footer-link{
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,255,255,.35);
  padding-bottom: 1px;
}
.footer-link:hover{
  border-bottom-style: solid;
}

/* ==== Flessen badges ==== */
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:12px;
  font-weight:900;font-size:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(234,240,247,.90);
}
.badge.green{border-color:rgba(58,215,138,.35); background:rgba(58,215,138,.10)}
.badge.red{border-color:rgba(255,69,96,.40); background:rgba(255,69,96,.12)}
.badge.orange{border-color:rgba(255,190,80,.45); background:rgba(255,190,80,.12)}
.badge.blue{border-color:rgba(10,132,255,.45); background:rgba(10,132,255,.12)}
.badge.purple{border-color:rgba(180,120,255,.40); background:rgba(180,120,255,.12)}
.badge.gray{border-color:rgba(180,190,210,.22); background:rgba(180,190,210,.08)}

.valrow{margin-top:10px; display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.valrow span{font-weight:800}
.valrow b{font-weight:950}

.warn{
  border-color:rgba(255,190,80,.55) !important;
  background:rgba(255,190,80,.14) !important;
}
.neg{
  border-color:rgba(255,69,96,.55) !important;
  background:rgba(255,69,96,.14) !important;
}
.smallmuted{color:rgba(234,240,247,.75); font-weight:800}

/* Detail polish + theme-live helpers */
.detail-head{ align-items:flex-start; }
.detail-head__date{ padding-top:4px; }
.detail-hero{
  display:inline-flex;
  flex-direction:column;
  gap:6px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--hero-bd, rgba(255,255,255,.14));
  background:var(--hero-bg, rgba(255,255,255,.04));
  box-shadow:0 8px 18px rgba(0,0,0,.14);
  max-width:100%;
}
.detail-hero__eyebrow{
  font-weight:850;
  font-size:14px;
  line-height:1.15;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.92;
}
.detail-hero__title{
  font-weight:900;
  font-size:18px;
  letter-spacing:.15px;
  line-height:1.18;
  color:rgba(255,255,255,.96);
  text-shadow:0 1px 8px rgba(0,0,0,.18);
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.detail-badges{ margin-top:12px; }
.detail-values{ margin-top:12px; gap:10px 14px; }
.detail-values span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  font-size: small;
}
.detail-inline-meta{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.detail-inline-meta__arrow{ opacity:.75; padding:0 4px; }
.over-badge{
  border:1px solid var(--ov-bd, rgba(255,255,255,.10)) !important;
  background:var(--ov-bg, rgba(255,255,255,.03)) !important;
  color:var(--ov-fg, inherit) !important;
  font-weight:900;
}
.over-progress{
  display:inline-block;
  width:var(--ov-width, 92px);
  height:8px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--ov-bd, rgba(255,255,255,.10));
  background:var(--ov-track, rgba(255,255,255,.06));
  vertical-align:middle;
  margin-left:8px;
}
.over-progress__fill{
  display:block;
  height:100%;
  width:var(--ov-pct, 0%);
  background:var(--ov-fill, rgba(255,255,255,.2));
  opacity:.95;
}
html.theme-light .detail-hero__title,
html[data-theme="light"] .detail-hero__title,
html[data-ref-theme="light"] .detail-hero__title{ color:rgba(15,23,42,.94); text-shadow:none; }
html.theme-light .detail-values span,
html[data-theme="light"] .detail-values span,
html[data-ref-theme="light"] .detail-values span{
  border-color:rgba(15,23,42,.10);
  background:rgba(255,255,255,.55);
}
html.theme-light .over-badge,
html[data-theme="light"] .over-badge,
html[data-ref-theme="light"] .over-badge{ color:var(--ov-fg, #243247) !important; }

    /* =========================================================
       ✅ HARD MOBILE OVERRIDES (hamburger dropdown)
       ========================================================= */
    @media (max-width: 1200px){
      .wrap{ padding:16px 12px 60px; }

      .nav{
        top:10px;
        padding:10px 12px; 
        border-radius:12px;
        gap:10px;
        backdrop-filter: blur(8px);
        padding-bottom: 1px;
        flex-direction:column;
        align-items:stretch;
		max-width: 1055px;
      }

      .navTop{
        width:100%;
        justify-content:space-between;
      }

  .nav .navlinks{ display:none !important; }
  .nav .hamburger{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    gap:10px;
  }

  .pageTopSpace{height:75px}
  .formGrid{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .input{min-width:100%}
}

/* ==== Profile (mooier) ==== */
.profileCard{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
}
.profileMain{display:flex; align-items:center; gap:14px; min-width:0}
.profileMeta{min-width:0}
.profileName{font-weight:950; font-size:18px; line-height:1.2}
.profileMail{font-weight:850; font-size:13px; margin-top:4px; word-break:break-word}
.profileGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 12px;
  margin-top:12px;
}
.profileField{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  border-radius:12px;
  padding:10px 12px;
}
.profileField .k{margin:0; font-size:11px}
.profileField .v{margin-top:4px; font-weight:900; font-size:13px; word-break:break-word}
@media (max-width:700px){
  .profileGrid{grid-template-columns:1fr}
}

/* ==== Clickable bottle cards ==== */
.item.clickable{
  cursor:pointer;
  transition: transform .06s ease, border-color .12s ease, background .12s ease;
}
.item.clickable:hover{
  transform: translateY(-1px);
  border-color: rgba(10,132,255,.35);
  background: rgba(10,132,255,.06);
}
.item.clickable:active{ transform: translateY(0px) scale(.995); }

/* Back pill inside panel */
.pill.small{
  padding:8px 10px;
  font-size:12px;
}
/* Hide account creation */
#btnRegister{display:none !important;}
/* ==== Profile (mooier) ==== */
.profileCard{
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
}
.profileMain{display:flex; align-items:center; gap:14px; min-width:0}
.profileMeta{min-width:0}
.profileName{font-weight:950; font-size:18px; line-height:1.2}
.profileMail{font-weight:850; font-size:13px; margin-top:4px; word-break:break-word}
.profileGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 12px;
  margin-top:12px;
}
.profileField{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  border-radius:12px;
  padding:10px 12px;
}
.profileField .k{margin:0; font-size:11px}
.profileField .v{margin-top:4px; font-weight:900; font-size:13px; word-break:break-word}
.avatarFallback{display:flex;align-items:center;justify-content:center;font-weight:950;color:rgba(234,240,247,.75)}
@media (max-width:700px){ .profileGrid{grid-template-columns:1fr} }

/* ==== Clickable bottle cards ==== */
.item.clickable{
  cursor:pointer;
  transition: transform .06s ease, border-color .12s ease, background .12s ease;
}
.item.clickable:hover{
  transform: translateY(-1px);
  border-color: rgba(10,132,255,.35);
  background: rgba(10,132,255,.06);
}
.item.clickable:active{ transform: translateY(0px) scale(.995); }

.pill.small{ padding:8px 10px; font-size:12px; }
/* ==== Abonnement (netter zoals profiel) ==== */
.abboCard{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
}
.abboTitle{font-weight:950;font-size:18px;margin:0}
.abboSub{color:rgba(234,240,247,.78);font-weight:850;font-size:13px;margin-top:6px}
.abboGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 12px;
  margin-top:12px;
}
.abboField{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.10);
  border-radius:12px;
  padding:10px 12px;
}
.abboField .k{margin:0; font-size:11px}
.abboField .v{margin-top:4px; font-weight:900; font-size:13px; word-break:break-word}
@media (max-width:700px){
  .abboGrid{grid-template-columns:1fr}
}
[hidden]{ display:none !important; }

/* =========================
   Theme toggle + smooth transition (Portal)
   ========================= */

/* Smooth transition */
html, body,
.nav, .card, .pill, .tab,
input, textarea, select,
.badge, .chip, .item, .pre,
.hr{
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    opacity .25s ease,
    filter .25s ease;
}

@media (prefers-reduced-motion: reduce){
  html, body,
  .nav, .card, .pill, .tab,
  input, textarea, select,
  .badge, .chip, .item, .pre,
  .hr{
    transition: none !important;
  }
}

/* Light mode (class on <html>) */
html.theme-light{
  color-scheme: light;

  --bg:#f6f8fb;
  --card: rgba(255,255,255,.82);
  --muted: rgba(15,23,42,.72);
  --text:#0b1220;
  --line: rgba(15,23,42,.14);
  --shadow: 0 14px 34px rgba(15,23,42,.10);
}

html.theme-light body{
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* if you use a ::before glow layer */
html.theme-light body::before,
html[data-theme="light"] body::before,
html[data-ref-theme="light"] body::before{
  background:
    radial-gradient(1200px 1600px at 20% 0%, rgba(10,132,255,.10), transparent 60%),
    radial-gradient(1200px 1600px at 80% 80%, rgba(255,59,48,.08), transparent 60%),
    var(--bg) !important;
}

html.theme-light .nav,
html.theme-light .card{
  background: rgba(255,255,255,.80) !important;
  border-color: var(--line) !important;
  box-shadow: var(--shadow) !important;
}

html.theme-light .muted,
html.theme-light .k,
html.theme-light .sub,
html.theme-light .s,
html.theme-light .smallmuted,
html.theme-light .chip,
html.theme-light .item .s{
  color: rgba(15,23,42,.70) !important;
}

html.theme-light .pill:not(.primary),
html.theme-light .tab:not(.active),
html.theme-light .chip,
html.theme-light .badge:not(.over-badge),
html.theme-light .item,
html.theme-light .pre,
html[data-theme="light"] .pill:not(.primary),
html[data-theme="light"] .tab:not(.active),
html[data-theme="light"] .chip,
html[data-theme="light"] .badge:not(.over-badge),
html[data-theme="light"] .item,
html[data-theme="light"] .pre,
html[data-ref-theme="light"] .pill:not(.primary),
html[data-ref-theme="light"] .tab:not(.active),
html[data-ref-theme="light"] .chip,
html[data-ref-theme="light"] .badge:not(.over-badge),
html[data-ref-theme="light"] .item,
html[data-ref-theme="light"] .pre{
  background: rgba(255,255,255,.72) !important;
  border-color: rgba(15,23,42,.14) !important;
  color: var(--text) !important;
}

html.theme-light .pill:not(.primary):hover,
html.theme-light .tab:not(.active):hover{
  border-color: rgba(10,132,255,.45) !important;
  background: rgba(10,132,255,.08) !important;
}

html.theme-light .field input,
html.theme-light .input,
html.theme-light input,
html.theme-light textarea,
html.theme-light select{
  background: rgba(255,255,255,.86) !important;
  color: var(--text) !important;
  border-color: rgba(15,23,42,.18) !important;
}

html.theme-light input::placeholder,
html.theme-light textarea::placeholder{
  color: rgba(15,23,42,.55) !important;
}

/* Mobile menu (portal) */
html.theme-light #mobileMenu{
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(15,23,42,.14) !important;
}

html.theme-light #mobileMenu a{
  color: var(--text) !important;
  border-top: 1px solid rgba(15,23,42,.10) !important;
}

html.theme-light #mobileMenu .sub{
  color: rgba(15,23,42,.55) !important;
}


/* Light mode fixes for hardcoded colors */
html.theme-light .infoItem .v,
html.theme-light .infoItem .k,
html.theme-light .infoItem b,
html.theme-light .infoItem strong,
html.theme-light .infoGrid .v,
html.theme-light .infoGrid .k{
  color: rgba(15,23,42,.82) !important;
}
html.theme-light .infoItem .sub,
html.theme-light .infoItem .muted,
html.theme-light .infoGrid .sub,
html.theme-light .infoGrid .muted{
  color: rgba(15,23,42,.68) !important;
}

/* Common hardcoded light text -> dark */
html.theme-light .v{ color: rgba(15,23,42,.82) !important; }
html.theme-light .k{ color: rgba(15,23,42,.68) !important; }

/* Labels and small captions */
html.theme-light label,
html.theme-light .label,
html.theme-light .hint,
html.theme-light .small{
  color: rgba(15,23,42,.70) !important;
}

/* Theme toggle button styling — match main site / stats */
#btnTheme.ref-theme-toggle-btn,
#btnTheme_m.ref-theme-toggle-btn{
  min-width:44px;
  width:44px;
  height:38px;
  padding:0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  appearance:none;
  -webkit-appearance:none;
}
#btnTheme .ref-theme-toggle__icon,
#btnTheme_m .ref-theme-toggle__icon{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
}
#btnTheme:focus-visible,
#btnTheme_m:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(10,132,255,.18), 0 10px 26px rgba(0,0,0,.20);
}
/* ===== Light theme fixes: flessen ===== */
html.theme-light .badge.green,
html[data-theme="light"] .badge.green,
html[data-ref-theme="light"] .badge.green{
  border-color: rgba(34,197,94,.45) !important;
  background: rgba(34,197,94,.12) !important;
  color: #166534 !important;
}
html.theme-light .badge.red,
html[data-theme="light"] .badge.red,
html[data-ref-theme="light"] .badge.red{
  border-color: rgba(239,68,68,.42) !important;
  background: rgba(239,68,68,.10) !important;
  color: #b42318 !important;
}
html.theme-light .badge.orange,
html[data-theme="light"] .badge.orange,
html[data-ref-theme="light"] .badge.orange{
  border-color: rgba(245,158,11,.42) !important;
  background: rgba(245,158,11,.12) !important;
  color: #92400e !important;
}
html.theme-light .badge.blue,
html[data-theme="light"] .badge.blue,
html[data-ref-theme="light"] .badge.blue{
  border-color: rgba(59,130,246,.42) !important;
  background: rgba(59,130,246,.10) !important;
  color: #1d4ed8 !important;
}
html.theme-light .badge.purple,
html[data-theme="light"] .badge.purple,
html[data-ref-theme="light"] .badge.purple{
  border-color: rgba(147,51,234,.34) !important;
  background: rgba(147,51,234,.08) !important;
  color: #7c3aed !important;
}
html.theme-light .badge.gray,
html[data-theme="light"] .badge.gray,
html[data-ref-theme="light"] .badge.gray{
  border-color: rgba(100,116,139,.24) !important;
  background: rgba(100,116,139,.08) !important;
  color: #334155 !important;
}


/* Shared polish */
html.theme-light body,
html[data-theme="light"] body,
html[data-ref-theme="light"] body{ color:var(--ref-text); }
html.theme-light body::before,
html[data-theme="light"] body::before,
html[data-ref-theme="light"] body::before{
  background:
    radial-gradient(1200px 1600px at 20% 0%, rgba(10,132,255,.12), transparent 60%),
    radial-gradient(1200px 1600px at 80% 80%, rgba(255,59,48,.10), transparent 60%),
    var(--ref-bg);
}
.nav,.card,.mobileMenu{ border-radius:12px; box-shadow:var(--ref-shadow-lg); }
.pill,.mobileBtn,.hamburger{ min-height:42px; }
.sectionHead,.sectionTitle,.k,.sub,.v{ scroll-margin-top:90px; }
.badge,.pill.primary,.tab.active{ box-shadow:0 10px 24px rgba(10,132,255,.10); }
input,select,button{ font:inherit; }
input[type="text"],input[type="email"],input[type="password"],input[type="search"]{ min-height:46px; }
.card{ background:var(--ref-surface); backdrop-filter:blur(var(--ref-blur)); -webkit-backdrop-filter:blur(var(--ref-blur)); }
html.theme-light .card, html.theme-light .nav, html.theme-light .mobileMenu,
html[data-theme="light"] .card, html[data-theme="light"] .nav, html[data-theme="light"] .mobileMenu,
html[data-ref-theme="light"] .card, html[data-ref-theme="light"] .nav, html[data-ref-theme="light"] .mobileMenu{ background:var(--ref-surface); }


/* v4.9.0 local polish */
.themeBtnMobile{ width:54px; flex:0 0 54px; justify-content:center; }
.infoItem, .card{ overflow:hidden; }
.infoItem .v, .card .v{ color: rgba(234,240,247,.90); }
html.theme-light .infoItem .v, html[data-theme="light"] .infoItem .v, html[data-ref-theme="light"] .infoItem .v{ color:#243247; }
.sectionHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.notice{ padding:10px 12px; background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.18); }
.notice.ok{ background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.18); color:inherit; }
.actions .pill, .actions button{ min-height:40px; }

/* v4.9.2 final cleanup */
.nav,.card,.item,.pill,.tab,.badge,.mobileMenu,.field input,.pre,.detail-hero,.detail-values span{ transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease; }
.item.clickable:hover{ box-shadow:0 16px 34px rgba(10,132,255,.10); }
html.theme-light .notice{ color:#8a5a00; }

/* v4.9.5 portal mobile + states polish */
.emptyState,
.noticeState{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 15px;
  border-radius:12px;
  border:1px dashed rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.emptyState__title{
  font-weight:950;
  font-size:14px;
  line-height:1.2;
}
.emptyState__sub{
  color: var(--muted);
  font-size:12px;
  font-weight:800;
  line-height:1.45;
}
html.theme-light .emptyState,
html.theme-light .noticeState{
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(15,23,42,.12) !important;
}
html.theme-light .emptyState__title{ color:#203047 !important; }
html.theme-light .emptyState__sub{ color:rgba(15,23,42,.62) !important; }

@media (max-width:700px){
  .panelActions{
    gap:8px;
    align-items:stretch;
  }
  .panelActions .pill,
  .panelActions .tab,
  .panelActions .input,
  .panelActions select{
    min-height:42px;
  }
  .panelActions .input{
    min-width:100%;
  }
  .item{
    padding:12px;
    border-radius:12px;
  }
  .detail-hero{
    width:100%;
    padding:9px 11px;
    border-radius:12px;
  }
  .detail-hero__title{
    font-size:16px;
    line-height:1.2;
  }
  .detail-hero__eyebrow{
    font-size:13px;
  }
  .detail-values{
    gap:10px;
  }
  .detail-inline-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .badges{
    gap:7px;
  }
}