:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0}button,input,select,textarea{font-family:inherit}.btn{border:none;border-radius:12px;font-weight:700;cursor:pointer;transition:all .2s;font-family:inherit;display:inline-block;text-align:center;min-height:44px;box-shadow:0 4px 6px #0000001a}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.btn:not(:disabled):active{transform:translateY(0);box-shadow:0 2px 4px #0000001a}.btn-small{padding:.5rem 1rem;font-size:.875rem}.btn-medium{padding:.75rem 1.5rem;font-size:1rem}.btn-large{padding:1rem 2rem;font-size:1.25rem}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.btn-secondary{background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff}.btn-success{background:linear-gradient(135deg,#4facfe,#00f2fe);color:#fff}.btn-danger{background:linear-gradient(135deg,#fa709a,#fee140);color:#fff}.btn-full{width:100%}.adsense-container{position:fixed;right:0;top:50%;transform:translateY(-50%);width:160px;min-height:600px;z-index:10;display:flex;align-items:center;justify-content:center;padding:1rem;background:#fffffff2;box-shadow:-2px 0 8px #0000001a;border-left:1px solid #e0e0e0}.adsense-container ins{display:block;width:100%;min-height:600px}@media(max-width:1024px){.adsense-container{display:none}}@media(min-width:1025px)and (max-width:1280px){.adsense-container{width:140px;min-height:500px}}.layout{min-height:100vh;display:flex;flex-direction:column;background:linear-gradient(135deg,#667eea,#764ba2)}.header{padding:1rem;background:#fffffff2;box-shadow:0 2px 8px #0000001a;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:100}.back-button{background:#667eea;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s;min-height:44px}.back-button:hover{background:#5568d3;transform:scale(1.05)}.back-button:active{transform:scale(.95)}.header-title{margin:0;font-size:1.5rem;color:#333;flex:1;display:flex;align-items:center;gap:.75rem}.header-logo{height:40px;width:auto;object-fit:contain}.header-spacer{flex:1}.main-content{flex:1;padding:1.5rem;max-width:1200px;width:100%;margin:0 auto;padding-right:calc(1.5rem + 180px);box-sizing:border-box}@media(max-width:768px){.main-content{padding:1rem}.header-title{font-size:1.25rem}}@media(max-width:1024px){.main-content{padding-right:1.5rem}}.home-screen{display:flex;flex-direction:column;gap:2rem}.home-header{text-align:center;color:#fff;padding:2rem 0}.app-title-container{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.5rem}.app-logo{height:60px;width:auto;object-fit:contain;filter:drop-shadow(2px 2px 4px rgba(0,0,0,.3))}.app-title{font-size:2.5rem;margin:0;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.app-subtitle{font-size:1.25rem;margin:.5rem 0 0;opacity:.9}.progress-section{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px #0000001a}.progress-card h2{margin:0 0 1rem;color:#333;font-size:1.5rem}.progress-bar-container{display:flex;flex-direction:column;gap:.5rem}.progress-bar{width:100%;height:24px;background:#e0e0e0;border-radius:12px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#4facfe,#00f2fe);transition:width .3s ease}.progress-text{margin:0;color:#666;font-size:1rem}.recent-section{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px #0000001a}.recent-section h2{margin:0 0 1rem;color:#333;font-size:1.5rem}.recent-elements{display:flex;gap:1rem;flex-wrap:wrap}.recent-element-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1rem;border-radius:12px;text-align:center;min-width:80px;box-shadow:0 2px 8px #0000001a}.element-emoji{font-size:2rem;margin-bottom:.5rem}.element-symbol{font-size:1.5rem;font-weight:700;margin-bottom:.25rem}.element-name{font-size:.875rem;opacity:.9}.menu-section{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px #0000001a}.menu-section h2{margin:0 0 1.5rem;color:#333;font-size:1.5rem;text-align:center}.menu-grid{display:flex;flex-direction:column;gap:1rem}@media(min-width:768px){.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.recent-elements{justify-content:center}}.adventure-map{display:flex;flex-direction:column;gap:1.5rem}.map-description{background:#fff;padding:1rem;border-radius:12px;color:#333;font-size:1rem;margin:0;text-align:center}.kingdoms-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}.kingdom-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 12px #0000001a;cursor:pointer;transition:transform .2s,box-shadow .2s;border:3px solid}.kingdom-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #00000026}.kingdom-header{padding:1.5rem;color:#fff;text-align:center}.kingdom-header h2{margin:0;font-size:1.5rem}.kingdom-body{padding:1.5rem}.kingdom-description{color:#666;margin:0 0 1rem;font-size:1rem;line-height:1.5}.kingdom-progress{display:flex;flex-direction:column;align-items:center;margin:1rem 0;padding:1rem;background:#f5f5f5;border-radius:8px}.progress-info{display:flex;align-items:baseline;gap:.25rem;font-size:1.5rem;font-weight:700;color:#333}.progress-number{color:#667eea}.progress-separator{color:#999}.progress-total{color:#666}.progress-label{font-size:.875rem;color:#666;margin-top:.25rem}.kingdom-button{width:100%;padding:.75rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;margin-top:1rem;min-height:44px}.kingdom-button:hover{opacity:.9}@media(min-width:768px){.kingdoms-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.kingdoms-grid{grid-template-columns:repeat(3,1fr)}}.kingdom-screen{display:flex;flex-direction:column;gap:1.5rem}.kingdom-info{background:#fff;padding:1.5rem;border-radius:12px;border-left:4px solid;box-shadow:0 2px 8px #0000001a}.kingdom-description{margin:0;color:#666;font-size:1rem;line-height:1.6}.elements-grid{display:grid;gap:2rem}.element-card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:all .2s ease;text-align:center;min-height:180px;display:flex;flex-direction:column;justify-content:space-between;border:2px solid #e0e0e0;position:relative}.element-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000026;border-color:#667eea}.element-card.learned{background:#e8f5e9;border-color:#4caf50}.element-card.locked{opacity:.7;background:#f5f5f5;border:2px dashed #bbb;cursor:pointer}.element-card.locked:hover{opacity:.8;transform:translateY(-4px)}.element-card-header{display:flex;justify-content:center;align-items:center;gap:.75rem;margin-bottom:1rem}.element-symbol-large{font-size:2.5rem;font-weight:900;color:#667eea;letter-spacing:-1px}.element-card.learned .element-symbol-large{color:#4caf50}.element-card.locked .element-symbol-large{color:#999}.element-number{font-size:1rem;color:#666;background:#f0f0f0;padding:.375rem .625rem;border-radius:8px;font-weight:700}.element-card.learned .element-number{background:#c8e6c9;color:#2d8659}.element-card.locked .element-number{color:#999;background:#e0e0e0}.element-card-body{display:flex;flex-direction:column;gap:.75rem;align-items:center;text-align:center}.element-name{font-size:1.125rem;color:#2c3e50;font-weight:700;margin-top:.5rem;text-transform:capitalize;word-wrap:break-word;overflow-wrap:break-word;max-width:100%;padding:0 .5rem}.element-card.locked .element-name{color:#999}.learned-badge{font-size:.875rem;color:#1b5e20;font-weight:700;background:#c8e6c9;padding:.5rem 1rem;border-radius:12px;border:2px solid #4caf50;text-transform:uppercase;letter-spacing:.5px}.locked-badge{font-size:.875rem;color:#666;font-weight:700;background:#e0e0e0;padding:.5rem 1rem;border-radius:12px;border:2px dashed #999;text-transform:uppercase;letter-spacing:.5px}.error-message button{margin-top:1rem;padding:.75rem 1.5rem;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:1rem;cursor:pointer}@media(min-width:768px){.elements-grid{gap:2.5rem}.element-card{min-height:200px;padding:1.75rem}.element-symbol-large{font-size:3rem}.element-name{font-size:1.25rem}}.element-detail{display:flex;flex-direction:column;gap:1.5rem}.unlock-animation{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s}.unlock-content{background:#fff;padding:3rem;border-radius:20px;text-align:center;animation:scaleIn .3s}.unlock-icon{font-size:4rem;margin-bottom:1rem}.unlock-content h2{margin:0 0 .5rem;color:#333;font-size:2rem}.unlock-content p{margin:0;color:#666;font-size:1.25rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{transform:scale(.8)}to{transform:scale(1)}}.element-header{background:#fff;border-radius:16px;padding:1.5rem;display:flex;gap:1.5rem;box-shadow:0 4px 12px #0000001a}.element-art{width:120px;height:120px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.element-emoji-large{font-size:3rem}.element-symbol-display{font-size:2rem;font-weight:700;margin-top:.5rem}.element-basic-info{flex:1}.element-basic-info h2{margin:0 0 1rem;color:#333;font-size:2rem}.element-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.stat{display:flex;flex-direction:column;gap:.25rem}.stat-label{font-size:.875rem;color:#666}.stat-value{font-size:1.125rem;font-weight:700;color:#333}.element-facts,.element-memory{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px #0000001a}.element-facts h3,.element-memory h3{margin:0 0 1rem;color:#333;font-size:1.5rem}.element-facts ul{margin:0;padding-left:1.5rem;color:#666;line-height:1.8}.element-facts li{margin-bottom:.5rem}.memory-phrase{margin:0;font-size:1.125rem;color:#667eea;font-style:italic;font-weight:500}.element-quiz{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px #0000001a}.element-quiz h3{margin:0 0 1rem;color:#333;font-size:1.5rem}.quiz-progress{margin:0 0 1rem;color:#666;font-size:.875rem}.quiz-question{display:flex;flex-direction:column;gap:1rem}.question-text{margin:0;font-size:1.25rem;color:#333;font-weight:500}.quiz-options{display:flex;flex-direction:column;gap:.75rem}.quiz-option{padding:1rem;background:#f5f5f5;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;cursor:pointer;transition:all .2s;text-align:left;min-height:44px}.quiz-option:hover:not(:disabled){background:#e8e8e8;border-color:#667eea}.quiz-option.selected{background:#667eea;color:#fff;border-color:#667eea}.quiz-option.correct{background:#4caf50;color:#fff;border-color:#4caf50}.quiz-option.incorrect{background:#f44336;color:#fff;border-color:#f44336}.quiz-option:disabled{cursor:not-allowed}.quiz-feedback{padding:1rem;border-radius:8px;margin-top:.5rem}.feedback-correct{margin:0;color:#2d8659;font-weight:700;font-size:1.125rem}.quiz-success{margin-top:1.5rem;padding:1.5rem;background:#e8f5e9;border-radius:12px;text-align:center}.quiz-success p{margin:0 0 1rem;color:#2d8659;font-size:1.25rem;font-weight:700}.quiz-complete{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px #0000001a;text-align:center}.complete-badge{font-size:1.25rem;color:#2d8659;font-weight:700;margin-bottom:1rem}.error-message{background:#fff;padding:2rem;border-radius:12px;text-align:center}@media(max-width:768px){.element-header{flex-direction:column;align-items:center;text-align:center}.element-stats{grid-template-columns:1fr}}.flashcards-screen{display:flex;flex-direction:column;gap:1.5rem}.flashcards-controls{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px #0000001a}.filter-section h3{margin:0 0 1rem;color:#333;font-size:1.25rem}.filter-buttons{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}.filter-buttons select{padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;background:#fff;min-height:44px}.filter-buttons label{display:flex;align-items:center;gap:.5rem;color:#333;font-size:1rem}.filter-buttons input[type=checkbox]{width:20px;height:20px}.quiz-mode-toggle{padding-top:1rem;border-top:1px solid #e0e0e0}.quiz-mode-toggle label{display:flex;align-items:center;gap:.5rem;color:#333;font-size:1rem;font-weight:500}.flashcard-container{perspective:1000px;min-height:400px}.flashcard{width:100%;height:400px;position:relative;transform-style:preserve-3d;transition:transform .6s;cursor:pointer}.flashcard.flipped{transform:rotateY(180deg)}.flashcard-front,.flashcard-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:16px;padding:2rem;box-shadow:0 4px 12px #0000001a;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;padding-top:8%}.flashcard-back{transform:rotateY(180deg);text-align:left;overflow-y:auto}.flashcard-symbol{font-size:6rem;font-weight:700;color:#667eea;margin-bottom:1rem}.flip-hint{color:#666;font-size:1rem;margin-top:2rem}.quiz-input-section{width:100%;max-width:300px;display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}.quiz-input-section input{padding:.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;min-height:44px}.flashcard-back h2{margin:0 0 1rem;color:#333;font-size:2rem;text-align:center}.flashcard-info{margin-bottom:1rem;color:#666}.flashcard-info p{margin:.25rem 0}.flashcard-facts{margin-bottom:1rem}.flashcard-facts h3{margin:0 0 .5rem;color:#333;font-size:1.25rem}.flashcard-facts ul{margin:0;padding-left:1.5rem;color:#666;line-height:1.6}.flashcard-facts li{margin-bottom:.5rem}.memory-phrase{font-style:italic;color:#667eea;font-weight:500;margin:1rem 0 0;text-align:center}.quiz-result{margin-top:1rem;padding:1rem;border-radius:8px;text-align:center;font-weight:700;font-size:1.25rem}.quiz-result.correct{background:#e8f5e9;color:#2d8659}.quiz-result.incorrect{background:#ffebee;color:#c62828}.flashcard-navigation{display:flex;justify-content:space-between;align-items:center;gap:1rem}.card-counter{font-size:1.125rem;font-weight:700;color:#333}.flashcards-empty{background:#fff;padding:2rem;border-radius:16px;text-align:center;box-shadow:0 4px 12px #0000001a}@media(max-width:768px){.flashcard{height:350px}.flashcard-symbol{font-size:4rem}.flashcard-front,.flashcard-back{padding:1.5rem}}.build-table-screen{display:flex;flex-direction:column;gap:1.5rem}.game-instructions{background:#fff;padding:1rem;border-radius:12px;text-align:center;box-shadow:0 2px 8px #0000001a}.game-instructions p{margin:0;color:#333;font-size:1.125rem}.table-container{background:#fff;padding:1.5rem;border-radius:16px;box-shadow:0 4px 12px #0000001a;overflow-x:auto}.periodic-table{display:inline-block;border:2px solid #e0e0e0;border-radius:8px;overflow:hidden}.table-row{display:flex}.table-slot{width:80px;height:80px;border:1px solid #e0e0e0;display:flex;align-items:center;justify-content:center;position:relative;transition:all .2s}.table-slot.empty{background:#f5f5f5}.table-slot.target{background:#fff3cd;cursor:pointer}.table-slot.target:hover{background:#ffe69c}.table-slot.placed{background:#d4edda;border-color:#28a745}.slot-empty{color:#999;font-size:1.5rem}.slot-element{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;justify-content:center;position:relative}.slot-symbol{font-size:1.5rem;font-weight:700;color:#333}.slot-number{font-size:.75rem;color:#666}.success-indicator{position:absolute;top:4px;right:4px;color:#28a745;font-size:1.25rem;animation:popIn .3s}@keyframes popIn{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.slot-target{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;justify-content:center}.target-number{font-size:1.5rem;font-weight:700;color:#856404}.target-hint{font-size:.625rem;color:#856404;margin-top:.25rem}.elements-panel{background:#fff;padding:1.5rem;border-radius:16px;box-shadow:0 4px 12px #0000001a}.elements-panel h3{margin:0 0 1rem;color:#333;font-size:1.5rem}.elements-grid{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;width:100%;box-sizing:border-box}.element-token{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.75rem;border-radius:8px;text-align:center;cursor:grab;transition:all .2s;position:relative;min-height:70px;min-width:70px;flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box}.element-token:active{cursor:grabbing}.element-token:hover:not(.used){transform:translateY(-2px);box-shadow:0 4px 8px #0003}.element-token.used{opacity:.4;cursor:not-allowed;background:#e0e0e0;color:#999}.element-token.mastered{border:2px solid #28a745}.token-symbol{font-size:1.25rem;font-weight:700;margin-bottom:.25rem}.token-number{font-size:.75rem;opacity:.9}.mastered-badge{position:absolute;top:4px;right:4px;color:#28a745;font-size:1rem}@media(max-width:768px){.table-slot{width:60px;height:60px}.slot-symbol,.target-number{font-size:1.25rem}.elements-grid{gap:.5rem}.element-token{min-height:60px;padding:.5rem}}.daily-challenge{display:flex;flex-direction:column;gap:1.5rem}.challenge-header{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px #0000001a;text-align:center}.challenge-header h2{margin:0 0 1rem;color:#333;font-size:2rem}.challenge-progress{font-size:1.125rem;color:#666;margin-bottom:.5rem}.streak-badge{display:inline-block;background:linear-gradient(135deg,#ff6b6b,#ee5a6f);color:#fff;padding:.5rem 1rem;border-radius:20px;font-weight:700;font-size:1rem}.challenge-question-card{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 12px #0000001a;display:flex;flex-direction:column;gap:1.5rem}.question-header{text-align:center}.question-text{margin:0;font-size:1.5rem;color:#333;font-weight:500;line-height:1.6}.question-options{display:flex;flex-direction:column;gap:1rem}.option-button{padding:1.25rem;background:#f5f5f5;border:2px solid #e0e0e0;border-radius:12px;font-size:1.125rem;cursor:pointer;transition:all .2s;text-align:left;min-height:56px}.option-button:hover:not(:disabled){background:#e8e8e8;border-color:#667eea}.option-button.selected{background:#667eea;color:#fff;border-color:#667eea}.option-button.correct{background:#4caf50;color:#fff;border-color:#4caf50}.option-button.incorrect{background:#f44336;color:#fff;border-color:#f44336}.option-button:disabled{cursor:not-allowed}.question-feedback{padding:1rem;border-radius:8px;text-align:center}.feedback-correct{margin:0;color:#2d8659;font-weight:700;font-size:1.25rem}.feedback-incorrect{margin:0;color:#c62828;font-weight:700;font-size:1.125rem}.challenge-complete{background:#fff;border-radius:16px;padding:3rem 2rem;box-shadow:0 4px 12px #0000001a;text-align:center}.complete-header{margin-bottom:2rem}.complete-icon{font-size:4rem;margin-bottom:1rem}.complete-header h2{margin:0;color:#333;font-size:2.5rem}.score-display{margin:2rem 0}.score-number{font-size:4rem;font-weight:700;color:#667eea;margin-bottom:.5rem}.score-total{font-size:1.5rem;color:#666;margin-bottom:.5rem}.score-percentage{font-size:2rem;font-weight:700;color:#333}.feedback-message{margin:2rem 0}.feedback-message p{margin:0;font-size:1.5rem;color:#333;font-weight:500}.streak-info{margin:1.5rem 0;padding:1rem;background:#fff3cd;border-radius:12px}.streak-info p{margin:0;font-size:1.25rem;color:#856404;font-weight:700}.complete-actions{margin-top:2rem}.challenge-loading{background:#fff;padding:3rem;border-radius:16px;text-align:center;box-shadow:0 4px 12px #0000001a}.challenge-loading p{margin:0;color:#666;font-size:1.25rem}@media(max-width:768px){.challenge-question-card{padding:1.5rem}.question-text{font-size:1.25rem}.score-number{font-size:3rem}}.badges-screen{display:flex;flex-direction:column;gap:1.5rem}.badges-header{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px #0000001a;text-align:center}.badges-header p{margin:0 0 1rem;color:#666;font-size:1.125rem}.badges-count{font-size:1.5rem;font-weight:700;color:#667eea}.badges-grid{display:grid;grid-template-columns:1fr;gap:1rem}.badge-card{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px #0000001a;display:flex;gap:1.5rem;align-items:center;position:relative;transition:transform .2s}.badge-card:hover{transform:translateY(-2px)}.badge-card.earned{border:3px solid #4caf50;background:linear-gradient(135deg,#e8f5e9,#fff)}.badge-card.locked{opacity:.6;background:#f5f5f5}.badge-icon{font-size:4rem;flex-shrink:0}.badge-info{flex:1}.badge-name{margin:0 0 .5rem;color:#333;font-size:1.5rem}.badge-description{margin:0;color:#666;font-size:1rem;line-height:1.5}.earned-check{position:absolute;top:1rem;right:1rem;width:32px;height:32px;background:#4caf50;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:700}@media(min-width:768px){.badges-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.badges-grid{grid-template-columns:repeat(3,1fr)}}.settings-screen{display:flex;flex-direction:column;gap:1.5rem}.settings-section{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 12px #0000001a}.settings-section h2{margin:0 0 1.5rem;color:#333;font-size:1.75rem}.setting-item{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 0;border-bottom:1px solid #e0e0e0}.setting-item:last-child{border-bottom:none}.setting-info{flex:1}.setting-info h3{margin:0 0 .5rem;color:#333;font-size:1.25rem}.setting-info p{margin:0;color:#666;font-size:1rem;line-height:1.5}.toggle-switch{position:relative;display:inline-block;width:60px;height:34px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background-color:#667eea}.toggle-switch input:checked+.toggle-slider:before{transform:translate(26px)}.about-content{color:#666;line-height:1.8}.about-content p{margin:0 0 1rem}.about-content p:last-child{margin-bottom:0}.about-content strong{color:#333;font-size:1.125rem}.version{color:#999;font-size:.875rem;font-style:italic}.about-screen{display:flex;flex-direction:column;gap:2rem}.about-section{background:#fff;border-radius:16px;padding:2rem;box-shadow:0 4px 12px #0000001a}.about-section h2{margin:0 0 1.5rem;color:#333;font-size:2rem;border-bottom:3px solid #667eea;padding-bottom:.75rem}.about-section p{margin:0 0 1rem;color:#666;font-size:1.125rem;line-height:1.8}.about-section p:last-child{margin-bottom:0}.about-section strong{color:#333;font-weight:700}.feature-guide{display:flex;flex-direction:column;gap:1.5rem}.guide-item{padding:1.5rem;background:#f8f9fa;border-radius:12px;border-left:4px solid #667eea}.guide-item h3{margin:0 0 .75rem;color:#333;font-size:1.5rem}.guide-item p{margin:0;color:#666;font-size:1rem;line-height:1.7}.faq-list{display:flex;flex-direction:column;gap:1.5rem}.faq-item{padding:1.5rem;background:#f8f9fa;border-radius:12px;border-left:4px solid #4caf50}.faq-item h3{margin:0 0 .75rem;color:#333;font-size:1.25rem;font-weight:600}.faq-item p{margin:0 0 .75rem;color:#666;font-size:1rem;line-height:1.7}.faq-item p:last-child{margin-bottom:0}.faq-item ul{margin:.75rem 0;padding-left:1.5rem;color:#666;line-height:1.8}.faq-item li{margin-bottom:.5rem}.faq-item li strong{color:#333}.tips-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr;gap:1rem}.tips-list li{padding:1rem;background:linear-gradient(135deg,#e8f5e9,#f1f8e9);border-radius:8px;color:#333;font-size:1.125rem;line-height:1.6;border-left:4px solid #4caf50}@media(min-width:768px){.tips-list{grid-template-columns:repeat(2,1fr)}.about-section{padding:2.5rem}}@media(min-width:1024px){.tips-list{grid-template-columns:repeat(2,1fr)}}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}