:root{
  --bg:#f7f8fa; --panel:#fff; --text:#0f172a; --muted:#64748b; --line:#e5e7eb;
  --primary:#2563eb; --primary-600:#1d4ed8; --badge:#0ea5e9;
}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
main{display:grid;grid-template-columns:240px 1fr;min-height:100%}
aside.nav{background:#0b1220;color:#e2e8f0;padding:16px}
aside.nav h1{font-size:16px;margin:0 0 12px}
aside.nav nav{display:flex;flex-direction:column;gap:8px}
aside.nav button{all:unset;cursor:pointer;padding:10px 12px;border:1px solid #1f2937;border-radius:10px}
aside.nav button.active, aside.nav button:hover{background:#eceff8;color:#0f172a}

#app{background:linear-gradient(180deg,#ffffff,#f3f6ff);padding:16px}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
header h2{margin:0;font-size:22px}
.badge{background:var(--badge);color:#fff;border-radius:9999px;padding:4px 10px;font-size:12px}

.page{display:none}
.page.show{display:block}
h3{margin:14px 0 8px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field input,.field textarea, .toolbar input{
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:#fff; color:var(--text);
}
.field small{color:var(--muted)}
.span2{grid-column:span 2}
.actions{display:flex;gap:8px}
.primary{background:var(--primary);color:#fff;border:none;border-radius:10px;padding:10px 14px;cursor:pointer}
.primary:hover{background:var(--primary-600)}

.table-wrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}
.toolbar{display:flex;justify-content:flex-end;margin:8px 0}