body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif; background-color: #ffffff; color: #333333; }
header { display: flex; justify-content: space-between; align-items: center; padding: 25px 50px; }
.logo { font-size: 18px; font-weight: 900; color: #000; display: flex; align-items: center; text-decoration: none; }
.logo-icon { color: #2563eb; font-size: 22px; margin-right: 10px; line-height: 1; }
.nav-link { font-size: 15px; font-weight: bold; color: #666; cursor: pointer; text-decoration: none; transition: 0.2s; }
.nav-link:hover { color: #2563eb; }
.header-actions { display:flex; align-items:center; gap:10px; }
.nav-exchange { min-height:38px; display:inline-flex; align-items:center; padding:0 15px; border:1px solid #bfdbfe; border-radius:10px; color:#2563eb; background:#eff6ff; text-decoration:none; font-size:14px; font-weight:800; }
.nav-exchange:hover { border-color:#7eafff; background:#dbeafe; }

/* 🌟 拓宽全局大容器的宽度，让页面更舒展 */
.container { max-width: 950px; margin: 50px auto 0; text-align: center; padding: 0 20px; box-sizing: border-box; }
.main-title { font-size: 46px; font-weight: bold; color: #4a88f7; margin: 0 0 15px; letter-spacing: 1px; }
.main-sub { font-size: 20px; font-weight: bold; color: #444; margin-bottom: 25px; }

.stock-wrapper { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; flex-wrap: wrap; }
.stock-pill { padding: 6px 14px; border-radius: 20px; border: 1px solid; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: bold; }
.sp-name { color: #333; font-family: monospace; font-size: 14px; }

.divider { width: 100%; height: 1px; background-color: #f1f1f1; margin-bottom: 50px; }

.steps { display: flex; justify-content: center; align-items: center; margin-bottom: 60px; }
.step { border-radius: 8px; padding: 15px 35px; min-width: 130px; display: flex; flex-direction: column; align-items: center; background: #fff; box-sizing: border-box; }
.step.active { border: 1px solid #7eaaff; }
.step.active .s-num { background-color: #4a88f7; color: #fff; }
.step.active .s-txt { color: #4a88f7; }
.step.inactive { border: 1px solid #d1d5db; }
.step.inactive .s-num { background-color: #9ca3af; color: #fff; }
.step.inactive .s-txt { color: #4b5563; }
.s-num { width: 28px; height: 28px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 15px; font-weight: bold; margin-bottom: 8px; }
.s-txt { font-size: 15px; font-weight: bold; white-space: nowrap; }
.s-line { width: 40px; height: 1px; background-color: #9ca3af; margin: 0 15px; flex-shrink: 0; }

/* 充值步骤保持较窄聚焦 */
.panel { max-width: 600px; margin: 0 auto; text-align: left; }
.hidden { display: none !important; }
.panel-label { font-size: 16px; font-weight: 900; color: #000; margin-bottom: 15px; display: flex; justify-content: space-between; }

input[type="text"], textarea { 
    width: 100%; box-sizing: border-box; padding: 20px; border: 1px solid #7eaaff; 
    border-radius: 8px; outline: none; font-size: 16px; color: #333; transition: 0.2s;
}
input:focus, textarea:focus { border-color: #4a88f7; box-shadow: 0 0 0 2px rgba(74,136,247,0.1); }
textarea { height: 200px; resize: none; font-family: monospace; font-size: 13px; line-height: 1.5; }

.btn-grad { 
    width: 100%; padding: 18px; border: none; border-radius: 8px; 
    background: linear-gradient(90deg, #1ccdf9, #1574fc); 
    color: #fff; font-size: 18px; font-weight: bold; cursor: pointer; margin-top: 25px; transition: 0.2s;
}
.btn-grad:hover { opacity: 0.9; }
button:disabled { cursor: not-allowed; opacity: 0.58; }

.btn-group { display: flex; gap: 15px; margin-top: 25px; }
.btn-outline { flex: 1; padding: 16px; border: 1px solid #4a88f7; color: #4a88f7; background: #fff; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; box-sizing: border-box; text-align: center; text-decoration: none; }
.btn-solid { flex: 1; padding: 16px; border: none; background: linear-gradient(90deg, #1ccdf9, #1574fc); color: #fff; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; box-sizing: border-box; }

.msg-box { margin-top: 15px; padding: 15px; border-radius: 8px; font-size: 14px; font-weight: bold; display: none; }
.msg-box.success { display: block; background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.msg-box.error { display: block; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 999; padding: 20px; box-sizing: border-box;}
.modal { background: #fff; border-radius: 16px; width: 100%; max-width: 400px; padding: 30px; position: relative; text-align: center; box-sizing: border-box; }
.m-close { position: absolute; top: 15px; right: 20px; font-size: 24px; color: #aaa; cursor: pointer; border: none; background: none; }
.m-title { font-size: 20px; font-weight: bold; margin-bottom: 10px; color: #111; }
.m-sub { font-size: 13px; color: #666; margin-bottom: 25px; }

.overwrite-box { background: #fffbeb; border: 1px solid #fde68a; padding: 15px; border-radius: 8px; display: flex; align-items: flex-start; gap: 10px; text-align: left; margin-bottom: 25px; }
.overwrite-box input { margin-top: 3px; cursor: pointer; flex-shrink: 0; }
.overwrite-box label { font-size: 12px; color: #b45309; font-weight: bold; line-height: 1.5; cursor: pointer; }

.m-btn-blue { width: 100%; padding: 15px; border: none; border-radius: 8px; background: #4a88f7; color: #fff; font-size: 16px; font-weight: bold; cursor: pointer; margin-bottom: 12px; }
.m-btn-cancel { width: 100%; padding: 15px; border: none; background: transparent; color: #999; font-size: 15px; font-weight: bold; cursor: pointer; }

.account-show { background: #f8f9fa; border: 1px solid #e5e7eb; padding: 15px; border-radius: 8px; font-weight: bold; font-size: 14px; margin-bottom: 20px; color: #2563eb; word-break: break-all; }
.security-note { margin-top: 12px; padding: 12px 14px; border-radius: 8px; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; font-size: 12px; line-height: 1.65; }

.loading-wrap { text-align: center; padding: 20px 0; }
.spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #4a88f7; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px; }
.progress-bg { width: 100%; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; margin: 20px 0; }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #1ccdf9, #1574fc); transition: width 0.5s ease; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

footer { text-align: center; margin-top: 80px; padding-bottom: 40px; }
.f-copy { font-size: 14px; color: #666; margin-bottom: 10px; }
.f-link { font-size: 14px; color: #4a88f7; text-decoration: none; }
.f-link:hover, .f-link:focus-visible { text-decoration: underline; }

.query-card { 
    max-width: 100%; 
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; 
    padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); box-sizing: border-box; 
}
.query-textarea { height: 160px; font-family: "Microsoft YaHei", sans-serif; font-size: 14px; padding: 20px; border: 1px solid #e5e7eb; color: #666; }
.query-textarea:focus { border-color: #4a88f7; }

/* 批量查询结果展示 */
.q-stats { display: flex; gap: 15px; margin-bottom: 25px; flex-wrap: wrap; }
.q-stat-item { flex: 1; padding: 18px; border-radius: 10px; text-align: center; border: 1px solid #e5e7eb; background: #fafafa; }
.q-stat-num { font-size: 28px; font-weight: 800; font-family: monospace; margin-top: 8px; }

.q-actions { display: flex; gap: 15px; margin-bottom: 20px; }
.q-action-btn { flex: 1; padding: 14px; font-size: 15px; font-weight: bold; border-radius: 8px; cursor: pointer; border: 1px solid #4a88f7; background: #eff6ff; color: #2563eb; transition: 0.2s; display: flex; justify-content: center; align-items: center; gap: 8px;}
.q-action-btn:hover { background: #dbeafe; }

.q-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 1px solid #e5e7eb; padding-bottom: 15px; overflow-x: auto; -webkit-overflow-scrolling: touch;}
.q-tab { padding: 8px 18px; font-size: 14px; font-weight: bold; color: #666; cursor: pointer; border-radius: 20px; background: #f3f4f6; transition: 0.2s; white-space: nowrap;}
.q-tab.active { background: #4a88f7; color: #fff; }

.result-list { margin-top: 15px; max-height: 450px; overflow-y: auto; padding-right: 10px; }
/* 定制滚动条 */
.result-list::-webkit-scrollbar { width: 6px; }
.result-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.result-item { display: flex; flex-direction: column; padding: 20px 24px; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 15px; background: #fafafa; transition: 0.2s; }
.result-item:hover { border-color: #93c5fd; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.r-main { display: flex; justify-content: space-between; align-items: center; width: 100%; flex-wrap: wrap; gap: 12px;}
.r-code { font-family: monospace; font-weight: bold; font-size: 16px; color: #111; word-break: break-all;}
.r-status { font-size: 14px; font-weight: bold; }
.s-unused { color: #10b981; }
.s-used { color: #2563eb; }
.s-replaced { color:#7c3aed; }
.s-processing { color:#1d4ed8; }
.s-unknown { color:#c2410c; }
.s-invalid { color: #ef4444; }
.r-exchange-btn { flex:0 0 auto; min-height:34px; display:inline-flex; align-items:center; padding:0 13px; border:1px solid #a9c8ff; border-radius:9px; color:#185bd5; background:#eff6ff; text-decoration:none; font-size:12px; font-weight:800; }
.r-exchange-btn:hover { border-color:#4a88f7; background:#dbeafe; }

@media (max-width: 768px) {
    header { padding: 15px 20px; }
    .header-actions { gap:6px; }
    .nav-link { font-size:12px; }
    .nav-exchange { min-height:34px; padding:0 10px; font-size:12px; }
    .container { margin-top: 30px; }
    .main-title { font-size: 28px; }
    .main-sub { font-size: 15px; margin-bottom: 20px; }
    .stock-wrapper { gap: 8px; margin-bottom: 30px; }
    .stock-pill { padding: 4px 10px; font-size: 12px; }
    .divider { margin-bottom: 30px; }
    .steps { margin-bottom: 40px; justify-content: space-between; gap: 5px; }
    .step { min-width: auto; padding: 12px 10px; flex: 1; text-align: center;}
    .s-line { width: 15px; margin: 0; }
    .s-txt { font-size: 12px; }
    .s-num { width: 24px; height: 24px; font-size: 13px; margin-bottom: 5px; }
    .btn-group { flex-direction: column; gap: 12px; margin-top: 20px; }
    .btn-outline, .btn-solid { width: 100%; padding: 14px; }
    .query-card { padding: 20px; }
    .r-main { flex-direction: column; align-items: flex-start; }
    .r-exchange-btn { width:100%; justify-content:center; box-sizing:border-box; }
    input[type="text"], textarea { padding: 15px; font-size: 15px; }
    .btn-grad { padding: 15px; font-size: 16px; margin-top: 20px; }
    footer { margin-top: 50px; }
    
    .q-stats { flex-direction: column; gap: 8px; }
    .q-stat-item { padding: 10px 15px; display: flex; justify-content: space-between; align-items: center;}
    .q-stat-num { font-size: 18px; margin-top: 0;}
    .q-actions { flex-direction: column; gap: 8px; }
}

/* Keyboard and motion accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 3px;
}
.q-tab { border: 0; font-family: inherit; }
.modal { max-height: calc(100vh - 40px); overflow-y: auto; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}