/* Bangban AI Gateway - Apple Style Console Theme
 * Principle: Minimal, clean, large radius, soft shadows, no color changes
 * Reference: Apple Design - lots of whitespace, subtle depth, rounded aesthetics
 */

:root {
  /* Apple style system colors */
  --bb-apple-bg: #f5f5f7;
  --bb-apple-card: #ffffff;
  --bb-apple-border: rgba(0, 0, 0, 0.04);
  --bb-apple-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --bb-apple-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  --bb-apple-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.12);
  --bb-apple-radius-sm: 8px;
  --bb-apple-radius: 12px;
  --bb-apple-radius-lg: 18px;
  --bb-apple-radius-xl: 24px;
}

/* Overall background - Apple gray-white */
html, body {
  background-color: var(--bb-apple-bg) !important;
}

/* Sidebar - Apple style glassmorphism */
.semi-layout-sider {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-right: 1px solid var(--bb-apple-border) !important;
}

.semi-navigation {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Navigation items - large radius, hover effect */
.semi-navigation-list .semi-navigation-item,
.semi-navigation-list .semi-navigation-sub-title {
  border-radius: var(--bb-apple-radius) !important;
  margin: 4px 12px !important;
  padding: 10px 14px !important;
  transition: all 0.2s ease !important;
}

.semi-navigation-list .semi-navigation-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.semi-navigation-list .semi-navigation-item-selected {
  background: rgba(0, 122, 255, 0.1) !important;
  color: #007aff !important;
}

/* Header - glassmorphism */
.semi-layout-header {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--bb-apple-border) !important;
  box-shadow: var(--bb-apple-shadow-sm) !important;
}

/* Main content area - more whitespace */
.semi-layout-content {
  padding: 24px 28px !important;
}

/* Cards - Apple style large radius, soft shadows */
.semi-card {
  background: var(--bb-apple-card) !important;
  border-radius: var(--bb-apple-radius-lg) !important;
  border: 1px solid var(--bb-apple-border) !important;
  box-shadow: var(--bb-apple-shadow) !important;
  transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.semi-card:hover {
  box-shadow: var(--bb-apple-shadow-lg) !important;
}

/* Tables */
.semi-table {
  border-radius: var(--bb-apple-radius-lg) !important;
  border: 1px solid var(--bb-apple-border) !important;
  overflow: hidden !important;
}

.semi-table-thead > tr > th {
  background: rgba(0, 0, 0, 0.02) !important;
  font-weight: 600 !important;
}

/* Buttons - Apple style */
.semi-button {
  border-radius: var(--bb-apple-radius) !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.semi-button-primary {
  background: #007aff !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3) !important;
}

.semi-button-primary:hover {
  background: #0051d5 !important;
  box-shadow: 0 4px 12px rgba(0, 122, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

.semi-button-secondary {
  background: rgba(0, 0, 0, 0.05) !important;
  border: none !important;
  color: #1d1d1f !important;
}

.semi-button-secondary:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Input fields - Apple style */
.semi-input-wrapper,
.semi-select-selection,
.semi-input-number,
.semi-tagInput,
.semi-picker {
  border-radius: var(--bb-apple-radius) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
  transition: all 0.2s ease !important;
}

.semi-input-wrapper:hover,
.semi-select-selection:hover {
  border-color: rgba(0, 0, 0, 0.2) !important;
}

.semi-input-wrapper-focus,
.semi-select-selection:focus {
  border-color: #007aff !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
}

/* Tags - capsule shape */
.semi-tag {
  border-radius: 100px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
}

/* Tabs */
.semi-tabs-tab {
  border-radius: var(--bb-apple-radius) !important;
  padding: 8px 16px !important;
}

.semi-tabs-tab-active {
  background: rgba(0, 122, 255, 0.1) !important;
  color: #007aff !important;
}

/* Modal/Drawer */
.semi-modal-content,
.semi-drawer-content {
  border-radius: var(--bb-apple-radius-xl) !important;
  box-shadow: var(--bb-apple-shadow-lg) !important;
}

/* Dropdown menu */
.semi-dropdown-menu,
.semi-select-option-list {
  border-radius: var(--bb-apple-radius) !important;
  box-shadow: var(--bb-apple-shadow-lg) !important;
  border: 1px solid var(--bb-apple-border) !important;
}

/* Pagination */
.semi-pagination-item,
.semi-pagination-prev,
.semi-pagination-next {
  border-radius: var(--bb-apple-radius-sm) !important;
  border: none !important;
  background: transparent !important;
}

.semi-pagination-item:hover,
.semi-pagination-prev:hover,
.semi-pagination-next:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

.semi-pagination-item-active {
  background: #007aff !important;
  color: white !important;
}

/* Login/Register page cards */
[class*='login'] .semi-card,
[class*='auth'] .semi-card,
[class*='register'] .semi-card {
  border-radius: var(--bb-apple-radius-xl) !important;
  box-shadow: var(--bb-apple-shadow-lg) !important;
}

/* Dashboard stats cards enhancement */
.semi-card .semi-typography-heading {
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
}

/* Responsive optimization */
@media (max-width: 768px) {
  .semi-layout-content {
    padding: 16px 20px !important;
  }
  
  .semi-card {
    border-radius: var(--bb-apple-radius) !important;
  }
}

/* ===== Model Pricing Page Enhancements ===== */

/* Pricing page layout - better spacing */
[class*='pricing'] .semi-layout-content,
[class*='model'] .semi-layout-content {
  padding: 20px 24px !important;
}

/* Filter sidebar - glassmorphism card */
[class*='pricing'] .semi-layout-sider,
[class*='model'] .semi-layout-sider {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-radius: var(--bb-apple-radius-lg) !important;
  margin: 16px !important;
  padding: 20px !important;
  border: 1px solid var(--bb-apple-border) !important;
  box-shadow: var(--bb-apple-shadow) !important;
}

/* Filter section headers */
[class*='pricing'] .semi-layout-sider h3,
[class*='pricing'] .semi-layout-sider .semi-typography,
[class*='model'] .semi-layout-sider h3,
[class*='model'] .semi-layout-sider .semi-typography {
  font-weight: 600 !important;
  font-size: 13px !important;
  color: #1d1d1f !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
}

/* Filter buttons - pill style */
[class*='pricing'] .semi-layout-sider .semi-button,
[class*='model'] .semi-layout-sider .semi-button {
  border-radius: 100px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  margin: 4px !important;
  border: 1px solid transparent !important;
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1d1d1f !important;
  transition: all 0.2s ease !important;
}

[class*='pricing'] .semi-layout-sider .semi-button:hover,
[class*='model'] .semi-layout-sider .semi-button:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

[class*='pricing'] .semi-layout-sider .semi-button-primary,
[class*='model'] .semi-layout-sider .semi-button-primary,
[class*='pricing'] .semi-layout-sider .semi-button-active,
[class*='model'] .semi-layout-sider .semi-button-active {
  background: #007aff !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3) !important;
}

/* Model cards - enhanced */
[class*='pricing'] .semi-card,
[class*='model'] .semi-card {
  border-radius: var(--bb-apple-radius-lg) !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--bb-apple-border) !important;
  box-shadow: var(--bb-apple-shadow) !important;
  transition: all 0.3s ease !important;
}

[class*='pricing'] .semi-card:hover,
[class*='model'] .semi-card:hover {
  box-shadow: var(--bb-apple-shadow-lg) !important;
  transform: translateY(-2px) !important;
}

/* Model name heading */
[class*='pricing'] .semi-card h3,
[class*='pricing'] .semi-card .semi-typography-heading,
[class*='model'] .semi-card h3,
[class*='model'] .semi-card .semi-typography-heading {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #1d1d1f !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.02em !important;
}

/* Price display - cleaner */
[class*='pricing'] .semi-card .semi-typography,
[class*='model'] .semi-card .semi-typography {
  font-size: 13px !important;
  color: #86868b !important;
  line-height: 1.5 !important;
}

[class*='pricing'] .semi-card .semi-typography strong,
[class*='model'] .semi-card .semi-typography strong {
  color: #1d1d1f !important;
  font-weight: 600 !important;
}

/* Price tags - highlight */
[class*='pricing'] .semi-card .semi-tag,
[class*='model'] .semi-card .semi-tag {
  background: rgba(0, 122, 255, 0.1) !important;
  color: #007aff !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  padding: 4px 10px !important;
}

/* Search input - full width with icon */
[class*='pricing'] .semi-input-wrapper,
[class*='model'] .semi-input-wrapper {
  border-radius: var(--bb-apple-radius) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  border: 1px solid transparent !important;
  padding: 10px 14px !important;
}

[class*='pricing'] .semi-input-wrapper:focus-within,
[class*='model'] .semi-input-wrapper:focus-within {
  background: white !important;
  border-color: #007aff !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1) !important;
}

/* Toggle switches - Apple style */
[class*='pricing'] .semi-switch,
[class*='model'] .semi-switch {
  border-radius: 100px !important;
}

[class*='pricing'] .semi-switch-checked,
[class*='model'] .semi-switch-checked {
  background: #007aff !important;
}

/* View toggle buttons - segmented control style */
[class*='pricing'] .semi-button-group,
[class*='model'] .semi-button-group {
  border-radius: var(--bb-apple-radius) !important;
  background: rgba(0, 0, 0, 0.04) !important;
  padding: 4px !important;
}

[class*='pricing'] .semi-button-group .semi-button,
[class*='model'] .semi-button-group .semi-button {
  border-radius: var(--bb-apple-radius-sm) !important;
  border: none !important;
  background: transparent !important;
}

[class*='pricing'] .semi-button-group .semi-button-active,
[class*='model'] .semi-button-group .semi-button-active {
  background: white !important;
  box-shadow: var(--bb-apple-shadow-sm) !important;
  color: #1d1d1f !important;
}

/* Pagination - cleaner */
[class*='pricing'] .semi-pagination,
[class*='model'] .semi-pagination {
  margin-top: 24px !important;
  padding: 16px !important;
}

/* Page header - minimal */
[class*='pricing'] h2,
[class*='model'] h2 {
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #1d1d1f !important;
  margin-bottom: 8px !important;
}

[class*='pricing'] .semi-typography-paragraph,
[class*='model'] .semi-typography-paragraph {
  color: #86868b !important;
  font-size: 15px !important;
  margin-bottom: 24px !important;
}