*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Inter",-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'PingFang SC','Hiragino Sans GB',sans-serif;background:#f5f5f5;min-height:100vh;color:#222B2D;-webkit-font-smoothing:antialiased;line-height:1.4}
input,button,textarea{font-family:inherit}

/* Header */
.site-header{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:100;background:rgba(255,255,255,.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:12px;padding:8px 18px;box-shadow:0 2px 12px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center}
.site-logo{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:#1F2B2D;letter-spacing:.5px}
.site-logo img{height:22px;width:22px;border-radius:6px}

/* Container */
.container{max-width:900px;margin:0 auto;padding:70px 16px 40px}
@media(min-width:1400px){.container{max-width:1100px}}
@media(min-width:1800px){.container{max-width:1300px}}

/* Card */
.card{background:#fff;border-radius:14px;padding:20px;margin-bottom:12px;box-shadow:0 8px 24px rgba(18,24,28,.06);display:flex;flex-direction:column}
.card-uc{background:#fff;padding:16px;display:flex;flex-direction:column}
.card-uc .card-label{flex-shrink:0}
.card-uc .uc-grid{flex:1;align-content:space-between}
.usage-section{border-top:1px solid #f0f2f4;padding-top:14px;margin-top:auto}
@media(min-width:1400px){.card{padding:26px;border-radius:16px;margin-bottom:16px}.card-uc{padding:26px}.card-label{font-size:14px;padding:6px 14px}}
@media(min-width:1800px){.card{padding:32px;border-radius:18px;margin-bottom:20px}.card-uc{padding:32px}.card-label{font-size:15px;padding:7px 16px}}
.card-title{font-size:14px;font-weight:600;color:#222B2D;margin-bottom:12px}
.card-label{display:inline-block;background:#f0f2f4;padding:5px 12px;border-radius:8px;font-size:13px;font-weight:600;color:#4a5568;margin-bottom:14px;width:fit-content}

/* Notice */
.notice-bar{background:linear-gradient(90deg,#22C57B 0%,#33D6E8 40%,#9B7CFF 100%);border-radius:16px;padding:18px 20px 50px;margin-bottom:12px;color:#fff;display:flex;flex-direction:column;position:relative;min-height:100px}
@media(min-width:1400px){.notice-bar{padding:24px 28px;min-height:100px;border-radius:18px;margin-bottom:16px}.notice-title{font-size:18px}.notice-pill{font-size:13px;padding:5px 12px}}
@media(min-width:1800px){.notice-bar{padding:30px 36px;min-height:120px;border-radius:20px;margin-bottom:20px}.notice-title{font-size:20px}}
.notice-pill{display:inline-block;background:rgba(255,255,255,.16);padding:4px 10px;border-radius:18px;font-size:12px;font-weight:600;margin-bottom:8px;width:fit-content}
.notice-title{font-size:16px;font-weight:700;line-height:1.3}
.notice-date{font-size:12px;color:rgba(255,255,255,.85);margin-top:4px}
.notice-actions{display:flex;gap:10px;margin-top:12px}
.notice-action-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:12px;font-weight:500;border:none;cursor:pointer;transition:background .15s}
.notice-action-btn:hover{background:rgba(255,255,255,.22)}
.notice-meta{position:absolute;top:16px;right:18px;font-size:11px;color:rgba(255,255,255,.8)}
.notice-brands{position:absolute;bottom:14px;right:16px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:70%}
.brand-tag{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.18);color:#fff;font-size:10px;font-weight:600;backdrop-filter:blur(4px)}

/* Two col */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.two-col{grid-template-columns:1fr}}
@media(min-width:1400px){.two-col{gap:16px}}
@media(min-width:1800px){.two-col{gap:20px}}

/* Plan */
.plan-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.plan-logo{width:44px;height:44px;border-radius:10px;object-fit:cover}
.plan-info{}
.plan-name{font-size:18px;font-weight:700;color:#1F2B2D;display:flex;align-items:center;gap:8px}
.renew-btn{background:#f0f2f4;color:#333;border:none;border-radius:6px;padding:3px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
.renew-btn:hover{background:#e4e7ea}
.plan-expire{font-size:12px;color:#6A767A;margin-top:2px}
.plan-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.plan-pill{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#f7f8fa;border-radius:12px;cursor:pointer;transition:all .15s;font-size:13px;font-weight:600;color:#2B2F33;border:none}
.plan-pill:hover{background:#eef0f3;transform:translateY(-1px)}
.plan-pill-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
@media(min-width:1400px){.plan-name{font-size:20px}.plan-expire{font-size:13px}.plan-pill{padding:12px 16px;font-size:14px}.plan-pill-icon{width:36px;height:36px}.usage-title{font-size:14px}.usage-pct{font-size:14px}}
@media(min-width:1800px){.plan-name{font-size:22px}.plan-expire{font-size:14px}.plan-pill{padding:14px 18px;font-size:15px}.plan-pill-icon{width:40px;height:40px}.usage-title{font-size:15px}.usage-pct{font-size:15px}}

/* Usage */

.usage-title{font-size:13px;font-weight:700;color:#222B2D;margin-bottom:10px}
.usage-row{display:flex;align-items:center;gap:12px}
.usage-track{flex:1;height:14px;background:#e9eef2;border-radius:8px;overflow:hidden;position:relative}
.usage-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,#20C57B,#3FB6FF);transition:width 2.5s cubic-bezier(.2,.8,.3,1);position:relative;overflow:hidden}
.usage-fill::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);animation:shimmer-bar 2s ease-in-out infinite}
@keyframes shimmer-bar{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.usage-pct{font-size:13px;font-weight:700;color:#222B2D;white-space:nowrap}
.usage-labels{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#8B98A0}

/* UC grid */
.uc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:2px}
.uc-pill{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f5f6f8;border-radius:12px;cursor:pointer;transition:all .15s;border:none;text-align:left;width:100%}
.uc-pill:hover{background:#eef0f3;transform:translateY(-1px)}
.uc-pill-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.uc-pill-icon svg{width:17px;height:17px}
.uc-pill-name{font-size:13px;font-weight:500;color:#2B2F33;flex:1}
.uc-pill-arrow{color:#ccc;font-size:16px}
@media(min-width:1400px){.uc-grid{gap:10px}.uc-pill{padding:14px;gap:12px;border-radius:14px}.uc-pill-icon{width:38px;height:38px;border-radius:10px}.uc-pill-icon svg{width:20px;height:20px}.uc-pill-name{font-size:14px}}
@media(min-width:1800px){.uc-grid{gap:12px}.uc-pill{padding:16px 14px;gap:14px}.uc-pill-icon{width:42px;height:42px;border-radius:12px}.uc-pill-icon svg{width:22px;height:22px}.uc-pill-name{font-size:15px}}

/* Modal */
.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-mask.show{opacity:1;pointer-events:auto}
.modal-content{background:#fff;border-radius:16px;width:100%;max-width:420px;max-height:85vh;display:flex;flex-direction:column;transform:translateY(16px);transition:transform .25s cubic-bezier(.2,.9,.3,1)}
.modal-mask.show .modal-content{transform:translateY(0)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid #f0f2f4}
.modal-header h3{font-size:16px;font-weight:700;color:#1F2B2D}
.modal-close{width:30px;height:30px;border:none;background:#f2f4f6;border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#6A767A;transition:background .15s}
.modal-close:hover{background:#e8ebee}
.modal-body{flex:1;overflow-y:auto;padding:18px 20px}

/* Fold cards */
.fold-list{display:flex;flex-direction:column;gap:10px}
.fold-card{background:#f7f8fa;border-radius:12px;overflow:hidden;transition:box-shadow .15s}
.fold-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.04)}
.fold-summary{display:flex;justify-content:space-between;align-items:center;padding:13px 14px;cursor:pointer}
.fold-left{display:flex;flex-direction:column;gap:3px}
.fold-date{font-size:12px;color:#8B98A0}
.fold-amount{font-size:14px;font-weight:600;color:#222B2D}
.fold-right{display:flex;align-items:center;gap:8px}
.fold-toggle{font-size:16px;color:#c0c8cc;transition:transform .2s}
.fold-detail{padding:0 14px 14px;border-top:1px solid #eaeef1;padding-top:12px;display:none}
.fold-detail.open{display:block}
.fold-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:12px}
.fold-row-label{color:#8B98A0}
.fold-row-value{color:#222B2D;font-weight:500}

/* Badge */
.badge{font-size:11px;padding:3px 8px;border-radius:6px;font-weight:600;display:inline-block}
.badge-success{background:#e8f5e9;color:#2e7d32}
.badge-warning{background:#fff3e0;color:#e65100}
.badge-info{background:#e3f2fd;color:#1565c0}
.badge-danger{background:#fce4ec;color:#c62828}

/* Subscribe modal */
.sub-row{display:flex;gap:8px;margin-bottom:12px}
.sub-input{flex:1;padding:11px 14px;border:1px solid #e8ebee;border-radius:10px;font-size:13px;background:#f7f8fa;color:#333;outline:none;transition:border .15s}
.sub-input:focus{border-color:#3FB6FF}
.sub-copy{padding:11px 16px;background:#e3f2fd;border:none;border-radius:10px;color:#1565c0;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s}
.sub-copy:hover{background:#bbdefb;transform:translateY(-1px)}
.import-actions{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.import-action{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#f5f6f8;border-radius:12px;cursor:pointer;transition:all .15s}
.import-action:hover{background:#eef0f3;transform:translateY(-1px)}
.import-icon{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.import-content{flex:1}
.import-title{font-size:14px;font-weight:600;color:#222B2D}
.import-desc{font-size:12px;color:#8B98A0;margin-top:2px}
.platform-tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto}
.ptab{padding:8px 14px;border:none;background:#f0f2f4;border-radius:8px;font-size:13px;font-weight:500;color:#6A767A;cursor:pointer;transition:all .15s;white-space:nowrap}
.ptab.active{background:#222B2D;color:#fff}
.ptab:hover:not(.active){background:#e8ebee}
.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.client-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;background:#f5f6f8;border-radius:12px;cursor:pointer;transition:all .15s;font-size:12px;color:#2B2F33;font-weight:500;text-align:center}
.client-item:hover{background:#eef0f3;transform:translateY(-1px)}
.client-icon{width:36px;height:36px;border-radius:8px;object-fit:contain}

/* Plan list (shop) */
.plan-list{display:flex;flex-direction:column;gap:10px}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan-item-compact{background:#f4fafa;border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .15s;border:1px solid #eef5f5;display:flex;justify-content:space-between;align-items:center;gap:8px}
.plan-item-compact:hover{background:#eaf5f5;border-color:#d8ecec;transform:translateY(-1px)}
.plan-item-compact .plan-item-name{font-size:14px;font-weight:600;color:#1F2B2D;flex:1}
.plan-item-compact .plan-item-price{font-size:16px;font-weight:700;color:#22C57B;white-space:nowrap}
.plan-item{background:#f7f8fa;border-radius:12px;padding:14px 16px;cursor:pointer;transition:all .15s;border:1px solid transparent}
.plan-item:hover{background:#eef0f3;border-color:#e0e5e8;transform:translateY(-1px)}
.plan-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.plan-item-name{font-size:14px;font-weight:700;color:#1F2B2D}
.plan-item-price{font-size:14px;font-weight:700;color:#22C57B}
.plan-tags{display:flex;flex-wrap:wrap;gap:6px}
.plan-tag{background:#fff;padding:4px 10px;border-radius:6px;font-size:11px;color:#6A767A;font-weight:500}

/* Settings */
.settings-list{display:flex;flex-direction:column;gap:8px}
.settings-item{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:#f7f8fa;border-radius:10px;font-size:13px}
.settings-label{color:#6A767A}
.settings-value{color:#222B2D;font-weight:500}
.settings-btn{padding:8px 14px;background:#e3f2fd;border:none;border-radius:8px;color:#1565c0;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.settings-btn:hover{background:#bbdefb;transform:translateY(-1px)}
.settings-btn-green{background:#e8f5e9;color:#2e7d32}
.settings-btn-green:hover{background:#c8e6c9}
.settings-btn-orange{background:#fff3e0;color:#e65100}
.settings-btn-orange:hover{background:#ffe0b2}
.settings-btn-red{background:#fce4ec;color:#c62828}
.settings-btn-red:hover{background:#f8bbd0}

/* Heatmap */
.heatmap-section{margin-top:0}
.data-dashboard{display:flex;flex-direction:column;gap:12px}
.data-cards-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.data-cards-row:nth-child(2){grid-template-columns:1fr 1fr 1fr}
.data-card{background:#fafbfc;border-radius:12px;padding:14px 16px;position:relative;overflow:hidden;border:1px solid #f0f2f4;min-height:90px}
.data-card-title{font-size:11px;color:#8B98A0;font-weight:500;margin-bottom:4px}
.data-card-value{font-size:20px;font-weight:700;color:#1F2B2D;letter-spacing:-.5px}
.data-card-sub{font-size:11px;color:#999;margin-top:4px}
.data-accent{color:#22C57B;font-weight:600}
.data-card-chart{position:absolute;top:12px;right:12px;opacity:.6}
.data-card-gauge{position:absolute;top:12px;right:8px}
.data-stat-pill{display:flex;align-items:center;gap:8px;background:#fafbfc;border-radius:10px;padding:10px 10px;border:1px solid #f0f2f4;overflow:hidden}
.data-stat-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.data-stat-label{font-size:10px;color:#999;white-space:nowrap}
.data-stat-val{font-size:13px;font-weight:700;color:#1F2B2D;white-space:nowrap}
.data-chart-section{background:#fafbfc;border-radius:12px;padding:14px 16px;border:1px solid #f0f2f4}
.data-chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.data-chart-title{font-size:13px;font-weight:600;color:#333}
.data-chart-unit{font-size:11px;color:#999;background:#f0f2f4;padding:2px 8px;border-radius:6px}
.heatmap-label{font-size:12px;color:#8B98A0;margin-bottom:8px;font-weight:500}
.heatmap-wrap{display:flex;gap:10px;align-items:flex-start}
.heatmap-main{flex:1;overflow-x:auto}

/* Chart */
.chart-section{margin-top:14px}
.chart-bars{display:flex;align-items:flex-end;gap:2px;height:60px}
.chart-bar{flex:1;border-radius:3px 3px 0 0;min-height:2px;transition:height .3s}
.chart-legend{display:flex;gap:12px;margin-top:8px;font-size:11px;color:#8B98A0}
.chart-legend-dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:middle}

/* Pagination */
.pagination{display:flex;justify-content:center;align-items:center;gap:14px;padding:14px 0}
.page-btn{width:34px;height:34px;background:#e8ebee;border:none;border-radius:8px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#2B2F33;transition:background .15s}
.page-btn:hover{background:#dde1e4}
.page-btn:disabled{opacity:.3;cursor:default}
.page-info{font-size:12px;color:#6A767A;font-weight:500}

/* Toast */
.toast{position:fixed;top:60px;left:50%;transform:translateX(-50%);background:#1F2B2D;color:#fff;padding:10px 22px;border-radius:10px;font-size:13px;font-weight:500;z-index:2000;opacity:0;transition:opacity .3s;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.toast.show{opacity:1}

/* Promo iframe */
.promo-frame{width:100%;height:65vh;border:none;border-radius:8px}

/* Cancel btn */
.fold-cancel{width:100%;margin-top:10px;padding:9px;background:#fee2e2;color:#dc2626;border:none;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
.fold-cancel:hover{background:#fecaca}

/* Share */
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.share-btn{padding:9px;border:1px solid #e8ebee;border-radius:8px;background:#fff;font-size:12px;cursor:pointer;text-align:center;color:#2B2F33;font-weight:500;transition:all .15s}
.share-btn:hover{background:#f7f8fa;border-color:#d0d5d8}

/* Skeleton */
.sk{background:linear-gradient(90deg,#f0f2f4 25%,#e8ebee 50%,#f0f2f4 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:10px}
.sk-line{height:14px;margin-bottom:8px}
.sk-block{height:60px;margin-bottom:12px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Loading spinner */
.full-loader{display:flex;align-items:center;justify-content:center;min-height:80vh}
.spin-logo{width:48px;height:48px;border-radius:12px;animation:spin-pulse 1.5s ease-in-out infinite}
@keyframes spin-pulse{0%{transform:rotate(0deg) scale(1);opacity:1}50%{transform:rotate(180deg) scale(.85);opacity:.5}100%{transform:rotate(360deg) scale(1);opacity:1}}

/* Stats grid (wallet, invite) */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.stat-box{background:#f7f8fa;border-radius:12px;padding:14px;text-align:center}
.stat-value{font-size:18px;font-weight:700;color:#1F2B2D}
.stat-label{font-size:11px;color:#8B98A0;margin-top:3px}

/* Auth pages */
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:#fff}
.auth-box{width:100%;max-width:360px}
.auth-logo{display:block;margin:0 auto 12px;height:44px;width:44px;border-radius:10px}
.auth-title{text-align:center;font-size:20px;font-weight:700;margin-bottom:28px;color:#1F2B2D}
.auth-input{width:100%;padding:13px 16px;border:1px solid #e8ebee;border-radius:12px;font-size:14px;background:#f7f8fa;outline:none;margin-bottom:12px;color:#222B2D;transition:border .15s}
.auth-input:focus{border-color:#3FB6FF;background:#fff}
.auth-btn{width:100%;padding:14px;background:linear-gradient(90deg,#22C57B,#3FB6FF);border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:transform .15s}
.auth-btn:hover{transform:translateY(-1px)}
.auth-btn:disabled{opacity:.5;cursor:default;transform:none}
.auth-link{text-align:center;margin-top:18px;font-size:13px;color:#8B98A0}
.auth-link a{color:#3FB6FF;text-decoration:none;font-weight:500}
.auth-row{display:flex;gap:8px}
.auth-row .auth-input{flex:1;margin-bottom:0}
.auth-send-btn{padding:13px 16px;background:#f7f8fa;border:1px solid #e8ebee;border-radius:12px;font-size:13px;cursor:pointer;white-space:nowrap;color:#2B2F33;font-weight:500;transition:all .15s}
.auth-send-btn:hover{background:#eef0f3}
.auth-error{color:#dc2626;font-size:12px;margin-bottom:14px;text-align:center;font-weight:500}