:root{
  --green:#07964a;
  --green-2:#13a75a;
  --green-3:#22c55e;
  --green-soft:#eaf7ee;
  --green-ink:#027a3b;
  --dark:#031f1b;
  --text:#071d1b;
  --muted:#5a6b7c;
  --line:#e6ebe9;
  --line-2:#eef2f1;
  --surface:#ffffff;
  --canvas:#f6f9f7;
  --sidebar:#0a1f1b;
  --sidebar-text:#c7d6cf;
  --sidebar-muted:#7b8e87;
  --sidebar-hover:rgba(255,255,255,.06);
  --shadow:0 18px 42px rgba(15,23,42,.08);
  --shadow-soft:0 6px 18px rgba(15,23,42,.05);
  --radius:14px;
  --radius-sm:10px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body.app{
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--text);
  background:var(--canvas);
  display:grid;
  grid-template-columns:248px 1fr;
  min-height:100vh;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}

/* ============ Sidebar ============ */
.app-sidebar{
  background:var(--sidebar);
  color:var(--sidebar-text);
  padding:24px 18px 20px;
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0;
  left:0;
  width:248px;
  height:100vh;
  overflow-y:auto;
  z-index:20;
}
.sidebar-logo{display:block;margin:4px 10px 28px;}
.sidebar-logo img{
  width:130px;
  height:auto;
  filter:brightness(0) invert(1);
  opacity:.95;
}
.sidebar-nav{display:flex;flex-direction:column;gap:4px;flex:1;}
.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 14px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  color:var(--sidebar-text);
  transition:background .15s ease,color .15s ease;
}
.sidebar-nav a img{
  width:18px;
  height:18px;
  opacity:.75;
  filter:brightness(0) invert(1);
  transition:opacity .15s ease;
}
.sidebar-nav a:hover{background:var(--sidebar-hover);color:#fff;}
.sidebar-nav a:hover img{opacity:1;}
.sidebar-nav a.active{
  background:var(--green);
  color:#fff;
  box-shadow:0 6px 14px rgba(7,150,74,.32);
}
.sidebar-nav a.active img{opacity:1;}

.sidebar-footer{margin-top:16px;}
.upgrade-card{
  background:linear-gradient(155deg,rgba(34,197,94,.18) 0%,rgba(7,150,74,.10) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:18px 16px;
  color:#fff;
  text-align:left;
}
.upgrade-ico{
  width:34px;
  height:34px;
  border-radius:10px;
  background:rgba(70,218,137,.22);
  display:grid;
  place-items:center;
  margin-bottom:10px;
}
.upgrade-ico img{width:18px;height:18px;filter:brightness(0) invert(1);}
.upgrade-card h4{margin:0 0 4px;font-size:14px;font-weight:800;letter-spacing:-.01em;}
.upgrade-card p{margin:0 0 12px;font-size:12px;color:#a7b8b1;line-height:1.4;}
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 16px;
  border-radius:8px;
  background:var(--green);
  color:#fff;
  font-size:13px;
  font-weight:700;
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(7,150,74,.3);}

/* ============ Main column ============ */
.app-main{display:flex;flex-direction:column;min-width:0;grid-column:2;}
.app-topbar{
  position:sticky;
  top:0;
  z-index:5;
  background:rgba(246,249,247,.85);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
  padding:14px 32px;
  display:flex;
  align-items:center;
  gap:20px;
}
.search{
  position:relative;
  flex:1;
  max-width:520px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 14px;
  height:42px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.search:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(7,150,74,.12);}
.search svg{width:16px;height:16px;fill:none;stroke:#6d7d74;stroke-width:2;stroke-linecap:round;flex-shrink:0;}
.search input{
  border:0;
  outline:0;
  font-size:14px;
  color:var(--text);
  width:100%;
  background:transparent;
}
.search input::placeholder{color:#8a9994;}

.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:14px;}
.btn-quick{
  height:40px;
  padding:0 16px;
  border-radius:9px;
  background:var(--green);
  color:#fff;
  border:0;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  box-shadow:0 6px 14px rgba(7,150,74,.18);
  transition:transform .15s ease,box-shadow .15s ease;
}
.btn-quick img{width:16px;height:16px;filter:brightness(0) invert(1);}
.btn-quick:hover{transform:translateY(-1px);box-shadow:0 10px 18px rgba(7,150,74,.28);}

.icon-btn{
  width:40px;
  height:40px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--line);
  display:grid;
  place-items:center;
  position:relative;
  transition:border-color .15s ease;
}
.icon-btn:hover{border-color:#cfdbd5;}
.icon-btn img{width:17px;height:17px;}
.icon-btn .dot{
  position:absolute;
  top:9px;
  right:10px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green-3);
  border:2px solid #fff;
}

.user{display:flex;align-items:center;gap:10px;padding-left:6px;border-left:1px solid var(--line);padding-left:14px;}
.avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--green) 0%,var(--green-3) 100%);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
}
.user-info{display:flex;flex-direction:column;line-height:1.15;}
.user-info strong{font-size:13px;}
.user-info span{font-size:11px;color:var(--muted);}

/* ============ Content ============ */
.app-content{padding:28px 32px 48px;display:flex;flex-direction:column;gap:22px;}

.welcome-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.welcome-row h1{
  margin:0 0 4px;
  font-size:28px;
  letter-spacing:-.03em;
  font-weight:800;
}
.welcome-row p{margin:0;color:var(--muted);font-size:14px;}

.period-switch{
  display:inline-flex;
  padding:4px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
}
.period-switch button{
  border:0;
  background:transparent;
  padding:7px 14px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  border-radius:7px;
  transition:all .15s ease;
}
.period-switch button:hover{color:var(--text);}
.period-switch button.active{
  background:var(--green);
  color:#fff;
  box-shadow:0 4px 10px rgba(7,150,74,.22);
}

/* ============ KPI cards ============ */
.kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.kpi-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.kpi-card::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:120px;
  height:120px;
  background:radial-gradient(circle,rgba(34,197,94,.10),transparent 70%);
  pointer-events:none;
}
.kpi-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.kpi-ico{
  width:40px;
  height:40px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--green-soft);
}
.kpi-ico img{width:20px;height:20px;}
.kpi-ico.wifi{background:#e6f1ff;}
.kpi-ico.leaf{background:#e9f8ee;}
.kpi-ico.broom{background:#fff3e0;}
.kpi-trend{
  font-size:12px;
  font-weight:800;
  padding:4px 8px;
  border-radius:20px;
}
.kpi-trend.up{background:var(--green-soft);color:var(--green-ink);}
.kpi-trend.down{background:#fdecec;color:#b3261e;}

.kpi-label{font-size:13px;color:var(--muted);font-weight:600;}
.kpi-value{
  font-size:34px;
  font-weight:800;
  letter-spacing:-.04em;
  margin:6px 0 8px;
  line-height:1;
}
.kpi-value span{font-size:15px;font-weight:500;color:var(--muted);}
.kpi-equiv{font-size:12px;color:var(--muted);line-height:1.4;}

/* ============ Two-column layouts ============ */
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-soft);
}
.card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
  gap:12px;
}
.card-head h3{margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em;}
.link{
  color:var(--green-ink);
  font-size:13px;
  font-weight:700;
  transition:color .15s ease;
}
.link:hover{color:var(--green);}
.muted{color:var(--muted);font-size:12px;}
.badge{
  font-size:11px;
  font-weight:800;
  padding:4px 10px;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.badge-green{background:var(--green-soft);color:var(--green-ink);}

/* ============ Efficiency score ============ */
.score-card{display:flex;flex-direction:column;}
.gauge-wrap{display:flex;align-items:center;gap:28px;margin-bottom:18px;}
.gauge{
  width:128px;
  height:128px;
  border-radius:50%;
  display:grid;
  place-items:center;
  position:relative;
  background:conic-gradient(var(--green) 0 78%,var(--green-2) 78% 87%,var(--line) 87% 100%);
  flex-shrink:0;
}
.gauge::before{
  content:"";
  position:absolute;
  inset:10px;
  background:#fff;
  border-radius:50%;
}
.gauge-num,.gauge small{position:relative;z-index:1;}
.gauge-num{font-size:38px;font-weight:800;letter-spacing:-.04em;line-height:1;}
.gauge small{font-size:11px;color:var(--muted);font-weight:600;margin-top:4px;}
.gauge-copy p{margin:0 0 6px;color:var(--muted);font-size:13px;}
.gauge-copy strong{
  display:block;
  color:var(--green-ink);
  font-size:15px;
  margin-bottom:10px;
  font-weight:800;
}
.gauge-copy strong span{color:var(--text);font-weight:500;}
.gauge-copy a{
  color:var(--green-ink);
  font-size:13px;
  font-weight:700;
}
.score-breakdown{
  list-style:none;
  margin:0;
  padding:14px 0 0;
  border-top:1px solid var(--line-2);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.score-breakdown li{display:grid;grid-template-columns:80px 1fr 30px;align-items:center;gap:12px;font-size:12px;}
.score-breakdown span{color:var(--muted);font-weight:600;}
.score-breakdown em{font-style:normal;font-weight:800;color:var(--text);text-align:right;}
.bar{height:6px;background:var(--line-2);border-radius:4px;overflow:hidden;}
.bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--green) 0%,var(--green-3) 100%);
  border-radius:4px;
}

/* ============ Chart ============ */
.chart-card{display:flex;flex-direction:column;}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend i{width:10px;height:10px;border-radius:3px;}
.legend .d-green{background:var(--green);}
.legend .d-blue{background:#4a9ff2;}

.chart{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:10px;
  height:200px;
  margin:4px 0 14px;
}
.y-axis{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
  text-align:right;
  padding-bottom:22px;
}
.bars{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:14px;
  align-items:end;
  border-bottom:1px solid var(--line-2);
  padding-bottom:4px;
}
.day{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.stack{
  display:flex;
  align-items:flex-end;
  gap:4px;
  width:100%;
  height:calc(100% - 22px);
}
.bar-e,.bar-d{
  flex:1;
  border-radius:4px 4px 0 0;
  transition:opacity .15s ease;
}
.bar-e{background:linear-gradient(180deg,var(--green-3) 0%,var(--green) 100%);}
.bar-d{background:linear-gradient(180deg,#78b8f4 0%,#4a9ff2 100%);}
.day:hover .bar-e,.day:hover .bar-d{opacity:.85;}
.day span{font-size:11px;color:var(--muted);font-weight:600;}
.day.today span{color:var(--green-ink);font-weight:800;}

.chart-footer{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  padding-top:16px;
  border-top:1px solid var(--line-2);
}
.chart-footer strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.02em;}
.chart-footer span{display:block;font-size:11px;color:var(--muted);margin-top:2px;}

/* ============ Opt list ============ */
.opt-list,.tools-list,.activity-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.opt-list li{
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line-2);
  border-radius:10px;
  transition:border-color .15s ease,background .15s ease;
}
.opt-list li:hover{border-color:#cfe5d6;background:#fafdfb;}
.opt-ico{
  width:40px;
  height:40px;
  border-radius:10px;
  background:var(--green-soft);
  display:grid;
  place-items:center;
}
.opt-ico img{width:18px;height:18px;}
.opt-body strong{display:block;font-size:13px;font-weight:700;}
.opt-body span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.opt-save{
  font-size:14px;
  font-weight:800;
  color:var(--green-ink);
  letter-spacing:-.02em;
}
.opt-save em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);margin-left:2px;}

/* ============ Tools list ============ */
.tools-list li{
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px;
  border:1px solid var(--line-2);
  border-radius:10px;
}
.tool-ico{
  width:40px;
  height:40px;
  border-radius:10px;
  background:#f4f6f5;
  display:grid;
  place-items:center;
}
.tool-ico img{width:18px;height:18px;}
.tool-body strong{display:block;font-size:13px;font-weight:700;}
.tool-body span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.pill{
  font-size:11px;
  font-weight:800;
  padding:4px 10px;
  border-radius:20px;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.pill-on{background:var(--green-soft);color:var(--green-ink);}
.pill-off{background:#f4f6f5;color:#7a8a82;}

/* ============ Recommendations ============ */
.recs-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.rec{
  padding:16px;
  border:1px solid var(--line-2);
  border-radius:12px;
  background:linear-gradient(180deg,#fafdfb 0%,#fff 100%);
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.rec:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);border-color:#cfe5d6;}
.rec-ico{
  width:36px;
  height:36px;
  border-radius:10px;
  background:var(--green-soft);
  display:grid;
  place-items:center;
  margin-bottom:10px;
}
.rec-ico img{width:18px;height:18px;}
.rec h4{margin:0 0 6px;font-size:14px;font-weight:800;letter-spacing:-.01em;}
.rec p{margin:0 0 10px;font-size:12px;color:var(--muted);line-height:1.5;}

/* ============ Activity feed ============ */
.activity-list li{
  display:grid;
  grid-template-columns:14px 1fr;
  gap:12px;
  align-items:flex-start;
  font-size:13px;
  padding:8px 0;
  border-bottom:1px solid var(--line-2);
}
.activity-list li:last-child{border-bottom:0;}
.activity-dot{
  width:8px;
  height:8px;
  background:var(--green);
  border-radius:50%;
  margin-top:6px;
  box-shadow:0 0 0 3px var(--green-soft);
}
.activity-list strong{font-weight:700;}

/* ============ Page header (Tools / Impact) ============ */
.page-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  flex-wrap:wrap;
}
.page-header h1{
  margin:0 0 4px;
  font-size:28px;
  font-weight:800;
  letter-spacing:-.03em;
}
.page-header p{margin:0;color:var(--muted);font-size:14px;}
.page-stats{display:flex;gap:14px;}
.page-stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:140px;
  box-shadow:var(--shadow-soft);
}
.page-stat strong{font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.page-stat strong span{font-size:13px;color:var(--muted);font-weight:500;}
.page-stat em{font-style:normal;font-size:12px;color:var(--muted);margin-top:4px;}

.section-label{
  margin:8px 0 -6px;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--muted);
}
.section-title-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:14px;
  gap:16px;
  flex-wrap:wrap;
}
.section-title{
  margin:0;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
}
.eyebrow{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--muted);
  margin-bottom:10px;
}
.eyebrow.green{color:var(--green-ink);}

/* ============ Tools controls ============ */
.tools-controls{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.search-inline{
  flex:1;
  min-width:240px;
  max-width:360px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 14px;
  height:40px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.search-inline:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(7,150,74,.12);}
.search-inline svg{width:15px;height:15px;fill:none;stroke:#6d7d74;stroke-width:2;stroke-linecap:round;}
.search-inline input{border:0;outline:0;font-size:13px;width:100%;background:transparent;}
.search-inline input::placeholder{color:#8a9994;}

.category-tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.category-tabs button{
  border:1px solid var(--line);
  background:#fff;
  padding:8px 14px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all .15s ease;
}
.category-tabs button em{
  font-style:normal;
  font-size:11px;
  font-weight:800;
  background:var(--line-2);
  padding:2px 7px;
  border-radius:20px;
  color:var(--muted);
}
.category-tabs button:hover{border-color:#cfdbd5;color:var(--text);}
.category-tabs button.active{
  background:var(--green);
  color:#fff;
  border-color:var(--green);
}
.category-tabs button.active em{background:rgba(255,255,255,.2);color:#fff;}

/* ============ Tool spotlight ============ */
.tool-spotlight{
  background:linear-gradient(135deg,#042a22 0%,#07513a 55%,#0a7e50 100%);
  color:#fff;
  border-radius:16px;
  padding:28px;
  position:relative;
  overflow:hidden;
}
.tool-spotlight::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 20% 20%, rgba(70,218,137,.22), transparent 55%),
             radial-gradient(ellipse at 85% 80%, rgba(34,197,94,.16), transparent 55%);
  pointer-events:none;
}
.spotlight-badge{
  position:relative;
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  background:rgba(255,255,255,.14);
  padding:5px 12px;
  border-radius:20px;
  margin-bottom:16px;
}
.spotlight-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:32px;
  align-items:center;
}
.spotlight-grid h2{
  margin:0 0 10px;
  font-size:32px;
  font-weight:900;
  letter-spacing:-.03em;
}
.spotlight-grid p{
  margin:0 0 20px;
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.55;
}
.spotlight-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:22px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.12);
}
.spotlight-stats strong{
  display:block;
  font-size:15px;
  font-weight:800;
  color:#46da89;
  letter-spacing:-.02em;
}
.spotlight-stats span{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,.65);
  margin-top:3px;
}
.spotlight-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.spotlight-actions .link{color:#c3f3d4;}
.spotlight-actions .link:hover{color:#fff;}
.btn-primary-lg{
  height:44px;
  padding:0 22px;
  border-radius:9px;
  background:#fff;
  color:var(--dark);
  border:0;
  font-size:14px;
  font-weight:800;
  box-shadow:0 10px 20px rgba(0,0,0,.22);
  transition:transform .15s ease;
}
.btn-primary-lg:hover{transform:translateY(-1px);}

.spotlight-visual{display:flex;flex-direction:column;gap:14px;}
.spotlight-chart{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:8px;
  height:160px;
  align-items:end;
  background:rgba(0,0,0,.2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:16px 14px 28px;
  position:relative;
}
.grid-bar{
  position:relative;
  border-radius:4px 4px 0 0;
  width:100%;
}
.grid-bar.clean{background:linear-gradient(180deg,#46da89 0%,#07964a 100%);}
.grid-bar.dirty{background:linear-gradient(180deg,#ff9e6e 0%,#d26236 100%);}
.grid-bar span{
  position:absolute;
  bottom:-20px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  color:rgba(255,255,255,.6);
  font-weight:600;
}
.spotlight-legend{
  display:flex;
  gap:14px;
  font-size:12px;
  color:rgba(255,255,255,.7);
}
.spotlight-legend span{display:inline-flex;align-items:center;gap:6px;}
.spotlight-legend i{width:10px;height:10px;border-radius:3px;display:block;}
.spotlight-legend .d-clean{background:#46da89;}
.spotlight-legend .d-dirty{background:#d26236;}

/* ============ Tools grid ============ */
.tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.active-tools-wrap{margin-bottom:10px;}
.active-tools-wrap[data-empty]{display:none;}
.active-tools-wrap [data-active-count]{
  font-size:12px;
  font-weight:700;
  margin-left:6px;
  text-transform:none;
  letter-spacing:0;
}
.tool-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
  position:relative;
}
.tool-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);border-color:#cfe5d6;}
.tool-card.active{border-color:#cfe5d6;background:linear-gradient(180deg,#fafdfb 0%,#fff 40%);}
.tool-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
}
.tool-avatar{
  width:42px;
  height:42px;
  border-radius:11px;
  display:grid;
  place-items:center;
}
.tool-avatar img{width:20px;height:20px;}
.tool-avatar.browser{background:var(--green-soft);}
.tool-avatar.device{background:#e6f1ff;}
.tool-avatar.ai{background:#f3eeff;}
.tool-avatar.data{background:#fff3e0;}
.tool-avatar.carbon{background:#d9f5ef;}
.tool-avatar.hardware{background:#fff9dd;}
.tool-avatar.developer{background:#fde4e4;}
.tool-avatar.reporting{background:#dbe9ff;}

.tool-card h3{
  margin:0;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.015em;
}
.tool-card p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  flex:1;
}
.tag{
  display:inline-block;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:5px;
  align-self:flex-start;
}
.tag-browser{background:var(--green-soft);color:var(--green-ink);}
.tag-device{background:#e6f1ff;color:#2563eb;}
.tag-ai{background:#f3eeff;color:#6d28d9;}
.tag-data{background:#fff3e0;color:#b45309;}
.tag-carbon{background:#d9f5ef;color:#0f766e;}
.tag-hardware{background:#fff9dd;color:#854d0e;}
.tag-developer{background:#fde4e4;color:#b91c1c;}
.tag-reporting{background:#dbe9ff;color:#1e40af;}

.tool-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:12px;
  margin-top:auto;
  border-top:1px solid var(--line-2);
  gap:10px;
}
.tool-save{
  font-size:12px;
  font-weight:800;
  color:var(--green-ink);
}
.tool-potential{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}

/* Toggle switch */
.toggle{
  width:40px;
  height:22px;
  border:0;
  border-radius:22px;
  background:#e6ebe9;
  position:relative;
  cursor:pointer;
  transition:background .18s ease;
  padding:0;
  flex-shrink:0;
}
.toggle span{
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .18s ease;
}
.toggle.on{background:var(--green);}
.toggle.on span{transform:translateX(18px);}

/* ============ Impact hero ============ */
.impact-hero{
  background:linear-gradient(135deg,#042a22 0%,#07513a 55%,#0a7e50 100%);
  color:#fff;
  border-radius:18px;
  padding:36px 36px 32px;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:32px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.impact-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 20% 20%, rgba(70,218,137,.22), transparent 55%),
             radial-gradient(ellipse at 85% 80%, rgba(34,197,94,.16), transparent 55%);
  pointer-events:none;
}
.impact-hero-copy{position:relative;}
.impact-hero .eyebrow{color:rgba(255,255,255,.7);margin-bottom:8px;}
.impact-big{
  font-size:96px;
  font-weight:900;
  letter-spacing:-.05em;
  line-height:.95;
  display:flex;
  align-items:baseline;
  gap:14px;
  flex-wrap:wrap;
  color:#fff;
}
.impact-big em{
  font-style:normal;
  font-size:20px;
  font-weight:700;
  color:#46da89;
  letter-spacing:-.01em;
}
.impact-since{
  margin:10px 0 24px;
  color:rgba(255,255,255,.75);
  font-size:14px;
}
.impact-since strong{color:#fff;}
.impact-hero-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.14);
}
.impact-hero-stats strong{
  display:block;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
}
.impact-hero-stats span{
  display:block;
  font-size:12px;
  color:rgba(255,255,255,.65);
  margin-top:3px;
}

.impact-hero-visual{
  position:relative;
  display:grid;
  place-items:center;
  min-height:240px;
}
.impact-rings{width:260px;height:260px;transform:rotate(-90deg);}
.impact-rings circle{fill:none;}
.ring-bg,.ring-bg-2,.ring-bg-3{stroke:rgba(255,255,255,.08);stroke-width:10;}
.ring-fill{stroke:#46da89;stroke-width:10;stroke-linecap:round;}
.ring-fill-2{stroke:#22c55e;stroke-width:10;stroke-linecap:round;}
.ring-fill-3{stroke:#07964a;stroke-width:10;stroke-linecap:round;}
.impact-rings-center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
}
.impact-rings-center strong{
  display:block;
  font-size:32px;
  font-weight:900;
  color:#fff;
  letter-spacing:-.03em;
}
.impact-rings-center span{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,.7);
  margin-top:4px;
  max-width:120px;
  line-height:1.3;
}

/* ============ Equivalencies ============ */
.equiv-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:14px;
}
.equiv-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 16px;
  text-align:left;
  transition:transform .15s ease,box-shadow .15s ease;
}
.equiv-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.equiv-ico{
  width:40px;
  height:40px;
  border-radius:10px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
}
.equiv-ico img{width:20px;height:20px;}
.equiv-ico.green{background:var(--green-soft);}
.equiv-ico.blue{background:#e6f1ff;}
.equiv-ico.amber{background:#fff3e0;}
.equiv-ico.purple{background:#f3eeff;}
.equiv-ico.teal{background:#d9f5ef;}
.equiv-ico.rose{background:#fde8ec;}
.equiv-card strong{
  display:block;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:4px;
}
.equiv-card span{
  display:block;
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

/* ============ Impact timeline ============ */
.impact-timeline{
  margin:-4px 0 4px;
}
.impact-timeline svg{
  width:100%;
  height:180px;
  display:block;
}
.timeline-x{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted);
  padding-top:6px;
}
.timeline-footer{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  padding-top:16px;
  margin-top:14px;
  border-top:1px solid var(--line-2);
}
.timeline-footer strong{
  display:block;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.02em;
}
.timeline-footer span{
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-top:2px;
}

/* ============ Savings by tool list ============ */
.savings-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.savings-list li{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;}
.sav-ico{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
}
.sav-ico img{width:16px;height:16px;}
.sav-ico.browser{background:var(--green-soft);}
.sav-ico.device{background:#e6f1ff;}
.sav-ico.ai{background:#f3eeff;}
.sav-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
  font-size:13px;
}
.sav-top em{font-style:normal;font-weight:800;color:var(--green-ink);}

/* ============ Milestones ============ */
.milestones-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.milestone{
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:16px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:4px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.milestone:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.milestone-ico{
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--line-2);
  display:grid;
  place-items:center;
  margin-bottom:8px;
}
.milestone-ico img{width:18px;height:18px;opacity:.5;}
.milestone strong{font-size:13px;font-weight:800;letter-spacing:-.01em;}
.milestone span{font-size:11px;color:var(--muted);}
.milestone .bar{margin-top:8px;}
.milestone.done{
  background:linear-gradient(180deg,#fafdfb 0%,#fff 100%);
  border-color:#cfe5d6;
}
.milestone.done .milestone-ico{background:var(--green-soft);}
.milestone.done .milestone-ico img{opacity:1;}
.milestone.done strong{color:var(--green-ink);}
.milestone.in-progress{border-color:#ffd08a;background:linear-gradient(180deg,#fffaf0 0%,#fff 100%);}
.milestone.in-progress .milestone-ico{background:#fff3e0;}
.milestone.in-progress .milestone-ico img{opacity:1;}
.milestone.locked{opacity:.72;}

/* ============ Compare + share ============ */
.compare-row{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:18px;
}
.compare-card{display:flex;flex-direction:column;}
.compare-main{margin-bottom:18px;}
.compare-main strong{
  display:block;
  font-size:42px;
  font-weight:900;
  letter-spacing:-.04em;
  color:var(--green-ink);
  line-height:1;
}
.compare-main span{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
  max-width:260px;
}
.compare-bars{display:flex;flex-direction:column;gap:10px;}
.cb-row{display:grid;grid-template-columns:70px 1fr 60px;gap:12px;align-items:center;font-size:12px;}
.cb-row span{color:var(--muted);font-weight:700;}
.cb-row em{font-style:normal;font-weight:800;text-align:right;}
.bar.muted i{background:linear-gradient(90deg,#9bb4ab 0%,#c7d6cf 100%);}

.share-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:center;
  background:linear-gradient(135deg,#fafdfb 0%,#f4fbf6 100%);
}
.share-copy h3{
  margin:0 0 8px;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.02em;
}
.share-copy p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.share-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.share-preview{
  perspective:800px;
}
.share-card-inner{
  background:linear-gradient(155deg,#042a22 0%,#07513a 55%,#0a7e50 100%);
  color:#fff;
  border-radius:14px;
  padding:22px;
  box-shadow:0 18px 30px rgba(4,42,34,.3);
  transform:rotate(2deg);
  position:relative;
  overflow:hidden;
}
.share-card-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 90% 10%, rgba(70,218,137,.25), transparent 55%);
}
.share-logo{
  position:relative;
  width:90px;
  filter:brightness(0) invert(1);
  opacity:.9;
  margin-bottom:16px;
}
.share-num{
  position:relative;
  font-size:48px;
  font-weight:900;
  letter-spacing:-.04em;
  display:flex;
  align-items:baseline;
  gap:8px;
  line-height:1;
}
.share-num em{
  font-style:normal;
  font-size:13px;
  font-weight:700;
  color:#46da89;
}
.share-sub{
  position:relative;
  font-size:12px;
  color:rgba(255,255,255,.78);
  margin:6px 0 16px;
}
.share-tags{
  position:relative;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.share-tags span{
  font-size:10px;
  font-weight:700;
  padding:4px 8px;
  border-radius:20px;
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.9);
}

/* ============ Small buttons ============ */
.btn-small{
  height:32px;
  padding:0 14px;
  border-radius:8px;
  border:1px solid var(--line);
  background:#fff;
  font-size:12px;
  font-weight:700;
  color:var(--text);
  transition:all .15s ease;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.btn-small:hover{border-color:#cfdbd5;}
.btn-small.primary{
  background:var(--green);
  border-color:var(--green);
  color:#fff;
  box-shadow:0 4px 10px rgba(7,150,74,.18);
}
.btn-small.primary:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(7,150,74,.28);
}
.btn-small.ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--muted);
}
.btn-small.ghost:hover{color:var(--text);border-color:#cfdbd5;}
.btn-small.ghost.danger{color:#b3261e;border-color:#f3c9c5;}
.btn-small.ghost.danger:hover{background:#fdecec;border-color:#e8938a;}

/* ============ Optimize page ============ */
.scan-card{
  background:linear-gradient(135deg,#f4fbf6 0%,#e8f7ee 100%);
  border:1px solid #cfe5d6;
  border-radius:16px;
  padding:28px;
  position:relative;
  overflow:hidden;
}
.scan-top{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:center;
  flex-wrap:wrap;
}
.scan-ico-wrap{
  position:relative;
  width:64px;
  height:64px;
}
.scan-ico{
  position:relative;
  z-index:1;
  width:64px;
  height:64px;
  border-radius:16px;
  background:var(--green);
  display:grid;
  place-items:center;
  box-shadow:0 10px 24px rgba(7,150,74,.32);
}
.scan-ico img{width:28px;height:28px;filter:brightness(0) invert(1);}
.pulse{
  position:absolute;
  inset:-6px;
  border-radius:20px;
  border:2px solid var(--green-3);
  opacity:.5;
  animation:pulse 2s ease-out infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:.5;}
  100%{transform:scale(1.18);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .pulse{animation:none;}
}
.scan-copy h2{
  margin:4px 0 6px;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.02em;
}
.scan-copy p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.scan-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}
.scan-cats{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid #cfe5d6;
}
.scan-cat{
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:12px;
  padding:14px;
  display:flex;
  align-items:center;
  gap:12px;
}
.scan-cat-ico{
  width:36px;
  height:36px;
  border-radius:9px;
  display:grid;
  place-items:center;
}
.scan-cat-ico.browser{background:var(--green-soft);}
.scan-cat-ico.device{background:#e6f1ff;}
.scan-cat-ico.data{background:#fff3e0;}
.scan-cat-ico.ai{background:#f3eeff;}
.scan-cat-ico.carbon{background:#d9f5ef;}
.scan-cat-ico img{width:16px;height:16px;}
.scan-cat strong{display:block;font-size:18px;font-weight:800;line-height:1;}
.scan-cat span{display:block;font-size:11px;color:var(--muted);margin-top:2px;}

.quick-wins{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.quick-win{
  display:grid;
  grid-template-columns:40px 1fr auto auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.quick-win:hover{border-color:#cfe5d6;box-shadow:var(--shadow-soft);}
.qw-ico{
  width:40px;
  height:40px;
  border-radius:10px;
  background:var(--green-soft);
  display:grid;
  place-items:center;
}
.qw-ico img{width:18px;height:18px;}
.qw-body strong{display:block;font-size:13px;font-weight:700;}
.qw-body span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.qw-save{
  font-size:15px;
  font-weight:800;
  color:var(--green-ink);
  letter-spacing:-.02em;
}
.qw-save em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);margin-left:2px;}

.opt-recs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.opt-recs li{
  display:grid;
  grid-template-columns:44px 1fr auto auto;
  gap:16px;
  align-items:center;
  padding:16px 0;
  border-bottom:1px solid var(--line-2);
}
.opt-recs li:last-child{border-bottom:0;}
.opt-recs .opt-ico{
  width:44px;
  height:44px;
  border-radius:11px;
  background:var(--green-soft);
  display:grid;
  place-items:center;
}
.opt-recs .opt-ico img{width:20px;height:20px;}
.opt-body-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:4px;
  flex-wrap:wrap;
}
.opt-body-top strong{font-size:14px;font-weight:700;}
.opt-body p{
  margin:4px 0 0;
  font-size:12px;
  color:var(--muted);
  line-height:1.5;
  max-width:520px;
}
.opt-save{
  font-size:14px;
  font-weight:800;
  color:var(--green-ink);
  white-space:nowrap;
}
.opt-save em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);display:block;margin-top:2px;}
.opt-ctrls{display:flex;gap:6px;}

.schedule-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.schedule-list li{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:14px;
  align-items:center;
  padding:12px 14px;
  border:1px solid var(--line-2);
  border-radius:10px;
}
.sched-ico{
  width:42px;
  height:42px;
  border-radius:10px;
  background:var(--green-soft);
  display:grid;
  place-items:center;
}
.sched-ico img{width:18px;height:18px;}
.sched-body strong{display:block;font-size:13px;font-weight:700;}
.sched-body span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}

/* ============ Extensions page ============ */
.ext-featured{
  background:linear-gradient(135deg,#042a22 0%,#07513a 55%,#0a7e50 100%);
  color:#fff;
  border-radius:16px;
  padding:28px;
  position:relative;
  overflow:hidden;
}
.ext-featured::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 20% 20%, rgba(70,218,137,.22), transparent 55%),
             radial-gradient(ellipse at 85% 80%, rgba(34,197,94,.16), transparent 55%);
  pointer-events:none;
}
.ext-featured-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:32px;
  align-items:center;
}
.ext-featured-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.ext-featured-ico{
  width:56px;
  height:56px;
  border-radius:14px;
  background:rgba(255,255,255,.1);
  display:grid;
  place-items:center;
}
.ext-featured-ico img{width:26px;height:26px;filter:brightness(0) invert(1);}
.ext-featured-grid h2{
  margin:0 0 4px;
  font-size:28px;
  font-weight:900;
  letter-spacing:-.03em;
}
.ext-meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:rgba(255,255,255,.72);
}
.ext-meta .stars em{color:#f5d06a;font-style:normal;font-weight:800;margin-left:4px;}
.dot-sep{color:rgba(255,255,255,.35);}
.ext-featured-grid p{
  margin:0 0 18px;
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.55;
}
.ext-features{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:22px;
}
.ext-features span{
  font-size:12px;
  font-weight:700;
  padding:5px 12px;
  border-radius:20px;
  background:rgba(70,218,137,.16);
  color:#c3f3d4;
}
.ext-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.ext-actions .link{color:#c3f3d4;}
.ext-actions .link:hover{color:#fff;}

.browser-frame{
  background:#fff;
  border-radius:12px;
  box-shadow:0 24px 48px rgba(0,0,0,.3);
  overflow:hidden;
  transform:rotate(-1.5deg);
}
.browser-bar{
  background:#f0f3f2;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid #e0e4e3;
}
.browser-bar span:first-child{background:#ff5f57;}
.browser-bar span:nth-child(2){background:#ffbd2e;}
.browser-bar span:nth-child(3){background:#28c840;}
.browser-bar span:nth-child(-n+3){
  width:11px;
  height:11px;
  border-radius:50%;
  display:block;
}
.browser-url{
  flex:1;
  margin-left:8px;
  background:#fff;
  border:1px solid #e0e4e3;
  border-radius:6px;
  padding:5px 10px;
  font-size:11px;
  color:var(--muted);
}
.browser-body{
  background:#fafbfb;
  padding:24px;
  display:grid;
  place-items:center;
  min-height:200px;
}
.ext-popup{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  width:100%;
  max-width:260px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.ext-popup-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line-2);
  margin-bottom:12px;
}
.ext-popup-head img{width:18px;height:18px;}
.ext-popup-head strong{flex:1;font-size:13px;color:var(--text);}
.ext-popup-stat{
  text-align:center;
  padding:14px 0;
  border-bottom:1px solid var(--line-2);
  margin-bottom:10px;
}
.ext-popup-stat strong{
  display:block;
  font-size:36px;
  font-weight:900;
  color:var(--green-ink);
  letter-spacing:-.04em;
  line-height:1;
}
.ext-popup-stat span{
  display:block;
  margin-top:4px;
  font-size:11px;
  color:var(--muted);
}
.ext-popup-row{
  display:flex;
  justify-content:space-between;
  padding:5px 0;
  font-size:11px;
  color:var(--muted);
}
.ext-popup-row em{font-style:normal;font-weight:800;color:var(--text);}

.ext-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.ext-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.ext-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);border-color:#cfe5d6;}
.ext-card.installed{background:linear-gradient(180deg,#fafdfb 0%,#fff 40%);border-color:#cfe5d6;}
.ext-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.ext-status{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:11px;
  font-weight:800;
  color:var(--green-ink);
  background:var(--green-soft);
  padding:4px 10px;
  border-radius:20px;
}
.ext-status img{width:10px;height:10px;}
.ext-status-pro{
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  padding:4px 9px;
  border-radius:20px;
  background:#fff3e0;
  color:#b45309;
}
.ext-card h3{
  margin:0;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.015em;
}
.ext-card p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
  flex:1;
}
.ext-stats{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--muted);
  padding-top:4px;
}
.stars{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:#f5a623;
  font-size:12px;
  letter-spacing:.08em;
}
.stars em{
  font-style:normal;
  color:var(--text);
  font-weight:800;
  margin-left:4px;
  letter-spacing:0;
}
.ext-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:12px;
  border-top:1px solid var(--line-2);
  gap:10px;
}

/* ============ Reports page ============ */
.reports-controls{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.date-range{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 14px;
  height:42px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
}
.date-range:hover{border-color:#cfdbd5;}
.date-range img{width:16px;height:16px;opacity:.7;}
.date-range .chev{width:14px;height:14px;color:var(--muted);}

.big-chart svg{
  width:100%;
  height:260px;
  display:block;
}
.chart-x{
  display:flex;
  justify-content:space-between;
  padding-top:8px;
  font-size:11px;
  color:var(--muted);
}
.legend .d-amber{background:#f59e0b;}

.breakdown-donut{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:28px;
  align-items:center;
}
.donut{width:140px;height:140px;transform:rotate(-90deg);}
.donut circle{fill:none;stroke-width:18;}
.donut-track{stroke:var(--line-2);}
.donut-seg{stroke-linecap:butt;}
.donut-seg.s1{stroke:var(--green);}
.donut-seg.s2{stroke:#4a9ff2;}
.donut-seg.s3{stroke:#f59e0b;}
.donut-seg.s4{stroke:#a855f7;}
.breakdown-legend{display:flex;flex-direction:column;gap:12px;}
.breakdown-legend>div{
  display:grid;
  grid-template-columns:14px 1fr auto;
  align-items:center;
  gap:10px;
  font-size:13px;
}
.breakdown-legend i{width:10px;height:10px;border-radius:3px;display:block;}
.breakdown-legend .cat-browser{background:var(--green);}
.breakdown-legend .cat-device{background:#4a9ff2;}
.breakdown-legend .cat-data{background:#f59e0b;}
.breakdown-legend .cat-ai{background:#a855f7;}
.breakdown-legend strong{font-weight:700;font-size:13px;}
.breakdown-legend em{font-style:normal;font-size:12px;color:var(--muted);font-weight:600;}

.dow-chart{display:flex;flex-direction:column;gap:10px;}
.dow-row{
  display:grid;
  grid-template-columns:40px 1fr 70px;
  align-items:center;
  gap:12px;
  font-size:12px;
}
.dow-row span{color:var(--muted);font-weight:700;}
.dow-row em{font-style:normal;font-weight:800;text-align:right;}
.dow-bar{height:10px;background:var(--line-2);border-radius:4px;overflow:hidden;}
.dow-bar i{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--green) 0%,var(--green-3) 100%);
  border-radius:4px;
}

.report-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.report-list li{
  display:grid;
  grid-template-columns:44px 1fr auto;
  gap:16px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line-2);
}
.report-list li:last-child{border-bottom:0;}
.report-list li.locked{opacity:.8;}
.report-ico{
  width:44px;
  height:44px;
  border-radius:10px;
  background:var(--green-soft);
  display:grid;
  place-items:center;
}
.report-ico img{width:20px;height:20px;}
.report-body strong{display:block;font-size:14px;font-weight:700;}
.report-body strong .tag{margin-left:8px;}
.report-body span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}
.report-actions{display:flex;gap:6px;}

/* ============ Settings page ============ */
.settings-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:28px;
  max-width:1100px;
}
.settings-nav{
  position:sticky;
  top:80px;
  align-self:flex-start;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:4px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow-soft);
}
.settings-nav a{
  padding:10px 14px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  transition:background .15s ease,color .15s ease;
}
.settings-nav a:hover{background:var(--line-2);color:var(--text);}
.settings-nav a.active{
  background:var(--green-soft);
  color:var(--green-ink);
}
.settings-panels{display:flex;flex-direction:column;gap:18px;}
.settings-section{padding:28px;}
.settings-head{margin-bottom:20px;}
.settings-head h2{
  margin:0 0 4px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.02em;
}
.settings-head p{margin:0;color:var(--muted);font-size:13px;}
.settings-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid var(--line-2);
}
.settings-row:last-child{border-bottom:0;padding-bottom:0;}
.settings-row.toggle-row{grid-template-columns:1fr auto;}
.settings-label strong{display:block;font-size:14px;font-weight:700;}
.settings-label span{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
  max-width:440px;
  line-height:1.5;
}
.settings-control{display:flex;align-items:center;gap:10px;}
.text-input{
  height:38px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:8px;
  font-family:inherit;
  font-size:13px;
  background:#fff;
  color:var(--text);
  min-width:260px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.text-input:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(7,150,74,.12);
}
.avatar.big{
  width:56px;
  height:56px;
  font-size:18px;
  font-weight:800;
}
.avatar-row{gap:8px;}

.theme-picker{display:flex;gap:10px;}
.theme-opt{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}
.theme-opt input{display:none;}
.theme-swatch{
  width:68px;
  height:48px;
  border-radius:9px;
  border:2px solid var(--line);
  transition:border-color .15s ease,transform .15s ease;
}
.theme-swatch.light{background:linear-gradient(145deg,#fff 0%,#f4f6f5 100%);}
.theme-swatch.dark{background:linear-gradient(145deg,#1a2a26 0%,#0a1f1b 100%);}
.theme-swatch.system{background:linear-gradient(90deg,#fff 50%,#0a1f1b 50%);}
.theme-opt input:checked+.theme-swatch{
  border-color:var(--green);
  transform:scale(1.03);
}
.theme-opt input:checked ~ span{color:var(--green-ink);}

.hour-range{display:inline-flex;align-items:center;gap:10px;}
.hour-range span{color:var(--muted);font-size:13px;}
.hour-range .text-input{min-width:120px;}

.connected-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.connected-list li{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid var(--line-2);
}
.connected-list li:last-child{border-bottom:0;}
.connected-ico{
  width:42px;
  height:42px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--line-2);
}
.connected-ico img{width:18px;height:18px;opacity:.75;}
/* Brand logos (full-color): use a clean white/neutral surface so the logo colors read true. */
.connected-ico.brand{
  background:#fff;
  border:1px solid var(--line);
}
.connected-ico.brand img{
  width:22px;
  height:22px;
  opacity:1;
  object-fit:contain;
}
.connected-body strong{display:block;font-size:14px;font-weight:700;}
.connected-body span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}

.plan-card{
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:32px;
  align-items:center;
  background:linear-gradient(135deg,#fafdfb 0%,#f4fbf6 100%);
  border:1px solid var(--line-2);
  border-radius:14px;
  padding:24px;
}
.plan-info h3{
  margin:0 0 8px;
  font-size:26px;
  font-weight:900;
  letter-spacing:-.03em;
}
.plan-info p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.plan-perks{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.plan-perks li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--text);
}
.plan-perks img{width:14px;height:14px;}
.plan-perks li.dim{color:var(--muted);}
.plan-perks li.dim em{
  font-style:normal;
  font-size:11px;
  font-weight:800;
  color:#b45309;
  background:#fff3e0;
  padding:2px 7px;
  border-radius:20px;
  margin-left:4px;
}
.plan-upgrade{
  text-align:center;
  padding:20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.plan-upgrade strong{
  font-size:40px;
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--text);
}
.plan-upgrade strong span{
  font-size:13px;
  font-weight:500;
  color:var(--muted);
}
.plan-upgrade p{margin:0 0 6px;font-size:12px;color:var(--muted);}

.danger-section{border-color:#f3c9c5;}
.danger-section .settings-head h2{color:#b3261e;}

/* ============ Dark mode ============ */
[data-theme="dark"]{
  --canvas:#0a1410;
  --surface:#0f1b16;
  --line:#1f2d26;
  --line-2:#172219;
  --text:#e5ece9;
  --muted:#8a9994;
  --green-soft:#0f2a1b;
  --green-ink:#46da89;
  --sidebar:#050f0c;
  --sidebar-text:#c7d6cf;
  --sidebar-muted:#6a7a75;
  --sidebar-hover:rgba(255,255,255,.06);
  --shadow:0 18px 42px rgba(0,0,0,.55);
  --shadow-soft:0 6px 18px rgba(0,0,0,.35);
}
[data-theme="dark"] body.app,
[data-theme="dark"] body.auth-page{color:var(--text);background:var(--canvas);}
[data-theme="dark"] .app-topbar{
  background:rgba(10,20,16,.78);
  border-bottom-color:var(--line);
}
[data-theme="dark"] .search,
[data-theme="dark"] .search-inline,
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .btn-small,
[data-theme="dark"] .period-switch,
[data-theme="dark"] .category-tabs button,
[data-theme="dark"] .page-stat,
[data-theme="dark"] .date-range,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .tool-card,
[data-theme="dark"] .ext-card,
[data-theme="dark"] .card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .settings-nav,
[data-theme="dark"] .scan-cat,
[data-theme="dark"] .quick-win,
[data-theme="dark"] .rec{
  background:var(--surface);
  border-color:var(--line);
  color:var(--text);
}
[data-theme="dark"] .search input,
[data-theme="dark"] .search-inline input,
[data-theme="dark"] .text-input,
[data-theme="dark"] .form-row input,
[data-theme="dark"] .form-row select,
[data-theme="dark"] .password-form input{
  background:var(--surface);
  border-color:var(--line);
  color:var(--text);
}
[data-theme="dark"] .search input::placeholder,
[data-theme="dark"] .search-inline input::placeholder,
[data-theme="dark"] .text-input::placeholder{color:#6a7a75;}
[data-theme="dark"] .search svg,
[data-theme="dark"] .search-inline svg{stroke:#9aa9a3;}
[data-theme="dark"] .icon-btn img{filter:brightness(0) invert(1);opacity:.75;}
[data-theme="dark"] .icon-btn .dot{border-color:var(--surface);}

[data-theme="dark"] .tool-card.active,
[data-theme="dark"] .ext-card.installed{
  background:linear-gradient(180deg,#0f2419 0%,#0f1b16 40%);
  border-color:#1d3826;
}
[data-theme="dark"] .rec{background:linear-gradient(180deg,#11231c 0%,#0f1b16 100%);}
[data-theme="dark"] .opt-list li,
[data-theme="dark"] .tools-list li,
[data-theme="dark"] .opt-recs li,
[data-theme="dark"] .report-list li,
[data-theme="dark"] .savings-list li,
[data-theme="dark"] .connected-list li,
[data-theme="dark"] .schedule-list li,
[data-theme="dark"] .activity-list li,
[data-theme="dark"] .milestone{
  border-color:var(--line);
}
[data-theme="dark"] .milestone{background:var(--surface);}
[data-theme="dark"] .milestone.done{background:linear-gradient(180deg,#11241b 0%,#0f1b16 100%);border-color:#1d3826;}
[data-theme="dark"] .milestone.in-progress{background:linear-gradient(180deg,#1f1a0e 0%,#0f1b16 100%);border-color:#3a2d13;}
[data-theme="dark"] .equiv-card{background:var(--surface);border-color:var(--line);}
[data-theme="dark"] .plan-card{background:linear-gradient(135deg,#0f2419 0%,#0f1b16 100%);border-color:var(--line);}
[data-theme="dark"] .plan-upgrade{background:var(--surface);border-color:var(--line);}
[data-theme="dark"] .share-card{background:linear-gradient(135deg,#11231c 0%,#0f1b16 100%);}

[data-theme="dark"] .scan-card{
  background:linear-gradient(135deg,#11241b 0%,#0d1a14 100%);
  border-color:#1d3826;
}

[data-theme="dark"] .kpi-card::after,
[data-theme="dark"] .scan-cat{background:var(--surface);}
[data-theme="dark"] .kpi-card::after{
  background:radial-gradient(circle,rgba(70,218,137,.10),transparent 70%);
}

[data-theme="dark"] .tool-avatar.browser,
[data-theme="dark"] .equiv-ico.green,
[data-theme="dark"] .kpi-ico.bolt{background:rgba(70,218,137,.14);}
[data-theme="dark"] .tool-avatar.device,
[data-theme="dark"] .equiv-ico.blue,
[data-theme="dark"] .kpi-ico.wifi,
[data-theme="dark"] .scan-cat-ico.device{background:rgba(74,159,242,.14);}
[data-theme="dark"] .tool-avatar.ai,
[data-theme="dark"] .equiv-ico.purple,
[data-theme="dark"] .scan-cat-ico.ai{background:rgba(168,85,247,.14);}
[data-theme="dark"] .tool-avatar.data,
[data-theme="dark"] .equiv-ico.amber,
[data-theme="dark"] .scan-cat-ico.data{background:rgba(245,158,11,.14);}
[data-theme="dark"] .tool-avatar.carbon,
[data-theme="dark"] .equiv-ico.teal,
[data-theme="dark"] .scan-cat-ico.carbon{background:rgba(15,118,110,.22);}
[data-theme="dark"] .tool-avatar.hardware,
[data-theme="dark"] .equiv-ico.rose{background:rgba(244,114,182,.14);}
[data-theme="dark"] .tool-avatar.developer{background:rgba(239,68,68,.14);}
[data-theme="dark"] .tool-avatar.reporting{background:rgba(74,159,242,.14);}
[data-theme="dark"] .kpi-ico.leaf{background:rgba(34,197,94,.15);}
[data-theme="dark"] .kpi-ico.broom{background:rgba(245,158,11,.15);}
[data-theme="dark"] .opt-ico,
[data-theme="dark"] .qw-ico,
[data-theme="dark"] .rec-ico,
[data-theme="dark"] .sav-ico.browser,
[data-theme="dark"] .report-ico,
[data-theme="dark"] .sched-ico{background:rgba(70,218,137,.14);}
[data-theme="dark"] .tool-ico{background:rgba(255,255,255,.04);}
[data-theme="dark"] .milestone-ico{background:var(--line-2);}
[data-theme="dark"] .milestone.done .milestone-ico{background:rgba(70,218,137,.18);}
[data-theme="dark"] .milestone.in-progress .milestone-ico{background:rgba(245,158,11,.18);}

[data-theme="dark"] .connected-ico{background:rgba(255,255,255,.05);}
[data-theme="dark"] .connected-ico.brand{
  background:rgba(255,255,255,.92);
  border-color:rgba(255,255,255,.08);
}

[data-theme="dark"] .pill-off,
[data-theme="dark"] .tool-ico{background:rgba(255,255,255,.05);color:#9aa9a3;}

[data-theme="dark"] .tag-browser{background:rgba(70,218,137,.14);color:#46da89;}
[data-theme="dark"] .tag-device{background:rgba(74,159,242,.14);color:#78b8f4;}
[data-theme="dark"] .tag-ai{background:rgba(168,85,247,.14);color:#c69bff;}
[data-theme="dark"] .tag-data{background:rgba(245,158,11,.14);color:#fbbf5e;}
[data-theme="dark"] .tag-carbon{background:rgba(15,118,110,.22);color:#5eead4;}
[data-theme="dark"] .tag-hardware{background:rgba(245,158,11,.14);color:#fbbf5e;}
[data-theme="dark"] .tag-developer{background:rgba(239,68,68,.14);color:#fca5a5;}
[data-theme="dark"] .tag-reporting{background:rgba(74,159,242,.14);color:#78b8f4;}

[data-theme="dark"] .badge-green{background:rgba(70,218,137,.14);color:#46da89;}
[data-theme="dark"] .ext-status{background:rgba(70,218,137,.14);color:#46da89;}
[data-theme="dark"] .ext-status-pro{background:rgba(245,158,11,.14);color:#fbbf5e;}
[data-theme="dark"] .pill-on{background:rgba(70,218,137,.14);color:#46da89;}

[data-theme="dark"] .kpi-trend.up{background:rgba(70,218,137,.14);color:#46da89;}
[data-theme="dark"] .kpi-trend.down{background:rgba(239,68,68,.14);color:#f87171;}

[data-theme="dark"] .bar{background:var(--line-2);}
[data-theme="dark"] .bars{border-bottom-color:var(--line);}
[data-theme="dark"] .gauge::before{background:var(--surface);}
[data-theme="dark"] .donut-track{stroke:var(--line-2);}
[data-theme="dark"] .ring-bg,
[data-theme="dark"] .ring-bg-2,
[data-theme="dark"] .ring-bg-3{stroke:rgba(255,255,255,.06);}

[data-theme="dark"] .btn-small.ghost{background:transparent;border-color:var(--line);color:var(--muted);}
[data-theme="dark"] .btn-small.ghost:hover{color:var(--text);border-color:#2a3a33;}
[data-theme="dark"] .btn-small.ghost.danger{color:#f87171;border-color:#4d2420;}

[data-theme="dark"] .danger-section{border-color:#4d2420;}
[data-theme="dark"] .danger-section .settings-head h2{color:#f87171;}
[data-theme="dark"] .form-error{background:#2a1512;color:#f87171;border-color:#4d2420;}

[data-theme="dark"] .browser-frame{box-shadow:0 24px 48px rgba(0,0,0,.55);}
[data-theme="dark"] .browser-bar{background:#15201b;border-bottom-color:var(--line);}
[data-theme="dark"] .browser-url{background:var(--surface);border-color:var(--line);color:var(--muted);}
[data-theme="dark"] .browser-body{background:#0c1612;}
[data-theme="dark"] .ext-popup{background:var(--surface);border-color:var(--line);box-shadow:0 10px 24px rgba(0,0,0,.4);}
[data-theme="dark"] .ext-popup-head strong{color:var(--text);}
[data-theme="dark"] .ext-popup-stat{border-bottom-color:var(--line);}
[data-theme="dark"] .ext-popup-row em{color:var(--text);}
[data-theme="dark"] .ext-popup-head,
[data-theme="dark"] .ext-popup-stat{border-bottom-color:var(--line);}

[data-theme="dark"] .category-tabs button:hover{border-color:#2a3a33;color:var(--text);}
[data-theme="dark"] .category-tabs button em{background:rgba(255,255,255,.06);color:var(--muted);}
[data-theme="dark"] .period-switch button:hover{color:var(--text);}
[data-theme="dark"] .section-label,
[data-theme="dark"] .muted,
[data-theme="dark"] .user-info span{color:var(--muted);}

[data-theme="dark"] .theme-swatch{border-color:var(--line);}
[data-theme="dark"] .theme-swatch.light{background:linear-gradient(145deg,#f4f6f5 0%,#e0e6e4 100%);}
[data-theme="dark"] .theme-swatch.system{background:linear-gradient(90deg,#f4f6f5 50%,#0a1410 50%);}
[data-theme="dark"] .plan-perks li.dim em{background:rgba(245,158,11,.14);color:#fbbf5e;}

/* Skeleton loading shimmer */
.skel{
  position:relative;
  color:transparent !important;
  background:linear-gradient(90deg,var(--line-2) 0%,var(--line) 50%,var(--line-2) 100%);
  background-size:200% 100%;
  animation:skel-shimmer 1.4s ease-in-out infinite;
  border-radius:6px;
  display:inline-block;
  min-width:60px;
}
.skel.skel-w-lg{min-width:120px;}
.skel.skel-w-xl{min-width:180px;}
.skel.skel-block{display:block;width:100%;height:1em;}
.skel *{visibility:hidden;}
@keyframes skel-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
@media (prefers-reduced-motion: reduce){
  .skel{animation:none;}
}

/* ============ Auth pages (login/register) ============ */
body.auth-page{
  display:grid;
  grid-template-columns:minmax(360px,1fr) 1.2fr;
  min-height:100vh;
  background:var(--canvas);
  font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--text);
  margin:0;
}
.auth-brand{
  background:linear-gradient(145deg,#042a22 0%,#07513a 55%,#0a7e50 100%);
  color:#fff;
  padding:48px 56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:32px;
  position:relative;
  overflow:hidden;
}
.auth-brand::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 15% 15%, rgba(70,218,137,.22), transparent 55%),
             radial-gradient(ellipse at 85% 85%, rgba(34,197,94,.18), transparent 55%);
  pointer-events:none;
}
.auth-logo{position:relative;}
.auth-logo img{
  width:140px;
  filter:brightness(0) invert(1);
  opacity:.95;
}
.auth-brand-copy{position:relative;max-width:440px;}
.auth-brand-copy .eyebrow{color:rgba(255,255,255,.72);margin-bottom:14px;}
.auth-brand-copy h2{
  margin:0 0 14px;
  font-size:40px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.04em;
  color:#fff;
}
.auth-brand-copy p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:16px;
  line-height:1.55;
}
.auth-brand-stats{
  list-style:none;
  margin:0;
  padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  position:relative;
}
.auth-brand-stats strong{
  display:block;
  font-size:22px;
  font-weight:800;
  color:#46da89;
  letter-spacing:-.02em;
}
.auth-brand-stats span{
  display:block;
  font-size:11px;
  color:rgba(255,255,255,.62);
  margin-top:4px;
  line-height:1.3;
}

.auth-main{
  display:grid;
  place-items:center;
  padding:48px 24px;
}
.auth-card{
  width:100%;
  max-width:420px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:40px;
}
.auth-card h1{
  margin:0 0 8px;
  font-size:30px;
  font-weight:800;
  letter-spacing:-.03em;
}
.auth-sub{margin:0 0 28px;color:var(--muted);font-size:14px;}
.auth-form{display:flex;flex-direction:column;gap:16px;}
.form-row{display:flex;flex-direction:column;gap:6px;}
.form-row label{font-size:13px;font-weight:700;color:var(--text);}
.form-row input,.form-row select{
  height:42px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:9px;
  font-family:inherit;
  font-size:14px;
  background:#fff;
  color:var(--text);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.form-row input:focus,.form-row select:focus{
  outline:none;
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(7,150,74,.12);
}
.form-hint{font-size:11px;color:var(--muted);}
.form-error{
  background:#fdecec;
  border:1px solid #f3c9c5;
  color:#b3261e;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
  font-weight:600;
}
.btn-block{width:100%;margin-top:4px;}
.auth-switch{
  margin:24px 0 0;
  text-align:center;
  font-size:13px;
  color:var(--muted);
}
.auth-switch a{color:var(--green-ink);font-weight:700;}
.auth-switch a:hover{text-decoration:underline;}

/* ============ Password change form (in Settings) ============ */
.password-form{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px;
  align-items:flex-end;
}
.password-form .form-row{min-width:180px;}
.password-form .form-row label{font-size:12px;}
.password-form .form-error{grid-column:1 / -1;}
.password-form button{height:42px;padding:0 22px;}

/* ============ Flash toast ============ */
.flash-toast{
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:100;
  padding:12px 18px;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  color:#fff;
  background:var(--green-ink);
  box-shadow:0 12px 28px rgba(0,0,0,.2);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.flash-toast.err{background:#b3261e;}
.flash-toast.show{opacity:1;transform:translateY(0);}

/* ============ Auth page responsive ============ */
@media (max-width:900px){
  body.auth-page{grid-template-columns:1fr;}
  .auth-brand{padding:32px;gap:20px;}
  .auth-brand-copy h2{font-size:28px;}
  .auth-main{padding:32px 20px;}
  .auth-card{padding:28px;}
}
@media (max-width:500px){
  .auth-brand-stats{grid-template-columns:1fr;}
  .password-form{grid-template-columns:1fr;}
  .flash-toast{left:20px;right:20px;bottom:20px;text-align:center;}
}

/* ============ Responsive ============ */
@media (max-width:1240px){
  .kpi-grid{grid-template-columns:repeat(2,1fr);}
  .recs-grid{grid-template-columns:1fr 1fr;}
  .equiv-grid{grid-template-columns:repeat(3,1fr);}
  .milestones-grid{grid-template-columns:repeat(3,1fr);}
  .spotlight-grid,.ext-featured-grid{grid-template-columns:1fr;}
  .compare-row{grid-template-columns:1fr;}
  .impact-hero{grid-template-columns:1fr;}
  .impact-hero-visual{order:-1;}
  .impact-big{font-size:72px;}
  .scan-cats{grid-template-columns:repeat(3,1fr);}
  .quick-wins{grid-template-columns:1fr;}
  .plan-card{grid-template-columns:1fr;}
}
@media (max-width:1000px){
  body.app{grid-template-columns:72px 1fr;}
  .app-sidebar{width:72px;}
  .sidebar-logo img{width:40px;}
  .sidebar-nav a span{display:none;}
  .sidebar-nav a{justify-content:center;padding:12px;}
  .upgrade-card{display:none;}
  .two-col{grid-template-columns:1fr;}
  .settings-layout{grid-template-columns:1fr;}
  .settings-nav{position:static;flex-direction:row;overflow-x:auto;}
  .scan-top{grid-template-columns:1fr;text-align:left;}
  .scan-actions{align-items:flex-start;flex-direction:row;flex-wrap:wrap;}
  .scan-cats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  .app-content{padding:20px;}
  .app-topbar{padding:12px 20px;gap:12px;}
  .search{max-width:none;}
  .btn-quick span{display:none;}
  .btn-quick{padding:0 12px;}
  .user-info{display:none;}
  .kpi-grid{grid-template-columns:1fr;}
  .recs-grid{grid-template-columns:1fr;}
  .gauge-wrap{flex-direction:column;align-items:flex-start;gap:18px;}
  .welcome-row h1{font-size:22px;}
  .equiv-grid{grid-template-columns:repeat(2,1fr);}
  .milestones-grid{grid-template-columns:repeat(2,1fr);}
  .impact-big{font-size:54px;}
  .impact-hero{padding:24px;}
  .share-card{grid-template-columns:1fr;}
  .share-preview{display:none;}
  .spotlight-stats{grid-template-columns:1fr;}
  .chart-footer{grid-template-columns:1fr;}
  .timeline-footer{grid-template-columns:repeat(2,1fr);}
  .page-stats{width:100%;}
  .scan-cats{grid-template-columns:1fr;}
  .opt-recs li{grid-template-columns:44px 1fr;}
  .opt-recs .opt-save,.opt-recs .opt-ctrls{grid-column:2;}
  .report-list li{grid-template-columns:44px 1fr;}
  .report-actions{grid-column:2;}
  .settings-row{grid-template-columns:1fr;gap:10px;}
  .text-input{min-width:0;width:100%;}
  .reports-controls{width:100%;}
  .date-range{flex:1;}
}