:root {
  --at-paper: #f7f0df;
  --at-paper-bright: #fffaf0;
  --at-paper-cool: #e9efeb;
  --at-ink: #263638;
  --at-muted: #657173;
  --at-teal: #0d5556;
  --at-teal-deep: #083f41;
  --at-coral: #e86647;
  --at-blush: #e7b7ad;
  --at-mustard: #d79b2b;
  --at-blue: #477f9e;
  --at-sage: #91a49a;
  --at-line: rgba(81, 77, 65, 0.28);
  --at-shadow: 0 10px 24px rgba(56, 51, 42, 0.18);
}

html,
body {
  background: #e9dfca;
  color: var(--at-ink);
  font-family: Inter, "SF Pro Text", "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

body > #app > .min-h-screen.bg-gray-50,
body > #app > .min-h-screen.dark\:bg-dark-950 {
  background: rgba(247, 240, 223, 0.54) !important;
}

.bg-mesh-gradient,
.ba-theme-backdrop {
  background: url("/assets/atelier-2012-collage-background.webp") center / cover fixed no-repeat !important;
}

.bg-mesh-gradient {
  opacity: 0.72;
}

.ba-theme-shell {
  background: var(--at-paper) !important;
}

.ba-theme-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(247, 240, 223, 0.36);
}

.btn,
.btn-sm,
.btn-md,
.btn-lg,
.btn-icon,
.input,
.card,
.card-glass,
.glass-card,
.dropdown,
.modal-content,
.dialog-container,
.toast,
.table-container,
.select-trigger,
.ba-theme-shell :is(.rounded-3xl, .rounded-2xl, .rounded-xl) {
  border-radius: 6px !important;
}

.btn {
  min-height: 38px;
  border: 1px solid rgba(70, 73, 66, 0.34);
  background: #fffaf0;
  color: #344345;
  font-weight: 700;
  box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgba(60, 53, 43, 0.13);
  text-shadow: none;
}

.btn:hover {
  border-color: var(--at-coral);
  background: #fff2e7;
  color: #923d2b;
}

.btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(75, 64, 50, 0.16);
}

.btn-primary {
  border-color: #a9670d;
  background: var(--at-mustard);
  color: #302208;
  box-shadow: inset 0 1px 0 rgba(255, 244, 197, 0.7), 0 4px 10px rgba(135, 87, 18, 0.22);
}

.btn-primary:hover {
  border-color: #8e4f08;
  background: #e4ab3f;
  color: #241704;
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: #566466;
  box-shadow: none;
}

.input,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  border: 1px solid rgba(68, 75, 69, 0.4) !important;
  background: rgba(255, 252, 244, 0.96) !important;
  color: #263638 !important;
  box-shadow: inset 0 1px 3px rgba(56, 51, 42, 0.1) !important;
}

:is(.input, input, textarea)::placeholder {
  color: #778183 !important;
}

:is(.input, input, select, textarea):focus {
  border-color: var(--at-coral) !important;
  box-shadow: 0 0 0 3px rgba(232, 102, 71, 0.16), inset 0 1px 2px rgba(56, 51, 42, 0.08) !important;
}

.select-trigger {
  min-height: var(--xp-control-height, 38px);
  border-color: rgba(68, 75, 69, 0.34) !important;
  background: rgba(255, 252, 244, 0.96) !important;
  color: #304143 !important;
  box-shadow: 0 3px 9px rgba(56, 51, 42, 0.11) !important;
}

.select-trigger:hover {
  border-color: rgba(215, 155, 43, 0.62) !important;
  background: #fff6e7 !important;
}

.select-trigger:focus-visible,
.select-trigger-open {
  border-color: var(--at-mustard) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(215, 155, 43, 0.18), 0 3px 9px rgba(56, 51, 42, 0.11) !important;
}

:is(.card, .card-glass, .glass-card, .table-container, section[class*="bg-white"], article[class*="bg-white"]) {
  border: 1px solid var(--at-line) !important;
  background: rgba(255, 250, 240, 0.96) !important;
  color: var(--at-ink) !important;
  box-shadow: var(--at-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(12px) saturate(0.92);
}

:is(.card-header, .card-footer) {
  border-color: rgba(81, 77, 65, 0.2) !important;
}

.card:has(.date-picker-dropdown),
.card-glass:has(.date-picker-dropdown),
.glass-card:has(.date-picker-dropdown),
section[class*="bg-white"]:has(.date-picker-dropdown),
article[class*="bg-white"]:has(.date-picker-dropdown) {
  position: relative;
  z-index: 1000 !important;
  overflow: visible !important;
  backdrop-filter: none !important;
}

.date-picker-dropdown {
  z-index: 2147483000 !important;
  border-color: rgba(13, 85, 86, 0.4) !important;
  background: rgba(255, 250, 240, 0.99) !important;
  color: var(--at-ink) !important;
  box-shadow: 0 18px 38px rgba(44, 48, 43, 0.24) !important;
}

.sidebar {
  top: 10px;
  bottom: 10px;
  height: auto;
  overflow: hidden;
  border: 1px solid rgba(5, 53, 54, 0.74) !important;
  border-radius: 6px;
  background: rgba(8, 75, 76, 0.97) !important;
  box-shadow: 0 16px 36px rgba(39, 48, 44, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sidebar::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18px 22px, rgba(231, 183, 173, 0.24) 0 5px, transparent 6px),
    radial-gradient(circle at calc(100% - 18px) calc(100% - 26px), rgba(215, 155, 43, 0.24) 0 8px, transparent 9px);
}

.sidebar > * {
  position: relative;
  z-index: 2;
}

.sidebar-header {
  height: 84px;
  margin: 6px 10px 4px;
  padding: 0 10px !important;
  gap: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 240, 207, 0.22) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

:is(.sidebar-brand-title, .sidebar-header .text-gray-900, .sidebar-header .dark\:text-white) {
  color: #fff1d4 !important;
  font-family: Georgia, "Songti SC", STSong, serif;
  font-size: 15px !important;
  line-height: 1.08;
  letter-spacing: 0 !important;
  text-shadow: none;
}

.sidebar-logo {
  position: relative;
  width: 40px !important;
  height: 40px !important;
  flex-basis: 40px !important;
  min-width: 40px !important;
  border: 1px solid rgba(255, 233, 191, 0.76) !important;
  border-radius: 5px !important;
  background: #084f50 url("/assets/ciyuanmax-firework-mark.png") center / cover no-repeat !important;
  color: #fff6df !important;
  box-shadow: inset 0 0 0 2px rgba(130, 46, 29, 0.18), 0 3px 8px rgba(1, 38, 39, 0.24) !important;
}

.sidebar-logo img {
  display: none !important;
}

.sidebar-logo::before {
  content: none;
}

.sidebar-logo:hover {
  opacity: 1 !important;
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.sidebar-header .sidebar-brand {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 156px;
}

body #app .sidebar .sidebar-header .sidebar-brand-title {
  display: block;
  max-width: 156px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: normal;
}

.sidebar-header .sidebar-brand > .relative {
  max-width: 100%;
  margin-top: 4px;
}

.sidebar-header .sidebar-brand > .relative > button {
  min-height: 0 !important;
  max-width: 100%;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(210, 226, 215, 0.72) !important;
  box-shadow: none !important;
  font-family: Inter, "SF Pro Text", "PingFang SC", sans-serif;
  font-size: 9px !important;
  line-height: 1.1;
  letter-spacing: 0 !important;
}

.sidebar-header .sidebar-brand > .relative > button:hover {
  background: transparent !important;
  color: #f0c66c !important;
}

.sidebar-header .sidebar-brand > .relative > button > span:first-child {
  display: block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-header .sidebar-brand > .relative > span {
  color: rgba(210, 226, 215, 0.72) !important;
  font-size: 9px !important;
  line-height: 1.1;
}

.sidebar-header.sidebar-header-collapsed {
  margin-right: 8px;
  margin-left: 8px;
  padding: 0 8px !important;
  justify-content: center;
}

.sidebar-section-title {
  color: #b8d1ca !important;
}

.sidebar-link {
  border: 1px solid transparent;
  border-radius: 5px !important;
  color: #eef3e9 !important;
}

.sidebar-link:hover {
  border-color: rgba(255, 244, 219, 0.32);
  background: rgba(255, 250, 240, 0.1) !important;
  color: #ffffff !important;
}

.sidebar-link-active {
  border-color: #b7432e !important;
  background: var(--at-coral) !important;
  color: #fffdf6 !important;
  box-shadow: inset 3px 0 0 #ffd0bc, 0 3px 8px rgba(63, 24, 15, 0.2);
  text-shadow: none;
}

header.glass {
  margin: 10px 10px 0;
  border: 1px solid var(--at-line) !important;
  border-radius: 6px;
  background: rgba(255, 250, 240, 0.96) !important;
  color: var(--at-ink);
  box-shadow: 0 7px 18px rgba(56, 51, 42, 0.16), inset 0 1px 0 #fff;
  backdrop-filter: blur(12px);
}

header.glass :is(h1, p, button, a, .text-gray-900, .text-gray-500, .text-primary-700) {
  color: #526062 !important;
  text-shadow: none;
}

header.glass h1 {
  color: var(--at-teal-deep) !important;
  font-family: Georgia, "Songti SC", STSong, serif;
}

header.glass :is(.header-status-icon-button, .header-status-user-button) {
  border: 1px solid rgba(13, 85, 86, 0.2);
  border-radius: 5px !important;
  background: #f1eadc;
}

:is(.dropdown, .modal-content, .dialog-container, .toast) {
  border: 1px solid rgba(13, 85, 86, 0.38) !important;
  background: rgba(255, 250, 240, 0.99) !important;
  color: var(--at-ink) !important;
  box-shadow: 0 18px 42px rgba(48, 51, 44, 0.24), inset 0 1px 0 #fff !important;
  backdrop-filter: blur(14px);
}

:is(.modal-header, .dialog-header) {
  border-color: rgba(13, 85, 86, 0.26) !important;
  background: var(--at-paper-cool) !important;
  color: var(--at-teal-deep) !important;
}

:is(.modal-content, .dialog-container) .modal-title {
  color: var(--at-teal-deep) !important;
  font-family: Georgia, "Songti SC", STSong, serif;
  font-weight: 700 !important;
  text-shadow: none !important;
}

:is(.modal-content, .dialog-container) .input-label {
  color: #8c4a31 !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

:is(.modal-content, .dialog-container) :is(.input-hint, p.text-gray-500, p.text-gray-400) {
  color: #677476 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

:is(.modal-content, .dialog-container) label:is(.text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400) {
  color: #37494b !important;
}

:is(.modal-content, .dialog-container) div.bg-gray-100:has(> button.flex-1) {
  border: 1px solid rgba(13, 85, 86, 0.24) !important;
  background: #e4ebe6 !important;
}

:is(.modal-content, .dialog-container) div.bg-gray-100:has(> button.flex-1) > button {
  color: #4b5b5d !important;
}

:is(.modal-content, .dialog-container) div.bg-gray-100:has(> button.flex-1) > button.bg-white {
  background: #fffaf0 !important;
  color: #a3432d !important;
  box-shadow: 0 2px 7px rgba(56, 51, 42, 0.12) !important;
}

:is(.modal-content, .dialog-container) button.border-2.text-left:has(span.block) {
  border-color: rgba(13, 85, 86, 0.3) !important;
  background: #f2eee2 !important;
  color: #2e4042 !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

:is(.modal-content, .dialog-container) button.border-2.text-left:has(span.block):hover {
  border-color: var(--at-coral) !important;
  background: #fff0e4 !important;
}

:is(.modal-content, .dialog-container) button.border-2.text-left:has(span.block) span.text-gray-900 {
  color: #2c3d3f !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

:is(.modal-content, .dialog-container) button.border-2.text-left:has(span.block) span.text-gray-500 {
  color: #677476 !important;
}

:is(.modal-content, .dialog-container) button.border-2.text-left:has(span.block)[class*="bg-"][class*="-50"] {
  border-color: var(--at-coral) !important;
  background: #f7ddd2 !important;
  box-shadow: 0 0 0 2px rgba(232, 102, 71, 0.12) !important;
}

.action-menu-content {
  border: 1px solid rgba(13, 85, 86, 0.4) !important;
  background: #fffaf0 !important;
  color: #2e4042 !important;
  box-shadow: 0 14px 30px rgba(48, 51, 44, 0.22) !important;
}

.action-menu-content button {
  color: #2e4042 !important;
  text-shadow: none !important;
}

.action-menu-content button:hover {
  background: #f5ddd4 !important;
  color: #873a29 !important;
}

.page-title,
.page-header h1,
.page-header h2 {
  color: var(--at-teal-deep) !important;
  font-family: Georgia, "Songti SC", STSong, serif;
  text-shadow: none;
}

body #app :is(.text-gray-950, .text-gray-900, .text-gray-800, .text-gray-700) {
  color: #2d3e40 !important;
}

body #app :is(.text-gray-600, .text-gray-500, .text-gray-400) {
  color: #536164 !important;
  text-shadow: none !important;
}

body #app :is(.border-gray-200, .border-gray-300) {
  border-color: rgba(81, 77, 65, 0.24) !important;
}

body #app :is(.bg-gray-50, .bg-gray-100, .bg-white) {
  background-color: rgba(255, 250, 240, 0.94) !important;
}

body #app main .table-wrapper {
  border: 1px solid rgba(13, 85, 86, 0.38) !important;
  background: rgba(255, 250, 240, 0.98) !important;
  color: #2d3e40 !important;
  box-shadow: 0 12px 28px rgba(56, 51, 42, 0.17) !important;
}

body #app main .table-wrapper table {
  background: #fffaf0 !important;
}

body #app main .table-wrapper thead th {
  border-color: rgba(255, 248, 224, 0.16) !important;
  background: var(--at-teal) !important;
  color: #fff4db !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

body #app main .table-wrapper thead th * {
  color: #fff4db !important;
  text-shadow: none !important;
}

body #app main .table-wrapper tbody tr:nth-child(odd),
body #app main .table-wrapper tbody tr:nth-child(odd) td {
  background: #fffaf0 !important;
}

body #app main .table-wrapper tbody tr:nth-child(even),
body #app main .table-wrapper tbody tr:nth-child(even) td {
  background: #e9efeb !important;
}

body #app main .table-wrapper tbody tr:hover,
body #app main .table-wrapper tbody tr:hover td {
  background: #f6ddd4 !important;
}

body #app main .table-wrapper td {
  border-color: rgba(81, 77, 65, 0.18) !important;
  color: #2d3e40 !important;
  text-shadow: none !important;
}

body #app main .table-wrapper :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-dark-400, .text-dark-500) {
  color: #687476 !important;
}

body #app main article.card:has([role="button"] h3) {
  border-color: rgba(13, 85, 86, 0.34) !important;
  background: #fffaf0 !important;
}

body #app main article.card:has([role="button"] h3) .card-header {
  background: #e7ece7 !important;
}

body #app main article.card:has([role="button"] h3) h2 {
  color: var(--at-teal-deep) !important;
  font-family: Georgia, "Songti SC", STSong, serif;
  text-shadow: none !important;
}

body #app main article.card:has([role="button"] h3) .card-header p {
  color: #667375 !important;
  text-shadow: none !important;
}

body #app main article.card:has([role="button"] h3) [role="button"] {
  border-color: rgba(81, 77, 65, 0.24) !important;
  background: #f4eee1 !important;
  color: #2d3e40 !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

body #app main article.card:has([role="button"] h3) [role="button"]:hover {
  border-color: var(--at-coral) !important;
  background: #f8ddd3 !important;
}

body #app main article.card:has([role="button"] h3) [role="button"] h3 {
  color: #2d3e40 !important;
  text-shadow: none !important;
}

body #app main article.card:has([role="button"] h3) [role="button"] .rounded-full {
  border-color: rgba(13, 85, 86, 0.3) !important;
  background: var(--at-teal) !important;
  color: #fff1d3 !important;
}

body #app main article.card:has([role="button"] h3) [role="button"] .ml-auto {
  border-color: rgba(81, 77, 65, 0.22) !important;
  background: #fffaf0 !important;
}

body #app main article.card:has([role="button"] h3) [role="button"] :is(.text-gray-600, .text-gray-500, .text-gray-400) {
  color: #697577 !important;
}

.xp-auth-window {
  overflow: hidden;
  padding: 0 !important;
  border: 1px solid rgba(13, 85, 86, 0.46) !important;
  border-radius: 7px !important;
  background: rgba(255, 250, 240, 0.97) !important;
  box-shadow: 0 22px 52px rgba(56, 51, 42, 0.25) !important;
}

.xp-auth-titlebar {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  border-bottom: 1px solid rgba(255, 244, 219, 0.24);
  background: var(--at-teal);
  color: #fff2d6;
  font-family: Georgia, "Songti SC", STSong, serif;
  font-size: 12px;
  font-weight: 700;
}

.xp-window-controls {
  width: 58px;
  height: 16px;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  background:
    radial-gradient(circle at 8px 8px, #e86647 0 4px, transparent 4.5px),
    radial-gradient(circle at 29px 8px, #d79b2b 0 4px, transparent 4.5px),
    radial-gradient(circle at 50px 8px, #91a49a 0 4px, transparent 4.5px);
}

.xp-auth-body {
  padding: 28px;
  background: rgba(255, 250, 240, 0.86);
}

.xp-auth-body :is(h1, h2, h3, label, .text-gray-900, .text-gray-700, .dark\:text-white) {
  color: #2d3e40 !important;
}

.text-gradient {
  background: none !important;
  color: var(--at-teal-deep) !important;
  -webkit-text-fill-color: currentColor !important;
}

.dark body > #app > .min-h-screen {
  background: rgba(10, 34, 35, 0.72) !important;
}

.dark body > #app > .ba-theme-shell {
  background: #0d2c2d !important;
}

.dark body #app :is(.ba-theme-backdrop, .bg-mesh-gradient) {
  background:
    linear-gradient(rgba(5, 29, 30, 0.72), rgba(5, 29, 30, 0.88)),
    url("/assets/atelier-2012-collage-background.webp") center / cover fixed no-repeat !important;
  filter: saturate(0.72) brightness(0.72);
}

.dark body #app .ba-theme-backdrop::after {
  background: rgba(4, 24, 25, 0.36);
}

.dark :is(.card, .card-glass, .glass-card, section[class*="bg-white"], article[class*="bg-white"]) {
  border-color: rgba(231, 183, 173, 0.32) !important;
  background: rgba(24, 46, 47, 0.96) !important;
  color: #f7ead7 !important;
}

.dark :is(.input, input:not([type="checkbox"]):not([type="radio"]), select, textarea, .dropdown, .modal-content, .dialog-container, .toast, .table-container, .select-trigger) {
  border-color: rgba(231, 183, 173, 0.34) !important;
  background: rgba(17, 39, 40, 0.97) !important;
  color: #f7ead7 !important;
}

.dark body #app :is(.text-gray-950, .text-gray-900, .text-gray-800, .text-gray-700) {
  color: #f7ead7 !important;
}

.dark body #app :is(.text-gray-600, .text-gray-500, .text-gray-400) {
  color: #c5bcb0 !important;
}

.dark header.glass {
  background: rgba(18, 45, 46, 0.97) !important;
  color: #f7ead7;
}

.dark header.glass :is(h1, p, button, a, .text-gray-900, .text-gray-500, .text-primary-700) {
  color: #efe3cf !important;
}

.dark header.glass h1 {
  color: #f5b9aa !important;
}

.dark body #app main .table-wrapper {
  background: rgba(19, 43, 44, 0.98) !important;
  color: #f7ead7 !important;
}

.dark body #app main .table-wrapper tbody tr:nth-child(odd),
.dark body #app main .table-wrapper tbody tr:nth-child(odd) td {
  background: #173b3c !important;
}

.dark body #app main .table-wrapper tbody tr:nth-child(even),
.dark body #app main .table-wrapper tbody tr:nth-child(even) td {
  background: #204849 !important;
}

.dark body #app main .table-wrapper td {
  color: #f5ead8 !important;
}

.dark :is(.modal-content, .dialog-container) .modal-title,
.dark :is(.modal-content, .dialog-container) .input-label {
  color: #f5b9aa !important;
}

.dark .xp-auth-window,
.dark .xp-auth-body {
  background: rgba(19, 48, 49, 0.97) !important;
  color: #f7ead7 !important;
}

.dark .xp-auth-body :is(h1, h2, h3, label, .text-gray-900, .text-gray-700, .dark\:text-white) {
  color: #f7ead7 !important;
}

.dark .action-menu-content {
  background: #173b3c !important;
  color: #f7ead7 !important;
}

.dark .action-menu-content button {
  color: #f7ead7 !important;
}

@media (max-width: 1023px) {
  .sidebar {
    top: 0;
    bottom: 0;
    border-radius: 0 6px 6px 0;
  }

  header.glass {
    margin: 6px 6px 0;
  }
}

@media (max-width: 640px) {
  .ba-theme-backdrop,
  .bg-mesh-gradient {
    background-attachment: scroll !important;
  }

  .ba-theme-shell > header nav:has(a[href*="/docs/"]) {
    gap: 8px !important;
    padding: 12px 10px !important;
  }

  .ba-theme-shell > header nav:has(a[href*="/docs/"]) > a[href="/home"] {
    width: 36px;
    flex: 0 0 36px;
    gap: 0 !important;
    overflow: hidden;
  }

  .ba-theme-shell > header nav:has(a[href*="/docs/"]) > a[href="/home"] > div:first-child {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 5px !important;
  }

  .ba-theme-shell > header nav:has(a[href*="/docs/"]) > a[href="/home"] > div:last-child {
    display: none !important;
  }

  .ba-theme-shell > header nav:has(a[href*="/docs/"]) > div:last-child {
    gap: 4px !important;
    flex: 0 0 auto;
  }

  .ba-theme-shell > header nav:has(a[href*="/docs/"]) > div:last-child > :is(a, button) {
    width: auto !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }

  .ba-theme-shell > header nav:has(a[href*="/docs/"]) > div:last-child > button {
    width: 34px !important;
    padding-inline: 4px !important;
  }

  .xp-auth-body {
    padding: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Operation layer: keep dense admin screens calm, readable and consistent. */
.ba-theme-shell main {
  background: rgba(247, 240, 223, 0.46);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

body #app main > .space-y-6 > .grid.grid-cols-2.lg\:grid-cols-4 > .card,
body #app main .atelier-stat-card {
  min-height: 104px;
  border-color: rgba(13, 85, 86, 0.22) !important;
  background: linear-gradient(180deg, rgba(255, 251, 243, 0.98), rgba(247, 239, 224, 0.96)) !important;
  box-shadow: 0 9px 20px rgba(56, 51, 42, 0.12), inset 0 1px 0 #fff !important;
}

body #app main > .space-y-6 > .grid.grid-cols-2.lg\:grid-cols-4 > .card:hover,
body #app main .atelier-stat-card:hover {
  transform: translateY(-1px);
  border-color: rgba(215, 155, 43, 0.4) !important;
  box-shadow: 0 13px 25px rgba(56, 51, 42, 0.15), inset 0 1px 0 #fff !important;
}

body #app main > .space-y-6 > .grid.grid-cols-2.lg\:grid-cols-4 > .card > .flex > div:first-child,
body #app main .atelier-stat-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid currentColor !important;
  border-radius: 5px !important;
  background: rgba(255, 252, 244, 0.82) !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

body #app main > .space-y-6 > .grid.grid-cols-2.lg\:grid-cols-4 > .card:nth-child(4n + 1) > .flex > div:first-child { color: var(--at-teal) !important; }
body #app main > .space-y-6 > .grid.grid-cols-2.lg\:grid-cols-4 > .card:nth-child(4n + 2) > .flex > div:first-child { color: var(--at-coral) !important; }
body #app main > .space-y-6 > .grid.grid-cols-2.lg\:grid-cols-4 > .card:nth-child(4n + 3) > .flex > div:first-child { color: #778c72 !important; }
body #app main > .space-y-6 > .grid.grid-cols-2.lg\:grid-cols-4 > .card:nth-child(4n + 4) > .flex > div:first-child { color: #b77b15 !important; }

body #app main > .space-y-6 > .grid.grid-cols-2.lg\:grid-cols-4 > .card > .flex > div:nth-child(2) > p:first-child,
body #app main .atelier-stat-label {
  color: #667274 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

body #app main > .space-y-6 > .grid.grid-cols-2.lg\:grid-cols-4 > .card p.text-xl,
body #app main .atelier-stat-value {
  color: #233f40 !important;
  font-variant-numeric: tabular-nums;
}

.date-picker-trigger,
.select-trigger {
  height: 38px !important;
  min-height: 38px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-color: rgba(13, 85, 86, 0.3) !important;
  border-radius: 6px !important;
  background: rgba(255, 252, 244, 0.98) !important;
  color: #304143 !important;
  box-shadow: inset 0 1px 2px rgba(56, 51, 42, 0.07) !important;
}

.date-picker-trigger:hover,
.select-trigger:hover {
  border-color: rgba(215, 155, 43, 0.64) !important;
  background: #fff6e7 !important;
}

.date-picker-trigger:focus-visible,
.select-trigger:focus-visible,
.date-picker-trigger-open,
.select-trigger-open {
  border-color: var(--at-mustard) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(215, 155, 43, 0.2) !important;
}

.date-picker-icon,
.date-picker-chevron,
.select-icon {
  color: var(--at-teal) !important;
}

.select-dropdown-portal,
.date-picker-dropdown {
  z-index: 2147483000 !important;
  border: 1px solid rgba(13, 85, 86, 0.34) !important;
  border-radius: 6px !important;
  background: #fffaf0 !important;
  color: var(--at-ink) !important;
  box-shadow: 0 18px 38px rgba(44, 48, 43, 0.24) !important;
}

.select-dropdown-portal .select-option-selected,
.date-picker-preset-active {
  border-color: rgba(215, 155, 43, 0.34) !important;
  background: #f5e4bc !important;
  color: var(--at-teal-deep) !important;
}

.select-dropdown-portal .select-option:hover,
.select-dropdown-portal .select-option-focused,
.date-picker-preset:hover {
  background: #f3eadd !important;
  color: var(--at-teal-deep) !important;
}

.date-picker-apply {
  min-height: 36px !important;
  border: 1px solid #a9670d !important;
  border-radius: 5px !important;
  background: var(--at-mustard) !important;
  color: #302208 !important;
  font-weight: 700 !important;
  box-shadow: 0 5px 12px rgba(135, 87, 18, 0.2) !important;
}

.date-picker-apply:hover {
  background: #e4ab3f !important;
}

header.glass .header-status-balance,
header.glass .header-status-actions :is(.bg-primary-100, .bg-primary-100\/80) {
  border-color: rgba(13, 85, 86, 0.2) !important;
  background: #efe8db !important;
  color: var(--at-teal-deep) !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

/* Header tools use one atelier palette instead of unrelated SaaS icon colors. */
header.glass .header-status-actions {
  gap: 10px;
}

header.glass .header-status-icon-group {
  gap: 6px;
}

header.glass .header-status-divider {
  width: 1px;
  height: 28px;
  background: rgba(13, 85, 86, 0.18) !important;
}

header.glass .header-status-icon-button,
header.glass .header-status-icon-group > div > button {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(13, 85, 86, 0.28) !important;
  border-radius: 5px !important;
  background: #f6eddd !important;
  color: var(--at-teal-deep) !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(56, 51, 42, 0.09) !important;
}

header.glass .header-status-icon-button {
  color: #9b6715 !important;
}

header.glass .header-status-icon-button:hover,
header.glass .header-status-icon-group > div > button:hover {
  border-color: rgba(232, 102, 71, 0.58) !important;
  background: #fff3e4 !important;
  color: #8b3e2d !important;
}

header.glass .header-status-icon-group svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

header.glass .header-status-icon-group > div > button .bg-red-500 {
  background: var(--at-coral) !important;
}

/* Replace pictographic flags with compact language stamps. */
header.glass .header-status-actions > div.relative > button:has(> span.text-base.leading-none) {
  width: 38px;
  height: 38px;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid rgba(215, 155, 43, 0.42) !important;
  border-radius: 5px !important;
  background: #fff5df !important;
  color: var(--at-teal-deep) !important;
  box-shadow: inset 0 1px 0 #fff !important;
  font-family: Georgia, "Songti SC", STSong, serif;
  font-size: 13px;
  font-weight: 700;
}

header.glass .header-status-actions > div.relative > button:has(> span.text-base.leading-none) > span {
  display: none;
}

header.glass .header-status-actions > div.relative > button[title="中文"]::before {
  content: "中";
}

header.glass .header-status-actions > div.relative > button[title="English"]::before {
  content: "EN";
  font-size: 11px;
}

/* Subscription count reads as a status instrument, not a generic badge. */
header.glass .header-status-actions > div.relative > button:has(> div > div > div.rounded-full) {
  min-width: 52px !important;
  height: 36px !important;
  padding: 0 10px !important;
  border: 1px solid rgba(13, 85, 86, 0.26) !important;
  border-radius: 5px !important;
  background: #edf0e8 !important;
  color: var(--at-teal-deep) !important;
  box-shadow: inset 0 1px 0 #fff !important;
}

header.glass .header-status-actions > div.relative > button:has(> div > div > div.rounded-full) .rounded-full {
  background: var(--at-teal) !important;
  box-shadow: 0 0 0 2px rgba(13, 85, 86, 0.12);
}

header.glass .header-status-actions > div.relative > button:has(> div > div > div.rounded-full) span {
  color: var(--at-teal-deep) !important;
  font-variant-numeric: tabular-nums;
}

header.glass .header-status-balance {
  height: 36px !important;
  min-width: 104px;
  border: 1px solid rgba(13, 85, 86, 0.24) !important;
  border-radius: 5px !important;
  background: #efe8db !important;
  box-shadow: inset 3px 0 0 var(--at-mustard), inset 0 1px 0 #fff !important;
}

header.glass .header-status-balance > span:first-child {
  color: var(--at-teal-deep) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-variant-numeric: tabular-nums;
}

header.glass .header-status-user-button {
  width: 42px !important;
  height: 42px !important;
  padding: 2px;
  border-color: rgba(232, 102, 71, 0.42) !important;
  background: #f6eddd !important;
}

header.glass .header-status-user-button > div {
  width: 36px !important;
  height: 36px !important;
  border: 1px solid rgba(255, 246, 222, 0.74);
  border-radius: 4px !important;
  background: linear-gradient(145deg, var(--at-coral), #b84a35) !important;
  color: #fffaf0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
}

body #app .sidebar .sidebar-brand-title {
  color: #fff1d4 !important;
}

.dark header.glass .header-status-icon-button,
.dark header.glass .header-status-icon-group > div > button,
.dark header.glass .header-status-actions > div.relative > button:has(> span.text-base.leading-none),
.dark header.glass .header-status-actions > div.relative > button:has(> div > div > div.rounded-full),
.dark header.glass .header-status-balance,
.dark header.glass .header-status-user-button {
  border-color: rgba(231, 183, 173, 0.32) !important;
  background: rgba(20, 48, 49, 0.96) !important;
  color: #f7ead7 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.dark header.glass .header-status-balance > span:first-child,
.dark header.glass .header-status-actions > div.relative > button:has(> div > div > div.rounded-full) span {
  color: #f7ead7 !important;
}

@media (max-width: 639px) {
  header.glass .header-status-actions {
    gap: 6px;
  }

  header.glass .header-status-user-button {
    width: 40px !important;
    height: 40px !important;
  }
}

.xp-analytics-panel,
.xp-analytics-strip {
  border-color: rgba(13, 85, 86, 0.22) !important;
  background: rgba(255, 250, 240, 0.97) !important;
  box-shadow: 0 10px 24px rgba(56, 51, 42, 0.13), inset 0 1px 0 #fff !important;
}

.xp-analytics-panel::before,
.xp-analytics-strip::before {
  height: 3px;
  background: linear-gradient(90deg, var(--at-coral), var(--at-mustard), var(--at-blue));
}

.xp-analytics-table {
  border-color: rgba(13, 85, 86, 0.14) !important;
  background: rgba(249, 244, 234, 0.82) !important;
}

.xp-panel-title,
body #app main .card h2,
body #app main .card h3 {
  color: var(--at-teal-deep) !important;
  letter-spacing: 0 !important;
}

.atelier-utility-button {
  height: 38px;
  border-color: rgba(13, 85, 86, 0.28) !important;
  background: #fffaf0 !important;
  color: var(--at-teal-deep) !important;
}

.dark .ba-theme-shell main {
  background: rgba(8, 38, 39, 0.52);
}

.dark .date-picker-trigger,
.dark .select-trigger,
.dark .select-dropdown-portal,
.dark .date-picker-dropdown {
  border-color: rgba(231, 183, 173, 0.34) !important;
  background: rgba(17, 39, 40, 0.98) !important;
  color: #f7ead7 !important;
}

.dark .xp-analytics-panel,
.dark .xp-analytics-strip,
.dark body #app main .atelier-stat-card {
  border-color: rgba(231, 183, 173, 0.28) !important;
  background: rgba(24, 46, 47, 0.97) !important;
}

@media (max-width: 640px) {
  .ba-theme-shell main {
    background: rgba(247, 240, 223, 0.58);
  }
}