/* ═══════════════════════════════════════════════════════════════
   提货页 · 浅色科技主题（Light Tech / Aurora）
   明亮白·浅蓝底 + 电光蓝青紫渐变强调 + 柔光晕 + 淡 mesh 网格
   仅改配色/光效/质感，布局·类名·结构全部保持原样（不影响 app.js / layui）
   ═══════════════════════════════════════════════════════════════ */
:root {
  --ink:#0f2440; --ink-2:#4a648c; --ink-3:#8296b5;
  --brand:#2563eb; --brand-2:#06b6d4; --brand-3:#7c3aed;
  --line:rgba(37,99,235,.15); --line-soft:rgba(70,110,180,.16);
  --card:rgba(255,255,255,.9); --card-2:rgba(248,251,255,.86);
  --danger:#e5324a; --danger-2:#c62840;
  --glow:0 6px 18px rgba(37,99,235,.16);
  font-family:"Segoe UI",Arial,"Microsoft YaHei",sans-serif;
  color:var(--ink); background:#eef3fb;
}
* { box-sizing:border-box; }
body {
  min-height:100vh; min-height:100dvh; margin:0; padding:7vh 0 48px; color:var(--ink);
  background:
    radial-gradient(1000px 620px at 8% -12%, rgba(6,182,212,.16), transparent 58%),
    radial-gradient(900px 600px at 110% 2%, rgba(124,58,237,.14), transparent 56%),
    radial-gradient(820px 520px at 50% 120%, rgba(37,99,235,.13), transparent 60%),
    linear-gradient(180deg,#f4f8fe,#e9eef9 58%,#eef3fb);
  background-attachment:fixed;
}
#app { position:relative; z-index:1; width:min(760px, calc(100% - 32px)); margin:0 auto; }
#centerdiv {
  overflow:hidden; border:1px solid rgba(255,255,255,.75); border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,250,255,.88));
  box-shadow:0 22px 54px rgba(37,99,235,.14), 0 2px 8px rgba(15,36,64,.05), inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
}
.layui-tab-card { border:0; background:transparent; }
.layui-tab-card > .layui-tab-title {
  display:flex; height:62px; padding:0 14px; border:0;
  background:linear-gradient(110deg,#f9fbff,#e9f0ff 55%,#eef2ff);
  box-shadow:inset 0 -1px 0 rgba(37,99,235,.14);
}
.layui-tab-card > .layui-tab-title li {
  position:relative; flex:1; min-width:0; height:62px; padding:0 12px; border:0;
  color:var(--ink-2); font-size:14px; line-height:62px; transition:background .18s, color .18s;
}
.layui-tab-card > .layui-tab-title li:hover { background:rgba(37,99,235,.07); color:var(--brand); }
.layui-tab-card > .layui-tab-title .layui-this { border:0; background:rgba(37,99,235,.1); color:var(--brand); font-weight:700; }
.layui-tab-card > .layui-tab-title li.layui-this::after {
  position:absolute; right:0; bottom:0; left:0; height:3px; border:0; border-radius:0;
  background:linear-gradient(90deg,var(--brand-2),var(--brand),var(--brand-3)); box-shadow:0 0 10px rgba(37,99,235,.5); content:'';
}
.layui-tab-title li.tab-disabled { background:transparent; color:rgba(74,100,140,.4); cursor:not-allowed; }
.layui-tab-content { padding:34px 42px 40px; overflow-x:hidden !important; background:transparent; }
.layui-tab-item { min-height:390px; }
.layui-form-item { margin-top:19px; }
.layui-form-label { width:108px; padding:10px 15px 9px 0; color:var(--ink-2); font-size:13px; font-weight:700; letter-spacing:.3px; }
.layui-input-block { margin-left:108px; }
.layui-input, .layui-textarea {
  display:block; width:100%; padding-left:13px;
  background-color:#fff !important; border:1px solid var(--line-soft); border-radius:7px;
  color:var(--ink) !important; transition:border-color .18s, box-shadow .18s;
}
.layui-input { height:42px; line-height:42px; }
.layui-input:focus, .layui-textarea:focus { border-color:var(--brand) !important; box-shadow:0 0 0 3px rgba(37,99,235,.12), 0 0 14px rgba(37,99,235,.16) !important; }
.layui-input::placeholder, .layui-textarea::placeholder { color:var(--ink-3); }
.pwd-field { position:relative; }
.pwd-field .layui-input { padding-right:46px; }
.pwd-toggle { position:absolute; top:0; right:0; display:flex; width:42px; height:42px; align-items:center; justify-content:center; padding:0; border:0; background:none; color:var(--ink-3); cursor:pointer; transition:color .16s; }
.pwd-toggle:hover { color:var(--brand); }
.pwd-toggle:focus-visible { border-radius:7px; outline:2px solid var(--brand); outline-offset:-3px; }
.pwd-toggle svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; }
.pwd-toggle .pwd-eye-off { display:none; }
.pwd-toggle.is-off .pwd-eye { display:none; }
.pwd-toggle.is-off .pwd-eye-off { display:block; }
.layui-btn {
  height:40px; padding:0 22px; border:0; border-radius:7px; color:#fff;
  background:linear-gradient(100deg,#06b6d4,#2563eb 52%,#7c3aed);
  box-shadow:0 6px 16px rgba(37,99,235,.28), 0 0 12px rgba(6,182,212,.16);
  font-size:14px; font-weight:700; line-height:40px; letter-spacing:.4px;
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.layui-btn:hover { filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 9px 22px rgba(37,99,235,.36), 0 0 18px rgba(6,182,212,.24); }
.layui-input-block .layui-btn + .layui-btn {
  margin-left:8px; border:1px solid rgba(37,99,235,.4); background:#fff;
  box-shadow:none; color:var(--brand);
}
.layui-input-block .layui-btn + .layui-btn:hover { background:rgba(37,99,235,.07); box-shadow:0 4px 12px rgba(37,99,235,.14); filter:none; }
.result, .qr-result { min-height:24px; color:var(--danger); font-size:14px; line-height:22px; }
.lower-card {
  margin-top:34px; min-height:48px; border:1px solid var(--line); border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(244,248,255,.7)); box-shadow:0 4px 14px rgba(37,99,235,.07);
}
.claim-notice { margin:0; padding:15px 18px; border-left:3px solid var(--danger); color:var(--danger-2); font-size:13px; font-weight:700; line-height:22px; }
.claim-notice p { margin:0 0 6px; }.claim-notice p:last-child { margin-bottom:0; }
/* 提交前提醒弹窗：正文走中性冷色、只把后果加粗标红，避免整段糊成一片。 */
.submit-notice { padding:20px 22px 6px; }
.submit-notice-title { margin:0 0 12px; color:var(--danger); font-size:13px; font-weight:700; }
.submit-notice-list { margin:0; padding:0; list-style-position:inside; color:var(--ink-2); font-size:13px; line-height:22px; }
.submit-notice-list li { margin-bottom:9px; }
.submit-notice-list li::marker { color:var(--danger); }
.submit-notice-list b { color:var(--danger-2); font-weight:700; }
/* 一左一右分开站，并统一最小宽度：两按钮文案长短差一倍，等宽后才对称。 */
#submit-notice-modal .result-modal-actions { justify-content:space-between; gap:10px; }
#submit-notice-modal .result-modal-actions .layui-btn { flex:0 0 auto; min-width:120px; }
.progress-block { width:100%; }
.layui-progress-big, .layui-progress-big .layui-progress-bar { height:36px; border-radius:999px; line-height:36px; }
.layui-progress-big { background:rgba(37,99,235,.1); }
.layui-progress-big .layui-progress-bar { background:linear-gradient(90deg,var(--brand-2),var(--brand),var(--brand-3)); box-shadow:0 0 12px rgba(37,99,235,.4); }
#history { width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line); border-radius:8px; }
#history th, #history td { overflow:hidden; padding:10px 12px; border-bottom:1px solid rgba(70,110,180,.13); color:var(--ink-2); text-align:left; text-overflow:ellipsis; font-size:12px; font-weight:400; white-space:nowrap; }
#history th { background:rgba(37,99,235,.08); color:#2c56b8; font-weight:700; } #history tr:last-child td { border-bottom:0; }
.global-loading, .result-modal { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; background:rgba(30,50,90,.3); backdrop-filter:blur(4px); }
.global-loading[hidden], .result-modal[hidden] { display:none; }
.global-loading-content { display:flex; align-items:center; gap:11px; padding:16px 20px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 18px 44px rgba(37,99,235,.2); color:var(--ink); }
.global-loading-spinner { width:21px; height:21px; border:3px solid rgba(37,99,235,.2); border-top-color:var(--brand); border-radius:50%; animation:global-loading-spin .75s linear infinite; }
@keyframes global-loading-spin { to { transform:rotate(360deg); } }
.result-modal { z-index:2001; }
.steam-qr-modal-panel { width:min(360px, calc(100% - 32px)); }
.steam-qr-modal-box { width:min(270px, calc(100vw - 80px)); aspect-ratio:1; margin:20px auto 8px; border:1px solid var(--line); border-radius:6px; background:#fff; overflow:hidden; }
.steam-qr-modal-box img { display:block; width:100%; height:100%; object-fit:contain; }
.steam-qr-modal-panel .result-modal-message { width:min(270px, calc(100vw - 80px)); min-height:0; margin:0 auto; padding:10px 0 0; text-align:center; }
.steam-qr-instruction-warning { display:block; color:var(--danger); text-align:center; }.steam-qr-status { display:block; margin-bottom:8px; text-align:center; }
.result-modal-panel {
  width:min(390px, calc(100% - 32px)); overflow:hidden; border:1px solid var(--line); border-radius:13px;
  background:linear-gradient(180deg,#fff,#f7faff);
  box-shadow:0 26px 60px rgba(37,99,235,.24), 0 2px 8px rgba(15,36,64,.06);
}
.result-modal-header { display:flex; align-items:center; justify-content:space-between; height:56px; padding:0 18px; background:linear-gradient(100deg,#f2f7ff,#e6edff 55%,#ece9ff); color:var(--brand); box-shadow:inset 0 -1px 0 rgba(37,99,235,.16); }
.result-modal-header strong { font-size:16px; }
.result-modal-close { width:30px; height:30px; padding:0; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink-2); font-size:25px; line-height:27px; cursor:pointer; }.result-modal-close:hover { border-color:rgba(37,99,235,.35); background:rgba(37,99,235,.08); color:var(--brand); }
.result-modal-message { min-height:70px; margin:0; padding:23px 20px 10px; color:var(--ink-2); font-size:14px; line-height:24px; white-space:pre-wrap; }.result-modal-message .query-reward { color:var(--brand); font-weight:700; }.result-modal-message a { color:var(--brand); font-weight:700; text-decoration:underline; word-break:break-all; }
.result-modal-actions { display:flex; justify-content:flex-end; padding:12px 20px 18px; }.result-modal-actions .layui-btn { margin:0; }
.result-modal-actions .layui-btn-primary { border:1px solid var(--line-soft); background:#fff; color:var(--ink-2); box-shadow:none; }
.result-modal-actions .layui-btn-primary:hover { border-color:rgba(37,99,235,.4); background:rgba(37,99,235,.06); color:var(--brand); filter:none; }
.steam-guard-input { padding:20px 20px 0; }.steam-guard-input .layui-input { box-sizing:border-box; width:100%; }#steam-guard-message { margin:8px 20px 0; min-height:0; }
@media (max-width: 767px) { body { padding:12px 0 28px; } #app { width:min(100% - 20px, 620px); margin:0 auto; } .layui-tab-card > .layui-tab-title { height:auto; min-height:54px; padding:0 4px; } .layui-tab-card > .layui-tab-title li { padding:0 7px; height:54px; font-size:12px; line-height:54px; } .layui-tab-content { padding:25px 18px 28px; } .layui-form-label { width:84px; padding-right:10px; } .layui-input-block { margin-left:84px; } .layui-tab-item { min-height:350px; } }
@media (max-width: 430px) { .layui-tab-card > .layui-tab-title li { padding:0 3px; font-size:11px; } .layui-input-block .layui-btn { width:100%; margin-bottom:8px; } .layui-input-block .layui-btn + .layui-btn { margin-left:0; } }

/* 关闭 KRAFTON 二次验证：提示句末尾的内联入口 + 点击后的大图弹窗 */
.result-guide-link { margin:0; padding:0; border:0; background:none; color:var(--brand); font-size:14px; font-weight:700; text-decoration:underline; cursor:pointer; } .result-guide-link:hover { color:var(--brand-3); }

.guide-modal-panel { width:min(760px, 94vw); max-height:calc(100vh - 40px); overflow-y:auto; }
.guide-modal-image { display:block; width:100%; height:auto; margin:6px 0 14px; border:1px solid var(--line); border-radius:8px; box-shadow:0 6px 18px rgba(37,99,235,.1); }
.guide-modal-steps { margin:0; padding-left:20px; color:var(--ink-2); font-size:13px; line-height:2; } .guide-modal-steps a { color:var(--brand); font-weight:700; text-decoration:underline; } .guide-modal-steps a:hover { color:var(--brand-3); }
@media (max-width: 560px) { .guide-modal-panel { width:94vw; } .guide-modal-steps { font-size:12px; line-height:1.9; } }
