@keyframes dropdown-slide-in{0%{opacity:0;transform:translateY(-.625rem)}to{opacity:1;transform:translateY(0)}}@keyframes skeleton-pulse{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.winnie-portal-layout{display:flex;flex-direction:column;min-block-size:100vh;min-block-size:100dvh;font-family:var(--winnie-font-family)}.winnie-portal-header{block-size:var(--winnie-header-height);background-color:var(--winnie-header-bg);border-block-end:var(--winnie-header-border);box-shadow:var(--winnie-header-shadow);display:flex;align-items:center;justify-content:space-between;padding-inline:var(--winnie-space-xl);position:sticky;inset-block-start:0;z-index:var(--winnie-z-sticky);backdrop-filter:blur(10px);& .portal-branding{display:flex;align-items:center;gap:var(--winnie-space-md)}& .portal-logo{display:flex;align-items:center;gap:var(--winnie-space-md);text-decoration:none;color:inherit;transition:opacity var(--winnie-transition-base);&:hover{opacity:.8}&:focus-visible{outline:2px solid var(--winnie-ring-color);outline-offset:var(--winnie-ring-offset);border-radius:var(--winnie-radius-sm)}& img{block-size:48px;inline-size:48px;aspect-ratio:1;-o-object-fit:contain;object-fit:contain}& h1{font-size:var(--winnie-font-size-2xl);font-weight:var(--winnie-font-weight-bold);color:var(--winnie-text-primary);margin:0}}& .separator{color:var(--winnie-gray-300);font-size:var(--winnie-font-size-2xl);font-weight:var(--winnie-font-weight-light);-webkit-user-select:none;-moz-user-select:none;user-select:none}& .app-name{font-size:var(--winnie-font-size-lg);font-weight:var(--winnie-font-weight-semibold);color:var(--winnie-text-secondary)}& .header-content{flex:1;display:flex;align-items:center;justify-content:center;padding-inline:var(--winnie-space-xl)}}.winnie-user-profile{position:relative;& .user-profile-button{display:flex;align-items:center;gap:var(--winnie-space-md);padding:var(--winnie-space-sm) var(--winnie-space-md);background-color:transparent;border:1px solid var(--winnie-gray-200);border-radius:var(--winnie-radius-lg);cursor:pointer;transition:background-color var(--winnie-transition-base),border-color var(--winnie-transition-base),box-shadow var(--winnie-transition-base);&:hover{background-color:var(--winnie-gray-50);border-color:var(--winnie-gray-300)}&:focus-visible{outline:2px solid var(--winnie-ring-color);outline-offset:var(--winnie-ring-offset)}&[aria-expanded=true] .dropdown-arrow{transform:rotate(180deg)}}& .user-avatar{inline-size:40px;block-size:40px;aspect-ratio:1;border-radius:var(--winnie-radius-full);background:linear-gradient(135deg,var(--winnie-primary),var(--winnie-primary-light));display:flex;align-items:center;justify-content:center;color:var(--winnie-text-inverse);font-weight:var(--winnie-font-weight-bold);font-size:var(--winnie-font-size-lg);text-transform:uppercase;box-shadow:var(--winnie-shadow-sm)}& .user-info{display:flex;flex-direction:column;align-items:flex-start;text-align:start}& .user-name{font-size:var(--winnie-font-size-base);font-weight:var(--winnie-font-weight-semibold);color:var(--winnie-text-primary);line-height:var(--winnie-line-height-tight)}& .user-role{line-height:var(--winnie-line-height-tight)}& .user-email,& .user-role{font-size:var(--winnie-font-size-sm);color:var(--winnie-text-secondary)}& .user-email{font-style:italic}& .dropdown-arrow{color:var(--winnie-gray-400);transition:transform var(--winnie-transition-base)}}.winnie-user-profile .user-profile-dropdown{position:absolute;inset-block-start:calc(100% + var(--winnie-space-sm));inset-inline-end:0;min-inline-size:280px;background-color:var(--winnie-bg-primary);border-radius:var(--winnie-radius-lg);box-shadow:var(--winnie-shadow-xl);border:1px solid var(--winnie-gray-200);padding:0;overflow:hidden;z-index:var(--winnie-z-dropdown);animation:dropdown-slide-in var(--winnie-animation-duration) var(--winnie-animation-timing)}.winnie-user-profile .dropdown-section{padding:var(--winnie-space-sm) var(--winnie-space-md);background-color:var(--winnie-bg-primary);border-block-end:1px solid var(--winnie-gray-200);&:last-child{border-block-end:none}& strong{font-size:var(--winnie-font-size-base);color:var(--winnie-text-primary);margin-block-end:var(--winnie-space-xs)}& .label,& strong{display:block;font-weight:var(--winnie-font-weight-semibold)}& .label{font-size:var(--winnie-font-size-sm);color:var(--winnie-text-secondary);margin-block-end:var(--winnie-space-sm)}}.winnie-user-profile .role-badge{display:inline-block;padding:var(--winnie-space-xs) var(--winnie-space-md);background:linear-gradient(135deg,var(--winnie-info-light),var(--winnie-primary-light));color:var(--winnie-primary-dark);border-radius:var(--winnie-radius-full);font-size:var(--winnie-font-size-sm);font-weight:var(--winnie-font-weight-semibold);margin-inline-end:var(--winnie-space-xs);margin-block-end:var(--winnie-space-xs)}.winnie-user-profile .logout-button{inline-size:100%;padding:var(--winnie-space-md);background-color:var(--winnie-error);color:var(--winnie-text-inverse);border:none;border-radius:var(--winnie-radius-md);font-size:var(--winnie-font-size-base);font-weight:var(--winnie-font-weight-semibold);cursor:pointer;transition:background-color var(--winnie-transition-base),transform var(--winnie-transition-fast),box-shadow var(--winnie-transition-base);margin-block-start:var(--winnie-space-sm);&:hover{background-color:var(--winnie-error-light);transform:translateY(-2px);box-shadow:var(--winnie-shadow-md)}&:active{transform:translateY(0)}&:focus-visible{outline:2px solid var(--winnie-ring-color);outline-offset:var(--winnie-ring-offset)}}.winnie-user-profile .dropdown-header{display:flex;align-items:center;gap:var(--winnie-space-md);padding:var(--winnie-space-lg);background:linear-gradient(135deg,var(--winnie-primary) 0,var(--winnie-primary-dark) 100%);color:var(--winnie-text-inverse);& .header-avatar{inline-size:48px;block-size:48px;border-radius:var(--winnie-radius-full);background-color:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-weight:var(--winnie-font-weight-bold);font-size:var(--winnie-font-size-lg);flex-shrink:0;border:2px solid rgba(255,255,255,.3)}& .header-info{flex:1;min-inline-size:0}& .header-name-row{display:flex;align-items:center;gap:var(--winnie-space-sm);flex-wrap:wrap}& strong{font-size:var(--winnie-font-size-base);font-weight:var(--winnie-font-weight-semibold)}& .header-role-badge,& strong{color:var(--winnie-text-inverse)}& .header-role-badge{display:inline-flex;padding:2px 8px;background-color:var(--winnie-error);border-radius:var(--winnie-radius-sm);font-size:var(--winnie-font-size-xs);font-weight:var(--winnie-font-weight-bold);text-transform:uppercase;letter-spacing:.025em}& .header-email{font-size:var(--winnie-font-size-sm);color:rgba(255,255,255,.8);margin-block-start:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.winnie-user-profile .dropdown-menu-item{display:flex;align-items:center;gap:var(--winnie-space-md);inline-size:100%;padding:var(--winnie-space-md);background-color:transparent;border:none;border-radius:var(--winnie-radius-md);color:var(--winnie-text-primary);font-size:var(--winnie-font-size-base);text-decoration:none;cursor:pointer;transition:background-color var(--winnie-transition-base);text-align:start;&:hover{background-color:var(--winnie-gray-50)}&:focus-visible{outline:2px solid var(--winnie-ring-color);outline-offset:-2px}&.destructive{color:var(--winnie-error);&:hover{background-color:color-mix(in srgb,var(--winnie-error) 10%,transparent)}}}.winnie-user-profile .menu-item-icon{display:flex;align-items:center;justify-content:center;inline-size:18px;block-size:18px;color:inherit}.winnie-user-profile .dropdown-divider{block-size:1px;background-color:var(--winnie-gray-200);margin-block:var(--winnie-space-sm)}.winnie-user-profile .roles-section{background-color:var(--winnie-gray-50);border-radius:var(--winnie-radius-md);margin:var(--winnie-space-sm);padding:var(--winnie-space-md)}.winnie-user-profile .section-label{display:block;font-size:var(--winnie-font-size-xs);font-weight:var(--winnie-font-weight-semibold);color:var(--winnie-text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-block-end:var(--winnie-space-sm)}.winnie-user-profile .roles-list{display:flex;flex-wrap:wrap;gap:var(--winnie-space-xs)}.portal-body{display:flex;flex:1;min-block-size:calc(100vh - var(--winnie-header-height));min-block-size:calc(100dvh - var(--winnie-header-height))}.winnie-portal-layout.no-header .portal-body{min-block-size:100vh;min-block-size:100dvh}.portal-main-content{flex:1;padding:0 var(--winnie-space-xl) var(--winnie-space-xl) var(--winnie-space-xl);background-color:var(--winnie-bg-secondary);min-block-size:calc(100vh - var(--winnie-header-height));min-block-size:calc(100dvh - var(--winnie-header-height));overflow-x:hidden}.winnie-portal-layout.with-sidebar .portal-main-content{min-block-size:auto}.winnie-sidebar{inline-size:260px;background:var(--winnie-bg-sidebar);border-inline-end:none;display:flex;flex-direction:column;transition:inline-size var(--winnie-transition-base);position:relative;z-index:var(--winnie-z-dropdown);&.collapsed{inline-size:64px;overflow:hidden}}.winnie-sidebar .sidebar-header{background-color:rgba(0,0,0,.4);border-block-end:1px solid rgba(255,255,255,.1)}.winnie-sidebar.collapsed .sidebar-header{display:flex;justify-content:center}.winnie-sidebar .sidebar-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;width:3.5rem;height:2.5rem;position:absolute;top:.5rem;right:1rem;border:1px solid rgba(255,255,255,.1);background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") 50% /1.75rem no-repeat rgba(255,255,255,.1);display:none;border-radius:var(--winnie-radius-sm);z-index:10;&:hover{background-color:rgba(255,255,255,.2)}&:focus-visible{outline:2px solid var(--winnie-ring-color);outline-offset:var(--winnie-ring-offset)}}.winnie-sidebar .sidebar-collapse-toggle{position:absolute;inset-block-start:var(--winnie-space-md);inset-inline-end:calc(var(--winnie-space-md) * -1);transform:translateX(50%);inline-size:28px;block-size:28px;background-color:var(--winnie-bg-primary);border:1px solid var(--winnie-gray-200);border-radius:var(--winnie-radius-full);display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--winnie-gray-500);transition:all var(--winnie-transition-base);box-shadow:var(--winnie-shadow-md);z-index:10;&:hover{background-color:var(--winnie-primary);color:var(--winnie-text-inverse);border-color:var(--winnie-primary)}}.winnie-sidebar.collapsible .sidebar-collapse-toggle{display:flex}.sidebar-overlay{display:none}@media (max-width:768px){.sidebar-overlay{display:block;position:fixed;inset:0;background-color:rgba(0,0,0,.5);z-index:calc(var(--winnie-z-modal) - 1)}}.winnie-sidebar .sidebar-nav{flex:1;overflow-y:auto;padding:.5rem 0}.winnie-sidebar .sidebar-menu,.winnie-sidebar .sidebar-submenu{list-style:none;margin:0;padding:0}.winnie-sidebar .sidebar-item-wrapper{margin:0;padding:0 .75rem}.winnie-sidebar .sidebar-item{display:flex;align-items:center;gap:.75rem;inline-size:100%;padding:0 .75rem;height:3rem;background-color:transparent;border:none;border-radius:4px;color:rgba(255,255,255,.8);font-size:var(--winnie-font-size-base);font-weight:var(--winnie-font-weight-medium);text-decoration:none;cursor:pointer;transition:background-color .3s,color .3s;text-align:start;line-height:3rem;&:hover{background-color:rgba(255,255,255,.1);color:white}&:focus-visible{outline:2px solid var(--winnie-ring-color);outline-offset:-2px}&.active{background-color:rgba(255,255,255,.25);color:white;font-weight:600}&.disabled{color:rgba(255,255,255,.4);cursor:not-allowed;opacity:.6;&:hover{background-color:transparent;color:rgba(255,255,255,.4)}}&.collapsed{justify-content:center;padding:var(--winnie-space-md)}}.winnie-sidebar .sidebar-item-icon{display:flex;align-items:center;justify-content:center;inline-size:1.5rem;block-size:1.5rem;flex-shrink:0;font-size:1.1rem;& svg{inline-size:1.1rem;block-size:1.1rem}}.winnie-sidebar .sidebar-item-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.winnie-sidebar .sidebar-item-badge{display:inline-flex;align-items:center;padding:2px 6px;margin-inline-start:.5rem;font-size:.7rem;font-weight:var(--winnie-font-weight-normal);background-color:rgba(255,255,255,.15);color:rgba(255,255,255,.6);border-radius:var(--winnie-radius-sm);flex-shrink:0}.winnie-sidebar .sidebar-expand-icon{display:flex;align-items:center;transition:transform var(--winnie-transition-base);&.expanded{transform:rotate(90deg)}}.winnie-sidebar .sidebar-footer-content{padding:var(--winnie-space-md) var(--winnie-space-lg);border-block-start:1px solid var(--winnie-sidebar-border)}.winnie-sidebar.collapsed .sidebar-footer-content{padding:var(--winnie-space-md)}.winnie-sidebar .sidebar-portal-link{margin-block-start:auto;padding:var(--winnie-space-md);border-block-start:1px solid var(--winnie-sidebar-border)}.winnie-sidebar .portal-link-button{display:flex;align-items:center;justify-content:center;gap:var(--winnie-space-md);inline-size:100%;padding:var(--winnie-space-md);background-color:var(--winnie-sidebar-hover-bg);border:1px solid var(--winnie-sidebar-border);border-radius:var(--winnie-radius-md);color:var(--winnie-sidebar-text-secondary);font-size:var(--winnie-font-size-sm);font-weight:var(--winnie-font-weight-medium);text-decoration:none;transition:background-color var(--winnie-transition-base),border-color var(--winnie-transition-base),color var(--winnie-transition-base);&:hover{background-color:var(--winnie-sidebar-active-indicator);border-color:var(--winnie-sidebar-active-indicator);color:var(--winnie-text-inverse)}&:focus-visible{outline:2px solid var(--winnie-ring-color);outline-offset:var(--winnie-ring-offset)}}.winnie-sidebar.collapsed .portal-link-button span{display:none}@media (max-width:768px){.winnie-portal-header{padding-inline:var(--winnie-space-md);block-size:60px;& .portal-logo h1{font-size:var(--winnie-font-size-xl)}& .portal-logo img{block-size:36px;inline-size:36px}& .app-name,& .header-content,& .separator{display:none}}.winnie-user-profile{& .dropdown-arrow,& .user-info{display:none}& .user-profile-button{padding:var(--winnie-space-sm)}& .user-profile-dropdown{inset-inline-end:-10px;min-inline-size:calc(100vw - 40px)}}.portal-main-content{padding:0 var(--winnie-space-md) var(--winnie-space-md) var(--winnie-space-md);min-block-size:calc(100vh - 60px);min-block-size:calc(100dvh - 60px)}.winnie-sidebar{position:fixed;inset-inline-start:-280px;inset-block-start:0;inset-block-end:0;inline-size:250px;z-index:var(--winnie-z-modal);transition:inset-inline-start .3s ease;box-shadow:var(--winnie-shadow-xl);& .sidebar-toggle{display:block}&.open{inset-inline-start:0}&.collapsed{inline-size:250px;& .sidebar-branding-text{display:flex}}}.winnie-portal-layout.with-sidebar .portal-main-content{margin-inline-start:0}}@media (max-width:480px){.winnie-portal-header{padding-inline:var(--winnie-space-sm)}.portal-main-content{padding:0 var(--winnie-space-sm) var(--winnie-space-sm) var(--winnie-space-sm)}}.winnie-portal-header.embedded-mode,.winnie-portal-layout.no-header .winnie-portal-header{display:none}.winnie-portal-layout.no-header .portal-main-content{min-block-size:100vh;min-block-size:100dvh}@media print{.winnie-portal-header{position:static;box-shadow:none}.winnie-sidebar,.winnie-user-profile .user-profile-dropdown{display:none}}.skeleton-pulse{background:linear-gradient(90deg,var(--winnie-gray-200) 25%,var(--winnie-gray-100) 50%,var(--winnie-gray-200) 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite;border-radius:var(--winnie-radius-sm)}.winnie-user-profile .user-profile-skeleton{pointer-events:none;cursor:default;& .user-avatar{background-color:var(--winnie-gray-200)}& .user-avatar.skeleton-pulse,& .user-name.skeleton-pulse,& .user-role.skeleton-pulse{background:linear-gradient(90deg,var(--winnie-gray-200) 25%,var(--winnie-gray-100) 50%,var(--winnie-gray-200) 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite}}.winnie-sidebar.theme-light{background-color:var(--winnie-bg-primary);border-inline-end:1px solid var(--winnie-gray-200);& .sidebar-header{border-block-end:1px solid var(--winnie-gray-200)}& .sidebar-item{color:var(--winnie-text-secondary);border-inline-start:none;&:hover{background-color:var(--winnie-gray-50);color:var(--winnie-text-primary)}&.active{background:linear-gradient(135deg,color-mix(in srgb,var(--winnie-primary) 10%,transparent),color-mix(in srgb,var(--winnie-primary) 5%,transparent));color:var(--winnie-primary);border-inline-start:none;border-inline-end:3px solid var(--winnie-primary)}}& .sidebar-footer-content,& .sidebar-portal-link{border-block-start:1px solid var(--winnie-gray-200)}& .portal-link-button{background-color:var(--winnie-gray-50);border:1px solid var(--winnie-gray-200);color:var(--winnie-text-secondary);&:hover{background-color:var(--winnie-primary);border-color:var(--winnie-primary);color:var(--winnie-text-inverse)}}& .sidebar-branding{border-block-end:1px solid var(--winnie-gray-200)}& .sidebar-branding,& .sidebar-branding-name{color:var(--winnie-text-primary)}}.sidebar-branding{display:flex;align-items:center;gap:12px;padding:0 1rem;text-decoration:none;color:white;font-size:1.1rem;transition:opacity var(--winnie-transition-base);&:hover{opacity:.9}&:focus-visible{outline:2px solid var(--winnie-ring-color);outline-offset:-2px}&.collapsed{justify-content:center;padding:var(--winnie-space-md);& .sidebar-branding-text{display:none}}}.sidebar-branding-logo{inline-size:40px;block-size:40px;flex-shrink:0;& img,& svg{inline-size:100%;block-size:100%;-o-object-fit:contain;object-fit:contain}}.sidebar-branding-text{display:flex;flex-direction:column}.sidebar-branding-name{font-size:1.2rem;font-weight:var(--winnie-font-weight-bold);color:white;line-height:1}.sidebar-branding-subtitle{font-size:.85rem;font-weight:var(--winnie-font-weight-medium);color:rgba(255,255,255,.95);line-height:1}.sidebar-branding-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;margin-inline-start:6px;font-size:.7rem;font-weight:800;border-radius:10px;text-transform:uppercase;letter-spacing:.5px;vertical-align:middle;flex-shrink:0;&.default{background-color:color-mix(in srgb,var(--winnie-text-inverse) 20%,transparent);color:var(--winnie-text-inverse)}&.beta{background:linear-gradient(135deg,rgb(102,126,234),rgb(118,75,162));color:white;box-shadow:0 2px 8px rgba(102,126,234,.5),0 0 20px rgba(102,126,234,.3)}&.new{background-color:var(--winnie-success)}&.new,&.pro{color:var(--winnie-text-inverse)}&.pro{background:linear-gradient(135deg,var(--winnie-warning),var(--winnie-warning-light))}}.sidebar-branding-badge-icon{display:flex;align-items:center;justify-content:center;font-size:.75rem}.portal-main-content .content-header-bar{display:flex;justify-content:flex-end;align-items:center;gap:1rem;padding:0 1.5rem;height:73px;background-color:var(--winnie-bg-primary);border-block-end:1px solid var(--winnie-gray-200);position:sticky;inset-block-start:0;z-index:999;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-inline:calc(var(--winnie-space-xl) * -1);margin-block-start:calc(var(--winnie-space-xl) * -1);margin-block-end:var(--winnie-space-xl);& .winnie-user-profile .user-profile-button{display:flex;align-items:center;gap:12px;padding:8px 16px;margin:5px;background:rgba(255,255,255,.95);border:2px solid rgba(41,171,226,.3);border-radius:25px;cursor:pointer;transition:.3s;&:hover{background:white;border-color:rgb(41,171,226);box-shadow:0 4px 12px rgba(41,171,226,.2);transform:translateY(-1px)}}& .winnie-user-profile .user-avatar{inline-size:36px;block-size:36px;background:linear-gradient(135deg,rgb(41,171,226),rgb(30,136,199))}& .winnie-user-profile .user-name{font-size:14px;font-weight:600;color:rgb(44,62,80)}& .winnie-user-profile .user-role{font-size:12px;color:rgb(107,114,128)}}.content-header-bar .help-icon-btn{background:white;border:1px solid var(--winnie-gray-200);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.3s;color:var(--winnie-gray-500);&:hover{background:var(--winnie-gray-50);transform:scale(1.05)}}.winnie-portal-layout.horizontal-nav .portal-body{flex-direction:column}.winnie-portal-layout.horizontal-nav .portal-main-content{min-block-size:calc(100vh - var(--winnie-header-height));min-block-size:calc(100dvh - var(--winnie-header-height))}.winnie-portal-header .horizontal-nav-items{display:flex;align-items:center;gap:var(--winnie-space-sm);margin-inline-start:var(--winnie-space-xl)}.winnie-portal-header .horizontal-nav-item{display:flex;align-items:center;gap:var(--winnie-space-sm);padding:var(--winnie-space-sm) var(--winnie-space-md);border:1px solid var(--winnie-gray-200);border-radius:var(--winnie-radius-md);color:var(--winnie-text-secondary);font-size:var(--winnie-font-size-sm);font-weight:var(--winnie-font-weight-medium);text-decoration:none;transition:background-color var(--winnie-transition-base),color var(--winnie-transition-base),border-color var(--winnie-transition-base);background-color:transparent;cursor:pointer;&:hover{background-color:var(--winnie-gray-50);color:var(--winnie-text-primary);border-color:var(--winnie-gray-300)}&:focus-visible{outline:2px solid var(--winnie-ring-color);outline-offset:var(--winnie-ring-offset)}&.active{background-color:var(--winnie-primary);color:var(--winnie-text-inverse);border-color:var(--winnie-primary)}&.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}}.winnie-portal-header .horizontal-nav-item-icon{display:flex;align-items:center;justify-content:center;inline-size:16px;block-size:16px}@media (max-width:768px){.winnie-portal-header .horizontal-nav-items{display:none}}@media (forced-colors:active){.winnie-sidebar .sidebar-item.active{border-inline-start:3px solid CanvasText}.winnie-user-profile .user-avatar{forced-color-adjust:none}.sidebar-branding-badge{border:1px solid CanvasText}.winnie-portal-header .header-nav-item.active,.winnie-portal-header .horizontal-nav-item.active{border:2px solid CanvasText}.winnie-portal-footer{border-block-start:1px solid CanvasText}}.winnie-portal-header .header-left{display:flex;align-items:center;gap:var(--winnie-space-xl)}.winnie-portal-header .header-right{display:flex;align-items:center;gap:var(--winnie-space-md)}.winnie-portal-header .header-nav{display:flex;align-items:center;gap:var(--winnie-space-xs)}.winnie-portal-header .header-nav-item{display:flex;align-items:center;gap:var(--winnie-space-sm);padding:var(--winnie-space-sm) var(--winnie-space-md);border-radius:var(--winnie-radius-md);color:var(--winnie-text-secondary);text-decoration:none;font-size:var(--winnie-font-sm);font-weight:500;transition:all var(--winnie-transition-base);&:hover{background-color:var(--winnie-gray-100);color:var(--winnie-text-primary)}&:focus-visible{outline:2px solid var(--winnie-primary);outline-offset:2px}&.active{background-color:var(--winnie-gray-100);color:var(--winnie-text-primary)}}.winnie-portal-header .header-nav-icon{display:flex;align-items:center;justify-content:center;inline-size:1rem;block-size:1rem}.winnie-portal-header .header-sign-in{display:inline-flex;align-items:center;justify-content:center;padding:var(--winnie-space-sm) var(--winnie-space-lg);background-color:var(--winnie-primary);color:var(--winnie-text-inverse);border-radius:var(--winnie-radius-md);font-size:var(--winnie-font-sm);font-weight:500;text-decoration:none;transition:all var(--winnie-transition-base);&:hover{background-color:var(--winnie-primary-dark)}&:focus-visible{outline:2px solid var(--winnie-primary);outline-offset:2px}}.winnie-portal-header .header-loading-skeleton{inline-size:2rem;block-size:2rem;border-radius:50%;background:linear-gradient(90deg,var(--winnie-gray-200) 25%,var(--winnie-gray-100) 50%,var(--winnie-gray-200) 75%);background-size:200% 100%;animation:skeleton-pulse 1.5s ease-in-out infinite}@media (max-width:768px){.winnie-portal-header .header-nav{display:none}.winnie-portal-header .header-left{gap:var(--winnie-space-md)}}.winnie-portal-header .winnie-user-profile .user-profile-button{border-color:var(--winnie-input-border);background-color:transparent;&:hover{background-color:var(--winnie-bg-secondary);border-color:var(--winnie-text-tertiary)}}.winnie-portal-header .winnie-user-profile .user-name{color:var(--winnie-text-primary)}.winnie-portal-header .winnie-user-profile .user-role{color:var(--winnie-text-secondary)}.winnie-portal-header .winnie-user-profile .dropdown-arrow{color:var(--winnie-text-tertiary)}.winnie-portal-footer{margin-block-start:auto;background-color:var(--winnie-gray-800);color:var(--winnie-gray-300)}.winnie-portal-footer .footer-content{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--winnie-space-lg);max-inline-size:80rem;margin-inline:auto;padding:var(--winnie-space-xl) var(--winnie-space-xl)}.winnie-portal-footer .footer-copyright{font-size:var(--winnie-font-sm);color:var(--winnie-gray-300);margin:0}.winnie-portal-footer .footer-links{display:flex;align-items:center;gap:var(--winnie-space-xl)}.winnie-portal-footer .footer-link{display:flex;align-items:center;gap:var(--winnie-space-sm);font-size:var(--winnie-font-sm);color:var(--winnie-gray-300);text-decoration:none;transition:color var(--winnie-transition-base);&:hover{color:var(--winnie-text-inverse)}&:focus-visible{outline:2px solid var(--winnie-primary);outline-offset:2px;border-radius:var(--winnie-radius-sm)}}.winnie-portal-footer .footer-link-icon{inline-size:1rem;block-size:1rem;flex-shrink:0}@media (max-width:640px){.winnie-portal-footer .footer-content{flex-direction:column;text-align:center}.winnie-portal-footer .footer-links{flex-wrap:wrap;justify-content:center;gap:var(--winnie-space-md)}}