:root {
  --ics-ink: #0a0a0a;
  --ics-paper: #f4f1ea;
  --ics-paper-2: #ebe6da;
  --ics-red: #bc1823;
  --ics-red-soft: #f8d7d9;
  --ics-muted: #5a5852;
  --color-bg-1: var(--ics-paper) !important;
  --color-bg-2: var(--ics-paper-2) !important;
  --color-bg-3: #e2dccf !important;
  --color-bg-4: #d7d0c3 !important;
  --color-text-1: var(--ics-ink) !important;
  --color-text-2: #292825 !important;
  --color-text-3: var(--ics-muted) !important;
  --color-border: #c9c1b3 !important;
  --color-primary-light-1: var(--ics-red-soft) !important;
  --color-primary-light-2: #efb8bc !important;
  --color-primary-light-3: #e79a9f !important;
  --color-primary-light-4: #d75c65 !important;
  --color-primary-6: var(--ics-red) !important;
  --color-primary-7: #95121b !important;
}

html, body, button, input, textarea, select, .arco-typography {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
}

body, #root, main, .arco-layout, .arco-layout-content {
  background: var(--ics-paper) !important;
  color: var(--ics-ink) !important;
}

h1, h2, h3, h4, h5, h6, .arco-page-header-title {
  font-family: "Instrument Sans", Inter, sans-serif !important;
  letter-spacing: -0.035em;
}

code, pre, kbd, .monaco-editor, [class*="token"], [class*="status"] {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
}

.arco-btn-primary, .arco-switch-checked {
  background-color: var(--ics-red) !important;
  border-color: var(--ics-red) !important;
}

.arco-btn-primary:hover { background-color: #95121b !important; }

.arco-card, .arco-modal, .arco-drawer, .arco-dropdown, .arco-trigger-popup,
.arco-select-popup, .arco-menu {
  background-color: var(--ics-paper) !important;
  border-color: #c9c1b3 !important;
  box-shadow: none !important;
}

.arco-card, .arco-input-wrapper, .arco-textarea-wrapper, .arco-select-view {
  border-radius: 4px !important;
}

.arco-menu-item-selected, .arco-menu-item:hover, .arco-dropdown-option-active,
.arco-dropdown-option:hover {
  background-color: var(--ics-red-soft) !important;
  color: var(--ics-red) !important;
}

.arco-layout-sider {
  background-color: var(--ics-ink) !important;
  color: var(--ics-paper) !important;
}

.arco-layout-sider .arco-menu {
  background-color: transparent !important;
  color: var(--ics-paper) !important;
}

.arco-layout-sider .arco-menu-item-selected {
  background-color: var(--ics-red) !important;
  color: #fff !important;
}

.ics-brand-mark {
  background: #bc1823 url("./pwa/icon-192.png") center / cover no-repeat !important;
  color: transparent !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}

.ics-brand-mark > * { opacity: 0 !important; }

.ics-brand-title { color: var(--ics-ink) !important; }

.ics-auth-card {
  position: relative !important;
  border: 1px solid #d8d0c3 !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 70px rgba(10, 10, 10, .09) !important;
}

.ics-auth-card .ics-auth-logo {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  border-radius: 8px !important;
}

.ics-auth-card input { font-size: 15px !important; }
.ics-auth-card .arco-input-wrapper { border-color: #c9c1b3 !important; }
.ics-auth-card .arco-input-wrapper:hover,
.ics-auth-card .arco-input-wrapper-focus,
.ics-auth-card .arco-input-wrapper:focus-within,
.ics-auth-card .arco-input-wrapper.arco-input-focus {
  border-color: var(--ics-red) !important;
  box-shadow: 0 0 0 2px var(--ics-red-soft) !important;
}

.ics-auth-card h1,
.ics-auth-card h2,
.ics-auth-card h3,
.ics-auth-card .ics-brand-title,
.ics-auth-card .ics-brand-title * {
  color: var(--ics-ink) !important;
  -webkit-text-fill-color: var(--ics-ink) !important;
}

.ics-auth-card input:focus,
.ics-auth-card textarea:focus {
  outline: none !important;
  border-color: var(--ics-red) !important;
  box-shadow: none !important;
}

.ics-auth-card button[type="submit"] {
  min-height: 42px !important;
  font-weight: 650 !important;
  letter-spacing: .01em !important;
}

.ics-agent-switcher {
  background: #111 !important;
  border: 1px solid #343434 !important;
  border-radius: 999px !important;
  padding: 5px !important;
  box-shadow: none !important;
}

.ics-agent-switcher button,
.ics-agent-switcher [role="tab"] {
  border-radius: 999px !important;
  color: #f4f1ea !important;
  background: transparent !important;
}

.ics-agent-switcher button *,
.ics-agent-switcher [role="tab"] * {
  color: #f4f1ea !important;
}

.ics-agent-switcher button:hover,
.ics-agent-switcher [role="tab"]:hover {
  background: #262626 !important;
}

.ics-agent-switcher [aria-selected="true"],
.ics-agent-switcher .active {
  background: var(--ics-red) !important;
  color: #fff !important;
}

.ics-agent-switcher [aria-selected="true"] *,
.ics-agent-switcher .active * {
  color: #fff !important;
}

.ics-composer {
  background: rgba(255,255,255,.58) !important;
  border: 1px solid #bdb5a8 !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 45px rgba(10,10,10,.06) !important;
  backdrop-filter: blur(12px);
}

.ics-theme-toggle {
  position: fixed;
  z-index: 9999;
  top: 18px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #0a0a0a;
  border-radius: 999px;
  background: #f4f1ea;
  color: #0a0a0a;
  font-size: 19px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.ics-theme-toggle:hover { background: #bc1823; color: #fff; transform: translateY(-1px); }

html[data-theme="dark"] .ics-theme-toggle {
  background: #0a0a0a;
  color: #f4f1ea;
  border-color: #f4f1ea;
}

.ics-auth-card .ics-theme-toggle {
  position: absolute;
  top: 28px;
  right: auto;
  left: 28px;
  width: 34px;
  height: 34px;
  font-size: 16px;
}

.ics-auth-card .ics-brand-title {
  color: var(--ics-ink) !important;
  font-weight: 650 !important;
  letter-spacing: -0.045em !important;
}

a, .arco-link { color: var(--ics-red); }
::selection { background: var(--ics-red); color: #fff; }

html[data-theme="dark"] {
  --color-bg-1: #0a0a0a !important;
  --color-bg-2: #141414 !important;
  --color-bg-3: #1a1a1a !important;
  --color-bg-4: #252525 !important;
  --color-text-1: #f4f1ea !important;
  --color-text-2: #ebe6da !important;
  --color-text-3: #aaa59b !important;
  --color-border: #383631 !important;
}

html[data-theme="dark"] body, html[data-theme="dark"] #root,
html[data-theme="dark"] main, html[data-theme="dark"] .arco-layout,
html[data-theme="dark"] .arco-layout-content, html[data-theme="dark"] .arco-card,
html[data-theme="dark"] .arco-modal, html[data-theme="dark"] .arco-drawer,
html[data-theme="dark"] .arco-dropdown, html[data-theme="dark"] .arco-trigger-popup,
html[data-theme="dark"] .arco-select-popup, html[data-theme="dark"] .arco-menu {
  background-color: #0a0a0a !important;
  color: #f4f1ea !important;
  border-color: #383631 !important;
}

html[data-theme="dark"] .ics-auth-card h1,
html[data-theme="dark"] .ics-auth-card h2,
html[data-theme="dark"] .ics-auth-card h3,
html[data-theme="dark"] .ics-auth-card .ics-brand-title,
html[data-theme="dark"] .ics-auth-card .ics-brand-title * {
  color: #f4f1ea !important;
  -webkit-text-fill-color: #f4f1ea !important;
}

@media (max-width: 768px) { .arco-modal { border-radius: 0 !important; } }