.sidebar{width:250px;background-color:#1f2a48;color:#fff;display:flex;flex-direction:column;justify-content:space-between}.logo{display:flex;align-items:center;font-weight:700;font-size:18px;margin-top:30px;justify-content:center}.menu{list-style:none;padding:0;display:flex;flex-direction:column;margin-bottom:250px;margin-left:50px;background-color:#fff}.menu li{padding:15px 20px;cursor:pointer;list-style:none;transition:all .3s ease;background-color:#1f2a48;display:flex;gap:20px;align-items:center}.menu li img{width:25px;height:25px}.sidebar .menu li.active{background-color:#fff;color:#000;border-top-left-radius:20px;border-bottom-left-radius:20px;padding:10px 20px;font-weight:700}.sidebar .menu li.active:before{content:"";position:absolute;top:0;left:-20px;width:20px;height:100%;background-color:#1f2a48;border-top-left-radius:20px;border-bottom-left-radius:20px;z-index:-1}#top{border-bottom-right-radius:20px}#bottom{border-top-right-radius:20px}.user{margin-top:20px;font-size:14px;border-top:3px solid black;padding:20px 10px 20px 20px;display:flex;gap:10px;align-items:center}.user img{width:22px;height:22px}.burger{display:none}.menu li{transition:background-color .2s ease,color .2s ease,transform .15s ease,box-shadow .2s ease}.menu li img{transition:transform .2s ease,filter .2s ease,opacity .2s ease}.menu li:not(.active):hover{background-color:#2a3b5f;color:#fff;box-shadow:inset 0 0 0 1px #ffffff1f}.menu li:not(.active):hover img{transform:scale(1.06);filter:brightness(0) invert(1)}.menu li.active:hover{background-color:#fff;color:#000}.menu li:active{transform:translate(2px) scale(.99)}.burger{transition:transform .2s ease,opacity .2s ease}.burger:hover{transform:scale(1.08);opacity:.9}@media (max-width: 1000px){.sidebar{width:100%;flex-direction:row;align-items:center;justify-content:space-between;padding:10px}.menu,.user{display:none;position:absolute;top:80px;right:0;width:250px;background:#1f2a48;flex-direction:column;margin:0;border-top:2px solid #000;z-index:100}.menu.open{display:flex}.burger{display:block;background-color:transparent;color:#fff;border:none;font-size:20px}}.top-bar{display:flex;align-items:center;gap:10px;margin-bottom:20px;justify-content:space-between}.options{display:flex;flex-direction:row;gap:20px;align-items:center}.options select{padding:10px 20px;border-radius:6px;border:1px solid #ccc;background:#f9f9f9;transition:all .3s ease}.options select:hover{border-color:#1f2a48;background:#eef3ff}.text-boxes{display:flex;align-items:center;gap:10px;border-top:2px solid #ccc;padding:10px 0}.text-box{position:relative;width:100%;height:400px;margin-bottom:10px}textarea{width:100%;height:100%;background:#f0f7ff;color:#000;padding:12px;box-sizing:border-box;font-family:inherit;font-size:16px;line-height:1.6;border-radius:8px;border:1px solid #ccc;transition:all .3s ease}textarea:focus{outline:none;border-color:#1f2a48;box-shadow:0 0 5px #1f2a4866}.overlay{width:100%;height:100%;overflow-y:auto;background:#f0f7ff;padding:12px;font-family:inherit;font-size:16px;line-height:1.6;border-radius:8px;border:1px solid #ccc;white-space:pre-wrap;word-wrap:break-word}.swap{cursor:pointer;font-size:24px;padding:0 10px;-webkit-user-select:none;user-select:none;transition:transform .2s ease}.swap:hover{transform:scale(1.3);color:#1f2a48}.compare-btn,.add-btn,.edit-btn{margin-top:20px;padding:12px 24px;border:none;background:linear-gradient(135deg,#1f2a48,#2a3b5f);color:#fff;border-radius:8px;cursor:pointer;font-size:16px;transition:all .3s ease}.compare-btn:hover,.add-btn:hover,.edit-btn:hover{background:linear-gradient(135deg,#2a3b5f,#1f2a48);transform:translateY(-2px);box-shadow:0 4px 8px #0003}.s{display:flex;justify-content:center}.options{gap:20px}.options select,.options label{font-size:18px}.top-bar{width:100%}.checkbox button{font-size:18px}.overlay .added{color:#2e8b57;font-weight:700;background:#2e8b5726;border-radius:3px;padding:1px 3px}.overlay .removed{color:#b22222;font-weight:700;background:#b2222226;border-radius:3px;padding:1px 3px}@media (max-width: 588px){.top-bar{flex-direction:column}.options{flex-direction:column;width:100%;align-items:stretch;gap:10px}.options select{width:100%;font-size:18px}.options label{font-size:18px}.top-bar{align-items:flex-start;width:100%}.checkbox{width:100%}.checkbox button{width:100%;font-size:18px}}.app{display:flex;height:100vh;font-family:Poppins,sans-serif}.main{flex:1;background-color:#f7f8fa;padding:20px}*{margin:0;padding:0;box-sizing:border-box}@media (max-width: 1000px){.app{flex-direction:column}}