/* ===== 布局 ===== */
.container{max-width:var(--max-w);margin:0 auto;padding:10px 12px 20px}

/* ===== 顶部导航 (PC 横排 / 移动端隐藏) ===== */
.nav-bar{display:none}
@media(min-width:768px){
  .nav-bar{
    display:block;position:sticky;top:0;z-index:100;
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--bd);padding-top:var(--safe-t)
  }
  .nav-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;padding:0 16px;height:var(--nav-h);gap:4px}
  .nav-brand{font-size:17px;font-weight:800;background:linear-gradient(135deg,var(--pri),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap;margin-right:8px;flex-shrink:0;letter-spacing:1px}
  .nav-link{text-decoration:none;white-space:nowrap;font-size:13px;font-weight:600;padding:6px 12px;border-radius:var(--radius-sm);color:var(--tx2);transition:all .15s;flex-shrink:0}
  .nav-link:hover{background:var(--bg3);color:var(--gold)}
  .nav-link.active{background:var(--bg4);color:var(--pri);font-weight:700}
}

/* ===== 移动端底部标签栏 ===== */
.mob-tab-bar{
  display:flex;position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:color-mix(in srgb,var(--bg2) 94%,transparent);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--bd);
  padding-bottom:var(--safe-b);height:calc(var(--tab-h) + var(--safe-b));
  justify-content:space-around;align-items:center;
}
.mob-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 0;flex:1;min-width:0;color:var(--tx3);font-size:10px;text-decoration:none;transition:color .15s;border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mob-tab .tab-icon{font-size:22px;line-height:1}
.mob-tab .tab-label{font-size:10px;line-height:1.3}
.mob-tab.active{color:var(--pri);font-weight:600}
.mob-tab.active .tab-icon{transform:scale(1.05)}
@media(min-width:768px){.mob-tab-bar{display:none}}

/* ===== 移动端顶部条 ===== */
.mob-header{
  display:flex;position:sticky;top:0;z-index:100;padding-top:var(--safe-t);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--bd);align-items:center;height:calc(var(--nav-h) + var(--safe-t));padding:0 12px;gap:8px
}
.mob-header .mh-title{font-size:17px;font-weight:800;color:var(--tx);flex:1;letter-spacing:.5px}
.mob-header .mh-back{font-size:22px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:var(--tx2);text-decoration:none}
.mob-header .mh-back:active{background:var(--bg3)}
@media(min-width:768px){.mob-header{display:none}}

/* ===== 卡片 ===== */
.card{
  background:var(--bg2);border:1px solid var(--bd);
  border-radius:var(--radius);padding:16px;
  margin-bottom:var(--gap);
  box-shadow:0 1px 4px rgba(0,0,0,.03);
  transition:box-shadow .2s;
}
.card-title{font-size:14px;color:var(--pri);font-weight:700;margin-bottom:8px;letter-spacing:.5px;display:flex;align-items:center;gap:6px}

/* ===== 通用 ===== */
.footer{text-align:center;padding:20px 16px;color:var(--tx3);font-size:12px;border-top:1px solid var(--bd);margin-top:16px;letter-spacing:.5px}
@media(min-width:768px){.footer{margin-top:24px}}

.loading{text-align:center;padding:40px 16px;color:var(--tx2);font-size:13px}
.loading .spin{display:inline-block;width:22px;height:22px;border:2.5px solid var(--bd);border-top-color:var(--pri);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:8px}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== 主题切换按钮 ===== */
.theme-btn{
  position:fixed;top:calc(12px + var(--safe-t));right:12px;z-index:300;
  width:36px;height:36px;border-radius:50%;border:1px solid var(--bd);
  background:var(--bg2);color:var(--pri);font-size:16px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .3s;box-shadow:0 2px 8px rgba(0,0,0,.06)
}
.theme-btn:active{transform:scale(.9)}
@media(min-width:768px){.theme-btn:hover{transform:scale(1.1);border-color:var(--pri)}}

/* ===== 表单 ===== */
input,select,textarea{
  font-family:inherit;font-size:15px;padding:10px 12px;
  background:var(--bg3);border:1px solid var(--bd);border-radius:var(--radius-sm);
  color:var(--tx);width:100%;transition:border-color .2s;
  -webkit-appearance:none;appearance:none
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pri)}
textarea{resize:vertical;min-height:70px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  padding:10px 20px;border-radius:var(--radius-sm);border:none;
  font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;letter-spacing:.5px;
  -webkit-tap-highlight-color:transparent
}
.btn-pri{background:linear-gradient(135deg,var(--pri),var(--gold));color:#fff}
.btn-pri:active{opacity:.85;transform:scale(.97)}
.btn-sec{background:var(--bg3);color:var(--tx2);border:1px solid var(--bd)}
.btn-sec:active{background:var(--bg4)}
@media(min-width:768px){
  .btn-pri:hover{opacity:.9;transform:translateY(-1px)}
  .btn-sec:hover{background:var(--bg4);color:var(--pri)}
}

/* ===== 页面平滑过渡 ===== */
.page-enter{animation:pageIn .25s ease-out}
@keyframes pageIn{from{opacity:0;transform:translateY(8px)}}

/* ===== 表格 ===== */
table{width:100%;font-size:12px;border-collapse:collapse}
th{text-align:left;padding:6px 8px;color:var(--tx3);font-weight:400;border-bottom:1px solid var(--bd);white-space:nowrap}
td{padding:6px 8px;border-bottom:1px solid var(--bd)}
tbody tr:last-child td{border-bottom:none}

/* ===== 列表排版 ===== */
ul,ol{padding-left:18px;font-size:13px;line-height:2.1}
li{margin-bottom:2px}

/* ===== 响应式调整 ===== */
@media(min-width:768px){
  .container{padding:16px 24px 32px}
  .card{padding:18px 20px;margin-bottom:12px;border-radius:16px}
}