:root {
    --bg: #0f1117; --surface: #1a1d27; --surface2: #22263a;
    --border: #2e3354; --accent: #4f8ef7; --accent2: #7c5cfc;
    --success: #34d07f; --error: #f75a5a; --warn: #f7b740;
    --text: #e8eaf6; --text-dim: #8891b4; --text-faint: #4a5280;
    --bg-grid: rgba(46, 51, 84, 0.2);
    --modal-bg: rgba(0,0,0,.75);
}

[data-theme="light"] {
    --bg: #f5f7fa; --surface: #ffffff; --surface2: #f0f2f5;
    --border: #dcdfe6; --accent: #409eff; --accent2: #67c23a;
    --success: #67c23a; --error: #f56c6c; --warn: #e6a23c;
    --text: #303133; --text-dim: #606266; --text-faint: #909399;
    --bg-grid: rgba(220, 223, 230, 0.3);
    --modal-bg: rgba(255,255,255,.85);
}

*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;min-height:100vh;transition: background-color 0.3s, color 0.3s;}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(var(--bg-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bg-grid) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0;transition: 0.3s;}

.container{position:relative;z-index:1;max-width:800px;margin:0 auto;padding:40px 20px 80px;}

header{text-align:center;margin-bottom:30px;animation:fadeDown .7s ease both;}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(79,142,247,.1);border:1px solid rgba(79,142,247,.3);border-radius:100px;padding:4px 14px;font-size:11px;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;}
h1{font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;font-size:clamp(24px,5vw,40px);font-weight:700;background:linear-gradient(135deg,var(--text) 30%,var(--accent) 80%,var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;}
.subtitle{color:var(--text-dim);font-size:14px;font-weight:300;}

.warning-box {background-color: rgba(247, 90, 90, 0.1); border: 1px solid var(--error); padding: 16px 20px; border-radius: 12px; margin: 0 auto 24px auto; text-align: center; box-shadow: 0 4px 12px rgba(247,90,90,0.1); animation: fadeDown .5s ease both;}
.warning-box .title {color: var(--error); font-weight: bold; font-size: 15px; margin-bottom: 10px;}
.warning-box .details {font-size: 12px; color: var(--text-dim); display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; border-top: 1px solid rgba(247,90,90,0.2); padding-top: 10px;}

.affiliate-card{background:linear-gradient(135deg, var(--surface2) 0%, var(--surface) 100%);border:1px solid var(--accent);border-radius:12px;padding:16px;margin-bottom:24px;text-align:center;display:none;animation:fadeUp .7s ease both;}
.affiliate-card h3{font-size:14px;color:var(--accent);margin-bottom:6px;}
.affiliate-card p{font-size:12px;color:var(--text-dim);margin-bottom:10px;}
.affiliate-card a{display:inline-block;color:#fff;background:var(--accent);padding:6px 16px;border-radius:8px;text-decoration:none;font-size:12px;font-weight:600;}

.token-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:16px;animation:fadeUp .7s .1s ease both;}
.token-status{font-size:12px;color:var(--text-dim);}
.token-status.ok{color:var(--success);} .token-status.missing{color:var(--warn);}
.btn-sm{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:6px 14px;color:var(--text-dim);font-size:12px;cursor:pointer;transition:.15s;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;display:inline-flex;align-items:center;justify-content:center;}
.btn-sm:hover{border-color:var(--accent);color:var(--accent);}
.btn-sm.danger:hover{border-color:var(--error);color:var(--error);}

.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px;position:relative;overflow:hidden;animation:fadeUp .7s .2s ease both;transition: 0.3s;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5;}
.label{font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--text-dim);margin-bottom:10px;display:block;}
textarea, input[type="text"]{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;font-size:13px;outline:none;transition:.2s;}
textarea{resize:vertical;min-height:100px;line-height:1.6;}
textarea::placeholder, input::placeholder{color:var(--text-faint);}
textarea:focus, input[type="text"]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,142,247,.12);}

.actions{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:10px;flex-wrap:wrap;}
.btn{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:12px;padding:12px 28px;color:#fff;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;transition:.2s;}
.btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(79,142,247,.3);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}
.hint{font-size:12px;color:var(--text-faint);line-height:1.7;margin-top:10px;}

.type-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 14px;cursor:pointer;font-size:12px;color:var(--text-dim);transition:.15s;user-select:none;white-space:nowrap;}
.type-chip:hover{border-color:var(--accent);color:var(--accent);}
.type-chip input[type=checkbox]{accent-color:var(--accent);cursor:pointer;}
.type-chip:has(input:checked){border-color:var(--accent);color:var(--text);}

#batchPanel{display:none;margin-top:28px;animation:fadeUp .3s ease both;}
.batch-summary{background:var(--surface2);border:1px solid var(--border);border-radius:14px;padding:18px 22px;margin-bottom:16px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.batch-stat{display:flex;flex-direction:column;align-items:center;gap:2px;}
.batch-stat .num{font-size:24px;font-weight:700;line-height:1;}
.batch-stat .lbl{font-size:11px;color:var(--text-dim);}
.num-total{color:var(--text);} .num-done{color:var(--success);} .num-error{color:var(--error);} .num-pending{color:var(--accent);}
.overall-bar{flex:1;min-width:120px;}
.overall-bar .pw{background:var(--bg);border-radius:100px;height:6px;overflow:hidden;margin-bottom:6px;}
.overall-bar .pb{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .4s ease;}

.task-list{display:flex;flex-direction:column;gap:10px;}
.task-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px 18px;}
.task-item-header{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.task-item-title{flex:1;font-size:14px;font-weight:500;color:var(--text);line-height:1.4;word-break:break-all;}
.status-badge{font-size:11px;padding:3px 10px;border-radius:100px;font-weight:500;white-space:nowrap;flex-shrink:0;}
.status-pending{background:rgba(79,142,247,.12);color:var(--accent);border:1px solid rgba(79,142,247,.3);}
.status-done{background:rgba(52,208,127,.12);color:var(--success);border:1px solid rgba(52,208,127,.3);}
.status-error{background:rgba(247,90,90,.12);color:var(--error);border:1px solid rgba(247,90,90,.3);}
.task-item-bar{background:var(--bg);border-radius:100px;height:4px;overflow:hidden;margin-bottom:6px;}
.task-item-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s ease;}
.task-item-fill.error{background:var(--error);} .task-item-fill.done{background:var(--success);}
.task-item-foot{display:flex;align-items:center;justify-content:space-between;}
.task-item-msg{font-size:12px;color:var(--text-dim);word-break:break-all;}
.task-item-msg.error{color:var(--error);}
.dl-link{color:var(--accent);text-decoration:none;font-size:12px;padding:4px 12px;border:1px solid rgba(79,142,247,.3);border-radius:7px;cursor:pointer;background:transparent;}

.modal-backdrop{display:none;position:fixed;inset:0;background:var(--modal-bg);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center;padding:20px;}
.modal-backdrop.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:32px;max-width:540px;width:100%;animation:fadeUp .25s ease both; max-height: 90vh; overflow-y: auto;}

/* 微信遮罩层动画 */
@keyframes bounceArrow { 0% {transform: translateY(0);} 100% {transform: translateY(-15px);} }
.arrow-up { width: 50px; height: 50px; animation: bounceArrow 0.6s infinite alternate ease-in-out; margin-right: 20px; margin-bottom: 10px; }

footer{text-align:center;margin-top:56px;color:var(--text-faint);font-size:12px;line-height:2;}

@media(max-width:600px){
    .card{padding:20px 16px;}
    .batch-summary{gap:12px;justify-content:space-between;}
    .actions{flex-direction:column;align-items:stretch;}
    .btn{width:100%;}
    .token-bar{flex-direction:column;align-items:flex-start;}
    .token-bar > div{width:100%;display:flex;justify-content:space-between;}
    .type-chip{padding:6px 10px;font-size:11px;}
}
@keyframes fadeDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}