/* =========================================================
   KokuuSkin 后台界面重塑 · Apple 扁平风格
   由 kokuu-ui 插件注入（*）。与 kokuu-home 主题协同：
   浅色态 = Apple 扁平（纯净/大留白/细腻阴影/半透明导航）；
   深色态 = 沿用 kokuu-home 的「虚空」深色（在 body.dark-mode 下微调为 Apple Dark）。

   设计原则（Apple Human Interface 精神）：
   - 扁平纯净：去重阴影/描边，靠极淡分隔线 + 大圆角区分层次
   - 大留白：内容区间距宽松，让呼吸感承担层次
   - 毛玻璃仅用于导航（顶栏/侧边栏），内容卡片保持纯净
   - 克制用色：中性灰阶为主，品牌色只用于强调与选中态
   复用 kokuu-home 定义的调色变量（--rain/--lilac/--ink 等）
   ========================================================= */

:root {
  /* 复用 / 兜底 kokuu-home 变量 */
  --k-paper: #F5F3EE;
  --k-ink: #2B1F52;
  --k-rain: #0FA3A3;
  --k-lilac: #8B7FD4;

  /* Apple 扁平体系 */
  --a-bg: #F2F2F7;              /* 苹果系统级浅灰底 */
  --a-surface: #FFFFFF;         /* 卡片面 */
  --a-surface-2: #FBFBFD;       /* 次级面（表头等） */
  --a-text: #1C1C1E;            /* 主文字 */
  --a-text-2: #6E6E73;          /* 次文字 */
  --a-text-3: #A1A1A6;          /* 三级/占位 */
  --a-sep: rgba(60, 60, 67, 0.13);   /* 极淡分隔线 */
  --a-sep-strong: rgba(60, 60, 67, 0.20);
  --a-radius: 18px;             /* 大圆角 */
  --a-radius-sm: 12px;
  --a-radius-lg: 24px;
  --a-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);  /* 细腻柔和 */
  --a-shadow-hover: 0 2px 6px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.10);
  --a-blur: saturate(180%) blur(20px);
  --a-ease: cubic-bezier(.4, 0, .2, 1);       /* Apple 标准缓动 */
  --a-ease-out: cubic-bezier(.16, 1, .3, 1);  /* 更丝滑的出场 */
  --a-nav-h: 56px;
  --a-side-w: 248px;
}

/* =========================================================
   一、外壳骨架重塑：AdminLTE 尺寸/圆角/层次
   ========================================================= */
body.kokuu-apple .wrapper {
  background: var(--a-bg);
  min-height: 100vh;
}

/* ---- 顶栏：半透明毛玻璃导航（Apple 标志性），扁平无重阴影 ---- */
body.kokuu-apple .main-header,
body.kokuu-apple .main-header.navbar {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: var(--a-blur);
  -webkit-backdrop-filter: var(--a-blur);
  border: 0 !important;
  border-bottom: 1px solid var(--a-sep) !important;
  box-shadow: none !important;
  min-height: var(--a-nav-h);
  padding: 0 clamp(12px, 2vw, 24px);
}
body.kokuu-apple .main-header .nav-link,
body.kokuu-apple .main-header .navbar-nav > li > a,
body.kokuu-apple .main-header .navbar-nav > .nav-item > .nav-link {
  color: var(--a-text) !important;
  font-weight: 500;
  border-radius: 10px;
  transition: background .2s var(--a-ease), color .2s var(--a-ease);
}
body.kokuu-apple .main-header .nav-link:hover,
body.kokuu-apple .main-header .navbar-nav > li > a:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--a-text) !important;
}
body.kokuu-apple .main-header .nav-item.active > .nav-link,
body.kokuu-apple .main-header .navbar-nav > .active > a {
  color: var(--k-rain) !important;
  font-weight: 600;
}
body.kokuu-apple .main-header .navbar-brand {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.2px;
  color: var(--a-text) !important;
}
body.kokuu-apple .main-header .dropdown-menu {
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: var(--a-blur);
  -webkit-backdrop-filter: var(--a-blur);
  border: 1px solid var(--a-sep);
  border-radius: 14px;
  box-shadow: var(--a-shadow);
  padding: 6px;
}
body.kokuu-apple .main-header .dropdown-item {
  border-radius: 9px;
  padding: 8px 12px;
  color: var(--a-text);
}
body.kokuu-apple .main-header .dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ---- 侧边栏：纯净白面 + 极淡右边框（扁平，不用深色渐变） ---- */
body.kokuu-apple .main-sidebar,
body.kokuu-apple .sidebar {
  background: var(--a-surface) !important;
  border-right: 1px solid var(--a-sep) !important;
  box-shadow: none !important;
  width: var(--a-side-w);
  transition: width .3s var(--a-ease), transform .3s var(--a-ease);
}
body.kokuu-apple .brand-link {
  border-bottom: 1px solid var(--a-sep) !important;
  color: var(--a-text) !important;
  font-weight: 700;
  padding: 0 calc(1rem + 2px);
  height: var(--a-nav-h);
  display: flex;
  align-items: center;
  font-size: 17px;
  letter-spacing: -0.2px;
}
body.kokuu-apple .user-panel {
  border-bottom: 1px solid var(--a-sep) !important;
  padding: 14px 16px;
}
body.kokuu-apple .user-panel .info a { color: var(--a-text) !important; font-weight: 600; }
body.kokuu-apple .user-panel .info small { color: var(--a-text-2); }

/* 侧栏导航：扁平、圆角、选中为淡品牌色底 */
body.kokuu-apple .nav-sidebar .nav-link {
  color: var(--a-text-2) !important;
  border-radius: 10px;
  margin: 2px 10px;
  padding: 9px 12px;
  font-weight: 500;
  transition: background .18s var(--a-ease), color .18s var(--a-ease);
}
body.kokuu-apple .nav-sidebar .nav-link:hover {
  background: rgba(0, 0, 0, 0.045) !important;
  color: var(--a-text) !important;
}
body.kokuu-apple .nav-sidebar .nav-link.active,
body.kokuu-apple .nav-sidebar .nav-item.menu-open > .nav-link,
body.kokuu-apple .nav-sidebar .nav-item > .nav-link.active {
  background: rgba(15, 163, 163, 0.12) !important;
  color: var(--k-rain) !important;
  font-weight: 600;
}
body.kokuu-apple .nav-header {
  color: var(--a-text-3) !important;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 18px 16px 6px;
}
body.kokuu-apple .nav-sidebar .nav-icon { color: inherit !important; }

/* 折叠态（AdminLTE sidebar-collapse）紧凑化 */
body.kokuu-apple.sidebar-collapse .main-sidebar,
body.kokuu-apple.sidebar-mini.sidebar-collapse .main-sidebar { width: 64px; }
body.kokuu-apple.sidebar-collapse .nav-sidebar .nav-link p,
body.kokuu-apple.sidebar-collapse .nav-sidebar .nav-header { opacity: 0; pointer-events: none; }

/* ---- 内容区：大留白纯净底 ---- */
body.kokuu-apple .content-wrapper {
  background: var(--a-bg);
  padding: 0 clamp(16px, 3vw, 40px) 60px;
}
body.kokuu-apple .content-header {
  padding: 28px 0 6px;
}
body.kokuu-apple .content-header h1,
body.kokuu-apple section.content h1 {
  color: var(--a-text) !important;
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 32px);
  letter-spacing: -0.5px;
}
body.kokuu-apple .content .container-fluid { padding: 0; max-width: 1200px; }

/* ---- 浅色态背景兜底（与下方深色段对称）----
   同样原因：layout-top-nav 无侧边栏，body 背景会裸露。 */
body.kokuu-apple:not(.dark-mode),
body.kokuu-apple:not(.dark-mode) .wrapper,
body.kokuu-apple:not(.dark-mode) .content-wrapper,
body.kokuu-apple:not(.dark-mode) .content {
  background-color: var(--a-bg) !important;
  background-image: none !important;
}

/* ---- 无侧栏布局（layout-top-nav，如皮肤库）专属修正 ----
   皮肤库 body 是 .layout-top-nav：没有 .main-sidebar，.content 直接全宽；
   且 React 挂在 .content-wrapper **内部**（route.tsx: el: '.content-wrapper'），
   组件自己还会再套一层 .container / .container-fluid。
   因此这里不能用「.content .container-fluid」这种后代选择器（选不中），
   直接对 .content-wrapper 内的容器层级做处理：
     - 恢复 Bootstrap 默认内边距（原先被全局 padding:0 清零，控件会粘连）
     - 居中并限宽，避免贴边或在大屏上散开
     - 补回网格行间距，emotion 组件自身不带外边距 */
body.kokuu-apple.layout-top-nav .content-wrapper {
  padding: 0 clamp(16px, 4vw, 56px) 64px;
}
body.kokuu-apple.layout-top-nav .content-wrapper > .container,
body.kokuu-apple.layout-top-nav .content-wrapper > .container-fluid,
body.kokuu-apple.layout-top-nav .content .container,
body.kokuu-apple.layout-top-nav .content .container-fluid {
  padding-left: 12px;
  padding-right: 12px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
/* 筛选区与网格之间的呼吸空间 */
body.kokuu-apple.layout-top-nav .content-wrapper > * + * { margin-top: 18px; }
body.kokuu-apple.layout-top-nav .row { row-gap: 20px; }
body.kokuu-apple.layout-top-nav [class*="col-"] { padding-left: 8px; padding-right: 8px; }

body.kokuu-apple .main-footer {
  background: transparent;
  border-top: 1px solid var(--a-sep);
  color: var(--a-text-3);
  padding: 22px 0 30px;
  margin: 0 clamp(16px, 3vw, 40px);
}

/* =========================================================
   二、卡片 / 列表：纯净面 + 大圆角 + 细腻阴影（扁平核心）
   ========================================================= */
body.kokuu-apple .card {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-sep) !important;
  border-radius: var(--a-radius) !important;
  box-shadow: var(--a-shadow) !important;
  overflow: hidden;
  margin-bottom: 20px;
  transition: box-shadow .28s var(--a-ease), transform .28s var(--a-ease), border-color .28s var(--a-ease);
}
body.kokuu-apple .card .card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--a-sep) !important;
  padding: 16px 20px;
}
body.kokuu-apple .card .card-body { background: transparent !important; padding: 20px; }
body.kokuu-apple .card .card-footer {
  background: transparent !important;
  border-top: 1px solid var(--a-sep) !important;
  padding: 14px 20px;
}
body.kokuu-apple .card-title {
  color: var(--a-text) !important;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.2px;
}
body.kokuu-apple .card.card-primary > .card-header,
body.kokuu-apple .card.card-info > .card-header,
body.kokuu-apple .card.card-warning > .card-header,
body.kokuu-apple .card.card-success > .card-header {
  background: var(--a-surface-2) !important;
  border-bottom: 1px solid var(--a-sep) !important;
}
body.kokuu-apple .card.card-primary > .card-header .card-title,
body.kokuu-apple .card.card-warning > .card-header .card-title { color: var(--a-text) !important; }

/* 卡片 hover：轻微上浮 + 阴影加深（Apple 交互质感） */
body.kokuu-apple .card:hover {
  box-shadow: var(--a-shadow-hover) !important;
}

/* 网格中的卡片（皮肤库/衣柜/后台卡片） */
body.kokuu-apple .d-flex.flex-wrap > .card,
body.kokuu-apple .d-flex.flex-wrap > a > .card {
  transition: transform .3s var(--a-ease-out), box-shadow .3s var(--a-ease-out);
}
body.kokuu-apple .d-flex.flex-wrap > .card:hover,
body.kokuu-apple .d-flex.flex-wrap > a > .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--a-shadow-hover) !important;
}

/* 皮肤预览图：白底、完整显示 */
body.kokuu-apple .card .card-body:has(.card-img-top) {
  background: var(--a-surface-2) !important;
}
body.kokuu-apple .card .card-img-top {
  object-fit: contain !important;
  padding: 12px;
}

/* =========================================================
   三、表单 / 按钮 / 徽章：Apple 控件
   ========================================================= */
body.kokuu-apple .form-control,
body.kokuu-apple .input-group .form-control,
body.kokuu-apple select.form-control,
body.kokuu-apple textarea.form-control {
  background: var(--a-surface) !important;
  color: var(--a-text) !important;
  border: 1px solid var(--a-sep-strong) !important;
  border-radius: var(--a-radius-sm);
  padding: 10px 14px;
  box-shadow: none !important;
  transition: border-color .2s var(--a-ease), box-shadow .2s var(--a-ease);
}
body.kokuu-apple .form-control:focus {
  border-color: var(--k-rain) !important;
  box-shadow: 0 0 0 4px rgba(15, 163, 163, 0.14) !important;
}
body.kokuu-apple .form-control::placeholder { color: var(--a-text-3); }
body.kokuu-apple label { color: var(--a-text-2); font-weight: 600; }
body.kokuu-apple .input-group-text,
body.kokuu-apple .input-group-prepend .btn,
body.kokuu-apple .input-group-append .btn {
  background: var(--a-surface-2) !important;
  color: var(--a-text-2) !important;
  border-color: var(--a-sep-strong) !important;
  border-radius: var(--a-radius-sm);
}

/* 按钮：实心品牌 / 柔和描边，统一 12px 圆角 */
body.kokuu-apple .btn {
  border-radius: var(--a-radius-sm) !important;
  font-weight: 600;
  transition: transform .16s var(--a-ease), background .2s var(--a-ease), box-shadow .2s var(--a-ease);
}
body.kokuu-apple .btn:active { transform: scale(.97); }
body.kokuu-apple .btn-primary,
body.kokuu-apple .btn-success,
body.kokuu-apple .btn-info {
  background: var(--k-rain) !important;
  border-color: transparent !important;
  color: #fff !important;
}
body.kokuu-apple .btn-primary:hover,
body.kokuu-apple .btn-success:hover,
body.kokuu-apple .btn-info:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 14px rgba(15, 163, 163, .3);
}
body.kokuu-apple .btn-secondary,
body.kokuu-apple .btn-default,
body.kokuu-apple .btn.bg-olive,
body.kokuu-apple .btn-light {
  background: var(--a-surface-2) !important;
  color: var(--a-text) !important;
  border: 1px solid var(--a-sep) !important;
}
body.kokuu-apple .btn-secondary:hover,
body.kokuu-apple .btn-default:hover,
body.kokuu-apple .btn.bg-olive:hover,
body.kokuu-apple .btn-light:hover { background: #EFEFF4 !important; }
body.kokuu-apple .btn.bg-olive.active,
body.kokuu-apple .btn-secondary.active {
  background: var(--k-rain) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body.kokuu-apple .btn-outline-primary,
body.kokuu-apple .btn-outline-info,
body.kokuu-apple .btn-outline-success {
  color: var(--k-rain) !important;
  border-color: var(--k-rain) !important;
  background: transparent !important;
}
body.kokuu-apple .btn-outline-primary:hover,
body.kokuu-apple .btn-outline-info:hover,
body.kokuu-apple .btn-outline-success:hover {
  background: var(--k-rain) !important;
  color: #fff !important;
}
body.kokuu-apple .btn-warning {
  background: var(--k-lilac) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body.kokuu-apple .btn-danger { border-radius: var(--a-radius-sm) !important; }

/* 徽章：柔和淡色底 + 同色文字（Apple 标签） */
body.kokuu-apple .badge {
  border-radius: 8px !important;
  padding: 4px 9px;
  font-weight: 600;
  font-size: 12px;
}
body.kokuu-apple .badge.bg-teal,
body.kokuu-apple .badge.bg-primary,
body.kokuu-apple .badge.bg-info,
body.kokuu-apple .badge.bg-olive {
  background: rgba(15, 163, 163, 0.14) !important;
  color: #0B7C7C !important;
}
body.kokuu-apple .badge.bg-indigo,
body.kokuu-apple .badge.bg-warning {
  background: rgba(139, 127, 212, 0.16) !important;
  color: #5B4BB0 !important;
}

/* =========================================================
   四、表格 / 分页 / 弹窗 / 提示
   ========================================================= */
body.kokuu-apple .table-responsive { border-radius: var(--a-radius-sm); }
body.kokuu-apple .table thead th {
  background: var(--a-surface-2) !important;
  color: var(--a-text-2) !important;
  font-weight: 600;
  font-size: 13px;
  border-bottom: 1px solid var(--a-sep) !important;
  padding: 12px 14px;
  white-space: nowrap;
}
body.kokuu-apple .table td {
  color: var(--a-text) !important;
  border-color: var(--a-sep) !important;
  padding: 14px;
  vertical-align: middle;
}
body.kokuu-apple .table-striped tbody tr:nth-of-type(odd) { background: transparent !important; }
body.kokuu-apple .table-hover tbody tr { transition: background .16s var(--a-ease); }
body.kokuu-apple .table-hover tbody tr:hover { background: rgba(0, 0, 0, 0.03) !important; }

body.kokuu-apple .pagination { gap: 4px; }
body.kokuu-apple .pagination .page-link {
  background: var(--a-surface) !important;
  color: var(--a-text) !important;
  border: 1px solid var(--a-sep) !important;
  border-radius: 10px !important;
  padding: 7px 13px;
  font-weight: 500;
  transition: background .18s var(--a-ease), color .18s var(--a-ease);
}
body.kokuu-apple .pagination .page-link:hover { background: var(--a-surface-2) !important; }
body.kokuu-apple .pagination .page-item.active .page-link {
  background: var(--k-rain) !important;
  color: #fff !important;
  border-color: transparent !important;
}
body.kokuu-apple .pagination .page-item.disabled .page-link { opacity: .4; }

body.kokuu-apple .modal-content {
  background: var(--a-surface) !important;
  border: 1px solid var(--a-sep);
  border-radius: var(--a-radius-lg) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .18) !important;
  overflow: hidden;
}
body.kokuu-apple .modal-header {
  border-bottom: 1px solid var(--a-sep) !important;
  padding: 18px 24px;
}
body.kokuu-apple .modal-title { color: var(--a-text) !important; font-weight: 700; font-size: 19px; }
body.kokuu-apple .modal-body { padding: 22px 24px; color: var(--a-text-2); }
body.kokuu-apple .modal-footer { border-top: 1px solid var(--a-sep) !important; padding: 14px 24px; }

body.kokuu-apple .toast {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: var(--a-blur);
  -webkit-backdrop-filter: var(--a-blur);
  border: 1px solid var(--a-sep);
  border-radius: 14px !important;
  color: var(--a-text);
  box-shadow: var(--a-shadow-hover) !important;
}
body.kokuu-apple .toast-header {
  background: transparent !important;
  color: var(--a-text) !important;
  border-bottom: 1px solid var(--a-sep) !important;
  font-weight: 600;
}
body.kokuu-apple .toast-body { background: transparent !important; color: var(--a-text-2) !important; }

body.kokuu-apple .overlay { background: rgba(242, 242, 247, 0.6) !important; border-radius: var(--a-radius) !important; }
body.kokuu-apple .text-center.m-5,
body.kokuu-apple .card-body.text-center { color: var(--a-text-3) !important; }

/* 链接/文字 */
body.kokuu-apple a { color: var(--k-rain); text-decoration: none; }
body.kokuu-apple a:hover { color: var(--k-ink); }
body.kokuu-apple p, body.kokuu-apple .content-wrapper p { color: var(--a-text-2); }
body.kokuu-apple h1, body.kokuu-apple h2, body.kokuu-apple h3,
body.kokuu-apple .card-title { color: var(--a-text) !important; }

/* =========================================================
   五、鉴权页（登录/注册）Apple 化
   ========================================================= */
body.kokuu-apple .login-box,
body.kokuu-apple .card.login-card {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: var(--a-blur);
  -webkit-backdrop-filter: var(--a-blur);
  border: 1px solid var(--a-sep);
  border-radius: var(--a-radius-lg) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .14) !important;
}
body.kokuu-apple .login-logo a { color: var(--a-text) !important; font-weight: 700; }

/* =========================================================
   六、滚动条（Apple 风格细滚动条）
   ========================================================= */
body.kokuu-apple ::-webkit-scrollbar { width: 10px; height: 10px; }
body.kokuu-apple ::-webkit-scrollbar-track { background: transparent; }
body.kokuu-apple ::-webkit-scrollbar-thumb {
  background: rgba(60, 60, 67, 0.28);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
body.kokuu-apple ::-webkit-scrollbar-thumb:hover { background-color: rgba(60, 60, 67, 0.45); }

/* =========================================================
   七、深色态（body.dark-mode）：Apple Dark 微调
   基础「虚空」主题由 kokuu-home/void.css 提供，这里做 Apple Dark 的
   层次/圆角/间距对齐，保证深色下也是 Apple 质感而非纯黑。
   ========================================================= */
body.kokuu-apple.dark-mode {
  --a-bg: #000000;
  --a-surface: #1C1C1E;
  --a-surface-2: #2C2C2E;
  --a-text: #F5F5F7;
  --a-text-2: #AEAEB2;
  --a-text-3: #7C7C80;
  --a-sep: rgba(84, 84, 88, 0.5);
  --a-sep-strong: rgba(84, 84, 88, 0.7);
  --a-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --a-shadow-hover: 0 2px 8px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.5);
}
body.kokuu-apple.dark-mode .main-header {
  background: rgba(28, 28, 30, 0.72) !important;
}

/* ---- 深色态背景兜底 ----
   侧边栏布局下，body 背景被 .main-sidebar 与 .content-wrapper 遮住，
   所以之前只需给两者上色。但 layout-top-nav 布局（皮肤库）没有侧边栏，
   body 背景会整片裸露 —— 截图实测为 AdminLTE 默认的亮蓝紫 rgb(69,77,85)，
   与深色卡片严重割裂，看起来像「没继承深色主题」。
   这里显式覆盖 body / wrapper / content 三层，两种布局都一致。 */
body.kokuu-apple.dark-mode,
body.kokuu-apple.dark-mode .wrapper,
body.kokuu-apple.dark-mode .content-wrapper,
body.kokuu-apple.dark-mode .content,
body.kokuu-apple.dark-mode .main-footer {
  background-color: var(--a-bg) !important;
  background-image: none !important;
}
body.kokuu-apple.dark-mode .main-footer {
  border-top-color: var(--a-sep) !important;
  color: var(--a-text-3) !important;
}

body.kokuu-apple.dark-mode .main-sidebar { background: var(--a-surface) !important; }
body.kokuu-apple.dark-mode .main-header .dropdown-menu,
body.kokuu-apple.dark-mode .toast { background: rgba(28, 28, 30, 0.86); }
body.kokuu-apple.dark-mode .nav-sidebar .nav-link:hover,
body.kokuu-apple.dark-mode .main-header .nav-link:hover,
body.kokuu-apple .btn.bg-olive:hover { background: rgba(255, 255, 255, 0.08) !important; }
body.kokuu-apple.dark-mode .nav-sidebar .nav-link.active {
  background: rgba(79, 227, 208, 0.16) !important;
  color: #4FE3D0 !important;
}
body.kokuu-apple.dark-mode .table-hover tbody tr:hover { background: rgba(255, 255, 255, 0.05) !important; }
body.kokuu-apple.dark-mode .card .card-body:has(.card-img-top) { background: var(--a-surface-2) !important; }
body.kokuu-apple.dark-mode .btn.bg-olive,
body.kokuu-apple.dark-mode .btn-secondary,
body.kokuu-apple.dark-mode .btn-default,
body.kokuu-apple.dark-mode .btn-light { color: var(--a-text) !important; }
body.kokuu-apple.dark-mode .badge.bg-teal { background: rgba(79, 227, 208, 0.16) !important; color: #4FE3D0 !important; }
body.kokuu-apple.dark-mode .badge.bg-indigo { background: rgba(167, 139, 250, 0.18) !important; color: #C9B8FF !important; }