:root {
  --nb-ink: #18171d;
  --nb-paper: #f4ead7;
  --nb-surface: #fff8ec;
  --nb-surface-soft: #f9efdF;
  --nb-muted: #6e675e;
  --nb-pink: #f05d93;
  --nb-yellow: #f4c834;
  --nb-cyan: #35bfdc;
  --nb-green: #72d66c;
  --nb-lilac: #aa92ec;
  --nb-red: #ed604a;
  --nb-accent: var(--nb-pink);
  --nb-border: 3px solid var(--nb-ink);
  --nb-border-heavy: 4px solid var(--nb-ink);
  --nb-shadow: 8px 8px 0 var(--nb-ink);
  --nb-shadow-sm: 5px 5px 0 var(--nb-ink);
  --nb-radius: 8px;
  --nb-gutter: clamp(14px, 2vw, 24px);
}

body[data-nb-accent="yellow"] {
  --nb-accent: var(--nb-yellow);
}

body[data-nb-accent="cyan"] {
  --nb-accent: var(--nb-cyan);
}

body[data-nb-accent="green"] {
  --nb-accent: var(--nb-green);
}

html,
body,
#app {
  min-height: 100%;
}

body {
  color: var(--nb-ink) !important;
  background: var(--nb-paper) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body[data-nb-pattern="grid"] {
  background:
    linear-gradient(90deg, rgba(24, 23, 29, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(24, 23, 29, 0.035) 1px, transparent 1px),
    var(--nb-paper) !important;
  background-size: 32px 32px, 32px 32px, auto !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 2147482000;
  height: 10px;
  background: linear-gradient(90deg, var(--nb-yellow) 0 20%, var(--nb-cyan) 20% 40%, var(--nb-pink) 40% 60%, var(--nb-green) 60% 80%, var(--nb-lilac) 80%);
  border-bottom: 3px solid var(--nb-ink);
  pointer-events: none;
}

* {
  letter-spacing: 0 !important;
}

#app {
  filter: saturate(1.08) contrast(1.02);
}

body[data-nb-route="login"] {
  background:
    linear-gradient(135deg, rgba(244, 200, 52, 0.28) 0 24%, transparent 24% 100%),
    linear-gradient(315deg, rgba(53, 191, 220, 0.22) 0 28%, transparent 28% 100%),
    var(--nb-paper) !important;
}

body[data-nb-route="login"] .wh-full.flex.items-center.justify-center {
  min-height: 100vh;
  padding: clamp(18px, 5vw, 56px);
}

body[data-nb-route="login"] .n-card {
  width: min(452px, calc(100vw - 32px)) !important;
  transform: rotate(-0.6deg);
}

body[data-nb-route="login"] .n-card:hover {
  transform: rotate(0deg) translate(-2px, -2px);
}

body[data-nb-route="login"] h1 {
  position: relative;
  display: inline-block;
  width: auto !important;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 14px;
  border: var(--nb-border);
  border-radius: var(--nb-radius);
  background: var(--nb-yellow);
  box-shadow: var(--nb-shadow-sm);
}

:where(.n-layout, .n-layout-scroll-container, .n-layout-content, [class*="layout"], [class*="Layout"]) {
  background: transparent !important;
}

:where(.n-layout) {
  gap: var(--nb-gutter) !important;
}

:where(.n-layout-sider, aside, [class*="sider"], [class*="sidebar"], [class*="Sidebar"]) {
  background: var(--nb-surface) !important;
  border: var(--nb-border-heavy) !important;
  border-radius: 0 var(--nb-radius) var(--nb-radius) 0 !important;
  box-shadow: 7px 7px 0 var(--nb-ink) !important;
}

:where(.n-layout-sider[data-nb-shell="sider"], aside[data-nb-shell="sider"]) {
  margin: var(--nb-gutter) 0 var(--nb-gutter) var(--nb-gutter) !important;
  height: calc(100vh - (var(--nb-gutter) * 2)) !important;
  max-height: calc(100vh - (var(--nb-gutter) * 2)) !important;
  overflow: hidden auto !important;
}

:where(header, .n-layout-header, [class*="header"], [class*="Header"]) {
  background: var(--nb-surface-soft) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-sm) !important;
}

:where(.n-layout-header[data-nb-shell="header"], header[data-nb-shell="header"]) {
  position: sticky !important;
  top: 16px !important;
  z-index: 80 !important;
  margin: var(--nb-gutter) var(--nb-gutter) 0 0 !important;
}

:where(.n-layout-content[data-nb-shell="content"], main[data-nb-shell="content"]) {
  padding: var(--nb-gutter) var(--nb-gutter) calc(var(--nb-gutter) * 2) 0 !important;
}

:where(.n-layout-content[data-nb-shell="content"] > .n-layout-scroll-container) {
  padding: 0 !important;
}

:where(.n-card, .n-modal, .n-modal-body-wrapper, .n-drawer, .n-popover, .n-dropdown-menu, .n-dialog, .ant-card, .ant-modal-content, .card, [class*="card"], [class*="Card"]) {
  border: var(--nb-border-heavy) !important;
  border-radius: var(--nb-radius) !important;
  background: var(--nb-surface) !important;
  box-shadow: var(--nb-shadow) !important;
}

:where(.n-layout-content .n-card[data-nb-card-index="1"], main .n-card[data-nb-card-index="1"]) {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(244, 200, 52, 0.36), rgba(255, 248, 236, 0.92) 42%),
    var(--nb-surface) !important;
}

:where(.n-layout-content .n-card[data-nb-card-index="1"], main .n-card[data-nb-card-index="1"])::after {
  content: "";
  position: absolute;
  inset: auto 26px 22px auto;
  width: min(120px, 22vw);
  aspect-ratio: 1;
  border: var(--nb-border-heavy);
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, var(--nb-cyan) 0 10px, var(--nb-pink) 10px 20px);
  opacity: 0.18;
  pointer-events: none;
}

:where(.n-layout-content .n-card + .n-card, main .n-card + .n-card) {
  margin-top: clamp(18px, 2.2vw, 28px) !important;
}

:where(.n-card-header, .ant-card-head, [class*="card-header"], [class*="CardHeader"]) {
  border-bottom: var(--nb-border) !important;
  color: var(--nb-ink) !important;
  font-weight: 900 !important;
}

:where(button, .n-button, .ant-btn, .arco-btn, .el-button, .van-button, [role="button"], a[class*="button"], a[class*="Button"]) {
  min-height: 36px;
  border: var(--nb-border) !important;
  border-radius: 6px !important;
  background: var(--nb-accent) !important;
  color: var(--nb-ink) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  font-weight: 900 !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}

:where(button, .n-button, .ant-btn, .arco-btn, .el-button, .van-button, [role="button"], a[class*="button"], a[class*="Button"]):hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 8px 8px 0 var(--nb-ink) !important;
}

:where(button, .n-button, .ant-btn, .arco-btn, .el-button, .van-button, [role="button"], a[class*="button"], a[class*="Button"]):active {
  transform: translate(3px, 3px) !important;
  box-shadow: 2px 2px 0 var(--nb-ink) !important;
}

:where(.n-button--primary-type, .ant-btn-primary, .arco-btn-primary, .el-button--primary, .van-button--primary) {
  background: var(--nb-yellow) !important;
}

:where(input, textarea, select, .n-input, .n-base-selection, .n-base-selection-label, .ant-input, .ant-select-selector, .el-input__wrapper, .van-field) {
  border: var(--nb-border) !important;
  border-radius: 6px !important;
  background: #fff3df !important;
  box-shadow: var(--nb-shadow-sm) !important;
  color: var(--nb-ink) !important;
  box-sizing: border-box !important;
}

:where(.n-input) {
  overflow: visible !important;
}

:where(.n-input .n-input-wrapper, .n-input .n-input__input, .n-input .n-input__textarea) {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

:where(.n-input .n-input__border, .n-input .n-input__state-border) {
  border: 0 !important;
  box-shadow: none !important;
}

:where(.n-form-item, .n-form-item-blank, .n-input-group, .mt-5.w-full) {
  overflow: visible !important;
}

:where(.n-form-item .n-input, .mt-5.w-full .n-input) {
  width: calc(100% - 7px) !important;
  max-width: calc(100% - 7px) !important;
}

:where(.n-menu, .n-menu-item, .n-menu-item-content, .n-menu-item-content-header) {
  color: var(--nb-ink) !important;
  font-weight: 800 !important;
}

:where(.n-menu) {
  padding: 8px !important;
  --n-item-color-active: transparent !important;
  --n-item-color-active-hover: transparent !important;
  --n-item-color-hover: transparent !important;
  --n-item-text-color-active: var(--nb-ink) !important;
  --n-item-icon-color-active: var(--nb-ink) !important;
}

:where(.n-menu-item-content, [class*="menu-item"], [class*="MenuItem"]) {
  position: relative !important;
  border-radius: 6px !important;
  margin: 5px 0 !important;
  border: 2px solid transparent !important;
}

:where(.n-menu-item-content--selected, .n-menu-item-content:hover, [class*="active"], [class*="selected"]) {
  background: var(--nb-yellow) !important;
  color: var(--nb-ink) !important;
  border-color: var(--nb-ink) !important;
  box-shadow: 4px 4px 0 var(--nb-ink) !important;
}

:where(.n-menu-item-content--selected)::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 6px;
  width: 10px;
  border: 2px solid var(--nb-ink);
  border-radius: 4px;
  background: var(--nb-pink);
}

:where(.n-menu-item-content--selected .n-menu-item-content__icon, .n-menu-item-content--selected .n-menu-item-content-header) {
  position: relative;
  z-index: 1;
}

:where(.n-list, .n-list-item, .n-thing, .ant-list, .ant-list-item, [class*="list"], [class*="List"]) {
  border-color: var(--nb-ink) !important;
}

:where(.n-list-item, .ant-list-item) {
  border-bottom: 2px solid var(--nb-ink) !important;
}

:where(table, .n-data-table, .ant-table, .arco-table, .el-table) {
  border: var(--nb-border-heavy) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: var(--nb-shadow-sm) !important;
}

:where(th, .n-data-table-th, .ant-table-thead > tr > th, .el-table__header th) {
  background: var(--nb-lilac) !important;
  color: var(--nb-ink) !important;
  border-bottom: var(--nb-border) !important;
  font-weight: 900 !important;
}

:where(.n-tag, .ant-tag, .el-tag, .van-tag, [class*="badge"], [class*="Badge"]) {
  border: 2px solid var(--nb-ink) !important;
  border-radius: 7px !important;
  background: var(--nb-green) !important;
  color: var(--nb-ink) !important;
  box-shadow: 3px 3px 0 var(--nb-ink) !important;
  font-weight: 900 !important;
  min-width: 52px !important;
  min-height: 24px !important;
  padding: 2px 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  --n-color: var(--nb-green) !important;
  --n-color-checked: var(--nb-green) !important;
  --n-text-color: var(--nb-ink) !important;
  --n-border: 0 !important;
}

:where(.n-tag__content, .ant-tag, .el-tag__content, .van-tag) {
  color: var(--nb-ink) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
  min-width: 0 !important;
  opacity: 1 !important;
  display: inline !important;
  position: relative !important;
  z-index: 2 !important;
  white-space: nowrap !important;
  visibility: visible !important;
}

:where(.n-data-table-td, .n-data-table-th, td, th) {
  overflow: visible !important;
}

:where(.n-data-table-td .n-tag, td .n-tag) {
  transform: none !important;
}

:where(.n-data-table-td:has(.n-tag), td:has(.n-tag)) {
  min-width: 116px !important;
}

:where(.n-data-table-td .n-tag__border, .n-data-table-td .n-tag__state-border) {
  display: none !important;
}

:where(h1, h2, h3, h4, .n-h1, .n-h2, .n-h3) {
  color: var(--nb-ink) !important;
  font-weight: 950 !important;
}

:where(p, span, div, label) {
  text-rendering: geometricPrecision;
}

:where(svg, i) {
  color: currentColor;
}

.nb-theme-badge {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border: var(--nb-border);
  border-radius: 8px;
  background: var(--nb-surface-soft);
  color: var(--nb-ink);
  box-shadow: var(--nb-shadow);
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}

.nb-theme-badge strong,
.nb-theme-badge span {
  display: inline-block;
  padding: 5px 7px;
  border: 2px solid var(--nb-ink);
  border-radius: 5px;
  font-weight: 950;
}

.nb-theme-badge strong {
  background: var(--nb-yellow);
}

.nb-theme-badge span {
  background: var(--nb-cyan);
}

@media (max-width: 768px) {
  :root {
    --nb-gutter: 12px;
    --nb-border: 2px solid var(--nb-ink);
    --nb-border-heavy: 3px solid var(--nb-ink);
    --nb-shadow: 5px 5px 0 var(--nb-ink);
    --nb-shadow-sm: 3px 3px 0 var(--nb-ink);
  }

  body::before {
    height: 7px;
  }

  :where(.n-layout) {
    display: block !important;
  }

  :where(.n-layout-sider, aside, [class*="sider"], [class*="sidebar"], [class*="Sidebar"]) {
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: 100vh !important;
  }

  :where(.n-layout-header[data-nb-shell="header"], header[data-nb-shell="header"]) {
    top: 8px !important;
    margin: 10px !important;
  }

  :where(.n-layout-content[data-nb-shell="content"], main[data-nb-shell="content"]) {
    padding: 10px !important;
  }

  :where(.n-card, .n-modal, .n-modal-body-wrapper, .n-drawer, .n-popover, .n-dropdown-menu, .n-dialog, .ant-card, .ant-modal-content, .card, [class*="card"], [class*="Card"]) {
    box-shadow: var(--nb-shadow-sm) !important;
  }

  body[data-nb-route="login"] .n-card {
    transform: none;
  }

  body[data-nb-route="login"] .flex.justify-between {
    flex-direction: column;
    gap: 10px;
  }

  .nb-theme-badge {
    right: 10px;
    bottom: 10px;
    transform: scale(0.86);
    transform-origin: right bottom;
  }
}