@baimingtao/lbs-agent 1.0.0

package/interfaces/web/frontend/src/index.css

@@ -0,0 +1,1903 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: 'Inter', MiSans, 'Microsoft YaHei', 'PingFang SC', sans-serif;
+  color: #2B1828;
+  background: #FFF7FA;
+  font-synthesis: none;
+  -webkit-font-smoothing: antialiased;
+}
+
+* { box-sizing: border-box; }
+html, body, #root { width: 100%; height: 100%; margin: 0; }
+button, input, textarea, select { font: inherit; }
+button { cursor: pointer; }
+button:disabled { cursor: not-allowed; }
+
+@layer components {
+  /* 命令胶囊：粉绿可爱，但是开发者工具感 */
+  .cmd-pill {
+    @apply mb-1 flex items-center gap-3 rounded-2xl px-3 py-2.5 text-berry/70 transition-all duration-200;
+    border: 1px solid transparent;
+    background: transparent;
+    position: relative;
+  }
+  .cmd-pill:hover {
+    @apply text-berry;
+    background: rgba(255, 183, 197, 0.16);
+    box-shadow: 0 4px 16px rgba(152, 216, 200, 0.22);
+    transform: translateY(-1px);
+  }
+  .cmd-pill.active {
+    @apply text-berry;
+    background: linear-gradient(135deg, rgba(152, 216, 200, 0.55), rgba(255, 183, 197, 0.35));
+    box-shadow: 0 6px 18px rgba(110, 90, 168, 0.14), 0 0 0 1px rgba(255, 183, 197, 0.4) inset;
+  }
+  .cmd-pill.active::before {
+    content: '';
+    position: absolute;
+    left: -2px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 6px;
+    height: 22px;
+    border-radius: 99px;
+    background: linear-gradient(180deg, #FFB7C5, #98D8C8);
+    box-shadow: 0 0 10px rgba(255, 183, 197, 0.7);
+  }
+
+  /* 输入与下拉：奶油玻璃 + 粉绿 focus */
+  .pretty-input, .pretty-select {
+    @apply w-full rounded-2xl px-3 py-2.5 text-xs text-berry outline-none transition-all duration-200;
+    border: 1px solid rgba(255, 183, 197, 0.4);
+    background: rgba(255, 255, 255, 0.72);
+  }
+  .pretty-select {
+    appearance: none;
+    padding-right: 2.25rem;
+    background-image:
+      linear-gradient(45deg, transparent 50%, #E89AA8 50%),
+      linear-gradient(135deg, #E89AA8 50%, transparent 50%);
+    background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
+    background-size: 5px 5px, 5px 5px;
+    background-repeat: no-repeat;
+  }
+  .pretty-input:focus, .pretty-select:focus {
+    border-color: rgba(152, 216, 200, 0.9);
+    background: #ffffff;
+    box-shadow: 0 0 0 4px rgba(152, 216, 200, 0.18);
+  }
+  .compact-select {
+    @apply rounded-xl px-2 py-1 text-[11px] font-semibold text-berry/80 outline-none transition;
+    border: 1px solid rgba(255, 183, 197, 0.4);
+    background: rgba(255, 255, 255, 0.7);
+  }
+  .compact-select:focus { box-shadow: 0 0 0 3px rgba(152, 216, 200, 0.18); border-color: rgba(152, 216, 200, 0.8); }
+  .control-select,
+  .session-select {
+    @apply w-full rounded-[18px] px-3.5 py-2.5 text-xs font-semibold text-berry outline-none transition-all duration-200;
+    border: 1px solid rgba(255, 183, 197, 0.55);
+    background:
+      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,247,250,0.92)),
+      radial-gradient(circle at 0% 0%, rgba(255,183,197,0.14), transparent 36%),
+      radial-gradient(circle at 100% 0%, rgba(152,216,200,0.12), transparent 34%);
+    box-shadow:
+      0 12px 28px rgba(43,24,40,0.07),
+      inset 0 1px 0 rgba(255,255,255,0.92),
+      inset 0 -1px 0 rgba(255,183,197,0.08);
+    appearance: none;
+    min-height: 42px;
+    padding-right: 2.75rem;
+    background-image:
+      linear-gradient(45deg, transparent 50%, #D9718A 50%),
+      linear-gradient(135deg, #D9718A 50%, transparent 50%),
+      linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,247,250,0.92));
+    background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%, 0 0;
+    background-size: 6px 6px, 6px 6px, auto;
+    background-repeat: no-repeat;
+  }
+  .control-select:hover,
+  .session-select:hover {
+    border-color: rgba(217, 113, 138, 0.68);
+    box-shadow: 0 16px 32px rgba(43,24,40,0.09), 0 0 0 3px rgba(255,183,197,0.10);
+    transform: translateY(-1px);
+  }
+  .control-select:focus,
+  .session-select:focus {
+    border-color: rgba(152, 216, 200, 0.95);
+    box-shadow: 0 0 0 4px rgba(152, 216, 200, 0.18), 0 14px 30px rgba(43,24,40,0.08);
+    background-color: #fff;
+  }
+
+  /* 通用面板：奶油玻璃卡 */
+  .neko-panel {
+    border: 1px solid rgba(255, 255, 255, 0.62);
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 247, 250, 0.70)),
+      radial-gradient(circle at 0% 0%, rgba(255, 183, 197, 0.16), transparent 34%),
+      radial-gradient(circle at 100% 0%, rgba(152, 216, 200, 0.14), transparent 34%);
+    box-shadow: 0 20px 56px rgba(43, 24, 40, 0.075), inset 0 0 0 1px rgba(255, 255, 255, 0.62);
+    backdrop-filter: blur(22px);
+  }
+
+  /* 深莓终端代码块 */
+  .neko-terminal {
+    background: #1c1118;
+    color: #FFF7FA;
+    border: 1px solid rgba(255, 183, 197, 0.22);
+    box-shadow: 0 16px 44px rgba(43, 24, 40, 0.3);
+  }
+  .neko-terminal .term-dot { width: 10px; height: 10px; border-radius: 99px; display: inline-block; }
+
+  /* 主按钮：sakura 渐变 */
+  .btn-neko {
+    @apply rounded-2xl px-4 py-2 text-xs font-semibold text-white transition-all duration-200;
+    background: linear-gradient(135deg, #FFB7C5, #f7a6b8);
+    box-shadow: 0 8px 20px rgba(255, 183, 197, 0.4);
+  }
+  .btn-neko:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 10px 26px rgba(152, 216, 200, 0.35), 0 6px 16px rgba(255, 183, 197, 0.4);
+  }
+  .btn-neko:disabled { opacity: 0.4; }
+}
+
+
+
+/* ===== HeroUI-inspired interaction layer: 保留 LBS 粉绿主题，只借鉴组件质感/动效 ===== */
+.hero-surface {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(255,255,255,.72);
+  background:
+    linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,247,250,.70)),
+    radial-gradient(circle at 12% 0%, rgba(255,183,197,.24), transparent 32%),
+    radial-gradient(circle at 92% 12%, rgba(152,216,200,.22), transparent 34%);
+  box-shadow: 0 18px 48px rgba(43,24,40,.075), inset 0 1px 0 rgba(255,255,255,.85);
+  backdrop-filter: blur(24px) saturate(1.15);
+}
+.hero-surface::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.46) 34%, transparent 64%);
+  transform: translateX(-120%);
+  transition: transform .75s cubic-bezier(.22,1,.36,1);
+}
+.hero-surface:hover::before { transform: translateX(120%); }
+.hero-card {
+  position: relative;
+  border-radius: 24px;
+  border: 1px solid rgba(255,255,255,.68);
+  background: rgba(255,255,255,.66);
+  box-shadow: 0 14px 36px rgba(43,24,40,.065), inset 0 1px 0 rgba(255,255,255,.86);
+  backdrop-filter: blur(20px);
+  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease, background .22s ease;
+}
+.hero-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(152,216,200,.72);
+  background: rgba(255,255,255,.78);
+  box-shadow: 0 20px 52px rgba(43,24,40,.095), 0 0 0 4px rgba(152,216,200,.10);
+}
+.hero-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: .35rem;
+  border-radius: 999px;
+  border: 1px solid rgba(255,183,197,.38);
+  background: rgba(255,255,255,.66);
+  padding: .28rem .58rem;
+  font-size: 10px;
+  font-weight: 750;
+  color: rgba(43,24,40,.64);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
+  transition: transform .18s ease, border-color .18s ease, background .18s ease;
+}
+.hero-chip:hover { transform: translateY(-1px); border-color: rgba(152,216,200,.72); background: rgba(255,255,255,.86); }
+.hero-kbd {
+  display: inline-flex;
+  min-width: 22px;
+  height: 22px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 7px;
+  border: 1px solid rgba(43,24,40,.12);
+  background: linear-gradient(180deg, #fff, #FFF7FA);
+  color: rgba(43,24,40,.68);
+  font-family: JetBrains Mono, Consolas, monospace;
+  font-size: 10px;
+  font-weight: 800;
+  box-shadow: 0 2px 0 rgba(43,24,40,.14), 0 8px 16px rgba(255,183,197,.16);
+}
+.hero-btn {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  border-radius: 16px;
+  border: 1px solid rgba(255,255,255,.48);
+  background: linear-gradient(135deg, #FFB7C5, #98D8C8);
+  color: #fff;
+  box-shadow: 0 12px 28px rgba(255,183,197,.34), 0 8px 24px rgba(152,216,200,.20);
+  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, opacity .18s ease;
+}
+.hero-btn::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: radial-gradient(circle at var(--x, 50%) var(--y, 0%), rgba(255,255,255,.46), transparent 32%);
+  opacity: 0;
+  transition: opacity .18s ease;
+}
+.hero-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(255,183,197,.40), 0 12px 30px rgba(152,216,200,.28); }
+.hero-btn:hover:not(:disabled)::after { opacity: 1; }
+.hero-btn:active:not(:disabled) { transform: translateY(0) scale(.98); }
+.hero-danger {
+  background: linear-gradient(135deg, rgba(255,184,107,.18), rgba(255,183,197,.16));
+  border-color: rgba(255,184,107,.32);
+  color: #B9632F;
+}
+.hero-danger:hover { border-color: rgba(255,184,107,.62); box-shadow: 0 14px 34px rgba(255,184,107,.16); }
+.hero-verify {
+  background: linear-gradient(135deg, rgba(152,216,200,.24), rgba(255,255,255,.70));
+  border-color: rgba(152,216,200,.55);
+}
+.hero-color-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  border: 2px solid rgba(255,255,255,.88);
+  box-shadow: 0 4px 12px rgba(43,24,40,.12);
+}
+.hero-toast {
+  animation: hero-toast-in .34s cubic-bezier(.22,1,.36,1) both;
+}
+.hero-float-in { animation: hero-float-in .44s cubic-bezier(.22,1,.36,1) both; }
+.hero-pulse-dot { animation: hero-pulse-dot 1.8s ease-in-out infinite; }
+@keyframes hero-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
+@keyframes hero-float-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
+@keyframes hero-pulse-dot { 0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(152,216,200,.34); } 50% { transform: scale(1.08); box-shadow: 0 0 0 7px rgba(152,216,200,0); } }
+
+/* ===== BongoCat Web 宠物：粗线、白猫、粉肉垫、趴桌敲键盘 ===== */
+.bongo-pet {
+  position: relative;
+  width: 118px;
+  height: 92px;
+  flex: 0 0 118px;
+  cursor: pointer;
+  filter: drop-shadow(0 12px 18px rgba(43, 24, 40, 0.12));
+}
+.bongo-pet svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+  overflow: visible;
+}
+.bongo-pet * {
+  vector-effect: non-scaling-stroke;
+  transform-box: fill-box;
+}
+.bongo-cat {
+  transform-origin: 106px 128px;
+  animation: bongo-breathe 2.8s ease-in-out infinite;
+}
+.bongo-body {
+  transform-origin: 106px 124px;
+  transition: transform .18s ease;
+}
+.bongo-face {
+  transform-origin: 106px 86px;
+  transition: transform .12s ease-out;
+}
+.bongo-ear {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  transition: transform .16s ease;
+}
+.bongo-ear-left { transform-origin: 69px 54px; }
+.bongo-ear-right { transform-origin: 147px 56px; }
+.bongo-head,
+.bongo-paw path,
+.bongo-desk path,
+.bongo-keyboard path,
+.bongo-click-pad path {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.bongo-paw {
+  transform-origin: center bottom;
+  transition: transform .14s cubic-bezier(.34,1.56,.64,1);
+}
+.bongo-paw-left { transform-origin: 60px 143px; }
+.bongo-paw-right { transform-origin: 150px 143px; }
+.bongo-eye {
+  transform-origin: center;
+  animation: bongo-blink 5.5s infinite;
+}
+.bongo-eye-right { animation-delay: .03s; }
+.bongo-mouth,
+.bongo-whiskers { transition: transform .16s ease, opacity .16s ease; }
+.bongo-keyboard { transform-origin: 112px 132px; }
+.bongo-key-lines path { transition: stroke .12s ease, opacity .12s ease; }
+.bongo-hotkeys text { paint-order: stroke; stroke: rgba(255,255,255,.75); stroke-width: 2px; }
+.bongo-status { transform-origin: 194px 31px; animation: bongo-status-pulse 1.8s ease-in-out infinite; }
+
+.bongo-pet:hover .bongo-body { transform: translateY(-2px); }
+.bongo-pet:hover .bongo-ear-left { transform: rotate(-5deg); }
+.bongo-pet:hover .bongo-ear-right { transform: rotate(5deg); }
+.bongo-pet:hover .bongo-whiskers { opacity: .95; transform: translateY(-1px); }
+
+/* idle：轻微呼吸，像桌面陪伴宠 */
+.bongo-pet[data-action="idle"] .bongo-paw-left { animation: bongo-idle-left 3.2s ease-in-out infinite; }
+.bongo-pet[data-action="idle"] .bongo-paw-right { animation: bongo-idle-right 3.2s ease-in-out infinite; }
+
+/* typing/running：BongoCat 灵魂，左右爪交替敲键盘 */
+.bongo-pet[data-action="typing"] .bongo-cat { animation: bongo-type-body .36s ease-in-out infinite; }
+.bongo-pet[data-action="typing"] .bongo-paw-left { animation: bongo-hit-left .28s ease-in-out infinite; }
+.bongo-pet[data-action="typing"] .bongo-paw-right { animation: bongo-hit-right .28s ease-in-out infinite; }
+.bongo-pet[data-action="typing"] .bongo-keyboard { animation: bongo-keyboard-hit .28s ease-in-out infinite; }
+.bongo-pet[data-action="typing"] .bongo-key-lines path { stroke: #FF8FA3; opacity: 1; }
+.bongo-pet[data-action="typing"] .bongo-status { animation-duration: .45s; }
+
+/* mouse：鼠标按下时双爪往左边 click pad 拍 */
+.bongo-pet[data-action="mouse"] .bongo-paw-left { animation: bongo-click-left .34s ease-in-out infinite; }
+.bongo-pet[data-action="mouse"] .bongo-paw-right { animation: bongo-click-right .34s ease-in-out infinite; }
+.bongo-pet[data-action="mouse"] .bongo-click-pad { animation: bongo-click-pad .34s ease-in-out infinite; }
+
+/* success/error：状态反馈，不再是丑线条猫 */
+.bongo-pet[data-action="success"] .bongo-cat { animation: bongo-success .9s ease-in-out infinite; }
+.bongo-pet[data-action="success"] .bongo-paw-left { animation: bongo-wave-left .75s ease-in-out infinite; }
+.bongo-pet[data-action="success"] .bongo-paw-right { animation: bongo-wave-right .75s ease-in-out infinite; }
+.bongo-pet[data-action="error"] .bongo-cat { animation: bongo-error-shake .42s ease-in-out infinite; }
+.bongo-pet[data-action="error"] .bongo-ear-left { transform: rotate(12deg) translateY(2px); }
+.bongo-pet[data-action="error"] .bongo-ear-right { transform: rotate(-12deg) translateY(2px); }
+
+.bongo-pet[data-poke]:not([data-poke="0"]) .bongo-cat {
+  animation: bongo-poke .48s cubic-bezier(.34,1.56,.64,1);
+}
+.bongo-bubble {
+  position: absolute;
+  left: 50%;
+  top: -11px;
+  transform: translateX(-50%);
+  z-index: 2;
+  white-space: nowrap;
+  border: 2px solid #2B1828;
+  border-radius: 999px;
+  background: #fff;
+  color: #2B1828;
+  padding: 3px 9px;
+  font-size: 11px;
+  font-weight: 900;
+  box-shadow: 0 6px 0 rgba(255, 183, 197, .85), 0 10px 22px rgba(43,24,40,.12);
+  pointer-events: none;
+  animation: bongo-bubble-pop 1.35s ease-out forwards;
+}
+.bongo-bubble::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -6px;
+  width: 8px;
+  height: 8px;
+  transform: translateX(-50%) rotate(45deg);
+  background: #fff;
+  border-right: 2px solid #2B1828;
+  border-bottom: 2px solid #2B1828;
+}
+
+/* 旧 magic-cat 类如果还有残留，隐藏旧视觉影响 */
+.cat-pet.magic-cat { display: none; }
+
+@keyframes bongo-breathe {
+  0%, 100% { transform: translateY(0) rotate(0); }
+  50% { transform: translateY(-2px) rotate(.5deg); }
+}
+@keyframes bongo-blink {
+  0%, 91%, 100% { transform: scaleY(1); }
+  94% { transform: scaleY(.12); }
+}
+@keyframes bongo-idle-left {
+  0%, 100% { transform: translateY(0) rotate(-4deg); }
+  50% { transform: translateY(-3px) rotate(2deg); }
+}
+@keyframes bongo-idle-right {
+  0%, 100% { transform: translateY(-1px) rotate(4deg); }
+  50% { transform: translateY(2px) rotate(-2deg); }
+}
+@keyframes bongo-type-body {
+  0%, 100% { transform: translateY(0) scaleY(1); }
+  50% { transform: translateY(2px) scaleY(.985); }
+}
+@keyframes bongo-hit-left {
+  0%, 100% { transform: translate(0, -12px) rotate(-10deg); }
+  48%, 58% { transform: translate(10px, 9px) rotate(10deg) scaleY(.94); }
+}
+@keyframes bongo-hit-right {
+  0%, 100% { transform: translate(-10px, 9px) rotate(-10deg) scaleY(.94); }
+  48%, 58% { transform: translate(0, -12px) rotate(10deg); }
+}
+@keyframes bongo-keyboard-hit {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(1.5px); }
+}
+@keyframes bongo-click-left {
+  0%, 100% { transform: translate(0, -8px) rotate(-8deg); }
+  50% { transform: translate(-22px, 6px) rotate(-18deg) scaleY(.94); }
+}
+@keyframes bongo-click-right {
+  0%, 100% { transform: translate(0, -4px) rotate(8deg); }
+  50% { transform: translate(-42px, 7px) rotate(-10deg) scaleY(.94); }
+}
+@keyframes bongo-click-pad {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(2px); }
+}
+@keyframes bongo-success {
+  0%, 100% { transform: translateY(0) rotate(0); }
+  35% { transform: translateY(-8px) rotate(-3deg); }
+  70% { transform: translateY(-2px) rotate(2deg); }
+}
+@keyframes bongo-wave-left {
+  0%, 100% { transform: translateY(-9px) rotate(-18deg); }
+  50% { transform: translateY(-18px) rotate(18deg); }
+}
+@keyframes bongo-wave-right {
+  0%, 100% { transform: translateY(-18px) rotate(18deg); }
+  50% { transform: translateY(-9px) rotate(-18deg); }
+}
+@keyframes bongo-error-shake {
+  0%, 100% { transform: translateX(0) rotate(0); }
+  25% { transform: translateX(-3px) rotate(-2deg); }
+  75% { transform: translateX(3px) rotate(2deg); }
+}
+@keyframes bongo-poke {
+  0% { transform: scale(1); }
+  36% { transform: scale(1.12) translateY(-5px); }
+  70% { transform: scale(.98) translateY(1px); }
+  100% { transform: scale(1); }
+}
+@keyframes bongo-status-pulse {
+  0%, 100% { transform: scale(1); opacity: .82; }
+  50% { transform: scale(1.12); opacity: 1; }
+}
+@keyframes bongo-bubble-pop {
+  0% { transform: translateX(-50%) translateY(4px) scale(.5); opacity: 0; }
+  18% { transform: translateX(-50%) translateY(0) scale(1.08); opacity: 1; }
+  72% { opacity: 1; }
+  100% { transform: translateX(-50%) translateY(-13px) scale(.98); opacity: 0; }
+}
+
+.thinking-orb {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: conic-gradient(#98D8C8, #FFB7C5, #98D8C8);
+  animation: spin 0.8s linear infinite;
+  box-shadow: 0 0 12px rgba(152, 216, 200, 0.5);
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes fadeInUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.fade-in-up { animation: fadeInUp 0.4s ease-out both; }
+
+/* ===== Token 环形图（CSS conic-gradient） ===== */
+.token-ring {
+  position: relative;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+}
+.token-ring::after {
+  content: '';
+  position: absolute;
+  inset: 14%;
+  border-radius: 50%;
+  background: #FFF7FA;
+  box-shadow: inset 0 0 0 1px rgba(255, 183, 197, 0.25);
+}
+
+/* ===== 滚动条：樱花薄荷 ===== */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #FFB7C5, #98D8C8);
+  border-radius: 99px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+::-webkit-scrollbar-track { background: transparent; }
+
+/* ===== 无障碍：尊重 reduced-motion ===== */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+  }
+}
+
+
+  /* HeroUI micro-interactions: LBS 粉绿语义层 */
+  .hero-card, .hero-surface, .cmd-pill, .bongo-pet, .neko-panel {
+    will-change: transform, box-shadow, border-color;
+  }
+
+  .hero-card:focus-within,
+  .hero-surface:focus-within {
+    outline: none;
+    border-color: rgba(152, 216, 200, 0.78);
+    box-shadow: 0 18px 60px rgba(110, 90, 168, 0.14), 0 0 0 4px rgba(152, 216, 200, 0.18);
+  }
+
+  .hero-btn {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.45rem;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.72);
+    color: #2B1828;
+    background: linear-gradient(135deg, rgba(255, 183, 197, 0.84), rgba(152, 216, 200, 0.82));
+    box-shadow: 0 12px 30px rgba(110, 90, 168, 0.13), inset 0 1px 0 rgba(255,255,255,0.62);
+    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
+  }
+  .hero-btn::after {
+    content: '';
+    position: absolute;
+    inset: 1px;
+    z-index: -1;
+    border-radius: inherit;
+    background: linear-gradient(180deg, rgba(255,255,255,0.40), rgba(255,255,255,0));
+    pointer-events: none;
+  }
+  .hero-btn:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 18px 44px rgba(110, 90, 168, 0.18), 0 0 0 4px rgba(255, 183, 197, 0.13);
+    filter: saturate(1.04);
+  }
+  .hero-btn:active:not(:disabled) {
+    transform: translateY(0) scale(0.985);
+  }
+
+  .hero-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    border-radius: 999px;
+    border: 1px solid rgba(255, 255, 255, 0.64);
+    background: rgba(255, 255, 255, 0.54);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 8px 22px rgba(43, 24, 40, 0.045);
+    color: rgba(43, 24, 40, 0.64);
+    backdrop-filter: blur(14px);
+  }
+  .hero-kbd {
+    display: inline-flex;
+    min-width: 1.25rem;
+    height: 1.25rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.45rem;
+    border: 1px solid rgba(43, 24, 40, 0.10);
+    background: linear-gradient(180deg, rgba(255,255,255,0.90), rgba(255,247,250,0.72));
+    box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 4px 10px rgba(43,24,40,0.06);
+    font-size: 10px;
+    font-weight: 800;
+    color: rgba(43, 24, 40, 0.62);
+  }
+  .hero-color-dot {
+    width: 0.42rem;
+    height: 0.42rem;
+    border-radius: 999px;
+    box-shadow: 0 0 0 3px rgba(255,255,255,0.58);
+  }
+  .hero-pulse-dot {
+    animation: hero-pulse 1.5s ease-in-out infinite;
+  }
+  .hero-verify {
+    border-color: rgba(152, 216, 200, 0.52) !important;
+    background: linear-gradient(135deg, rgba(152, 216, 200, 0.24), rgba(255,255,255,0.60)) !important;
+  }
+  .hero-danger {
+    border-color: rgba(255, 184, 107, 0.54) !important;
+    background: linear-gradient(135deg, rgba(255, 184, 107, 0.22), rgba(255,255,255,0.60)) !important;
+  }
+  .hero-toast {
+    animation: hero-toast-in 240ms cubic-bezier(.2,.8,.2,1);
+  }
+  .hero-float-in {
+    animation: hero-float-in 460ms cubic-bezier(.2,.8,.2,1) both;
+  }
+
+  textarea:focus, input:focus, select:focus {
+    outline: none;
+  }
+
+  @keyframes hero-pulse {
+    0%, 100% { transform: scale(1); opacity: 0.78; box-shadow: 0 0 0 0 rgba(152,216,200,0.42); }
+    50% { transform: scale(1.22); opacity: 1; box-shadow: 0 0 0 7px rgba(152,216,200,0); }
+  }
+  @keyframes hero-toast-in {
+    from { transform: translateY(-8px) scale(.98); opacity: 0; }
+    to { transform: translateY(0) scale(1); opacity: 1; }
+  }
+  @keyframes hero-float-in {
+    from { transform: translateY(14px); opacity: 0; filter: blur(4px); }
+    to { transform: translateY(0); opacity: 1; filter: blur(0); }
+  }
+
+
+/* ================================================================
+   NiceSelect — 自定义下拉组件样式
+   替代所有原生 <select>，保持 LBS 粉绿主题
+   ================================================================ */
+.nice-select-wrap { position: relative; z-index: 1; }
+.nice-select-wrap:has(.nice-select-dropdown) { z-index: 9999; }
+
+
+.nice-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  border-radius: 18px;
+  border: 1px solid rgba(255, 183, 197, 0.45);
+  padding: 0.55rem 0.875rem;
+  padding-right: 2.5rem;
+  font-weight: 600;
+  color: #2B1828;
+  outline: none;
+  background:
+    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,247,250,0.88)),
+    radial-gradient(circle at 0% 0%, rgba(255,183,197,0.10), transparent 36%),
+    radial-gradient(circle at 100% 0%, rgba(152,216,200,0.08), transparent 34%);
+  box-shadow:
+    0 8px 24px rgba(43,24,40,0.05),
+    inset 0 1px 0 rgba(255,255,255,0.88);
+  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+  text-align: left;
+  cursor: pointer;
+}
+.nice-select-trigger:hover:not(:disabled) {
+  border-color: rgba(152, 216, 200, 0.62);
+  box-shadow: 0 12px 32px rgba(110, 90, 168, 0.08), inset 0 1px 0 rgba(255,255,255,0.9);
+  transform: translateY(-1px);
+}
+.nice-select-trigger:active:not(:disabled) {
+  transform: translateY(0);
+}
+.nice-select-trigger:focus-visible {
+  border-color: rgba(152, 216, 200, 0.7);
+  box-shadow: 0 0 0 4px rgba(152, 216, 200, 0.16), 0 12px 32px rgba(110, 90, 168, 0.08);
+}
+.nice-select-trigger:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.nice-select-label.placeholder {
+  color: rgba(43, 24, 40, 0.32);
+  font-weight: 500;
+}
+.nice-select-chevron {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: rgba(43, 24, 40, 0.32);
+  transition: transform 220ms cubic-bezier(.2,.8,.2,1), color 160ms ease;
+}
+.nice-select-trigger:hover .nice-select-chevron { color: rgba(43, 24, 40, 0.48); }
+.nice-select-chevron.open { transform: translateY(-50%) rotate(180deg); }
+
+.nice-select-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: 0;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 183, 197, 0.28);
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(28px) saturate(1.2);
+  box-shadow:
+    0 24px 60px rgba(43,24,40,0.12),
+    0 0 0 1px rgba(255,255,255,0.6) inset,
+    0 4px 16px rgba(152,216,200,0.08);
+  z-index: 100;
+  overflow: hidden;
+  animation: nice-select-in 180ms cubic-bezier(.2,.8,.2,1);
+  max-height: 320px;
+  display: flex;
+  flex-direction: column;
+}
+
+.nice-select-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  border-bottom: 1px solid rgba(255, 183, 197, 0.14);
+  background: rgba(255, 247, 250, 0.5);
+}
+.nice-select-search-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 11px;
+  font-weight: 600;
+  color: #2B1828;
+  min-width: 0;
+}
+.nice-select-search-input::placeholder { color: rgba(43, 24, 40, 0.28); }
+
+.nice-select-list {
+  overflow-y: auto;
+  padding: 0.375rem;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255,183,197,0.3) transparent;
+}
+.nice-select-list::-webkit-scrollbar { width: 5px; }
+.nice-select-list::-webkit-scrollbar-thumb {
+  background: rgba(255,183,197,0.3);
+  border-radius: 999px;
+}
+
+.nice-select-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  border-radius: 12px;
+  padding: 0.5rem 0.625rem;
+  font-size: 12px;
+  font-weight: 600;
+  color: rgba(43, 24, 40, 0.72);
+  text-align: left;
+  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
+  cursor: pointer;
+  position: relative;
+}
+.nice-select-item:hover {
+  background: linear-gradient(135deg, rgba(255,183,197,0.14), rgba(152,216,200,0.10));
+  color: #2B1828;
+  transform: translateX(2px);
+}
+.nice-select-item.active {
+  background: linear-gradient(135deg, rgba(152,216,200,0.22), rgba(255,183,197,0.14));
+  color: #2B1828;
+  font-weight: 700;
+}
+.nice-select-hint {
+  margin-left: auto;
+  font-size: 10px;
+  font-weight: 500;
+  color: rgba(43, 24, 40, 0.32);
+  font-family: 'JetBrains Mono', monospace;
+  white-space: nowrap;
+}
+.nice-select-check {
+  margin-left: auto;
+  color: #6FC4B0;
+  flex-shrink: 0;
+}
+.nice-select-empty {
+  padding: 1rem;
+  text-align: center;
+  font-size: 11px;
+  color: rgba(43, 24, 40, 0.32);
+}
+
+/* compact-select used in ChatFlow agent bar */
+.compact-select .nice-select-trigger {
+  min-height: 34px !important;
+  font-size: 11px !important;
+  border-radius: 14px !important;
+}
+
+@keyframes nice-select-in {
+  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+/* Size variants for the trigger */
+.nice-select-wrap.sm .nice-select-trigger {
+  min-height: 34px;
+  font-size: 11px;
+  border-radius: 14px;
+  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
+}
+
+
+/* ================================================================
+   Toggle Switch — 替代原生 checkbox
+   ================================================================ */
+.toggle-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 0.5rem;
+}
+.toggle-switch input { display: none; }
+.toggle-track {
+  width: 38px;
+  height: 22px;
+  border-radius: 999px;
+  background: rgba(43, 24, 40, 0.12);
+  position: relative;
+  transition: background 200ms ease;
+  flex-shrink: 0;
+  box-shadow: inset 0 1px 3px rgba(43,24,40,0.08);
+}
+.toggle-track::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(43,24,40,0.15);
+  transition: transform 200ms cubic-bezier(.2,.8,.2,1), background 200ms ease;
+}
+.toggle-switch input:checked + .toggle-track {
+  background: linear-gradient(135deg, #98D8C8, #6FC4B0);
+}
+.toggle-switch input:checked + .toggle-track::after {
+  transform: translateX(16px);
+}
+.toggle-switch input:disabled + .toggle-track {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.toggle-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: rgba(43, 24, 40, 0.65);
+  user-select: none;
+}
+
+
+/* ================================================================
+   Dark Theme — .dark class on <html>
+   ================================================================ */
+.dark {
+  color-scheme: dark;
+}
+.dark body {
+  background: #16121e;
+  color: #e8e0ee;
+}
+
+/* Root backgrounds */
+.dark .hero-surface {
+  background: linear-gradient(135deg, rgba(40, 30, 50, 0.92), rgba(30, 24, 38, 0.88));
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 16px 48px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
+}
+.dark .hero-card {
+  background: linear-gradient(135deg, rgba(35, 28, 45, 0.90), rgba(25, 20, 32, 0.85));
+  border-color: rgba(255, 255, 255, 0.07);
+  box-shadow: 0 12px 36px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05);
+}
+
+/* Text overrides — berry → light lavender in dark */
+.dark .text-berry { color: #e8e0ee !important; }
+.dark .text-berry\/45 { color: rgba(232, 224, 238, 0.45) !important; }
+.dark .text-berry\/40 { color: rgba(232, 224, 238, 0.40) !important; }
+.dark .text-berry\/50 { color: rgba(232, 224, 238, 0.50) !important; }
+.dark .text-berry\/55 { color: rgba(232, 224, 238, 0.55) !important; }
+.dark .text-berry\/60 { color: rgba(232, 224, 238, 0.60) !important; }
+.dark .text-berry\/65 { color: rgba(232, 224, 238, 0.65) !important; }
+.dark .text-berry\/70 { color: rgba(232, 224, 238, 0.70) !important; }
+.dark .text-berry\/75 { color: rgba(232, 224, 238, 0.75) !important; }
+.dark .text-berry\/80 { color: rgba(232, 224, 238, 0.80) !important; }
+
+/* Borders */
+.dark .border-white\/50 { border-color: rgba(255,255,255,0.08) !important; }
+.dark .border-sakura\/25 { border-color: rgba(255,183,197,0.12) !important; }
+.dark .border-sakura\/20 { border-color: rgba(255,183,197,0.10) !important; }
+.dark .border-sakura\/15 { border-color: rgba(255,183,197,0.08) !important; }
+
+/* Inputs / selects */
+.dark .nice-select-trigger {
+  background: linear-gradient(180deg, rgba(40,32,50,0.96), rgba(30,24,38,0.92));
+  border-color: rgba(255,255,255,0.10);
+  color: #e8e0ee;
+  box-shadow: 0 8px 24px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04);
+}
+.dark .nice-select-label.placeholder { color: rgba(232,224,238,0.30); }
+
+.dark .nice-select-dropdown {
+  background: rgba(28, 22, 36, 0.96);
+  border-color: rgba(255,255,255,0.08);
+  box-shadow: 0 24px 60px rgba(0,0,0,0.48);
+}
+.dark .nice-select-item { color: rgba(232,224,238,0.72); }
+.dark .nice-select-item:hover {
+  background: linear-gradient(135deg, rgba(255,183,197,0.10), rgba(152,216,200,0.08));
+  color: #fff;
+}
+.dark .nice-select-item.active { color: #fff; }
+
+.dark .pretty-input,
+.dark .pretty-select {
+  background: rgba(30, 24, 38, 0.72) !important;
+  border-color: rgba(255,255,255,0.08) !important;
+  color: #e8e0ee !important;
+}
+.dark .pretty-input::placeholder { color: rgba(232,224,238,0.25); }
+
+/* Buttons */
+.dark .hero-btn {
+  background: linear-gradient(135deg, rgba(255,183,197,0.72), rgba(152,216,200,0.68));
+  border-color: rgba(255,255,255,0.10);
+  color: #1a1520;
+}
+
+/* Chips */
+.dark .hero-chip {
+  background: rgba(255,255,255,0.06);
+  border-color: rgba(255,255,255,0.08);
+  color: rgba(232,224,238,0.60);
+}
+.dark .hero-kbd {
+  background: linear-gradient(180deg, rgba(40,32,50,0.90), rgba(30,24,38,0.72));
+  border-color: rgba(255,255,255,0.06);
+  color: rgba(232,224,238,0.50);
+}
+
+/* Sidebar backgrounds */
+.dark aside.bg-cream\/62 {
+  background: rgba(22, 18, 28, 0.72) !important;
+}
+.dark .bg-white\/55,
+.dark .bg-white\/60,
+.dark .bg-white\/65,
+.dark .bg-white\/70,
+.dark .bg-white\/80 {
+  background: rgba(35, 28, 45, 0.72) !important;
+}
+.dark .bg-cream\/70 {
+  background: rgba(22, 18, 28, 0.72) !important;
+}
+
+/* Table */
+.dark .hero-card table { color: #e8e0ee; }
+.dark .border-sakura\/12 { border-color: rgba(255,255,255,0.05) !important; }
+.dark .border-sakura\/8 { background-color: rgba(255,183,197,0.05) !important; }
+
+/* Bongo cat — dark mode */
+.dark .bongo-pet {
+  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.35)) brightness(0.92);
+}
+.dark .bongo-pet svg path[fill="#FFFFFF"] { fill: #322840 !important; }
+.dark .bongo-pet svg path[stroke="#2B1828"] { stroke: rgba(232,224,238,0.82) !important; }
+.dark .bongo-pet svg circle[fill="#2B1828"] { fill: rgba(232,224,238,0.85) !important; }
+.dark .bongo-pet svg path[stroke="#FFFFFF"] { stroke: #322840 !important; }
+.dark .bongo-pet svg ellipse[fill="#FF9CAF"] { fill: rgba(255,156,175,0.72) !important; }
+
+/* Page panel header */
+.dark .hero-surface p,
+.dark .hero-surface h1,
+.dark .hero-surface span {
+  color: #e8e0ee;
+}
+.dark .hero-surface .text-sakura-dark { color: #FFB7C5 !important; }
+.dark .hero-surface .text-berry\/45 { color: rgba(232,224,238,0.45) !important; }
+
+/* Toggle switch dark */
+.dark .toggle-track { background: rgba(255,255,255,0.12); }
+
+/* Token ring */
+.dark .token-ring { filter: brightness(0.85); }
+
+/* Particles — dim in dark */
+.dark ~ .sakura-particle,
+.dark .sakura-particle { opacity: 0.3; }
+
+
+/* Root app background */
+.lbs-root {
+  background:
+    radial-gradient(circle at 18% 10%, rgba(255,183,197,0.36), transparent 30%),
+    radial-gradient(circle at 88% 6%, rgba(152,216,200,0.30), transparent 28%),
+    linear-gradient(135deg, #FFF7FA 0%, #FFFDFE 46%, #F2FFFB 100%);
+}
+.dark .lbs-root {
+  background:
+    radial-gradient(circle at 18% 10%, rgba(110,90,168,0.18), transparent 30%),
+    radial-gradient(circle at 88% 6%, rgba(152,216,200,0.10), transparent 28%),
+    linear-gradient(135deg, #16121e 0%, #1a1525 46%, #14111c 100%);
+}
+
+
+/* Smooth streaming content fade-in */
+.streaming-content {
+  transition: opacity 0.1s ease;
+}
+.streaming-active {
+  position: relative;
+}
+/* Textarea — hide native caret in footer to reduce visual clutter */
+.hero-surface textarea {
+  caret-color: rgba(43, 24, 40, 0.3);
+}
+.dark .hero-surface textarea {
+  caret-color: rgba(232, 224, 238, 0.2);
+}
+.hero-surface textarea:focus {
+  caret-color: rgba(152, 216, 200, 0.6);
+}
+/* Streaming cursor for live token output — typewriter feel */
+@keyframes stream-fade-in {
+  from { opacity: 0; transform: translateY(1px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.streaming-text {
+  animation: stream-fade-in 0.15s ease-out;
+}
+.streaming-cursor::after {
+  content: '▌';
+  animation: blink-cursor 0.6s step-end infinite;
+  color: rgba(152, 216, 200, 0.8);
+  margin-left: 2px;
+  font-weight: 300;
+  text-shadow: 0 0 4px rgba(152, 216, 200, 0.3);
+}
+@keyframes blink-cursor {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+@keyframes cursor-glow {
+  0%, 100% { text-shadow: 0 0 4px rgba(152, 216, 200, 0.3); }
+  50% { text-shadow: 0 0 8px rgba(152, 216, 200, 0.5); }
+}
+
+/* Thinking block — DeepSeek 风格折叠推理面板 */
+.thinking-block {
+  border-radius: 16px;
+  background: rgba(255,247,250,0.6);
+  box-shadow: 0 2px 12px rgba(43,24,40,0.05), inset 0 1px 0 rgba(255,255,255,0.8);
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+  border: 1px solid rgba(255,183,197,0.18);
+}
+.dark .thinking-block {
+  background: rgba(28, 26, 36, 0.6);
+  box-shadow: 0 1px 8px rgba(0,0,0,0.18);
+  border-color: rgba(255,255,255,0.04);
+}
+.thinking-block-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.625rem 0.875rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-size: 12.5px;
+  transition: background 0.15s;
+  text-align: left;
+  color: #5c5c6e;
+  user-select: none;
+}
+.dark .thinking-block-header {
+  color: rgba(210, 205, 220, 0.55);
+}
+.thinking-block-header:hover {
+  background: rgba(255,183,197,0.06);
+}
+.dark .thinking-block-header:hover {
+  background: rgba(255,255,255,0.015);
+}
+.thinking-block-step-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, rgba(152,216,200,0.3), rgba(255,183,197,0.2));
+  font-size: 10px;
+  font-weight: 700;
+  color: #6E5AA8;
+  line-height: 1;
+  letter-spacing: -0.02em;
+}
+.dark .thinking-block-step-badge {
+  background: rgba(255,255,255,0.06);
+  color: rgba(255,255,255,0.35);
+}
+.thinking-block-title {
+  flex: 1;
+  font-weight: 600;
+  font-size: 12px;
+  color: #6E5AA8;
+}
+.dark .thinking-block-title {
+  color: rgba(210, 205, 220, 0.5);
+}
+.thinking-block-time {
+  font-size: 10px;
+  color: rgba(110, 90, 168, 0.45);
+  font-feature-settings: 'tnum';
+  font-variant-numeric: tabular-nums;
+}
+.dark .thinking-block-time {
+  color: rgba(210, 205, 220, 0.25);
+}
+.thinking-block-chevron {
+  font-size: 10px;
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+  color: rgba(110, 90, 168, 0.3);
+}
+.dark .thinking-block-chevron {
+  color: rgba(210, 205, 220, 0.2);
+}
+.thinking-block-chevron.open {
+  transform: rotate(0deg);
+}
+.thinking-block-chevron.closed {
+  transform: rotate(-90deg);
+}
+.thinking-block-divider {
+  height: 1px;
+  background: linear-gradient(90deg, rgba(255,183,197,0.2), rgba(152,216,200,0.1), transparent);
+  margin: 0 0.875rem;
+}
+.thinking-block-body {
+  padding: 0.5rem 0.875rem 0.75rem;
+}
+.thinking-block-body-empty {
+  padding: 0.75rem 0.875rem;
+  font-size: 11px;
+  color: rgba(110, 90, 168, 0.35);
+  font-style: italic;
+}
+.dark .thinking-block-body-empty {
+  color: rgba(210, 205, 220, 0.25);
+}
+
+/* Thinking step — Timeline */
+.thinking-timeline {
+  position: relative;
+}
+.thinking-step {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0;
+  min-height: 30px;
+}
+.thinking-step-dot {
+  flex: 0 0 22px;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  z-index: 1;
+  border-radius: 50%;
+  background: rgba(255,255,255,0.8);
+  box-shadow: 0 1px 4px rgba(43,24,40,0.06);
+  border: 1.5px solid transparent;
+}
+.thinking-step:hover .thinking-step-dot {
+  transform: scale(1.12);
+}
+/* Step type backgrounds */
+.thinking-step-dot.waiting {
+  border-color: rgba(200,200,210,0.3);
+  color: rgba(92,92,110,0.3);
+}
+.thinking-step-dot.running {
+  border-color: #8b8be0;
+  color: #6E5AA8;
+  background: rgba(139,139,224,0.12);
+  box-shadow: 0 0 12px rgba(139,139,224,0.18);
+}
+.thinking-step-dot.done {
+  border-color: rgba(152,216,200,0.5);
+  color: #4a9e7a;
+  background: rgba(152,216,200,0.12);
+}
+.thinking-step-dot.error {
+  border-color: rgba(255,184,107,0.4);
+  color: #c9513a;
+  background: rgba(255,184,107,0.1);
+}
+.thinking-step-dot.verify {
+  border-color: rgba(152,216,200,0.5);
+  color: #4a9e7a;
+  background: rgba(152,216,200,0.12);
+}
+.thinking-step-dot.iteration {
+  border-color: rgba(180,140,220,0.4);
+  color: #7a5aaa;
+  background: rgba(180,140,220,0.1);
+}
+.thinking-step-dot.tool_call {
+  border-color: rgba(100,150,220,0.4);
+  color: #4a7fc9;
+  background: rgba(100,150,220,0.1);
+}
+
+.thinking-step-content {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 0.35rem 0.5rem;
+  font-size: 11.5px;
+  line-height: 1.45;
+  color: rgba(92, 92, 110, 0.5);
+  min-width: 0;
+  flex: 1;
+}
+.dark .thinking-step-content {
+  color: rgba(210, 205, 220, 0.38);
+}
+.thinking-step-time {
+  flex: 0 0 auto;
+  font-weight: 600;
+  font-feature-settings: 'tnum';
+  font-variant-numeric: tabular-nums;
+  color: rgba(110, 90, 168, 0.3);
+  letter-spacing: -0.02em;
+}
+.thinking-step-label {
+  flex: 0 0 auto;
+  font-weight: 600;
+  color: rgba(92, 92, 110, 0.6);
+  white-space: nowrap;
+}
+.dark .thinking-step-label {
+  color: rgba(210, 205, 220, 0.5);
+}
+.thinking-step-desc {
+  flex: 1 1 100%;
+  min-width: 0;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  color: rgba(92, 92, 110, 0.45);
+}
+.dark .thinking-step-desc {
+  color: rgba(210, 205, 220, 0.32);
+}
+/* Error step */
+.thinking-step.error .thinking-step-dot {
+  border-color: rgba(255,184,107,0.4);
+  background: rgba(255,184,107,0.1);
+}
+.thinking-step.error .thinking-step-label {
+  color: rgba(201,81,58,0.6);
+}
+.thinking-step.error .thinking-step-desc {
+  color: rgba(201,81,58,0.45);
+}
+/* Running/active step */
+.thinking-step.running .thinking-step-dot {
+  animation: thinking-pulse 1.5s ease-in-out infinite;
+}
+.thinking-step.running .thinking-step-label {
+  color: #6E5AA8;
+}
+.thinking-step.running .thinking-step-content {
+  color: rgba(110,90,168,0.55);
+}
+@keyframes thinking-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(139,139,224,0.3); transform: scale(1); }
+  50% { box-shadow: 0 0 0 8px rgba(139,139,224,0); transform: scale(1.08); }
+}
+
+/* Thinking raw content fallback */
+.thinking-raw {
+  font-size: 11px;
+  line-height: 1.6;
+  color: rgba(92, 92, 110, 0.5);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+.dark .thinking-raw {
+  color: rgba(210, 205, 220, 0.35);
+}
+.thinking-raw .raw-line {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.15rem 0;
+}
+.thinking-raw .raw-icon {
+  flex: 0 0 16px;
+  font-size: 10px;
+  text-align: center;
+}
+.thinking-raw .raw-iteration {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+}
+.thinking-raw .raw-label {
+  font-weight: 600;
+  color: rgba(110, 90, 168, 0.55);
+}
+.thinking-raw .raw-tool { color: rgba(74, 127, 201, 0.6); }
+.thinking-raw .raw-result { color: rgba(74, 158, 122, 0.6); }
+.thinking-raw .raw-error { color: rgba(201, 81, 58, 0.6); }
+.thinking-raw .raw-verify { color: rgba(74, 158, 122, 0.5); }
+
+
+/* ================================================================
+   TipTap Rich Editor — themed to match LBS
+   ================================================================ */
+.tiptap-wrapper {
+  border: 1px solid rgba(255, 183, 197, 0.4);
+  border-radius: 16px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.72);
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+.tiptap-wrapper:focus-within {
+  border-color: rgba(152, 216, 200, 0.7);
+  box-shadow: 0 0 0 4px rgba(152, 216, 200, 0.14);
+}
+.tiptap-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 0.625rem;
+  border-bottom: 1px solid rgba(255, 183, 197, 0.18);
+  background: rgba(255, 247, 250, 0.5);
+  flex-wrap: wrap;
+}
+.tiptap-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 28px;
+  padding: 0 0.5rem;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  font-size: 11px;
+  font-weight: 700;
+  color: rgba(43, 24, 40, 0.5);
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+.tiptap-toolbar button:hover {
+  background: rgba(255, 183, 197, 0.15);
+  color: #2B1828;
+}
+.tiptap-toolbar button.is-active {
+  background: linear-gradient(135deg, rgba(255, 183, 197, 0.3), rgba(152, 216, 200, 0.2));
+  color: #2B1828;
+}
+.tiptap-divider {
+  width: 1px;
+  height: 18px;
+  background: rgba(43, 24, 40, 0.1);
+  margin: 0 0.25rem;
+}
+.tiptap-content {
+  padding: 0.75rem;
+  min-height: 120px;
+  max-height: 300px;
+  overflow-y: auto;
+  font-size: 12px;
+  color: #2B1828;
+  outline: none;
+}
+.tiptap-content p { margin: 0.25rem 0; line-height: 1.6; }
+.tiptap-content h1 { font-size: 18px; font-weight: 800; margin: 0.5rem 0 0.25rem; }
+.tiptap-content h2 { font-size: 15px; font-weight: 700; margin: 0.5rem 0 0.25rem; }
+.tiptap-content h3 { font-size: 13px; font-weight: 700; margin: 0.375rem 0 0.125rem; }
+.tiptap-content ul { list-style: disc; padding-left: 1.25rem; margin: 0.25rem 0; }
+.tiptap-content ol { list-style: decimal; padding-left: 1.25rem; margin: 0.25rem 0; }
+.tiptap-content li { margin: 0.125rem 0; }
+.tiptap-content blockquote {
+  border-left: 3px solid rgba(110, 90, 168, 0.3);
+  padding-left: 0.75rem;
+  margin: 0.5rem 0;
+  color: rgba(43, 24, 40, 0.55);
+  font-style: italic;
+}
+.tiptap-content pre {
+  background: rgba(43, 24, 40, 0.06);
+  border-radius: 10px;
+  padding: 0.625rem;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+  overflow-x: auto;
+}
+.tiptap-content code {
+  background: rgba(43, 24, 40, 0.06);
+  border-radius: 4px;
+  padding: 1px 4px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 11px;
+}
+.tiptap-content p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgba(43, 24, 40, 0.25);
+  pointer-events: none;
+  height: 0;
+}
+
+/* Dark mode TipTap */
+.dark .tiptap-wrapper {
+  background: rgba(30, 24, 38, 0.72);
+  border-color: rgba(255, 255, 255, 0.08);
+}
+.dark .tiptap-toolbar {
+  background: rgba(22, 18, 28, 0.5);
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+.dark .tiptap-toolbar button { color: rgba(232, 224, 238, 0.45); }
+.dark .tiptap-toolbar button:hover { background: rgba(255, 255, 255, 0.06); color: #e8e0ee; }
+.dark .tiptap-content { color: #e8e0ee; }
+.dark .tiptap-content pre { background: rgba(0, 0, 0, 0.2); }
+.dark .tiptap-content code { background: rgba(0, 0, 0, 0.2); }
+.dark .tiptap-content blockquote {
+  border-left-color: rgba(110, 90, 168, 0.25);
+  color: rgba(232, 224, 238, 0.45);
+}
+
+
+
+
+/* ================================================================
+   TipTap Rich Editor — full themed editor
+   ================================================================ */
+.tiptap-wrapper {
+  border: 1px solid rgba(255, 183, 197, 0.4);
+  border-radius: 16px;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.72);
+  transition: border-color 160ms ease, box-shadow 160ms ease;
+}
+.tiptap-wrapper:focus-within {
+  border-color: rgba(152, 216, 200, 0.7);
+  box-shadow: 0 0 0 4px rgba(152, 216, 200, 0.14);
+}
+
+/* Toolbar */
+.tiptap-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.5rem 0.625rem;
+  border-bottom: 1px solid rgba(255, 183, 197, 0.18);
+  background: linear-gradient(180deg, rgba(255,247,250,0.6), rgba(255,247,250,0.3));
+  flex-wrap: wrap;
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+.tiptap-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  height: 30px;
+  padding: 0 0.5rem;
+  border-radius: 9px;
+  border: none;
+  background: transparent;
+  font-size: 12px;
+  font-weight: 700;
+  color: rgba(43, 24, 40, 0.45);
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+.tiptap-toolbar button:hover {
+  background: rgba(255, 183, 197, 0.18);
+  color: #2B1828;
+  transform: translateY(-1px);
+}
+.tiptap-toolbar button.is-active {
+  background: linear-gradient(135deg, rgba(255,183,197,0.35), rgba(152,216,200,0.25));
+  color: #2B1828;
+  box-shadow: 0 2px 8px rgba(255,183,197,0.2);
+}
+.tiptap-divider {
+  width: 1px;
+  height: 20px;
+  background: rgba(43, 24, 40, 0.08);
+  margin: 0 0.2rem;
+  flex-shrink: 0;
+}
+
+/* Editor content */
+.tiptap-content {
+  padding: 0.875rem;
+  min-height: 140px;
+  max-height: 400px;
+  overflow-y: auto;
+  font-size: 13px;
+  line-height: 1.65;
+  color: #2B1828;
+  outline: none;
+}
+.tiptap-content:focus { outline: none; }
+
+/* Headings */
+.tiptap-content h1 { font-size: 22px; font-weight: 800; margin: 0.75rem 0 0.375rem; letter-spacing: -0.01em; }
+.tiptap-content h2 { font-size: 18px; font-weight: 700; margin: 0.625rem 0 0.25rem; }
+.tiptap-content h3 { font-size: 15px; font-weight: 700; margin: 0.5rem 0 0.125rem; }
+
+/* Paragraphs & lists */
+.tiptap-content p { margin: 0.3rem 0; }
+.tiptap-content ul { list-style: disc; padding-left: 1.5rem; margin: 0.375rem 0; }
+.tiptap-content ol { list-style: decimal; padding-left: 1.5rem; margin: 0.375rem 0; }
+.tiptap-content li { margin: 0.15rem 0; }
+.tiptap-content li p { margin: 0; }
+
+/* Task lists */
+.tiptap-content ul[data-type="taskList"] { list-style: none; padding: 0; }
+.tiptap-content ul[data-type="taskList"] li {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+.tiptap-content ul[data-type="taskList"] li > label { flex-shrink: 0; margin-top: 0.2rem; }
+.tiptap-content ul[data-type="taskList"] li > div { flex: 1; }
+
+/* Blockquote */
+.tiptap-content blockquote {
+  border-left: 3px solid rgba(110, 90, 168, 0.35);
+  padding-left: 1rem;
+  margin: 0.625rem 0;
+  color: rgba(43, 24, 40, 0.5);
+  font-style: italic;
+  background: rgba(110, 90, 168, 0.03);
+  border-radius: 0 10px 10px 0;
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+/* Code */
+.tiptap-content pre {
+  background: rgba(43, 24, 40, 0.06);
+  border-radius: 12px;
+  padding: 0.75rem;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  overflow-x: auto;
+  margin: 0.5rem 0;
+}
+.tiptap-content code {
+  background: rgba(43, 24, 40, 0.06);
+  border-radius: 5px;
+  padding: 1px 5px;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  color: #6E5AA8;
+}
+
+/* Images */
+.tiptap-content img {
+  max-width: 100%;
+  border-radius: 12px;
+  margin: 0.5rem 0;
+}
+
+/* Links */
+.tiptap-content .tiptap-link, .tiptap-content a {
+  color: #6E5AA8;
+  text-decoration: underline;
+  text-decoration-color: rgba(110, 90, 168, 0.3);
+  cursor: pointer;
+}
+
+/* Highlight */
+.tiptap-content mark {
+  border-radius: 4px;
+  padding: 1px 3px;
+}
+
+/* Horizontal rule */
+.tiptap-content hr {
+  border: none;
+  border-top: 2px solid rgba(255, 183, 197, 0.25);
+  margin: 1rem 0;
+}
+
+/* Tables */
+.tiptap-content table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.5rem 0;
+  border-radius: 10px;
+  overflow: hidden;
+}
+.tiptap-content th, .tiptap-content td {
+  border: 1px solid rgba(43, 24, 40, 0.08);
+  padding: 0.5rem 0.625rem;
+  text-align: left;
+  font-size: 12px;
+}
+.tiptap-content th {
+  background: rgba(255, 183, 197, 0.08);
+  font-weight: 700;
+}
+.tiptap-content .selectedCell:after {
+  content: '';
+  position: absolute;
+  z-index: 2;
+  background: rgba(152, 216, 200, 0.15);
+  pointer-events: none;
+}
+
+/* Placeholder */
+.tiptap-content p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: rgba(43, 24, 40, 0.22);
+  pointer-events: none;
+  height: 0;
+}
+
+/* Dark mode */
+.dark .tiptap-wrapper { background: rgba(30, 24, 38, 0.72); border-color: rgba(255, 255, 255, 0.08); }
+.dark .tiptap-toolbar { background: rgba(22, 18, 28, 0.5); border-bottom-color: rgba(255, 255, 255, 0.06); }
+.dark .tiptap-toolbar button { color: rgba(232, 224, 238, 0.4); }
+.dark .tiptap-toolbar button:hover { background: rgba(255, 255, 255, 0.06); color: #e8e0ee; }
+.dark .tiptap-toolbar button.is-active { background: linear-gradient(135deg, rgba(255,183,197,0.2), rgba(152,216,200,0.12)); color: #e8e0ee; }
+.dark .tiptap-content { color: #e8e0ee; }
+.dark .tiptap-content pre { background: rgba(0, 0, 0, 0.2); }
+.dark .tiptap-content code { background: rgba(0, 0, 0, 0.2); color: #9080C8; }
+.dark .tiptap-content blockquote { border-left-color: rgba(110, 90, 168, 0.25); color: rgba(232, 224, 238, 0.4); background: rgba(110, 90, 168, 0.04); }
+.dark .tiptap-content th { background: rgba(255, 255, 255, 0.04); }
+.dark .tiptap-content th, .dark .tiptap-content td { border-color: rgba(255, 255, 255, 0.06); }
+
+
+
+
+
+/* Dark mode */
+.dark .dt-time-btn { color: rgba(232, 224, 238, 0.45); }
+.dark .dt-time-btn:hover { background: rgba(255,255,255,0.06); color: #e8e0ee; }
+.dark .dt-time-btn.active { background: linear-gradient(135deg, rgba(255,183,197,0.15), rgba(152,216,200,0.1)); color: #e8e0ee; }
+.dt-picker-colon {
+  font-size: 12px;
+  font-weight: 800;
+  color: rgba(43, 24, 40, 0.4);
+  flex-shrink: 0;
+}
+
+.dt-picker-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.625rem;
+  padding-top: 0.625rem;
+  border-top: 1px solid rgba(255, 183, 197, 0.14);
+}
+.dt-picker-btn-clear {
+  padding: 5px 14px;
+  border: 1px solid rgba(43, 24, 40, 0.1);
+  border-radius: 9px;
+  background: transparent;
+  font-size: 11px;
+  font-weight: 700;
+  color: rgba(43, 24, 40, 0.5);
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+.dt-picker-btn-clear:hover {
+  background: rgba(43, 24, 40, 0.04);
+  color: #2B1828;
+}
+.dt-picker-btn-confirm {
+  padding: 5px 16px;
+  border: none;
+  border-radius: 9px;
+  background: linear-gradient(135deg, rgba(255, 183, 197, 0.8), rgba(152, 216, 200, 0.8));
+  font-size: 11px;
+  font-weight: 800;
+  color: #2B1828;
+  cursor: pointer;
+  transition: all 120ms ease;
+  box-shadow: 0 4px 12px rgba(255, 183, 197, 0.2);
+}
+.dt-picker-btn-confirm:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(255, 183, 197, 0.3);
+}
+
+/* Dark mode */
+.dark .dark .dt-picker-dropdown {
+  background: rgba(28, 22, 36, 0.96);
+  border-color: rgba(255, 255, 255, 0.08);
+  box-shadow: 0 24px 60px rgba(0,0,0,0.48);
+}
+.dark .dt-picker-title { color: #e8e0ee; }
+.dark .dt-picker-nav { color: rgba(232, 224, 238, 0.35); }
+.dark .dt-picker-nav:hover { background: rgba(255,255,255,0.06); color: #e8e0ee; }
+.dark .dt-picker-wd { color: rgba(232, 224, 238, 0.25); }
+.dark .dt-picker-day { color: rgba(232, 224, 238, 0.65); }
+.dark .dt-picker-day:hover { background: rgba(255,255,255,0.06); color: #e8e0ee; }
+.dark .dt-picker-day.today { border-color: rgba(152, 216, 200, 0.3); }
+
+.dark .dt-picker-time-label { color: rgba(232, 224, 238, 0.3); }
+.dark .dt-picker-colon { color: rgba(232, 224, 238, 0.3); }
+.dark .dt-picker-btn-clear { border-color: rgba(255,255,255,0.08); color: rgba(232,224,238,0.4); }
+
+/* ================================================================
+   DateTimePicker — custom calendar popup
+   ================================================================ */
+.cal-popup {
+  background: rgba(255, 255, 255, 0.96);
+  backdrop-filter: blur(28px) saturate(1.2);
+  border: 1px solid rgba(255, 183, 197, 0.22);
+  border-radius: 20px;
+  box-shadow: 0 24px 60px rgba(43,24,40,0.14), 0 0 0 1px rgba(255,255,255,0.6) inset;
+  padding: 0.75rem;
+  animation: nice-select-in 180ms cubic-bezier(.2,.8,.2,1);
+}
+.cal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+.cal-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: #2B1828;
+}
+.cal-nav {
+  width: 28px; height: 28px;
+  border: none; border-radius: 9px;
+  background: transparent;
+  font-size: 18px; font-weight: 700;
+  color: rgba(43,24,40,0.4);
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+.cal-nav:hover { background: rgba(255,183,197,0.18); color: #2B1828; }
+.cal-weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  margin-bottom: 4px;
+}
+.cal-wd {
+  text-align: center;
+  font-size: 10px; font-weight: 700;
+  color: rgba(43,24,40,0.3);
+  padding: 4px 0;
+}
+.cal-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+.cal-empty { aspect-ratio: 1; }
+.cal-day {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none; border-radius: 9px;
+  background: transparent;
+  font-size: 11px; font-weight: 600;
+  color: rgba(43,24,40,0.7);
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+.cal-day:hover { background: rgba(255,183,197,0.18); color: #2B1828; }
+.cal-day.today { border: 1px solid rgba(152,216,200,0.5); }
+.cal-day.sel { background: linear-gradient(135deg, #FFB7C5, #98D8C8); color: #fff; font-weight: 800; box-shadow: 0 4px 12px rgba(255,183,197,0.3); }
+
+.cal-time {
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid rgba(255,183,197,0.14);
+}
+.cal-time-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 4px;
+}
+.cal-time-row:last-child { margin-bottom: 0; }
+.cal-time-label {
+  font-size: 10px; font-weight: 700;
+  color: rgba(43,24,40,0.4);
+  flex-shrink: 0;
+  width: 16px;
+}
+.cal-time-btns {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+}
+.cal-tbtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  height: 22px;
+  border: none; border-radius: 5px;
+  background: transparent;
+  font-size: 10px; font-weight: 600;
+  color: rgba(43,24,40,0.5);
+  cursor: pointer;
+  transition: all 80ms ease;
+  padding: 0 3px;
+}
+.cal-tbtn:hover { background: rgba(255,183,197,0.15); color: #2B1828; }
+.cal-tbtn.act { background: linear-gradient(135deg, rgba(255,183,197,0.35), rgba(152,216,200,0.25)); color: #2B1828; font-weight: 800; }
+
+.cal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid rgba(255,183,197,0.14);
+}
+.cal-btn-clear {
+  padding: 5px 14px;
+  border: 1px solid rgba(43,24,40,0.1);
+  border-radius: 9px;
+  background: transparent;
+  font-size: 11px; font-weight: 700;
+  color: rgba(43,24,40,0.5);
+  cursor: pointer;
+  transition: all 120ms ease;
+}
+.cal-btn-clear:hover { background: rgba(43,24,40,0.04); color: #2B1828; }
+.cal-btn-ok {
+  padding: 5px 16px;
+  border: none; border-radius: 9px;
+  background: linear-gradient(135deg, rgba(255,183,197,0.8), rgba(152,216,200,0.8));
+  font-size: 11px; font-weight: 800;
+  color: #2B1828;
+  cursor: pointer;
+  transition: all 120ms ease;
+  box-shadow: 0 4px 12px rgba(255,183,197,0.2);
+}
+.cal-btn-ok:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,183,197,0.3); }
+
+/* Dark mode */
+.dark .cal-popup {
+  background: rgba(28,22,36,0.96);
+  border-color: rgba(255,255,255,0.08);
+  box-shadow: 0 24px 60px rgba(0,0,0,0.48);
+}
+.dark .cal-title { color: #e8e0ee; }
+.dark .cal-nav { color: rgba(232,224,238,0.25); }
+.dark .cal-nav:hover { background: rgba(255,255,255,0.06); color: #e8e0ee; }
+.dark .cal-wd { color: rgba(232,224,238,0.2); }
+.dark .cal-day { color: rgba(232,224,238,0.5); }
+.dark .cal-day:hover { background: rgba(255,255,255,0.06); color: #e8e0ee; }
+.dark .cal-day.today { border-color: rgba(152,216,200,0.25); }
+.dark .cal-day.sel { background: linear-gradient(135deg, rgba(255,183,197,0.4), rgba(152,216,200,0.3)); color: #e8e0ee; }
+.dark .cal-tbtn { color: rgba(232,224,238,0.35); }
+.dark .cal-tbtn:hover { background: rgba(255,255,255,0.06); color: #e8e0ee; }
+.dark .cal-tbtn.act { background: linear-gradient(135deg, rgba(255,183,197,0.15), rgba(152,216,200,0.1)); color: #e8e0ee; }
+.dark .cal-time-label { color: rgba(232,224,238,0.3); }
+.dark .cal-btn-clear { border-color: rgba(255,255,255,0.08); color: rgba(232,224,238,0.35); }
+.dark .cal-btn-clear:hover { background: rgba(255,255,255,0.04); color: #e8e0ee; }