/* ═══════ 动画定义 ═══════ */
@keyframes wiggle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes pop-in{from{opacity:0;transform:translateY(6px) rotate(-1deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes shake{0%,100%{transform:translateX(0) rotate(4deg)}25%{transform:translateX(-1px) rotate(2deg)}75%{transform:translateX(1px) rotate(6deg)}}
@keyframes dot-jump{0%,80%,100%{transform:translateY(0);background:#FF3D3D}40%{transform:translateY(-6px);background:#FFE94A}}
@keyframes tag-swing{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes stagger-in{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes underline-sweep{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes float-star{0%,100%{transform:rotate(15deg) translateY(0)}50%{transform:rotate(20deg) translateY(-4px)}}
@keyframes cursor-blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ═══════ 主容器 ═══════ */
.ai-panel{
  position:relative;
  background:#FFD6E8;
  border:3px solid #0a0a0a;
  border-radius:0;
  padding:18px 14px;
  margin:12px 0 60px;
  color:#0a0a0a;
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14.5px;
  line-height:1.7;
  font-weight:600;
  box-shadow:6px 6px 0 #0a0a0a;
}

.ai-panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(#0a0a0a 1px,transparent 1.5px);
  background-size:12px 12px;
  opacity:.08;
  pointer-events:none;
  z-index:0;
}

.ai-panel>*{position:relative;z-index:1}

.ai-panel::after{
  content:"";
  position:absolute;
  bottom:-16px;
  left:50%;
  transform:translateX(-50%);
  width:80px;
  height:10px;
  background:
    radial-gradient(circle 4px at 10% 50%,#FF3D3D 100%,transparent 0),
    radial-gradient(circle 4px at 30% 50%,#FF3D3D 100%,transparent 0),
    radial-gradient(circle 4px at 50% 50%,#FF3D3D 100%,transparent 0),
    radial-gradient(circle 4px at 70% 50%,#FF3D3D 100%,transparent 0),
    radial-gradient(circle 4px at 90% 50%,#FF3D3D 100%,transparent 0);
  animation:dot-jump 1.4s ease-in-out infinite;
}

/* ═══════ details/summary 通用 ═══════ */
.ai-panel details.section{
  background:#fff;
  border:3px solid #0a0a0a;
  border-radius:0;
  margin:14px 4px;
  box-shadow:4px 4px 0 #0a0a0a;
  position:relative;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;
}

.ai-panel details.section:nth-of-type(odd){transform:rotate(-.4deg)}
.ai-panel details.section:nth-of-type(even){transform:rotate(.4deg)}

.ai-panel details.section:hover{
  transform:translate(-2px,-2px) rotate(0);
  box-shadow:7px 7px 0 #0a0a0a;
}

.ai-panel details.section>summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  font-size:15px;
  font-weight:900;
  color:#0a0a0a;
  cursor:pointer;
  list-style:none;
  user-select:none;
  border-bottom:3px solid #0a0a0a;
  letter-spacing:.5px;
  text-transform:uppercase;
  position:relative;
  transition:letter-spacing .2s;
}

.ai-panel details.section:not([open])>summary{border-bottom:none}
.ai-panel details.section:hover>summary{letter-spacing:1.2px}
.ai-panel details.section>summary::-webkit-details-marker{display:none}

.ai-panel details.section>summary::before{
  content:"+";
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  background:#0a0a0a;
  color:#fff;
  font-size:20px;
  font-weight:900;
  flex-shrink:0;
  line-height:1;
  transition:transform .3s cubic-bezier(.68,-.55,.27,1.55);
}
.ai-panel details.section[open]>summary::before{content:"−";transform:rotate(180deg)}

.ai-panel details.section>summary::after{
  margin-left:auto;
  padding:2px 8px;
  background:#fff;
  border:2px solid #0a0a0a;
  font-size:10px;
  font-weight:900;
  letter-spacing:1px;
  transform:rotate(4deg);
  box-shadow:2px 2px 0 #0a0a0a;
  transition:transform .2s;
}

.ai-panel details.section:hover>summary::after{animation:tag-swing .6s ease-in-out infinite}

/* ═══════ 思维链 ═══════ */
.ai-panel details.section.t{background:#F5F5F5}
.ai-panel details.section.t>summary{background:#EAEAEA}
.ai-panel details.section.t>summary::after{content:"THINK"}
.ai-panel details.section.t[open]>*:not(summary){
  background:#F0F0F0;
  padding:12px 14px;
  font-size:13px;
  color:#333;
  line-height:1.75;
  font-style:italic;
}
.ai-panel details.section.t strong{
  color:#0a0a0a;
  background:#FFE94A;
  padding:0 4px;
  border:1.5px solid #0a0a0a;
  font-weight:900;
  font-style:normal;
  box-shadow:1px 1px 0 #0a0a0a;
}

/* ═══════ 各Section配色 ═══════ */
.ai-panel details.section.q>summary{background:#FFE94A}
.ai-panel details.section.q>summary::after{content:"NOW";background:#FF3D3D;color:#fff}

.ai-panel details.section.z>summary{background:#FFB6D9}
.ai-panel details.section.z>summary::after{content:"YOU";background:#FFE94A}

.ai-panel details.section.n>summary{background:#4AC5FF}
.ai-panel details.section.n>summary::after{content:"NPC";background:#FFB6D9}

.ai-panel details.section.e>summary{background:#B4FF3D}
.ai-panel details.section.e>summary::after{content:"$$$";background:#FFE94A}

.ai-panel details.section.s>summary{background:#D4A5FF}
.ai-panel details.section.s>summary::after{content:"MSG";background:#4AC5FF;color:#fff}

.ai-panel details.section.m>summary{background:#FFF3B0}
.ai-panel details.section.m>summary::after{content:"MEM";background:#D4A5FF}

.ai-panel details.section.a>summary{background:#FF3D3D;color:#fff}
.ai-panel details.section.a>summary::before{background:#fff;color:#0a0a0a}
.ai-panel details.section.a>summary::after{
  content:"GO!";background:#FFE94A;color:#0a0a0a;
  animation:shake 1s ease-in-out infinite;
}

.ai-panel details.section.q[open]>*:not(summary){background:#FFFCE6}
.ai-panel details.section.z[open]>*:not(summary){background:#FFF0F7}
.ai-panel details.section.n[open]>*:not(summary){background:#E6F6FF}
.ai-panel details.section.e[open]>*:not(summary){background:#F0FFE0}
.ai-panel details.section.s[open]>*:not(summary){background:#F5EDFF}
.ai-panel details.section.m[open]>*:not(summary){background:#FFFBE0}
.ai-panel details.section.a[open]>*:not(summary){background:#FFEDED}

.ai-panel details.section[open]>*:not(summary){
  animation:pop-in .3s ease-out;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ═══════ 正文区 ═══════ */
.ai-panel .text{
  background:#fff;
  border:3px solid #0a0a0a;
  box-shadow:4px 4px 0 #0a0a0a;
  padding:20px 18px 14px;
  margin:22px 4px;
  position:relative;
}

.ai-panel .text::before{
  content:"STORY";
  position:absolute;
  top:-14px;
  left:16px;
  background:#FF3D3D;
  color:#fff;
  padding:3px 12px;
  border:3px solid #0a0a0a;
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
  transform:rotate(-2deg);
  box-shadow:2px 2px 0 #0a0a0a;
  animation:bob 3s ease-in-out infinite;
}

.ai-panel .text::after{
  content:"";
  position:absolute;
  top:-12px;
  right:16px;
  width:26px;
  height:26px;
  background:#FFE94A;
  border:3px solid #0a0a0a;
  box-shadow:2px 2px 0 #0a0a0a;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:float-star 2.5s ease-in-out infinite;
}

.ai-panel .text p{
  margin:0 0 12px 0;
  color:#0a0a0a;
  font-size:15px;
  line-height:1.85;
  text-indent:2em;
  font-weight:500;
}

.ai-panel .text p:last-child{margin-bottom:0}

.ai-panel .text p:last-of-type::after{
  content:"▊";
  display:inline-block;
  color:#FF3D3D;
  margin-left:2px;
  animation:cursor-blink 1s step-end infinite;
  font-weight:900;
}

/* ═══════ Card 卡片 ═══════ */
.ai-panel .card{
  background:#fff;
  border:2.5px solid #0a0a0a;
  margin:12px 10px;
  padding:0 0 12px 0;
  box-shadow:3px 3px 0 #0a0a0a;
  position:relative;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s;
  animation:stagger-in .35s ease-out backwards;
}

.ai-panel .card:nth-of-type(1){animation-delay:.05s}
.ai-panel .card:nth-of-type(2){animation-delay:.12s}
.ai-panel .card:nth-of-type(3){animation-delay:.19s}
.ai-panel .card:nth-of-type(4){animation-delay:.26s}
.ai-panel .card:nth-of-type(5){animation-delay:.33s}
.ai-panel .card:nth-of-type(n+6){animation-delay:.4s}

.ai-panel .card:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 #0a0a0a;
}

.ai-panel .card h3{
  margin:0 0 10px 0;
  padding:8px 12px 8px 40px;
  font-size:14px;
  font-weight:900;
  color:#0a0a0a;
  background:#FFE94A;
  border-bottom:2.5px solid #0a0a0a;
  letter-spacing:.8px;
  text-transform:uppercase;
  position:relative;
}

.ai-panel .card h3::before{
  content:"";
  position:absolute;
  left:8px;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  background:#0a0a0a;
  border:2px solid #0a0a0a;
}

.ai-panel .card h3::after{
  content:"";
  position:absolute;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  background:#FF3D3D;
  border-radius:50%;
  box-shadow:0 0 0 1.5px #fff;
  transition:transform .3s,background .3s;
}

.ai-panel .card:hover h3::after{
  transform:translateY(-50%) scale(1.4);
  background:#FFE94A;
}

.ai-panel details.section.n .card h3{background:#4AC5FF}
.ai-panel details.section.e .card h3{background:#B4FF3D}
.ai-panel details.section.s .card h3{background:#D4A5FF;color:#0a0a0a}
.ai-panel details.section.m .card h3{background:#FFF3B0;font-size:13px}
.ai-panel details.section.z .card h3{background:#FFB6D9}
.ai-panel details.section.a .card h3{background:#FF3D3D;color:#fff}
.ai-panel details.section.a .card h3::after{background:#FFE94A}

.ai-panel .card>*:not(h3){padding-left:12px;padding-right:12px}
.ai-panel .card>h3+*{padding-top:10px}

/* ═══════ Row 行 ═══════ */
.ai-panel .row{
  padding:5px 0;
  font-size:13.5px;
  color:#0a0a0a;
  line-height:1.6;
  border-bottom:1px dashed rgba(10,10,10,.2);
  font-weight:500;
  transition:padding-left .15s;
}

.ai-panel .row:last-child{border-bottom:none}
.ai-panel .row:hover{padding-left:6px}

.ai-panel .row b{
  color:#0a0a0a;
  font-weight:900;
  background:#FFE94A;
  padding:0 5px;
  border:1.5px solid #0a0a0a;
  margin-right:4px;
  display:inline-block;
  line-height:1.5;
  box-shadow:1px 1px 0 #0a0a0a;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s,background .15s;
}

.ai-panel .row:hover b{
  transform:translate(-1px,-1px);
  box-shadow:2px 2px 0 #0a0a0a;
  background:#B4FF3D;
}

/* ═══════ Table 表格（通用） ═══════ */
.ai-panel table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0;
  font-size:12.5px;
  border:2.5px solid #0a0a0a;
  table-layout:fixed;
}

.ai-panel thead tr{background:#0a0a0a}

.ai-panel thead th{
  padding:8px 6px;
  text-align:left;
  color:#FFE94A;
  font-weight:900;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.2px;
  border-right:1px solid #444;
  position:relative;
  word-break:break-word;
  overflow-wrap:break-word;
}

.ai-panel thead th:last-child{border-right:none}

.ai-panel thead th::after{
  content:"";
  position:absolute;
  left:6px;
  right:6px;
  bottom:3px;
  height:2px;
  background:#FF3D3D;
  animation:underline-sweep 2.5s ease-in-out infinite;
}

.ai-panel tbody tr{
  border-bottom:1.5px solid #0a0a0a;
  transition:background .15s;
}

.ai-panel tbody tr:nth-child(odd){background:#fff}
.ai-panel tbody tr:nth-child(even){background:#FFF0F7}
.ai-panel tbody tr:hover{background:#FFE94A}

.ai-panel tbody td{
  padding:7px 6px;
  color:#0a0a0a;
  vertical-align:top;
  border-right:1px dashed rgba(10,10,10,.25);
  font-weight:500;
  word-break:break-word;
  overflow-wrap:break-word;
}

.ai-panel tbody td:last-child{border-right:none}

/* ═══════ 【FIX】记忆区表格横滑修复 ═══════ */
/* FIX: card层做滚动容器,让每张表独立横滑,不撑破section边框 */
.ai-panel details.section.m .card{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px;
}

/* FIX: 记忆区表格改回auto布局,列宽由内容决定,配合min-width触发横滑 */
.ai-panel details.section.m table{
  table-layout:auto;
  width:100%;
  min-width:100%;
}

/* FIX: 不同表格设定各自的最小宽度,窄屏下强制触发横滚 */
.ai-panel details.section.m .card:nth-of-type(1) table{min-width:520px} /* NPCLog */
.ai-panel details.section.m .card:nth-of-type(2) table{min-width:560px} /* LTM */
.ai-panel details.section.m .card:nth-of-type(3) table{min-width:540px} /* STM */

/* FIX: 记忆区表头不换行,防止列宽被表头文字压塌 */
.ai-panel details.section.m thead th{
  white-space:nowrap;
}

/* FIX: 记忆区单元格允许换行,长文本不会撑爆 */
.ai-panel details.section.m tbody td{
  word-break:break-word;
  overflow-wrap:break-word;
  white-space:normal;
}

/* ═══════ 行动推荐 ═══════ */
.ai-panel details.section.a ol{
  margin:12px 10px;
  padding:0;
  list-style:none;
  counter-reset:action;
}

.ai-panel details.section.a li{
  counter-increment:action;
  position:relative;
  padding:12px 14px 12px 48px;
  margin:10px 0;
  background:#fff;
  border:2.5px solid #0a0a0a;
  box-shadow:3px 3px 0 #0a0a0a;
  font-size:13.5px;
  color:#0a0a0a;
  font-weight:600;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .15s;
  cursor:pointer;
  animation:stagger-in .35s ease-out backwards;
}

.ai-panel details.section.a li:nth-child(1){animation-delay:.08s}
.ai-panel details.section.a li:nth-child(2){animation-delay:.16s}
.ai-panel details.section.a li:nth-child(3){animation-delay:.24s}
.ai-panel details.section.a li:nth-child(4){animation-delay:.32s}
.ai-panel details.section.a li:nth-child(n+5){animation-delay:.4s}

.ai-panel details.section.a li:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 #0a0a0a;
  background:#FFE94A;
}

.ai-panel details.section.a li::before{
  content:counter(action);
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:28px;
  height:28px;
  background:#FF3D3D;
  color:#fff;
  font-size:14px;
  font-weight:900;
  border:2.5px solid #0a0a0a;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:2px 2px 0 #0a0a0a;
  transition:transform .3s cubic-bezier(.68,-.55,.27,1.55),background .2s,color .2s;
}

.ai-panel details.section.a li:hover::before{
  transform:translateY(-50%) rotate(360deg);
  background:#0a0a0a;
  color:#FFE94A;
}

/* ═══════ q 区（当前情况） ═══════ */
.ai-panel details.section.q>*:not(summary){padding:10px 14px}
.ai-panel details.section.q .row{
  border-bottom:none;
  padding:4px 0;
  font-size:14px;
}

/* ═══════ 移动端适配 ═══════ */
@media(max-width:480px){
  .ai-panel{padding:12px 8px;font-size:13.5px;box-shadow:4px 4px 0 #0a0a0a;margin-bottom:64px}
  .ai-panel details.section>summary{padding:8px 10px;font-size:13.5px}
  .ai-panel details.section>summary::after{font-size:9px;padding:1px 6px}
  .ai-panel .card{margin:8px 6px}
  .ai-panel .card h3{padding:6px 10px 6px 36px;font-size:13px}
  .ai-panel .card h3::before{width:18px;height:18px;left:7px}
  .ai-panel .card h3::after{left:12px;width:6px;height:6px}
  .ai-panel .row{font-size:12.5px}
  .ai-panel .text{padding:16px 12px 12px}
  .ai-panel .text p{font-size:14px;line-height:1.8}
  .ai-panel table{font-size:11px}
  .ai-panel thead th{font-size:10px;padding:6px 4px}
  .ai-panel tbody td{padding:5px 4px;font-size:11.5px}
  .ai-panel details.section.a li{padding:10px 12px 10px 42px;font-size:12.5px}
  .ai-panel details.section.a li::before{width:24px;height:24px;font-size:12px}

  /* FIX: 移动端记忆区表格进一步压缩字号 */
  .ai-panel details.section.m table{font-size:11px}
  .ai-panel details.section.m thead th{padding:6px 5px;font-size:10px}
  .ai-panel details.section.m tbody td{padding:5px 5px;font-size:11px;line-height:1.5}

  /* FIX: 移动端右侧渐变提示,暗示可横滑 */
  .ai-panel details.section.m .card{
    background-image:linear-gradient(to right,transparent calc(100% - 30px),rgba(255,61,61,.18));
  }
}

/* ═══════ 宽屏适配 ═══════ */
@media(min-width:768px){
  .ai-panel{padding:22px 20px;max-width:820px;margin:16px auto 60px}
  .ai-panel .text p{font-size:15.5px;line-height:1.9}
}

/* ============================================================
   🟡🟣🟢 NEO-BRUTALISM UI — FULL SUITE v1.1
   ============================================================ */

/* ============================================================
   🌐 CSS变量 · 全局色板与参数
   ============================================================ */
:root {
  --nb-yellow:       #FFE249;
  --nb-pink:         #FF6B9D;
  --nb-green:        #7BF1A8;
  --nb-blue:         #5DADE2;
  --nb-purple:       #C39BFF;
  --nb-orange:       #FFA45B;
  --nb-cyan:         #4CFCFC;
  --nb-red:          #FF5E5E;

  --nb-black:        #1A1A1A;
  --nb-white:        #FFFDF7;
  --nb-cream:        #FFF8E7;
  --nb-gray:         #F0EDE5;
  --nb-gray-mid:     #B0A99F;
  --nb-gray-dark:    #5A5550;

  --nb-border:       2.5px solid var(--nb-black);
  --nb-border-thick: 3.5px solid var(--nb-black);
  --nb-shadow:       4px 4px 0px var(--nb-black);
  --nb-shadow-sm:    3px 3px 0px var(--nb-black);
  --nb-shadow-lg:    6px 6px 0px var(--nb-black);
  --nb-shadow-hover: 6px 6px 0px var(--nb-black);
  --nb-shadow-active:1px 1px 0px var(--nb-black);

  --nb-radius:       12px;
  --nb-radius-sm:    8px;
  --nb-radius-lg:    16px;
  --nb-radius-pill:  50px;

  --nb-font: "Space Grotesk", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --nb-font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;
}

/* ============================================================
   🌐 全局背景 · 透明化
   ============================================================ */
body {
  background-color: transparent !important;
  background-image: none !important;
  font-family: var(--nb-font) !important;
  color: var(--nb-black) !important;
}

main,
[role="main"],
#__next > div,
#app > div {
  background-color: transparent !important;
  background-image: none !important;
}

/* ============================================================
   🔝 顶部导航栏
   ============================================================ */
header,
nav,
[class*="header"],
[class*="navbar"],
[class*="top-bar"],
[class*="nav-"] {
  background: var(--nb-yellow) !important;
  border-bottom: var(--nb-border-thick) !important;
  box-shadow: 0 4px 0 0 var(--nb-black) !important;
  position: relative !important;
  z-index: 100 !important;
}

header *,
nav *,
[class*="header"] *,
[class*="navbar"] * {
  color: var(--nb-black) !important;
  font-weight: 700 !important;
}

/* ============================================================
   📑 侧边栏
   ============================================================ */
aside,
[class*="sidebar"],
[class*="side-panel"],
[class*="drawer"] {
  background-color: rgba(255, 253, 247, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background-image: none !important;
  border-right: var(--nb-border-thick) !important;
  box-shadow: 4px 0 0 0 var(--nb-black) !important;
}

aside li,
aside a,
[class*="sidebar"] li,
[class*="sidebar"] a,
[class*="sidebar"] > div > div {
  border: 2px solid transparent !important;
  border-radius: var(--nb-radius-sm) !important;
  margin: 4px 8px !important;
  padding: 8px 12px !important;
  transition: all 0.15s ease !important;
  font-weight: 600 !important;
}

aside li:hover,
aside a:hover,
[class*="sidebar"] li:hover,
[class*="sidebar"] a:hover,
[class*="sidebar"] > div > div:hover {
  background-color: var(--nb-yellow) !important;
  border: 2px solid var(--nb-black) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  transform: translate(-1px, -1px) !important;
}

/* ============================================================
   🟡 按钮 · 核心组件
   ============================================================ */
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
a[class*="btn"],
[class*="button"] {
  background: var(--nb-yellow) !important;
  color: var(--nb-black) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  padding: 8px 18px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  font-family: var(--nb-font) !important;
  cursor: pointer !important;
  box-shadow: var(--nb-shadow) !important;
  transition: all 0.12s ease !important;
  letter-spacing: 0.5px !important;
  text-transform: none !important;
  position: relative !important;
  overflow: hidden !important;
  background-image: none !important;
}

button:hover,
[role="button"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a[class*="btn"]:hover,
[class*="button"]:hover {
  background: var(--nb-pink) !important;
  box-shadow: var(--nb-shadow-hover) !important;
  transform: translate(-2px, -2px) !important;
  background-image: none !important;
}

button:active,
[role="button"]:active,
input[type="button"]:active,
input[type="submit"]:active,
a[class*="btn"]:active,
[class*="button"]:active {
  box-shadow: var(--nb-shadow-active) !important;
  transform: translate(2px, 2px) !important;
  background: var(--nb-orange) !important;
  background-image: none !important;
}

button[class*="send"],
button[class*="submit"],
button[aria-label*="send"],
button[aria-label*="发送"] {
  background: var(--nb-green) !important;
  font-size: 15px !important;
  padding: 10px 22px !important;
  box-shadow: var(--nb-shadow-lg) !important;
  border: var(--nb-border-thick) !important;
}

button[class*="send"]:hover,
button[class*="submit"]:hover {
  background: var(--nb-cyan) !important;
  transform: translate(-3px, -3px) !important;
  box-shadow: 8px 8px 0px var(--nb-black) !important;
}

button svg,
[role="button"] svg {
  stroke: var(--nb-black) !important;
  stroke-width: 2.5px !important;
}

/* ============================================================
   📝 输入框 · 文本框
   ============================================================ */
textarea {
  background: var(--nb-white) !important;
  background-image: none !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow) !important;
  color: var(--nb-black) !important;
  font-size: 14px !important;
  padding: 14px 16px !important;
  font-family: var(--nb-font) !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  resize: vertical !important;
  line-height: 1.6 !important;
}

textarea:focus {
  outline: none !important;
  background: #FFFFF0 !important;
  border-color: var(--nb-black) !important;
  box-shadow:
    var(--nb-shadow-hover),
    0 0 0 3px var(--nb-yellow) !important;
  transform: translate(-1px, -1px) !important;
}

textarea::placeholder {
  color: var(--nb-gray-mid) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input:not([type]) {
  background: var(--nb-white) !important;
  background-image: none !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius-sm) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  color: var(--nb-black) !important;
  font-size: 13.5px !important;
  font-family: var(--nb-font) !important;
  font-weight: 500 !important;
  padding: 10px 14px !important;
  transition: all 0.15s ease !important;
}

input[type="text"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input:not([type]):focus {
  outline: none !important;
  box-shadow:
    var(--nb-shadow),
    0 0 0 3px var(--nb-green) !important;
  transform: translate(-1px, -1px) !important;
}

input::placeholder {
  color: var(--nb-gray-mid) !important;
  font-weight: 600 !important;
}

/* ============================================================
   💬 聊天消息气泡
   ============================================================ */
[class*="message"],
[class*="chat-item"],
[class*="msg-"],
[data-role="assistant"],
[data-role="user"] {
  margin: 10px 8px !important;
  transition: all 0.15s ease !important;
}

[class*="message"][class*="bot"],
[class*="message"][class*="assistant"],
[class*="message"][class*="ai"],
[class*="message"][class*="model"],
[data-role="assistant"],
[class*="msg-"][class*="left"],
[class*="chat-"][class*="other"] {
  background: var(--nb-white) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius-lg) var(--nb-radius-lg) var(--nb-radius-lg) 4px !important;
  box-shadow: var(--nb-shadow) !important;
  padding: 14px 18px !important;
  position: relative !important;
  background-image: none !important;
}

[class*="message"][class*="bot"]::before,
[class*="message"][class*="assistant"]::before,
[data-role="assistant"]::before {
  content: "🤖" !important;
  position: absolute !important;
  top: -10px !important;
  left: -6px !important;
  background: var(--nb-purple) !important;
  border: 2px solid var(--nb-black) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  box-shadow: 2px 2px 0 var(--nb-black) !important;
  z-index: 2 !important;
  line-height: 1 !important;
}

[class*="message"][class*="user"],
[class*="message"][class*="human"],
[class*="message"][class*="self"],
[data-role="user"],
[class*="msg-"][class*="right"],
[class*="chat-"][class*="self"] {
  background: var(--nb-yellow) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius-lg) var(--nb-radius-lg) 4px var(--nb-radius-lg) !important;
  box-shadow: var(--nb-shadow) !important;
  padding: 14px 18px !important;
  position: relative !important;
  background-image: none !important;
}

[class*="message"][class*="user"]::before,
[class*="message"][class*="human"]::before,
[data-role="user"]::before {
  content: "✏️" !important;
  position: absolute !important;
  top: -10px !important;
  right: -6px !important;
  background: var(--nb-green) !important;
  border: 2px solid var(--nb-black) !important;
  border-radius: 6px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  box-shadow: 2px 2px 0 var(--nb-black) !important;
  z-index: 2 !important;
  line-height: 1 !important;
}

[class*="message"] p,
[class*="message"] span,
[data-role] p,
[data-role] span {
  font-family: var(--nb-font) !important;
  line-height: 1.7 !important;
  font-weight: 500 !important;
  color: var(--nb-black) !important;
}

/* ============================================================
   📦 卡片 / 弹窗 / 面板
   ============================================================ */
[class*="card"],
[class*="modal"],
[class*="dialog"],
[class*="popup"],
[class*="panel"],
[class*="dropdown"],
[role="dialog"],
details {
  background: var(--nb-white) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-lg) !important;
  overflow: hidden !important;
  background-image: none !important;
}

[class*="dropdown"] > *,
[class*="menu"] > *,
[role="menu"] > *,
[role="listbox"] > * {
  border-bottom: 1.5px dashed rgba(26, 26, 26, 0.15) !important;
  padding: 8px 14px !important;
  font-weight: 600 !important;
  transition: all 0.1s ease !important;
}

[class*="dropdown"] > *:hover,
[class*="menu"] > *:hover,
[role="menu"] > *:hover,
[role="listbox"] > *:hover {
  background: var(--nb-yellow) !important;
  padding-left: 18px !important;
}

details summary {
  background: var(--nb-green) !important;
  border-bottom: var(--nb-border) !important;
  padding: 12px 18px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  transition: all 0.15s ease !important;
}

details summary:hover {
  background: var(--nb-cyan) !important;
}

details[open] summary {
  background: var(--nb-pink) !important;
  color: var(--nb-black) !important;
}

/* ============================================================
   🏷️ 标签 / 徽章 / Tag
   ============================================================ */
[class*="tag"],
[class*="badge"],
[class*="chip"],
[class*="label"]:not(label) {
  display: inline-block !important;
  background: var(--nb-cyan) !important;
  color: var(--nb-black) !important;
  border: 2px solid var(--nb-black) !important;
  border-radius: var(--nb-radius-sm) !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  box-shadow: 2px 2px 0 var(--nb-black) !important;
  margin: 2px 4px !important;
  letter-spacing: 0.3px !important;
  transition: all 0.12s ease !important;
}

[class*="tag"]:hover,
[class*="badge"]:hover,
[class*="chip"]:hover {
  background: var(--nb-purple) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--nb-black) !important;
}

/* ============================================================
   🎚️ 滚动条
   ============================================================ */
::-webkit-scrollbar {
  width: 14px !important;
  height: 14px !important;
}

::-webkit-scrollbar-track {
  background: var(--nb-gray) !important;
  border-left: 2px solid var(--nb-black) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--nb-yellow) !important;
  border: 2px solid var(--nb-black) !important;
  border-radius: 0px !important;
  box-shadow: inset -2px -2px 0 var(--nb-black) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--nb-pink) !important;
}

::-webkit-scrollbar-thumb:active {
  background: var(--nb-orange) !important;
}

::-webkit-scrollbar-corner {
  background: var(--nb-black) !important;
}

/* ============================================================
   🔘 复选框 / 单选 / 滑块
   ============================================================ */
input[type="checkbox"],
input[type="radio"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  background: var(--nb-white) !important;
  border: var(--nb-border) !important;
  border-radius: 4px !important;
  box-shadow: var(--nb-shadow-sm) !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  position: relative !important;
}

input[type="radio"] {
  border-radius: 50% !important;
}

input[type="checkbox"]:checked {
  background: var(--nb-green) !important;
}

input[type="checkbox"]:checked::after {
  content: "✓" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: var(--nb-black) !important;
}

input[type="radio"]:checked {
  background: var(--nb-pink) !important;
}

input[type="radio"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 10px !important;
  height: 10px !important;
  background: var(--nb-black) !important;
  border-radius: 50% !important;
}

[class*="toggle"],
[class*="switch"],
[role="switch"] {
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius-pill) !important;
  box-shadow: var(--nb-shadow-sm) !important;
}

input[type="range"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 12px !important;
  background: var(--nb-gray) !important;
  border: 2px solid var(--nb-black) !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: var(--nb-shadow-sm) !important;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 24px !important;
  height: 24px !important;
  background: var(--nb-yellow) !important;
  border: 2.5px solid var(--nb-black) !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  box-shadow: 2px 2px 0 var(--nb-black) !important;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--nb-pink) !important;
}

/* ============================================================
   📜 选择框 / Select
   ============================================================ */
select {
  background: var(--nb-white) !important;
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius-sm) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  padding: 8px 32px 8px 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: var(--nb-font) !important;
  color: var(--nb-black) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%231A1A1A' stroke-width='2.5' fill='none'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}

select:focus {
  outline: none !important;
  box-shadow:
    var(--nb-shadow),
    0 0 0 3px var(--nb-yellow) !important;
}

/* ============================================================
   🖼️ 角色卡片 / 头像
   ============================================================ */
img[class*="avatar"],
[class*="avatar"] img,
[class*="avatar"],
[class*="profile-pic"] {
  border: var(--nb-border) !important;
  border-radius: var(--nb-radius-sm) !important;
  box-shadow: var(--nb-shadow-sm) !important;
  transition: all 0.15s ease !important;
  object-fit: cover !important;
}

img[class*="avatar"]:hover,
[class*="avatar"]:hover,
[class*="avatar"] img:hover {
  transform: translate(-2px, -2px) rotate(-2deg) !important;
  box-shadow: var(--nb-shadow-hover) !important;
}

/* ============================================================
   📏 分割线
   ============================================================ */
hr {
  border: none !important;
  height: 3px !important;
  background:
    repeating-linear-gradient(
      90deg,
      var(--nb-black) 0px,
      var(--nb-black) 8px,
      transparent 8px,
      transparent 14px
    ) !important;
  margin: 16px 0 !important;
}

/* ============================================================
   🔗 链接
   ============================================================ */
a:not(button):not([role="button"]):not([class*="btn"]) {
  color: var(--nb-black) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  background:
    linear-gradient(to right, var(--nb-yellow), var(--nb-yellow)) no-repeat
    left bottom / 100% 3px !important;
  padding-bottom: 2px !important;
  transition: all 0.15s ease !important;
}

a:not(button):not([role="button"]):not([class*="btn"]):hover {
  background-size: 100% 100% !important;
  color: var(--nb-black) !important;
}

/* ============================================================
   🍞 提示条 / Toast
   ============================================================ */
[class*="toast"],
[class*="notification"],
[class*="snackbar"],
[class*="alert"],
[role="alert"] {
  background: var(--nb-orange) !important;
  border: var(--nb-border-thick) !important;
  border-radius: var(--nb-radius) !important;
  box-shadow: var(--nb-shadow-lg) !important;
  color: var(--nb-black) !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
}

/* ============================================================
   ✨ Tooltip
   ============================================================ */
[class*="tooltip"],
[role="tooltip"] {
  background: var(--nb-black) !important;
  color: var(--nb-yellow) !important;
  border: 2px solid var(--nb-yellow) !important;
  border-radius: var(--nb-radius-sm) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 6px 12px !important;
  box-shadow: 3px 3px 0 var(--nb-yellow) !important;
}

/* ============================================================
   📊 进度条 / Loading
   ============================================================ */
progress,
[class*="progress"] {
  border: 2px solid var(--nb-black) !important;
  border-radius: 0 !important;
  height: 16px !important;
  background: var(--nb-gray) !important;
  overflow: hidden !important;
  box-shadow: var(--nb-shadow-sm) !important;
}

progress::-webkit-progress-value {
  background:
    repeating-linear-gradient(
      -45deg,
      var(--nb-green),
      var(--nb-green) 10px,
      var(--nb-cyan) 10px,
      var(--nb-cyan) 20px
    ) !important;
}

[class*="loading"],
[class*="spinner"] {
  border: 3px solid var(--nb-gray) !important;
  border-top: 3px solid var(--nb-pink) !important;
  border-right: 3px solid var(--nb-yellow) !important;
  box-shadow: none !important;
}

/* ============================================================
   🎪 动画
   ============================================================ */
@keyframes nb-slide-in {
  0% {
    opacity: 0;
    transform: translateY(20px) rotate(-1deg);
  }
  60% {
    opacity: 1;
    transform: translateY(-4px) rotate(0.5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
}

[class*="message"],
[data-role] {
  animation: nb-slide-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ============================================================
   🏗️ 便签胶带装饰
   ============================================================ */
details {
  position: relative !important;
}

details::before {
  content: "" !important;
  position: absolute !important;
  top: -6px !important;
  right: 20px !important;
  width: 50px !important;
  height: 18px !important;
  background: rgba(255, 226, 73, 0.7) !important;
  border: 1.5px solid rgba(26, 26, 26, 0.3) !important;
  transform: rotate(-3deg) !important;
  z-index: 3 !important;
  border-radius: 2px !important;
}

/* ============================================================
   🎨 代码块 / Markdown
   ============================================================ */
pre,
code,
[class*="code"] {
  font-family: var(--nb-font-mono) !important;
  background: #1A1A1A !important;
  color: var(--nb-green) !important;
  border: 2px solid var(--nb-green) !important;
  border-radius: var(--nb-radius-sm) !important;
  padding: 2px 6px !important;
}

pre {
  padding: 16px !important;
  box-shadow: var(--nb-shadow) !important;
  overflow-x: auto !important;
}

pre code {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

blockquote {
  border: 2px solid var(--nb-black) !important;
  border-left: 6px solid var(--nb-pink) !important;
  background: rgba(255, 107, 157, 0.08) !important;
  border-radius: 0 var(--nb-radius-sm) var(--nb-radius-sm) 0 !important;
  margin: 12px 0 !important;
  padding: 12px 16px !important;
  box-shadow: var(--nb-shadow-sm) !important;
  font-style: italic !important;
  font-weight: 600 !important;
}

table {
  border: var(--nb-border-thick) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--nb-radius-sm) !important;
  overflow: hidden !important;
  box-shadow: var(--nb-shadow) !important;
  width: 100% !important;
}

th {
  background: var(--nb-yellow) !important;
  border-bottom: var(--nb-border) !important;
  border-right: 1.5px solid var(--nb-black) !important;
  padding: 10px 14px !important;
  font-weight: 800 !important;
  text-align: left !important;
}

td {
  border-bottom: 1.5px dashed rgba(26, 26, 26, 0.2) !important;
  border-right: 1.5px solid rgba(26, 26, 26, 0.1) !important;
  padding: 8px 14px !important;
  font-weight: 500 !important;
}

tr:hover td {
  background: rgba(255, 226, 73, 0.15) !important;
}

/* ============================================================
   📱 移动端适配（全局套件）
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --nb-shadow:       3px 3px 0px var(--nb-black);
    --nb-shadow-sm:    2px 2px 0px var(--nb-black);
    --nb-shadow-lg:    4px 4px 0px var(--nb-black);
    --nb-shadow-hover: 4px 4px 0px var(--nb-black);
  }

  button,
  [role="button"] {
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    border-radius: var(--nb-radius-sm) !important;
  }

  textarea {
    font-size: 13px !important;
    padding: 12px 14px !important;
    border-radius: var(--nb-radius-sm) !important;
  }

  [class*="message"],
  [data-role] {
    margin: 8px 4px !important;
    padding: 10px 14px !important;
  }

  ::-webkit-scrollbar {
    width: 8px !important;
  }

  details::before {
    width: 36px !important;
    height: 14px !important;
    top: -4px !important;
    right: 14px !important;
  }
}

@media (max-width: 480px) {
  button,
  [role="button"] {
    padding: 6px 12px !important;
    font-size: 12px !important;
  }

  ::-webkit-scrollbar {
    width: 6px !important;
  }
}

/* ============================================================
   🚫 功能性元素修正
   ============================================================ */
button[class*="close"],
button[class*="dismiss"],
button[aria-label="close"],
button[aria-label="关闭"] {
  background: var(--nb-red) !important;
  padding: 4px 8px !important;
  min-width: auto !important;
}

button[class*="close"]:hover,
button[aria-label="close"]:hover {
  background: #FF3333 !important;
  transform: translate(-1px, -1px) scale(1.1) !important;
}

button:disabled,
button[disabled],
input:disabled,
textarea:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  box-shadow: var(--nb-shadow-sm) !important;
  transform: none !important;
  filter: grayscale(0.3) !important;
}