*{margin:0;padding:0}body{background-color:#242424;font-family:Arial,Helvetica,sans-serif}button{border:none;cursor:pointer}button:disabled{cursor:not-allowed}.primary-btn{background-color:#fff;padding:.5rem .75rem;border:1px solid white;border-radius:1rem;color:#000}.primary-btn:hover{background-color:#dfdfdf}.primary-btn:disabled{background-color:#f5f5f5;color:gray}.primary-btn:disabled:hover{background-color:#f5f5f5}.secondary-btn{background-color:transparent;padding:.5rem .75rem;border-radius:1rem;border:1px solid gray;color:#fff}.secondary-btn:hover{background-color:#dfdfdf1c}#app-content{display:flex;flex-direction:column;overflow-y:auto;gap:1rem;flex:1}#home{display:flex;flex-direction:column;gap:1rem}#app{display:flex;flex-direction:column;min-height:100vh;overflow:hidden}#video{color:#fff;flex:1;display:flex;flex-direction:column;gap:1rem}#video-content{width:100%;aspect-ratio:1/.5;overflow:hidden;position:relative}#video-content>*{position:absolute;inset:0;height:100%;width:100%;border:0px}#description{padding:1rem;display:flex;flex-direction:column;background-color:#3f3f3f40;gap:2rem}#description>div{width:100%;display:flex;flex-direction:column;gap:.5rem}#description .buttons{display:flex;gap:1rem;font-size:.9rem}#description button{padding:.5rem 1rem;font-size:.8rem}#description p{color:#adadad;font-size:.9rem}#description textarea,#description input{background-color:#2a2a2a;color:#fff;font-family:inherit;border:1px solid #444;border-radius:5px;resize:none;padding:.5rem}#description section span{padding:.5rem 1rem;background-color:#8080802f;border-radius:1rem;font-size:.8rem}#video-loading{background-color:#414141;display:flex;align-items:center;justify-content:center}.loader{width:5%;aspect-ratio:1;border-radius:50%;background:radial-gradient(farthest-side,#fff 94%,#0000) top/8px 8px no-repeat,conic-gradient(#0000 30%,#fff);-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);animation:l13 1s infinite linear}@keyframes l13{to{transform:rotate(1turn)}}#comments{color:#fff;background-color:#3f3f3f40;display:flex;flex-direction:column}#comments h3{padding:1rem 1rem 0rem}#comments-content{display:flex;flex-direction:column;flex:1;gap:1.5rem;overflow-y:auto;padding:1rem}.comment{display:flex;gap:.5rem}.comment .info-section{display:flex;flex-direction:column;gap:.5rem;flex:1}.comment .info-section .buttons,.comment .info-section button{display:flex}.comment .info-section button{background-color:transparent;color:inherit;cursor:pointer;padding:.5rem .75rem;border:none;border-radius:5rem}.comment .info-section button:hover{background-color:#444}.comment img{height:30px;width:30px;overflow:hidden;object-fit:cover;border-radius:50%;background-color:gray}.comment h4{font-size:.9rem;font-weight:400}.comment p{color:#b3b3b3;font-size:.9rem}.replies{display:flex;flex-direction:column;gap:1rem;border:1px solid rgb(66,66,66);padding:1rem;border-radius:10px}.reply{display:flex;flex-direction:column;gap:.35rem}.reply h4{font-size:.8rem;font-weight:400}.reply p{color:#b3b3b3;font-size:.9rem}.new-comment-box{width:100%;display:flex;flex-direction:column;gap:.5rem;border-bottom:1px solid rgb(58,58,58);padding-bottom:1rem}.new-comment-box textarea{font-family:inherit;padding:.5rem;background-color:transparent;border:1px solid gray;resize:none;border-radius:5px;color:#f5f5f5;height:80px}.new-comment-box button{width:fit-content;margin-right:.5rem}.comment .info-section .replies-toggle{color:#2fb3ff;display:flex;align-items:center;gap:.5rem;background-color:transparent;padding:.5rem .75rem;border-radius:1rem;font-size:.9rem}.comment .info-section .replies-toggle:hover{background-color:#6ecaff3a}.reply-box{display:flex;flex-direction:column}.reply-box input{background-color:transparent;border:none;font-family:inherit;border-bottom:1px solid whitesmoke;resize:none;color:#fff;padding:.5rem 0rem}.reply-box input:focus{outline:none}.reply-box div{display:flex;justify-content:flex-end}.reply-box button{width:fit-content}#notes{padding:1rem;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#e0e0e0;min-height:100vh;background-color:#3f3f3f40;display:flex;flex-direction:column;gap:1rem}#notes>header{display:flex;justify-content:space-between;align-items:center;gap:1rem}#notes>header .search-box{flex:1;display:flex;max-width:500px;width:100%;min-width:0}#notes>header input{color:#fff;flex:1 1 0%;min-width:0;background-color:#414141;border:none;padding:.5rem 1rem;border-radius:1rem}#notes>header input:focus{outline:none;background-color:#585858b2}h2{margin-bottom:1.5rem;color:#fff}.loading,.empty{text-align:center;color:#9e9e9e}.add-note-box{border:1px solid #616161;padding:1rem;border-radius:10px;display:flex;flex-direction:column;gap:.75rem}.add-note-box>textarea,.add-note-box>input{resize:none;background-color:#2a2a2a;color:#e0e0e0;border:1px solid #444;padding:.5rem;border-radius:6px;font-size:.95rem;font-family:inherit}.add-note-box input::placeholder,.add-note-box textarea::placeholder{color:#9e9e9e}.add-note-box button{width:fit-content}.add-note-box button:disabled{opacity:.6;cursor:not-allowed}.notes-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}.note-card{border:1px solid #585858;background-color:#292929;border-radius:10px;padding:1rem;transition:transform .2s,border-color .2s}.note-card>span{color:gray}.note-card h4{font-size:1rem;color:#fff}.note-card p{margin:1rem 0rem;color:#e0e0e0}.note-date{font-size:.8rem;color:#9e9e9e}.note-tags{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}.note-tags span{display:inline-block;color:#00b7ff;font-size:.8rem;font-weight:500;display:flex;align-items:center}.note-tags span:before{content:"#"}.privacy-container{max-width:800px;margin:2rem auto;padding:2rem;background-color:#1e1e1e;border-radius:10px;box-shadow:0 4px 12px #0009}.privacy-container h1{font-size:2rem;margin-bottom:1rem;color:#fff}.privacy-container h2{font-size:1.3rem;margin-top:1.5rem;margin-bottom:.5rem;color:#f1f1f1}.privacy-container p{margin-bottom:1rem;color:#ccc}.privacy-container ul{margin-left:1.5rem;margin-bottom:1rem}.privacy-container li{margin-bottom:.5rem;color:#bbb}.privacy-container a{color:#4da6ff;text-decoration:none}.privacy-container a:hover{text-decoration:underline}.terms-container{max-width:800px;margin:2rem auto;padding:2rem;background-color:#1e1e1e;border-radius:10px;box-shadow:0 4px 12px #0009}.terms-container h1{font-size:2rem;margin-bottom:1rem;color:#fff}.terms-container h2{font-size:1.3rem;margin-top:1.5rem;margin-bottom:.5rem;color:#f1f1f1}.terms-container p{margin-bottom:1rem;color:#ccc}.terms-container a{color:#4da6ff;text-decoration:none}.terms-container a:hover{text-decoration:underline}#navbar{background-color:#000;color:#f5f5f5;display:flex;justify-content:space-between;padding:1rem;align-items:center}#navbar h3 a{color:#87ceeb;text-decoration:none}#navbar .user-info{display:flex;align-items:center;gap:.5rem}#navbar .user-info img{height:30px;width:30px;object-fit:cover;border-radius:50%}#navbar button{padding:.5rem 1rem;background-color:#fff;border:none;border-radius:.2rem;font-weight:600;cursor:pointer}#navbar button:hover{background-color:#f5f5f5}footer ul{display:flex;width:100%;align-items:center;justify-content:center;padding:1rem;background-color:#414141;gap:2rem}footer ul{list-style:none}footer a{color:#f5f5f5;font-size:.8rem;text-decoration:none}footer a:hover{text-decoration:underline;color:#fff}
