:root {
    --mk-blue-950: #082a5e; --mk-blue-900: #0b3678; --mk-blue-800: #104a9b; --mk-blue-700: #1762c4; --mk-blue-600: #2478e8; --mk-blue-100: #eaf3ff; --mk-blue-50: #f4f8ff;
    --mk-ink: #172033; --mk-muted: #667085; --mk-border: #dfe5ef; --mk-surface: #fff; --mk-canvas: #f4f7fb; --mk-sidebar-width: 272px; --mk-topbar-height: 76px; --mk-radius: 14px; --mk-shadow: 0 8px 30px rgba(18,39,75,.08);
}
html { min-height: 100%; background: var(--mk-canvas); }
body { min-height: 100vh; margin: 0; background: var(--mk-canvas); color: var(--mk-ink); font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--mk-blue-700); }
:focus-visible { outline: 3px solid rgba(36,120,232,.35); outline-offset: 2px; }
.app-shell { min-height: 100vh; }
.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1040; width: var(--mk-sidebar-width); display: flex; flex-direction: column; overflow-y: auto; background: linear-gradient(180deg,var(--mk-blue-950),#071f45); color: #fff; box-shadow: 10px 0 35px rgba(8,42,94,.14); }
.app-workspace { min-height: 100vh; margin-left: var(--mk-sidebar-width); }
.app-topbar { position: sticky; top: 0; z-index: 1020; min-height: var(--mk-topbar-height); display: flex; align-items: center; gap: 18px; padding: 12px clamp(18px,3vw,38px); background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(223,229,239,.85); backdrop-filter: blur(14px); }
.app-topbar-title { display: flex; flex-direction: column; line-height: 1.15; }
.app-topbar-kicker { color: var(--mk-blue-700); font-size: .69rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.app-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--mk-border); border-radius: 11px; background: #fff; color: var(--mk-blue-900); }
.app-profile-button { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--mk-border); border-radius: 11px; background: #fff; color: var(--mk-ink); font-weight: 650; }
.app-profile-button i { color: var(--mk-blue-700); font-size: 1.15rem; }
.app-content { min-height: calc(100vh - var(--mk-topbar-height)); }
.app-content-inner { width: min(100%,1540px); margin: 0 auto; padding: clamp(22px,3vw,42px); }
.app-navigation-overlay { display: none; }
.sidebar-brand { padding: 25px 22px 20px; }
.sidebar-brand a { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.sidebar-brand-mark { width: 43px; height: 43px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: linear-gradient(145deg,#55a3ff,#1a6fe0); box-shadow: 0 8px 24px rgba(0,0,0,.2); font-weight: 850; letter-spacing: -.05em; }
.sidebar-brand-logo { width: 43px; height: 43px; flex: 0 0 auto; border-radius: 13px; background: #fff; object-fit: contain; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.sidebar-brand strong,.sidebar-brand small { display: block; }
.sidebar-brand strong { font-size: 1.15rem; letter-spacing: -.02em; }
.sidebar-brand small { margin-top: 2px; color: rgba(255,255,255,.58); font-size: .72rem; }
.sidebar-navigation { flex: 1; padding: 4px 14px 28px; }
.sidebar-section + .sidebar-section { margin-top: 23px; }
.sidebar-label { padding: 0 12px 7px; color: rgba(255,255,255,.44); font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sidebar-link { min-height: 43px; display: flex; align-items: center; gap: 12px; margin: 3px 0; padding: 9px 12px; border-radius: 11px; color: rgba(255,255,255,.76); text-decoration: none; font-size: .92rem; font-weight: 590; transition: background .16s ease,color .16s ease,transform .16s ease; }
.sidebar-link i { width: 20px; color: rgba(151,202,255,.9); text-align: center; }
.sidebar-link:hover { color: #fff; background: rgba(255,255,255,.09); transform: translateX(2px); }
.sidebar-link.active { color: #fff; background: linear-gradient(90deg,rgba(48,139,255,.38),rgba(48,139,255,.12)); box-shadow: inset 3px 0 #69adff; }
.sidebar-link-secondary { color: rgba(255,255,255,.6); font-size: .85rem; }
.sidebar-footer { display: flex; align-items: center; gap: 9px; margin: 0 18px 18px; padding: 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.58); font-size: .75rem; }
.sidebar-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.12); }
.context-switcher { display: flex; align-items: center; gap: 8px; min-width: 0; }
.context-switcher .form-select { width: auto; min-width: 145px; max-width: 220px; min-height: 40px; border-radius: 10px; border-color: var(--mk-border); font-weight: 600; }
.context-switcher .context-role { min-width: 108px; }
.context-value { max-width: 190px; overflow: hidden; color: var(--mk-muted); font-size: .86rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
h1,h2,h3,h4,h5,h6 { color: var(--mk-ink); font-weight: 730; letter-spacing: -.025em; }
h2 { font-size: clamp(1.55rem,2vw,2rem); }
.text-muted { color: var(--mk-muted) !important; }
.card { border: 1px solid var(--mk-border); border-radius: var(--mk-radius); box-shadow: var(--mk-shadow); }
.card-header { padding: 15px 19px; border-bottom-color: var(--mk-border); border-radius: var(--mk-radius) var(--mk-radius) 0 0 !important; background: var(--mk-blue-50); }
.card-body { padding: clamp(17px,2vw,24px); }
.table { --bs-table-bg: transparent; margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .9rem .8rem; border-bottom-color: var(--mk-border); }
.table thead th { color: var(--mk-muted); font-size: .72rem; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.table-responsive { border: 1px solid var(--mk-border); border-radius: var(--mk-radius); background: #fff; box-shadow: var(--mk-shadow); }
.form-control,.form-select { border-color: #ccd5e3; border-radius: 10px; min-height: 43px; }
.form-control:focus,.form-select:focus { border-color: var(--mk-blue-600); box-shadow: 0 0 0 .22rem rgba(36,120,232,.14); }
.form-label { margin-bottom: .4rem; color: #344054; font-size: .82rem; font-weight: 700; }
.btn { min-height: 40px; padding: .48rem .9rem; border-radius: 10px; font-weight: 680; }
.btn-sm { min-height: 34px; border-radius: 9px; }
.btn-primary { border-color: var(--mk-blue-700); background: var(--mk-blue-700); box-shadow: 0 4px 12px rgba(23,98,196,.18); }
.btn-primary:hover { border-color: var(--mk-blue-800); background: var(--mk-blue-800); }
.badge { padding: .42em .66em; border-radius: 7px; font-weight: 700; }
.alert { border: 0; border-radius: 12px; box-shadow: var(--mk-shadow); }
.dropdown-menu { padding: 7px; border: 1px solid var(--mk-border); border-radius: 12px; box-shadow: 0 14px 34px rgba(18,39,75,.15); }
.dropdown-item { padding: 9px 11px; border-radius: 8px; }
.modal-content { border: 0; border-radius: 17px; box-shadow: 0 24px 70px rgba(8,42,94,.25); }
.home-hero { min-height: min(620px,calc(100vh - 160px)); display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.75fr); align-items: center; gap: clamp(28px,6vw,90px); padding: clamp(25px,6vw,80px); overflow: hidden; position: relative; border: 1px solid #d8e4f4; border-radius: 24px; background: linear-gradient(135deg,#fff,#edf5ff); box-shadow: var(--mk-shadow); }
.home-hero::after { content: ""; position: absolute; width: 390px; height: 390px; right: -150px; top: -170px; border-radius: 50%; background: rgba(36,120,232,.1); }
.home-eyebrow { color: var(--mk-blue-700); font-size: .75rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.home-hero h1 { margin: 12px 0 16px; font-size: clamp(2.25rem,5vw,4.6rem); line-height: .98; }
.home-hero p { max-width: 620px; color: var(--mk-muted); font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.65; }
.home-brand-card { position: relative; z-index: 1; display: grid; place-items: center; min-height: 290px; padding: 30px; border: 1px solid rgba(255,255,255,.8); border-radius: 20px; background: rgba(255,255,255,.7); box-shadow: 0 20px 50px rgba(24,82,155,.12); backdrop-filter: blur(12px); }
.home-brand-card img { max-width: 100%; max-height: 180px; object-fit: contain; }
.feedback-fab { right: 25px; bottom: 25px; width: 54px; height: 54px; display: grid; place-items: center; padding: 0; border-radius: 16px; font-size: 20px; box-shadow: 0 12px 28px rgba(23,98,196,.3); z-index: 1060; }
.toast-stack { position: fixed; top: calc(var(--mk-topbar-height) + 14px); right: 20px; z-index: 1090; display: flex; flex-direction: column; gap: 10px; width: min(360px,calc(100vw - 32px)); }
.toast-stack .alert { margin: 0; }
.news-preview { line-height: 1.7; }
.news-preview img { max-width: 100%; height: auto; border-radius: 12px; }
.text-truncate-3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
@media (max-width: 1099.98px) {
    .app-sidebar { transform: translateX(-105%); transition: transform .22s ease; }
    .app-workspace { margin-left: 0; }
    .app-menu-button { display: inline-grid; place-items: center; flex: 0 0 auto; }
    .navigation-open .app-sidebar { transform: translateX(0); }
    .app-navigation-overlay { position: fixed; inset: 0; z-index: 1035; display: block; border: 0; background: rgba(7,22,49,.46); backdrop-filter: blur(2px); }
}
@media (max-width: 767.98px) {
    :root { --mk-topbar-height: 66px; }
    .app-topbar { padding: 10px 14px; gap: 10px; }
    .app-topbar-title { display: none; }
    .app-topbar-actions { gap: 7px; }
    .context-switcher { max-width: calc(100vw - 118px); overflow-x: auto; scrollbar-width: none; }
    .context-switcher::-webkit-scrollbar { display: none; }
    .app-profile-button { width: 40px; justify-content: center; padding: 7px; }
    .app-profile-button span,.app-profile-button::after,.context-value { display: none; }
    .context-switcher .form-select { min-width: 0; width: clamp(105px,29vw,150px); max-width: 150px; padding-right: 28px; font-size: .78rem; }
    .context-switcher .context-role { width: 82px; }
    .app-content-inner { padding: 20px 14px 92px; }
    .home-hero { grid-template-columns: 1fr; min-height: auto; padding: 30px 22px; border-radius: 18px; }
    .home-brand-card { min-height: 190px; order: -1; }
    .home-brand-card img { max-height: 125px; }
    .card-body { padding: 16px; }
    .btn { min-height: 44px; }
    .feedback-fab { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }