:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin:0; background:#fafafa; color:#111; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
.topbar { background:#fff; border-bottom:1px solid #e8e8e8; position:sticky; top:0; }
.topbar .wrap { display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:700; }
nav a { margin-left:12px; text-decoration:none; color:#111; }
h1 { margin-top: 12px; }
h2 { margin: 18px 0 8px; font-size: 1.1rem; }
.card { background:#fff; border:1px solid #e8e8e8; border-radius:10px; padding:12px; margin: 12px 0; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
label { display:flex; flex-direction:column; gap:6px; min-width: 220px; }
input, select, textarea, button { padding:10px; border:1px solid #ddd; border-radius:8px; font: inherit; background:#fff; }
button { cursor:pointer; }
.table { width:100%; border-collapse: collapse; background:#fff; border:1px solid #e8e8e8; border-radius:10px; overflow:hidden; }
.table th, .table td { padding:10px; border-bottom:1px solid #eee; vertical-align: middle; }
.table th { background:#f6f6f6; text-align:left; }
.table img { border-radius:6px; }
.right { text-align:right; }
.btn { display:inline-block; padding:8px 10px; border:1px solid #ddd; border-radius:8px; text-decoration:none; color:#111; background:#fff; }
.btn.danger { border-color:#f2c4c4; }
.inline { display:inline; }
.flash { background:#fff6cc; border:1px solid #ffe08a; padding:10px; border-radius:8px; }
.muted { color:#666; }
.num { text-align: right; white-space: nowrap; }