.title{color:#FFFFFF!important}.icon-color{color:#FFFFFF;font-size:1.25rem;transition:color .2s ease}.fixed-logo-card{position:fixed;height:4.5rem;top:.5rem;left:18rem;display:flex;align-items:center;gap:1.5rem;z-index:1001;background:none;padding:0 1rem;border-radius:12px;pointer-events:none}.harmonic-logo{height:48px;width:auto;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.header-title-section{display:flex;flex-direction:column;gap:.25rem}.main-title{font-size:1.75rem;font-weight:800;background:linear-gradient(135deg,#ffffff,#00ff96 50%,#00c8ff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0;line-height:1.2;letter-spacing:-.02em;text-shadow:0 0 20px rgba(0,255,150,.3)}.subtitle{font-size:.875rem;color:rgba(255,255,255,.8);margin:0;font-weight:500;letter-spacing:.5px;text-shadow:0 0 10px rgba(255,255,255,.2)}.playground-header{height:var(--header-height,80px);min-height:80px;background:linear-gradient(135deg,rgba(5,5,10,.98),rgba(10,10,20,.98) 25%,rgba(15,15,25,.98) 50%,rgba(12,12,22,.98) 75%,rgba(5,5,10,.98));border-bottom:1px solid rgba(0,200,255,.3);color:#FFFFFF;display:flex;align-items:center;justify-content:space-between;padding:1.5rem;position:-webkit-sticky;position:sticky;top:0;z-index:1000;width:100%;box-sizing:border-box;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 20px rgba(0,200,255,.1),inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(0,0,0,.2);position:relative;overflow:visible}.playground-header:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#00ff96 20%,#00c8ff 40%,#8000ff 60%,#ff0080 80%,transparent);animation:headerPulse 3s ease-in-out infinite}@keyframes headerPulse{0%,to{opacity:.6;transform:translateX(-100%)}50%{opacity:1;transform:translateX(100%)}}.header-title{display:flex;align-items:center;gap:.75rem;color:#FFFFFF}.header-title .logo{height:32px;width:auto;color:white}.header-title h2{font-size:1.125rem;font-weight:600;color:#FFFFFF;margin:0;white-space:nowrap}.header-nav{display:flex;gap:.5rem}.nav-button{background:linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.8);cursor:pointer;padding:.5rem 1rem;border-radius:6px;transition:all .3s cubic-bezier(.23,1,.32,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.nav-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,200,255,.1),transparent);transition:left .4s ease}.nav-button:hover:before{left:100%}.nav-button:hover{background:linear-gradient(135deg,rgba(0,200,255,.15),rgba(0,100,255,.1));border-color:rgba(0,200,255,.3);color:#ffffff;transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,200,255,.2),inset 0 1px 0 rgba(255,255,255,.1)}.header-actions{display:flex;align-items:center;gap:1rem}.welcome-text{font-size:1.25rem;color:white;white-space:nowrap}.close-button{display:flex;align-items:center;justify-content:center;background:none;border:none;color:white;cursor:pointer;padding:.375rem;border-radius:var(--radius-md);transition:background-color .2s ease}.search-form{position:absolute;top:100%;left:1rem;right:1rem;background:var(--background-color,#ffffff);border:1px solid var(--border-color,#e5e7eb);border-radius:8px;padding:.5rem;box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:100}.search-input{width:100%;padding:.5rem;border:none;outline:none;background:transparent;color:var(--text-color,#111827)}.user-dropdown{position:absolute;top:100%;right:1rem;background:var(--background-color,#ffffff);border:1px solid var(--border-color,#e5e7eb);border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:100;min-width:180px}.dropdown-item{display:flex;align-items:center;gap:.5rem;width:100%;padding:.75rem 1rem;border:none;background:none;color:var(--text-color,#111827);text-align:left;cursor:pointer;transition:background-color .2s ease}.dropdown-item:hover{background-color:var(--surface-color,#f3f4f6)}.dropdown-item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.dropdown-item:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.dropdown-item.logging-out{opacity:.7;cursor:not-allowed;background-color:var(--surface-color,#f3f4f6)}.dropdown-item:disabled{cursor:not-allowed}.logout-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:992px){.user-name{display:none}.search-form{width:250px}}@media (max-width:768px){.mobile-menu-btn,.search-toggle{display:block}.search-form{position:absolute;top:100%;left:0;width:0;overflow:hidden;opacity:0;padding:0;transition:width .3s ease,opacity .3s ease}.search-open{width:calc(100vw - 3rem);opacity:1;padding:.5rem 1rem;background-color:var(--background-color);border:1px solid var(--border-color);box-shadow:var(--shadow-md)}.header-title h2{font-size:1rem}.header-title-text{max-width:150px}.welcome-text{display:none}}@media (max-width:576px){.header,.playground-header{padding:0 1rem}.playground-btn{display:none}.header-title .logo{height:28px}.navigation-controls{margin-right:.25rem}}.header-center{flex:1 1;display:flex;align-items:center;justify-content:center;gap:1rem}