.roles-layout{display:grid;grid-template-columns:250px 1fr;grid-gap:var(--spacing-xl);gap:var(--spacing-xl);padding:var(--spacing-xl) var(--spacing-md)}@media (max-width:1024px){.roles-layout{grid-template-columns:200px 1fr;gap:var(--spacing-lg);padding:var(--spacing-lg) var(--spacing-md)}}@media (max-width:768px){.roles-layout{grid-template-columns:1fr;gap:var(--spacing-lg);padding:var(--spacing-lg) var(--spacing-sm)}}.explore-section{background-color:var(--color-background);padding:var(--spacing-2xl) var(--spacing-md)}.container-wide{max-width:1400px;margin:0 auto;padding:0 var(--spacing-md)}.roles-with-sidebar{display:grid;grid-template-columns:280px 1fr;grid-gap:var(--spacing-2xl);gap:var(--spacing-2xl)}@media (max-width:1024px){.roles-with-sidebar{grid-template-columns:220px 1fr;gap:var(--spacing-xl)}}@media (max-width:768px){.roles-with-sidebar{grid-template-columns:1fr;gap:var(--spacing-lg)}}.roles-sidebar-explore{position:-webkit-sticky;position:sticky;top:100px;height:-moz-fit-content;height:fit-content;max-height:calc(100vh - 150px);overflow-y:auto}.sidebar-header{padding:var(--spacing-lg);background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#ffffff;border-radius:var(--radius-lg);margin-bottom:var(--spacing-lg);box-shadow:0 4px 12px rgba(45,122,95,.2)}.sidebar-header h3{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:#ffffff;text-shadow:0 1px 2px rgba(0,0,0,.1)}.roles-sidebar-explore .roles-sidebar-content{background-color:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border-light);padding:var(--spacing-md);box-shadow:0 2px 8px rgba(0,0,0,.05)}.roles-main-explore{display:flex;flex-direction:column;gap:var(--spacing-xl)}.explore-header{padding:var(--spacing-xl);background:linear-gradient(135deg,rgba(45,122,95,.05),rgba(74,155,127,.05));border-left:4px solid var(--color-primary);border-radius:var(--radius-lg)}.explore-header h2{margin:0 0 var(--spacing-sm) 0;font-size:var(--font-size-2xl);color:var(--color-text-primary)}.explore-header p{margin:0;color:var(--color-text-secondary);font-size:var(--font-size-base)}.roles-sidebar{position:-webkit-sticky;position:sticky;top:calc(var(--spacing-lg) * 2);height:-moz-fit-content;height:fit-content;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,sans-serif}.roles-sidebar-content{background:linear-gradient(135deg,#fafbfc,#f8fafc);border-radius:16px;border:1px solid rgba(226,232,240,.8);padding:20px 16px;max-height:80vh;overflow-y:auto;box-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 12px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.02);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}@media (max-width:768px){.roles-sidebar{position:static}.roles-sidebar-content{max-height:none}}.roles-main{gap:var(--spacing-xl)}.role-tree-section,.roles-main{display:flex;flex-direction:column}.role-tree-section{gap:6px;margin-bottom:12px}.role-tree-title{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:#0f172a;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:10px 40px 10px 12px;border-radius:10px;transition:all .2s cubic-bezier(.4,0,.2,1);background:transparent;border:none;width:100%;text-align:left;position:relative}.role-tree-title span:first-child{flex-shrink:0}.role-tree-title span:last-child{flex:1 1;text-align:left}.role-tree-title:hover{background:rgba(15,23,42,.06);transform:translateX(2px)}.role-tree-title.collapsed:after{color:#64748b}.role-tree-title.collapsed:after,.role-tree-title.expanded:after{content:"›";font-size:18px;font-weight:700;transition:transform .2s ease;position:absolute;right:12px}.role-tree-title.expanded:after{color:#2563eb;transform:rotate(90deg)}.role-tree-items{list-style:none;padding-left:0;margin:4px 0 0;animation:slideDown .25s ease-out}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.role-tree-item{position:relative;margin:2px 0}.roles-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-gap:var(--spacing-lg)}.roles-grid,.topics-grid{display:grid;gap:var(--spacing-lg)}.topics-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-gap:var(--spacing-lg)}@media (max-width:768px){.roles-grid,.topics-grid{grid-template-columns:1fr}}.popular-section{padding:var(--spacing-xl) var(--spacing-md);background-color:var(--color-background)}.popular-section-content{max-width:1280px;margin:0 auto}.popular-badge{display:inline-block;background-color:var(--color-primary);color:white;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-md)}.popular-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));grid-gap:var(--spacing-lg);gap:var(--spacing-lg)}@media (max-width:768px){.popular-grid{grid-template-columns:1fr}}.category-separator{margin:var(--spacing-xl) 0;padding-bottom:var(--spacing-xl);border-bottom:2px solid var(--color-border-light)}.category-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin-bottom:var(--spacing-lg);display:flex;align-items:center;gap:var(--spacing-md)}.category-icon{font-size:var(--font-size-2xl)}.breadcrumb{color:var(--color-text-secondary);margin-bottom:var(--spacing-lg);display:flex;gap:var(--spacing-sm)}.breadcrumb,.btn-back{font-size:var(--font-size-sm);align-items:center}.btn-back{display:inline-flex;padding:var(--spacing-sm) var(--spacing-md);background-color:transparent;border:1px solid var(--color-border);color:var(--color-text-primary);border-radius:var(--radius-md);cursor:pointer;font-weight:var(--font-weight-semibold);transition:all var(--transition-fast);text-decoration:none}.btn-back:hover{background-color:var(--color-surface-light);border-color:var(--color-primary);color:var(--color-primary)}.role-list-item{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:4px 6px;border-radius:10px;font-size:14px;font-weight:500;color:#334155;text-decoration:none;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;border-left:3px solid transparent}.role-list-item:hover{background:rgba(15,23,42,.05);color:#0f172a;transform:translateX(2px);border-left-color:rgba(37,99,235,.3)}.role-list-item.active{background:linear-gradient(90deg,rgba(59,130,246,.12),rgba(59,130,246,.05));color:#2563eb;font-weight:600;border-left-color:#2563eb;box-shadow:0 1px 2px rgba(37,99,235,.1),inset 0 0 0 1px rgba(37,99,235,.08)}.role-list-item.active:before{content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);height:calc(100% - 10px);width:3px;background:#2563eb;border-radius:2px;box-shadow:0 0 8px rgba(37,99,235,.4)}.role-list-item.active .role-list-item-icon{filter:brightness(1.1) saturate(1.3);transform:scale(1.1)}.role-list-item-icon{font-size:16px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .2s ease}.role-tree-items .role-tree-items{padding-left:20px;margin-top:4px;border-left:2px solid rgba(226,232,240,.6);margin-left:10px}.role-tree-items .role-tree-items .role-list-item{font-size:13px;padding:8px 10px}.roles-sidebar-content::-webkit-scrollbar,.roles-sidebar-explore::-webkit-scrollbar{width:6px}.roles-sidebar-content::-webkit-scrollbar-track,.roles-sidebar-explore::-webkit-scrollbar-track{background:transparent;border-radius:10px}.roles-sidebar-content::-webkit-scrollbar-thumb,.roles-sidebar-explore::-webkit-scrollbar-thumb{background:rgba(148,163,184,.3);border-radius:10px;border:2px solid transparent;background-clip:padding-box}.roles-sidebar-content::-webkit-scrollbar-thumb:hover,.roles-sidebar-explore::-webkit-scrollbar-thumb:hover{background:rgba(37,99,235,.5);background-clip:padding-box}.role-tree-items{overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1)}.roles-sidebar-content p{padding:1rem;text-align:center;color:#64748b;font-size:14px;font-weight:500}[data-theme=dark] .roles-sidebar-content{background:linear-gradient(135deg,#0f172a,#1e293b);border-color:rgba(71,85,105,.4);box-shadow:0 1px 3px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05)}[data-theme=dark] .role-tree-title{color:#e5e7eb}[data-theme=dark] .role-tree-title:hover{background:rgba(255,255,255,.06)}[data-theme=dark] .role-tree-title.collapsed:after,[data-theme=dark] .role-tree-title.expanded:after{color:#94a3b8}[data-theme=dark] .role-tree-title.expanded:after{color:#60a5fa}[data-theme=dark] .role-list-item{color:#cbd5e1}[data-theme=dark] .role-list-item:hover{background:rgba(255,255,255,.05);color:#e5e7eb;border-left-color:rgba(96,165,250,.4)}[data-theme=dark] .role-list-item.active{background:linear-gradient(90deg,rgba(59,130,246,.2),rgba(59,130,246,.08));color:#60a5fa;border-left-color:#60a5fa;box-shadow:0 1px 2px rgba(96,165,250,.2),inset 0 0 0 1px rgba(96,165,250,.15)}[data-theme=dark] .role-list-item.active:before{background:#60a5fa;box-shadow:0 0 10px rgba(96,165,250,.6)}[data-theme=dark] .roles-sidebar-content::-webkit-scrollbar-thumb{background:rgba(148,163,184,.3)}[data-theme=dark] .roles-sidebar-content::-webkit-scrollbar-thumb:hover{background:rgba(96,165,250,.5)}[data-theme=dark] .role-tree-items .role-tree-items{border-left-color:rgba(71,85,105,.5)}@media (max-width:480px){.roles-sidebar-content{padding:clamp(12px,3vw,16px);border-radius:12px}.role-tree-title{font-size:clamp(12px,3vw,13px);padding:clamp(6px,2vw,8px) clamp(32px,8vw,36px) clamp(6px,2vw,8px) clamp(8px,2.5vw,10px);gap:clamp(6px,2vw,8px)}.role-tree-title span:first-child{font-size:clamp(14px,3.5vw,16px)}.role-list-item{font-size:clamp(12px,3vw,13px);padding:clamp(6px,2vw,8px) clamp(8px,2.5vw,10px);gap:clamp(6px,2vw,8px)}.role-list-item-icon{font-size:clamp(14px,3.5vw,16px);width:clamp(16px,4vw,18px);height:clamp(16px,4vw,18px)}.role-tree-title.collapsed:after,.role-tree-title.expanded:after{font-size:clamp(16px,4vw,18px);right:clamp(8px,2.5vw,10px)}}@media (min-width:481px) and (max-width:768px){.roles-sidebar-content{padding:clamp(14px,2.5vw,16px);border-radius:12px}.role-tree-title{padding:clamp(8px,1.5vw,9px) clamp(36px,7vw,38px) clamp(8px,1.5vw,9px) clamp(10px,2vw,11px)}.role-list-item,.role-tree-title{font-size:clamp(13px,2vw,14px);gap:clamp(8px,1.5vw,9px)}.role-list-item{padding:clamp(8px,1.5vw,9px) clamp(10px,2vw,11px)}.role-tree-title.collapsed:after,.role-tree-title.expanded:after{right:clamp(10px,2vw,12px)}}@media (min-width:769px) and (max-width:1024px){.roles-sidebar-content{padding:clamp(16px,2vw,18px)}.role-tree-title{font-size:clamp(13px,1.5vw,14px);padding:clamp(9px,1.2vw,10px) clamp(38px,5vw,40px) clamp(9px,1.2vw,10px) clamp(11px,1.5vw,12px)}.role-list-item{font-size:clamp(13px,1.5vw,14px);padding:clamp(9px,1.2vw,10px) clamp(11px,1.5vw,12px)}}@media (min-width:1025px) and (max-width:1440px){.role-tree-title{font-size:14px;padding:10px 40px 10px 12px}.role-list-item{font-size:14px;padding:10px 12px}}@media (min-width:1441px){.roles-sidebar-content{padding:clamp(20px,1.5vw,24px)}.role-tree-title{font-size:clamp(14px,1vw,15px);padding:clamp(10px,.8vw,12px) clamp(40px,3vw,44px) clamp(10px,.8vw,12px) clamp(12px,1vw,14px)}.role-list-item{font-size:clamp(14px,1vw,15px);padding:clamp(10px,.8vw,12px) clamp(12px,1vw,14px)}}@media (max-width:768px){.role-list-item-icon,.role-tree-title span:first-child{flex-shrink:0}.role-tree-title span:last-child{flex:1 1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.role-list-item.active{animation:none}.role-list-item:active,.role-tree-title:active{transform:translateX(1px) scale(.98)}.roles-sidebar-content::-webkit-scrollbar-thumb:hover,.roles-sidebar-explore::-webkit-scrollbar-thumb:hover{background:var(--color-primary)}