/* 界面原型 v2：按 shadcn/ui 默认主题（Neutral）复刻的 token 与组件外观。
   token 名与值取自 ui.shadcn.com/docs/theming（oklch，radius 0.625rem）。
   生产实现建议用 shadcn-svelte（Svelte 5 移植版），组件名一一对应：Button / Card / Badge / Tabs / Input / Textarea / Avatar / Separator / Sidebar / ScrollArea / Sheet / Dialog。 */
.sh{
  --background:oklch(1 0 0);--foreground:oklch(0.145 0 0);
  --card:oklch(1 0 0);--card-foreground:oklch(0.145 0 0);
  --primary:oklch(0.205 0 0);--primary-foreground:oklch(0.985 0 0);
  --secondary:oklch(0.97 0 0);--secondary-foreground:oklch(0.205 0 0);
  --muted:oklch(0.97 0 0);--muted-foreground:oklch(0.556 0 0);
  --accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);
  --destructive:oklch(0.577 0.245 27.325);
  --border:oklch(0.922 0 0);--input:oklch(0.922 0 0);--ring:oklch(0.708 0 0);
  --sidebar:oklch(0.985 0 0);--sidebar-foreground:oklch(0.145 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:oklch(0.922 0 0);
  --radius:0.625rem;--radius-sm:calc(var(--radius) - 4px);--radius-md:calc(var(--radius) - 2px);--radius-lg:var(--radius);--radius-xl:calc(var(--radius) + 4px);
  --font:Geist,Inter,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  color:var(--foreground);background:var(--background);font:13px/1.5 var(--font);
}
.sh.dark{
  --background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);
  --card:oklch(0.205 0 0);--card-foreground:oklch(0.985 0 0);
  --primary:oklch(0.922 0 0);--primary-foreground:oklch(0.205 0 0);
  --secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);
  --muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);
  --accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);
  --border:oklch(1 0 0 / 10%);--input:oklch(1 0 0 / 15%);--ring:oklch(0.556 0 0);
  --sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(1 0 0 / 10%);
}
.proto{margin:18px 0 34px}.proto .cap{font-size:13px;color:var(--text-3);margin:8px 2px 0}
/* 应用框 */
.sh-app{width:100%;max-width:980px;border:1px solid var(--border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.06),0 16px 48px rgba(0,0,0,.12);display:flex;flex-direction:column;background:var(--background);height:640px}
.sh-tb{height:36px;display:flex;align-items:center;padding:0 12px;border-bottom:1px solid var(--border);background:var(--background);flex:none;font-size:12.5px}
.sh-tb .logo{width:18px;height:18px;border-radius:5px;background:var(--primary);color:var(--primary-foreground);font-weight:700;font-size:10px;display:grid;place-items:center;margin-right:8px}
.sh-tb b{font-weight:600}.sh-tb .mut{color:var(--muted-foreground);margin-left:6px}
.sh-tb .sp{flex:1}.sh-tb .wb{display:flex;gap:16px;color:var(--muted-foreground);font-size:12px}
.sh-body{display:flex;flex:1;min-height:0}
/* Sidebar：上下两个 list */
.sh-side{width:224px;flex:none;background:var(--sidebar);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;min-height:0}
.sh-nav{padding:10px 8px 6px;display:flex;flex-direction:column;gap:2px}
.sh-nav .it{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:var(--radius-md);color:var(--sidebar-foreground);font-size:13px;font-weight:500}
.sh-nav .it .ic{width:16px;text-align:center;font-size:14px;color:var(--muted-foreground)}
.sh-nav .it.on{background:var(--sidebar-accent);color:var(--sidebar-accent-foreground)}
.sh-nav .it.new{border:1px solid var(--border);background:var(--background);box-shadow:0 1px 2px rgba(0,0,0,.05);margin-bottom:6px}
.sh-nav .it.new .ic{color:var(--foreground)}
.sh-sep{height:1px;background:var(--sidebar-border);margin:6px 14px}
.sh-lbl{font-size:11px;color:var(--muted-foreground);padding:6px 18px 2px;letter-spacing:.02em}
.sh-hist{flex:1;min-height:0;overflow:hidden;padding:2px 8px;display:flex;flex-direction:column;gap:1px}
.sh-hist .h{padding:6px 10px;border-radius:var(--radius-md);font-size:12.5px;color:var(--sidebar-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sh-hist .h.on{background:var(--sidebar-accent)}
.sh-hist .d{font-size:11px;color:var(--muted-foreground);padding:8px 10px 2px}
.sh-hist .more{font-size:11.5px;color:var(--muted-foreground);padding:6px 10px}
.sh-user{border-top:1px solid var(--sidebar-border);padding:10px 12px;display:flex;align-items:center;gap:9px;font-size:12.5px}
.sh-user .av{width:28px;height:28px;border-radius:50%;background:var(--muted);display:grid;place-items:center;font-size:11px;font-weight:600}
.sh-user small{display:block;color:var(--muted-foreground);font-size:11px}
/* 主区 */
.sh-main{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--background)}
.sh-head{display:flex;align-items:center;gap:10px;padding:12px 18px 10px;border-bottom:1px solid var(--border)}
.sh-head h2{margin:0;font-size:16px;font-weight:600;border:0;padding:0;letter-spacing:-.01em}
.sh-head .sub{color:var(--muted-foreground);font-size:12px}
.sh-head .sp{flex:1}
.sh-scroll{flex:1;overflow:hidden;padding:14px 18px;display:flex;flex-direction:column;gap:14px;min-height:0}
/* 组件 */
.b{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--radius-md);font-size:12.5px;font-weight:500;background:var(--primary);color:var(--primary-foreground);border:1px solid transparent;white-space:nowrap}
.b.sec{background:var(--secondary);color:var(--secondary-foreground)}
.b.out{background:var(--background);color:var(--foreground);border-color:var(--input);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.b.gh{background:transparent;color:var(--foreground)}
.b.sm{height:28px;padding:0 10px;font-size:12px}.b.xs{height:24px;padding:0 8px;font-size:11.5px}
.b.icon{width:32px;padding:0}.b.sm.icon{width:28px}
.bd{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:500;background:var(--primary);color:var(--primary-foreground);white-space:nowrap}
.bd.sec{background:var(--secondary);color:var(--secondary-foreground)}
.bd.out{background:transparent;color:var(--foreground);border:1px solid var(--border)}
.bd.ok{background:#dcfce7;color:#15803d}.bd.warn{background:#fef3c7;color:#b45309}
.in{display:flex;align-items:center;gap:8px;height:32px;padding:0 10px;border:1px solid var(--input);border-radius:var(--radius-md);background:var(--background);color:var(--muted-foreground);font-size:12.5px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.tabs{display:inline-flex;background:var(--muted);border-radius:var(--radius-md);padding:3px;gap:2px}
.tabs span{padding:4px 11px;border-radius:calc(var(--radius-md) - 2px);font-size:12px;color:var(--muted-foreground);font-weight:500}
.tabs span.on{background:var(--background);color:var(--foreground);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.av{width:22px;height:22px;border-radius:50%;background:var(--muted);display:inline-grid;place-items:center;font-size:10px;font-weight:600;color:var(--foreground);flex:none}
.av.of{background:var(--primary);color:var(--primary-foreground)}
/* 能力卡片（玩法社区） */
.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cap{background:var(--card);color:var(--card-foreground);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);display:flex;flex-direction:column}
.cap .cv{aspect-ratio:16/9;display:grid;place-items:center;font-size:30px;position:relative;color:#fff}
.cap .cv .tl{position:absolute;left:8px;top:8px}
.cap .cv .tr{position:absolute;right:8px;top:8px}
.cap .bd-{padding:10px 11px 10px;display:flex;flex-direction:column;gap:5px;flex:1}
.cap .t{font-size:13px;font-weight:600;line-height:1.35}
.cap .d{font-size:11.5px;color:var(--muted-foreground);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cap .ft{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;font-size:11px;color:var(--muted-foreground)}
.cap .ft .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:84px;flex:none}
.cap .ft .st{margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap.wide{grid-column:span 2}
/* 封面占位：实际为图片，这里用渐变示意 */
.cv1{background:linear-gradient(135deg,#0ea5e9,#6366f1)}.cv2{background:linear-gradient(135deg,#f59e0b,#ef4444)}.cv3{background:linear-gradient(135deg,#10b981,#0d9488)}.cv4{background:linear-gradient(135deg,#8b5cf6,#ec4899)}
.cv5{background:linear-gradient(135deg,#64748b,#0f172a)}.cv6{background:linear-gradient(135deg,#f97316,#fbbf24)}.cv7{background:linear-gradient(135deg,#14b8a6,#3b82f6)}.cv8{background:linear-gradient(135deg,#e11d48,#7c3aed)}
.cv9{background:linear-gradient(135deg,#1f2937,#4b5563)}.cv10{background:linear-gradient(135deg,#06b6d4,#8b5cf6)}.cv11{background:linear-gradient(135deg,#84cc16,#22c55e)}.cv12{background:linear-gradient(135deg,#f43f5e,#f97316)}
/* 底部对话入口 */
.composer{margin-top:auto;border:1px solid var(--input);border-radius:var(--radius-xl);background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.04);padding:10px 12px 8px;display:flex;flex-direction:column;gap:8px}
.composer .ph{font-size:13px;color:var(--muted-foreground);min-height:20px}
.composer .row{display:flex;align-items:center;gap:6px}
.composer .row .sp{flex:1}
.composer .att{display:flex;gap:6px;flex-wrap:wrap}
.composer .chipf{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:var(--radius-md);padding:3px 8px;font-size:11.5px;background:var(--muted)}
.composer .hint{font-size:11px;color:var(--muted-foreground)}
/* 建议提示词滚动 */
.mq{overflow:hidden;position:relative;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq .trk{display:flex;gap:8px;width:max-content;animation:mq 38s linear infinite}
.mq.rev .trk{animation-direction:reverse}
.mq.slow .trk{animation-duration:52s}
.mq:hover .trk{animation-play-state:paused}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.pchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:12.5px;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.04);color:var(--foreground)}
.pchip .ic{font-size:13px}.pchip .hot{font-size:10px;color:var(--muted-foreground)}
/* 新建任务页 */
.welcome{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:18px 0 6px}
.welcome h3{margin:0;font-size:22px;font-weight:600;letter-spacing:-.02em}
.welcome p{margin:0;color:var(--muted-foreground);font-size:13px}
.hotrow{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.hot{border:1px solid var(--border);border-radius:var(--radius-lg);padding:10px 12px;background:var(--card);display:flex;gap:9px;align-items:flex-start;font-size:12.5px}
.hot .ic{font-size:18px;line-height:1}.hot b{display:block;font-weight:600;margin-bottom:1px}.hot small{color:var(--muted-foreground);font-size:11.5px;line-height:1.35;display:block}
/* 会话 */
.msg{display:flex;gap:10px;align-items:flex-start;max-width:640px}
.msg .bub{font-size:13px;line-height:1.6}
.msg.user{margin-left:auto;justify-content:flex-end}.msg.user .bub{background:var(--muted);border-radius:var(--radius-lg);padding:8px 12px}
.tool{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:var(--radius-md);padding:6px 10px;font-size:12px;color:var(--muted-foreground);max-width:640px;background:var(--card)}
.tool .st{margin-left:auto}
.ask{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);padding:12px 14px;max-width:640px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.ask .hd{font-size:11px;color:var(--muted-foreground);margin-bottom:4px}
.ask .q{font-size:13px;font-weight:500;margin-bottom:8px}
.ask .opt{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--border);border-radius:var(--radius-md);padding:7px 10px;margin:5px 0;font-size:12.5px;background:var(--background)}
.ask .opt.rec{border-color:var(--ring);box-shadow:0 0 0 3px oklch(0.708 0 0 / 25%)}
.ask .opt .cb{width:14px;height:14px;border:1.5px solid var(--muted-foreground);border-radius:4px;flex:none;margin-top:2px}
.ask .opt .cb.on{background:var(--primary);border-color:var(--primary)}
.ask .opt .d{display:block;color:var(--muted-foreground);font-size:11.5px}
.ask .acts{display:flex;gap:8px;margin-top:8px}
.cmp{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;max-width:640px;background:var(--card)}
.cmp .c{text-align:center}.cmp .c b{display:block;font-size:20px}.cmp .c small{color:var(--muted-foreground);font-size:11px}
.cmp .arr{color:var(--muted-foreground)}
.sep-line{font-size:11.5px;color:var(--muted-foreground);text-align:center;border-top:1px dashed var(--border);line-height:0;margin:14px 0}.sep-line span{background:var(--background);padding:0 8px}
/* 详情抽屉（Sheet） */
.sheet-wrap{position:relative}
.sheet{position:absolute;right:0;top:0;bottom:0;width:380px;background:var(--background);border-left:1px solid var(--border);box-shadow:-12px 0 40px rgba(0,0,0,.12);display:flex;flex-direction:column;z-index:3}
.sheet .cv{height:150px;display:grid;place-items:center;font-size:42px;color:#fff}
.sheet .bd-{padding:14px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden;flex:1;min-height:0}
.sheet .sec{flex:none}
.sheet h3{margin:0;font-size:16px;font-weight:600}
.sheet .pub{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-foreground)}
.sheet .sec{font-size:12.5px}.sheet .sec b{display:block;font-size:12px;color:var(--muted-foreground);font-weight:500;margin-bottom:3px}
.sheet ol{margin:0;padding-left:18px;font-size:12.5px}.sheet ol li{margin:2px 0}
.sheet .ft{margin-top:auto;display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--border)}
.dim{position:absolute;inset:0;background:rgba(0,0,0,.25);z-index:2}
.rv{display:flex;gap:8px;align-items:flex-start;font-size:12px;padding:8px 0;border-top:1px solid var(--border)}
.rv .tx{flex:1}.rv .tx small{display:block;color:var(--muted-foreground);font-size:11px}
/* 发布表单 */
.form{display:flex;flex-direction:column;gap:10px;max-width:640px;border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;background:var(--card)}
.form .f{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:start;font-size:12.5px}
.form .f label{color:var(--muted-foreground);padding-top:6px}
.form .covers{display:flex;gap:8px}.form .covers div{width:88px;aspect-ratio:16/9;border-radius:var(--radius-md);display:grid;place-items:center;color:#fff;font-size:18px;border:2px solid transparent}
.form .covers div.on{border-color:var(--ring)}
.form .ta{border:1px solid var(--input);border-radius:var(--radius-md);padding:8px 10px;font-size:12.5px;line-height:1.5;min-height:56px;background:var(--background)}
.form .acts{display:flex;gap:8px;justify-content:flex-end}
.form .note{font-size:11.5px;color:var(--muted-foreground);background:var(--muted);border-radius:var(--radius-md);padding:8px 10px}
/* 步骤器 */
.steps{display:flex;gap:6px;margin:0 0 8px}
.steps button{font:12.5px var(--font);padding:5px 12px;border-radius:999px;border:1px solid var(--border-2);background:var(--surface);color:var(--text-2);cursor:pointer}
.steps button.on{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.step{display:none}.step.on{display:flex;flex-direction:column;gap:12px}
/* 规范表 */
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--border);vertical-align:middle;margin-right:6px}
@media (max-width:860px){.cgrid{grid-template-columns:repeat(2,1fr)}.hotrow{grid-template-columns:1fr 1fr}.sh-side{display:none}.sheet{width:100%}}