/* ================================================================
 *  优 惠 券 工 作 台  ·  样 式
 *  适配所有手机屏幕 · 简洁高端 · 无广告
 * ============================================================ */
:root {
  --bg: #f5f6f8;
  --card: #fff;
  --text: #1f2430;
  --muted: #8a92a6;
  --brand: #ff8a00;
  --meituan: #ffc300;
  --meituan-o: #ff8000;
  --taobao: #ff5000;
  --hot: #ff4d4f;
  --green: #43e97b;
  --pink: #ff6b9d;
  --radius: 14px;
  --shadow: 0 4px 18px rgba(31,36,48,.08);
  --safe-top: env(safe-area-inset-top,0px);
  --safe-bottom: env(safe-area-inset-bottom,0px);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5;
  padding-top:52px; padding-bottom:80px; max-width:980px; margin:0 auto;
  overflow-x:hidden;
}
a{ text-decoration:none; color:inherit; }
button{ border:none; background:none; cursor:pointer; font:inherit; color:inherit; }
img{ display:block; max-width:100%; }
input{ font:inherit; }

/* ─────────── ① 顶栏 ─────────────── */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:10px;
  padding:calc(8px + var(--safe-top)) 12px 8px;
  background:linear-gradient(135deg,var(--meituan),var(--brand));
  color:#fff; box-shadow:0 2px 12px rgba(0,0,0,.12);
  max-width:980px; margin:0 auto;
}
.topbar-logo{ display:flex; align-items:center; gap:6px; flex:none; }
.logo-icon{ font-size:20px; }
.logo-text{ font-size:14px; font-weight:700; white-space:nowrap; }
.topbar-search{
  flex:1; display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.25); border-radius:999px; padding:6px 12px;
}
.tb-search-icon{ font-size:13px; opacity:.8; }
.topbar-search input{
  flex:1; border:none; background:transparent; outline:none;
  color:#fff; font-size:13px; min-width:0;
}
.topbar-search input::placeholder{ color:rgba(255,255,255,.7); }
.topbar-mine{ font-size:22px; line-height:1; flex:none; padding:2px; }

/* ─────────── ② 轮播 ─────────────── */
.carousel{
  position:relative; margin:12px 12px 8px; border-radius:var(--radius); overflow:hidden;
  height:140px; box-shadow:var(--shadow);
}
.carousel-track{ display:flex; height:100%; transition:transform .4s ease; }
.carousel-slide{
  flex:0 0 100%; display:flex; flex-direction:column; justify-content:center;
  padding:20px; color:#fff; position:relative; cursor:pointer;
}
.carousel-slide .slide-title{ font-size:20px; font-weight:800; margin-bottom:4px; }
.carousel-slide .slide-subtitle{ font-size:13px; opacity:.9; }
.carousel-slide .slide-emoji{ position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:48px; opacity:.6; }
.carousel-dots{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px;
}
.carousel-dots span{
  width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.5); transition:all .25s;
}
.carousel-dots span.active{ width:22px; border-radius:4px; background:#fff; }

/* ─────────── ③ 快捷导航 ─────────── */
.quick-nav{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  margin:8px 12px 12px;
}
.qn-item{
  background:var(--card); border-radius:14px; padding:12px 0;
  text-align:center; box-shadow:var(--shadow); cursor:pointer; transition:transform .12s;
}
.qn-item:active{ transform:scale(.95); }
.qn-emoji{ font-size:24px; display:block; margin-bottom:4px; }
.qn-label{ font-size:12px; font-weight:700; }

/* ─────────── 统一板块 ─────────── */
.section{ margin:0 12px 14px; }
.section-header{
  display:flex; align-items:center; gap:8px; padding:0 2px 8px;
}
.section-emoji{ font-size:18px; }
.section-header h2{ font-size:16px; font-weight:800; flex:1; }
.section-badge{
  font-size:10px; font-weight:700; color:#fff; background:var(--brand);
  padding:2px 8px; border-radius:999px;
}
.tb-badge{ background:var(--taobao); }
.countdown-badge{ font-size:11px; font-weight:600; color:var(--hot); }

/* ─────────── ④ 美团 banner ──────── */
.meituan-banner, .tb-banner{
  background:linear-gradient(135deg,var(--meituan),var(--brand));
  color:#fff; border-radius:14px; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
  box-shadow:0 4px 14px rgba(255,138,0,.28);
}
.tb-banner{ background:linear-gradient(135deg,var(--taobao),#ff0036); box-shadow:0 4px 14px rgba(255,80,0,.28); }
.mt-banner-left h3{ font-size:16px; font-weight:800; }
.mt-banner-left p{ font-size:12px; opacity:.9; margin-top:2px; }
.mt-banner-right{ text-align:right; font-size:26px; font-weight:800; letter-spacing:-1px; flex:none; }
.mt-banner-right small{ display:block; font-size:11px; font-weight:400; opacity:.8; }
.banner-btn{
  background:rgba(255,255,255,.25); color:#fff; font-weight:700;
  padding:6px 14px; border-radius:999px; font-size:12px; border:1px solid rgba(255,255,255,.3);
}

/* ─────────── 美团 tabs ──────────── */
.mt-tabs, .tb-tabs{
  display:flex; gap:6px; overflow-x:auto; margin-bottom:10px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.mt-tabs::-webkit-scrollbar, .tb-tabs::-webkit-scrollbar{ display:none; }
.mt-tab, .tb-tab{
  flex:none; border:1px solid #e6e9f0; background:var(--card);
  color:var(--muted); font-size:12px; font-weight:600; padding:6px 14px;
  border-radius:999px; cursor:pointer; transition:all .15s;
}
.mt-tab:active,.tb-tab:active{ transform:scale(.96); }
.mt-tab.active{ background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 3px 10px rgba(255,138,0,.3); }
.tb-tab.active{ background:var(--taobao); color:#fff; border-color:var(--taobao); }

/* ─────────── 美团卡片网格 ─────────── */
.mt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:380px){ .mt-grid{ grid-template-columns:1fr; } }

.mt-card, .lim-card, .tb-card{
  background:var(--card); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  display:flex; flex-direction:column; transition:transform .12s;
}
.mt-card:active{ transform:translateY(1px); }
.mt-card-top{
  background:linear-gradient(135deg,var(--mc1),var(--mc2));
  color:#fff; padding:12px 12px 10px; position:relative;
}
.mt-card-hot{
  position:absolute; left:-24px; top:10px; background:var(--hot); color:#fff;
  font-size:9px; font-weight:700; padding:2px 28px; transform:rotate(-45deg);
}
.mt-card-amount{ font-size:28px; font-weight:800; line-height:1; }
.mt-card-amount small{ font-size:13px; font-weight:400; }
.mt-card-cond{ font-size:11px; opacity:.8; margin-top:2px; }
.mt-card-body{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.mt-card-title{ font-size:13px; font-weight:700; }
.mt-card-desc{ font-size:11px; color:var(--muted); flex:1; }
.mt-card-countdown{ font-size:10px; color:var(--hot); font-weight:600; }
.mt-card-btn{
  display:block; text-align:center; background:var(--brand); color:#fff;
  font-weight:700; font-size:13px; padding:9px; border-radius:10px; margin-top:4px;
}
.mt-card-btn:active{ filter:brightness(.92); }

/* ─────────── 限时福利 ──────────── */
.limited-section{ background:linear-gradient(135deg,#fff0f0,#fffcf0); border-radius:18px; padding:12px; }
.limited-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(max-width:380px){ .limited-grid{ grid-template-columns:1fr; } }
.lim-card{ padding:14px; background:var(--card); }
.lim-card-top{ display:flex; justify-content:space-between; align-items:center; }
.lim-amount{ font-size:24px; font-weight:800; }
.lim-amount small{ font-size:12px; }
.lim-countdown{ font-size:11px; color:var(--hot); margin:6px 0; font-weight:700; }
.lim-btn{
  display:block; text-align:center; background:var(--hot); color:#fff;
  font-weight:700; font-size:12px; padding:7px; border-radius:8px;
}

/* ─────────── 淘宝横向滑动 ─────────── */
.tb-scroll-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin-top:4px; }
.tb-scroll-wrap::-webkit-scrollbar{ display:none; }
.tb-scroll{ display:flex; gap:10px; padding-bottom:4px; }
.tb-card{
  flex:0 0 170px; min-width:170px; padding:12px;
  background:linear-gradient(160deg,#fff5f0,#fff);
  border:1px solid #ffe0d0;
}
.tb-card .mc-hot{
  align-self:flex-start; background:var(--hot); color:#fff; font-size:9px; font-weight:700;
  padding:1px 8px; border-radius:4px; margin-bottom:4px;
}
.tb-card-title{ font-size:13px; font-weight:700; }
.tb-card-desc{ font-size:11px; color:var(--muted); margin:2px 0; }
.tb-card-amount{ font-size:22px; font-weight:800; color:var(--taobao); }
.tb-card-amount small{ font-size:11px; font-weight:400; color:var(--muted); }
.tb-card-btn{
  display:block; text-align:center; background:var(--taobao); color:#fff;
  font-weight:700; font-size:12px; padding:7px; border-radius:8px; margin-top:6px;
}

/* ─────────── 底部 ──────────── */
.app-footer{
  text-align:center; padding:16px 18px 12px; font-size:11px; color:var(--muted); line-height:1.7;
}
.app-footer code{ background:#eceef3; padding:1px 5px; border-radius:4px; }
.footer-muted{ opacity:.75; margin-top:4px; }

/* ─────────── 浮动桌面按钮 ─────────── */
.desktop-float{
  position:fixed; right:12px; bottom:calc(16px + var(--safe-bottom)); z-index:50;
  background:linear-gradient(135deg,var(--brand),#ff5e00); color:#fff;
  font-weight:700; font-size:13px; padding:10px 16px; border-radius:999px;
  box-shadow:0 6px 20px rgba(255,138,0,.4); backdrop-filter:blur(4px);
  display:flex; align-items:center; gap:6px;
}
.desktop-float:active{ transform:scale(.95); }

/* ─────────── 侧边栏 ─────────── */
.sidebar-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.4); opacity:0;
  pointer-events:none; transition:opacity .25s;
}
.sidebar-overlay.open{ opacity:1; pointer-events:auto; }
.sidebar{
  position:fixed; top:0; right:0; bottom:0; z-index:201;
  width:82%; max-width:340px; background:var(--card); padding:calc(24px + var(--safe-top)) 16px 20px;
  box-shadow:-4px 0 24px rgba(0,0,0,.12); transform:translateX(100%);
  transition:transform .3s ease; overflow-y:auto;
}
.sidebar.open{ transform:translateX(0); }
.sidebar-close{ position:absolute; top:calc(10px + var(--safe-top)); right:12px; font-size:20px; color:var(--muted); }
.sidebar h3{ font-size:18px; margin-bottom:14px; }
.sidebar-item{
  display:flex; align-items:center; gap:8px; padding:12px 0;
  border-bottom:1px solid #f0f1f5; cursor:pointer;
}
.si-icon{ font-size:16px; }
.si-text{ flex:1; font-weight:600; font-size:14px; }
.si-arrow{ color:var(--muted); font-size:18px; }
.sidebar-content{ margin-top:12px; font-size:13px; color:var(--muted); line-height:1.8; }

/* ─────────── 弹窗 ─────────── */
.modal-overlay{
  position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{
  position:fixed; bottom:0; left:0; right:0; z-index:301;
  background:var(--card); border-radius:20px 20px 0 0;
  max-height:85vh; overflow-y:auto; transform:translateY(100%); transition:transform .3s ease;
}
.modal.open{ transform:translateY(0); }
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 8px; position:sticky; top:0; background:var(--card); z-index:1;
}
.modal-header h3{ font-size:16px; }
.modal-close{ font-size:18px; color:var(--muted); padding:4px; }
.modal-body{ padding:0 16px 30px; }
.modal-warn{
  background:#fff3cd; color:#856404; border-radius:10px;
  padding:10px 12px; font-size:12px; line-height:1.6; margin-bottom:12px;
}
.modal-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.modal-tab{
  flex:none; border:1px solid #e0e3ea; color:var(--muted); font-size:12px;
  font-weight:600; padding:5px 11px; border-radius:999px; cursor:pointer; background:#f9fafb;
}
.modal-tab.active{ background:var(--brand); color:#fff; border-color:var(--brand); }
.tutorial-step{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:10px;
  font-size:13px; color:var(--text);
}
.tutorial-num{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--brand); color:#fff; display:flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:700;
}
.tutorial-text{ flex:1; }

/* ─────────── Toast ─────────── */
.toast{
  position:fixed; left:50%; top:40%; transform:translate(-50%,-50%) scale(.9);
  background:rgba(31,36,48,.92); color:#fff; padding:10px 18px; border-radius:12px;
  font-size:13px; font-weight:600; z-index:400; opacity:0; pointer-events:none;
  transition:opacity .2s,transform .2s;
}
.toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ─────────── 轻量化载入动画 ─────────── */
@keyframes fadeUp{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.section{ animation:fadeUp .4s ease both; }
#taobao{ animation-delay:.15s; }

/* ─────────── 苹果横屏刘海安全区 ─────────── */
@media (display-mode:standalone){
  body{ padding-top:calc(52px + var(--safe-top)); }
}