body {
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    color: #243038;
    background: #f3efe6;
    min-height: 100vh;
}
body.logged-in { display: flex; }
.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: #1f3b4d;
    color: #e7eef2;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.sidebar-header {
    padding: 24px 20px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #e0b15a;
    border-bottom: 1px solid #2d5166;
}
.sidebar nav { display: flex; flex-direction: column; flex-grow: 1; }
.nav-link {
    display: block;
    padding: 13px 20px;
    color: #c5d4de;
    text-decoration: none;
    border-bottom: 1px solid #2d5166;
}
.nav-link:hover, .nav-link.active {
    background: #2a5168;
    color: #fff;
    box-shadow: inset 4px 0 0 #e0b15a;
}
.nav-logout { margin-top: auto; color: #f0c7b0; }
.main { flex-grow: 1; padding: 36px 28px; }
body.logged-out .main { padding: 0; }
.card {
    background: #fff;
    border: 1px solid #e4dccb;
    border-radius: 12px;
    padding: 28px;
    max-width: 880px;
    box-shadow: 0 8px 24px rgba(36, 48, 56, 0.05);
}
h1 { margin: 0 0 12px; font-size: 1.6rem; }
.muted { color: #6d6458; margin-top: 0; }
label { display: block; font-size: 13px; font-weight: 650; margin-bottom: 6px; }
input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    margin: 0 0 16px;
    border: 1px solid #d9d0c2;
    border-radius: 6px;
    font-size: 15px;
}
input:focus { outline: none; border-color: #c4843a; box-shadow: 0 0 0 3px rgba(196, 132, 58, 0.15); }
.btn {
    border: 0;
    border-radius: 6px;
    padding: 12px 20px;
    font-weight: 700;
    cursor: pointer;
}
.btn.save { background: #c4843a; color: #fff; }
.btn.save:hover { background: #a86c2c; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; justify-content: flex-end; }
.data-table { width: 100%; border-collapse: collapse; margin-top: 22px; }
.data-table th, .data-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #eee6d8; }
.data-table th { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #6d6458; }
.data-table a { color: #1f3b4d; }
.alert {
    background: #fff4ec;
    color: #8a3d16;
    border: 1px solid #f0d2bc;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 16px;
}
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.login-card { width: 100%; max-width: 380px; }
.login-card h1 { color: #c4843a; }
.login-card .btn { width: 100%; }
@media (max-width: 720px) {
    body.logged-in { display: block; }
    .sidebar { width: 100%; min-height: 0; }
    .form-grid { grid-template-columns: 1fr; }
    .main { padding: 20px 14px; }
}

.nav-parent { position: relative; }
.nav-parent::after {
    content: "▸";
    position: absolute;
    right: 16px;
}
.nav-parent.open::after { transform: rotate(90deg); }
.submenu { background: #183244; }
.submenu[hidden] { display: none; }

.table-wrap { overflow-x: auto; }
body.logged-in .card { max-width: none; }
.data-table td.num, .data-table td { white-space: nowrap; }
.sidebar nav { overflow-y: auto; }