:root{--bg-color:#fcfafa;--surface:#ffffffd9;--surface-solid:#fff;--surface-hover:#fffffffa;--surface-gray:#0000000a;--text-main:#1d1916;--text-muted:#8b837d;--primary:#ff7b00;--primary-hover:#e56e00;--accent:#ffb800;--accent-hover:#e5a500;--success:#10b981;--danger:#ef4444;--border-radius-card:40px;--border-radius-button:999px;--border-radius-input:24px;--border-radius-pill:999px;--shadow-sm:0 4px 16px #ff7b000a;--shadow-md:0 16px 40px #ff7b0014;--shadow-lg:0 24px 64px #ff7b001f;--shadow-primary:0 12px 24px #ff7b004d;--transition:all .3s cubic-bezier(.25, 1, .5, 1);--font-heading:"Outfit", sans-serif;--font-body:"DM Sans", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);color:var(--text-main);-webkit-font-smoothing:antialiased;background-color:var(--bg-color);background-image:radial-gradient(circle at 100% 0,#ff7b004d 0%,#0000 50%);background-attachment:fixed;min-height:100vh;line-height:1.6}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--text-main);letter-spacing:-.02em;font-weight:700;line-height:1.2}p{font-family:var(--font-body)}.app-container{flex-direction:column;width:100%;height:100vh;display:flex;overflow:hidden}.main-content{flex:1;padding:40px;overflow-y:auto}.card,.glass-card{background:var(--surface);-webkit-backdrop-filter:blur(16px);border-radius:var(--border-radius-card);box-shadow:var(--shadow-md);transition:var(--transition);border:1px solid #fff6;padding:24px}.interactive-card{cursor:pointer}.interactive-card:hover{box-shadow:var(--shadow-lg);background:var(--surface-hover);transform:translateY(-2px)}.btn{border-radius:var(--border-radius-button);font-family:var(--font-heading);cursor:pointer;transition:var(--transition);border:none;justify-content:center;align-items:center;gap:8px;padding:14px 28px;font-size:16px;font-weight:600;display:inline-flex}.btn:active{transform:scale(.96)}.btn-primary{background-color:var(--text-main);color:#fff;box-shadow:0 8px 24px #00000026}.btn-primary:hover{background-color:#000;transform:translateY(-2px);box-shadow:0 12px 32px #0003}.btn-secondary{background-color:var(--surface-solid);color:var(--text-main);box-shadow:var(--shadow-sm);border:1px solid #0000000d}.btn-secondary:hover{box-shadow:var(--shadow-md);background-color:#fafafa;transform:translateY(-2px)}.btn-accent{background-color:var(--primary);color:#fff;box-shadow:var(--shadow-primary)}.btn-accent:hover{background-color:var(--primary-hover);transform:translateY(-2px)}.input-base{border-radius:var(--border-radius-input);background:var(--surface-solid);width:100%;color:var(--text-main);transition:var(--transition);border:1px solid #0000000f;padding:14px 20px;font-family:inherit;font-size:15px;box-shadow:inset 0 2px 4px #00000003}.input-base:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 4px #ffb34726}textarea.input-base{resize:vertical;min-height:100px}select.input-base{appearance:none;cursor:pointer;background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231C1B1A%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E);background-position:right 16px top 50%;background-repeat:no-repeat;background-size:10px;padding-right:40px}.pill{border-radius:var(--border-radius-pill);font-size:13px;font-weight:700;font-family:var(--font-heading);background:var(--surface-gray);color:var(--text-muted);transition:var(--transition);cursor:pointer;border:none;align-items:center;padding:6px 16px;display:inline-flex}.pill:hover{color:var(--text-main);background:#00000014;transform:translateY(-1px)}.pill.active{background:var(--text-main);color:#fff;box-shadow:var(--shadow-sm)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:0 0;border-radius:999px;transition:background-color .3s}.is-scrolling::-webkit-scrollbar-thumb{background:#00000040}@supports (overflow-y:overlay){.custom-scrollbar{overflow-y:overlay!important}}.custom-scrollbar{scrollbar-gutter:stable both-edges}.text-muted{color:var(--text-muted)}.font-heading{font-family:var(--font-heading)}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)translateY(-4px)}to{opacity:1;transform:scale(1)translateY(0)}}.magic-loader{color:#fff;background:linear-gradient(135deg,#104547,#1a6c6e);border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;display:flex;position:relative;box-shadow:0 12px 32px #10454766}.magic-loader svg{filter:drop-shadow(0 0 8px #fff9);animation:2.5s ease-in-out infinite floatMagic}.magic-loader:before,.magic-loader:after{content:"";border:3px solid #104547cc;border-radius:50%;animation:2s linear infinite pulseDeep;position:absolute;inset:-1px}.magic-loader:after{animation-delay:1s}@keyframes pulseDeep{0%{opacity:1;border-width:3px;transform:scale(1)}to{opacity:0;border-width:1px;transform:scale(1.6)}}@keyframes floatMagic{0%,to{transform:translateY(0)scale(1)rotate(-5deg)}50%{transform:translateY(-4px)scale(1.08)rotate(5deg)}}.sidebar-container{flex-shrink:0;width:112px;height:100vh;position:relative}.sidebar-pill{background:linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);z-index:1000;white-space:nowrap;filter:saturate(.5)brightness(.95);opacity:.9;border-radius:44px;flex-direction:column;width:88px;padding:24px 16px;transition:width .3s cubic-bezier(.25,1,.5,1),box-shadow .3s,filter .3s,opacity .3s;display:flex;position:absolute;top:24px;bottom:24px;left:24px;overflow:hidden;box-shadow:0 8px 24px #ff7b001a}.sidebar-pill:hover,.sidebar-pill.expanded{filter:saturate()brightness();opacity:1;width:260px;box-shadow:0 24px 64px #ff7b0059}.sidebar-logo{color:#fff;border-bottom:2px solid #ffffff26;align-items:center;margin-bottom:24px;padding:0 8px 32px;display:flex}.sidebar-logo img{object-fit:contain;flex-shrink:0;width:40px;height:40px}.sidebar-logo h2{color:#fff;opacity:0;margin:0 0 0 16px;font-size:24px;transition:opacity .2s}.sidebar-pill:hover .sidebar-logo h2,.sidebar-pill.expanded .sidebar-logo h2{opacity:1;transition-delay:.1s}.nav-item{color:#ffffffb3;font-weight:700;font-family:var(--font-heading);transition:var(--transition);border-radius:24px;align-items:center;width:100%;padding:16px;font-size:16px;text-decoration:none;display:flex}.nav-item:hover{color:#fff;background:#ffffff26;transform:translate(4px)}.nav-item.active{color:var(--primary);background:#fff;transform:none;box-shadow:0 4px 16px #0000000f}.nav-item .icon-container{flex-shrink:0;justify-content:center;align-items:center;width:24px;height:24px;display:flex}.nav-item span{opacity:0;margin-left:16px;transition:opacity .2s}.sidebar-pill:hover .nav-item span,.sidebar-pill.expanded .nav-item span{opacity:1;transition-delay:.1s}.sidebar-bottom{border-top:2px solid #ffffff26;flex-direction:column;gap:16px;margin-top:auto;padding-top:24px;display:flex}.project-selector{background:#ffffff26;border-radius:24px;width:100%;padding:4px;overflow:hidden}.project-selector select,.project-selector input,.project-selector .btn{color:#fff!important;border-color:#ffffff4d!important}.user-profile-btn{cursor:pointer;transition:var(--transition);text-align:left;color:#fff;background:0 0;border:none;border-radius:32px;align-items:center;width:100%;padding:8px;display:flex}.user-profile-btn:hover{background:#ffffff26}.user-avatar{width:40px;height:40px;color:var(--primary);background:#fff;border-radius:20px;flex-shrink:0;justify-content:center;align-items:center;font-weight:800;display:flex;overflow:hidden}.user-info{opacity:0;flex-direction:column;margin-left:16px;transition:opacity .2s;display:flex;overflow:hidden}.sidebar-pill:hover .user-info,.sidebar-pill.expanded .user-info{opacity:1;transition-delay:.1s}.user-info .name{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.user-info .email{opacity:.7;white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}
