/*
 * MetaBox Brand Theme
 * Light: mascot yellow + amber orange + warm cream
 * Dark: blue black + bright orange + technology cyan
 */

/* ================================================================
   MetaBox Light Theme
   黄色机器人品牌主题
   ================================================================ */
:root {
  /* 品牌主色：机器人金黄与橙色 */
  --mc-primary: #f4a51c;
  --mc-primary-light: #ffd66b;
  --mc-primary-hover: #d97800;
  --mc-primary-bg: #fff0b8;

  /* 科技青作为小面积辅助色 */
  --mc-accent: #2f7c82;
  --mc-accent-soft: #dff1ef;

  /* 页面与卡片：奶油黄、暖白 */
  --mc-bg: #fff9e9;
  --mc-bg-elevated: #fffdf7;
  --mc-bg-sunken: #f5e5b7;
  --mc-bg-muted: #fbf1d1;
  --mc-surface-strong: #fff8e5;
  --mc-surface-overlay: rgba(255, 253, 247, 0.84);
  --mc-panel-top: rgba(255, 253, 247, 0.98);
  --mc-panel-bottom: rgba(255, 248, 229, 0.95);
  --mc-panel-raised: rgba(255, 253, 247, 0.92);

  /* 边框：暖金米色 */
  --mc-border: #e7d5a3;
  --mc-border-light: #f1e5c6;
  --mc-border-strong: #d4bd7d;

  /* 文字：深咖啡而非纯黑 */
  --mc-text-primary: #2c241a;
  --mc-text-secondary: #6d5d47;
  --mc-text-tertiary: #9a8769;
  --mc-text-inverse: #ffffff;

  /* 阴影和光晕 */
  --mc-shadow-soft: 0 10px 30px rgba(106, 77, 25, 0.08);
  --mc-shadow-medium: 0 18px 48px rgba(106, 77, 25, 0.12);
  --mc-shadow-strong: 0 24px 70px rgba(106, 77, 25, 0.17);

  --mc-glow: radial-gradient(
    circle at top,
    rgba(255, 190, 45, 0.22),
    transparent 56%
  );

  /* 左侧菜单 */
  --mc-sidebar-bg: #fff8e6;
  --mc-sidebar-border: #ead9ad;
  --mc-sidebar-hover: #fff0c4;
  --mc-sidebar-active: #ffe4a0;
  --mc-sidebar-text: #6c5a43;
  --mc-sidebar-text-active: #c96b00;
  --mc-sidebar-group-title: #a28b67;
  --mc-sidebar-logo-name: #30261b;
  --mc-sidebar-footer-bg: rgba(250, 237, 203, 0.9);
  --mc-sidebar-floating-bg: rgba(255, 250, 235, 0.98);

  /* 对话界面 */
  --mc-chat-bg: #fffaf0;
  --mc-chat-header-bg: #fffdf8;
  --mc-assistant-bubble-bg: #fffdf8;
  --mc-assistant-bubble-border: #ead9ad;
  --mc-assistant-bubble-color: #30261b;
  --mc-user-bubble-bg: #f2a21b;
  --mc-user-bubble-color: #ffffff;
  --mc-input-bg: #fffdf8;
  --mc-input-border: #e5d19c;
  --mc-input-text: #30261b;

  /* 代码和内容 */
  --mc-code-bg: #f9f2df;
  --mc-code-header-bg: #f2e6c7;
  --mc-code-header-border: rgba(69, 51, 25, 0.09);
  --mc-code-lang-color: #78684f;
  --mc-code-copy-color: #78684f;
  --mc-code-copy-hover-bg: rgba(69, 51, 25, 0.07);
  --mc-code-copy-hover-color: #30261b;
  --mc-code-text: #35291d;
  --mc-inline-code-bg: rgba(244, 165, 28, 0.14);
  --mc-inline-code-color: #9a4f00;

  --mc-table-header-bg: #f8edcf;
  --mc-table-border: #e5d19c;
  --mc-blockquote-bg: rgba(244, 165, 28, 0.07);
  --mc-blockquote-border: #e6a544;
  --mc-blockquote-color: #6d5d47;
  --mc-link-color: #c86300;
  --mc-hr-color: #e5d19c;

  /* 附件和思考区域 */
  --mc-attachment-bg: #fff0bd;
  --mc-attachment-border: #e9bb63;
  --mc-attachment-color: #8f4a00;
  --mc-thinking-bg: #f8edcf;
  --mc-thinking-text: #6b5941;
  --mc-thinking-hover: rgba(244, 165, 28, 0.11);
  --mc-thinking-icon-bg: rgba(244, 165, 28, 0.16);
  --mc-thinking-border: rgba(220, 137, 10, 0.27);

  /* 滚动条和工作流 */
  --mc-scrollbar-thumb: #cfb879;
  --mc-scrollbar-thumb-hover: #ad9252;
  --mc-canvas-dot: rgba(82, 61, 29, 0.18);
  --mc-edge: #c9ad66;
  --mc-edge-strong: #8c7642;

  /* Element Plus主色 */
  --el-color-primary: #f4a51c;
  --el-color-primary-light-3: #f7bd60;
  --el-color-primary-light-5: #f9cf8e;
  --el-color-primary-light-7: #fbe2bc;
  --el-color-primary-light-8: #fdf0d9;
  --el-color-primary-light-9: #fff8ec;
  --el-color-primary-dark-2: #c98200;
}


/* ================================================================
   MetaBox Dark Theme
   蓝黑背景＋亮橙＋科技青
   ================================================================ */
html.dark {
  /* 品牌主色 */
  --mc-primary: #ff9b42;
  --mc-primary-light: #ffc276;
  --mc-primary-hover: #f47a16;
  --mc-primary-bg: rgba(255, 155, 66, 0.16);

  --mc-accent: #4fc3e4;
  --mc-accent-soft: rgba(79, 195, 228, 0.13);

  /* 页面与卡片 */
  --mc-bg: #0b1218;
  --mc-bg-elevated: #121c24;
  --mc-bg-sunken: #17242d;
  --mc-bg-muted: #101920;
  --mc-surface-strong: #18252f;
  --mc-surface-overlay: rgba(18, 28, 36, 0.82);
  --mc-panel-top: rgba(20, 31, 40, 0.97);
  --mc-panel-bottom: rgba(13, 21, 28, 0.95);
  --mc-panel-raised: rgba(24, 37, 47, 0.92);

  /* 边框 */
  --mc-border: #293b47;
  --mc-border-light: #1d2c36;
  --mc-border-strong: #38505e;

  /* 文字 */
  --mc-text-primary: #edf6fa;
  --mc-text-secondary: #a7bac5;
  --mc-text-tertiary: #708691;
  --mc-text-inverse: #111b22;

  /* 阴影和光晕 */
  --mc-shadow-soft: 0 14px 32px rgba(0, 0, 0, 0.26);
  --mc-shadow-medium: 0 20px 60px rgba(0, 0, 0, 0.34);
  --mc-shadow-strong: 0 28px 90px rgba(0, 0, 0, 0.42);

  --mc-glow: radial-gradient(
    circle at top,
    rgba(255, 155, 66, 0.14),
    transparent 55%
  );

  /* 左侧菜单 */
  --mc-sidebar-bg: #0e171e;
  --mc-sidebar-border: #293b47;
  --mc-sidebar-hover: #192832;
  --mc-sidebar-active: rgba(255, 155, 66, 0.17);
  --mc-sidebar-text: #a7bac5;
  --mc-sidebar-text-active: #ff9b42;
  --mc-sidebar-group-title: #708691;
  --mc-sidebar-logo-name: #edf6fa;
  --mc-sidebar-footer-bg: rgba(18, 28, 36, 0.94);
  --mc-sidebar-floating-bg: rgba(20, 31, 40, 0.97);

  /* 对话界面 */
  --mc-chat-bg: #0e171e;
  --mc-chat-header-bg: #14202a;
  --mc-assistant-bubble-bg: #14202a;
  --mc-assistant-bubble-border: #293b47;
  --mc-assistant-bubble-color: #edf6fa;
  --mc-user-bubble-bg: #f58a2b;
  --mc-user-bubble-color: #ffffff;
  --mc-input-bg: #101a22;
  --mc-input-border: #293b47;
  --mc-input-text: #edf6fa;

  /* 代码和内容 */
  --mc-code-bg: #091016;
  --mc-code-header-bg: #101a22;
  --mc-code-header-border: rgba(255, 255, 255, 0.07);
  --mc-code-lang-color: #708691;
  --mc-code-copy-color: #708691;
  --mc-code-copy-hover-bg: rgba(255, 255, 255, 0.08);
  --mc-code-copy-hover-color: #edf6fa;
  --mc-code-text: #c4d5de;
  --mc-inline-code-bg: rgba(255, 155, 66, 0.16);
  --mc-inline-code-color: #ffc188;

  --mc-table-header-bg: #192832;
  --mc-table-border: #293b47;
  --mc-blockquote-bg: rgba(255, 155, 66, 0.09);
  --mc-blockquote-border: #f58a2b;
  --mc-blockquote-color: #a7bac5;
  --mc-link-color: #ff9b42;
  --mc-hr-color: #293b47;

  /* 附件和思考区域 */
  --mc-attachment-bg: rgba(255, 155, 66, 0.13);
  --mc-attachment-border: rgba(255, 155, 66, 0.27);
  --mc-attachment-color: #ffc188;
  --mc-thinking-bg: #14202a;
  --mc-thinking-text: #a7bac5;
  --mc-thinking-hover: rgba(255, 155, 66, 0.11);
  --mc-thinking-icon-bg: rgba(255, 155, 66, 0.14);
  --mc-thinking-border: rgba(255, 155, 66, 0.23);

  /* 滚动条和工作流 */
  --mc-scrollbar-thumb: #3a515e;
  --mc-scrollbar-thumb-hover: #58717e;
  --mc-canvas-dot: rgba(255, 255, 255, 0.13);
  --mc-edge: #405560;
  --mc-edge-strong: #718894;

  --el-color-primary: #ff9b42;
}


/* ================================================================
   MetaBox Light Background
   ================================================================ */
body {
  background-image:
    radial-gradient(
      circle at top left,
      rgba(255, 190, 45, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(47, 124, 130, 0.08),
      transparent 26%
    );
}


/* ================================================================
   MetaBox Dark Background
   ================================================================ */
html.dark body {
  background-image:
    radial-gradient(
      circle at top left,
      rgba(255, 155, 66, 0.14),
      transparent 29%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(79, 195, 228, 0.09),
      transparent 27%
    );
}

/* METABOX_LOGIN_BRAND_START */

/* 登录页：黄色机器人品牌背景 */
.login-page {
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(255, 184, 28, 0.28) 0%,
      rgba(255, 196, 62, 0.13) 18%,
      transparent 39%
    ),
    radial-gradient(
      circle at 10% 8%,
      rgba(255, 222, 128, 0.35) 0%,
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 88%,
      rgba(243, 153, 18, 0.12) 0%,
      transparent 29%
    ),
    linear-gradient(
      155deg,
      #fffdf5 0%,
      #fff7dc 43%,
      #ffedb8 72%,
      #ffe39a 100%
    ) !important;
}

/* 登录框与黄色背景保持协调 */
.login-page .form-input {
  background: rgba(255, 253, 244, 0.84) !important;
  border-color: rgba(215, 169, 61, 0.62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 24px rgba(139, 91, 9, 0.035);
}

.login-page .form-input:focus {
  background: #fffef9 !important;
  border-color: #f4a51c !important;
  box-shadow:
    0 0 0 3px rgba(244, 165, 28, 0.14),
    0 10px 26px rgba(139, 91, 9, 0.06) !important;
}

/* Logo柔和金黄色光晕 */
.login-page .logo-image {
  filter:
    drop-shadow(0 10px 22px rgba(219, 128, 0, 0.20))
    drop-shadow(0 0 22px rgba(255, 200, 64, 0.16)) !important;
}

/* 登录按钮强化品牌黄色 */
.login-page .login-btn {
  background:
    linear-gradient(
      135deg,
      #ffb51b 0%,
      #f39a08 55%,
      #e67d00 100%
    ) !important;
  box-shadow:
    0 10px 26px rgba(211, 117, 0, 0.16);
}

.login-page .login-btn:hover:not(:disabled) {
  box-shadow:
    0 14px 32px rgba(211, 117, 0, 0.24) !important;
}

/* 隐藏默认账号：admin / admin123 */
.login-page .login-hint {
  display: none !important;
}

/* 深色模式继续使用蓝黑＋亮橙＋科技青 */
html.dark .login-page {
  background:
    radial-gradient(
      circle at 50% 28%,
      rgba(255, 155, 66, 0.18) 0%,
      transparent 37%
    ),
    radial-gradient(
      circle at 90% 85%,
      rgba(79, 195, 228, 0.09) 0%,
      transparent 30%
    ),
    linear-gradient(
      155deg,
      #071019 0%,
      #0b1720 48%,
      #10232d 100%
    ) !important;
}

html.dark .login-page .form-input {
  background: rgba(15, 28, 37, 0.88) !important;
  border-color: #344c59 !important;
}

html.dark .login-page .form-input:focus {
  background: #12242e !important;
  border-color: #ff9b42 !important;
  box-shadow: 0 0 0 3px rgba(255, 155, 66, 0.13) !important;
}

/* METABOX_LOGIN_BRAND_END */