:root { --ink: #242424; --muted: #656565; --line: #e5e5e5; }
body.bg-light { background: #d9dad8 !important; color: var(--ink); font-family: 'Segoe UI', Arial, sans-serif; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 15% 12%, #f4f4f2 0, transparent 48%), radial-gradient(ellipse at 85% 80%, #bcbebb 0, transparent 48%), linear-gradient(125deg, transparent 35%, #eeeeec99 35%, #eeeeec99 58%, transparent 58%); }
.app-shell { margin: 26px; padding: 18px; gap: 22px; min-height: calc(100vh - 52px); border: 1px solid #ffffffbd; border-radius: 38px; background: #eeeeee60; box-shadow: 0 20px 65px #3535350c; }
.app-menu { top: 44px; height: calc(100vh - 88px); width: 224px; flex-basis: 224px; border-radius: 28px; background: #fdfdfdf2; color: var(--ink); box-shadow: none; }
.app-menu-header { min-height: 108px; padding: 23px 18px; border: 0; }
.app-menu-brand img { filter: brightness(0); width: 150px; }
.menu-toggle { border: 1px solid var(--line); color: #333; background: #f5f5f5; border-radius: 50%; width: 28px; flex-basis: 28px; height: 28px; font-size: 1.4rem; }
.menu-toggle:hover, .menu-toggle:focus-visible { background: #dedede; }
.app-menu-nav { order: 1; gap: 7px; padding: 14px; overflow-y: auto; }
.app-menu-account { order: 2; margin: auto 14px 14px; padding: 12px 0 0; background: transparent; border-top: 1px solid var(--line); border-bottom: 0; }
.app-menu-link, .menu-user { color: #414141; font-size: .87rem; border-radius: 24px; min-height: 44px; gap: 8px; }
.menu-user { color: var(--muted); }
.menu-icon { color: inherit; background: transparent; }
.app-menu-link:hover, .app-menu-link:focus-visible { color: #222; background: #efefef; }
.app-menu-link.is-active { color: #fff; background: #262626; }
.app-content { padding: 6px 10px 20px 0; }
.workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px 26px; }
.workspace-header > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.workspace-kicker { font-size: .65rem; letter-spacing: .22em; font-weight: 700; color: #646464; }
.workspace-context { font-size: .85rem; color: #555; }
.workspace-profile { display: flex; gap: 10px; align-items: center; font-size: .85rem; }
.profile-avatar { display: grid; place-items: center; width: 38px; height: 38px; background: #262626; color: white; border-radius: 50%; font-weight: 600; }
.app-content main.container-fluid { padding-top: 8px !important; }
h1, h2, h3 { letter-spacing: -.035em; font-weight: 600; }
h1.h2, h1.h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
.btn { border-radius: 24px; padding: .6rem 1.15rem; font-size: .85rem; font-weight: 500; }
.btn-sm { padding: .35rem .8rem; font-size: .78rem; }
.btn-primary { --bs-btn-bg: #252525; --bs-btn-border-color: #252525; --bs-btn-hover-bg: #414141; --bs-btn-hover-border-color: #414141; --bs-btn-active-bg: #111; --bs-btn-active-border-color: #111; }
.btn-outline-primary { --bs-btn-color: #262626; --bs-btn-border-color: #bcbcbc; --bs-btn-hover-bg: #262626; --bs-btn-hover-border-color: #262626; --bs-btn-active-bg: #262626; --bs-btn-active-border-color: #262626; }
a { color: #353535; } a:hover { color: #080808; }
.card, .dashboard-kpi, .dashboard-panel { border: 1px solid #ffffffa6; border-radius: 26px; background: #fdfdfdf5; box-shadow: 0 8px 24px #25252504 !important; }
.card-body { padding: 26px; } .card > .table-responsive { border-radius: 26px; }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: #f0f0f0; border-color: #ededed; font-size: .88rem; }
.table > :not(caption) > * > * { padding: 16px 20px; }
.table thead th { color: #686868; font-size: .72rem; letter-spacing: .045em; font-weight: 600; background: #f7f7f7; }
.table tbody tr:last-child td { border-bottom: 0; }
.badge { border-radius: 8px; padding: .45em .7em; font-weight: 500; }
.badge.bg-success { background: #e6eee8 !important; color: #31523c; }
.form-control, .form-select { border-radius: 12px; border-color: #dedede; min-height: 43px; background-color: #fafafa; }
.form-label { font-size: .83rem; font-weight: 600; color: #555; }
.form-control:focus, .form-select:focus { border-color: #858585; box-shadow: 0 0 0 3px #24242412; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid #555; outline-offset: 3px; }
.form-check-input:checked { background-color: #262626; border-color: #262626; }
.alert { border-radius: 16px; }
.dashboard-kpi { padding: 24px; min-height: 160px; }
.dashboard-kpi strong { font-size: 2.5rem; color: #222; font-weight: 600; letter-spacing: -.06em; margin: 9px 0; }
.dashboard-kpi-label { font-size: .7rem; letter-spacing: .04em; }
.dashboard-kpi-highlight { border-top: 1px solid #ffffffa6; background: #252525; border-color: #252525; }
.dashboard-kpi-highlight strong { color: #fff; }
.dashboard-kpi-highlight .dashboard-kpi-label, .dashboard-kpi-highlight small { color: #d4d4d4; }
.dashboard-panel { padding: 26px; }
.welcome-heading { margin: 8px 0 28px; } .welcome-heading h1 { font-size: clamp(1.9rem, 3vw, 2.8rem); }
.welcome-heading p { color: #626262; margin: 10px 0 0; }
.welcome-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; }
.welcome-feature { background: #252525; color: white; padding: 34px; border-radius: 28px; display: flex; flex-direction: column; align-items: flex-start; min-height: 285px; }
.welcome-feature .dashboard-eyebrow { color: #bcbcbc; }
.welcome-feature h2 { font-size: 2rem; margin: 12px 0; max-width: 390px; }
.welcome-feature p { color: #cacaca; max-width: 380px; font-size: .92rem; }
.welcome-feature .btn { margin-top: auto; background: white; color: #222; }
.welcome-secondary { background: #ffffff65; border: 1px solid #fff; border-radius: 28px; padding: 32px; display: flex; flex-direction: column; align-items: flex-start; }
.welcome-secondary h2 { margin: 16px 0; font-size: 1.55rem; } .welcome-secondary p { color: #626262; } .welcome-secondary .btn { margin-top: auto; }
.quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.quick-link { padding: 25px; border-radius: 24px; background: #fff; text-decoration: none; display: flex; flex-direction: column; gap: 12px; border: 1px solid #fff; transition: transform .15s, border-color .15s; }
.quick-link:hover { transform: translateY(-3px); border-color: #aaa; } .quick-link small { color: #666; line-height: 1.6; }
.quick-link .menu-icon { width: 36px; height: 36px; border: 1px solid #ddd; border-radius: 12px; margin-bottom: 8px; }
.home-section-title { font-size: 1.2rem; margin: 30px 0 18px; }
.login-page .card { overflow: hidden; margin-top: 5vh; } .login-brand { background: #252525; padding: 30px; }
@media (min-width: 1600px) { .app-shell { max-width: 1560px; margin-inline: auto; } }
@media (max-width: 991px) { .app-shell { margin: 12px; padding: 12px; gap: 8px; border-radius: 28px; } .app-menu { top: 24px; height: calc(100vh - 48px); width: 200px; flex-basis: 200px; } .app-content { padding-right: 0; } .welcome-grid { grid-template-columns: 1fr; } .workspace-header { padding-inline: 16px; } }
@media (max-width: 767px) { .app-shell { margin: 0; padding: 8px; border-radius: 0; min-height: 100vh; } .app-menu { position: fixed; top: 8px; left: 8px; height: calc(100dvh - 16px); width: 224px; flex-basis: 224px; box-shadow: 5px 0 24px #00000012; } .app-menu.is-collapsed { width: 60px; flex-basis: 60px; } .app-menu.is-collapsed .app-menu-nav { padding: 8px; } .app-menu.is-collapsed .app-menu-account { margin-inline: 6px; } .app-content { margin-left: 66px; } .workspace-profile > span:last-child { display: none; } .workspace-header { padding: 12px 10px 20px; } .workspace-context { font-size: .72rem; } .app-content .container-fluid { padding-inline: 8px !important; } .welcome-feature, .welcome-secondary { padding: 24px; } .dashboard-kpis { gap: 10px; } .card-body { padding: 20px; } .quick-links { grid-template-columns: 1fr; } .dashboard-panel { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }