/* DastJor 21 — additive visual system. Existing 19/20 layout and component contracts remain intact. */
:root{
 --brand-50:#f4f1ff;--brand-100:#e9e3ff;--brand-200:#d5caff;--brand-300:#b9a8ff;--brand-400:#9479f0;--brand-500:#7458d0;--brand-600:#5b43b5;--brand-700:#493596;--brand-800:#392b75;--brand-900:#2b2158;
 --accent-50:#effcfb;--accent-100:#d5f5f2;--accent-200:#aceae5;--accent-300:#78d7d0;--accent-400:#49c1b9;--accent-500:#21a6a0;--accent-600:#198a85;--accent-700:#176e6b;--accent-800:#175957;--accent-900:#164b49;
 --gold-50:#fff9e9;--gold-100:#fff0c2;--gold-200:#ffe08a;--gold-300:#f8cb61;--gold-400:#f1b84b;--gold-500:#d99c2f;--gold-600:#b77a20;--gold-700:#925c1a;--gold-800:#78491c;--gold-900:#653c1c;
 --neutral-50:#f8fafc;--neutral-100:#f1f5f9;--neutral-200:#e2e8f0;--neutral-300:#cbd5e1;--neutral-400:#94a3b8;--neutral-500:#5b677b;--neutral-600:#475569;--neutral-700:#334155;--neutral-800:#1e293b;--neutral-900:#172033;--neutral-950:#0b1220;
 --success:#10b981;--warning:#f59e0b;--error:#ef4444;--info:#3b82f6;
 --dj21-bg:#f7f8fc;--dj21-surface:#fff;--dj21-text:#172033;--dj21-muted:#5b677b;--dj21-border:#e2e8f0;
 --dj21-radius-sm:6px;--dj21-radius-md:10px;--dj21-radius-lg:16px;--dj21-radius-xl:24px;--dj21-radius-full:9999px;
 --dj21-shadow-sm:0 2px 8px rgba(23,32,51,.05);--dj21-shadow-md:0 8px 24px rgba(23,32,51,.08);--dj21-shadow-lg:0 16px 44px rgba(23,32,51,.11);--dj21-shadow-xl:0 24px 64px rgba(23,32,51,.14);
 --dj21-space-1:4px;--dj21-space-2:8px;--dj21-space-3:12px;--dj21-space-4:16px;--dj21-space-6:24px;--dj21-space-8:32px;--dj21-space-10:40px;--dj21-space-12:48px;--dj21-space-16:64px;--dj21-space-20:80px;--dj21-space-24:96px;
 --dj21-section-accent:#5b43b5;
}
:root[data-theme="dark"]{
 --brand-600:#7c6bd6;--brand-700:#493596;--dj21-section-accent:#9a8ded;--dj21-muted:#c0cad8;--dj21-bg:#0f172a;--dj21-surface:#1e293b;--dj21-text:#f1f5f9;--dj21-muted:#c0cad8;--dj21-border:#334155;
 --dj21-shadow-sm:0 2px 8px rgba(0,0,0,.18);--dj21-shadow-md:0 8px 24px rgba(0,0,0,.24);--dj21-shadow-lg:0 16px 44px rgba(0,0,0,.3);--dj21-shadow-xl:0 24px 64px rgba(0,0,0,.38);
}
html{scroll-behavior:smooth;scroll-padding-top:88px;font-feature-settings:"ss01" 1;}
body{background:var(--dj21-bg);color:var(--dj21-text);letter-spacing:0;line-height:1.6;}
body,button,input,select,textarea{color:var(--dj21-text);}
::selection{background:var(--brand-100);color:var(--brand-900);}
:root[data-theme="dark"] ::selection{background:#493f7c;color:#fff;}
h1,h2,h3,h4{letter-spacing:0;line-height:1.35;text-wrap:balance;}
h1{font-size:clamp(1.65rem,3vw,2.25rem);font-weight:900;}
h2{font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:800;}
h3{font-size:clamp(1.08rem,1.8vw,1.25rem);font-weight:700;}
.dj21-kicker,.eyebrow{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--dj21-section-accent);}
.btn,button{transition:transform .15s ease-out,box-shadow .15s ease-out,background-color .15s ease-out,border-color .15s ease-out;}
.btn.primary,button.primary{background:var(--brand-600);border-color:var(--brand-600);color:#fff;box-shadow:0 6px 16px rgba(91,67,181,.18);}
.btn.secondary{background:var(--accent-50);border-color:var(--accent-200);color:var(--accent-900);}
.btn.gold,.dj21-gold-cta{background:var(--gold-400);border-color:var(--gold-400);color:#32210a;}
.btn.danger{background:var(--error);border-color:var(--error);color:#fff;}
.btn.ghost{background:transparent;border-color:transparent;color:var(--brand-700);}
.btn:disabled,button:disabled,[aria-disabled="true"]{opacity:.48;cursor:not-allowed;filter:saturate(.5);}
.btn:not(:disabled):active,button:not(:disabled):active{transform:scale(.98);}
.btn:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid color-mix(in srgb,var(--brand-600) 72%,white);outline-offset:3px;}
input,select,textarea{background:var(--dj21-surface);color:var(--dj21-text);border-color:var(--dj21-border);border-radius:var(--dj21-radius-md);}
input::placeholder,textarea::placeholder{color:var(--dj21-muted);opacity:.85;}
.product-card,.seller-card,.need-card,.farm-card,.panel-card,.ecosystem-card-v7,.nearby-v52-card,.dj-post-card{background:var(--dj21-surface);border-color:var(--dj21-border);box-shadow:var(--dj21-shadow-sm);transition:transform .18s ease-out,box-shadow .18s ease-out,border-color .18s ease-out;}
@media(hover:hover){.product-card:hover,.seller-card:hover,.need-card:hover,.farm-card:hover,.panel-card:hover,.ecosystem-card-v7:hover,.nearby-v52-card:hover,.dj-post-card:hover{transform:translateY(-2px);box-shadow:var(--dj21-shadow-md);border-color:color-mix(in srgb,var(--dj21-section-accent) 24%,var(--dj21-border));}}
.product-card,.seller-card,.need-card,.farm-card,.panel-card{border-radius:var(--dj21-radius-lg);}
.notice,.alert,.empty-state{border-radius:var(--dj21-radius-lg);}
:root[data-theme="dark"] .notice,:root[data-theme="dark"] .panel-card,:root[data-theme="dark"] .search-panel,:root[data-theme="dark"] .page-intro,:root[data-theme="dark"] .dj-community-sidebar .panel-section{background:var(--dj21-surface);color:var(--dj21-text);border-color:var(--dj21-border);}
:root[data-theme="dark"] .notice p,:root[data-theme="dark"] .muted,:root[data-theme="dark"] .page-intro p{color:var(--dj21-muted);}
:root[data-theme="dark"] .btn.secondary{background:#164b49;color:#d5f5f2;border-color:#176e6b;}
:root[data-theme="dark"] .btn.ghost{color:#c8bdff;}
:root[data-theme="dark"] .btn.gold{color:#35250c;}
:root[data-theme="dark"] .product-card,:root[data-theme="dark"] .seller-card,:root[data-theme="dark"] .need-card,:root[data-theme="dark"] .farm-card,:root[data-theme="dark"] .panel-card,:root[data-theme="dark"] .dj-post-card{background:var(--dj21-surface);border-color:var(--dj21-border);color:var(--dj21-text);}
:root[data-theme="dark"] .dj-mobile-dock,:root[data-theme="dark"] .topbar,:root[data-theme="dark"] .mainnav{background:rgba(15,23,42,.94);border-color:var(--dj21-border);}
:root[data-theme="dark"] .dj-mobile-dock a{color:var(--dj21-muted);}
:root[data-theme="dark"] .dj-mobile-dock a[aria-current="page"]{color:#c8bdff;}
/* Section accents are semantic accents, not large background washes. */
body[data-section^="/market"]{--dj21-section-accent:#5b43b5;}
body[data-section^="/farms"]{--dj21-section-accent:#047857;}
:root[data-theme="dark"] body[data-section^="/farms"]{--dj21-section-accent:#6ee7b7;} 
body[data-section^="/damjoor"]{--dj21-section-accent:#78350f;}
:root[data-theme="dark"] body[data-section^="/damjoor"]{--dj21-section-accent:#fbbf24;} 
body[data-section^="/melkjoor"]{--dj21-section-accent:#1d4ed8;}
:root[data-theme="dark"] body[data-section^="/melkjoor"]{--dj21-section-accent:#93c5fd;} 
body[data-section^="/recycling"]{--dj21-section-accent:#0f766e;}
:root[data-theme="dark"] body[data-section^="/recycling"]{--dj21-section-accent:#5eead4;} 
body[data-section^="/kids"]{--dj21-section-accent:#92400e;}
:root[data-theme="dark"] body[data-section^="/kids"]{--dj21-section-accent:#fcd34d;} 
body[data-section^="/community"]{--dj21-section-accent:#be185d;}
:root[data-theme="dark"] body[data-section^="/community"]{--dj21-section-accent:#f9a8d4;} 
body[data-section^="/nearby"]{--dj21-section-accent:#b45309;}
:root[data-theme="dark"] body[data-section^="/nearby"]{--dj21-section-accent:#fdba74;} 
body[data-section^="/needs"]{--dj21-section-accent:#6d28d9;}
:root[data-theme="dark"] body[data-section^="/needs"]{--dj21-section-accent:#c4b5fd;} 
/* Map Hub */
.dj21-map-card{margin:24px 0;padding:clamp(16px,2.5vw,24px);border:1px solid var(--dj21-border);border-radius:24px;background:var(--dj21-surface);box-shadow:var(--dj21-shadow-md);color:var(--dj21-text);}
.dj21-map-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;}
.dj21-map-heading h2{margin:6px 0;color:var(--dj21-text);}
.dj21-map-heading p{margin:0;color:var(--dj21-muted);font-size:13px;line-height:1.9;}
.dj21-map-tag{white-space:nowrap;border:1px solid var(--accent-200);border-radius:99px;padding:5px 10px;color:var(--accent-800);background:var(--accent-50);font-size:10px;font-weight:800;}
.dj21-map-toolbar{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:16px 0;}
.dj21-map-toolbar label{display:grid;gap:5px;color:var(--dj21-muted);font-size:12px;}
.dj21-map-toolbar select{min-width:120px;min-height:44px;padding:7px 12px;}
.dj21-map{min-height:320px;border:1px solid var(--dj21-border);border-radius:18px;overflow:hidden;background:#e7edf3;z-index:0;}
.dj21-map-status{margin:10px 0 0;color:var(--dj21-muted);font-size:11px;line-height:1.9;}
.dj21-pin-popup{display:grid;gap:5px;min-width:140px;color:#172033;font-family:inherit;}
.dj21-pin-popup small{color:#64748b;}
.dj21-pin-popup a{color:#5b43b5;font-weight:800;text-decoration:none;}
.dj21-live-pin{animation:dj21-pulse 2s ease-out infinite;}
@keyframes dj21-pulse{0%,100%{stroke-opacity:1;fill-opacity:1}55%{stroke-opacity:.3;fill-opacity:.45}}
.dj21-live-feed{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin:18px 0;padding:14px 16px;border:1px solid var(--dj21-border);border-inline-start:4px solid var(--accent-500);border-radius:16px;background:var(--dj21-surface);color:var(--dj21-text);}
.dj21-live-feed>div:first-child{display:grid;gap:3px;min-width:150px;}
.dj21-live-feed small{color:var(--dj21-muted);font-size:11px;}
.dj21-live-events{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;}
.dj21-live-event{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:99px;background:var(--accent-50);color:var(--accent-900);font-size:11px;}
.dj21-live-event a{color:var(--brand-700);font-weight:800;white-space:nowrap;}
:root[data-theme="dark"] .dj21-map-tag{background:#164b49;color:#d5f5f2;border-color:#176e6b;}
:root[data-theme="dark"] .dj21-live-event{background:#123b3a;color:#c8eeeb;}
:root[data-theme="dark"] .dj21-live-event a{color:#c8bdff;}
:root[data-theme="dark"] .dj21-map{background:#1e293b;}
/* Skeleton, empty, and loading helpers can be adopted page by page without replacing business logic. */
.dj21-skeleton{position:relative;overflow:hidden;background:var(--neutral-100);border-radius:12px;min-height:16px;}
.dj21-skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:dj21-shimmer 1.4s infinite;}
@keyframes dj21-shimmer{to{transform:translateX(100%);}}
.dj21-empty{display:grid;place-items:center;gap:10px;padding:32px;text-align:center;border:1px dashed var(--dj21-border);border-radius:18px;color:var(--dj21-muted);}
:root[data-theme="dark"] .dj21-skeleton{background:#253248;}
:root[data-theme="dark"] .dj21-skeleton:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);}
/* Mobile navigation, touch targets and safe area. The five primary destinations are exposed below. */
button,.btn,[role="button"],.dj-mobile-dock a,.mobile-menu-toggle{min-height:44px;}
.dj-mobile-dock{padding-bottom:env(safe-area-inset-bottom,0px);}
.page-shell{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));}
@media(max-width:760px){.dj21-map{min-height:270px}.dj21-live-feed{display:grid}.dj21-live-events{justify-content:flex-start}.dj21-map-toolbar{display:grid;grid-template-columns:1fr 1fr}.dj21-map-toolbar label{grid-column:1/-1}.dj21-map-toolbar button{width:100%;}.dj21-map-heading{display:grid}.dj21-map-tag{justify-self:start}.dj21-live-event{max-width:100%;}}
@media(min-width:761px){.dj21-map{min-height:360px;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.dj21-live-pin,.dj21-skeleton:after{animation:none!important}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}}

/* Final 21 responsive polish: prevent out-of-map tile overflow and expose the requested five-way mobile dock. */
@media(max-width:1000px){html,body{max-width:100%;overflow-x:clip;}}
@media(max-width:760px){.dj-mobile-dock{grid-template-columns:repeat(5,minmax(0,1fr))!important;}.dj-mobile-dock a{min-width:0;min-height:44px;}.dj-mobile-dock small{font-size:clamp(9px,2.5vw,11px);}.dj-mobile-dock span{font-size:1.25rem;}}
.text-xs{font-size:12px;line-height:1.5}.text-sm{font-size:14px;line-height:1.5}.text-base{font-size:16px;line-height:1.6}.text-lg{font-size:18px;line-height:1.5;font-weight:500}.text-xl{font-size:20px;line-height:1.4;font-weight:600}.text-2xl{font-size:24px;line-height:1.3;font-weight:700}.text-3xl{font-size:30px;line-height:1.2;font-weight:700}.text-4xl{font-size:36px;line-height:1.1;font-weight:900}

/* AA text tones: semantic base hues stay as icon/status fills; these darker/lighter ink shades are used for small text. */
:root{--dj21-success-ink:#047857;--dj21-warning-ink:#92400e;--dj21-error-ink:#b91c1c;--dj21-info-ink:#1d4ed8;}
:root[data-theme="dark"]{--dj21-success-ink:#6ee7b7;--dj21-warning-ink:#fcd34d;--dj21-error-ink:#fca5a5;--dj21-info-ink:#93c5fd;--dj21-focus:#b7a9ff;}
:root[data-theme="dark"] .btn.primary, :root[data-theme="dark"] button.primary{background:#493596;border-color:#493596;color:#fff;}

/* Keep the assistant and appearance actions clear of the five-destination dock. */
@media(max-width:760px){
  .dastjor-ai-fab{bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;left:12px!important;}
  #themeToggle{bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;right:12px!important;}
  #appearanceMore{width:44px!important;min-width:44px!important;}
}
:root[data-theme="dark"] .dastjor-ai-panel,:root[data-theme="dark"] .ai-panel-messages,:root[data-theme="dark"] .ai-panel-form{background:#1e293b!important;color:#f1f5f9!important;border-color:#334155!important;}
:root[data-theme="dark"] .dastjor-ai-panel :is(p,small,label),:root[data-theme="dark"] .ai-panel-messages :is(p,small){color:#c0cad8!important;}
/* Resolve legacy !important light-surface rules on the most-used discovery pages. */
:root[data-theme="dark"] :is(.page-intro,.search-panel,.listing-meta,.empty-state,.empty-inline,.dj-empty-market,.form-card,.panel-section,.farm-how,.farm-list-section,.recycle-form,.recycle-map-section,.needs-layout>aside,.needs-layout>section){background:var(--dj21-surface)!important;background-color:var(--dj21-surface)!important;color:var(--dj21-text)!important;border-color:var(--dj21-border)!important;}
:root[data-theme="dark"] :is(.page-intro,.search-panel,.listing-meta,.empty-state,.form-card,.panel-section,.farm-how,.farm-list-section,.recycle-form,.recycle-map-section,.needs-layout>aside,.needs-layout>section) :is(h1,h2,h3,h4,label,b,strong){color:var(--dj21-text)!important;}
:root[data-theme="dark"] :is(.page-intro,.search-panel,.listing-meta,.empty-state,.form-card,.panel-section,.farm-how,.farm-list-section,.recycle-form,.recycle-map-section,.needs-layout>aside,.needs-layout>section) :is(p,small,.muted,.field-help,.form-note){color:var(--dj21-muted)!important;}