.app-layout{display:flex;height:100vh;background:var(--color-bg);overflow:hidden}.main-window{flex:1;background:var(--color-bg);color:var(--color-text-primary);overflow:hidden}:root{--color-bg: #181818;--color-surface: #222222;--color-text-primary: #FAFAFA;--color-text-secondary: #B0B0B0;--color-text-accent: #fd356e;--color-accent: #ff40783d;--color-accent-light: #e83b55b9;--color-border: #2e2e2e}body,html,#root,*{font-family:Trebuchet MS,Segoe UI,Arial,sans-serif!important}@media (max-width: 600px){.login-container{width:90%;min-width:unset;min-height:220px;padding:16px;box-shadow:0 2px 8px #0006;border-radius:8px}.login-form{width:100%}.login-button{width:100%;font-size:1rem;padding:12px}body{font-size:1rem}}body{margin:0;background-color:var(--color-bg);font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif;color:var(--color-text-primary);height:100vh}.login-container{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--color-surface);outline:2px solid var(--color-border);height:50%;width:30%;min-width:250px;min-height:300px;box-shadow:0 4px 12px #00000080;translate:-50% -50%;position:absolute;top:50%;left:50%;border-radius:5px}.login-container h2{margin-bottom:10%;color:var(--color-text-accent)}.login-form{display:flex;flex-direction:column;width:80%}.login-form input{margin-bottom:15px;padding:10px;border:1px solid var(--color-border);border-radius:5px;background-color:var(--color-bg);color:var(--color-text-primary);outline:none}.login-form input::placeholder{color:var(--color-text-secondary)}.login-button{padding:10px;width:100%;border:none;border-radius:5px;background-color:var(--color-accent);color:var(--color-text-primary);font-weight:700;cursor:pointer;transition:background-color .3s ease;outline:1px solid var(--color-accent-light)}.login-button:hover{background-color:var(--color-accent-light)}.create-account-button{padding:10px;width:100%;border:none;border-radius:5px;background-color:var(--color-surface);color:var(--color-accent-light);font-weight:700;cursor:pointer;margin-top:10px;outline:1px solid var(--color-accent-light);transition:background-color .3s,color .3s}.create-account-button:hover{background-color:var(--color-accent-light);color:var(--color-text-primary)}.create-group-container{margin-bottom:2rem}.create-group-form{background:var(--color-surface);padding:1rem;border-radius:8px;color:var(--color-text-primary)}.create-group-title{color:var(--color-text-accent)}.create-group-input{width:100%;padding:.5rem;border-radius:4px;border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text-primary);margin-bottom:1rem}.create-group-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-light)}.create-group-btn{background:var(--color-accent);color:var(--color-text-primary);border:1px solid var(--color-accent-light);border-radius:6px;padding:.5rem 1rem;cursor:pointer}.create-group-btn:hover{background:var(--color-accent-light);box-shadow:0 0 10px var(--color-accent-light)}.create-group-cancel{margin-left:1rem;background:var(--color-border);color:var(--color-text-primary);border:none;border-radius:6px;padding:.5rem 1rem;cursor:pointer}.create-group-error{color:red;margin-top:1rem}.create-group-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:1000}.create-group-modal-content{background:var(--color-surface);padding:2rem;border-radius:12px;box-shadow:0 4px 32px #0000002e;min-width:320px;max-width:480px;width:90vw;display:flex;flex-direction:column;align-items:center;gap:1.2rem}.create-group-modal-content,.create-group-modal-content *{font-family:inherit!important}.create-group-modal-content form{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.create-group-modal-content .create-group-input{margin-bottom:0;width:100%;max-width:100%;min-width:0;box-sizing:border-box;align-self:center}.create-group-modal-content .create-group-btn,.create-group-modal-content .create-group-cancel{margin-bottom:0}.create-group-title{margin-bottom:.5rem;text-align:center}.create-group-error{margin-top:.5rem;text-align:center}.create-group-user-search-wrapper{position:relative;width:100%;box-sizing:border-box;margin-bottom:1rem}.create-group-user-results{background:var(--color-surface);border-radius:8px;box-shadow:0 2px 8px #00000014;margin:0;padding:.5rem 0;position:absolute;z-index:10;width:100%;left:0;top:100%;box-sizing:border-box;list-style:none;border:1px solid var(--color-border);max-height:180px;overflow-y:auto}.create-group-user-results li{padding:.5rem 1rem;cursor:pointer;color:var(--color-text-primary);font-size:1.05rem;transition:background .18s;border-bottom:1px solid var(--color-border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.create-group-user-results li:last-child{border-bottom:none}.create-group-user-results li:hover{color:var(--color-text-accent)}.create-group-selected-users{width:100%;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.create-group-user-chip{background:var(--color-accent-light);color:var(--color-text-primary);border-radius:16px;padding:.3rem .8rem;display:flex;align-items:center;font-size:.98rem}.create-group-user-chip-remove{margin-left:.5rem;background:none;border:none;color:var(--color-text-primary);cursor:pointer;font-weight:700;font-size:1.1rem;line-height:1;padding:0 .2rem}.create-group-modal-actions{margin-top:1rem;display:flex;gap:1rem;justify-content:center}.group-page-quotes-header{display:flex;align-items:center;gap:1.5rem;margin-bottom:.5rem}.group-page-quotes-header .group-page-title{margin-bottom:0;margin-top:0}.group-page-quotes-header .add-quote-container{margin-bottom:0}.group-page-divider{width:100%;height:2px;background:var(--color-border);margin:.5rem 0 1rem;border-radius:2px}.group-page-top-buttons{display:flex;align-items:center;margin-bottom:1.5rem;gap:1rem}.group-page-top-buttons .group-page-btn{margin-bottom:0}.edit-quote-input{width:100%;padding:.5rem;border-radius:4px;border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text-primary);margin-bottom:1rem;font-size:1rem;resize:vertical;box-sizing:border-box}.edit-quote-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-light)}.group-page-quotes-section{flex-grow:1;min-height:400px;margin-bottom:2rem;background:none;border-radius:0;border:none;padding:0;display:flex;flex-direction:column;justify-content:flex-start}.group-page-container{background:var(--color-bg);min-height:100vh;color:var(--color-text-primary);padding:2rem;overflow-y:auto;max-height:100vh}.group-page-container::-webkit-scrollbar{width:10px;background:var(--color-bg)}.group-page-container::-webkit-scrollbar-thumb{background:var(--color-accent-light);border-radius:6px}.group-page-title{color:var(--color-text-accent)}.group-page-btn{background:var(--color-accent);color:var(--color-text-primary);border:1px solid var(--color-accent-light);border-radius:6px;padding:.5rem 1rem;cursor:pointer}.group-page-btn:hover{background:var(--color-accent-light);box-shadow:0 0 10px var(--color-accent-light)}.add-quote-title{color:var(--color-text-accent);margin-bottom:.5rem;text-align:center}.add-quote-input{width:100%;padding:.5rem;border-radius:4px;border:1px solid var(--color-border);background:var(--color-bg);color:var(--color-text-primary);margin-bottom:1rem}.add-quote-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-light)}.add-quote-cancel{margin-left:1rem;background:var(--color-border);color:var(--color-text-primary);border:none;border-radius:6px;padding:.5rem 1rem;cursor:pointer}.add-quote-error{color:red;margin-top:.5rem;text-align:center}.group-page-quotes-list{list-style:none;padding:0}.group-page-quote-item{background:var(--color-surface);border-radius:8px;padding:1rem;margin-bottom:1rem;border:1px solid var(--color-border)}.group-page-quote-author{color:var(--color-text-secondary);margin-left:1rem}.group-page-empty{color:var(--color-text-secondary)}.add-quote-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1000}.add-quote-modal-content{background:var(--color-surface);padding:2rem;border-radius:12px;box-shadow:0 4px 32px #0000002e;min-width:320px;max-width:480px;width:90vw;display:flex;flex-direction:column;align-items:center;gap:1.2rem}.add-quote-modal-content,.add-quote-modal-content *{font-family:inherit!important}.add-quote-modal-content form{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.add-quote-modal-content .add-quote-textarea,.add-quote-modal-content .add-quote-input{margin-bottom:0;width:100%;max-width:100%;min-width:0;box-sizing:border-box;align-self:center}.add-quote-modal-content .add-quote-btn,.add-quote-modal-content .add-quote-cancel{margin-bottom:0}.add-quote-textarea{background:var(--color-bg);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:8px;padding:1rem;font-size:1.1rem;margin-bottom:.5rem;width:100%;min-height:120px;max-height:300px;resize:vertical;box-shadow:0 1px 4px #00000014;transition:border-color .2s}.add-quote-textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-light)}.group-page-title-divider{width:100%;height:3px;background:var(--color-accent-light);margin:.5rem 0 1.2rem;border-radius:2px}.group-page-title-row{display:flex;align-items:center;justify-content:space-between;gap:1.2rem}.group-page-title-actions{display:flex;align-items:center;gap:.7rem}.group-page-icon-btn{background:var(--color-accent);color:var(--color-text-primary);border:1.5px solid var(--color-accent-light);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .2s,box-shadow .2s}.group-page-icon-btn:hover{background:var(--color-accent-light);box-shadow:0 0 10px var(--color-accent-light)}.add-quote-top{margin-bottom:1.2rem}.add-quote-container .sidebar-new-group{margin-bottom:0}.group-page-add-quote-item{background:var(--color-bg)!important;color:var(--color-text-primary)!important;border-radius:8px;font-size:1.1rem;font-weight:500;transition:background .2s}.group-page-add-quote-item:hover{background:var(--color-accent-light)!important}.delete-group-btn{border-color:var(--color-accent-light);background:var(--color-accent)}.group-page-title-group-actions{display:flex;align-items:center;gap:.7rem;border:1px solid var(--color-accent);border-radius:15px;padding:5px}.leaderboard-container{background:var(--color-bg);min-height:100vh;color:var(--color-text-primary);padding:2rem}.leaderboard-title{color:var(--color-text-accent)}.leaderboard-divider{width:100%;height:3px;background:var(--color-accent-light);margin:.5rem 0 1.2rem;border-radius:2px}.leaderboard-btn{background:var(--color-accent);color:var(--color-text-primary);border:1px solid var(--color-accent-light);border-radius:6px;padding:.5rem 1rem;cursor:pointer;margin-bottom:1.5rem}.leaderboard-btn:hover{background:var(--color-accent-light);box-shadow:0 0 10px var(--color-accent-light)}.leaderboard-empty{color:var(--color-text-secondary)}.leaderboard-table{width:100%;border-collapse:collapse;margin-top:1rem}.leaderboard-table th{padding:.7rem;text-align:left;background:var(--color-accent-light)}.leaderboard-table td{padding:.7rem}.leaderboard-table tr{background:var(--color-surface)}.sidebar{width:260px;background:var(--color-surface);color:var(--color-text-primary);padding:1.2rem .7rem .7rem;border-right:1px solid var(--color-border);display:flex;flex-direction:column;align-items:stretch;box-shadow:none;overflow:hidden}.sidebar-title{display:flex;align-items:center;gap:1.2rem;font-size:2rem;font-weight:700;margin-bottom:1.5rem;letter-spacing:1px;color:var(--color-text-accent)}.sidebar-logo{width:2.8rem;height:2.8rem;object-fit:contain}.sidebar-logout{background:var(--color-accent);color:var(--color-text-primary);border:none;border-radius:20px;padding:.5rem 1.2rem;font-weight:600;margin-bottom:1rem;margin-top:auto;cursor:pointer;border:1px solid var(--color-accent-light)}.sidebar-logout:hover{background:var(--color-accent-light);box-shadow:0 0 10px var(--color-accent-light)}.sidebar-empty{color:var(--color-text-secondary);opacity:.8;font-size:1rem;text-align:center;margin-bottom:2rem}.sidebar-scroll-area{flex:1 1 auto;display:flex;flex-direction:column;min-height:0;overflow:hidden}.sidebar-group-list{list-style:none;padding:0 8px 0 0;margin:0;flex:1 1 auto;overflow-y:auto;margin-bottom:1rem;min-height:0}.sidebar-group-list::-webkit-scrollbar{width:6px}.sidebar-group-list::-webkit-scrollbar-thumb{background:var(--color-bg);border-radius:4px}.sidebar-group-list::-webkit-scrollbar-thumb:hover{background:var(--color-accent-light)}.sidebar-group-item{padding:.7rem 1rem;margin-bottom:.5rem;border-radius:8px;background:var(--color-bg);cursor:pointer;font-size:1.1rem;font-weight:500;transition:background .2s,color .2s;color:var(--color-text-primary);border:none}.sidebar-group-item.selected,.sidebar-group-item:hover{background:var(--color-accent-light)}.sidebar-new-group{display:flex;align-items:center;justify-content:flex-start;gap:.5rem;background:var(--color-bg);color:var(--color-text-primary);border:none;border-radius:8px;padding:.7rem 1rem;margin-bottom:.5rem;font-size:1.1rem;font-weight:500;cursor:pointer;transition:background .2s,color .2s}.sidebar-new-group:hover{background:var(--color-accent-light)}.quiz-page-container{background:var(--color-bg);min-height:100vh;color:var(--color-text-primary);padding:2.5rem .5rem;display:flex;flex-direction:column;align-items:center}.quiz-page-title{color:var(--color-text-accent);font-size:2.2rem;font-weight:700;margin-bottom:2rem;letter-spacing:.02em;text-align:center}.quiz-page-form{width:100%;max-width:540px;margin:0 auto;display:flex;flex-direction:column;gap:1.2rem}.quiz-page-question{margin-bottom:.5rem;background:var(--color-surface);border-radius:12px;padding:1.2rem 1rem;border:1px solid var(--color-border);box-shadow:0 2px 12px #00000012;display:flex;flex-direction:column;gap:.75rem;transition:box-shadow .2s;width:100%;box-sizing:border-box}.quiz-page-question:hover{box-shadow:0 4px 18px #00000021}.quiz-page-input{width:100%;padding:.7rem .9rem;border-radius:6px;border:1.5px solid var(--color-border);background:var(--color-bg);color:var(--color-text-primary);font-size:1.08rem;box-shadow:0 1px 6px #00000012;box-sizing:border-box}.quiz-page-input:focus{outline:1px solid var(--color-accent-light)}.quiz-page-btn{background:var(--color-accent);color:var(--color-text-primary);border:1px solid var(--color-accent-light);border-radius:6px;padding:.5rem 1rem;cursor:pointer;font-size:1.05rem;font-weight:500;box-shadow:none;transition:background .18s,box-shadow .18s}.quiz-page-btn:hover{background:var(--color-accent-light);box-shadow:0 0 10px var(--color-accent-light)}.quiz-page-score{margin-top:2rem;color:var(--color-accent);font-weight:700;font-size:2rem;text-align:center;letter-spacing:.01em}.quiz-page-empty{color:var(--color-text-secondary);font-size:1.2rem;text-align:center;margin-top:2.5rem}