/* ============================================================
   NEEDKARO — Local Life Intelligence
   Design System v1 (Somurobo Family)
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #eff6ff;
  --color-primary-subtle: #dbeafe;
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-alt: #f8fafc;
  --color-border: #e2e6ec;
  --color-border-strong: #cbd5e1;
  --color-text: #1a1f2b;
  --color-text-secondary: #4b5563;
  --color-muted: #6b7280;
  --color-muted-light: #9ca3af;
  --color-white: #ffffff;
  --color-black: #0f172a;
  --color-success: #1a8f5a;
  --color-success-soft: #dcfce7;
  --color-warning: #d97706;
  --color-warning-soft: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;
  --color-info: #0891b2;
  --color-info-soft: #cffafe;
  --tier-basic-bg: #f3f4f6;
  --tier-basic-text: #4b5563;
  --tier-basic-border: #d1d5db;
  --tier-premium-bg: #fef3c7;
  --tier-premium-text: #92400e;
  --tier-premium-border: #fcd34d;
  --tier-ultra-bg: #eef2ff;
  --tier-ultra-text: #3730a3;
  --tier-ultra-border: #a5b4fc;
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
  --radius-xl: 16px; --radius-full: 999px;
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.04);
  --shadow-md: 0 4px 16px rgba(15,23,42,0.07), 0 8px 24px rgba(15,23,42,0.04);
  --shadow-lg: 0 12px 40px rgba(15,23,42,0.09);
  --shadow-focus: 0 0 0 3px rgba(37,99,235,0.35);
  --max-width: 1200px;
  --header-height: 64px;
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.nk-assistant {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 70;
}

.nk-assistant-launcher {
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 999px;
    padding: 10px 14px;
    box-shadow: var(--shadow-md);
    font-weight: 700;
    cursor: pointer;
}

.nk-assistant-panel {
    position: absolute;
    right: 0;
    bottom: 54px;
    width: min(360px, calc(100vw - 24px));
    max-height: min(520px, calc(100vh - 120px));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.nk-assistant-head,
.nk-assistant-form {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-bottom: 1px solid var(--color-border);
}

.nk-assistant-form {
    border-top: 1px solid var(--color-border);
    border-bottom: 0;
}

.nk-assistant-form .input {
    min-width: 0;
    flex: 1;
}

.nk-assistant-close {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}

.nk-assistant-log {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-height: 340px;
    overflow-y: auto;
    padding: var(--sp-3);
}

.nk-assistant-msg {
    max-width: 88%;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    overflow-wrap: anywhere;
}

.nk-assistant-msg-bot {
    align-self: flex-start;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

.nk-assistant-msg-user {
    align-self: flex-end;
    background: var(--color-primary);
    color: var(--color-white);
}

.nk-assistant-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

@media (max-width: 767px) {
    .nk-assistant {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
    }
    .nk-assistant-panel {
        bottom: 52px;
        width: calc(100vw - 24px);
        max-height: min(480px, calc(100vh - 100px));
    }
    .nk-assistant-launcher {
        padding: 9px 12px;
        font-size: var(--text-sm);
    }
}
img, svg { display: block; max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-hover); text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: var(--leading-tight); font-weight: 700; color: var(--color-text); }
h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); }
p { margin: 0 0 var(--sp-4); }
small { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-height);
}
.header-inner {
  max-width: var(--max-width); margin: 0 auto; padding: 0 var(--sp-6);
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6);
}
.header-brand {
  display: flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: var(--color-text); flex-shrink: 0;
}
.header-brand:hover { text-decoration: none; color: var(--color-text); }
.header-brand svg { width: 32px; height: 32px; flex-shrink: 0; }
.header-brand-text { font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.header-nav { display: flex; align-items: center; gap: var(--sp-1); }
.header-menu-toggle {
  display: none; width: 40px; height: 40px; place-items: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); cursor: pointer;
}
.header-menu-toggle:hover { border-color: var(--color-border-strong); }
@media (max-width: 1024px) {
  .header-menu-toggle { display: grid; }
  .header-nav {
    position: absolute; top: var(--header-height); left: 0; right: 0;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg); max-height: calc(100vh - var(--header-height));
    overflow-y: auto; z-index: 150;
  }
  .header-nav.header-nav-visible { display: flex; }
  .header-nav a, .header-nav button {
    padding: var(--sp-4) var(--sp-6); border-radius: 0;
    border-bottom: 1px solid var(--color-border);
    justify-content: flex-start;
  }
}
.header-nav a, .header-nav button {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary);
  transition: all var(--transition-fast); white-space: nowrap; text-decoration: none;
}
.header-nav a:hover, .header-nav button:hover { background: var(--color-bg); color: var(--color-text); text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; }
.header-nav .form-tools-nav { justify-content:center;min-height:42px;color:#fff;background:linear-gradient(135deg,#2563eb,#0d9488);border:1px solid rgba(255,255,255,.25);border-radius:999px;box-shadow:0 5px 14px rgba(13,148,136,.24);font-weight:800;animation:form-tools-glow 9s ease-in-out infinite;transition:transform .18s ease,box-shadow .18s ease; }
.header-nav .form-tools-nav small{padding:2px 5px;border-radius:999px;color:#155e75;background:#cffafe;font-size:.58rem;font-weight:900;letter-spacing:.04em}.header-nav .form-tools-nav:hover,.header-nav .form-tools-nav:focus-visible{color:#fff;background:linear-gradient(135deg,#1d4ed8,#0f766e);transform:translateY(-2px);box-shadow:0 8px 18px rgba(13,148,136,.32);animation-play-state:paused}.header-nav .form-tools-nav:focus-visible{outline:3px solid #67e8f9;outline-offset:3px}.form-tools-arrow{transition:transform .18s ease}.form-tools-nav:hover .form-tools-arrow,.form-tools-nav:focus-visible .form-tools-arrow{transform:translate(2px,-1px)}
.form-tools-promo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-4);max-width:var(--max-width);margin:var(--sp-5) auto;padding:var(--sp-4) var(--sp-5);border:1px solid #99f6e4;border-radius:var(--radius-lg);background:linear-gradient(120deg,#eff6ff,#f0fdfa);box-shadow:var(--shadow-sm)}.form-tools-promo-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#dbeafe;font-size:1.5rem}.form-tools-promo h2{margin:0 0 var(--sp-1);font-size:var(--text-lg)}.form-tools-promo p{margin:0;color:var(--color-text-secondary);font-size:var(--text-sm)}.form-tools-promo>a{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:44px;padding:var(--sp-3) var(--sp-4);border-radius:999px;color:#fff;background:linear-gradient(135deg,#2563eb,#0d9488);font-weight:800;text-decoration:none;white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease}.form-tools-promo>a:hover,.form-tools-promo>a:focus-visible{color:#fff;text-decoration:none;transform:translateY(-2px);box-shadow:0 8px 18px rgba(13,148,136,.28)}.form-tools-promo>a:focus-visible{outline:3px solid #0e7490;outline-offset:3px}
@keyframes form-tools-glow{0%,12%,100%{box-shadow:0 5px 14px rgba(13,148,136,.24)}6%{box-shadow:0 5px 20px rgba(45,212,191,.58),0 0 0 4px rgba(45,212,191,.12)}}
@media(max-width:1024px){.header-nav .form-tools-nav{margin:6px var(--sp-4);min-height:46px;border-radius:999px!important;justify-content:center!important}}
@media(max-width:640px){.form-tools-promo{grid-template-columns:auto minmax(0,1fr);margin:var(--sp-4);padding:var(--sp-4)}.form-tools-promo>a{grid-column:1/-1;width:100%;white-space:normal}}
@media(prefers-reduced-motion:reduce){.header-nav .form-tools-nav{animation:none;transition:none}.header-nav .form-tools-nav:hover,.header-nav .form-tools-nav:focus-visible,.form-tools-promo>a:hover,.form-tools-promo>a:focus-visible{transform:none}.form-tools-arrow{transition:none}}

/* ---------- App Switcher ---------- */
.ecosystem-switcher { position: relative; }
.ecosystem-switcher summary {
  display: grid; width: 36px; height: 36px; place-items: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-muted); background: var(--color-surface);
  cursor: pointer; list-style: none; transition: all var(--transition-fast);
}
.ecosystem-switcher summary::-webkit-details-marker { display: none; }
.ecosystem-switcher summary:hover { border-color: var(--color-border-strong); color: var(--color-text); background: var(--color-bg); }
.ecosystem-switcher summary svg { width: 18px; height: 18px; }
.ecosystem-panel {
  position: absolute; top: calc(100% + var(--sp-2)); right: 0; width: 240px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-2); z-index: 200;
}
.ecosystem-panel[hidden] { display: none; }
.ecosystem-panel-title {
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-muted); padding: var(--sp-2) var(--sp-3);
}
.ecosystem-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
  color: var(--color-text); text-decoration: none; font-size: var(--text-sm);
  font-weight: 500; transition: background var(--transition-fast);
}
.ecosystem-item:hover { background: var(--color-bg); text-decoration: none; color: var(--color-text); }
.ecosystem-item.current { background: var(--color-primary-soft); color: var(--color-primary); font-weight: 600; }
.ecosystem-product-mark {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  display: grid; place-items: center; font-weight: 800; font-size: var(--text-sm); flex-shrink: 0;
}
.ecosystem-product-mark.calc { background: #dbeafe; color: var(--color-primary); }
.ecosystem-product-mark.imagivo { background: #e0e7ff; color: #4f46e5; }
.ecosystem-product-mark.numerology { background: #fce7f3; color: #be185d; }
.ecosystem-product-mark.needkaro { background: var(--color-primary-soft); color: var(--color-primary); }

/* ---------- Language Switcher ---------- */
.lang-switcher { position: relative; }
.lang-switcher select {
  appearance: none; -webkit-appearance: none;
  padding: var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--color-text); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; transition: all var(--transition-fast);
}
.lang-switcher select:hover { border-color: var(--color-border-strong); }
.lang-switcher select:focus { outline: none; box-shadow: var(--shadow-focus); border-color: var(--color-primary); }

/* ---------- Main ---------- */
main { flex: 1; width: 100%; }
.page-container { max-width: var(--max-width); margin: 0 auto; padding: var(--sp-8) var(--sp-6); }
@media (max-width: 640px) { .page-container { padding: var(--sp-4) var(--sp-4); } }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-black); color: #94a3b8; padding: var(--sp-12) 0 var(--sp-6); margin-top: auto; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--sp-6); }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-8);
  padding-bottom: var(--sp-8); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand strong { display: block; font-size: var(--text-lg); font-weight: 700; color: var(--color-white); margin-bottom: var(--sp-2); }
.footer-brand p { font-size: var(--text-sm); color: #94a3b8; margin: 0; line-height: var(--leading-relaxed); }
.footer-column h4 { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-white); margin-bottom: var(--sp-4); }
.footer-column a { display: block; font-size: var(--text-sm); color: #94a3b8; padding: var(--sp-1) 0; transition: color var(--transition-fast); }
.footer-column a:hover { color: var(--color-white); text-decoration: none; }
.footer-bottom { padding-top: var(--sp-6); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
.footer-bottom p { font-size: var(--text-xs); color: #64748b; margin: 0; }
.footer-bottom-links { display: flex; gap: var(--sp-4); }
.footer-bottom-links a { font-size: var(--text-xs); color: #64748b; }
.footer-bottom-links a:hover { color: #94a3b8; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; text-align: center; } }

/* ---------- Typography Helpers ---------- */
.eyebrow { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); margin-bottom: var(--sp-2); }
.page-title { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--sp-2); }
.page-subtitle { font-size: var(--text-lg); color: var(--color-text-secondary); margin-bottom: var(--sp-6); max-width: 640px; }
.section-title { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--sp-4); }
.text-muted { color: var(--color-muted); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-center { text-align: center; }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-1 { margin-bottom: var(--sp-1); } .mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-snug);
  cursor: pointer; transition: all var(--transition-fast); white-space: nowrap;
  text-decoration: none; border: 1px solid transparent;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--color-primary); color: var(--color-white); box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-sm); text-decoration: none; }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-bg); border-color: var(--color-border-strong); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--color-primary); }
.btn-ghost:hover { background: var(--color-primary-soft); text-decoration: none; }
.btn-danger { background: var(--color-danger); color: var(--color-white); }
.btn-danger:hover { background: #b91c1c; text-decoration: none; }
.btn-success { background: var(--color-success); color: var(--color-white); }
.btn-success:hover { background: #15803d; text-decoration: none; }
.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-lg { padding: var(--sp-4) var(--sp-6); font-size: var(--text-base); border-radius: var(--radius-lg); }
.btn-block { width: 100%; display: flex; }

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card-title { font-size: var(--text-lg); font-weight: 700; margin: 0; }
.card-body { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--color-border); }

/* ---------- Listing Card ---------- */
.listing-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
  display: flex; flex-direction: column;
}
.listing-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.listing-card-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; color: inherit; }
.listing-card-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.listing-card-photo { width: 100%; height: 200px; object-fit: cover; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.listing-card-photo-placeholder {
  width: 100%; height: 200px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--color-bg), var(--color-surface-alt));
  color: var(--color-muted-light); font-size: var(--text-sm); font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}
.listing-placeholder-icon { font-size: 2rem; line-height: 1; opacity: .65; }
.listing-card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.listing-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); }
.listing-card-name { font-size: var(--text-lg); font-weight: 700; line-height: var(--leading-tight); margin: 0; }
.listing-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--color-muted); }
.listing-card-rating { display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; color: var(--color-warning); }
.listing-card-rating .count { color: var(--color-muted); font-weight: 500; }
.listing-card-distance { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--color-muted); font-size: var(--text-sm); }
.listing-card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--color-border); }
.listing-card-price { font-weight: 700; color: var(--color-text); font-size: var(--text-sm); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; line-height: 1; white-space: nowrap; }
.badge-basic { background: var(--tier-basic-bg); color: var(--tier-basic-text); border: 1px solid var(--tier-basic-border); }
.badge-premium { background: var(--tier-premium-bg); color: var(--tier-premium-text); border: 1px solid var(--tier-premium-border); }
.badge-ultra { background: var(--tier-ultra-bg); color: var(--tier-ultra-text); border: 1px solid var(--tier-ultra-border); }
.badge-verified { background: var(--color-success-soft); color: var(--color-success); }
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-neutral { background: #f3f4f6; color: #4b5563; }
.tier-basic { border-left: 3px solid var(--tier-basic-border); }
.tier-premium { border-left: 3px solid var(--tier-premium-border); }
.tier-ultra_premium { border-left: 3px solid var(--tier-ultra-border); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: var(--sp-4); }
.form-group label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--sp-2); color: var(--color-text); }
.form-group label .required { color: var(--color-danger); margin-left: var(--sp-1); }
.input, .select, .textarea {
  width: 100%; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text);
  font-size: var(--text-base); line-height: var(--leading-normal);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--color-muted-light); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-border-strong); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.textarea { min-height: 120px; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}

/* ---------- Auth ---------- */
.auth-page {
  display: flex; align-items: flex-start; justify-content: center;
  min-height: calc(100vh - var(--header-height)); padding: var(--sp-8) var(--sp-6);
  background: linear-gradient(180deg, var(--color-bg) 0%, #eef1f6 100%);
}
.auth-card { width: 100%; max-width: 420px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--sp-8); box-shadow: var(--shadow-md); }
.auth-card-wide { max-width: 680px; }
.auth-card-header { text-align: center; margin-bottom: var(--sp-6); }
.auth-card-header h1 { font-size: var(--text-2xl); margin-bottom: var(--sp-2); }
.auth-card-header p { color: var(--color-muted); font-size: var(--text-sm); margin: 0; }
.auth-form .input { margin-bottom: var(--sp-3); }
.auth-form .btn { width: 100%; margin-top: var(--sp-2); }
.auth-footer { text-align: center; margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--color-muted); }
.auth-footer a { font-weight: 600; }

/* ---------- Signup Role Selector ---------- */
.role-choices { border: none; padding: 0; margin: 0 0 var(--sp-4); }
.role-choices legend { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--sp-2); padding: 0; width: 100%; }
.role-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.role-option { display: block; cursor: pointer; }
.role-option input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.role-card {
    display: flex; flex-direction: column; gap: var(--sp-1);
    padding: var(--sp-4); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); background: var(--color-bg);
    transition: all var(--transition-fast); min-height: 76px;
}
.role-card .role-title { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.role-card .role-desc { font-size: var(--text-xs); color: var(--color-muted); line-height: 1.4; word-break: break-word; }
.role-option input[type=radio]:checked + .role-card {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}
.role-option input[type=radio]:focus-visible + .role-card { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (max-width: 540px) {
    .role-options { grid-template-columns: 1fr; }
    .auth-card-wide { max-width: 100%; }
}
.seller-fields { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px dashed var(--color-border); }
.seller-fields h2 { font-size: var(--text-base); margin: 0 0 var(--sp-2); }
.seller-help { font-size: var(--text-xs); color: var(--color-muted); margin: var(--sp-2) 0 0; }

/* ---------- Auth checkboxes ---------- */
.auth-form .checkbox-label { display: inline-flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--sp-3); cursor: pointer; }
.auth-form .checkbox-label input { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; accent-color: var(--color-primary); flex-shrink: 0; }
.auth-form .terms-label { margin-bottom: var(--sp-4); }
.auth-form .terms-label a { color: var(--color-primary); text-decoration: underline; }

/* ---------- Hero Search ---------- */
.hero-search { background: linear-gradient(180deg, #f0f4ff 0%, var(--color-bg) 100%); border-bottom: 1px solid var(--color-border); padding: var(--sp-12) 0 var(--sp-10); }
.hero-search-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--sp-6); text-align: center; }
.hero-search h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: var(--sp-3); }
.hero-search p { font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 560px; margin: 0 auto var(--sp-6); }
.search-bar { display: flex; gap: var(--sp-2); max-width: 640px; margin: 0 auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-2); box-shadow: var(--shadow-sm); }
.search-bar .input { flex: 1; border: none; background: transparent; padding: var(--sp-3) var(--sp-4); box-shadow: none; min-width: 0; }
.search-bar .input:focus { box-shadow: none; }
.search-bar .btn { flex-shrink: 0; }
.search-trust { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-4); font-size: var(--text-sm); color: var(--color-muted); }
.search-trust span { display: inline-flex; align-items: center; gap: var(--sp-1); }
@media (max-width: 640px) {
  .hero-search { padding: var(--sp-8) 0 var(--sp-6); }
  .search-bar { flex-direction: column; }
  .search-trust { flex-direction: column; gap: var(--sp-2); }
}

/* ---------- Module Grid ---------- */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.module-card {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  transition: all var(--transition-base); position: relative; overflow: hidden;
}
.module-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--color-primary); border-radius: 0 2px 2px 0; }
.module-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; color: inherit; }
.module-card-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: var(--text-xl); background: var(--color-primary-soft); color: var(--color-primary); font-weight: 700; }
.module-card h3 { font-size: var(--text-base); font-weight: 700; margin: 0; }
.module-card p { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
@media (max-width: 480px) { .module-grid { grid-template-columns: 1fr; } }

/* ---------- Filters ---------- */
.filters-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); align-items: flex-end; }
.filters-bar .form-group { margin-bottom: 0; flex: 1; min-width: 140px; }
.filters-bar > .select { flex: 1; min-width: 140px; }
.location-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); align-items: flex-end; }
.location-filters > .select { flex: 1; min-width: 140px; }
.subcategory-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.filter-chip {
  display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-secondary);
  font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: all var(--transition-fast);
}
.filter-chip:hover { border-color: var(--color-border-strong); background: var(--color-bg); }
.filter-chip.active { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

/* ---------- Listings Grid ---------- */
.listings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
@media (max-width: 640px) { .listings-grid { grid-template-columns: 1fr; } }

/* ---------- Empty State ---------- */
.empty-state { text-align: center; padding: var(--sp-12) var(--sp-6); color: var(--color-muted); }
.empty-state h3 { font-size: var(--text-lg); font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--sp-2); }
.empty-state p { font-size: var(--text-sm); margin: 0; }

/* ---------- Alerts ---------- */
.alert { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--sp-4); }
.alert-success { background: var(--color-success-soft); color: var(--color-success); border: 1px solid #bbf7d0; }
.alert-danger { background: var(--color-danger-soft); color: var(--color-danger); border: 1px solid #fecaca; }
.alert-warning { background: var(--color-warning-soft); color: var(--color-warning); border: 1px solid #fde68a; }
.alert-info { background: var(--color-info-soft); color: var(--color-info); border: 1px solid #a5f3fc; }

/* ---------- NeedKaro Open ---------- */
.open-page { max-width: 960px; }
.open-hero, .open-detail-header, .open-actions, .open-card-footer, .open-tabs {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
}
.open-tabs { justify-content: flex-start; margin-bottom: var(--sp-4); overflow-x: auto; padding-bottom: var(--sp-1); }
.open-tab { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-weight: 700; white-space: nowrap; }
.open-tab.active { background: var(--color-primary-soft); color: var(--color-primary); }
.open-feed, .open-thread { display: grid; gap: var(--sp-4); }
.open-card { margin-bottom: var(--sp-4); width: 100%; min-width: 0; max-width: 100%; }
.open-card .card-header, .open-card .card-footer { flex-wrap: wrap; }
.open-card .card-header, .open-card .card-body, .open-card .card-footer, .open-card-titles { min-width: 0; max-width: 100%; }
.open-card .card-title { margin-top: var(--sp-2); }
.open-card .card-title, .open-card .card-title a, .open-card .card-body p, .open-body, .open-reply p { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.open-form-wrap, .open-detail { max-width: 820px; margin: 0 auto var(--sp-6); }
.open-actions { justify-content: flex-start; margin-top: var(--sp-4); }
.open-actions form { margin: 0; }
.open-network-card, .open-need-cta {
  max-width: 820px; margin: 0 auto var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
}
.open-network-card a { font-weight: 700; }
.open-reply-form { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.open-reply-form.compact { margin-top: var(--sp-3); }
.open-reply { border-top: 1px solid var(--color-border); padding: var(--sp-4) 0; }
.open-reply.child { margin-left: var(--sp-6); padding-left: var(--sp-4); border-left: 2px solid var(--color-border); }
.open-my-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 640px) {
  .open-hero, .open-detail-header { align-items: flex-start; }
  .open-hero .btn, .open-actions .btn { width: 100%; }
  .open-actions form { width: 100%; }
  .open-reply.child { margin-left: var(--sp-3); }
  .open-my-grid { grid-template-columns: 1fr; }
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table thead { background: var(--color-surface-alt); }
.data-table th {
  padding: var(--sp-3) var(--sp-4); text-align: left; font-size: var(--text-xs);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-muted); border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.data-table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-surface-alt); }
.data-table .actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 640px) { .data-table th, .data-table td { padding: var(--sp-2) var(--sp-3); } }

/* ---------- Stats Grid ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-xs); }
.stat-card h3 { font-size: var(--text-sm); font-weight: 600; color: var(--color-muted); margin-bottom: var(--sp-2); text-transform: uppercase; letter-spacing: 0.03em; }
.stat-card .stat-value { font-size: var(--text-3xl); font-weight: 800; color: var(--color-text); line-height: 1; }

/* ---------- Profile Table ---------- */
.profile-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.profile-table th, .profile-table td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.profile-table th { font-weight: 600; color: var(--color-text-secondary); width: 200px; max-width: 40%; }
.profile-table tbody tr:last-child th, .profile-table tbody tr:last-child td { border-bottom: none; }

/* ---------- Star Rating ---------- */
.stars { display: inline-flex; gap: 2px; color: var(--color-warning); }
.stars .star-empty { color: #d1d5db; }

/* ---------- Verified Badge ---------- */
.verified-badge { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--text-xs); font-weight: 700; color: var(--color-success); }
.verified-badge svg { width: 16px; height: 16px; }

/* ---------- Photo Gallery ---------- */
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-3); margin-bottom: var(--sp-4); }
.photo-gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius-md); background: var(--color-bg); border: 1px solid var(--color-border); }
.photo-upload { padding: var(--sp-4); background: var(--color-surface); border: 2px dashed var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--sp-4); }
.photo-upload label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--sp-2); }
.photo-upload input[type="file"] { display: block; width: 100%; padding: var(--sp-2) 0; font-size: var(--text-sm); }
.photo-upload button { margin-top: var(--sp-3); }

/* ---------- Admin Panel ---------- */
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.admin-eyebrow { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-primary); margin-bottom: var(--sp-1); }
.admin-identity { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); background: var(--color-primary-soft); color: var(--color-primary); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; }
.admin-section { margin-bottom: var(--sp-6); padding: var(--sp-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
.admin-section-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.admin-section-heading h2 { margin: 0; }
.admin-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; padding: var(--sp-1) var(--sp-2); background: #e5e7eb; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 700; color: var(--color-text-secondary); }
.admin-table-wrap { overflow-x: auto; }
.admin-btn { padding: var(--sp-2) var(--sp-3); border: 1px solid transparent; border-radius: var(--radius-md); font-weight: 700; cursor: pointer; transition: all var(--transition-fast); }
.admin-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.admin-btn-primary { color: white; background: var(--color-primary); border-color: var(--color-primary); }
.admin-btn-primary:hover { background: var(--color-primary-hover); }
.admin-btn-secondary { color: var(--color-text); background: white; border-color: var(--color-border); }
.admin-btn-secondary:hover { background: var(--color-bg); }
.admin-btn-danger { color: white; background: var(--color-danger); border-color: var(--color-danger); }
.admin-btn-danger:hover { background: #b91c1c; }
.status-badge { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; }
.status-active, .status-resolved { color: var(--color-success); background: var(--color-success-soft); }
.status-suspended, .status-open { color: var(--color-danger); background: var(--color-danger-soft); }
.status-pending { color: var(--color-warning); background: var(--color-warning-soft); }
.admin-message { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); border-radius: var(--radius-md); font-weight: 600; }
.admin-message-success { color: var(--color-success); background: var(--color-success-soft); border: 1px solid #bbf7d0; }
.admin-message-error { color: var(--color-danger); background: var(--color-danger-soft); border: 1px solid #fecaca; }
.admin-empty, .admin-self { color: var(--color-muted); }
.admin-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 640px) {
  .admin-header { align-items: flex-start; flex-direction: column; }
  .admin-section { padding: var(--sp-3); }
}

/* ---------- Enhanced Auth ---------- */
.auth-page {
  background: linear-gradient(160deg, #e8eef6 0%, #f0f4ff 40%, var(--color-bg) 100%);
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}
.auth-page::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(37,99,235,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.auth-card {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(37,99,235,0.06);
  position: relative;
  z-index: 1;
}
.auth-card-header {
  text-align: center;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--color-border);
}
.auth-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-3);
  box-shadow: 0 4px 12px rgba(37,99,235,0.25);
}
.auth-brand svg { width: 28px; height: 28px; }
.auth-card-header h1 {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
  color: var(--color-text);
}
.auth-card-header p {
  color: var(--color-muted);
  font-size: var(--text-sm);
  margin: 0;
}
.auth-form .input {
  margin-bottom: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  transition: all var(--transition-fast);
}
.auth-form .input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
  outline: none;
}
.auth-form .btn {
  width: 100%;
  margin-top: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  box-shadow: 0 1px 2px rgba(37,99,235,0.2);
}
.auth-form .btn:hover {
  box-shadow: 0 4px 12px rgba(37,99,235,0.3);
  transform: translateY(-1px);
}
.auth-footer {
  text-align: center;
  margin-top: var(--sp-5);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.auth-footer a { font-weight: 600; }

/* ---------- Enhanced Hero ---------- */
.hero-search {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #3b82f6 100%);
  border-bottom: none;
  padding: var(--sp-16) 0 var(--sp-12);
  position: relative;
  overflow: hidden;
}
.hero-search::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.hero-search-inner { position: relative; z-index: 1; }
.hero-search h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-white);
  margin-bottom: var(--sp-4);
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.hero-search p {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.85);
  max-width: 560px;
  margin: 0 auto var(--sp-8);
  text-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.search-bar {
  display: flex;
  gap: var(--sp-2);
  max-width: 640px;
  margin: 0 auto;
  background: var(--color-white);
  border: none;
  border-radius: var(--radius-xl);
  padding: var(--sp-2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
}
.search-bar .input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--sp-3) var(--sp-4);
  box-shadow: none;
  min-width: 0;
  font-size: var(--text-base);
}
.search-bar .input:focus { box-shadow: none; }
.search-bar .input::placeholder { color: var(--color-muted-light); }
.search-bar .btn {
  flex-shrink: 0;
  padding: var(--sp-3) var(--sp-6);
  box-shadow: 0 2px 4px rgba(37,99,235,0.2);
}
.search-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.7);
  font-weight: 500;
}
.search-trust span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
@media (max-width: 640px) {
  .hero-search { padding: var(--sp-10) 0 var(--sp-8); }
  .search-bar { flex-direction: column; }
  .search-trust { flex-direction: column; gap: var(--sp-2); }
}

/* ---------- Business Status ---------- */
.business-status-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.business-status-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-xs); }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.status-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); }
.status-controls { display: inline-flex; gap: var(--sp-2); }
.presence-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-xs); }
@media (max-width: 640px) {
  .business-status-grid { grid-template-columns: 1fr; }
  .status-row { flex-direction: column; align-items: flex-start; }
}

/* ---------- Home: Role Pills in Hero ---------- */
.home-hero-roles {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2);
  margin-top: var(--sp-4); margin-bottom: var(--sp-4);
}
.home-role-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--radius-full);
  background: rgba(255,255,255,0.16); color: var(--color-white);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.3); transition: all var(--transition-fast);
}
.home-role-pill:hover { background: rgba(255,255,255,0.28); color: var(--color-white); text-decoration: none; }
.home-role-pill-icon { display: inline-flex; }
.home-role-customer { background: rgba(255,255,255,0.18); }
.home-role-business { background: rgba(254,243,199,0.25); border-color: rgba(254,243,199,0.5); color: #fef3c7; }

/* ---------- Home: Explainer Video ---------- */
.home-explainer-section {
  margin-top: var(--sp-12);
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: var(--sp-8);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-xs);
}
.home-explainer-copy .section-title { margin-bottom: var(--sp-3); }
.home-explainer-copy .page-subtitle { margin-bottom: 0; }
.home-explainer-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-strong);
  background: var(--color-black);
  box-shadow: var(--shadow-md);
}
.home-explainer-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-black);
}
@media (max-width: 900px) {
  .home-explainer-section {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }
}
@media (max-width: 480px) {
  .home-explainer-section { padding: var(--sp-5); }
}

/* ---------- Home: Role Sections ---------- */
.home-role-section {
  margin-top: var(--sp-12);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-xs);
}
.home-role-section-business {
  background: linear-gradient(180deg, #fffbeb 0%, var(--color-surface) 60%);
  border-color: #fcd34d;
}
.home-role-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-6); flex-wrap: wrap;
}
.home-role-title { font-size: var(--text-2xl); font-weight: 800; margin-bottom: var(--sp-2); }
.home-role-lede { color: var(--color-text-secondary); max-width: 540px; margin: 0; }
.home-how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-6);
}
.home-how-card {
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--sp-5);
}
.home-how-card-business { background: rgba(255,255,255,0.7); }
.home-how-step {
  width: 32px; height: 32px; border-radius: var(--radius-full);
  display: grid; place-items: center; font-weight: 800; font-size: var(--text-base);
  background: var(--color-primary); color: var(--color-white); margin-bottom: var(--sp-3);
}
.home-how-card h3 { font-size: var(--text-lg); margin-bottom: var(--sp-2); }
.home-how-card p { color: var(--color-text-secondary); font-size: var(--text-sm); margin: 0; }
.home-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
@media (max-width: 768px) {
  .home-how-grid { grid-template-columns: 1fr; }
  .home-role-section { padding: var(--sp-5); }
  .home-role-header { flex-direction: column; align-items: flex-start; }
}

/* ---------- Home: Location Start ---------- */
.home-location-start {
  margin-top: var(--sp-12);
  background: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-primary-subtle);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
}
.home-location-inner .section-title { margin-bottom: var(--sp-2); }
.home-location-form {
  display: grid; grid-template-columns: repeat(5, 1fr) auto;
  gap: var(--sp-3); margin-top: var(--sp-5); align-items: end;
}
.home-location-form .form-group { margin-bottom: 0; }
.home-location-form label {
  display: block; font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-muted); margin-bottom: var(--sp-2);
}
.home-location-submit { display: flex; align-items: flex-end; }
@media (max-width: 900px) {
  .home-location-form { grid-template-columns: 1fr 1fr; }
  .home-location-submit { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .home-location-form { grid-template-columns: 1fr; }
  .home-location-start { padding: var(--sp-5); }
}

/* Post Need form: single-column vertical layout */
.home-location-form.post-need-form {
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
.post-need-form textarea.input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-3);
}
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- Home: Status Help ---------- */
.home-status-help { margin-top: var(--sp-12); }
.home-status-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--sp-4);
}
.home-status-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--sp-5); box-shadow: var(--shadow-xs);
}
.home-status-line { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.home-status-explainer { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--sp-2); }
.home-status-desc { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }

/* ---------- Accessibility utility ---------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Listing Card: combined status (Open/Closed + Available/Unavailable) ---------- */
.listing-card-status {
  display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.listing-card-status .dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0;
}
.listing-card-status .dot-success { background: var(--color-success); }
.listing-card-status .dot-warning { background: var(--color-warning); }
.listing-card-status .dot-danger { background: var(--color-danger); }
.listing-card-status .dot-muted { background: var(--color-muted-light); }
.listing-card-status .seller-presence {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--text-xs); font-weight: 600; color: var(--color-text-secondary);
}

/* ---------- Public Products on Listing Detail ---------- */
.products-section {
  margin-bottom: var(--sp-8);
}
.products-section-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.products-section-header h2 { margin: 0; }
.products-section-header p { margin: 0; }
.product-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  display: flex; flex-direction: column;
}
.product-card-media {
  width: 100%; height: 180px; background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: grid; place-items: center;
}
.product-card-media img { width: 100%; height: 100%; object-fit: cover; }
.product-card-placeholder {
  width: 100%; height: 100%; display: grid; place-items: center;
  color: var(--color-muted-light); font-size: 2rem; line-height: 1; opacity: .65;
  background: linear-gradient(135deg, var(--color-bg), var(--color-surface-alt));
}
.product-card-body {
  padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2); flex: 1;
}
.product-card-name { font-size: var(--text-base); font-weight: 700; margin: 0; line-height: var(--leading-tight); }
.product-card-desc { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
.product-card-price { font-size: var(--text-lg); margin: 0; }
.product-card-price small { color: var(--color-muted); font-size: var(--text-xs); margin-left: var(--sp-1); }
.product-card-stock { font-size: var(--text-sm); margin: 0; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ---------- Seller Products Dashboard ---------- */
.products-dashboard-card { padding: var(--sp-5); }
.products-dashboard-card .card-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.product-add-form { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--color-border); }
.product-add-form fieldset.form-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-3); border: none; padding: 0; margin: 0;
}
.product-add-form .form-group { display: flex; flex-direction: column; gap: var(--sp-1); margin-bottom: 0; }
.product-add-form .form-group > span { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.product-add-form .form-grid-wide { grid-column: 1 / -1; }
.product-add-actions {
  display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4);
}
.product-add-actions[disabled] small, .product-add-actions small { color: var(--color-muted); }
.product-error { margin-top: var(--sp-3); font-size: var(--text-sm); color: var(--color-danger); font-weight: 600; }
@media (max-width: 900px) {
  .product-add-form fieldset.form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .product-add-form fieldset.form-grid { grid-template-columns: 1fr; }
}

/* ---------- Search Empty State & Info Pages ---------- */
.search-empty-state {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}
.search-empty-state h2 {
  margin: 0 0 var(--sp-2);
  font-size: var(--text-xl);
}
.search-empty-state p {
  margin: 0;
  color: var(--color-muted);
}
.search-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.info-page .info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.legal-copy h2 {
  margin-top: var(--sp-6);
  font-size: var(--text-lg);
}

/* ---------- Seller Commercial Dashboard ---------- */
.seller-dashboard .seller-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-6);
}
.seller-section {
  margin-top: var(--sp-8);
}
.seller-listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}
.seller-listing-head,
.seller-status-row,
.seller-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.seller-listing-head h3 {
  margin: 0 0 var(--sp-1);
  font-size: var(--text-lg);
}
.seller-status-row,
.seller-row {
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--color-border);
}
.seller-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}
.seller-facts dt {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
}
.seller-facts dd {
  margin: var(--sp-1) 0 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
.seller-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4);
}

/* ---------- Home: NeedKaro Across India coverage strip ---------- */
.home-coverage-section {
  margin-top: var(--sp-8);
}
.home-coverage-wrap {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: var(--sp-5);
  align-items: start;
  margin-top: var(--sp-4);
}
.home-coverage-map {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: #eaf3f2;
}
.coverage-svg {
  display: block;
  width: 100%;
  height: auto;
}
.cov-sea {
  fill: #eaf3f2;
}
.cov-dots .cov-dot {
  stroke: #ffffff;
  stroke-width: 1.4;
}
.cov-dot-active {
  fill: #2a9d8f;
}
.cov-dot-growing {
  fill: #e9c46a;
}
.cov-dot-link:hover .cov-dot,
.cov-dot-link:focus .cov-dot {
  stroke: #111827;
  stroke-width: 2;
}
.home-coverage-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-3);
}
.coverage-city-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: var(--sp-3);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text);
  background: #ffffff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.coverage-city-card:hover,
.coverage-city-card:focus {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.08);
}
.coverage-city-name {
  font-weight: 700;
  font-size: var(--text-md);
}
.coverage-city-counts {
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.coverage-city-cats {
  font-size: var(--text-xs);
}
.coverage-city-card .badge {
  align-self: flex-start;
  margin-top: 0.25rem;
}
@media (max-width: 760px) {
  .home-coverage-wrap {
    grid-template-columns: 1fr;
  }
}

/* ---------- Search: Use my location ---------- */
.search-gps-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  flex-wrap: wrap;
}

/* ---------- Location Bar (dynamic city) ---------- */
.nk-loc-bar {
  position: sticky; top: var(--header-height); z-index: 90;
  background: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.nk-loc-trigger {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; max-width: var(--max-width); margin: 0 auto;
  padding: 8px var(--sp-6);
  color: var(--color-white); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: 0.01em;
}
.nk-loc-trigger:hover { background: rgba(255,255,255,0.08); }
.nk-loc-label { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nk-loc-chevron { transition: transform var(--transition-fast); }
.nk-loc-trigger[aria-expanded="true"] .nk-loc-chevron { transform: rotate(180deg); }

.nk-loc-panel {
  position: absolute; top: calc(100% + 8px); right: var(--sp-6);
  width: min(360px, calc(100vw - 40px));
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--sp-4);
  z-index: 120;
}
.nk-loc-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.nk-loc-current { font-weight: 700; font-size: var(--text-sm); color: var(--color-text-secondary); }
.nk-loc-close {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  color: var(--color-muted); font-size: 1.1rem; line-height: 1;
}
.nk-loc-close:hover { background: var(--color-bg); color: var(--color-text); }
.nk-loc-gps {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 10px var(--sp-3); border-radius: var(--radius-md);
  background: var(--color-primary-soft); color: var(--color-primary);
  font-weight: 700; font-size: var(--text-sm);
}
.nk-loc-gps:hover { background: var(--color-primary-subtle); }
.nk-loc-gps-status {
  min-height: 18px; margin: var(--sp-2) 0 0; font-size: var(--text-xs); color: var(--color-muted);
}
.nk-loc-gps-status.nk-loc-error { color: var(--color-danger); }
.nk-loc-divider {
  display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0;
  color: var(--color-muted); font-size: var(--text-xs);
}
.nk-loc-divider::before, .nk-loc-divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.nk-loc-form { display: grid; gap: var(--sp-3); }
.nk-loc-field { display: grid; gap: var(--sp-1); }
.nk-loc-field > span { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted); }
.nk-loc-field select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text);
}
.nk-loc-field select:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus); outline: none; }
.nk-loc-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-1); }
.nk-loc-note { margin: var(--sp-3) 0 0; color: var(--color-muted); font-size: var(--text-xs); }

/* ---------- Home location line ---------- */
.home-location-line {
  max-width: var(--max-width); margin: 0 auto var(--sp-4);
  padding: 0 var(--sp-6); color: var(--color-text-secondary);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.home-location-line::before { content: "📍"; }

/* ---------- India network map: legend, merchant ring, badges ---------- */
.cov-dot-group { cursor: pointer; }
.cov-dot-group:hover .cov-dot,
.cov-dot-group:focus .cov-dot { stroke: #111827; stroke-width: 2; }
.cov-merchant-ring { fill: none; stroke-width: 2; }
.cov-merchant-active { stroke: #16a34a; }
.cov-merchant-growing { stroke: #d97706; }
.cov-merchant-not_started { stroke: #94a3b8; stroke-dasharray: 3 2; }
.cov-legend {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-xs); color: var(--color-muted);
  border-top: 1px solid var(--color-border);
}
.cov-legend span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.cov-legend-dot { width: 10px; height: 10px; border-radius: 50%; background: #2a9d8f; border: 1.5px solid #fff; box-shadow: 0 0 0 1px #9ca3af; }
.cov-legend-ring { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #16a34a; background: transparent; }
.coverage-city-badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: 0.25rem; }
.coverage-city-badges .badge { align-self: flex-start; margin-top: 0; }

/* ---------- Journey / expansion line ---------- */
.india-journey { margin-top: var(--sp-6); }
.india-journey-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.india-journey-line {
  display: flex; gap: var(--sp-4); overflow-x: auto;
  padding: var(--sp-4) var(--sp-2) var(--sp-2);
  border: 1px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface);
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.india-journey-node {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-1);
  min-width: 84px; text-align: center; cursor: pointer; position: relative;
}
.india-journey-line li::before {
  content: ""; position: absolute; top: 14px; right: 100%;
  width: var(--sp-4); height: 2px; background: var(--color-border-strong);
}
.india-journey-line li:first-child::before { display: none; }
.ij-dot {
  width: 16px; height: 16px; border-radius: 50%; position: relative;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--color-border-strong);
}
.ij-dot-active { background: #2a9d8f; }
.ij-dot-growing { background: #e9c46a; }
.ij-ring { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; }
.ij-ring-active { color: #16a34a; }
.ij-ring-growing { color: #d97706; }
.ij-ring-not_started { color: #94a3b8; }
.ij-city { font-weight: 700; font-size: var(--text-xs); color: var(--color-text); }
.ij-meta { font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- City panel dialog ---------- */
.india-city-dialog {
  border: none; border-radius: var(--radius-lg); padding: 0;
  box-shadow: var(--shadow-lg); max-width: 460px; width: calc(100vw - 40px);
  color: var(--color-text);
}
.india-city-dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
.india-city-dialog-inner { padding: var(--sp-5); }
.india-city-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.india-city-dialog-head .section-title { font-size: var(--text-xl); }
.india-city-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.india-city-stats > div {
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: 10px; padding: var(--sp-3);
}
.india-city-stats dt { font-size: var(--text-xs); color: var(--color-muted); font-weight: 600; }
.india-city-stats dd { font-size: var(--text-lg); font-weight: 700; margin-top: 2px; }
.india-city-status { margin-bottom: var(--sp-4); }
.india-city-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ---------- NeedKaro UI consolidation pass ---------- */
:root {
  --radius-lg: 10px;
  --radius-xl: 12px;
  --max-width: 1120px;
}
.page-container { padding-top: var(--sp-6); padding-bottom: var(--sp-8); }
.section-title { font-size: var(--text-xl); }
.page-title { letter-spacing: 0; }
.header-brand-text { letter-spacing: 0; }
.account-menu { position: relative; }
.account-menu summary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-md);
  font-size: var(--text-sm); font-weight: 700; color: var(--color-text-secondary);
  cursor: pointer; list-style: none;
}
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover { background: var(--color-bg); color: var(--color-text); }
.account-menu-panel {
  position: absolute; right: 0; top: calc(100% + var(--sp-2));
  min-width: 220px; padding: var(--sp-2);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 300;
}
.account-menu-panel a { display: flex; width: 100%; }
.nk-loc-bar { background: rgba(255,255,255,0.96); border-bottom: 1px solid var(--color-border); box-shadow: none; }
.nk-loc-trigger {
  width: auto; max-width: min(var(--max-width), calc(100vw - 32px));
  margin: var(--sp-2) auto; padding: 6px var(--sp-3);
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
}
.nk-loc-label { flex: 0 1 auto; max-width: 52vw; }
.nk-loc-change { color: var(--color-primary); font-weight: 800; }
.nk-loc-trigger:hover { background: var(--color-primary-soft); }
.hero-search {
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  border-bottom: 1px solid var(--color-border);
  padding: var(--sp-10) 0 var(--sp-8);
}
.hero-search::before { display: none; }
.hero-search h1 {
  color: var(--color-text); text-shadow: none; letter-spacing: 0;
  font-size: clamp(2rem, 4vw, 3rem);
}
.hero-search p { color: var(--color-text-secondary); text-shadow: none; margin-bottom: var(--sp-5); }
.hero-search .search-bar {
  max-width: 720px; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.home-examples, .search-trust, .home-hero-roles {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sp-2);
}
.home-examples { margin-top: var(--sp-3); color: var(--color-muted); font-size: var(--text-sm); }
.home-examples span { padding: 4px 8px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); }
.home-role-pill { color: var(--color-primary); background: var(--color-primary-soft); border-color: var(--color-primary-subtle); border-radius: var(--radius-md); }
.home-role-pill:hover { color: var(--color-primary-hover); background: var(--color-primary-subtle); }
.home-role-business { color: var(--color-warning); background: var(--color-warning-soft); border-color: #fde68a; }
.search-trust { color: var(--color-muted); margin-top: var(--sp-4); gap: var(--sp-4); }
.search-trust span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); display: inline-block; margin-right: var(--sp-2); }
.home-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.home-action-card, .home-panel, .post-need-card, .needdrop-panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 8px; box-shadow: var(--shadow-xs);
}
.home-primary-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  max-width: 860px;
  margin: var(--sp-5) auto 0;
}
.home-action-card {
  padding: var(--sp-4); display: grid; gap: var(--sp-2); align-content: start;
  text-align: left; color: var(--color-text); text-decoration: none; min-height: 132px;
}
.home-action-card:hover { border-color: var(--color-primary); text-decoration: none; color: var(--color-text); }
.home-action-card strong { color: var(--color-primary); font-size: var(--text-xs); letter-spacing: 0.08em; }
.home-action-card span { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-snug); }
.home-action-card em { align-self: end; font-style: normal; font-weight: 800; color: var(--color-primary); font-size: var(--text-sm); }
.home-action-card h2 { font-size: var(--text-lg); margin: 0; line-height: var(--leading-snug); }
.home-action-kicker { font-size: var(--text-xs); font-weight: 800; color: var(--color-primary); text-transform: uppercase; }
.home-action-card-primary { border-color: var(--color-primary-subtle); background: linear-gradient(180deg, var(--color-primary-soft), #fff); }
.home-live-grid { display: grid; grid-template-columns: 1.15fr 0.9fr 0.8fr; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.home-live-grid.consolidated { grid-template-columns: 1.35fr 0.8fr 0.75fr; }
.home-panel-wide { min-width: 0; }
.home-panel { padding: var(--sp-5); }
.home-panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.home-panel-head h3 { font-size: var(--text-lg); margin: 0; }
.need-card-list, .open-preview-list, .activity-link-grid { display: grid; gap: var(--sp-3); }
.need-mini-card, .open-preview-card {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--color-surface-alt); border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.need-mini-card strong { display: block; margin-top: var(--sp-2); font-size: var(--text-sm); }
.need-mini-card p { margin: var(--sp-1) 0 0; }
.needs-shell { max-width: 980px; margin: 0 auto; }
.compact-head { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: flex-start; margin-bottom: var(--sp-5); }
.category-row-grid { display: grid; gap: var(--sp-3); }
.category-row-grid.compact { gap: var(--sp-2); }
.category-row-card {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px solid var(--color-border); border-radius: 8px;
  background: var(--color-surface); color: var(--color-text); text-decoration: none;
}
.category-row-card:hover { border-color: var(--color-primary); text-decoration: none; }
.category-row-card small { display: block; color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.category-row-card em { font-style: normal; color: var(--color-muted); font-size: var(--text-sm); white-space: nowrap; }
.category-icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 8px;
  background: var(--color-primary-soft); color: var(--color-primary); font-weight: 800;
}
.category-toggle { width: 100%; text-align: left; cursor: pointer; }
.need-category-section { margin: var(--sp-4) 0; }
.need-group-body { margin-top: var(--sp-3); }
.filter-bar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.need-feed-list { display: grid; gap: var(--sp-3); }
.need-feed-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: var(--sp-4); align-items: start;
  padding: var(--sp-4); border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface);
}
.need-feed-card h2 { margin: var(--sp-2) 0; font-size: var(--text-lg); line-height: var(--leading-snug); }
.inline-help-form { display: grid; gap: var(--sp-2); }
.load-more-row { display: flex; justify-content: center; margin-top: var(--sp-5); }
.open-preview-card { align-items: flex-start; flex-direction: column; }
.activity-link-grid { grid-template-columns: 1fr 1fr; }
.activity-link-grid a {
  padding: var(--sp-3); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  color: var(--color-text); font-weight: 700; background: var(--color-surface-alt);
}
.empty-state.compact { padding: var(--sp-5); }
.home-near-you, .home-coverage-section, .home-explainer-section, .home-role-section, .home-location-start { margin-top: var(--sp-8); }
.post-need-card, .needdrop-panel { max-width: 820px; margin: 0 auto; padding: var(--sp-6); }
.open-form-wrap { max-width: 760px; margin: 0 auto; padding: var(--sp-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; box-shadow: var(--shadow-xs); }
.form-page-head { margin-bottom: var(--sp-5); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); }
.form-page-head .page-subtitle { margin-bottom: 0; }
.post-need-form, .open-ask-form { display: grid; gap: var(--sp-4); }
.open-ask-form .input, .open-ask-form .textarea, .open-ask-form textarea { width: 100%; }
.form-meta-grid, .form-location-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-location-grid .form-group:last-child { grid-column: 1 / -1; }
.form-section-title { font-size: var(--text-lg); margin: var(--sp-2) 0 0; }
.form-group { min-width: 0; }
.form-hint { display: block; margin-top: var(--sp-1); line-height: var(--leading-snug); }
.home-location-submit { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.needdrop-step[hidden] { display: none; }
.needdrop-step { display: grid; gap: var(--sp-4); }
.needdrop-suggestion-box { padding: var(--sp-4); background: var(--color-primary-soft); border: 1px solid var(--color-primary-subtle); border-radius: var(--radius-md); }
.needdrop-suggestion-box strong { display: block; margin-top: var(--sp-2); }
.needdrop-review { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.needdrop-location { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--sp-4); }
.needdrop-location legend { padding: 0 var(--sp-2); font-weight: 800; }
.needdrop-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.search-page { max-width: 980px; }
.search-toolbar {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px auto; gap: var(--sp-2);
  padding: var(--sp-2); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.search-filter-panel { margin: var(--sp-4) 0; }
.search-filter-panel summary { width: fit-content; list-style: none; }
.search-filter-panel summary::-webkit-details-marker { display: none; }
.search-result-grid { display: grid; gap: var(--sp-3); margin-top: var(--sp-3); }
.search-results-head { margin-top: var(--sp-5); }
.search-result-card {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
}
.search-result-title-row, .search-result-badges { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.search-result-title-row h3 { font-size: var(--text-lg); margin: 0; }
.search-result-main p { margin: var(--sp-1) 0 var(--sp-2); }
.search-result-status { margin-top: var(--sp-2); }
.search-result-actions { display: flex; align-items: center; }
.activity-page { max-width: 960px; }
.activity-card { margin-bottom: var(--sp-6); }
.need-status-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
}
.need-status-summary span {
  min-height: 54px; padding: var(--sp-3); border: 1px solid var(--color-border);
  border-radius: 8px; background: var(--color-surface); color: var(--color-muted);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
}
.need-status-summary strong { color: var(--color-text); font-size: var(--text-xl); }
.chat-list-search { padding: var(--sp-3); border-bottom: 1px solid var(--color-border); background: var(--color-surface-alt); }
.chat-list-item { display: flex !important; gap: var(--sp-3); align-items: center; }
.chat-avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-primary-soft); color: var(--color-primary); font-weight: 800; flex: 0 0 auto;
}
.chat-list-copy { min-width: 0; flex: 1; }
.chat-list-topline { display: flex; justify-content: space-between; gap: var(--sp-2); }
.chat-header-avatar { width: 42px; height: 42px; }
.chat-conversation-title { flex: 1; }
.chat-tools { display: flex; gap: var(--sp-2); }
.chat-inline-safety {
  margin: 0; padding: var(--sp-2) var(--sp-4);
  background: #fff7ed; color: #9a3412; border-bottom: 1px solid #fed7aa;
  font-size: var(--text-xs); font-weight: 700;
}
.chat-msg { border-radius: 14px; }
.chat-msg-me { border-bottom-right-radius: 4px; }
.chat-msg-them { border-bottom-left-radius: 4px; }
.help-confirm-dialog {
  border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: min(420px, calc(100vw - 32px)); padding: 0;
}
.help-confirm-dialog::backdrop { background: rgba(15,23,42,0.45); }
.help-confirm-body { padding: var(--sp-6); }
.help-confirm-body h2 { font-size: var(--text-lg); margin-bottom: var(--sp-3); }
.help-confirm-body strong { display: block; font-size: var(--text-xl); margin-bottom: var(--sp-2); }
.help-confirm-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }
@media (max-width: 1024px) {
  .account-menu-panel { position: static; box-shadow: none; border: 0; padding: 0 0 0 var(--sp-4); }
  .account-menu summary { width: 100%; padding: var(--sp-4) var(--sp-6); border-bottom: 1px solid var(--color-border); }
  .account-menu-panel a { padding-left: var(--sp-8); }
}
@media (max-width: 820px) {
  .home-action-grid, .home-live-grid, .home-primary-actions { grid-template-columns: 1fr; }
  .home-live-grid.consolidated { grid-template-columns: 1fr; }
  .need-feed-card { grid-template-columns: 1fr; }
  .search-toolbar { grid-template-columns: 1fr; }
  .search-result-card { flex-direction: column; }
  .search-result-actions .btn { width: 100%; }
}
@media (max-width: 640px) {
  .header-inner { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .header-brand { min-width: 0; flex-shrink: 1; }
  .header-brand-text { overflow: hidden; text-overflow: ellipsis; }
  .header-actions { gap: var(--sp-1); }
  .hero-search { padding: var(--sp-6) 0 var(--sp-5); }
  .hero-search-inner { padding: 0 var(--sp-4); }
  .hero-search h1 { font-size: 1.85rem; }
  .hero-search p { font-size: var(--text-base); margin-bottom: var(--sp-4); }
  .hero-search .search-bar { flex-direction: column; padding: var(--sp-2); border-radius: 8px; }
  .hero-search .search-bar .input, .hero-search .search-bar .btn { width: 100%; min-height: 44px; }
  .home-action-card { min-height: 0; }
  .search-trust { align-items: flex-start; }
  .post-need-card, .needdrop-panel, .open-form-wrap { padding: var(--sp-4); }
  .form-page-head { flex-direction: column; gap: var(--sp-3); }
  .form-meta-grid, .form-location-grid, .needdrop-review, .activity-link-grid, .need-status-summary { grid-template-columns: 1fr; }
  .form-location-grid .form-group:last-child { grid-column: auto; }
  .home-location-submit .btn, .needdrop-actions .btn { width: 100%; }
  .compact-head { flex-direction: column; }
  .category-row-card { grid-template-columns: 36px minmax(0, 1fr); }
  .category-row-card em { grid-column: 2; }
  .chat-tools { margin-left: auto; }
  .chat-tools .btn { padding: var(--sp-2); }
}

/* Cross-site Jyotish Q&A promotion ---------------------------------------- */
.header-nav .jyotish-cta-nav{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 12px;border-radius:999px;color:#1f1300!important;background:linear-gradient(135deg,#fbbf24,#d97706);box-shadow:0 5px 14px rgba(217,119,6,.28);white-space:nowrap;transition:transform .18s ease,box-shadow .18s ease}
.header-nav .jyotish-cta-nav:hover,.header-nav .jyotish-cta-nav:focus-visible{color:#1f1300!important;background:linear-gradient(135deg,#fcd34d,#b45309);transform:translateY(-2px);box-shadow:0 8px 18px rgba(217,119,6,.36)}
.header-nav .jyotish-cta-nav:focus-visible{outline:3px solid #fde68a;outline-offset:3px}
.header-nav .jyotish-cta-nav .jyotish-cta-free{padding:2px 5px;border-radius:999px;color:#fbbf24;background:#1f1300;font-size:.58rem;font-weight:900;letter-spacing:.04em}
.jyotish-cta-nav:hover .form-tools-arrow,.jyotish-cta-nav:focus-visible .form-tools-arrow{transform:translate(2px,-1px)}
@media(max-width:420px){.header-nav .jyotish-cta-nav{gap:4px;min-height:36px;padding:0 9px;font-size:.82rem}.header-nav .jyotish-cta-nav .jyotish-cta-free{font-size:.52rem}}
@media(prefers-reduced-motion:reduce){.header-nav .jyotish-cta-nav{transition:none}.header-nav .jyotish-cta-nav:hover,.header-nav .jyotish-cta-nav:focus-visible{transform:none}}

/* Desktop header nav: allow the two cross-site CTAs to wrap instead of forcing
 * the document wider than the viewport. Scoped above the 1024px drawer
 * breakpoint so the mobile drawer layout is unaffected. */
@media (min-width: 1025px) {
  .header-nav { min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: var(--sp-1); }
  .header-inner { min-width: 0; }
  .header-nav .jyotish-cta-nav, .header-nav .form-tools-nav { flex-shrink: 0; }
}