/* ==========================================================================
   3x-ui Cyberpunk Obsidian Glass Theme
   ========================================================================== */
:root {
  --ant-primary-color: #047857 !important;
  --ant-primary-color-hover: #065f46 !important;
  --ant-primary-color-active: #064e3b !important;
  --panel-page: #f7f9fc;
  --panel-surface: rgba(255, 255, 255, .97);
  --panel-popup: #fff;
  --panel-header: rgba(248, 250, 252, .97);
  --panel-text: #172033;
  --panel-muted: #52627a;
  --panel-border: #cbd5e1;
  --panel-hover: #edf3fa;
  --panel-shadow: 0 10px 30px -10px rgba(15, 23, 42, .14);
  --panel-success: #166534;
  --panel-error: #9f1239;
  --panel-scrollbar: #8998ac;
  --panel-ambient-opacity: .045;
}

body {
  color: var(--panel-text);
  color-scheme: light;
}

body.dark {
  --panel-page: #060911;
  --panel-surface: rgba(15, 23, 42, .86);
  --panel-popup: #0f172a;
  --panel-header: rgba(11, 17, 32, .94);
  --panel-text: #f1f5f9;
  --panel-muted: #b5c3d6;
  --panel-border: rgba(148, 163, 184, .3);
  --panel-hover: rgba(255, 255, 255, .07);
  --panel-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5);
  --panel-success: #6ee7b7;
  --panel-error: #fda4af;
  --panel-scrollbar: #64748b;
  --panel-ambient-opacity: .72;
  color-scheme: dark;
}

#ambient-bg-canvas {
  opacity: var(--panel-ambient-opacity);
}

body, #app, .ant-layout {
  background: var(--panel-page) !important;
  background-image: 
    radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.14) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(59, 130, 246, 0.14) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(99, 102, 241, 0.1) 0px, transparent 50%) !important;
  background-attachment: fixed !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

.ant-layout-content {
  background: transparent !important;
}

.ant-layout-sider, .ant-layout-header {
  background: var(--panel-header) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-right: 1px solid var(--panel-border) !important;
  border-bottom: 1px solid var(--panel-border) !important;
}

/* Glass Cards & Containers */
.ant-card {
  background: var(--panel-surface) !important;
  color: var(--panel-text);
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--panel-shadow) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ant-card:hover {
  border-color: rgba(16, 185, 129, 0.4) !important;
  box-shadow: var(--panel-shadow), 0 0 20px rgba(16, 185, 129, .12) !important;
  transform: translateY(-2px);
}

.ant-card-head {
  border-bottom: 1px solid var(--panel-border) !important;
  color: var(--panel-text) !important;
}

/* Tables */
.ant-table {
  background: transparent !important;
  color: var(--panel-text) !important;
}

.ant-table-thead > tr > th {
  background: var(--panel-header) !important;
  color: var(--panel-muted) !important;
  border-bottom: 1px solid var(--panel-border) !important;
  font-weight: 600 !important;
}

.ant-table-tbody > tr > td {
  border-bottom: 1px solid var(--panel-border) !important;
}

.ant-table-tbody > tr:hover > td {
  background: var(--panel-hover) !important;
}

/* Modals */
.ant-modal-content {
  background: var(--panel-popup) !important;
  color: var(--panel-text);
  border: 1px solid var(--panel-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--panel-shadow) !important;
}

.ant-modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--panel-border) !important;
}

.ant-modal-title {
  color: var(--panel-text) !important;
}

/* Buttons */
.ant-btn-primary {
  background: linear-gradient(135deg, #047857, #0f766e) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35) !important;
  font-weight: 500 !important;
}

.ant-btn-primary:hover {
  background: linear-gradient(135deg, #065f46, #115e59) !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
}

/* Switches */
.ant-switch-checked {
  background-color: #047857 !important;
}

/* Tags & Badges */
.ant-tag-success {
  background: rgba(16, 185, 129, 0.15) !important;
  color: var(--panel-success) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
}

.ant-tag-error {
  background: rgba(244, 63, 94, 0.15) !important;
  color: var(--panel-error) !important;
  border: 1px solid rgba(244, 63, 94, 0.3) !important;
  border-radius: 9999px !important;
  padding: 2px 10px !important;
}

/* Numbers & Speed */
.ant-statistic-content-value, .ant-table-cell {
  font-feature-settings: "tnum";
}

/* Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--panel-scrollbar); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--panel-muted); }

.ant-input, .ant-input-affix-wrapper, .ant-select-selector,
.ant-select-dropdown, .ant-dropdown-menu, .ant-picker-panel-container,
.ant-popover-inner, .ant-drawer-content {
  background-color: var(--panel-popup) !important;
  color: var(--panel-text) !important;
  border-color: var(--panel-border) !important;
}

.ant-input::placeholder, textarea::placeholder {
  color: var(--panel-muted) !important;
  opacity: 1;
}

.ant-form-item-label > label, .ant-statistic-title, .ant-modal-close,
.ant-select-selection-placeholder, .ant-input-password-icon {
  color: var(--panel-muted) !important;
}