/* SANMA-EA — 用户中心样式（深色 · 与官网同源）
 * 这一层把 FastAdmin 自带的 Bootstrap 前台外观，对齐到官网的设计语言（方向 D）。
 * 官网的令牌与字体定义在 assets/css/sanma-site.css；此处按需复刻同名变量，
 * 但不引入那份文件——它的全局重置会与 Bootstrap 打架。
 * 改配色时两处要一起改。
 *
 * 对比度基线（深底 #05060B 上实测）：
 *   --su-ink   #F2F5FA → 17.4:1
 *   --su-muted #98A3B7 →  6.8:1
 *   --su-dim   #7B8798 →  4.9:1
 *   --su-grad-btn 末停 #0E7490 上白字 → 5.1:1（故按钮另设渐变，不用 --grad）
 */

@font-face{font-family:'Archivo';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/sanma/archivo-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:300 900;font-display:swap;src:url('/assets/fonts/sanma/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/sanma/jetbrains-mono-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --su-bg:        #05060B;
  --su-slab:      rgba(255,255,255,.045);
  --su-sunken:    rgba(255,255,255,.022);
  --su-ink:       #F2F5FA;
  --su-muted:     #98A3B7;
  --su-dim:       #7B8798;
  --su-line:      rgba(255,255,255,.14);
  --su-line-2:    rgba(255,255,255,.28);
  --su-line-soft: rgba(255,255,255,.07);
  --su-violet:    #7C5CFF;
  --su-cyan:      #22D3EE;
  --su-lime:      #A3E635;
  --su-danger:    #F87171;
  --su-danger-ink:#B8412F;
  --su-grad:      linear-gradient(104deg,#A78BFA 6%,#60A5FA 46%,#22D3EE 88%);
  --su-grad-btn:  linear-gradient(108deg,#6B4AEE,#2E5FD4 55%,#0E7490);
  --su-ease:      cubic-bezier(.16,1,.3,1);
  --su-font: 'Archivo', system-ui, -apple-system, 'Segoe UI', 'PingFang SC',
             'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC',
             'Microsoft YaHei', sans-serif;
  --su-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

html{background:var(--su-bg);}
body{
  background:var(--su-bg);
  color:var(--su-ink);
  font-family:var(--su-font);
  font-size:15px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--su-ink);}
a:hover,a:focus{color:var(--su-cyan);text-decoration:none;}

/* 背景层：与官网同一套四色光斑 + 网格 + 噪点。用户中心页面没有 .bg 容器，
 * 用 body 的固定伪元素兜底，保证深底不是一块死黑。 */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 520px at 12% -8%,  rgba(124,92,255,.30), transparent 62%),
    radial-gradient(680px 480px at 92% 4%,   rgba(34,211,238,.20), transparent 60%),
    radial-gradient(720px 560px at 76% 96%,  rgba(59,130,246,.20), transparent 62%),
    radial-gradient(560px 420px at 4% 78%,   rgba(244,114,182,.13), transparent 62%),
    var(--su-bg);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(1100px 700px at 50% 0%, #000 12%, transparent 78%);
  -webkit-mask-image:radial-gradient(1100px 700px at 50% 0%, #000 12%, transparent 78%);
}

/* --- 通用容器 ----------------------------------------------------------- */
.su-shell{
  max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,56px);
  width:100%;
}

/* --- 顶部导航 ----------------------------------------------------------- */
.su-nav{
  position:sticky;top:0;z-index:70;height:70px;
  background:rgba(5,6,11,.72);
  backdrop-filter:blur(18px) saturate(1.3);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--su-line-soft);
  margin-bottom:clamp(28px,4vw,56px);
}
.su-nav .su-shell{height:100%;display:flex;align-items:center;gap:clamp(14px,3vw,44px);}
.su-brand{
  display:flex;align-items:baseline;flex:none;
  font-weight:800;font-size:21px;letter-spacing:-.05em;line-height:1.1;
  color:var(--su-ink);
}
.su-brand em{
  font-style:normal;
  background:var(--su-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#A78BFA; /* 兜底：探针/降级环境读不到渐变时仍可见 */
}
.su-brand sup{
  font-family:var(--su-mono);font-size:10px;font-weight:400;letter-spacing:.1em;
  color:var(--su-dim);margin-left:9px;transform:translateY(-1px);
}
.su-navlinks{
  display:flex;align-items:center;gap:clamp(12px,2vw,28px);
  margin-left:auto;font-size:14px;color:var(--su-muted);
}
.su-navlinks>a{position:relative;padding:6px 0;white-space:nowrap;color:var(--su-muted);}
.su-navlinks>a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--su-cyan);
  transform:scaleX(0);transform-origin:left;transition:transform .38s var(--su-ease);
}
.su-navlinks>a:hover{color:var(--su-ink);}
.su-navlinks>a:hover::after{transform:scaleX(1);}
.su-userbtn{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  height:38px;padding:0 16px;border-radius:2px;
  background:var(--su-grad-btn);color:#fff!important;
  font-size:13.5px;font-weight:600;border:1px solid rgba(255,255,255,.12);
  transition:transform .34s var(--su-ease),filter .2s;
}
.su-userbtn:hover{color:#fff!important;filter:brightness(1.14);transform:translateY(-1px);}

/* --- 内容容器 ----------------------------------------------------------- */
#content-container.container{max-width:1320px;width:auto;padding:0 clamp(20px,4vw,56px);}
.content{min-height:52vh;}

/* --- 登录 / 注册 -------------------------------------------------------- */
/* 注意：frontend.css 用 `.login-section .logon-tab > a`（特异性 0,2,1）
 * 和 `.login-section .login-main`（内层 45px padding）定死了这块的外观，
 * 所以下面必须同特异性或更高，否则会被压过去。 */
.user-section{
  max-width:440px;margin:0 auto;padding:clamp(26px,3vw,40px);
  background:var(--su-slab);border:1px solid var(--su-line);border-radius:14px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
}
.login-section{
  width:auto;max-width:440px;
  margin:clamp(24px,5vw,52px) auto;
  padding:clamp(26px,3vw,40px);
  border-radius:14px;
}
.login-section .logon-tab{
  display:flex;gap:0;margin:0 0 28px;
  border-bottom:1px solid var(--su-line-soft);
}
.login-section .logon-tab > a{
  display:block;float:none;flex:1 1 50%;width:auto;
  padding:10px 0 12px;margin-bottom:-1px;
  font-size:15px;font-weight:600;text-align:center;
  color:var(--su-dim);background:transparent;
  border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s,background-color .2s;
}
.login-section .logon-tab > a:hover{background:transparent;color:var(--su-ink);}
.login-section .logon-tab > a.active{
  background:transparent;color:var(--su-ink);border-bottom-color:var(--su-cyan);
}
.login-section .login-main{padding:0;}
.login-main .form-group{margin-bottom:18px;}
.control-label{
  display:block;font-size:13px;font-weight:600;color:var(--su-ink);
  margin-bottom:7px;text-align:left;padding:0;
}
.form-control{
  height:auto;padding:11px 13px;font-size:14.5px;
  color:var(--su-ink);background:rgba(255,255,255,.05);
  border:1px solid var(--su-line);border-radius:2px;box-shadow:none;
  transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.form-control:focus{
  background:rgba(255,255,255,.08);
  border-color:rgba(34,211,238,.65);
  box-shadow:0 0 0 3px rgba(34,211,238,.16);
}
.form-control::placeholder{color:var(--su-dim);}
.help-block{font-size:12.5px;color:var(--su-dim);}
select.form-control option{background:#0A0C14;color:var(--su-ink);}

/* --- 按钮 --------------------------------------------------------------- */
.btn{
  border-radius:2px;font-weight:600;font-size:14.5px;
  padding:11px 20px;box-shadow:none;border:1px solid transparent;
  transition:transform .34s var(--su-ease),background-color .2s,border-color .2s,color .2s,filter .2s;
}
.btn-lg{padding:12px 22px;font-size:15px;}
.btn-sm,.btn-xs{padding:6px 12px;font-size:13px;}
.btn-block{width:100%;}
.btn-primary,.btn-primary:focus{
  background:var(--su-grad-btn);border-color:rgba(255,255,255,.12);color:#fff;
}
.btn-primary:hover{
  background:var(--su-grad-btn);border-color:rgba(255,255,255,.22);color:#fff;
  filter:brightness(1.14);transform:translateY(-1px);
}
.btn-default,.btn-default:focus{background:transparent;border-color:var(--su-line);color:var(--su-ink);}
.btn-default:hover{background:rgba(255,255,255,.05);border-color:var(--su-line-2);color:var(--su-ink);transform:translateY(-1px);}
/* 语义色按钮：Bootstrap 原色（#1688f1 / #5cb85c / #f0ad4e / #d9534f）在深底上
 * 是四块互不相干的亮斑。这里收进品牌色域——成功用青柠绿配墨字（白字在青柠绿上
 * 只有 1.8:1），危险用加深的品牌红配白字，信息与警告降为描边（前台里它们只做
 * 「修改」「获取验证码」这类次要动作）。 */
.btn-info,.btn-info:focus{background:transparent;border-color:var(--su-line);color:var(--su-ink);}
.btn-info:hover{background:transparent;border-color:var(--su-cyan);color:var(--su-cyan);}
.btn-warning,.btn-warning:focus{background:transparent;border-color:var(--su-line);color:var(--su-ink);}
.btn-warning:hover{background:transparent;border-color:var(--su-ink);color:var(--su-ink);}
.btn-success,.btn-success:focus{background:var(--su-lime);border-color:var(--su-lime);color:#05060B;}
.btn-success:hover{background:var(--su-lime);border-color:var(--su-lime);color:#05060B;filter:brightness(1.08);}
.btn-danger,.btn-danger:focus{background:var(--su-danger-ink);border-color:var(--su-danger-ink);color:#fff;}
.btn-danger:hover{background:#9E3626;border-color:#9E3626;color:#fff;}
.no-border{border-color:transparent;}
.mt-3{margin-top:12px;}
.btn-forgot{font-size:13.5px;color:var(--su-cyan);}

/* --- 第三方登录 --------------------------------------------------------- */
/* addon 注入的三个按钮原本是 Bootstrap 的绿/蓝/红实心块，在一张单色强调的卡片上
 * 会散架。改成描边同形，只把品牌色留在图标上——识别度还在，噪音没了。 */
.social-login{
  display:flex;gap:10px;margin:22px 0 0;padding-top:22px;
  border-top:1px solid var(--su-line-soft);
}
.social-login .btn{
  flex:1 1 0;min-width:0;padding:9px 10px;font-size:13.5px;font-weight:500;
  background:transparent;border-color:var(--su-line);color:var(--su-ink);
}
.social-login .btn:hover{background:transparent;border-color:var(--su-ink);color:var(--su-ink);}
/* 上面的语义色 hover（.social-login .btn-danger:hover = 0,3,0）会盖过
 * .social-login .btn:hover（0,2,1），这里逐个拉平回来。 */
.social-login .btn-success:hover,
.social-login .btn-info:hover,
.social-login .btn-danger:hover,
.social-login .btn-warning:hover{background:transparent;border-color:var(--su-ink);color:var(--su-ink);}
.social-login .btn i{font-size:15px;vertical-align:-1px;}
.social-login .btn-success i{color:#07C160;}
.social-login .btn-info i{color:#12B7F5;}
.social-login .btn-danger i{color:#E6162D;}
@media (max-width:420px){
  .social-login{flex-wrap:wrap;}
  .social-login .btn{flex:1 1 100%;}
}

/* --- 面板 / 卡片 -------------------------------------------------------- */
.panel{
  background:var(--su-slab);border:1px solid var(--su-line);border-radius:14px;
  box-shadow:0 22px 54px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  margin-bottom:24px;
}
.panel-default{border-color:var(--su-line);}
.panel-default>.panel-heading{
  background:transparent;border-bottom:1px solid var(--su-line-soft);
  color:var(--su-ink);font-weight:600;border-radius:0;
}
.panel-default>.panel-footer{background:transparent;border-top:1px solid var(--su-line-soft);}
.panel-body{padding:clamp(20px,2.6vw,32px);}
.page-header{
  margin:0 0 24px;padding-bottom:18px;
  border-bottom:1px solid var(--su-line);
  font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  color:var(--su-ink);
}
.page-header .btn{margin-left:auto;}

/* --- 侧边导航 ----------------------------------------------------------- */
.nav-pills>li>a{border-radius:2px;color:var(--su-muted);font-size:14px;padding:9px 14px;}
.nav-pills>li>a:hover{background:rgba(255,255,255,.06);color:var(--su-ink);}
.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{
  background:rgba(124,92,255,.18);color:var(--su-ink);
  box-shadow:inset 2px 0 0 var(--su-violet);
}
.nav-stacked>li+li{margin-top:3px;}
.nav>li>a:hover,.nav>li>a:focus{background:rgba(255,255,255,.06);}

/* --- 表格 --------------------------------------------------------------- */
.table{font-size:14.5px;color:var(--su-ink);}
.table>thead>tr>th{
  border-bottom:1px solid var(--su-line);font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--su-dim);
}
.table>tbody>tr>td{border-top:1px solid var(--su-line-soft);}
.table>tbody+tbody{border-top:1px solid var(--su-line);}
.table-striped>tbody>tr:nth-of-type(odd){background:rgba(255,255,255,.028);}
.table-hover>tbody>tr:hover{background:rgba(255,255,255,.05);}
.table>tbody>tr>td,.table>tbody>tr>th,
.table>thead>tr>td,.table>thead>tr>th{border-color:var(--su-line-soft);}

/* --- 提示 --------------------------------------------------------------- */
.alert{border-radius:2px;border:1px solid var(--su-line);background:var(--su-slab);color:var(--su-muted);font-size:14px;}
.alert-success{border-left:3px solid var(--su-lime);color:var(--su-ink);}
.alert-danger,.alert-error{border-left:3px solid var(--su-danger);color:var(--su-ink);}
.alert-info{border-left:3px solid var(--su-cyan);color:var(--su-ink);}
.text-muted{color:var(--su-muted);}
.text-danger{color:var(--su-danger);}
.avatar-img img,.user-center img{border-radius:2px;border:1px solid var(--su-line);}

/* --- 下拉 / 弹窗 / 分页（Bootstrap 默认白底，深色下必须覆写） ------------ */
.dropdown-menu{
  background:#0A0C14;border:1px solid var(--su-line);border-radius:2px;
  box-shadow:0 22px 54px -26px rgba(0,0,0,.9);
}
.dropdown-menu>li>a{color:var(--su-muted);}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{
  background:rgba(255,255,255,.07);color:var(--su-ink);
}
.dropdown-menu .divider{background-color:var(--su-line-soft);}
.modal-content{
  background:#0A0C14;border:1px solid var(--su-line);border-radius:2px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);color:var(--su-ink);
}
.modal-header,.modal-footer{border-color:var(--su-line-soft);}
.modal-header .close{color:var(--su-ink);text-shadow:none;opacity:.6;}
.modal-header .close:hover{opacity:1;}
.pagination>li>a,.pagination>li>span{
  background:transparent;border-color:var(--su-line);color:var(--su-muted);
}
.pagination>li>a:hover,.pagination>li>span:hover{
  background:rgba(255,255,255,.07);border-color:var(--su-line);color:var(--su-ink);
}
.pagination>.active>a,.pagination>.active>a:hover{
  background:var(--su-violet);border-color:var(--su-violet);color:#fff;
}
.pagination>.disabled>a,.pagination>.disabled>span{background:transparent;border-color:var(--su-line-soft);color:var(--su-dim);}
.well{background:var(--su-sunken);border-color:var(--su-line);color:var(--su-muted);}
hr{border-top-color:var(--su-line-soft);}
.close{color:var(--su-ink);text-shadow:none;opacity:.55;}
.close:hover{opacity:1;color:var(--su-ink);}
code,kbd,pre{background:rgba(255,255,255,.06);color:var(--su-ink);border-color:var(--su-line-soft);}

/* --- 页脚 --------------------------------------------------------------- */
.su-foot{
  background:rgba(255,255,255,.022);border-top:1px solid var(--su-line);
  padding:34px 0 24px;margin-top:clamp(40px,5vw,72px);
}
.su-foot .su-shell{
  display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  font-family:var(--su-mono);font-size:11.5px;letter-spacing:.06em;
  line-height:1.6;color:var(--su-dim);
}
.su-foot a{color:var(--su-dim);}
.su-foot a:hover{color:var(--su-cyan);}
.su-foot p{margin:0 0 0 auto;}

/* --- 响应式 ------------------------------------------------------------- */
@media (max-width:860px){
  .su-navlinks>a{display:none;}
  .su-userbtn{margin-left:auto;}
  .su-foot p{margin-left:0;}
}