/* VerdCore — Styles */

<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ── PRIMARY BRAND (Forest Green) ── */
  --green:#1a6b3a;        /* primary actions, active states */
  --green-mid:#2d8a52;    /* hover, gradients */
  --green-400:#52b36b;    /* lighter accent, badges */
  --green-light:#e8f5ee;  /* tinted panel backgrounds */
  --green-dark:#0f4023;   /* high-contrast text on light */

  /* ── SECONDARY ACCENT (Amber) ── */
  --amber:#d97706;        /* warnings, cost figures */
  --amber-light:#fef3c7;  /* amber tinted backgrounds */

  /* ── SURFACES & NEUTRALS ── */
  --charcoal:#1a1f1c;
  --ink:#2c3530;
  --grey:#6b7a72;
  --border:#d4e2d9;
  --mist:#f4f7f5;
  --white:#ffffff;

  /* ── SCOPE SEMANTIC COLOURS (GHG Protocol) ── */
  --scope1:#dc2626;       /* Scope 1 Direct Combustion */
  --scope1-bg:#fef2f2;
  --scope2:#ea580c;       /* Scope 2 Purchased Energy */
  --scope2-bg:#fff7ed;
  --scope3:#1d4ed8;       /* Scope 3 Value Chain */
  --scope3-bg:#eff6ff;
  --s3mat:#7c3aed;        /* Scope 3a Embodied Materials */
  --s3trans:#0369a1;      /* Scope 3b Transport */
  --s3waste:#64748b;      /* Scope 3c Waste Disposal */

  /* ── STATUS ── */
  --red:#dc2626;
  --success:#16a34a;

  /* ── DESIGN SYSTEM v2 TOKENS ── */
  --green-50:  #f0faf4;
  --green-100: #d6f5e3;
  --green-500: #16a34a;
  --green-600: #15803d;
  --green-700: #166534;
  --gray-0:   #ffffff;
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-700: #374151;
  --gray-900: #111827;
  --color-bg:           var(--gray-50);
  --color-surface:      var(--gray-0);
  --color-border:       var(--gray-200);
  --color-border-focus: var(--green-500);
  --color-text-primary: var(--gray-900);
  --color-text-muted:   var(--gray-500);
  --color-text-hint:    var(--gray-400);
  --color-accent:       var(--green-500);
  --color-accent-hover: var(--green-600);
  --color-accent-light: var(--green-50);
  --font-sans: 'Inter', 'DM Sans', system-ui, sans-serif;
  --text-xs:   0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg:   1.125rem; --text-xl: 1.25rem;  --text-2xl: 1.5rem;
  --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --transition-fast: 120ms ease; --transition-base: 200ms ease;
}
html,body{height:100%;font-family:'DM Sans',sans-serif;background:var(--mist);color:var(--ink)}
.loading-screen{position:fixed;inset:0;background:var(--charcoal);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999}
.loading-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.6rem;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:20px}
.loading-dot{width:10px;height:10px;background:var(--green-mid);border-radius:50%;animation:pulse 1.5s infinite}
.loading-spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--green-mid);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.auth-wrap{min-height:100vh;display:none;align-items:stretch;background:var(--charcoal)}
.auth-wrap.visible{display:flex}

/* ── AUTH HERO (left panel) ── */
.auth-hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:48px 56px;background:linear-gradient(160deg,var(--green-dark) 0%,#1a2420 100%);border-right:1px solid rgba(255,255,255,.06);min-width:0}
.auth-hero-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.2rem;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:32px}
.auth-hero-title{font-family:'Syne',sans-serif;font-weight:800;font-size:2rem;color:#fff;line-height:1.2;letter-spacing:-.03em;margin-bottom:14px}
.auth-hero-sub{font-size:.92rem;color:rgba(255,255,255,.58);line-height:1.75;margin-bottom:36px;max-width:400px}
.auth-feature-list{list-style:none;margin-bottom:40px}
.auth-feature-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:11px;font-size:.87rem;color:rgba(255,255,255,.72);line-height:1.45}
.auth-feature-item svg{flex-shrink:0;margin-top:1px;stroke:var(--green-mid);stroke-width:2.5}
.auth-trust{display:flex;gap:7px;flex-wrap:wrap}
.auth-trust-badge{font-size:.67rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.35);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);padding:4px 10px;border-radius:100px;text-transform:uppercase}

/* ── AUTH FORM SIDE (right panel) ── */
.auth-form-side{flex:0 0 460px;display:flex;align-items:center;justify-content:center;padding:40px 36px}
.auth-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:40px 36px;width:100%;max-width:420px}
.auth-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:1.3rem;color:#fff;display:flex;align-items:center;gap:9px;margin-bottom:28px}
.auth-logo-dot{width:9px;height:9px;background:var(--green-mid);border-radius:50%;animation:pulse 2s infinite}

/* ── AUTH HERO ACTIONS ── */
.auth-demo-callout{display:flex;align-items:flex-start;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:11px 14px;margin-bottom:20px;font-size:.8rem;color:rgba(255,255,255,.65);line-height:1.5}
.auth-demo-callout svg{flex-shrink:0;margin-top:2px;stroke:var(--green-mid)}
.auth-hero-actions{display:flex;align-items:center;gap:16px;margin-top:28px}
.auth-hero-cta{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;padding:8px 18px;border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:500;cursor:pointer;transition:.2s}
.auth-hero-cta:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.auth-hero-link{font-size:.78rem;color:rgba(255,255,255,.4);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.15)}
.auth-hero-link:hover{color:rgba(255,255,255,.65)}

/* ── PRICING MODAL ── */
.pricing-modal{max-width:860px;padding:32px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pricing-card{background:var(--mist);border:1px solid var(--border);border-radius:14px;padding:24px 20px;display:flex;flex-direction:column;position:relative}
.pricing-card-featured{background:#fff;border-color:var(--green-mid);box-shadow:0 6px 28px rgba(26,107,58,.12)}
.pricing-popular{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--green);color:#fff;font-size:.65rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 12px;border-radius:100px;white-space:nowrap}
.pricing-tier{font-family:'Syne',sans-serif;font-weight:800;font-size:.95rem;color:var(--ink);margin-bottom:6px}
.pricing-price{font-family:'Syne',sans-serif;font-weight:800;font-size:2rem;color:var(--green);padding:4px 0}
.pricing-price span{font-size:.9rem;font-weight:400;color:var(--grey)}
.pricing-desc{font-size:.78rem;color:var(--grey);margin-bottom:18px;line-height:1.45}
.pricing-features{list-style:none;margin-bottom:20px;flex:1}
.pricing-features li{font-size:.8rem;color:#374151;padding:4px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px}
.pricing-features li::before{content:'✓';color:var(--green-mid);font-weight:700;flex-shrink:0}
.pricing-features li:last-child{border-bottom:none}
@media(max-width:700px){.pricing-grid{grid-template-columns:1fr}.pricing-modal{padding:24px 16px}}

/* ── COOKIE CONSENT ── */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;z-index:9999;background:rgba(26,31,28,.97);border-top:1px solid rgba(255,255,255,.1);backdrop-filter:blur(8px);padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:.78rem;color:rgba(255,255,255,.6);line-height:1.5}
.cookie-banner a{color:rgba(255,255,255,.55);text-decoration:underline;cursor:pointer}
.cookie-accept{padding:7px 18px;background:var(--green);border:none;border-radius:7px;color:#fff;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0}

body.auth-active .bottom-nav{display:none!important}
body.auth-active .mobile-topbar{display:none!important}
@media(max-width:900px){.auth-hero{display:none}.auth-form-side{flex:1;padding:28px 20px}}
.auth-title{font-family:'Syne',sans-serif;font-size:1.6rem;font-weight:700;color:#fff;margin-bottom:8px}
.auth-sub{font-size:.9rem;color:rgba(255,255,255,.5);margin-bottom:32px}
.auth-tabs{display:flex;margin-bottom:28px;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden}
.auth-tab{flex:1;padding:10px;text-align:center;font-size:.9rem;font-weight:500;cursor:pointer;color:rgba(255,255,255,.5);transition:.2s;background:transparent;border:none;font-family:'DM Sans',sans-serif}
.auth-tab.active{background:var(--green);color:#fff}
.field{margin-bottom:16px}
.field label{display:block;font-size:.8rem;font-weight:500;color:rgba(255,255,255,.6);margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em}
.field input{width:100%;padding:12px 16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-family:'DM Sans',sans-serif;font-size:.95rem;outline:none;transition:.2s}
.field input:focus{border-color:var(--green-mid)}
.field input::placeholder{color:rgba(255,255,255,.3)}
.btn{width:100%;padding:14px;font-family:'DM Sans',sans-serif;font-weight:600;font-size:1rem;border:none;border-radius:8px;cursor:pointer;transition:.2s}
.btn-green{background:var(--green);color:#fff}
.btn-green:disabled{opacity:.6;cursor:not-allowed}
.btn-google{background:#fff;color:#3c4043;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;gap:10px;font-size:.95rem;font-weight:500;margin-bottom:16px;padding:12px 16px;width:100%;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:.15s}
.btn-google:hover{background:#f1f3f4;border-color:rgba(255,255,255,.25)}
.btn-google:disabled{opacity:.55;cursor:not-allowed}
.auth-divider{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:rgba(255,255,255,.25);font-size:.75rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.1)}
.auth-secure-bar{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:18px;font-size:.7rem;color:rgba(255,255,255,.22)}
.auth-error{background:rgba(224,82,82,.15);border:1px solid rgba(224,82,82,.3);border-radius:8px;padding:10px 14px;font-size:.85rem;color:#f87171;margin-bottom:16px;display:none}
.app{display:none;height:100vh;flex-direction:row}
.app.visible{display:flex}
.sidebar{width:240px;background:var(--charcoal);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sidebar-logo{padding:20px;font-family:'Syne',sans-serif;font-weight:800;font-size:1rem;color:#fff;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.06)}
.logo-mark{width:22px;height:22px;flex-shrink:0}
.sidebar-user{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06)}
.sidebar-user-name{font-weight:500;font-size:.9rem;color:#fff}
.sidebar-user-co{font-size:.75rem;color:rgba(255,255,255,.4);margin-top:2px}
.nav-section{padding:14px 12px 6px;font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:2px 8px;border-radius:8px;cursor:pointer;font-size:.85rem;color:rgba(255,255,255,.55);transition:.2s}
.nav-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.8)}
.nav-item.active{background:rgba(26,107,58,.25);color:#7dd4a0}
.nav-item-icon{font-size:.95rem;width:20px;text-align:center}
.sync-bar{display:flex;align-items:center;gap:6px;padding:8px 20px;font-size:.72rem;color:rgba(255,255,255,.4)}
.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--green-mid);flex-shrink:0}
.sync-dot.syncing{animation:pulse .8s infinite}
.sync-dot.error{background:var(--red)}
.sidebar-plan-cta{margin:8px 10px 0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:12px 14px}
.plan-cta-label{font-size:.68rem;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.4);text-transform:uppercase;margin-bottom:2px}
.plan-cta-sub{font-size:.78rem;color:rgba(255,255,255,.5);margin-bottom:10px}
.plan-cta-btn{width:100%;padding:9px;background:var(--green);color:#fff;border:none;border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;transition:.15s}
.plan-cta-btn:hover{background:var(--green-mid)}
.plan-cta-btn:disabled{opacity:.6;cursor:not-allowed}
.sidebar-pro-badge{margin:8px 10px 0;display:flex;align-items:center;gap:7px;background:rgba(45,138,82,.15);border:1px solid rgba(45,138,82,.25);border-radius:10px;padding:10px 14px;font-size:.78rem;color:rgba(255,255,255,.6);font-weight:500}
.sidebar-pro-badge svg{stroke:var(--green-mid);flex-shrink:0}
.sidebar-footer{margin-top:auto;padding:14px;border-top:1px solid rgba(255,255,255,.06)}
.logout-btn{width:100%;padding:10px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:rgba(255,255,255,.4);font-family:'DM Sans',sans-serif;font-size:.85rem;cursor:pointer;transition:.2s}
.logout-btn:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.7)}
.main{flex:1;overflow-y:auto;padding:28px}
.page{display:none}
.page.active{display:block}
.page-header{margin-bottom:24px}
.page-title{font-family:'Syne',sans-serif;font-size:1.5rem;font-weight:700;color:var(--ink);margin-bottom:4px}
.page-sub{font-size:.88rem;color:var(--grey)}
.card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px;margin-bottom:18px}
.card-title{font-family:'Syne',sans-serif;font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:14px}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.stat-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px}
.stat-card-label{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);margin-bottom:8px}
.stat-card-value{font-family:'Syne',sans-serif;font-size:1.7rem;font-weight:800;color:var(--ink);line-height:1}
.stat-card-unit{font-size:.76rem;color:var(--grey);margin-top:4px}
.stat-card.green .stat-card-value{color:var(--green)}
.stat-card.amber .stat-card-value{color:var(--amber)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-field{margin-bottom:14px}
.form-field label{display:block;font-size:.78rem;font-weight:600;color:var(--ink);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em}
.form-field label.required::after{content:" *";color:#ef4444;font-size:.8em;font-weight:700;letter-spacing:0}
.field-hint{font-size:.72rem;color:var(--grey);line-height:1.55;margin-top:4px}
.field-error-msg{font-size:.72rem;color:#ef4444;margin-top:4px;display:flex;align-items:center;gap:3px}
.field-error-msg::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;background:#ef4444;color:white;border-radius:50%;font-size:.6rem;font-weight:800;flex-shrink:0}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:10px 13px;border:1px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.93rem;color:var(--ink);background:#fff;outline:none;transition:.2s}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--green-mid);box-shadow:0 0 0 3px rgba(26,107,58,.1)}
.form-field input.error,.form-field select.error{border-color:#ef4444;background:#fff8f8}
.form-field input.valid,.form-field select.valid{border-color:var(--green-mid)}
.app-btn:disabled,.app-btn.loading{opacity:.55;cursor:not-allowed;pointer-events:none}
.app-btn{padding:11px 22px;font-family:'DM Sans',sans-serif;font-weight:600;font-size:.88rem;border:none;border-radius:8px;cursor:pointer;transition:.2s}
.app-btn:disabled{opacity:.6;cursor:not-allowed}
.app-btn-green{background:var(--green);color:#fff}
.app-btn-green:hover:not(:disabled){background:var(--green-mid)}
.app-btn-outline{background:transparent;color:var(--green);border:1px solid var(--green)}
.app-btn-outline:hover{background:var(--green-light)}
.sites-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.site-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;transition:.2s}
.site-card:hover{border-color:var(--green-mid);box-shadow:0 4px 16px rgba(26,107,58,.1);transform:translateY(-2px)}
.site-card-name{font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:3px}
.site-card-type{font-size:.78rem;color:var(--grey);margin-bottom:14px}
.site-card-stats{display:flex;gap:14px}
.site-stat-val{font-family:'Syne',sans-serif;font-weight:700;font-size:1.1rem;color:var(--green)}
.site-stat-label{font-size:.68rem;color:var(--grey)}
.progress-bar{height:6px;background:var(--border);border-radius:3px;margin-top:10px;overflow:hidden}
.progress-fill{height:100%;border-radius:3px;background:var(--green);transition:width .5s}
.progress-fill.over{background:var(--amber)}
.log-table{width:100%;border-collapse:collapse}
.log-table th{text-align:left;padding:9px 11px;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--grey);border-bottom:2px solid var(--border)}
.log-table td{padding:11px;font-size:.85rem;color:var(--ink);border-bottom:1px solid var(--border)}
.log-table tr:last-child td{border-bottom:none}
.log-table tr:hover td{background:var(--mist)}
.badge{display:inline-block;padding:2px 9px;border-radius:100px;font-size:.7rem;font-weight:600}
.badge-green{background:var(--green-light);color:var(--green)}
.badge-amber{background:#fef3c7;color:#92400e}
.badge-blue{background:#eff6ff;color:#1d4ed8}
.rec-card{background:var(--green-light);border:1px solid rgba(26,107,58,.2);border-radius:10px;padding:18px;margin-bottom:10px;display:flex;gap:12px;align-items:flex-start}
.rec-icon{width:34px;height:34px;background:var(--green);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;color:white}
.rec-text{font-size:.87rem;color:var(--ink);line-height:1.6}
.rec-text strong{color:var(--green);font-weight:600}
.rec-saving{margin-top:6px;font-size:.78rem;font-weight:600;color:var(--green)}
.chart-bars{display:flex;align-items:flex-end;gap:8px;height:110px;padding:0 4px}
.bar-group{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.bar{width:100%;border-radius:4px 4px 0 0;min-height:4px;transition:height .5s}
.bar-fuel{background:var(--green)}.bar-mat{background:var(--amber)}.bar-trans{background:#3b82f6}
.bar-label{font-size:.68rem;color:var(--grey);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:58px}
.chart-legend{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:5px;font-size:.75rem;color:var(--grey)}
.legend-dot{width:9px;height:9px;border-radius:50%}
.empty{text-align:center;padding:40px 20px;color:var(--grey)}
.empty-icon{font-size:2.2rem;margin-bottom:10px}
.empty-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:6px}
.empty-text{font-size:.83rem;line-height:1.6}
.toast{position:fixed;bottom:20px;right:20px;background:var(--ink);color:#fff;padding:11px 18px;border-radius:8px;font-size:.85rem;font-weight:500;opacity:0;transform:translateY(8px);transition:.3s;z-index:10000;pointer-events:none;max-width:300px}
.toast.show{opacity:1;transform:translateY(0)}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:500;padding:20px}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:14px;padding:28px;width:100%;max-width:500px;max-height:90vh;overflow-y:auto}
.modal-title{font-family:'Syne',sans-serif;font-weight:700;font-size:1.15rem;color:var(--ink);margin-bottom:18px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.tab-row{display:flex;margin-bottom:18px;border:1px solid var(--border);border-radius:8px;overflow:hidden;width:fit-content}
.tab-btn{padding:8px 18px;font-family:'DM Sans',sans-serif;font-size:.83rem;font-weight:500;cursor:pointer;border:none;background:transparent;color:var(--grey);transition:.2s}
.tab-btn.active{background:var(--green);color:#fff}
.mobile-topbar{display:none;position:fixed;top:0;left:0;right:0;z-index:300;height:54px;background:var(--charcoal);align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-topbar-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:.95rem;color:#fff;display:flex;align-items:center;gap:7px}
.mobile-topbar-logo .logo-mark{width:20px;height:20px}
.hamburger{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:4px}
.hamburger span{width:21px;height:2px;background:#fff;display:block;border-radius:2px;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .18s,background .2s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;background:var(--charcoal);border-top:1px solid rgba(255,255,255,.08);height:auto;min-height:58px;align-items:center;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom,0px)}
.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;padding:5px 0;border:none;background:none;color:rgba(255,255,255,.4);transition:color .2s;font-family:'DM Sans',sans-serif;position:relative}
.bottom-nav-item.active{color:var(--green-mid)}
.bottom-nav-item::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%) scaleX(0);width:28px;height:2.5px;background:var(--green-mid);border-radius:0 0 3px 3px;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.bottom-nav-item.active::before{transform:translateX(-50%) scaleX(1)}
.bottom-nav-icon{display:flex;align-items:center;justify-content:center}
.bottom-nav-label{font-size:.58rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:199;opacity:0;pointer-events:none;transition:opacity .25s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sidebar-overlay.open{opacity:1;pointer-events:auto}
body.sidebar-open{overflow:hidden}
@media(max-width:768px){
  .mobile-topbar{display:flex}.bottom-nav{display:flex}
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:200;width:280px;transform:translateX(-280px);transition:transform .28s cubic-bezier(.4,0,.2,1);will-change:transform;box-shadow:none}
  .sidebar.open{transform:translateX(0);box-shadow:8px 0 32px rgba(0,0,0,.35)}
  .main{padding:68px 14px calc(70px + env(safe-area-inset-bottom,0px))}
  #dash-grid{grid-template-columns:1fr!important}
  .form-row{grid-template-columns:1fr!important}
  .stats-row{grid-template-columns:1fr 1fr!important}
  .sites-grid{grid-template-columns:1fr!important}
  #bench-grid{grid-template-columns:1fr!important}
  #scope-grid{grid-template-columns:1fr!important}
  .hide-mobile{display:none!important}
  .tab-row{width:100%}.tab-btn{flex:1;padding:9px 6px;font-size:.75rem}
  .form-field input,.form-field select{padding:13px;font-size:1rem}
  .app-btn{padding:13px 18px;font-size:.92rem}
  .modal{border-radius:12px 12px 0 0;padding:22px 18px;position:fixed;bottom:0;left:0;right:0;max-width:100%;max-height:85vh}
  .modal-bg{align-items:flex-end;padding:0}
  .auth-card{padding:28px 20px}
  .toast{bottom:68px;left:14px;right:14px;text-align:center}
  .card{padding:14px}.page-title{font-size:1.25rem}
}

/* ── CHART.JS CONTAINERS ── */
.chart-container{position:relative;width:100%;height:220px}
.chart-container-sm{position:relative;width:100%;height:180px}
.chart-container-lg{position:relative;width:100%;height:260px}

/* ── UI UPGRADES ── */
.card{background:var(--white);border:1px solid var(--border);border-radius:16px!important;padding:24px;margin-bottom:20px;box-shadow:0 2px 16px rgba(0,0,0,.05)!important}
.stat-card{background:var(--white);border:1px solid var(--border);border-radius:16px!important;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,.04)!important;transition:.25s!important}
.stat-card:hover{box-shadow:0 6px 24px rgba(26,107,58,.1)!important;transform:translateY(-2px)!important}
.site-card{background:var(--white);border:1px solid var(--border);border-radius:16px!important;padding:20px;cursor:pointer;transition:.25s!important;box-shadow:0 2px 8px rgba(0,0,0,.04)!important}
.site-card:hover{border-color:var(--green-mid)!important;box-shadow:0 8px 28px rgba(26,107,58,.12)!important;transform:translateY(-3px)!important}
.rec-card{background:linear-gradient(135deg,var(--green-light),rgba(232,245,238,.6))!important;border:1px solid rgba(26,107,58,.15)!important;border-radius:14px!important;box-shadow:0 2px 10px rgba(26,107,58,.07)!important}
.app-btn-green{background:linear-gradient(135deg,#1a6b3a,#2d8a52)!important;box-shadow:0 4px 16px rgba(26,107,58,.3)!important}
.app-btn-green:hover:not(:disabled){transform:translateY(-1px)!important;box-shadow:0 6px 22px rgba(26,107,58,.4)!important}
.nav-item.active{background:linear-gradient(135deg,rgba(26,107,58,.3),rgba(45,138,82,.15))!important;border-radius:10px!important}
.sidebar{background:linear-gradient(180deg,#1a1f1c 0%,#141a11 100%)!important;border-right:1px solid rgba(255,255,255,.04)!important}
.modal{border-radius:20px!important;box-shadow:0 32px 80px rgba(0,0,0,.25)!important}
.page-title{letter-spacing:-.02em!important}
.form-field input:focus,.form-field select:focus{box-shadow:0 0 0 4px rgba(26,107,58,.08)!important}
.loading-screen{background:linear-gradient(135deg,#1a1f1c,#0c1409)!important}
.auth-card{box-shadow:0 32px 80px rgba(0,0,0,.5)!important}
.btn-green{background:linear-gradient(135deg,#1a6b3a,#2d8a52)!important;box-shadow:0 4px 20px rgba(26,107,58,.4)!important}

/* ── QUICK ACTIONS ── */
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.quick-action{display:flex;flex-direction:column;align-items:center;gap:7px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px 10px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:500;color:var(--ink);transition:.2s;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.quick-action:hover{border-color:var(--green-mid);background:#f5fbf7;transform:translateY(-2px);box-shadow:0 4px 14px rgba(26,107,58,.1)}
.quick-action-icon{width:20px;height:20px;stroke:var(--green-mid);stroke-width:1.75}
@media(max-width:768px){.quick-actions{grid-template-columns:repeat(2,1fr)}}

/* ── RECENT ACTIVITY ── */
.activity-row{display:flex;align-items:center;gap:12px;padding:10px 0}
.activity-row-border{border-bottom:1px solid var(--border)}
.activity-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.activity-main{flex:1;min-width:0}
.activity-title{font-size:.85rem;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.activity-site{font-weight:400;color:var(--grey)}
.activity-meta{font-size:.74rem;color:var(--grey);margin-top:1px}
.activity-co2{font-size:.88rem;font-weight:700;color:var(--green);white-space:nowrap;flex-shrink:0}
.activity-co2 span{font-size:.72rem;font-weight:400;color:var(--grey);margin-left:2px}

/* ── BNG CALCULATOR ── */
.bng-layout{display:grid;grid-template-columns:300px 1fr;gap:18px;align-items:start}
.bng-sidebar-panel{display:flex;flex-direction:column;gap:18px}
.bng-main-panel{display:flex;flex-direction:column;gap:18px}
.bng-section-desc{font-size:.8rem;color:var(--grey);margin:-6px 0 14px;line-height:1.5}
.bng-add-row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin-bottom:12px}
.bng-add-row .form-field{margin-bottom:0;flex:1;min-width:80px}
.bng-add-row .form-field label{font-size:.72rem}
.bng-add-btn{flex-shrink:0;padding:10px 16px;white-space:nowrap;align-self:flex-end}
.bng-table{width:100%;border-collapse:collapse;font-size:.82rem}
.bng-table th{text-align:left;font-size:.7rem;font-weight:600;color:var(--grey);padding:6px 8px;border-bottom:2px solid var(--border);text-transform:uppercase;letter-spacing:.04em}
.bng-table td{padding:7px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.bng-table tr:last-child td{border-bottom:none}
.bng-chip{display:inline-block;background:var(--mist);border:1px solid var(--border);border-radius:5px;padding:1px 7px;font-size:.7rem;color:var(--grey)}
.bng-del-btn{background:none;border:none;cursor:pointer;color:var(--grey);font-size:1rem;line-height:1;padding:2px 6px;border-radius:4px}
.bng-del-btn:hover{background:#fef2f2;color:var(--red)}
.bng-empty-rows{color:var(--grey);font-size:.8rem;padding:12px 0;text-align:center;border:1px dashed var(--border);border-radius:8px}
.bng-results-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.bng-result-card{background:var(--mist);border:1px solid var(--border);border-radius:10px;padding:12px 14px}
.bng-result-main{grid-column:1/-1;border-width:2px}
.bng-result-label{font-size:.72rem;color:var(--grey);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.bng-result-value{font-family:'Syne',sans-serif;font-weight:800;font-size:1.5rem}
.bng-result-pass{font-size:.78rem;font-weight:600;margin-top:4px}
.bng-gap-notice{background:#fef3c7;border:1px solid #fde68a;border-radius:9px;padding:12px 16px;font-size:.82rem;color:#92400e;margin-top:4px}
.bng-pass-notice{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:9px;padding:12px 16px;font-size:.82rem;color:#15803d;margin-top:4px}
.bng-results-empty{color:var(--grey);font-size:.83rem;padding:8px 0}
.bng-saved-card{border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px}
.bng-saved-name{font-weight:600;font-size:.88rem}
.bng-saved-meta{font-size:.75rem;color:var(--grey);margin:2px 0 4px}
.bng-saved-result{font-size:.8rem;font-weight:600;margin-bottom:8px}
.bng-saved-actions{display:flex;gap:8px}
@media(max-width:900px){.bng-layout{grid-template-columns:1fr}.bng-sidebar-panel{order:2}.bng-main-panel{order:1}}

/* ── BNG STEPPER ── */
.bng-stepper{display:flex;align-items:center;gap:0;background:var(--mist);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin-bottom:4px}
.bng-step-btn{display:flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.82rem;color:var(--grey);padding:0;transition:.15s}
.bng-step-btn.active{color:var(--ink);font-weight:700}
.bng-step-btn.done{color:var(--green)}
.bng-step-dot{width:24px;height:24px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:var(--grey);transition:.15s;flex-shrink:0}
.bng-step-btn.active .bng-step-dot{background:var(--green);color:white}
.bng-step-btn.done .bng-step-dot{background:var(--green-light);color:var(--green)}
.bng-step-connector{flex:1;height:2px;background:var(--border);margin:0 10px}
.bng-step-section{display:flex;flex-direction:column;gap:18px}
.bng-step-nav{display:flex;align-items:center;gap:12px;padding:14px 0 4px;flex-wrap:wrap}
.bng-step-hint{font-size:.8rem;color:var(--grey);line-height:1.5;margin:0;flex:1}
@media(max-width:600px){.bng-step-label{display:none}.bng-stepper{padding:10px 12px}}
.save-panel-hidden{display:none !important}

/* ── NAV ADVANCED TOGGLE ── */
.nav-advanced-toggle{cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none}
.nav-advanced-toggle .nav-chevron{transition:transform .2s;color:rgba(255,255,255,.4)}
.nav-advanced-toggle.collapsed .nav-chevron{transform:rotate(-90deg)}
#nav-advanced-items{overflow:hidden;transition:opacity .2s}
#nav-advanced-items.collapsed{display:none}

/* ── SCOPE DEFINITION CARDS ── */
.scope-def-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:20px}
.scope-def-card{background:var(--mist);border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;gap:12px;align-items:flex-start}
.scope-def-num{width:28px;height:28px;border-radius:8px;font-family:'Syne',sans-serif;font-weight:800;font-size:.88rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.scope-def-num.scope-1{background:#fef3c7;color:#92400e}
.scope-def-num.scope-2{background:#dbeafe;color:#1e40af}
.scope-def-num.scope-3{background:#d1fae5;color:var(--green-dark)}
.scope-def-title{font-weight:700;font-size:.82rem;color:var(--ink);margin-bottom:3px}
.scope-def-body{font-size:.75rem;color:var(--grey);line-height:1.6}
@media(max-width:768px){.scope-def-grid{grid-template-columns:1fr}}

/* ── REPORT TYPE CARDS ── */
.report-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.report-type-card{border:2px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;transition:.15s;background:white}
.report-type-card:hover{border-color:var(--green-mid);background:var(--green-light)}
.report-type-card.active{border-color:var(--green);background:var(--green-light)}
.report-type-name{font-weight:700;font-size:.88rem;color:var(--ink);margin-bottom:3px}
.report-type-desc{font-size:.74rem;color:var(--grey);line-height:1.5;margin-bottom:7px}
.report-type-badge{display:inline-block;background:var(--mist);border:1px solid var(--border);border-radius:5px;padding:1px 8px;font-size:.67rem;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:.04em}
.report-type-card.active .report-type-badge{background:rgba(45,138,82,.1);border-color:var(--green-mid);color:var(--green)}
@media(max-width:600px){.report-type-grid{grid-template-columns:1fr}}

/* ── INNOVATION PANEL ── */
.inno-panel{background:linear-gradient(135deg,#f0fdf4,#e8f5e9);border:1px solid var(--green-mid);border-radius:14px;padding:18px 22px 20px;margin-bottom:20px;position:relative;transition:opacity .3s}
.inno-close{position:absolute;top:12px;right:12px;background:rgba(45,138,82,.1);border:none;border-radius:50%;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--green-mid);transition:.15s}
.inno-close:hover{background:rgba(45,138,82,.2)}
.inno-header{font-family:'Syne',sans-serif;font-weight:700;font-size:.82rem;color:var(--green-dark);display:flex;align-items:center;gap:6px;margin-bottom:14px}
.inno-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}
.inno-item{background:white;border:1px solid rgba(45,138,82,.15);border-radius:10px;padding:12px 14px}
.inno-icon{color:var(--green);margin-bottom:7px}
.inno-item-title{font-weight:700;font-size:.8rem;color:var(--ink);margin-bottom:4px}
.inno-item-body{font-size:.74rem;color:var(--grey);line-height:1.6}
@media(max-width:900px){.inno-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.inno-grid{grid-template-columns:1fr}}

/* ── ROADMAP TIMELINE ── */
.roadmap-timeline{display:flex;flex-direction:column;gap:0}
.roadmap-item{display:grid;grid-template-columns:28px 1fr;gap:16px;padding-bottom:22px;position:relative}
.roadmap-item:last-child{padding-bottom:0}
.roadmap-item:not(:last-child)::before{content:'';position:absolute;left:13px;top:24px;bottom:0;width:2px;background:var(--border)}
.roadmap-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:white;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;margin-top:1px}
.roadmap-dot.done{border-color:var(--green);background:var(--green)}
.roadmap-dot.done::after{content:'';display:block;width:8px;height:8px;border-radius:50%;background:white}
.roadmap-dot.current{border-color:var(--green-mid);background:var(--green-light)}
.roadmap-dot.current::after{content:'';display:block;width:8px;height:8px;border-radius:50%;background:var(--green)}
.roadmap-phase{font-weight:700;font-size:.88rem;color:var(--ink);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.roadmap-text{font-size:.78rem;color:var(--grey);line-height:1.7}
.roadmap-tag{display:inline-flex;align-items:center;border-radius:100px;padding:2px 10px;font-size:.67rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.roadmap-tag.done{background:var(--green-light);color:var(--green);border:1px solid var(--green-mid)}
.roadmap-tag.in-dev{background:#fef3c7;color:#92400e;border:1px solid #fde68a}

/* ── AI METHODOLOGY FOOTER ── */
.ai-method-footer{display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:10px 14px;background:var(--mist);border:1px solid var(--border);border-radius:9px;font-size:.74rem;color:var(--grey);line-height:1.6}
.ai-method-footer svg{flex-shrink:0;margin-top:1px;color:var(--green-mid)}

/* ── NAV RESTRUCTURE ── */
.nav-section{padding:18px 16px 5px;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.22);display:flex;align-items:center;gap:8px}
.nav-section::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.07)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;margin:1px 8px;border-radius:8px;cursor:pointer;font-size:.84rem;color:rgba(255,255,255,.55);transition:.15s;position:relative}
.nav-item:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85)}
.nav-item.active{background:rgba(45,138,82,.2)!important;color:#86dba8!important;border-radius:8px!important;border-left:2px solid var(--green-mid);margin-left:6px;padding-left:10px}
.nav-coming-soon{opacity:.35!important;cursor:default!important;pointer-events:none!important}
.nav-badge{margin-left:auto;font-size:.58rem;font-weight:700;letter-spacing:.06em;background:rgba(255,255,255,.09);color:rgba(255,255,255,.4);padding:2px 7px;border-radius:4px;flex-shrink:0}
/* Lucide icon sizing — nav-icon for sidebar, bnav-icon for bottom nav */
.nav-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}
.nav-icon svg{width:16px;height:16px;stroke-width:1.75;stroke:currentColor}
.bnav-icon{display:flex;align-items:center;justify-content:center}
.bnav-icon svg{width:20px;height:20px;stroke-width:1.75;stroke:currentColor}

/* ── EMPTY STATES ── */
.empty{text-align:center;padding:52px 24px}
.empty-illustration{width:72px;height:72px;background:var(--green-light);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--green)}
.empty-title{font-family:'Syne',sans-serif;font-weight:800;font-size:1.05rem;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em}
.empty-text{font-size:.85rem;color:var(--grey);line-height:1.75;max-width:300px;margin:0 auto}
.empty-cta{margin-top:20px}
.empty-features{list-style:none;margin:18px auto 0;max-width:260px;text-align:left;display:flex;flex-direction:column;gap:9px}
.empty-feature{display:flex;align-items:flex-start;gap:9px;font-size:.83rem;color:var(--ink);line-height:1.5}
.empty-feature svg{flex-shrink:0;margin-top:1px;color:var(--green)}
.empty-progress{margin:20px auto 0;max-width:220px}
.empty-progress-track{height:6px;background:var(--border);border-radius:100px;overflow:hidden}
.empty-progress-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-mid));border-radius:100px;transition:width .5s ease}
.empty-progress-label{font-size:.75rem;color:var(--grey);margin-top:7px;text-align:center}
.empty-preview{display:flex;align-items:flex-end;justify-content:center;gap:5px;margin:20px auto 0;height:52px}
.empty-preview-bar{border-radius:4px 4px 0 0;width:18px}
.empty-preview-bar-ghost{border-radius:4px 4px 0 0;width:18px;border:1.5px dashed var(--border);position:relative}
.empty-preview-bar-ghost::after{content:'?';position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:.65rem;color:var(--grey)}

/* ── ONBOARDING STEPS ── */
.onboard-steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:18px 0 20px}
.onboard-step{background:rgba(255,255,255,.1);border-radius:10px;padding:16px 14px;text-align:center;border:1px solid rgba(255,255,255,.08);transition:.3s}
.onboard-step-done{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);opacity:.65}
.onboard-step-num{width:30px;height:30px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;color:white;margin:0 auto 10px;transition:.3s}
.onboard-step-done .onboard-step-num{background:rgba(255,255,255,.35)}
.onboard-step-title{font-family:'Syne',sans-serif;font-weight:700;font-size:.82rem;color:white;margin-bottom:5px}
.onboard-step-done .onboard-step-title::after{content:' ✓';font-size:.75rem;opacity:.7}
.onboard-step-desc{font-size:.72rem;color:rgba(255,255,255,.6);line-height:1.5;margin-bottom:12px}
.onboard-step-btn{background:white;color:var(--green);border:none;border-radius:7px;padding:7px 16px;font-size:.78rem;font-weight:700;cursor:pointer;font-family:'DM Sans',sans-serif;width:100%;transition:.15s}
.onboard-step-btn:hover{background:rgba(255,255,255,.9)}
.onboard-step-done .onboard-step-btn{background:rgba(255,255,255,.15);color:rgba(255,255,255,.6);cursor:default}
@media(max-width:768px){.onboard-steps{grid-template-columns:1fr}}

/* ── MATERIAL COMBOBOX ── */
.combobox{position:relative}
.combobox-input{width:100%;padding:10px 32px 10px 12px;border:1px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.88rem;color:var(--ink);background:var(--white);outline:none;cursor:pointer;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;box-sizing:border-box}
.combobox-input:focus{border-color:var(--green-mid);box-shadow:0 0 0 4px rgba(26,107,58,.08);cursor:text}
.combobox-chevron{position:absolute;right:9px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--grey);transition:transform .2s}
.combobox.open .combobox-chevron{transform:translateY(-50%) rotate(180deg)}
.combobox-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--white);border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.12);z-index:200;max-height:260px;overflow-y:auto;display:none}
.combobox.open .combobox-dropdown{display:block}
.combobox-group{padding:8px 12px 3px;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--grey)}
.combobox-option{padding:8px 14px;font-size:.87rem;color:var(--ink);cursor:pointer;transition:background .1s}
.combobox-option:hover,.combobox-option.focused{background:var(--green-light);color:var(--green-dark)}
.combobox-option.selected{font-weight:600;color:var(--green)}
.combobox-no-results{padding:16px 14px;font-size:.84rem;color:var(--grey);text-align:center}

/* ── CARD & TAB ICONS ── */
.card-icon{display:inline-flex;align-items:center;vertical-align:middle;margin-right:7px;flex-shrink:0}
.card-icon svg{width:15px;height:15px;stroke:var(--green-mid);stroke-width:1.75}
.tab-icon{display:inline-flex;align-items:center;vertical-align:middle;margin-right:5px}
.tab-icon svg{width:14px;height:14px;stroke-width:1.75;stroke:currentColor}

/* ── AI RECOMMENDATIONS ── */
.ai-powered-badge{display:inline-flex;align-items:center;gap:5px;font-size:.71rem;font-weight:700;color:var(--green-mid);background:var(--green-light);border:1px solid rgba(45,138,82,.25);padding:4px 10px;border-radius:100px;margin-bottom:14px;letter-spacing:.01em}
.ai-loading-card{background:var(--mist);border-radius:12px;padding:20px 18px;margin-bottom:10px;animation:ai-pulse 1.4s ease-in-out infinite}
@keyframes ai-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ── SETTINGS PAGE ── */
.settings-group-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--grey);margin:0 0 12px}
.settings-coming-soon{display:flex;align-items:flex-start;gap:14px}
.settings-coming-soon-icon{width:40px;height:40px;background:var(--green-light);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.settings-coming-soon-title{font-weight:600;color:var(--ink);margin-bottom:5px;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.settings-coming-soon-text{font-size:.84rem;color:var(--grey);line-height:1.65;margin:0}
.settings-soon-badge{background:var(--green-light)!important;color:var(--green-mid)!important;border:1px solid rgba(45,138,82,.3)!important;font-size:.58rem}

/* ── FORM POLISH ── */
.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:rgba(45,138,82,.45)}
.form-field input.error,.form-field select.error,.form-field textarea.error{border-color:var(--red)!important;background:#fff8f8!important}
.form-field input.error:focus,.form-field select.error:focus{box-shadow:0 0 0 3px rgba(220,38,38,.1)!important;border-color:var(--red)!important}
.form-field input.valid,.form-field select.valid{border-color:var(--success)}
.form-field input.valid:focus{box-shadow:0 0 0 3px rgba(22,163,74,.1)!important}
.field-error-msg{font-size:.74rem;color:var(--red);margin-top:4px;display:none}
.form-field.has-error .field-error-msg{display:block}

/* ── TABLE ICON BUTTONS ── */
.tbl-icon-btn{background:none;border:none;cursor:pointer;padding:5px 6px;border-radius:6px;color:var(--grey);display:inline-flex;align-items:center;justify-content:center;transition:.15s;line-height:1;vertical-align:middle}
.tbl-icon-btn:hover{background:var(--mist);color:var(--ink)}
.tbl-icon-btn.delete:hover{background:#fef2f2;color:var(--red)}
.tbl-icon-btn.edit:hover{background:var(--green-light);color:var(--green)}

/* ── SORTABLE TABLE HEADERS ── */
.tbl-sort{cursor:pointer;user-select:none;transition:color .15s}
.tbl-sort:hover{color:var(--ink)}
.tbl-sort::after{content:' \2195';opacity:.35;font-size:.7em;font-weight:400}
.tbl-sort.asc::after{content:' \2191';opacity:.75}
.tbl-sort.desc::after{content:' \2193';opacity:.75}

/* ── CO₂E STATUS COLORS ── */
.co2-low{color:var(--success)!important}
.co2-mid{color:var(--amber)!important}
.co2-high{color:var(--red)!important}

/* ── REC CARD ICON — SVG only, drop emoji sizing ── */
.rec-icon{width:34px;height:34px;background:var(--green);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:white;font-size:inherit}
.rec-icon svg{stroke:white}
.rec-saving-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:7px}
.rec-saving-pill{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:600;padding:3px 9px;border-radius:100px}
.rec-saving-pill.cost{background:#fef3c7;color:#92400e}
.rec-saving-pill.co2{background:var(--green-light);color:var(--green-dark)}

/* ── ACCESSIBILITY ── */
/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;overflow:visible;background:var(--green);color:#fff;padding:10px 18px;border-radius:8px;font-size:.88rem;font-weight:600;text-decoration:none;z-index:99999;box-shadow:0 4px 16px rgba(0,0,0,.3)}
/* Focus rings — visible for keyboard, hidden for mouse */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--green-mid);outline-offset:2px}
.app-btn:focus-visible,.tab-btn:focus-visible,.auth-tab:focus-visible,.btn:focus-visible,.app-btn-outline:focus-visible,.app-btn-green:focus-visible{outline:2px solid var(--green-mid);outline-offset:2px;box-shadow:0 0 0 4px rgba(45,138,82,.15)}
.nav-item:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:-2px}
.bottom-nav-item:focus-visible{outline:2px solid var(--green-mid);outline-offset:-2px}
.tbl-icon-btn:focus-visible{outline:2px solid var(--green-mid);outline-offset:2px}
.site-drilldown-btn:hover{color:var(--green)!important;background:var(--green-light);border-radius:4px}
/* Touch targets — 44×44px minimum on mobile */
@media(max-width:768px){
  .tbl-icon-btn{min-width:44px;min-height:44px;padding:10px;justify-content:center}
  .app-btn{min-height:44px}
  .nav-item{min-height:44px;padding:10px 12px}
  .logout-btn{min-height:44px}
}

/* ── COLLAPSIBLE LOG SECTIONS ── */
.log-section{border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:10px}
.log-section-header{width:100%;background:var(--mist);border:none;padding:13px 16px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:'DM Sans',sans-serif;transition:background .15s}
.log-section-header:hover{background:#eff2ef}
.log-section-header.open{background:#e8f5ee}
.log-section-chevron{transition:transform .2s;color:var(--grey);flex-shrink:0}
.log-section-header.open .log-section-chevron{transform:rotate(180deg)}
.log-section-body{display:none;padding:16px;border-top:1px solid var(--border)}
.log-section-body.open{display:block}
.accordion-filled-badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:99px;background:var(--color-accent-light);color:var(--green-700);margin-left:6px;vertical-align:middle}
.chart-empty-state{display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:32px 24px;color:var(--grey);font-size:.84rem;line-height:1.6}

/* ── ONBOARDING PROGRESS BAR ── */
.onboard-prog{display:flex;align-items:flex-start;gap:0}
.onboard-prog-item{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0}
.onboard-prog-connector{flex:0 0 32px;height:2px;background:var(--border);margin-top:14px;transition:background .3s}
.onboard-prog-connector.done{background:var(--green)}
.onboard-prog-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--border);background:white;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--grey);flex-shrink:0;transition:.3s}
.onboard-prog-item.done .onboard-prog-dot{border-color:var(--green);background:var(--green);color:white}
.onboard-prog-title{font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:3px}
.onboard-prog-item.done .onboard-prog-title{color:var(--grey)}
.onboard-prog-link{background:none;border:none;color:var(--green-mid);font-family:'DM Sans',sans-serif;font-size:.75rem;font-weight:600;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}
.onboard-prog-link:hover{color:var(--green)}
.onboard-prog-item.done .onboard-prog-link{display:none}
@media(max-width:600px){.onboard-prog{flex-direction:column;gap:10px}.onboard-prog-connector{width:2px;height:20px;margin:0 13px}}

/* ══════════════════════════════════════════
   APP SHELL v2 — NEW SIDEBAR + TOPBAR
═══════════════════════════════════════════ */

/* Updated font */
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }

/* App shell: remove fixed height so body can scroll */
.app.app-shell { height: auto; }

/* Main content: offset for fixed sidebar, let body scroll */
.main.main-content {
  margin-left: 240px;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: visible;
}

/* Page content wrapper — used on updated pages */
.page-content {
  padding: var(--space-8);
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* Legacy pages (no .page-content wrapper) get default padding */
.main.main-content > .page.active {
  padding: 28px;
}
/* Pages WITH .page-content child: remove outer padding (page-content handles it) */
.main.main-content > .page.active:has(> .page-content) {
  padding: 0;
}

/* ── SIDEBAR v2 ── */
.sidebar {
  position: fixed !important;
  top: 0; left: 0; height: 100vh;
  width: 240px;
  overflow-y: auto; z-index: 200;
  background: var(--gray-900, #111827) !important;
  background: linear-gradient(180deg, #111827 0%, #0d1117 100%) !important;
  border-right: 1px solid rgba(255,255,255,.04) !important;
  display: flex; flex-direction: column;
}
.sidebar-logo-v2 {
  padding: var(--space-5);
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: var(--space-3);
}
.sidebar-logo-mark-v2 {
  width: 28px; height: 28px; background: var(--green-500);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sidebar-logo-text-v2  { font-size: var(--text-sm); font-weight: 600; color: #fff; line-height: 1.2; }
.sidebar-logo-sub-v2   { font-size: var(--text-xs); color: rgba(255,255,255,.4); }
.sidebar-nav-v2 {
  flex: 1; padding: var(--space-4) var(--space-3);
  display: flex; flex-direction: column;
}
.nav-section-label {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
  padding: var(--space-3) var(--space-2) var(--space-1);
  margin-top: var(--space-2);
}
.nav-section-label:first-child { margin-top: 0; }

/* Nav item v2 — works for both button and div */
.nav-item {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  padding: var(--space-2) var(--space-3) !important;
  border-radius: var(--radius-md) !important;
  font-size: var(--text-sm) !important;
  color: rgba(255,255,255,.6) !important;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none; border: none; background: none;
  width: 100%; text-align: left;
  font-family: var(--font-sans);
  margin: 1px 0 !important;
  border-left: none !important;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: .7; }
.nav-item i { width: 16px; height: 16px; flex-shrink: 0; }
.nav-item:hover { background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.9) !important; }
.nav-item.active {
  background: rgba(22,163,74,.2) !important;
  color: #fff !important;
  font-weight: 500 !important;
  border-radius: var(--radius-md) !important;
  border-left: none !important;
  margin-left: 0 !important;
  padding-left: var(--space-3) !important;
}
.nav-item.active svg, .nav-item.active i { opacity: 1; }

/* Sidebar plan badge */
.sidebar-plan-v2 {
  padding: var(--space-4);
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: auto;
}
.plan-badge-v2 {
  background: rgba(22,163,74,.15); border: 1px solid rgba(22,163,74,.3);
  border-radius: var(--radius-md); padding: var(--space-3);
}
.plan-badge-v2-name  { font-weight: 600; color: var(--green-100); margin-bottom: 3px; font-size: var(--text-xs); }
.plan-badge-v2-desc  { color: rgba(255,255,255,.5); margin-bottom: var(--space-2); font-size: 11px; line-height: 1.4; }
.plan-upgrade-v2-btn {
  display: block; width: 100%; padding: 4px 8px;
  background: var(--green-500); color: #fff; border: none;
  border-radius: var(--radius-sm); font-size: 11px; font-weight: 500;
  font-family: var(--font-sans); cursor: pointer; text-align: center;
  transition: background var(--transition-fast);
}
.plan-upgrade-v2-btn:hover { background: var(--green-600); }

/* Hide old sidebar elements that conflict */
.sidebar .sidebar-user, .sidebar .sync-bar,
.sidebar .sidebar-footer, .sidebar .sidebar-plan-cta,
.sidebar .sidebar-pro-badge { display: none !important; }
.sidebar .sidebar-logo { display: none !important; }

/* ── TOPBAR ── */
.topbar {
  height: 56px; background: var(--color-surface, #fff);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  display: flex; align-items: center; justify-content: center;
  padding: 0; position: sticky; top: 0; z-index: 40;
  flex-shrink: 0;
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1100px; width: 100%; padding: 0 var(--space-8); gap: 1rem;
}
.topbar-title {
  font-size: var(--text-base); font-weight: 600;
  color: var(--color-text-primary, #111827);
}
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); }
.topbar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--green-500); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 600; cursor: pointer;
  flex-shrink: 0; font-family: var(--font-sans); text-transform: uppercase;
}

/* ── APP-SHELL BUTTON SYSTEM ── */
/* Scoped to app-shell to avoid breaking auth form .btn */
.app-shell .btn {
  display: inline-flex !important;
  align-items: center; gap: 6px;
  width: auto !important;
  padding: 7px 14px !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  font-family: var(--font-sans) !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid transparent;
  cursor: pointer; transition: all var(--transition-fast);
  white-space: nowrap; line-height: 1.5;
  text-decoration: none; box-shadow: none !important;
}
.app-shell .btn-primary {
  background: var(--green-500) !important;
  color: #fff !important;
  border-color: var(--green-500) !important;
}
.app-shell .btn-primary:hover:not(:disabled) {
  background: var(--green-600) !important;
  border-color: var(--green-600) !important;
}
.app-shell .btn-secondary {
  background: var(--color-surface, #fff) !important;
  color: var(--color-text-primary, #111827) !important;
  border-color: var(--color-border, #e5e7eb) !important;
  box-shadow: var(--shadow-xs) !important;
}
.app-shell .btn-secondary:hover:not(:disabled) {
  background: var(--gray-50) !important;
  border-color: var(--gray-300) !important;
}
.app-shell .btn-ghost {
  background: transparent !important;
  color: var(--color-text-muted, #6b7280) !important;
  border-color: transparent !important;
}
.app-shell .btn-ghost:hover:not(:disabled) {
  background: var(--gray-100) !important;
  color: var(--color-text-primary, #111827) !important;
}
.app-shell .btn-sm {
  padding: 5px 10px !important;
  font-size: .8125rem !important;
}

/* ── STAT GRID (dashboard) ── */
.stat-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: var(--space-4) !important;
  margin-bottom: var(--space-5) !important;
}

/* ── TWO/THREE COL LAYOUTS ── */
.col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-bottom: var(--space-5); }
.col-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-4); }

/* ── HIDE OLD MOBILE TOPBAR (replaced by sticky topbar) ── */
.mobile-topbar { display: none !important; }

/* Sidebar toggle button — hidden on desktop (must come before the mobile
   media query so the mobile !important rule below wins on narrow viewports) */
#sidebar-toggle { display: none !important; }

/* ── MOBILE RESPONSIVE ── */
@media (max-width: 768px) {
  .main.main-content { margin-left: 0; }
  .main.main-content > .page.active { padding: 1rem; padding-bottom: calc(1rem + 70px + env(safe-area-inset-bottom, 0px)); }
  .page-content { padding: 1rem; }
  .col-2, .col-3 { grid-template-columns: 1fr; }
  .topbar-inner { padding: 0 1rem; }
  #sidebar-toggle { display: flex !important; }
  .sidebar { transform: translateX(-240px); transition: transform var(--transition-base); }
  .sidebar.open { transform: translateX(0); box-shadow: 8px 0 32px rgba(0,0,0,.5); }
}