body { margin: 0; background: #eef1f4; color: #1f2a33; font: 14px/1.5 "Malgun Gothic", sans-serif; }
.hodu-admin { display: none; min-height: 100vh; }
.adm-side { width: 220px; background: #1d2833; color: #d7dee6; padding: 18px 12px; }
.adm-side strong { display: block; color: #fff; margin: 0 0 16px; }
.adm-side p { margin: 16px 8px 6px; color: #8ea0b3; font-size: 12px; }
.adm-side button { display: block; width: 100%; text-align: left; background: transparent; color: #d7dee6; border: 0; margin: 2px 0; padding: 8px; cursor: pointer; }
.adm-side button.on { background: #2f5d8c; color: #fff; }
.adm-main { flex: 1; padding: 28px; }
.muted { color: #66788a; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.card { background: #fff; border-radius: 8px; padding: 16px; }
.card span { display: block; color: #66788a; margin-top: 4px; }
table { width: 100%; border-collapse: collapse; background: #fff; margin-top: 12px; }
th, td { border-bottom: 1px solid #e6ebf0; padding: 8px; text-align: left; }
td img { width: 72px; height: 40px; object-fit: cover; background: #f3f5f7; }
.id-btn { background: transparent; color: #2f5d8c; padding: 0; }
.adm-main, .adm-main h1, .adm-main p, .adm-main th, .adm-main td, .adm-main label, .adm-main .card, .adm-main .card span { color: #1f2a33; }
.adm-main .muted, .adm-main .card span { color: #5c6b7a; }
.adm-main input, .adm-main textarea, .login input { width: 100%; box-sizing: border-box; background: #fff; color: #1f2a33; border: 1px solid #c5ced6; }
.adm-main button:not(.id-btn) { background: #2f5d8c; color: #fff; }
.login { background: #fff; color: #1f2a33; }
.login label, .login h1 { color: #1f2a33; }
.login input { background: #fff; color: #1f2a33; border: 1px solid #c5ced6; }