@font-face {
  font-family: "Sarasa Gothic SC Web";
  src: url("https://blog.usaginest.com/wp-content/uploads/fonts/sarasa/SarasaGothicSC-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarasa Gothic SC Web";
  src: url("https://blog.usaginest.com/wp-content/uploads/fonts/sarasa/SarasaGothicSC-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarasa Gothic SC Web";
  src: url("https://blog.usaginest.com/wp-content/uploads/fonts/sarasa/SarasaGothicSC-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarasa Gothic SC Web";
  src: url("https://blog.usaginest.com/wp-content/uploads/fonts/sarasa/SarasaGothicSC-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarasa Mono SC Web";
  src: url("https://blog.usaginest.com/wp-content/uploads/fonts/sarasa/SarasaMonoSC-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sarasa Mono SC Web";
  src: url("https://blog.usaginest.com/wp-content/uploads/fonts/sarasa/SarasaMonoSC-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-body: "Sarasa Gothic SC Web", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Sarasa Mono SC Web", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --usagi-bg: #FFF2D5;
  --usagi-surface: #FFF9F1;
  --usagi-text: #3A3131;
  --usagi-muted: #8A7A6A;
  --usagi-border: #E3D8C8;
  --usagi-accent: #FFB7CE;
  --usagi-accent-hover: #F28BB6;
  color-scheme: light;
}

html {
  scrollbar-color: var(--usagi-accent) var(--usagi-bg);
  scrollbar-width: thin;
}

body {
  overflow-y: auto !important;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--usagi-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--usagi-accent);
  border: 3px solid var(--usagi-bg);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--usagi-accent-hover);
}

html,
body,
#app,
input,
button,
textarea,
select {
  font-family: var(--font-body);
}

code,
pre,
kbd,
samp {
  font-family: var(--font-mono);
}

body,
#app,
.app-background {
  background: var(--usagi-bg) !important;
  background-image: none !important;
  color: var(--usagi-text) !important;
}

body,
#app,
#app * {
  color: inherit;
}

a,
button.link,
[role="button"].link {
  color: var(--usagi-accent);
}

a:hover,
button.link:hover,
[role="button"].link:hover {
  color: var(--usagi-accent-hover);
}

input,
textarea,
select {
  background: var(--usagi-surface) !important;
  border: 1px solid var(--usagi-border) !important;
  color: var(--usagi-text) !important;
  caret-color: var(--usagi-text) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--usagi-muted) !important;
}

.usagi-ink,
.text-color,
.text-main,
.text-gray-900,
.text-slate-900,
.text-zinc-900 {
  color: var(--usagi-text) !important;
}

.text-gray-500,
.text-gray-400,
.text-slate-500,
.text-zinc-500,
.text-muted {
  color: var(--usagi-muted) !important;
}

.bg-white,
.bg-surface,
.card,
.panel,
.module,
.content-card {
  border-color: var(--usagi-border) !important;
}

.item-card-small-title,
.item-card-title,
.app-icon-text-shadow,
.item-card-small .item-card-small-title,
.item-card .item-card-title {
  color: var(--usagi-text) !important;
  font-weight: 700 !important;
  text-shadow: none !important;
}

.item-card-small-desc,
.item-card-desc,
.item-card-info,
.item-card-small-info {
  color: var(--usagi-muted) !important;
}

.search-box,
.search-box input,
.search-input,
.search-container input,
[class*="search"] input {
  background: var(--usagi-surface) !important;
  border: none !important;
  color: var(--usagi-text) !important;
  box-shadow: none !important;
}

.search-box,
.search-container,
[class*="search-box"],
[class*="search-container"] {
  border-radius: 9999px !important;
  overflow: hidden !important;
}

.search-box input,
.search-input,
.search-container input,
[class*="search"] input {
  border-radius: 9999px !important;
}

.usagi-brand-title {
  font-size: 0.8em !important;
  line-height: 1.25 !important;
}

.group-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.usagi-group-title-icon {
  color: var(--usagi-accent) !important;
  font-size: 0.92em;
}