/* ==========================================================================
   步数云 · 用户端全站样式
   设计语言：液态圆角玻璃拟态 + 橘黄渐变
   说明：class 名称与 HTML 结构保持兼容，仅升级样式值与图标体系。
   ========================================================================== */

:root{
  /* 底色 / 玻璃 */
  --bg:#f97316;
  --bg2:#fbbf24;
  --card:rgba(255,255,255,.72);
  --card2:rgba(255,255,255,.55);
  --glass:rgba(255,255,255,.72);
  --glass-soft:rgba(255,255,255,.6);
  --glass-line:rgba(255,255,255,.5);
  /* 描边 */
  --line:rgba(249,115,22,.10);
  --line2:rgba(249,115,22,.22);
  /* 文字 */
  --txt:#1f2937;
  --dim:#6b7280;
  --dim2:#9ca3af;
  /* 主色 */
  --acc:#f97316;
  --acc-hover:#ea580c;
  --acc2:#10b981;
  --warn:#f59e0b;
  --err:#ef4444;
  /* 圆角 */
  --r:20px;
  --r-btn:14px;
  --r-in:12px;
  /* 阴影 */
  --shadow:0 8px 32px rgba(249,115,22,.12);
  --shadow-hi:0 12px 40px rgba(249,115,22,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(circle at 20% 20%, rgba(251,191,36,.4), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(249,115,22,.3), transparent 50%),
    linear-gradient(135deg,#f97316 0%,#fbbf24 50%,#fef3c7 100%);
  background-color:#fbbf24;
  background-attachment:fixed;
  color:var(--txt);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
a{color:var(--acc);text-decoration:none;transition:all .25s ease}
a:hover{color:var(--acc-hover);text-decoration:underline}
h1,h2,h3{margin:0 0 12px;line-height:1.3;color:var(--txt)}
h1{font-size:24px}
h2{font-size:19px}
h3{font-size:16px}
p{margin:0 0 12px}
code{background:rgba(255,255,255,.6);border:1px solid var(--line2);padding:1px 6px;border-radius:8px;font-size:13px;color:#c2410c;word-break:break-all}

/* ---------- 内联 SVG 图标（Lucide outline 风格，尺寸由 CSS 控制） ---------- */
svg.ico{width:18px;height:18px;vertical-align:middle;flex:0 0 auto;display:inline-block}
svg.ico-sm{width:15px;height:15px}
svg.ico-lg{width:22px;height:22px}
svg.ico-xl{width:34px;height:34px}
svg.ico-xxl{width:40px;height:40px}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.5);
  box-shadow:0 4px 20px rgba(249,115,22,.08);
}
.topbar-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:10px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;color:var(--txt);font-weight:700;font-size:16px}
.brand:hover{text-decoration:none;color:var(--txt)}
.logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:10px;
  background:linear-gradient(135deg,#f97316,#fbbf24);
  color:#fff;box-shadow:0 4px 12px rgba(249,115,22,.35);
  transition:all .25s ease;
}
.brand:hover .logo{transform:rotate(-6deg) scale(1.05)}
.brand-name{letter-spacing:.2px}
.nav{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.nav a{
  color:var(--dim);padding:7px 12px;border-radius:12px;font-size:14px;
  display:inline-flex;align-items:center;gap:6px;transition:all .25s ease;
}
.nav a:hover{background:rgba(249,115,22,.1);color:var(--acc);text-decoration:none}
.nav a.on{
  background:linear-gradient(135deg,#f97316,#fbbf24);
  color:#fff;font-weight:600;
  box-shadow:0 2px 10px rgba(249,115,22,.3);
}
.nav a.on:hover{color:#fff}
.nav a.admin{color:#059669;background:rgba(16,185,129,.12)}
.nav a.admin:hover{background:rgba(16,185,129,.2);color:#047857}
.userbox{display:flex;align-items:center;gap:8px}
.quota-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.65);color:var(--acc);
  border:1px solid rgba(249,115,22,.3);
  padding:4px 11px;border-radius:20px;font-size:12px;font-weight:600;
  box-shadow:0 2px 8px rgba(249,115,22,.1);
}
.user-menu{color:var(--dim);font-size:14px;padding:6px 4px}
.user-menu:hover{color:var(--acc-hover);text-decoration:none}

/* 通知铃铛 + 未读红点 */
.bell{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:12px;color:var(--dim);
  background:rgba(255,255,255,.55);border:1px solid rgba(249,115,22,.18);
  transition:all .25s ease;
}
.bell:hover{color:var(--acc);background:rgba(255,255,255,.85);text-decoration:none;transform:translateY(-1px)}
.bell.has{color:var(--acc)}
.bell-dot{
  position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;
  font-size:10.5px;font-weight:700;line-height:1;border-radius:10px;
  box-shadow:0 2px 8px rgba(239,68,68,.45);
}

/* 通知列表 */
.notice-item{
  position:relative;border-radius:16px;border:1px solid rgba(249,115,22,.14);
  background:rgba(255,255,255,.55);padding:13px 15px;margin-bottom:10px;
  transition:all .25s ease;
}
.notice-item.unread{background:rgba(255,255,255,.85);border-left:4px solid var(--acc);box-shadow:0 4px 16px rgba(249,115,22,.12)}
.notice-item.read{opacity:.82}
.notice-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.notice-title{font-weight:600;color:var(--txt)}
.notice-body{margin-top:8px;color:#4b5563;font-size:14px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.notice-meta{color:var(--dim2);font-size:12px;margin-left:auto}

/* 卡密行 / 复制按钮 */
.card-mask{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.5px;background:rgba(255,255,255,.7);border:1px solid rgba(249,115,22,.16);border-radius:8px;padding:2px 8px;color:#c2410c}

.burger{
  display:none;background:rgba(255,255,255,.6);border:1px solid rgba(249,115,22,.25);
  color:var(--acc);border-radius:12px;padding:6px 10px;font-size:16px;cursor:pointer;
  transition:all .25s ease;align-items:center;justify-content:center;
}
.burger:hover{background:rgba(249,115,22,.1)}

/* ---------- 移动端下拉菜单（默认隐藏；仅 <900px 且 body.nav-open 时出现） ---------- */
.mobile-menu,.mobile-overlay{display:none}

.mobile-menu{
  position:absolute;
  top:100%;left:0;right:0;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(249,115,22,.15);
  box-shadow:0 12px 32px rgba(249,115,22,.18);
  padding:14px 18px 18px;
  max-height:80vh;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  z-index:60;
}
/* 遮罩为 body 直接子元素，层级低于 .topbar(50)，因此不会遮住面板与汉堡按钮 */
.mobile-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.32);
  z-index:45;
}

/* 用户信息区 */
.mobile-user{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:rgba(249,115,22,.06);
  border-radius:14px;
  margin-bottom:10px;
}
.mobile-user .avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,#f97316,#fbbf24);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
  box-shadow:0 4px 12px rgba(249,115,22,.3);
}
.mobile-user .avatar svg{width:19px;height:19px}
.mobile-user .info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.mobile-user .email{max-width:100%;font-size:13px;font-weight:600;color:#1f2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-user .quota{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;color:#c2410c;
  background:rgba(255,255,255,.8);
  border:1px solid rgba(249,115,22,.3);
  padding:1px 8px;border-radius:20px;white-space:nowrap;
}
.mobile-user .quota svg{width:11px;height:11px;flex-shrink:0}
.mobile-user .logout{
  flex-shrink:0;padding:6px 12px;font-size:12px;
  background:rgba(239,68,68,.1);color:#dc2626;border:1px solid rgba(239,68,68,.25);
  border-radius:10px;cursor:pointer;
}
.mobile-user .logout:hover{background:rgba(239,68,68,.2);color:#b91c1c;text-decoration:none}

/* 通知入口 */
.mobile-notice{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;
  color:#4b5563;text-decoration:none;font-size:14px;
  position:relative;transition:all .2s ease;
}
.mobile-notice svg{width:19px;height:19px;flex-shrink:0}
.mobile-notice:hover{background:rgba(249,115,22,.08);color:#f97316;text-decoration:none}
.mobile-notice .badge-dot{
  margin-left:auto;min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ef4444,#f97316);color:#fff;
  font-size:11px;font-weight:700;line-height:1;border-radius:10px;
  box-shadow:0 2px 8px rgba(239,68,68,.45);
}

.mobile-divider{height:1px;background:rgba(249,115,22,.12);margin:8px 0}

/* 导航项（左对齐，图标 + 文字） */
.mobile-nav{display:flex;flex-direction:column;gap:2px}
.mobile-nav a{
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;border-radius:12px;
  color:#4b5563;text-decoration:none;font-size:14px;
  transition:all .2s ease;
}
.mobile-nav a:hover{background:rgba(249,115,22,.08);color:#f97316;text-decoration:none}
.mobile-nav a.on{background:linear-gradient(135deg,#f97316,#fbbf24);color:#fff;font-weight:600;box-shadow:0 2px 10px rgba(249,115,22,.3)}
.mobile-nav a.on:hover{color:#fff}
.mobile-nav a svg{width:18px;height:18px;flex-shrink:0}

/* 底部入口 */
.mobile-footer{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.mobile-footer a{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:12px;font-size:13px;
  color:#6b7280;text-decoration:none;transition:all .2s ease;
}
.mobile-footer a svg{width:17px;height:17px;flex-shrink:0}
.mobile-footer a:hover{background:rgba(249,115,22,.06);color:#f97316;text-decoration:none}
.mobile-footer a.admin{color:#059669}
.mobile-footer a.admin:hover{background:rgba(16,185,129,.1);color:#047857}
.mobile-footer a.danger{color:#dc2626}
.mobile-footer a.danger:hover{background:rgba(239,68,68,.08);color:#b91c1c}

.wrap{max-width:1180px;margin:0 auto;padding:22px 18px 60px}
.foot{max-width:1180px;margin:0 auto;padding:22px 18px 40px;color:rgba(120,53,15,.7);font-size:12px;border-top:1px solid rgba(255,255,255,.5)}

/* ---------- 卡片（液态玻璃） ---------- */
.card{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:18px;margin-bottom:16px;
  transition:transform .25s ease,box-shadow .25s ease;
}
.card-tight{padding:14px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.muted{color:var(--dim)}
.small{font-size:13px}
.tiny{font-size:12px;color:var(--dim2)}
/* 直接落在橘黄渐变底色上（非玻璃卡片内）的次要文字，加深以保证浅色背景可读性 */
.between .muted,.between .small,.between .tiny,.wrap>p.muted,.hero .sub{color:#374151}
.foot{color:rgba(90,45,10,.88)}
.center{text-align:center}
.mt{margin-top:14px}
.mb{margin-bottom:14px}

/* ---------- 统计块 ---------- */
.stat{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:20px;padding:15px;
  box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease;
}
.stat .k{font-size:12px;color:var(--dim);margin-bottom:6px}
.stat .v{font-size:24px;font-weight:700;letter-spacing:.5px;color:var(--txt)}
.stat .v.acc{color:var(--acc)}
.stat .v.ok{color:var(--acc2)}
.stat .s{font-size:12px;color:var(--dim2);margin-top:3px}

/* ---------- 表单 ---------- */
label{display:block;font-size:13px;color:var(--dim);margin:12px 0 5px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=time],select,textarea{
  width:100%;background:rgba(255,255,255,.6);
  border:1px solid rgba(249,115,22,.2);
  color:var(--txt);
  border-radius:12px;padding:10px 14px;font-size:14px;outline:none;font-family:inherit;
  transition:all .25s ease;
}
input::placeholder,textarea::placeholder{color:#9ca3af}
input:focus,select:focus,textarea:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.15)}
textarea{min-height:80px;resize:vertical}
input[type=checkbox]{width:auto;accent-color:var(--acc);cursor:pointer}
select option{color:#1f2937;background:#fff}
.form-row{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.hint{font-size:12px;color:var(--dim);margin-top:5px}

/* ---------- 按钮（液态圆角） ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:rgba(255,255,255,.6);color:#c2410c;
  border:1px solid rgba(249,115,22,.3);
  padding:10px 16px;border-radius:14px;font-size:14px;cursor:pointer;
  font-family:inherit;transition:all .25s ease;white-space:nowrap;
}
.btn:hover{background:rgba(255,255,255,.85);text-decoration:none;transform:translateY(-2px);box-shadow:0 6px 18px rgba(249,115,22,.18)}
.btn:active{transform:translateY(0)}
.btn-primary{
  background:linear-gradient(135deg,#f97316,#fbbf24);
  border:none;color:#fff;font-weight:600;
  box-shadow:0 4px 15px rgba(249,115,22,.35);
}
.btn-primary:hover{background:linear-gradient(135deg,#ea580c,#f59e0b);color:#fff;box-shadow:0 6px 20px rgba(249,115,22,.45)}
.btn-ok{background:linear-gradient(135deg,#10b981,#34d399);border:none;color:#fff;font-weight:600;box-shadow:0 4px 15px rgba(16,185,129,.3)}
.btn-ok:hover{background:linear-gradient(135deg,#059669,#10b981);color:#fff}
.btn-danger{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.35);color:#dc2626}
.btn-danger:hover{background:rgba(239,68,68,.2);color:#b91c1c}
.btn-warn{background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.4);color:#b45309}
.btn-warn:hover{background:rgba(245,158,11,.26);color:#92400e}
.btn-ghost{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);color:var(--dim)}
.btn-ghost:hover{color:var(--acc);background:rgba(255,255,255,.8)}
.btn-sm{padding:6px 12px;font-size:13px;border-radius:12px}
.btn-lg{padding:13px 26px;font-size:15px;border-radius:14px}
.btn-block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- 表格 ---------- */
.table-wrap{
  overflow-x:auto;border:1px solid rgba(249,115,22,.1);border-radius:20px;
  background:rgba(255,255,255,.45);
}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px}
th,td{padding:11px 13px;text-align:left;border-bottom:1px solid rgba(249,115,22,.1);white-space:nowrap}
th{background:rgba(249,115,22,.08);color:var(--acc);font-weight:600;font-size:12.5px;letter-spacing:.3px}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .25s ease}
tbody tr:hover{background:rgba(255,255,255,.5)}
td{color:var(--txt)}
td.wrap-cell{white-space:normal;max-width:420px}

/* ---------- 标签 ---------- */
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;font-weight:600;white-space:nowrap}
.badge.ok{background:rgba(16,185,129,.15);color:#059669}
.badge.fail{background:rgba(239,68,68,.14);color:#dc2626}
.badge.warn{background:rgba(245,158,11,.18);color:#b45309}
.badge.info{background:rgba(59,130,246,.14);color:#2563eb}
.badge.gray{background:rgba(107,114,128,.14);color:#4b5563}

/* ---------- 提示 ---------- */
.flash{
  border-radius:14px;padding:12px 15px;margin-bottom:14px;font-size:14px;
  border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.flash-ok{background:rgba(255,255,255,.84);border-color:rgba(16,185,129,.45);border-left:4px solid #10b981;color:#047857}
.flash-err{background:rgba(255,255,255,.84);border-color:rgba(239,68,68,.45);border-left:4px solid #ef4444;color:#b91c1c}
.flash-warn{background:rgba(255,255,255,.84);border-color:rgba(245,158,11,.5);border-left:4px solid #f59e0b;color:#92400e}
.flash-info{background:rgba(255,255,255,.84);border-color:rgba(249,115,22,.35);border-left:4px solid #f97316;color:#c2410c}

.captcha-box{display:flex;gap:10px;align-items:center}
.captcha-img{height:42px;border-radius:12px;border:1px solid rgba(249,115,22,.25);cursor:pointer;display:block;background:#fff}

/* ---------- 首页 ---------- */
.hero{padding:38px 0 10px;text-align:center}
.hero h1{font-size:34px;line-height:1.25;margin-bottom:14px}
.hero .sub{color:#7c4a12;font-size:16px;max-width:640px;margin:0 auto 22px}
.hero .grad{background:linear-gradient(90deg,#7c2d12,#ea580c);-webkit-background-clip:text;background-clip:text;color:transparent}
.feat{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:20px;padding:18px;
  box-shadow:var(--shadow);
  transition:transform .25s ease,box-shadow .25s ease;
}
.feat .ico{color:var(--acc);margin-bottom:8px}
.feat h3{margin-bottom:6px;font-size:15px}
.feat p{margin:0;color:var(--dim);font-size:13.5px}
.steps-flow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:26px 0;align-items:center}
.steps-flow div{
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.55);
  border-radius:14px;padding:11px 15px;font-size:13.5px;color:var(--dim);
  box-shadow:0 4px 16px rgba(249,115,22,.1);
}
.steps-flow b{color:var(--txt)}
.steps-flow div.arrow{background:none;border:none;box-shadow:none;padding:11px 2px;color:var(--acc)}

/* ---------- 教程 ---------- */
.doc h2{margin-top:26px;padding-top:14px;border-top:1px solid rgba(249,115,22,.15)}
.doc h3{margin-top:18px;color:#c2410c}
.doc ol,.doc ul{padding-left:22px;color:#374151}
.doc li{margin:5px 0}
.doc .note{
  background:rgba(255,255,255,.6);border-left:3px solid var(--acc);
  padding:10px 14px;border-radius:12px;color:#4b5563;font-size:13.5px;
}

.empty{text-align:center;padding:30px 16px;color:var(--dim)}
.empty .ico{margin-bottom:8px;color:var(--acc)}
.empty .ico svg{width:34px;height:34px}

/* ---------- 交互动效（仅支持 hover 的设备上浮） ---------- */
@media (hover:hover){
  .card:hover,.stat:hover,.feat:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(249,115,22,.18)}
}

/* ---------- 响应式列隐藏（表格次要列） ---------- */
.hide-sm{display:table-cell}
.hide-md{display:table-cell}
@media (max-width:1024px){.hide-md{display:none!important}}
@media (max-width:768px){.hide-sm{display:none!important}}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  /* 汉堡按钮推到最右 */
  .burger{display:inline-flex;order:3;margin-left:auto}
  /* 移动端隐藏桌面导航与用户栏，统一收进 .mobile-menu 下拉面板 */
  .nav{display:none!important}
  .userbox{display:none!important}
  /* 展开下拉面板 + 背景遮罩 */
  body.nav-open .mobile-menu{display:block}
  body.nav-open .mobile-overlay{display:block}
  body.nav-open{overflow:hidden}
  .hero h1{font-size:26px}
  .form-row{grid-template-columns:1fr}
}
@media (max-width:768px){
  /* 小屏幕整体收紧，保证表格与卡片可读 */
  .stat .v{font-size:20px}
  .card{padding:14px}
  .btn{padding:9px 14px;font-size:13px}
  th,td{padding:8px 10px;font-size:12.5px}
}
@media (max-width:560px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .wrap{padding:16px 13px 50px}
  .topbar-in{padding:9px 13px;gap:10px}
  h1{font-size:21px}
  .stat .v{font-size:21px}
  .hero h1{font-size:23px}
  .steps-flow{gap:8px}
  .steps-flow div{padding:9px 12px}
}

/* ---------- 底部预留：避免内容被固定音乐播放器遮挡 ---------- */
body{padding-bottom:90px}
.foot{padding-bottom:60px}

/* ---------- 音乐播放器适配 ---------- */
mango-music-player{max-width:90vw;z-index:999}
@media(max-width:768px){
  mango-music-player{max-width:96vw!important;bottom:1em!important}
}

/* ==========================================================================
   v1.7.0 新增：第三方聚合登录 + 个人中心
   命名空间统一 .oauth-* / .jumplist / .profile-* / .bind-*，不影响既有样式
   ========================================================================== */

/* ---------- 第三方登录入口（登录页 / 注册页 / 个人中心） ---------- */
.oauth-divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:#9ca3af;font-size:12px;letter-spacing:1px}
.oauth-divider::before,.oauth-divider::after{content:"";flex:1;height:1px;background:rgba(249,115,22,.18)}
.oauth-divider span{white-space:nowrap;font-weight:600;color:#b45309}
.oauth-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px}
.oauth-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid rgba(249,115,22,.16);border-radius:14px;background:rgba(255,255,255,.6);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.oauth-item:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 8px 22px rgba(249,115,22,.18);border-color:var(--c,#f97316);text-decoration:none}
.oauth-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;flex:0 0 auto}
.oauth-ico svg{width:21px;height:21px}
.oauth-item .oauth-name{font-size:12px;color:#4b5563;white-space:nowrap}

/* ---------- 个人中心：分区跳转 ---------- */
.jumplist{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.jumplist a{font-size:13px;padding:6px 13px;border-radius:20px;background:rgba(255,255,255,.7);border:1px solid rgba(249,115,22,.18);color:#4b5563;text-decoration:none}
.jumplist a:hover{border-color:#f97316;color:#ea580c;text-decoration:none}

/* ---------- 个人中心：资料抬头 ---------- */
.profile-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.profile-avatar{flex:0 0 auto;width:64px;height:64px;border-radius:20px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(249,115,22,.12);color:#f97316;border:1px solid rgba(249,115,22,.22)}
.profile-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.profile-avatar svg{width:32px;height:32px}
.profile-kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px 18px;margin-top:14px}
.profile-kv .k{font-size:12px;color:#9ca3af;margin-bottom:2px}
.profile-kv .v{font-size:13.5px;color:#374151;font-weight:600;word-break:break-all}

/* ---------- 个人中心：第三方绑定列表 ---------- */
.bind-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:12px}
.bind-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(249,115,22,.16);border-radius:14px;background:rgba(255,255,255,.6)}
.bind-row .oauth-ico{width:34px;height:34px;border-radius:11px}
.bind-row .oauth-ico svg{width:18px;height:18px}
.bind-avatar{width:34px;height:34px;border-radius:11px;object-fit:cover;flex:0 0 auto;background:rgba(249,115,22,.1)}
.bind-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bind-name{font-size:13.5px;font-weight:600;color:#374151}
.bind-sub{font-size:11.5px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bind-act{flex:0 0 auto}

@media (max-width:560px){
  .oauth-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr))}
  .bind-list{grid-template-columns:1fr}
  .profile-avatar{width:54px;height:54px;border-radius:17px}
}

/* ---------- Loading 加载动画 ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;flex-shrink:0}
.spinner.dark{border-color:rgba(249,115,22,.25);border-top-color:#f97316}
.btn-loading{pointer-events:none;opacity:.85;cursor:not-allowed;position:relative}
.btn-loading .btn-text{visibility:hidden}
.btn-loading::after{content:attr(data-loading-text);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7px;font-weight:600}
.btn-loading::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -42px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn-loading[data-loading-text]::before{display:block}
.btn-ghost.btn-loading::before,.btn-warn.btn-loading::before{border-color:rgba(249,115,22,.25);border-top-color:#f97316}
.btn-danger.btn-loading::before{border-color:rgba(239,68,68,.3);border-top-color:#dc2626}

/* 全屏 loading 遮罩（耗时长的操作如刷步） */
.loading-overlay{position:fixed;inset:0;background:rgba(255,247,237,.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:9999;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.loading-overlay.show{display:flex}
.loading-overlay .spinner{width:44px;height:44px;border-width:3px;border-color:rgba(249,115,22,.2);border-top-color:#f97316}
.loading-overlay .loading-text{font-size:16px;font-weight:600;color:#92400e;text-align:center;line-height:1.6}
.loading-overlay .loading-sub{font-size:13px;color:#b45309;text-align:center;opacity:.8}

/* AJAX 按钮 loading */
.ajax-loading{pointer-events:none;opacity:.7}
.ajax-loading svg{display:none}
.ajax-loading::after{content:"";display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-right:4px}