/* =============================================================================
   OZR LABS — Calculator SPA Shell Styles
   File: calculator_shell.css
   ============================================================================= */

/* ── Self-hosted Montserrat (SIL OFL, free for any use) ─────────────────── */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/montserrat/Montserrat-Regular.62d08c41cefb.ttf") format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/montserrat/Montserrat-Bold.5ce2f7a911f9.ttf") format('truetype');
}
/* Synthesized weights (500/600/800) — browsers will derive these from 400/700.
   Add Bold.ttf faces for additional explicit weights if a specific weight
   (e.g. 800 ExtraBold) is needed without synthesis. */

/* ── Custom scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
html:not(.dark) ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }
html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }


/* ════════════════════════════════════════════════════════════════════════ */
/*  TOP BAR                                                                */
/* ════════════════════════════════════════════════════════════════════════ */

#topbar {
  position: relative;
  /* App chrome floats above the workspace. Raised from 100 to 300 so
     per-calculator topbar dropdowns (trapped in this stacking context)
     paint above workspace layers (viewport overlays up to z-120, HUD
     z-150, content toolbars) while staying below transient layers
     (profile overlay z-500, modals z-1000+, toasts). */
  z-index: 300;
  display: flex;
  align-items: center;
  height: var(--topbar-h);
  flex-shrink: 0;
  background: var(--shell-bar);
  border-bottom: 1px solid var(--shell-bar-border);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  user-select: none;
}

/* Hamburger tile */
.topbar-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sidebar-collapsed-w);
  height: 100%;
  flex-shrink: 0;
  background: none;
  border: none;
  border-right: 1px solid var(--shell-bar-border);
  color: var(--shell-text-muted);
  font-size: 16px;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.topbar-hamburger:hover {
  color: var(--shell-text);
  background: var(--shell-hover);
}

/* Brand area */
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  flex: 1;
  min-width: 0;
}

.topbar-logo {
  height: 22px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.topbar-logo.dark-logo  { display: block; }
.topbar-logo.light-logo { display: none; }
html:not(.dark) .topbar-logo.dark-logo  { display: none; }
html:not(.dark) .topbar-logo.light-logo { display: block; }

.topbar-divider {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--shell-bar-border);
  flex-shrink: 0;
}

.topbar-title {
  font-family: 'Montserrat', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--shell-text-muted);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 200ms ease;
}

/* Right action buttons */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  flex-shrink: 0;
}

.topbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--shell-text-muted);
  font-size: 15px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.topbar-icon-btn:hover {
  background: var(--shell-hover);
  color: var(--shell-text);
}

.topbar-avatar-btn {
  background: rgba(255, 255, 255, 0.14); /* Brighter frosted slate for high dark-mode contrast */
  border: 1px solid rgba(255, 255, 255, 0.24); /* Defined white border ring */
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.95); /* Bright high-contrast titanium white */
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
html:not(.dark) .topbar-avatar-btn {
  background: rgba(0, 0, 0, 0.07); /* Brighter light-mode slate background */
  border-color: rgba(0, 0, 0, 0.14);
  color: #0f172a;
}
.topbar-avatar-btn:hover {
  background: rgba(37, 99, 235, 0.15); /* Vibrant blue hover overlay */
  border-color: #2563EB;
  color: #60a5fa; /* Vibrant light blue initials/icon */
}
html:not(.dark) .topbar-avatar-btn:hover {
  background: rgba(37, 99, 235, 0.08);
  border-color: #2563EB;
  color: #2563EB;
}


/* ════════════════════════════════════════════════════════════════════════ */
/*  APP BODY (sidebar + content)                                           */
/* ════════════════════════════════════════════════════════════════════════ */

#app-body {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}


/* ════════════════════════════════════════════════════════════════════════ */
/*  SIDEBAR                                                                */
/* ════════════════════════════════════════════════════════════════════════ */

#sidebar {
  position: relative;   /* becomes absolute on mobile via media query */
  z-index: 50;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: var(--sidebar-collapsed-w);
  height: 100%;
  background: var(--shell-sidebar-bg);
  border-right: 1px solid var(--shell-sidebar-border);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.03);
  transition: width var(--sidebar-transition) 150ms;
  overflow: hidden;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Expanded state */
#sidebar.expanded {
  width: var(--sidebar-expanded-w);
}

/* Pinned state — sidebar stays open, no overlay */
#sidebar.pinned {
  position: relative;
}

/* Hover-expand when collapsed (desktop) */
@media (min-width: 769px) {
  #sidebar:not(.pinned):hover {
    width: var(--sidebar-expanded-w);
    transition-delay: 0s !important;
  }
  #sidebar:not(.pinned):hover .sidebar-item-label,
  #sidebar:not(.pinned):hover .sidebar-section-label,
  #sidebar:not(.pinned):hover .sidebar-category-label,
  #sidebar:not(.pinned):hover .sidebar-header,
  #sidebar:not(.pinned):hover .sidebar-projects-section,
  #sidebar:not(.pinned):hover .sidebar-projects-actions,
  #sidebar:not(.pinned):hover .sidebar-signin-prompt,
  #sidebar:not(.pinned):hover .sidebar-kb-hint .sidebar-item-label {
    opacity: 1;
    pointer-events: auto;
  }
  #sidebar:not(.pinned):hover .sidebar-tooltip { display: none; }
}

/* Sidebar inner header */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--topbar-h);
  padding: 0 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--shell-sidebar-border);
  overflow: hidden;
  white-space: nowrap;
}

/* Sidebar Header Title (Replaces Redundant Logo) */
.sidebar-header-title {
  font-family: 'Montserrat', monospace;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: var(--shell-text);
  opacity: 0;
  transition: opacity 200ms ease;
  white-space: nowrap;
  pointer-events: none;
  text-transform: uppercase;
}
#sidebar.expanded .sidebar-header-title,
#sidebar:hover .sidebar-header-title {
  opacity: 0.8;
}

.pin-btn {
  background: none;
  border: none;
  color: var(--shell-text-muted);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
  opacity: 0;
  transition: background 150ms ease, color 150ms ease, opacity 200ms ease;
  flex-shrink: 0;
}
.pin-btn:hover { background: var(--shell-hover); color: var(--shell-text); }
#sidebar.expanded .pin-btn,
#sidebar:hover .pin-btn { opacity: 1; }
#sidebar.pinned .pin-btn { color: var(--shell-accent); opacity: 1; }
#sidebar.pinned #pin-icon { transform: rotate(-45deg); }

/* Scrollable list */
.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: 8px 0 0;
}

/* Section labels */
.sidebar-section-label {
  font-family: 'Montserrat', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--shell-section-label);
  padding: 8px 12px 4px;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms ease;
}
#sidebar.expanded .sidebar-section-label,
#sidebar:hover .sidebar-section-label { opacity: 1; }

/* Collapsible accordion categories */
.sidebar-collapsible-category {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sidebar-category-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 11px;
  height: 34px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--shell-text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
  overflow: hidden;
  position: relative;
}
.sidebar-category-trigger:hover {
  background: var(--shell-hover);
  color: var(--shell-text);
}
.sidebar-category-trigger.active {
  color: var(--shell-text);
}
.sidebar-category-trigger .sidebar-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
#sidebar.expanded .sidebar-category-trigger .sidebar-item-label,
#sidebar:hover .sidebar-category-trigger .sidebar-item-label {
  opacity: 1;
  pointer-events: auto;
}

.category-chevron {
  margin-left: auto;
  font-size: 10px;
  opacity: 0;
  transform: rotate(-90deg);
  transition: transform 250ms ease, opacity 200ms ease;
  flex-shrink: 0;
}
#sidebar.expanded .category-chevron,
#sidebar:hover .category-chevron {
  opacity: 0.6;
}
.sidebar-collapsible-category.open .category-chevron {
  transform: rotate(0deg);
}

.sidebar-category-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  width: 100%;
}
.sidebar-collapsible-category.open .sidebar-category-content {
  max-height: 500px;
}

/* Nested items styling */
.sidebar-category-content .sidebar-item {
  padding-left: 20px;
  border-left: 2px solid transparent;
}
.sidebar-category-content .sidebar-item.active {
  border-left-color: var(--shell-active-border);
}


/* Sidebar nav items (tightened for the slimmer 232px rail) */
.sidebar-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 11px;
  height: 34px;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--shell-text-muted);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
  overflow: hidden;
}
.sidebar-item:hover {
  background: var(--shell-hover);
  color: var(--shell-text);
}
.sidebar-item.active {
  background: var(--shell-active-bg);
  border-left-color: var(--shell-active-border);
  color: var(--shell-accent);
}

.sidebar-item--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* "SOON" pill that appears next to disabled calculator labels.
   Reuses the existing palette: blue/dark-on-light, mono caps. */
.sidebar-coming-soon-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-family: 'Montserrat', monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.15em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(37, 99, 235, 0.3);
  color: #2563eb;
  text-transform: uppercase;
  opacity: 1;
}
html.dark .sidebar-coming-soon-badge {
  background: rgba(96, 165, 250, 0.18);
  border-color: rgba(96, 165, 250, 0.4);
  color: #93c5fd;
}

/* "BETA" status chip for enabled calculator rows. Soft accent-tinted
   capsule with a status dot so it reads as a state marker rather than a
   clickable button. It hugs its content and reveals together with the row
   label (hidden on the collapsed 64px rail, shown on expand/hover) so it
   always fits a compact row and never overflows. */
.sidebar-beta-badge {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Montserrat', monospace;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.sidebar-beta-badge::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 5px currentColor;
  flex-shrink: 0;
}
html:not(.dark) .sidebar-beta-badge {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.09);
  border-color: rgba(37, 99, 235, 0.22);
}
html:not(.dark) .sidebar-beta-badge::before { box-shadow: none; }
#sidebar.expanded .sidebar-beta-badge,
#sidebar:hover .sidebar-beta-badge {
  opacity: 1;
}

.sidebar-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  font-size: 13px;
}

.sidebar-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
#sidebar.expanded .sidebar-item-label,
#sidebar:hover .sidebar-item-label { opacity: 1; pointer-events: auto; }

/* Tooltip (only visible in collapsed non-hover state) */
.sidebar-tooltip {
  position: absolute;
  left: calc(var(--sidebar-collapsed-w) + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20,20,20,0.95);
  color: #fff;
  font-size: 11px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
  z-index: 200;
}
.sidebar-tooltip kbd {
  font-family: 'Montserrat', monospace;
  font-size: 9px;
  background: rgba(255,255,255,0.1);
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
}
html:not(.dark) .sidebar-tooltip {
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  border-color: rgba(15, 23, 42, 0.20);
}
html:not(.dark) .sidebar-tooltip kbd {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
#sidebar:not(.expanded):not(:hover) .sidebar-item:hover .sidebar-tooltip { opacity: 1; }

/* Spacer */
.sidebar-spacer { flex: 1; min-height: 16px; }

/* Projects section */
.sidebar-projects-section {
  border-top: 1px solid var(--shell-sidebar-border);
  padding-bottom: 4px;
}

.sidebar-projects-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 16px;
  color: var(--shell-text-muted);
}

.sidebar-project-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: 34px;
  cursor: pointer;
  color: var(--shell-text-muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background 120ms ease, color 120ms ease;
}
.sidebar-project-item:hover {
  background: var(--shell-hover);
  color: var(--shell-text);
}
.sidebar-project-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 200ms ease;
}
#sidebar.expanded .sidebar-project-name,
#sidebar:hover .sidebar-project-name { opacity: 1; }

.sidebar-project-badge {
  font-family: 'Montserrat', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--shell-active-bg);
  color: var(--shell-accent);
  padding: 1px 5px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 200ms ease;
  flex-shrink: 0;
}
#sidebar.expanded .sidebar-project-badge,
#sidebar:hover .sidebar-project-badge { opacity: 1; }

.sidebar-projects-actions {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
#sidebar.expanded .sidebar-projects-actions,
#sidebar:hover .sidebar-projects-actions { opacity: 1; pointer-events: auto; }

.sidebar-projects-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  color: var(--shell-text-muted);
  background: var(--shell-hover);
  border: 1px solid var(--shell-sidebar-border);
  border-radius: 5px;
  padding: 4px 8px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.sidebar-projects-btn:hover { background: var(--shell-active-bg); color: var(--shell-accent); }
.sidebar-projects-btn--new { color: var(--shell-accent); }

.sidebar-signin-prompt {
  padding: 10px 16px;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
#sidebar.expanded .sidebar-signin-prompt,
#sidebar:hover .sidebar-signin-prompt { opacity: 1; pointer-events: auto; }
.sidebar-signin-prompt p {
  font-size: 11px;
  color: var(--shell-text-muted);
  margin-bottom: 6px;
  line-height: 1.4;
}
.sidebar-signin-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--shell-accent);
  text-decoration: none;
}
.sidebar-signin-link:hover { text-decoration: underline; }

/* Back-to-website link */
.sidebar-back-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  height: 34px;
  color: var(--shell-text-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
  border-top: 1px solid var(--shell-sidebar-border);
  border-bottom: 1px solid var(--shell-sidebar-border);
  transition: background 120ms ease, color 120ms ease;
  margin-bottom: 2px;
}
.sidebar-back-link:hover {
  background: var(--shell-hover);
  color: var(--shell-text);
}
.sidebar-back-link .sidebar-item-icon {
  font-size: 11px;
  width: 36px;
  flex-shrink: 0;
  opacity: 0.7;
}
.sidebar-back-link .sidebar-item-label {
  font-size: 11px;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  letter-spacing: 0.01em;
}
#sidebar.expanded .sidebar-back-link .sidebar-item-label,
#sidebar:hover .sidebar-back-link .sidebar-item-label { opacity: 1; pointer-events: auto; }
.sidebar-back-link .sidebar-tooltip { font-size: 10px; }

/* Keyboard hint row */
.sidebar-kb-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--shell-sidebar-border);
  color: var(--shell-text-muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.sidebar-kb-hint .sidebar-item-icon {
  font-size: 12px;
  width: 36px;
  flex-shrink: 0;
}
.sidebar-kb-hint .sidebar-item-label {
  font-size: 11px;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
#sidebar.expanded .sidebar-kb-hint .sidebar-item-label,
#sidebar:hover .sidebar-kb-hint .sidebar-item-label { opacity: 1; pointer-events: auto; }
.sidebar-kb-hint .sidebar-tooltip { font-size: 10px; }


/* ════════════════════════════════════════════════════════════════════════ */
/*  CONTENT PANEL                                                          */
/* ════════════════════════════════════════════════════════════════════════ */

#content-panel {
  flex: 1;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: var(--shell-bg);
}

/* Progress bar */
#progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
}
#progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--shell-accent), #60a5fa);
  transition: width 200ms ease, opacity 300ms ease;
  opacity: 0;
  border-radius: 0 2px 2px 0;
}

/* Content views */
.content-view {
  flex: 1;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 280ms cubic-bezier(0.16,1,0.3,1), transform 280ms cubic-bezier(0.16,1,0.3,1);
}
.content-view.active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.content-view.fade-out {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  transition-duration: 180ms !important;
  transition-timing-function: ease-in !important;
}

/* Iframe */
#calc-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: var(--shell-bg);
}

#calc-view {
  overflow-y: auto;
}


/* ════════════════════════════════════════════════════════════════════════ */
/*  HOME VIEW                                                              */
/* ════════════════════════════════════════════════════════════════════════ */

#home-view {
  overflow: visible;
}

/* Animated grid background */
.home-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,235,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.04) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 0;
  pointer-events: none;
}
.home-grid-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, var(--shell-bg) 92%);
}
html:not(.dark) .home-grid-bg {
  background-image: none;
}

.home-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 48px 32px 64px;
}

/* Header */
.home-header { margin-bottom: 48px; }

.home-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.home-eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--shell-accent);
  flex-shrink: 0;
}
.home-eyebrow-text {
  font-family: 'Montserrat', monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--shell-accent);
}

.home-h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.home-h1-accent { color: var(--shell-accent); }

.home-subtitle {
  font-size: 16px;
  font-weight: 500;
  color: var(--shell-text-muted);
  max-width: 520px;
  line-height: 1.6;
}

/* Calculator grid */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin-bottom: 64px;
}

/* Card theme categories setup (Uniform OZR Blue) */
.calc-card {
  --card-theme-color: #2563eb;
  --card-theme-rgb: 37, 99, 235;
}

/* Sidebar category active/hover accent matching */
/* Sidebar category active/hover accent matching (Uniform OZR Blue) */
.sidebar-collapsible-category {
  --cat-theme-color: #2563eb;
}

.sidebar-collapsible-category:hover .sidebar-category-trigger {
  color: var(--cat-theme-color) !important;
}
.sidebar-collapsible-category.open .sidebar-category-trigger {
  color: var(--cat-theme-color) !important;
}

.sidebar-collapsible-category .sidebar-item:hover {
  color: var(--cat-theme-color) !important;
}
.sidebar-collapsible-category .sidebar-item.active {
  color: var(--cat-theme-color) !important;
  border-left-color: var(--cat-theme-color) !important;
  background: rgba(15, 23, 42, 0.03);
}
html.dark .sidebar-collapsible-category .sidebar-item.active {
  background: rgba(255, 255, 255, 0.02);
}

/* Light mode theme color overrides */
html:not(.dark) .sidebar-collapsible-category {
  --cat-theme-color: #2563eb;
}

/* Calc card - Premium OZR-brand frosted plate with active color accents */
.calc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: radial-gradient(circle at 100% 0%, rgba(var(--card-theme-rgb), 0.07) 0%, transparent 60%), rgba(13, 13, 16, 0.65); /* Rich obsidian slate with category glow */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05); /* Precise hair-thin border */
  border-radius: 12px;
  padding: 24px 24px 24px 32px; /* Inset left padding for the visual indicator line */
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--shell-text);
  overflow: hidden;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5);
  transition: border-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1),
              background-color 250ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
  animation: cardFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html:not(.dark) .calc-card {
  background: radial-gradient(circle at 100% 0%, rgba(var(--card-theme-rgb), 0.03) 0%, transparent 65%), rgba(255, 255, 255, 0.88); /* Polished white panel with category glow */
  border-color: rgba(15, 23, 42, 0.06);
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04);
}

/* Elegant left border vertical accent line */
.calc-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--card-theme-color);
  opacity: 0.65;
  transition: top 250ms cubic-bezier(0.16, 1, 0.3, 1),
              bottom 250ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 250ms cubic-bezier(0.16, 1, 0.3, 1),
              width 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover State */
.calc-card:hover {
  transform: translateY(-2px); /* Premium, micro-lift */
  border-color: rgba(var(--card-theme-rgb), 0.35); /* Elegant brand category blue highlight */
  background: radial-gradient(circle at 100% 0%, rgba(var(--card-theme-rgb), 0.12) 0%, transparent 60%), rgba(20, 20, 25, 0.85); /* Slightly darker/richer obsidian tint with stronger glow */
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7),
              0 0 20px -5px rgba(var(--card-theme-rgb), 0.15);
}

.calc-card:hover::before {
  top: 16px;
  bottom: 16px;
  width: 4px;
  opacity: 1;
}

html:not(.dark) .calc-card:hover {
  border-color: rgba(var(--card-theme-rgb), 0.45);
  background: radial-gradient(circle at 100% 0%, rgba(var(--card-theme-rgb), 0.06) 0%, transparent 65%), #ffffff; /* Pop out card in light mode */
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08),
              0 0 20px -5px rgba(var(--card-theme-rgb), 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* Clean icon frame */
.card-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: rgba(var(--card-theme-rgb), 0.08);
  border: 1px solid rgba(var(--card-theme-rgb), 0.18);
  color: rgba(var(--card-theme-rgb), 0.85);
  position: relative;
  transition: border-color 200ms cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 200ms cubic-bezier(0.16, 1, 0.3, 1), 
              color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

html:not(.dark) .card-icon-wrap {
  background: rgba(var(--card-theme-rgb), 0.05);
  border-color: rgba(var(--card-theme-rgb), 0.14);
  color: rgba(var(--card-theme-rgb), 0.9);
}

.calc-card:hover .card-icon-wrap {
  border-color: rgba(var(--card-theme-rgb), 0.3);
  background: rgba(var(--card-theme-rgb), 0.15);
  color: var(--card-theme-color);
}

html:not(.dark) .calc-card:hover .card-icon-wrap {
  border-color: rgba(var(--card-theme-rgb), 0.3);
  background: rgba(var(--card-theme-rgb), 0.08);
  color: var(--card-theme-color);
}

/* Premium pill badging */
.card-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 2px 8px;
  border-radius: 9999px;
  background: rgba(var(--card-theme-rgb), 0.06);
  color: rgba(var(--card-theme-rgb), 0.85);
  border: 1px solid rgba(var(--card-theme-rgb), 0.18);
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}

html:not(.dark) .card-badge {
  background: rgba(var(--card-theme-rgb), 0.05);
  border-color: rgba(var(--card-theme-rgb), 0.14);
  color: rgba(var(--card-theme-rgb), 0.9);
}

.calc-card:hover .card-badge {
  color: #ffffff;
  background: var(--card-theme-color);
  border-color: var(--card-theme-color);
}

html:not(.dark) .calc-card:hover .card-badge {
  color: #ffffff;
  background: var(--card-theme-color);
  border-color: var(--card-theme-color);
}

/* Premium Technical Typography */
.card-title {
  font-family: 'Ek Mukta', 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: #f8fafc;
  transition: color 200ms ease;
}

html:not(.dark) .card-title {
  color: #0f172a;
}

.calc-card:hover .card-title {
  color: var(--card-theme-color);
}

.card-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.55;
  margin-bottom: 20px;
  flex: 1;
  transition: color 250ms ease;
}

html:not(.dark) .card-desc {
  color: rgba(15, 23, 42, 0.6);
}

.calc-card:hover .card-desc {
  color: rgba(255, 255, 255, 0.85);
}

html:not(.dark) .calc-card:hover .card-desc {
  color: rgba(15, 23, 42, 0.85);
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.card-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.01em;
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}

html:not(.dark) .card-tag {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.05);
  color: rgba(15, 23, 42, 0.55);
}

.calc-card:hover .card-tag {
  border-color: rgba(var(--card-theme-rgb), 0.25);
  background: rgba(var(--card-theme-rgb), 0.06);
  color: rgba(255, 255, 255, 0.8);
}

html:not(.dark) .calc-card:hover .card-tag {
  border-color: rgba(var(--card-theme-rgb), 0.3);
  background: rgba(var(--card-theme-rgb), 0.04);
  color: var(--card-theme-color);
}

.card-cta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--card-theme-color);
  opacity: 0.8;
  transition: color 200ms ease, transform 200ms ease, opacity 200ms ease;
}

html:not(.dark) .card-cta {
  color: var(--card-theme-color);
}

.card-cta i { transition: transform 200ms ease; }

.calc-card:hover .card-cta {
  color: var(--card-theme-color);
  opacity: 1;
}

html:not(.dark) .calc-card:hover .card-cta {
  color: var(--card-theme-color);
}

.calc-card:hover .card-cta i { transform: translateX(3px); }

/* Card stagger animation */
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.calc-card:nth-child(1)  { animation-delay: 0ms; }
.calc-card:nth-child(2)  { animation-delay: 40ms; }
.calc-card:nth-child(3)  { animation-delay: 80ms; }
.calc-card:nth-child(4)  { animation-delay: 120ms; }
.calc-card:nth-child(5)  { animation-delay: 160ms; }
.calc-card:nth-child(6)  { animation-delay: 200ms; }
.calc-card:nth-child(7)  { animation-delay: 240ms; }
.calc-card:nth-child(8)  { animation-delay: 280ms; }
.calc-card:nth-child(9)  { animation-delay: 320ms; }
.calc-card:nth-child(10) { animation-delay: 360ms; }

/* Header reveal animation */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal-up { animation: revealUp 0.7s cubic-bezier(0.16,1,0.3,1) both; }

/* Coming Soon */
.coming-soon-section {
  border-top: 1px solid var(--shell-sidebar-border);
  padding-top: 48px;
}
.coming-soon-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.coming-soon-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--shell-accent);
  flex-shrink: 0;
}
.coming-soon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.coming-soon-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: rgba(255,255,255,0.01);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 12px;
  opacity: 0.55;
}
html:not(.dark) .coming-soon-card { border-color: rgba(0,0,0,0.1); }
.coming-soon-icon {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--shell-text-muted);
  flex-shrink: 0;
  font-size: 14px;
}
html:not(.dark) .coming-soon-icon { background: rgba(0,0,0,0.04); }
.coming-soon-card h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--shell-text);
}
.coming-soon-card p {
  font-size: 11px;
  color: var(--shell-text-muted);
  line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════════════════ */
/*  PROFILE OVERLAY                                                        */
/* ════════════════════════════════════════════════════════════════════════ */

.overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
html:not(.dark) .overlay-backdrop {
  background: rgba(15, 23, 42, 0.35);
}
.overlay-backdrop:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
}

.overlay-panel {
  position: relative;
  width: 90vw;
  max-width: 460px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--shell-panel);
  border: 1px solid var(--shell-panel-border);
  border-radius: 20px;
  padding: 28px;
  transform: scale(0.95) translateY(8px);
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1);
}
.overlay-backdrop:not([hidden]) .overlay-panel {
  transform: scale(1) translateY(0);
}

.overlay-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--shell-hover);
  color: var(--shell-text-muted);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms ease, color 150ms ease;
}
.overlay-close-btn:hover { background: rgba(255,255,255,0.1); color: var(--shell-text); }
html:not(.dark) .overlay-close-btn:hover { background: rgba(0,0,0,0.08); }

.overlay-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.profile-avatar-large {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--shell-active-bg);
  border: 2px solid var(--shell-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--shell-accent);
  flex-shrink: 0;
}

.profile-header-info { flex: 1; min-width: 0; }
.profile-name {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-email {
  font-size: 12px;
  color: var(--shell-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-section {
  border-top: 1px solid var(--shell-sidebar-border);
  padding: 16px 0;
}

.profile-section-title {
  font-size: 10px;
  font-family: 'Montserrat', monospace;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--shell-text-muted);
  margin-bottom: 12px;
}

.profile-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.profile-stat-label { color: var(--shell-text-muted); }
.profile-stat-value { font-weight: 600; }
.profile-stat-value--active { color: #22c55e; }
html:not(.dark) .profile-stat-value--active { color: #047857; }

.profile-setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--shell-text);
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--shell-hover);
  border: 1px solid var(--shell-sidebar-border);
  border-radius: 11px;
  cursor: pointer;
  padding: 0;
  transition: background 200ms ease;
}
.toggle-switch.on { background: var(--shell-accent); border-color: var(--shell-accent); }
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--shell-thumb);
  transition: transform 200ms ease;
}
.toggle-switch.on .toggle-thumb {
  background: #fff;
  transform: translateX(18px);
}

.profile-signout-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--shell-danger);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--shell-danger-bg);
  border: 1px solid var(--shell-danger-border);
  transition: background 150ms ease;
}
.profile-signout-btn:hover { background: var(--shell-danger-bg-hover); }

.profile-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: var(--shell-accent);
  color: #fff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 150ms ease;
}
.profile-signin-btn:hover { opacity: 0.88; }


/* ════════════════════════════════════════════════════════════════════════ */
/*  LAPTOP SCREEN OPTIMIZATION (769px - 1366px)                             */
/* ════════════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) and (max-width: 1366px) {
  :root {
    --sidebar-expanded-w: 222px;
  }
  /* Compacting sidebar elements */
  .sidebar-item,
  .sidebar-category-trigger {
    height: 32px;
    font-size: 12px;
    gap: 8px;
    padding: 0 10px;
  }
  .sidebar-category-content .sidebar-item {
    padding-left: 18px;
  }
  .sidebar-item-icon {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .sidebar-section-label {
    padding: 6px 12px 2px;
    font-size: 8px;
  }
  .sidebar-category-label {
    padding: 8px 12px 2px;
    font-size: 8px;
  }
  .sidebar-back-link {
    padding: 0 10px;
    height: 30px;
    font-size: 11px;
    gap: 8px;
  }
  .sidebar-back-link .sidebar-item-icon {
    width: 32px;
  }
  .sidebar-project-item {
    padding: 0 10px;
    height: 28px;
    font-size: 11px;
    gap: 8px;
  }
  .sidebar-projects-actions {
    padding: 4px 10px;
  }
  .sidebar-projects-btn {
    font-size: 10px;
    padding: 3px 6px;
  }
  .sidebar-kb-hint {
    padding: 6px 10px;
    font-size: 10px;
  }
  .sidebar-kb-hint .sidebar-item-icon {
    width: 32px;
  }
  /* Compact home inner padding for laptop screens */
  .home-inner {
    padding: 32px 24px 48px;
  }
  .home-header {
    margin-bottom: 32px;
  }
  .calc-grid {
    gap: 14px;
  }
  .calc-card {
    padding: 20px;
    border-radius: 12px;
  }
  .card-header {
    margin-bottom: 16px;
  }
  .card-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 18px;
  }
  .card-title {
    font-size: 15px;
    margin-bottom: 8px;
  }
  .card-desc {
    font-size: 12px;
    line-height: 1.45;
    margin-bottom: 14px;
  }
  .card-tags {
    margin-bottom: 16px;
  }
}


/* ════════════════════════════════════════════════════════════════════════ */
/*  MOBILE  (< 768px)                                                      */
/* ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #sidebar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--sidebar-expanded-w);
    transform: translateX(-100%);
    z-index: 200;
    transition: transform var(--sidebar-transition);
    box-shadow: 4px 0 24px rgba(0,0,0,0.4);
  }
  #sidebar.expanded {
    transform: translateX(0);
    width: var(--sidebar-expanded-w);
  }
  #sidebar.expanded .sidebar-item-label,
  #sidebar.expanded .sidebar-section-label,
  #sidebar.expanded .sidebar-category-label,
  #sidebar.expanded .sidebar-header,
  #sidebar.expanded .sidebar-projects-section,
  #sidebar.expanded .sidebar-projects-actions,
  #sidebar.expanded .sidebar-signin-prompt,
  #sidebar.expanded .sidebar-kb-hint .sidebar-item-label,
  #sidebar.expanded .sidebar-logo { opacity: 1; pointer-events: auto; }

  /* Mobile drawer backdrop */
  #mobile-sidebar-backdrop {
    position: absolute;
    inset: 0;
    z-index: 150;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    display: none;
  }
  html:not(.dark) #mobile-sidebar-backdrop {
    background: rgba(15, 23, 42, 0.35);
  }
  #app-body.sidebar-open #mobile-sidebar-backdrop { display: block; }

  /* Pin is disabled on mobile */
  .pin-btn { display: none !important; }

  /* Topbar hamburger remains full width tile */
  .topbar-hamburger { width: var(--sidebar-collapsed-w); }

  /* Calc grid single column */
  .calc-grid { grid-template-columns: 1fr; }

  .sidebar-back-link { display: none; }

  .home-inner { padding: 32px 16px 48px; }
}


/* ════════════════════════════════════════════════════════════════════════ */
/*  SIDEBAR PROJECTS TREE VIEW                                              */
/* ════════════════════════════════════════════════════════════════════════ */

#sidebar-projects-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px;
}

.sidebar-project-folder {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sidebar-project-folder-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--shell-text-muted);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
  overflow: hidden;
}
.sidebar-project-folder-trigger:hover {
  background: var(--shell-hover);
  color: var(--shell-text);
}

.sidebar-project-folder-trigger .folder-chevron {
  font-size: 8px;
  transition: transform 200ms ease;
  flex-shrink: 0;
}
.sidebar-project-folder.open .sidebar-project-folder-trigger .folder-chevron {
  transform: rotate(90deg);
}

.sidebar-project-folder-trigger .folder-icon {
  font-size: 10px;
  color: var(--shell-accent);
  opacity: 0.8;
  flex-shrink: 0;
}

.sidebar-project-folder-trigger .folder-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 200ms ease;
}
#sidebar.expanded .sidebar-project-folder-trigger .folder-label,
#sidebar:hover .sidebar-project-folder-trigger .folder-label {
  opacity: 1;
}

.sidebar-project-folder-trigger .folder-count {
  font-size: 9px;
  background: var(--shell-hover);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: monospace;
  opacity: 0;
  transition: opacity 200ms ease;
  flex-shrink: 0;
}
#sidebar.expanded .sidebar-project-folder-trigger .folder-count,
#sidebar:hover .sidebar-project-folder-trigger .folder-count {
  opacity: 0.8;
}

.sidebar-project-folder-content {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  border-left: 1px dashed var(--shell-bar-border);
  margin-left: 11px;
  margin-top: 2px;
  margin-bottom: 2px;
}
.sidebar-project-folder.open .sidebar-project-folder-content {
  display: flex;
}

.sidebar-project-item {
  height: 26px !important;
  font-size: 10.5px !important;
  padding: 0 8px !important;
  border-radius: 4px !important;
}

/* Project rows carry a smaller icon box than the 32px nav rows — a 32px
   box overflows the 26px row height. Sized here (not inline on the row)
   so the row stays class-driven. */
.sidebar-project-item .sidebar-item-icon {
  width: 22px;
  height: 22px;
  font-size: 10px;
}

/* Calculator-type chip on a project row (currently only "Wind"). Same
   shape and palette as the BETA chip so every chip in the rail reads as
   one family. The word and the row icon carry the meaning — colour is
   decoration, never the only signal. */
.sidebar-project-kind {
  margin-left: auto;
  flex-shrink: 0;
  font-family: 'Montserrat', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 6px;
  border-radius: 3px;
  color: #93c5fd;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.34);
  opacity: 0;
  transition: opacity 200ms ease;
}
html:not(.dark) .sidebar-project-kind {
  color: #1d4ed8;
  background: rgba(37, 99, 235, 0.09);
  border-color: rgba(37, 99, 235, 0.22);
}
#sidebar.expanded .sidebar-project-kind,
#sidebar:hover .sidebar-project-kind { opacity: 1; }

/* Keyboard entry into the section. Every label here is gated on
   expanded-or-hover, so tabbing in without this leaves the focused row
   nameless; focusing also keeps the whole block legible. */
#sidebar-projects-list:focus-within .sidebar-project-folder-trigger .folder-label,
#sidebar-projects-list:focus-within .sidebar-project-folder-trigger .folder-count,
#sidebar-projects-list:focus-within .sidebar-project-name,
#sidebar-projects-list:focus-within .sidebar-project-kind { opacity: 1; }

/* Visible focus ring, inset so the rail's overflow clip can't cut it. */
.sidebar-project-item:focus-visible {
  outline: 2px solid var(--shell-accent);
  outline-offset: -2px;
}

/* Empty and failed copy arrives as <div><p>…</p></div> written by the
   shell script. The wrapper carries an inline opacity, which cannot be
   overridden from here, so gate the paragraph instead — otherwise a whole
   sentence leaks into the 64px rail, which has no room for one. */
#sidebar-projects-list p {
  font-size: 11px;
  line-height: 1.4;
  color: var(--shell-text-muted);
  opacity: 0;
  transition: opacity 200ms ease;
}
#sidebar.expanded #sidebar-projects-list p,
#sidebar:hover #sidebar-projects-list p { opacity: 1; }

/* ── GLOBAL SELECT DROPDOWN THEMING ── */
select {
  background-color: var(--shell-bar);
  color: var(--shell-text);
  border: 1px solid var(--shell-bar-border);
  padding: 8px 12px;
  border-radius: 6px;
  outline: none;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

select:focus {
  border-color: var(--shell-accent);
}

select option {
  background-color: #111111;
  color: #ffffff;
}

html:not(.dark) select option {
  background-color: #ffffff;
  color: #0f172a;
}


/* ── EMAIL UNVERIFIED WARNING BANNER ── */
/* ── Email Verify Toast Popup ─────────────────────────── */
.email-verify-toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 320px;
  background: rgba(14, 16, 22, 0.92);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(37, 99, 235, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  z-index: 9999;
  overflow: hidden;
  /* Start hidden — JS adds .evt-visible to slide it in */
  opacity: 0;
  transform: translateX(calc(100% + 40px));
  pointer-events: none;
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.email-verify-toast.evt-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.email-verify-toast.evt-hiding {
  opacity: 0;
  transform: translateX(calc(100% + 40px));
  pointer-events: none;
}

/* Header row */
.evt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 0;
}

.evt-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  font-size: 15px;
  flex-shrink: 0;
}

.evt-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  line-height: 1;
  transition: color 180ms ease, background 180ms ease;
}
.evt-close:hover {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.07);
}

/* Body */
.evt-body {
  padding: 10px 16px 4px;
}

.evt-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.evt-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  line-height: 1.5;
}

/* Footer */
.evt-footer {
  padding: 12px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.evt-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Montserrat', monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  padding: 8px 16px;
  border-radius: 6px;
  align-self: flex-start;
  transition: all 200ms ease;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3);
}
.evt-cta:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.45);
  transform: translateY(-1px);
}
.evt-cta i {
  font-size: 9px;
  transition: transform 180ms ease;
}
.evt-cta:hover i {
  transform: translateX(3px);
}

/* Auto-dismiss progress bar */
.evt-progress-bar {
  width: 100%;
  height: 2px;
  background: rgba(37, 99, 235, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
.evt-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 2px;
  transition: width 100ms linear;
}

/* Disabled / Coming Soon cards (production-only) */
.calc-card--disabled { pointer-events: none; user-select: none; }
.calc-card--disabled .card-badge { background: rgba(120,120,120,0.6); }