:root { --ink: #182b43; --muted: #657487; }
body { margin: 0; background: #fff; color: var(--ink); font-family: 'Segoe UI', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; }
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
a:focus-visible { outline: 3px solid #df9c22; outline-offset: 4px; }
.skip-link { position: fixed; z-index: 10; top: -100px; left: 12px; padding: 12px 20px; background: white; color: var(--ink); }
.skip-link:focus { top: 10px; }
.topbar { padding: 18px 0; background: #cf1730; }
.header-container { padding: 0 32px; }
.brand { color: white; font-size: 18px; font-weight: 600; }
.brand:hover { color: white; }
.portal-layout { display: flex; min-height: calc(100vh - 63px); }
.application-panel { width: 380px; flex-shrink: 0; padding: 34px 25px; background: linear-gradient(160deg, #112137 15%, #173d60 70%, #0d6398); border-bottom-right-radius: 85px; margin-bottom: 28px; }
.panel-heading { margin: 0 9px 28px; }
.panel-heading h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13px; font-weight: 500; color: #d0dbe7; }
.app-count { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 5px; background: #ffffff14; color: #c9d5e2; font-size: 11px; }
.service-button { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; width: 104px; max-width: 100%; padding: 0; color: #fff; text-align: center; border-radius: 8px; }
.service-button:hover { color: #fff; }
.service-icon { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 15px; color: #fff; background: #ffffff28; border: 1px solid #ffffff12; transition: background .15s, transform .15s; }
.service-button:hover .service-icon { background: #ffffff40; transform: translateY(-2px); }
.service-icon .icon { width: 29px; height: 29px; }
.service-name { max-width: 104px; font-size: 12px; line-height: 1.5; }
.shortcut-grid { display: flex; flex-wrap: wrap; align-items: flex-start; row-gap: 15px; }
.shortcut-grid > .col-4 { flex: 0 0 auto; width: 33.333333%; text-align: center; }
.new-tab-note { display: flex; align-items: center; gap: 7px; margin: 34px 9px 0; font-size: 11px; color: #c0d0df; }
.new-tab-note .icon { width: 13px; height: 13px; }
.main-content { flex: 1; min-width: 0; padding: 68px 55px 24px; display: flex; flex-direction: column; }
.welcome-label { color: #b72b40; font-size: 11px; font-weight: 600; letter-spacing: 2px; margin-bottom: 14px; }
.welcome h1 { font-size: 30px; font-weight: 600; letter-spacing: -.6px; margin-bottom: 17px; }
.welcome > p:last-child { color: var(--muted); font-size: 14px; line-height: 1.9; }
.page-footer { margin-top: auto; padding-top: 50px; font-size: 11px; color: var(--muted); }
@media (max-width: 991px) {
    .application-panel { width: 330px; padding-left: 17px; padding-right: 17px; }
    .main-content { padding: 50px 30px 24px; }
    .welcome h1 { font-size: 27px; }
}
@media (max-width: 767px) {
    .header-container { padding: 0 22px; }
    .brand { font-size: 17px; }
    .portal-layout { flex-direction: column; }
    .application-panel { width: 100%; padding: 25px 20px 28px; margin-bottom: 0; border-bottom-right-radius: 45px; }
    .panel-heading { margin-bottom: 22px; }
    .shortcut-grid { max-width: 480px; }
    .service-icon { width: 60px; height: 60px; border-radius: 13px; }
    .service-icon .icon { width: 27px; height: 27px; }
    .new-tab-note { margin-top: 25px; }
    .main-content { padding: 35px 25px 24px; }
    .welcome h1 { font-size: 25px; }
    .welcome > p:last-child { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}