:root{
  --bg:#f4f6f5;--surface:#ffffff;--surface2:#eef2f0;--text:#13201b;--muted:#5f6d67;--border:#d8e0dc;
  --brand:#0f6e56;--brand-2:#1d9e75;--brand-soft:#e1f5ee;--accent:#ef9f27;--accent-soft:#faeeda;
  --danger:#a32d2d;--danger-soft:#fcebeb;--radius:14px;--shadow:0 6px 24px rgba(0,0,0,.08);
  --nav-h:64px;--dock-h:92px;
}
:root[data-theme="dark"]{
  --bg:#0b1210;--surface:#121c18;--surface2:#182420;--text:#e8efec;--muted:#93a39c;--border:#243330;
  --brand:#1d9e75;--brand-2:#5dcaa5;--brand-soft:#0f3a2f;--accent:#fac775;--accent-soft:#3b2a0e;
  --danger:#f09595;--danger-soft:#3b1515;--shadow:0 6px 24px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,"Noto Sans Arabic",sans-serif}
a{color:var(--brand);text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0 0 .4em;line-height:1.25}
h1{font-size:1.5rem}h2{font-size:1.2rem}h3{font-size:1.02rem}
p{margin:.3em 0}
.muted{color:var(--muted)}.tiny{font-size:.78rem}.small{font-size:.88rem}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:8px;flex:1;font-size:1.05rem}
.brand-mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;font-weight:700}
.topbar-right{display:flex;gap:6px}
.iconbtn{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:6px 10px;cursor:pointer;min-width:38px}
.view{padding:16px 16px calc(var(--nav-h) + var(--dock-h) + 24px);max-width:720px;margin:0 auto}
.bottomnav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);display:flex;background:var(--surface);border-top:1px solid var(--border);z-index:30}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.68rem;color:var(--muted)}
.bottomnav a.active{color:var(--brand);font-weight:600}
.bottomnav .ni{font-size:1.2rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin-bottom:12px}
.card.hero{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:0}
.card.hero .muted{color:rgba(255,255,255,.8)}
.row{display:flex;gap:10px;align-items:center}.row.between{justify-content:space-between}.row.wrap{flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:420px){.grid3{grid-template-columns:1fr 1fr}}
.tile{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;color:inherit;text-align:start}
.tile .ic{font-size:1.5rem}.tile b{font-size:.95rem}.tile span{font-size:.78rem;color:var(--muted)}
.tile:hover{border-color:var(--brand)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:12px;border:1px solid var(--brand);background:var(--brand);color:#fff;cursor:pointer;font-weight:600}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--brand)}
.btn-danger{background:var(--danger);border-color:var(--danger)}
.btn-sm{padding:6px 12px;font-size:.85rem;border-radius:10px}
.btn-block{width:100%}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.field label{font-size:.82rem;color:var(--muted)}
input[type=text],input[type=number],input[type=search],input[type=date],select,textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);color:var(--text);font:inherit}
textarea{min-height:80px;resize:vertical}
.tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto}
.tabs button{padding:8px 14px;border-radius:999px;border:1px solid var(--border);background:var(--surface);cursor:pointer;white-space:nowrap}
.tabs button.active{background:var(--brand);border-color:var(--brand);color:#fff}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.75rem;background:var(--surface2);border:1px solid var(--border)}
.pill.ok{background:var(--brand-soft);color:var(--brand);border-color:transparent}
.pill.warn{background:var(--accent-soft);color:#854f0b;border-color:transparent}
:root[data-theme="dark"] .pill.warn{color:var(--accent)}
.pill.bad{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.list{display:flex;flex-direction:column;gap:10px}
.item{display:flex;gap:12px;align-items:center;padding:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.item .thumb{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;font-size:1.6rem;background:var(--surface2);flex-shrink:0}
.item .body{flex:1;min-width:0}.item .body b{display:block}
.item .body .meta{font-size:.8rem;color:var(--muted)}
.price{font-weight:700;color:var(--brand);white-space:nowrap}
.provider{display:flex;justify-content:space-between;align-items:center;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;margin-bottom:8px}
.provider.selected{border-color:var(--brand);background:var(--brand-soft)}
.provider.best{border-color:var(--accent)}
.provider .pname{font-weight:600}.provider .peta{font-size:.8rem;color:var(--muted)}
.timeline{list-style:none;padding:0;margin:10px 0}
.timeline li{position:relative;padding:4px 0 4px 26px;color:var(--muted)}
[dir="rtl"] .timeline li{padding:4px 26px 4px 0}
.timeline li::before{content:"";position:absolute;left:6px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--border)}
[dir="rtl"] .timeline li::before{left:auto;right:6px}
.timeline li.done{color:var(--text)}.timeline li.done::before{background:var(--brand)}
.timeline li.now{color:var(--brand);font-weight:600}.timeline li.now::before{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.map{height:150px;border-radius:12px;background:
  repeating-linear-gradient(0deg,transparent 0 29px,var(--border) 29px 30px),
  repeating-linear-gradient(90deg,transparent 0 29px,var(--border) 29px 30px),var(--surface2);position:relative;overflow:hidden;margin:10px 0}
.map .pin{position:absolute;transform:translate(-50%,-100%);font-size:1.4rem}
.map .car{position:absolute;transform:translate(-50%,-50%);font-size:1.3rem;transition:left 1.5s linear,top 1.5s linear}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.cartbar{position:fixed;left:0;right:0;bottom:calc(var(--nav-h) + var(--dock-h));z-index:25;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.cartbar .btn{pointer-events:auto;box-shadow:var(--shadow);max-width:688px;width:100%}
.qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.qty button{background:var(--surface2);border:0;width:32px;height:32px;cursor:pointer}
.qty span{min-width:28px;text-align:center}
.auction{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:14px;margin-bottom:12px}
.auction .ah{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.countdown{font-variant-numeric:tabular-nums;font-weight:700}
.countdown.hot{color:var(--danger)}
.bids{max-height:140px;overflow:auto;font-size:.85rem;margin:8px 0;border-top:1px dashed var(--border);padding-top:6px}
.bids div{display:flex;justify-content:space-between;padding:2px 0}
.bids div.me{color:var(--brand);font-weight:600}
.chat{display:flex;flex-direction:column;gap:10px;min-height:40vh}
.msg{max-width:85%;padding:10px 14px;border-radius:16px;white-space:pre-wrap}
.msg.user{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:4px}
[dir="rtl"] .msg.user{align-self:flex-start;border-bottom-right-radius:16px;border-bottom-left-radius:4px}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--border);border-bottom-left-radius:4px}
[dir="rtl"] .msg.bot{align-self:flex-end}
.msg.sys{align-self:center;font-size:.78rem;color:var(--muted);background:transparent}
.chatbar{display:flex;gap:8px;margin-top:12px}
.swarm{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.agent{display:flex;gap:10px;align-items:center;padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);opacity:.45;transition:.3s}
.agent.active{opacity:1;border-color:var(--accent)}.agent.done{opacity:1;border-color:var(--brand)}
.agent .dot{width:10px;height:10px;border-radius:50%;background:var(--border);flex-shrink:0}
.agent.active .dot{background:var(--accent);animation:pulse 1s infinite}.agent.done .dot{background:var(--brand)}
.agent b{min-width:100px}.agent span{font-size:.82rem;color:var(--muted)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
.voice-dock{position:fixed;left:0;right:0;bottom:var(--nav-h);z-index:28;background:var(--surface);border-top:1px solid var(--border);padding:8px 14px;box-shadow:0 -4px 20px rgba(0,0,0,.06)}
.voice-row{display:flex;align-items:center;gap:12px;max-width:720px;margin:0 auto}
.voice-mic{position:relative;width:58px;height:58px;border-radius:50%;border:0;background:var(--brand);color:#fff;font-size:1.5rem;cursor:pointer;flex-shrink:0;display:grid;place-items:center}
.mic-ring{position:absolute;inset:-6px;border-radius:50%;border:3px solid var(--brand);opacity:0}
.state-listening .mic-ring{opacity:.8;animation:ring 1.2s ease-out infinite}
.state-listening .voice-mic{background:var(--danger)}
.state-thinking .voice-mic{background:var(--accent);color:#412402}
.state-speaking .voice-mic{background:var(--brand-2)}
.state-speaking .mic-ring{opacity:.6;animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.voice-status{flex:1;min-width:0}
.voice-state{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.handsfree{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:4px}
.voice-form{display:flex;gap:6px;flex:1.2}
.voice-form input{padding:8px 10px}
@media (max-width:560px){.voice-form{flex-basis:100%}.voice-row{flex-wrap:wrap}}
.voice-transcript{max-width:720px;margin:0 auto 6px;font-size:.82rem;color:var(--muted);max-height:70px;overflow:auto}
.voice-transcript .u{color:var(--text)}.voice-transcript .b{color:var(--brand)}
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + var(--dock-h) + 20px);transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:12px;opacity:0;transition:.25s;z-index:40;pointer-events:none;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%)}
.drawer{position:fixed;inset:0;z-index:50}
.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.drawer-panel{position:absolute;top:0;bottom:0;left:0;width:280px;background:var(--surface);padding:20px;display:flex;flex-direction:column;gap:10px;z-index:1}
[dir="rtl"] .drawer-panel{left:auto;right:0}
.drawer-link{padding:8px 0;border-bottom:1px solid var(--border)}
.empty{text-align:center;color:var(--muted);padding:30px 10px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.9rem;margin:6px 0}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.chip{padding:5px 10px;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:.8rem;cursor:pointer}
.chip:hover{border-color:var(--brand)}
.progress{height:6px;background:var(--surface2);border-radius:4px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--brand);transition:width 1s linear}
.badge-new{background:var(--accent);color:#412402;font-size:.68rem;padding:1px 6px;border-radius:6px;font-weight:700}
.rating{color:var(--accent);font-size:.8rem}
.hotel{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);padding:14px;margin-bottom:12px}
.hotel .hh{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.offers{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.offer{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:10px;font-size:.9rem}
.offer.best{border-color:var(--brand);background:var(--brand-soft)}
.offer .site{font-weight:600}
.offer .was{text-decoration:line-through;color:var(--muted);font-size:.8rem;margin-inline-end:6px}
.skeleton{height:14px;border-radius:6px;background:linear-gradient(90deg,var(--surface2),var(--border),var(--surface2));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.card.hero .chip{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff}
.card.hero .chip:hover{background:rgba(255,255,255,.28)}
/* Voice hero: the main feature, front and centre on Home */
.voice-hero{text-align:center;padding:22px 16px 18px}
.voice-hero h1{font-size:1.6rem;margin-bottom:14px}
.hero-mic{position:relative;width:132px;height:132px;border-radius:50%;border:0;margin:6px auto 12px;display:grid;place-items:center;background:#fff;color:var(--brand);font-size:3.2rem;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25);transition:transform .2s}
.hero-mic:active{transform:scale(.96)}
.hero-ring{position:absolute;inset:-10px;border-radius:50%;border:3px solid rgba(255,255,255,.85);opacity:0}
.hero-ring.r2{inset:-22px;border-width:2px}
.voice-hero.state-idle .hero-ring{opacity:.5;animation:ring 2.4s ease-out infinite}
.voice-hero.state-idle .hero-ring.r2{animation-delay:.8s}
.voice-hero.state-listening .hero-mic{background:var(--danger);color:#fff}
.voice-hero.state-listening .hero-ring{opacity:.9;animation:ring 1s ease-out infinite}
.voice-hero.state-listening .hero-ring.r2{animation-delay:.35s}
.voice-hero.state-thinking .hero-mic{background:var(--accent);color:#412402}
.voice-hero.state-speaking .hero-mic{background:var(--brand-2);color:#fff}
.voice-hero.state-speaking .hero-ring{opacity:.7;animation:ring 1.6s ease-out infinite}
.hero-state{font-size:1.05rem;font-weight:600;margin:0 0 6px}
.hero-hint{color:rgba(255,255,255,.85);font-size:.9rem;max-width:520px;margin:0 auto 10px}
.voice-hero .chips{justify-content:center}
.voice-mic{width:64px;height:64px}
/* Background art: Omani man in dishdasha and massar */
.bg-art{position:fixed;bottom:calc(var(--nav-h) + var(--dock-h) - 10px);inset-inline-end:max(8px,calc((100vw - 720px)/2 - 300px));width:min(300px,42vw);height:auto;z-index:0;pointer-events:none;opacity:.95}
.bg-art svg{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.12))}
.view{position:relative;z-index:1}
@media (max-width:900px){.bg-art{opacity:.28;inset-inline-end:-40px;width:min(260px,55vw)}}
.bg-art .figure{transform-origin:150px 520px;animation:breathe 4.5s ease-in-out infinite}
.bg-art .wave{transform-origin:200px 190px;animation:wave 2.6s ease-in-out infinite}
.bg-art .hand{transform-origin:266px 210px;animation:handwave 1.3s ease-in-out infinite}
.bg-art .head{transform-origin:150px 150px;animation:nod 6s ease-in-out infinite}
.bg-art .eyes{transform-origin:150px 118px;animation:blink 5s infinite}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.008)}}
@keyframes wave{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(10deg)}}
@keyframes handwave{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes nod{0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}60%{transform:rotate(2deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){.bg-art *{animation:none !important}}
:root[data-theme="dark"] .bg-art{opacity:.8}