/* ============================================================
   骑手端 · 设计系统
   参考：Rider Dashboard（桌面 1024×572，但信息架构按手机单手操作设计）
   语言：浅灰底 / 橙行动色 / 大方角 / 零投影纯描边 / **大字大按钮**
   ────────────────────────────────────────────────────────────
   和前两端的根本区别：
     · 按钮最大（56px），一屏只有一个主动作 —— 移动中、戴手套、抢时间
     · 字号整体更大、次要文字对比度更高 —— 户外强光下要能读
     · 完全不使用投影 —— 扁平，减少视觉噪声
   类名统一 r- 前缀。禁止引用顾客端(c-)或商家端(m-)的类。
   ============================================================ */

:root {
  --r-bg:      #F4F5F4;
  --r-surface: #FFFFFF;
  --r-line:    #E4E6E4;
  --r-text:    #1F1F1F;
  --r-text-2:  #5A5A5A;    /* 比顾客端的 #9A9A9A 深得多：户外可读 */
  --r-text-3:  #8A8A8A;

  --r-primary:       #D08A38;   /* 实测行动橙 */
  --r-primary-press: #B8762B;
  --r-primary-weak:  #FBEEDC;

  --r-success: #3F8F5F;  --r-success-bg: #E3F1E8;
  --r-danger:  #B4232A;  --r-danger-bg:  #FBE3E3;
  --r-warning: #8A5B00;  --r-warning-bg: #FCEFCB;

  --r-card:  10px;
  --r-btn:   10px;
  --r-input: 10px;
  --r-pill:  999px;

  --fs-1: 22px; --fs-2: 18px; --fs-3: 17px;
  --fs-4: 15px; --fs-5: 14px; --fs-6: 13px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 28px;
}

.r-page {
  min-height: 100vh;
  background: var(--r-bg);
  color: var(--r-text);
  font-size: var(--fs-4);
  padding: var(--sp-4);
}

/* ── 顶栏：在线状态 + 消息，一眼可见 ── */
.r-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: var(--r-card);
}
.r-online { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-5); font-weight: 600; }
.r-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--r-success); }
.r-dot--off { background: var(--r-text-3); }

/* ── 排版：整体比顾客端大一号 ── */
.r-h1 { font-size: var(--fs-1); font-weight: 700; }
.r-h2 { font-size: var(--fs-2); font-weight: 700; }
.r-h3 { font-size: var(--fs-3); font-weight: 600; }
.r-meta { font-size: var(--fs-5); color: var(--r-text-2); }
.r-big { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* ── 按钮：56px 大方角，一屏一个 ── */
.r-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: 56px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: var(--r-btn);
  background: var(--r-primary);
  color: #fff;
  font-size: var(--fs-3);
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.r-btn:hover  { background: var(--r-primary-press); }
.r-btn:active { transform: scale(.99); }
.r-btn:disabled { background: #E2E2E2; color: #9E9E9E; cursor: not-allowed; transform: none; }

.r-btn--ghost {
  background: #fff;
  border: 2px solid var(--r-line);
  color: var(--r-text);
}
.r-btn--ghost:hover { background: #FAFAFA; }

.r-btn--success { background: var(--r-success); }
.r-btn--success:hover { background: #357A51; }

/* 破坏性动作：描边红字，不让它跟主按钮抢焦点 */
.r-btn--danger {
  background: var(--r-surface);
  border: 2px solid #E9BFC2;
  color: var(--r-danger);
}
.r-btn--danger:hover { background: #FDF3F3; }

.r-btn--sm { height: 40px; font-size: var(--fs-5); width: auto; padding: 0 var(--sp-4); }

/* ── 卡片：10px + 1px 描边，**零投影** ── */
.r-card {
  background: var(--r-surface);
  border: 1px solid var(--r-line);
  border-radius: var(--r-card);
  padding: var(--sp-4);
}
.r-card--flush { padding: 0; overflow: hidden; }
.r-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }

/* 地址行：图标 + 两行文字，地址要够大够清楚 */
.r-addr { display: flex; gap: var(--sp-3); }
.r-addr__icon { color: var(--r-primary); flex: none; margin-top: 2px; }
.r-addr__icon svg { width: 18px; height: 18px; }
.r-addr__label { font-size: var(--fs-6); color: var(--r-text-3); }
.r-addr__value { font-size: var(--fs-3); font-weight: 600; line-height: 1.4; }

/* ── 标签 ── */
.r-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 26px;
  padding: 0 var(--sp-3);
  border-radius: 6px;
  font-size: var(--fs-6);
  font-weight: 600;
  background: var(--r-success-bg);
  color: var(--r-success);
}
.r-chip--warning { background: var(--r-warning-bg); color: var(--r-warning); }
.r-chip--danger  { background: var(--r-danger-bg);  color: var(--r-danger); }
.r-chip--neutral { background: #EDEDED;             color: var(--r-text-2); }

/* ── 分段 Tab（选中白底 + 仅顶部圆角）── */
.r-segmented { display: flex; background: #E6E8E6; border-radius: 10px 10px 0 0; overflow: hidden; }
.r-segmented__item {
  flex: 1;
  padding: 14px var(--sp-3);
  border: 0;
  background: transparent;
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--r-text-2);
  cursor: pointer;
}
.r-segmented__item.is-active { background: #fff; color: var(--r-text); }

/* ── 输入框（大，方便单手点）── */
.r-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-3);
  background: #fff;
  border: 2px solid var(--r-line);
  border-radius: var(--r-input);
  font-size: var(--fs-4);
}
.r-input:focus { outline: none; border-color: var(--r-primary); box-shadow: 0 0 0 3px var(--r-primary-weak); }

/* ── 步进器（骑手端很少用，但保持大点击区）── */
.r-stepper { display: inline-flex; align-items: center; background: #EFEFEF; border-radius: var(--r-input); height: 40px; }
.r-stepper__btn { width: 40px; height: 40px; border: 0; background: transparent; font-size: 18px; cursor: pointer; }
.r-stepper__val {
  min-width: 44px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--r-line);
  border-radius: var(--r-input);
  font-size: var(--fs-4); font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ── 空状态 ── */
.r-empty {
  display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}
.r-empty__icon { width: 52px; height: 52px; color: #C4C7C4; }
.r-empty__title { font-size: var(--fs-3); font-weight: 600; }
.r-empty__desc { font-size: var(--fs-5); color: var(--r-text-2); line-height: 1.6; max-width: 280px; }

/* ── 布局辅助 ── */
.r-row { display: flex; align-items: center; gap: var(--sp-2); }
.r-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.r-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.r-divider { height: 1px; background: var(--r-line); }

/* ============================================================================
   以下是页面实现新增的组件（仍然全部 r- 前缀、零投影）
   上面的设计令牌与既有组件一条都没有改动 —— /rider/design-system 仍然按原样渲染。
   ============================================================================ */

/* ── 外壳：手机优先，桌面居中 520px ── */
.r-shell { width: 100%; max-width: 520px; margin: 0 auto; padding-bottom: 8px; }

/* 作者样式里的 display 会盖过浏览器默认的 [hidden] —— 必须显式兜住 */
.r-page [hidden] { display: none !important; }

/* ── 顶栏：品牌 + 账号入口 ── */
.r-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 2px 0 var(--sp-3);
}
.r-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--r-text);
}
.r-brand__sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--r-text-2);
}
.r-iconlink {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--r-line);
  border-radius: var(--r-btn);
  background: var(--r-surface);
  color: var(--r-text-2);
}
.r-iconlink:hover { color: var(--r-text); border-color: #CFD3CF; }

/* ── 顶部分段导航（整段与「仅顶部圆角」的页内 Tab 区分开）── */
.r-nav {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: var(--sp-4);
  background: #E6E8E6;
  border-radius: var(--r-card);
}
.r-nav__item {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  border-radius: 8px;
  font-size: var(--fs-5);
  font-weight: 700;
  color: var(--r-text-2);
}
.r-nav__item:hover { color: var(--r-text); }
.r-nav__item.is-active { background: var(--r-surface); color: var(--r-text); }
.r-nav__badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--r-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── 在线状态卡片 ── */
.r-hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.r-hero__title { font-size: var(--fs-2); font-weight: 700; line-height: 1.25; }
.r-hero__sub { font-size: var(--fs-6); color: var(--r-text-2); margin-top: 2px; }
.r-dot--live { animation: r-breathe 2.4s ease-in-out infinite; }
@keyframes r-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* 开关（不是分段 Tab）：56×32 的轨道，拇指 26px */
.r-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex: none;
}
.r-switch__track {
  position: relative;
  width: 58px;
  height: 32px;
  flex: none;
  border-radius: var(--r-pill);
  background: #C9CCC9;
  transition: background .18s ease;
}
.r-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform .18s ease;
}
.r-switch[aria-checked="true"] .r-switch__track { background: var(--r-success); }
.r-switch[aria-checked="true"] .r-switch__thumb { transform: translateX(26px); }
.r-switch__text {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--r-text-2);
  min-width: 26px;
  text-align: left;
}
.r-switch[aria-checked="true"] .r-switch__text { color: var(--r-success); }
.r-switch:disabled { cursor: wait; opacity: .7; }

/* 今日统计：三列，26px 数字 */
.r-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}
.r-stat { min-width: 0; }
.r-stat + .r-stat {
  padding-left: var(--sp-3);
  border-left: 1px solid var(--r-line);
}
.r-stat__label {
  margin-top: 1px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--r-text-2);
}
.r-stat__unit { font-size: 13px; font-weight: 700; color: var(--r-text-2); }
/* 今天送过单，数字旁边挂一枚小奖牌贴纸 */
.r-stat--medal .r-big { display: inline-flex; align-items: center; gap: 5px; }
.r-stat__medal {
  width: 26px; height: 26px;
  object-fit: contain;
  transform: rotate(-10deg) translateY(-3px);
  filter: drop-shadow(0 2px 4px rgba(40, 30, 20, .25));
}

/* ── 分段 Tab：未选灰底 / 选中白底 / 只有顶部圆角 ── */
.r-tabs { margin-top: var(--sp-4); }
.r-tabs .r-segmented__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
}
.r-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: #FFFFFF;
  color: var(--r-text-2);
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.r-segmented__item.is-active .r-tabs__count {
  background: var(--r-primary-weak);
  color: #8A5B00;
}
.r-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

/* ── 列表卡片 ── */
.r-order-card { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.r-shop {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: var(--r-btn);
  background: linear-gradient(135deg, var(--r-shop-a, #E8B268), var(--r-shop-b, #B8762B));
  color: #FFFFFF;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
}
.r-shop__name { font-size: var(--fs-3); font-weight: 700; line-height: 1.3; }
.r-order-card__sub { font-size: var(--fs-6); color: var(--r-text-2); margin-top: 2px; }
.r-order-card__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.r-order-card__headtext { flex: 1; min-width: 0; }
.r-order-card__head .r-chip { flex: none; }

/* ── 取 / 送路线（把两段地址视觉上串起来）── */
.r-route { display: flex; gap: 10px; }
.r-route__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 14px;
  flex: none;
  padding-top: 5px;
}
.r-route__dot {
  width: 12px;
  height: 12px;
  flex: none;
  border: 2px solid var(--r-primary);
  border-radius: 50%;
  background: #FFFFFF;
}
.r-route__dot--drop { border-color: var(--r-text); background: var(--r-text); }
.r-route__line {
  width: 2px;
  flex: 1;
  min-height: 16px;
  margin: 4px 0;
  background: var(--r-line);
}
.r-route__body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; }
.r-route__label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--r-text-2);
}
.r-route__val { font-size: var(--fs-3); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.r-route__sub { font-size: var(--fs-6); line-height: 1.45; color: var(--r-text-2); overflow-wrap: anywhere; }

/* ── 卡片底部关键数字：里程 / 件数 / 等待分钟 ── */
.r-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--r-line);
}
.r-kpi { min-width: 0; }
.r-kpi__label { font-size: 12px; font-weight: 600; color: var(--r-text-2); }
.r-kpi .r-big { line-height: 1.15; margin-top: 1px; }
.r-kpi__unit { font-size: var(--fs-5); font-weight: 700; }

.r-actions { display: flex; flex-direction: column; gap: 10px; }
.r-actions--row { flex-direction: row; }
.r-actions--row > * { flex: 1; }

/* ── 页面标题 / 返回 ── */
.r-pagehead { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-4); }
.r-pagehead__eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--r-text-2);
}
.r-pagehead__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.r-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px 0 0;
  border: 0;
  background: transparent;
  font-size: var(--fs-5);
  font-weight: 700;
  color: var(--r-text-2);
  cursor: pointer;
}
.r-back:hover { color: var(--r-text); }

/* ── 链接 / 电话 / 导航按钮 ── */
.r-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-5);
  font-weight: 700;
  color: var(--r-primary-press);
}
.r-link:hover { text-decoration: underline; }
.r-navlink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 var(--sp-3);
  border: 2px solid var(--r-line);
  border-radius: var(--r-btn);
  background: var(--r-surface);
  color: var(--r-text);
  font-size: var(--fs-5);
  font-weight: 700;
  white-space: nowrap;
}
.r-navlink:hover { border-color: #CFD3CF; background: #FAFBFA; }
.r-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--r-line);
}
.r-contact__who { display: flex; align-items: center; gap: 8px; font-size: var(--fs-5); font-weight: 700; }
.r-contact__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── 提示条（错误 / 成功 / 信息）── */
.r-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--r-card);
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1.45;
}
.r-banner svg { flex: none; margin-top: 1px; }
.r-banner--error { background: var(--r-danger-bg); border-color: #F0C4C4; color: #8E1B21; }
.r-banner--success { background: var(--r-success-bg); border-color: #C7E3D2; color: #2C7048; }
.r-banner--info { background: var(--r-primary-weak); border-color: #EFD9B6; color: #7A5217; }
.r-banner--neutral { background: #EFEFEF; border-color: var(--r-line); color: var(--r-text-2); }

/* ── 表单 ── */
.r-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.r-field { display: flex; flex-direction: column; gap: 6px; }
.r-field__label { font-size: var(--fs-5); font-weight: 700; }
.r-field__hint { font-size: 13px; line-height: 1.45; color: var(--r-text-2); }
.r-field__err {
  display: none;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--r-danger);
}
.r-field.is-invalid .r-field__err { display: flex; }
.r-field.is-invalid .r-input,
.r-field.is-invalid .r-select { border-color: var(--r-danger); }
.r-input::placeholder { color: #9A9E9A; }
.r-input--lg { height: 54px; font-size: var(--fs-3); }
.r-inputwrap { position: relative; }
.r-inputwrap .r-input { padding-right: 54px; }
.r-eye {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-input);
  background: transparent;
  color: var(--r-text-2);
  cursor: pointer;
}
.r-eye:hover { background: #F1F2F1; color: var(--r-text); }
.r-fieldrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.r-select {
  width: 100%;
  height: 48px;
  padding: 0 var(--sp-3);
  background: var(--r-surface);
  border: 2px solid var(--r-line);
  border-radius: var(--r-input);
  font-size: var(--fs-4);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #5A5A5A 50%),
                    linear-gradient(135deg, #5A5A5A 50%, transparent 50%);
  background-position: calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.r-select:focus { outline: none; border-color: var(--r-primary); box-shadow: 0 0 0 3px var(--r-primary-weak); }
.r-suffix { position: relative; }
.r-suffix__unit {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  font-size: var(--fs-5);
  font-weight: 700;
  color: var(--r-text-2);
  pointer-events: none;
}
.r-suffix .r-input { padding-right: 46px; }
.r-formfoot { margin-top: var(--sp-2); font-size: var(--fs-5); color: var(--r-text-2); }
.r-formfoot a { font-weight: 700; color: var(--r-primary-press); text-decoration: underline; }

/* ── 登录 / 注册（没有导航，只有品牌与表单）── */
.r-auth { display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-3); }
.r-auth__brand { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.r-auth__hero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--r-line);
  border-radius: var(--r-card);
  background: linear-gradient(155deg, #FBEEDC 0%, #FFFFFF 62%);
}
/* 登录页实拍图：图在下、压一层从透明到深的渐变，标题落在照片底部。
   渐变必须和图片写在同一个 background 里（第一层在上面），
   分成两条规则会被后写的 background-image 顶掉。 */
/* 登录页头图：横向铺到屏幕两边，只在底部收成圆角，
   照片就不再是"页面中间的一张图框"，而是这一屏的背景。
   底部渐变负责把标题托住、并把视线交给下面的表单卡片。 */
.r-auth__hero--photo {
  min-height: 340px;
  margin: -4px calc(var(--sp-4) * -1) 0;
  padding: var(--sp-6) var(--sp-5) calc(var(--sp-6) + 12px);
  justify-content: flex-end;
  border: 0;
  border-radius: 0 0 26px 26px;
  background:
    linear-gradient(180deg,
      rgba(16, 18, 16, .34) 0%,
      rgba(16, 18, 16, .06) 30%,
      rgba(16, 18, 16, .30) 68%,
      rgba(16, 18, 16, .78) 100%),
    center 44% / cover no-repeat var(--r-hero);
  box-shadow: 0 18px 34px -20px rgba(20, 22, 20, .55);
}
.r-auth__hero--photo .r-auth__title { color: #fff; }
.r-auth__hero--photo .r-auth__sub { color: rgba(255, 255, 255, .84); }

.r-auth__title { font-size: 24px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.r-auth__sub { font-size: var(--fs-5); line-height: 1.55; color: var(--r-text-2); }
.r-auth__card { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); }
.r-auth__note { font-size: 13px; line-height: 1.5; color: var(--r-text-2); text-align: center; }
.r-auth__legal { font-size: 12px; line-height: 1.5; color: var(--r-text-3); text-align: center; }

/* ── 订单详情 ── */
.r-detailhead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.r-detailhead__no {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--r-text-2);
  font-variant-numeric: tabular-nums;
}
.r-detailhead__title { font-size: 21px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.r-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-5);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--r-text-2);
}
.r-card__title svg { color: var(--r-primary); }

/* 时间轴 */
.r-timeline { display: flex; flex-direction: column; }
.r-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  padding-bottom: var(--sp-3);
}
.r-timeline__item:last-child { padding-bottom: 0; }
.r-timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 0;
  width: 2px;
  background: var(--r-line);
}
.r-timeline__item.is-done:not(:last-child)::before { background: #BFDCCB; }
.r-timeline__dot {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border: 2px solid #C9CCC9;
  border-radius: 50%;
  background: var(--r-surface);
}
.r-timeline__item.is-done .r-timeline__dot { border-color: var(--r-success); background: var(--r-success); }
.r-timeline__item.is-current .r-timeline__dot { border-color: var(--r-primary); background: var(--r-primary); }
.r-timeline__item.is-cancelled .r-timeline__dot { border-color: var(--r-danger); background: var(--r-danger); }
.r-timeline__label { font-size: var(--fs-5); font-weight: 700; line-height: 1.35; }
.r-timeline__item.is-todo .r-timeline__label { color: var(--r-text-2); font-weight: 600; }
.r-timeline__at {
  font-size: 13px;
  color: var(--r-text-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 1px;
}

/* ── 位置上报面板（参考里没有，必须自己设计）── */
.r-loc { display: flex; flex-direction: column; gap: var(--sp-3); }
.r-loc__state { display: flex; align-items: center; gap: 9px; }
.r-loc__pulse {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--r-success);
}
.r-loc__pulse--off { background: var(--r-text-3); }
.r-loc__pulse--err { background: var(--r-danger); }
.r-loc__pulse.is-live::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--r-success);
  border-radius: 50%;
  animation: r-ping 1.8s ease-out infinite;
}
@keyframes r-ping {
  0% { transform: scale(.55); opacity: .65; }
  100% { transform: scale(1.7); opacity: 0; }
}
.r-loc__status { font-size: var(--fs-3); font-weight: 800; line-height: 1.3; }
.r-loc__detail { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--r-text-2); }
.r-loc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--r-line);
}
.r-loc__grid .r-meta { font-size: 12px; }
.r-loc__val { font-size: var(--fs-5); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── 订单菜品与金额 ── */
.r-items { display: flex; flex-direction: column; gap: 10px; }
.r-item { display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-5); }
.r-item__qty {
  width: 26px;
  flex: none;
  color: var(--r-text-2);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.r-item__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.r-item__price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--r-line);
  font-size: var(--fs-5);
}
.r-totalrow { display: flex; justify-content: space-between; gap: var(--sp-3); color: var(--r-text-2); }
.r-totalrow--grand { font-size: var(--fs-3); font-weight: 800; color: var(--r-text); }
.r-note {
  margin-top: var(--sp-3);
  padding: 12px 14px;
  border-radius: var(--r-input);
  background: #F4F5F4;
  font-size: var(--fs-5);
  line-height: 1.5;
}

/* ── 配送历史 ── */
.r-daygroup { display: flex; flex-direction: column; gap: var(--sp-2); }
.r-daygroup + .r-daygroup { margin-top: var(--sp-4); }
.r-daygroup__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0 2px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--r-text-2);
}
.r-histrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px var(--sp-4);
}
.r-histrow__main { flex: 1; min-width: 0; }
.r-histrow__no {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-6);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--r-text-2);
  font-variant-numeric: tabular-nums;
}
.r-histrow__addr {
  margin-top: 2px;
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.r-histrow__side { flex: none; text-align: right; }
.r-histrow__km { font-size: var(--fs-3); font-weight: 800; font-variant-numeric: tabular-nums; }
.r-histrow__time { font-size: 12px; color: var(--r-text-2); font-variant-numeric: tabular-nums; }
.r-histrow:hover { border-color: #CFD3CF; }

/* ── 设置 ── */
.r-setting { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.r-setting + .r-setting { padding-top: var(--sp-3); border-top: 1px solid var(--r-line); }
.r-setting__label { font-size: var(--fs-4); font-weight: 700; }
.r-setting__hint { font-size: 13px; color: var(--r-text-2); margin-top: 1px; }
.r-account { display: flex; align-items: center; gap: var(--sp-3); }
.r-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  background: var(--r-primary-weak);
  color: #7A5217;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
}
.r-account__name { font-size: var(--fs-3); font-weight: 700; line-height: 1.3; }
.r-account__meta { font-size: 13px; color: var(--r-text-2); }

/* ── 加载骨架 / 转圈 ── */
.r-skel {
  border-radius: 6px;
  background: #E6E8E6;
  animation: r-pulse 1.25s ease-in-out infinite;
}
.r-skel--line { height: 12px; }
.r-skel--title { height: 18px; width: 62%; }
.r-skel--big { height: 26px; width: 54%; }
.r-skel--tile { width: 44px; height: 44px; border-radius: var(--r-btn); }
.r-skel--btn { height: 56px; border-radius: var(--r-btn); }
.r-skelcard { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-4); }
.r-skelrow { display: flex; align-items: center; gap: var(--sp-3); }
.r-skelrow > .r-skel--line { flex: 1; }
@keyframes r-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.r-spinner {
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: r-spin .7s linear infinite;
}
@keyframes r-spin { to { transform: rotate(360deg); } }
.r-btn.is-loading { pointer-events: none; opacity: .85; }
.r-btn.is-loading .r-btn__label { opacity: .75; }

/* ── 空状态 / 错误态的补充：一个可点的下一步 ── */
.r-empty--card { padding: var(--sp-5) var(--sp-4); }
.r-empty__actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; margin-top: var(--sp-1); }
.r-empty__code {
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--r-text);
}

/* ── 同步提示 ── */
.r-sync {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: 12px;
  font-weight: 600;
  color: var(--r-text-2);
}
.r-sync button {
  border: 0;
  background: transparent;
  padding: 6px 2px;
  font-size: 12px;
  font-weight: 800;
  color: var(--r-primary-press);
  cursor: pointer;
}
.r-sync button:hover { text-decoration: underline; }

/* ── 离线提示 ── */
.r-offline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
}
.r-offline__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #EFEFEF;
  color: var(--r-text-2);
}
.r-offline__title { font-size: var(--fs-3); font-weight: 700; }
.r-offline__desc { max-width: 300px; font-size: var(--fs-5); line-height: 1.55; color: var(--r-text-2); }

/* ── Toast（无投影，纯深底）── */
.r-toasts {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(488px, calc(100% - 32px));
}
.r-toast {
  padding: 13px 15px;
  border-radius: var(--r-card);
  background: #1F1F1F;
  color: #FFFFFF;
  font-size: var(--fs-5);
  font-weight: 600;
  line-height: 1.45;
  animation: r-toast-in .18s ease-out;
}
.r-toast--success { background: #2C7048; }
.r-toast--error { background: #8E1B21; }
@keyframes r-toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 页脚 ── */
.r-foot {
  margin-top: var(--sp-6);
  padding-bottom: var(--sp-2);
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--r-text-3);
}

/* ── 焦点环：橙描边，不被抹掉 ── */
.r-page a:focus-visible,
.r-page button:focus-visible,
.r-page [role="switch"]:focus-visible,
.r-page [role="tab"]:focus-visible {
  outline: 2px solid var(--r-primary);
  outline-offset: 2px;
}

/* 大字号：保证 26px 数字在窄屏三列也放得下 */
@media (max-width: 360px) {
  .r-big { font-size: 23px; }
  .r-stat__label { font-size: 11px; }
  .r-fieldrow { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .r-page *, .r-page *::before, .r-page *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}