:root{
  /* Primary palette - Warm earthy tones */
  --c-espresso: #714329;
  --c-caramel: #B08463;
  --c-latte: #B9937B;
  --c-cream: #D0B9A7;
  --c-oat: #B5A192;
  
  /* Derived colors */
  --c-accent-light: color-mix(in srgb, var(--c-caramel) 50%, white);
  --c-accent-dark: color-mix(in srgb, var(--c-espresso) 100%, black 20%);
  /* Muted text needs WCAG AA contrast (>= 4.5:1) on the cream-tinted bg.
     Original oat+cream mix landed at ~2.1:1. 80% espresso came in at ~4.35:1
     (axe still failed). 90% espresso = ~#7f553e, ~5.6:1 — passes with margin. */
  --c-muted: color-mix(in srgb, var(--c-espresso) 90%, white);
  --c-white: #ffffff;
  --c-success: #6a9a5c;
  --c-warning: #c9a040;
  --c-error: #c06060;
  
  /* Semantic mappings */
  --bg: color-mix(in srgb, var(--c-cream) 25%, white);
  --ink: var(--c-espresso);
  --muted: var(--c-muted);
  --accent: var(--c-caramel);
  --accent-light: var(--c-accent-light);
  --accent-dark: var(--c-accent-dark);
  --secondary: var(--c-latte);
  --secondary-light: color-mix(in srgb, var(--c-cream) 50%, white);
  --highlight: var(--c-cream);
  --warm: var(--c-caramel);

  /* Surfaces - all derived from primary colors */
  --card: color-mix(in srgb, var(--c-white) 92%, transparent);
  --card2: color-mix(in srgb, var(--c-cream) 35%, transparent);
  --card-hover: color-mix(in srgb, var(--c-latte) 20%, white);
  --glass: color-mix(in srgb, var(--c-white) 85%, transparent);
  --glass-hover: color-mix(in srgb, var(--c-cream) 30%, white);
  --glass-50: color-mix(in srgb, var(--c-white) 50%, transparent);
  --glass-75: color-mix(in srgb, var(--c-white) 75%, transparent);
  
  /* Borders & shadows - all derived from primary colors */
  --stroke: color-mix(in srgb, var(--c-oat) 30%, transparent);
  --stroke-accent: color-mix(in srgb, var(--c-caramel) 40%, transparent);
  --stroke-light: color-mix(in srgb, var(--c-oat) 18%, transparent);
  --shadow: 0 16px 50px color-mix(in srgb, var(--c-espresso) 10%, transparent);
  --shadow-sm: 0 6px 16px color-mix(in srgb, var(--c-espresso) 6%, transparent);
  --shadow-lg: 0 12px 30px color-mix(in srgb, var(--c-espresso) 8%, transparent);
  --overlay: color-mix(in srgb, var(--c-espresso) 45%, transparent);

  /* Gradients - all derived from primary colors */
  --grad-accent: linear-gradient(145deg, var(--c-caramel), var(--c-latte));
  --grad-accent-subtle: linear-gradient(145deg, color-mix(in srgb, var(--c-caramel) 30%, transparent), color-mix(in srgb, var(--c-latte) 22%, transparent));
  --grad-glass: linear-gradient(145deg, color-mix(in srgb, var(--c-white) 80%, transparent), color-mix(in srgb, var(--c-cream) 15%, transparent));
  --grad-panel: linear-gradient(180deg, var(--glass), color-mix(in srgb, var(--c-cream) 12%, transparent));
  
  /* Layout */
  --radius: 12px;
  --radius2: 18px;
  --edge: 8px;
  --edge-lg: 10px;
  --sidebar-w: 270px;
  --sidebar-w-collapsed: 92px;

  /* Typography */
  --font-ui: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background: var(--bg);
  font-family:var(--font-ui);
}

a{color:inherit; text-decoration:none}
button, input, select{font:inherit}
img{max-width:100%; display:block}

.app{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
}
.app.no-sidebar{
  grid-template-columns: 1fr;
}

/* Sidebar */
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  padding: 2px;
  padding-right: 10px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.side-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius: 14px;
}
.brand:hover{background: var(--glass)}
.brand-mark{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius: 12px;
  background: var(--grad-accent-subtle);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow-sm);
}
.brand-name{
  font-family: var(--font-display);
  font-weight:650;
  letter-spacing:.2px;
  font-size: 22px;
}

.side-toggle{
  width:38px;height:38px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: var(--glass);
  color: var(--accent-dark);
  cursor:pointer;
  box-shadow: var(--shadow-sm);
}
.side-toggle:hover{background: var(--glass-hover)}

.side-search{
  position: relative;
  padding: 0 0 8px 0;
}
.side-search input{
  width: 100%;
  padding: 8px 32px 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--glass);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}
.side-search input::placeholder{color: var(--muted)}
.side-search input:focus{border-color: var(--stroke-accent)}
.search-submit{
  position: absolute;
  right: 4px;
  top: 4px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.search-submit:hover{color: var(--ink)}

.side-cta{padding: 0 4px}

.btn{
  border:1px solid var(--stroke);
  border-radius: 10px;
  padding: 6px 10px;
  background: var(--glass);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.btn:hover{background: var(--glass-hover)}
.btn:active{transform: translateY(1px)}
.btn-wide{width:100%}
.btn-ic{
  width:18px;height:18px;
  display:grid;place-items:center;
  border-radius: 6px;
  background: var(--glass-hover);
  border: 1px solid var(--stroke);
}
.btn-primary{
  /* Caramel + white text was 3.6:1 — below WCAG AA. Espresso (the brand
     dark) + white gives 8.5:1 and keeps the warm palette. */
  background: var(--c-espresso);
  color: var(--c-white);
  border-color: var(--c-espresso);
}
.btn-primary .btn-ic{background: var(--c-caramel); border-color: var(--c-espresso)}
.btn-primary:hover{background: var(--c-accent-dark)}
.btn-secondary{
  background: var(--c-latte);
  color: var(--c-espresso);
}
.btn-ghost{
  background: transparent;
  box-shadow:none;
}
.btn-ghost:hover{background: var(--glass)}
.btn-sm{padding: 6px 10px; font-size: 11px; border-radius: 10px}
.btn-icon{padding: 6px 8px; min-width: 32px}
.btn-danger{background: var(--c-error); color: var(--c-white); border-color: color-mix(in srgb, var(--c-error) 70%, var(--stroke))}
.btn-danger:hover{background: color-mix(in srgb, var(--c-error) 85%, black)}

.side-nav{
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 6px 4px;
  overflow:auto;
  scrollbar-width: thin;
}

.nav-group{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor:pointer;
  color: var(--ink);
  font-size: 13px;
}
.nav-group:hover{
  background: var(--glass);
  border-color: var(--stroke);
}
.ng-ic{
  width:28px;height:28px;
  border-radius: 10px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  background: var(--glass);
}
.ng-ic img{width:16px;height:16px}
.ng-txt{font-weight:650}
.ng-chevron{margin-left:auto; opacity:.6}

.nav-items{
  margin: -4px 0 6px;
  padding: 4px 0 2px 36px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.nav-items[hidden]{
  display:none !important;
}
.nav-item{
  position:relative;
  padding: 8px 10px;
  border-radius: 14px;
  color: var(--muted);
  border: 1px solid transparent;
}
.nav-item:hover{background: var(--glass); border-color: var(--stroke); color: var(--ink)}
.nav-item.active{
  color: var(--ink);
  background: var(--card2);
  border-color: var(--stroke-accent);
}
.nav-item-standalone{
  display:flex;
  align-items:center;
  gap:8px;
}
.ni-dot{
  width:8px;height:8px;
  border-radius: 999px;
  background: var(--accent);
  display:inline-block;
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 0 4px var(--stroke-accent);
}

.side-foot{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding: 6px 4px 0;
}
.mini-card{
  border: 1px solid var(--stroke);
  background: var(--glass);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-lg);
}
.mini-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 0;
}
.mini-label{color: var(--muted); font-weight:600}
.mini-value{font-weight:750}
.pill{
  border-radius: 999px;
  padding: 4px 10px;
  font-weight:700;
  font-size: 12px;
  border: 1px solid var(--stroke);
  background: var(--glass);
}
.pill-trusted{background: var(--card2); border-color: var(--stroke)}
.pill-fast{background: var(--card2); border-color: var(--stroke)}
.tiny{font-size:12px; color: var(--muted); font-weight:650}

.signout{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--glass);
}
.signout:hover{background: var(--glass-hover)}
.signout-txt{font-weight:700}

/* Main */
.main{
  padding: 0px;
  display:flex;
  flex-direction:column;
  gap: 0px;
  min-width: 0;
}

/* Topbar */
.topbar{
  position:sticky;
  top: 0;
  z-index: 20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 6px;
  padding: 2px;
  background: var(--glass);
  border-bottom: 1px solid var(--stroke);
}
.topbar-left{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.mobile-menu{display:none !important}

.topbar-brand{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration: none;
  position: relative;
  padding-left: 48px;
}
.topbar-logo{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--c-white);
}
.topbar-brand-name{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  background: linear-gradient(135deg, var(--c-espresso) 0%, var(--c-latte) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.search{
  display:flex;
  align-items:center;
  gap: 8px;
  flex: 0 1 320px;
  min-width: 180px;
  max-width: 320px;
  border-radius: 18px;
  padding: 8px 12px;
  border: 1px solid var(--stroke);
  background: var(--glass);
}
.search-ic{
  width:36px;height:36px;
  border-radius: 14px;
  display:grid;place-items:center;
  background: var(--card2);
  border: 1px solid var(--stroke-accent);
  color: var(--c-espresso);
}
.search input{
  border:0;
  outline: none;
  background: transparent;
  flex:1;
  min-width: 0;
  font-weight:600;
  color: var(--ink);
}
.search input::placeholder{color: var(--muted)}
.search-btn{
  width:40px;height:40px;
  border-radius: 14px;
  border: 1px solid var(--stroke-accent);
  background: linear-gradient(145deg, var(--accent), var(--accent-light));
  color:var(--c-white);
  cursor:pointer;
}
.search-btn:hover{filter:brightness(1.03)}

.topbar-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

.home-btn{display:none}

.foot-location{white-space:nowrap}
.chip{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 18px;
  border:1px solid var(--stroke);
  background: var(--glass);
}
.chip-ic{
  width:32px;height:32px;
  border-radius: 14px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  background: var(--glass);
}
.chip select{
  border:0;
  background: transparent;
  outline:none;
  font-weight:700;
  color: var(--ink);
  cursor:pointer;
}

.icon-btn{
  position:relative;
  width:42px;height:42px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--glass);
  cursor:pointer;
  display:grid;
  place-items:center;
  box-shadow: 0 12px 28px var(--shadow-sm);
}
.icon-btn:hover{background: var(--glass-hover)}
.dot{
  position:absolute;
  width:10px;height:10px;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--secondary), var(--secondary));
  top: 9px; right: 9px;
  box-shadow: 0 0 0 3px var(--glass-75);
}

.profile{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--glass);
}
.profile-link{
  display:flex;
  align-items:center;
  gap: 8px;
  color: inherit;
}
.p-info{line-height:1.15}
.user-menu{position: relative;}
.user-menu-toggle{
  width: auto;
  height: auto;
  padding: 4px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: none;
  font-size: 10px;
}
.user-menu-toggle:hover{background: var(--glass-50)}
.usermenu{
  position: fixed;
  right: 10px;
  top: 70px;
  bottom: 10px;
  width: min(280px, calc(100vw - 20px));
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: var(--glass);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  padding: 16px;
  z-index: 50;
  transform: translateX(calc(100% + 20px));
  transition: transform .22s ease;
  overflow-y: auto;
}
.app.usermenu-open .usermenu{transform: translateX(0)}
.app.usermenu-open .overlay{display: block;}
.user-menu-title{
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 6px 8px;
}
.user-menu-item{
  display:block;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: 13px;
}
.user-menu-item:hover{background: var(--glass-hover); border-color: var(--stroke)}
.user-menu-item.active{background: var(--card2); border-color: var(--stroke-accent)}
.user-menu-divider{height:1px; background: var(--stroke-light); margin: 8px 4px;}
.avatar{
  width:32px;height:32px;
  border-radius: 10px;
  border: none;
  background: var(--card2);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-sm{width:32px;height:32px;border-radius: 14px}
.avatar-lg{width:44px;height:44px;border-radius: 18px}
.avatar-xl{width:56px;height:56px;border-radius: 22px}
.profile-meta{line-height:1.05}
.p-name{font-weight:700; font-size: 13px}
.p-sub{font-size: 11px; color: var(--muted); font-weight: 600}

/* Hero */
.hero{
  position:relative;
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: var(--glass-50);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-bg{
  position:absolute;
  inset: 0;
  opacity: .90;
  pointer-events:none;
}
.hero-bg img{
  width:100%;
  height:100%;
  object-fit: cover;
  filter: saturate(1.05);
}
.hero-inner{
  position:relative;
  padding: 0px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.welcome-mascot{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  filter: drop-shadow(0 6px 16px var(--stroke));
}
.accent{
  color: var(--c-espresso);
  text-shadow: 0 1px 0 var(--glass);
}

/* Tabs */
.quick-filters{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--stroke-light);
  background: color-mix(in srgb, var(--c-white) 70%, transparent);
  backdrop-filter: blur(10px);
}
.pill-tab{
  border: 1px solid var(--stroke);
  background: color-mix(in srgb, var(--c-white) 80%, transparent);
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--c-espresso);
  transition: all 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}
/* Category tints on inactive pills — every category unique, matches card headers */
.pill-tab[data-filter="Moving"]                              { background: #fde9d4; border-color: #f5cfa8; } /* peach    */
.pill-tab[data-filter="Cleaning"]                            { background: #d4f0e8; border-color: #9fd9c8; } /* mint     */
.pill-tab[data-filter="Yard Work"]                           { background: #ecfccb; border-color: #bef264; } /* lime     */
.pill-tab[data-filter="Tech Help"]                           { background: #dbeafe; border-color: #93c5fd; } /* blue     */
.pill-tab[data-filter="Pet Care"]                            { background: #fce7f3; border-color: #f9a8d4; } /* pink     */
.pill-tab[data-filter="Handyman"],
.pill-tab[data-filter="Home Repairs"]                        { background: #fef9c3; border-color: #fde047; } /* yellow   */
.pill-tab[data-filter="Errands"]                             { background: #fee2e2; border-color: #fca5a5; } /* coral    */
.pill-tab[data-filter="Tutoring"]                            { background: #ede9fe; border-color: #c4b5fd; } /* violet   */
.pill-tab[data-filter="Rides"],
.pill-tab[data-filter="Driving"]                             { background: #cffafe; border-color: #67e8f9; } /* cyan     */
.pill-tab[data-filter="Smart Home"]                          { background: #e0f2fe; border-color: #7dd3fc; } /* sky blue */
.pill-tab[data-filter="Assembly"]                            { background: #d1fae5; border-color: #6ee7b7; } /* emerald  */
.pill-tab[data-filter="Gardening"]                           { background: #dcfce7; border-color: #86efac; } /* green    */
.pill-tab[data-filter="Delivery"]                            { background: #ffedd5; border-color: #fdba74; } /* orange   */
.pill-tab[data-filter="Painting"]                            { background: #fdf4ff; border-color: #e879f9; } /* fuchsia  */
.pill-tab[data-filter="Other"]                               { background: #f1f5f9; border-color: #cbd5e1; } /* slate    */
.pill-tab:hover{
  filter: brightness(0.95);
  color: var(--c-espresso);
}
.pill-tab.active{
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c-caramel) 35%, transparent);
}

/* Live Stats Board */
.live-stats-board{
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: var(--radius2);
  padding: 12px;
  backdrop-filter: blur(8px);
}
.stats-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 8px;
}
.stats-footer{
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--stroke-light);
  margin-top: 10px;
}
.stats-updated{
  font-size: 10px;
  color: var(--muted);
}
.stat.updating .stat-value{
  opacity: 0.5;
}

/* Stats Grid Mini - for logged out users */
.stats-grid-mini{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.stat-mini{
  text-align: center;
  padding: 14px 6px;
  background: var(--glass);
  border-radius: var(--radius);
  border: 1px solid var(--stroke-light);
}
.stat-mini .stat-value{
  font-size: 22px;
  font-weight: 800;
  color: var(--c-espresso);
  line-height: 1.1;
}
.stat-mini .stat-label{
  font-size: 10px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.2;
}

/* Stats */
.stat-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}
.stat{
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align: center;
  gap: 4px;
  padding: 8px 6px;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px var(--stroke-light);
}
.stat-ic{
  width:28px;height:28px;
  flex-shrink: 0;
  border-radius: 10px;
  display:grid;place-items:center;
  border:1px solid var(--stroke-accent);
  background: var(--card2);
}
.stat-ic img { width: 16px; height: 16px; }
.stat-main{min-width:0}
.stat-value{font-weight:800; font-size: 14px; letter-spacing:.2px}
.stat-label{font-size: 10px; color: var(--muted); font-weight:600}
.stat-meta{font-size: 10px; color: var(--muted)}

/* Panels */
.active-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.panel{
  border-radius: var(--radius2);
  border:1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 8px 10px;
  border-bottom: 1px solid var(--stroke-light);
  background: var(--grad-panel);
}
.panel-title{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
}
.panel-ic{
  width:28px;height:28px;
  border-radius: 10px;
  display:grid;place-items:center;
  border:1px solid var(--stroke);
  background: var(--glass);
}
.panel-ic img{width:16px;height:16px}
.panel-body{padding: 10px}
.panel-link{color: var(--c-espresso); font-weight:700; font-size: 12px}
.panel-link:hover{text-decoration: underline}

.empty{
  display:flex;
  align-items:center;
  gap: 10px;
}
.empty-ic{
  width:44px;height:44px;
  border-radius: 14px;
  display:grid;place-items:center;
  border:1px dashed var(--stroke-accent);
  background: var(--card2);
}
.empty-ic img{width:24px;height:24px}
.empty-title{font-weight:800; font-size: 13px}
.empty-sub{color: var(--muted); font-weight:600; font-size: 12px}
.empty-main{flex:1; min-width:0}

.mascot-panel{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  align-items:stretch;
}
.mascot{
  background:
    radial-gradient(320px 220px at 30% 40%, var(--card2), transparent 65%),
    radial-gradient(320px 220px at 70% 70%, var(--card2), transparent 65%);
  display:grid;
  place-items:center;
  padding: 8px;
}
.mascot-img{
  width: 100%;
  max-width: 180px;
  filter: drop-shadow(0 12px 20px var(--shadow));
}
.mascot-copy{
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 6px;
  justify-content:center;
}
.mascot-title{
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: .2px;
  font-size: 15px;
}
.mascot-text{
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
}

/* Landing hero (scoped to .lh-* so other pages are unaffected) */
.lh-panel{
  border-radius: var(--radius2);
  border:1px solid var(--stroke);
  background: var(--glass);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.lh-top{
  display:grid;
  grid-template-columns: auto 1fr;
  align-items:stretch;
  gap: 0;
}
.lh-mascot{
  background:
    radial-gradient(320px 220px at 30% 40%, var(--card2), transparent 65%),
    radial-gradient(320px 220px at 70% 70%, var(--card2), transparent 65%);
  display:grid;
  place-items:center;
  padding: 8px;
}
.lh-mascot img{
  width: 100%;
  max-width: 180px;
  filter: drop-shadow(0 12px 20px var(--shadow));
}
.lh-copy{
  padding: 22px 26px 20px;
  display:flex;
  flex-direction:column;
  gap: 12px;
  justify-content:center;
  min-width: 0;
}
.lh-overline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, white 60%, transparent);
  border: 1px solid var(--stroke);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-espresso);
}
.lh-overline .dot{
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--c-caramel);
}
.lh-overline a{
  color: var(--muted);
  font-weight: 600;
  border-bottom: 1px dashed color-mix(in srgb, var(--c-espresso) 35%, transparent);
  padding-bottom: 1px;
}
.lh-overline a:hover{ color: var(--c-espresso); }
.lh-title{
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--c-espresso);
  max-width: 28ch;
}
.lh-text{
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 500;
  max-width: 52ch;
}
.lh-ctas{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.lh-auth{
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}
.lh-auth a{
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.lh-auth a:hover{
  color: var(--c-espresso);
  border-bottom-color: color-mix(in srgb, var(--c-espresso) 35%, transparent);
}
.lh-auth .sep{ margin: 0 6px; color: color-mix(in srgb, var(--c-espresso) 30%, transparent); }

.lh-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--stroke-light);
  background: color-mix(in srgb, var(--c-cream) 16%, white);
}
.lh-step{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  min-width: 0;
}
.lh-step + .lh-step{
  border-left: 1px solid var(--stroke-light);
}
.lh-step-num{
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--grad-accent);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--c-caramel) 35%, transparent);
}
.lh-step-text{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-espresso);
  line-height: 1.35;
}

.lh-loc-card{
  margin-top: 10px;
  border-radius: var(--radius2);
  border:1px solid var(--stroke);
  background: var(--glass);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lh-loc-card .lh-loc-label{
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-espresso);
}
.lh-loc-card form{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.lh-loc-card input{
  flex: 1 1 220px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--stroke);
  background: var(--glass);
  font-size: 13.5px;
  color: var(--c-espresso);
  outline: none;
}
.lh-loc-card input:focus{ border-color: var(--stroke-accent); }
.lh-loc-hint{ font-size: 11.5px; color: var(--muted); margin: 0; }

@media (max-width: 780px){
  .lh-top{ grid-template-columns: 1fr; }
  .lh-mascot{ display: none; }
  .lh-copy{ padding: 18px 18px 16px; }
  .lh-title{ font-size: 19px; }
  .lh-steps{ grid-template-columns: 1fr; }
  .lh-step + .lh-step{ border-left: 0; border-top: 1px solid var(--stroke-light); }
}
.mascot-actions{display:flex; gap: 6px; flex-wrap:wrap}

/* Sections */
.section{
  border-radius: var(--radius2);
  border: 1px solid var(--stroke);
  background: var(--glass);
  box-shadow: var(--shadow);
  padding: 10px;
  margin-top: 10px;
}
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
}
.section h2{
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: .2px;
  font-size: 16px;
}
.section-actions{
  display:flex;
  align-items:center;
  gap: 6px;
}

/* Opportunity cards row */
.cards-row{
  margin-top: 10px;
  display:flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  padding-top: 4px;
}
.cards-row::-webkit-scrollbar{height:4px}
.cards-row::-webkit-scrollbar-thumb{background: var(--stroke); border-radius: 999px}
.cards-row::-webkit-scrollbar-track{background: transparent}

.card{
  scroll-snap-align: start;
  min-width: 232px;
  max-width: 232px;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: var(--card);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--c-espresso) 8%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--c-espresso) 14%, transparent);
}
.card-top{
  height: 108px;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(145deg, #f5ede6, #e8d5c7);
}
/* Category-specific gradients — every category has a unique colour */
.card[data-cat="moving"] .card-top                        { background: linear-gradient(145deg, #fde9d4, #f5cfa8); } /* peach    */
.card[data-cat="cleaning"] .card-top                      { background: linear-gradient(145deg, #d4f0e8, #9fd9c8); } /* mint     */
.card[data-cat="yard work"] .card-top                     { background: linear-gradient(145deg, #ecfccb, #bef264); } /* lime     */
.card[data-cat="tech help"] .card-top                     { background: linear-gradient(145deg, #dbeafe, #93c5fd); } /* blue     */
.card[data-cat="pet care"] .card-top                      { background: linear-gradient(145deg, #fce7f3, #f9a8d4); } /* pink     */
.card[data-cat="handyman"] .card-top,
.card[data-cat="home repairs"] .card-top                  { background: linear-gradient(145deg, #fef9c3, #fde047); } /* yellow   */
.card[data-cat="errands"] .card-top                       { background: linear-gradient(145deg, #fee2e2, #fca5a5); } /* coral    */
.card[data-cat="tutoring"] .card-top                      { background: linear-gradient(145deg, #ede9fe, #c4b5fd); } /* violet   */
.card[data-cat="rides"] .card-top,
.card[data-cat="driving"] .card-top                       { background: linear-gradient(145deg, #cffafe, #67e8f9); } /* cyan     */
.card[data-cat="smart home"] .card-top                    { background: linear-gradient(145deg, #e0f2fe, #7dd3fc); } /* sky blue */
.card[data-cat="assembly"] .card-top                      { background: linear-gradient(145deg, #d1fae5, #6ee7b7); } /* emerald  */
.card[data-cat="gardening"] .card-top                     { background: linear-gradient(145deg, #dcfce7, #86efac); } /* green    */
.card[data-cat="delivery"] .card-top                      { background: linear-gradient(145deg, #ffedd5, #fdba74); } /* orange   */
.card[data-cat="painting"] .card-top                      { background: linear-gradient(145deg, #fdf4ff, #e879f9); } /* fuchsia  */
.card[data-cat="other"] .card-top                         { background: linear-gradient(145deg, #f1f5f9, #cbd5e1); } /* slate    */

.card-top::after{
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 36px;
  background: linear-gradient(to top, var(--card), transparent);
  pointer-events: none;
}
.card-ill{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-ill-emoji{
  font-size: 44px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid rgba(255,255,255,0.75);
}
/* hide legacy img tags in card-ill if they still exist */
.card-ill img{ display: none; }
.card-body{
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.card-kicker{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.tag{
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-latte) 22%, transparent);
  color: var(--c-espresso);
  border: 1px solid color-mix(in srgb, var(--c-latte) 40%, transparent);
  white-space: nowrap;
  flex-shrink: 0;
}
.budget{
  font-weight: 800;
  font-size: 13px;
  color: var(--c-espresso);
  white-space: nowrap;
  letter-spacing: -0.2px;
}
.card-title{
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.1px;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  margin-top: auto;
}
.card-meta .tiny{
  background: color-mix(in srgb, var(--c-success) 14%, transparent);
  color: var(--c-success);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.card-actions{
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.btn-mini{
  flex: 1;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  letter-spacing: 0.1px;
}

/* Micro actions */
.micro-actions{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.micro{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  border:1px solid var(--stroke);
  background: var(--glass);
  cursor:pointer;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 6px 16px var(--stroke-light);
}
.micro img{width:14px;height:14px}
.micro:hover{background: var(--glass-hover)}

/* Recent tasks */
.recent{
  margin-top: 10px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
.task{
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--card);
  box-shadow: 0 3px 14px color-mix(in srgb, var(--c-espresso) 7%, transparent);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.task:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--c-espresso) 12%, transparent);
}
.task .thumb{
  width: 62px;
  min-width: 62px;
  align-self: stretch;
  border-right: 1px solid var(--stroke-light);
  background: linear-gradient(160deg, #f5ede6, #e8d5c7);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
/* Override 20-panels.css .helper-card which sets column layout */
.task.helper-card {
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
/* Helper cards — rotating accent colours */
.task.helper-card[data-hue="0"] .thumb { background: linear-gradient(160deg, #fde9d4, #f5cfa8); }
.task.helper-card[data-hue="1"] .thumb { background: linear-gradient(160deg, #d4f0e8, #b8e0d2); }
.task.helper-card[data-hue="2"] .thumb { background: linear-gradient(160deg, #e8daf5, #d4bfec); }
.task.helper-card[data-hue="3"] .thumb { background: linear-gradient(160deg, #d6e8f8, #b8d4f0); }
.task.helper-card[data-hue="4"] .thumb { background: linear-gradient(160deg, #fce8ef, #f5c8d8); }
/* Category tints for task card thumbs — matches card headers */
.task[data-cat="moving"] .thumb                        { background: linear-gradient(160deg, #fde9d4, #f5cfa8); }
.task[data-cat="cleaning"] .thumb                      { background: linear-gradient(160deg, #d4f0e8, #9fd9c8); }
.task[data-cat="yard work"] .thumb                     { background: linear-gradient(160deg, #ecfccb, #bef264); }
.task[data-cat="tech help"] .thumb                     { background: linear-gradient(160deg, #dbeafe, #93c5fd); }
.task[data-cat="pet care"] .thumb                      { background: linear-gradient(160deg, #fce7f3, #f9a8d4); }
.task[data-cat="handyman"] .thumb,
.task[data-cat="home repairs"] .thumb                  { background: linear-gradient(160deg, #fef9c3, #fde047); }
.task[data-cat="errands"] .thumb                       { background: linear-gradient(160deg, #fee2e2, #fca5a5); }
.task[data-cat="tutoring"] .thumb                      { background: linear-gradient(160deg, #ede9fe, #c4b5fd); }
.task[data-cat="rides"] .thumb,
.task[data-cat="driving"] .thumb                       { background: linear-gradient(160deg, #cffafe, #67e8f9); }
.task[data-cat="smart home"] .thumb                    { background: linear-gradient(160deg, #e0f2fe, #7dd3fc); }
.task[data-cat="assembly"] .thumb                      { background: linear-gradient(160deg, #d1fae5, #6ee7b7); }
.task[data-cat="gardening"] .thumb                     { background: linear-gradient(160deg, #dcfce7, #86efac); }
.task[data-cat="delivery"] .thumb                      { background: linear-gradient(160deg, #ffedd5, #fdba74); }
.task[data-cat="painting"] .thumb                      { background: linear-gradient(160deg, #fdf4ff, #e879f9); }
.task[data-cat="other"] .thumb                         { background: linear-gradient(160deg, #f1f5f9, #cbd5e1); }
.task .thumb img{
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c-espresso) 14%, transparent);
}
.task .thumb .thumb-initial{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--grad-accent);
  border: 2px solid rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.task .thumb-emoji{
  font-size: 26px;
  line-height: 1;
}
.task .t-main{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 10px;
  flex: 1;
}
.task .t-title{
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}
.task .t-sub{
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  gap: 4px;
  align-items: center;
}
.task .t-sub img{ display: none; }
.task .t-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  padding-top: 4px;
}
.task .t-price{
  font-weight: 800;
  font-size: 12px;
  color: var(--c-espresso);
  letter-spacing: -0.2px;
}
.task .t-btn{
  border-radius: 8px;
  padding: 4px 10px;
  border: none;
  background: var(--grad-accent);
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--c-caramel) 30%, transparent);
}
.task .t-btn:hover{
  filter: brightness(1.06);
}

/* Footer */
.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 6px 2px;
  color: var(--muted);
  font-weight: 650;
}
.footer a{color: var(--c-espresso); font-weight: 800}
.dot-sep{opacity:.7}

/* Collapsed sidebar */
.app.is-collapsed{
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}
.app.is-collapsed .brand-name,
.app.is-collapsed .btn-txt,
.app.is-collapsed .ng-txt,
.app.is-collapsed .ng-chevron,
.app.is-collapsed .nav-items,
.app.is-collapsed .mini-card,
.app.is-collapsed .signout-txt{
  display:none;
}
.app.is-collapsed .brand{justify-content:center}
.app.is-collapsed .side-cta{padding: 0}
.app.is-collapsed .btn-wide{padding: 10px 0}
.app.is-collapsed .btn-ic{margin:0}
.app.is-collapsed .nav-group{justify-content:center}
.app.is-collapsed .side-toggle svg{transform: rotate(180deg)}
.app.is-collapsed .sidebar{padding-right: var(--edge-lg)}

/* Responsive */
@media (max-width: 1100px){
  .stat-grid{grid-template-columns: repeat(3, 1fr)}
  .active-wrap{grid-template-columns: 1fr 1fr}
  .mascot-panel{grid-template-columns: 1fr 1.2fr}
  .recent{grid-template-columns: repeat(2, minmax(0,1fr))}
  .micro-actions{grid-template-columns: repeat(2, minmax(0,1fr))}
  .welcome-mascot{max-width: 600px}
}

@media (max-width: 860px){
  :root{--edge: 0px}
  .app{grid-template-columns: 1fr}
  .welcome-mascot{max-width: 400px}
  .active-wrap{grid-template-columns: 1fr}
  .stat-grid{grid-template-columns: repeat(3, 1fr)}
  .topbar{z-index: 60; padding: 1px; background: var(--glass); border-bottom: 1px solid var(--stroke);}
  .home-btn{display:grid}
  .sidebar{
    position:fixed;
    left: 10px;
    top: 70px;
    bottom: 10px;
    height:auto;
    width: min(var(--sidebar-w), calc(100vw - 20px));
    z-index: 50;
    transform: translateX(calc(-100% - 14px));
    transition: transform .22s ease;
    border-radius: var(--radius2);
    box-shadow: var(--shadow);
    backdrop-filter: blur(10px);
    padding: 16px;
  }
  .app.drawer-open .sidebar{transform: translateX(0)}
  .main{padding: var(--edge)}
  .mobile-menu{display:grid !important}
  .overlay{
    display: none;
    position:fixed;
    inset:0;
    background: var(--overlay);
    backdrop-filter: blur(5px);
    z-index: 40;
  }
  .app.drawer-open .overlay{display: block;}
}

@media (max-width: 560px){
  :root{--edge-lg: 8px;}
  .topbar-right .chip{display:none}
  .profile-meta{display:none}
  .p-info{display:none}
  .recent{grid-template-columns: 1fr}
  .stat-grid{grid-template-columns: repeat(2, 1fr)}
  .stats-grid-mini{grid-template-columns: repeat(4, 1fr); gap: 4px;}
  .stat-mini{padding: 8px 4px;}
  .stat-mini .stat-value{font-size: 16px;}
  .stat-mini .stat-label{font-size: 9px;}
  .welcome-mascot{max-width: 100%}
  .micro-actions{grid-template-columns: repeat(2, minmax(0,1fr))}
  .hero{border-radius: 0; border-left: none; border-right: none;}
  .hero-inner{padding: 2px;}
  .panel{border-radius: 12px; margin: 0;}
  .panel-head{padding: 6px 8px;}
  .panel-body{padding: 8px;}
  .active-wrap{gap: 8px;}
  .quick-filters{padding: 6px 8px; gap: 4px;}
  .topbar{border-radius: 0; margin: 0; padding: 1px 1px;}
  .icon-btn{width: 36px; height: 36px; border-radius: 12px;}
  .card{min-width: 180px; max-width: 180px;}
  .card-top{height: 80px;}
  .auth-inline{padding: 12px;}
  .auth-inline .auth-form{max-width: 100%;}
  .auth-inline .auth-title{font-size: 16px;}
  .page-title{font-size: 18px; margin-bottom: 10px;}
  h1, .h1{font-size: 18px;}
  h2, .h2{font-size: 15px;}
  .footer{padding: 8px 10px; font-size: 11px;}
}