:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:#f7f6f4;color:#1f1f1f}body{margin:0;min-height:100vh}.app{max-width:960px;margin:0 auto;padding:32px 20px 48px}.app__header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.app__uptitle{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:#777}h1{margin:4px 0 8px;font-size:32px}button{padding:10px 16px;border:none;border-radius:8px;background:#5c6ac4;color:#fff;font-weight:600;cursor:pointer}button:disabled{opacity:.6;cursor:progress}.grid{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 8px 20px #0f172a14}.card__header{display:flex;justify-content:space-between;align-items:center;gap:8px}.badge{font-size:12px;padding:4px 8px;border-radius:999px;background:#ffd166;color:#3c2a0a}.card__description{color:#444}.card__footer{display:flex;justify-content:space-between;margin-top:12px;font-weight:500}.card__tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}.card__tags span{font-size:12px;padding:4px 8px;border-radius:999px;background:#f0f4ff;color:#3b5bdb}.error{padding:12px 16px;background:#ffe3e3;border-radius:8px;color:#a61b1b}.app__greeting{margin:8px 0 0;font-size:14px;color:#5c6ac4}.filters{margin-top:24px;display:flex;flex-direction:column;gap:16px}.filters__group{display:flex;flex-direction:column;gap:8px}.filters__label{font-size:13px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.05em}.filters__chips{display:flex;flex-wrap:wrap;gap:8px}.chip{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid #e0e0e0;color:#444;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.chip:hover{background:#f5f5f5;border-color:#ccc}.chip--active{background:#5c6ac4;border-color:#5c6ac4;color:#fff}.chip--active:hover{background:#4c5ab3;border-color:#4c5ab3}.empty-state{text-align:center;padding:40px 20px;color:#888;font-size:16px}.card--playing{border:2px solid #5c6ac4;box-shadow:0 8px 24px #5c6ac433}.card__player{margin-top:16px;display:flex;flex-direction:column;gap:10px}.play-btn{width:100%;padding:12px 16px;font-size:15px;border-radius:8px;transition:background .2s}.play-btn:hover{background:#4c5ab3}.progress-bar{height:8px;background:#e9ecef;border-radius:4px;overflow:hidden;cursor:pointer;transition:height .15s}.progress-bar:hover{height:10px}.progress-bar__fill{height:100%;background:linear-gradient(90deg,#5c6ac4,#7c8ce0);border-radius:4px;transition:width .1s linear;pointer-events:none}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal{background:#fff;border-radius:16px;padding:24px;max-width:480px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0003;animation:modalIn .25s ease-out}@keyframes modalIn{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal__header{margin-bottom:20px}.modal__header h2{margin:0 0 4px;font-size:22px}.modal__subtitle{margin:0;color:#666;font-size:14px}.modal__actions{display:flex;gap:12px;margin-top:20px}.modal__actions button{flex:1}.btn-secondary{background:#e9ecef;color:#495057}.btn-secondary:hover{background:#dee2e6}.survey-form{display:flex;flex-direction:column;gap:16px}.survey-question label{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}.survey-question__icon{font-size:20px}.survey-question__title{font-weight:600;font-size:15px}.survey-question__hint{font-size:13px;color:#666}.survey-question textarea{width:100%;padding:12px;border:1px solid #dee2e6;border-radius:8px;font-family:inherit;font-size:14px;resize:vertical;transition:border-color .2s}.survey-question textarea:focus{outline:none;border-color:#5c6ac4}.modal--result{text-align:center}.result-content{text-align:left}.result-block{background:#f8f9fa;border-radius:12px;padding:16px;margin-bottom:12px}.result-block h3{margin:0 0 8px;font-size:15px}.result-block p{margin:0;color:#495057;line-height:1.5}.result-block--highlight{background:linear-gradient(135deg,#f0f4ff,#e8f0fe);border:1px solid #c3d4f7}.result-tags{display:flex;flex-wrap:wrap;gap:6px}.tag{font-size:13px;padding:6px 10px;border-radius:999px;background:#5c6ac4;color:#fff}.result-pending{color:#666;font-style:italic;padding:20px}