@layer components{.top-bar{position:sticky;top:var(--space-s);z-index:100;margin-inline:auto;width:min(100% - 1rem,1200px);background:var(--color-surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:var(--space-s)var(--space-m);border:1px solid var(--color-border);margin-top:var(--space-s);@media(max-width:768px){padding-inline: var(--space-s); width: 100%; border-radius: 0; top: 0; margin-top: 0; border-inline: none; border-top: none;}& .top-bar__inner{display:flex;justify-content:space-between;align-items:center;max-width:100%;margin:0;padding:0}& .top-bar__logo{display:flex;align-items:center;gap:var(--space-xs);font-weight:700;font-size:var(--size-step-1);color:var(--color-text);white-space:nowrap;& a{text-decoration:none}}& .top-bar__nav{display:flex;gap:var(--space-m);@media(max-width:768px){position: fixed; top: 0; right: 0; bottom: 0; width: calc(6 / 7 * 100%); background: var(--color-surface); flex-direction: column; padding: var(--space-xl) var(--space-m); z-index: 101; transform: translateX(100%); transition: transform 0.3s ease-in-out; box-shadow: var(--shadow-xl); overflow-y: auto;}}& .top-bar__nav-projects{display:none;@media(max-width:768px){display: flex; flex-direction: column; gap: var(--space-s); margin-bottom: var(--space-m); padding-bottom: var(--space-m); border-bottom: 1px solid var(--color-border);}& .top-bar__nav-project-add-form{margin:0}& .top-bar__nav-project-add{display:flex;align-items:center;gap:.75rem;padding:.75rem;border-radius:var(--radius-m);background:var(--color-green-primary);color:var(--clr-white);border:none;width:100%;cursor:pointer;font-family:inherit;font-weight:600;font-size:1rem;transition:opacity .2s;&:hover{opacity:.9}& .top-bar__nav-project-icon{width:1.25rem;height:1.25rem}}& .top-bar__nav-projects-list{display:flex;flex-direction:column;gap:.25rem}& .top-bar__nav-projects-title{font-size:.75rem;text-transform:uppercase;color:var(--color-text);opacity:.6;font-weight:700;margin-top:var(--space-s);margin-bottom:var(--space-xs);padding-inline:.25rem}& .top-bar__nav-project-item{display:flex;align-items:center;gap:.75rem;padding:.625rem .75rem;border-radius:var(--radius-m);text-decoration:none;color:var(--color-text);font-size:1rem;transition:background .2s;&:hover{background:var(--color-blue-bg)}&.is-active{color:var(--color-primary);font-weight:600;background:var(--color-blue-bg)}& .top-bar__nav-project-icon{width:1.25rem;height:1.25rem;opacity:.7}}}& .top-bar__hamburger{display:none;flex-direction:column;gap:6px;background:0 0;border:none;cursor:pointer;padding:.5rem;z-index:102;@media(max-width:768px){display: flex;}& .hamburger__line{width:24px;height:2px;background-color:var(--color-text);transition:all .3s ease-in-out;border-radius:2px}}& .top-bar__overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);z-index:100;opacity:0;transition:opacity .3s ease-in-out}&[data-search-pinned]{position:relative}&[data-menu-open]{& .top-bar__nav{transform:translateX(0)}& .top-bar__overlay{display:block;opacity:1}& .top-bar__hamburger{& .hamburger__line:nth-child(1){transform:translateY(8px)rotate(45deg)}& .hamburger__line:nth-child(2){opacity:0}& .hamburger__line:nth-child(3){transform:translateY(-8px)rotate(-45deg)}}}& .top-bar__link{text-decoration:none;color:var(--color-text);font-size:.9rem;font-weight:500;opacity:.8;transition:opacity .2s;@media(max-width:768px){font-size: var(--size-step-1); padding-block: var(--space-s); border-bottom: 1px solid var(--color-border); width: 100%; &:last-child{border-bottom:none}}&:hover{opacity:1}}& .top-bar__project{position:relative;& .top-bar__project-toggle{display:flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:var(--radius-m);background:var(--color-blue-bg);color:var(--color-text);border:1px solid var(--color-border);font-family:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap;@media(max-width:768px){padding: 0.1rem 0.3rem; border-radius: 0.3rem; display: none;}&:hover{background:var(--color-surface);border-color:var(--color-primary)}& .top-bar__project-chevron{width:.9rem;height:.9rem;opacity:.5;transition:transform .2s}}&[data-open]{& .top-bar__project-toggle{background:var(--color-surface);border-color:var(--color-primary);& .top-bar__project-chevron{transform:rotate(180deg)}}& .top-bar__project-dropdown{display:flex}}& .top-bar__project-dropdown{display:none;position:absolute;top:calc(100% + .5rem);left:0;min-width:200px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-m);box-shadow:var(--shadow-lg);flex-direction:column;padding:.5rem;z-index:1000;@media(max-width:768px){position: static; box-shadow: none; border: none; padding: 0; margin-top: 0.5rem; min-width: 100%;}& .top-bar__project-add-form{margin:0}& .top-bar__project-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:var(--radius-m);text-decoration:none;color:var(--color-text);font-size:.875rem;transition:background .2s;border:none;background:0 0;width:100%;cursor:pointer;font-family:inherit;&:hover{background:var(--color-blue-bg)}&.is-active{color:var(--color-primary);font-weight:600;background:var(--color-blue-bg)}& .top-bar__project-icon{width:1.1rem;height:1.1rem;flex-shrink:0}}& .top-bar__project-add{color:var(--color-green-primary);font-weight:600;border-bottom:1px solid var(--color-border);border-radius:0;margin-bottom:.25rem;padding-bottom:.625rem;& .top-bar__project-icon{color:var(--color-green-primary)}}}}& .top-bar__feedback-btn{display:flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border-radius:var(--radius-m);background:var(--color-green-primary);color:var(--clr-white);border:1px solid transparent;text-decoration:none;font-size:.875rem;font-weight:600;white-space:nowrap;transition:opacity .2s;&:hover{opacity:.88}& .top-bar__feedback-icon{width:1rem;height:1rem;flex-shrink:0}@media(max-width:768px){margin-top: var(--space-s); padding: 0.75rem; font-size: 1rem; border-radius: var(--radius-m); justify-content: flex-start;}}@media(prefers-color-scheme:dark){& .top-bar__feedback-btn{background:var(--color-green-bg);color:var(--color-green-primary);border-color:var(--color-green-border)}}& .top-bar__framework{position:relative;margin-inline-start:var(--space-m);@media(max-width:768px){margin-inline-start: auto;}& .top-bar__framework-toggle{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:var(--radius-m);background:var(--color-blue-bg);border:1px solid var(--color-border);color:var(--color-text);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;&:hover{background:var(--color-surface);border-color:var(--color-primary)}& .top-bar__framework-chevron{width:1rem;height:1rem;opacity:.5;transition:transform .2s}}&[data-open]{& .top-bar__framework-toggle{background:var(--color-surface);border-color:var(--color-primary);& .top-bar__framework-chevron{transform:rotate(180deg)}}& .top-bar__framework-dropdown{display:flex}}& .top-bar__framework-dropdown{display:none;position:absolute;top:calc(100% + .5rem);right:0;min-width:180px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-m);box-shadow:var(--shadow-lg);flex-direction:column;padding:.5rem;z-index:1000;@media(max-width:768px){position: static; box-shadow: none; border: none; padding: 0; margin-top: 0.5rem; min-width: 100%;}& .top-bar__framework-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:var(--radius-m);text-decoration:none;color:var(--color-text);font-size:.875rem;transition:background .2s;&:hover{background:var(--color-blue-bg)}&.is-active{color:var(--color-primary);font-weight:600;background:var(--color-blue-bg)}}}}& .top-bar__locale{position:relative;margin-inline-start:var(--space-m);@media(max-width:768px){margin-inline-start: auto;}& .top-bar__locale-toggle{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:var(--radius-m);background:var(--color-blue-bg);border:1px solid var(--color-border);color:var(--color-text);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;@media(max-width:768px){padding: 0.4rem; gap: 0; background: none; border: none;}&:hover{background:var(--color-surface);border-color:var(--color-primary)}& .top-bar__locale-icon{width:1.25rem;height:1.25rem}& .top-bar__locale-name{@media(max-width:768px){display: none;}}& .top-bar__locale-chevron{width:1rem;height:1rem;opacity:.5;transition:transform .2s;@media(max-width:768px){display: none;}}}&[data-open]{& .top-bar__locale-toggle{background:var(--color-surface);border-color:var(--color-primary);& .top-bar__locale-chevron{transform:rotate(180deg)}}& .top-bar__locale-dropdown{display:flex}}& .top-bar__locale-dropdown{display:none;position:absolute;top:calc(100% + .5rem);right:0;min-width:160px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-m);box-shadow:var(--shadow-lg);flex-direction:column;padding:.5rem;z-index:1000;@media(max-width:768px){position: static; box-shadow: none; border: none; padding: 0; margin-top: 0.5rem; min-width: 100%;}& .top-bar__locale-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;border-radius:var(--radius-m);text-decoration:none;color:var(--color-text);font-size:.875rem;transition:background .2s;&:hover{background:var(--color-blue-bg)}&.is-active{color:var(--color-primary);font-weight:600;background:var(--color-blue-bg)}& .top-bar__locale-icon{width:1.25rem;height:1.25rem}}}}}}