/* MXGF 授权中心 — 大字体 + 主题色适配 */
@keyframes mxgf-spin { to { transform: rotate(360deg); } }

.mxgf-root {
    --mx-bg: #1a1a2e;
    --mx-card: rgba(255,255,255,0.05);
    --mx-card-h: rgba(255,255,255,0.09);
    --mx-nav: rgba(26,26,46,0.92);
    --mx-border: rgba(255,255,255,0.08);
    --mx-primary: var(--theme-color, #f04494);
    --mx-text: #f0f0f5;
    --mx-text2: #c0c0d8;
    --mx-muted: #8888a8;
    --mx-r: 16px;
    --mx-rs: 10px;
    --mx-shadow: 0 8px 32px rgba(0,0,0,0.45);
    --mx-font: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-family: var(--mx-font);
    background: var(--mx-bg);
    color: var(--mx-text);
    min-height: 60vh;
    line-height: 1.7;
    background-image: radial-gradient(ellipse at 20% 50%, rgba(240,68,148,0.06) 0%, transparent 70%), radial-gradient(ellipse at 80% 20%, rgba(240,68,148,0.04) 0%, transparent 60%), linear-gradient(180deg, #1a1a2e 0%, #16162a 100%);
    background-attachment: fixed;
}
.mxgf-root * { margin:0; padding:0; box-sizing:border-box; }
.mxgf-root a { color: var(--mx-primary); text-decoration: none; }
.mxgf-root ::-webkit-scrollbar { width:6px; height:6px; }
.mxgf-root ::-webkit-scrollbar-thumb { background: var(--mx-primary); border-radius:10px; }
.mxgf-root .container { max-width:1200px; margin:0 auto; padding:0 24px; }

.mxgf-root .navbar { position:sticky; top:0; z-index:100; background:var(--mx-nav); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--mx-border); padding:0 24px; height:68px; display:flex; align-items:center; justify-content:space-between; }
.mxgf-root .navbar .container { display:flex; align-items:center; justify-content:space-between; width:100%; padding:0; }
.mxgf-root .nav-left { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.mxgf-root .nav-logo { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.2rem; color:var(--mx-text); }
.mxgf-root .nav-logo .logo-icon { width:36px; height:36px; background:var(--mx-primary); border-radius:var(--mx-rs); display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 0 24px rgba(240,68,148,0.3); }
.mxgf-root .nav-logo .logo-divider { color:var(--mx-muted); font-weight:300; }
.mxgf-root .nav-logo .logo-sub { font-weight:400; color:var(--mx-text2); font-size:1rem; }
.mxgf-root .nav-tabs { display:flex; gap:4px; background:rgba(255,255,255,0.04); padding:4px; border-radius:var(--mx-rs); border:1px solid var(--mx-border); }
.mxgf-root .nav-tab { padding:8px 20px; border-radius:8px; font-size:0.95rem; font-weight:500; color:var(--mx-text2); cursor:pointer; transition:all 0.25s; border:none; background:transparent; font-family:var(--mx-font); white-space:nowrap; display:inline-flex; align-items:center; gap:6px; }
.mxgf-root .nav-tab:hover { color:var(--mx-text); background:rgba(255,255,255,0.04); }
.mxgf-root .nav-tab.active { color:#fff; background:var(--mx-primary); box-shadow:0 4px 20px rgba(240,68,148,0.3); }
.mxgf-root .nav-right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.mxgf-root .nav-user { display:flex; align-items:center; gap:10px; padding:4px 14px 4px 4px; border-radius:100px; background:rgba(255,255,255,0.04); border:1px solid var(--mx-border); }
.mxgf-root .nav-user .avatar { width:34px; height:34px; border-radius:50%; background:var(--mx-primary); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; color:#fff; flex-shrink:0; }
.mxgf-root .nav-user .uname { font-size:0.95rem; font-weight:500; color:var(--mx-text); }
.mxgf-root .nav-user .vip-tag { font-size:0.7rem; padding:2px 10px; border-radius:100px; background:var(--mx-primary); color:#fff; font-weight:600; }

.mxgf-root .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 22px; border-radius:var(--mx-rs); font-size:0.95rem; font-weight:600; border:none; cursor:pointer; transition:all 0.25s; font-family:var(--mx-font); background:transparent; color:var(--mx-text); }
.mxgf-root .btn-primary { background:var(--mx-primary); color:#fff; box-shadow:0 4px 20px rgba(240,68,148,0.3); }
.mxgf-root .btn-primary:hover { opacity:0.88; transform:translateY(-2px); }
.mxgf-root .btn-outline { border:1.5px solid var(--mx-border); color:var(--mx-text2); }
.mxgf-root .btn-outline:hover { border-color:var(--mx-primary); color:var(--mx-primary); }
.mxgf-root .btn-sm { font-size:0.88rem; padding:7px 16px; }
.mxgf-root .btn-block { width:100%; }
.mxgf-root .btn:disabled { opacity:0.5; cursor:not-allowed; }

.mxgf-root .user-banner { margin:28px 0 32px; padding:32px; background:linear-gradient(135deg, rgba(240,68,148,0.10), rgba(26,26,46,0.80)); border-radius:var(--mx-r); border:1px solid var(--mx-border); box-shadow:var(--mx-shadow); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; position:relative; overflow:hidden; }
.mxgf-root .banner-left { display:flex; align-items:center; gap:18px; flex-wrap:wrap; position:relative; z-index:1; }
.mxgf-root .banner-avatar { width:64px; height:64px; border-radius:50%; background:var(--mx-primary); display:flex; align-items:center; justify-content:center; font-size:1.8rem; font-weight:700; color:#fff; flex-shrink:0; box-shadow:0 0 40px rgba(240,68,148,0.3); }
.mxgf-root .banner-info { display:flex; flex-direction:column; gap:4px; }
.mxgf-root .banner-name { font-size:1.6rem; font-weight:700; }
.mxgf-root .banner-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-size:1rem; color:var(--mx-text2); }
.mxgf-root .banner-meta .field-label { font-size:0.7rem; text-transform:uppercase; color:var(--mx-muted); }
.mxgf-root .banner-meta .vip-level { font-weight:600; color:var(--mx-primary); font-size:1.05rem; }
.mxgf-root .banner-stats { display:flex; gap:36px; position:relative; z-index:1; flex-wrap:wrap; }
.mxgf-root .stat-item { text-align:center; }
.mxgf-root .stat-item .stat-number { font-size:2rem; font-weight:800; color:var(--mx-primary); line-height:1.2; }
.mxgf-root .stat-item .stat-label { font-size:0.85rem; color:var(--mx-muted); display:block; margin-top:2px; }

.mxgf-root .tab-content { display:none; animation:mxgf-fade-up 0.35s ease; }
.mxgf-root .tab-content.active { display:block; }
@keyframes mxgf-fade-up { 0%{opacity:0;transform:translateY(12px)} 100%{opacity:1;transform:translateY(0)} }
.mxgf-root .section-title { font-size:1.3rem; font-weight:700; margin-bottom:20px; color:var(--mx-text); display:flex; align-items:center; gap:10px; }

.mxgf-root .keys-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:20px; }
.mxgf-root .key-card { background:var(--mx-card); border:1px solid var(--mx-border); border-radius:var(--mx-r); padding:24px; transition:all 0.25s; box-shadow:var(--mx-shadow); }
.mxgf-root .key-card:hover { background:var(--mx-card-h); border-color:var(--mx-primary); transform:translateY(-4px); }
.mxgf-root .key-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.mxgf-root .key-code-wrap { display:flex; align-items:center; gap:8px; font-family:'SF Mono',Consolas,monospace; font-size:1rem; font-weight:600; color:var(--mx-text); background:rgba(0,0,0,0.3); padding:6px 14px; border-radius:8px; border:1px solid var(--mx-border); }
.mxgf-root .code-text { user-select:all; }
.mxgf-root .copy-btn { background:none; border:none; color:var(--mx-muted); cursor:pointer; padding:2px; transition:all 0.25s; }
.mxgf-root .copy-btn:hover { color:var(--mx-primary); }
.mxgf-root .badge-status { font-size:0.8rem; padding:4px 14px; border-radius:100px; font-weight:600; border:1px solid transparent; display:inline-flex; align-items:center; gap:4px; }
.mxgf-root .badge-status.active { background:rgba(74,222,128,0.15); color:#4ade80; border-color:rgba(74,222,128,0.3); }
.mxgf-root .badge-status.unused { background:rgba(251,191,36,0.15); color:#fbbf24; border-color:rgba(251,191,36,0.3); }
.mxgf-root .badge-status.suspended { background:rgba(248,113,113,0.15); color:#f87171; border-color:rgba(248,113,113,0.3); }
.mxgf-root .badge-status.expired { background:rgba(107,114,128,0.2); color:var(--mx-muted); }
.mxgf-root .key-body { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.mxgf-root .key-row { display:flex; justify-content:space-between; align-items:center; font-size:1rem; color:var(--mx-text2); padding:4px 0; }
.mxgf-root .key-row .field-label { font-size:0.7rem; text-transform:uppercase; color:var(--mx-muted); }
.mxgf-root .key-value { color:var(--mx-text); font-weight:500; font-size:1rem; }
.mxgf-root .key-value.permanent { color:#4ade80; }
.mxgf-root .key-device-info { display:flex; align-items:center; gap:6px; font-size:1rem; }
.mxgf-root .device-count { font-weight:700; color:var(--mx-text); }
.mxgf-root .device-max { color:var(--mx-muted); }
.mxgf-root .key-actions { display:flex; gap:10px; margin-top:18px; padding-top:16px; border-top:1px solid var(--mx-border); flex-wrap:wrap; }
.mxgf-root .key-safety { font-size:0.85rem; color:var(--mx-muted); margin-top:12px; display:flex; align-items:center; gap:6px; opacity:0.7; }

.mxgf-root .empty-state { text-align:center; padding:70px 20px; color:var(--mx-muted); }
.mxgf-root .empty-state .empty-icon { margin-bottom:16px; opacity:0.4; display:flex; justify-content:center; }
.mxgf-root .empty-state .empty-text { font-size:1.2rem; }
.mxgf-root .empty-state .empty-hint { font-size:1rem; color:var(--mx-muted); margin-top:6px; }

.mxgf-root .plans-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:24px; }
.mxgf-root .plan-card { background:var(--mx-card); border:1px solid var(--mx-border); border-radius:var(--mx-r); padding:32px 28px; transition:all 0.25s; box-shadow:var(--mx-shadow); position:relative; display:flex; flex-direction:column; }
.mxgf-root .plan-card:hover { transform:translateY(-4px); border-color:var(--mx-primary); }
.mxgf-root .plan-card.featured { border-color:var(--mx-primary); box-shadow:var(--mx-shadow), 0 0 40px rgba(240,68,148,0.15); }
.mxgf-root .plan-card.featured::before { content:'★ 推荐'; position:absolute; top:-1px; right:24px; background:var(--mx-primary); color:#fff; font-size:0.75rem; font-weight:600; padding:3px 16px; border-radius:0 0 8px 8px; }
.mxgf-root .plan-name { font-size:1.4rem; font-weight:700; margin-bottom:4px; }
.mxgf-root .plan-desc { font-size:1rem; color:var(--mx-text2); margin-bottom:18px; }
.mxgf-root .plan-price { font-size:2.5rem; font-weight:800; color:var(--mx-text); margin:8px 0 4px; }
.mxgf-root .plan-price .currency { font-size:1.4rem; font-weight:600; color:var(--mx-text2); margin-right:2px; }
.mxgf-root .plan-features { list-style:none; padding:0; margin:14px 0 22px; font-size:1.05rem; color:var(--mx-text2); flex:1; }
.mxgf-root .plan-features li { padding:5px 0; display:flex; align-items:center; gap:8px; }
.mxgf-root .plan-footer-text { margin-top:22px; font-size:0.9rem; color:var(--mx-muted); text-align:center; border-top:1px solid var(--mx-border); padding-top:18px; }

.mxgf-root .device-selector { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:20px; background:var(--mx-card); padding:16px 22px; border-radius:var(--mx-rs); border:1px solid var(--mx-border); }
.mxgf-root .device-selector label { font-size:1rem; color:var(--mx-text2); font-weight:500; }
.mxgf-root .device-selector select { background:rgba(0,0,0,0.3); border:1px solid var(--mx-border); border-radius:8px; padding:10px 18px; color:var(--mx-text); font-size:1rem; font-family:var(--mx-font); outline:none; cursor:pointer; min-width:220px; }
.mxgf-root .device-selector select:focus { border-color:var(--mx-primary); }
.mxgf-root .device-selector select option { background:#1a1a2e; color:var(--mx-text); }
.mxgf-root .devices-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }
.mxgf-root .device-card { background:var(--mx-card); border:1px solid var(--mx-border); border-radius:var(--mx-rs); padding:20px; transition:all 0.25s; box-shadow:var(--mx-shadow); }
.mxgf-root .device-card:hover { background:var(--mx-card-h); border-color:var(--mx-primary); }
.mxgf-root .device-id { font-family:'SF Mono',Consolas,monospace; font-size:0.95rem; font-weight:600; color:var(--mx-text); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.mxgf-root .device-id .field-label { font-size:0.65rem; text-transform:uppercase; color:var(--mx-muted); font-family:var(--mx-font); }
.mxgf-root .device-status { display:inline-flex; align-items:center; gap:6px; font-size:0.85rem; font-weight:600; padding:3px 14px; border-radius:100px; margin-bottom:12px; }
.mxgf-root .device-status.online { color:#4ade80; background:rgba(74,222,128,0.1); }
.mxgf-root .device-status.offline { color:var(--mx-muted); background:rgba(107,114,128,0.15); }
.mxgf-root .status-dot { width:8px; height:8px; border-radius:50%; }
.mxgf-root .device-status.online .status-dot { background:#4ade80; box-shadow:0 0 12px rgba(74,222,128,0.4); }
.mxgf-root .device-status.offline .status-dot { background:var(--mx-muted); }
.mxgf-root .device-details { font-size:0.95rem; color:var(--mx-text2); display:flex; flex-direction:column; gap:6px; }
.mxgf-root .detail-row { display:flex; justify-content:space-between; padding:4px 0; border-bottom:1px solid var(--mx-border); }
.mxgf-root .detail-row .field-label { font-size:0.7rem; text-transform:uppercase; color:var(--mx-muted); }
.mxgf-root .detail-value { color:var(--mx-text); font-weight:500; }
.mxgf-root .device-empty { text-align:center; padding:56px 20px; color:var(--mx-muted); }
.mxgf-root .device-empty .empty-icon { margin-bottom:12px; opacity:0.3; display:flex; justify-content:center; }

.mxgf-root .toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(80px); background:rgba(0,0,0,0.85); backdrop-filter:blur(12px); padding:14px 32px; border-radius:var(--mx-rs); border:1px solid var(--mx-border); color:var(--mx-text); font-size:1rem; font-weight:500; box-shadow:0 8px 40px rgba(0,0,0,0.6); opacity:0; pointer-events:none; transition:all 0.4s; z-index:999; display:flex; align-items:center; gap:8px; }
.mxgf-root .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width:820px) {
    .mxgf-root .navbar { height:auto; padding:12px 16px; flex-wrap:wrap; gap:10px; }
    .mxgf-root .nav-tabs { order:3; width:100%; justify-content:center; flex-wrap:wrap; }
    .mxgf-root .nav-tab { flex:1; min-width:60px; }
    .mxgf-root .user-banner { padding:20px; flex-direction:column; align-items:flex-start; gap:16px; }
    .mxgf-root .banner-stats { width:100%; justify-content:space-around; }
    .mxgf-root .keys-grid, .mxgf-root .plans-grid, .mxgf-root .devices-grid { grid-template-columns:1fr; }
    .mxgf-root .container { padding:0 16px; }
}