/* ReFund design system — green theme, mobile-first */
:root {
  --green-50:#EEF7EC; --green-100:#D5EBD0; --green-200:#A9D6A0; --green-500:#3E9B3F; --green-600:#2E8B3A; --green-700:#1F7A35; --green-800:#14532A; --ink:#0D2016; --ink-2:#12301F; --gold:#C9A227; --gold-600:#A88410; --gold-50:#FBF4D9;
  --gray-50:#F9FAFB; --gray-100:#F3F4F6; --gray-200:#E5E7EB; --gray-300:#D1D5DB; --gray-500:#6B7280; --gray-600:#4B5563; --gray-700:#374151; --gray-900:#111827;
  --amber:#F59E0B; --red:#DC2626; --blue:#2563EB;
  --radius:12px; --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.06);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--gray-900);background:#fff;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5rem;color:var(--gray-900)}
p{margin:0 0 1rem}
a{color:var(--green-700);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
.container{width:100%;max-width:1160px;margin:0 auto;padding:0 1.25rem}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.65rem 1.25rem;border-radius:10px;border:2px solid transparent;font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;transition:.15s;text-decoration:none!important;line-height:1.2}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-primary{background:var(--green-700);color:#fff}
.btn-primary:hover:not(:disabled){background:var(--green-800)}
.btn-secondary{background:var(--gray-100);color:var(--gray-700);border-color:var(--gray-200)}
.btn-secondary:hover:not(:disabled){background:var(--gray-200)}
.btn-outline{background:transparent;color:var(--green-700);border-color:var(--green-700)}
.btn-outline:hover:not(:disabled){background:var(--green-50)}
.btn-sm{padding:.4rem .85rem;font-size:.85rem;border-radius:8px}
.btn-lg{padding:.85rem 1.6rem;font-size:1.05rem}
.btn-block{display:flex;width:100%}

/* Navbar */
.navbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--gray-200)}
.nav-container{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--gray-900);text-decoration:none!important}
.logo-icon{height:42px;width:auto;flex:none;object-fit:contain}
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-name{font-weight:700;font-size:1.2rem;color:var(--green-700)}
.logo-tagline{font-size:.72rem;color:var(--gray-500)}
.nav-links{display:flex;align-items:center;gap:1.25rem;list-style:none;margin:0;padding:0}
.nav-links a:not(.btn){color:var(--gray-700);font-weight:500}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.nav-toggle span{width:24px;height:2px;background:var(--gray-700);display:block}

/* Hero */
.hero{padding:4.5rem 0 4rem}
.hero-content{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:800;letter-spacing:-.02em}
.highlight{color:var(--green-700)}
.hero-subtitle{font-size:1.15rem;color:var(--gray-600);max-width:34rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 2rem}
.hero-stats{display:flex;gap:2.25rem;flex-wrap:wrap}
.stat-number{display:block;font-size:2rem;font-weight:800;color:var(--green-700)}
.stat-label{font-size:.85rem;color:var(--gray-500)}
.hero-visual{display:grid;gap:1rem}
.hero-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:1.25rem 1.5rem;box-shadow:var(--shadow)}
.hero-card h3{margin:.25rem 0}
.hero-card p{margin:0;color:var(--gray-500);font-size:.92rem}
.hero-card-icon{font-size:1.8rem}
.highlight-card{background:var(--green-700);border-color:var(--green-700)}
.highlight-card h3,.highlight-card p{color:#fff}

/* Sections */
.section{padding:4.5rem 0}
.section-alt{background:var(--gray-50)}
.section-header{text-align:center;max-width:38rem;margin:0 auto 2.5rem}
.section-header h2{font-size:clamp(1.6rem,3.5vw,2.3rem)}
.section-header p{color:var(--gray-500)}
.steps-grid,.impact-grid,.features-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step-card,.impact-card,.feature-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}
.step-card p,.impact-card p{color:var(--gray-600);font-size:.95rem;margin:0}
.step-number{width:38px;height:38px;border-radius:50%;background:var(--green-700);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:.75rem}
.impact-icon,.feature-icon{font-size:2rem;margin-bottom:.5rem}
.feature-card ul{margin:.5rem 0 0;padding-left:1.1rem;color:var(--gray-600);font-size:.93rem}
.cta-section{padding-top:1rem}
.cta-box{background:linear-gradient(135deg,var(--green-700),var(--green-800));color:#fff;border-radius:20px;padding:3rem 1.5rem;text-align:center}
.cta-box h2,.cta-box p{color:#fff}
.cta-box .btn-primary{background:#fff;color:var(--green-800)}
.footer{background:var(--gray-900);color:var(--gray-300);padding-top:3rem}
.footer p{color:var(--gray-300)}
.footer .logo-name{color:#fff}
.footer .logo-tagline{color:var(--gray-300)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem;padding-bottom:2rem}
.footer-links h4{color:#fff;font-size:.95rem}
.footer-links ul{list-style:none;margin:0;padding:0}
.footer-links li{margin:.35rem 0}
.footer-links a{color:var(--gray-300)}
.footer-bottom{border-top:1px solid #1f2937;padding:1rem 0;font-size:.85rem}
.footer-bottom p{margin:0}

/* Auth pages */
.auth-page{background:var(--green-50);min-height:100vh;min-height:100dvh}
.auth-main{display:flex;justify-content:center;padding:2.5rem 1rem 3rem}
.auth-card{width:100%;max-width:440px;background:#fff;border-radius:16px;padding:2rem;box-shadow:var(--shadow);align-self:flex-start}
.auth-card.wide{max-width:640px}
.auth-header{text-align:center;margin-bottom:1.25rem}
.auth-header h1{font-size:1.6rem}
.auth-header p{color:var(--gray-500);margin-bottom:0}
.auth-footer{text-align:center;font-size:.92rem;color:var(--gray-600);margin-top:1rem}
.role-tabs{display:flex;background:var(--gray-100);border-radius:10px;padding:4px;margin-bottom:1.25rem}
.role-tab{flex:1;border:0;background:transparent;padding:.55rem;border-radius:8px;font:inherit;font-weight:600;color:var(--gray-600);cursor:pointer}
.role-tab.active{background:#fff;color:var(--green-700);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* Forms */
.form-group{margin-bottom:1rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.3rem;color:var(--gray-700)}
input,select,textarea{width:100%;padding:.65rem .8rem;border:1px solid var(--gray-300);border-radius:8px;font:inherit;background:#fff;color:var(--gray-900)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-200);border-color:var(--green-600)}
textarea{min-height:80px;resize:vertical}
.form-hint{font-size:.8rem;color:var(--gray-500);margin:.3rem 0 0}
.form-actions{margin-top:1.25rem}
.alert{display:flex;gap:.6rem;padding:.8rem 1rem;border-radius:10px;font-size:.92rem;margin-bottom:1rem}
.alert-info{background:#EFF6FF;color:#1E40AF}
.alert-success{background:var(--green-50);color:var(--green-800)}

/* Dashboard shell */
.dashboard{display:flex;min-height:100vh;min-height:100dvh;background:var(--gray-50)}
.sidebar{width:260px;flex:none;background:#fff;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:60;transition:transform .2s}
.sidebar-header{padding:1.1rem 1.25rem;border-bottom:1px solid var(--gray-200)}
.sidebar-nav{flex:1;padding:1rem .75rem;overflow-y:auto}
.sidebar-nav a{display:flex;align-items:center;gap:.7rem;padding:.65rem .85rem;border-radius:8px;color:var(--gray-700);font-weight:500;margin-bottom:2px;text-decoration:none!important}
.sidebar-nav a:hover{background:var(--gray-100)}
.sidebar-nav a.active{background:var(--green-50);color:var(--green-800)}
.sidebar-footer{padding:1rem;border-top:1px solid var(--gray-200)}
.user-info{display:flex;align-items:center;gap:.7rem;margin-bottom:.75rem}
.user-avatar{width:38px;height:38px;border-radius:50%;background:var(--green-700);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.user-name{font-weight:600;font-size:.92rem}
.user-role{font-size:.78rem;color:var(--gray-500)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55}
.main-content{flex:1;margin-left:260px;min-width:0}
.topbar{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.5rem;gap:1rem;flex-wrap:wrap}
.topbar-title{font-size:1.2rem;margin:0}
.topbar-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.sidebar-toggle{display:none;background:none;border:1px solid var(--gray-300);border-radius:8px;font-size:1.2rem;padding:.2rem .6rem;cursor:pointer}
.page-content{padding:1.5rem}
.stats-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:1.5rem}
.stat-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);padding:1.1rem 1.25rem}
.stat-card-label{font-size:.8rem;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.stat-card-value{font-size:1.7rem;font-weight:800;color:var(--green-700);margin:.2rem 0}
.stat-card-sub{font-size:.82rem;color:var(--gray-500)}
.card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--radius);margin-bottom:1.5rem;scroll-margin-top:90px}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--gray-200);gap:1rem}
.card-header h3{margin:0;font-size:1.05rem}
.card-body{padding:1.25rem}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--gray-500);padding:.6rem .75rem;border-bottom:1px solid var(--gray-200);white-space:nowrap}
td{padding:.7rem .75rem;border-bottom:1px solid var(--gray-100);vertical-align:top}
tr:last-child td{border-bottom:0}
.badge{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;text-transform:capitalize}
.badge-success{background:var(--green-100);color:var(--green-800)}
.badge-warning{background:#FEF3C7;color:#92400E}
.badge-danger{background:#FEE2E2;color:#991B1B}
.badge-info{background:#DBEAFE;color:#1E40AF}
.empty-state{text-align:center;padding:2rem 1rem;color:var(--gray-500)}
.empty-state-icon{font-size:2.2rem;margin-bottom:.4rem}
.progress-bar{height:12px;background:var(--gray-200);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--green-500),var(--green-700));border-radius:999px;transition:width .4s}

/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:16px;width:100%;max-width:520px;max-height:92vh;overflow-y:auto}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid var(--gray-200)}
.modal-header h3{margin:0}
.modal-close{background:none;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--gray-500)}
.modal-body{padding:1.25rem}
.modal-footer{display:flex;justify-content:flex-end;gap:.6rem;padding:1rem 1.25rem;border-top:1px solid var(--gray-200)}

/* Toasts */
#toastBox{position:fixed;right:1rem;bottom:1rem;z-index:200;display:flex;flex-direction:column;gap:.5rem;max-width:calc(100vw - 2rem)}
.toast{padding:.75rem 1rem;border-radius:10px;color:#fff;background:var(--gray-700);box-shadow:var(--shadow);font-size:.92rem}
.toast-success{background:var(--green-700)}
.toast-error{background:var(--red)}

/* Responsive */
@media (max-width:900px){
  .hero-content,.footer-grid{grid-template-columns:1fr}
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:none}
  .sidebar-overlay.open{display:block}
  .main-content{margin-left:0}
  .sidebar-toggle{display:inline-block}
}
@media (max-width:720px){
  .nav-toggle{display:flex}
  .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:1rem 1.25rem;border-bottom:1px solid var(--gray-200)}
  .nav-links.open{display:flex}
  .form-row{grid-template-columns:1fr}
  .hero{padding:3rem 0}
}

/* ===== Phase 1 additions ===== */
.muted{color:var(--gray-500);font-size:.9rem;margin-bottom:.25rem}
.muted-2{color:var(--gray-600);font-size:.95rem}
.muted-sm{font-size:.8rem;color:var(--gray-500)}
.sub-h{font-size:.95rem;margin:1.5rem 0 .6rem}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}
.wallet-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem}
.wallet-balance{font-size:2rem;font-weight:800;color:var(--green-700);margin:0}
.wallet-balance small{font-size:.9rem;font-weight:600;color:var(--gray-500)}
.pts-plus{color:var(--green-700)}.pts-minus{color:var(--red)}
.hero-logo{display:block;width:min(100%,340px);height:auto;margin:0 auto 1rem}
.auth-logo{display:block;width:150px;height:auto;margin:0 auto .75rem}
.alert{align-items:flex-start}
a:focus-visible,button:focus-visible,.role-tab:focus-visible{outline:3px solid var(--green-500);outline-offset:2px}

/* Mobile: comfortable touch targets, no iOS zoom on inputs, notch-safe */
@media (max-width:900px){
  input,select,textarea{font-size:16px}
  .btn{min-height:44px}
  .btn-sm{min-height:40px;padding:.5rem .9rem}
  .role-tab{min-height:44px}
  .nav-links a{padding:.35rem 0}
  .topbar{padding:.7rem 1rem;position:sticky;padding-top:max(.7rem,env(safe-area-inset-top))}
  .topbar-title{font-size:1.05rem}
  .page-content{padding:1rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
  .sidebar{padding-top:env(safe-area-inset-top)}
  .modal-overlay{align-items:flex-end;padding:0}
  .modal{max-width:none;border-radius:16px 16px 0 0;max-height:92dvh}
  .modal-footer{position:sticky;bottom:0;background:#fff;padding-bottom:calc(1rem + env(safe-area-inset-bottom))}
  .cta-box{padding:2rem 1.25rem}
  .hero-stats{gap:1.5rem}
}
@media (max-width:720px){
  .auth-card{padding:1.4rem 1.1rem;border-radius:14px}
  .auth-main{padding:1.25rem .75rem 2rem}
  .hero-cta .btn{flex:1 1 100%}
  .stats-row{grid-template-columns:1fr 1fr;gap:.7rem}
  .stat-card{padding:.85rem}
  .stat-card-value{font-size:1.35rem}
  #toastBox{left:1rem;right:1rem;bottom:auto;top:calc(.75rem + env(safe-area-inset-top))}
  .btn-row .btn{flex:1 1 100%}
  .topbar-actions .btn{flex:1}

  /* tables become stacked cards; cell labels come from data-label (set by makeTablesResponsive) */
  .table-wrap{overflow:visible}
  table.stack thead,table thead{position:absolute;left:-9999px}
  table,tbody,tr,td{display:block;width:100%}
  tr{border:1px solid var(--gray-200);border-radius:10px;padding:.35rem .8rem;margin-bottom:.75rem;background:#fff}
  td{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;text-align:right;border-bottom:1px solid var(--gray-100);padding:.5rem 0;word-break:break-word}
  td:last-child{border-bottom:0}
  td::before{content:attr(data-label);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:var(--gray-500);text-align:left;flex:none;max-width:45%}
  td:empty{display:none}
  td[data-label=""]::before,td:not([data-label])::before{content:none}
  td:not([data-label]),td[data-label=""]{justify-content:flex-end}
  .card-body{padding:1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== Brand theme v2: deep green, gold, ink (matches the logo) ===== */
.ic{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.18em;flex:none}
.ic svg{width:1.15em;height:1.15em}
h1,h2,h3{letter-spacing:-.015em}
body{background:#fff}

.btn{border-radius:12px;transition:transform .15s,box-shadow .15s,background .15s}
.btn-primary{background:linear-gradient(180deg,var(--green-600),var(--green-800));box-shadow:0 4px 14px rgba(20,83,42,.28)}
.btn-primary:hover:not(:disabled){background:linear-gradient(180deg,var(--green-700),var(--green-800));transform:translateY(-1px);box-shadow:0 6px 18px rgba(20,83,42,.35)}
.btn-gold{background:linear-gradient(180deg,#D9B43A,var(--gold));color:var(--ink);box-shadow:0 4px 14px rgba(201,162,39,.35)}
.btn-gold:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.04)}
.btn-outline{border-color:var(--green-700);color:var(--green-800)}
.btn .ic svg{width:1.05em;height:1.05em}

/* Navbar */
.navbar{background:rgba(255,255,255,.92);box-shadow:0 1px 0 var(--gray-200)}
.logo-name{font-weight:800;letter-spacing:-.02em;color:var(--green-800)}
.logo-tagline{letter-spacing:.06em;text-transform:uppercase;font-size:.62rem;font-weight:600;color:var(--gold-600)}

/* Hero */
/* HERO: photo clearly visible; text sits on a soft frosted panel */
.hero{position:relative;overflow:hidden;padding:4.5rem 0 4.5rem;background-color:#F7FBF5;
  background-image:linear-gradient(100deg,rgba(255,255,255,.10),rgba(255,255,255,0) 60%),url('../assets/hero-bg.jpg');
  background-image:linear-gradient(100deg,rgba(255,255,255,.10),rgba(255,255,255,0) 60%),image-set(url('../assets/hero-bg.webp') type('image/webp'),url('../assets/hero-bg.jpg') type('image/jpeg'));
  background-size:cover;background-position:center;background-repeat:no-repeat}
.hero-text{background:rgba(255,255,255,.80);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:26px;padding:2.2rem 2.4rem;box-shadow:0 18px 50px rgba(20,60,30,.18)}
.hero h1{font-size:clamp(2.2rem,5.2vw,3.6rem);font-weight:800;line-height:1.08}
.highlight{background:linear-gradient(90deg,var(--green-700),var(--green-500));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-subtitle{color:var(--gray-600)}
.hero-stats{padding-top:.5rem;border-top:1px solid var(--gray-200);margin-top:.5rem;padding-top:1.25rem}
.stat-number{font-size:1.9rem;font-weight:800;color:var(--green-800)}
.hero-visual{gap:.85rem}
.hero-logo{background:#fff;border-radius:24px;padding:1.25rem 1.5rem;box-shadow:0 20px 50px rgba(20,83,42,.14),0 0 0 1px rgba(20,83,42,.06);margin-bottom:.25rem}
.hero-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:1rem;align-items:center;padding:1rem 1.25rem;border-radius:16px}
.hero-card .hero-card-icon{grid-row:1/3}
.hero-card h3{margin:0;font-size:1rem}
.hero-card p{font-size:.88rem}
.highlight-card{background:linear-gradient(135deg,var(--ink-2),var(--green-800));border-color:transparent}
.highlight-card .hero-card-icon{background:rgba(201,162,39,.18);color:#E6C55A}

/* Icon tiles */
.hero-card-icon,.impact-icon,.feature-icon{width:46px;height:46px;border-radius:13px;background:var(--green-50);color:var(--green-700);display:inline-flex;align-items:center;justify-content:center;font-size:1.35rem;margin-bottom:.75rem}
.hero-card-icon{margin:0}
.hero-card-icon svg,.impact-icon svg,.feature-icon svg{width:24px;height:24px}
.feature-icon{background:var(--gold-50);color:var(--gold-600)}

/* Sections & cards */
.section{padding:5rem 0}
.section-header h2{font-weight:800}
.step-card,.impact-card,.feature-card{border-radius:18px;border-color:#E6EDE4;transition:transform .2s,box-shadow .2s}
.step-card:hover,.impact-card:hover,.feature-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,83,42,.12)}
.step-number{background:linear-gradient(180deg,#DDB93F,var(--gold));color:var(--ink);box-shadow:0 4px 10px rgba(201,162,39,.4)}
.section-alt{background:#F6F9F4}
.cta-box{background:radial-gradient(600px 240px at 90% 0%,rgba(201,162,39,.28),transparent 60%),linear-gradient(135deg,var(--ink-2),var(--green-800));border-radius:24px}
.cta-box .btn-primary{background:linear-gradient(180deg,#D9B43A,var(--gold));color:var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.footer{background:var(--ink)}
.footer-bottom{border-top-color:rgba(255,255,255,.08)}
.footer .logo-tagline{color:#E6C55A}

/* Auth */
.auth-page{background-color:#F3F9F1;background-image:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),url('../assets/hero-bg.jpg');background-image:linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),image-set(url('../assets/hero-bg.webp') type('image/webp'),url('../assets/hero-bg.jpg') type('image/jpeg'));background-size:cover;background-position:65% center;background-repeat:no-repeat;background-attachment:fixed}
.auth-card{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.auth-page .navbar{background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.auth-card{border-radius:22px;box-shadow:0 24px 60px rgba(20,83,42,.14);border-top:4px solid var(--gold)}
.role-tabs{background:#EDF3EB}
.role-tab.active{color:var(--green-800)}
.reg-steps{display:flex;list-style:none;margin:0 0 1.25rem;padding:0;gap:.5rem}
.reg-steps li{flex:1;text-align:center;font-size:.76rem;font-weight:700;color:var(--gray-500);padding-top:.55rem;border-top:4px solid var(--gray-200);border-radius:2px}
.reg-steps li.on{color:var(--green-800);border-top-color:var(--green-600)}
.reg-steps li.done{color:var(--green-700);border-top-color:var(--green-500)}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(62,155,63,.25);border-color:var(--green-600)}
.alert .ic svg{width:1.3em;height:1.3em}
.alert-info{background:#EAF3FB}
.alert-success{background:var(--green-50)}

/* Dashboards: dark sidebar */
.dashboard{background-color:#F4F8F2;background-image:linear-gradient(rgba(244,248,242,.88),rgba(244,248,242,.88)),url('../assets/hero-bg.jpg');background-size:cover;background-position:center;background-attachment:fixed}
.sidebar{background:linear-gradient(180deg,var(--ink),var(--ink-2));border-right:0;color:#D6E4DA}
.sidebar-header{border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar .logo-name{color:#fff}
.sidebar .logo-tagline{color:#E6C55A}
.sidebar-nav a{color:#C6D6CB;border-radius:10px;position:relative}
.sidebar-nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar-nav a.active{background:rgba(255,255,255,.1);color:#fff}
.sidebar-nav a.active::before{content:"";position:absolute;left:-.75rem;top:22%;bottom:22%;width:4px;border-radius:0 4px 4px 0;background:var(--gold)}
.nav-icon{display:inline-flex;color:#8FBF98}
.sidebar-nav a.active .nav-icon{color:#E6C55A}
.nav-icon svg{width:18px;height:18px}
.sidebar-footer{border-top:1px solid rgba(255,255,255,.08)}
.sidebar .user-name{color:#fff}.sidebar .user-role{color:#9DB5A4}
.sidebar .btn-secondary{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.14)}
.sidebar .btn-secondary:hover:not(:disabled){background:rgba(255,255,255,.16)}
.user-avatar{background:linear-gradient(180deg,#DDB93F,var(--gold));color:var(--ink)}
.topbar{background:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
.sidebar-toggle svg{width:20px;height:20px;display:block}
.stat-card{border-radius:16px;border:1px solid #E6EDE4;position:relative;overflow:hidden}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--gold),var(--green-500))}
.stat-card-value{color:var(--green-800)}
.card{border-radius:16px;border-color:#E6EDE4;box-shadow:0 1px 2px rgba(13,32,22,.04)}
.card-header h3{font-weight:800}
th{background:#F7FAF6}
.empty-state-icon{display:inline-flex;width:64px;height:64px;border-radius:50%;background:var(--green-50);color:var(--green-600);align-items:center;justify-content:center;margin-bottom:.6rem}
.empty-state-icon svg{width:30px;height:30px}
.badge{letter-spacing:.01em}
.badge-warning{background:var(--gold-50);color:#7A5C05}
.wallet-balance{color:var(--green-800)}
.modal{border-radius:20px}
.toast{border-radius:12px}
.back-link .ic svg{width:1em;height:1em}
@media (max-width:900px){.section{padding:3.5rem 0}.sidebar-nav a.active::before{left:-.75rem}}

.auth-logo{width:110px}
.sidebar .logo-icon{background:#fff;border-radius:12px;padding:3px 4px;height:42px;width:auto}
.footer .logo-icon{background:#fff;border-radius:12px;padding:3px 4px}

/* Photo gallery */
.gallery{display:grid;grid-template-columns:1.3fr 1fr 1.3fr;grid-auto-rows:400px;gap:1.25rem}
.gallery figure{margin:0;position:relative;border-radius:22px;overflow:hidden;height:100%;box-shadow:0 14px 36px rgba(20,60,30,.18);background:#dfe9dc}
.gallery picture,.gallery img{display:block;width:100%;height:100%}
.gallery img{object-fit:cover;transition:transform .6s ease}
.gallery figure:hover img{transform:scale(1.06)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:3rem 1.2rem 1.1rem;color:#fff;font-weight:700;background:linear-gradient(180deg,transparent,rgba(8,40,20,.88))}
.gallery figcaption span{display:block;font-weight:500;font-size:.88rem;opacity:.9;margin-top:.15rem}
/* Full-width photo band */
.photo-band{position:relative;padding:6rem 0;text-align:center;color:#fff;background-color:#14532A;
  background-image:linear-gradient(rgba(8,45,22,.50),rgba(8,45,22,.62)),url('../assets/hero-bg.jpg');background-size:cover;background-position:center}
.photo-band h2{color:#fff;font-size:clamp(1.8rem,4.4vw,3rem);font-weight:800;margin:0 0 .6rem;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.photo-band p{color:#fff;max-width:620px;margin:0 auto 1.6rem;font-size:1.1rem;text-shadow:0 1px 10px rgba(0,0,0,.35)}
.photo-band .btn-primary{background:linear-gradient(180deg,#D9B43A,var(--gold));color:var(--ink);box-shadow:0 8px 22px rgba(0,0,0,.28)}
/* CTA photo background */
.cta-section{padding:4.5rem 0;background-image:linear-gradient(rgba(240,248,238,.55),rgba(240,248,238,.70)),url('../assets/photo-yard.jpg');background-size:cover;background-position:center}
.cta-box{box-shadow:0 24px 60px rgba(8,40,20,.35)}
/* Impact and How-it-works: faint photos */
#impact.section-alt{background-image:linear-gradient(rgba(246,249,244,.90),rgba(246,249,244,.93)),url('../assets/photo-school.jpg');background-size:cover;background-position:center}
#how-it-works.section{background-image:linear-gradient(rgba(255,255,255,.93),rgba(255,255,255,.95)),url('../assets/photo-bins.jpg');background-size:cover;background-position:center 30%}

/* ===== PHONE / TABLET (kept last so nothing overrides it) ===== */
@media (max-width:900px){
  /* show the WHOLE photo as a banner on top, text below on white */
  .hero{padding:calc(47.8vw + 1.5rem) 0 2.5rem;background-color:#fff;
    background-image:linear-gradient(180deg,rgba(255,255,255,0) 72%,#fff 100%),url('../assets/hero-bg.jpg');
    background-size:100% 47.8vw,100% auto;background-position:top center,top center;background-repeat:no-repeat}
  .hero-text{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;padding:0;border-radius:0}
  .auth-page{background-attachment:scroll;background-position:78% center}
  .dashboard{background-attachment:scroll}
  .gallery{grid-template-columns:1fr;grid-auto-rows:240px}
  .photo-band{padding:4rem 0}
}