:root{
    --c-bg:#00131b;
    --c-card:#0b2837;
    --c-card-2:#0e3247;
    --c-border:#1b3c51;
    --c-text:#e6f0f5;
    --c-sub:#9fb7c4;
    --c-accent:#ff8531;
    --c-primary:#ffa600;
    --c-danger:#ff6361;
    --c-success:#1ec28b;
    --c-pink:#bc5090;
    --c-blue:#003f5c;
    --rad:14px;
    --shadow:0 10px 30px rgba(0,0,0,.35);
}
/* 本地字体注册：与 language.js 的 LANGUAGE_TO_FONT 名称严格一致 */
@font-face{
    font-family:'KazakSoft Asilya';
    src:url('font/KazakhSoftAsilya.ttf') format('truetype');
    font-display: swap;
}
@font-face{
    font-family:'Microsoft Uighur';
    src:url('font/msuighur.ttf') format('truetype');
    font-display: swap;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    background:linear-gradient(180deg,#00202e 0%, #00131b 100%);
    color:var(--c-text);
    font-family: 'Noto Sans SC', system-ui, sans-serif;
    overflow-x:hidden;
}
.hidden{display:none!important}
.topbar{
    height:64px;
    padding:0 16px;
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--c-border);
    background:rgba(0,19,27,.6);
    backdrop-filter: blur(8px);
    position:sticky;top:0;z-index:10;
    font-size:14px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
    width:28px;height:28px;border-radius:8px;
    background: conic-gradient(from 0deg, var(--c-accent), var(--c-primary), var(--c-pink), var(--c-blue));
    box-shadow: 0 0 20px rgba(255,166,0,.4), inset 0 0 10px rgba(0,0,0,.6);
}
.brand-name{font-weight:700;letter-spacing:.5px}
.spacer{flex:1}
.top-actions{display:flex;align-items:center;gap:10px}
.top-actions{flex-wrap:nowrap}
.top-actions > *{flex:0 0 auto}
.balance-area{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.balance-area span,#balance-amount{display:inline-block;white-space:nowrap}
.top-actions .btn,.top-actions .icon-btn{max-width:100%}
.user-chip{
    margin-left:8px;
    padding:6px 10px;border:1px solid var(--c-border);
    border-radius:999px;background:rgba(11,40,55,.6);
    display:flex;align-items:center;gap:8px
}
.btn{
    padding:10px 14px;border-radius:12px;
    background:#0f2b3a;border:1px solid var(--c-border);color:var(--c-text);
    cursor:pointer;transition:.2s ease;box-shadow:var(--shadow);
}
.btn:hover{transform:translateY(-1px);border-color:var(--c-accent)}
.btn-primary{
    background:linear-gradient(180deg,var(--c-primary),#ffb93c);
    color:#1b1400;border:none;
}
.btn-accent{
    background:linear-gradient(180deg,var(--c-accent),#ff9f64);
    color:#1e0d00;border:none;
}
.btn-xl{width:100%;padding:14px 16px;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.btn-sub{font-size:12px;opacity:.9}
.icon-btn{
    padding:6px 10px;border-radius:10px;background:transparent;border:1px solid var(--c-border);color:var(--c-text);cursor:pointer
}
.layout{
    display:grid;
    grid-template-columns: 1.2fr .8fr;
    gap:16px;padding:16px;max-width:1300px;margin:0 auto;
}
.left-panel,.right-panel{min-height:calc(100vh - 64px - 32px)}
.panel-card{
    background:linear-gradient(180deg,var(--c-card) 0%, #092231 100%);
    border:1px solid var(--c-border);border-radius:var(--rad);padding:16px;box-shadow:var(--shadow);
}
.panel-card.secondary{margin-top:16px;background:linear-gradient(180deg,var(--c-card-2), #0b2a3a)}
.panel-card h3{margin:0 0 12px 0}
label{display:block;margin:14px 0 8px 0;color:var(--c-sub)}
textarea{
    width:100%;resize:vertical;min-height:100px;border-radius:12px;border:1px solid var(--c-border);
    background:#071e2a;color:var(--c-text);padding:12px;outline:none;
}
select {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--c-border);
    background: #082332;
    color: var(--c-text);
    height: 48px; /* 统一高度 */
    box-sizing: border-box;
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px;margin-bottom: 10px;}
.segmented {
    display: flex;
    gap: 8px;
    background: #0a2534;
    padding: 6px;
    border-radius: 12px;
    border: 1px solid var(--c-border);
    height: 48px; /* 统一高度 */
    box-sizing: border-box;
}
.seg-item{
    flex:1;padding:10px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--c-text);cursor:pointer
}
.seg-item.active{background:#0f3043;border-color:var(--c-accent);box-shadow:0 0 0 2px rgba(255,133,49,.15) inset}
.hint{color:var(--c-danger);margin-top:8px;display:none}


.ratio-icon {
    display: inline-block;
    margin-right: 6px;
    border-radius: 2px;
    background: var(--c-accent);
    vertical-align: middle; /* 确保垂直居中对齐 */
}

.ratio-icon.landscape {
    width: 16px;
    height: 9px;
}

.ratio-icon.portrait {
    width: 9px;
    height: 16px;
    vertical-align: middle; /* 确保与文本垂直居中 */
}

/* 为宽高比按钮添加图标 
#ratio-group .seg-item[data-ratio="16:9"]::before {
    content: "⬜"; 
    margin-right: 6px;
    font-size: 12px;
    vertical-align: middle;
}

#ratio-group .seg-item[data-ratio="9:16"]::before {
    content: "⬛"; 
    margin-right: 6px;
    font-size: 10px;
    vertical-align: middle;
    transform: scale(0.8, 1.2); 
}
*/

.input-area{position:relative}
.clear-btn{
    position:absolute;right:8px;top:8px;
    width:28px;height:28px;border-radius:8px;border:1px solid var(--c-border);
    background:#0b2837;color:var(--c-text);cursor:pointer
}
.image-uploader{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.img-preview{display:flex;align-items:center;gap:8px;border:1px dashed var(--c-border);padding:6px;border-radius:10px;background:#071e2a}
.img-preview img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--c-border)}

/* 续集通知样式 */
.sequel-notification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 133, 49, 0.1);
    border: 1px solid var(--c-accent);
    margin-top: 8px;
    color: var(--c-accent);
    font-size: 14px;
}

.sequel-text {
    flex: 1;
    font-weight: 500;
}

.sequel-cancel {
    padding: 4px 6px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--c-accent);
    color: var(--c-accent);
    cursor: pointer;
    font-size: 12px;
    margin-left: 8px;
}

.sequel-cancel:hover {
    background: rgba(255, 133, 49, 0.1);
}

/* 续集按钮样式 - 使用badge样式 */
.task-sequel {
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 4px;
}

.task-sequel:hover {
    transform: translateY(-1px);
}

/* 过期续集按钮样式 */
.task-sequel.sequel-expired {
    border-color: var(--c-sub) !important;
    color: var(--c-sub) !important;
    opacity: 0.6;
}

.task-sequel.sequel-expired:hover {
    transform: none;
    opacity: 0.6;
}

/* 呼吸灯动画 */
@keyframes breathing {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 133, 49, 0.3), inset 0 0 10px rgba(255, 133, 49, 0.1);
        border-color: var(--c-accent);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 133, 49, 0.6), inset 0 0 15px rgba(255, 133, 49, 0.2);
        border-color: rgba(255, 133, 49, 0.8);
    }
}

.task.selected-for-sequel {
    animation: breathing 2s ease-in-out infinite;
    border-color: var(--c-accent) !important;
    background: rgba(255, 133, 49, 0.05) !important;
}

/* .tasks{display:flex;flex-direction:column;gap:12px}
.task{
    display:grid;grid-template-columns: 64px 1fr auto;gap:12px;align-items:center;
    padding:10px;border:1px solid var(--c-border);border-radius:12px;background:rgba(8,35,50,.6)
}
.task.success{grid-template-columns: 1fr auto}
.task .thumb{
    width:64px;height:40px;border-radius:8px;background:#0a1d27;display:flex;align-items:center;justify-content:center;color:#7aa0b3;font-size:12px;border:1px dashed var(--c-border)
}
.task .meta{display:flex;flex-direction:column;gap:4px}
.task .meta .prompt-line{
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical
}
.task .actions{display:flex;gap:8px}
.error-reason {
    margin-top: 4px;
    font-size: 12px;
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    border-left: 3px solid #ff6b6b;
} */

.tasks {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 减小间隙让卡片更紧凑 */
    padding: 8px 0;
}

.task {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--c-border);
    border-radius: 12px;
    background: rgba(8, 35, 50, .6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    max-height: 60px; /* 初始高度 */
    overflow: hidden;
}

/* 悬停时的展开效果 */
.task:hover {
    max-height: 200px; /* 展开后的最大高度 */
    background: rgba(8, 35, 50, .8);
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    z-index: 10; /* 确保悬停的卡片在最上层 */
    margin: 8px 0; /* 为展开留出空间 */
}

/* 成功状态的特殊处理 */
.task.success {
    grid-template-columns: 1fr auto;
    max-height: 80px; /* 成功状态稍高一些 */
}

.task.success:hover {
    max-height: 220px;
}

/* 缩略图样式 */
.task .thumb {
    width: 64px;
    height: 40px;
    border-radius: 8px;
    background: --c-card;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #7aa0b3;
    font-size: 12px;
    border: 1px dashed var(--c-border);
    transition: all 0.3s ease;
}

.task:hover .thumb {
    transform: scale(1.05);
    background: #0f2a3a;
}

/* 元信息区域 */
.task .meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* 确保文本截断生效 */
}

.task .meta .prompt-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    transition: all 0.3s ease;
}

/* 悬停时显示更多文本 */
.task:hover .meta .prompt-line {
    -webkit-line-clamp: 3; /* 悬停时显示3行 */
    white-space: normal;
}

/* 提示信息 */
.task .hint.meta-line {
    font-size: 11px;
    color: --c-sub;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.task:hover .hint.meta-line {
    opacity: 1;
}

/* 视频元素 */
.task .video {
    max-height: 0;
    opacity: 0;
    transition: all 0.3s ease;
    border-radius: 6px;
    margin-top: 0;
}

.task:hover .video:not(.hidden) {
    max-height: 120px;
    opacity: 1;
    margin-top: 8px;
}

/* 操作区域 */
.task .actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.task:hover .actions {
    opacity: 1;
}

/* 徽章样式 */
.task .badge {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.task:hover .badge {
    transform: translateY(-1px);
}

/* 错误原因 */
.error-reason {
    margin-top: 4px;
    font-size: 12px;
    color: --c-danger;
    background: rgba(255, 107, 107, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    border-left: 3px solid --c-danger;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.task:hover .error-reason:not(.hidden) {
    max-height: 100px;
    opacity: 1;
    margin-top: 8px;
}

/* 下载按钮 - 使用badge样式 */
.task-download {
    cursor: pointer;
    transition: all 0.3s ease;
}

.task-download:hover {
    transform: translateY(-1px);
}

/* 确保隐藏类正常工作 */
.hidden {
    display: none !important;
}

/* 为卡片添加层叠效果 */
.task {
    transform-origin: center top;
}

/* 可选：为相邻卡片添加微妙的反应 */
.task:hover + .task {
    transform: translateY(10px);
}

/* 进度环容器 */
.progress-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: 8px;
}

/* 进度环SVG */
.progress-circle {
    position: absolute;
    transform: rotate(-90deg); /* 从顶部开始 */
}

/* 进度背景环 */
.progress-bg {
    stroke: rgba(255, 255, 255, 0.1);
}

/* 进度条环 */
.progress-bar {
    stroke: var(--c-accent, --c-primary);
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease;
    animation: progressPulse 2s infinite;
}

/* 进度文本 */
.progress-text {
    position: absolute;
    font-size: 10px;
    font-weight: 500;
    color: var(--c-accent, --c-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 进度环脉动动画 */
@keyframes progressPulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 响应式调整 */
@media (max-width: 768px) {
    .progress-ring {
        width: 32px;
        height: 32px;
    }
    
    .progress-circle {
        width: 32px;
        height: 32px;
    }
    
    .progress-bg,
    .progress-bar {
        cx: 16;
        cy: 16;
        r: 13;
    }
    
    .progress-text {
        font-size: 9px;
    }
}

/* 规则说明区域 */
.rules-section {
    margin-top: 20px;
    padding: 20px;
    background: rgba(8, 35, 50, 0.4);
    border-radius: 12px;
    border: 1px solid var(--c-border);
}

.rules-section h4 {
    color: var(--c-text);
    margin-bottom: 20px;
    font-size: 18px;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 10px;
}

.rule-item {
    margin-bottom: 20px;
}

.rule-item h5 {
    color: var(--c-accent);
    font-size: 14px;
    margin-bottom: 8px;
}

.rule-item p {
    color: var(--c-sub);
    font-size: 14px;
    margin: 0;
}

/* 定价表格 */
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 14px;
}

.pricing-table th,
.pricing-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--c-border);
}

.pricing-table th {
    background: rgba(8, 35, 50, 0.6);
    color: var(--c-accent);
    font-weight: 500;
}

.pricing-table td {
    color: var(--c-text);
}

.pricing-table tbody tr:hover {
    background: rgba(8, 35, 50, 0.3);
}

/* 规则列表 */
.rule-item ul {
    color: var(--c-sub);
    font-size: 14px;
    margin: 0;
    padding-left: 20px;
}

.rule-item li {
    margin-bottom: 5px;
    line-height: 1.4;
}


.badge{padding:4px 8px;border-radius:999px;font-size:12px;border:1px solid var(--c-border);color:var(--c-sub)}
.badge.success{border-color:var(--c-success);color:var(--c-success);border-radius:999px}
.badge.failed{border-color:var(--c-danger);color:var(--c-danger)}
.badge.processing{border-color:#ffd380;color:#ffd380}
.video{
    width:100%;max-width:100%;border-radius:10px;border:1px solid var(--c-border);background:#000;display:block
}
.btn-outline-success{
    padding:6px 12px;border-radius:999px;border:1px solid var(--c-success);background:transparent;color:var(--c-success);cursor:pointer;
    font-size:12px;line-height:1.2;
    transition:.2s ease
}
.btn-outline-success:hover{background:rgba(30,194,139,.08)}

/* 充值弹窗 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:20}
.modal-card{width:min(880px,96vw);border-radius:16px;border:1px solid var(--c-border);background:linear-gradient(180deg,var(--c-card), #0b2a3a);box-shadow:var(--shadow)}
.modal-header,.modal-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--c-border)}
.modal-footer{border-top:1px solid var(--c-border);border-bottom:none}
.modal-body{
    padding:14px;
    max-height: 60vh;
    overflow-y: auto; 
}
.pricing{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}
.modal-tabs{gap:8px}
.tab-btn{
    padding:8px 10px;border-radius:10px;border:1px solid var(--c-border);background:#0c2a3a;color:var(--c-text);cursor:pointer
}
.tab-btn.active{border-color:var(--c-accent);background:#123a51}
.form{display:flex;flex-direction:column;gap:8px}
.form input{
    width:100%;padding:10px;border-radius:10px;border:1px solid var(--c-border);background:#082332;color:var(--c-text);outline:none
}
.price-card{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px;border:1px solid var(--c-border);border-radius:12px;background:#092637
}
.price-meta{display:flex;flex-direction:column}
.price-cta .btn{min-width:120px}
/* .qr-area{display:flex;align-items:center;justify-content:center} */
.qr-box{width:220px;height:220px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.qr-box img{width:100%;height:100%;object-fit:cover}
.qr-tip{margin-top:8px;text-align:center;color:var(--c-sub)}

/* 浮动反馈按钮 */
.floating-btn{
    position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;
    background:linear-gradient(180deg,var(--c-accent), #ff9f64);color:#1b1400;border:none;cursor:pointer;box-shadow:var(--shadow);z-index:15;font-weight:700
}


/* 语言选择覆盖层 */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:30}
.overlay-card{width:min(520px,94vw);border-radius:16px;border:1px solid var(--c-border);background:linear-gradient(180deg,var(--c-card), #0b2a3a);padding:16px;box-shadow:var(--shadow)}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.lang-btn{width:100%}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0b2837;border:1px solid var(--c-border);color:var(--c-text);padding:10px 14px;border-radius:999px;box-shadow:var(--shadow);z-index:25}

/* 全局加载动画 */
#global-loader{
    position:fixed;inset:0;background: radial-gradient(1000px 600px at 20% -10%, #003f5c 0%, rgba(0,0,0,0) 60%), #00131b;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:100;color:var(--c-text)
}
.loader-logo{
    width:68px;height:68px;border-radius:16px;
    background:linear-gradient(135deg,#ffd380, #ffa600 40%, #ff8531 70%, #bc5090);
    box-shadow:0 0 40px rgba(255,166,0,.5), inset 0 0 20px rgba(0,0,0,.4);
    display:flex;align-items:center;justify-content:center;
    color:#1b1400;font-weight:800;font-size:24px;letter-spacing:1px
}
.loader-orbital{position:relative;width:120px;height:120px}
.loader-orbital span{
    position:absolute;inset:0;border-radius:50%;
    border-top:3px solid rgba(255,133,49,.8);
    border-right:3px solid rgba(255,166,0,.3);
    border-bottom:3px solid rgba(188,80,144,.2);
    border-left:3px solid rgba(0,0,0,0);
    animation:spin 1.2s linear infinite
}
.loader-orbital span:nth-child(2){inset:10px;animation-duration:1.6s;opacity:.8}
.loader-orbital span:nth-child(3){inset:20px;animation-duration:2s;opacity:.6}
.loader-text{color:var(--c-sub)}


/* 充值等待遮罩 */
.deposit-waiting-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.deposit-waiting-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 40px;
    background: var(--c-card);
    border-radius: 16px;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow);
}

.deposit-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top: 4px solid var(--c-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.deposit-text {
    color: var(--c-text);
    font-size: 16px;
    font-weight: 500;
}

/* 支付方式选择 - 更紧凑的布局 */
.payment-methods {
    display: flex;
    gap: 8px; /* 从 12px 减小到 8px */
    margin: 8px 0; /* 从 16px 减小到 8px */
    justify-content: center; /* 居中对齐 */
}

.payment-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px; /* 从 8px 减小到 4px */
    padding: 8px 12px; /* 从 12px 减小到 8px */
    border: 1px solid var(--c-border); /* 从 2px 减小到 1px */
    border-radius: 8px; /* 从 12px 减小到 8px */
    background: transparent;
    color: var(--c-text);
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px; /* 添加字体大小控制 */
}

.payment-btn:hover {
    border-color: var(--c-accent);
}

.payment-btn.active {
    border-color: var(--c-accent);
    background: rgba(255, 133, 49, 0.1);
}

.payment-icon {
    font-size: 14px; /* 从 18px 减小到 14px */
}

/* 二维码容器保持不变 */
#qr-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

#qr-container canvas {
    border-radius: 8px;
    border: 1px solid var(--c-border);
}

/* 隐藏二维码区域，生成时显示 */
.qr-area {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column;
    padding: 16px;
    text-align: center;
}
/* 二维码等待状态 */
.qr-waiting {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
}

.qr-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 133, 49, 0.2);
    border-top: 3px solid var(--c-accent);
    border-radius: 50%;
    animation: qrSpin 1s linear infinite;
}

@keyframes qrSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.qr-waiting-text {
    color: var(--c-text);
    font-size: 14px;
    text-align: center;
}


@keyframes spin{to{transform:rotate(360deg)}}

/* 响应式 */
@media (max-width: 980px){
    .layout{grid-template-columns:1fr;gap:12px}
    .left-panel,.right-panel{min-height:auto}
    .pricing{grid-template-columns:1fr}
}
@media (max-width: 640px){
    .topbar{font-size:13px}
    .btn{padding:8px 10px;font-size:13px}
    .icon-btn{padding:6px 8px;font-size:13px}
    .top-actions{gap:8px;flex-wrap:nowrap}
    .user-chip{padding:4px 8px}
}
@media (max-width: 520px){
    .topbar{padding:0 8px}
    .topbar{font-size:12px}
    .brand-name{display:none}
    .top-actions{flex-wrap:nowrap;gap:6px}
    .balance-area{gap:8px}
    .btn{padding:6px 8px;font-size:12px;line-height:1}
    .icon-btn{padding:4px 6px;font-size:12px;line-height:1}
    #btn-recharge{padding-inline:6px}
    #balance-amount{max-width:72px;overflow:hidden;text-overflow:ellipsis}
    .user-chip{padding:4px 6px;gap:6px}
}