/* ================================================================
   app.css — Hots Luxury Dating Platform
   Theme: Dark + Gold + Rose
   ================================================================ */

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font:16px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#e0d5c1;background:#0d0a0b;-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
input,button{font:inherit;outline:none;border:none}
ul{list-style:none}

/* ── Layout ── */
#app{max-width:480px;margin:0 auto;min-height:100vh;position:relative;overflow:hidden;background:#0d0a0b}
.view{position:absolute;top:0;left:0;right:0;bottom:56px;overflow-y:auto;background:#0d0a0b;-webkit-overflow-scrolling:touch}
.view.hidden{display:none!important}
#view-profile,#view-cs,#view-login,#view-register{bottom:0;z-index:100;background:#0d0a0b}

/* ── Tabbar ── */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:56px;background:linear-gradient(0deg,#0a0708,#1a1214);display:flex;border-top:1px solid rgba(232,184,145,.1);z-index:200;backdrop-filter:blur(10px)}
.tab-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:rgba(224,213,193,.4);cursor:pointer;transition:all .3s}
.tab-item.active{color:#e8b891}
.tab-icon{width:22px;height:22px;fill:none;stroke:rgba(224,213,193,.4);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:2px;transition:all .3s}
.tab-item.active .tab-icon{stroke:#e8b891}

/* ── Header ── */
.page-header{display:flex;align-items:center;justify-content:center;height:48px;background:linear-gradient(180deg,#1a1214,#0d0a0b);color:#e8b891;padding:0 16px;position:relative;border-bottom:1px solid rgba(232,184,145,.06)}
.page-header .title{font-size:17px;font-weight:700;letter-spacing:2px}
.page-header .left-btn{position:absolute;left:12px;top:50%;transform:translateY(-50%);cursor:pointer;font-size:20px;color:#e0d5c1;display:flex;align-items:center;gap:4px}
.page-header .right-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;width:32px;height:32px}
.cs-bubble{color:#c8956c!important;transition:color .2s}
.cs-bubble:hover{color:#e8b891!important}

/* ── Cards ── */
.section{padding:16px}
.section-title{font-size:16px;font-weight:700;color:#e8b891;margin-bottom:12px;display:flex;align-items:center;gap:8px;letter-spacing:.5px}
.section-badge{background:linear-gradient(135deg,#c8956c,#e8b891);color:#0d0a0b;font-size:10px;padding:3px 10px;border-radius:8px 0;font-weight:700}

/* ── Home Swiper ── */
.swiper{position:relative;overflow:hidden;border-radius:0}
.swiper-track{display:flex;transition:transform .5s cubic-bezier(.25,.8,.25,1)}
.swiper-slide{flex-shrink:0;width:100%;aspect-ratio:16/9;max-height:240px;background:linear-gradient(135deg,#1a1214,#2d1b1f);display:flex;align-items:center;justify-content:center;color:#e8b891;font-size:22px;font-family:Georgia,serif}
.swiper-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:10px;z-index:2}
.swiper-dot{width:8px;height:8px;border-radius:50%;background:rgba(232,184,145,.4);cursor:pointer;transition:all .3s;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.swiper-dot.active{background:#e8b891;width:24px;border-radius:4px}

/* ── Notice ── */
.notice-bar{display:flex;align-items:center;padding:10px 16px;background:rgba(232,184,145,.05);gap:10px;border-bottom:1px solid rgba(232,184,145,.06)}
.notice-icon{font-size:18px;flex-shrink:0}
.notice-text{flex:1;overflow:hidden;white-space:nowrap;color:#e8b891;font-size:12px}
.notice-text span{display:inline-block;padding-left:100%;animation:marquee 15s linear infinite}
@keyframes marquee{to{transform:translateX(-100%)}}

/* ── Horizontal Scroll ── */
.scroll-x{display:flex;gap:10px;overflow-x:auto;padding:0 16px 12px;-webkit-overflow-scrolling:touch}
.scroll-x::-webkit-scrollbar{display:none}
.card-mini{position:relative;width:96px;height:96px;border-radius:10px;overflow:hidden;flex-shrink:0;cursor:pointer;transition:transform .2s;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.card-mini:active{transform:scale(.95)}
.card-mini .bg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;color:rgba(255,255,255,.8);font-weight:700;font-family:Georgia,serif}
.card-mini .tag{position:absolute;top:-18px;right:-18px;width:44px;height:44px;background:linear-gradient(135deg,#e8b891,#c8956c);color:#0d0a0b;transform:rotate(45deg);display:flex;align-items:flex-end;justify-content:center;font-size:9px;font-weight:800;padding-bottom:4px}
.card-mini .name{position:absolute;bottom:6px;left:0;right:0;text-align:center;color:#fff;font-size:10px;text-shadow:0 1px 3px rgba(0,0,0,.9);font-weight:600}

/* ── Profile Row ── */
.profile-row{display:flex;gap:12px;padding:14px 16px;background:rgba(26,18,20,.6);margin-bottom:8px;border-radius:12px;cursor:pointer;transition:all .2s;border:1px solid rgba(232,184,145,.06)}
.profile-row:hover{background:rgba(26,18,20,.9);border-color:rgba(232,184,145,.15);box-shadow:0 4px 16px rgba(0,0,0,.3);transform:translateY(-1px)}
.profile-row .avatar{width:110px;height:110px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:42px;color:rgba(255,255,255,.8);font-weight:700;font-family:Georgia,serif}
.profile-row .info{flex:1;min-width:0}
.profile-row .badges{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.badge-auth{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(135deg,rgba(232,184,145,.2),rgba(200,149,108,.1));color:#e8b891;font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;border:1px solid rgba(232,184,145,.15)}
.badge-auth svg{width:11px;height:11px;fill:#e8b891}
.profile-row .pname{font-size:14px;font-weight:700;color:#e0d5c1}
.profile-row .tags{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}
.tag-item{font-size:10px;padding:3px 10px;border:1px solid rgba(232,184,145,.25);border-radius:12px;color:#e8b891;font-weight:600}
.profile-row .meta{font-size:11px;color:rgba(224,213,193,.5);line-height:1.6}
.stars{color:#e8b891;letter-spacing:1px}
.btn-ask{display:block;text-align:center;background:linear-gradient(135deg,#c8956c,#e8b891);color:#0d0a0b;padding:10px;border-radius:8px;font-size:12px;font-weight:700;margin-top:10px;cursor:pointer;letter-spacing:.5px}
.btn-ask:active{opacity:.85}

/* ── Online Marquee ── */
.online-box{background:linear-gradient(135deg,rgba(232,184,145,.1),rgba(200,149,108,.05));margin:16px;border-radius:12px;padding:14px;overflow:hidden;border:1px solid rgba(232,184,145,.08)}
.online-title{color:#e8b891;text-align:center;font-size:12px;margin-bottom:10px;font-weight:600}
.marquee-up{height:120px;overflow:hidden}
.marquee-up ul{animation:scroll-up 20s linear infinite}
.marquee-up li{text-align:center;color:rgba(224,213,193,.6);font-size:12px;padding:5px 0}
@keyframes scroll-up{to{transform:translateY(-50%)}}

/* ── Choose Page ── */
.view-tabs{display:flex;background:rgba(26,18,20,.6);border-bottom:1px solid rgba(232,184,145,.08)}
.view-tab{flex:1;text-align:center;padding:12px;font-size:13px;font-weight:600;color:rgba(224,213,193,.4);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s}
.view-tab.active{color:#e8b891;border-bottom-color:#e8b891}
.toggle-bar{display:flex;justify-content:flex-end;padding:8px 16px;background:rgba(26,18,20,.4);gap:8px}
.toggle-btn{padding:4px 12px;border-radius:4px;font-size:12px;color:rgba(224,213,193,.5);cursor:pointer;border:1px solid rgba(232,184,145,.2)}
.toggle-btn.active{background:#e8b891;color:#0d0a0b;border-color:#e8b891}

/* ── Choose Grid ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px}
.grid-card{background:rgba(26,18,20,.6);border-radius:12px;overflow:hidden;cursor:pointer;transition:all .2s;border:1px solid rgba(232,184,145,.06)}
.grid-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.4);transform:translateY(-2px)}
.grid-card .thumb{height:170px;display:flex;align-items:center;justify-content:center;font-size:48px;color:rgba(255,255,255,.8);font-weight:700;font-family:Georgia,serif;position:relative}
.grid-card .g-tag{position:absolute;top:8px;left:8px;background:linear-gradient(135deg,#e8b891,#c8956c);color:#0d0a0b;font-size:9px;padding:2px 8px;border-radius:4px;font-weight:800}
.grid-card .g-info{padding:10px;font-size:12px;color:#e0d5c1}
.grid-card .g-name{font-weight:700;margin-bottom:2px}

/* ── Community ── */
.article-item{padding:16px;background:rgba(26,18,20,.6);margin-bottom:8px;border-radius:12px;transition:all .2s;cursor:pointer;border:1px solid rgba(232,184,145,.06)}
.article-item:hover{box-shadow:0 4px 16px rgba(0,0,0,.3);border-color:rgba(232,184,145,.15);transform:translateY(-1px)}
.article-item h3{font-size:15px;margin-bottom:8px;color:#e0d5c1}
.article-item .art-image{height:180px;border-radius:10px;margin:8px 0;display:flex;align-items:center;justify-content:center}
.article-item .art-time{font-size:11px;color:rgba(224,213,193,.3);text-align:right}
.article-excerpt{font-size:13px;color:rgba(224,213,193,.55);margin:8px 0;line-height:1.6}
.article-more{color:#c8956c}
/* ── Article Detail ── */
.article-detail{padding:16px;color:#e0d5c1}
.article-detail-title{font-size:20px;margin-bottom:12px;color:#e8b891}
.article-detail-time{font-size:12px;color:rgba(224,213,193,.35);margin-bottom:16px}
.article-detail-img{width:100%;border-radius:10px;margin-bottom:16px}
.article-detail-body{font-size:14px;color:rgba(224,213,193,.75);line-height:1.8}

/* ── Lottery ── */
.lottery-intro{position:relative;margin:16px;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.lottery-intro .cover{height:200px;display:flex;align-items:center;justify-content:center;color:#e8b891;font-size:24px;font-family:Georgia,serif}
.lottery-intro .desc{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.6);color:rgba(224,213,193,.8);font-size:10px;padding:10px}
.btn-task{display:block;width:80%;margin:20px auto;padding:14px;background:linear-gradient(135deg,#c8956c,#e8b891);color:#0d0a0b;font-size:15px;font-weight:800;border-radius:25px;cursor:pointer;text-align:center;letter-spacing:1px;box-shadow:0 4px 15px rgba(232,184,145,.25)}
.btn-task:active{transform:scale(.97)}
.btn-task.loading{opacity:.6;pointer-events:none}
.hotel-grid{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 20px}

/* ── Profile Detail ── */
.profile-detail .pd-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#1a1214;color:#e8b891}
.profile-detail .pd-name{font-size:17px;font-weight:700}
.profile-detail .pd-card{display:flex;padding:18px;background:rgba(26,18,20,.8);gap:14px;position:relative;border-bottom:1px solid rgba(232,184,145,.06)}
.profile-detail .pd-info{flex:1}
.profile-detail .pd-tags{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.profile-detail .pd-tag{padding:5px 14px;background:rgba(232,184,145,.1);color:#e8b891;border-radius:12px;font-size:12px;border:1px solid rgba(232,184,145,.2)}
.profile-detail .pd-like{position:absolute;right:18px;top:18px;text-align:center}
.profile-detail .pd-like-btn{width:44px;height:44px;cursor:pointer}
.profile-detail .pd-reserve{position:absolute;right:16px;bottom:16px;background:linear-gradient(135deg,#c8956c,#e8b891);color:#0d0a0b;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;transition:all .2s}
.profile-detail .pd-reserve:hover{box-shadow:0 3px 12px rgba(232,184,145,.3);transform:translateY(-1px)}
.profile-detail .pd-reserve:active{transform:scale(.96);opacity:.85}
.profile-detail .pd-photos{display:flex;gap:8px;overflow-x:auto;padding:12px 16px;background:rgba(26,18,20,.4);-webkit-overflow-scrolling:touch}
.profile-detail .pd-photos::-webkit-scrollbar{height:0}
.profile-detail .pd-thumb{width:68px;height:68px;min-width:68px;border-radius:8px;flex-shrink:0;border:2px solid transparent;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:rgba(255,255,255,.8);cursor:pointer;transition:all .2s}
.profile-detail .pd-thumb.active{border-color:#e8b891;box-shadow:0 2px 10px rgba(232,184,145,.3)}
.profile-detail .pd-main{width:calc(100% - 32px);aspect-ratio:3/4;max-height:70vh;margin:0 16px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700;color:rgba(255,255,255,.8);font-family:Georgia,serif;cursor:pointer}
.profile-detail .pd-about{padding:20px;background:rgba(26,18,20,.6);margin-top:1px}
.profile-detail .pd-about h3{margin-bottom:10px;font-size:16px;color:#e8b891}

/* ── Customer Service ── */
.cs-list{margin:16px;background:rgba(26,18,20,.6);border-radius:12px;overflow:hidden;border:1px solid rgba(232,184,145,.06)}
.cs-item{display:flex;align-items:center;padding:16px;gap:14px;border-bottom:1px solid rgba(232,184,145,.06);cursor:pointer;transition:background .2s}
.cs-item:hover{background:rgba(232,184,145,.05)}
.cs-item:last-child{border-bottom:none}
.cs-item .cs-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px}
.cs-item .cs-name{flex:1;font-size:15px;font-weight:500;color:#e0d5c1}
.cs-item .cs-arrow{color:rgba(224,213,193,.3)}
.cs-desc{padding:0 16px;color:rgba(224,213,193,.4);font-size:12px;line-height:1.7}

/* ── Auth (Login/Register) ── */
.auth-page-bg{background:linear-gradient(180deg,#1a1214 0%,#0d0a0b 40%,#0d0a0b 100%)!important}
.auth-topbar{display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 8vw}
.auth-back{color:#c8956c;cursor:pointer;font-size:15px;transition:color .2s}
.auth-back:hover{color:#e8b891}
.auth-cs-btn{width:30px;height:30px;cursor:pointer;color:#c8956c;transition:color .2s}
.auth-cs-btn:hover{color:#e8b891}
.auth-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 10vw}
.auth-logo{text-align:center;font-size:36px;font-weight:800;color:#e8b891;letter-spacing:8px;padding:10px 0;font-family:Georgia,serif}
.auth-title{text-align:center;font-size:22px;font-weight:700;color:#e0d5c1;letter-spacing:2px;padding:0 0 6px}
.auth-subtitle{text-align:center;font-size:12px;color:rgba(224,213,193,.35);margin-bottom:36px}
.auth-input{width:100%;height:50px;border-radius:25px;padding:0 22px;font-size:14px;background:rgba(26,18,20,.6);color:#e0d5c1;margin-bottom:14px;border:1px solid rgba(232,184,145,.12);transition:all .25s;outline:none}
.auth-input:focus{border-color:rgba(232,184,145,.35);background:rgba(26,18,20,.85);box-shadow:0 0 0 3px rgba(232,184,145,.06)}
.auth-input::placeholder{color:rgba(224,213,193,.25)}
.auth-btn{width:100%;height:50px;background:linear-gradient(135deg,#c8956c,#e8b891);color:#0d0a0b;border-radius:25px;font-size:16px;font-weight:700;cursor:pointer;margin-top:10px;letter-spacing:1px;transition:all .2s;border:none}
.auth-btn:hover{box-shadow:0 4px 20px rgba(232,184,145,.25);transform:translateY(-1px)}
.auth-btn:active{opacity:.85;transform:scale(.98)}
.auth-btn:disabled{opacity:.5;pointer-events:none}
.auth-switch{text-align:center;margin-top:22px;color:rgba(224,213,193,.4);font-size:13px;cursor:pointer;transition:color .2s}
.auth-switch span{color:#c8956c;font-weight:600}
.auth-switch:hover{color:rgba(224,213,193,.6)}
.auth-switch:hover span{color:#e8b891}

/* ── History (Order History) ── */
.history-header{padding:20px 16px 24px;background:linear-gradient(180deg,#1a1214,#2d1b1f);border-bottom:1px solid rgba(232,184,145,.06)}
.history-top{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.history-back{font-size:20px;cursor:pointer;color:#e8b891;line-height:1}
.history-title{font-size:18px;font-weight:700;color:#e8b891}
.history-tabs{margin-bottom:14px}
.htab{display:inline-block;padding:6px 14px;border-radius:16px;font-size:11px;cursor:pointer;margin-right:6px;margin-bottom:4px;background:rgba(232,184,145,.06);color:rgba(224,213,193,.5);border:1px solid rgba(232,184,145,.08);transition:all .2s}
.htab:hover{background:rgba(232,184,145,.12);color:rgba(224,213,193,.7)}
.htab.active{background:#e8b891;color:#0d0a0b;font-weight:700;border-color:#e8b891}
.history-stats{display:flex;gap:24px}
.history-stat{text-align:center}
.hs-num{font-size:24px;font-weight:700;color:#e8b891}
.hs-label{font-size:11px;color:rgba(224,213,193,.4)}
.history-list{padding:12px 0 20px}
.history-card{margin:0 16px 8px;background:rgba(26,18,20,.8);border-radius:10px;overflow:hidden;border:1px solid rgba(232,184,145,.1)}

/* ── Mine ── */
.mine-header{padding:24px 20px 28px;background:linear-gradient(180deg,#1a1214,#2d1b1f);border-bottom:1px solid rgba(232,184,145,.06)}
.mine-header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.mine-user{display:flex;align-items:center;gap:14px}
.mine-avatar{width:56px;height:56px;border-radius:50%;background:rgba(232,184,145,.12);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#e8b891;flex-shrink:0;border:2px solid rgba(232,184,145,.25)}
.mine-phone{font-size:18px;font-weight:700;color:#e0d5c1}
.mine-code{font-size:12px;color:rgba(224,213,193,.4);margin-top:2px}
.mine-cs-btn{width:36px;height:36px;cursor:pointer;color:#e8b891;transition:opacity .2s}
.mine-cs-btn:hover{opacity:.8}
.mine-balance{background:rgba(232,184,145,.06);border-radius:14px;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(232,184,145,.1)}
.mine-balance-label{font-size:11px;color:rgba(224,213,193,.4);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.mine-balance-num{font-size:28px;font-weight:700;color:#e8b891}
.mine-balance-btn{background:linear-gradient(135deg,#c8956c,#e8b891);color:#0d0a0b;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.3px;transition:all .2s}
.mine-balance-btn:active{transform:scale(.96);opacity:.85}
.mine-menu-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:16px;margin-top:-8px;position:relative;z-index:1}
.menu-item-mine{display:flex;flex-direction:column;align-items:center;padding:18px 8px;cursor:pointer;gap:10px;border-radius:14px;transition:all .2s;background:rgba(26,18,20,.5);border:1px solid rgba(232,184,145,.06)}
.menu-item-mine:hover{background:rgba(26,18,20,.85);border-color:rgba(232,184,145,.18);transform:translateY(-1px)}
.menu-item-mine .mi-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:rgba(232,184,145,.08);border-radius:12px;transition:transform .2s}
.menu-item-mine:hover .mi-icon{transform:scale(1.08)}
.menu-item-mine .mi-label{font-size:10px;color:rgba(224,213,193,.6);text-align:center;font-weight:500;letter-spacing:.3px}
.mine-logout{margin:0 16px 20px;padding:14px;text-align:center;background:rgba(26,18,20,.5);border-radius:14px;color:#e74c3c;font-weight:600;font-size:14px;cursor:pointer;border:1px solid rgba(232,184,145,.06);transition:all .2s}
.mine-logout:hover{background:rgba(231,76,60,.08);border-color:rgba(231,76,60,.2)}

/* ── Mine Subpages (Payment / Password) ── */
.mine-subpage{padding:0;color:#e0d5c1;min-height:100%}
.mine-sub-header{display:flex;align-items:center;gap:14px;padding:16px 16px 14px;background:linear-gradient(180deg,#1a1214,#0d0a0b);border-bottom:1px solid rgba(232,184,145,.08)}
.mine-sub-back{font-size:22px;cursor:pointer;color:#e8b891;line-height:1}
.mine-sub-title{font-size:18px;font-weight:700;color:#e8b891;letter-spacing:.5px}
.mine-card{background:rgba(26,18,20,.7);border-radius:14px;padding:18px 16px;margin:12px 16px;border:1px solid rgba(232,184,145,.08)}
.mine-card-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mine-card-label{font-size:13px;font-weight:600;color:#e0d5c1}
.mine-card-hint{font-size:12px;color:rgba(224,213,193,.5);margin-bottom:14px;line-height:1.5}
.field-group{margin-bottom:12px}
.field-label{display:block;font-size:11px;color:rgba(224,213,193,.4);margin-bottom:5px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}

/* ── Payment Account Page ── */
.pay-section{padding:0 16px 24px}
.pay-section-title{font-size:13px;color:rgba(224,213,193,.5);padding:14px 0 10px;text-align:center}
.pay-current-box{background:rgba(46,204,113,.06);border-radius:12px;padding:14px;margin-bottom:14px;border:1px solid rgba(46,204,113,.12)}
.pay-current-head{font-size:12px;color:rgba(224,213,193,.5);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.pay-field-readonly{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(232,184,145,.06)}
.pay-field-readonly:last-child{border-bottom:none}
.pay-field-label{font-size:11px;color:rgba(224,213,193,.35);text-transform:uppercase;letter-spacing:.3px}
.pay-field-val{font-size:13px;color:#e0d5c1;font-weight:500}
.pay-field-val.mono{font-family:'Courier New',monospace;font-size:12px;color:#e8b891}
.pay-card{background:rgba(26,18,20,.6);border-radius:14px;padding:18px 16px;margin:4px 0 14px;border:1px solid rgba(232,184,145,.08)}
.pay-field{margin-bottom:14px}
.pay-field:last-child{margin-bottom:0}
.pay-label{display:block;font-size:12px;color:rgba(224,213,193,.45);margin-bottom:6px;font-weight:500}
.pay-input{width:100%;height:48px;border-radius:12px;padding:0 16px;font-size:14px;background:rgba(0,0,0,.25);color:#e0d5c1;border:1px solid rgba(232,184,145,.1);outline:none;transition:all .2s}
.pay-input:focus{border-color:rgba(232,184,145,.3);background:rgba(0,0,0,.4);box-shadow:0 0 0 3px rgba(232,184,145,.04)}
.pay-input::placeholder{color:rgba(224,213,193,.2)}
.pay-notice{background:rgba(231,76,60,.06);border-radius:12px;padding:14px;margin-bottom:16px;border:1px solid rgba(231,76,60,.1)}
.pay-notice-title{font-size:13px;font-weight:700;color:#e74c3c;margin-bottom:6px}
.pay-notice-text{font-size:11px;color:rgba(224,213,193,.55);line-height:1.7}
.pay-submit-btn{width:100%;padding:15px;background:linear-gradient(135deg,#c8956c,#e8b891);color:#0d0a0b;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;letter-spacing:.5px;transition:all .2s}
.pay-submit-btn:hover{box-shadow:0 4px 20px rgba(232,184,145,.25);transform:translateY(-1px)}
.pay-submit-btn:active{transform:scale(.98);opacity:.85}
.pay-submit-btn:disabled{opacity:.5;pointer-events:none}

/* ── Pay Badge ── */
.pay-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700}
.pay-badge.bound{background:rgba(46,204,113,.12);color:#2ecc71;border:1px solid rgba(46,204,113,.2)}
.pay-badge.unbound{background:rgba(231,76,60,.1);color:#e74c3c;border:1px solid rgba(231,76,60,.15)}
.pay-addr-box{background:rgba(0,0,0,.3);padding:14px;border-radius:10px;word-break:break-all;font-family:'Courier New',monospace;font-size:13px;color:#e8b891;border:1px solid rgba(232,184,145,.1);line-height:1.5}
.pay-addr-empty{color:rgba(224,213,193,.2);padding:14px 0;text-align:center;font-size:13px}
.mine-tip{margin:12px 16px;padding:12px 14px;border-radius:10px;font-size:11px;line-height:1.7}
.mine-tip.warn{background:rgba(232,184,145,.06);border:1px solid rgba(232,184,145,.12);color:#c8956c}
.mine-tip.safe{background:rgba(200,149,108,.04);border:1px solid rgba(200,149,108,.1);color:#b08a6c}

/* ── Modal ── */
.modal-overlay{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;height:100%;background:rgba(0,0,0,.7);z-index:500;display:none;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal-box{background:#1a1214;border-radius:16px;width:90%;max-height:80vh;overflow-y:auto;position:relative;border:1px solid rgba(232,184,145,.1);box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal-close{position:absolute;top:10px;right:14px;font-size:22px;color:rgba(224,213,193,.4);cursor:pointer;z-index:1}
.modal-body{padding:24px;color:#e0d5c1;line-height:1.7}

/* ── Toast ── */
.toast{position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);background:rgba(26,18,20,.95);color:#e8b891;padding:12px 28px;border-radius:10px;font-size:13px;z-index:600;pointer-events:none;opacity:0;transition:opacity .3s;border:1px solid rgba(232,184,145,.2)}
.toast.show{opacity:1}

/* ── Helpers ── */
.hidden{display:none!important}
.text-center{text-align:center}
.empty-state{padding:60px 20px;text-align:center;color:rgba(224,213,193,.3);font-size:14px}