@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap");

:root {
  --londai-ink: #173628;
  --londai-ink-2: #234b38;
  --londai-gold: #d97706;
  --londai-gold-2: #f59e0b;
  --londai-bg: #f5f3ee;
  --semi-color-primary: #1b3a2d !important;
  --semi-color-primary-hover: #234b38 !important;
  --semi-color-primary-light-default: rgba(245, 158, 11, 0.12) !important;
  --semi-color-primary-light-hover: rgba(245, 158, 11, 0.18) !important;
}

html,
body {
  font-family: Inter, "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: var(--londai-bg) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 10%, rgba(245, 158, 11, 0.16), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(16, 185, 129, 0.14), transparent 30%),
    linear-gradient(155deg, rgba(13, 36, 24, 0.06), rgba(245, 243, 238, 0.94));
}

.app-layout > .semi-layout-header {
  box-shadow: 0 10px 34px rgba(27, 58, 45, 0.08) !important;
}

.app-layout > .semi-layout-header header {
  min-height: 68px !important;
  border-bottom: 1px solid rgba(27, 58, 45, 0.1) !important;
  background: rgba(255, 255, 255, 0.88) !important;
}

.app-layout > .semi-layout-header a[href="/"]::before {
  content: "";
  width: 30px;
  height: 30px;
  display: inline-block;
  flex: 0 0 30px;
  background: url("/londai-assets/londai-mark.svg") center / contain no-repeat;
  border-radius: 8px;
}

.app-layout > .semi-layout-header a[href="/"] img,
.app-layout > .semi-layout-header a[href="/"] .semi-skeleton {
  display: none !important;
}

.app-layout > .semi-layout-header a[href="/"]::after {
  content: "LondAI";
  font-size: 16px;
  font-weight: 800;
  color: var(--londai-ink);
}

.app-layout nav a {
  border-radius: 8px !important;
  padding: 8px 11px !important;
  color: #425d4d !important;
}

.app-layout nav a:hover {
  color: var(--londai-ink) !important;
  background: rgba(27, 58, 45, 0.06) !important;
}

.semi-layout-content {
  background:
    radial-gradient(circle at 10% 0%, rgba(245, 158, 11, 0.12), transparent 28%),
    linear-gradient(180deg, #f7f5f0 0%, #f5f3ee 100%) !important;
  min-height: calc(100vh - 68px) !important;
  padding: 28px !important;
}

.semi-layout-content > div:not(.fixed) {
  max-width: 1440px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.semi-card,
[class*="semi-table"],
.semi-modal-content,
.semi-popover-content,
.semi-dropdown-menu,
.semi-form {
  border-radius: 8px !important;
}

.semi-card,
.semi-table-wrapper,
.semi-modal-content {
  border: 1px solid rgba(27, 58, 45, 0.1) !important;
  box-shadow: 0 12px 36px rgba(27, 58, 45, 0.08) !important;
}

.semi-card-header {
  border-bottom: 1px solid rgba(27, 58, 45, 0.08) !important;
}

.semi-table-thead > .semi-table-row > .semi-table-row-head,
.semi-table-thead .semi-table-row-head {
  background: rgba(27, 58, 45, 0.055) !important;
  color: var(--londai-ink) !important;
  font-weight: 700 !important;
}

.semi-table-row:hover > .semi-table-row-cell {
  background: rgba(245, 158, 11, 0.06) !important;
}

#root {
  min-height: 100vh;
}

.semi-button-primary,
button[class*="semi-button-primary"] {
  background: linear-gradient(135deg, var(--londai-gold-2), var(--londai-gold)) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(217, 119, 6, 0.24) !important;
}

.semi-button {
  border-radius: 8px !important;
}

.semi-tag,
.semi-badge,
.semi-select-selection,
.semi-input-wrapper,
.semi-textarea-wrapper {
  border-radius: 8px !important;
}

.semi-button-primary:hover,
button[class*="semi-button-primary"]:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.semi-navigation,
.semi-sidesheet,
.semi-modal-content,
.semi-card,
.semi-tabs-content {
  border-radius: 8px !important;
}

.semi-navigation {
  border-right: 1px solid rgba(27, 58, 45, 0.1) !important;
}

.semi-navigation,
[class*="sider"],
[class*="sidebar"] {
  background: #123024 !important;
  color: rgba(255,255,255,0.82) !important;
}

.semi-navigation-item,
.semi-navigation-item-text {
  border-radius: 8px !important;
}

.semi-navigation-header,
.semi-navigation-item-selected,
.semi-navigation-item-active {
  color: var(--londai-ink) !important;
}

.semi-input-wrapper-focus,
.semi-input-wrapper:hover,
.semi-select:hover .semi-select-selection {
  border-color: rgba(217, 119, 6, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1) !important;
}

a,
.semi-navigation-item-selected .semi-navigation-item-text,
.semi-tabs-tab-active {
  color: var(--londai-ink) !important;
}

.semi-tabs-tab-active::before,
.semi-tabs-tab-active::after {
  background-color: var(--londai-gold) !important;
}

form,
.semi-form,
.semi-card,
[class*="login"],
[class*="Login"] {
  letter-spacing: 0 !important;
}

body:has(input[type="password"]) #root {
  background:
    linear-gradient(155deg, rgba(13, 36, 24, 0.92), rgba(27, 58, 45, 0.88)),
    var(--londai-bg) !important;
}

body:has(input[type="password"]) .semi-layout-header,
body:has(input[type="password"]) .semi-layout-footer {
  display: none !important;
}

body:has(input[type="password"]) .semi-card {
  max-width: 430px !important;
  margin: 0 auto !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,0.32) !important;
}

body:has(input[type="password"]) #root::before {
  content: "LondAI";
  position: fixed;
  top: 34px;
  left: 42px;
  z-index: 2;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

body:has(input[type="password"]) #root::after {
  content: "AI Token 额度与 API 中转平台";
  position: fixed;
  top: 62px;
  left: 42px;
  z-index: 2;
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
}

body:has(input[type="password"]) .semi-input-wrapper {
  border-radius: 8px !important;
}

body:has(input[type="password"]) .semi-button {
  border-radius: 8px !important;
}

body:has(input[type="password"]) a {
  color: #fbbf24 !important;
}

@media (max-width: 768px) {
  body:has(input[type="password"]) #root::before,
  body:has(input[type="password"]) #root::after {
    left: 22px;
  }
}