/* Food Boursa pages (home, Dream Yard, Vote): shared look. */
:root{
  --bg:#ECE3D4;--bg-2:#E3D7C4;--surface:#F4EEE4;--ink:#161514;--ink-2:#2A2826;--muted:#6F675D;
  --line:rgba(22,21,20,.13);--line-2:rgba(22,21,20,.22);--accent:#161514;--on-accent:#ECE3D4;
  --caramel:#A9825A;--up:#4F7F5C;--down:#A9503F;--glow:rgba(169,130,90,.18);
  --r:18px;--shadow:0 1px 0 rgba(255,255,255,.5) inset,0 18px 40px -24px rgba(22,21,20,.35);
  --f-display:"Bricolage Grotesque","Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ar:"IBM Plex Sans Arabic","Noto Sans Arabic",Tahoma,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141312;--bg-2:#1B1A18;--surface:#211F1D;--ink:#ECE3D4;--ink-2:#D9CEBC;--muted:#9C9388;
  --line:rgba(236,227,212,.12);--line-2:rgba(236,227,212,.22);--accent:#ECE3D4;--on-accent:#161514;
  --caramel:#C29B70;--up:#7FAE8A;--down:#D07A68;--glow:rgba(194,155,112,.14);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -24px rgba(0,0,0,.8);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141312;--bg-2:#1B1A18;--surface:#211F1D;--ink:#ECE3D4;--ink-2:#D9CEBC;--muted:#9C9388;
  --line:rgba(236,227,212,.12);--line-2:rgba(236,227,212,.22);--accent:#ECE3D4;--on-accent:#161514;
  --caramel:#C29B70;--up:#7FAE8A;--down:#D07A68;--glow:rgba(194,155,112,.14);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 40px -24px rgba(0,0,0,.8);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.55;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%}
html[lang="ar"] body{font-family:var(--f-ar)}
html[lang="ar"] .disp{font-family:var(--f-ar);letter-spacing:0!important}
html{overflow-x:clip}body{min-height:100vh;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body::before{mix-blend-mode:screen;opacity:.25}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--caramel);outline-offset:3px;border-radius:10px}
.disp{font-family:var(--f-display);letter-spacing:-.02em}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 20px}
@media (max-width:600px){.wrap{padding:0 16px}}

/* header */
.fb-head{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid var(--line)}
.fb-head .wrap{display:flex;align-items:center;gap:14px;height:64px}
.fb-brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:20px;line-height:24px;letter-spacing:.01em;white-space:nowrap}
.fb-brand svg{width:24px;height:24px;flex:none}
.fb-nav{display:flex;gap:4px;margin-inline-start:auto}
.fb-nav a{text-decoration:none;padding:8px 14px;border-radius:999px;color:var(--muted);font-weight:500;font-size:14px;transition:.2s}
.fb-nav a:hover{color:var(--ink);background:var(--line)}
.fb-nav a.on{color:var(--on-accent);background:var(--accent)}
.fb-ctl{display:flex;gap:6px;align-items:center}
.icon-btn{position:relative;width:40px;height:40px;border-radius:999px;border:1px solid var(--line-2);background:transparent;display:grid;place-items:center;cursor:pointer;transition:.2s;font-weight:700;font-size:13px}
.icon-btn:hover{background:var(--line)}
.icon-btn svg{width:18px;height:18px}
.badge{position:absolute;top:-3px;inset-inline-end:-3px;min-width:18px;height:18px;border-radius:9px;background:var(--down);color:#fff;font-size:11px;display:grid;place-items:center;padding:0 5px;font-weight:700}
.badge[hidden]{display:none}
.fb-menu-btn{display:none}
@media (max-width:820px){
  .fb-nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 16px 16px;display:none}
  .fb-nav.open{display:flex}.fb-nav a{padding:12px 14px;font-size:16px}
  .fb-menu-btn{display:grid}.fb-ctl{margin-inline-start:auto}
}
.notif-panel{position:absolute;top:56px;inset-inline-end:16px;width:min(360px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow);padding:8px;display:none;z-index:50}
.notif-panel.open{display:block}
.notif-panel h4{margin:6px 10px 8px;font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between}
.notif-panel h4 button{background:none;border:0;color:var(--caramel);cursor:pointer;font-size:12px;text-transform:none;letter-spacing:0}
.notif{display:block;padding:10px 12px;border-radius:12px;text-decoration:none}
.notif:hover{background:var(--line)}
.notif b{display:block;font-size:14px}.notif small{color:var(--muted);font-size:12px}
.notif.unread b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--down);margin-inline-end:7px;vertical-align:middle}
.notif-empty{padding:14px 12px;color:var(--muted);font-size:14px}

/* buttons, cards */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);padding:12px 20px;border-radius:999px;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;transition:transform .15s,opacity .2s}
.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--line)}
.btn.sm{padding:8px 14px;font-size:13px}
.btn[disabled]{opacity:.4;pointer-events:none}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);font-size:12px;color:var(--muted);font-weight:500}
.kicker{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:600}
html[lang="ar"] .kicker{letter-spacing:0;text-transform:none}
.up{color:var(--up)}.down{color:var(--down)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--accent);color:var(--on-accent);padding:12px 20px;border-radius:999px;font-weight:600;opacity:0;transition:.3s;z-index:90;pointer-events:none;max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* footer */
.fb-foot{position:relative;z-index:1;border-top:1px solid var(--line);margin-top:80px;padding:48px 0 28px;overflow:hidden}
.fb-foot .big{font-family:var(--f-display);font-weight:800;font-size:clamp(56px,13vw,180px);line-height:.85;letter-spacing:-.05em;margin:0 0 28px;color:var(--ink);opacity:.92}
html[lang="ar"] .fb-foot .big{font-family:var(--f-ar);letter-spacing:0}
.fb-foot .cols{display:flex;flex-wrap:wrap;gap:28px 60px;justify-content:space-between;align-items:flex-end}
.fb-foot nav{display:flex;gap:22px;flex-wrap:wrap}
.fb-foot nav a{text-decoration:none;color:var(--muted);font-weight:500}.fb-foot nav a:hover{color:var(--ink)}
.fb-foot small{color:var(--muted);display:block;max-width:520px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.fb-sign{margin-inline-end:4px}
.fb-sign[hidden]{display:none}

/* phones: keep the top bar on one line */
@media (max-width:600px){
  .fb-head .wrap{gap:6px}
  .fb-brand{font-size:16px;line-height:20px;gap:5px}.fb-brand svg{width:20px;height:20px}
  .fb-head .btn,.fb-head a{white-space:nowrap}
  .fb-head .icon-btn{width:36px;height:36px;flex:none}.fb-head .icon-btn svg{width:17px;height:17px}
  .fb-head .btn{padding-inline:12px}
}
@media (max-width:400px){.fb-brand{font-size:11.5px;gap:4px}.fb-brand svg{width:18px;height:18px}.fb-head .icon-btn{width:34px;height:34px}.fb-head .wrap{gap:5px}}

/* Arabic keeps the same layout as English: only the text itself reads right-to-left */
html[lang="ar"] :is(h1,h2,h3,h4,p,li,label,small,b,strong,.tx,.nm,.pill,.kicker){unicode-bidi:plaintext}

/* The exchange's finish (picked in the control panel), on these pages too: the same raised buttons, pressed
   fields and icon plates. The per-finish variables (--raise, --press, --plate …) come from finish-look.js. */
html[data-finish]{--panel:var(--surface);--text:var(--ink);--accent-ink:var(--on-accent);--fin-raise:var(--raise);--fin-press:var(--press)}
html[data-finish] body::before{opacity:.12}
html[data-finish] .btn{border-radius:999px;border:0;box-shadow:var(--acc-sh);transition:box-shadow .15s,transform .1s}
html[data-finish] .btn.ghost,html[data-finish] .icon-btn,html[data-finish] .pill,html[data-finish] .chip,html[data-finish] .xclose,
html[data-finish] .pad button,html[data-finish] .pquick button,html[data-finish] .big-btn{background:var(--raise-bg);color:var(--ink);border:1px solid var(--raise-bd);box-shadow:var(--raise)}
html[data-finish] :is(.btn.ghost,.icon-btn,.xclose,.pad button,.pquick button,.big-btn):active,html[data-finish] .pad button.on,html[data-finish] .pad .run.fast{background:var(--press-bg);color:var(--ink);box-shadow:var(--press);border-color:var(--press-bd)}
html[data-finish] .btn:active{transform:translateY(1px)}
html[data-finish] .chip.on,html[data-finish] .likes button.pill.on{background:var(--accent);color:var(--on-accent);box-shadow:var(--acc-sh)}
html[data-finish] .card,html[data-finish] .opt,html[data-finish] .topy,html[data-finish] .yard-title,html[data-finish] .info,html[data-finish] .party,html[data-finish] .pad,html[data-finish] .slot{border-color:var(--raise-bd);box-shadow:var(--raise)}
html[data-finish] .card,html[data-finish] .opt:not(.on),html[data-finish] .topy{background:var(--raise-bg)}
html[data-finish] .opt.on{box-shadow:var(--acc-sh)}
html[data-finish] .sheet{border-radius:24px;border:1px solid var(--raise-bd);box-shadow:var(--raise),0 30px 60px -20px rgba(0,0,0,.6)}
html[data-finish] .tabs,html[data-finish] .pad .cams{background:var(--press-bg);box-shadow:var(--press);border:1px solid var(--press-bd)}
html[data-finish] .tabs button.on,html[data-finish] .pad .cams button.sel{background:var(--accent);color:var(--on-accent);box-shadow:var(--acc-sh)}
html[data-finish] .pad .cams button{background:transparent;box-shadow:none;border:0}
html[data-finish] input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),html[data-finish] select,html[data-finish] textarea{background:var(--press-bg);border:1px solid var(--press-bd);box-shadow:var(--press)}
html[data-finish] .icon-btn{background:var(--plate);box-shadow:var(--plate-sh);border:0;color:var(--ico-c,#EFE6D6)}
[hidden]{display:none!important}
/* header buttons: the same rounded squares as on the exchange */
html[data-finish] .fb-head .icon-btn{border-radius:12px;width:38px;height:38px}
html[data-finish] .icon-btn svg{color:inherit}
html[data-finish=noir]{--ico-c:#D9C9A8}html[data-finish=glass]{--ico-c:#E8DCC4}html[data-finish=platinum]{--ico-c:#F1F2F4}html[data-finish=frost]{--ico-c:#3E4652}
/* Every button looks like "Log out": raised, soft shadow behind, glows when touched (selected ones stay dark) */
html[data-finish] .btn:not(.ghost):not(.on):not(.danger):not(.sel){background:var(--raise-bg);color:var(--text,var(--ink));border:1px solid var(--raise-bd);box-shadow:var(--raise)}
html[data-finish] .nvi{background:var(--raise-bg);box-shadow:var(--raise);border:1px solid var(--raise-bd);--ico:var(--text,var(--ink))}
html[data-finish] nav.tabs button.on .nvi{background:var(--accent);--ico:var(--accent-ink,var(--on-accent))}
html[data-finish] :is(button,.btn,.chip,.pill,.icon-btn,.modebtn,.xclose,.nvi,a.ttr,.fb-nav a,.sitenav a){transition:box-shadow .2s,transform .1s,background .2s}
html[data-finish] :is(button,.btn,.icon-btn,.modebtn,.xclose,.fb-nav a,.sitenav a):is(:hover,:focus-visible,:active),
html[data-finish] nav.tabs button:is(:hover,:active) .nvi{box-shadow:var(--raise,0 0 0 transparent),0 0 22px 5px rgba(201,173,136,.6)}
html[data-finish][data-theme=dark] :is(button,.btn,.icon-btn,.modebtn,.xclose,.fb-nav a,.sitenav a):is(:hover,:focus-visible,:active){box-shadow:var(--raise,0 0 0 transparent),0 0 22px 5px rgba(236,227,212,.28)}
/* All buttons = the Dream Yard panel buttons: round pills, raised, soft shadow, glow on touch/hover */
html[data-finish] :is(.btn,.icon-btn,.modebtn,.xclose,.chip,.pill,nav.tabs button,.tabs button,.seg3 button,.extabs button,.subnav button,.vnav button,.fb-nav a,.sitenav a,.pad button,.nvi){border-radius:999px!important}
html[data-finish] :is(.vnav button,nav.tabs button,.seg3 button,.subnav button):not(.on){background:var(--raise-bg);border:1px solid var(--raise-bd);box-shadow:var(--raise);color:var(--text,var(--ink))}
html[data-finish] nav.tabs{gap:10px;padding-block:8px}
html[data-finish] nav.tabs button{padding:6px 16px 6px 6px;border-bottom:0!important}
html[dir=rtl][data-finish] nav.tabs button{padding:6px 6px 6px 16px}
html[data-finish] nav.tabs button.on{background:var(--accent);color:var(--accent-ink);box-shadow:var(--acc-sh,var(--raise))}
html[data-finish] nav.tabs button .nvi{width:32px!important;height:32px!important;box-shadow:none!important;border:0!important}
html[data-finish] nav.tabs button.on .nvi::after{display:none}
html[data-finish] :is(button,.btn,.icon-btn,.modebtn,.xclose,.fb-nav a,.sitenav a,.chip,.pill):is(:hover,:focus-visible,:active):not(:disabled){box-shadow:var(--raise,0 0 0 transparent),0 0 22px 5px rgba(201,173,136,.6)!important}
html[data-finish][data-theme=dark] :is(button,.btn,.icon-btn,.modebtn,.xclose,.fb-nav a,.sitenav a,.chip,.pill):is(:hover,:focus-visible,:active):not(:disabled){box-shadow:var(--raise,0 0 0 transparent),0 0 22px 5px rgba(236,227,212,.3)!important}
html[data-finish] :is(.row,.ix,.slot,.opt,.card):is(:hover,:active){box-shadow:var(--raise,0 0 0 transparent),0 0 18px 3px rgba(201,173,136,.45)!important}
/* One glow for every button on the site = the Log out glow: a soft warm halo, no ring, no square edge */
html[data-finish] :is(button,.btn,a,summary,[role=button]):focus-visible{outline:none}
html[data-finish] :is(button,.btn,.icon-btn,.modebtn,.xclose,.fb-nav a,.sitenav a,.chip,.pill,.ix,.opt,.slot,.vnav button,.faq summary):is(:hover,:focus-visible,:active):not(:disabled){box-shadow:var(--raise,0 0 0 transparent),0 0 26px 6px rgba(214,190,150,.55)!important;border-color:var(--raise-bd,transparent)!important}
html[data-finish] .row:is(:hover,:focus-visible,:active){border-radius:18px;box-shadow:0 0 26px 4px rgba(214,190,150,.45)!important;border-color:transparent!important}
html[data-finish] :is(.on,.sel):is(:hover,:focus-visible,:active){border-color:transparent!important}
/* The Food Boursa "Log out" button, for every button: on hover/touch it lights up (8% brighter) and glows;
   when pressed it sinks 1px. Same rules on every page. */
:is(button,.btn,a.btn,.icon-btn,.modebtn,.xclose,.chip,.pill,.fb-nav a,.sitenav a,.vnav button,nav.tabs button,.tabs button,.pad button,.opt,.ix,.row,.slot,.faq summary,[role=button]){transition:filter .15s,box-shadow .2s,transform .1s,background .2s}
:is(button,.btn,a.btn,.icon-btn,.modebtn,.xclose,.chip,.pill,.fb-nav a,.sitenav a,.vnav button,nav.tabs button,.tabs button,.pad button,.opt,.ix,.row,.slot,.faq summary,[role=button]):is(:hover,:focus-visible,:active):not(:disabled){filter:brightness(1.08)}
:is(button,.btn,a.btn,.icon-btn,.modebtn,.xclose,.chip,.pill,.fb-nav a,.sitenav a,.vnav button,nav.tabs button,.tabs button,.pad button,.opt,.ix,.slot,[role=button]):active:not(:disabled){transform:translateY(1px)}
:is(button,.btn,a.btn,.icon-btn,.modebtn,.xclose,.chip,.pill,.fb-nav a,.sitenav a,.vnav button,nav.tabs button,.tabs button,.pad button,.opt,.ix,.slot,.faq summary,[role=button]):is(:hover,:focus-visible,:active):not(:disabled){box-shadow:var(--raise,0 0 0 transparent),0 0 26px 6px rgba(214,190,150,.55)!important}
/* small phones: the header fits (the T.T.R. name already goes home, so the home button steps aside) */
@media (max-width:430px){
  .fb-head .wrap{gap:4px;padding:0 10px}
  #fbHome{display:none!important}
  html[data-finish] .fb-head .icon-btn,.fb-head .icon-btn{width:32px;height:32px}
  .fb-head .icon-btn svg{width:15px;height:15px}
  .fb-ctl{gap:4px}.fb-head .fb-sign{padding:6px 10px;font-size:12px}
}

html.fb-wait body>*:not(.fb-head){visibility:hidden}