.sidebar{width:210px;height:100vh;position:relative;overflow:hidden;border-right:1px solid rgba(255,255,255,.15);background:linear-gradient(180deg,#2d3748,#4a5568 30%,#718096 70%,#a0aec0);box-shadow:4px 0 20px #00000040;z-index:1000}.sidebar-bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 20%,rgba(102,126,234,.12) 0%,transparent 50%),radial-gradient(circle at 80% 40%,rgba(240,147,251,.1) 0%,transparent 50%),radial-gradient(circle at 40% 80%,rgba(79,172,254,.08) 0%,transparent 50%);pointer-events:none}.sidebar-scroll{height:100%;overflow-y:overlay;padding-bottom:40px;position:relative;z-index:2}.sidebar-scroll::-webkit-scrollbar{width:0}.sidebar-scroll{scrollbar-width:none;-ms-overflow-style:none}.sidebar-logo{text-align:center;padding:18px 10px}.logo-title{font-size:1.2rem;font-weight:700;background:linear-gradient(45deg,#667eea,#764ba2);-webkit-background-clip:text;color:transparent}.logo-sub{font-size:.7rem;color:#fff9;font-style:italic}.sidebar-home{display:flex;align-items:center;padding:12px 15px;margin:0 10px 10px;border-radius:10px;text-decoration:none;color:#fff;background:#ffffff1a;transition:all .25s}.sidebar-home:hover{background:#ffffff26;transform:translate(4px)}.tool-block{margin-bottom:8px}.tool-header{display:flex;justify-content:space-between;align-items:center;margin:0 10px;padding:12px 15px;color:#fff;cursor:pointer;border-radius:10px;background:#ffffff14;transition:all .25s}.tool-header:hover{background:#ffffff24;transform:translate(4px)}.tool-header.active{background:linear-gradient(135deg,#ffd36a,#f5a623);color:#000;font-weight:600}.tool-left{display:flex;align-items:center;gap:10px}.tool-arrow{transition:transform .25s}.tool-arrow.open{transform:rotate(90deg)}.tool-dropdown{margin:5px 10px 0;background:#0003;border-radius:6px;overflow:hidden}.tool-item{display:block;padding:10px 15px 10px 35px;color:#fffc;text-decoration:none;transition:all .2s}.tool-item:hover{background:#ffffff14;color:#fff}.tool-item.active{background:#ffffff26;color:#fff}body{margin:0;font-family:sans-serif}.app-layout{display:flex;height:100vh}.sidebar{width:200px;background-color:#222;color:#fff;padding:20px 0}.sidebar a{display:block;color:#bbb;padding:10px 20px;text-decoration:none}.sidebar a:hover,.sidebar a.active{background-color:#444;color:#fff}.tool-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:10px 20px;color:#bbb;transition:background-color .3s ease,color .3s ease}.tool-header:hover,.tool-header.active{background-color:#444;color:#fff}.tool-name{flex:1}.dropdown-arrow{padding:0 10px;color:#bbb;font-size:12px;transition:transform .3s ease,color .3s ease}.tool-header:hover .dropdown-arrow{color:#fff}.tool-items{background-color:#1a1a1a;border-top:1px solid #333}.tool-items .sub-item{padding:8px 20px 8px 40px;font-size:14px;color:#ccc;border-left:3px solid transparent}.tool-items .sub-item:hover,.tool-items .sub-item.active{background-color:#333;color:#fff;border-left-color:#e67e22}.main-content{flex:1;display:flex;flex-direction:column}.topbar{height:60px;background-color:#f2f2f2;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid #ddd}.page-content{flex:1;padding:20px;background-color:#f9f9f9;overflow-y:auto}.tool-card{background:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 10px #0000001a;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;text-decoration:none;color:inherit;overflow:hidden}.tool-card:hover{transform:translateY(-5px);box-shadow:0 5px 20px #00000026}.tool-card-text{background:linear-gradient(135deg,#4facfe,#00f2fe)}.tool-card-data{background:linear-gradient(135deg,#43e97b,#38f9d7)}.tool-icon{font-size:2rem;margin-bottom:15px}.tool-title{font-size:1.2rem;font-weight:600;color:#333;margin:0 0 10px}.tool-description{color:#666;line-height:1.5;margin:0}.tool-card-dev{background:linear-gradient(135deg,#667eea,#764ba2)}.tool-card-design{background:linear-gradient(135deg,#f093fb,#f5576c)}.tool-card-security{background:linear-gradient(135deg,#4facfe,#00f2fe)}.tool-card-analytics{background:linear-gradient(135deg,#43e97b,#38f9d7)}.search-container{display:flex;align-items:center;background:#f5f5f5;border-radius:20px;padding:8px 15px;margin-right:20px}.search-input{border:none;background:transparent;outline:none;width:200px;font-size:14px}.search-icon{width:16px;height:16px;margin-right:8px;opacity:.6}.lang-switch{background:none;border:1px solid #ddd;border-radius:4px;padding:6px 12px;cursor:pointer;margin-right:15px;font-size:12px;transition:all .3s ease}.lang-switch:hover{background:#f0f0f0}.notification-bell{background:none;border:none;cursor:pointer;margin-right:15px;position:relative}.bell-icon{width:20px;height:20px;opacity:.7}.notification-badge{position:absolute;top:-5px;right:-5px;background:#e74c3c;color:#fff;border-radius:50%;width:16px;height:16px;font-size:10px;display:flex;align-items:center;justify-content:center}.user-profile{position:relative;cursor:pointer}.avatar{width:32px;height:32px;border-radius:50%;border:2px solid #ddd}.profile-menu{position:absolute;top:100%;right:0;background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 2px 10px #0000001a;min-width:150px;z-index:1000;display:none}.profile-menu.show{display:block}.profile-menu-item{padding:10px 15px;border-bottom:1px solid #f0f0f0;cursor:pointer;transition:background-color .3s ease}.profile-menu-item:hover{background:#f5f5f5}.profile-menu-item:last-child{border-bottom:none}@media (max-width: 768px){.sidebar{width:200px}.search-input{width:150px}.topbar{padding:10px 15px}}