@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  --bg:#f8fcf3;
  --bg-soft:#f1f8e7;
  --panel:#ffffff;
  --panel-soft:#fcfef9;
  --panel-dark:#edf6df;
  --panel-dark-2:#e3f0cf;
  --ink:#223024;
  --muted:#6c7a6d;
  --line:#dfe9d6;
  --line-soft:#edf4e6;
  --brand:#c6f05a;
  --brand-strong:#a9de2b;
  --accent:#8cbc63;
  --accent-deep:#6ea548;
  --teal:#58b9a7;
  --purple:#8b82ef;
  --orange:#f3b34a;
  --red:#ef7482;
  --success:#2f9b57;
  --shadow-sm:0 8px 24px rgba(55,85,42,.05);
  --shadow-md:0 18px 40px rgba(55,85,42,.08);
  --shadow-lg:0 24px 70px rgba(55,85,42,.12);
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 0 0, rgba(70,168,255,.08), transparent 28%),
    linear-gradient(180deg,#eff4f9 0,#f7f9fc 340px,#f4f7fb 100%);
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
.hidden{display:none!important}

.shell{min-height:100vh}
.topbar{
  height:72px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 26px;
  position:sticky;top:0;z-index:60;
  color:var(--ink);
  background:rgba(250,253,245,.96);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.logo{
  display:flex;align-items:center;gap:12px;
  font-size:20px;font-weight:900;letter-spacing:-.4px
}
.logo-box{
  width:36px;height:36px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),#e1ff97);
  color:#081520;font-weight:1000;
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px rgba(198,240,90,.25)
}
.topbar .spacer{flex:1}
.top-link{
  padding:10px 13px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  color:#d6e3ee;font-weight:700;
  transition:.18s
}
.top-link:hover{background:rgba(255,255,255,.08);color:#fff}

.layout{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:calc(100vh - 72px)
}
.sidebar{
  background:linear-gradient(180deg,#f4faea,#ebf5de);
  color:#556458;
  padding:20px 14px;
  border-right:1px solid rgba(255,255,255,.05)
}
.side-head{
  padding:16px;
  border-radius:14px;
  background:linear-gradient(135deg,#fbfef7,#f2f8ea);
  border:1px solid var(--line);
  box-shadow:0 4px 14px rgba(55,85,42,.04)
}
.side-head strong{display:block;color:var(--ink);font-size:15px}
.side-head small{display:block;margin-top:4px;color:var(--muted);font-size:12px}

.nav{display:grid;gap:6px;margin-top:14px}
.nav button{
  width:100%;
  text-align:left;
  border:0;
  border-radius:12px;
  padding:12px 14px;
  color:#5d6a60;
  background:transparent;
  font-weight:700;
  transition:.18s;
  position:relative
}
.nav button:hover,.nav button.active{
  background:linear-gradient(90deg,rgba(198,240,90,.12),rgba(70,168,255,.09));
  color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(198,240,90,.08)
}
.nav button.active:before{
  content:"";
  position:absolute;left:0;top:10px;bottom:10px;width:3px;
  border-radius:4px;
  background:linear-gradient(180deg,var(--brand),var(--accent))
}

.content{padding:28px;min-width:0}
.view{display:none}
.view.active{display:block}

.page-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:18px;margin-bottom:18px
}
.page-head h1{
  margin:0;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.9px
}
.page-head h2{margin:0}
.page-head p{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.5}

.hero{
  margin-bottom:20px;
  padding:30px;
  border-radius:18px;
  color:var(--ink);
  overflow:hidden;
  position:relative;
  background:
    radial-gradient(circle at 82% 20%,rgba(70,168,255,.24),transparent 22%),
    radial-gradient(circle at 74% 78%,rgba(198,240,90,.13),transparent 18%),
    linear-gradient(120deg,#081520,#0c2435 58%,#0b2f46 100%);
  box-shadow:var(--shadow-md)
}
.hero:after{
  content:"";
  position:absolute;right:-90px;top:-110px;
  width:320px;height:320px;border-radius:50%;
  background:rgba(255,255,255,.04)
}
.hero .tag{
  color:var(--brand);
  font-size:12px;
  font-weight:800;
  letter-spacing:1.7px;
  text-transform:uppercase
}
.hero h1{
  margin:10px 0 12px;
  font-size:40px;
  line-height:1.02;
  letter-spacing:-1.6px;
  max-width:750px
}
.hero p{
  margin:0;
  max-width:760px;
  color:#617263;
  line-height:1.6;
  font-size:15px
}

.btn{
  border:1px solid transparent;
  border-radius:10px;
  padding:10px 14px;
  font-weight:800;
  transition:.18s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),#dffb92);
  color:#081520;
  box-shadow:0 10px 24px rgba(198,240,90,.24)
}
.btn-dark{background:#e8f3d7;color:var(--ink)}
.btn-light{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-accent{background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:#fff}
.btn-danger{background:linear-gradient(135deg,var(--red),#ff7e8d);color:#fff}

.grid{display:grid;gap:16px}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.two{grid-template-columns:1.45fr .95fr}
.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

.card{
  background:linear-gradient(180deg,#fff,#fbfdff);
  border:1px solid rgba(148,163,184,.22);
  border-radius:16px;
  padding:18px;
  box-shadow:var(--shadow-sm)
}
.card h2,.card h3{margin:0 0 10px;letter-spacing:-.3px}
.card h2{font-size:20px}
.card h3{font-size:17px}
.muted{color:var(--muted);font-size:13px;line-height:1.55}

.stat{
  padding:18px;
  border-top:4px solid transparent;
  background:
    linear-gradient(180deg,#fff,#fcfdff);
  position:relative
}
.stat:nth-child(1){border-top-color:var(--accent)}
.stat:nth-child(2){border-top-color:var(--brand)}
.stat:nth-child(3){border-top-color:var(--purple)}
.stat:nth-child(4){border-top-color:var(--teal)}
.stat strong{
  display:block;
  margin:12px 0 6px;
  font-size:30px;
  letter-spacing:-.8px
}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;
  font-size:11px;font-weight:800
}
.green{background:#dff4e8;color:#146c3b}
.blue{background:#e5f4ff;color:#0d6ea9}
.orange{background:#fff1d8;color:#9a6400}
.red{background:#ffe5e8;color:#a12a39}
.gray{background:#eef3f7;color:#4f5f6d}
.purple{background:#edeaff;color:#5e50dd}

table{width:100%;border-collapse:collapse}
th,td{
  padding:13px 10px;
  border-bottom:1px solid var(--line-soft);
  text-align:left;font-size:13px
}
th{
  font-size:11px;text-transform:uppercase;
  letter-spacing:.8px;color:var(--muted);font-weight:800
}

.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.input,.field input,.field select,.field textarea{
  border:1px solid var(--line);
  background:#fff;
  padding:11px 12px;
  border-radius:10px;
  min-width:220px;
}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(70,168,255,.12)
}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field{display:grid;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:12px;font-weight:800;color:#425466}

.list{display:grid;gap:10px}
.list-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 14px;
  background:var(--panel-soft);
  border:1px solid var(--line-soft);
  border-radius:12px
}

.chart{
  height:240px;
  display:flex;align-items:flex-end;gap:12px;
  padding-top:22px
}
.bar-wrap{flex:1;text-align:center;font-size:11px;color:var(--muted)}
.bar,.bar.alt{
  border-radius:10px 10px 4px 4px;
  min-height:20px;margin-bottom:8px
}
.bar{background:linear-gradient(180deg,#7cc5ff,#2994ef)}
.bar.alt{background:linear-gradient(180deg,#d7f68b,#b8ea35)}

.sparkline{height:58px;display:flex;align-items:end;gap:4px}
.sparkline i{
  display:block;flex:1;
  background:linear-gradient(180deg,#7bc4ff,#1176d1);
  border-radius:4px 4px 0 0
}

.metric{
  padding:14px;
  border-radius:14px;
  background:linear-gradient(180deg,#fff,#f9fbfd);
  border:1px solid var(--line-soft)
}
.metric .label{
  font-size:11px;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.8px
}
.metric .value{
  margin:8px 0 4px;
  font-size:24px;font-weight:900;letter-spacing:-.6px
}
.metric .delta{font-size:12px;font-weight:800;color:var(--success)}

.ai-insight{
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(111,99,255,.14);
  background:linear-gradient(135deg,rgba(111,99,255,.06),rgba(70,168,255,.04));
}
.ai-insight strong{display:block;margin-bottom:4px}

.donut{
  width:158px;height:158px;border-radius:50%;
  background:conic-gradient(var(--accent) 0 44%,var(--brand) 44% 72%,var(--purple) 72% 88%,#e7edf4 88%);
  display:grid;place-items:center;margin:8px auto 12px
}
.donut:after{
  content:"88%";
  width:98px;height:98px;border-radius:50%;
  background:#fff;
  display:grid;place-items:center;
  font-size:24px;font-weight:900;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.03)
}
.funnel{display:grid;gap:8px}
.funnel div{
  height:36px;border-radius:10px;
  background:linear-gradient(90deg,#2e9df4,#69bbff);
  color:var(--ink);font-weight:800;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 12px
}
.funnel div:nth-child(2){width:86%}
.funnel div:nth-child(3){width:68%}
.funnel div:nth-child(4){width:42%}

.executive-chart{
  background:
    linear-gradient(180deg,rgba(70,168,255,.02),rgba(70,168,255,.01)),
    repeating-linear-gradient(0deg,#fff,#fff 43px,#f3f7fb 43px,#f3f7fb 44px);
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:18px;
  position:relative;
  overflow:hidden;
}
.executive-chart svg{width:100%;height:290px;display:block}
.executive-chart .gridline{stroke:#dfe7ef;stroke-width:1}
.executive-chart .axis{stroke:#b9c7d5;stroke-width:1.1}
.executive-chart .line-a{
  fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round
}
.executive-chart .line-b{
  fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round;stroke-linejoin:round
}
.executive-chart .area-a{fill:rgba(70,168,255,.12)}
.executive-chart .area-b{fill:rgba(198,240,90,.12)}
.executive-chart .point-a{fill:var(--accent);stroke:#fff;stroke-width:2.5}
.executive-chart .point-b{fill:var(--brand);stroke:#fff;stroke-width:2.5}
.chart-legend{
  display:flex;gap:16px;flex-wrap:wrap;margin-bottom:12px
}
.chart-legend span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;color:#425466
}
.chart-legend i{
  width:10px;height:10px;border-radius:50%;display:inline-block
}
.chart-foot{
  margin-top:8px;
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  color:var(--muted);font-size:12px
}
.chart-ai{
  margin-top:14px;
  padding:14px;
  background:linear-gradient(135deg,#f9fbff,#f4f7ff);
  border:1px solid rgba(111,99,255,.14);
  border-radius:14px
}
.chart-ai strong{display:block;font-size:13px;margin-bottom:4px}

.segment-bars{display:grid;gap:10px}
.segment-bars .row{
  display:grid;grid-template-columns:110px 1fr 58px;
  gap:10px;align-items:center;font-size:12px
}
.segment-bars .track{
  height:10px;background:#edf3f8;border-radius:999px;overflow:hidden
}
.segment-bars .fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),#77c6ff)
}
.segment-bars .fill.alt{background:linear-gradient(90deg,var(--brand),#e1ff95)}
.segment-bars .fill.purple{background:linear-gradient(90deg,var(--purple),#8a7eff)}
.segment-bars .fill.teal{background:linear-gradient(90deg,var(--teal),#3fd7c4)}

.kanban{display:grid;grid-template-columns:repeat(4,minmax(230px,1fr));gap:12px;overflow:auto}
.column{
  background:#edf3f8;
  padding:10px;border-radius:14px;
  border:1px solid var(--line-soft);min-height:350px
}
.column h3{display:flex;justify-content:space-between}
.ticket{
  background:#fff;border:1px solid var(--line);
  border-radius:12px;border-left:4px solid var(--accent);
  padding:12px;margin-bottom:8px
}
.ticket strong{display:block}

.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.product{
  background:#fff;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)
}
.product img{width:100%;height:150px;object-fit:cover}
.product-body{padding:14px}
.product h3{margin:0 0 4px}
.price{font-weight:900;color:var(--accent-deep)}

.pos{display:grid;grid-template-columns:1fr 340px;gap:14px}
.cart{
  position:sticky;top:86px;height:max-content
}
.cart-row{
  display:flex;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line-soft)
}
.qty button{
  border:1px solid var(--line);background:#fff;width:28px;height:28px;border-radius:8px
}
.total{
  display:flex;justify-content:space-between;
  font-weight:900;font-size:18px;padding:14px 0;
  border-top:2px solid #0d2132;margin-top:10px
}

.customer-top{
  background:rgba(250,253,245,.96);
  color:var(--ink);
  padding:16px 4%;
  display:flex;align-items:center;gap:18px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(14px)
}
.customer-top .links{display:flex;gap:18px;margin-left:auto}
.customer-top button{
  background:transparent;color:#617263;border:0;
  font-weight:700;font-size:14px
}
.customer-top button.active,.customer-top button:hover{color:var(--brand)}

.customer-hero{
  min-height:470px;
  margin:0;
  color:var(--ink);
  display:flex;align-items:center;
  padding:6%;
  background:
    linear-gradient(90deg,rgba(8,21,32,.92),rgba(8,21,32,.38)),
    url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1800&q=85') center/cover
}
.customer-hero h1{
  font-size:64px;line-height:.95;
  max-width:900px;margin:10px 0 16px;
  letter-spacing:-2.6px
}
.customer-hero p{
  font-size:18px;max-width:680px;color:#617263;line-height:1.6
}
.searchbar{
  display:flex;max-width:760px;margin-top:24px;
  background:#fff;border-radius:14px;padding:6px;box-shadow:var(--shadow-lg)
}
.searchbar input{
  flex:1;border:0;background:transparent;padding:14px 14px;font-size:15px
}
.searchbar input:focus{outline:none}
.market{padding:28px 4%}

.restaurant-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.restaurant{
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow-sm);border-radius:16px;overflow:hidden
}
.restaurant img{width:100%;height:210px;object-fit:cover}
.restaurant .body{padding:16px}
.restaurant h3{margin:0;font-size:18px}
.meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin:10px 0 12px}

.menu-layout{display:grid;grid-template-columns:1fr 360px;gap:16px;padding:24px 4%}
.food-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.food{
  display:grid;grid-template-columns:1fr 110px;
  background:#fff;border:1px solid var(--line);padding:12px;
  border-radius:14px
}
.food img{width:110px;height:100px;object-fit:cover;border-radius:10px}
.food h3{margin:0 0 5px;font-size:16px}

.map{
  height:420px;border:1px solid var(--line);
  position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)),url('https://tile.openstreetmap.org/13/5187/3250.png') center/cover
}
.pin{
  position:absolute;width:44px;height:44px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--panel-dark);color:var(--ink);border:4px solid #fff;
  box-shadow:0 10px 20px rgba(15,23,42,.18)
}
.pin.a{left:12%;top:18%}
.pin.b{left:50%;top:55%;background:var(--accent);animation:move 4s infinite alternate}
.pin.c{right:12%;bottom:18%;background:var(--success)}
@keyframes move{to{transform:translate(80px,-45px)}}

.progress{display:grid;grid-template-columns:repeat(5,1fr);margin:20px 0}
.step{text-align:center}
.step b{
  display:grid;place-items:center;
  width:34px;height:34px;margin:auto;border-radius:50%;
  background:#dfe7ef
}
.step.done b,.step.active b{background:var(--success);color:#fff}
.step span{display:block;font-size:11px;margin-top:7px}

.launcher{
  min-height:100vh;color:var(--ink);padding:56px 5%;
  background:
    radial-gradient(circle at 80% 20%,rgba(198,240,90,.20),transparent 24%),
    linear-gradient(120deg,#f3fae8,#eaf4da)
}
.launcher h1{
  font-size:72px;margin:8px 0;
  letter-spacing:-3px;line-height:.94
}
.launcher p{color:#617263;max-width:760px;font-size:18px;line-height:1.65}
.launch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:38px}
.launch-card{
  background:rgba(255,255,255,.70);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  padding:24px;border-radius:18px;
  box-shadow:var(--shadow-md)
}
.launch-card h2{font-size:28px;letter-spacing:-.6px}
.launch-card p{font-size:14px;min-height:68px;color:#d5e2ec}
.launch-card a{
  display:inline-block;
  background:#fff;color:#081520;padding:12px 16px;
  font-weight:900;border-radius:10px
}

.toast{
  position:fixed;right:20px;bottom:20px;z-index:100;
  background:#081520;color:var(--ink);padding:14px 16px;
  border-radius:12px;border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  transform:translateY(100px);transition:.25s
}
.toast.show{transform:translateY(0)}

.modal-bg{
  position:fixed;inset:0;display:none;align-items:center;justify-content:center;
  padding:20px;z-index:90;background:rgba(7,20,32,.58);backdrop-filter:blur(6px)
}
.modal-bg.show{display:flex}
.modal{
  background:#fff;width:min(640px,100%);
  max-height:90vh;overflow:auto;padding:22px;
  border-radius:18px;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,255,255,.3)
}
.modal:before{
  content:"";
  display:block;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--accent),var(--purple));
  margin:-6px 0 18px
}

.payment-shell{
  max-width:960px;margin:auto;background:white;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
  border-radius:20px;overflow:hidden
}
.payment-head{
  background:linear-gradient(120deg,#eff8e2,#e6f2d3);
  color:var(--ink);padding:24px 28px;display:flex;justify-content:space-between;align-items:center
}
.payment-body{display:grid;grid-template-columns:1.1fr .9fr}
.payment-left,.payment-right{padding:26px}
.payment-right{background:#f8fafc;border-left:1px solid var(--line)}
.pay-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.pay-tab{
  padding:12px;border:1px solid var(--line);
  background:#fff;text-align:center;font-weight:800;
  border-radius:10px
}
.pay-tab.active{
  border-color:var(--accent);
  background:#eff8ff;color:#0d6ea9;
  box-shadow:0 0 0 4px rgba(70,168,255,.10)
}
.card-preview{
  background:linear-gradient(135deg,#bce96a,#92ca55);
  color:var(--ink);padding:20px;border-radius:18px;
  min-height:190px;position:relative;overflow:hidden;
  box-shadow:inset 0 1px rgba(255,255,255,.06)
}
.card-preview:after{
  content:"";position:absolute;
  width:220px;height:220px;border-radius:50%;
  background:rgba(198,240,90,.08);right:-80px;bottom:-100px
}
.card-number{font-size:22px;letter-spacing:2px;margin:45px 0 24px;font-family:monospace}

.track-shell{max-width:1250px;margin:auto}
.track-summary{display:grid;grid-template-columns:1.3fr .7fr;gap:16px}
.track-panel{
  background:white;border:1px solid var(--line);
  border-radius:18px;padding:18px;box-shadow:var(--shadow-sm)
}
.track-map{
  height:470px;border-radius:16px;overflow:hidden;
  position:relative;background:
    linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16)),
    url('https://tile.openstreetmap.org/13/5187/3250.png') center/cover
}
.route-line{
  position:absolute;left:17%;top:27%;width:65%;height:48%;
  border:5px dashed var(--accent);
  border-left-color:transparent;border-bottom-color:transparent;
  transform:rotate(7deg);border-radius:50%
}
.driver-card{
  display:flex;align-items:center;gap:14px;
  padding:15px;background:#f8fafc;
  border:1px solid var(--line);border-radius:14px
}
.driver-avatar{
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--purple));
  color:var(--ink);font-weight:1000
}
.timeline{display:grid;gap:0}
.timeline-item{
  display:grid;grid-template-columns:28px 1fr;gap:10px;
  position:relative;padding-bottom:18px
}
.timeline-item:not(:last-child):before{
  content:"";position:absolute;left:13px;top:25px;bottom:0;width:2px;background:#dbe4ec
}
.timeline-dot{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:#e6edf3;
  font-size:12px;font-weight:1000
}
.timeline-item.done .timeline-dot,.timeline-item.active .timeline-dot{
  background:var(--success);color:#fff
}
.timeline-item.active .timeline-dot{box-shadow:0 0 0 6px rgba(31,157,85,.12)}

@media(max-width:1120px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two,.three,.pos,.menu-layout,.payment-body,.metric-row,.track-summary{grid-template-columns:1fr}
  .product-grid,.restaurant-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cart{position:relative;top:auto}
  .payment-right{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:760px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:relative}
  .nav{grid-template-columns:1fr 1fr}
  .content{padding:16px}
  .stats,.product-grid,.restaurant-grid,.food-grid,.launch-grid,.form-grid{grid-template-columns:1fr}
  .hero h1,.customer-hero h1,.launcher h1{font-size:42px}
  .customer-top .links{display:none}
  .topbar .top-link{display:none}
  .searchbar{display:grid;background:transparent;box-shadow:none;padding:0}
  .searchbar input{background:#fff;border-radius:12px;margin-bottom:8px}
}


/* Green-first refinement */
body{
  background:
    radial-gradient(circle at 0 0, rgba(198,240,90,.12), transparent 28%),
    linear-gradient(180deg,#f1f7ea 0,#f8fbf4 340px,#f6f9f3 100%);
}
.logo-box{background:linear-gradient(135deg,var(--brand),#e2ff9d)}
.btn-primary{
  background:linear-gradient(135deg,var(--brand),#def98b);
  color:#152112;
  box-shadow:0 10px 24px rgba(198,240,90,.28)
}
.btn-accent{
  background:linear-gradient(135deg,var(--accent-deep),var(--accent));
  color:#fff
}
.nav button:hover,.nav button.active{
  background:linear-gradient(90deg,rgba(198,240,90,.18),rgba(119,178,85,.10));
}
.hero{
  background:
    radial-gradient(circle at 82% 20%,rgba(198,240,90,.20),transparent 22%),
    radial-gradient(circle at 74% 78%,rgba(140,188,99,.12),transparent 18%),
    linear-gradient(120deg,#f6fbea,#eff8e1 58%,#e8f4d6 100%);
}
.bar{background:linear-gradient(180deg,#c6f05a,#9fd82a)}
.bar.alt{background:linear-gradient(180deg,#98d46c,#5e9d35)}
.executive-chart{
  background:
    linear-gradient(180deg,rgba(198,240,90,.03),rgba(198,240,90,.015)),
    repeating-linear-gradient(0deg,#fff,#fff 43px,#f4f8ef 43px,#f4f8ef 44px);
}
.executive-chart .line-a{stroke:var(--brand-strong)}
.executive-chart .line-b{stroke:var(--teal)}
.executive-chart .area-a{fill:rgba(198,240,90,.18)}
.executive-chart .area-b{fill:rgba(58,169,154,.12)}
.executive-chart .point-a{fill:var(--brand-strong)}
.executive-chart .point-b{fill:var(--teal)}
.metric{
  background:linear-gradient(180deg,#fff,#fcfef8);
}
.ai-insight{
  border:1px solid rgba(93,157,53,.16);
  background:linear-gradient(135deg,rgba(198,240,90,.10),rgba(119,178,85,.06));
}
.chart-ai{
  background:linear-gradient(135deg,#fbfff1,#f4faeb);
  border:1px solid rgba(157,220,26,.18);
}
.donut{
  background:conic-gradient(var(--brand-strong) 0 44%,var(--accent) 44% 72%,var(--teal) 72% 88%,#e7eee2 88%);
}
.donut:after{color:#152112}
.funnel div{
  background:linear-gradient(90deg,#aedd33,#71b04e);
}
.segment-bars .track{background:#edf3e8}
.segment-bars .fill{background:linear-gradient(90deg,var(--brand-strong),#d9fb85)}
.segment-bars .fill.alt{background:linear-gradient(90deg,var(--accent),#94c874)}
.segment-bars .fill.purple{background:linear-gradient(90deg,var(--teal),#59c6b8)}
.segment-bars .fill.teal{background:linear-gradient(90deg,#8acd61,#bde687)}
.searchbar{box-shadow:0 20px 55px rgba(40,66,30,.14)}
.track-map{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.driver-avatar{background:linear-gradient(135deg,var(--brand-strong),var(--accent-deep));}

/* Clearer modern graph components */
.insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mini-chart-card{
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:16px;
  background:linear-gradient(180deg,#fff,#fbfdf8);
}
.mini-chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.mini-chart-head h4{margin:0;font-size:16px;letter-spacing:-.3px}
.mini-chart-head p{margin:4px 0 0;font-size:12px;color:var(--muted)}
.hourly-bars{
  height:220px;
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding-top:18px;
  border-bottom:1px solid var(--line-soft);
}
.hourly-bars .col{
  flex:1;
  text-align:center;
  min-width:0;
}
.hourly-bars .shape{
  width:100%;
  border-radius:12px 12px 4px 4px;
  background:linear-gradient(180deg,#dff995,#9ed52f);
  position:relative;
  min-height:18px;
  box-shadow:inset 0 1px rgba(255,255,255,.35);
}
.hourly-bars .shape.alt{
  background:linear-gradient(180deg,#9fd37b,#5f9f38);
}
.hourly-bars .shape span{
  position:absolute;
  top:-28px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:800;color:#44503f;
  white-space:nowrap;
}
.hourly-bars label{
  display:block;
  margin-top:10px;
  font-size:11px;
  color:var(--muted);
  font-weight:700;
}
.dual-line{
  position:relative;
  height:240px;
  border:1px solid var(--line-soft);
  border-radius:16px;
  background:
    repeating-linear-gradient(0deg,#fff,#fff 39px,#f4f8ef 39px,#f4f8ef 40px);
  overflow:hidden;
}
.dual-line svg{width:100%;height:100%;display:block}
.dual-line .axis{stroke:#b8c6b2;stroke-width:1}
.dual-line .gridline{stroke:#e2ebdc;stroke-width:1}
.dual-line .main{fill:none;stroke:var(--brand-strong);stroke-width:4.2;stroke-linejoin:round;stroke-linecap:round}
.dual-line .sub{fill:none;stroke:var(--teal);stroke-width:3.6;stroke-linejoin:round;stroke-linecap:round}
.dual-line .area-main{fill:rgba(198,240,90,.18)}
.dual-line .point-main{fill:var(--brand-strong);stroke:#fff;stroke-width:2.5}
.dual-line .point-sub{fill:var(--teal);stroke:#fff;stroke-width:2.5}
.graph-caption{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  margin-top:12px;font-size:12px;color:var(--muted)
}
@media(max-width:1120px){
  .insight-grid{grid-template-columns:1fr}
}


/* lighter pass */
.topbar .logo, .customer-top .logo {color:var(--ink)}
.top-link{color:#4f6152;border-color:var(--line);background:#fff}
.top-link:hover{background:#f4faea;color:var(--ink)}
.sidebar{border-right:1px solid var(--line)}
.nav button.active:before{
  background:linear-gradient(180deg,var(--brand-strong),var(--accent))
}
.hero h1,.hero .tag{color:var(--ink)}
.hero p{color:#627062}
.customer-hero{
  background:
    linear-gradient(90deg,rgba(248,252,243,.90),rgba(248,252,243,.60)),
    url('https://images.unsplash.com/photo-1504674900247-0877df9cc836?auto=format&fit=crop&w=1800&q=85') center/cover;
}
.customer-hero h1{color:var(--ink)}
.customer-top{box-shadow:0 8px 20px rgba(55,85,42,.05)}
.payment-head .logo, .payment-head, .payment-head *{color:var(--ink)!important}
.payment-head small{color:var(--muted)!important}
.track-map{
  background:
    linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,.24)),
    url('https://tile.openstreetmap.org/13/5187/3250.png') center/cover;
}
.launcher{
  color:var(--ink);
}
.launcher .logo{color:var(--ink)}
.launch-card p{color:#617263}
.launch-card a{background:linear-gradient(135deg,var(--brand),#dff98a)}
.toast{border-left:4px solid var(--brand-strong)}