body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#fbf2d5}body,.root{margin:0;padding:0;width:100%;height:100%;overflow-x:hidden}h1,h2,h3,h4,h5,h6{margin:0}a{text-decoration:none;color:inherit}.container{max-width:1200px;margin:0 auto;padding:20px}body{--button-h-margin: 10px;--button-v-margin: 10px;--button-h-padding: 8px;--button-v-padding: 4px;--button-font-size: 12px;--button-border-radius: 4px;--button-box-shadow: 0 2px 4px rgba(0, 0, 0, .1);--button-color: var(--color-black);--button-back-color: var(--color-cyan);--disabled-button-color: #999;--disabled-button-back-color: #ccc}button{color:var(--button-color);background-color:var(--button-back-color);border:none;padding:var(--button-v-padding) var(--button-h-padding);margin:var(--button-v-margin) var(--button-h-margin);font-size:var(--button-font-size);border-radius:var(--button-border-radius);box-shadow:var(--button-box-shadow);cursor:pointer;transition:background-color .3s}button:hover{filter:brightness(110%);transform:scale(1.05)}button:active{transform:scale(.95)}button:disabled,button[disabled]{color:var(--disabled-button-color);background-color:var(--disabled-button-back-color);cursor:default;filter:none!important;transform:none!important}body{--color-white: #FFFFFF;--color-black: #000000;--color-yellow: #FFF1AD;--color-red: #FFCCC6;--color-purple: #B9B2F7;--color-blue: #8FBEFF;--color-cyan: #97DED8;--color-green: #C3F2BB;--color-gray: #CCC;--color-dark-gray: #666;--box-shadow: 0 4px 12px rgba(0, 0, 0, .1);--main-back-color: var(--color-yellow);--main-text-color: var(--color-black);--front-card-instruction-color: var(--color-dark-gray);--front-card-text-color: var(--color-black);--front-card-incorrect-color: var(--color-black);--front-card-correct-color: var(--color-black);--front-card-back-color: var(--color-cyan);--back-card-instruction-color: var(--color-dark-gray);--back-card-text-color: var(--color-black);--back-card-incorrect-color: var(--color-black);--back-card-correct-color: var(--color-black);--back-card-back-color: var(--color-gray);--progress-success-color: var(--color-green);--progress-failure-color: var(--color-red);--progress-back-color: var(--color-white);--button-color: var(--color-black);--button-back-color: var(--color-cyan);--disabled-button-color: #999;--disabled-button-back-color: #ccc}.collection-card{background-color:#fff;border-radius:12px;box-shadow:0 4px 8px #0000001a;display:flex;flex-direction:column}.collection-card-header{position:relative;margin-bottom:5px}.collection-card-header h3{margin:10px 0;font-size:10px;color:#ccc;text-transform:uppercase;border-bottom:1px solid #ccc;padding-bottom:10px;text-align:left;padding-left:10px}.collection-boxes{display:flex;justify-content:space-around;align-items:center;padding:0 10px}.collection-box{flex-grow:1;font-size:10px;box-shadow:var(--box-shadow);margin:3px;padding:3px 0;border-radius:5px}.collection-box.box-1{background-color:var(--color-red)}.collection-box.box-2{background-color:var(--color-yellow)}.collection-box.box-3{background-color:var(--color-green)}.collection-box.box-4{background-color:var(--color-cyan)}.collection-box.box-5{background-color:var(--color-blue)}.collection-stats{display:flex;align-items:center;gap:10px;font-size:.85rem;color:#666}.reversible-badge{background-color:#e3f2fd;color:#1976d2;padding:3px 8px;border-radius:12px;font-size:.75rem;font-weight:500}.collection-card-body{flex-grow:1;margin-bottom:20px}.collection-description{margin:0;color:#555;font-size:.95rem}.collection-card-footer{margin-top:auto}.question-count-options{display:flex;flex-wrap:wrap;gap:10px;margin:30px 10px 10px;justify-content:space-around}.view-button{position:absolute;top:-4px;right:10px;font-size:14px;padding-bottom:2px;--button-h-padding: 4px;--button-v-padding: 0px;--button-h-margin: 0px;--button-v-margin: 0px;border-radius:14px;--button-back-color: var(--color-gray)}.view-button.settings{right:50px}.view-button.stats{right:10px}.question-count-button{flex-grow:1;--button-h-padding: 20px;--button-v-padding: 20px;--button-h-margin: 0px;--button-v-margin: 0px;--button-back-color: var(--color-cyan)}.selection-screen{display:flex;flex-direction:column;align-items:center;width:var(--app-width)}.selection-screen h2{text-align:left;margin-bottom:30px;color:#333}.form-group{margin-bottom:20px;width:100%;max-width:400px}label{display:block;margin-bottom:8px;font-weight:700}select,input{width:100%;padding:10px;border:1px solid #ccc;border-radius:4px;font-size:16px}.start-button{background-color:#4caf50;color:#fff;border:none;padding:12px 24px;font-size:16px;border-radius:4px;cursor:pointer;transition:background-color .3s}.start-button:hover{background-color:#45a049}.start-button:disabled{background-color:#ccc;cursor:not-allowed}.collections-grid{--grid-gap:10px;--grid-width: calc(var(--app-width) - (2 * var(--grid-gap)));width:calc(var(--app-width) - var(--grid-gap));padding:var(--grid-gap) 0 var(--grid-gap) var(--grid-gap);margin:0}.collection-card{display:inline-block;vertical-align:top;margin-right:var(--grid-gap);margin-bottom:var(--grid-gap)}.collection-card{margin-top:50px;width:250px}.card-container{position:relative;width:100%;max-width:400px;height:300px;perspective:1000px;-webkit-user-select:none;user-select:none;margin:0 auto}.quiz-card{position:relative;width:100%;height:100%;cursor:pointer;transform-style:preserve-3d;transition:transform .6s;border-radius:16px;will-change:transform,opacity}.card-front,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px;box-sizing:border-box;box-shadow:var(--box-shadow);transform-style:preserve-3d;transition:transform .6s,background-color .3s;will-change:transform,opacity}.card-front{color:var(--front-card-text-color);background-color:var(--front-card-back-color);transform:rotateY(0)}.quiz-card.flipped .card-front{transform:rotateY(180deg)}.card-back{color:var(--back-card-text-color);background-color:var(--back-card-back-color);transform:rotateY(-180deg)}.quiz-card.flipped .card-back{transform:rotateY(0)}.card-content{font-size:24px;font-weight:700;text-align:center;flex-grow:1;display:flex;align-items:center;justify-content:center}.card-front .card-instruction{margin-bottom:20px;color:var(--front-card-instruction-color);font-size:10px;font-weight:700;text-transform:uppercase}.card-front .card-content{color:var(--front-card-text-color)}.card-front .correct-button{color:var(--front-card-correct-color)}.card-front .incorrect-button{color:var(--front-card-incorrect-color)}.card-back .card-instruction{margin-bottom:20px;color:var(--back-card-instruction-color);font-size:10px;font-weight:700;text-transform:uppercase}.card-back .card-content{color:var(--back-card-text-color)}.card-back .correct-button{color:var(--back-card-correct-color)}.card-back .incorrect-button{color:var(--back-card-incorrect-color)}.card-buttons{width:100%;display:flex;justify-content:space-between;bottom:-40px;font-size:14px}.card-buttons button{--button-h-margin: 0;--button-v-margin: 0;--button-h-padding: 18px;--button-v-padding: 14px;--button-box-shadow: none}.card-front .card-buttons button{color:var(--front-card-text-color);background-color:var(--front-card-back-color)}.card-back .card-buttons button{color:var(--back-card-text-color);background-color:var(--back-card-back-color)}.incorrect-button{text-align:left}.correct-button{text-align:right}.cards-container{overflow:visible!important}.result-bar{width:100%;display:flex;justify-content:space-between;align-items:center}.results{flex-grow:10;display:flex;justify-content:space-between;align-items:center}.details{flex-grow:1;font-size:10px;font-weight:700}.result-item{flex-grow:1;height:10px;padding:10px 0;margin:0;box-shadow:inset 0 0 5px #0003}.result-item.undone{background-color:var(--color-gray)}.result-item.correct{background-color:var(--color-green)}.result-item.incorrect{background-color:var(--color-red)}.quiz-screen{display:flex;flex-direction:column;align-items:center;padding:20px}.quiz-header{text-align:center;margin-bottom:40px;width:100%}.quiz-header .button-close{position:absolute;top:10px;right:10px;--button-back-color: var(--color-gray)}.quiz-content{text-align:center;width:100%;height:340px}.quiz-footer{text-align:center;margin-top:40px;width:100%;position:absolute;bottom:10px;left:0;z-index:300}.cards-container{position:relative;width:100%}.card-animation-wrapper{position:absolute;top:0;left:0;width:100%;opacity:0;transform:scale(.8);transition:opacity .3s ease-out,transform .3s ease-out;pointer-events:none}.card-animation-wrapper.current-card{opacity:1;transform:scale(1);pointer-events:auto;z-index:10}.question-card{background-color:#fff;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a;width:100%;max-width:500px;margin-bottom:20px}.question{margin-bottom:20px}.question h3{font-size:24px;margin-top:10px}.answer-input{margin-bottom:20px}.answer-input input{width:100%;padding:12px;font-size:16px;border:1px solid #ddd;border-radius:4px}.submit-button,.next-button{background-color:#2196f3;color:#fff;border:none;padding:12px 24px;font-size:16px;border-radius:4px;cursor:pointer;transition:background-color .3s}.submit-button:hover,.next-button:hover{background-color:#0b7dda}.submit-button:disabled{background-color:#ccc;cursor:not-allowed}.result{padding:15px;border-radius:4px;margin-bottom:20px}.result.correct{background-color:#dff0d8;color:#3c763d}.result.incorrect{background-color:#f2dede;color:#a94442}.score-display{margin-top:60px;font-size:18px;font-weight:700}.quiz-complete{text-align:center;padding:20px}.final-score{height:300px;line-height:300px;font-size:25px}.finish-button{background-color:#4caf50;color:#fff;border:none;padding:12px 24px;font-size:16px;border-radius:4px;cursor:pointer;transition:background-color .3s}.finish-button:hover{background-color:#45a049}.collection-content{display:flex;flex-direction:column;align-items:center;padding:20px}.collection-header{text-align:center;margin-bottom:40px;line-height:40px;width:100%}.collection-header .button-close{position:absolute;top:10px;right:10px;--button-back-color: var(--color-gray)}.collection-content .pagination{text-align:center;margin-top:40px;width:100%;position:absolute;bottom:10px;left:0;z-index:300}.collection-search .search-input{width:calc(100% - 40px);padding:3px 10px;box-shadow:var(--box-shadow)}.collection-table{width:calc(100% - 20px);border-collapse:collapse;box-shadow:0 2px 4px #0000001a;margin:10px;font-size:12px}.collection-table th,.collection-table td{border:1px solid #bbb;padding:8px}.collection-table th{cursor:pointer}.collection-table th.order{background-color:#70abc2}.collection-table th:after{content:"  ";width:10px}.collection-table th.desc:after{content:" ↓"}.collection-table th.asc:after{content:" ↑"}.collection-table th{background-color:#96e1ff;text-align:left}.collection-table tr:nth-child(2n){background-color:#f1f1f1}.collection-table tr:nth-child(odd){background-color:#fff}.collection-table tr:hover{background-color:#c2ecfd}.App{width:100vw;height:100vh;margin:0;padding:0;text-align:center;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;overflow-x:hidden}main{width:var(--app-width);height:100vh;margin:0 auto;padding:0}@media (min-width: 801px){.App{--app-width: 800px}}@media (max-width: 800px){.App{--app-width: 100vw}}.settings-header{text-align:center;margin-bottom:40px;line-height:40px;width:100%}.settings-header .button-close{position:absolute;top:10px;right:10px;--button-back-color: var(--color-gray)}.settings-row fieldset{border:1px solid #ccc;padding:10px;margin-bottom:20px}.settings-row{display:flex;flex-direction:row;align-items:left;padding:10px;border-radius:10px}.settings-row legend{padding:10px;font-size:12px;font-weight:700;text-transform:uppercase}.settings-row label{width:10%;height:15px;line-height:15px;font-size:11px;color:#999;text-transform:uppercase;display:inline-block}.settings-row input{width:10%;height:15px;display:inline-block}.settings-row input.error{color:red;border-color:red;box-shadow:0 0 5px #ff000080;background-color:#ff00001a;transition:all .3s ease}
