:root{--bg:#090d12;--panel:#111820;--panel2:#161f28;--line:#293541;--text:#e9eef2;--muted:#8694a1;--gold:#d9a84f;--blue:#4fa6ff;--green:#43d39b;--red:#ff6d6d;--purple:#9c7aea}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 75% -10%,#1c2c40 0,#090d12 35%);color:var(--text);font-family:Inter,"Microsoft YaHei",system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer}
.app{min-height:100vh;display:grid;grid-template-columns:196px 1fr;grid-template-rows:64px 1fr}.topbar{grid-column:1/3;display:flex;align-items:center;gap:24px;padding:0 20px;border-bottom:1px solid var(--line);background:rgba(9,14,20,.97);position:sticky;top:0;z-index:30}.brand{width:300px;display:flex;gap:10px;align-items:baseline}.brand strong{font-size:22px;color:#f0c575}.brand span{color:#b1bbc5}.search{flex:1;max-width:520px;height:38px;border:1px solid #354250;border-radius:8px;background:#0b1117;display:flex;align-items:center;padding:0 12px}.search input{flex:1;margin-left:8px;border:0;outline:0;background:transparent;color:white}.status{margin-left:auto;display:flex;gap:8px}.status span{padding:7px 10px;border:1px solid #35414d;border-radius:16px;color:#9daab6;font-size:11px}.status .ok{color:#58dba7;border-color:#285141;background:#10231d}
.sidebar{grid-row:2;padding:12px 0;border-right:1px solid var(--line);background:linear-gradient(#0e151c,#0a0f14);display:flex;flex-direction:column}.nav{height:54px;border:0;border-left:3px solid transparent;background:transparent;color:#aeb8c2;text-align:left;padding:0 20px;font-size:15px;display:flex;align-items:center}
.nav-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:16px;flex-shrink:0;color:#8c9aa8}
.nav.active .nav-icon{color:#ffd887}
.nav span{margin-left:12px;display:inline-block;line-height:1}.nav:hover{background:#121a22}.nav.active{color:#ffe0a1;border-left-color:#e7b257;background:linear-gradient(90deg,rgba(159,109,37,.35),rgba(159,109,37,.04))}.side-foot{margin-top:auto;padding:18px 22px;color:#6d7781;font-weight:800}.side-foot small{font-weight:400}
.main{min-width:0;padding:16px;overflow:auto}.page{display:none}.page.active{display:block}.hero{height:160px;border:1px solid var(--line);border-radius:10px;padding:28px 36px;background:linear-gradient(90deg,#0d141c,#111b26);display:flex;align-items:center;justify-content:space-between}.hero small,.page-head small{letter-spacing:2px;color:#70808f}.hero h1{font-size:34px;color:#f3d393;margin:3px 0 6px}.hero p,.page-head p{color:#aab4be;margin:0}.hero-mark{font-size:68px;color:rgba(217,168,79,.25);margin-right:50px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:12px 0}.stats article{height:96px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(145deg,#141d26,#10161d);padding:16px}.stats small{color:var(--muted)}.stats b{display:block;font-size:27px;margin-top:7px;color:#f3d393}
.panel{border:1px solid var(--line);border-radius:9px;background:linear-gradient(145deg,#131b23,#0f161d);overflow:hidden}.panel-title{height:44px;border-bottom:1px solid #27323d;padding:0 14px;display:flex;align-items:center;gap:8px}.panel-title small{margin-left:auto;color:var(--muted)}.quick{padding:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.quick button{min-height:72px;text-align:left;border:1px solid #34414d;border-radius:7px;background:#151e27;color:#edf1f4;padding:12px}.quick button:hover{border-color:#8d6a31}.quick small{display:block;color:#82909c;margin-top:5px}.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:12px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.list{padding:10px}.list-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #27323d;padding:10px;cursor:pointer}.list-row:hover{background:#151e27}.list-row small{color:var(--muted)}.empty,.pending{color:#788693;padding:24px;text-align:center}.kv{margin:0;padding:10px 14px}.kv div{display:flex;justify-content:space-between;gap:20px;padding:8px 0;border-bottom:1px solid #27323d}.kv dt{color:#8996a2}.kv dd{margin:0;text-align:right}
.page-head{height:96px;display:flex;align-items:center;justify-content:space-between}.page-head h1{margin:3px 0;font-size:30px;color:#f3d393}.char-select{display:flex;align-items:center;gap:8px}.char-select label{color:#8996a2}.char-select select,.settings input,.growth-form input,.growth-form select,.item-search input{border:1px solid #35414d;background:#0c1319;color:#eef2f5;border-radius:6px;padding:9px}.notice{border:1px dashed #3b4753;border-radius:8px;padding:30px;color:#84919c;text-align:center}
.char-card{border:1px solid var(--line);border-radius:9px;background:#121a22;padding:14px 18px;display:grid;grid-template-columns:72px 1fr 1.1fr;gap:16px;align-items:center}.avatar{width:68px;height:68px;border:1px solid #8b6a37;border-radius:8px;background:linear-gradient(135deg,#dadde2,#262d36);color:#14191e;display:grid;place-items:center;font-size:25px;font-weight:900}.char-main h2{margin:0}.char-main p{margin:6px 0 0}.char-main b{color:var(--blue)}.char-card dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;margin:0}.char-card dl div{display:flex;justify-content:space-between}.char-card dt{color:#83909b}.char-card dd{margin:0}
.tabs{display:flex;margin:10px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#0d141a}.tabs button{flex:1;border:0;border-right:1px solid var(--line);background:transparent;color:#9eabb6;padding:11px 5px}.tabs button.active{background:#372911;color:#ffd887}.tab{display:none}.tab.active{display:block}.action-grid{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.action-grid button,.growth-actions button,.settings button,.item-search button{border:1px solid #604b2a;background:#30230f;color:#ffd789;border-radius:6px;padding:11px}.action-grid button:disabled{opacity:.45;cursor:not-allowed}.ghost{border-color:#3c4854!important;background:#151d25!important;color:#b7c1ca!important}.primary{border-color:#8b662c!important;background:#62451d!important;color:#ffe2a7!important}
.growth-form{padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.growth-form fieldset{border:1px solid #303c47;border-radius:8px;padding:12px}.growth-form legend{color:#e7c378;padding:0 6px}.growth-form label{display:grid;gap:5px;margin-bottom:10px;color:#8f9ba7;font-size:12px}.growth-actions{grid-column:1/4;display:flex;justify-content:flex-end;gap:8px}.diff{margin:0 14px 14px;border:1px solid #5a492e;border-radius:7px;background:#17140f;padding:12px}.diff-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #332b21}.diff-row:last-child{border-bottom:0}.diff-row b{color:#e8bf72}
.equipment-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px;align-items:stretch}.equipment-grid .equipment-part-slot{min-height:138px;border:1px solid #3a4652;background:#121a22;border-radius:7px;padding:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;min-width:0}.equipment-grid .equipment-part-slot>strong{font-size:12px;color:#8f9ca7}.equipment-grid .equipment-part-slot>b{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.equipment-grid .equipment-part-slot small{color:#8895a1}.equipment-grid .equipment-part-slot.empty-slot{border-style:dashed;background:#0f161d}.equipment-slot-empty{font-size:22px;color:#56636f;line-height:1.5}.equipment-extra{grid-column:1/-1;border-top:1px solid #293541;padding-top:10px;margin-top:2px}.equipment-extra>b{display:block;color:#8f9ca7;font-size:12px;margin-bottom:8px}.equipment-extra-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.equipment-extra-item{border:1px solid #3a4652;background:#121a22;border-radius:7px;padding:9px;display:flex;align-items:center;gap:8px;min-width:0}.equipment-extra-item>div{min-width:0}.equipment-extra-item b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.equipment-extra-item small{display:block;color:#8895a1;margin-top:2px}
.game-window{border:1px solid #5d4f39;border-radius:8px;background:#0e141a;overflow:hidden}.game-title{height:48px;background:linear-gradient(#2b241a,#17130e);border-bottom:1px solid #624f31;display:flex;align-items:center;justify-content:space-between;padding:0 14px;color:#e5c47f}.bag-tabs{display:flex;gap:5px;padding:10px;border-bottom:1px solid #303b46}.bag-tabs button{border:1px solid #37434e;background:#151d25;color:#aeb8c2;border-radius:5px;padding:7px 10px}.bag-tabs button.active{border-color:#a67b36;color:#ffd78c;background:#352710}.inventory-layout{display:grid;grid-template-columns:1fr 300px;min-height:500px}.slot-grid{padding:12px;display:grid;grid-template-columns:repeat(10,1fr);gap:5px;align-content:start}.slot{aspect-ratio:1;border:1px solid #37434e;border-radius:4px;background:linear-gradient(145deg,#151d25,#0c1217);color:#d8e0e6;position:relative;display:grid;place-items:center;min-width:0}.slot:hover,.slot.selected{border-color:#d2a24e}.slot small{position:absolute;right:3px;bottom:2px;font-size:9px}.item-detail{border-left:1px solid #303b46;padding:16px;color:#a9b3bc}.item-detail h3{color:#ecf0f3}.quickbar{border-top:1px solid #303b46;margin:0 12px;padding:10px 0;display:flex;align-items:center;gap:10px}.quick-slots{display:flex;gap:5px}.quick-slot{width:42px;height:42px;border:1px solid #3a4651;border-radius:4px;background:#141c24;display:grid;place-items:center;position:relative}.quick-slot small{position:absolute;right:2px;bottom:1px;font-size:8px}
.pet-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}.pet-slots article{height:120px;border:1px solid #3a4651;border-radius:8px;display:grid;place-items:center}.pet-slots .red{border-color:#824040;color:#ff8780}.pet-slots .blue{border-color:#3c6587;color:#78bdff}.pet-slots .green{border-color:#37664f;color:#64dda8}
.mail-layout{display:grid;grid-template-columns:360px 1fr;min-height:420px}.mail-list{border-right:1px solid #303b46}.mail-paper{padding:28px;color:#9f9582;background:linear-gradient(#211b13,#15120d)}
.subtabs{display:flex;gap:5px;padding:10px}.subtabs button{border:1px solid #3a4651;background:#151d25;color:#aeb7c0;padding:8px 12px;border-radius:5px}.subtabs button.active{border-color:#a37a35;color:#ffd98e;background:#352811}
.item-search{display:grid;grid-template-columns:1fr auto;gap:8px;padding:12px}.filter3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #2d3944;border-bottom:1px solid #2d3944}.filter3>div{padding:12px;border-right:1px solid #2d3944}.filter3>div:last-child{border-right:0}.filter3 label{display:block;color:#8c99a5;margin-bottom:8px}.choices{display:flex;flex-wrap:wrap;gap:5px}.choices button{border:1px solid #34414d;background:#151d25;color:#aeb8c2;border-radius:5px;padding:7px 9px}.choices button.active{border-color:#ae8038;color:#ffdb92;background:#352811}.results{min-height:220px;padding:12px}.settings{max-width:900px}.settings label{display:grid;gap:7px;padding:14px}.settings label div{display:grid;grid-template-columns:1fr auto;gap:8px}.settings-foot{border-top:1px solid #2d3944;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-foot p{color:#83909c}.settings-actions{display:flex;gap:8px;flex-shrink:0}.settings-hint{padding:0 14px 10px;color:#83909c}.placeholder{border:1px solid var(--line);border-radius:9px;padding:30px;color:#87939e}.toast{position:fixed;right:22px;bottom:22px;border:1px solid #6a532d;background:#151d25;color:#ffe0a2;border-radius:7px;padding:11px 14px;opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s}.toast.show{opacity:1;transform:none}
@media(max-width:1150px){.stats{grid-template-columns:repeat(2,1fr)}.grid2,.grid3{grid-template-columns:1fr}.growth-form{grid-template-columns:1fr}.growth-actions{grid-column:1}.inventory-layout{grid-template-columns:1fr}.item-detail{border-left:0;border-top:1px solid #303b46}.filter3{grid-template-columns:1fr}.filter3>div{border-right:0;border-bottom:1px solid #2d3944}.char-card{grid-template-columns:72px 1fr}.char-card dl{grid-column:1/3}.quick{grid-template-columns:repeat(2,1fr)}}
/* ==================== 登录组件与用户状态栏 ==================== */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(10, 12, 16, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: #181b22;
  border: 1px solid #2d3342;
  border-radius: 14px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: loginFadeIn 0.25s ease-out;
}
@keyframes loginFadeIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.login-hero {
  text-align: center;
}
.login-logo {
  font-size: 32px;
  margin-bottom: 8px;
  color: #3b82f6;
  text-shadow: 0 0 16px rgba(59, 130, 246, 0.4);
}
.login-hero h2 {
  font-size: 20px;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 6px;
  letter-spacing: 0.5px;
}
.login-hero p {
  font-size: 13px;
  color: #8993a4;
  margin: 0;
}
.login-tabs {
  display: flex;
  background: #101217;
  border: 1px solid #232733;
  border-radius: 8px;
  padding: 3px;
  gap: 4px;
}
.login-tabs .tab-btn {
  flex: 1;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #8e98a8;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.login-tabs .tab-btn.active {
  background: #2563eb;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.4);
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field label {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
}
.form-field input {
  padding: 10px 14px;
  background: #101217;
  border: 1px solid #2d3342;
  border-radius: 8px;
  color: #f8fafc;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-field input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.login-submit-btn {
  margin-top: 4px;
  padding: 11px;
  background: #2563eb;
  border: none;
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}
.login-submit-btn:hover {
  background: #1d4ed8;
}
.login-submit-btn:active {
  transform: scale(0.99);
}
.login-submit-btn.admin-submit {
  background: #7c3aed;
}
.login-submit-btn.admin-submit:hover {
  background: #6d28d9;
}
.login-alert {
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid #ef4444;
  border-radius: 8px;
  color: #fca5a5;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-all;
}
.login-tips {
  font-size: 12px;
  color: #64748b;
  line-height: 1.5;
  text-align: center;
  border-top: 1px solid #232733;
  padding-top: 12px;
}
.user-box {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-badge {
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}
.badge-user {
  background: rgba(37, 99, 235, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}
.badge-admin {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.logout-btn:hover {
  background: #323846 !important;
  color: #f8fafc !important;
}

/* ==============================================================
   移动端与小屏专属响应式适配 (Mobile Responsive Enhancement)
   适配宽度: <= 768px (手机竖屏与小平板) 及 <= 480px (主流手机)
   ============================================================== */

@media (max-width: 768px) {
  /* 1. 核心布局由网格改为垂直单列流式布局，给底部导航留出高度 */
  .app {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh;
    padding-bottom: 64px; /* 留出底部 TabBar 空间 */
  }

  /* 2. 侧边栏转变为移动端优雅的底部固定导航栏 (Bottom Navigation Bar) */
  .sidebar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    height: 56px !important;
    width: 100% !important;
    z-index: 9999 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border-right: 0 !important;
    border-top: 1px solid #232c37 !important;
    background: rgba(13, 19, 26, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 0 4px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.45) !important;
  }
  .sidebar::-webkit-scrollbar {
    display: none !important;
  }
  .side-foot {
    display: none !important;
  }
  .nav {
    height: 100% !important;
    flex: 0 0 auto !important;
    min-width: 58px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px 6px !important;
    border-left: 0 !important;
    border-top: 3px solid transparent !important;
    font-size: 11px !important;
    text-align: center !important;
    white-space: nowrap !important;
    gap: 3px !important;
  }
  .nav span {
    margin-left: 0 !important;
    font-size: 11px !important;
  }
  .nav.active {
    border-left-color: transparent !important;
    border-top-color: #e7b257 !important;
    background: rgba(231, 178, 87, 0.14) !important;
    color: #ffe0a1 !important;
  }

  /* 3. 顶部栏精简瘦身 */
  .topbar {
    height: 52px !important;
    padding: 0 12px !important;
    gap: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .brand {
    width: auto !important;
    flex-shrink: 0 !important;
    gap: 6px !important;
  }
  .brand strong {
    font-size: 18px !important;
  }
  .brand span {
    font-size: 12px !important;
    color: #8c97a4 !important;
  }
  .search {
    display: none !important; /* 手机顶栏取消冗长搜索框，避免挤压 */
  }
  .status {
    display: none !important; /* 手机端隐藏顶栏4个小标签，保持清爽 */
  }
  .user-box {
    margin-left: auto !important;
    margin-right: 0 !important;
    gap: 8px !important;
  }
  .user-info {
    font-size: 12px !important;
  }
  .logout-btn {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  /* 4. 主内容区满宽流动 */
  .main {
    padding: 10px 12px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 5. 首页 Hero 卡片瘦身与响应式 */
  .hero {
    height: auto !important;
    min-height: auto !important;
    padding: 14px 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  .hero small {
    font-size: 10px !important;
    letter-spacing: 1px !important;
  }
  .hero h1 {
    font-size: 20px !important;
    margin: 2px 0 4px !important;
    line-height: 1.2 !important;
  }
  .hero p {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  .hero-mark {
    display: none !important; /* 隐藏占据空间的大水印 */
  }

  /* 6. 统计面板自适应 2 列 */
  .stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin: 10px 0 !important;
  }
  .stats article {
    height: 72px !important;
    padding: 10px 12px !important;
  }
  .stats small {
    font-size: 11px !important;
  }
  .stats b {
    font-size: 20px !important;
    margin-top: 4px !important;
  }

  /* 7. 快捷入口改造为适合手指点击的卡片 */
  .quick {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  .quick button {
    min-height: 60px !important;
    padding: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  .quick small {
    font-size: 11px !important;
    margin-top: 3px !important;
    color: #8b99a6 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 8. 复合网格全部单列垂直流 */
  .grid2, .grid3 {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  /* 9. 角色选择与详情页面适配 */
  .page-head {
    height: auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    padding: 4px 0 !important;
  }
  .page-head h1 {
    font-size: 22px !important;
    margin: 0 !important;
  }
  .page-head p {
    font-size: 12px !important;
  }
  .character-head-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .char-select {
    width: 100% !important;
    display: flex !important;
  }
  .char-select select {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

  /* 角色卡片自适应 */
  .char-card {
    grid-template-columns: 60px 1fr !important;
    padding: 12px !important;
    gap: 12px !important;
  }
  .avatar {
    width: 60px !important;
    height: 60px !important;
    font-size: 22px !important;
  }
  .char-main h2 {
    font-size: 18px !important;
  }
  .char-main p {
    font-size: 12px !important;
  }
  .char-card dl {
    grid-column: 1 / -1 !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 14px !important;
    margin-top: 10px !important;
    font-size: 12px !important;
  }

  /* 10. 标签栏可水平顺滑滚动 (Tabs) */
  .tabs, .subtabs, .bag-tabs {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    padding: 6px 4px !important;
    gap: 4px !important;
  }
  .tabs::-webkit-scrollbar, .subtabs::-webkit-scrollbar, .bag-tabs::-webkit-scrollbar {
    display: none !important;
  }
  .tabs button, .subtabs button, .bag-tabs button {
    flex: 0 0 auto !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
  }

  /* 11. 背包与物品视图适配 */
  .inventory-layout {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .slot-grid {
    grid-template-columns: repeat(5, 1fr) !important; /* 手机端 5 列网格，格子更易点击 */
    gap: 6px !important;
    padding: 8px !important;
  }
  .slot {
    border-radius: 6px !important;
    min-height: 48px !important;
  }
  .slot small {
    font-size: 10px !important;
  }
  .item-detail {
    border-left: 0 !important;
    border-top: 1px solid #2e3845 !important;
    padding: 12px 8px !important;
  }
  .quickbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .quick-slots {
    flex-wrap: wrap !important;
  }

  /* 12. 装备网格改为 2 列 */
  .equipment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .equipment-grid .equipment-part-slot {
    min-height: 100px !important;
    padding: 8px !important;
  }
  .equipment-extra-list {
    grid-template-columns: 1fr !important;
  }

  /* 13. 成长属性表单全单列 */
  .growth-form {
    grid-template-columns: 1fr !important;
    padding: 8px !important;
    gap: 10px !important;
  }
  .growth-actions {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  .growth-actions button {
    width: 100% !important;
    min-height: 42px !important;
  }

  /* 14. 动作网格 (加金币/等级等操作按钮) */
  .action-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .action-grid button {
    min-height: 42px !important;
    font-size: 14px !important;
  }

  /* 15. 宠物与邮件 */
  .pet-slots, .pet-real-list, .artifact-real-grid, .mail-layout, .mail-real-layout {
    grid-template-columns: 1fr !important;
  }
  .mail-list, .mail-real-list {
    border-right: 0 !important;
    border-bottom: 1px solid #303b46 !important;
  }

  /* 16. 任务与搜索工具条 */
  .quest-tools {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .item-search {
    grid-template-columns: 1fr !important;
  }
  .filter3 {
    grid-template-columns: 1fr !important;
  }
  .filter3>div {
    border-right: 0 !important;
    border-bottom: 1px solid #2d3944 !important;
    padding: 8px !important;
  }

  /* 17. 登录弹窗手机端充满与圆角优化 */
  .login-card {
    max-width: 94% !important;
    padding: 24px 18px !important;
    gap: 14px !important;
  }
  .login-hero h2 {
    font-size: 18px !important;
  }
}

@media (max-width: 480px) {
  .brand strong {
    font-size: 16px !important;
  }
  .hero h1 {
    font-size: 18px !important;
  }
  .quick button {
    font-size: 12px !important;
  }
  .slot-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
  }
}


/* 移动端超细致优化 */
@media (max-width: 768px) {
  /* 解决按钮和文字最小触摸目标 */
  button, input, select {
    font-size: 13px !important;
  }
  
  /* 弹窗和历史记录 */
  .history-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
  .history-row time {
    font-size: 11px !important;
  }
  
  /* 角色成长操作按钮 */
  .action-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


.nav-icon {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #8c9aa8 !important;
}
.nav-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: currentColor !important;
}
.nav.active .nav-icon {
  color: #ffd887 !important;
}
.nav.active .nav-icon svg {
  stroke: #ffd887 !important;
}


/* ==================== GM 账号管理条与删除按钮高质感样式 ==================== */
.gm-account-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(145deg, #161e27, #10161f);
  border: 1px solid #283748;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  width: 100%;
}
.gm-account-select-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 220px;
}
.gm-account-select-group label {
  font-size: 13px;
  font-weight: 600;
  color: #9cb0c4;
  white-space: nowrap;
}
.gm-account-select-group select {
  flex: 1;
  min-width: 140px;
  max-width: 320px;
  height: 36px;
  border: 1px solid #364658;
  background: #090e13;
  color: #f1f5f9;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  outline: none;
}
.gm-account-select-group select:focus {
  border-color: #f0c575;
}
.gm-delete-account-btn {
  height: 36px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background: linear-gradient(145deg, #7c1d1d, #541414) !important;
  border: 1px solid #a83232 !important;
  color: #ffe0e0 !important;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all 0.15s ease;
}
.gm-delete-account-btn:hover {
  background: linear-gradient(145deg, #991b1b, #6b1414) !important;
  border-color: #ef4444 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35) !important;
}
.gm-delete-account-btn:active {
  transform: scale(0.98);
}
@media (max-width: 650px) {
  .gm-account-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
  }
  .gm-account-select-group {
    width: 100% !important;
  }
  .gm-account-select-group select {
    max-width: none !important;
    width: 100% !important;
  }
  .gm-delete-account-btn {
    width: 100% !important;
    height: 38px !important;
  }
}


/* ==================== 现代高颜值英雄角色卡片 (Hero Banner Card) ==================== */
.character-roster-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  height: auto !important;
  max-height: calc(100vh - 210px) !important;
  padding: 8px 4px !important;
  overflow-y: auto !important;
}

.hero-character-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  border: 1px solid #283748 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #16202c 0%, #0d141b 100%) !important;
  color: #f1f5f9 !important;
  text-align: left !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease !important;
  gap: 14px !important;
  width: 100% !important;
  cursor: pointer !important;
}
.hero-character-card:hover {
  transform: translateY(-2px) !important;
  border-color: #f0c575 !important;
  box-shadow: 0 8px 24px rgba(240, 197, 117, 0.15) !important;
}
.hero-card-left {
  position: relative !important;
  flex-shrink: 0 !important;
}
.hero-avatar-box {
  width: 58px !important;
  height: 58px !important;
  border-radius: 14px !important;
  background: radial-gradient(circle, #203142, #0d151c) !important;
  border: 1.5px solid color-mix(in srgb, var(--char-accent, #6297d2) 60%, #ffffff) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
}
.hero-avatar-box svg {
  width: 100% !important;
  height: 100% !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)) !important;
}
.hero-card-lvl {
  position: absolute !important;
  bottom: -6px !important;
  right: -4px !important;
  background: #f0c575 !important;
  color: #0b1117 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 1px 6px !important;
  border-radius: 8px !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
}
.hero-card-center {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.hero-card-name-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.hero-card-name {
  font-size: 16px !important;
  color: #ffffff !important;
}
.hero-card-job {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #ffd88a !important;
  background: rgba(240, 197, 117, 0.14) !important;
  border: 1px solid rgba(240, 197, 117, 0.3) !important;
  padding: 1px 8px !important;
  border-radius: 10px !important;
}
.hero-card-meta {
  display: flex !important;
  gap: 12px !important;
  font-size: 11px !important;
  color: #8c9ea0 !important;
}
.hero-card-meta b {
  color: #63d297 !important;
}
.hero-card-weapon {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 2px !important;
}
.hero-card-weapon small {
  font-size: 11px !important;
  color: #d1b171 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.hero-card-right {
  flex-shrink: 0 !important;
}
.hero-enter-btn {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #f0c575 !important;
  background: rgba(240, 197, 117, 0.1) !important;
  border: 1px solid rgba(240, 197, 117, 0.3) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}
.hero-character-card:hover .hero-enter-btn {
  background: #f0c575 !important;
  color: #0c1217 !important;
}

/* ==================== 移动端角色详情舞台重构 (彻底解决三栏挤压) ==================== */
@media (max-width: 768px) {
  .character-stage-panel {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    min-height: auto !important;
    padding: 10px !important;
    border-radius: 12px !important;
  }
  .character-stage-slots.wear {
    border: none !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .character-stage-slots.avatar-slots {
    display: none !important;
  }
  .character-stage-center {
    width: 100% !important;
    padding: 12px 10px !important;
    border-radius: 10px !important;
    background: radial-gradient(circle at 50% 40%, rgba(98, 151, 210, 0.18), transparent 60%), linear-gradient(180deg, #111a24, #0b1117) !important;
  }
  .character-stage-slot-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
  }
  .character-visual-slot {
    height: 48px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
  }
  .character-visual-slot small {
    display: block !important;
    font-size: 11px !important;
  }
}


/* 保证移动端在任何手机上均可自然顺畅长屏滚动，彻底消除底部截断 */
html, body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  height: auto !important;
  min-height: 100vh !important;
}

@media (max-width: 768px) {
  .app {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    height: auto !important;
    padding-bottom: 76px !important; /* 彻底留足底部导航栏高度 */
    overflow: visible !important;
  }
  .main {
    flex: 1 0 auto !important;
    padding: 10px 12px 30px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important; /* 允许整页自然流动滚动 */
    height: auto !important;
  }
}