.app{text-align:center}header{text-align:center;color:var(--mamecomi-white);background:var(--mamecomi-light-green);padding:20px;border-radius:16px;margin-bottom:30px}header h1{font-size:2.5rem;font-weight:700;margin-bottom:10px;color:var(--mamecomi-dark-green);text-shadow:0 2px 4px rgba(0,0,0,.1)}header p{font-size:1.1rem;color:var(--mamecomi-dark-gray);opacity:.9}.scanner-container{background:var(--mamecomi-white);border-radius:16px;padding:24px;box-shadow:0 10px 30px #0000001a;border:2px solid var(--mamecomi-light-green)}.camera-section{position:relative;margin-bottom:20px;max-width:100%;overflow:hidden;width:100%}.camera-switch-btn{position:absolute;bottom:10px;right:10px;width:48px;height:48px;border:none;border-radius:50%;background:var(--mamecomi-dark-green);color:var(--mamecomi-white);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .3s;z-index:10;box-shadow:0 4px 12px #33a8524d}.camera-switch-btn:hover{background:#2a8a42;transform:translateY(-2px)}@media (max-width: 768px){.camera-switch-btn{width:48px;height:48px;bottom:20px;right:20px}.camera-switch-btn svg{width:32px;height:32px}}.modal{display:block;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background-color:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background-color:var(--mamecomi-white);margin:10% auto;padding:0;border-radius:12px;width:90%;max-width:400px;box-shadow:0 20px 40px #0003;animation:modalSlideIn .3s ease;border:2px solid var(--mamecomi-light-green)}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--mamecomi-border-gray);background:var(--mamecomi-light-green);border-radius:12px 12px 0 0}.modal-header h3{margin:0;color:var(--mamecomi-dark-green);font-size:1.2rem;font-weight:600}.close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:var(--mamecomi-text-gray);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.close-btn:hover{background-color:var(--mamecomi-light-gray);color:var(--mamecomi-dark-green)}.modal-body{padding:24px}.camera-list{display:flex;flex-direction:column;gap:12px}.camera-option{padding:16px;border:2px solid var(--mamecomi-border-gray);border-radius:8px;cursor:pointer;transition:all .2s;background:var(--mamecomi-white)}.camera-option:hover{border-color:var(--mamecomi-dark-green);background:var(--mamecomi-light-green)}.camera-option.selected{border-color:var(--mamecomi-dark-green);background:var(--mamecomi-dark-green);color:var(--mamecomi-white)}.camera-option h4{margin:0 0 4px;font-size:1rem}.camera-option p{margin:0;font-size:.9rem;opacity:.7}.camera-section video{width:100%;max-width:100%;height:auto;aspect-ratio:1;border-radius:12px;background:var(--mamecomi-light-gray);margin:0 auto;display:block;border:2px solid var(--mamecomi-light-green);object-fit:cover}.camera-section canvas{width:100%;max-width:100%;height:auto;aspect-ratio:1;border-radius:12px;background:var(--mamecomi-light-gray);margin:0 auto;display:block;border:2px solid var(--mamecomi-light-green)}.scan-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.scan-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:33%;height:27%;max-width:132px;max-height:108px;border:2px solid var(--mamecomi-dark-green);border-radius:4px;background:#33a8520d;animation:pulse 2s infinite}.scan-frame:before,.scan-frame:after{content:"";position:absolute;top:9%;bottom:9%;width:4.5%;border:2px solid var(--mamecomi-pink);border-radius:2px;background:#ff6b9d33}.scan-frame:before{left:9%;border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.scan-frame:after{right:9%;border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.scan-overlay:after{content:"コードを [ ] の間に合わせてください";position:absolute;bottom:-40px;left:50%;transform:translate(-50%);color:#fff;font-size:.9rem;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.5);white-space:nowrap}@keyframes pulse{0%{box-shadow:0 0 #33a852b3}70%{box-shadow:0 0 0 10px #33a85200}to{box-shadow:0 0 #33a85200}}.controls{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.controls button{flex:1;min-width:120px;padding:12px 20px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease}.start-scan{background:var(--mamecomi-dark-green);color:var(--mamecomi-white);box-shadow:0 4px 12px #33a8524d}.start-scan:hover:not(:disabled){background:#2a8a42;transform:translateY(-2px);box-shadow:0 6px 16px #33a85266}.rescan{background:var(--mamecomi-info-blue);color:var(--mamecomi-white);box-shadow:0 4px 12px #2196f34d}.rescan:hover:not(:disabled){background:#1565c0;transform:translateY(-2px);box-shadow:0 6px 16px #2196f366}button:disabled{background:var(--mamecomi-border-gray);cursor:not-allowed;transform:none;color:var(--mamecomi-text-gray)}.camera-info{padding:12px;margin-bottom:16px;background:var(--mamecomi-light-green);border:1px solid var(--mamecomi-dark-green);border-radius:8px;color:var(--mamecomi-dark-green);font-size:.9rem;font-weight:500;text-align:center}.result-section{text-align:center}.status{padding:16px;border-radius:8px;background:var(--mamecomi-light-gray);color:var(--mamecomi-text-gray);font-weight:500;border:1px solid var(--mamecomi-border-gray)}.scanned-code{padding:20px;background:var(--mamecomi-light-green);border-radius:8px;margin-top:16px;border:2px solid var(--mamecomi-dark-green)}.code-text{font-family:Monaco,Menlo,monospace;font-size:1.2rem;font-weight:700;color:var(--mamecomi-dark-green);margin:12px 0;padding:12px;background:var(--mamecomi-white);border-radius:6px;word-break:break-all;white-space:pre-line;border:1px solid var(--mamecomi-border-gray)}.copy-button{background:var(--mamecomi-pink);color:var(--mamecomi-white);margin-top:12px;padding:12px 20px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #ff6b9d4d}.copy-button:hover{background:#e55a8a;transform:translateY(-2px);box-shadow:0 6px 16px #ff6b9d66}@media (max-width: 768px){.app{padding:10px}header h1{font-size:1.5rem}header p{font-size:.9rem}.scanner-container{margin-top:15px}.camera-section{margin-bottom:15px;width:100%;max-width:100%}.camera-section video,.camera-section canvas{width:100%;max-width:100%;height:auto}.controls{flex-direction:column;gap:10px}.controls button{width:100%}.result-section{margin-top:15px}.scanned-code{padding:15px}.code-text{font-size:1rem;word-break:break-all}.modal-content{width:90%;max-width:400px}}.pwa-install-prompt{position:fixed;bottom:20px;left:20px;right:20px;background:var(--mamecomi-white);border:2px solid var(--mamecomi-light-green);border-radius:16px;box-shadow:0 10px 30px #0003;z-index:1000;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.pwa-install-content{display:flex;align-items:center;padding:16px;gap:16px}.pwa-install-icon{flex-shrink:0}.pwa-install-text{flex:1;text-align:left}.pwa-install-text h3{margin:0 0 8px;font-size:1.1rem;color:var(--mamecomi-dark-green);font-weight:600}.pwa-install-text p{margin:0;font-size:.9rem;color:var(--mamecomi-dark-gray);line-height:1.4}.pwa-install-buttons{display:flex;flex-direction:column;gap:8px;flex-shrink:0}.pwa-install-btn{background:var(--mamecomi-light-green);color:var(--mamecomi-dark-green);border:none;padding:8px 16px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s ease;font-size:.9rem}.pwa-install-btn:hover{background:var(--mamecomi-dark-green);color:var(--mamecomi-white);transform:translateY(-1px)}.pwa-dismiss-btn{background:transparent;color:var(--mamecomi-dark-gray);border:1px solid var(--mamecomi-light-gray);padding:6px 16px;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:.9rem}.pwa-dismiss-btn:hover{background:var(--mamecomi-light-gray);color:var(--mamecomi-dark-gray)}@media (max-width: 768px){.pwa-install-prompt{left:10px;right:10px;bottom:10px}.pwa-install-content{flex-direction:column;text-align:center;gap:12px}.pwa-install-text{text-align:center}.pwa-install-buttons{flex-direction:row;width:100%}.pwa-install-btn,.pwa-dismiss-btn{flex:1}}:root{--mamecomi-light-green: #D9F0C8;--mamecomi-dark-green: #33A852;--mamecomi-pink: #FF6B9D;--mamecomi-white: #FFFFFF;--mamecomi-dark-gray: #333333;--mamecomi-light-gray: #F5F5F5;--mamecomi-border-gray: #E0E0E0;--mamecomi-text-gray: #666666;--mamecomi-success-green: #4CAF50;--mamecomi-warning-orange: #FF9800;--mamecomi-info-blue: #2196F3}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:var(--mamecomi-dark-gray);background:linear-gradient(135deg,var(--mamecomi-light-green) 0%,var(--mamecomi-dark-green) 100%);min-height:100vh}#root{max-width:600px;margin:0 auto;padding:20px}@media (max-width: 480px){#root{padding:16px}}