:root{--bg-primary:#f5f5f5;--bg-secondary:#fff;--bg-tertiary:#fafafa;--bg-hover:#f8f9fa;--bg-active:#e9ecef;--text-primary:#333;--text-secondary:#666;--text-muted:#999;--border-primary:#e0e0e0;--border-secondary:#ddd;--accent-primary:#007bff;--accent-primary-hover:#0056b3;--accent-success:#28a745;--accent-success-hover:#218838;--accent-danger:#dc3545;--accent-danger-hover:#c82333;--accent-disabled:#6c757d;--shadow-light:rgba(0,0,0,.1);--shadow-medium:rgba(0,0,0,.15)}[data-theme=dark]{--bg-primary:#1a1a1a;--bg-secondary:#2d2d2d;--bg-tertiary:#3a3a3a;--bg-hover:#404040;--bg-active:#4a4a4a;--text-primary:#fff;--text-secondary:#ccc;--text-muted:#999;--border-primary:#404040;--border-secondary:#555;--accent-primary:#4dabf7;--accent-primary-hover:#339af0;--accent-success:#51cf66;--accent-success-hover:#40c057;--accent-danger:#ff6b6b;--accent-danger-hover:#fa5252;--accent-disabled:#868e96;--shadow-light:rgba(0,0,0,.3);--shadow-medium:rgba(0,0,0,.4)}*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow-x:hidden;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;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .3s ease,color .3s ease}.container{max-width:800px;margin:0 auto;padding:20px;background-color:var(--bg-secondary);min-height:100vh;transition:background-color .3s ease}header{text-align:center;margin-bottom:30px;padding:20px 0;border-bottom:2px solid var(--border-primary);position:relative}header h1{color:var(--text-primary);font-size:2rem;margin-bottom:10px}header p{color:var(--text-secondary);font-size:1.1rem}.theme-toggle{position:absolute;top:20px;right:20px;background:var(--bg-tertiary);border:2px solid var(--border-primary);border-radius:50%;width:50px;height:50px;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 2px 4px var(--shadow-light)}.theme-toggle:hover:not(:disabled){background:var(--bg-hover);transform:scale(1.05);box-shadow:0 4px 8px var(--shadow-medium)}.theme-toggle:active{transform:scale(.95)}.theme-toggle.loading,.theme-toggle:disabled{opacity:.6;cursor:not-allowed}.tab-navigation{display:flex;margin-bottom:20px;border-bottom:2px solid var(--border-primary);background-color:var(--bg-secondary);border-radius:8px 8px 0 0;overflow:hidden;box-shadow:0 2px 4px var(--shadow-light);transition:all .3s ease}.tab-btn{flex:1 1;padding:15px 20px;background-color:var(--bg-hover);cursor:pointer;font-size:16px;font-weight:500;color:var(--text-secondary);transition:all .3s ease;border:none;border-bottom:3px solid transparent;position:relative}.tab-btn:hover{background-color:var(--bg-active);color:var(--text-primary)}.tab-btn.active{background-color:var(--bg-secondary);color:var(--accent-primary);border-bottom-color:var(--accent-primary);font-weight:600}.tab-btn:first-child{border-right:1px solid var(--border-primary)}.mode-content{background-color:var(--bg-secondary);border-radius:0 0 8px 8px;box-shadow:0 2px 4px var(--shadow-light);overflow:hidden;transition:all .3s ease}.mode-content section:first-child{border-radius:0;border-top:none;margin-top:0}section{margin-bottom:30px;padding:20px;border:1px solid var(--border-primary);border-radius:8px;background-color:var(--bg-tertiary);transition:all .3s ease}section h2{color:var(--text-primary);margin-bottom:15px;font-size:1.3rem}.input-group{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap}.sn-input{flex:1 1;min-width:200px;padding:12px;border:2px solid var(--border-secondary);border-radius:6px;font-size:16px;background-color:var(--bg-secondary);color:var(--text-primary);transition:all .3s ease}.sn-input:focus{outline:none;border-color:var(--accent-primary)}.scan-btn{padding:12px 20px;background-color:var(--accent-primary);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:16px;transition:background-color .3s}.scan-btn:hover{background-color:var(--accent-primary-hover)}.scan-btn.active{background-color:var(--accent-danger)}.scan-btn.active:hover{background-color:var(--accent-danger-hover)}.scanner-container{margin-top:15px;border-radius:8px;overflow:hidden}.photo-input{width:100%;padding:12px;border:2px dashed var(--accent-primary);border-radius:6px;background-color:var(--bg-secondary);color:var(--text-primary);cursor:pointer;font-size:16px;transition:all .3s ease}.photo-input:hover{border-color:var(--accent-primary-hover);background-color:var(--bg-hover)}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));grid-gap:15px;gap:15px;margin-top:15px}.photo-item{position:relative;border:1px solid var(--border-secondary);border-radius:8px;overflow:hidden;background-color:var(--bg-secondary);box-shadow:0 2px 4px var(--shadow-light);transition:all .3s ease}.photo-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px var(--shadow-medium)}.photo-item img{width:100%;height:120px;object-fit:cover;display:block}.photo-info{padding:8px;display:flex;justify-content:space-between;align-items:center;background-color:var(--bg-secondary)}.sn-label{font-size:12px;font-weight:700;color:var(--text-primary);word-break:break-all}.delete-btn{background:none;border:none;cursor:pointer;font-size:16px;padding:4px;border-radius:4px;transition:background-color .2s}.delete-btn:hover{background-color:var(--accent-danger);color:#fff}.actions-section{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.clear-btn,.download-btn{padding:15px 30px;border:none;border-radius:6px;cursor:pointer;font-size:16px;font-weight:700;transition:all .3s}.download-btn{background-color:var(--accent-success);color:#fff}.download-btn:hover:not(:disabled){background-color:var(--accent-success-hover)}.clear-btn{background-color:var(--accent-danger);color:#fff}.clear-btn:hover:not(:disabled){background-color:var(--accent-danger-hover)}.clear-btn:disabled,.download-btn:disabled{background-color:var(--accent-disabled);cursor:not-allowed;opacity:.6}@media (max-width:768px){.container{padding:15px}header h1{font-size:1.5rem}.input-group{flex-direction:column}.sn-input{min-width:unset}.photo-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.actions-section{flex-direction:column}.clear-btn,.download-btn{width:100%}.tab-btn{padding:12px 15px;font-size:14px}.tab-navigation{margin-bottom:15px}}#reader{border:2px solid #007bff!important;border-radius:8px!important}#reader__dashboard_section{display:none!important}#reader__scan_region{border-radius:8px!important}[data-theme=dark] .scan-btn{background-color:#1e40af}[data-theme=dark] .scan-btn:hover{background-color:#1d4ed8}[data-theme=dark] .scan-btn.active{background-color:#b91c1c}[data-theme=dark] .scan-btn.active:hover{background-color:#991b1b}[data-theme=dark] .download-btn{background-color:#15803d}[data-theme=dark] .download-btn:hover:not(:disabled){background-color:#166534}[data-theme=dark] .clear-btn{background-color:#b91c1c}[data-theme=dark] .clear-btn:hover:not(:disabled){background-color:#991b1b}[data-theme=dark] .theme-toggle{background:#404040;border-color:#555}[data-theme=dark] .theme-toggle:hover:not(:disabled){background:#4a4a4a}