:root{--Neutral-900: hsl(227, 75%, 14%);--Neutral-800: hsl(226, 25%, 17%);--Neutral-700: hsl(225, 23%, 24%);--Neutral-600: hsl(226, 11%, 37%);--Neutral-300: hsl(0, 0%, 78%);--Neutral-200: hsl(217, 61%, 90%);--Neutral-100: hsl(0, 0%, 93%);--Neutral-0: hsl(200, 60%, 99%);--BG-dark: linear-gradient(180deg, #040918 0%, #091540 100%);--BG-light: linear-gradient(180deg, #EBF2FC 0%, #EEF8F9 100%);--Red-400: hsl(3, 86%, 64%);--Red-500: hsl(3, 71%, 56%);--Red-700: hsl(3, 77%, 44%);--ff: "Noto Sans", sans-serif;--fs: 16px;--fw-400: 400;--fw-500: 500;--fw-700: 700}*,*:after,*:before{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;min-height:100vh;overflow-x:hidden}body{font-size:var(--fs);font-family:var(--ff);background:var(--BG-light);transition:background .3s ease-in-out,color .3s ease-in-out}#root{margin-inline:auto;padding:2rem;max-width:76rem}.dark-mode{background:var(--BG-dark);transition:background .3s ease-in-out,color .3s ease-in-out}.header{background-color:var(--Neutral-0);display:flex;justify-content:space-between;align-items:center;padding:.75rem;border-radius:.75rem;border:1px solid var(--Neutral-200);transition:background-color .3s ease-in-out,color .3s ease-in-out,border .3s ease-in-out}.content{text-align:center;margin-top:2rem;color:var(--Neutral-900)}.title{font-size:1.75rem}.filter-buttons{display:flex;justify-content:center;gap:1rem;margin-top:1rem}.filter-btn{padding:.75rem 1.5rem;border-radius:30px;border:1px solid var(--Neutral-200);font-size:var(--fs);font-weight:var(--fw-400);font-family:var(--ff);color:var(--Neutral-900);background:var(--Neutral-0);cursor:pointer}.filter-btn.active{background-color:var(--Red-700);color:var(--Neutral-0)}.manager-container{margin-top:2rem;display:flex;flex-direction:column;gap:.8rem}.filter-btn:hover{background:var(--Neutral-100);color:var(--Neutral-600)}.filter-btn:focus-visible{outline:2px solid var(--Red-700)}.dark{background-color:var(--Neutral-800);border:none;transition:background-color .3s ease-in-out,color .3s ease-in-out,border .3s ease-in-out}.dark-mode-title{color:var(--Neutral-0)}.dark-mode-btn{background:var(--Neutral-700);color:var(--Neutral-0);border:1px solid var(--Neutral-600)}.dark-mode-btn.active{background-color:var(--Red-400);color:var(--Neutral-900)}.dark-mode-btn:hover{background:var(--Neutral-600);color:var(--Neutral-0)}.filter-btn.active:hover{background:var(--Red-500)}.dark-mode-btn:focus-visible{background:var(--Neutral-600);color:var(--Neutral-0);border:1px solid var(--Neutral-900)}@media (min-width: 768px){.content{display:flex;justify-content:space-between;align-items:center}.filter-buttons{display:flex;justify-content:center;gap:1rem;margin-top:0}.manager-container{margin-top:1rem;display:grid;grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.header{padding:1rem;border-radius:1rem}.content{margin-top:5rem}.title{font-size:2.15rem}.manager-container{margin-top:2rem;display:grid;grid-template-columns:repeat(3,1fr)}}.switch-model{background:var(--Neutral-100);height:40px;width:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer}.switch-model:hover{background:var(--Neutral-300)}.switch-model:focus-visible{outline:2px solid var(--Red-700)}.switch-model-dark{background:var(--Neutral-700)}.switch-model-dark:hover{background:var(--Neutral-600)}.extension-item{background:var(--Neutral-0);padding:1rem;border-radius:15px;border:1px solid var(--Neutral-200)}.extension-info{display:flex}.extension-icon{align-self:start}.extension-details{display:flex;flex-direction:column;gap:.5rem;margin-left:1rem}.extension-name{color:var(--Neutral-900)}.extension-description{color:var(--Neutral-600);font-weight:var(--fw-500)}.extension-actions{display:flex;justify-content:space-between;margin-top:2rem}.remove-button{background:var(--Neutral-0);padding:.5rem 1rem;border-radius:20px;border:1px solid var(--Neutral-300);font-family:var(--ff);font-weight:var(--fw-700);color:var(--Neutral-900);font-size:.9rem;cursor:pointer}.remove-button:hover{background:var(--Red-700);color:var(--Neutral-0)}.remove-button:focus-visible{outline:2px solid var(--Red-700);background:var(--Neutral-100);border:1px solid var(--Neutral-0)}.dark-mode-extension-item{background:var(--Neutral-800);border:1px solid var(--Neutral-600)}.dark-mode-extension-name{color:var(--Neutral-0)}.dark-mode-extension-description{color:var(--Neutral-100)}.dark-mode-remove-button{background:var(--Neutral-800);color:var(--Neutral-0)}.dark-mode-remove-button:hover{border:1px solid var(--Red-400);background:var(--Red-400);color:var(--Neutral-900)}.dark-mode-remove-button:focus-visible{background:var(--Neutral-600);border:1px solid var(--Neutral-90000)}.toggle-switch{position:relative;display:inline-block;width:40px;height:23px;align-self:center}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--Neutral-300);border-radius:26px;transition:.4s}.slider:before{content:"";position:absolute;height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;border-radius:50%;transition:.4s}input:checked+.slider{background-color:var(--Red-700)}input:checked+.slider:before{transform:translate(16px)}input:checked+.slider:hover{background-color:var(--Red-500)}span:focus-visible{outline:2px solid var(--Red-700);border:1px solid var(--Neutral-0)}.dark-mode-slider{background-color:var(--Neutral-600)}input:checked+.dark-mode-slider{background-color:var(--Red-400)}input:checked+.dark-mode-slider:hover{background-color:var(--Red-500)}.dark-mode-slider:focus-visible{border:1px solid var(--Neutral-900)}