/* Frank 后台：电影感暗调 + 暖金点缀（高级感，无 AI 紫） */
:root {
  --frank-bg-deep: #070b12;
  --frank-bg-mid: #0e1522;
  --frank-surface: rgba(16, 24, 40, 0.78);
  --frank-surface-hover: rgba(22, 32, 52, 0.92);
  --frank-gold: #c9a227;
  --frank-gold-light: #e8d5a3;
  --frank-gold-dim: rgba(201, 162, 39, 0.35);
  --frank-navy: #1a2b44;
  --frank-navy-mid: #2b4a70;
  --frank-cream: #f5f1e4;
  --frank-text: #e2e8f0;
  --frank-text-soft: rgba(216, 222, 232, 0.68);
  --frank-border: rgba(201, 162, 39, 0.14);
  --frank-border-strong: rgba(201, 162, 39, 0.28);
  --frank-radius: 16px;
  --frank-shadow: 0 20px 50px rgba(0, 0, 0, 0.42);
}

/* 环境光背景 */
.layout,
.layout-default-background {
  position: relative !important;
  background: var(--frank-bg-deep) !important;
}

.layout::before,
.layout-default-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 8% 12%, rgba(43, 74, 112, 0.32), transparent 58%),
    radial-gradient(ellipse 55% 45% at 92% 88%, rgba(201, 162, 39, 0.07), transparent 55%),
    linear-gradient(165deg, #070b12 0%, #0e1522 42%, #111c2e 100%);
}

.layout > *,
.n-layout,
.layout-content-main,
.n-layout-scroll-container {
  position: relative;
  z-index: 1;
}

/* 避免误设 pointer-events:none 导致整页无法点击 */
body,
#app,
.n-layout,
.n-layout-content,
.n-layout-sider,
.n-layout-scroll-container,
.n-menu {
  pointer-events: auto !important;
}

/* 侧栏 */
.layout .layout-sider,
.n-layout-sider,
.n-layout-sider-scroll-container,
.layout-side-drawer {
  background: linear-gradient(180deg, rgba(10, 14, 24, 0.94) 0%, rgba(14, 22, 38, 0.88) 100%) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border-right: 1px solid var(--frank-border) !important;
  box-shadow: 8px 0 32px rgba(0, 0, 0, 0.25) !important;
}

.logo {
  border-bottom: 1px solid var(--frank-border) !important;
  padding-bottom: 4px !important;
}

.logo .title {
  font-family: var(--frank-font-display) !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--frank-tracking-title) !important;
  color: var(--frank-cream) !important;
  text-shadow: none !important;
}

.n-menu-item-content-header,
.n-menu-item-content-header a {
  font-size: var(--frank-text-md) !important;
  font-weight: 500 !important;
  letter-spacing: 0.03em !important;
}

/* 顶栏 */
.layout-header,
.n-layout-header,
.layout-header-light {
  background: rgba(10, 15, 26, 0.72) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
  border-bottom: 1px solid var(--frank-border) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.layout-header-trigger:hover {
  background: rgba(201, 162, 39, 0.08) !important;
}

/* 标签页 */
.tabs-view,
.tabs-view-default-background {
  background: rgba(10, 15, 26, 0.55) !important;
  border-bottom: 1px solid var(--frank-border) !important;
}

.tabs-card-scroll-item {
  font-size: var(--frank-text-base) !important;
  font-weight: 500 !important;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}

.tabs-card-scroll-item:hover {
  background: rgba(201, 162, 39, 0.06) !important;
  border-color: var(--frank-border) !important;
}

.tabs-card-scroll .active-item {
  background: rgba(201, 162, 39, 0.1) !important;
  color: var(--frank-gold-light) !important;
  border-color: var(--frank-border-strong) !important;
}

/* 主内容区 / 列表页 */
.layout-content-main {
  padding: 20px 24px 28px !important;
}

.layout-content-main .n-card,
.proCard .n-card {
  background: var(--frank-surface) !important;
  backdrop-filter: blur(16px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%) !important;
  border: 1px solid var(--frank-border) !important;
  border-radius: var(--frank-radius) !important;
  box-shadow: var(--frank-shadow) !important;
  animation: frankCardIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes frankCardIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.n-card-header {
  border-bottom: 1px solid var(--frank-border) !important;
  padding-bottom: 14px !important;
}

.n-card-header .n-card-header__main,
.table-toolbar-left-title,
.n-h {
  font-family: var(--frank-font-display) !important;
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  letter-spacing: var(--frank-tracking-wide) !important;
  color: var(--frank-cream) !important;
}

.table-toolbar-left-title {
  font-size: 1.5rem !important;
}

/* 设备列表表格 */
.n-data-table {
  --n-th-color: rgba(12, 18, 30, 0.95) !important;
  --n-td-color: transparent !important;
  --n-td-color-hover: rgba(201, 162, 39, 0.05) !important;
  --n-td-color-striped: rgba(255, 255, 255, 0.015) !important;
  --n-border-color: var(--frank-border) !important;
  --n-th-text-color: var(--frank-gold-light) !important;
  --n-td-text-color: var(--frank-text) !important;
  border-radius: 12px !important;
}

.n-data-table-th {
  font-family: var(--frank-font-ui) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-bottom: 1px solid var(--frank-border-strong) !important;
}

.n-data-table-td {
  font-size: var(--frank-text-md) !important;
}

.n-data-table-tr:hover .n-data-table-td {
  background: rgba(201, 162, 39, 0.05) !important;
}

.n-data-table .n-data-table-td {
  border-bottom: 1px solid rgba(201, 162, 39, 0.06) !important;
  transition: background 0.2s ease !important;
}

table-toolbar,
.table-toolbar {
  margin-bottom: 16px !important;
}

/* 菜单 */
.n-menu-item-content--selected,
.n-menu-item-content--selected:hover {
  border-image: linear-gradient(180deg, var(--frank-navy-mid), var(--frank-gold)) 1 !important;
  background: rgba(201, 162, 39, 0.04) !important;
}

.n-menu-item-content--selected .n-menu-item-content__icon,
.n-menu-item-content--selected .n-menu-item-content-header,
.n-menu-item-content--selected .n-menu-item-content-header a {
  color: var(--frank-gold-light) !important;
  text-shadow: none !important;
  filter: none !important;
}

.n-menu-item-content:hover {
  background: rgba(201, 162, 39, 0.05) !important;
}

/* 按钮：克制奢华，非艳俗渐变 */
.n-button.n-button--primary-type {
  --n-color: var(--frank-navy-mid) !important;
  --n-color-hover: #3a5f85 !important;
  --n-color-pressed: #1e334f !important;
  --n-color-focus: #3a5f85 !important;
  --n-ripple-color: rgba(201, 162, 39, 0.35) !important;
  --n-border: 1px solid var(--frank-gold-dim) !important;
  --n-border-hover: 1px solid rgba(232, 213, 163, 0.55) !important;
  --n-text-color: var(--frank-cream) !important;
  background: linear-gradient(180deg, #355a82 0%, #243d5c 100%) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  font-size: var(--frank-text-md) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  min-height: 42px !important;
}

.n-button--default-type,
.n-button--medium-type {
  font-size: var(--frank-text-base) !important;
  font-weight: 500 !important;
}

.n-button.n-button--primary-type:not(.n-button--disabled):hover,
.n-button.n-button--primary-type:not(.n-button--disabled):focus {
  background: linear-gradient(180deg, #3f6a94 0%, #2b4a70 100%) !important;
  box-shadow: 0 8px 28px rgba(201, 162, 39, 0.18) !important;
}

.n-button.n-button--primary-type:not(.n-button--disabled):active {
  background: linear-gradient(180deg, #243d5c 0%, #1a2b44 100%) !important;
}

.n-button--default-type {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--frank-border) !important;
  color: var(--frank-text) !important;
}

.n-button--default-type:not(.n-button--disabled):hover {
  color: var(--frank-gold-light) !important;
  border-color: var(--frank-border-strong) !important;
  background: rgba(201, 162, 39, 0.06) !important;
}

/* 输入与选择 */
.n-input,
.n-select .n-base-selection {
  --n-color: rgba(8, 12, 20, 0.55) !important;
  --n-color-focus: rgba(10, 16, 28, 0.75) !important;
  --n-border: 1px solid var(--frank-border) !important;
  --n-border-hover: 1px solid var(--frank-border-strong) !important;
  --n-border-focus: 1px solid rgba(232, 213, 163, 0.55) !important;
  --n-box-shadow-focus: 0 0 0 3px rgba(201, 162, 39, 0.12) !important;
  --n-caret-color: var(--frank-gold-light) !important;
  --n-text-color: var(--frank-text) !important;
  --n-placeholder-color: var(--frank-text-soft) !important;
  border-radius: 10px !important;
}

.n-base-select-menu,
.n-dropdown-menu,
.n-popover:not(.n-popconfirm) {
  background: rgba(14, 20, 34, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--frank-border) !important;
  border-radius: 12px !important;
}

.n-base-select-option--selected {
  color: var(--frank-gold-light) !important;
}

.n-base-select-option:hover,
.n-base-select-option--pending,
.n-dropdown-option-body:hover {
  background: rgba(201, 162, 39, 0.08) !important;
}

/* Tab / 分页 / 进度 */
.n-tabs-tab--active {
  color: var(--frank-gold-light) !important;
  font-weight: 600 !important;
}

.n-tabs-bar {
  background: linear-gradient(90deg, var(--frank-navy-mid), var(--frank-gold)) !important;
  height: 2px !important;
}

.n-pagination .n-pagination-item--active {
  background: linear-gradient(180deg, #355a82, #8b6914) !important;
  border-color: transparent !important;
}

.n-loading-bar,
.n-progress .n-progress-graph-line-fill {
  background: linear-gradient(90deg, var(--frank-navy-mid), var(--frank-gold)) !important;
}

/* 勾选 */
.n-checkbox {
  --n-color-checked: var(--frank-gold) !important;
  --n-border-checked: #a88520 !important;
}

.n-checkbox .n-checkbox-box--checked {
  background: var(--frank-gold) !important;
  border-color: #a88520 !important;
}

/* 滚动条 */
*::-webkit-scrollbar-thumb {
  background: rgba(201, 162, 39, 0.22) !important;
  border-radius: 4px !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 162, 39, 0.38) !important;
}

/* 侧栏设备格 / thing-cell */
.thing-cell-on {
  background: linear-gradient(135deg, rgba(43, 74, 112, 0.28) 0%, rgba(201, 162, 39, 0.08) 100%) !important;
  border-color: var(--frank-border-strong) !important;
}

.thing-cell-on .n-thing-header__title {
  color: var(--frank-gold-light) !important;
}

.dev-info-card {
  border: 1px solid var(--frank-border) !important;
  background: rgba(12, 18, 30, 0.65) !important;
}

/* 系统设置 / 账户页（覆盖 advanced-ui-style 紫色） */
.settings-tab,
.frm-submit {
  background: linear-gradient(180deg, #355a82 0%, #243d5c 100%) !important;
  border: 1px solid var(--frank-gold-dim) !important;
  color: var(--frank-cream) !important;
  font-size: var(--frank-text-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.frm-submit:hover {
  background: linear-gradient(180deg, #3f6a94 0%, #2b4a70 100%) !important;
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.22) !important;
}

.frm-input {
  font-size: var(--frank-text-md) !important;
  font-weight: 500 !important;
  padding: 14px 16px !important;
  border-radius: 10px !important;
  background: rgba(8, 12, 20, 0.55) !important;
  border: 1px solid var(--frank-border) !important;
}

.frm-input:focus {
  border-color: rgba(232, 213, 163, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12) !important;
}

.frm-group label {
  font-size: var(--frank-text-base) !important;
  color: var(--frank-text-soft) !important;
}

.info-block {
  background: var(--frank-surface) !important;
  border: 1px solid var(--frank-border) !important;
  border-radius: var(--frank-radius) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
}

.info-block-header {
  font-family: var(--frank-font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--frank-cream) !important;
  border-bottom-color: var(--frank-border) !important;
}

.info-block-header svg,
.page-title svg {
  stroke: var(--frank-gold) !important;
}

.page-title {
  font-family: var(--frank-font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--frank-cream) !important;
}

.sidebar-user-avatar {
  background: linear-gradient(135deg, #2b4a70, #8b6914) !important;
  border: 1px solid var(--frank-border-strong) !important;
  border-radius: 10px !important;
}

body .n-button--primary-type,
body .n-button--info-type,
body .n-button--primary-type.card-btn {
  background: linear-gradient(180deg, #355a82 0%, #243d5c 100%) !important;
  border: 1px solid var(--frank-gold-dim) !important;
  color: var(--frank-cream) !important;
}

body .n-button--primary-type:hover,
body .n-button--info-type:hover,
body .n-button--primary-type.card-btn:hover {
  background: linear-gradient(180deg, #3f6a94 0%, #2b4a70 100%) !important;
}

body.page-app-mod .app-mod-left-nav .n-card[style*="background"] {
  background: linear-gradient(180deg, #355a82, #243d5c) !important;
  border: 1px solid var(--frank-border-strong) !important;
}

.n-menu-item-content--selected {
  background: rgba(201, 162, 39, 0.1) !important;
  background-image: none !important;
  border-left: 3px solid !important;
  border-image: linear-gradient(180deg, #2b4a70, #c9a227) 1 !important;
  border-radius: 0 10px 10px 0 !important;
}

.n-menu-item-content:hover {
  background: rgba(201, 162, 39, 0.06) !important;
}

.n-input:focus,
.n-input--focus,
.n-base-selection--active .n-base-selection-label {
  border-color: rgba(232, 213, 163, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.12) !important;
}

/* 应用下载：生成中按钮背景进度 */
.app-build-btn.n-button {
  --build-pct: 0%;
  position: relative;
  overflow: hidden;
  min-width: 7rem;
  background: linear-gradient(
    90deg,
    var(--frank-gold) 0%,
    var(--frank-gold-dim) var(--build-pct),
    rgba(255, 255, 255, 0.08) var(--build-pct)
  ) !important;
  border: 1px solid var(--frank-border-strong) !important;
  color: var(--frank-cream) !important;
}

.app-build-btn.n-button.n-button--disabled {
  opacity: 1 !important;
  cursor: not-allowed !important;
}

@media (prefers-reduced-motion: reduce) {
  .layout-content-main .n-card,
  .proCard .n-card {
    animation: none !important;
  }
}