/* =============================================
   汇成科技 — Dark Theme v3 (matching original 飞鹰 UI)
   ============================================= */

/* === Layout === */
.n-layout { background-color: #18181c !important; }
.n-layout-header { background-color: #1e1e2d !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.n-layout-content { background-color: #18181c !important; }
.n-layout-sider, .n-layout-sider-scroll-container { background-color: #1a1a2e !important; }

/* === Native sidebar menu items === */
.n-menu-item {
  padding: 0 !important;
  margin: 2px 8px !important;
}
.n-menu-item-content {
  border-radius: 10px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  height: 40px !important;
  line-height: 40px !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}
.n-menu-item-content:hover {
  background-color: rgba(124, 58, 237, 0.12) !important;
}
.n-menu-item-content--selected,
.n-menu-item-content--child-active {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  border-radius: 10px !important;
  padding: 0 18px !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,
.n-menu-item-content--child-active .n-menu-item-content__icon,
.n-menu-item-content--child-active .n-menu-item-content-header,
.n-menu-item-content--child-active .n-menu-item-content-header a {
  color: #fff !important;
}
/* Ensure the menu item arrow (submenu indicator) doesn't break layout */
.n-menu-item-content__arrow {
  color: rgba(255,255,255,0.5) !important;
}
.n-menu-item-content--selected .n-menu-item-content__arrow {
  color: #fff !important;
}

/* === Sidebar section labels (主菜单 / 系统) === */
.hc-main-label, .hc-section-label {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  padding: 18px 18px 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  user-select: none;
  font-weight: 500;
}
.hc-main-label { padding-top: 10px; }

/* === Custom nav items (系统 section) === */
.hc-nav-item {
  margin: 2px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.hc-nav-item-content {
  display: flex;
  align-items: center;
  padding: 0 18px;
  height: 40px;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.hc-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  color: rgba(255,255,255,0.5);
  flex-shrink: 0;
}
.hc-nav-text {
  font-size: 14px;
  color: rgba(255,255,255,0.65);
}
.hc-nav-item:hover .hc-nav-item-content {
  background-color: rgba(124, 58, 237, 0.12);
}
.hc-nav-item:hover .hc-nav-icon { color: rgba(255,255,255,0.8); }
.hc-nav-item:hover .hc-nav-text { color: rgba(255,255,255,0.9); }

.hc-nav-item.hc-active .hc-nav-item-content {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
}
.hc-nav-item.hc-active .hc-nav-icon { color: #fff; }
.hc-nav-item.hc-active .hc-nav-text { color: #fff; }

/* === Bottom user bar === */
.hc-user-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #1a1a2e;
}
.hc-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  margin-right: 10px;
  flex-shrink: 0;
}
.hc-user-name {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
}

/* === Page header (back + title) === */
.hc-page-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
.hc-page-title {
  color: #e0e0e0;
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}
.hc-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #999;
  cursor: pointer;
  transition: all 0.2s;
}
.hc-back-btn:hover {
  background: rgba(124,58,237,0.15);
  border-color: rgba(124,58,237,0.3);
  color: #a78bfa;
}

/* === Cards === */
.n-card {
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  background-color: #1e1e2e !important;
  color: #e0e0e0 !important;
}
.n-card-header, .n-card__content { background-color: transparent !important; }
.n-card.n-card--bordered {
  background-color: rgba(30, 30, 46, 0.8) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* === Custom card/form elements === */
.hc-card {
  background: #1e1e2e;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 20px;
}
.hc-card-danger {
  border-color: rgba(248,113,113,0.15);
}
.hc-card-header {
  font-size: 16px;
  font-weight: 600;
  color: #e0e0e0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === Profile section (Account page) === */
.hc-profile-section {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.hc-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  flex-shrink: 0;
}
.hc-profile-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hc-profile-name {
  font-size: 18px;
  font-weight: 600;
  color: #e0e0e0;
}
.hc-profile-role {
  font-size: 13px;
  color: #888;
}
.hc-profile-badges {
  display: flex;
  gap: 12px;
}
.hc-profile-badge {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 14px 18px;
}
.hc-profile-badge-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}
.hc-profile-badge-value {
  font-size: 14px;
  font-weight: 500;
  color: #e0e0e0;
}
.hc-text-green { color: #4ade80 !important; }

/* === Server info grid (Settings page) === */
.hc-server-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hc-server-item {
  flex: 1;
  min-width: 140px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  padding: 14px 18px;
}
.hc-server-label {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}
.hc-server-value {
  font-size: 14px;
  color: #e0e0e0;
  word-break: break-all;
}

/* === Info table === */
.hc-info-table {
  width: 100%;
  border-collapse: collapse;
}
.hc-info-table td {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: #e0e0e0;
  font-size: 14px;
}
.hc-info-table tr:last-child td { border-bottom: none; }
.hc-label { color: #888 !important; width: 120px; }

.hc-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}
.hc-badge-purple { background: rgba(124,58,237,0.2); color: #a78bfa; }
.hc-badge-green { background: rgba(74,222,128,0.15); color: #4ade80; }
.hc-badge-blue { background: rgba(59,130,246,0.15); color: #60a5fa; }

/* === Form elements === */
.hc-form-group { margin-bottom: 16px; }
.hc-form-group label {
  display: block;
  font-size: 13px;
  color: #888;
  margin-bottom: 8px;
}
.hc-input {
  width: 100%;
  padding: 10px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: #e0e0e0;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.hc-input:focus { border-color: #7c3aed; }
.hc-input::placeholder { color: rgba(255,255,255,0.25); }

.hc-btn {
  padding: 9px 22px;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  color: #ccc;
  background: rgba(255,255,255,0.06);
}
.hc-btn:hover { background: rgba(255,255,255,0.1); }
.hc-btn-primary {
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
}
.hc-btn-primary:hover {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.hc-btn-danger {
  background: rgba(248,113,113,0.1);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.2);
}
.hc-btn-danger:hover {
  background: rgba(248,113,113,0.18);
}

/* === Dialog === */
.hc-dialog-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}
.hc-dialog {
  background: #1e1e2e;
  border-radius: 16px;
  padding: 28px;
  width: 420px;
  max-width: 90vw;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

/* === Buttons (Naive UI) === */
.n-button { border-radius: 8px !important; }
.n-button--primary-type {
  background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
  border: none !important;
  color: #fff !important;
}
.n-button--primary-type .n-button__content,
.n-button--primary-type .n-button__icon,
.n-button--primary-type .n-base-icon,
.n-button--primary-type span,
.n-button--primary-type svg {
  color: #fff !important;
  fill: #fff !important;
}
.n-button-group .n-button--primary-type,
.n-button-group .n-button {
  color: #fff !important;
}
.n-button .n-icon, .n-button .n-base-icon { color: inherit !important; }

/* === Input/Select === */
.n-input { border-radius: 8px !important; }
.n-base-selection { border-radius: 8px !important; }

/* === Table === */
.n-data-table { border-radius: 12px !important; overflow: hidden; }
.n-data-table-th { background-color: #1a1a2e !important; }
.n-data-table-td { background-color: transparent !important; }

/* === Dialog/Modal/Tags === */
.n-dialog, .n-modal { border-radius: 16px !important; }
.n-tag { border-radius: 6px !important; }

/* === Tabs === */
.n-tabs-nav, .n-tabs-wrapper { background-color: transparent !important; }
.n-tabs-tab { border-radius: 8px !important; }
.n-tabs-tab--active { background-color: rgba(124, 58, 237, 0.2) !important; }
.n-tab-pane { background-color: transparent !important; }

/* === Thing cell (app selector) dark === */
.thing-cell { background-color: transparent !important; }
.thing-cell:hover { background-color: rgba(124, 58, 237, 0.08) !important; }
.thing-cell-on { background-color: rgba(124, 58, 237, 0.12) !important; }
.thing-cell-on .n-thing-main .n-thing-header .n-thing-header__title { color: #a78bfa !important; }
.n-thing { background-color: transparent !important; }
.n-thing-header__title { color: #e0e0e0 !important; }

/* === Lists === */
.n-list, .n-list-item { background-color: transparent !important; color: #e0e0e0 !important; }
.n-list-item:hover { background-color: rgba(124, 58, 237, 0.08) !important; }

/* === Upload === */
.n-upload-dragger {
  background-color: #1e1e2e !important;
  border-color: rgba(255,255,255,0.12) !important;
}
.n-upload-dragger:hover { border-color: #7c3aed !important; }

/* === Image borders === */
img[style*="border: 1px solid"] { border-color: rgba(255,255,255,0.12) !important; }

/* === Form === */
.n-form-item-label, .n-form-item-label__text { color: #ccc !important; }

/* === Restyle red text (keep visible for hints) === */
span[style*="color: red"], span[style*="color:red"] { color: #f87171 !important; }

/* === Select dropdown === */
.n-base-select-menu { background-color: #1e1e2e !important; border: 1px solid rgba(255,255,255,0.08) !important; }
.n-base-select-option { color: #e0e0e0 !important; }
.n-base-select-option--selected { color: #a78bfa !important; }
.n-base-select-option:hover, .n-base-select-option--pending { background-color: rgba(124,58,237,0.12) !important; }

/* === Popover/dropdown === */
.n-popover, .n-dropdown-menu {
  background-color: #1e1e2e !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
}

/* === Breadcrumb === */
.n-breadcrumb-item__link { color: #ccc !important; }

/* === Scrollbar === */
.n-scrollbar-rail__scrollbar { background-color: rgba(124,58,237,0.25) !important; border-radius: 4px !important; }

/* === Pagination === */
.n-pagination .n-pagination-item { background-color: #2a2a3e !important; border-color: rgba(255,255,255,0.08) !important; color: #ccc !important; }
.n-pagination .n-pagination-item--active { background-color: #7c3aed !important; border-color: #7c3aed !important; color: #fff !important; }

/* === Empty/Switch/Progress === */
.n-empty__description { color: #888 !important; }
.n-switch__rail { background-color: #3a3a5e !important; }
.n-progress-graph-line-rail { background-color: #2a2a3e !important; }

/* === White bg override === */
[style*="background: white"], [style*="background-color: white"],
[style*="background: #fff"], [style*="background-color: #fff"],
[style*="background: rgb(255"], [style*="background-color: rgb(255"] {
  background-color: #1e1e2e !important;
  color: #e0e0e0 !important;
}

/* === General text === */
.n-text { color: #e0e0e0 !important; }
.n-space { color: #e0e0e0 !important; }

/* === Drawer (mobile sidebar) === */
.n-drawer-body-content-wrapper .n-menu.n-menu--vertical {
  padding-bottom: 60px;
}

/* === Device Info Page Dark Theme Fixes === */
.n-descriptions { background-color: transparent !important; }
.n-descriptions-table-body { background-color: transparent !important; }
.n-descriptions-table-header { background-color: transparent !important; }
.n-descriptions .n-descriptions-table-body .n-descriptions-table-row .n-descriptions-table-row-content { color: #e0e0e0 !important; background-color: transparent !important; }
.n-descriptions .n-descriptions-table-body .n-descriptions-table-row .n-descriptions-table-row-label { color: #999 !important; background-color: rgba(255,255,255,0.03) !important; }
.n-descriptions-separator { border-color: rgba(255,255,255,0.06) !important; }
.n-descriptions-table { background-color: transparent !important; }
.n-descriptions-bordered .n-descriptions-table-body .n-descriptions-table-row .n-descriptions-table-row-content,
.n-descriptions-bordered .n-descriptions-table-body .n-descriptions-table-row .n-descriptions-table-row-label { border-color: rgba(255,255,255,0.06) !important; }
td[class*="descriptions"] { background-color: transparent !important; color: #e0e0e0 !important; }
th[class*="descriptions"] { background-color: rgba(255,255,255,0.03) !important; color: #999 !important; }

/* Fix any remaining white bg blocks */
.n-layout-scroll-container { background-color: #18181c !important; }
.n-layout-sider-scroll-container { background-color: #1a1a2e !important; }
body, html, #app { background-color: #18181c !important; }

/* Broken image fallback */


/* === Info page: force dark bg on tab area === */
.content-wrapper { background: #18181c !important; }
.tabs-wrapper { background: #18181c !important; }
.image-container { background: transparent !important; }
.n-tabs .n-tabs-pane-wrapper { background: transparent !important; }

/* === Header: hide right side (mp3, avatar, settings) === */
.layout-header-right { display: none !important; }


/* === Logo === */
.logo { display: flex !important; align-items: center !important; gap: 10px !important; }
.logo img {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
}
.logo .title { color: #e0e0e0 !important; font-size: 15px !important; font-weight: 600 !important; }