/* =========================================================
   豆泡领券平台 · Design Tokens & Shared Components
   风格参考：米米外卖（暖色渐变 / 卡片式 / 金刚区 / 红包券）
   ========================================================= */

:root{
  /* —— 品牌色 —— */
  --brand-1:#FFC42E;            /* 金 */
  --brand-2:#FF8A2B;            /* 橙 */
  --brand-3:#FF4E2B;            /* 红橙 */
  --brand-grad:linear-gradient(135deg,#FFC42E 0%,#FF8A2B 52%,#FF4E2B 100%);
  --brand-grad-soft:linear-gradient(135deg,#FFE9B8 0%,#FFD9A6 100%);
  --brand:#FF7A2E;
  --brand-dark:#F25B12;
  --brand-ink:#7A3B00;

  /* —— 功能色 —— */
  --hot:#FF3B30;                /* 价格 / 热门 */
  --hot-soft:#FFF0EE;
  --success:#22C55E;
  --success-soft:#EAFBF0;
  --warning:#F5A524;
  --warning-soft:#FFF7E6;
  --info:#3B82F6;
  --info-soft:#EEF4FF;

  /* —— 中性色 —— */
  --ink-1:#16181D;
  --ink-2:#4A4F58;
  --ink-3:#8A9099;
  --ink-4:#B9BEC6;
  --line:#EDEFF3;
  --line-2:#F5F6F8;
  --bg:#F5F6F9;
  --bg-2:#FAFBFC;
  --card:#FFFFFF;
  --mask:rgba(16,18,24,.45);

  /* —— 尺寸 / 圆角 / 阴影 —— */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-full:999px;
  --sd-1:0 2px 8px rgba(23,26,33,.05);
  --sd-2:0 6px 20px rgba(23,26,33,.08);
  --sd-3:0 14px 40px rgba(23,26,33,.12);
  --sd-brand:0 8px 22px rgba(255,122,46,.32);

  --ff:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ff-num:"SF Pro Display","DIN Alternate","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--ff);
  color:var(--ink-1);
  background:var(--bg);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
input,textarea,select{font-family:inherit;outline:none;}
ul,li{list-style:none;margin:0;padding:0;}
img{display:block;max-width:100%;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:#D9DDE4;border-radius:99px;}
::-webkit-scrollbar-track{background:transparent;}

/* =============== 通用原子 =============== */
.num{font-family:var(--ff-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.muted{color:var(--ink-3);}
.bold{font-weight:700;}
.row{display:flex;align-items:center;}
.between{display:flex;align-items:center;justify-content:space-between;}
.col{display:flex;flex-direction:column;}
.gap4{gap:4px}.gap6{gap:6px}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}
.grow{flex:1;}
.center{display:flex;align-items:center;justify-content:center;}
.hidden{display:none !important;}

/* 文字渐变（品牌） */
.txt-grad{
  background:var(--brand-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* =============== 按钮 =============== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:40px;padding:0 18px;border-radius:var(--r-full);
  font-size:14px;font-weight:600;color:#fff;background:var(--brand-grad);
  box-shadow:var(--sd-brand);transition:transform .12s ease,filter .12s ease,box-shadow .12s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99);}
.btn:hover{filter:brightness(1.03);}
.btn.ghost{background:#fff;color:var(--brand-dark);border:1.5px solid #FFD9C0;box-shadow:none;}
.btn.ghost:hover{background:#FFF7F1;}
.btn.plain{background:var(--line-2);color:var(--ink-2);box-shadow:none;}
.btn.hot{background:linear-gradient(135deg,#FF6A4D,#FF3B30);box-shadow:0 8px 22px rgba(255,59,48,.3);}
.btn.sm{height:32px;padding:0 14px;font-size:13px;}
.btn.xs{height:26px;padding:0 12px;font-size:12px;border-radius:var(--r-full);}
.btn.lg{height:48px;font-size:16px;padding:0 26px;}
.btn.block{width:100%;}
.btn.icon{width:40px;padding:0;}
.btn[disabled]{opacity:.5;pointer-events:none;}

/* =============== 卡片 =============== */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sd-1);}
.card.flat{box-shadow:none;border:1px solid var(--line);}

/* =============== 标签 / 徽标 =============== */
.tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px;border-radius:6px;font-size:11px;font-weight:600;line-height:1;}
.tag.hot{background:var(--hot-soft);color:var(--hot);}
.tag.brand{background:#FFF3E6;color:var(--brand-dark);}
.tag.green{background:var(--success-soft);color:#12924F;}
.tag.blue{background:var(--info-soft);color:#2563EB;}
.tag.gray{background:var(--line-2);color:var(--ink-3);}
.tag.solid-hot{background:linear-gradient(135deg,#FF6A4D,#FF3B30);color:#fff;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 2px #fff;}

/* 角标（红点） */
.badge{position:absolute;top:-4px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  background:var(--hot);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;}

/* =============== 价格 =============== */
.price{color:var(--hot);font-weight:800;font-family:var(--ff-num);}
.price .cny{font-size:.72em;margin-right:1px;}
.price .dec{font-size:.78em;}
.price-old{color:var(--ink-4);text-decoration:line-through;font-size:12px;}

/* =============== 分段控件 =============== */
.seg{display:inline-flex;background:var(--line-2);border-radius:var(--r-full);padding:3px;}
.seg button{height:32px;padding:0 16px;border-radius:var(--r-full);font-size:13px;font-weight:600;color:var(--ink-3);}
.seg button.active{background:#fff;color:var(--brand-dark);box-shadow:var(--sd-1);}

/* =============== 表单 =============== */
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12.5px;font-weight:600;color:var(--ink-2);}
.input{
  height:38px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:0 12px;font-size:13.5px;background:#fff;color:var(--ink-1);transition:border-color .15s;
}
.input:focus{border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(255,138,43,.12);}
textarea.input{height:auto;padding:10px 12px;resize:vertical;}
select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 8l3-3.5' fill='none' stroke='%238A9099' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
.switch{position:relative;width:44px;height:24px;border-radius:99px;background:var(--ink-4);transition:background .2s;flex:none;}
.switch.on{background:var(--brand-2);}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.2);}
.switch.on::after{left:22px;}

/* =============== 空态 =============== */
.empty{padding:48px 20px;text-align:center;color:var(--ink-3);}
.empty .ico{font-size:44px;opacity:.5;margin-bottom:10px;}

/* =============== Toast =============== */
#toast-wrap{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);z-index:9000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{background:rgba(22,24,29,.9);color:#fff;padding:10px 18px;border-radius:var(--r-full);font-size:13.5px;
  box-shadow:var(--sd-3);animation:toastIn .25s ease;max-width:78vw;}
@keyframes toastIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* =============== 通用动画 =============== */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.fade-up{animation:fadeUp .3s ease both;}
@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
.pop{animation:pop .22s cubic-bezier(.34,1.4,.64,1) both;}

/* 骨架屏 */
.skeleton{background:linear-gradient(90deg,#F1F3F6 25%,#E8EBF0 37%,#F1F3F6 63%);background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:8px;}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* 滚动条隐藏（横向滑动区） */
.no-bar{scrollbar-width:none;-ms-overflow-style:none;}
.no-bar::-webkit-scrollbar{display:none;}