:root{
    --bg:#f6f8fb;
    --panel:#ffffff;
    --border:#dfe7f1;
    --text:#1f2a37;
    --muted:#6b7280;
    --accent:#0a84ff;
    --shadow:0 2px 10px rgba(15,23,42,.06);
    --radius:14px;
  }
  
  *{ box-sizing:border-box; }
  body{
    margin:0;
    font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
  }
  
  .topbar{
    position:sticky; top:0; z-index:10;
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 16px;
    background:var(--panel);
    border-bottom:1px solid var(--border);
  }
  
  .brand{ font-weight:750; }
  .tools{ display:flex; gap:10px; align-items:center; }
  .tools input{
    width:320px; max-width:55vw;
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:12px;
    outline:none;
  }
  .tools button{
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:#fff;
    cursor:pointer;
  }
  
  .wrap{ padding:16px; }
  .msg{ color:var(--muted); margin:0 0 10px; }
  
  .list{ display:flex; flex-direction:column; gap:10px; }
  
  .card{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:12px 14px;
  }
  .card .title{
    color:var(--accent);
    font-weight:750;
    margin-bottom:6px;
    word-break:break-word;
  }
  .card .meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    color:var(--muted);
    font-size:12px;
  }