@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

/* HalfRouter Console Theme
   International API infrastructure style: mineral paper, ink, cobalt, signal green. */

:root {
  --cg-font-sans: 'Manrope', ui-sans-serif, sans-serif;
  --cg-font-display: 'Instrument Serif', Georgia, serif;
  --cg-font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --cg-paper: #f4f0e7;
  --cg-paper-2: #ebe5d7;
  --cg-panel: #fffaf0;
  --cg-panel-2: #f8f1e2;
  --cg-ink: #10151d;
  --cg-ink-2: #26303d;
  --cg-muted: #66707e;
  --cg-faint: #8b94a2;
  --cg-line: rgba(16, 21, 29, .14);
  --cg-line-strong: rgba(16, 21, 29, .24);
  --cg-cobalt: #194bff;
  --cg-cobalt-hover: #0e39d8;
  --cg-signal: #b8ff4d;
  --cg-rust: #b65735;
  --cg-green: #0a7f4f;
  --cg-shadow: 0 24px 70px rgba(20, 25, 34, .12);
  --cg-grid:
    linear-gradient(90deg, rgba(16,21,29,.05) 1px, transparent 1px) 0 0/84px 84px,
    linear-gradient(rgba(16,21,29,.04) 1px, transparent 1px) 0 0/84px 84px;
}

:root, body, html {
  --semi-color-primary: var(--cg-cobalt) !important;
  --semi-color-primary-hover: var(--cg-cobalt-hover) !important;
  --semi-color-primary-active: #0a2da8 !important;
  --semi-color-primary-light-default: rgba(25,75,255,.10) !important;
  --semi-color-primary-light-hover: rgba(25,75,255,.16) !important;
  --semi-color-primary-light-active: rgba(25,75,255,.22) !important;
  --semi-color-bg-0: var(--cg-paper) !important;
  --semi-color-bg-1: var(--cg-panel) !important;
  --semi-color-bg-2: var(--cg-panel-2) !important;
  --semi-color-bg-3: #eee6d5 !important;
  --semi-color-bg-4: #e2d8c4 !important;
  --semi-color-text-0: var(--cg-ink) !important;
  --semi-color-text-1: var(--cg-ink-2) !important;
  --semi-color-text-2: var(--cg-muted) !important;
  --semi-color-text-3: var(--cg-faint) !important;
  --semi-color-border: var(--cg-line) !important;
  --semi-color-fill-0: rgba(16,21,29,.045) !important;
  --semi-color-fill-1: rgba(16,21,29,.075) !important;
  --semi-color-fill-2: rgba(16,21,29,.11) !important;
  --semi-color-link: var(--cg-cobalt) !important;
  --semi-color-link-hover: var(--cg-cobalt-hover) !important;
  --semi-color-nav-bg: rgba(255,250,240,.86) !important;
  --semi-color-shadow: rgba(20,25,34,.18) !important;
  --semi-overlay-bg: rgba(16,21,29,.56) !important;
  color-scheme: light !important;
}

html, body {
  font-family: var(--cg-font-sans) !important;
  background:
    var(--cg-grid),
    radial-gradient(circle at 78% 0%, rgba(25,75,255,.10), transparent 28%),
    linear-gradient(135deg, var(--cg-paper), var(--cg-paper-2)) !important;
  color: var(--cg-ink) !important;
  letter-spacing: 0 !important;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
#root, #root > div, .semi-layout, .semi-layout-content, .semi-layout-header, .semi-layout-sider, .semi-layout-sider-children {
  background: transparent !important;
}

h1, h2, h3, h4, h5, h6,
.semi-typography-title, .semi-typography-title-h1, .semi-typography-title-h2, .semi-typography-title-h3 {
  font-family: var(--cg-font-sans) !important;
  color: var(--cg-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -.045em !important;
}
.semi-typography-paragraph, .semi-typography-text { color: var(--cg-ink-2) !important; }
code, pre, .semi-typography-code, .semi-tag, .semi-badge-count, .semi-input-wrapper input, .semi-input-wrapper textarea {
  font-family: var(--cg-font-mono) !important;
}
::selection { background: var(--cg-signal) !important; color: var(--cg-ink) !important; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(16,21,29,.22); border: 2px solid var(--cg-paper); }
::-webkit-scrollbar-thumb:hover { background: rgba(16,21,29,.36); }

.semi-layout-header {
  height: 68px !important;
  background: rgba(255,250,240,.84) !important;
  border-bottom: 1px solid var(--cg-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}
.semi-navigation {
  background: rgba(255,250,240,.76) !important;
  border-right: 1px solid var(--cg-line) !important;
  backdrop-filter: blur(18px);
}
.semi-navigation-list { padding: 14px 10px !important; }
.semi-navigation-item {
  border-radius: 0 !important;
  margin: 2px 0 !important;
  padding: 10px 14px !important;
  color: var(--cg-muted) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  position: relative;
}
.semi-navigation-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 0;
  background: var(--cg-cobalt);
  transition: width .18s ease;
}
.semi-navigation-item:hover {
  background: rgba(25,75,255,.08) !important;
  color: var(--cg-ink) !important;
}
.semi-navigation-item-selected, .semi-navigation-item-active {
  background: var(--cg-ink) !important;
  color: #fff !important;
}
.semi-navigation-item-selected::before, .semi-navigation-item-active::before { width: 5px; background: var(--cg-signal); }
.semi-navigation-item-icon { color: inherit !important; }
.semi-navigation-sub-title {
  color: var(--cg-faint) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
}

.semi-card, .semi-table-wrapper, .semi-modal-content, .semi-popover, .semi-dropdown, .semi-select-option-list, .semi-datepicker, .semi-tabs-bar, .semi-collapse {
  background: rgba(255,250,240,.86) !important;
  border: 1px solid var(--cg-line) !important;
  border-radius: 0 !important;
  box-shadow: var(--cg-shadow) !important;
  backdrop-filter: blur(14px);
}
.semi-card-body, .semi-card-header { background: transparent !important; }
.semi-card-header { border-bottom: 1px solid var(--cg-line) !important; }
.semi-card:hover { border-color: var(--cg-line-strong) !important; }

.semi-button {
  border-radius: 0 !important;
  font-weight: 900 !important;
  letter-spacing: .055em !important;
  text-transform: uppercase;
  box-shadow: none !important;
}
.semi-button-primary, .semi-button-primary:not(.semi-button-disabled) {
  background: var(--cg-ink) !important;
  border-color: var(--cg-ink) !important;
  color: #fff !important;
}
.semi-button-primary:hover { box-shadow: 6px 6px 0 var(--cg-signal) !important; transform: translateY(-1px); }
.semi-button-tertiary, .semi-button-secondary {
  background: rgba(255,250,240,.62) !important;
  border: 1px solid var(--cg-line) !important;
  color: var(--cg-ink) !important;
}
.semi-button-danger { background: var(--cg-rust) !important; border-color: var(--cg-rust) !important; color: #fff !important; }

.semi-input-wrapper, .semi-select, .semi-select-selection, .semi-textarea-wrapper, .semi-input, .semi-datepicker-input {
  border-radius: 0 !important;
  background: #fffdf8 !important;
  border-color: var(--cg-line-strong) !important;
  color: var(--cg-ink) !important;
}
.semi-input-wrapper-focus, .semi-select-focus, .semi-textarea-wrapper-focus {
  border-color: var(--cg-cobalt) !important;
  box-shadow: 0 0 0 4px rgba(25,75,255,.12) !important;
}
.semi-input-wrapper input, .semi-input-wrapper textarea, .semi-select-selection-text { color: var(--cg-ink) !important; font-weight: 650 !important; }

.semi-table, .semi-table-thead, .semi-table-tbody, .semi-table-row, .semi-table-cell {
  background: transparent !important;
  color: var(--cg-ink) !important;
}
.semi-table-thead > .semi-table-row > .semi-table-row-head {
  background: rgba(16,21,29,.055) !important;
  color: var(--cg-muted) !important;
  border-bottom: 1px solid var(--cg-line-strong) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
  background: rgba(25,75,255,.055) !important;
}
.semi-table-row-cell { border-bottom: 1px solid rgba(16,21,29,.08) !important; }

.semi-tag {
  border-radius: 0 !important;
  border: 1px solid var(--cg-line) !important;
  background: rgba(16,21,29,.05) !important;
  color: var(--cg-ink) !important;
  font-weight: 800 !important;
}
.semi-tag-green, .semi-badge-status-success { background: rgba(10,127,79,.11) !important; color: var(--cg-green) !important; border-color: rgba(10,127,79,.25) !important; }
.semi-tag-red, .semi-badge-status-danger { background: rgba(182,87,53,.11) !important; color: var(--cg-rust) !important; border-color: rgba(182,87,53,.25) !important; }
.semi-tag-blue { background: rgba(25,75,255,.11) !important; color: var(--cg-cobalt) !important; border-color: rgba(25,75,255,.25) !important; }

.semi-tabs-tab {
  border-radius: 0 !important;
  font-weight: 900 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.semi-tabs-tab-active { color: var(--cg-cobalt) !important; }
.semi-tabs-tab-line.semi-tabs-tab-active::before, .semi-tabs-bar-line { background: var(--cg-cobalt) !important; }

.semi-modal-mask { background: rgba(16,21,29,.56) !important; backdrop-filter: blur(12px); }
.semi-modal-content { border: 1px solid var(--cg-ink) !important; }
.semi-modal-header, .semi-modal-footer { border-color: var(--cg-line) !important; }
.semi-toast-wrapper .semi-toast {
  border-radius: 0 !important;
  background: var(--cg-panel) !important;
  border: 1px solid var(--cg-line-strong) !important;
  color: var(--cg-ink) !important;
  box-shadow: var(--cg-shadow) !important;
}

.semi-pagination-item {
  border-radius: 0 !important;
  background: rgba(255,250,240,.75) !important;
  border: 1px solid var(--cg-line) !important;
  color: var(--cg-ink) !important;
}
.semi-pagination-item-active { background: var(--cg-ink) !important; color: #fff !important; }

a { color: var(--cg-cobalt) !important; font-weight: 800; }
hr, .semi-divider { border-color: var(--cg-line) !important; }

/* Generic New API dashboard heuristics */
[class*="panel"], [class*="card"], [class*="stat"], [class*="quota"], [class*="token"] {
  border-radius: 0 !important;
}
[class*="logo"], [class*="brand"] { letter-spacing: -.03em; }