/* ============================================
   LLMPort Console - Claude-inspired Theme
   ============================================ */

/* === Google Font === */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");

/* === Root Color Overrides (Semi UI variables) === */
body, body .semi-always-light, :host, :host .semi-always-light {
  /* Redefine blue (primary) to Anthropic terracotta/warm brown */
  --semi-blue-0: 253, 247, 243;
  --semi-blue-1: 251, 237, 229;
  --semi-blue-2: 245, 212, 195;
  --semi-blue-3: 235, 178, 152;
  --semi-blue-4: 222, 142, 107;
  --semi-blue-5: 201, 100, 66;
  --semi-blue-6: 172, 80, 50;
  --semi-blue-7: 143, 62, 36;
  --semi-blue-8: 114, 46, 24;
  --semi-blue-9: 85, 32, 14;

  /* Warm grey tones */
  --semi-grey-0: 250, 248, 246;
  --semi-grey-1: 238, 235, 232;
  --semi-grey-2: 214, 210, 206;
  --semi-grey-3: 180, 175, 170;
  --semi-grey-4: 145, 139, 133;
  --semi-grey-5: 112, 106, 99;
  --semi-grey-6: 89, 83, 76;
  --semi-grey-7: 67, 62, 56;
  --semi-grey-8: 46, 42, 38;
  --semi-grey-9: 28, 25, 22;

  /* White with warmth */
  --semi-white: 255, 255, 253;
}

/* === Global Typography & Background === */
body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: #FAF8F6 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Navigation / Sidebar - Claude dark style === */
.semi-navigation {
  background: #1A1714 !important;
  border-right: none !important;
  box-shadow: 1px 0 0 rgba(0,0,0,0.08) !important;
}

.semi-navigation-item,
.semi-navigation .semi-navigation-item-text {
  color: rgba(255,255,255,0.72) !important;
  font-weight: 450 !important;
  letter-spacing: -0.01em;
}

.semi-navigation-item:hover {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
}

.semi-navigation-item-selected,
.semi-navigation-item-selected .semi-navigation-item-text {
  background: rgba(201,100,66,0.18) !important;
  color: #F5B89C !important;
}

.semi-navigation-header {
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.semi-navigation-header-logo .semi-navigation-header-text,
.semi-navigation-header .logo-text {
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em;
}

.semi-navigation-footer {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* === Main Content Area === */
.semi-layout-content {
  background: #FAF8F6 !important;
}

.semi-layout {
  background: #FAF8F6 !important;
}

.semi-layout-sider {
  background: #1A1714 !important;
}

/* === Cards === */
.semi-card {
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02) !important;
  background: #FFFFFF !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.semi-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.03) !important;
  border-color: rgba(0,0,0,0.09) !important;
}

.semi-card-header {
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

/* === Buttons === */
.semi-button-primary {
  background: #C96442 !important;
  border-color: #C96442 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  transition: all 0.2s ease !important;
}

.semi-button-primary:hover {
  background: #B55638 !important;
  border-color: #B55638 !important;
  transform: translateY(-0.5px);
  box-shadow: 0 2px 8px rgba(201,100,66,0.25) !important;
}

.semi-button-primary:active {
  background: #A04B30 !important;
  border-color: #A04B30 !important;
  transform: translateY(0);
}

.semi-button {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.semi-button-tertiary {
  color: #C96442 !important;
}

.semi-button-tertiary:hover {
  background: rgba(201,100,66,0.06) !important;
}

/* === Tables === */
.semi-table {
  border-radius: 12px !important;
  overflow: hidden;
}

.semi-table-wrapper {
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 12px !important;
}

.semi-table-thead .semi-table-row th {
  background: #F7F4F1 !important;
  font-weight: 600 !important;
  color: #3D3832 !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

.semi-table-tbody .semi-table-row td {
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
}

.semi-table-tbody .semi-table-row:hover td {
  background: rgba(201,100,66,0.03) !important;
}

/* === Input / Select === */
.semi-input-wrapper,
.semi-select {
  border-radius: 8px !important;
  border-color: rgba(0,0,0,0.12) !important;
  transition: all 0.15s ease !important;
}

.semi-input-wrapper:hover,
.semi-select:hover {
  border-color: rgba(201,100,66,0.4) !important;
}

.semi-input-wrapper-focus,
.semi-select-focus {
  border-color: #C96442 !important;
  box-shadow: 0 0 0 2px rgba(201,100,66,0.12) !important;
}

/* === Tags === */
.semi-tag {
  border-radius: 6px !important;
  font-weight: 500 !important;
}

.semi-tag-blue-light {
  background: rgba(201,100,66,0.08) !important;
  color: #C96442 !important;
}

/* === Tabs === */
.semi-tabs-tab-active {
  color: #C96442 !important;
}

.semi-tabs-ink-bar {
  background: #C96442 !important;
}

/* === Progress & Switch === */
.semi-progress-line-bar {
  background: #C96442 !important;
}

.semi-switch-checked {
  background: #C96442 !important;
}

/* === Tooltip & Popover === */
.semi-tooltip-wrapper,
.semi-popover {
  border-radius: 10px !important;
}

/* === Modal === */
.semi-modal-content {
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.08) !important;
}

.semi-modal-header {
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

/* === Toast / Notification === */
.semi-toast-wrapper {
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}

/* === Breadcrumb === */
.semi-breadcrumb {
  font-weight: 500 !important;
}

/* === Typography === */
.semi-typography-h1,
.semi-typography-h2,
.semi-typography-h3,
.semi-typography-h4,
.semi-typography-h5,
.semi-typography-h6,
h1, h2, h3, h4, h5, h6 {
  font-weight: 650 !important;
  letter-spacing: -0.025em !important;
  color: #1C1917 !important;
}

/* === Pagination === */
.semi-page-item-active {
  background: #C96442 !important;
  border-color: #C96442 !important;
}

/* === Link === */
a.semi-typography {
  color: #C96442 !important;
}
a.semi-typography:hover {
  color: #B55638 !important;
}

/* === Scrollbar === */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25);
}

/* === Hide "About NewAPI" / repo links in About page === */
a[href*="github.com/songquanpeng"],
a[href*="github.com/Calcium-Ion"],
a[href*="docs.newapi.pro"],
a[href*="newapi.pro"] {
  display: none !important;
}

/* === Custom animations === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.semi-card,
.semi-table-wrapper {
  animation: fadeIn 0.2s ease-out;
}

/* === Banner / Notice bar === */
.semi-banner {
  border-radius: 10px !important;
  border: 1px solid rgba(201,100,66,0.15) !important;
}

/* === Badge === */
.semi-badge-dot {
  background: #C96442 !important;
}

/* === Dropdown === */
.semi-dropdown-menu {
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.04) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
}

/* === Loading/Spin === */
.semi-spin-wrapper .semi-spin-dot {
  border-color: #C96442 !important;
  border-top-color: transparent !important;
}

/* === Avatar === */
.semi-avatar-blue {
  background: rgba(201,100,66,0.12) !important;
  color: #C96442 !important;
}

/* === App layout tweaks === */
.app-layout {
  background: #FAF8F6 !important;
}

/* Improve spacing */
.semi-layout-content {
  padding: 24px !important;
}

/* === Dark mode overrides (if dark mode is used) === */
body[theme-mode="dark"], body .semi-always-dark, :host .semi-always-dark {
  --semi-blue-0: 40, 28, 22;
  --semi-blue-1: 56, 36, 26;
  --semi-blue-2: 85, 50, 32;
  --semi-blue-3: 114, 62, 40;
  --semi-blue-4: 156, 82, 54;
  --semi-blue-5: 201, 100, 66;
  --semi-blue-6: 222, 130, 96;
  --semi-blue-7: 235, 160, 130;
  --semi-blue-8: 245, 195, 172;
  --semi-blue-9: 251, 230, 220;
}