.chemistry-display{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--theme-bg-secondary);border-radius:8px;border:1px solid var(--theme-border-color)}.chemistry-level{display:flex;align-items:center;gap:8px}.chemistry-level-badge{padding:4px 8px;border-radius:12px;color:white;font-size:12px;font-weight:600;text-align:center;min-width:60px}.chemistry-value{font-size:18px;font-weight:700;color:var(--theme-text-primary)}.chemistry-details{display:flex;flex-direction:column;gap:8px}.chemistry-progress{display:flex;flex-direction:column;gap:4px}.progress-bar{height:6px;border-radius:3px}.progress-text{font-size:11px}.chemistry-stats{display:flex;justify-content:space-between;gap:8px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1}.stat-label{font-size:10px;color:var(--theme-text-secondary)}.stat-value{font-size:14px;font-weight:600}.stat-value.correct{color:#10B981}.stat-value.incorrect{color:#EF4444}.chemistry-display.compact{padding:4px 8px;gap:4px;background:transparent;border:none}.chemistry-display.compact .chemistry-level{gap:4px}.chemistry-display.compact .chemistry-level-badge{padding:2px 6px;font-size:10px;min-width:40px}.chemistry-display.compact .chemistry-value{font-size:14px}@media (max-width:480px){.chemistry-display{padding:8px;gap:6px}.chemistry-level{gap:6px}.chemistry-level-badge{padding:3px 6px;font-size:11px;min-width:50px}.chemistry-value{font-size:16px}.chemistry-stats{gap:6px}.stat-item{gap:1px}.stat-label{font-size:9px}.stat-value{font-size:12px}.chemistry-display.compact{padding:3px 6px;gap:3px}.chemistry-display.compact .chemistry-level-badge{padding:1px 4px;font-size:9px;min-width:35px}.chemistry-display.compact .chemistry-value{font-size:12px}}.chemistry-details-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10005;pointer-events:auto;animation:modalFadeIn .3s ease;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}.chemistry-details-content{background:var(--theme-bg-primary);border-radius:12px;border:1px solid var(--theme-border-color);box-shadow:0 10px 30px rgba(0,0,0,.3);max-width:500px;width:100%;max-height:80vh;overflow-y:auto;animation:modalSlideIn .3s ease;position:relative;z-index:10006}.chemistry-details-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--theme-border-color);background:var(--theme-bg-primary);border-radius:12px 12px 0 0}.chemistry-details-header h3{margin:0;font-size:18px;font-weight:600;color:var(--theme-text-primary)}.chemistry-details-close{background:none;border:none;font-size:24px;color:var(--theme-text-secondary);cursor:pointer;padding:4px;border-radius:4px;transition:all .2s ease;line-height:1}.chemistry-details-close:hover{background:var(--theme-bg-tertiary);color:var(--theme-text-primary)}.chemistry-details-body{padding:20px;background:var(--theme-bg-primary)}.chemistry-character-info{margin-bottom:20px;padding:24px;background:var(--theme-bg-primary);border-radius:12px;border:1px solid var(--theme-border-color)}.character-header{text-align:center;margin-bottom:20px}.character-name{font-size:24px;font-weight:700;color:var(--theme-text-primary);margin-bottom:8px}.character-chemistry{font-size:18px;color:var(--theme-text-secondary);font-weight:500}.level-progress-container{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:20px;padding:16px;background:var(--theme-bg-secondary);border-radius:8px;border:1px solid var(--theme-border-light)}.level-badge{padding:8px 16px;color:white;border-radius:20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;min-width:80px;text-align:center}.level-range{font-size:14px;color:var(--theme-text-secondary);font-weight:500}.progress-section{background:var(--theme-bg-secondary);border-radius:8px;padding:16px;border:1px solid var(--theme-border-light)}.chemistry-stats-section{margin-bottom:20px;background:var(--theme-bg-primary)!important;border-radius:8px;padding:16px}.chemistry-stats-section h4{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--theme-text-primary)}.chemistry-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}.chemistry-stat-item{display:flex;flex-direction:column;gap:4px;padding:12px;background:transparent!important;border-radius:8px;border:none!important;text-align:center}.chemistry-stat-label{font-size:12px;color:var(--theme-text-secondary)!important;font-weight:500}.chemistry-stat-value{font-size:18px;font-weight:700;color:var(--theme-text-primary)!important}.chemistry-stat-value.correct{color:#10B981!important}.chemistry-stat-value.incorrect{color:#EF4444!important}.chemistry-progress-section{margin-bottom:20px}.chemistry-progress-section h4{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--theme-text-primary)}.chemistry-progress{background:var(--theme-bg-primary);border-radius:8px;padding:16px;border:1px solid var(--theme-border-color)}.progress-label{font-size:14px;font-weight:500;color:var(--theme-text-primary);margin-bottom:12px;text-align:center}.progress-bar{width:100%;height:10px;background:var(--theme-bg-tertiary);border-radius:5px;overflow:hidden;margin-bottom:12px;box-shadow:inset 0 1px 3px rgba(0,0,0,.1)}.progress-fill{height:100%;border-radius:5px;transition:width .3s ease;box-shadow:0 1px 3px rgba(0,0,0,.2)}.progress-text{font-size:13px;color:var(--theme-text-secondary);text-align:center;font-weight:500}.chemistry-rules-section{margin-bottom:20px}.chemistry-rules-section h4{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--theme-text-primary)}.chemistry-rules{background:var(--theme-bg-primary);border-radius:8px;padding:16px;border:1px solid var(--theme-border-color)}.rule-item{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:8px 0;border-bottom:1px solid var(--theme-border-light)}.rule-item:last-child{margin-bottom:0;border-bottom:none}.rule-action{display:flex;align-items:center;gap:8px;min-width:120px}.rule-points{padding:2px 8px;border-radius:12px;font-size:12px;font-weight:600;min-width:32px;text-align:center}.rule-points:not(:empty){background:var(--theme-accent-color);color:white}.rule-text{font-size:14px;font-weight:500;color:var(--theme-text-primary)}.rule-description{font-size:12px;color:var(--theme-text-secondary);flex:1}.chemistry-levels-section h4{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--theme-text-primary)}.chemistry-levels{background:var(--theme-bg-primary);border-radius:8px;padding:16px;border:1px solid var(--theme-border-color)}.level-item{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--theme-border-light);position:relative}.level-item:last-child{border-bottom:none}.level-item.current{background:rgba(79,70,229,.1);border-radius:6px;padding:8px 12px;margin:0 -12px}.level-color{width:16px;height:16px;border-radius:50%;flex-shrink:0}.level-info{flex:1}.level-info .level-name{font-size:14px;font-weight:500;color:var(--theme-text-primary);margin-bottom:2px}.level-info .level-range{font-size:12px;color:var(--theme-text-secondary)}.current-badge{padding:2px 8px;background:var(--theme-accent-color);color:white;border-radius:12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@media (max-width:768px){.chemistry-details-modal{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:10005!important;min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;touch-action:manipulation;-webkit-tap-highlight-color:transparent;align-items:flex-start;padding:max(16px,env(safe-area-inset-top) + 8px) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}.chemistry-details-content{max-width:100%;max-height:calc(100vh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;overscroll-behavior:contain;width:calc(100% - 16px);margin:0 auto}.chemistry-details-body{padding:16px}.chemistry-stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}.chemistry-stat-item{padding:8px}.chemistry-stat-value{font-size:16px}.chemistry-level-info{flex-direction:column;text-align:center;gap:12px}.level-badge{min-width:auto}.rule-item{flex-direction:column;align-items:flex-start;gap:8px}.rule-action{min-width:auto}}@media (max-width:480px){.chemistry-details-modal{position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;z-index:10005!important;padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));min-height:100vh;min-height:100dvh}.chemistry-details-content{max-height:calc(100vh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom));max-height:calc(100dvh - 8px - env(safe-area-inset-top) - env(safe-area-inset-bottom));border-radius:8px}.chemistry-stats-grid{grid-template-columns:repeat(2,1fr)!important;gap:6px}.chemistry-stat-item{padding:6px;font-size:11px}.chemistry-stat-label{font-size:9px}.chemistry-stat-value{font-size:13px}.character-name,.chemistry-details-header h3{font-size:16px}.character-chemistry{font-size:12px}.level-name{font-size:16px}}.chemistry-history{background:var(--theme-bg-primary);border-radius:8px;border:1px solid var(--theme-border-color);overflow:hidden}.chemistry-history-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--theme-bg-secondary);border-bottom:1px solid var(--theme-border-color)}.chemistry-history-header h3{margin:0;font-size:14px;font-weight:600;color:var(--theme-text-primary)}.character-name{font-size:12px;color:var(--theme-text-secondary);background:var(--theme-bg-tertiary);padding:2px 8px;border-radius:12px}.chemistry-history-list{max-height:300px;overflow-y:auto}.chemistry-change-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--theme-border-light);transition:background-color .2s}.chemistry-change-item:hover{background:var(--theme-bg-secondary)}.chemistry-change-item:last-child{border-bottom:none}.change-info{display:flex;flex-direction:column;gap:4px;flex:1}.change-description{font-size:14px;color:var(--theme-text-primary);font-weight:500}.change-time{font-size:11px;color:var(--theme-text-secondary)}.change-value{font-size:16px;font-weight:700;padding:4px 8px;border-radius:6px;min-width:40px;text-align:center}.change-value.positive{color:#10B981;background:rgba(16,185,129,.1)}.change-value.negative{color:#EF4444;background:rgba(239,68,68,.1)}.chemistry-history-empty{padding:24px;text-align:center;color:var(--theme-text-secondary);font-size:14px}@media (max-width:480px){.chemistry-history-header{padding:10px 12px}.chemistry-history-header h3{font-size:13px}.character-name{font-size:11px;padding:1px 6px}.chemistry-change-item{padding:10px 12px}.change-description{font-size:13px}.change-time{font-size:10px}.change-value{font-size:14px;padding:3px 6px;min-width:35px}.chemistry-history-empty{padding:20px;font-size:13px}}