/* ========== CSS Reset & Variables ========== */
/* 设计基准：hall-scheme-b 温暖活力风格 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --c-primary:#F97316;--c-primary-light:#FB923C;--c-primary-dark:#EA580C;
  --c-primary-bg:#FFF7ED;--c-bg:#FFEDD5;--c-white:#FFFFFF;
  --c-text:#1C1917;--c-text2:#78716C;--c-text3:#A8A29E;
  --c-success:#22C55E;--c-warning:#F59E0B;--c-danger:#EF4444;
  --c-purple:#8B5CF6;--c-purple-text:#7C3AED;
  --c-border:#FED7AA;--c-border-light:#F5F5F4;
  --radius:20px;--radius-sm:12px;--radius-lg:24px;
  --shadow:0 2px 12px rgba(0,0,0,.04);
  --shadow-md:0 4px 20px rgba(249,115,22,.15);
  --shadow-lg:0 10px 40px rgba(0,0,0,.12);
  --shadow-nav:0 -2px 20px rgba(0,0,0,.06);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
body{font-family:var(--font);background:var(--c-bg);color:var(--c-text);min-height:100vh;-webkit-font-smoothing:antialiased}
input,button,textarea,select{font-family:inherit;font-size:inherit}
button{cursor:pointer;border:none;outline:none;background:none}

/* ========== Layout ========== */
.app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;background:linear-gradient(180deg,#FFF7ED 0%,#F5F5F4 30%)}
.app-header{position:sticky;top:0;z-index:100;background:linear-gradient(135deg,#F97316,#FB923C);color:#fff;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;min-height:56px;border-radius:0 0 24px 24px;box-shadow:0 4px 20px rgba(249,115,22,.25)}
.app-header h1{font-size:20px;font-weight:800;letter-spacing:.5px;text-shadow:0 1px 2px rgba(0,0,0,.1)}
.app-header .back-btn{font-size:20px;background:rgba(255,255,255,.25);color:#fff;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;backdrop-filter:blur(4px);transition:background .2s}
.app-header .back-btn svg{width:22px;height:22px}
.app-header .back-btn:active{background:rgba(255,255,255,.4)}
.app-content{padding:16px 16px calc(72px + env(safe-area-inset-bottom,0px)) 16px}
.app-content.no-pb{padding-bottom:16px}

/* ========== Bottom Nav (Floating Capsule) ========== */
.app-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:56px;background:var(--c-white);border-radius:24px 24px 0 0;display:flex;justify-content:space-around;align-items:flex-start;padding:0 16px;padding-bottom:env(safe-area-inset-bottom,0px);box-shadow:var(--shadow-nav);z-index:200}
.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 14px;height:56px;color:var(--c-text3);font-size:12px;font-weight:600;transition:color .25s;background:none;min-width:48px;text-decoration:none;border-radius:14px;position:relative}
.nav-item.active{color:var(--c-primary)}
.nav-item.active::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:24px;height:3px;background:var(--c-primary);border-radius:2px}
.nav-item svg{width:24px;height:24px;display:block;transition:transform .25s}
.nav-item.active svg{transform:scale(1.05)}
.nav-item span{font-size:11px;line-height:1;font-weight:600}

/* ========== Banner ========== */
.banner{margin:0 0 12px;padding:18px 20px;background:linear-gradient(135deg,#FFF7ED,#FFEDD5);border:2px solid #FED7AA;border-radius:var(--radius);display:flex;align-items:center;gap:12px}
.banner-emoji{font-size:40px;flex-shrink:0}
.banner-text h2{font-size:16px;font-weight:700;color:#C2410C}
.banner-text p{font-size:12px;color:#9A3412;margin-top:2px}

/* ========== Quick Actions ========== */
.quick-actions{display:flex;gap:10px;margin-bottom:14px}
.qa-item{flex:1;background:var(--c-white);border-radius:16px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 2px 8px rgba(249,115,22,.08);cursor:pointer;transition:transform .2s;text-decoration:none;color:inherit}
.qa-item:active{transform:scale(.96)}
.qa-item svg{width:24px;height:24px}
.qa-text{font-size:12px;font-weight:600;color:#44403C}

/* ========== Cards ========== */
.card{background:var(--c-white);border-radius:var(--radius);padding:18px;margin-bottom:12px;box-shadow:var(--shadow)}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.card-header h3{font-size:16px;font-weight:700;color:var(--c-text)}
.coupon-card{display:flex;align-items:center;padding:16px;background:var(--c-white);border-radius:var(--radius);margin-bottom:10px;box-shadow:var(--shadow);position:relative}
.coupon-card::before{content:'';position:absolute;inset:-1px;border-radius:calc(var(--radius) + 1px);padding:1px;background:linear-gradient(135deg,#FED7AA,#FBCFE8);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.5}
.coupon-card:active{transform:scale(.98);transition:transform .2s}
.coupon-card .tag{position:absolute;top:0;left:0;width:4px;height:100%;border-radius:20px 0 0 20px}
.coupon-card .tag.platform{background:var(--c-primary)}
.coupon-card .tag.merchant{background:var(--c-success)}
.coupon-card .tag.user{background:var(--c-purple)}
.coupon-info{flex:1;margin-left:4px}
.coupon-amount{font-size:24px;font-weight:800;color:var(--c-text);line-height:1.2}
.coupon-seller{font-size:13px;color:var(--c-text2);margin-top:4px}
.coupon-seller .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle}
.coupon-seller .dot.green{background:var(--c-success)}
.coupon-seller .dot.blue{background:var(--c-purple)}
.coupon-actions{margin-left:12px}
.coupon-actions .view-btn{padding:8px 22px;background:linear-gradient(135deg,#F97316,#EC4899);color:#fff;border-radius:20px;font-size:13px;font-weight:700;white-space:nowrap;transition:all .2s;box-shadow:0 4px 12px rgba(249,115,22,.3);border:none;cursor:pointer}
.coupon-actions .view-btn:active{transform:scale(.95);opacity:.9}
.coupon-actions .view-btn.disabled{background:var(--c-text3);box-shadow:none}
.status-badge{font-size:12px;padding:4px 12px;border-radius:20px;font-weight:600;display:inline-block}
.status-selling{background:#DCFCE7;color:#166534}
.status-paying{background:#FEF3C7;color:#92400E}
.status-verifying{background:#FED7AA;color:#9A3412}
.status-disputed{background:#FEE2E2;color:#991B1B}
.status-cancelled{background:#E2E8F0;color:#475569}

/* ========== Section Header ========== */
.section-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.section-title{font-size:20px;font-weight:800;color:var(--c-text);flex-shrink:0}

/* ========== Filter Tags ========== */
.filter-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.filter-chip{padding:6px 16px;background:var(--c-white);border:1.5px solid var(--c-border);border-radius:20px;font-size:13px;font-weight:600;color:var(--c-text2);cursor:pointer;transition:all .2s;white-space:nowrap}
.filter-chip.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}

/* ========== Forms ========== */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:14px;font-weight:600;color:var(--c-text2);margin-bottom:6px}
.form-input{width:100%;padding:12px 14px;border:1.5px solid var(--c-border);border-radius:var(--radius-sm);font-size:15px;color:var(--c-text);background:var(--c-white);transition:border-color .2s}
.form-input:focus{border-color:var(--c-primary);outline:none;box-shadow:0 0 0 3px rgba(249,115,22,.15)}
.form-input::placeholder{color:var(--c-text3)}
textarea.form-input{resize:vertical;min-height:60px}
select.form-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2378716C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}

/* ========== Buttons ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border-radius:20px;font-size:15px;font-weight:600;transition:all .2s;cursor:pointer;border:none}
.btn:active{transform:scale(.98)}
.btn-primary{width:100%;background:linear-gradient(135deg,#F97316,#EC4899);color:#fff;font-size:16px;font-weight:700;padding:14px;border-radius:20px;text-align:center;box-shadow:0 4px 12px rgba(249,115,22,.3)}
.btn-primary:active{opacity:.9;transform:scale(.97)}
.btn-success{background:var(--c-success);color:#fff;border-radius:20px;font-weight:600}
.btn-danger{background:var(--c-danger);color:#fff;border-radius:20px;font-weight:600}
.btn-outline{background:transparent;border:1.5px solid var(--c-border);color:var(--c-text2);border-radius:20px}
.btn-sm{padding:8px 16px;font-size:13px;border-radius:20px}
.btn-block{width:100%;display:block;text-align:center}

/* ========== Login ========== */
.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(180deg,#FFF7ED 0%,#FFFFFF 60%);padding:40px 24px}
.login-logo{text-align:center;margin-bottom:36px}
.login-logo .icon{width:76px;height:76px;background:linear-gradient(135deg,#F97316,#FB923C);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;overflow:hidden;box-shadow:0 6px 20px rgba(249,115,22,.28)}
.login-logo .icon svg{width:100%;height:100%;display:block}
.login-logo h1{color:#1C1917;font-size:28px;font-weight:800;letter-spacing:1px}
.login-logo p{color:#9A3412;font-size:14px;margin-top:4px}
.login-card{width:100%;background:var(--c-white);border-radius:24px;padding:28px 24px;box-shadow:var(--shadow-lg)}
.login-card h2{font-size:20px;font-weight:800;margin-bottom:6px;color:var(--c-text)}
.login-card .subtitle{font-size:13px;color:var(--c-text3);margin-bottom:24px}
.login-role-tabs{display:flex;gap:8px;margin-bottom:20px;background:var(--c-border-light);padding:4px;border-radius:var(--radius-sm)}
.login-role-tab{flex:1;text-align:center;padding:8px;border-radius:8px;font-size:14px;font-weight:500;color:var(--c-text2);transition:all .2s;cursor:pointer;border:none;background:none}
.login-role-tab.active{background:var(--c-white);color:var(--c-primary);box-shadow:var(--shadow);font-weight:600}
.login-actions{margin-top:4px;display:flex;justify-content:center}
.login-actions a{font-size:13px;color:var(--c-primary);text-decoration:none}

/* ========== Toast ========== */
.toast-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999;pointer-events:none}
.toast{background:rgba(28,25,23,.88);color:#fff;padding:12px 24px;border-radius:24px;font-size:14px;text-align:center;margin-bottom:8px;animation:toastIn .3s ease;pointer-events:auto}
@keyframes toastIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}

/* ========== Modal ========== */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:150;padding:24px}
.modal-card{background:var(--c-white);border-radius:var(--radius-lg);width:100%;max-width:360px;max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-lg)}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--c-border);display:flex;justify-content:space-between;align-items:center}
.modal-header h3{font-size:17px;font-weight:700;color:var(--c-text)}
.modal-body{padding:20px}
.modal-footer{padding:16px 20px;display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--c-border)}

/* ========== Payment ========== */
.blue-text{color:#C2410C;font-weight:600;margin:12px 0;padding:12px;background:#FFF7ED;border-radius:var(--radius-sm);font-size:14px;text-align:center;border:1px solid #FED7AA}
.payment-proof{width:100%;max-height:300px;object-fit:contain;border-radius:var(--radius-sm);margin-top:12px}
.qrcode-box{width:200px;height:200px;margin:16px auto;background:var(--c-border-light);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px dashed var(--c-border)}
.qrcode-box img{width:100%;height:100%;object-fit:contain}

/* ========== Trade records ========== */
.trade-record{padding:16px;background:var(--c-white);border-radius:var(--radius);margin-bottom:10px;box-shadow:var(--shadow)}
.trade-record .value{font-size:20px;font-weight:800;color:var(--c-text)}
.trade-record .meta{font-size:12px;color:var(--c-text3);margin-top:4px}

/* ========== Auth status ========== */
.auth-status-card{padding:24px;text-align:center;background:var(--c-white);border-radius:var(--radius);margin-bottom:16px;box-shadow:var(--shadow)}
.auth-status-card .icon{font-size:48px;margin-bottom:12px}

/* ========== Tabs ========== */
.tabs{display:flex;gap:4px;background:var(--c-border-light);padding:4px;border-radius:var(--radius-sm);margin-bottom:16px}
.tab{flex:1;text-align:center;padding:10px;border-radius:8px;font-size:14px;font-weight:500;color:var(--c-text2);transition:all .2s;cursor:pointer;border:none;background:none}
.tab.active{background:var(--c-white);color:var(--c-primary);box-shadow:var(--shadow);font-weight:600}

/* ========== Stat grid ========== */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.stat-item{background:var(--c-white);padding:18px 16px;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow)}
.stat-item .val{font-size:28px;font-weight:800;color:var(--c-primary)}
.stat-item .lbl{font-size:12px;color:var(--c-text3);margin-top:4px}

/* ========== Empty ========== */
.empty{padding:40px 20px;text-align:center;color:var(--c-text3)}
.empty .icon{font-size:48px;margin-bottom:12px}

/* ========== Upload ========== */
.upload-area{border:2px dashed var(--c-border);border-radius:var(--radius);padding:32px;text-align:center;color:var(--c-text3);transition:all .2s;cursor:pointer}
.upload-area:active{border-color:var(--c-primary);background:var(--c-primary-bg)}

/* ========== Platform cards ========== */
.platform-card{padding:16px;background:var(--c-white);border-radius:var(--radius);margin-bottom:10px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center}
.platform-card .name{font-size:16px;font-weight:700;color:var(--c-text)}
.platform-card .info{font-size:13px;color:var(--c-text2);margin-top:2px}

/* ========== Grid button menu ========== */
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.menu-grid .menu-btn{background:var(--c-white);border:1.5px solid var(--c-border);border-radius:var(--radius);padding:18px 16px;font-size:15px;color:var(--c-text);text-align:center;cursor:pointer;box-shadow:var(--shadow);transition:all .2s;text-decoration:none;display:block;font-weight:600}
.menu-grid .menu-btn:active{background:var(--c-primary-bg);border-color:var(--c-primary)}
.menu-grid.col3{grid-template-columns:1fr 1fr 1fr}
.menu-grid.col3 .menu-btn{font-size:13px;padding:14px 8px}

/* ========== Offline badge ========== */
.offline-badge{display:inline-block;padding:2px 10px;background:#FEF3C7;color:#92400E;border-radius:10px;font-size:11px;margin-left:8px;font-weight:600}

/* ========== C-Tag System (hall-scheme-b style) ========== */
.c-tag{padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;display:inline-block}
.c-tag-platform{background:#FFF7ED;color:#EA580C}
.c-tag-merchant{background:#ECFDF5;color:#059669}
.c-tag-user{background:#F5F3FF;color:#7C3AED}
.c-tag-method{background:#F5F5F4;color:#78716C}
.c-tag-status{padding:3px 0;display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600}
.c-tag-status.green{color:#22C55E}
.c-tag-status.yellow{color:#F59E0B}
.c-tag-status.red{color:#EF4444}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%}
.status-dot.green{background:#22C55E;box-shadow:0 0 6px rgba(34,197,94,.5)}
.status-dot.yellow{background:#F59E0B;box-shadow:0 0 6px rgba(245,158,11,.5)}
.status-dot.red{background:#EF4444;box-shadow:0 0 6px rgba(239,68,68,.5)}

/* ========== Mobile ========== */
@media(max-width:360px){
  .coupon-amount{font-size:20px}
  .btn-primary{font-size:14px;padding:12px}
  .login-card{padding:20px 16px}
}