/* BorgliByte shared theme + compact mode menu */
html{color-scheme:dark}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface2:#edf3f8;
  --text:#152033;
  --muted:#66758a;
  --muted2:#8492a4;
  --line:rgba(17,34,51,.12);
  --cyan:#087fc9;
  --blue:#166fd8;
  --purple:#684bd8;
}
html[data-theme="dark"]{color-scheme:dark}

/* Compact header control */
.header-inner{gap:18px}
.header-actions{display:flex;align-items:center;gap:24px;margin-left:auto}
.theme-menu{position:relative;flex:none}
.theme-menu-trigger{
  min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  display:inline-flex;align-items:center;gap:7px;background:var(--surface);color:var(--muted);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer
}
.theme-menu-trigger:hover{color:var(--text);border-color:color-mix(in srgb,var(--cyan) 28%,var(--line))}
.theme-menu-current{color:var(--text);font-weight:750}
.theme-menu-chevron{font-size:10px;opacity:.7}
.theme-menu-panel{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:150px;padding:6px;
  border:1px solid var(--line);border-radius:10px;background:var(--surface);
  box-shadow:0 18px 45px rgba(0,0,0,.22)
}
.theme-menu-panel[hidden]{display:none}
.theme-menu-panel button{
  width:100%;min-height:36px;padding:0 10px;border:0;border-radius:7px;
  display:flex;align-items:center;justify-content:space-between;background:transparent;color:var(--muted);
  font:inherit;font-size:13px;font-weight:650;text-align:left;cursor:pointer
}
.theme-menu-panel button:hover,.theme-menu-panel button.active{background:var(--surface2);color:var(--text)}
.theme-menu-panel button.active::after{content:'✓';color:var(--cyan);font-weight:800}

/* Light appearance across BorgliByte */
html[data-theme="light"] body{
  background:radial-gradient(circle at 50% -5%,rgba(22,112,190,.08),transparent 32%),var(--bg);
  color:var(--text)
}
html[data-theme="light"] .site-header{background:rgba(244,247,251,.88)}
html[data-theme="light"] nav{color:var(--muted)}
html[data-theme="light"] nav a:hover,
html[data-theme="light"] .footer-links a:hover{color:var(--text)}
html[data-theme="light"] .project-lead,
html[data-theme="light"] .about-copy .about-lead{color:#34445a}
html[data-theme="light"] .project-body,
html[data-theme="light"] .about-copy p,
html[data-theme="light"] .content-block p{color:var(--muted)}
html[data-theme="light"] .mockup{background:rgba(255,255,255,.94);box-shadow:0 30px 60px rgba(31,52,78,.12)}
html[data-theme="light"] .mockup-fields div,
html[data-theme="light"] .mockup-result{background:var(--surface2)}
html[data-theme="light"] .project-preview{background:radial-gradient(circle at center,rgba(8,127,201,.08),transparent 58%)}
html[data-theme="light"] .secondary{background:var(--surface)}
html[data-theme="light"] .footer-brand p,
html[data-theme="light"] .footer-bottom{color:var(--muted2)}

/* Keep the existing logo readable on a light header. */
html[data-theme="light"] .brand img,
html[data-theme="light"] .footer-brand img{filter:drop-shadow(0 1px 0 rgba(0,0,0,.18))}

@media(max-width:800px){
  .header-actions{gap:10px}
  .header-actions nav{display:none}
  .theme-menu-trigger{min-height:32px;padding:0 9px}
  .theme-menu-panel{right:0}
}