/* 后台全局视觉：浅色底、统一圆角（略圆不过圆）、卡片层次与字体渲染 */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background-color: #f0f2f5;
  color: #1f2937;
}

#app {
  min-height: 100vh;
}

/* 全局按钮：更大圆角 + 合成层，减轻 Windows 下锯齿/多边形感 */
.n-button:not(.n-button--circle):not(.n-button--round):not(.n-button--text):not(.n-button--quaternary) {
  border-radius: 12px !important;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}
.n-button .n-button__border,
.n-button .n-button__state-border {
  border-radius: inherit !important;
}

/* 账户设置页：左改密、右信息；窄屏单列 */
.account-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 4px 0 24px;
}

.account-page-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .account-page-layout {
    grid-template-columns: 1fr;
  }
}

/* 两列卡片同高 */
.account-page-layout > .proCard.n-card {
  height: 100%;
  min-height: 0;
}

.account-page .account-card--pwd .n-card-header {
  padding-bottom: 8px;
}

.account-card-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}

.account-field {
  margin-bottom: 12px;
}

.account-field:last-of-type {
  margin-bottom: 12px;
}

.account-field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}

.account-page .account-field-label {
  margin-bottom: 6px;
}

/* 保证密码框可见、可点（勿用 min-height:auto，Grid 子项下会塌陷） */
.account-page .account-field .n-input {
  width: 100%;
  min-height: 36px;
}

.account-page .account-field .n-input-wrapper {
  min-height: 36px;
}

.account-page .account-field .n-input input {
  min-height: 34px;
  color: #1f2937;
  background-color: #fff;
}

/* 账户设置：原生密码框（不依赖 Naive NInput 渲染） */
.account-native-input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #1f2937;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 7px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.account-native-input:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.18);
}

.account-native-input::placeholder {
  color: #9ca3af;
}

.account-page .account-card--pwd .n-card__content,
.account-page .account-card--info .n-card__content {
  padding-left: 20px;
  padding-right: 20px;
}

.account-actions {
  margin-top: 8px;
  padding-top: 4px;
}

.account-page .account-card--info .n-card__content {
  padding-top: 4px;
}

.account-info-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
}

.account-info-row {
  display: flex;
  align-items: stretch;
  min-height: 44px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.account-info-row:last-child {
  border-bottom: none;
}

.account-info-k {
  flex: 0 0 100px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.account-info-v {
  flex: 1;
  padding: 12px 14px;
  font-size: 14px;
  color: #111827;
  word-break: break-all;
}

.account-info-v--muted {
  color: #4b5563;
  font-variant-numeric: tabular-nums;
}

/* 侧栏内按钮保持高对比（不受上方白底样式影响） */
.layout-sider .n-button.n-button--primary-type,
.layout-sider .n-button.n-button--primary-type:hover {
  background-color: #1890ff !important;
  color: #fff !important;
  border: none !important;
}

/* 左侧栏：深灰背景（暗色导航） */
.layout-sider.n-layout-sider,
.n-layout-sider.layout-sider {
  background: #2d2d33 !important;
  --n-color: #2d2d33 !important;
  /* 去掉侧栏与主内容之间那条 1px「半白半灰」分隔线（Naive UI 右侧 border 条） */
  --n-border-color: transparent !important;
  border-right: none !important;
  box-shadow: none !important;
}

.layout-sider .n-menu,
.layout-sider .n-layout-sider-scroll-container {
  background: transparent !important;
}

/* Naive UI LayoutSider：右侧装饰条（bordered 时会出现），隐藏以免出现双色缝 */
.n-layout-sider .n-layout-sider__border {
  display: none !important;
  width: 0 !important;
  opacity: 0 !important;
}

/* 主内容区贴侧栏一侧不要再用左边线叠出灰边 */
.n-layout .n-layout-scroll-container {
  border-left: none !important;
}

/* 顶栏用户名旁头像（与登录 logo 同源）：更圆润 */
.layout-header .avatar .n-avatar,
.layout-header .avatar .n-avatar img {
  border-radius: 12px !important;
  overflow: hidden;
}

/* 左侧栏顶部 Logo 图片圆角 */
.layout-sider .logo img {
  border-radius: 10px !important;
}

/* 输入、选择器外框 */
.n-input .n-input__border,
.n-input .n-input__state-border,
.n-base-selection .n-base-selection__border,
.n-input-number .n-input__border {
  border-radius: 7px !important;
}

/* 卡片：轻阴影与圆角 */
.n-card {
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* 弹窗 */
.n-modal-container .n-card {
  border-radius: 12px !important;
}

/* 标签页外框略收角（不影响内部逻辑） */
.n-tabs.n-tabs--line-type .n-tabs-nav {
  border-radius: 8px 8px 0 0;
}

/* 表格容器 */
.n-data-table-wrapper {
  border-radius: 8px;
  overflow: hidden;
}

/* 菜单项（侧栏）略圆角，不改动布局 */
.n-menu .n-menu-item-content {
  border-radius: 6px;
}

/* 标签 */
.n-tag {
  border-radius: 6px !important;
}

/* 分割线略淡 */
.n-divider:not(.n-divider--vertical) {
  border-color: rgba(0, 0, 0, 0.06) !important;
}

/* 滚动条（WebKit） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.28);
}