:root{
  /* =========================================================
     Playful Indigo palette — see docs/DESIGN_TOKENS.md
     ========================================================= */

  /* Primary action (indigo) */
  --c-indigo: #14B8A6;
  --c-indigo-deep: #0D9488;
  --c-indigo-tint: #F0FDFA;

  /* Celebrate accent (pink) */
  --c-pink: #EC4899;
  --c-pink-deep: #DB2777;
  --c-pink-tint: #FDF2F8;

  /* Reward (lime) */
  --c-lime: #A3E635;
  --c-lime-deep: #84CC16;
  --c-lime-tint: #F7FEE7;

  /* Ink / text (slate) */
  --c-ink: #0F172A;
  --c-ink-soft: #475569;
  --c-ink-muted: #94A3B8;

  /* Surfaces */
  --c-bg: #FFFFFF;
  --c-bg-page: color-mix(in srgb, #14B8A6 7%, #FFFFFF);
  --c-surface-2: #F8FAFC;
  --c-border: #E2E8F0;

  /* Semantic */
  --c-success: #10B981;
  --c-warning: #F59E0B;
  --c-error: #EF4444;
  --c-info: #0EA5E9;
  --c-white: #ffffff;

  /* ---------------------------------------------------------
     Coffee-token aliases — remapped to the current palette so
     the existing cascade inherits the refresh automatically.
     Do NOT introduce new references to --c-espresso/caramel/
     latte/cream/oat; use the tokens above instead.
     --------------------------------------------------------- */
  --c-espresso: var(--c-ink);         /* was #714329, now slate-900 */
  --c-caramel:  var(--c-indigo);      /* was #B08463, now indigo-500 */
  --c-latte:    var(--c-pink);        /* was #B9937B, now pink-500 */
  --c-cream:    var(--c-surface-2);   /* was #D0B9A7, now slate-50 */
  --c-oat:      var(--c-border);      /* was #B5A192, now slate-200 */

  /* Derived colors */
  --c-accent-light: color-mix(in srgb, var(--c-indigo) 50%, white);
  --c-accent-dark: var(--c-indigo-deep);
  --c-muted: var(--c-ink-soft);

  /* ---------------------------------------------------------
     Polish-tier aliases — referenced by 50-payouts.css and
     elsewhere in the design system spec without a fallback.
     Without these the polished templates render with a
     transparent hero / black-on-black amount / no semantic
     status colors. Map each alias onto the canonical token.
     --------------------------------------------------------- */
  --c-text: var(--c-ink);
  --c-on-primary: var(--c-white);
  --c-surface: var(--c-bg);
  --c-divider: var(--c-border);
  --c-border-strong: color-mix(in srgb, var(--c-border) 30%, var(--c-indigo));
  --c-warn: var(--c-warning);
  --c-danger: var(--c-error);
  --c-primary: var(--c-indigo);
  --c-secondary: var(--c-pink);
  --c-accent: var(--c-lime);
  --c-overlay: var(--c-ink);
  /* Text-safe teal: passes WCAG AA on white (4.6:1). Use this everywhere
     teal is set on `color:`. Backgrounds and borders keep --c-indigo. */
  --c-indigo-text: #0F766E;
  /* Text-safe lime: lime-500 fails AA on white. lime-700 (#4D7C0F) passes. */
  --c-lime-text: #4D7C0F;
  --grad-primary: linear-gradient(135deg, var(--c-indigo) 0%, var(--c-indigo-deep) 100%);

  /* Motion + radius scale — used by hover-lift transitions
     and panel chrome. Existing CSS calls them with fallbacks
     (e.g. ``var(--r-2, 14px)``) but defining them centrally
     keeps any new component automatically consistent. */
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 360ms;
  --r-1: 10px;
  --r-2: 14px;
  --r-3: 16px;
  --r-4: 20px;
  --shadow-1: 0 6px 16px color-mix(in oklab, var(--c-ink) 6%, transparent);
  --shadow-2: 0 16px 50px color-mix(in oklab, var(--c-ink) 10%, transparent);

  /* Semantic mappings */
  --bg: var(--c-bg);
  --ink: var(--c-ink);
  --muted: var(--c-ink-soft);
  --accent: var(--c-indigo);
  --accent-light: var(--c-accent-light);
  --accent-dark: var(--c-accent-dark);
  --secondary: var(--c-pink);
  --secondary-light: color-mix(in srgb, var(--c-pink) 40%, white);
  --highlight: var(--c-lime);
  --warm: var(--c-pink);

  /* Surfaces */
  --card: var(--c-white);
  --card2: var(--c-indigo-tint);
  --card-hover: color-mix(in srgb, var(--c-indigo) 8%, white);
  --glass: color-mix(in srgb, var(--c-white) 92%, transparent);
  --glass-hover: color-mix(in srgb, var(--c-indigo) 6%, 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 */
  --stroke: var(--c-border);
  --stroke-accent: color-mix(in srgb, var(--c-indigo) 35%, transparent);
  --stroke-light: color-mix(in srgb, var(--c-border) 60%, transparent);
  --shadow: 0 16px 50px color-mix(in srgb, var(--c-ink) 10%, transparent);
  --shadow-sm: 0 6px 16px color-mix(in srgb, var(--c-ink) 6%, transparent);
  --shadow-lg: 0 12px 30px color-mix(in srgb, var(--c-ink) 8%, transparent);
  --shadow-celebrate: 0 0 48px color-mix(in srgb, var(--c-pink) 40%, transparent);
  --overlay: color-mix(in srgb, var(--c-ink) 55%, transparent);

  /* Gradients */
  --grad-accent: linear-gradient(135deg, var(--c-pink), var(--c-indigo));
  --grad-accent-subtle: linear-gradient(135deg, color-mix(in srgb, var(--c-pink) 20%, transparent), color-mix(in srgb, var(--c-indigo) 20%, transparent));
  --grad-glass: linear-gradient(145deg, color-mix(in srgb, var(--c-white) 90%, transparent), color-mix(in srgb, var(--c-indigo-tint) 40%, transparent));
  --grad-panel: linear-gradient(180deg, var(--glass), color-mix(in srgb, var(--c-indigo-tint) 50%, transparent));
  --grad-joy: linear-gradient(135deg, #EC4899 0%, #14B8A6 50%, #A3E635 100%);
  --grad-reward: linear-gradient(135deg, var(--c-lime), var(--c-lime-deep));

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;
  --radius: var(--radius-md);
  --radius2: 18px;
  --edge: 6px;
  --edge-lg: 10px;
  --panel-pad: 14px;
  --sidebar-w: 270px;
  --sidebar-w-collapsed: 92px;

  /* Type scale */
  --fs-xs: 0.75rem;     /* 12px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.25rem;     /* 20px */
  --fs-2xl: 1.5rem;     /* 24px */
  --fs-3xl: 1.875rem;   /* 30px */
  --fs-display: 2.5rem; /* 40px */
  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Motion */
  --motion-tap: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --motion-enter: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-shimmer: 1200ms linear;
  --motion-page: 200ms cubic-bezier(0.4, 0, 0.2, 1);

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

@media (prefers-reduced-motion: reduce){
  :root{
    --motion-tap: 0ms linear;
    --motion-enter: 0ms linear;
    --motion-bounce: 0ms linear;
    --motion-shimmer: 0ms linear;
    --motion-page: 0ms linear;
  }
}

/* Global focus ring — visible indigo outline on keyboard nav only */
:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--c-indigo) 45%, transparent);
  outline-offset: 2px;
  border-radius: 8px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--c-indigo) 45%, transparent);
  outline-offset: 2px;
}

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

/* Global heading cascade — display font on page-level titles, UI font
   on dense headings. Margins kept at 0 to honor the dense-layout rule;
   components add spacing locally where needed. */
h1, .h1{
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-ink);
  margin: 0;
}
h2, .h2{
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--c-ink);
  margin: 0;
}
h3, .h3{
  font-family: var(--font-ui);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-ink);
  margin: 0;
}
h4, .h4{
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--c-ink);
  margin: 0;
}
h5, .h5{
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-ink-soft);
  margin: 0;
}
h6, .h6{
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-ink-soft);
  margin: 0;
}

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}

.side-section-divider{
  margin: 16px 8px 6px;
  padding-top: 12px;
  border-top: 1px solid var(--stroke);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* Footer polish (Chapter 8) — slim, gradient top rule, pink link hover. */
.footer{
  position: relative;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--c-ink-soft);
}
.footer::before{
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--c-indigo) 50%, transparent 100%);
}
.footer a{color: var(--c-ink-soft); transition: color var(--t-fast, 120ms);}
.footer a:hover{color: var(--c-pink-deep); text-decoration: underline; text-decoration-color: var(--c-pink);}

.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{
  background: var(--c-indigo);
  color: var(--c-white);
  border-color: var(--c-indigo);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-indigo) 30%, transparent);
  transition: transform var(--motion-tap), box-shadow var(--motion-tap), background var(--motion-tap);
}
.btn-primary .btn-ic{background: var(--c-indigo-deep); border-color: var(--c-indigo-deep)}
.btn-primary:hover{background: var(--c-indigo-deep); border-color: var(--c-indigo-deep)}
.btn-primary:active{transform: scale(0.97)}
.btn-secondary{
  background: var(--c-pink);
  color: var(--c-white);
  border-color: var(--c-pink);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-pink) 28%, transparent);
  transition: transform var(--motion-tap), background var(--motion-tap);
}
.btn-secondary:hover{background: var(--c-pink-deep); border-color: var(--c-pink-deep)}
.btn-secondary:active{transform: scale(0.97)}
.btn-reward{
  background: var(--grad-reward);
  color: var(--c-ink);
  border-color: var(--c-lime-deep);
  font-weight: 800;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c-lime-deep) 30%, transparent);
  transition: transform var(--motion-tap), filter var(--motion-tap);
}
.btn-reward:hover{filter: brightness(1.05)}
.btn-reward:active{transform: scale(0.97)}
.btn-celebrate{
  background: var(--grad-joy);
  color: var(--c-white);
  border-color: transparent;
  font-weight: 800;
  box-shadow: var(--shadow-celebrate);
  transition: transform var(--motion-tap), filter var(--motion-tap);
}
.btn-celebrate:hover{filter: brightness(1.06)}
.btn-celebrate:active{transform: scale(0.97)}
.btn-ghost{
  background: transparent;
  box-shadow:none;
}
.btn-ghost:hover{background: var(--c-indigo-tint)}
.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: var(--c-error)}
.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: 4px 10px;
  background: var(--c-surface);
  border-bottom: 0;
  box-shadow: 0 2px 0 0 var(--c-indigo),
              0 4px 12px color-mix(in oklab, var(--c-indigo) 12%, transparent);
}
.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: var(--grad-joy);
  -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)}

/* Topbar subscription chip — small status pill that sits beside the
   home button and reflects the user's current sub state at a glance.
   Width is content-driven; heights/paddings line up with .icon-btn so
   it doesn't break the topbar's vertical rhythm. */
.sub-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  height: 42px;
  padding: 0 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: var(--glass);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 28px var(--shadow-sm);
  transition: background .15s ease;
}
.sub-chip:hover{ background: var(--glass-hover); }
.sub-chip-ic{ font-size: 13px; line-height: 1; }
.sub-chip-label{ font-weight: 800; letter-spacing: .2px; }
.sub-chip-meta{
  font-weight: 600;
  font-size: 11px;
  color: var(--muted);
  padding-left: 6px;
  border-left: 1px solid var(--stroke-light);
}
.sub-chip.is-free{
  border-color: var(--c-espresso, #b08a4a);
  color: var(--c-espresso, #7a4a1a);
}
.sub-chip.is-warn{ border-color: var(--c-warn, #c98a14); }
.sub-chip.is-warn .sub-chip-meta{ color: var(--c-warn, #c98a14); }

@media (max-width: 640px){
  /* On small screens hide the meta line so the chip stays small;
     tier name + state colour still convey the most important info. */
  .sub-chip-meta{ display:none; }
  .sub-chip{ padding: 0 10px; }
}

.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;
}

/* Email summary panel — replaces the mascot/tip card in the dashboard hero
   for signed-in users. Lives in the same .active-wrap left slot. */
.email-summary-panel{ display:flex; flex-direction:column; }
.email-summary-panel .panel-body{ padding: 8px 10px; }
.email-summary__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  margin-left: 6px;
  border-radius: 999px;
  background: var(--c-espresso);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.email-summary__badge[hidden]{ display: none; }
.email-summary__list{ list-style: none; margin: 0; padding: 0; }
.email-summary__row{
  border-bottom: 1px solid var(--stroke-light);
}
.email-summary__row:last-child{ border-bottom: 0; }
.email-summary__link{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  text-decoration: none;
  color: inherit;
}
.email-summary__link:hover{ background: var(--card2); border-radius: 8px; }
.email-summary__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-espresso);
  flex-shrink: 0;
}
.email-summary__row:not(.is-unread) .email-summary__link{
  /* Reserve dot space so read/unread rows align. */
  grid-template-columns: 0 minmax(0, 1fr) auto;
}
.email-summary__from{
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-summary__row.is-unread .email-summary__from{ font-weight: 800; }
.email-summary__subject{
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-summary__row.is-unread .email-summary__subject{ color: inherit; }
.email-summary__time{
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* 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 stray img tags in card-ill — illustrations are SVG-only */
.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{
  /* Bump bg saturation + darken text from emerald-500 (#10B981, ~3:1 on
     white) to emerald-800 (#065F46, ~9:1) so the chip clears WCAG AA on
     the card body. The bg also picks up more of --c-success so the chip
     reads as a chip rather than disappearing into the card. */
  background: color-mix(in srgb, var(--c-success) 22%, white);
  color: #065F46;
  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: 6px 8px; gap: 8px; background: var(--glass); border-bottom: 1px solid var(--stroke);}
  .topbar-left{gap: 6px;}
  .topbar-right{gap: 6px;}
  .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}
  .topbar-right .btn.btn-ghost.small{display:none}
  .profile-meta{display:none}
  .p-info{display:none}
  .profile{padding: 0; border: 0; background: transparent; gap: 2px;}
  .user-menu-toggle{padding: 2px; font-size: 9px; opacity: .6;}
  .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: 6px 8px;}
  .icon-btn{width: 38px; height: 38px; border-radius: 12px; box-shadow: none;}
  .avatar{width: 34px; height: 34px; border-radius: 11px;}
  .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;}
}

/* ============================================================
   PRINT — invoices, receipts, agreement details. Strips chrome
   (sidebar/topbar/footer/buttons), forces white bg, single-column
   layout, dark-on-white text. Activates on Ctrl+P / "Save as PDF".
   ============================================================ */
@media print {
  :root { --c-bg-page: #fff; }
  body, .main, .app { background: #fff !important; color: #000 !important; }
  .app { display: block !important; grid-template-columns: 1fr !important; }
  .sidebar,
  .topbar,
  .footer,
  .btn,
  .panel-filters,
  .panel-header__chips,
  .chip-group,
  .toast,
  .modal,
  #overlay,
  nav,
  .side-nav,
  .panel-actions,
  .mobile-menu,
  .back-link { display: none !important; }
  .task-page,
  .panel-list,
  .panel-wallet,
  .panel-payouts,
  .invoice-page,
  .panel-transactions,
  .panel-agreement { padding: 0 !important; }
  .panel,
  .task-detail-card,
  .balance-card,
  .invoice-row,
  .task-card,
  .task-hero,
  .payouts-hero,
  .invoice-hero,
  .agreement-card,
  .receipt-page,
  .panel-form { box-shadow: none !important; border: 1px solid #000 !important; background: #fff !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; font-size: 10px; color: #444; }
  a[href^="#"]:after,
  a[href^="javascript:"]:after { content: ""; }
  h1, h2, h3, h4, h5 { color: #000 !important; page-break-after: avoid; }
  .task-status-pill,
  .task-item-status,
  .job-status,
  .status { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; }
  @page { margin: 1.5cm; }
}