/* iGo Express — visual system
   Ink: buna (coffee). Action: Entoto eucalyptus green. Highlight: adey abeba (Meskel daisy) yellow.
   Signature: the tibeb band (woven netela border) — the only place red and blue appear.
   No web fonts: system faces keep the app light on mobile data; Ethiopic falls back to Noto Sans Ethiopic / Nyala. */
:root {
  --buna: #2b1b12;
  --buna-2: #6b5a50;
  --eucalyptus: #078930;
  --eucalyptus-deep: #04621f;
  --mist: #eef6ef;
  --adey: #fcdd09;
  --line: #dfe6e1;
  --red: #da121a;
  --tibeb-red: #da121a;
  --tibeb-blue: #1f4fa3;
  --white: #ffffff;
  --danger: #da121a;
  --r-lg: 22px; --r-md: 14px; --r-sm: 10px;
  --tibeb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='12' viewBox='0 0 48 12'%3E%3Crect width='48' height='12' fill='%23fcdd09'/%3E%3Cpath d='M0 6 6 0 12 6 6 12Z' fill='%23078930'/%3E%3Cpath d='M12 6 18 0 24 6 18 12Z' fill='%23da121a'/%3E%3Cpath d='M24 6 30 0 36 6 30 12Z' fill='%23078930'/%3E%3Cpath d='M36 6 42 0 48 6 42 12Z' fill='%23da121a'/%3E%3Ccircle cx='6' cy='6' r='1.6' fill='%23fff'/%3E%3Ccircle cx='18' cy='6' r='1.6' fill='%23fff'/%3E%3Ccircle cx='30' cy='6' r='1.6' fill='%23fff'/%3E%3Ccircle cx='42' cy='6' r='1.6' fill='%23fff'/%3E%3C/svg%3E");
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans Ethiopic", "Nyala", "Abyssinica SIL", Roboto, sans-serif;
  color: var(--buna);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; font-size: 16px; line-height: 1.5; }
a { color: var(--eucalyptus); }
:focus-visible { outline: 3px solid var(--adey); outline-offset: 2px; border-radius: 6px; }
main:focus, main:focus-visible { outline: none; }

/* ---------- Top bar ---------- */
.tibeb { height: 10px; background: var(--tibeb) repeat-x; background-size: 40px 10px; }
.top { display: flex; align-items: center; gap: 16px; padding: 12px 20px; padding-top: calc(12px + env(safe-area-inset-top)); padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); background: var(--eucalyptus); color: #fff; position: sticky; top: 0; z-index: 10; }
.tricolor { height: 5px; background: linear-gradient(90deg, var(--eucalyptus) 0 33.3%, var(--adey) 33.3% 66.6%, var(--red) 66.6%); }
.brand { display: flex; align-items: baseline; gap: 2px; text-decoration: none; color: #fff; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.brand b { color: var(--adey); }
.brand i { font-style: normal; width: 7px; height: 7px; border-radius: 50%; background: var(--red); display: inline-block; margin-left: 3px; transform: translateY(-2px); }
#nav { display: flex; gap: 2px; flex: 1; }
#nav a { color: rgba(255,255,255,.82); text-decoration: none; padding: 8px 12px; border-radius: 999px; font-size: 15px; display: flex; align-items: center; gap: 6px; }
#nav a svg { width: 18px; height: 18px; }
#nav a.active { background: rgba(255,255,255,.18); color: #fff; font-weight: 600; }
#nav a:hover { color: #fff; }
.top-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.lang { border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.avatar-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--adey); color: var(--buna); display: grid; place-items: center; font-weight: 700; text-decoration: none; font-size: 15px; }
.signin { color: #fff; font-weight: 600; text-decoration: none; }

main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 24px 20px 40px; outline: none; }
.narrow { max-width: 560px; }
.foot { padding: 18px 20px 90px; font-size: 13px; color: rgba(255,255,255,.85); background: var(--eucalyptus-deep); display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center; }

.banner { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 30; max-width: min(560px, calc(100vw - 32px)); background: var(--buna); color: #fff; border-radius: var(--r-md); padding: 12px 16px; font-size: 15px; box-shadow: 0 10px 30px rgba(43,27,18,.25); }
.banner.err { background: var(--danger); }

/* ---------- Type ---------- */
h1 { font-size: clamp(26px, 4vw, 34px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 8px; }
h2 { font-size: 21px; letter-spacing: -0.01em; margin: 32px 0 12px; }
h3 { font-size: 17px; margin: 0 0 6px; }
p { margin: 0 0 10px; }
.muted { color: var(--buna-2); font-size: 15px; }
.small { font-size: 13px; }
.price { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- Greeting (signature) ---------- */
.greet { margin: 4px 0 20px; }
.greet .am { font-size: clamp(40px, 8vw, 64px); font-weight: 700; line-height: 1.05; color: var(--eucalyptus); letter-spacing: -0.01em; display: block; }
.greet .en { font-size: clamp(20px, 3vw, 26px); font-weight: 600; color: var(--buna); display: block; margin-top: 6px; }

/* ---------- Surfaces ---------- */
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; margin-bottom: 16px; }
.panel.soft { background: var(--mist); border-color: transparent; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; margin-bottom: 12px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.split { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: start; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.between { justify-content: space-between; }

/* ---------- Where-to box ---------- */
.whereto { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); box-shadow: 0 8px 28px rgba(19,102,75,.10); overflow: hidden; }
.whereto .stop { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 8px; padding: 6px 14px; }
.whereto .stop + .stop { border-top: 1px solid var(--line); }
.whereto .dot { width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--eucalyptus); justify-self: center; }
.whereto .dot.to { border-radius: 3px; border-color: var(--buna); }
.whereto select { border: 0; padding: 14px 0; font-size: 17px; background: transparent; font-weight: 500; }
.whereto select:focus { outline: none; }
.whereto .stop:focus-within { background: #f7faf8; }

/* ---------- Service shortcuts ---------- */
.shortcuts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0 0 16px; }
.shortcut { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: var(--r-md); text-decoration: none; color: var(--buna); font-size: 13px; font-weight: 600; text-align: center; border: 1px solid transparent; background: var(--mist); cursor: pointer; font-family: inherit; }
.shortcut svg { width: 26px; height: 26px; color: var(--eucalyptus); }
.shortcut.on { background: var(--white); border-color: var(--eucalyptus); box-shadow: inset 0 0 0 1px var(--eucalyptus); }

/* ---------- Vehicle options ---------- */
.options { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.option { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--white); cursor: pointer; text-align: left; font: inherit; color: inherit; width: 100%; }
.option svg { width: 40px; height: 40px; color: var(--buna); }
.option b { display: block; font-size: 16px; }
.option .amt { font-weight: 800; font-size: 18px; }
.option[aria-pressed="true"] { border-color: var(--eucalyptus); box-shadow: inset 0 0 0 2px var(--eucalyptus); background: #f6faf8; }
.option .near { color: var(--eucalyptus); font-size: 14px; }
.option .near.none { color: var(--buna-2); }

/* ---------- Forms ---------- */
label { display: block; font-size: 14px; font-weight: 600; color: var(--buna); margin: 14px 0 6px; }
label.inline { display: flex; gap: 8px; align-items: center; font-weight: 500; }
input, select, textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); font: inherit; font-size: 16px; background: var(--white); color: var(--buna); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--eucalyptus); }
textarea { min-height: 96px; }
input:focus, select:focus, textarea:focus { border-color: var(--eucalyptus); outline: 3px solid rgba(19,102,75,.18); outline-offset: 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 13px 22px; font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; background: var(--eucalyptus); color: #fff; text-decoration: none; min-height: 48px; }
.btn:hover { background: var(--eucalyptus-deep); }
.btn.primary { background: var(--adey); color: var(--buna); }
.btn.primary:hover { background: #ecc900; }
.btn.ghost { background: var(--mist); color: var(--buna); }
.btn.ghost:hover { background: #e2ebe5; }
.btn.danger, .btn.sos { background: var(--danger); color: #fff; }
.btn.block { width: 100%; }
.btn.small { padding: 8px 14px; font-size: 14px; min-height: 36px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Status & people ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--mist); color: var(--eucalyptus-deep); white-space: nowrap; }
.status.wait { background: #fff4cf; color: #6b4e00; }
.status.bad { background: #fde8e7; color: var(--danger); }
.status.done { background: #dff1e7; color: var(--eucalyptus-deep); }
.person { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; }
.face { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 24px; color: #fff; background: var(--eucalyptus); position: relative; }
.face::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid transparent; background: var(--tibeb) border-box; background-size: 30px 8px; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.plate { display: inline-block; font-weight: 800; letter-spacing: .06em; border: 2px solid var(--buna); border-radius: 6px; padding: 1px 8px; font-size: 15px; background: #fff; }
.pin { font-size: 40px; letter-spacing: .3em; font-weight: 800; color: var(--eucalyptus-deep); font-variant-numeric: tabular-nums; }

.timeline { list-style: none; padding: 0; margin: 12px 0 0; }
.timeline li { position: relative; padding: 0 0 14px 28px; color: var(--buna-2); }
.timeline li::before { content: ''; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.timeline li::after { content: ''; position: absolute; left: 10px; top: 18px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li.done { color: var(--buna); } .timeline li.done::before { background: var(--eucalyptus); }
.timeline li.now { color: var(--buna); font-weight: 700; } .timeline li.now::before { background: var(--adey); box-shadow: 0 0 0 4px rgba(245,183,0,.25); }

.promise { display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.promise:first-of-type { border-top: 0; }
.promise svg { width: 28px; height: 28px; color: var(--eucalyptus); }
.coordinator { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; }
.coordinator .face { width: 56px; height: 56px; font-size: 20px; background: var(--buna); }

.rules { font-size: 14px; background: #fff8e1; border-radius: var(--r-md); padding: 12px 16px 12px 34px; margin: 12px 0; }
.rules li { margin: 4px 0; }
.agreement { max-height: 340px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; background: #fcfdfc; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.msgs { max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.msg { padding: 10px 12px; border-radius: 16px 16px 16px 4px; background: var(--mist); max-width: 80%; font-size: 15px; }
.msg.me { align-self: flex-end; background: #dff1e7; border-radius: 16px 16px 4px 16px; }
.offer { border: 2px solid var(--adey); }
.foodcard { text-decoration: none; color: var(--buna); display: block; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.foodcard .art { height: 92px; background: var(--mist); display: grid; place-items: center; }
.foodcard .art svg { width: 54px; height: 54px; color: var(--eucalyptus); }
.foodcard div.body { padding: 12px 14px; }
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
td, th { padding: 8px 4px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
td.r, th.r { text-align: right; }
.kinds { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { border: 1px solid var(--line); background: var(--white); color: var(--buna); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; text-decoration: none; }
.chip.on { background: var(--buna); color: #fff; border-color: var(--buna); }
.empty { text-align: left; padding: 22px; border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--buna-2); }

/* ---------- Bottom tab bar (phones) ---------- */
.tabbar { display: none; }
@media (max-width: 760px) {
  #nav { display: none; }
  .top { padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); }
  main { padding: 18px 16px 28px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .shortcuts { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 14px; padding: 0 16px; }
  .shortcuts::-webkit-scrollbar { display: none; }
  .shortcut { flex: 0 0 84px; }
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--white); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--buna-2); text-decoration: none; padding: 4px 0; }
  .tabbar a svg { width: 24px; height: 24px; }
  .tabbar a.active { color: var(--eucalyptus-deep); font-weight: 700; }
  .banner { bottom: 78px; }
}
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .45s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* progress steps for service jobs */
.steps { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 18px; padding: 0; list-style: none; }
.steps span { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--mist); color: var(--buna-2); }
.steps span.done { background: #dff1e7; color: var(--eucalyptus-deep); }
.steps span.now { background: var(--buna); color: #fff; font-weight: 700; }

/* ---------- Language picker ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 40; background: rgba(43,27,18,.45); display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--white); width: min(560px, 100%); border-radius: 24px 24px 0 0; padding: 0 20px calc(20px + env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto; }
.sheet .grab { height: 8px; margin: 0 -20px 16px; background: var(--tibeb) repeat-x; background-size: 32px 8px; border-radius: 24px 24px 0 0; }
@media (min-width: 761px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 24px; } }
.langs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.langopt { border: 2px solid var(--line); border-radius: var(--r-md); padding: 14px; background: #fff; text-align: left; cursor: pointer; font: inherit; color: var(--buna); }
.langopt b { display: block; font-size: 19px; }
.langopt span { color: var(--buna-2); font-size: 13px; }
.langopt[aria-pressed="true"] { border-color: var(--eucalyptus); background: #f1faf3; }
.langopt:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Hey iGo ---------- */
.heyigo { position: fixed; right: 18px; bottom: 22px; z-index: 25; display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer; background: var(--buna); color: #fff; font: inherit; font-weight: 700; padding: 8px 18px 8px 8px; border-radius: 999px; box-shadow: 0 10px 28px rgba(43,27,18,.3); }
.heyigo .ring { width: 44px; height: 44px; border-radius: 50%; padding: 3px; background: conic-gradient(var(--eucalyptus) 0 33%, var(--adey) 0 66%, var(--red) 0); }
.heyigo .ring span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--buna); }
.heyigo svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .heyigo { bottom: 82px; right: 14px; } }
.orb { width: 132px; height: 132px; margin: 8px auto 14px; border-radius: 50%; padding: 7px; border: 0; cursor: pointer; display: block;
  background: conic-gradient(var(--eucalyptus) 0 33.3%, var(--adey) 0 66.6%, var(--red) 0); }
.orb span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; color: var(--buna); }
.orb svg { width: 52px; height: 52px; }
.orb.listening { animation: spin 2.4s linear infinite; }
.orb.listening span { animation: counter 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } } @keyframes counter { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .orb.listening, .orb.listening span { animation: none; } .orb.listening { box-shadow: 0 0 0 6px rgba(218,18,26,.25); } }
.orb-label { text-align: center; font-weight: 700; font-size: 18px; }
.convo { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; min-height: 40px; }
.bubble { padding: 10px 14px; border-radius: 18px; max-width: 88%; font-size: 16px; }
.bubble.me { align-self: flex-end; background: var(--adey); color: var(--buna); border-bottom-right-radius: 6px; }
.bubble.igo { align-self: flex-start; background: #f1faf3; border: 1px solid #cfe9d5; border-bottom-left-radius: 6px; }
.suggest { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.suggest button { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; cursor: pointer; color: var(--buna); }
.typebar { display: flex; gap: 8px; margin-top: 12px; }

/* iPhone install hint (Safari only, not yet installed) */
.ioshint { position: fixed; left: 12px; right: 12px; bottom: calc(150px + env(safe-area-inset-bottom)); z-index: 26; background: #fff; border: 2px solid var(--adey); border-radius: var(--r-md); padding: 12px 40px 12px 14px; box-shadow: 0 10px 30px rgba(43,27,18,.2); font-size: 15px; }
.ioshint b { color: var(--eucalyptus-deep); }
.ioshint .x { position: absolute; top: 6px; right: 6px; border: 0; background: none; font-size: 22px; cursor: pointer; color: var(--buna-2); width: 32px; height: 32px; }
.ioshint svg { width: 18px; height: 18px; vertical-align: -3px; color: #0a84ff; }
@media (min-width: 761px) { .ioshint { display: none; } }

/* ---------- Voice first ---------- */
.voicehero { display: flex; align-items: center; gap: 18px; width: 100%; margin: 0 0 18px; padding: 16px 20px 16px 16px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; text-align: left;
  background: var(--eucalyptus); color: #fff; box-shadow: 0 10px 26px rgba(7,137,48,.28); }
.voicehero .vring { flex: none; width: 84px; height: 84px; border-radius: 50%; padding: 5px; background: conic-gradient(var(--adey) 0 33.3%, var(--red) 0 66.6%, #fff 0); }
.voicehero .vring span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; color: var(--eucalyptus-deep); }
.voicehero .vring svg { width: 40px; height: 40px; }
.voicehero b { display: block; font-size: 24px; line-height: 1.2; }
.voicehero .vtext span { display: block; font-size: 15px; opacity: .9; margin-top: 2px; }
.voicehero:active { transform: scale(.98); }
@media (prefers-reduced-motion: no-preference) { .voicehero .vring { animation: pulse 2.6s ease-in-out infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(252,221,9,.6); } 50% { box-shadow: 0 0 0 10px rgba(252,221,9,0); } } }
.bigprice { text-align: center; font-size: 40px; font-weight: 800; margin: 4px 0 10px; }
.yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.yesno button { border: 0; border-radius: 22px; padding: 16px 10px; font: inherit; font-weight: 800; font-size: 18px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.yesno button span { font-size: 40px; line-height: 1; }
.yesno .yes { background: var(--eucalyptus); color: #fff; }
.yesno .no { background: #fde8e7; color: var(--red); }
.typeinstead { margin-top: 6px; } .typeinstead summary { cursor: pointer; color: var(--buna-2); font-size: 15px; padding: 8px 0; }
.typeinstead .suggest { margin-top: 6px; }
.orb { width: 160px; height: 160px; }

/* "Hey iGo" listening indicator in the header */
.wakeind { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255,255,255,.55); background: transparent; color: #fff; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer; }
.wakeind .dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .6; }
.wakeind.on .dot { background: var(--adey); opacity: 1; }
.wakeind.ask { background: var(--adey); color: var(--buna); border-color: var(--adey); font-weight: 700; }
.wakeind.ask .dot { background: var(--red); opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .wakeind.on .dot { animation: blink 1.6s ease-in-out infinite; } @keyframes blink { 50% { opacity: .25; } } }
.wakeind { white-space: nowrap; }
@media (max-width: 760px) { .wakeind { padding: 6px 10px; font-size: 13px; } .top-right { gap: 6px; } .lang { padding: 6px 10px; font-size: 13px; } }

/* ---------- Opening greeting ---------- */
.welcome { position: fixed; inset: 0; z-index: 50; background: var(--eucalyptus); color: #fff; display: flex; flex-direction: column; }
.welcome .wbody { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 24px calc(24px + env(safe-area-inset-bottom)); gap: 10px; }
.welcome .wgreet { font-size: clamp(30px, 8vw, 46px); font-weight: 800; line-height: 1.2; max-width: 14ch; margin: 10px 0 18px; }
.welcome .orb.big { width: 190px; height: 190px; background: conic-gradient(var(--adey) 0 33.3%, var(--red) 0 66.6%, #fff 0); }
.welcome .orb.big span { color: var(--eucalyptus-deep); }
.welcome .orb.big svg { width: 76px; height: 76px; }
.welcome .wstart { font-size: 22px; font-weight: 700; margin: 6px 0 0; }
.welcome .wskip { margin-top: 28px; background: none; border: 0; color: rgba(255,255,255,.85); text-decoration: underline; font: inherit; font-size: 15px; cursor: pointer; }
.welcome .wlangs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.welcome .wlangs button { border: 1px solid rgba(255,255,255,.5); background: transparent; color: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 15px; cursor: pointer; }
.welcome .wlangs button.on { background: var(--adey); color: var(--buna); border-color: var(--adey); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .welcome .orb.big { animation: pulse 2.6s ease-in-out infinite; } }
.bigopts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.bigopts button { border: 2px solid var(--line); background: #fff; border-radius: 18px; padding: 16px 10px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; color: var(--buna); }
.bigopts button:active { border-color: var(--eucalyptus); }
.yesno .btn.sos { min-height: 56px; font-size: 18px; }
.welcome { cursor: pointer; }