:root { --sidebar-width: 272px; --ink: #28384C; --muted: #6b7280; --line: #e5e7eb; --surface: #fff; --page: #f5f7fa; --brand: #FF0000; --brand-soft: #fff0f0; --bs-primary: #FF0000; --bs-primary-rgb: 255,0,0; --bs-body-color: #28384C; --bs-heading-color: #28384C; --bs-link-color: #cc0000; --bs-link-hover-color: #a60000; }
* { box-sizing: border-box; }
body { color: var(--ink); background: var(--page); }
h1,h2,h3,h4,h5,h6 { color: #28384C; }
.btn-primary { --bs-btn-bg: #FF0000; --bs-btn-border-color: #FF0000; --bs-btn-hover-bg: #d90000; --bs-btn-hover-border-color: #d90000; --bs-btn-active-bg: #b80000; --bs-btn-active-border-color: #b80000; --bs-btn-disabled-bg: #FF0000; --bs-btn-disabled-border-color: #FF0000; }
.btn-outline-primary { --bs-btn-color: #cc0000; --bs-btn-border-color: #FF0000; --bs-btn-hover-bg: #FF0000; --bs-btn-hover-border-color: #FF0000; --bs-btn-active-bg: #d90000; --bs-btn-active-border-color: #d90000; }
.form-check-input:checked { background-color: #FF0000; border-color: #FF0000; }
.form-control:focus,.form-select:focus { border-color: #ff8080; box-shadow: 0 0 0 .25rem rgba(255,0,0,.2); }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1040; width: var(--sidebar-width); display: flex; flex-direction: column; background: #17202b; color: #e8edf3; box-shadow: 8px 0 24px rgba(15,23,42,.08); }
.sidebar-brand { display: flex; align-items: center; min-height: 72px; padding: .75rem 1.25rem; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand-logo { display: block; width: 100%; max-width: 205px; height: 42px; padding: 8px 10px; object-fit: contain; background: #fff; border-radius: 9px; }
.sidebar-user { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-user strong,.sidebar-user small { display: block; max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user small { color: #9aa8b8; font-size: .75rem; }
.user-avatar { display: grid; flex: 0 0 36px; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #324153; font-weight: 700; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem; }
.sidebar-nav a,.sidebar-footer a,.sidebar-footer button { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 42px; padding: .6rem .75rem; border: 0; border-radius: 8px; color: #cbd5e1; background: transparent; text-decoration: none; text-align: left; }
.sidebar-nav a:hover,.sidebar-nav a.active,.sidebar-footer a:hover,.sidebar-footer a.active,.sidebar-footer button:hover { color: #fff; background: rgba(255,255,255,.09); }
.sidebar-nav a.active { background: var(--brand); }
.nav-section { display: block; padding: 1rem .75rem .35rem; color: #718095; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.nav-badge { margin-left: auto; padding: .12rem .45rem; border-radius: 999px; background: rgba(255,255,255,.15); font-size: .7rem; }
.sidebar-footer { padding: .75rem; border-top: 1px solid rgba(255,255,255,.08); }
.app-content { min-height: 100vh; margin-left: var(--sidebar-width); }
.app-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; justify-content: space-between; min-height: 72px; padding: .75rem 2rem; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.credit-pill { padding: .4rem .7rem; color: #b30000; background: var(--brand-soft); border-radius: 999px; font-size: .85rem; font-weight: 700; text-decoration: none; }
.app-main { max-width: 1600px; padding: 2rem; }
.sidebar-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 1060; width: 42px; height: 42px; padding: 7px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.sidebar-toggle img { width: 100%; height: 100%; object-fit: contain; }
.sidebar-backdrop { display: none; position: fixed; inset: 0; z-index: 1030; background: rgba(15,23,42,.55); }
.public-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem max(1rem,calc((100% - 1140px)/2)); background: #17202b; }
.public-header a { color: #fff; text-decoration: none; margin-left: 1rem; }.public-header .brand-link { display: block; width: min(260px,55vw); margin: 0; padding: 7px 10px; background: #fff; border-radius: 9px; }.public-header .brand-link img { display: block; width: 100%; height: 34px; object-fit: contain; }
.table { border-color: var(--line); }.card { border-color: var(--line); box-shadow: 0 2px 10px rgba(15,23,42,.035); }
.scroll-section { scroll-margin-top: 92px; }
@media (max-width: 991.98px) { .sidebar { transform: translateX(-100%); transition: transform .2s ease; }.sidebar-open .sidebar { transform: translateX(0); }.sidebar-open .sidebar-backdrop { display: block; }.sidebar-toggle { display: block; }.app-content { margin-left: 0; }.app-topbar { padding-left: 4.5rem; }.app-main { padding: 1.25rem; } }