@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --green:#4F9A38;
  --green-dark:#2A5A1D;
  --green-pale:#EAF3E1;
  --gold:#EFB93C;
  --gold-dark:#A67A1C;
  --clay:#B3552E;
  --clay-pale:#F8E9E1;

  --bg:#F4F6F3;
  --paper:#FFFFFF;
  --surface-alt:#EEF1EC;
  --ink:#15201A;
  --ink-soft:#5C665F;
  --ink-faint:#8A9289;
  --line:#E3E8E1;

  --sidebar-bg:#122016;
  --sidebar-bg-hover:#1B2E20;
  --sidebar-text:#B9C7BC;
  --sidebar-text-active:#FFFFFF;
  --sidebar-line:rgba(255,255,255,0.08);

  --shadow-sm: 0 1px 2px rgba(21,32,26,0.05);
  --shadow-md: 0 4px 10px rgba(21,32,26,0.06), 0 1px 3px rgba(21,32,26,0.05);
  --shadow-lg: 0 12px 28px rgba(21,32,26,0.10), 0 2px 6px rgba(21,32,26,0.06);
  --radius-sm:8px;
  --radius:12px;
  --radius-lg:16px;

  --sidebar-w:250px;
  --sidebar-w-collapsed:76px;
  --topbar-h:64px;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased; scroll-behavior:smooth;}
body{margin:0; font-family:'Inter',-apple-system,sans-serif; background:var(--bg); color:var(--ink); line-height:1.55; font-size:14.5px;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:'Outfit',sans-serif; color:var(--ink); font-weight:600; letter-spacing:-0.01em; line-height:1.2; margin:0 0 8px;}
p{margin:0 0 12px;}
code, .mono{font-family:'IBM Plex Mono',monospace; font-size:0.9em;}
::selection{background:var(--green-pale); color:var(--green-dark);}
:focus-visible{outline:2px solid var(--green); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} }

/* =========================================================
   PUBLIC SITE HEADER (logged-out marketing pages)
   ========================================================= */
.site-header{display:flex; align-items:center; justify-content:space-between; padding:14px 32px; background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30;}
.logo{font-family:'Outfit',sans-serif; font-weight:700; font-size:20px; color:var(--green-dark); display:flex; align-items:center; gap:8px;}
.logo .brand-logo{height:57px; width:57px; object-fit:contain;}
.nav-links{display:flex; gap:22px; font-size:13.5px; font-weight:500; color:var(--ink-soft);}
.nav-links a{padding:6px 2px; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;}
.nav-links a:hover, .nav-links a.is-current{color:var(--green-dark); border-color:var(--green);}
.nav-links-mobile-actions{display:none;}
.nav-actions{display:flex; align-items:center; gap:10px; font-size:14px;}
.who{color:var(--ink-soft); font-size:13.5px;}

.page-content{max-width:1080px; margin:0 auto; padding:28px 32px 80px;}
.hero{padding:40px 0;}
.hero h1{font-size:32px; margin-bottom:10px;}
.hero p{color:var(--ink-soft);}
@media (max-width:600px){
  .page-content{padding:20px 16px 60px;}
  .hero{padding:24px 0;}
  .hero h1{font-size:26px;}
}

.section{margin-bottom:42px;}
.section h2{font-size:19px; margin-bottom:16px;}

.site-footer{padding:44px 32px 0; color:var(--ink-soft); font-size:13px; border-top:1px solid var(--line); background:var(--paper);}
.site-footer-grid{max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:24px; padding-bottom:32px;}
.site-footer-brand p{max-width:280px; font-size:13px; margin-top:10px;}
.site-footer .logo{font-size:18px;}
.site-footer h4{font-family:'Outfit',sans-serif; font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink); margin-bottom:10px;}
.site-footer-grid > div{display:flex; flex-direction:column; gap:8px;}
.site-footer-grid a:hover{color:var(--green-dark);}
.site-footer-bottom{max-width:1080px; margin:0 auto; padding:18px 0; border-top:1px solid var(--line); text-align:center;}

@media (max-width:980px){
  .mobile-menu-btn#publicMenuBtn{display:flex;}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--line); flex-direction:column; gap:2px; padding:10px 20px 16px; box-shadow:var(--shadow-md);
    max-height:calc(100vh - 100%); overflow-y:auto;
  }
  .nav-links.is-open{display:flex;}
  .nav-links a{padding:10px 4px; border-bottom:1px solid var(--line);}
  .nav-actions{display:none;}
  .nav-links-mobile-actions{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;}
  .site-header{position:relative;}
}
@media (max-width:800px){
  .site-footer-grid{grid-template-columns:1fr 1fr;}
}
@media (min-width:981px) and (max-width:1180px){
  .nav-links{gap:14px; font-size:13px;}
  .nav-actions{gap:6px;}
  .site-header{padding-left:20px; padding-right:20px;}
}
@media (max-width:480px){
  .site-header{padding:12px 16px;}
  .logo{font-size:17px;}
  .logo .brand-logo{height:39px; width:39px;}
}

/* =========================================================
   APP SHELL (authenticated dashboard layout)
   ========================================================= */
.app-shell{display:flex; min-height:100vh; background:var(--bg);}

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--sidebar-bg); color:var(--sidebar-text);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:40;
  transition:width .2s ease;
}
.app-shell.is-collapsed .sidebar{width:var(--sidebar-w-collapsed);}
.app-shell.is-collapsed .sidebar-brand{padding-left:12px; padding-right:12px;}
.app-shell.is-collapsed .brand-logo{height:36px; width:36px; min-width:36px;}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:20px 20px 16px; font-family:'Outfit',sans-serif; font-weight:700; font-size:18px; color:#fff; white-space:nowrap; overflow:hidden;}
.sidebar-brand .dot{width:9px; height:9px; min-width:9px; border-radius:3px; background:var(--gold);}
.brand-logo{height:51px; width:51px; min-width:51px; object-fit:contain; border-radius:6px;}
.sidebar-role{margin:0 16px 14px; padding:8px 12px; background:var(--sidebar-bg-hover); border-radius:var(--radius-sm); font-size:12px; color:var(--sidebar-text); display:flex; align-items:center; gap:8px; white-space:nowrap; overflow:hidden;}
.sidebar-role .avatar{width:22px; height:22px; min-width:22px; border-radius:50%; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; font-family:'Outfit',sans-serif;}
.app-shell.is-collapsed .sidebar-role span.name, .app-shell.is-collapsed .sidebar-brand span.name{display:none;}

.sidebar-nav{flex:1; overflow-y:auto; padding:4px 12px 16px;}
.sidebar-group{margin-bottom:14px;}
.sidebar-group-label{font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--sidebar-text); opacity:0.45; padding:8px 10px 6px; font-weight:600; white-space:nowrap; overflow:hidden;}
.app-shell.is-collapsed .sidebar-group-label{opacity:0; height:0; padding:0; overflow:hidden;}

.nav-item{position:relative; display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:500; color:var(--sidebar-text); margin-bottom:2px; white-space:nowrap; overflow:hidden;}
.nav-item svg{width:17px; height:17px; min-width:17px; stroke:currentColor;}
.nav-item:hover{background:var(--sidebar-bg-hover); color:#fff;}
.nav-item::before{content:''; position:absolute; left:-10px; top:50%; height:0; width:3px; background:var(--green); border-radius:0 3px 3px 0; transition:height .16s ease, top .16s ease;}
.nav-item:hover::before{height:14px; top:calc(50% - 7px);}
.nav-item.is-active{background:var(--sidebar-bg-hover); color:var(--sidebar-text-active);}
.nav-item.is-active::before{height:20px; top:calc(50% - 10px); left:-10px;}
.nav-item .label{overflow:hidden; text-overflow:ellipsis;}
.app-shell.is-collapsed .nav-item .label{display:none;}
.app-shell.is-collapsed .nav-item{justify-content:center;}

.sidebar-foot{padding:14px 20px; border-top:1px solid var(--sidebar-line);}
.sidebar-collapse-btn{display:flex; align-items:center; gap:9px; color:var(--sidebar-text); font-size:12.5px; font-weight:500; background:none; border:none; cursor:pointer; padding:6px 0; width:100%;}
.sidebar-collapse-btn:hover{color:#fff;}
.sidebar-collapse-btn svg{width:16px; height:16px; stroke:currentColor; transition:transform .2s ease;}
.app-shell.is-collapsed .sidebar-collapse-btn svg{transform:rotate(180deg);}
.app-shell.is-collapsed .sidebar-collapse-btn .label{display:none;}

/* ---- Topbar + content ---- */
.app-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.topbar{height:var(--topbar-h); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 28px; background:var(--paper); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:25;}
.topbar-left{display:flex; align-items:center; gap:14px; min-width:0;}
.mobile-menu-btn, .desktop-hide-btn{display:none;}
.crumb{font-size:12px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.05em; font-weight:600;}
.page-title{font-family:'Outfit',sans-serif; font-weight:600; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.topbar-right{display:flex; align-items:center; gap:14px;}
.topbar-who{font-size:13px; color:var(--ink-soft); display:flex; align-items:center; gap:8px;}
.topbar-avatar{width:30px; height:30px; border-radius:50%; background:var(--green-pale); color:var(--green-dark); display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; font-family:'Outfit',sans-serif;}

.dash-content{padding:26px 28px 70px; max-width:1200px; width:100%; margin:0 auto;}

.sidebar-backdrop{display:none;}

@media (max-width:960px){
  .sidebar{position:fixed; left:0; top:0; height:100vh; transform:translateX(-100%); transition:transform .22s ease; width:var(--sidebar-w) !important;}
  .app-shell.is-mobile-open .sidebar{transform:translateX(0); box-shadow:var(--shadow-lg);}
  .app-shell.is-mobile-open .sidebar-group-label{opacity:0.45; height:auto; padding:8px 10px 6px;}
  .app-shell.is-mobile-open .nav-item .label{display:inline;}
  .mobile-menu-btn{display:flex;}
  .sidebar-collapse-btn{display:none;}
  .app-shell.is-mobile-open .sidebar-backdrop{display:block; position:fixed; inset:0; background:rgba(15,20,17,0.45); z-index:35;}
  .topbar{padding:0 16px;}
  .dash-content{padding:18px 16px 60px;}
}
@media (max-width:520px){
  .topbar{padding:0 12px; gap:8px;}
  .topbar-left{gap:10px;}
  .crumb{display:none;}
  .page-title{font-size:15px;}
  .topbar-right{gap:8px;}
  .topbar-right .btn span, .topbar-right .btn{white-space:nowrap;}
  .topbar-right .btn-ghost.btn-sm{padding:6px 9px;}
  .topbar-right .btn-ghost.btn-sm .label-text{display:none;}
}
.mobile-menu-btn{align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--paper); cursor:pointer;}
.mobile-menu-btn svg{width:18px; height:18px; stroke:var(--ink);}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{padding:9px 18px; border-radius:var(--radius-sm); font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; border:1.5px solid transparent; cursor:pointer; transition:background .15s, color .15s, border-color .15s, box-shadow .15s; font-family:inherit;}
.btn-primary{background:var(--green-dark); color:#fff;}
.btn-primary:hover{background:var(--green); box-shadow:var(--shadow-md);}
.btn-ghost{background:var(--paper); color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--green-dark); color:var(--green-dark);}
.btn-gold{background:var(--gold); color:var(--ink);}
.btn-gold:hover{background:var(--gold-dark); color:#fff;}
.btn-sm{padding:6px 12px; font-size:12.5px;}
.btn:disabled{opacity:0.5; cursor:not-allowed;}

/* =========================================================
   CARDS / METRICS
   ========================================================= */
.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:26px;}
.metric-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; transition:box-shadow .15s, transform .15s;}
.metric-card:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.metric-card .label{font-size:11.5px; color:var(--ink-soft); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.04em; font-weight:600; display:flex; align-items:center; gap:6px;}
.metric-card .value{font-family:'Outfit',sans-serif; font-size:26px; font-weight:600;}
.metric-card .delta{font-size:12px; font-weight:600; margin-top:4px;}
.metric-card .delta.up{color:var(--green-dark);}
.metric-card .delta.down{color:var(--clay);}
.metric-card::after{content:''; position:absolute; right:14px; top:14px; width:26px; height:26px; border-radius:8px; background:var(--green-pale);}
.metric-card svg.icon{position:absolute; right:20px; top:20px; width:15px; height:15px; stroke:var(--green-dark); z-index:1;}

.panel{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-top:16px; box-shadow:var(--shadow-sm);}
@media (max-width:600px){
  .panel{padding:16px;}
}
.panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.panel-head h2{margin:0; font-size:16.5px;}

/* =========================================================
   TABLES
   ========================================================= */
.table-toolbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.simple{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);}
.simple th{text-align:left; background:var(--surface-alt); padding:11px 14px; font-size:12px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em; border-bottom:1px solid var(--line);}
.simple td{padding:12px 14px; border-top:1px solid var(--line); font-size:13.5px;}
.simple tr:hover td{background:var(--surface-alt);}
.table-wrap{overflow-x:auto; border-radius:var(--radius);}
.badge{display:inline-flex; align-items:center; padding:3px 9px; border-radius:20px; font-size:11.5px; font-weight:600;}
.badge-green{background:var(--green-pale); color:var(--green-dark);}
.badge-gold{background:#FBF0D6; color:var(--gold-dark);}
.badge-clay{background:var(--clay-pale); color:var(--clay);}

/* =========================================================
   FORMS
   ========================================================= */
.auth-wrap{display:flex; justify-content:center; padding:60px 0;}
.auth-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; width:100%; max-width:390px; box-shadow:var(--shadow-lg);}
.auth-card h1{font-size:22px;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px; color:var(--ink);}
.field input, .field select, .field textarea{width:100%; padding:10px 13px; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:14px; font-family:inherit; background:var(--paper); transition:border-color .15s, box-shadow .15s;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--green); box-shadow:0 0 0 3px var(--green-pale);}
.field .hint{font-size:12px; color:var(--ink-faint); margin-top:4px;}
.sub-note{font-size:13px; color:var(--ink-soft); margin:6px 0 14px;}
.switch-line{text-align:center; font-size:13px; color:var(--ink-soft); margin-top:16px;}
.form-error{color:#8A3A22; background:var(--clay-pale); border:1px solid #EFCBB6; padding:10px 13px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:14px;}
.form-success{color:var(--green-dark); background:var(--green-pale); border:1px solid #CFE4BE; padding:10px 13px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:14px;}

/* =========================================================
   MISC (search, notifications, empty states)
   ========================================================= */
.search-box{display:flex; gap:8px; margin-bottom:20px;}
.search-box input{flex:1; padding:10px 15px; border:1px solid var(--line); border-radius:24px; font-family:inherit; font-size:14px; background:var(--paper);}
.search-box button{padding:10px 22px; border-radius:24px; background:var(--green-dark); color:#fff; border:none; font-weight:600; font-size:13.5px; cursor:pointer;}

.notif-list{list-style:none; padding:0; margin:0;}
.notif-list li{padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.5px; display:flex; gap:10px; align-items:flex-start;}
.notif-list li:last-child{border-bottom:none;}

.empty-state{text-align:center; padding:44px 20px; color:var(--ink-soft);}
.empty-state svg{width:36px; height:36px; stroke:var(--ink-faint); margin-bottom:10px;}
.empty-state p{margin:0 0 14px;}

/* =========================================================
   PUBLIC MARKETING PAGES — shared components
   ========================================================= */
.page-hero{padding:44px 0 8px;}
.eyebrow{display:inline-block; color:var(--clay); font-weight:600; font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:12px;}
.page-hero h1{font-size:33px; max-width:680px;}
.page-hero .lede{color:var(--ink-soft); max-width:560px; font-size:15.5px; margin-top:8px;}

.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0;}
.feature-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px 20px; box-shadow:var(--shadow-sm); transition:box-shadow .15s, transform .15s;}
.feature-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.feature-card .fc-icon{width:38px; height:38px; border-radius:10px; background:var(--green-pale); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.feature-card .fc-icon svg{width:19px; height:19px; stroke:var(--green-dark);}
.feature-card h3{font-size:15.5px; margin-bottom:6px;}
.feature-card p{font-size:13.5px; color:var(--ink-soft); margin:0;}
.feature-card a.fc-link{display:inline-block; margin-top:10px; font-size:12.5px; font-weight:600; color:var(--green-dark);}

.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; background:var(--green-dark); border-radius:var(--radius-lg); padding:28px 24px; margin:36px 0; color:#fff;}
.stat-strip .stat b{display:block; font-family:'Outfit',sans-serif; font-size:24px; margin-bottom:4px;}
.stat-strip .stat span{font-size:12px; opacity:0.75;}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:28px 0;}
.step-card{position:relative; padding:22px 20px 20px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm);}
.step-card .step-no{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold-dark); font-weight:600; margin-bottom:10px;}
.step-card h3{font-size:15px; margin-bottom:6px;}
.step-card p{font-size:13px; color:var(--ink-soft); margin:0;}
.step-connector{position:absolute; top:26px; right:-18px; width:16px; height:1px; background:var(--line);}

.role-table-wrap{overflow-x:auto; margin:28px 0;}
.role-table{width:100%; border-collapse:collapse; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); min-width:640px;}
.role-table th{background:var(--surface-alt); text-align:left; padding:14px 18px; font-size:12px; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-soft); border-bottom:1px solid var(--line);}
.role-table th.role-head{font-family:'Outfit',sans-serif; text-transform:none; font-size:15px; color:var(--ink); letter-spacing:0;}
.role-table td{padding:13px 18px; border-top:1px solid var(--line); font-size:13.5px; vertical-align:top;}
.role-table td.yes{color:var(--green-dark);}
.role-table .price-tag{font-family:'Outfit',sans-serif; font-size:20px; font-weight:600; color:var(--green-dark);}

.faq-item{border-bottom:1px solid var(--line); padding:4px 0;}
.faq-item summary{cursor:pointer; list-style:none; padding:16px 4px; font-weight:600; font-size:14.5px; display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+'; font-family:'Outfit',sans-serif; font-size:20px; color:var(--ink-faint); transition:transform .15s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{padding:0 4px 16px; color:var(--ink-soft); font-size:13.5px; max-width:640px;}

.contact-layout{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:28px 0;}
.contact-info-card{background:var(--green-dark); color:#EDF5E4; border-radius:var(--radius-lg); padding:28px;}
.contact-info-card h3{color:#fff; font-size:17px;}
.contact-info-row{display:flex; gap:10px; align-items:flex-start; margin-top:16px; font-size:13.5px;}
.contact-info-row svg{width:16px; height:16px; stroke:var(--gold); margin-top:2px; flex-shrink:0;}

.cta-banner{background:var(--gold); border-radius:var(--radius-lg); padding:32px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:36px 0;}
.cta-banner h2{font-size:21px; color:var(--green-dark); margin-bottom:4px;}
.cta-banner p{color:#6B5217; font-size:13px; margin:0;}
.cta-banner .btn-primary{background:var(--green-dark);}

.category-chip-row{display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 28px;}
.category-chip{padding:8px 16px; border-radius:20px; background:var(--paper); border:1px solid var(--line); font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px;}
.category-chip svg{width:15px; height:15px; stroke:var(--ink-soft); flex-shrink:0;}

.market-card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:28px;}
.market-item-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .15s, transform .15s;}
.market-item-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.market-item-card .thumb{height:96px; background:var(--green-pale); display:flex; align-items:center; justify-content:center; font-size:34px;}
.market-item-card .body{padding:14px 16px;}
.market-item-card .cat{font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.04em; font-weight:600; margin-bottom:4px;}
.market-item-card h4{font-size:14.5px; margin-bottom:4px;}
.market-item-card .shop{font-size:12.5px; color:var(--ink-soft); margin-bottom:10px;}
.market-item-card .price{font-family:'Outfit',sans-serif; font-weight:600; font-size:15px; color:var(--green-dark);}

.vehicle-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 32px;}
.vehicle-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; text-align:center; box-shadow:var(--shadow-sm);}
.vehicle-card .v-icon{width:44px; height:44px; margin:0 auto 12px; border-radius:12px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center;}
.vehicle-card .v-icon svg{width:22px; height:22px; stroke:var(--green-dark);}
.vehicle-card h4{font-size:14.5px; margin-bottom:4px;}
.vehicle-card p{font-size:12.5px; color:var(--ink-soft); margin:0;}

.timeline-track{display:flex; align-items:center; gap:0; margin:26px 0 32px; overflow-x:auto;}
.timeline-node{display:flex; flex-direction:column; align-items:center; min-width:130px; text-align:center; flex-shrink:0;}
.timeline-node .dot{width:12px; height:12px; border-radius:50%; background:var(--green); border:3px solid var(--green-pale); margin-bottom:8px;}
.timeline-node span{font-size:12px; font-weight:600;}
.timeline-node small{font-size:11px; color:var(--ink-soft);}
.timeline-line{height:2px; background:var(--line); flex:1; min-width:20px;}

@media (max-width:800px){
  .feature-grid, .steps, .stat-strip, .market-card-grid, .vehicle-grid{grid-template-columns:repeat(2,1fr);}
  .contact-layout{grid-template-columns:1fr;}
  .step-connector{display:none;}
}
@media (max-width:520px){
  .feature-grid, .steps, .stat-strip, .market-card-grid, .vehicle-grid{grid-template-columns:1fr;}
  .page-hero h1{font-size:26px;}
}

@media (max-width:700px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .card-grid{grid-template-columns:1fr;}
}

/* =========================================================
   SHOPPER-FACING MARKETPLACE (buyer browse, marketplace preview, orders)
   A punchier, photo-forward, mobile-commerce style — distinct from the
   operational dashboard components above on purpose.
   ========================================================= */
:root{
  --shop-green:#0FA958;
  --shop-green-dark:#0B7A40;
  --shop-green-pale:#E4F7EC;
}

.category-strip{display:flex; gap:18px; overflow-x:auto; padding:6px 2px 18px; margin-bottom:6px;}
.category-circle{display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; cursor:pointer;}
.category-circle .ring{width:56px; height:56px; border-radius:50%; background:var(--shop-green-pale); display:flex; align-items:center; justify-content:center; font-size:24px; border:2px solid transparent; transition:border-color .15s, transform .15s;}
.category-circle.is-active .ring, .category-circle:hover .ring{border-color:var(--shop-green); transform:translateY(-2px);}
.category-circle span{font-size:11.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap;}

.shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:20px 0 30px;}
.shop-card{background:var(--paper); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-md); border:1px solid var(--line); transition:transform .15s, box-shadow .15s;}
.shop-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg);}
.shop-card .shot{height:132px; background:linear-gradient(160deg,var(--shop-green-pale),#fff); display:flex; align-items:center; justify-content:center; font-size:56px; position:relative;}
.shop-card .shot svg{width:46px; height:46px; stroke:var(--shop-green-dark); stroke-width:1.4;}
.shop-card .shot .tag-pill{position:absolute; top:10px; left:10px; background:rgba(255,255,255,0.92); padding:3px 10px; border-radius:20px; font-size:10.5px; font-weight:700; color:var(--shop-green-dark); text-transform:uppercase; letter-spacing:0.03em;}
.shop-card .body{padding:14px 16px 16px;}
.shop-card h4{font-size:14.5px; margin-bottom:2px;}
.shop-card .seller{font-size:12px; color:var(--ink-soft); margin-bottom:10px;}
.shop-card .price-row{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.shop-card .price{font-family:'Outfit',sans-serif; font-weight:700; font-size:16px; color:var(--shop-green-dark);}
.shop-card .price small{font-weight:500; font-size:11px; color:var(--ink-faint);}

.qty-stepper{display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:20px; overflow:hidden;}
.qty-stepper button{width:26px; height:26px; border:none; background:var(--shop-green-pale); color:var(--shop-green-dark); font-weight:700; font-size:15px; cursor:pointer; line-height:1;}
.qty-stepper input{width:34px; border:none; text-align:center; font-size:13px; font-weight:600; -moz-appearance:textfield;}
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}

.pill-btn{display:inline-flex; align-items:center; gap:6px; background:var(--shop-green); color:#fff; border:none; border-radius:24px; padding:9px 20px; font-size:13px; font-weight:700; cursor:pointer; transition:background .15s, box-shadow .15s; font-family:inherit;}
.pill-btn:hover{background:var(--shop-green-dark); box-shadow:var(--shadow-md);}
.pill-btn.pill-btn-outline{background:#fff; color:var(--shop-green-dark); border:1.5px solid var(--shop-green);}
.pill-btn.pill-btn-sm{padding:6px 14px; font-size:12px;}
.pill-btn:disabled{opacity:0.45; cursor:not-allowed;}

.order-tabs{display:flex; gap:6px; background:var(--surface-alt); padding:4px; border-radius:14px; margin-bottom:20px; max-width:460px;}
.order-tabs a{flex:1; text-align:center; padding:9px 10px; border-radius:11px; font-size:13px; font-weight:600; color:var(--ink-soft);}
.order-tabs a.is-active{background:var(--shop-green); color:#fff; box-shadow:var(--shadow-sm);}

.order-card{display:flex; gap:14px; background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:12px; box-shadow:var(--shadow-sm); align-items:flex-start;}
.order-card .shot-sm{width:52px; height:52px; border-radius:14px; background:var(--shop-green-pale); display:flex; align-items:center; justify-content:center; font-size:26px; flex-shrink:0;}
.order-card .shot-sm svg{width:24px; height:24px; stroke:var(--shop-green-dark);}
.order-card .info{flex:1; min-width:0;}
.order-card h4{font-size:14.5px; margin-bottom:3px;}
.order-card .meta{font-size:12px; color:var(--ink-soft); margin-bottom:6px;}
.order-card .dates{display:flex; gap:16px; font-size:11.5px; color:var(--ink-faint); margin-top:8px;}
.order-card .right{text-align:right; flex-shrink:0;}
.order-card .right .price{font-family:'Outfit',sans-serif; font-weight:700; color:var(--shop-green-dark); font-size:15px; margin-bottom:6px;}
.status-pill{display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px; font-size:11px; font-weight:700; text-transform:capitalize;}
.status-pill.st-pending{background:#FEF3D7; color:#9A6B0A;}
.status-pill.st-good{background:var(--shop-green-pale); color:var(--shop-green-dark);}
.status-pill.st-bad{background:var(--clay-pale); color:var(--clay);}

.track-card{background:linear-gradient(180deg,#0E2A18,#123420); border-radius:20px; padding:22px; color:#EAF3E1; margin:18px 0 28px;}
.track-route{background:rgba(255,255,255,0.06); border-radius:16px; padding:20px 16px; margin-bottom:16px;}
.track-route .row{display:flex; align-items:flex-start; gap:12px; position:relative; padding-bottom:22px;}
.track-route .row:last-child{padding-bottom:0;}
.track-route .row::before{content:''; position:absolute; left:5px; top:16px; bottom:-6px; width:2px; background:rgba(255,255,255,0.18);}
.track-route .row:last-child::before{display:none;}
.track-route .node{width:12px; height:12px; border-radius:50%; background:var(--shop-green); margin-top:3px; flex-shrink:0; box-shadow:0 0 0 4px rgba(15,169,88,0.2);}
.track-route .row:last-child .node{background:var(--gold);}
.track-route .label{font-size:12px; opacity:0.65; margin-bottom:2px;}
.track-route .place{font-size:14px; font-weight:600;}
.track-status-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.track-status-row .status-pill{font-size:12px;}
.track-card .cargo{font-size:12.5px; opacity:0.75; margin-top:4px;}

.verification-banner{display:flex; align-items:center; gap:8px; padding:11px 16px; border-radius:12px; font-size:13px; font-weight:600; margin-bottom:16px;}
.verification-banner svg{width:16px; height:16px; flex-shrink:0;}
.verification-banner.verification-verified{background:var(--shop-green-pale); color:var(--shop-green-dark);}
.verification-banner.verification-pending{background:#FEF3D7; color:#9A6B0A;}
.verification-banner.verification-rejected{background:var(--clay-pale); color:var(--clay);}

@media (max-width:900px){
  .shop-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .shop-grid{grid-template-columns:1fr;}
  .order-tabs{max-width:100%;}
}

/* =========================================================
   DRIVER / TRANSPORTER BROWSING (ride-hailing style booking)
   ========================================================= */
.driver-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:18px 0 30px;}
.driver-card{background:var(--paper); border:2px solid var(--line); border-radius:16px; padding:18px; box-shadow:var(--shadow-sm); transition:border-color .15s, box-shadow .15s, transform .15s;}
.driver-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
.driver-card.is-selected{border-color:var(--green-dark); box-shadow:0 0 0 3px var(--green-pale);}
.driver-card .d-head{display:flex; align-items:center; gap:12px; margin-bottom:12px;}
.driver-card .d-avatar{width:42px; height:42px; border-radius:50%; background:var(--green-pale); color:var(--green-dark); display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-weight:700; font-size:15px; flex-shrink:0;}
.driver-card h4{font-size:14.5px; margin-bottom:2px;}
.driver-card .d-vehicle{font-size:12px; color:var(--ink-soft);}
.driver-card .d-meta{display:flex; flex-direction:column; gap:6px; font-size:12.5px; color:var(--ink-soft); margin-bottom:14px;}
.driver-card .d-meta span{display:flex; align-items:center; gap:6px;}
.driver-card .d-meta svg{width:14px; height:14px; stroke:var(--ink-faint); flex-shrink:0;}
.driver-card .d-select-btn{width:100%; justify-content:center;}

.selected-driver-banner{display:flex; align-items:center; gap:12px; background:var(--green-pale); border:1px solid #CFE4BE; border-radius:var(--radius); padding:12px 16px; margin-bottom:18px; font-size:13.5px; color:var(--green-dark);}
.selected-driver-banner svg{width:18px; height:18px; stroke:var(--green-dark); flex-shrink:0;}

@media (max-width:900px){
  .driver-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .driver-grid{grid-template-columns:1fr;}
}

/* =========================================================
   MAP (Leaflet, location picker + shop finder display)
   ========================================================= */
.map-box{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); margin:14px 0;}
.map-box .leaflet-container{height:320px; width:100%; font-family:'Inter',sans-serif;}
.map-hint{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft); margin-bottom:8px;}
.map-hint svg{width:15px; height:15px; stroke:var(--green-dark); flex-shrink:0;}
.leaflet-popup-content-wrapper{border-radius:10px;}
.leaflet-popup-content{font-family:'Inter',sans-serif; font-size:13px;}

/* =========================================================
   TRANSPORT BOOKING WIZARD (farmer/transport.php)
   ========================================================= */
.booking-wizard{max-width:640px;}
.wizard-steps{display:flex; align-items:center; gap:6px; margin-bottom:20px;}
.wizard-steps .ws-step{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink-faint);}
.wizard-steps .ws-num{width:24px; height:24px; border-radius:50%; background:var(--surface-alt); color:var(--ink-faint); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;}
.wizard-steps .ws-step.is-active{color:var(--green-dark);}
.wizard-steps .ws-step.is-active .ws-num{background:var(--green-dark); color:#fff;}
.wizard-steps .ws-step.is-done .ws-num{background:var(--green); color:#fff;}
.wizard-steps .ws-line{flex:1; height:2px; background:var(--line); min-width:16px;}
.wizard-panel{display:none;}
.wizard-panel.is-active{display:block;}
.wizard-actions{display:flex; justify-content:space-between; gap:10px; margin-top:18px;}

.field-label{display:block; font-size:13px; font-weight:600; margin-bottom:8px; color:var(--ink);}

.picture-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:6px;}
.picture-card{position:relative; cursor:pointer;}
.picture-card input{position:absolute; opacity:0; pointer-events:none;}
.picture-card .pc-body{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:0; border:2px solid var(--line); border-radius:16px; background:var(--paper); transition:border-color .15s, box-shadow .15s, transform .15s; height:100%; overflow:hidden;}
.picture-card .pc-photo{position:relative; width:100%; aspect-ratio:4/3; background:var(--surface-alt); overflow:hidden;}
.picture-card .pc-photo svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
.picture-card .pc-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s; z-index:1;}
.picture-card .pc-photo.img-missing{box-shadow:inset 0 0 0 1px var(--line);}
.picture-card .pc-title{font-weight:600; font-size:13.5px; color:var(--ink); padding:12px 14px 2px;}
.picture-card .pc-desc{font-size:12px; color:var(--ink-soft); padding:0 14px 14px;}
.picture-card:hover .pc-body{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.picture-card:hover .pc-photo img{transform:scale(1.04);}
.picture-card input:checked + .pc-body{border-color:var(--green-dark); box-shadow:0 0 0 3px var(--green-pale);}
.picture-card input:checked + .pc-body .pc-title{color:var(--green-dark);}
.picture-card input:checked + .pc-body::after{content:''; position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:var(--green-dark); box-shadow:0 1px 3px rgba(0,0,0,.25);}
.picture-card input:checked + .pc-body{position:relative;}
.picture-card input:checked + .pc-body::before{content:''; position:absolute; top:16px; right:16px; width:8px; height:14px; border-right:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(45deg); z-index:2;}

.match-badge{display:none; position:absolute; top:10px; left:10px; z-index:2; background:var(--green-dark); color:#fff; font-size:10.5px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:20px; box-shadow:0 1px 4px rgba(0,0,0,.25);}
.picture-card.is-matched .match-badge{display:inline-block;}
.picture-card.is-hidden{display:none;}
.link-btn{background:none; border:none; padding:0; color:var(--green-dark); font-size:12.5px; font-weight:600; text-decoration:underline; cursor:pointer;}

.delivery-group-label{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); margin:16px 0 8px;}
.delivery-group-label:first-of-type{margin-top:0;}

.price-box{background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--radius); padding:20px; text-align:center; margin-bottom:16px;}
.price-box .price-amount{font-family:'IBM Plex Mono',monospace; font-size:32px; font-weight:600; color:var(--green-dark); margin-bottom:4px;}
.price-box .price-meta{font-size:12.5px; color:var(--ink-soft);}
.trip-summary{display:flex; flex-direction:column; gap:8px; font-size:13px; margin-bottom:16px;}
.trip-summary .ts-row{display:flex; justify-content:space-between; padding:8px 12px; background:var(--paper); border:1px solid var(--line); border-radius:10px;}
.trip-summary .ts-row span:first-child{color:var(--ink-soft);}
.trip-summary .ts-row span:last-child{font-weight:600;}

@media (max-width:560px){
  .picture-grid{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .booking-wizard{padding:16px;}
  .wizard-steps .ws-step span:not(.ws-num){display:none;}
  .wizard-steps .ws-num{width:22px; height:22px;}
  .wizard-actions{flex-wrap:wrap;}
  .wizard-actions .btn{flex:1; justify-content:center; min-width:120px; min-height:44px;}
  .price-box{padding:16px;}
  .price-box .price-amount{font-size:26px;}
  .trip-summary .ts-row{flex-wrap:wrap; gap:2px;}
  .trip-summary .ts-row span:last-child{text-align:right; margin-left:auto;}
  .picture-card .pc-title{font-size:13px; padding:10px 12px 2px;}
  .picture-card .pc-desc{font-size:11.5px; padding:0 12px 12px;}
  .match-badge{font-size:10px; padding:2px 8px;}
  .field-label{display:flex; flex-wrap:wrap; gap:6px; align-items:center;}
}