:root { --bg:#f6f6f3; --panel:#fff; --fg:#1d1d1b; --muted:#6b6b66; --line:#e3e3de; --soft:#f0f0eb;
          --accent:#2f5bd3; --accent-soft:#e8eefc; --high:#c4312b; --med:#b7791f; --low:#4a7c59; --ok:#2e7d4f; --bad:#c4312b; }
  @media (prefers-color-scheme: dark) { :root { --bg:#141413; --panel:#1d1d1b; --fg:#ecece8; --muted:#a0a09a; --line:#33332f; --soft:#262624;
          --accent:#7d9bff; --accent-soft:#232a40; --high:#ff7a70; --med:#e3b25a; --low:#7fbf8f; --ok:#7fcf9a; --bad:#ff7a70; } }
  * { box-sizing:border-box }
  body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--bg); color:var(--fg) }
  header { position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line); padding:10px 16px }
  .top { display:flex; gap:10px; align-items:center; flex-wrap:wrap; max-width:1280px; margin:auto }
  .top h1 { margin:0; font-size:19px } .grow { flex:1 }
  .pill { font-size:12px; padding:2px 8px; border:1px solid var(--line); border-radius:99px; color:var(--muted); white-space:nowrap }
  nav { display:flex; gap:4px; max-width:1280px; margin:8px auto 0; overflow-x:auto }
  nav button { background:transparent; color:var(--muted); border:0; border-bottom:2px solid transparent; border-radius:0; padding:6px 10px; white-space:nowrap }
  nav button[aria-selected=true] { color:var(--fg); border-bottom-color:var(--accent); font-weight:600 }
  main { max-width:1280px; margin:auto; padding:16px }
  .grid2 { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px }
  .gridTrace { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:16px }
  @media (max-width:860px) { .grid2, .gridTrace { grid-template-columns:1fr } }
  .card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px; min-width:0 }
  .card + .card { margin-top:16px }
  h2 { font-size:15px; margin:0 0 10px; display:flex; align-items:center; gap:8px }
  h2 .grow { flex:1 }
  textarea, select, input { width:100%; font:inherit; color:inherit; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px }
  textarea { resize:vertical }
  button { font:inherit; border:0; border-radius:8px; padding:7px 13px; background:var(--accent); color:#fff; cursor:pointer }
  button.ghost { background:transparent; color:var(--accent); border:1px solid var(--line) }
  button.sm { padding:2px 9px; font-size:13px }
  button:disabled { opacity:.5; cursor:default }
  .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
  .meta { color:var(--muted); font-size:13px }
  .tag { font-size:12px; border:1px solid var(--line); border-radius:99px; padding:0 7px; white-space:nowrap }
  .tag.llm { color:var(--accent); border-color:var(--accent) } .tag.rules { color:var(--med); border-color:var(--med) } .tag.python { color:var(--low); border-color:var(--low) }
  .dot { display:inline-block; width:9px; height:9px; border-radius:50%; flex:none } .high{background:var(--high)} .medium{background:var(--med)} .low{background:var(--low)}
  pre { white-space:pre-wrap; word-break:break-word; margin:0; font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace }
  .hidden { display:none !important }
  /* Chat */
  #chatLog { height:min(58vh,560px); overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px 2px 10px }
  .msg { max-width:88%; padding:9px 12px; border-radius:12px; white-space:pre-wrap; word-break:break-word }
  .msg.user { align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px }
  .msg.bot { align-self:flex-start; background:var(--soft); border-bottom-left-radius:4px }
  .msg details { margin-top:6px; font-size:13px; color:var(--muted) }
  .msg details pre { margin-top:4px; padding:6px 8px; background:var(--panel); border-radius:6px; color:var(--fg) }
  .chips { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 }
  .chips button { background:var(--accent-soft); color:var(--accent); font-size:13px; padding:4px 10px; border-radius:99px }
  #chatInput { min-height:44px; max-height:160px }
  .typing { color:var(--muted); font-style:italic }
  /* Task list */
  .task { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start; padding:9px 0; border-top:1px solid var(--line) }
  .task:first-child { border-top:0 }
  .task .dot { margin-top:7px }
  /* Trace */
  .traceItem { padding:9px 10px; border-radius:8px; cursor:pointer; border:1px solid transparent }
  .traceItem:hover { background:var(--soft) } .traceItem.sel { border-color:var(--accent); background:var(--accent-soft) }
  #traceList { max-height:62vh; overflow-y:auto }
  .step { position:relative; padding:0 0 16px 22px; border-left:2px solid var(--line); margin-left:6px }
  .step:last-child { border-left-color:transparent }
  .step::before { content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--accent) }
  .step.err::before { background:var(--bad) }
  .step pre { margin-top:6px; padding:8px; background:var(--soft); border-radius:8px; max-height:260px; overflow:auto }
  /* Calendar */
  .week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px }
  @media (max-width:980px) { .week { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) } }
  .day { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:8px; min-height:160px }
  .day.today { border-color:var(--accent) } .day.over { background:var(--accent-soft) }
  .day h3 { font-size:13px; margin:0 0 6px; color:var(--muted) } .day.today h3 { color:var(--accent) }
  .ev { background:var(--soft); border-radius:8px; padding:6px 8px; margin-bottom:6px; font-size:13px; cursor:grab; border-left:3px solid var(--low) }
  .ev.high { border-left-color:var(--high) } .ev.medium { border-left-color:var(--med) }
  .ev .t { font-weight:600 } .ev button { float:right; margin:-2px -4px 0 4px }
  /* Config */
  label { display:block; font-size:13px; color:var(--muted); margin:12px 0 4px }
  .cfgPrompt { min-height:130px; font:13px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace }
  .scores { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; margin:10px 0 }
  .score { background:var(--soft); border-radius:10px; padding:10px }
  .score b { display:block; font-size:22px; font-variant-numeric:tabular-nums }
  table { width:100%; border-collapse:collapse; font-size:13px }
  td, th { text-align:left; padding:6px 8px; border-top:1px solid var(--line); vertical-align:top }
  .tablewrap { overflow-x:auto }
  .ok { color:var(--ok) } .bad { color:var(--bad) }
  .notice { background:var(--accent-soft); color:var(--fg); border-radius:8px; padding:8px 10px; font-size:13px; margin-bottom:10px }
  /* Login */
  #login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px }
  .loginCard { width:100%; max-width:380px; display:flex; flex-direction:column; gap:4px }
  .loginCard h1 { margin:0; font-size:22px } .loginCard h2 { margin:14px 0 0 }
  .loginCard button { margin-top:10px } .loginCard .bad { min-height:1.2em; margin:6px 0 0; font-size:13px }