/*!
 * 卡通主题 / Cartoon theme — New API 面板
 * 注入：nginx 在 </head> 前插入 <link rel="stylesheet" href="/_theme/cartoon.css">
 * 回滚：删掉 nginx 里那 3 行 sub_filter，reload 即可（面板本身没被改动）。
 * 调色：改下面的 --primary / --secondary / --toon-ink 即可换配色。
 */

/* ---------- 圆体拉丁字体（中文回落到系统圆体） ---------- */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/_theme/fonts/baloo2-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===================== 卡通色板（浅色 · 白天） ===================== */
html:root,
html.light {
  /* 线稿 / 投影 */
  --toon-ink: #2c2850;
  --toon-edge: #2c2850;
  --toon-ink-soft: rgba(44, 40, 80, 0.32);
  --toon-ink-line: rgba(44, 40, 80, 0.1);
  --radius: 1.25rem;

  /* 手绘元素 */
  --toon-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cpath d='M42 101c-17 0-29-11-29-25s12-25 29-25c2-17 17-29 34-29 15 0 28 9 33 23 3-1 6-2 10-2 14 0 25 10 25 23 0 2 0 3-1 5 12 2 21 10 21 21 0 12-10 19-23 19H42z' fill='%23ffffff' stroke='%232c2850' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --toon-cloud-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120'%3E%3Cpath d='M42 101c-17 0-29-11-29-25s12-25 29-25c2-17 17-29 34-29 15 0 28 9 33 23 3-1 6-2 10-2 14 0 25 10 25 23 0 2 0 3-1 5 12 2 21 10 21 21 0 12-10 19-23 19H42z' fill='%23332c52' stroke='%238b7ad8' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --toon-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4c4 22 12 30 34 34-22 4-30 12-34 34-4-22-12-30-34-34 22-4 30-12 34-34z' fill='%23ffcf3f' stroke='%232c2850' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --toon-sparkle-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4c4 22 12 30 34 34-22 4-30 12-34 34-4-22-12-30-34-34 22-4 30-12 34-34z' fill='%23ffcf3f' stroke='%23cbbcf0' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
  --toon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='21' fill='%23ffd23f' stroke='%232c2850' stroke-width='5'/%3E%3Cg stroke='%232c2850' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M50 7v10M50 83v10M7 50h10M83 50h10M20 20l7 7M73 73l7 7M80 20l-7 7M27 73l-7 7'/%3E%3C/g%3E%3C/svg%3E");
  --toon-sun-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='21' fill='%23ffd23f' stroke='%23cbbcf0' stroke-width='5'/%3E%3Cg stroke='%23cbbcf0' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M50 7v10M50 83v10M7 50h10M83 50h10M20 20l7 7M73 73l7 7M80 20l-7 7M27 73l-7 7'/%3E%3C/g%3E%3C/svg%3E");
  --toon-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath d='M150 40c2 8 5 11 13 13-8 2-11 5-13 13-2-8-5-11-13-13 8-2 11-5 13-13z' fill='%23ff5f8f' fill-opacity='0.18'/%3E%3Ccircle cx='96' cy='132' r='4' fill='%2337a9ff' fill-opacity='0.22'/%3E%3Cpath d='M34 96c8 0 12 4 12 12' fill='none' stroke='%232c2850' stroke-opacity='0.1' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='48' cy='40' r='3' fill='%23ffab1f' fill-opacity='0.25'/%3E%3C/svg%3E");

  /* 登录页场景（渐变光斑 + 手绘云/太阳/星星） */
  --toon-scene: radial-gradient(
      closest-side,
      rgba(255, 95, 143, 0.3),
      transparent 72%
    )
      2% 6% / 420px 420px no-repeat,
    radial-gradient(closest-side, rgba(55, 169, 255, 0.28), transparent 72%) 98%
      10% / 380px 380px no-repeat,
    radial-gradient(closest-side, rgba(255, 207, 63, 0.32), transparent 72%)
      8% 98% / 460px 460px no-repeat,
    radial-gradient(closest-side, rgba(34, 197, 139, 0.22), transparent 72%) 92%
      94% / 420px 420px no-repeat,
    var(--toon-cloud) 6% 22% / 250px 150px no-repeat,
    var(--toon-cloud) 88% 74% / 210px 126px no-repeat,
    var(--toon-sun) 16% 84% / 110px 110px no-repeat,
    var(--toon-sparkle) 82% 18% / 78px 78px no-repeat,
    var(--toon-sparkle) 70% 6% / 40px 40px no-repeat,
    var(--toon-sparkle) 26% 12% / 34px 34px no-repeat;

  --font-ui-sans: "Baloo 2", "Yuanti SC", "幼圆", "YouYuan", "Comic Sans MS",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --font-body: var(--font-ui-sans);

  --background: #fff8ec;
  --foreground: #2c2850;
  --card: #ffffff;
  --card-foreground: #2c2850;
  --popover: #fffdf7;
  --popover-foreground: #2c2850;
  --primary: #ff5f8f;
  --primary-foreground: #ffffff;
  --secondary: #ffe8a8;
  --secondary-foreground: #4a3a14;
  --muted: #f6ecdc;
  --muted-foreground: #7b7194;
  --accent: #f1e6ff;
  --accent-foreground: #4b3a86;

  --destructive: #ff5252;
  --destructive-foreground: #ffffff;
  --success: #22c58b;
  --success-foreground: #ffffff;
  --warning: #ffab1f;
  --warning-foreground: #3a2a00;
  --info: #37a9ff;
  --info-foreground: #ffffff;
  --neutral: #6f6788;
  --neutral-foreground: #ffffff;

  --border: #eadff8;
  --input: #d8c9f0;
  --ring: #ffcf3f;

  --chart-1: #ff5f8f;
  --chart-2: #37a9ff;
  --chart-3: #ffab1f;
  --chart-4: #22c58b;
  --chart-5: #a77bff;
  --overview-accent-1: #ff5f8f;
  --overview-accent-2: #37a9ff;
  --overview-accent-3: #a77bff;

  --sidebar: #f8edff;
  --sidebar-foreground: #3b3161;
  --sidebar-primary: #ff5f8f;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #ffe8a8;
  --sidebar-accent-foreground: #4a3a14;
  --sidebar-border: #e6d8f7;
  --sidebar-ring: #ffcf3f;

  --skeleton-base: #f1e6d6;
  --skeleton-highlight: #fff8ec;
  --table-row: transparent;
  --table-header: #fff3d6;
  --table-header-hover: #ffe9b5;
  --table-disabled: #f7f2e8;
  --table-disabled-hover: #f1ead9;
  --table-disabled-border: #e9e0cd;
}

/* ===================== 卡通色板（夜间 · 星空） ===================== */
html.dark {
  --toon-ink: #0b0917;
  --toon-edge: #8b7ad8;
  --toon-ink-soft: rgba(0, 0, 0, 0.6);
  --toon-ink-line: rgba(255, 255, 255, 0.12);

  --toon-scene: radial-gradient(
      closest-side,
      rgba(255, 95, 143, 0.36),
      transparent 72%
    )
      2% 6% / 420px 420px no-repeat,
    radial-gradient(closest-side, rgba(55, 169, 255, 0.34), transparent 72%) 98%
      10% / 380px 380px no-repeat,
    radial-gradient(closest-side, rgba(255, 207, 63, 0.26), transparent 72%)
      8% 98% / 460px 460px no-repeat,
    radial-gradient(closest-side, rgba(34, 197, 139, 0.2), transparent 72%) 92%
      94% / 420px 420px no-repeat,
    var(--toon-cloud-dark) 6% 22% / 250px 150px no-repeat,
    var(--toon-cloud-dark) 88% 74% / 210px 126px no-repeat,
    var(--toon-sun-dark) 16% 84% / 110px 110px no-repeat,
    var(--toon-sparkle-dark) 82% 18% / 78px 78px no-repeat,
    var(--toon-sparkle-dark) 70% 6% / 40px 40px no-repeat,
    var(--toon-sparkle-dark) 26% 12% / 34px 34px no-repeat;

  --background: #221e38;
  --foreground: #f7f1ff;
  --card: #2c2647;
  --card-foreground: #f7f1ff;
  --popover: #322b50;
  --popover-foreground: #f7f1ff;
  --primary: #ff6f9c;
  --primary-foreground: #221e38;
  --secondary: #4a3f78;
  --secondary-foreground: #ffe8a8;
  --muted: #322b50;
  --muted-foreground: #c3b8e0;
  --accent: #3d3462;
  --accent-foreground: #ffe8a8;
  --destructive: #ff6b6b;
  --success: #35d99c;
  --warning: #ffc247;
  --info: #5cb8ff;
  --border: #453b6b;
  --input: #57497f;
  --ring: #ffcf3f;
  --sidebar: #2a2444;
  --sidebar-foreground: #efe7ff;
  --sidebar-primary: #ff6f9c;
  --sidebar-primary-foreground: #221e38;
  --sidebar-accent: #4a3f78;
  --sidebar-accent-foreground: #ffe8a8;
  --sidebar-border: #453b6b;
  --table-header: #38305c;
  --table-header-hover: #423a6b;
  --table-disabled: #2a2444;
  --table-disabled-hover: #332c50;
  --table-disabled-border: #453b6b;
  --skeleton-base: #322b50;
  --skeleton-highlight: #3d3462;
}

/* ===================== 基础 ===================== */
html,
body {
  background-color: var(--background) !important;
}

body {
  background-image: radial-gradient(
      circle at 14px 14px,
      rgba(255, 95, 143, 0.16) 2.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 38px 38px,
      rgba(55, 169, 255, 0.16) 2.5px,
      transparent 3px
    ),
    var(--toon-tile);
  background-size: 48px 48px, 48px 48px, 192px 192px;
  background-attachment: fixed;
  letter-spacing: 0.012em;
}

html.dark body {
  background-image: radial-gradient(
      circle at 14px 14px,
      rgba(255, 111, 156, 0.26) 2.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 38px 38px,
      rgba(92, 184, 255, 0.22) 2.5px,
      transparent 3px
    ),
    var(--toon-tile);
}

h1,
h2,
h3,
h4,
h5,
th {
  letter-spacing: 0.015em;
}

::selection {
  background: #ffd6e6;
  color: #2c2850;
}

*::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
*::-webkit-scrollbar-thumb {
  background: var(--primary);
  border: 3px solid var(--background);
  border-radius: 999px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}

code {
  border-radius: 6px !important;
  font-weight: 600;
}

/* 浏览器自动填充也走卡通风（不然会变成一块蓝底） */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--card-foreground) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--card) inset !important;
  box-shadow: 0 0 0 1000px var(--card) inset, 2px 2px 0 var(--toon-ink-line) !important;
  caret-color: var(--card-foreground);
  transition: background-color 99999s ease-in-out 0s;
}

/* ===================== 顶栏 ===================== */
header {
  background: var(--background) !important;
  border-bottom: 3px solid var(--toon-edge) !important;
}

header nav,
header [class*="rounded-full"][class*="bg-"] {
  border-radius: 999px !important;
}

header img,
[data-slot="avatar"] {
  border: 2.5px solid var(--toon-edge) !important;
}

/* ===================== 侧边栏 ===================== */
[data-slot="sidebar-container"] {
  bottom: 0.35rem !important;
}

[data-slot="sidebar-inner"] {
  background: var(--sidebar) !important;
  border: 3px solid var(--toon-edge) !important;
  border-radius: 26px 22px 27px 24px !important;
  box-shadow: 6px 6px 0 var(--toon-ink-soft) !important;
  overflow: hidden;
}

[data-slot="sidebar-menu-button"] {
  border-radius: 14px !important;
  font-weight: 700 !important;
  transition: background-color 0.12s ease, color 0.12s ease,
    transform 0.12s ease !important;
}

[data-slot="sidebar-menu-button"]:hover {
  background: var(--sidebar-accent) !important;
  color: var(--sidebar-accent-foreground) !important;
  transform: translateX(2px);
}

[data-slot="sidebar-menu-button"][data-active] {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border: 2.5px solid var(--toon-ink) !important;
  box-shadow: 2px 2px 0 var(--toon-ink) !important;
}

[data-slot="sidebar-menu-button"][data-active] svg,
[data-slot="sidebar-menu-button"][data-active] span {
  color: var(--primary-foreground) !important;
}

[data-slot="sidebar-group-label"] {
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  opacity: 0.7;
}

/* ===================== 卡片 / 面板 ===================== */
.bg-card,
[class*="bg-card"] {
  border: 3px solid var(--toon-edge) !important;
  border-radius: 26px 30px 24px 28px !important;
  box-shadow: 6px 6px 0 var(--toon-ink-soft) !important;
}

/* 兜底：其它“圆角 + 边框”的小卡片也统一成线稿风（不加投影，避免太吵） */
[class*="rounded-xl"][class*="border"]:not([class*="bg-card"]):not(input):not(
    textarea
  ):not(select),
[class*="rounded-2xl"][class*="border"]:not([class*="bg-card"]):not(input):not(
    textarea
  ):not(select) {
  border-width: 2.5px !important;
  border-color: var(--toon-edge) !important;
  border-radius: 20px !important;
}

.bg-card .rounded-lg.border,
.bg-card .rounded-xl.border,
[class*="bg-card"] .rounded-lg.border {
  border-radius: 16px !important;
  border-width: 2px !important;
  border-color: var(--border) !important;
}

.bg-card [class*="bg-background"],
[class*="bg-card"] [class*="bg-background"] {
  border-radius: 14px !important;
}

/* ===================== 按钮 ===================== */
[data-slot="button"]:not([class*="size-6"]):not([class*="size-7"]):not(
    [class*="size-8"]
  ) {
  border: 2.5px solid var(--toon-edge) !important;
  border-radius: 14px !important;
  box-shadow: 3px 3px 0 var(--toon-ink) !important;
  font-weight: 700 !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease,
    background-color 0.1s ease !important;
}

[data-slot="button"]:not([class*="size-6"]):not([class*="size-7"]):not(
    [class*="size-8"]
  ):hover:not(:disabled) {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--toon-ink) !important;
}

[data-slot="button"]:not([class*="size-6"]):not([class*="size-7"]):not(
    [class*="size-8"]
  ):active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--toon-ink) !important;
}

[data-slot="button"]:disabled {
  box-shadow: none !important;
  opacity: 0.55;
}

/* ===================== 表单控件 ===================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
    [type="color"]
  ),
textarea,
select,
[data-slot="select-trigger"] {
  border: 2.5px solid var(--toon-edge) !important;
  border-radius: 12px !important;
  background: var(--card) !important;
  color: var(--card-foreground);
  font-weight: 600;
  box-shadow: 2px 2px 0 var(--toon-ink-line);
}

input::placeholder,
textarea::placeholder {
  color: var(--muted-foreground) !important;
  font-weight: 500;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[data-slot="select-trigger"]:focus-visible {
  box-shadow: 3px 3px 0 var(--toon-ink) !important;
  outline: 3px solid var(--ring) !important;
  outline-offset: 1px !important;
}

[role="checkbox"],
[role="radio"],
[role="switch"] {
  border: 2.5px solid var(--toon-edge) !important;
}

[role="progressbar"] {
  border: 2px solid var(--toon-edge) !important;
  border-radius: 999px !important;
  overflow: hidden;
  background: var(--muted) !important;
}

kbd {
  border: 2px solid var(--toon-edge) !important;
  border-radius: 8px !important;
  box-shadow: 1px 1px 0 var(--toon-ink) !important;
  font-weight: 700 !important;
}

/* ===================== 表格 ===================== */
table thead th {
  background: var(--table-header) !important;
  border-bottom: 2.5px solid var(--toon-edge) !important;
  font-weight: 800 !important;
}

table tbody tr {
  border-bottom: 1px solid var(--border) !important;
}

table tbody tr:hover {
  background: color-mix(in srgb, var(--warning) 12%, transparent) !important;
}

/* ===================== 弹层 ===================== */
[role="dialog"],
[data-slot="dialog-content"],
[data-slot="popover-content"],
[data-slot="dropdown-menu-content"],
[data-slot="select-content"],
[data-slot="sheet-content"],
[data-slot="hover-card-content"],
[data-slot="command-content"] {
  border: 3px solid var(--toon-edge) !important;
  border-radius: 22px !important;
  box-shadow: 8px 8px 0 var(--toon-ink-soft) !important;
}

[data-sonner-toast] {
  border: 2.5px solid var(--toon-edge) !important;
  border-radius: 18px !important;
  box-shadow: 5px 5px 0 var(--toon-ink-soft) !important;
}

/* ===================== 登录 / 注册页 ===================== */
.grid.h-svh {
  position: relative;
  background: transparent !important;
}

.grid.h-svh::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--toon-scene);
}

.grid.h-svh > .container {
  position: relative;
  z-index: 1;
}

.grid.h-svh > .container > div {
  position: relative;
  background: var(--card);
  border: 3px solid var(--toon-edge);
  border-radius: 30px 26px 32px 28px;
  box-shadow: 10px 10px 0 var(--toon-ink-soft);
  padding: 2rem !important;
}

.grid.h-svh > .container > div::after {
  content: "";
  position: absolute;
  top: -30px;
  right: -26px;
  width: 64px;
  height: 64px;
  background: var(--toon-sparkle) center / contain no-repeat;
  transform: rotate(12deg);
  pointer-events: none;
}

html.dark .grid.h-svh > .container > div::after {
  background-image: var(--toon-sparkle-dark);
}

.grid.h-svh h2 {
  font-weight: 800 !important;
}

.grid.h-svh h2::after {
  content: " ✨";
  font-size: 0.8em;
}

.grid.h-svh > a > h1 {
  font-weight: 800;
}

.grid.h-svh > a img {
  border: 2.5px solid var(--toon-edge);
}

/* ===================== 普通用户：去品牌化 ===================== */
/* toon-user.js 判定 role < 10 时给 <html> 加 .toon-user，
   并把 logo/名称/版本号/文档/关于 等入口标成 [data-toon-hide]。
   管理员不受影响；想让普通用户也能看到，删掉这段或改 JS 里的阈值即可。 */
html.toon-user [data-toon-hide] {
  display: none !important;
}

/* 品牌藏掉后，头部左半边留一个空隙不太好看：让导航左对齐更紧凑 */
html.toon-user header nav {
  margin-left: 0.25rem;
}

/* ===================== 收尾 ===================== */
@media (prefers-reduced-motion: reduce) {
  [data-slot="button"],
  [data-slot="sidebar-menu-button"] {
    transition: none !important;
  }
  [data-slot="button"]:hover:not(:disabled),
  [data-slot="sidebar-menu-button"]:hover {
    transform: none !important;
  }
}