@charset "UTF-8";
/* ==========================================================================
   霓虹漫城 · 夜街区 — 会员中心 / 作者中心 / 登录注册 外观层
   --------------------------------------------------------------------------
   本文件只做“外观接管”：
     1. neon 主题原本靠 82KB 的 neon.css 统一这些页面的白底与旧控件，
        本模板不加载 neon.css，因此这里把同样的职责用夜街区的设计令牌重写一遍；
     2. 所有选择器都命中漫城 CMS 公共脚本依赖的结构类名
        （.header-user-wrapper / .aside-user / .in-sec__box / .j-header-searchbox …），
        只覆盖颜色、边框、圆角、间距，不改布局骨架；
     3. 会员中心与作者中心的表单、表格、弹窗、空状态统一走暗色玻璃面板。
   ========================================================================== */

/* ==========================================================================
   1. 账户区顶栏
   ========================================================================== */
.header-user-wrapper {
  position: relative;
  z-index: 80;
  border-bottom: 1px solid var(--nb-line);
  background: linear-gradient(180deg, rgba(10, 15, 30, .97) 0%, rgba(8, 12, 24, .93) 100%);
}

.header-user-wrapper .main-container {
  display: flex;
  align-items: center;
  gap: var(--nb-s6);
  min-height: 64px;
  padding-block: 8px;
}

.header-user-wrapper .header-logo,
.nb-account-brand {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  color: #fff;
  font-size: var(--nb-f-lg);
  font-weight: 800;
  letter-spacing: .6px;
  line-height: 1.2;
}

.header-user-wrapper .header-logo small,
.nb-account-brand small {
  margin-top: 2px;
  color: var(--nb-cyan);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 3px;
}

.header-user-wrapper .header-logo:hover,
.nb-account-brand:hover {
  color: var(--nb-cyan);
}

.header-user-wrapper .nav-menu {
  display: flex;
  align-items: center;
  gap: var(--nb-s2);
  flex: 1;
  min-width: 0;
}

.header-user-wrapper .nav-menu li {
  float: none;
}

.header-user-wrapper .nav-menu li a {
  display: block;
  padding: 8px var(--nb-s3);
  border-radius: var(--nb-r-sm);
  color: var(--nb-text-2);
  font-size: var(--nb-f-base);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--nb-t) var(--nb-ease), background var(--nb-t) var(--nb-ease);
}

.header-user-wrapper .nav-menu li a:hover,
.header-user-wrapper .nav-menu li a.active {
  color: #fff;
  background: rgba(53, 224, 208, .10);
}

/* 顶部搜索框（会员中心自己的搜索，仍由 user.js 接管） */
.header-user-wrapper .search-box,
.header-user-wrapper .j-header-searchbox {
  display: flex;
  align-items: center;
  width: min(260px, 26vw);
  min-height: 38px;
  padding-left: var(--nb-s4);
  border: 1px solid var(--nb-line-strong);
  border-radius: var(--nb-r-pill);
  background: rgba(7, 10, 20, .6);
}

.header-user-wrapper .search-box input,
.header-user-wrapper .j-header-search-input {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 var(--nb-s3);
  border: 0;
  background: transparent;
  color: var(--nb-text);
  font-size: var(--nb-f-base);
  outline: none;
}

.header-user-wrapper .search-box input::placeholder {
  color: var(--nb-text-3);
}

.header-user-wrapper .search-btn,
.header-user-wrapper .j-header-search-btn {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 30px;
  margin-right: 4px;
  border-radius: var(--nb-r-pill);
  background: var(--nb-grad-cyan);
  color: var(--nb-text-invert);
  cursor: pointer;
}

.header-user-wrapper .search-btn i,
.header-user-wrapper .j-header-search-btn i {
  font-size: 14px;
  color: var(--nb-text-invert);
}

.header-user-wrapper .switch-tab a {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 var(--nb-s4);
  border: 1px solid var(--nb-line-cyan);
  border-radius: var(--nb-r-pill);
  color: var(--nb-cyan);
  font-size: var(--nb-f-sm);
  white-space: nowrap;
}

.header-user-wrapper .switch-tab a:hover {
  background: rgba(53, 224, 208, .12);
}

.header-user-wrapper .user-box,
.header-user-wrapper .j-header-avatar {
  position: relative;
  float: none;
  display: flex;
  align-items: center;
  margin-left: var(--nb-s4);
}

.header-user-wrapper .user-avatar img,
.header-user-wrapper .j-user-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid var(--nb-line-cyan);
  border-radius: 50%;
  object-fit: cover;
  background: var(--nb-panel-2);
}

/* 下拉沿用 night-site.css 的 .j-dialog-avatar 规则 */

/* ==========================================================================
   2. 会员中心主体
   ========================================================================== */
.user-container,
.author-container,
.main-container {
  width: 100%;
  max-width: calc(var(--nb-content) + var(--nb-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--nb-gutter);
}

.user-container,
.author-container {
  padding-top: var(--nb-s6);
  padding-bottom: var(--nb-s8);
}

/* 左侧导航 */
.aside-user,
.aside-author {
  border: 1px solid var(--nb-line);
  border-radius: var(--nb-r-lg);
  background: rgba(18, 26, 46, .78);
  overflow: hidden;
}

.aside-user dl,
.aside-author dl {
  margin: 0;
  border-bottom: 1px solid var(--nb-line);
  padding: var(--nb-s3) 0;
}

.aside-user dl:last-child,
.aside-author dl:last-child {
  border-bottom: 0;
}

.aside-user dt,
.aside-author dt {
  display: flex;
  align-items: center;
  gap: var(--nb-s2);
  padding: 6px var(--nb-s4);
  color: var(--nb-text-3);
  font-size: var(--nb-f-xs);
  font-weight: 700;
  letter-spacing: 1.2px;
}

.aside-user dd,
.aside-author dd {
  margin: 0;
}

.aside-user dd a,
.aside-author dd a {
  display: block;
  padding: 8px var(--nb-s4) 8px var(--nb-s7);
  color: var(--nb-text-2);
  font-size: var(--nb-f-base);
  transition: color var(--nb-t) var(--nb-ease), background var(--nb-t) var(--nb-ease);
}

.aside-user dd a:hover,
.aside-author dd a:hover,
.aside-user dd.active a,
.aside-author dd.active a {
  color: var(--nb-cyan);
  background: rgba(53, 224, 208, .09);
}

.aside-user--first dt a {
  color: var(--nb-text);
  font-size: var(--nb-f-md);
  font-weight: 700;
  letter-spacing: 0;
}

/* 内容面板 */
.user-content,
.author-content,
.user-main,
.author-main,
.user-box,
.author-box,
.in-sec__box,
.user-panel,
.author-panel,
.user-content__box,
.author-content__box {
  border: 1px solid var(--nb-line) !important;
  border-radius: var(--nb-r-lg) !important;
  background: var(--nb-glass) !important;
  color: var(--nb-text-2) !important;
}

.in-sec__title,
.user-content__title,
.author-content__title {
  display: flex;
  align-items: center;
  gap: var(--nb-s3);
  padding-bottom: var(--nb-s3);
  margin-bottom: var(--nb-s4);
  border-bottom: 1px solid var(--nb-line);
  color: var(--nb-text) !important;
  font-size: var(--nb-f-lg);
  font-weight: 700;
}

/* ==========================================================================
   3. 会员卡 / 数据卡
   ========================================================================== */
.user-info-card,
.author-info-card,
.in-sec__user {
  border: 1px solid var(--nb-line-strong) !important;
  border-radius: var(--nb-r-lg) !important;
  background:
    radial-gradient(520px 200px at 8% 0%, rgba(53, 224, 208, .16), transparent 62%),
    radial-gradient(420px 200px at 92% 100%, rgba(123, 92, 255, .18), transparent 62%),
    rgba(18, 26, 46, .9) !important;
  color: var(--nb-text) !important;
}

.user-info-card img,
.author-info-card img {
  border: 1px solid var(--nb-line-cyan);
  border-radius: 50%;
  object-fit: cover;
  background: var(--nb-panel-2);
}

/* ==========================================================================
   4. 列表 / 表格 / 空状态
   ========================================================================== */
.user-content table,
.author-content table,
.in-sec__box table,
.layui-table {
  width: 100%;
  background: transparent !important;
  color: var(--nb-text-2) !important;
  font-size: var(--nb-f-base);
}

.user-content table th,
.author-content table th,
.in-sec__box table th,
.layui-table th {
  padding: 11px var(--nb-s3);
  border-bottom: 1px solid var(--nb-line) !important;
  background: rgba(23, 33, 64, .7) !important;
  color: var(--nb-text) !important;
  font-weight: 600;
  text-align: left;
}

.user-content table td,
.author-content table td,
.in-sec__box table td,
.layui-table td {
  padding: 11px var(--nb-s3);
  border-bottom: 1px solid var(--nb-line) !important;
  color: var(--nb-text-2) !important;
}

.user-content table tr:hover td,
.author-content table tr:hover td {
  background: rgba(120, 148, 214, .06) !important;
}

/* 旧模板的空状态位图统一降透明，并给一个暗色容器 */
.user-content img[src*='null'],
.author-content img[src*='null'],
.in-sec__box img[src*='null'],
.m-empty img {
  max-width: 190px;
  opacity: .5;
  filter: grayscale(.2);
}

.m-empty,
.user-content .empty,
.author-content .empty {
  padding: var(--nb-s8) var(--nb-s4);
  color: var(--nb-text-3) !important;
  text-align: center;
  line-height: 1.9;
}

/* 列表项（收藏 / 历史 / 购买 / 评论） */
.user-content li,
.author-content li {
  border-color: var(--nb-line) !important;
}

.user-content .item,
.author-content .item,
.collection-item,
.history-item {
  border-bottom: 1px solid var(--nb-line) !important;
  transition: background var(--nb-t) var(--nb-ease);
}

.user-content .item:hover,
.author-content .item:hover {
  background: rgba(120, 148, 214, .05);
}

/* ==========================================================================
   5. 表单（修改资料 / 发布作品 / 章节编辑）
   ========================================================================== */
.user-content label,
.author-content label,
.in-sec__box label,
.layui-form-label {
  color: var(--nb-text-2) !important;
  font-size: var(--nb-f-base);
}

.user-content input[type='text'],
.user-content input[type='password'],
.user-content input[type='number'],
.user-content input[type='tel'],
.user-content input[type='email'],
.user-content input[type='search'],
.user-content input[type='url'],
.user-content textarea,
.user-content select,
.author-content input[type='text'],
.author-content input[type='password'],
.author-content input[type='number'],
.author-content input[type='tel'],
.author-content input[type='email'],
.author-content input[type='search'],
.author-content input[type='url'],
.author-content textarea,
.author-content select,
.in-sec__box input,
.in-sec__box textarea,
.in-sec__box select,
.layui-input,
.layui-textarea,
.layui-select {
  border: 1px solid var(--nb-line-strong) !important;
  border-radius: var(--nb-r-sm) !important;
  background: rgba(7, 10, 20, .55) !important;
  color: var(--nb-text) !important;
  box-shadow: none !important;
}

.user-content input::placeholder,
.author-content input::placeholder,
.user-content textarea::placeholder,
.author-content textarea::placeholder {
  color: var(--nb-text-3) !important;
}

.user-content input:focus,
.author-content input:focus,
.user-content textarea:focus,
.author-content textarea:focus,
.in-sec__box input:focus,
.layui-input:focus {
  border-color: var(--nb-line-cyan) !important;
  box-shadow: 0 0 0 3px rgba(53, 224, 208, .12) !important;
}

/* 提交按钮统一 */
.user-content .submit-btn,
.author-content .submit-btn,
.in-sec__box .submit-btn,
.user-content button[type='submit'],
.author-content button[type='submit'],
.layui-btn {
  border: 0 !important;
  border-radius: var(--nb-r-sm) !important;
  background: var(--nb-grad-cyan) !important;
  color: var(--nb-text-invert) !important;
  font-weight: 700;
}

.layui-btn-primary,
.layui-btn-normal {
  border: 1px solid var(--nb-line-strong) !important;
  background: transparent !important;
  color: var(--nb-text-2) !important;
}

.layui-btn-danger {
  background: rgba(255, 77, 148, .18) !important;
  color: #ffb0cd !important;
}

/* 上传控件（webuploader / cropper） */
.webuploader-pick,
.uploader-pick {
  border-radius: var(--nb-r-sm) !important;
  background: var(--nb-grad-violet) !important;
  color: #fff !important;
}

/* 复选框 / 单选 / 开关 */
.layui-form-checked[lay-skin='primary'] i,
.layui-form-checked i,
.layui-form-radioed i,
.layui-form-switch.layui-form-onswitch {
  background: var(--nb-cyan-deep) !important;
  border-color: var(--nb-cyan-deep) !important;
  color: #fff !important;
}

.layui-form-switch {
  background: rgba(120, 148, 214, .22) !important;
  border-color: var(--nb-line-strong) !important;
}

/* 分页 */
.user-content .layui-laypage a,
.author-content .layui-laypage a,
.in-sec__box .layui-laypage a,
.layui-laypage span {
  border-color: var(--nb-line) !important;
  background: rgba(18, 26, 46, .8) !important;
  color: var(--nb-text-2) !important;
}

.layui-laypage .layui-laypage-curr .layui-laypage-em {
  background: var(--nb-cyan-deep) !important;
}

.layui-laypage .layui-laypage-curr em {
  color: #fff !important;
}

/* 标签页 */
.j-tab-title,
.user-content .tab-title,
.author-content .tab-title {
  color: var(--nb-text-3);
  border-color: var(--nb-line) !important;
}

.j-tab-title.active,
.j-tab-title.on {
  color: var(--nb-cyan);
  border-color: var(--nb-cyan) !important;
}

/* ==========================================================================
   6. 作者中心特有：数据卡 / 收益 / 认证
   ========================================================================== */
.author-data-card,
.author-income-card,
.author-card {
  border: 1px solid var(--nb-line) !important;
  border-radius: var(--nb-r) !important;
  background: rgba(23, 33, 64, .6) !important;
  color: var(--nb-text) !important;
}

.author-data-card .num,
.author-income-card .num strong {
  color: var(--nb-amber) !important;
  font-family: var(--nb-font-num);
}

.renzheng-step,
.author-step {
  border-color: var(--nb-line) !important;
  color: var(--nb-text-3) !important;
}

.renzheng-step.active,
.author-step.active {
  border-color: var(--nb-line-cyan) !important;
  color: var(--nb-cyan) !important;
}

/* ==========================================================================
   7. 登录 / 注册 / 找回密码页
   --------------------------------------------------------------------------
   页面结构（沿用漫城 CMS 与 neon 的骨架）：
     body.page-login > .main-content.nb-login-layer
       > .container--response > .login-box
           > .login-pic.nb-auth-visual      左侧视觉板
           > .dialog-login                  右侧表单（由 login.js 的 tab 逻辑接管）
   ========================================================================== */
.page-login {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 26%, rgba(123, 92, 255, .20), transparent 30rem),
    radial-gradient(circle at 83% 18%, rgba(53, 224, 208, .13), transparent 28rem),
    var(--nb-ink) !important;
}

.page-login.fixed-footer .footer-wrapper {
  position: static !important;
}

.page-login .main-content.nb-login-layer {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 240px) !important;
  padding: 48px 0 56px !important;
  overflow: visible;
  background: transparent !important;
}

.page-login .main-content.nb-login-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 148, 214, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 148, 214, .05) 1px, transparent 1px);
  background-size: 56px 56px, 56px 56px;
  mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 76%);
  -webkit-mask-image: radial-gradient(circle at 50% 20%, #000 0%, transparent 76%);
}

.page-login .login-box {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(920px, 100%) !important;
  height: auto !important;
  min-height: 520px;
  grid-template-columns: minmax(0, 1.03fr) minmax(380px, .97fr);
  margin: 0 auto !important;
  overflow: hidden;
  border: 1px solid var(--nb-line-strong) !important;
  border-radius: var(--nb-r-lg) !important;
  background: rgba(12, 18, 34, .96) !important;
  box-shadow: var(--nb-shadow-lg) !important;
}

.page-login .login-box .login-pic {
  float: none !important;
  width: auto !important;
  height: auto !important;
}

/* —— 左侧视觉板 —— */
.nb-auth-visual {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 520px;
  padding: var(--nb-s9);
  overflow: hidden;
  background:
    linear-gradient(150deg, rgba(23, 33, 64, .86), rgba(8, 12, 24, .97)),
    var(--nb-ink-2);
  border-right: 1px solid rgba(53, 224, 208, .16);
}

.nb-auth-visual::after {
  content: '';
  position: absolute;
  right: -90px;
  bottom: -140px;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(53, 224, 208, .22);
  border-radius: 50%;
  box-shadow: inset 0 0 70px rgba(53, 224, 208, .06), 0 0 70px rgba(53, 224, 208, .08);
}

.nb-auth-visual__grid {
  position: absolute;
  inset: 0;
  opacity: .26;
  background-image:
    linear-gradient(rgba(120, 148, 214, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 148, 214, .14) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  mask-image: linear-gradient(140deg, #000, transparent 82%);
  -webkit-mask-image: linear-gradient(140deg, #000, transparent 82%);
}

.nb-auth-visual__orb {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.nb-auth-visual__orb--one {
  top: 44px;
  right: 48px;
  width: 136px;
  height: 136px;
  background: rgba(123, 92, 255, .25);
  box-shadow: 0 0 70px rgba(123, 92, 255, .32);
}

.nb-auth-visual__orb--two {
  right: 166px;
  bottom: 74px;
  width: 70px;
  height: 70px;
  background: rgba(53, 224, 208, .22);
  box-shadow: 0 0 54px rgba(53, 224, 208, .26);
}

.nb-auth-visual__content {
  position: relative;
  z-index: 2;
}

.nb-auth-visual__content .nb-brand__mark {
  margin: 0 0 var(--nb-s6) 6px;
}

.nb-auth-visual__content strong {
  display: block;
  color: #fff;
  font-size: var(--nb-f-3xl);
  font-weight: 800;
  letter-spacing: .04em;
  text-shadow: 0 0 24px rgba(53, 224, 208, .16);
}

.nb-auth-visual__content p {
  margin: var(--nb-s3) 0 var(--nb-s7);
  color: var(--nb-text-2);
  font-size: var(--nb-f-base);
}

.nb-auth-visual__content ul {
  display: grid;
  gap: var(--nb-s3);
  margin: 0;
  padding: 0;
  color: var(--nb-text);
  font-size: var(--nb-f-base);
  list-style: none;
}

.nb-auth-visual__content li::before {
  content: '✓';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: var(--nb-s3);
  color: var(--nb-text-invert);
  font-size: 11px;
  font-weight: 900;
  line-height: 18px;
  text-align: center;
  background: var(--nb-cyan);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(53, 224, 208, .32);
}

/* —— 右侧表单 —— */
.page-login .login-box .dialog-login {
  float: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 520px;
  padding: var(--nb-s9) var(--nb-s8) !important;
  color: var(--nb-text);
  background: rgba(13, 19, 36, .96) !important;
}

.page-login .dialog-login_content .tab-content,
.page-login .dialog-login_content .other-login {
  width: 100% !important;
}

.page-login .dialog-login_content .form-title {
  margin-bottom: var(--nb-s6) !important;
}

.page-login .dialog-login_content .form-title h3 {
  color: #fff !important;
  font-size: var(--nb-f-2xl);
}

.page-login .dialog-login_content .form-title span,
.page-login .dialog-login_form .remember-link,
.page-login .dialog-login_content .tip-protocol,
.page-login .dialog-login_form .form-item.clearfix {
  color: var(--nb-text-3) !important;
  font-size: var(--nb-f-sm);
}

.page-login .dialog-login_content .form-title a,
.page-login .dialog-login_form .forgot-link a,
.page-login .dialog-login_content .tip-protocol a {
  color: var(--nb-cyan) !important;
}

.page-login .dialog-login_form .form-item {
  margin-bottom: var(--nb-s4);
}

.page-login .dialog-login_form .input-block input,
.page-login .dialog-login_form .input-block--inline input {
  box-sizing: border-box;
  width: 100% !important;
  height: 46px !important;
  padding: 0 var(--nb-s4) !important;
  color: var(--nb-text) !important;
  background: rgba(6, 9, 18, .76) !important;
  border: 1px solid var(--nb-line-strong) !important;
  border-radius: var(--nb-r-sm) !important;
  outline: none;
}

.page-login .dialog-login_form .input-block input::placeholder {
  color: var(--nb-text-3) !important;
}

.page-login .dialog-login_form .input-block input:focus,
.page-login .dialog-login_form .input-block--inline input:focus {
  border-color: var(--nb-cyan) !important;
  box-shadow: 0 0 0 3px rgba(53, 224, 208, .10) !important;
}

.page-login .dialog-login_form .input-block--inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: var(--nb-s2);
}

.page-login .dialog-login_form .input-block--inline .sms-btn {
  float: none;
  width: auto;
  height: 46px;
  line-height: 46px;
  background: var(--nb-violet-soft);
  border: 1px solid rgba(123, 92, 255, .34);
  border-radius: var(--nb-r-sm);
  color: #c6b8ff;
  text-align: center;
}

.page-login .dialog-login_form .submit-btn {
  height: 46px;
  margin-top: var(--nb-s2);
  line-height: 46px;
  border: 0;
  background: var(--nb-grad-cyan) !important;
  color: var(--nb-text-invert) !important;
  border-radius: var(--nb-r-sm) !important;
  box-shadow: 0 10px 28px rgba(18, 179, 171, .24);
}

.page-login .dialog-login_form .icon-ic_read_choose_on1 {
  color: var(--nb-cyan);
}

.page-login .dialog-login_content .other-login {
  right: var(--nb-s8);
  bottom: var(--nb-s6);
  left: var(--nb-s8);
  width: auto !important;
}

.page-login .dialog-login_content .other-login .title-line {
  background: var(--nb-line) !important;
}

.page-login .dialog-login_content .other-login .title-text {
  color: var(--nb-text-3);
  background: #0d1324;
}

.page-login .dialog-login_content .other-link a {
  border: 1px solid var(--nb-line) !important;
  box-shadow: none;
}

.page-login .j-verify-err {
  color: #ff8fb0;
  font-size: var(--nb-f-sm);
}

.page-login .footer-wrapper {
  width: 100%;
  height: auto !important;
  min-height: 120px;
  color: var(--nb-text-3);
  background: rgba(7, 10, 20, .94) !important;
  border-top: 1px solid var(--nb-line) !important;
}

.page-login .footer-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--nb-s5);
}

.page-login .footer-link a,
.page-login .footer-bottom p,
.page-login .footer-bottom p a {
  color: var(--nb-text-3) !important;
  font-size: var(--nb-f-xs);
}

.page-login .footer-link a:hover {
  color: var(--nb-cyan) !important;
}

/* ==========================================================================
   8. 空状态视觉（作者/会员中心共用的小装饰）
   ========================================================================== */
.nb-empty-orbit {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 0 auto var(--nb-s5);
  border: 1px dashed var(--nb-line-strong);
  border-radius: 50%;
}

.nb-empty-orbit::before {
  content: '';
  width: 38px;
  height: 38px;
  border: 1px solid var(--nb-line-cyan);
  border-radius: 50%;
}

.nb-empty-orbit::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(120, 148, 214, .18);
  border-radius: 50%;
}

/* ==========================================================================
   9. 账户区页脚
   ========================================================================== */
.nb-account-footer {
  position: relative;
  z-index: 1;
  margin-top: var(--nb-s8);
  border-top: 1px solid var(--nb-line);
  background: linear-gradient(180deg, rgba(8, 12, 24, .5) 0%, rgba(5, 8, 16, .92) 100%);
}

.nb-account-footer__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-s5);
  padding-block: var(--nb-s6);
}

.nb-account-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--nb-s3);
}

.nb-account-footer__brand strong {
  display: block;
  color: #fff;
  font-size: var(--nb-f-md);
  font-weight: 800;
}

.nb-account-footer__brand small {
  display: block;
  margin-top: 2px;
  color: var(--nb-text-3);
  font-size: var(--nb-f-xs);
}

.nb-account-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nb-s2) var(--nb-s5);
}

.nb-account-footer__links a {
  color: var(--nb-text-3);
  font-size: var(--nb-f-sm);
}

.nb-account-footer__links a:hover {
  color: var(--nb-cyan);
}

.nb-account-footer__contact {
  color: var(--nb-text-3);
  font-size: var(--nb-f-sm);
}

.nb-account-footer__contact span {
  margin-right: var(--nb-s2);
}

.nb-account-footer__contact a {
  color: var(--nb-cyan);
}

.nb-account-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-s2) var(--nb-s5);
  padding-block: var(--nb-s4) var(--nb-s6);
  border-top: 1px solid var(--nb-line);
  color: var(--nb-text-3);
  font-size: var(--nb-f-xs);
}

/* ==========================================================================
   9. 响应式
   ========================================================================== */
@media (max-width: 1024px) {
  .header-user-wrapper .main-container {
    flex-wrap: wrap;
    gap: var(--nb-s3);
  }

  .header-user-wrapper .nav-menu {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
  }

  .header-user-wrapper .search-box,
  .header-user-wrapper .j-header-searchbox {
    width: auto;
    flex: 1 1 150px;
  }

  .user-container,
  .author-container,
  .main-container {
    padding-inline: 16px;
  }

  .aside-user,
  .aside-author {
    margin-bottom: var(--nb-s5);
  }
}

@media (max-width: 720px) {
  .nb-account-footer__main,
  .nb-account-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .nb-login-layer {
    padding: var(--nb-s6) var(--nb-s4);
  }

  .nb-login-layer .login-box,
  .nb-login-layer .reg-box,
  .nb-login-layer .pass-box,
  .nb-login-layer .login-wrapper,
  .nb-login-layer .user-box {
    padding: var(--nb-s6) var(--nb-s4);
  }

  .nb-login-layer .login-title {
    font-size: var(--nb-f-xl);
  }
}