/* assets/styles.css */
:root{ --bg:#faf8f6; --fg:#161513; --muted:#6b6b6b; --card:#ffffff; --border:#e7e3df; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif; color:var(--fg); background:var(--bg); }
.container{ max-width:1100px; margin:0 auto; padding:16px; }
.top-banner{ background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.top-banner h1{ margin:0 0 8px; font-size:22px; }
.top-banner .note{ margin:0; color:var(--muted); font-size:14px; }
.toolbar{ margin-top:12px; display:flex; gap:12px; align-items:center; }
.search{ flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; font-size:14px; outline:none; }
.rows-count{ font-size:13px; color:var(--muted); }
.table-wrap{ background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow: 0 1px 0 rgba(0,0,0,.03); margin-top:12px; }
table{ width:100%; border-collapse:collapse; }
thead th{ text-align:left; font-size:14px; padding:12px; background:#f2f1ef; border-bottom:1px solid var(--border); cursor:pointer; user-select:none; }
tbody td{ padding:12px; border-bottom:1px solid var(--border); font-size:14px; }
tbody tr:hover{ background:#fbfbfb; }
td.name{ font-weight:500; }
.error{ background:#fff3f3; border:1px solid #ffd0d0; color:#7a1f1f; padding:12px 14px; border-radius:12px; margin:12px 0 16px; }