.loading-spinner-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.loading-spinner{border:3px solid var(--color-gray-medium);border-top:3px solid var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.spinner-small{width:24px;height:24px;border-width:2px}.spinner-medium{width:40px;height:40px;border-width:3px}.spinner-large{width:60px;height:60px;border-width:4px}.loading-text{color:var(--text-secondary);font-size:var(--font-size-base);margin:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.auth-container{display:flex;height:100vh;align-items:center;justify-content:center;background:var(--bg-secondary)}.login-card{padding:var(--spacing-xxl) var(--spacing-xl)}.login-form h2{margin-top:0;margin-bottom:var(--spacing-lg);color:var(--color-primary);font-weight:600;letter-spacing:1px;font-size:var(--font-size-xl);text-align:center}.login-form button{width:100%;margin-top:var(--spacing-md)}.auth-link{margin-top:var(--spacing-lg);text-align:center;color:var(--text-secondary);font-size:var(--font-size-sm)}.auth-link a{color:var(--color-primary);text-decoration:none;font-weight:600}.auth-link a:hover{text-decoration:underline}.profile-menu-container{position:relative}.profile-button{background:none;border:none;cursor:pointer;padding:var(--spacing-xs);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:background var(--transition-fast)}.profile-button:hover{background:var(--color-gray-light)}.profile-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--color-primary)}.profile-icon svg{width:100%;height:100%}.profile-dropdown{position:absolute;top:calc(100% + var(--spacing-xs));right:0;background:var(--bg-primary);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);min-width:200px;z-index:1000;overflow:hidden}.dropdown-item{width:100%;padding:var(--spacing-md);background:none;border:none;text-align:left;cursor:pointer;color:var(--text-primary);font-size:var(--font-size-base);transition:background var(--transition-fast)}.dropdown-item:hover{background:var(--color-gray-light)}.dropdown-item.logout{color:var(--text-error)}.dropdown-divider{margin:0;border:none;border-top:1px solid var(--color-gray-medium)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg-overlay);display:flex;align-items:center;justify-content:center;z-index:2000;padding:var(--spacing-lg)}.modal-content{background:var(--bg-primary);padding:var(--spacing-xxl);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:500px;width:100%;max-height:90vh;overflow-y:auto}.modal-content h3{color:var(--color-primary);margin-bottom:var(--spacing-xl);text-align:center}.modal-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-xl)}.modal-actions .btn{flex:1}.warning-text{color:var(--text-error);font-size:var(--font-size-sm);margin-top:var(--spacing-md);font-weight:600}@media (max-width: 768px){.modal-content{padding:var(--spacing-xl)}}.lock-animation-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.lock-icon{color:var(--color-primary);animation:lockPulse 1.5s ease-in-out infinite}.lock-icon.locking{animation:lockPulse 1.5s ease-in-out infinite}.lock-icon.unlocking{animation:unlockPulse 1.5s ease-in-out infinite}.lock-text{color:var(--text-secondary);font-size:var(--font-size-base);margin:0}@keyframes lockPulse{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}@keyframes unlockPulse{0%,to{transform:scale(1) rotate(0);opacity:1}25%{transform:scale(1.1) rotate(-5deg);opacity:.9}50%{transform:scale(1.2) rotate(0);opacity:.8}75%{transform:scale(1.1) rotate(5deg);opacity:.9}}.frame-view-container{display:flex;justify-content:center;align-items:center;width:100%;min-height:100%}.rahmen-outer{display:inline-block;outline:3vh solid rgb(124,124,124)}.rahmen-inner{background:#fff;padding:4vh;display:flex;justify-content:center;align-items:center}.frame-image{max-height:80vh;max-width:65vw;width:auto;height:auto;background-color:#ebebeb;display:block}.frame-info{color:var(--text-secondary);font-size:var(--font-size-sm);margin:0}.error-message,.no-image-message{text-align:center;padding:var(--spacing-xl);width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:200px}.error-message p,.no-image-message p{color:var(--text-secondary);margin-bottom:var(--spacing-md)}.key-input-dialog{width:100%;max-width:400px;margin-top:var(--spacing-md);padding:0 var(--spacing-md);box-sizing:border-box}.key-input-dialog .input-group{margin-bottom:var(--spacing-md)}.key-input-dialog .input-group label{display:block;font-size:var(--font-size-sm);margin-bottom:.4rem;color:var(--text-secondary)}.key-input-dialog .input{width:100%;box-sizing:border-box}.key-input-actions{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-md)}.key-input-actions .btn{width:100%}@media (max-width: 768px){.rahmen-outer{outline-width:2vh}.rahmen-inner{padding:3vh}.frame-image{margin-left:2vw;margin-right:2vw;max-width:calc(100% - 4vw)}.key-input-dialog{max-width:calc(100% - 4vw);padding:0;margin-left:2vw;margin-right:2vw}.error-message{padding:var(--spacing-md);width:calc(100% - 4vw);margin-left:2vw;margin-right:2vw}}.dashboard-container{min-height:100vh;background:var(--bg-secondary)}.dashboard-header{background:var(--bg-primary);padding:var(--spacing-md) var(--spacing-lg);box-shadow:var(--shadow-sm);display:flex;justify-content:space-between;align-items:center;min-height:56px}.dashboard-header .header-left,.dashboard-header .header-center,.dashboard-header .header-right{display:flex;align-items:center;flex:1}.dashboard-header .header-left{justify-content:flex-start}.dashboard-header .header-center{justify-content:center}.dashboard-header .header-right{justify-content:flex-end}.header-icon-placeholder{width:24px;height:24px;color:var(--color-gray-dark);display:flex;align-items:center;justify-content:center}.header-greeting{margin:0;color:#7c7c7c;font-size:var(--font-size-lg);font-weight:400;font-family:var(--font-family)}.dashboard-main{max-width:1200px;margin:0 auto;padding:var(--spacing-xl)}.no-frame-container{display:flex;justify-content:center;align-items:center;min-height:60vh}.no-frame-card{background:var(--bg-primary);padding:var(--spacing-xxl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);text-align:center;max-width:500px}.no-frame-card h2{color:var(--color-primary);margin-bottom:var(--spacing-lg)}.no-frame-card p{color:var(--text-secondary);margin-bottom:var(--spacing-xl)}.no-frame-card .btn{margin-bottom:var(--spacing-xl)}.instructions{text-align:left;background:var(--color-gray-light);padding:var(--spacing-lg);border-radius:var(--radius-sm);margin-top:var(--spacing-xl)}.instructions p{margin-bottom:var(--spacing-md);color:var(--text-primary)}.frame-container{background:var(--bg-primary);padding:var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.frame-header{display:flex;justify-content:center;align-items:center;margin-bottom:var(--spacing-xl);flex-wrap:wrap;gap:var(--spacing-md);position:sticky;top:0;background:var(--bg-primary);z-index:10;padding:var(--spacing-md) 0}@media (max-width: 768px){.dashboard-header{padding:var(--spacing-sm) var(--spacing-md);min-height:48px}.dashboard-header .header-left,.dashboard-header .header-center,.dashboard-header .header-right{flex:0 0 auto}.dashboard-header .header-center{flex:1;padding:0 var(--spacing-sm)}.header-greeting{font-size:var(--font-size-base)}.header-icon-placeholder{width:20px;height:20px}.frame-header{justify-content:center}}.pairing-container{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:var(--spacing-xl);background:var(--bg-secondary)}.pairing-card{background:var(--bg-primary);padding:var(--spacing-xxl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);max-width:600px;width:100%}.pairing-card h2{color:var(--color-primary);margin-bottom:var(--spacing-lg);text-align:center}.instructions{background:var(--color-gray-light);padding:var(--spacing-lg);border-radius:var(--radius-sm);margin-bottom:var(--spacing-xl)}.instructions p{margin-bottom:var(--spacing-md);color:var(--text-primary);font-weight:600}.instructions ol{margin-left:var(--spacing-lg);color:var(--text-secondary)}.instructions li{margin-bottom:var(--spacing-xs)}.instruction-link{color:var(--text-secondary);text-decoration:underline;cursor:pointer}.instruction-link:hover{text-decoration:underline;color:var(--text-primary)}.pairing-status{margin:var(--spacing-xl) 0;display:flex;justify-content:center}.success-message{text-align:center;margin:var(--spacing-xl) 0}.redirect-message{color:var(--text-secondary);font-size:var(--font-size-sm);margin-top:var(--spacing-md)}.pairing-options{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.manual-button{width:100%;padding:1rem;font-size:var(--font-size-lg)}.manual-input-container{margin:var(--spacing-xl) 0}.manual-input-container h3{color:var(--text-primary);margin-bottom:var(--spacing-lg);text-align:center;font-size:var(--font-size-lg)}.manual-input-container .input-group{margin-bottom:var(--spacing-lg)}.input-hint{display:block;margin-top:var(--spacing-xs);color:var(--text-secondary);font-size:.85rem}.manual-actions{display:flex;flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-xl)}.manual-actions .btn{width:100%;padding:1rem;font-size:var(--font-size-lg)}@media (max-width: 768px){.pairing-container{padding:var(--spacing-md)}.pairing-card{padding:var(--spacing-lg)}.manual-button,.manual-actions .btn,.back-button{padding:1.2rem;font-size:var(--font-size-base)}}.encryption-container{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:var(--spacing-xl);background:var(--bg-secondary)}.encryption-card{background:var(--bg-primary);padding:var(--spacing-xxl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);max-width:600px;width:100%}.encryption-card h2{color:var(--color-primary);margin-bottom:var(--spacing-lg);text-align:center}.password-prompt{color:var(--text-secondary);margin-bottom:var(--spacing-lg);text-align:center}.encryption-info{margin:var(--spacing-xl) 0}.info-text{color:var(--text-primary);margin-bottom:var(--spacing-lg);line-height:1.6}.copy-link-button{width:100%;margin-bottom:var(--spacing-lg);padding:1rem;font-size:var(--font-size-lg)}.or-text{text-align:center;color:var(--text-secondary);margin:var(--spacing-lg) 0;font-weight:600}.encryption-key-display{background:var(--color-gray-light);padding:var(--spacing-lg);border-radius:var(--radius-sm);margin-bottom:var(--spacing-lg)}.key-label{color:var(--text-secondary);font-size:var(--font-size-sm);margin-bottom:var(--spacing-xs)}.key-value{color:var(--text-primary);font-family:monospace;font-size:var(--font-size-base);word-break:break-all;margin:0}.copy-key-button{width:100%;margin-bottom:var(--spacing-lg);padding:1rem;font-size:var(--font-size-lg)}.back-button{width:100%;margin-top:var(--spacing-lg)}.no-frame-message{text-align:center;padding:var(--spacing-lg);color:var(--text-secondary)}.copy-success{text-align:center;color:var(--color-primary);margin-top:var(--spacing-md);font-weight:600}@media (max-width: 768px){.encryption-container{padding:var(--spacing-md)}.encryption-card{padding:var(--spacing-lg)}.copy-link-button,.copy-key-button,.back-button{padding:1.2rem;font-size:var(--font-size-base)}}.interval-settings-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);background:var(--bg-secondary)}.interval-settings-content{background:var(--bg-primary);padding:var(--spacing-xxl);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:600px;width:100%}.interval-settings-content h2{color:var(--color-primary);margin-bottom:var(--spacing-xl);text-align:center}.description{margin-bottom:var(--spacing-xl);color:var(--text-secondary);line-height:1.6}.description p{margin-bottom:var(--spacing-md)}.description p:last-child{margin-bottom:0}.interval-selectors{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.input-group{margin-bottom:var(--spacing-lg)}.input-group label{display:block;margin-bottom:var(--spacing-xs);color:var(--text-primary);font-weight:500}.input{width:100%;padding:var(--spacing-md);border:1px solid var(--color-gray-medium);border-radius:var(--radius-sm);font-size:var(--font-size-base);background:var(--bg-primary);color:var(--text-primary);transition:border-color var(--transition-fast)}.input:focus{outline:none;border-color:var(--color-primary)}.interval-summary{background:var(--bg-secondary);padding:var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-lg);text-align:center}.interval-summary p{margin:0;color:var(--text-primary)}.interval-summary strong{color:var(--color-primary)}.form-actions{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-xl)}.form-actions .btn{flex:1}.error{background:var(--bg-error);color:var(--text-error);padding:var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);text-align:center}.success{background:var(--bg-success);color:var(--text-success);padding:var(--spacing-md);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);text-align:center}@media (max-width: 768px){.interval-settings-container{padding:var(--spacing-md)}.interval-settings-content{padding:var(--spacing-xl)}.interval-selectors{grid-template-columns:1fr}}.admin-login-card{max-width:400px;margin:50px auto;padding:2rem;background:#fff;border-radius:8px;box-shadow:0 2px 10px #0000001a}.admin-login-card h2{text-align:center;margin-bottom:1.5rem;color:#333}.admin-panel-container{min-height:100vh;background:var(--bg-secondary, #f5f5f5)}.admin-header{background:#fff;padding:1.5rem 2rem;box-shadow:0 2px 4px #0000001a;display:flex;justify-content:space-between;align-items:center}.admin-header-left{display:flex;align-items:center;gap:1.5rem}.admin-menu-item{background:none;border:none;color:#dc3545;font-size:1rem;font-weight:600;cursor:pointer;padding:.5rem 1rem;border-radius:4px;transition:background .2s}.admin-menu-item:hover{background:#dc35451a}.admin-header h1{margin:0;color:var(--color-primary, #333);font-size:1.5rem}.admin-header-actions{display:flex;gap:1rem}.admin-tabs{background:#fff;border-bottom:2px solid var(--bg-secondary, #f5f5f5);display:flex;padding:0 2rem}.admin-tab{padding:1rem 2rem;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:1rem;color:var(--text-secondary, #666);transition:all .2s}.admin-tab:hover{color:var(--color-primary, #333);background:var(--bg-secondary, #f5f5f5)}.admin-tab.active{color:var(--color-primary, #333);border-bottom-color:var(--color-primary, #333);font-weight:600}.admin-main{padding:2rem;max-width:1400px;margin:0 auto}.admin-table-container{background:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 4px #0000001a}.admin-table-container h2{margin-top:0;margin-bottom:1.5rem;color:var(--color-primary, #333)}.admin-table{width:100%;border-collapse:collapse}.admin-table thead{background:var(--bg-secondary, #f5f5f5)}.admin-table th{padding:.75rem;text-align:left;font-weight:600;color:var(--color-primary, #333);border-bottom:2px solid var(--bg-secondary, #f5f5f5)}.admin-table td{padding:.75rem;border-bottom:1px solid var(--bg-secondary, #f5f5f5)}.admin-table tbody tr:hover{background:var(--bg-secondary, #f5f5f5)}.admin-table .empty-state{text-align:center;color:var(--text-secondary, #666);padding:2rem}.monospace{font-family:Courier New,monospace;font-size:.9rem}.small{font-size:.8rem;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.btn-sm{padding:.4rem .8rem;font-size:.875rem}.btn-danger{background:#dc3545;color:#fff}.btn-danger:hover{background:#c82333}.delete-confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.delete-confirm-dialog{background:#fff;padding:2rem;border-radius:8px;max-width:500px;box-shadow:0 4px 20px #0000004d}.delete-confirm-dialog h3{margin-top:0;color:var(--color-primary, #333)}.delete-confirm-dialog p{margin:1rem 0;color:var(--text-secondary, #666)}.delete-confirm-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:1.5rem}.admin-bin-converter-container{min-height:100vh;background:var(--bg-secondary, #f5f5f5)}.admin-bin-converter-header{background:#fff;padding:1.5rem 2rem;box-shadow:0 2px 4px #0000001a;display:flex;justify-content:space-between;align-items:center}.admin-bin-converter-header h1{margin:0;color:var(--color-primary, #333);font-size:1.5rem}.admin-bin-converter-main{padding:2rem;max-width:800px;margin:0 auto}.admin-bin-converter-content{background:#fff;border-radius:8px;padding:2rem;box-shadow:0 2px 4px #0000001a}.description{color:var(--text-secondary, #666);margin-bottom:2rem;line-height:1.6}.upload-section{margin-bottom:2rem;text-align:center}.upload-button{padding:1rem 2rem;font-size:1rem}.status-message{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:1rem 0;color:var(--text-primary, #333)}.download-section{margin-top:2rem;text-align:center;padding-top:2rem;border-top:1px solid var(--bg-secondary, #f5f5f5)}.success-message{color:var(--text-success, #28a745);margin-bottom:1rem;font-weight:500}.download-button{padding:1rem 2rem;font-size:1rem}.error{background:#f8d7da;color:#721c24;padding:1rem;border-radius:4px;margin-bottom:1rem}.btn{padding:.75rem 1.5rem;border:none;border-radius:4px;font-size:1rem;cursor:pointer;transition:background .2s}.btn-primary{background:var(--color-primary, #007bff);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-dark, #0056b3)}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#5a6268}.app{min-height:100vh}:root{--color-primary: #d32f2f;--color-primary-hover: #c62828;--color-primary-light: rgba(211, 47, 47, .15);--color-black: #000000;--color-white: #ffffff;--color-gray-light: #f5f5f5;--color-gray-medium: #e0e0e0;--color-gray-dark: #8f8f8f;--color-gray-border: #dedede;--bg-primary: #ffffff;--bg-secondary: #f0f0f0;--bg-overlay: rgba(0, 0, 0, .5);--text-primary: #000000;--text-secondary: #8f8f8f;--text-error: #d81b60;--spacing-xs: .4rem;--spacing-sm: .8rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-xxl: 2.5rem;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--shadow-sm: 0 2px 8px rgba(211, 47, 47, .12);--shadow-md: 0 4px 20px rgba(211, 47, 47, .15);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .12);--font-family: "Segoe UI", Arial, sans-serif;--font-size-sm: .97rem;--font-size-base: 1rem;--font-size-lg: 1.09rem;--font-size-xl: 1.5rem;--transition-fast: .2s;--transition-normal: .3s}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%;font-family:var(--font-family);background:var(--bg-secondary);color:var(--text-primary)}#root{min-height:100vh}.btn{padding:.7rem 1.5rem;font-size:var(--font-size-lg);font-weight:600;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast);text-align:center;text-decoration:none;display:inline-block}.btn-primary{background:var(--color-primary);color:var(--color-white);box-shadow:var(--shadow-sm)}.btn-primary:hover{background:var(--color-primary-hover)}.btn-secondary{background:var(--color-gray-medium);color:var(--text-primary)}.btn-secondary:hover{background:var(--color-gray-dark);color:var(--color-white)}.btn:disabled{opacity:.6;cursor:not-allowed}.input{width:100%;padding:.55rem;font-size:var(--font-size-base);border:1px solid var(--color-gray-border);border-radius:var(--radius-sm);background:var(--bg-primary);outline:none;transition:border-color var(--transition-fast);font-family:var(--font-family)}.input:focus{border-color:var(--color-primary)}.input-group{margin-bottom:1.1rem}.input-group label{display:block;font-size:var(--font-size-sm);margin-bottom:.4rem;color:var(--text-secondary)}.card{background:var(--bg-primary);padding:var(--spacing-xxl) var(--spacing-xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);width:min(350px,90vw);margin:0 auto}.error{margin-top:1em;color:var(--text-error);text-align:center;font-size:var(--font-size-sm)}.success{margin-top:1em;color:var(--color-primary);text-align:center;font-size:var(--font-size-sm)}.container{max-width:1200px;margin:0 auto;padding:var(--spacing-lg)}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--bg-overlay);color:var(--color-white);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;font-size:var(--font-size-xl);font-weight:700}@media (max-width: 768px){.card{width:95vw;padding:var(--spacing-xl) var(--spacing-lg)}}