body { background: var(--color-page); }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 16px; }

/* 广告位 */
.ad-banner { display:none; width:100%; height:50px; margin:8px 0 12px; border-radius:6px; overflow:hidden; }
.ad-banner.is-visible { display:block; }
.ad-banner img { width:100%; height:100%; object-fit:cover; display:block; }

/* 顶部用户卡 */
.user-top {
    position: relative;
    background: linear-gradient(135deg, var(--color-dark) 0%, #16213e 50%, #0f3460 100%);
    border-radius: 12px; padding: 24px 20px; margin-bottom: 16px;
    color: #fff; display: flex; align-items: center; gap: 16px;
}
.user-meta .vip-tag { position: absolute; top: 14px; right: 16px; }
.avatar-lg {
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(135deg,var(--color-gold),var(--color-accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff; font-weight: 700; flex-shrink: 0;
}
.user-meta { flex: 1; min-width: 0; }
.user-meta .uname { font-size: 18px; font-weight: 700; }
.user-meta .uid { font-size: 11px; color: #8899aa; margin-top: 2px; }
.uphone { font-size: 11px; color: #8899aa; margin-top: 2px; }
.user-meta .vip-tag {
    display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 10px;
    font-size: 11px; font-weight: 700;
}
.user-meta .vip-tag.free { background: rgba(255,255,255,.15); color: var(--color-text-faint); }
.user-meta .vip-tag.vip  { background: linear-gradient(135deg,var(--color-gold),#B8860B); color: #fff; }
.btn-upgrade {
    padding: 8px 18px; background: linear-gradient(135deg,var(--color-gold),#B8860B);
    color: #fff; border-radius: 20px; font-size: 12px; font-weight: 700;
    text-decoration: none; white-space: nowrap; flex-shrink: 0;
    transition: opacity .2s;
}
.btn-upgrade:hover { opacity: .85; }

/* 通用卡片 */
.card {
    background: var(--color-panel); border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,.06); padding: 18px 20px;
    margin-bottom: 14px; border: 1px solid var(--color-border);
}
.card-title {
    font-family: "MiSans", sans-serif; font-size: 15px; font-weight: 400; color: var(--color-brand);
    border-left: 3px solid var(--color-brand); padding-left: 10px; margin-bottom: 14px;
}

/* 四宫格导航 */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.grid-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 6px; background: var(--color-panel); border: 1px solid var(--color-border-light);
    border-radius: 8px; cursor: pointer; text-decoration: none; color: inherit;
    transition: box-shadow .15s, transform .15s;
}
.grid-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-2px); }
.grid-item .gi-icon { font-size: 26px; }
.grid-item .gi-label { font-size: 12px; color: var(--color-text-sec); }
.grid-item .gi-badge {
    font-size: 10px; padding: 1px 6px; border-radius: 8px;
    background: #e53e3e; color: #fff; margin-top: -2px;
}

/* 资产卡片 */
.asset-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; }
.asset-item {
    background: var(--color-panel); border: 1px solid var(--color-border-light); border-radius: 8px;
    padding: 12px 6px; cursor: pointer; transition: box-shadow .15s;
}
.asset-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.asset-item .aval { font-size: 20px; font-weight: 400; color: var(--color-text); }
.asset-item .albl { font-size: 11px; color: var(--color-text-muted); margin-top: 4px; }

/* 服务列表 */
.svc-list { display: flex; flex-direction: column; }
.svc-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid var(--color-border-light);
    text-decoration: none; color: inherit; cursor: pointer;
}
.svc-item:last-child { border-bottom: none; }
.svc-item:hover .svc-arrow { color: var(--color-accent); }
.svc-left { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color-text); }
.svc-left .svc-icon { font-size: 18px; }
.svc-arrow { color: var(--color-text-faint); font-size: 14px; transition: color .15s; }
.svc-right { font-size: 12px; color: var(--color-text-faint); margin-right: 4px; }

/* 登录提示 */
.login-prompt { text-align: center; padding: 60px 20px; }
.login-prompt .icon { font-size: 60px; margin-bottom: 12px; }
.login-prompt p { color: var(--color-text-muted); margin-bottom: 16px; font-size: 14px; }
.btn-login {
    padding: 10px 36px; background: var(--color-brand);
    color: #fff; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; font-weight: 700;
}
.btn-login:hover { opacity: .85; }

/* 订单标签 */
.order-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.otab {
    padding:4px 12px; border-radius:14px; font-size:11px; cursor:pointer;
    background: var(--color-subtle); color: var(--color-text-sec); white-space:nowrap; transition:all .2s;
}
.otab:hover { background:var(--color-border); color:var(--color-accent); }
.otab.active { background:var(--color-accent); color:#fff; }

/* 订单项 */
.order-item {
    display:flex; align-items:center; gap:12px; padding:12px 0;
    border-bottom:1px solid var(--color-border-light); cursor:pointer;
}
.order-item:last-child { border-bottom:none; }
.order-item:hover { background:var(--color-subtle); margin:0 -12px; padding-left:12px; padding-right:12px; border-radius:6px; }
.oi-icon {
    width:40px; height:40px; border-radius:12px; display:flex;
    align-items:center; justify-content:center; font-size:20px; flex-shrink:0;
    background:var(--color-panel); border:1px solid var(--color-border); box-shadow:0 1px 4px rgba(0,0,0,.05);
}
.oi-info { flex:1; }
.oi-info .oi-name { font-size:13px; font-weight:400; color:var(--color-text); font-family:"MiSans",sans-serif; }
.oi-info .oi-desc { font-size:11px; color:var(--color-text-muted); margin-top:2px; }
.oi-info .oi-date { font-size:10px; color:var(--color-text-faint); }
.oi-status {
    font-size:11px; padding:3px 10px; border-radius:10px; white-space:nowrap;
}
/* 订单状态色 — 暗色模式下保持可读 */
.oi-status.paid { background:rgba(46,125,50,.12); color:#2E7D32; }
.oi-status.unpaid { background:rgba(230,81,0,.12); color:#E65100; }
.oi-status.refund { background:var(--color-subtle); color:var(--color-text-muted); }
.oi-arrow { color:var(--color-text-faint); font-size:16px; }

/* 订单详情弹窗 */
.order-modal {
    display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
    z-index:10001; align-items:center; justify-content:center;
}
.order-modal.active { display:flex; }
.order-modal-box {
    background:var(--color-panel); border-radius:12px; width:600px; max-width:calc(100vw - 32px);
    max-height:80vh; overflow-y:auto; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.order-modal-box h3 { font-size:16px; color:var(--color-text); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--color-border-light); }
.order-modal-box .detail-row { display:flex; justify-content:space-between; padding:6px 0; font-size:13px; color:var(--color-text-sec); }
.order-modal-box .detail-row .dlbl { color:var(--color-text-muted); }
.order-modal-box .detail-content {
    background:var(--color-subtle); border:1px solid var(--color-border); border-radius:8px;
    padding:14px 16px; margin-top:12px; font-size:13px; color:var(--color-text); line-height:1.8;
    max-height:60vh; overflow-y:auto;
}
.oi-view-btn {
    padding:4px 10px; background:var(--color-brand); color:#fff; border:none; border-radius:4px;
    font-size:12px; cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.oi-view-btn:hover { opacity:.85; }
.oi-pay-btn {
    padding:4px 10px; background:#f6a623; color:#fff; border:none; border-radius:4px;
    font-size:12px; cursor:pointer; white-space:nowrap; flex-shrink:0; font-weight:600;
}
.oi-pay-btn:hover { opacity:.85; }
.oi-del-btn {
    padding:4px 10px; background:none; color:#e53e3e; border:1px solid #e53e3e;
    border-radius:4px; font-size:12px; cursor:pointer; white-space:nowrap; flex-shrink:0;
}
.oi-del-btn:hover { background:#e53e3e; color:#fff; }
.order-modal-close {
    position:absolute; top:14px; right:18px; font-size:22px; cursor:pointer; color:var(--color-text-faint);
}
.order-modal-close:hover { color:var(--color-text); }

/* 退出登录 */
.btn-logout {
    width:100%; padding:12px;
    background:var(--color-panel); color:#e53e3e;
    border:1px solid #e53e3e; border-radius:8px;
    font-size:15px; cursor:pointer;
    transition:all .15s;
}
.btn-logout:hover { background:#e53e3e; color:#fff; }

/* 空状态 */
.empty { text-align:center; color:var(--color-text-faint); padding:20px 0; font-size:13px; }

/* 页脚 */
.footer { text-align:center; color:var(--color-text-faint); font-size:12px; padding:32px 0; border-top:1px solid var(--color-border-light); margin-top:24px; }

/* ── 排盘存储 ── */
.storage-info { font-size:12px; color:var(--color-text-sec); overflow:hidden; }
.storage-bar { background:var(--color-border-light); border-radius:8px; height:16px; margin:10px 0; overflow:hidden; }
.storage-used { height:100%; background:linear-gradient(90deg, var(--color-gold), #f0d060); border-radius:8px; transition:width 0.3s; }

/* ── 可见性由 JS 切换 class 控制 ── */
.card-hidden { display:none !important; }

/* ── 内联样式提取 ── */
.order-modal-box-inner { position:relative; }
.detail-content-header { font-weight:700; color:var(--color-text); margin-top:16px; margin-bottom:8px; }
.btn-register { margin-left:10px; background:linear-gradient(135deg,var(--color-gold),#B8860B); }
.user-meta .uphone, .user-meta .uemail { font-size:11px; color:#8899aa; }
.user-meta .uemail { margin-top:2px; }
.order-empty { text-align:center; color:var(--color-text-faint); padding:20px 0; font-size:13px; }

/* ── 手机端样式已迁移至 wode/css/wode-mob.css ── */

/* ═══════════════════════════════════════════════════════════════
   Dark 模式
   ═══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .user-top {
  background: linear-gradient(135deg, #1a1030 0%, #201840 50%, #181230 100%);
}
html[data-theme="dark"] .user-meta .uid,
html[data-theme="dark"] .uphone,
html[data-theme="dark"] .user-meta .uphone,
html[data-theme="dark"] .user-meta .uemail,
html[data-theme="dark"] .user-meta .vip-tag.free { color: #b894d8; }
html[data-theme="dark"] .btn-upgrade { color: #fff; }
html[data-theme="dark"] .order-item:hover { background: #201840; }
html[data-theme="dark"] .order-modal-box .detail-content { background: #201840; border-color: #2a1f4a; }
html[data-theme="dark"] .grid-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,.3); }
html[data-theme="dark"] .asset-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,.3); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .grid-item,
html[data-theme="dark"] .asset-item,
html[data-theme="dark"] .oi-icon,
html[data-theme="dark"] .order-modal-box { border-color: #9a8ab8; }
html[data-theme="dark"] .order-item,
html[data-theme="dark"] .order-modal-box h3 { border-bottom-color: #9a8ab8; }
html[data-theme="dark"] .footer { border-top-color: #9a8ab8; }
html[data-theme="dark"] .oi-view-btn { background: #7b5ea7; }
html[data-theme="dark"] .oi-status.paid { background: rgba(123,94,167,.18); color: #b894d8; }
html[data-theme="dark"] .oi-del-btn { background: transparent; color: #e06060; border-color: #e06060; }