:root{--header-blue: #32A1C8;--background-blue: #0A5064;--text-primary: white;--yellow: #FFDC85;--green: #2FE0B3;--pink: #F15F86;--dark-teal: #063C4C;--plum: #5A2A41;--burnt-orange: #C75C32;--placeholder: #747474;--lavender: #A58EBF;--dusty-blue: #588CA4;--lavender-dark: #8a72a8;--dusty-blue-dark: #45738A}body{font-family:Arial,sans-serif;background:var(--background-blue);color:var(--yellow);padding-top:8vh;overflow-x:hidden}h2{color:var(--header-blue)}form{margin-left:10px;display:flex;gap:10px;flex-direction:column}label{color:var(--yellow)}select{background:var(--dark-teal);color:var(--text-primary);border:var(--yellow);border-radius:2px}.short-string-input{background:var(--dark-teal);color:var(--text-primary);width:200px;height:40px;padding:8px;border:1px solid var(--pink);border-radius:5px;font-size:1rem;font-family:Roboto,serif}.login-input{background:var(--dark-teal);color:var(--text-primary);width:300px;height:32px;padding:6px;border:1px solid var(--pink);border-radius:5px;font-size:1rem;font-family:Roboto,serif}.long-string-input{background:var(--dark-teal);color:var(--text-primary);width:100%;height:120px;padding:10px;border:1px solid var(--pink);border-radius:5px;font-size:1rem;resize:none;font-family:Roboto,serif;box-sizing:border-box}.long-string-input:focus,.short-string-input:focus{border-color:var(--green);outline:none}#test-inputs{display:flex;flex-direction:column;margin:20px 0}button{border:none;padding:8px 12px;border-radius:5px;cursor:pointer;transition:background .2s}.button-primary{background-color:var(--pink);color:var(--text-primary);font-weight:700}.button-primary:hover{background-color:#d34a6c}.button-accent{background-color:var(--dusty-blue);color:var(--text-primary)}.button-accent:hover{background-color:var(--dusty-blue-dark)}.button-danger{background-color:transparent;color:var(--burnt-orange);border:1px solid var(--burnt-orange);font-weight:700;padding:6px 12px;border-radius:5px}.button-danger:hover{background-color:var(--burnt-orange);color:var(--text-primary)}.button-muted{background-color:var(--placeholder);color:#fff}.button-muted:hover{background-color:#5e5e5e}ul button:first-of-type{margin-left:auto}.list-item{display:flex;flex-direction:column;background:var(--green);color:var(--dark-teal);border-radius:5px;padding:10px 12px;margin:6px 0;gap:8px}.item-top{font-weight:600;font-size:.95rem}.item-body{white-space:pre-wrap;word-break:break-word;line-height:1.4}.item-body.clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.4;max-height:2.8em}.item-actions{display:flex;gap:.5rem;justify-content:flex-end}ul{padding-inline-start:0}#banner{background-color:var(--dark-teal);color:var(--yellow);position:fixed;top:0;left:0;width:100%;height:8vh;display:flex;align-items:center;justify-content:center;font-size:1.25em;z-index:1000}.banner-left,.banner-right{position:absolute;top:0;height:100%;display:flex;align-items:center}.banner-left{left:0;padding-left:.8em}.banner-right{right:0;padding-right:.8em}#logo{font-size:1.8em;font-weight:700;cursor:pointer;color:var(--yellow)}#menu-icon{font-size:1.5em;color:var(--yellow);cursor:pointer}#user-greeting{font-size:1.2em;color:var(--yellow)}.welcome-container{text-align:center;margin-top:15vh}.welcome-buttons{margin-top:2rem;display:flex;justify-content:center;gap:1rem}.register-form{display:flex;flex-direction:column;align-items:center;gap:1rem;margin-top:2rem}.form-row{display:flex;align-items:center;gap:1rem;justify-content:flex-start;width:320px}.form-row label{width:120px;text-align:right;font-weight:500;color:var(--yellow)}.form-row input{flex:1}.register-form button{width:150px;padding:8px 12px}.footer{display:flex;justify-content:flex-end;gap:10px}.footer{display:flex;justify-content:flex-start;gap:10px}#up-top{display:flex;justify-content:space-between;align-items:center}.sort-container{display:flex;align-items:center;gap:5px}@media (max-width: 480px){.list-item{flex-direction:column;align-items:stretch}.item-body.clamped{-webkit-line-clamp:1;max-height:1.4em}.item-actions{justify-content:flex-start;width:100%;margin-top:.5rem}body{padding-bottom:20px}}.note-header{display:flex;flex-direction:column}.form-error{color:#ffb3b3;background-color:#400;padding:.5em 1em;border-radius:4px;margin-top:1rem;font-weight:500;text-align:center}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:999}.modal-box{background:var(--dark-teal);padding:2rem;border-radius:.5rem;max-width:400px;text-align:center;color:var(--text-primary);box-shadow:0 0 10px #00000080}.modal-box p{margin-bottom:1.5rem}.modal-buttons{display:flex;justify-content:center;gap:1rem}.modal-confirm{background-color:var(--burnt-orange);color:var(--text-primary);border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer}.modal-cancel{background-color:var(--placeholder);color:var(--text-primary);border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer}.note-text-block{background-color:var(--green);color:var(--dark-teal);padding:10px 14px;border-radius:5px;margin:1rem 0;font-family:Roboto,sans-serif;line-height:1.5;white-space:pre-wrap;box-shadow:0 0 0 1px #0000000d}.notification-banner{position:fixed;top:0;left:0;right:0;background-color:var(--burnt-orange);color:var(--text-primary);text-align:center;padding:1rem;font-size:.9rem;z-index:1000;box-shadow:0 2px 6px #00000080;animation:fadeInDown .4s ease}@keyframes fadeInDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.alt-button-container{padding-top:10px}.button-group-right{margin-left:auto;display:flex;gap:.5rem;align-items:center}.button-row{display:flex;gap:.5rem;align-items:center;margin-top:1.5rem;flex-wrap:wrap}#side-menu{position:fixed;top:0;left:-300px;width:250px;height:100%;background-color:var(--dark-teal);box-shadow:2px 0 5px #0003;overflow-y:auto;transition:left .3s ease;z-index:1000;color:var(--text-primary);padding:1rem}#side-menu.open{left:0}#side-menu ul{list-style:none;padding:0;margin:0}#side-menu li{padding:.75rem 0;cursor:pointer;border-bottom:1px solid var(--dusty-blue);transition:background .2s ease}#side-menu li:hover{background-color:var(--dusty-blue-dark)}#menu-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0a506480;z-index:900}#menu-overlay.show{display:block}.usage{color:var(--placeholder)}