*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%;font-family:Poppins,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#3a3d40,#181719);color:#f0f0f0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}:root{--primary: #6f42c1;--primary-hover: #a682e7;--secondary: #20c997;--background-dark: #181719;--text-light: #f1f3f5;--shadow-dark: rgba(0, 0, 0, .8);--border-radius: 12px;--gap: 24px}.menu-container{max-width:960px;margin:0 auto;padding:24px 16px;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-start;gap:var(--gap)}.navbar{background:#6f42c1d9;display:flex;justify-content:center;border-radius:var(--border-radius);box-shadow:0 10px 25px var(--shadow-dark);padding:0 1rem;-webkit-user-select:none;user-select:none}.navbar>ul{display:flex;list-style:none;gap:32px;padding:.5rem 0}.nav-list-item{position:relative}.nav-item{font-weight:600;font-size:1.1rem;color:var(--text-light);background:transparent;border:none;cursor:pointer;padding:14px 20px;border-radius:var(--border-radius);transition:background-color .33s ease,color .33s ease;display:flex;align-items:center;gap:8px}.nav-item:hover,.nav-item.nav-item-selected{background:var(--primary-hover);color:#fff;box-shadow:0 6px 18px -2px var(--primary-hover)}.nav-item:focus-visible{outline:3px solid var(--secondary);outline-offset:2px}.dropdown{position:absolute;top:calc(100% + 8px);left:0;background:#2a2633;min-width:220px;border-radius:var(--border-radius);padding:8px 0;box-shadow:0 15px 30px #000000b3;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .4s cubic-bezier(.24,1,.5,1),transform .4s cubic-bezier(.24,1,.5,1),visibility .4s;z-index:10}.dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{width:100%;background:transparent;border:none;padding:14px 20px;font-size:1rem;color:var(--text-light);text-align:left;cursor:pointer;transition:background-color .25s ease;font-weight:500;border-radius:var(--border-radius)}.dropdown-item:hover,.dropdown-item.selected{background:var(--primary);color:#fff;box-shadow:inset 0 0 12px var(--primary)}.container{background:#25232b;border-radius:var(--border-radius);box-shadow:0 15px 40px #000000e6;padding:24px;animation:fadeInUp .6s ease forwards;min-height:360px}.btn{margin-left:5px}.btn,.btn-small{background:var(--primary);border-radius:var(--border-radius);border:none;color:#fff;font-weight:600;cursor:pointer;padding:14px 28px;font-size:1rem;transition:background-color .3s ease,box-shadow .4s ease;box-shadow:0 6px 20px #6f42c180}.btn-small{padding:10px 18px;font-size:.9rem}.btn:hover{background-color:var(--primary-hover);box-shadow:0 10px 25px #6f42c1bf}.btn:focus-visible,.btn-small:focus-visible{outline:3px solid var(--secondary);outline-offset:3px}.btn-back{background-color:#e55353;padding:12px 20px;color:#fff;font-weight:700;border-radius:var(--border-radius);outline-offset:3px;outline:none;box-shadow:0 6px 18px #e55353cc;cursor:pointer;transition:background-color .3s ease,box-shadow .3s ease;box-sizing:border-box;border:none;-webkit-user-select:none;user-select:none}.btn-back:hover,.btn-back:focus{background-color:#ff6868;box-shadow:0 10px 25px #ff6868e6;outline:3px solid #ff6868}.btn-back:focus-visible{outline:3px solid #ff6868;outline-offset:3px}input[type=text],input[type=number],textarea{background:#3a3a49;border:none;border-radius:var(--border-radius);padding:14px 20px;color:#eee;font-size:1rem;width:100%;font-weight:500;resize:vertical;min-height:40px;transition:background-color .3s ease;box-shadow:inset 0 2px 5px #00000080}input[type=text]:focus,input[type=number]:focus,textarea:focus{outline:none;background:#5c52aa;box-shadow:0 0 15px var(--primary)}.input-container,.btn-container,.menu-list{display:flex;gap:var(--gap);flex-wrap:wrap;justify-content:center;margin:24px 0}.input-container{flex-direction:column;max-width:100%}.menu-list{flex-direction:column;align-items:center}.menu-button{background-color:var(--primary);border-radius:var(--border-radius);border:none;color:#fff;padding:16px 36px;font-weight:600;font-size:1.2rem;min-width:220px;cursor:pointer;box-shadow:0 8px 30px #6f42c199;transition:background-color .3s ease}.menu-button:hover,.menu-button:focus-visible{background-color:var(--primary-hover);outline:none;box-shadow:0 10px 40px #a68ce6cc}.output-text,.queue-elements{background:#312f4a;border-radius:var(--border-radius);padding:16px 20px;margin-top:24px;font-weight:600;color:var(--secondary);font-size:1.1rem;min-height:40px;box-shadow:inset 0 0 12px var(--secondary)}@media (max-width: 900px){.navbar>ul{gap:16px}.menu-button,.btn,.btn-small{width:100%;min-width:unset}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}textarea{scrollbar-width:thin;scrollbar-color:var(--primary) transparent}textarea::-webkit-scrollbar{width:8px}textarea::-webkit-scrollbar-track{background:transparent}textarea::-webkit-scrollbar-thumb{background-color:var(--primary);border-radius:10px}button:focus-visible{outline-offset:2px;outline:3px solid var(--secondary)}.stack-diagram{display:flex;flex-direction:column;align-items:center;margin-top:20px}.stack-element{background:#6f42c1;color:#fff;padding:10px 2%;margin:5px 0;border-radius:var(--border-radius);box-shadow:0 2px 5px #0000004d;width:90%;max-width:200px;text-align:center}@media (max-width: 600px){.stack-element{padding:8px 5%;font-size:14px}}@media (min-width: 601px) and (max-width: 1200px){.stack-element{padding:10px 4%;font-size:16px}}@media (min-width: 1201px){.stack-element{padding:10px 2%;font-size:18px}}.queue-container{background:#25232b;border-radius:var(--border-radius);box-shadow:0 15px 40px #000000e6;padding:24px;margin:20px 0}.queue-title{color:var(--text-light)}.input-container{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}.queue-elements{margin-top:10px;color:var(--text-light)}.queue-diagram{margin-top:20px;display:flex;flex-direction:column}.queue-diagram-visual-horizontal{display:flex;flex-direction:row;justify-content:center;align-items:center;flex-wrap:wrap}.queue-element{background:#6f42c1;color:#fff;padding:10px 20px;margin:5px;border-radius:var(--border-radius);box-shadow:0 2px 5px #0000004d;width:60px;text-align:center}@media (max-width: 768px){.input-container{flex-direction:column}.queue-element{width:80%}.queue-diagram{flex-direction:column}}@media (min-width: 769px){.queue-diagram{flex-direction:row}}.container{padding:20px;border-radius:8px;box-shadow:0 2px 10px #0000001a;max-width:1200px;margin:auto}.input-container{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.btn-container{margin-top:10px}.btn,.btn-small,.btn-back{padding:10px 15px;border:none;border-radius:5px;background-color:#6f42c1;color:#fff;cursor:pointer;flex:1;min-width:120px}.btn-back{background-color:#dc3545}.input-style{padding:10px;border:1px solid #ced4da;border-radius:5px;flex:1;min-width:200px}.linked-list-diagram{margin-top:20px;overflow-x:auto}.linked-list-visual{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}.linked-list-node{background:#6f42c1;color:#fff;padding:10px 20px;margin:5px;border-radius:5px;box-shadow:0 2px 5px #0000004d;text-align:center;flex:0 1 100px}@media (max-width: 768px){.input-container{flex-direction:column}.btn,.btn-small,.btn-back,.input-style{width:100%}.linked-list-node{flex:0 1 80px}}@media (max-width: 480px){.linked-list-node{padding:5px 10px;margin:2px}}.container{max-width:1200px;margin:auto;text-align:center;padding:20px;overflow:auto}.input-style{padding:10px;width:80%;font-size:16px}.tree-node{display:inline-block;padding:10px;margin:5px;border:1px solid #fff;border-radius:5px}.children{display:flex;justify-content:center;flex-wrap:wrap;margin-top:10px}.left-child,.right-child{flex:1 1 100%;margin:5px}.tree-diagram{margin-top:20px;padding:10px;border:1px solid #ccc;border-radius:5px;display:inline-block}.btn-back{background-color:#dc3545;padding:10px 20px;color:#fff;border:none;border-radius:5px;cursor:pointer}.btn-back:hover{background-color:#c82333}@media (max-width: 768px){.input-style{width:90%}.tree-node{min-width:40%}.children{flex-direction:column;align-items:center}.left-child,.right-child{flex:1}}@media (max-width: 576px){.tree-node{min-width:50px;flex-basis:calc(100% - 20px)}.children{flex-direction:column}}.home{margin:0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;height:82vh;width:90%;max-width:1200px;text-align:center;background-color:#f0f4f8;padding:20px;box-sizing:border-box}@media (max-width: 768px){.home{height:auto;width:95%}}@media (max-width: 480px){.home{padding:10px;width:100%}}@media (max-width: 600px){.container{padding:10px}.btn{width:100%;padding:15px}.input{width:100%}.queue-diagram-visual-horizontal{flex-direction:column;align-items:center}.tree-node{margin:5px 0;width:100%}.children{flex-direction:column}.left-child,.right-child{width:100%;text-align:center}}@media (max-width: 768px){.children{flex-direction:column}.left-child,.right-child{width:100%;text-align:center}.tree-node{margin:5px 0}}