:root {
    --haldi: #FFC21A;
    --baingan: #2A0E3D;
    --baingan-soft: #4B2D5E;
    --malai: #FFF7E8;
    --raakh: #6E6475;
    --line: #EADFC9;
  }
  :root { color-scheme: light; }
  * { box-sizing: border-box; margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  button, a, [role="switch"] { touch-action: manipulation; }
  html, body { height: 100%; }
  body {
    background: var(--baingan);
    font-family: "Bricolage Grotesque", system-ui, sans-serif;
    color: var(--baingan);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }
  .app {
    max-width: 440px;
    min-height: 100dvh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--haldi);
    overflow: hidden;
  }

  /* Hero: type only, anchored to the sheet */
  .hero {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding: calc(20px + env(safe-area-inset-top)) 24px 52px;
  }
  /* Logo files are painted with currentColor through a mask, so they take the text colour. */
  .brand { display: flex; align-items: flex-end; gap: 12px; }
  .wordmark, .urdu { display: block; background: currentColor; -webkit-mask: var(--logo) no-repeat center / contain; mask: var(--logo) no-repeat center / contain; }
  .wordmark { --logo: url(brand/wordmark.svg); height: 30px; aspect-ratio: 800 / 288; }
  .urdu { --logo: url(brand/urdu.svg); height: 19px; aspect-ratio: 349 / 156; margin-bottom: -3px; }

  .copy { margin-top: auto; padding-top: 32px; }
  .headline {
    font-size: min(calc((100vw - 48px) / 2.6), 150px);
    font-weight: 800;
    line-height: 0.84;
    letter-spacing: -0.06em;
    font-variation-settings: "opsz" 96;
    margin-left: -0.04em;
  }
  .answer {
    margin-top: 18px;
    font-size: clamp(26px, 8vw, 34px);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
  }
  .sub { margin-top: 12px; font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--baingan-soft); }

  /* Sheet */
  .choices {
    margin-top: -28px;
    padding: 24px 20px calc(16px + env(safe-area-inset-bottom));
    background: var(--malai);
    border-radius: 28px 28px 0 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    border: 0;
    border-radius: 20px;
    text-align: left;
    font: inherit;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: transform 120ms ease;
  }
  .btn:active { transform: scale(0.98); }
  .btn:focus-visible { outline: 3px solid var(--baingan); outline-offset: 3px; }
  .btn .text { flex: 1; min-width: 0; }
  .btn .title { display: block; font-weight: 800; letter-spacing: -0.03em; }
  .btn .hint { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 500; }

  .order { min-height: 80px; padding: 14px 14px 14px 22px; background: var(--baingan); color: var(--malai); }
  .order .title { font-size: 24px; color: var(--haldi); }
  .order .hint { color: #D8C9E3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .order .go {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 16px;
    background: var(--haldi); display: grid; place-items: center;
  }

  .join { min-height: 66px; padding: 12px 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
  .join .title { font-size: 18px; }
  .join .hint { color: var(--raakh); }
  .icon {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px;
    background: #FFF0C7; display: grid; place-items: center;
  }

  .rider {
    min-height: 50px; padding: 6px; background: transparent;
    justify-content: center; gap: 10px; font-size: 15.5px; font-weight: 700;
  }
  .rider .tag {
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
    padding: 4px 8px; border-radius: 999px; background: var(--baingan); color: var(--haldi);
  }

  @media (max-width: 340px) {
    .order .hint, .join .hint { font-size: 12.5px; }
    .sub { font-size: 14.5px; }
  }
  @media (max-height: 600px) {
    .headline { font-size: min(calc((100vw - 48px) / 2.6), 15vh); }
    .answer { font-size: 24px; margin-top: 10px; }
    .sub { margin-top: 8px; }
    .app .hero { padding-bottom: 38px; }
  }
  @media (max-height: 680px) {
    .hero { padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: 46px; }
    .copy { padding-top: 20px; }
    .answer { margin-top: 14px; }
    .choices { padding-top: 20px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
    .order { min-height: 70px; }
    .order .go { width: 48px; height: 48px; }
    .join { min-height: 58px; }
    .rider { min-height: 44px; }
  }

  [hidden] { display: none !important; }

  /* Screen transitions: movement only, content is always visible */
  .enter-fwd { animation: in-fwd 260ms cubic-bezier(.2,.8,.2,1); }
  .enter-back { animation: in-back 260ms cubic-bezier(.2,.8,.2,1); }
  @keyframes in-fwd { from { transform: translateX(28px); } }
  @keyframes in-back { from { transform: translateX(-28px); } }

  /* Signup */
  .page {
    max-width: 440px;
    min-height: 100dvh;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: var(--malai);
  }
  .bar {
    display: flex; align-items: center; gap: 14px;
    padding: calc(12px + env(safe-area-inset-top)) 16px 8px;
  }
  .back {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; border: 0;
    background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
    display: grid; place-items: center; cursor: pointer;
  }
  .back:focus-visible, .field input:focus-visible, .field select:focus-visible { outline: none; }
  .progress { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
  .progress i { height: 5px; border-radius: 3px; background: #EDE3D1; }
  .progress i.on { background: var(--baingan); }
  .count { font-size: 13px; font-weight: 600; color: var(--raakh); min-width: 34px; text-align: right; }

  .ask { flex: 1; padding: 22px 20px 20px; }
  .ask h2 { font-size: 32px; line-height: 1.05; font-weight: 800; letter-spacing: -0.045em; font-variation-settings: "opsz" 96; }
  .ask .why { margin-top: 8px; font-size: 15.5px; line-height: 1.4; color: var(--raakh); font-weight: 500; }
  .fields { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; }

  .field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; }
  .field label .opt { font-weight: 500; color: var(--raakh); }
  .box {
    display: flex; align-items: center; min-height: 58px; border-radius: 16px;
    background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
    transition: box-shadow 120ms ease;
  }
  .box:focus-within { box-shadow: inset 0 0 0 2px var(--baingan); }
  .field.bad .box { box-shadow: inset 0 0 0 2px #C62F1E; }
  .box input, .box select {
    flex: 1; min-width: 0; height: 56px; padding: 0 16px; border: 0; background: transparent;
    font: inherit; font-size: 18px; font-weight: 600; color: var(--baingan);
    -webkit-appearance: none; appearance: none;
  }
  .box input::placeholder { color: #A99FAE; font-weight: 500; }
  .box select { cursor: pointer; }
  .box select.empty { color: #A99FAE; font-weight: 500; }
  .box .chev { margin-right: 14px; flex-shrink: 0; pointer-events: none; }
  .prefix {
    padding: 0 12px 0 16px; height: 30px; display: flex; align-items: center;
    font-size: 18px; font-weight: 700; border-right: 1.5px solid var(--line);
  }
  .prefix + input { padding-left: 12px; }
  .err { display: block; margin-top: 7px; font-size: 13.5px; font-weight: 600; color: #C62F1E; }

  /* Pin your door */
  .ask-map { display: flex; flex-direction: column; padding-bottom: 8px; }
  .map-wrap { position: relative; margin-top: 16px; flex: 1; min-height: 230px; border-radius: 22px; overflow: hidden; background: #EDE3D1; box-shadow: inset 0 0 0 1.5px var(--line); }
  /* Beats mapbox-gl.css, which sets .mapboxgl-map to position: relative. */
  .map-wrap > .map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -100%); pointer-events: none; z-index: 2; transition: transform 140ms ease; }
  .map-wrap.moving .pin { transform: translate(-50%, calc(-100% - 10px)); }
  .pin-shadow { position: absolute; left: 50%; top: 50%; width: 14px; height: 6px; margin: -3px 0 0 -7px; border-radius: 50%; background: rgba(42, 14, 61, 0.35); z-index: 1; pointer-events: none; }
  .locate {
    position: absolute; left: 12px; bottom: 12px; z-index: 2; height: 42px; padding: 0 14px; border: 0; border-radius: 14px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--baingan);
    font: inherit; font-size: 14.5px; font-weight: 800; box-shadow: 0 2px 10px rgba(42, 14, 61, 0.18);
  }
  .locate:focus-visible { outline: 3px solid var(--baingan); outline-offset: 2px; }
  .pin-place { margin-top: 12px; font-size: 16px; font-weight: 800; letter-spacing: -0.02em; min-height: 22px; }
  .mapboxgl-ctrl-bottom-right { z-index: 2; }

  .foot {
    position: sticky; bottom: 0;
    padding: 12px 20px calc(14px + env(safe-area-inset-bottom));
    background: var(--malai);
  }
  .primary {
    width: 100%; height: 58px; border: 0; border-radius: 18px; cursor: pointer;
    background: var(--baingan); color: var(--haldi);
    font: inherit; font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: transform 120ms ease;
  }
  .primary:active { transform: scale(0.98); }
  .primary:focus-visible { outline: 3px solid var(--haldi); outline-offset: 2px; }
  .fine { margin-top: 10px; text-align: center; font-size: 12.5px; color: var(--raakh); }

  /* Account created */
  .done { justify-content: center; align-items: flex-start; padding: 0 24px; background: var(--haldi); }
  /* The Dasti D: its outline draws, then it fills. Static when motion is reduced. */
  .done .d-mark { width: 76px; height: auto; overflow: visible; }
  .done .d-mark path { fill: var(--baingan); stroke: var(--baingan); stroke-width: 6; stroke-linejoin: round; }
  .done .d-mark.play path { stroke-dasharray: 1; animation: d-draw 0.75s cubic-bezier(0.65, 0, 0.35, 1) both, d-fill 0.35s ease-out 0.6s both; }
  .done .d-mark.play { animation: d-settle 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both; }
  @keyframes d-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes d-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
  @keyframes d-settle { 0% { transform: scale(1); } 45% { transform: scale(1.08); } 100% { transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) { .done .d-mark.play, .done .d-mark.play path { animation: none; } }
  .done h2 { margin-top: 22px; font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -0.05em; font-variation-settings: "opsz" 96; }
  .done p { margin-top: 10px; font-size: 16px; font-weight: 500; color: var(--baingan-soft); }

  /* Restaurants (signed-in home) */
  .home { background: var(--malai); }
  .home-top { background: var(--haldi); padding: calc(12px + env(safe-area-inset-top)) 16px 16px; position: sticky; top: 0; z-index: 3; }
  .home-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .deliver { min-width: 0; flex: 1; border: 0; background: transparent; padding: 4px 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
  .deliver .k { display: block; font-size: 12px; font-weight: 700; color: var(--baingan-soft); }
  .deliver .v { display: flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
  .deliver .v span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .deliver svg { flex-shrink: 0; }
  .avatar {
    flex-shrink: 0; width: 42px; height: 42px; border-radius: 14px; border: 0; cursor: pointer;
    background: var(--baingan); color: var(--haldi); font: inherit; font-size: 17px; font-weight: 800;
  }
  .search {
    margin-top: 12px; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px;
    background: #fff; border-radius: 16px;
  }
  .search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 600; color: var(--baingan); }
  .search input::placeholder { color: #A99FAE; font-weight: 500; }
  .search input:focus { outline: none; }
  .search input::-webkit-search-cancel-button { -webkit-appearance: none; }

  .cuisines {
    display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px 4px; scroll-padding: 0 16px; scrollbar-width: none;
    background: var(--malai);
  }
  .cuisines::-webkit-scrollbar { display: none; }
  .chip {
    flex-shrink: 0; height: 38px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer;
    background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
    font: inherit; font-size: 14.5px; font-weight: 700; color: var(--baingan);
  }
  .chip[aria-pressed="true"] { background: var(--baingan); color: var(--haldi); box-shadow: none; }

  .feed { padding: 8px 0 calc(28px + env(safe-area-inset-bottom)); }
  .live-line { display: flex; align-items: center; gap: 8px; padding: 6px 16px 0; font-size: 13.5px; font-weight: 600; color: var(--raakh); }
  .live-line::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #17A863; }
  .sec { padding: 18px 16px 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.035em; }

  .rail-track { display: flex; gap: 12px; overflow-x: auto; padding: 0 16px 4px; scroll-padding: 0 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .rail-track::-webkit-scrollbar { display: none; }
  .mini { flex: 0 0 168px; scroll-snap-align: start; border: 0; padding: 0; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; }
  .mini .tile { height: 112px; border-radius: 18px; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
  .mini .eta { font-size: 30px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
  .mini .eta small { font-size: 14px; letter-spacing: -0.01em; margin-left: 2px; }
  .mini .dish { font-size: 13px; font-weight: 700; line-height: 1.2; }
  .mini .nm { display: block; margin-top: 8px; font-size: 14.5px; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini .ar { display: block; font-size: 12.5px; font-weight: 500; color: var(--raakh); }

  .list { display: flex; flex-direction: column; gap: 14px; padding: 0 16px; }
  .card {
    display: block; width: 100%; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer;
    background: #fff; border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 1.5px var(--line);
    transition: transform 120ms ease;
  }
  .card:active, .mini:active { transform: scale(0.985); }
  .card:focus-visible, .mini:focus-visible, .chip:focus-visible { outline: 3px solid var(--baingan); outline-offset: 2px; }
  .card .tile { position: relative; padding: 14px 16px 16px; min-height: 148px; display: flex; flex-direction: column; justify-content: space-between; }
  .tile .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .kitchen { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,0.92); color: var(--baingan); }
  .kitchen i { width: 7px; height: 7px; border-radius: 50%; background: #17A863; }
  .kitchen.busy i { background: #E9A23B; }
  .kitchen.packed i { background: #E8412C; }
  .kitchen.closed i { background: #8E8594; }
  .offer { max-width: 55%; height: 26px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--haldi); color: var(--baingan); font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card .dish { margin-top: 18px; font-size: 27px; line-height: 1.02; font-weight: 800; letter-spacing: -0.045em; font-variation-settings: "opsz" 96; }
  .card .price { margin-top: 6px; font-size: 15px; font-weight: 700; }
  .card .body { padding: 13px 16px 15px; }
  .card .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .card .nm { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card .rate { flex-shrink: 0; font-size: 14.5px; font-weight: 800; }
  .card .rate span { font-weight: 500; color: var(--raakh); }
  .card .sub { margin-top: 2px; font-size: 13.5px; font-weight: 500; color: var(--raakh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .facts { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; font-weight: 700; }
  .facts span { display: inline-flex; align-items: center; gap: 5px; }
  .facts .match { color: #0F7A45; }
  .card.is-closed .tile { filter: grayscale(0.85); }
  .card.is-closed .tile .dish, .card.is-closed .tile .price { opacity: 0.75; }
  .card.flash { animation: flash 1.2s ease; }
  @keyframes flash { 0% { box-shadow: inset 0 0 0 3px var(--haldi); } 100% { box-shadow: inset 0 0 0 1.5px var(--line); } }

  .state { margin: 24px 16px; padding: 22px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
  .state b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
  .state span { display: block; margin-top: 4px; font-size: 14.5px; color: var(--raakh); font-weight: 500; }
  .state button { margin-top: 14px; }
  .skel { background: #F1E8D8; border-radius: 22px; height: 230px; }

  /* Restaurant menu */
  .menu { background: var(--malai); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .m-head { padding: calc(12px + env(safe-area-inset-top)) 16px 52px; }
  .m-bar { display: flex; align-items: center; justify-content: space-between; }
  .round {
    width: 42px; height: 42px; border-radius: 14px; border: 0; cursor: pointer;
    background: rgba(255,255,255,0.92); color: var(--baingan); display: grid; place-items: center;
  }
  .m-name { margin-top: 26px; font-size: 36px; line-height: 0.98; font-weight: 800; letter-spacing: -0.05em; font-variation-settings: "opsz" 96; }
  .m-sub { margin-top: 8px; font-size: 14.5px; font-weight: 600; opacity: 0.85; }
  .m-facts {
    margin: -34px 16px 0; position: relative; background: #fff; border-radius: 20px;
    box-shadow: inset 0 0 0 1.5px var(--line); display: grid; grid-template-columns: repeat(3, 1fr);
  }
  .m-facts div { padding: 13px 10px 12px; text-align: center; }
  .m-facts div + div { box-shadow: inset 1.5px 0 0 var(--line); }
  .m-facts b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; }
  .m-facts span { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--raakh); white-space: nowrap; }
  .m-note { margin: 12px 16px 0; padding: 11px 14px; border-radius: 14px; font-size: 14px; font-weight: 700; background: #FFF0C7; }
  .m-note.closed { background: #EFE9F2; }
  .m-note .match { color: #0F7A45; }

  .m-tabs {
    position: sticky; top: 0; z-index: 3; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin-top: 14px; padding: 10px 16px; background: var(--malai); box-shadow: 0 1.5px 0 var(--line);
    scroll-padding: 0 16px;
  }
  .m-tabs::-webkit-scrollbar { display: none; }

  .m-sec { scroll-margin-top: 64px; padding: 18px 16px 0; }
  .m-sec h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.035em; padding-bottom: 4px; }
  .item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; box-shadow: 0 1.5px 0 var(--line); }
  .item:last-child { box-shadow: none; }
  .i-text { flex: 1; min-width: 0; }
  .i-name { font-size: 16.5px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
  .i-tag { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: #FFF0C7; font-size: 11px; font-weight: 800; vertical-align: 2px; letter-spacing: 0.02em; }
  .i-desc { margin-top: 3px; font-size: 13.5px; line-height: 1.35; font-weight: 500; color: var(--raakh); }
  .i-price { margin-top: 6px; font-size: 15px; font-weight: 800; }
  .i-price span { font-weight: 600; color: var(--raakh); }
  .item.out .i-name, .item.out .i-price { color: #9D94A3; }
  .i-out { flex-shrink: 0; font-size: 12.5px; font-weight: 700; color: #9D94A3; padding-top: 4px; }

  .add {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 13px; border: 0; cursor: pointer;
    background: var(--baingan); color: var(--haldi); display: grid; place-items: center;
  }
  .stepper { flex-shrink: 0; display: flex; align-items: center; height: 40px; border-radius: 13px; background: var(--baingan); color: var(--haldi); }
  .stepper button { width: 36px; height: 40px; border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; }
  .stepper b { min-width: 18px; text-align: center; font-size: 15.5px; font-weight: 800; color: var(--malai); }
  .add:active, .stepper button:active { transform: scale(0.94); }
  .add:focus-visible, .stepper button:focus-visible, .round:focus-visible, .basket-btn:focus-visible { outline: 3px solid var(--haldi); outline-offset: 2px; }

  .feature { margin: 16px 16px 0; border-radius: 22px; padding: 16px; display: flex; align-items: flex-end; gap: 12px; }
  .feature .f-text { flex: 1; min-width: 0; }
  .feature .f-k { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; opacity: 0.8; }
  .feature .f-name { margin-top: 6px; font-size: 26px; line-height: 1.02; font-weight: 800; letter-spacing: -0.045em; }
  .feature .f-desc { margin-top: 6px; font-size: 13.5px; font-weight: 500; opacity: 0.85; }
  .feature .f-price { margin-top: 8px; font-size: 16px; font-weight: 800; }
  .feature .add, .feature .stepper { background: rgba(255,255,255,0.95); color: var(--baingan); }
  .feature .stepper b { color: var(--baingan); }

  .basket-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--malai) 70%, rgba(255,247,232,0));
  }
  .basket-btn {
    width: 100%; max-width: 408px; margin: 0 auto; height: 62px; border: 0; border-radius: 20px; cursor: pointer;
    display: flex; align-items: center; gap: 12px; padding: 0 16px 0 10px;
    background: var(--baingan); color: var(--malai); font: inherit; text-align: left;
  }
  .b-count { width: 40px; height: 40px; border-radius: 13px; background: var(--haldi); color: var(--baingan); display: grid; place-items: center; font-size: 16px; font-weight: 800; flex-shrink: 0; }
  .b-text { flex: 1; min-width: 0; }
  .b-main { display: block; font-size: 16.5px; font-weight: 800; color: var(--haldi); }
  .b-hint { display: block; font-size: 12.5px; font-weight: 600; color: #D8C9E3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .b-total { font-size: 17px; font-weight: 800; }
  .m-loading { padding: 18px 16px; }
  .m-loading .skel { height: 72px; border-radius: 16px; margin-bottom: 10px; }

  /* Checkout */
  .checkout, .tracking { background: var(--malai); }
  .c-bar { display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 16px 4px; }
  .c-title { font-size: 26px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; }
  .c-sub { font-size: 14px; font-weight: 600; color: var(--raakh); }
  .c-body { padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
  .c-card { display: block; background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1.5px var(--line); padding: 14px 16px; }
  .c-card .k { display: block; font-size: 12.5px; font-weight: 700; color: var(--raakh); }
  .c-card .opt { font-weight: 500; }
  .c-deliver { display: flex; gap: 12px; align-items: flex-start; }
  .c-deliver svg { flex-shrink: 0; margin-top: 2px; }
  .c-dtext { min-width: 0; }
  .c-dtext b { display: block; margin-top: 1px; font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; }
  .c-dtext > span:last-child { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--raakh); }
  .c-line { display: flex; align-items: center; gap: 12px; padding: 10px 0; box-shadow: 0 1.5px 0 var(--line); }
  .c-line:first-child { padding-top: 2px; }
  .c-line .l-text { flex: 1; min-width: 0; }
  .c-line .l-name { font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; }
  .c-line .l-each { font-size: 13px; font-weight: 600; color: var(--raakh); }
  .c-line .l-total { min-width: 64px; text-align: right; font-size: 15px; font-weight: 800; }
  .c-line.gone .l-name { text-decoration: line-through; color: #9D94A3; }
  .c-line .stepper { height: 36px; border-radius: 12px; }
  .c-line .stepper button { width: 32px; height: 36px; }
  .c-more { margin-top: 10px; border: 0; background: transparent; padding: 4px 0; font: inherit; font-size: 14.5px; font-weight: 800; color: var(--baingan); cursor: pointer; }
  .c-note textarea { display: block; width: 100%; margin-top: 6px; border: 0; resize: none; background: transparent; font: inherit; font-size: 16px; font-weight: 600; color: var(--baingan); }
  .c-note textarea::placeholder { color: #A99FAE; font-weight: 500; }
  .c-note textarea:focus { outline: none; }
  .c-note:focus-within { box-shadow: inset 0 0 0 2px var(--baingan); }
  .c-pay { display: flex; gap: 12px; align-items: flex-start; box-shadow: inset 0 0 0 2px var(--baingan); }
  .c-pay .radio { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 6px var(--baingan); }
  .c-pay b { display: block; font-size: 15.5px; font-weight: 800; }
  .c-pay span:not(.radio) { display: block; font-size: 13.5px; font-weight: 500; color: var(--raakh); }
  .bill-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 15px; font-weight: 600; }
  .bill-row.total { margin-top: 6px; padding-top: 10px; box-shadow: inset 0 1.5px 0 var(--line); font-size: 18px; font-weight: 800; }
  .c-error { padding: 12px 14px; border-radius: 14px; background: #FDE8E4; color: #A32D1E; font-size: 14.5px; font-weight: 700; }
  .checkout .foot .primary[aria-busy="true"] { opacity: 0.85; }

  /* Order tracking */
  .o-head { background: var(--haldi); padding: calc(12px + env(safe-area-inset-top)) 16px 22px; }
  .o-bar { display: flex; align-items: center; justify-content: space-between; }
  .o-num { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; }
  .o-title { margin-top: 18px; font-size: 36px; line-height: 1; font-weight: 800; letter-spacing: -0.05em; font-variation-settings: "opsz" 96; }
  .o-sub { margin-top: 8px; font-size: 16px; font-weight: 600; color: var(--baingan-soft); }
  .o-eta { margin-top: 14px; display: inline-block; padding: 8px 12px; border-radius: 12px; background: var(--baingan); color: var(--haldi); font-size: 15px; font-weight: 800; }
  .o-eta:empty { display: none; }
  .o-steps { list-style: none; padding: 18px 16px 4px 16px; margin: 0; }
  .o-steps li { position: relative; display: flex; gap: 12px; align-items: center; min-height: 42px; font-size: 15.5px; font-weight: 700; color: #A99FAE; }
  .o-steps li::before { content: ""; flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 2px #D8CEBF; background: var(--malai); z-index: 1; }
  .o-steps li + li::after { content: ""; position: absolute; left: 7px; top: -14px; width: 2px; height: 28px; background: #E5DBCB; }
  .o-steps li.is-done { color: var(--baingan); }
  .o-steps li.is-done::before { background: var(--baingan); box-shadow: none; }
  .o-steps li.is-done::after, .o-steps li.is-now::after { background: var(--baingan); }
  .o-steps li.is-now { color: var(--baingan); font-weight: 800; }
  .o-steps li.is-now::before { background: var(--haldi); box-shadow: inset 0 0 0 3px var(--baingan); }
  .o-steps.cancelled li { color: #A99FAE; }
  .o-cancel { background: #fff; color: #A32D1E; box-shadow: inset 0 0 0 1.5px var(--line); }

  .active-order {
    display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 8px 16px 2px; padding: 12px 14px;
    border: 0; border-radius: 18px; background: var(--baingan); color: var(--malai); font: inherit; text-align: left; cursor: pointer;
  }
  .ao-dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--haldi); }
  .ao-text { flex: 1; min-width: 0; }
  .ao-text b { display: block; font-size: 15px; font-weight: 800; color: var(--haldi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ao-text span { display: block; font-size: 13px; font-weight: 600; color: #D8C9E3; }

  /* Restaurant side */
  .k-switch { margin-top: 18px; font-size: 15px; font-weight: 600; color: var(--raakh); }
  .k-switch a { color: var(--baingan); font-weight: 800; }
  .k-switch-top { margin-top: 10px; }
  .field .lbl { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 7px; }
  .hint-line { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--raakh); }
  .j-cuisines { display: flex; flex-wrap: wrap; gap: 8px; }
  .j-locate { width: 100%; height: 54px; border: 0; border-radius: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
    background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: inherit; font-size: 16px; font-weight: 800; color: var(--baingan); }
  .j-locate.ok { box-shadow: inset 0 0 0 2px #17A863; color: #0F7A45; }

  .k-page { background: #F4EEF6; }
  .k-head { background: var(--baingan); color: var(--malai); padding: calc(12px + env(safe-area-inset-top)) 16px 16px; }
  .k-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .k-name { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; color: var(--haldi); }
  .k-pill { display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #3D1D52; color: #D8C9E3; }
  .k-pill.live { background: #17A863; color: #fff; }
  .k-controls { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
  .k-open { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 14px; border: 0; border-radius: 16px; cursor: pointer;
    background: #3D1D52; color: var(--malai); font: inherit; font-size: 17px; font-weight: 800; text-align: left; }
  .k-knob { position: relative; width: 46px; height: 28px; border-radius: 999px; background: #6E5A7D; flex-shrink: 0; transition: background 150ms ease; }
  .k-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 150ms ease; }
  .k-open[aria-checked="true"] .k-knob { background: #17A863; }
  .k-open[aria-checked="true"] .k-knob::after { transform: translateX(18px); }
  .k-load { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 16px; background: #3D1D52; }
  .k-load button { height: 42px; border: 0; border-radius: 12px; cursor: pointer; background: transparent; color: #D8C9E3; font: inherit; font-size: 14.5px; font-weight: 800; }
  .k-load button[aria-checked="true"] { background: var(--haldi); color: var(--baingan); }
  .k-prep { display: flex; align-items: center; justify-content: space-between; padding: 6px 6px 6px 14px; border-radius: 16px; background: #3D1D52; font-size: 15px; font-weight: 800; }
  .k-prep .stepper { background: var(--haldi); color: var(--baingan); }
  .k-prep .stepper b { min-width: 64px; color: var(--baingan); }
  .k-controls.off .k-load, .k-controls.off .k-prep { opacity: 0.5; }
  .k-open:focus-visible, .k-load button:focus-visible { outline: 3px solid var(--haldi); outline-offset: 2px; }

  .k-pending { margin: 16px; padding: 18px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1.5px #E3D8EA; }
  .k-pending b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
  .k-pending span { display: block; margin-top: 6px; font-size: 14.5px; font-weight: 500; color: var(--raakh); line-height: 1.45; }
  .k-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px 6px; scrollbar-width: none; }
  .k-tabs::-webkit-scrollbar { display: none; }
  .k-tabs .chip .n { display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #EFE7F3; font-size: 12.5px; }
  .k-tabs .chip[aria-pressed="true"] .n { background: var(--haldi); color: var(--baingan); }
  .k-tabs .chip.alert:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 2px #E8412C; }
  .k-list { padding: 6px 16px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
  .k-empty { padding: 26px 18px; text-align: center; border-radius: 20px; background: #fff; font-size: 15px; font-weight: 600; color: var(--raakh); }
  .k-order { background: #fff; border-radius: 22px; box-shadow: inset 0 0 0 1.5px #E3D8EA; padding: 14px 16px 16px; }
  .k-order.is-new { box-shadow: inset 0 0 0 3px var(--haldi); }
  .k-order.flash { animation: flash 1.2s ease; }
  .ko-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .ko-num { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
  .ko-time { font-size: 13.5px; font-weight: 700; color: var(--raakh); }
  .ko-items { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
  .ko-items p { font-size: 16px; font-weight: 700; }
  .ko-items b { display: inline-block; min-width: 30px; font-weight: 800; }
  .ko-note { margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: #FFF0C7; font-size: 14.5px; font-weight: 700; }
  .ko-cust { margin-top: 12px; padding-top: 12px; box-shadow: inset 0 1.5px 0 #EFE7F3; font-size: 14px; font-weight: 600; color: var(--raakh); line-height: 1.45; }
  .ko-cust b { color: var(--baingan); }
  .ko-cust a { color: var(--baingan); font-weight: 800; }
  .ko-cash { margin-top: 8px; font-size: 15.5px; font-weight: 800; }
  .ko-actions { margin-top: 14px; display: flex; gap: 8px; }
  .ko-actions .primary { flex: 1; height: 54px; font-size: 16.5px; }
  .ko-actions .no { flex: 0 0 auto; width: auto; padding: 0 16px; background: #fff; color: #A32D1E; box-shadow: inset 0 0 0 1.5px #E3D8EA; }
  .ko-state { margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--raakh); }
  .k-dish { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1.5px #E3D8EA; }
  .k-dish .d-text { flex: 1; min-width: 0; }
  .k-dish .d-name { font-size: 15.5px; font-weight: 800; }
  .k-dish .d-price { font-size: 13px; font-weight: 600; color: var(--raakh); }
  .k-dish.out .d-name { color: #9D94A3; }
  .k-sec { margin-top: 8px; font-size: 13px; font-weight: 800; letter-spacing: 0.06em; color: var(--raakh); }
  .k-avail { flex-shrink: 0; height: 38px; padding: 0 12px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 800; background: #E5F5EC; color: #0F7A45; }
  .k-avail[aria-pressed="false"] { background: #FDE8E4; color: #A32D1E; }
  .k-reasons { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
  .k-reasons .primary { margin-top: 0; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
  #k-reject .sheet > .primary { margin-top: 10px; }

  /* Store readiness */
  .fine a, .sheet-links a { color: inherit; font-weight: 700; }
  .sheet-links { margin-top: 14px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--raakh); }
  #swap-yes.danger { background: #B3261E; color: #fff; }
  .linkish { border: 0; background: none; padding: 6px 2px; font: inherit; font-weight: 700; color: #A32D1E; cursor: pointer; text-decoration: underline; }
  .r-done .tick { width: 64px; height: 64px; border-radius: 20px; background: var(--baingan); display: grid; place-items: center; margin-bottom: 18px; }
  .offline { position: fixed; top: 0; left: 0; right: 0; z-index: 30; padding: calc(8px + env(safe-area-inset-top)) 16px 8px; background: var(--baingan); color: var(--haldi); font-size: 13.5px; font-weight: 700; text-align: center; }
  .boot-fail { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px; background: var(--haldi); color: var(--baingan); }
  .boot-fail b { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; }
  .boot-fail span { font-size: 16px; font-weight: 500; }
  .boot-fail .primary { margin-top: 10px; }
  .chip { min-height: 42px; height: auto; }
  .c-line .stepper { height: 40px; }
  .c-line .stepper button { width: 36px; height: 40px; }

  .ko-rider { margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: #F6F1F8; font-size: 14px; font-weight: 600; line-height: 1.45; }
  .ko-rider a { color: var(--baingan); font-weight: 800; }
  .o-rider { margin: 6px 16px 0; padding: 14px; border-radius: 20px; background: var(--baingan); color: var(--malai); }
  .o-rider-row { display: flex; align-items: center; gap: 12px; }
  .o-rider-icon { width: 40px; height: 40px; border-radius: 13px; background: #3D1D52; display: grid; place-items: center; flex-shrink: 0; }
  .o-rider-row b { flex: 1; font-size: 16px; font-weight: 800; line-height: 1.25; }
  .o-rider-call { flex-shrink: 0; height: 40px; padding: 0 16px; border-radius: 12px; display: grid; place-items: center; background: var(--haldi); color: var(--baingan); font-weight: 800; text-decoration: none; }
  .o-map { position: relative; margin-top: 12px; height: 220px; border-radius: 16px; overflow: hidden; }
  .o-map.mapboxgl-map { position: relative; }
  .rider-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--baingan); box-shadow: 0 0 0 4px var(--haldi), 0 2px 8px rgba(0,0,0,0.3); }
  .home-dot { width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--baingan); box-shadow: inset 0 0 0 6px var(--baingan), inset 0 0 0 11px var(--haldi); }
  .rider-dot { width: 26px; height: 26px; }

  /* Rider app */
  .ride-page { background: #F4EEF6; }
  .rd-today { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .rd-today div { padding: 10px 14px; border-radius: 16px; background: #3D1D52; }
  .rd-today b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--haldi); }
  .rd-today span { font-size: 12.5px; font-weight: 700; color: #D8C9E3; }
  .job { background: #fff; border-radius: 22px; box-shadow: inset 0 0 0 1.5px #E3D8EA; padding: 16px; }
  .job.active { box-shadow: inset 0 0 0 3px var(--haldi); }
  .job .j-k { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: var(--raakh); }
  .job .j-title { margin-top: 4px; font-size: 21px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; }
  .job .j-sub { margin-top: 4px; font-size: 14.5px; font-weight: 600; color: var(--raakh); line-height: 1.4; }
  .job .j-route { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .job .j-route div { padding: 9px 10px; border-radius: 12px; background: #F6F1F8; }
  .job .j-route b { display: block; font-size: 16px; font-weight: 800; }
  .job .j-route span { font-size: 12px; font-weight: 700; color: var(--raakh); }
  .job .j-items { margin-top: 12px; padding-top: 10px; box-shadow: inset 0 1.5px 0 #EFE7F3; font-size: 15px; font-weight: 700; line-height: 1.6; }
  .job .j-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
  .job .j-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .job .j-row .primary { margin: 0; height: 50px; font-size: 15.5px; background: #fff; color: var(--baingan); box-shadow: inset 0 0 0 1.5px #E3D8EA; text-decoration: none; display: flex; align-items: center; justify-content: center; }
  .job .j-cash { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #FFF0C7; font-size: 17px; font-weight: 800; }
  .job .j-giveback { margin-top: 4px; background: transparent; color: #A32D1E; height: 44px; }
  .job-step { display: flex; gap: 8px; margin-bottom: 10px; }
  .job-step span { flex: 1; height: 5px; border-radius: 3px; background: #E3D8EA; }
  .job-step span.on { background: var(--baingan); }

  .sheet-wrap { position: fixed; inset: 0; background: rgba(42, 14, 61, 0.45); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
  .sheet { width: 100%; max-width: 440px; background: var(--malai); border-radius: 26px 26px 0 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); }
  .sheet .who b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
  .sheet .who span { display: block; margin-top: 3px; font-size: 14.5px; color: var(--raakh); font-weight: 500; }
  .sheet .signout { margin-top: 18px; background: #fff; color: #C62F1E; box-shadow: inset 0 0 0 1.5px var(--line); }
  .sheet .cancel { margin-top: 10px; background: transparent; color: var(--baingan); }

  /* Messages sit at the top so they never cover a button, and taps pass through. */
  .toast {
    position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translateX(-50%);
    width: max-content; max-width: min(408px, calc(100% - 32px)); text-align: center;
    background: var(--baingan); color: var(--malai); padding: 12px 16px; border-radius: 14px;
    box-shadow: 0 8px 24px rgba(42, 14, 61, 0.25);
    font-size: 14.5px; font-weight: 600; line-height: 1.35; z-index: 20; pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .enter-fwd, .enter-back, .card.flash { animation: none; }
  }

  /* Ratings and reviews */
  .card .rate.new { padding: 2px 9px; border-radius: 999px; background: #F3ECDD; font-size: 12.5px; font-weight: 800; }
  .m-rate { all: unset; display: block; width: 100%; cursor: pointer; border-radius: 12px; }
  .m-rate:focus-visible { outline: 3px solid var(--baingan); outline-offset: 2px; }
  .i-thumb { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 12.5px; font-weight: 800; color: var(--baingan); }
  .i-thumb svg { width: 12px; height: 12px; }
  .active-order.is-rate .ao-dot { background: none; width: auto; height: auto; color: var(--haldi); font-size: 0; }
  .active-order.is-rate .ao-dot::before { content: "★"; font-size: 18px; line-height: 1; }

  .rv-stars { color: var(--haldi); -webkit-text-stroke: 0.6px #B98500; letter-spacing: 1px; font-size: 15px; }
  .rv-stars i { font-style: normal; color: #E9DFCB; -webkit-text-stroke: 0; }
  .rv-sheet { max-height: 86dvh; display: flex; flex-direction: column; }
  .rv-list { margin-top: 14px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; min-height: 90px; }
  .rv-list .skel { height: 84px; border-radius: 16px; }
  .rv { background: #fff; border-radius: 16px; padding: 12px 14px; box-shadow: inset 0 0 0 1.5px var(--line); }
  .rv-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--raakh); }
  .rv-text { margin-top: 6px; font-size: 15px; line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
  .rv-empty { padding: 18px 4px; font-size: 15px; font-weight: 600; color: var(--raakh); }

  .rate-card .rt-k { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--raakh); margin-top: 14px; }
  .rate-card .rt-k:first-child { margin-top: 0; }
  .rate-card .rt-k .opt { font-weight: 600; letter-spacing: 0; }
  .rt-title { margin-top: 4px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
  .rt-stars { display: flex; gap: 4px; margin-top: 10px; }
  .rt-stars button { flex: 1; height: 52px; border: 0; border-radius: 14px; background: #F6F0E4; font-size: 28px; line-height: 1; color: #E2D6C0; cursor: pointer; }
  .rt-stars button.on { background: #FFF1C9; color: var(--haldi); -webkit-text-stroke: 1px #B98500; }
  .rt-stars button:focus-visible { outline: 3px solid var(--baingan); outline-offset: 2px; }
  .rt-word { margin-top: 6px; font-size: 14.5px; font-weight: 700; text-align: center; color: var(--raakh); }
  .rt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 15px; font-weight: 700; box-shadow: 0 1.5px 0 var(--line); }
  .rt-row span { min-width: 0; overflow-wrap: anywhere; }
  .rt-thumbs { display: flex; gap: 6px; flex-shrink: 0; }
  .rt-thumbs button { width: 46px; height: 42px; border: 0; border-radius: 12px; background: #F6F0E4; color: var(--raakh); display: grid; place-items: center; cursor: pointer; }
  .rt-thumbs button svg { width: 18px; height: 18px; }
  .rt-thumbs button.down svg { transform: rotate(180deg); }
  .rt-thumbs button[aria-pressed="true"] { background: var(--baingan); color: var(--haldi); }
  .rt-thumbs button.down[aria-pressed="true"] { background: #A32D1E; color: #fff; }
  .rt-say { display: block; }
  .rt-say textarea { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: inherit; font-size: 16px; font-weight: 500; color: var(--baingan); resize: vertical; }
  .rt-say textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--baingan); }
  .rate-card .primary { margin-top: 14px; }
  .rt-given { margin-top: 6px; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
  .rt-given .rv-stars { font-size: 20px; }
  .rt-said { margin-top: 6px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--raakh); overflow-wrap: anywhere; }
  .rt-edit { margin-top: 6px; color: var(--baingan); }
  .ko-rating { margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: #FFF7E0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

  /* Dish choices: the dish sheet */
  .add.has { background: var(--haldi); color: var(--baingan); box-shadow: inset 0 0 0 2px var(--baingan); }
  .add.has b { font-size: 16px; font-weight: 800; }
  .item { cursor: pointer; }
  .dish-sheet { position: relative; padding: 0; max-height: 92dvh; display: flex; flex-direction: column; overflow: hidden; }
  .ds-close { position: absolute; top: 12px; right: 12px; z-index: 2; background: #fff; color: var(--baingan); box-shadow: 0 2px 10px rgba(42, 14, 61, 0.18); }
  .ds-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 12px; }
  .ds-photo { display: block; width: calc(100% + 40px); margin: -22px -20px 16px; aspect-ratio: 16 / 10; object-fit: cover; background: #F1E8D8; }
  .ds-name { padding-right: 48px; font-size: 26px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; }
  .ds-photo + .ds-name { padding-right: 0; }
  .ds-desc { margin-top: 6px; font-size: 15px; line-height: 1.4; font-weight: 500; color: var(--raakh); }
  .ds-price { margin-top: 8px; font-size: 17px; font-weight: 800; }
  .ds-price > span:not(.i-thumb) { font-weight: 600; color: var(--raakh); }
  .ds-group { margin: 18px 0 0; padding: 14px 0 4px; border: 0; box-shadow: inset 0 1.5px 0 var(--line); min-width: 0; }
  .ds-group legend { float: left; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0; }
  .ds-group legend b { font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
  .ds-group legend + * { clear: both; }
  .ds-tag { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
  .ds-tag.req { background: var(--baingan); color: var(--haldi); }
  .ds-tag.need { background: #A32D1E; color: #fff; }
  .ds-tag.done { background: #E3F2E8; color: #0F7A45; }
  .ds-tag.opt { background: #F1E8D8; color: var(--raakh); }
  .ds-hint { margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--raakh); }
  .ds-group.need .ds-hint { color: #A32D1E; }
  .ds-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 0; box-shadow: 0 1.5px 0 var(--line); cursor: pointer; }
  .ds-opt:last-child { box-shadow: none; }
  .ds-opt input { flex-shrink: 0; width: 22px; height: 22px; margin: 0; accent-color: var(--baingan); }
  .ds-oname { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; }
  .ds-oname i { font-style: normal; font-weight: 600; color: var(--raakh); }
  .ds-oprice { flex-shrink: 0; font-size: 15px; font-weight: 700; color: var(--raakh); }
  .ds-opt.off { cursor: default; opacity: 0.55; }
  .ds-opt input:disabled + .ds-oname { color: #A99FAE; }
  .ds-note { display: block; margin-top: 18px; padding-top: 14px; box-shadow: inset 0 1.5px 0 var(--line); }
  .ds-label { display: block; font-size: 18px; font-weight: 800; letter-spacing: -0.03em; }
  .ds-label .opt { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--raakh); }
  .ds-note textarea { display: block; width: 100%; margin-top: 8px; padding: 12px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: inherit; font-size: 16px; font-weight: 500; color: var(--baingan); resize: none; }
  .ds-note textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--baingan); }
  .ds-count { display: block; margin-top: 4px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--raakh); }
  .ds-foot { display: flex; gap: 10px; align-items: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--malai); box-shadow: 0 -1.5px 0 var(--line); }
  .ds-foot .stepper { height: 54px; border-radius: 16px; }
  .ds-foot .stepper button { width: 44px; height: 54px; }
  .ds-foot .primary { flex: 1; margin: 0; height: 54px; }
  .ds-foot .primary.waiting { background: #CFC4D6; color: var(--baingan); }
  .ds-foot .primary:disabled { opacity: 0.6; }

  /* Checkout: choices, notes, preferences, terms */
  .c-line .l-opts { margin-top: 1px; font-size: 13px; font-weight: 600; color: var(--raakh); overflow-wrap: anywhere; }
  .c-prefs { padding-top: 4px; padding-bottom: 4px; }
  .pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; box-shadow: 0 1.5px 0 var(--line); }
  .pref:last-child { box-shadow: none; }
  .p-text { flex: 1; min-width: 0; }
  .p-text b { display: block; font-size: 15px; font-weight: 800; }
  .p-text b .opt { font-weight: 600; color: var(--raakh); }
  .p-text span { display: block; font-size: 13px; font-weight: 600; color: var(--raakh); }
  .pref select { max-width: 52%; height: 42px; padding: 0 10px; border: 0; border-radius: 12px; background: #F6F0E4; font: inherit; font-size: 14.5px; font-weight: 700; color: var(--baingan); }
  .pref input[role="switch"] { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 50px; height: 30px; margin: 0; border-radius: 999px; background: #DCD2C2; position: relative; cursor: pointer; transition: background 0.15s; }
  .pref input[role="switch"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.15s; }
  .pref input[role="switch"]:checked { background: var(--baingan); }
  .pref input[role="switch"]:checked::after { transform: translateX(20px); background: var(--haldi); }
  .pref input:focus-visible, .pref select:focus-visible { outline: 3px solid var(--baingan); outline-offset: 2px; }
  .pref-alt { flex-wrap: wrap; }
  .alt-box { display: flex; align-items: center; width: 100%; height: 46px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
  .alt-box:focus-within { box-shadow: inset 0 0 0 2px var(--baingan); }
  .alt-box .cc { padding: 0 8px 0 12px; font-weight: 800; border-right: 1.5px solid var(--line); }
  .alt-box input { flex: 1; min-width: 0; height: 100%; padding: 0 10px; border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 700; color: var(--baingan); outline: none; }
  .c-terms { margin-top: 8px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--raakh); }
  .c-terms a { color: inherit; font-weight: 800; }

  /* Tracking, kitchen and rider: choices and changes */
  .bill-row small { display: block; font-size: 13px; font-weight: 600; color: var(--raakh); }
  .o-change { margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: #FFF1C9; font-size: 14px; font-weight: 600; }
  .o-change b { display: block; font-weight: 800; }
  .ko-line { display: flex; align-items: flex-start; gap: 10px; }
  .ko-line p { flex: 1; min-width: 0; }
  .ko-opts, .ko-lnote { display: block; font-size: 14px; font-weight: 600; color: var(--raakh); }
  .ko-lnote { color: #8A4B00; }
  .ko-out { flex-shrink: 0; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px #E3D8EA; font: inherit; font-size: 13px; font-weight: 800; color: #A32D1E; cursor: pointer; }
  .ko-changed { margin-top: 8px; font-size: 14px; font-weight: 700; color: #A32D1E; }
  .ko-prefs { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
  .ko-prefs span { padding: 4px 10px; border-radius: 999px; background: #F3EEF7; font-size: 13px; font-weight: 600; }
  .j-opts { font-weight: 600; color: var(--raakh); }
  .j-alt { margin-top: 8px; background: #fff; color: var(--baingan); box-shadow: inset 0 0 0 1.5px #E3D8EA; text-decoration: none; display: flex; align-items: center; justify-content: center; }
  /* A line with choices or a note: text gets the full width, controls go underneath. */
  .c-line.rich { flex-wrap: wrap; row-gap: 8px; }
  .c-line.rich .l-text { flex-basis: 100%; }
  .c-line.rich .l-total { margin-left: auto; }
  .p-text b .opt { display: inline; font-size: inherit; }
  .alt-box input:focus-visible { outline: none; }

  /* Photos: cover on cards and the menu header, dish thumbnails, kitchen uploads */
  .tile.has-photo { position: relative; overflow: hidden; color: #fff !important; }
  .tile-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .tile.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 6, 30, 0.25) 0%, rgba(20, 6, 30, 0) 35%, rgba(20, 6, 30, 0.72) 100%); }
  .tile.has-photo > :not(.tile-pic) { position: relative; z-index: 1; }
  .tile.has-photo .dish, .tile.has-photo .price, .tile.has-photo .eta { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
  .m-head.has-photo { background-image: linear-gradient(180deg, rgba(20, 6, 30, 0.35) 0%, rgba(20, 6, 30, 0.15) 40%, rgba(20, 6, 30, 0.78) 100%), var(--cover) !important; background-size: cover !important; background-position: center !important; }
  .m-head.has-photo .m-name, .m-head.has-photo .m-sub { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
  .item.has-pic { align-items: stretch; }
  .i-pic { position: relative; flex-shrink: 0; width: 96px; height: 96px; }
  .i-img { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; background: #F1E8D8; display: block; }
  .i-pic .add, .i-pic .stepper, .i-pic .i-out { position: absolute; right: -4px; bottom: -6px; box-shadow: 0 2px 8px rgba(42, 14, 61, 0.25); }
  .i-pic .stepper { right: 50%; transform: translateX(50%); }
  .i-pic .i-out { left: 4px; right: 4px; bottom: 6px; text-align: center; background: rgba(255, 247, 232, 0.95); border-radius: 8px; padding: 2px 4px; box-shadow: none; }
  .item.out .i-img { filter: grayscale(1); opacity: 0.6; }
  .k-pic { flex-shrink: 0; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: #F3EEF7; color: var(--raakh); display: grid; place-items: center; cursor: pointer; }
  .k-pic img { width: 100%; height: 100%; object-fit: cover; }
  .k-pic:focus-within { outline: 3px solid var(--baingan); outline-offset: 2px; }
  .feature.has-pic { flex-wrap: wrap; padding-top: 10px; }
  .f-img { flex-basis: 100%; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; margin-bottom: 4px; background: rgba(255,255,255,0.15); }

  /* Your orders */
  .sheet .acct-orders { margin-top: 18px; }
  .sheet .acct-orders + .signout { margin-top: 10px; }
  .h-list .h-skel { height: 132px; border-radius: 20px; }
  .h-card { background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1.5px var(--line); overflow: hidden; }
  .h-main { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 14px 16px 12px; cursor: pointer; }
  .h-main:focus-visible { outline: 3px solid var(--baingan); outline-offset: -3px; border-radius: 20px; }
  .h-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .h-top b { min-width: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .h-st { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: #FFF1C9; }
  .h-st.delivered { background: #E3F2E8; color: #0F7A45; }
  .h-st.cancelled { background: #F1E8D8; color: var(--raakh); }
  .h-when { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--raakh); }
  .h-items { display: block; margin-top: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .h-total { display: block; margin-top: 6px; font-size: 15px; font-weight: 800; }
  .h-actions { display: flex; gap: 8px; padding: 0 16px 14px; }
  .h-actions .primary { height: 46px; font-size: 15.5px; border-radius: 14px; }
  .h-actions .h-rate { background: #fff; color: var(--baingan); box-shadow: inset 0 0 0 1.5px var(--line); }

  /* Restaurant info: hours, delivery */
  .m-right { display: flex; align-items: center; gap: 8px; }
  .in-body { margin-top: 12px; overflow-y: auto; overscroll-behavior: contain; }
  .in-now { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 800; }
  .in-now.open { background: #E3F2E8; color: #0F7A45; }
  .in-now.shut { background: #FDE8E4; color: #A32D1E; }
  .in-body .rt-k { display: block; margin-top: 16px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--raakh); }
  .in-hours { margin-top: 6px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); padding: 4px 14px; }
  .in-day { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14.5px; font-weight: 600; box-shadow: 0 1.5px 0 var(--line); }
  .in-day:last-child { box-shadow: none; }
  .in-day span:last-child { text-align: right; }
  .in-day.today { font-weight: 800; }
  .in-none { padding: 8px 0; font-size: 14.5px; font-weight: 600; color: var(--raakh); }
  .in-rows { margin-top: 6px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); padding: 4px 14px; }
  .in-rows div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 14.5px; box-shadow: 0 1.5px 0 var(--line); }
  .in-rows div:last-child { box-shadow: none; }
  .in-rows span { font-weight: 600; color: var(--raakh); }
  .in-rows b { font-weight: 800; text-align: right; }
  .in-map { margin-top: 14px; text-decoration: none; }
  .in-day span:last-child i { display: block; font-style: normal; white-space: nowrap; }

  /* Sort & filter, dish search */
  .sec-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-right: 16px; }
  .sf-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-top: 14px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: inherit; font-size: 13.5px; font-weight: 800; color: var(--baingan); cursor: pointer; }
  .sf-btn.on { background: var(--baingan); color: var(--haldi); box-shadow: none; }
  .sf-btn:focus-visible { outline: 3px solid var(--baingan); outline-offset: 2px; }
  .sf-group { margin-top: 6px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); padding: 2px 14px; }
  .sf-opt { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 15.5px; font-weight: 700; box-shadow: 0 1.5px 0 var(--line); cursor: pointer; }
  .sf-opt:last-child { box-shadow: none; }
  .sf-opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--baingan); }
  .sf-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
  .sf-chip { position: relative; cursor: pointer; }
  .sf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .sf-chip span { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14.5px; font-weight: 700; }
  .sf-chip input:checked + span { background: var(--baingan); color: var(--haldi); box-shadow: none; }
  .sf-chip input:focus-visible + span { outline: 3px solid var(--baingan); outline-offset: 2px; }
  .sf-foot { display: flex; gap: 10px; margin-top: 14px; }
  .sf-foot .cancel { flex: 0 0 auto; width: auto; padding: 0 18px; margin-top: 0; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
  .sf-foot .primary:not(.cancel) { flex: 1; }
  .card .hit { margin-top: 4px; font-size: 13.5px; font-weight: 700; color: #0F7A45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Problem with this order */
  .o-help { display: flex; flex-direction: column; gap: 10px; }
  .o-issue .k { margin-bottom: 4px; }
  .o-issue b { display: block; font-size: 15px; font-weight: 800; }
  .o-issue > span:last-child:not(.k) { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--raakh); overflow-wrap: anywhere; }
  .o-issue.open { box-shadow: inset 0 0 0 2px var(--haldi); }
  .o-problem { align-self: center; color: var(--baingan); }
  #issue .rt-k { display: block; margin-top: 16px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; color: var(--raakh); }

  /* Order alerts prompts */
  .alerts-card { display: flex; align-items: center; gap: 12px; box-shadow: inset 0 0 0 2px var(--haldi); }
  .alerts-card div, .k-alerts div { flex: 1; min-width: 0; }
  .alerts-card b, .k-alerts b { display: block; font-size: 15px; font-weight: 800; }
  .alerts-card span, .k-alerts span { display: block; font-size: 13px; font-weight: 600; color: var(--raakh); }
  .alerts-card .primary, .k-alerts .primary { flex-shrink: 0; width: auto; height: 44px; padding: 0 16px; font-size: 15px; border-radius: 14px; }
  .k-alerts { display: flex; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 12px 14px; border-radius: 18px; background: #FFF7E0; color: var(--baingan); }
  .k-alerts .primary { background: var(--baingan); color: var(--haldi); }

  /* Tag picker: search a list, pick up to N, add your own */
  .tp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .tp-tags:not(:empty) { margin-bottom: 8px; }
  .tp-tag { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px 0 12px; border: 0; border-radius: 999px; background: var(--baingan); color: var(--haldi); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
  .tp-tag span { font-size: 18px; line-height: 1; color: var(--malai); }
  .tp-box { gap: 8px; padding-left: 12px; }
  .tp-list { margin-top: 8px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); }
  .tp-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 14px; border: 0; background: none; font: inherit; font-size: 15.5px; font-weight: 700; color: var(--baingan); text-align: left; cursor: pointer; box-shadow: 0 1.5px 0 var(--line); }
  .tp-row:last-child { box-shadow: none; }
  .tp-row:disabled { color: #B7AEBC; cursor: default; }
  .tp-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: 7px; box-shadow: inset 0 0 0 2px #CFC4D6; display: grid; place-items: center; }
  .tp-row.on .tp-check { background: var(--baingan); box-shadow: none; }
  .tp-row.on .tp-check::after { content: ""; width: 10px; height: 6px; border: solid var(--haldi); border-width: 0 0 2.6px 2.6px; transform: translateY(-1px) rotate(-45deg); }
  .tp-row.add { color: #0F7A45; }
  .tp-row:focus-visible { outline: 3px solid var(--baingan); outline-offset: -3px; }
  .tp-more { padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--raakh); }

  /* Money: wallets, vouchers, deals */
  .bill-row.save span:last-child { color: #0F7A45; }
  .c-money { display: flex; flex-direction: column; gap: 4px; }
  .vc-row { display: flex; gap: 8px; }
  .vc-row .alt-box { flex: 1; }
  .vc-row .alt-box input { text-transform: uppercase; letter-spacing: 0.04em; }
  .vc-apply { flex-shrink: 0; width: auto; height: 46px; padding: 0 18px; font-size: 15px; border-radius: 12px; }
  .vc-on { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 12px; background: #E3F2E8; }
  .vc-on b { display: block; font-weight: 800; letter-spacing: 0.04em; }
  .vc-on i { display: block; font-style: normal; font-size: 13px; font-weight: 700; color: #0F7A45; }
  .vc-on .linkish { color: var(--baingan); }
  .c-wallet { box-shadow: none !important; padding-bottom: 2px; }
  .sheet .acct-wallet { margin-top: 18px; justify-content: space-between; padding: 0 18px; background: #fff; color: var(--baingan); box-shadow: inset 0 0 0 1.5px var(--line); }
  .sheet .acct-wallet b { color: #0F7A45; }
  .sheet .acct-wallet + .acct-orders { margin-top: 10px; }
  .cw-bal { font-size: 40px; font-weight: 800; letter-spacing: -0.04em; }
  .w-lines { margin-top: 6px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); padding: 2px 14px; }
  .w-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; box-shadow: 0 1.5px 0 var(--line); }
  .w-line:last-child { box-shadow: none; }
  .w-line > span:first-child { min-width: 0; }
  .w-line b { display: block; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
  .w-line i { display: block; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--raakh); }
  .w-line > span:last-child { flex-shrink: 0; font-size: 15px; font-weight: 800; }
  .w-line .in { color: #0F7A45; }
  .w-line .out { color: var(--baingan); }
  .w-line .dep { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; background: #FFF1C9; }
  .w-line .dep.confirmed { background: #E3F2E8; color: #0F7A45; }
  .w-line .dep.rejected { background: #FDE8E4; color: #A32D1E; }
  .i-price s, .f-price s, .ds-price s { margin-left: 4px; font-weight: 600; color: var(--raakh); }
  .i-tag.deal { background: #E3F2E8; color: #0F7A45; }
  .ko-paid { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--raakh); }
  .h-total small { font-size: 13px; font-weight: 600; color: var(--raakh); }

  /* Rider: cash for Dasti */
  .rd-wallet { display: block; width: 100%; margin-bottom: 12px; padding: 14px 16px; border: 0; border-radius: 20px; background: #fff; color: var(--baingan); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1.5px #E3D8EA; }
  .rd-wallet .k { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--raakh); }
  .rd-wallet b { display: block; margin-top: 2px; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
  .rd-wallet .bar { display: block; height: 8px; margin-top: 8px; border-radius: 999px; background: #F1EAF5; overflow: hidden; }
  .rd-wallet .bar i { display: block; height: 100%; border-radius: 999px; background: var(--haldi); }
  .rd-wallet.full { box-shadow: inset 0 0 0 2px #E8412C; }
  .rd-wallet.full .bar i { background: #E8412C; }
  .rd-wallet .sub { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--raakh); }
  .rd-wallet .go { display: block; margin-top: 8px; font-size: 14px; font-weight: 800; }
  .rw-form { display: flex; flex-direction: column; gap: 10px; }
  .rw-f { display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 700; }
  .rw-f select { height: 46px; padding: 0 10px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); font: inherit; font-size: 15px; font-weight: 700; color: var(--baingan); }
  .rw-form .primary { margin-top: 4px; }
  .rw-note { font-size: 13px; font-weight: 600; color: var(--raakh); }

  /* Kitchen: wallet, offers, combos */
  .kw-card, .kd-card { margin-bottom: 12px; padding: 16px; border-radius: 22px; background: #fff; box-shadow: inset 0 0 0 1.5px #E3D8EA; }
  .kw-card .k { display: block; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--raakh); }
  .kw-card b { display: block; margin-top: 2px; font-size: 34px; font-weight: 800; letter-spacing: -0.04em; color: var(--baingan); }
  .kw-card span:not(.k), .kd-card span { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--raakh); }
  .kd-card b { display: block; font-size: 17px; font-weight: 800; color: var(--baingan); }
  .kw-card .primary, .kd-card .primary { margin-top: 12px; height: 50px; font-size: 16px; }
  .kw-card .primary:disabled { opacity: 0.5; }
  .k-dish .d-price s { color: #9D94A3; }
  .k-dish .d-price b { color: #0F7A45; }
  .kd-tag { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #E3F2E8; color: #0F7A45; font-size: 11px; font-weight: 800; vertical-align: 2px; }
  .kd-link { padding: 4px 0 0; color: var(--baingan); font-size: 13.5px; }
  .kf { display: flex; flex-direction: column; gap: 10px; }
  .kd-remove { align-self: flex-start; color: #A32D1E; }

  /* Omni search */
  .omni { position: absolute; left: 12px; right: 12px; top: calc(100% - 8px); z-index: 6; max-height: min(70dvh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 8px; border-radius: 20px; background: #fff; box-shadow: 0 18px 40px rgba(42, 14, 61, 0.22), inset 0 0 0 1.5px var(--line); }
  .omni-k { padding: 10px 16px 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--raakh); }
  .omni-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; border: 0; background: none; font: inherit; color: var(--baingan); text-align: left; cursor: pointer; }
  .omni-row:hover, .omni-row:focus-visible { background: #FBF6EC; outline: none; }
  .omni-pic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; background: #F1E8D8; display: block; }
  .omni-ph { background: #F1E8D8; }
  .omni-t { flex: 1; min-width: 0; }
  .omni-t b { display: block; font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .omni-t i { display: block; font-style: normal; font-size: 13px; font-weight: 600; color: var(--raakh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .omni-p { flex-shrink: 0; text-align: right; font-size: 14px; font-weight: 800; }
  .omni-p s { display: block; font-size: 12px; font-weight: 600; color: var(--raakh); }
  .omni-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 6px; }
  .omni-all { display: block; width: calc(100% - 32px); margin: 8px 16px 0; height: 44px; border: 0; border-radius: 14px; background: #F6F0E4; font: inherit; font-size: 14.5px; font-weight: 800; color: var(--baingan); cursor: pointer; }
  .omni-none { padding: 14px 16px; font-size: 14.5px; font-weight: 600; color: var(--raakh); }

  /* Food / Shops / Pharmacy */
  .kinds { display: flex; gap: 4px; margin: 10px 16px 0; padding: 4px; border-radius: 16px; background: #F1E8D8; }
  .kinds button { flex: 1; height: 40px; border: 0; border-radius: 12px; background: none; font: inherit; font-size: 15px; font-weight: 800; color: var(--raakh); cursor: pointer; }
  .kinds button[aria-selected="true"], .kinds button[aria-checked="true"] { background: #fff; color: var(--baingan); box-shadow: 0 1px 4px rgba(42, 14, 61, 0.12); }
  .kinds button:focus-visible { outline: 3px solid var(--baingan); outline-offset: 1px; }
  .j-kinds { margin: 16px 0 0; }
  .i-tag.rx { background: #E6F1F4; color: #0E5E6F; }
  .ds-rx { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: #E6F1F4; font-size: 14px; font-weight: 600; color: #0E5E6F; line-height: 1.4; }
  .ds-rx b { display: block; font-size: 15px; font-weight: 800; }
  .j-rx { display: inline-block; padding: 0 7px; border-radius: 999px; background: #E6F1F4; color: #0E5E6F; font-size: 12px; font-weight: 800; }
  .j-rxnote { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #E6F1F4; color: #0E5E6F; font-size: 14px; font-weight: 700; }

  /* Join Dasti: what restaurants get */
  .j-pitch { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .j-pitch li { padding: 12px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); }
  .j-pitch b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
  .j-pitch li:first-child { background: var(--baingan); box-shadow: none; }
  .j-pitch li:first-child b { color: var(--haldi); }
  .j-pitch li:first-child span { color: #D8C9E3; }
  .j-pitch span { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--raakh); line-height: 1.3; }