:root { --admin-sidebar-width: 272px; --admin-navy: #17233c; --admin-primary: #d94357; }
body { background: #f5f7fb; color: #1f2937; }
.auth-body { background: radial-gradient(circle at top, #fff 0, #f5f7fb 45%, #e9edf5 100%); }
.min-vh-75 { min-height: 75vh; }
.login-mark, .brand-mark { display: inline-grid; place-items: center; border-radius: 14px; background: var(--admin-primary); color: #fff; font-weight: 800; }
.login-mark { width: 58px; height: 58px; font-size: 1.6rem; }
.admin-shell { min-height: 100vh; }
.admin-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1030; width: var(--admin-sidebar-width); background: var(--admin-navy); color: #fff; }
.sidebar-inner { min-height: 100%; }
.brand { display: flex; align-items: center; gap: .75rem; padding: 1.5rem; color: #fff; }
.brand-mark { width: 40px; height: 40px; flex: 0 0 auto; }
.brand small { display: block; color: rgba(255,255,255,.55); font-weight: 400; }
.admin-sidebar .nav-link, .offcanvas .nav-link { color: rgba(255,255,255,.72); padding: .7rem .9rem; }
.admin-sidebar .nav-link:hover, .offcanvas .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.admin-sidebar .nav-link.active, .offcanvas .nav-link.active { color: #fff; background: var(--admin-primary); }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.12); }
.admin-main { min-width: 0; }
.page-header { padding: 1.5rem; background: #fff; border-bottom: 1px solid #e5e7eb; }
.page-content { padding: 1.5rem; }
.mobile-bar { background: var(--admin-navy); color: #fff; }
.card { border-radius: .8rem; }
.table thead th { background: #f8fafc; color: #64748b; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.form-section-title { padding-bottom: .75rem; border-bottom: 1px solid #e5e7eb; }
.image-preview { display: block; width: 120px; height: 84px; object-fit: cover; border-radius: .5rem; background: #eef2f7; }
.dynamic-row { background: #f8fafc; border: 1px solid #e5e7eb; border-radius: .6rem; padding: .75rem; }
.sticky-actions { position: sticky; bottom: 1rem; z-index: 100; width: fit-content; margin-left: auto; padding: .75rem; border: 1px solid #e5e7eb; border-radius: .75rem; background: rgba(255,255,255,.94); box-shadow: 0 .4rem 1.5rem rgba(15,23,42,.12); backdrop-filter: blur(8px); }
.richtext-editor { overflow: hidden; border: 1px solid #dee2e6; border-radius: .375rem; background: #fff; }
.richtext-editor:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13,110,253,.25); }
.richtext-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .5rem; border-bottom: 1px solid #dee2e6; background: #f8f9fa; }
.richtext-toolbar .btn { min-width: 2.25rem; border-color: #dee2e6; }
.richtext-toolbar .btn.active { color: #fff; background: var(--admin-navy); }
.richtext-surface, .richtext-source { min-height: var(--editor-min-height, 280px); padding: .75rem; border: 0; outline: 0; }
.richtext-source { display: block; width: 100%; resize: vertical; border-radius: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.richtext-source[hidden], .richtext-surface[hidden] { display: none; }
.richtext-surface img, .content-image { max-width: 100%; height: auto; }
@media (min-width: 992px) { .admin-main { margin-left: var(--admin-sidebar-width); } .page-header, .page-content { padding-left: 2rem; padding-right: 2rem; } }