/* ============================================================
   Gas Station H5 - 公共样式
   字体/颜色 体系参考 shopro，但完全独立
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; -webkit-tap-highlight-color: transparent; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
    background: #f5f6fa;
    color: #333;
    min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ---- 主色 ---- */
:root {
    --c-primary:   #f5713c;   /* 橙红 - 默认主色 */
    --c-primary-light: #fff1ec;
    --c-warn:      #ff9900;
    --c-success:   #4caf50;
    --c-success-light: #edfcee;
    --c-danger:    #e53935;
    --c-text:      #333;
    --c-sub:       #888;
    --c-border:    #eee;
    --c-bg:        #f5f6fa;
    --c-white:     #fff;
    --radius:      10px;
    --c-grad-a:    #f5713c;   /* 渐变起始 */
    --c-grad-b:    #e33d1a;   /* 渐变终止 */
    --c-header-text: #fff;
}

/* ── 主题：淘宝橙 (orange) ── 默认主题，变量已在 :root 定义 */
/* ── 主题：香槟金 (golden) ── */
[data-theme="golden"] {
    --c-primary: #B8860B;
    --c-primary-light: #FFF8E1;
    --c-grad-a:  #E9B461;
    --c-grad-b:  #C6922E;
}
/* ── 主题：美团黄 (yellow) ── */
[data-theme="yellow"] {
    --c-primary: #F5A623;
    --c-primary-light: #FFFDE7;
    --c-grad-a:  #FFC300;
    --c-grad-b:  #F5A623;
}
/* ── 主题：低奢黑 (black) ── */
[data-theme="black"] {
    --c-primary: #484848;
    --c-primary-light: #f5f5f5;
    --c-grad-a:  #484848;
    --c-grad-b:  #2c2c2c;
}
/* ── 主题：活力蓝 (blue) ── */
[data-theme="blue"] {
    --c-primary: #1976d2;
    --c-primary-light: #e3f2fd;
    --c-success-light: #e8f5e9;
    --c-danger:  #e53935;
    --c-grad-a:  #2196f3;
    --c-grad-b:  #1565c0;
}
/* ── 主题：清新绿 (green) ── */
[data-theme="green"] {
    --c-primary: #43a047;
    --c-primary-light: #e8f5e9;
    --c-success-light: #e8f5e9;
    --c-danger:  #e53935;
    --c-grad-a:  #66bb6a;
    --c-grad-b:  #2e7d32;
}
/* ── 主题：尊贵紫 (purple) ── */
[data-theme="purple"] {
    --c-primary: #8e24aa;
    --c-primary-light: #f3e5f5;
    --c-success-light: #e8f5e9;
    --c-danger:  #e53935;
    --c-grad-a:  #ab47bc;
    --c-grad-b:  #6a1b9a;
}
/* ── 主题：中国红 (red) ── */
[data-theme="red"] {
    --c-primary: #c62828;
    --c-primary-light: #ffebee;
    --c-success-light: #e8f5e9;
    --c-danger:  #b71c1c;
    --c-grad-a:  #e53935;
    --c-grad-b:  #b71c1c;
}
/* ── 主题：夜间暗 (dark) ── */
[data-theme="dark"] {
    --c-primary:  #e65100;
    --c-primary-light: #3e2723;
    --c-success-light: #1b3a1b;
    --c-danger:   #ff5722;
    --c-text:     #e0e0e0;
    --c-sub:      #aaa;
    --c-border:   #333;
    --c-bg:       #121212;
    --c-white:    #1e1e1e;
    --c-grad-a:   #bf360c;
    --c-grad-b:   #870000;
}
[data-theme="dark"] body { color: #e0e0e0; }
[data-theme="dark"] .asset-card,
[data-theme="dark"] .func-grid,
[data-theme="dark"] .record-list,
[data-theme="dark"] .gas-card,
[data-theme="dark"] .order-card { background: #1e1e1e; }

/* ── 主题切换组件 ── */
.theme-palette {
    display: flex; gap: 8px; padding: 12px 16px; align-items: center;
}
.theme-dot {
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
    transition: transform .2s, box-shadow .2s; flex-shrink: 0;
    border: 2px solid transparent;
}
.theme-dot:hover { transform: scale(1.15); }
.theme-dot.selected { border-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.3), inset 0 0 0 3px transparent; transform: scale(1.2); }
.theme-dot[data-t="default"],
.theme-dot[data-t="orange"]  { background: linear-gradient(135deg,#f5713c,#e33d1a); }
.theme-dot[data-t="golden"]  { background: linear-gradient(135deg,#E9B461,#C6922E); }
.theme-dot[data-t="yellow"]  { background: linear-gradient(135deg,#FFC300,#F5A623); }
.theme-dot[data-t="black"]   { background: linear-gradient(135deg,#484848,#2c2c2c); }
.theme-dot[data-t="blue"]    { background: linear-gradient(135deg,#2196f3,#1565c0); }
.theme-dot[data-t="green"]   { background: linear-gradient(135deg,#66bb6a,#2e7d32); }
.theme-dot[data-t="purple"]  { background: linear-gradient(135deg,#ab47bc,#6a1b9a); }
.theme-dot[data-t="red"]     { background: linear-gradient(135deg,#e53935,#b71c1c); }
.theme-dot[data-t="dark"]    { background: linear-gradient(135deg,#424242,#212121); }

/* ---- 顶部导航（全局统一） ---- */
.gas-nav {
    position: sticky; top: 0; z-index: 100;
    display: flex; align-items: center;
    height: 48px; padding: 0 16px;
    background: var(--c-primary); color: #fff;
    font-size: 17px; font-weight: 600;
}
.gas-nav .gas-nav-back,
.gas-nav .nav-back {
    font-size: 22px; padding: 0 8px 0 0; line-height: 1; cursor: pointer;
    text-decoration: none; color: inherit; flex-shrink: 0;
}
.gas-nav .gas-nav-title {
    flex: 1; text-align: center; font-size: 17px; font-weight: 700;
    margin-right: 30px;
}

/* 白底导航条（通用） */
.nav-bar {
    position: sticky; top: 0; z-index: 10; background: #fff;
    display: flex; align-items: center; height: 48px; padding: 0 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.nav-bar .nav-back,
.nav-back {
    font-size: 22px; color: var(--c-text); padding: 0 8px 0 0;
    cursor: pointer; text-decoration: none; flex-shrink: 0;
}
.nav-bar .nav-title,
.nav-title {
    flex: 1; text-align: center; font-size: 17px; font-weight: 700;
    color: var(--c-text); margin-right: 30px;
}

/* .nav 变体（order/list 等页面） */
.nav .back {
    font-size: 24px; color: var(--c-text); cursor: pointer;
    padding: 0 8px 0 0; flex-shrink: 0;
}
.nav .title {
    flex: 1; text-align: center; font-size: 17px; font-weight: 700;
    margin-right: 32px;
}

/* page-header 渐变导航 */
.page-header .back {
    font-size: 24px; opacity: .9; cursor: pointer; padding: 4px;
    line-height: 1; text-decoration: none; color: #fff; flex-shrink: 0;
}
.page-header .title {
    font-size: 17px; font-weight: 700; flex: 1;
    text-align: center; margin-right: 32px;
}

/* page-hd 公告列表等 */
.page-hd .back {
    font-size: 20px; cursor: pointer; text-decoration: none;
    color: var(--c-text,#333); padding: 0 8px 0 0; flex-shrink: 0;
}
.page-hd h2 {
    font-size: 17px; font-weight: 700; margin: 0; flex: 1;
    text-align: center; margin-right: 28px;
}

/* ---- 卡片 ---- */
.gas-card {
    background: var(--c-white);
    border-radius: var(--radius);
    margin: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.gas-card-title {
    font-size: 15px; font-weight: 600;
    padding: 14px 14px 0;
    color: var(--c-text);
}

/* ---- 按钮 ---- */
.btn { display: inline-flex; align-items: center; justify-content: center;
    border: none; outline: none; cursor: pointer;
    border-radius: 6px; font-size: 15px; padding: 0 20px; height: 44px;
    transition: opacity .15s; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--c-primary); color: #fff; }
.btn-block { display: flex; width: 100%; }
.btn-danger { background: var(--c-danger); color: #fff; }
.btn-outline { background: transparent; border: 1px solid var(--c-primary); color: var(--c-primary); }

/* ---- 标签 ---- */
.tag { display: inline-block; padding: 2px 7px; border-radius: 4px;
    font-size: 12px; line-height: 1.6; }
.tag-primary { background: #fff3ee; color: var(--c-primary); }
.tag-success { background: #e8f5e9; color: var(--c-success); }
.tag-warn    { background: #fff8e1; color: var(--c-warn); }
.tag-default { background: #f0f0f0; color: var(--c-sub); }
.tag-danger  { background: #fce8e8; color: var(--c-danger); }

/* ---- 倒计时 ---- */
.countdown { display: inline-flex; align-items: center; gap: 3px; }
.countdown-block {
    background: var(--c-danger); color: #fff;
    border-radius: 4px; padding: 2px 5px;
    font-size: 14px; font-weight: 700; min-width: 24px; text-align: center;
}
.countdown-sep { color: var(--c-danger); font-weight: 700; font-size: 15px; }

/* ---- 价格 ---- */
.price { color: var(--c-danger); font-weight: 700; }
.price .unit { font-size: 13px; }
.price .num  { font-size: 24px; }
.price-origin { color: var(--c-sub); font-size: 13px; text-decoration: line-through; }

/* ---- 进度条 ---- */
.progress { background: #ffe0d4; border-radius: 20px; height: 8px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--c-primary); border-radius: 20px;
    transition: width .4s; }

/* ---- 商品类型图标 ---- */
.type-badge { display: inline-flex; align-items: center; gap: 4px;
    background: rgba(245,113,60,.12); color: var(--c-primary);
    border-radius: 4px; padding: 2px 8px; font-size: 12px; }

/* ---- 空态 ---- */
.gas-empty { text-align: center; padding: 60px 20px; color: var(--c-sub); }
.gas-empty .icon { font-size: 52px; margin-bottom: 12px; }

/* ---- Loading ---- */
.gas-loading { text-align: center; padding: 30px; color: var(--c-sub); }
.spin {
    display: inline-block; width: 22px; height: 22px;
    border: 3px solid #ddd; border-top-color: var(--c-primary);
    border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Toast ---- */
.gas-toast {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background: rgba(0,0,0,.72); color: #fff; padding: 10px 20px;
    border-radius: 8px; font-size: 14px; z-index: 9999;
    pointer-events: none; white-space: nowrap;
    transition: opacity .2s;
}

/* ---- 底部安全区 ---- */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 16px); }

/* ---- 分割线 ---- */
.divider { margin: 0 14px; border: none; border-top: 1px solid var(--c-border); }

/* ---- 列表行 ---- */
.info-row { display: flex; justify-content: space-between; align-items: flex-start;
    padding: 10px 14px; font-size: 14px; }
.info-row .label { color: var(--c-sub); min-width: 70px; }
.info-row .value { text-align: right; color: var(--c-text); flex: 1; }

/* ---- 核销码容器 ---- */
.verify-qr { text-align: center; padding: 20px; }
.verify-qr canvas, .verify-qr img { width: 180px; height: 180px; }
.verify-qr .qr-tip { font-size: 12px; color: var(--c-sub); margin-top: 8px; }
.remain-bar { padding: 0 14px 14px; }
.remain-label { display: flex; justify-content: space-between;
    font-size: 13px; color: var(--c-sub); margin-bottom: 6px; }

/* ---- 秒杀卡片 ---- */
.flash-card {
    background: var(--c-white); border-radius: var(--radius);
    margin: 12px; overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.flash-card .card-head {
    background: linear-gradient(135deg, #ff6b2b, #f5713c);
    padding: 12px 14px; color: #fff;
    display: flex; justify-content: space-between; align-items: center;
}
.flash-card .card-head .name { font-size: 16px; font-weight: 700; }
.flash-card .card-body { padding: 12px 14px; }
.flash-card .card-foot {
    padding: 10px 14px; background: #fafafa;
    border-top: 1px solid var(--c-border);
    display: flex; justify-content: space-between; align-items: center;
}

/* ---- Tabs ---- */
.gas-tabs { 
    display: flex; background: var(--c-white);
    border-bottom: 1px solid var(--c-border); position: sticky; top: 48px; z-index: 50;
}
.gas-tab {
    flex: 1; text-align: center; padding: 12px 0; font-size: 14px;
    color: var(--c-sub); cursor: pointer; position: relative;
}
.gas-tab.active { color: var(--c-primary); font-weight: 600; }
.gas-tab.active::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%); width: 30px; height: 3px;
    background: var(--c-primary); border-radius: 2px;
}