:root{
  --bg:#f2f3f5; --panel:#ffffff; --accent:#c62828; --muted:#ececec; --text:#111;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
.app{display:flex;min-height:100vh;}
.sidebar{width:220px;background:var(--muted);padding:18px;border-right:3px solid var(--accent);display:flex;flex-direction:column;gap:12px;}
.brand{font-weight:800;color:var(--text);font-size:18px;margin-bottom:6px;}
.menu-item{background:transparent;border:2px solid var(--accent);padding:12px;text-align:center;font-weight:800;color:var(--text);text-decoration:none;border-radius:8px;display:block;}
.menu-item:hover,.menu-item.active{background:var(--accent);color:#fff;transition:0.15s;}
.main{flex:1;padding:28px;}
.card{background:var(--panel);border-radius:10px;padding:18px;box-shadow:0 6px 18px rgba(0,0,0,0.06);border:2px solid rgba(0,0,0,0.03);}
.header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.header-top h1{font-size:20px;margin:0;font-weight:900;}
.btn-add{background:#fff;border:2px solid var(--accent);color:var(--text);padding:8px 14px;font-weight:800;border-radius:8px;text-decoration:none;}
.btn-add:hover{background:var(--accent);color:#fff;}
.btn-secondary{background:#fff;border:2px solid #bbb;color:#111;border-radius:8px;font-weight:800;text-decoration:none;padding:8px 14px;}
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;margin-top:10px;}
thead th{background:var(--accent);color:#fff;font-weight:800;padding:12px;text-align:left;}
tbody td{padding:12px;border-bottom:1px solid #eee;}
tr:hover td{background:#fafafa;}
.action-btn{padding:6px 10px;border-radius:6px;font-weight:800;text-decoration:none;margin-right:6px;}
.edit-btn{background:#fff;border:2px solid #f0ad4e;color:#111;}
.delete-btn{background:#fff;border:2px solid var(--accent);color:var(--accent);}
.edit-btn:hover{background:#f0ad4e;color:#fff;}
.delete-btn:hover{background:var(--accent);color:#fff;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.form-row-full{grid-column:1 / -1;}
label{display:block;font-weight:700;margin-bottom:6px;}
input[type="text"],input[type="email"],input[type="number"],input[type="date"],textarea,select{width:100%;padding:10px;border:2px solid #ddd;border-radius:8px;font-size:14px;background:#fff;}
.btn-primary{margin-top:12px;padding:10px 14px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-weight:800;cursor:pointer;}
@media (max-width:900px){.form-grid{grid-template-columns:1fr}.sidebar{display:none}}