@media (max-width: 560px) {
  html, body { overflow-x: clip; }
  .lp-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .fnav-inner { min-height: 64px !important; height: auto !important; padding: 10px 18px !important; gap: 10px !important; }
  .fnav-logo span { font-size: 16px !important; }
  .fnav-cta .lp-btn { padding: 11px 14px !important; font-size: 14px !important; }
  .lp-btn { white-space: normal !important; text-align: center; justify-content: center; line-height: 1.15; }
  .fp-hero { padding-top: 40px !important; padding-bottom: 52px !important; }
  .fp-hero-grid,
  .fp-feat-grid,
  .fp-spot-grid,
  .feat-grid,
  .cta-grid,
  .fp-hero-grid > *,
  .fp-feat-grid > *,
  .fp-spot-grid > *,
  .feat-grid > *,
  .cta-grid > *,
  .fp-hero-media,
  .fp-feat-media,
  .feat-text,
  .feat-media,
  .showcase,
  .frame,
  .app-frame,
  .po-card,
  .oo-fig { min-width: 0 !important; max-width: 100% !important; overflow: hidden; }
  .fp-hero-cta .lp-btn,
  .fp-final-cta .lp-btn { width: 100%; }
  .fp-stats { gap: 16px 22px !important; }
  .fp-eyebrow,
  .eyebrow,
  .tag { white-space: normal !important; }
  .we-caret { display: none !important; }
  .crmm-tracked { white-space: normal !important; max-width: 100%; }
}

@media (max-width: 600px) {
  .om-card { min-width: 0 !important; }
  .om-card-head { flex-direction: column !important; align-items: stretch !important; }
  .om-lane-label { align-self: flex-start; max-width: 100%; white-space: normal; }
  .om-foot { flex-wrap: wrap; align-items: flex-start !important; }
  .om-foot-actions { width: 100%; justify-content: flex-end; min-width: 0; }
  .om-btn-next { max-width: 100%; white-space: normal; }
  .om-life-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 700px) {
  .dsh-export-flow { width: auto !important; max-width: calc(100vw - 56px) !important; transform: none !important; }
  .dsh-export-flow .ds-export { grid-template-columns: 1fr !important; min-height: 0 !important; }
  .dsh-export-flow .dse-preview { min-height: 152px !important; padding: 12px !important; }
  .dsh-export-flow .dse-card { max-width: 138px !important; }
  .dsh-export-flow .dse-panel { padding: 12px !important; }
  .dsh-export-flow .dse-toggle,
  .dsh-export-flow .dse-row { min-width: 0 !important; }
  .dsh-export-flow .dse-pill { white-space: normal !important; text-align: right; }
}


  .oo-modes { padding: clamp(56px,7vw,88px) 0; background: var(--mint-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .modes-grid { margin-top: 8px; display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
  .mode { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 28px 26px; }
  .mode-ic { width: 56px; height: 56px; border-radius: 15px; background: var(--mint-2); border: 1px solid var(--mint); color: var(--sage-2); display: grid; place-items: center; }
  .mode h3 { font-size: 21px; font-weight: 700; color: var(--forest); margin: 18px 0 0; letter-spacing: -0.01em; }
  .mode p { margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
  @media (max-width: 820px) { .modes-grid { grid-template-columns: 1fr; } }

  /* ===================================================================
     Online Ordering — hand-built product mockups (oo-*)
     Guest phone = the real green restoful menu UI; app frames = portal
     =================================================================== */

  /* ---------- Phone shell ---------- */
  .oo-phone { position: relative; width: min(264px, 100%); margin: 0 auto; border-radius: 32px; padding: 10px; background: #14250F; box-shadow: 0 50px 90px -38px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04); }
  .oo-phone-notch { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 78px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.16); z-index: 3; }
  .oo-screen { border-radius: 23px; overflow: hidden; background: #FAFAF8; aspect-ratio: 9 / 17.7; display: flex; flex-direction: column; }
  .oo-fig { display: flex; justify-content: center; }

  /* ---------- Digital menu phone (reused from AI Menu Builder) ---------- */
  .mmph { width: 146px; background: #1A1A1A; border-radius: 25px; padding: 6px; box-shadow: 0 30px 60px -22px rgba(0,0,0,0.45), 0 1px 0 rgba(255,255,255,0.06) inset; }
  .mmph-screen { background: #F5F0E3; border-radius: 20px; padding: 12px 9px; position: relative; height: 270px; overflow: hidden; }
  .mmph-est { text-align: center; font-size: 6.5px; letter-spacing: 1.3px; color: #6B4423; font-family: var(--mono); font-weight: 600; }
  .mmph-name { text-align: center; font-style: italic; font-size: 21px; color: #2A1810; line-height: 1.05; margin-top: 2px; font-family: var(--serif); }
  .mmph-orn { text-align: center; font-size: 7px; color: #B8966B; margin: 2px 0 7px; }
  .mmph-tabs { display: flex; gap: 3px; margin-bottom: 7px; }
  .mmph-tab { background: transparent; color: #6B4423; border: 0.5px solid #6B4423; padding: 2.5px 6px; border-radius: 99px; font-size: 6px; font-family: var(--mono); font-weight: 600; }
  .mmph-tab.on { background: #6B4423; color: #F5F0E3; }
  .mmph-item { background: #fff; border-radius: 8px; padding: 6px 7px; margin-bottom: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; align-items: center; gap: 4px; }
  .mmph-item > div:first-child { flex: 1; min-width: 0; }
  .mmph-n { font-size: 8px; color: #2A1810; font-weight: 600; }
  .mmph-d { font-size: 6.5px; font-style: italic; color: #8B7355; margin-top: 1px; }
  .mmph-rt { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
  .mmph-p { font-size: 8px; color: #2A1810; font-weight: 700; font-family: var(--mono); }
  .mmph-add { background: #6B4423; color: #F5F0E3; border-radius: 4px; padding: 2px 6px; font-size: 6px; font-weight: 700; font-family: var(--mono); letter-spacing: .3px; }
  .mmph-cart { position: absolute; bottom: 9px; right: 9px; width: 28px; height: 28px; border-radius: 9px; background: #6B4423; display: grid; place-items: center; font-size: 13px; box-shadow: 0 4px 10px rgba(107,68,35,0.4); }
  .mmph-badge { position: absolute; top: -5px; right: -5px; width: 15px; height: 15px; border-radius: 50%; background: #C2522B; color: #fff; font-size: 8.5px; font-weight: 700; display: grid; place-items: center; font-family: var(--mono); }

  /* ---------- Guest menu: context + header + pills ---------- */
  .oo-ctx { background: linear-gradient(135deg,#1A2B22,#2D5A2D); color: #fff; padding: 17px 14px 9px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
  .oo-ctx span { font-size: 8.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
  .oo-ctx b { font-size: 15px; font-weight: 800; }
  .oo-mhead { display: flex; align-items: center; gap: 9px; padding: 10px 12px; background: #fff; border-bottom: 1px solid #F0EBE3; }
  .oo-logo { width: 30px; height: 30px; border-radius: 9px; background: #2D5A2D; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
  .oo-mhead-t { flex: 1; min-width: 0; }
  .oo-mhead-t b { display: block; font-size: 13px; font-weight: 800; color: #1A1A1A; }
  .oo-mhead-t i { font-style: normal; display: block; font-size: 9.5px; color: #9A9A95; }
  .oo-globe { display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 600; color: #666; border: 1.5px solid #E8E0D5; border-radius: 99px; padding: 3px 8px; flex-shrink: 0; }
  .oo-pills { display: flex; gap: 5px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #F0EBE3; overflow: hidden; }
  .oo-pills span { font-size: 9.5px; font-weight: 600; color: #666; background: #F4F4F1; border-radius: 99px; padding: 4px 11px; white-space: nowrap; }
  .oo-pills span.on { background: #2D5A2D; color: #fff; }

  /* ---------- Guest menu: item cards ---------- */
  .oo-items { padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; }
  .oo-item { display: flex; gap: 10px; background: #fff; border: 1px solid #F0EBE3; border-radius: 15px; padding: 9px; }
  .oo-photo { width: 58px; height: 58px; border-radius: 11px; flex-shrink: 0; }
  .oo-photo.a { background: linear-gradient(135deg,#E9D9B8,#B9763F); }
  .oo-photo.b { background: linear-gradient(135deg,#EFE0C6,#C2522B); }
  .oo-item-b { flex: 1; min-width: 0; }
  .oo-item-top { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
  .oo-item-top b { font-size: 12px; font-weight: 700; color: #1A1A1A; }
  .oo-item-top em { font-style: normal; font-size: 12px; font-weight: 700; color: #2B2B2B; flex-shrink: 0; }
  .oo-item-b p { margin: 3px 0 0; font-size: 10px; line-height: 1.4; color: #9A9A95; }
  .oo-item-foot { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
  .oo-diet { font-size: 9px; color: #8A8A85; background: #F8F5F0; border-radius: 6px; padding: 2px 7px; }
  .oo-add { border: 1.5px solid #C8DFC8; background: #F0F7F0; color: #2D5A2D; font-size: 10.5px; font-weight: 700; border-radius: 99px; padding: 5px 13px; cursor: default; margin-left: auto; }
  .oo-stepper { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
  .oo-stepper i, .oo-stepper b { width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 13px; font-style: normal; }
  .oo-stepper i { border: 1.5px solid #E8E0D5; background: #fff; color: #555; }
  .oo-stepper b { background: #2D5A2D; color: #fff; }
  .oo-stepper u { font-size: 12px; font-weight: 700; text-decoration: none; min-width: 12px; text-align: center; color: #1A1A1A; }
  .oo-stepper.sm i, .oo-stepper.sm b { width: 22px; height: 22px; }
  .oo-cartbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 12px 12px; padding: 11px 15px; border-radius: 14px; background: linear-gradient(135deg,#1F3B1F,#2D5A2D); color: #fff; font-size: 12.5px; font-weight: 800; }
  .oo-cart-n { background: rgba(255,255,255,.22); border-radius: 99px; padding: 1px 9px; font-size: 11px; }

  /* ---------- Order-type chooser (Step 1) ---------- */
  .oo-screen.choose { padding: 30px 18px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
  .oo-choose-q { font-size: 18px; font-weight: 800; color: #1A1A1A; text-align: center; letter-spacing: -0.01em; }
  .oo-opts { display: flex; flex-direction: column; gap: 10px; }
  .oo-opt { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 13px; border-radius: 15px; border: 1px solid #ECE5DB; background: #fff; cursor: default; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
  .oo-opt-ic { width: 38px; height: 38px; border-radius: 11px; background: #F0F7F0; color: #2D5A2D; display: grid; place-items: center; flex-shrink: 0; border: 1px solid #DBEBDB; }
  .oo-opt-t { flex: 1; }
  .oo-opt-t b { display: block; font-size: 14px; font-weight: 700; color: #1A1A1A; }
  .oo-opt-t i { font-style: normal; display: block; font-size: 11px; color: #9A9A95; margin-top: 1px; }
  .oo-opt-go { color: #2D5A2D; font-size: 16px; }

  /* ---------- Cart / checkout (Step 2) ---------- */
  .oo-screen.pay { background: #fff; padding: 0 0 12px; }
  .oo-pay-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 15px 11px; border-bottom: 1px solid #F0EBE3; }
  .oo-pay-head b { font-size: 13.5px; font-weight: 800; color: #1A1A1A; }
  .oo-x { width: 24px; height: 24px; border-radius: 99px; border: 1.5px solid #E8E0D5; display: grid; place-items: center; color: #555; font-size: 13px; }
  .oo-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 14px 0; padding: 9px 12px; border: 1px solid #F0EBE3; border-radius: 13px; }
  .oo-line div { display: flex; flex-direction: column; }
  .oo-line b { font-size: 12px; font-weight: 600; color: #1A1A1A; }
  .oo-line em { font-style: normal; font-size: 11px; font-weight: 700; color: #2D5A2D; margin-top: 2px; }
  .oo-pay-label { margin: 15px 14px 7px; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9A9A95; }
  .oo-paysel { display: flex; align-items: center; gap: 10px; margin: 0 14px 7px; padding: 10px 12px; border-radius: 13px; }
  .oo-paysel.on { border: 2px solid #2D5A2D; background: #F0F7F0; }
  .oo-paysel.off { border: 1.5px solid #E8E0D5; background: #fff; opacity: .55; }
  .oo-paysel.alt { border: 1.5px solid #E8E0D5; background: #fff; }
  .oo-paysel.alt .oo-payic { color: #8A8A85; }
  .oo-payic { color: #2D5A2D; display: grid; place-items: center; flex-shrink: 0; }
  .oo-paysel.off .oo-payic { color: #aaa; }
  .oo-paysel div { flex: 1; }
  .oo-paysel b { display: block; font-size: 12.5px; font-weight: 700; color: #1A1A1A; }
  .oo-paysel i { font-style: normal; display: block; font-size: 10px; color: #9A9A95; margin-top: 1px; }
  .oo-paysel.off b { color: #888; }
  .oo-check { width: 17px; height: 17px; border-radius: 99px; background: #2D5A2D; color: #fff; display: grid; place-items: center; font-size: 10px; flex-shrink: 0; }
  .oo-soon { font-size: 8.5px; font-weight: 700; color: #aaa; background: #F3F4F6; border-radius: 99px; padding: 3px 8px; flex-shrink: 0; }
  .oo-totals { margin: 11px 14px 0; padding-top: 9px; border-top: 1px solid #F0EBE3; display: flex; flex-direction: column; gap: 4px; }
  .oo-totals > div { display: flex; justify-content: space-between; font-size: 11px; color: #888; }
  .oo-totals .tot { border-top: 1px solid #F0EBE3; padding-top: 6px; margin-top: 2px; }
  .oo-totals .tot span { font-size: 12px; }
  .oo-totals .tot b { font-size: 15px; font-weight: 900; color: #1A1A1A; }
  .oo-place { display: block; width: calc(100% - 28px); margin: 13px 14px 0; padding: 13px; border-radius: 14px; border: 0; background: linear-gradient(135deg,#1F3B1F,#2D5A2D); color: #fff; font-size: 12.5px; font-weight: 800; cursor: default; }

  /* ---------- Hero: phone + floating kitchen card ---------- */
  .oo-hero-media { position: relative; display: flex; justify-content: center; align-items: center; min-height: 500px; }
  .oo-hero-phone { transform: scale(1.42); transform-origin: center; }
  .oo-hero-float { position: absolute; left: clamp(2px, 1.8vw, 24px); bottom: 54px; width: 226px; margin: 0; z-index: 3; }
  .oo-korder { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 30px 55px -26px rgba(20,40,20,.55); padding: 13px 14px 12px; }
  .oo-korder::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #C2522B; }
  .oo-korder-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .oo-badge { font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 7px; border-radius: 99px; }
  .oo-badge.dine { background: #EEF2FF; color: #3730A3; }
  .oo-lane { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; color: #B45309; background: #FEF3C7; border: 1px solid #FDE68A; border-radius: 99px; padding: 2px 8px; }
  .oo-korder-id { margin-top: 8px; display: flex; align-items: baseline; gap: 6px; }
  .oo-korder-id b { font-size: 14px; font-weight: 800; color: var(--ink); }
  .oo-korder-id span { font-size: 9.5px; color: var(--ink-4); }
  .oo-korder-items { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
  .oo-korder-items li { font-size: 11px; color: var(--ink-2); }
  .oo-korder-items i { font-style: normal; font-weight: 700; color: var(--ink); margin-right: 5px; }
  .oo-korder-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line-3); }
  .oo-pay { font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #92400E; background: #FEF3C7; border-radius: 99px; padding: 3px 8px; }
  .oo-accept { border: 0; border-radius: 99px; background: var(--forest); color: #fff; font-size: 10.5px; font-weight: 700; padding: 6px 11px; cursor: default; }
  @media (max-width: 920px) { .oo-hero-media { min-height: 0; padding: 26px 0 12px; } .oo-hero-phone { transform: scale(1.2); } .oo-hero-float { left: 50%; transform: translateX(-250px); bottom: 22px; } }
  @media (max-width: 680px) { .oo-phone { width: min(244px, 100%); } .oo-screen { aspect-ratio: 9 / 17.2; } }
  @media (max-width: 520px) { .oo-hero-phone { transform: scale(1); } .oo-hero-float { display: none; } }

  /* ---------- App / browser frame (portal screens) ---------- */
  .oo-app { width: 100%; border-radius: 15px; overflow: hidden; border: 1px solid rgba(31,59,31,.12); background: #fff; box-shadow: 0 40px 90px -40px rgba(20,40,20,.45), 0 10px 28px -18px rgba(20,40,20,.28); }
  .oo-app-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #EEF3EE; border-bottom: 1px solid var(--line); }
  .oo-app-bar .d { width: 10px; height: 10px; border-radius: 50%; display: block; }
  .oo-app-bar .d.r { background: #FF5F57; } .oo-app-bar .d.y { background: #FFBD2E; } .oo-app-bar .d.g { background: #28C940; }
  .oo-app-ttl { margin-left: 6px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
  .oo-app-btn { margin-left: auto; font-size: 10px; font-weight: 700; color: #fff; background: var(--forest); border-radius: 99px; padding: 5px 11px; }
  .oo-app-bar.dark { background: #10210C; border-bottom: 1px solid rgba(255,255,255,.08); }
  .oo-app-bar.dark .oo-app-ttl { color: rgba(255,255,255,.6); }
  .oo-live-dot { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; color: #fff; }
  .oo-live-dot i { width: 6px; height: 6px; border-radius: 99px; background: #28C940; animation: ooPulse 2s infinite; }
  .oo-app-body { padding: 16px; background: #FAF7F2; }

  /* ---------- QR codes (Step 3) ---------- */
  .oo-qr { display: grid; gap: 1px; background: #fff; border: 1px solid var(--line-2); border-radius: 8px; padding: 6%; }
  .oo-qr span { border-radius: 1px; }
  .oo-qr-counter { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
  .oo-qr-poster { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 13px; text-align: center; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; }
  .oo-qr.big { width: 104px; height: 104px; }
  .oo-qr-cap { font-size: 8.5px; font-weight: 700; letter-spacing: .07em; color: var(--ink-3); margin-top: 10px; }
  .oo-qr-poster b { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 2px; }
  .oo-qr-info h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
  .oo-qr-info p { margin: 5px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); max-width: 300px; }
  .oo-qr-url { display: flex; align-items: center; gap: 8px; margin-top: 11px; padding: 7px 11px; border-radius: 10px; background: var(--mint-3); border: 1px solid var(--line); max-width: 282px; }
  .oo-qr-url span { flex: 1; font-family: var(--mono); font-size: 11px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .oo-qr-url i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ink-3); }
  .oo-qr-stats { display: flex; gap: 8px; margin-top: 11px; }
  .oo-qr-stats div { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--paper); }
  .oo-qr-stats span { display: block; font-size: 9.5px; color: var(--ink-3); }
  .oo-qr-stats b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-top: 1px; }
  .oo-qr-tablehead { display: flex; align-items: flex-end; justify-content: space-between; margin: 16px 2px 11px; }
  .oo-qr-tablehead span { font-size: 11px; font-weight: 600; color: var(--ink-3); }
  .oo-qr-tablehead b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 2px; }
  .oo-qr-count { font-family: var(--mono); font-size: 11px; color: var(--ink-2); background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: 5px 13px; letter-spacing: .06em; }
  .oo-qr-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
  .oo-qr-tile { border: 1px solid var(--line); background: var(--paper); border-radius: 12px; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--shadow-sm); }
  .oo-qr-tile .oo-qr { width: 60px; height: 60px; }
  .oo-qr-tl { font-size: 8px; font-weight: 600; color: var(--ink-3); letter-spacing: .06em; }
  .oo-qr-tile b { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1; }
  @media (max-width: 480px) { .oo-qr-counter { grid-template-columns: 1fr; justify-items: center; text-align: center; } .oo-qr-grid { grid-template-columns: repeat(2,1fr); } }

  /* ---------- Delivery dashboard (Spotlight) ---------- */
  .oo-week { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 15px; flex-wrap: wrap; }
  .oo-week-main { flex: 1; min-width: 150px; }
  .oo-week-main > span { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; color: var(--ink-3); }
  .oo-week-main div { font-size: 12.5px; color: var(--ink-2); margin-top: 3px; }
  .oo-week-main b { font-size: 21px; font-weight: 800; color: var(--ink); }
  .oo-week-main em { font-style: normal; font-size: 11px; font-weight: 700; color: #2D5A2D; margin-left: 4px; }
  .oo-week-st { text-align: right; }
  .oo-week-st span { display: block; font-family: var(--mono); font-size: 9px; color: var(--ink-3); letter-spacing: .06em; }
  .oo-week-st b { font-size: 14px; font-weight: 700; color: var(--ink); }
  .oo-del-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
  .oo-del-list { display: flex; flex-direction: column; gap: 10px; }
  .oo-del-row { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px; }
  .oo-del-row.sel { border-color: var(--sage-3); box-shadow: 0 0 0 2px rgba(45,90,45,.12); }
  .oo-del-top { display: flex; justify-content: space-between; gap: 8px; }
  .oo-del-code { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
  .oo-del-code em { font-style: normal; background: var(--mint-2); color: var(--sage-2); border-radius: 99px; padding: 1px 6px; font-size: 8px; }
  .oo-del-top b { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 4px; }
  .oo-del-top p { margin: 1px 0 0; font-size: 10.5px; color: var(--ink-3); }
  .oo-del-eta { text-align: right; flex-shrink: 0; }
  .oo-del-eta b { font-size: 18px; font-weight: 800; color: var(--ink); }
  .oo-del-eta small { font-size: 9px; font-weight: 600; color: var(--ink-3); margin-left: 1px; }
  .oo-del-eta span { display: block; font-size: 8.5px; color: var(--ink-4); letter-spacing: .04em; }
  .oo-stage { display: flex; gap: 4px; margin: 9px 0; }
  .oo-stage i { height: 4px; border-radius: 99px; background: var(--line-2); flex: 1; }
  .oo-stage i.on { background: var(--sage-2); }
  .oo-del-bot { display: flex; align-items: center; gap: 8px; }
  .oo-del-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; border-radius: 99px; padding: 3px 8px; border: 1px solid; }
  .oo-del-pill.ok { background: var(--mint-2); color: var(--sage-2); border-color: var(--mint); }
  .oo-del-pill.ok i { width: 5px; height: 5px; border-radius: 99px; background: var(--sage-2); }
  .oo-del-pill.late { background: var(--rose-bg); color: var(--rose); border-color: #FBCFD3; }
  .oo-del-pill.late i { width: 5px; height: 5px; border-radius: 99px; background: var(--rose); }
  .oo-del-cour { font-size: 10px; color: var(--ink-3); }
  .oo-del-bot > b { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--ink); }
  .oo-map { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); min-height: 232px; background: #F4F8F4; }
  .oo-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .oo-mk { position: absolute; width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.25); border: 2px solid #fff; }
  .oo-mk.a { left: calc(42% - 11px); top: calc(41% - 11px); background: #2D5A2D; }
  .oo-mk.b { left: calc(61% - 11px); top: calc(62% - 11px); background: #C2522B; }
  .oo-map-kitchen { position: absolute; left: calc(50% + 7px); top: calc(52% - 9px); font-family: var(--mono); font-size: 8px; font-weight: 600; color: var(--forest); background: rgba(255,255,255,.85); border-radius: 5px; padding: 2px 5px; }
  .oo-map-legend { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 9px; background: rgba(255,255,255,.9); border-radius: 8px; padding: 5px 9px; }
  .oo-map-legend span { display: inline-flex; align-items: center; gap: 4px; font-size: 8.5px; font-weight: 600; color: var(--ink-2); }
  .oo-map-legend i { width: 7px; height: 7px; border-radius: 99px; }
  .oo-map-legend i.dash { width: 11px; height: 0; border-top: 1.5px dashed var(--sage-2); border-radius: 0; }
  @media (max-width: 520px) { .oo-del-grid { grid-template-columns: 1fr; } .oo-map { min-height: 200px; } }

  @keyframes ooPulse { 0% { box-shadow: 0 0 0 0 rgba(40,201,64,.5); } 70% { box-shadow: 0 0 0 6px rgba(40,201,64,0); } 100% { box-shadow: 0 0 0 0 rgba(40,201,64,0); } }