.page{max-width:1080px;margin:0 auto;padding:28px 20px 48px}.header h1{margin:0 0 8px;font-size:28px;letter-spacing:-.03em}.header p{margin:0;color:var(--muted);font-size:14px}.layout{display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:20px;margin-top:24px}@media(max-width:800px){.layout{grid-template-columns:1fr}}.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.seg{display:flex;flex-wrap:wrap;gap:6px;padding:4px;background:var(--chip);border-radius:10px}.seg button{border:0;background:transparent;color:var(--muted);padding:8px 12px;border-radius:8px;cursor:pointer}.seg button.active{background:#fff;color:var(--ink);box-shadow:0 1px 2px #10182814}.body-wrap{display:flex;justify-content:center;min-height:520px}.side h2{margin:0 0 12px;font-size:16px}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{background:var(--brand-soft);color:#b42318;border-radius:999px;padding:6px 10px;font-size:13px}.empty{color:var(--muted);font-size:14px}.clear{margin-top:16px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}.note{margin-top:18px;color:var(--muted);font-size:13px;line-height:1.5}:root{--bg:#f4f6f8;--card:#fff;--ink:#1c2430;--muted:#5b6775;--line:#e4e8ee;--brand:#e24b4a;--brand-soft:#fdecec;--chip:#eef2f6}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:SF Pro SC,PingFang SC,Noto Sans SC,system-ui,sans-serif;background:var(--bg);color:var(--ink)}button{font:inherit}