/* ==========================================================================
   素养星计划 · 通用组件层
   图标 / 按钮 / 卡片 / 表单 / 标签 / 进度 / 导航 / 底部Tab / 页脚 / 弹窗 / Toast
   ========================================================================== */

/* ==========================================================================
   1. 图标系统（Lucide 线性图标 + CSS mask，随文字颜色自动着色）
   ========================================================================== */

.icon {
  display: inline-block;
  flex: none;
  width: 1.16em;
  height: 1.16em;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

.icon-14 { width: 14px; height: 14px; }
.icon-16 { width: 16px; height: 16px; }
.icon-18 { width: 18px; height: 18px; }
.icon-20 { width: 20px; height: 20px; }
.icon-22 { width: 22px; height: 22px; }
.icon-24 { width: 24px; height: 24px; }
.icon-28 { width: 28px; height: 28px; }
.icon-32 { width: 32px; height: 32px; }
.icon-40 { width: 40px; height: 40px; }
.icon-48 { width: 48px; height: 48px; }

.icon--brand { background: var(--g-brand); }
.icon--gold  { background: var(--g-gold); }

.i-arrow-left      { --ic: url("../icons/arrow-left.svg"); }
.i-arrow-right     { --ic: url("../icons/arrow-right.svg"); }
.i-arrow-up-right  { --ic: url("../icons/arrow-up-right.svg"); }
.i-award           { --ic: url("../icons/award.svg"); }
.i-bell            { --ic: url("../icons/bell.svg"); }
.i-book-marked     { --ic: url("../icons/book-marked.svg"); }
.i-book-open       { --ic: url("../icons/book-open.svg"); }
.i-briefcase       { --ic: url("../icons/briefcase.svg"); }
.i-building        { --ic: url("../icons/building-2.svg"); }
.i-calendar        { --ic: url("../icons/calendar.svg"); }
.i-calendar-check  { --ic: url("../icons/calendar-check.svg"); }
.i-camera          { --ic: url("../icons/camera.svg"); }
.i-check           { --ic: url("../icons/check.svg"); }
.i-check-circle    { --ic: url("../icons/circle-check.svg"); }
.i-circle-check    { --ic: url("../icons/circle-check-big.svg"); }
.i-chevron-down    { --ic: url("../icons/chevron-down.svg"); }
.i-chevron-left    { --ic: url("../icons/chevron-left.svg"); }
.i-chevron-right   { --ic: url("../icons/chevron-right.svg"); }
.i-clock           { --ic: url("../icons/clock.svg"); }
.i-coins           { --ic: url("../icons/coins.svg"); }
.i-compass         { --ic: url("../icons/compass.svg"); }
.i-eye             { --ic: url("../icons/eye.svg"); }
.i-eye-off         { --ic: url("../icons/eye-off.svg"); }
.i-filter          { --ic: url("../icons/filter.svg"); }
.i-flame           { --ic: url("../icons/flame.svg"); }
.i-gift            { --ic: url("../icons/gift.svg"); }
.i-globe           { --ic: url("../icons/globe.svg"); }
.i-graduation      { --ic: url("../icons/graduation-cap.svg"); }
.i-heart           { --ic: url("../icons/heart.svg"); }
.i-home            { --ic: url("../icons/home.svg"); }
.i-image           { --ic: url("../icons/image.svg"); }
.i-info            { --ic: url("../icons/info.svg"); }
.i-layers          { --ic: url("../icons/layers.svg"); }
.i-list-checks     { --ic: url("../icons/list-checks.svg"); }
.i-loader          { --ic: url("../icons/loader-circle.svg"); }
.i-lock            { --ic: url("../icons/lock.svg"); }
.i-log-in          { --ic: url("../icons/log-in.svg"); }
.i-log-out         { --ic: url("../icons/log-out.svg"); }
.i-mail            { --ic: url("../icons/mail.svg"); }
.i-map-pin         { --ic: url("../icons/map-pin.svg"); }
.i-medal           { --ic: url("../icons/medal.svg"); }
.i-menu            { --ic: url("../icons/menu.svg"); }
.i-message         { --ic: url("../icons/message-circle.svg"); }
.i-minus           { --ic: url("../icons/minus.svg"); }
.i-package         { --ic: url("../icons/package.svg"); }
.i-phone           { --ic: url("../icons/phone.svg"); }
.i-play            { --ic: url("../icons/play.svg"); }
.i-plus            { --ic: url("../icons/plus.svg"); }
.i-quote           { --ic: url("../icons/quote.svg"); }
.i-refresh         { --ic: url("../icons/refresh-cw.svg"); }
.i-search          { --ic: url("../icons/search.svg"); }
.i-send            { --ic: url("../icons/send.svg"); }
.i-settings        { --ic: url("../icons/settings.svg"); }
.i-share           { --ic: url("../icons/share-2.svg"); }
.i-shield          { --ic: url("../icons/shield-check.svg"); }
.i-smartphone      { --ic: url("../icons/smartphone.svg"); }
.i-sparkles        { --ic: url("../icons/sparkles.svg"); }
.i-star            { --ic: url("../icons/star.svg"); }
.i-target          { --ic: url("../icons/target.svg"); }
.i-ticket          { --ic: url("../icons/ticket.svg"); }
.i-trending-up     { --ic: url("../icons/trending-up.svg"); }
.i-trophy          { --ic: url("../icons/trophy.svg"); }
.i-user            { --ic: url("../icons/user.svg"); }
.i-user-plus       { --ic: url("../icons/user-plus.svg"); }
.i-users           { --ic: url("../icons/users.svg"); }
.i-video           { --ic: url("../icons/video.svg"); }
.i-wallet          { --ic: url("../icons/wallet.svg"); }
.i-x               { --ic: url("../icons/x.svg"); }
.i-zap             { --ic: url("../icons/zap.svg"); }

/* ==========================================================================
   2. 按钮
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 46px;
  padding: 0 var(--sp-6);
  border-radius: var(--r-full);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    transform var(--d-fast) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    color var(--d-base) var(--e-out),
    opacity var(--d-base) var(--e-out);
}

.btn:active { transform: scale(0.97); }

.btn:disabled,
.btn.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--primary {
  color: #fff;
  background: var(--g-brand);
  box-shadow: 0 14px 30px -14px rgba(109, 91, 255, .85);
}

.btn--primary:hover:not(:disabled) {
  box-shadow: 0 20px 42px -14px rgba(109, 91, 255, .95), var(--glow-violet);
  transform: translateY(-2px);
}

.btn--gold {
  color: #241a02;
  background: var(--g-gold);
  box-shadow: 0 14px 30px -14px rgba(255, 197, 61, .8);
}

.btn--gold:hover:not(:disabled) {
  box-shadow: 0 20px 42px -14px rgba(255, 197, 61, .9), var(--glow-gold);
  transform: translateY(-2px);
}

.btn--glass {
  color: var(--t-1);
  background: var(--glass-bg-2);
  border-color: var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.btn--glass:hover:not(:disabled) {
  background: var(--glass-bg-3);
  border-color: var(--glass-border-2);
  transform: translateY(-2px);
}

.btn--outline {
  color: var(--c-violet);
  border-color: rgba(109, 91, 255, .5);
  background: rgba(109, 91, 255, .08);
}

.btn--outline:hover:not(:disabled) {
  background: rgba(109, 91, 255, .18);
  border-color: var(--c-violet);
  transform: translateY(-2px);
}

.btn--ghost {
  color: var(--t-2);
  padding: 0 var(--sp-4);
}

.btn--ghost:hover:not(:disabled) {
  color: var(--t-1);
  background: var(--glass-bg-2);
}

.btn--danger {
  color: #fff;
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.btn--danger:hover:not(:disabled) { transform: translateY(-2px); }

.btn--sm {
  min-height: 36px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-sm);
}

.btn--lg {
  min-height: 54px;
  padding: 0 var(--sp-8);
  font-size: var(--fs-sub);
}

.btn--block { width: 100%; }

.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { opacity: .55; }
.btn.is-loading .btn__spinner { display: block; }

.btn__spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   3. 卡片与玻璃面板
   ========================================================================== */

.card {
  position: relative;
  padding: var(--sp-6);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--sh-card);
}

.card--solid {
  background: linear-gradient(160deg, rgba(21, 29, 63, .92), rgba(15, 21, 48, .96));
}

.card--sheen::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--g-card-sheen);
  opacity: .9;
  pointer-events: none;
}

.card--hover {
  cursor: pointer;
  transition:
    transform var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out);
}

.card--hover:hover {
  transform: translateY(-6px);
  border-color: var(--glass-border-2);
  box-shadow: var(--sh-float), var(--glow-violet);
}

.card--flat { box-shadow: none; }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sub);
  font-weight: var(--fw-semi);
}

/* 区块标题组 */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-7);
}

.sec-head__text { display: grid; gap: var(--sp-3); }

/* 图标底板 */
.icon-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  color: #fff;
  background: var(--g-brand);
  box-shadow: var(--glow-violet);
}

.icon-plate--gold {
  background: var(--g-gold);
  color: #241a02;
  box-shadow: var(--glow-gold);
}

.icon-plate--soft {
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  color: #b9c4ff;
  box-shadow: none;
}

/* ==========================================================================
   4. 表单
   ========================================================================== */

.form { display: grid; gap: var(--sp-5); }

.field { display: grid; gap: var(--sp-2); }

.field__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--t-2);
}

.field__label .req { color: var(--c-gold); }

.field__hint { font-size: var(--fs-xs); color: var(--t-3); }

.field__error {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: #ff9d9d;
}

.field.has-error .field__error { display: flex; }
.field.has-error .input { border-color: rgba(239, 68, 68, .68); }

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.input-wrap > .icon {
  position: absolute;
  left: 14px;
  color: var(--t-3);
  pointer-events: none;
}

.input-wrap > .input { padding-left: 44px; }
.input-wrap .input-wrap__suffix { position: absolute; right: 8px; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-body);
  color: var(--t-1);
  background: rgba(8, 12, 28, .62);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-sm);
  transition:
    border-color var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out);
}

.textarea {
  min-height: 118px;
  padding: var(--sp-3) var(--sp-4);
  line-height: var(--lh-snug);
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder { color: rgba(255, 255, 255, .28); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--glass-border-2); }

.input:focus,
.select:focus,
.textarea:focus {
  border-color: rgba(109, 91, 255, .8);
  background: rgba(8, 12, 28, .82);
  box-shadow: var(--ring-brand);
}

.select {
  appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("../icons/chevron-down.svg");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  filter: invert(0);
}

.select option { background: #101635; color: #fff; }

.input-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-xs);
  color: var(--t-3);
  cursor: pointer;
  transition: color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}

.input-icon-btn:hover { color: var(--t-1); background: var(--glass-bg-2); }

/* 验证码 */
.code-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: center;
}

.code-btn {
  min-width: 118px;
  min-height: 48px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: #cdd5ff;
  background: rgba(109, 91, 255, .16);
  border: 1px solid rgba(109, 91, 255, .42);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--d-base) var(--e-out);
}

.code-btn:hover:not(:disabled) { background: rgba(109, 91, 255, .28); }
.code-btn:disabled { opacity: .5; cursor: not-allowed; }

/* 复选与单选 */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--t-2);
  cursor: pointer;
}

.check input {
  appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--glass-border-2);
  border-radius: 6px;
  background: rgba(8, 12, 28, .7);
  cursor: pointer;
  transition: all var(--d-fast) var(--e-out);
}

.check input:checked {
  background: var(--g-brand);
  border-color: transparent;
}

.check input:checked::after {
  content: "";
  position: absolute;
}

.check input[type="checkbox"]:checked {
  background-image: url("../icons/check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
  filter: brightness(0) invert(1);
}

.check input[type="radio"] { border-radius: 50%; }

.getcode-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--c-cyan);
}

/* 选择芯片组 */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  padding: 9px 16px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--t-2);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--d-base) var(--e-out);
}

.chip:hover { color: var(--t-1); border-color: var(--glass-border-2); }

.chip.is-active {
  color: #fff;
  background: var(--g-brand);
  border-color: transparent;
  box-shadow: 0 10px 24px -12px rgba(109, 91, 255, .9);
}

/* ==========================================================================
   5. 标签 / 徽章 / 头像
   ========================================================================== */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: #c6cdff;
  background: rgba(109, 91, 255, .16);
  border: 1px solid rgba(109, 91, 255, .3);
  border-radius: var(--r-xs);
}

.tag--gold {
  color: #ffdf95;
  background: rgba(255, 197, 61, .14);
  border-color: rgba(255, 197, 61, .34);
}

.tag--cyan {
  color: #9be9ff;
  background: rgba(0, 210, 255, .14);
  border-color: rgba(0, 210, 255, .32);
}

.tag--green {
  color: #a7f3c8;
  background: rgba(34, 197, 94, .14);
  border-color: rgba(34, 197, 94, .32);
}

.tag--muted {
  color: var(--t-3);
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: #fff;
  background: var(--c-danger);
  border-radius: var(--r-full);
}

.avatar {
  flex: none;
  border-radius: 50%;
  background: var(--glass-bg-2);
  border: 2px solid rgba(255, 255, 255, .18);
  object-fit: cover;
}

.avatar-48 { width: 48px; height: 48px; }
.avatar-56 { width: 56px; height: 56px; }
.avatar-72 { width: 72px; height: 72px; }
.avatar-88 { width: 88px; height: 88px; }

/* ==========================================================================
   6. 进度：条 / 环
   ========================================================================== */

.progress {
  position: relative;
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, .1);
  border-radius: var(--r-full);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 0;
  background: var(--g-brand);
  border-radius: inherit;
  transition: width var(--d-slower) var(--e-out);
}

.progress--gold .progress__bar { background: var(--g-gold); }
.progress--thin { height: 5px; }

.ring {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 108px;
  height: 108px;
}

.ring__svg { transform: rotate(-90deg); }

.ring__track { stroke: rgba(255, 255, 255, .12); }

.ring__fill {
  stroke: url(#ringGrad);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--d-slower) var(--e-out);
}

.ring__value {
  position: absolute;
  display: grid;
  place-items: center;
  line-height: 1;
}

.ring__num { font-size: 26px; font-weight: var(--fw-bold); }

/* ==========================================================================
   7. 顶部导航
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  background: rgba(7, 11, 26, .72);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  height: var(--h-nav);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.brand__logo {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  box-shadow: 0 8px 20px -10px rgba(109, 91, 255, .9);
}

.brand__name { font-size: 17px; }
.brand__sub {
  display: block;
  font-size: 10px;
  font-weight: var(--fw-medium);
  letter-spacing: .18em;
  color: var(--t-3);
  text-transform: uppercase;
}

.nav__links {
  display: none;
  align-items: center;
  gap: var(--sp-1);
  margin-left: var(--sp-5);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--t-2);
  border-radius: var(--r-full);
  transition: color var(--d-base) var(--e-out), background-color var(--d-base) var(--e-out);
}

.nav__link:hover { color: var(--t-1); background: var(--glass-bg); }

.nav__link.is-active {
  color: #fff;
  background: rgba(109, 91, 255, .2);
}

.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--g-brand);
  transform: translateX(-50%);
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

.nav__toggle { display: inline-flex; }

/* 移动端抽屉 */
.drawer {
  position: fixed;
  inset: var(--h-nav) 0 0;
  z-index: var(--z-overlay);
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-9);
  background: rgba(7, 11, 26, .96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--d-base) var(--e-out),
    transform var(--d-base) var(--e-out),
    visibility var(--d-base);
}

.drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.drawer__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 15px var(--sp-4);
  font-size: var(--fs-sub);
  font-weight: var(--fw-medium);
  color: var(--t-2);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  transition: all var(--d-base) var(--e-out);
}

.drawer__link:hover,
.drawer__link.is-active {
  color: #fff;
  background: var(--glass-bg-2);
  border-color: var(--glass-border);
}

/* ==========================================================================
   8. 移动端底部 Tab
   ========================================================================== */

.tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-tabbar);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--h-tabbar) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(8, 12, 28, .9);
  border-top: 1px solid rgba(255, 255, 255, .08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.tabbar__item {
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 44px;
  padding: 8px 0;
  font-size: 10.5px;
  color: var(--t-3);
  transition: color var(--d-base) var(--e-out);
}

.tabbar__item .icon { transition: transform var(--d-base) var(--e-spring); }

.tabbar__item.is-active { color: #fff; }

.tabbar__item.is-active .icon {
  background: var(--g-brand);
  transform: translateY(-2px) scale(1.06);
}

/* ==========================================================================
   9. 页脚
   ========================================================================== */

.footer {
  position: relative;
  margin-top: var(--sp-9);
  padding: var(--sp-9) 0 calc(var(--sp-8) + var(--h-tabbar));
  background: linear-gradient(180deg, rgba(11, 16, 34, 0) 0%, rgba(9, 13, 30, .92) 40%, rgba(6, 9, 22, .98) 100%);
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.footer__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
}

.footer__about {
  display: grid;
  gap: var(--sp-4);
  max-width: 380px;
}

.footer__text {
  font-size: var(--fs-sm);
  color: var(--t-3);
  line-height: var(--lh-body);
}

.footer__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--t-1);
  letter-spacing: .04em;
}

.footer__list { display: grid; gap: var(--sp-3); }

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  color: var(--t-3);
  transition: color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}

.footer__link:hover { color: #fff; transform: translateX(3px); }

.footer__bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .07);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--t-4);
}

.footer__license {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.footer__license a:hover { color: var(--t-2); }

/* ==========================================================================
   10. 弹窗
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  background: rgba(4, 6, 18, .74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-base) var(--e-out), visibility var(--d-base);
}

.modal.is-open { opacity: 1; visibility: visible; }

.modal__panel {
  position: relative;
  width: min(480px, 100%);
  max-height: 84vh;
  overflow: auto;
  padding: var(--sp-6);
  background: linear-gradient(160deg, rgba(24, 33, 70, .98), rgba(13, 18, 42, .99));
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-float);
  transform: translateY(14px) scale(.97);
  transition: transform var(--d-base) var(--e-spring);
}

.modal.is-open .modal__panel { transform: none; }

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--t-3);
  border-radius: var(--r-xs);
  transition: all var(--d-base) var(--e-out);
}

.modal__close:hover { color: #fff; background: var(--glass-bg-2); }

.modal__title { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.modal__desc { font-size: var(--fs-sm); color: var(--t-3); }

.modal__body { margin: var(--sp-5) 0; }

.modal__actions {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.modal__actions .btn { flex: 1; }

/* ==========================================================================
   11. Toast
   ========================================================================== */

.toast-stack {
  position: fixed;
  top: calc(var(--h-nav) + 12px);
  left: 50%;
  z-index: var(--z-toast);
  display: grid;
  gap: var(--sp-2);
  width: min(420px, calc(100vw - 32px));
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 13px var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--t-1);
  background: rgba(20, 27, 58, .96);
  border: 1px solid var(--glass-border-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-float);
  animation: toast-in var(--d-base) var(--e-spring);
}

.toast--success { border-color: rgba(34, 197, 94, .5); }
.toast--success .icon { color: var(--c-success); }
.toast--error { border-color: rgba(239, 68, 68, .5); }
.toast--error .icon { color: var(--c-danger); }
.toast--info .icon { color: var(--c-cyan); }
.toast--gold { border-color: rgba(255, 197, 61, .5); }
.toast--gold .icon { color: var(--c-gold); }

.toast.is-out { animation: toast-out var(--d-base) var(--e-in) forwards; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(-10px) scale(.97); }
}

/* ==========================================================================
   12. 空状态 / 骨架屏 / 分隔
   ========================================================================== */

.empty {
  display: grid;
  place-items: center;
  gap: var(--sp-3);
  padding: var(--sp-9) var(--sp-5);
  text-align: center;
  color: var(--t-3);
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  color: #8d9bff;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
}

.empty__title { font-size: var(--fs-body); color: var(--t-2); }

.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border-radius: var(--r-sm);
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.divider {
  height: 1px;
  background: var(--g-line);
  border: 0;
  margin: var(--sp-6) 0;
}

/* ==========================================================================
   13. 统计数字
   ========================================================================== */

.stat { display: grid; gap: 4px; }

.stat__num {
  font-size: 30px;
  font-weight: var(--fw-heavy);
  line-height: 1.1;
}

.stat__label {
  font-size: var(--fs-xs);
  color: var(--t-3);
  letter-spacing: .02em;
}

/* ==========================================================================
   14. Tabs
   ========================================================================== */

.tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
}

.tabs__item {
  padding: 9px 18px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--t-3);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--d-base) var(--e-out);
}

.tabs__item:hover { color: var(--t-1); }

.tabs__item.is-active {
  color: #fff;
  background: var(--g-brand);
  box-shadow: 0 10px 22px -12px rgba(109, 91, 255, .95);
}

/* ==========================================================================
   15. 表格
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  background: rgba(8, 12, 28, .5);
}

.table { min-width: 100%; font-size: var(--fs-sm); }

.table th,
.table td {
  padding: 13px var(--sp-4);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.table th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  color: var(--t-3);
  background: rgba(255, 255, 255, .04);
  letter-spacing: .03em;
}

.table tbody tr { transition: background-color var(--d-fast) var(--e-out); }
.table tbody tr:hover { background: rgba(109, 91, 255, .08); }
.table tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   16. 时间轴
   ========================================================================== */

.timeline { display: grid; gap: var(--sp-4); }

.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
}

.timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 30px;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(109, 91, 255, .5), rgba(255, 255, 255, .06));
}

.timeline__dot {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #cdd5ff;
  background: rgba(109, 91, 255, .18);
  border: 1px solid rgba(109, 91, 255, .38);
  border-radius: 50%;
}

.timeline__body { display: grid; gap: 3px; padding-top: 4px; }
.timeline__title { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.timeline__meta { font-size: var(--fs-xs); color: var(--t-4); }

/* ==========================================================================
   17. 分步指示器
   ========================================================================== */

.steps {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.steps__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--t-3);
}

.steps__dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--t-3);
  background: var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  transition: all var(--d-base) var(--e-out);
}

.steps__item.is-active { color: #fff; }
.steps__item.is-active .steps__dot {
  color: #fff;
  background: var(--g-brand);
  border-color: transparent;
  box-shadow: 0 0 18px -4px rgba(109, 91, 255, .95);
}

.steps__item.is-done .steps__dot {
  color: #a7f3c8;
  background: rgba(34, 197, 94, .2);
  border-color: rgba(34, 197, 94, .4);
}

.steps__line {
  flex: 1;
  height: 1px;
  min-width: 16px;
  background: rgba(255, 255, 255, .14);
}

/* ==========================================================================
   18. 响应式
   ========================================================================== */

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
  .drawer { display: none; }
  .tabbar { display: none; }
  .footer { padding-bottom: var(--sp-8); }
  .page__main { padding-bottom: var(--sp-6); }
}

@media (max-width: 767px) {
  .modal__actions { flex-direction: column-reverse; }
  .toast-stack { top: 14px; }
  .sec-head { flex-direction: column; align-items: flex-start; }

  /* 移动端顶部导航压缩为图标按钮，避免横向溢出 */
  .nav__inner { gap: var(--sp-3); }
  .brand__sub { display: none; }
  .brand__name { font-size: 16px; }
  .nav__actions { gap: 6px; }
  .nav__actions .btn__text { display: none; }
  .nav__actions .btn {
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border-radius: 50%;
  }
  .nav__actions .nav__points { display: none; }
  .nav__actions .btn .icon { vertical-align: middle; }
}