:root{--sa-bg:#0a0a0c;--sa-surface:#121216;--sa-surface-elevated:#1e1e24;--sa-primary:#10b981;--sa-primary-hover:#059669;--sa-primary-rgb:16, 185, 129;--sa-text:#f3f4f6;--sa-text-secondary:#9ca3af;--sa-border:#27272a;--sa-danger:#ef4444;--sa-viewfinder:#10b981;--sa-overlay:rgba(0, 0, 0, 0.45);--sa-glass-bg:rgba(18, 18, 22, 0.75);--sa-radius:12px;--sa-radius-lg:24px;--sa-shadow:0 4px 20px rgba(0, 0, 0, 0.5);--sa-font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif} [data-theme="light"]{--sa-bg:#f9fafb;--sa-surface:#ffffff;--sa-surface-elevated:#f3f4f6;--sa-primary:#059669;--sa-primary-hover:#047857;--sa-primary-rgb:5, 150, 105;--sa-text:#1f2937;--sa-text-secondary:#4b5563;--sa-border:#e5e7eb;--sa-danger:#dc2626;--sa-viewfinder:#059669;--sa-overlay:rgba(255, 255, 255, 0.45);--sa-glass-bg:rgba(255, 255, 255, 0.85);--sa-shadow:0 4px 20px rgba(0, 0, 0, 0.08)} [data-theme="monokai"]{--sa-bg:#272822;--sa-surface:#1e1f1c;--sa-surface-elevated:#3e3d32;--sa-primary:#a6e22e;--sa-primary-hover:#8ec720;--sa-primary-rgb:166, 226, 46;--sa-text:#f8f8f2;--sa-text-secondary:#cfcfc2;--sa-border:#49483e;--sa-danger:#f92672;--sa-viewfinder:#a6e22e;--sa-overlay:rgba(0, 0, 0, 0.45);--sa-glass-bg:rgba(30, 31, 28, 0.8);--sa-shadow:0 4px 20px rgba(0, 0, 0, 0.6)} [data-theme="dracula"]{--sa-bg:#282a36;--sa-surface:#1e1f29;--sa-surface-elevated:#44475a;--sa-primary:#bd93f9;--sa-primary-hover:#ff79c6;--sa-primary-rgb:189, 147, 249;--sa-text:#f8f8f2;--sa-text-secondary:#6272a4;--sa-border:#44475a;--sa-danger:#ff5555;--sa-viewfinder:#50fa7b;--sa-overlay:rgba(0, 0, 0, 0.45);--sa-glass-bg:rgba(30, 31, 41, 0.8);--sa-shadow:0 4px 20px rgba(0, 0, 0, 0.5)} [data-theme="nord"]{--sa-bg:#2e3440;--sa-surface:#3b4252;--sa-surface-elevated:#434c5e;--sa-primary:#88c0d0;--sa-primary-hover:#81a1c1;--sa-primary-rgb:136, 192, 208;--sa-text:#eceff4;--sa-text-secondary:#d8dee9;--sa-border:#4c566a;--sa-danger:#bf616a;--sa-viewfinder:#a3be8c;--sa-overlay:rgba(0, 0, 0, 0.45);--sa-glass-bg:rgba(59, 66, 82, 0.8);--sa-shadow:0 4px 20px rgba(0, 0, 0, 0.4)} [data-theme="solarized-dark"]{--sa-bg:#002b36;--sa-surface:#073642;--sa-surface-elevated:#586e75;--sa-primary:#2aa198;--sa-primary-hover:#268bd2;--sa-primary-rgb:42, 161, 152;--sa-text:#93a1a1;--sa-text-secondary:#839496;--sa-border:#073642;--sa-danger:#dc322f;--sa-viewfinder:#859900;--sa-overlay:rgba(0, 0, 0, 0.45);--sa-glass-bg:rgba(7, 54, 66, 0.85);--sa-shadow:0 4px 20px rgba(0, 0, 0, 0.5)} *{box-sizing:border-box;margin:0;padding:0} body, html{font-family:var(--sa-font);background-color:var(--sa-bg);color:var(--sa-text);overflow:hidden;width:100%;height:100%;transition:background-color 0.3s ease, color 0.3s ease} #scanapp-root{display:flex;width:100vw;height:100vh;height:100dvh;position:relative;overflow:hidden} .desktop-sidebar{width:270px;min-width:270px;flex-shrink:0;background-color:var(--sa-surface);border-right:1px solid var(--sa-border);display:flex;flex-direction:column;justify-content:space-between;padding:24px 16px;z-index:10;box-sizing:border-box;transition:width 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease, border-color 0.3s ease} .desktop-sidebar.collapsed{width:80px;min-width:80px} .sidebar-logo{display:flex;align-items:center;gap:12px;margin-bottom:32px;padding:0 8px;height:40px} .sidebar-logo img{height:28px;transition:transform 0.3s ease} .desktop-sidebar.collapsed .sidebar-logo img{transform:scale(1.1)} .sidebar-logo span{font-size:1.25rem;font-weight:700;letter-spacing:-0.025em;color:var(--sa-text);white-space:nowrap;transition:opacity 0.2s ease} .desktop-sidebar.collapsed .sidebar-logo span{opacity:0;pointer-events:none;width:0} .sidebar-menu{display:flex;flex-direction:column;gap:8px;flex-grow:1} .sidebar-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--sa-radius);color:var(--sa-text-secondary);text-decoration:none;font-size:0.95rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;background:transparent;border:none;outline:none;width:100%;text-align:left} .sidebar-item svg{width:20px;height:20px;min-width:20px;fill:currentColor;transition:transform 0.2s ease} .sidebar-item:hover{color:var(--sa-text);background-color:var(--sa-surface-elevated)} .sidebar-item:hover svg{transform:scale(1.05)} .sidebar-item.active{color:#ffffff;background-color:#047857;font-weight:700} .sidebar-item.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none} .desktop-sidebar.collapsed .sidebar-item{padding:12px 0;justify-content:center} .desktop-sidebar.collapsed .sidebar-item span{display:none} .sidebar-footer{display:flex;flex-direction:column;gap:16px;padding-top:16px;border-top:1px solid var(--sa-border)} .desktop-sidebar.collapsed .sidebar-footer{align-items:center} .theme-selector-container{display:flex;flex-direction:column;gap:8px;padding:8px 16px} .theme-selector-container label{font-size:0.75rem;font-weight:600;text-transform:uppercase;color:var(--sa-text-secondary);letter-spacing:0.05em} .desktop-sidebar.collapsed .theme-selector-container{display:none} .theme-select{width:100%;background-color:var(--sa-surface-elevated);border:1px solid var(--sa-border);color:var(--sa-text);padding:10px 12px;border-radius:var(--sa-radius);font-size:0.9rem;font-family:inherit;outline:none;cursor:pointer;transition:border-color 0.2s ease;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%239ca3af'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px} .theme-select:focus{border-color:var(--sa-primary)} .theme-picker-collapsed-btn{display:none} .desktop-sidebar.collapsed .theme-picker-collapsed-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background-color:var(--sa-surface-elevated);border:1px solid var(--sa-border);color:var(--sa-text-secondary);cursor:pointer;transition:all 0.2s ease} .desktop-sidebar.collapsed .theme-picker-collapsed-btn:hover{color:var(--sa-text);border-color:var(--sa-primary)} .sidebar-privacy-card{display:flex;align-items:flex-start;gap:10px;background-color:rgba(var(--sa-primary-rgb), 0.05);border:1px solid rgba(var(--sa-primary-rgb), 0.12);padding:12px;border-radius:var(--sa-radius-lg);margin-top:auto;transition:opacity 0.2s ease} .sidebar-privacy-icon-wrapper{color:var(--sa-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px} .sidebar-privacy-icon-wrapper svg{width:18px;height:18px;fill:currentColor} .sidebar-privacy-content{display:flex;flex-direction:column;gap:2px;text-align:left} .sidebar-privacy-title{font-weight:700;color:var(--sa-text);font-size:0.8rem} .sidebar-privacy-desc{font-size:0.7rem;color:var(--sa-text-secondary);line-height:1.3} .sidebar-support-card{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(6, 182, 212, 0.08));border:1px dashed var(--sa-primary);padding:12px;border-radius:var(--sa-radius-lg);cursor:pointer;transition:all 0.2s ease;margin-top:8px} .sidebar-support-card:hover{background:linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.12));transform:translateY(-1px)} .sidebar-support-card:active{transform:translateY(0) scale(0.98)} .sidebar-support-icon-wrapper{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background-color:#ef4444;color:#ffffff;box-shadow:0 2px 8px rgba(239, 68, 68, 0.2);flex-shrink:0} .sidebar-support-icon-wrapper svg{width:14px;height:14px;fill:currentColor} .sidebar-support-content{display:flex;flex-direction:column;gap:2px;text-align:left} .sidebar-support-title{font-weight:700;color:var(--sa-text);font-size:0.8rem} .sidebar-support-desc{font-size:0.65rem;color:var(--sa-text-secondary)} .sidebar-extra-footer{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;padding:0 8px;transition:opacity 0.2s ease} .sidebar-footer-links{display:flex;align-items:center;gap:8px;font-size:0.75rem;color:var(--sa-text-secondary)} .sidebar-footer-links a{color:var(--sa-text-secondary);text-decoration:none;transition:color 0.2s ease} .sidebar-footer-links a:hover{color:var(--sa-primary)} .sidebar-footer-credits{font-size:0.7rem;color:var(--sa-text-secondary);opacity:0.8} .desktop-sidebar.collapsed .sidebar-privacy-card, .desktop-sidebar.collapsed .sidebar-support-card, .desktop-sidebar.collapsed .sidebar-extra-footer{display:none} .app-content{flex-grow:1;position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;background-color:var(--sa-bg)} .mobile-tab-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:64px;background-color:var(--sa-surface);border-top:1px solid var(--sa-border);z-index:10;display:none;justify-content:space-around;align-items:center;padding-bottom:env(safe-area-inset-bottom)} .router-view{flex-grow:1;position:relative;width:100%;height:100%;overflow:hidden} .page{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none;transition:opacity 0.25s ease;display:flex;flex-direction:column;overflow-y:auto} .page.active{opacity:1;pointer-events:auto;z-index:1} .scan-page-container{display:flex;flex-direction:row;width:100%;height:100%;position:relative;overflow:hidden} .scanner-viewport-wrapper{flex-grow:1;height:100%;position:relative;display:flex;align-items:center;justify-content:center;background-color:#000000} .camera-container-v2{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden} .camera-container-v2 video{width:100% !important;height:100% !important;object-fit:cover !important;transition:object-fit 0.25s ease} .camera-container-v2.fit-resolution video{object-fit:contain !important} .viewfinder-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center} .viewfinder-box{width:320px;height:320px;position:relative;box-shadow:0 0 0 9999px var(--sa-overlay);border-radius:var(--sa-radius);transition:width 0.3s ease, height 0.3s ease} .viewfinder-corner{position:absolute;width:32px;height:32px;border:4px solid var(--sa-viewfinder);transition:border-color 0.3s ease} .viewfinder-corner.top-left{top:-2px;left:-2px;border-right:none;border-bottom:none;border-top-left-radius:var(--sa-radius)} .viewfinder-corner.top-right{top:-2px;right:-2px;border-left:none;border-bottom:none;border-top-right-radius:var(--sa-radius)} .viewfinder-corner.bottom-left{bottom:-2px;left:-2px;border-right:none;border-top:none;border-bottom-left-radius:var(--sa-radius)} .viewfinder-corner.bottom-right{bottom:-2px;right:-2px;border-left:none;border-top:none;border-bottom-right-radius:var(--sa-radius)} .viewfinder-laser{position:absolute;top:2px;left:8px;right:8px;height:3px;background:linear-gradient(90deg, transparent, var(--sa-viewfinder), transparent);animation:laser-animation 3s infinite linear;box-shadow:0 0 8px var(--sa-viewfinder);opacity:0.8} @keyframes laser-animation{0%{top:4%} 50%{top:94%} 100%{top:4%}} .viewfinder-status-label{position:absolute;top:calc(50% - 210px);color:#ffffff;font-size:0.95rem;font-weight:500;background-color:rgba(0, 0, 0, 0.6);padding:8px 18px;border-radius:50px;letter-spacing:0.02em;backdrop-filter:blur(8px);border:1px solid rgba(255, 255, 255, 0.1);animation:pulse-opacity 2s infinite ease-in-out} @keyframes pulse-opacity{0%, 100%{opacity:0.8} 50%{opacity:1}} .floating-controls-left, .floating-controls-right{position:absolute;bottom:32px;display:flex;align-items:center;gap:12px;z-index:4;background-color:rgba(0, 0, 0, 0.4);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:8px;border-radius:50px;border:1px solid rgba(255, 255, 255, 0.12);box-shadow:0 8px 32px rgba(0, 0, 0, 0.3);transition:all 0.3s ease} .floating-controls-left{left:32px} .floating-controls-right{right:32px} .control-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background-color:rgba(255, 255, 255, 0.1);border:1px solid rgba(255, 255, 255, 0.08);color:#ffffff;cursor:pointer;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);outline:none} .control-btn:hover{background-color:rgba(255, 255, 255, 0.2);transform:scale(1.05)} .control-btn:active{transform:scale(0.95)} .control-btn.active{background-color:var(--sa-primary);border-color:var(--sa-primary);box-shadow:0 0 12px rgba(var(--sa-primary-rgb), 0.5)} .control-btn.scan-trigger-btn{width:64px;height:64px;background-color:#ffffff;color:#000000;border:none} .control-btn.scan-trigger-btn:hover{background-color:#f3f4f6;transform:scale(1.05);box-shadow:0 0 20px rgba(255, 255, 255, 0.3)} .control-btn svg{width:22px;height:22px;fill:currentColor} .control-btn.scan-trigger-btn svg{width:30px;height:30px} .camera-popover{position:absolute;bottom:96px;left:32px;transform:translateY(10px);background-color:var(--sa-glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--sa-border);border-radius:var(--sa-radius);padding:8px;width:240px;box-shadow:var(--sa-shadow);z-index:5;opacity:0;pointer-events:none;transition:all 0.2s ease} .camera-popover.show{opacity:1;pointer-events:auto;transform:translateY(0)} .camera-option-item{width:100%;background:transparent;border:none;outline:none;padding:10px 12px;color:var(--sa-text);font-size:0.85rem;text-align:left;border-radius:8px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color 0.2s ease} .camera-option-item:hover{background-color:var(--sa-surface-elevated)} .camera-option-item.selected{color:var(--sa-primary);font-weight:600} .permission-fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:32px;background-color:var(--sa-bg);z-index:2;text-align:center} .fallback-illustration{width:120px;height:120px;margin-bottom:24px;color:var(--sa-text-secondary)} .fallback-title{font-size:1.5rem;font-weight:700;margin-bottom:12px;color:var(--sa-text)} .fallback-desc{font-size:0.95rem;color:var(--sa-text-secondary);max-width:420px;margin-bottom:32px;line-height:1.5} .fallback-action-container{display:flex;gap:16px;margin-bottom:40px} .primary-btn{background-color:var(--sa-primary);color:#ffffff;border:none;outline:none;padding:12px 28px;border-radius:50px;font-size:0.95rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;box-shadow:0 4px 12px rgba(var(--sa-primary-rgb), 0.3)} .primary-btn:hover{background-color:var(--sa-primary-hover);transform:translateY(-1px)} .secondary-btn{background-color:var(--sa-surface-elevated);color:var(--sa-text);border:1px solid var(--sa-border);outline:none;padding:12px 28px;border-radius:50px;font-size:0.95rem;font-weight:600;cursor:pointer;transition:all 0.2s ease} .secondary-btn:hover{background-color:var(--sa-border);color:var(--sa-text)} .drag-drop-zone{border:2px dashed var(--sa-border);background-color:var(--sa-surface);border-radius:var(--sa-radius-lg);padding:32px;width:100%;max-width:480px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:all 0.2s ease} .drag-drop-zone.dragover{border-color:var(--sa-primary);background-color:rgba(var(--sa-primary-rgb), 0.05)} .drag-drop-zone svg{width:48px;height:48px;color:var(--sa-text-secondary)} .permission-guide-box{background-color:var(--sa-surface);border:1px solid var(--sa-border);border-radius:var(--sa-radius);padding:20px;text-align:left;max-width:480px;width:100%} .permission-guide-box h4{font-size:1rem;margin-bottom:12px;color:var(--sa-text)} .permission-guide-box ol{padding-left:20px;color:var(--sa-text-secondary);font-size:0.88rem;display:flex;flex-direction:column;gap:8px} .result-panel-v2{width:380px;min-width:380px;flex-shrink:0;height:100%;background-color:var(--sa-surface);border-left:1px solid var(--sa-border);display:flex;flex-direction:column;position:absolute;top:0;right:0;z-index:12;box-shadow:-4px 0 24px rgba(0, 0, 0, 0.18);box-sizing:border-box;transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;transform:translateX(100%)} .result-panel-v2.show{transform:translateX(0)} @media (min-width:1200px){.result-panel-v2{position:relative;top:auto;right:auto;box-shadow:none;transform:none !important;z-index:5} .result-collapsed-tab{display:none !important} .result-panel-v2 .close-sheet-btn{display:none !important}} .result-collapsed-tab{width:48px;min-width:48px;flex-shrink:0;height:100%;background-color:var(--sa-surface);border-left:1px solid var(--sa-border);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;z-index:10;box-sizing:border-box;transition:background-color 0.2s ease, border-color 0.2s ease} .result-collapsed-tab:hover{background-color:var(--sa-surface-elevated)} .result-collapsed-tab .tab-icon{width:20px;height:20px;fill:var(--sa-text-secondary);margin-bottom:12px;transition:fill 0.2s ease} .result-collapsed-tab:hover .tab-icon{fill:var(--sa-primary)} .result-collapsed-tab .tab-chevron{width:16px;height:16px;fill:var(--sa-text-secondary);margin-bottom:24px;animation:tabChevronBounce 1.5s infinite ease-in-out} @keyframes tabChevronBounce{0%, 100%{transform:translateX(0)} 50%{transform:translateX(-4px)}} .result-collapsed-tab .tab-text{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-size:0.78rem;font-weight:700;color:var(--sa-text-secondary);letter-spacing:1.5px} .result-collapsed-tab:hover .tab-text{color:var(--sa-text)} .result-header-v2{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid var(--sa-border)} .result-header-v2 h3{font-size:1.2rem;font-weight:700;color:var(--sa-text)} .close-sheet-btn, .kofi-back-btn{background:transparent;border:none;color:var(--sa-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:50%;transition:all 0.2s ease} .close-sheet-btn:hover, .kofi-back-btn:hover{background-color:var(--sa-surface-elevated);color:var(--sa-text)} .close-sheet-btn svg, .kofi-back-btn svg{width:24px;height:24px;fill:currentColor} .result-body-v2{flex-grow:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:20px} .result-type-card{display:flex;align-items:center;gap:16px;background-color:var(--sa-surface-elevated);padding:16px;border-radius:var(--sa-radius);border:1px solid var(--sa-border)} .result-type-icon-wrapper{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;background-color:rgba(var(--sa-primary-rgb), 0.1);color:var(--sa-primary)} .result-type-icon-wrapper svg{width:24px;height:24px;fill:currentColor} .result-type-details{display:flex;flex-direction:column;gap:4px;overflow:hidden} .result-type-title{font-size:0.8rem;font-weight:600;text-transform:uppercase;color:var(--sa-text-secondary);letter-spacing:0.05em} .result-type-value{font-size:1rem;font-weight:700;color:var(--sa-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .result-content-card{background-color:var(--sa-surface-elevated);border:1px solid var(--sa-border);border-radius:var(--sa-radius);padding:18px;word-break:break-all;font-size:0.95rem;line-height:1.5;color:var(--sa-text);max-height:200px;overflow-y:auto} .result-content-card a{color:var(--sa-primary);text-decoration:none;font-weight:500} .result-content-card a:hover{text-decoration:underline} .result-meta-list{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--sa-border);padding-top:16px} .result-meta-item{display:flex;justify-content:space-between;font-size:0.85rem} .result-meta-label{color:var(--sa-text-secondary)} .result-meta-val{color:var(--sa-text);font-weight:500} .result-actions-strip{display:flex;gap:12px;margin-top:auto} .action-strip-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;background-color:var(--sa-surface-elevated);border:1px solid var(--sa-border);color:var(--sa-text-secondary);border-radius:12px;padding:12px 6px;cursor:pointer;transition:all 0.2s ease;font-size:0.75rem;font-weight:600;text-align:center;outline:none} .action-strip-btn svg{width:20px;height:20px;fill:currentColor} .action-strip-btn:hover{background-color:var(--sa-border);color:var(--sa-text);transform:translateY(-1px)} .action-strip-btn:active{transform:translateY(0)} .scan-another-footer{padding:24px;border-top:1px solid var(--sa-border)} .scan-another-footer button{width:100%} .pwa-install-banner{width:100%;border:1px solid rgba(var(--sa-primary-rgb), 0.22);background:rgba(var(--sa-primary-rgb), 0.08);color:var(--sa-text);border-radius:var(--sa-radius);padding:12px;display:flex;align-items:center;gap:12px;text-align:left;cursor:pointer;transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease} .pwa-install-banner:hover{background:rgba(var(--sa-primary-rgb), 0.12);border-color:rgba(var(--sa-primary-rgb), 0.36);transform:translateY(-1px)} .pwa-install-banner:active{transform:translateY(0)} .pwa-install-banner-icon{width:36px;height:36px;border-radius:10px;background-color:var(--sa-primary);color:#ffffff;display:flex;align-items:center;justify-content:center;flex-shrink:0} .pwa-install-banner-icon svg{width:20px;height:20px;fill:currentColor} .pwa-install-banner-copy{min-width:0;display:flex;flex:1;flex-direction:column;gap:2px} .pwa-install-banner-title{font-size:0.92rem;font-weight:700;color:var(--sa-text)} .pwa-install-banner-subtitle{font-size:0.78rem;color:var(--sa-text-secondary)} .pwa-install-banner-chevron{width:22px;height:22px;fill:var(--sa-text-secondary);flex-shrink:0} .mobile-scrim-v2{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sa-overlay);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity 0.3s ease;z-index:8} .mobile-scrim-v2.show{opacity:1;pointer-events:auto} .subpage-container{padding:24px;display:flex;flex-direction:column;height:100%;overflow-y:auto} .subpage-header{margin-bottom:24px} .subpage-header h2{font-size:1.8rem;font-weight:800;color:var(--sa-text)} .coming-soon-card{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--sa-surface);border:1px solid var(--sa-border);border-radius:var(--sa-radius-lg);padding:48px;text-align:center} .coming-soon-card svg{width:80px;height:80px;color:var(--sa-text-secondary);margin-bottom:24px} .coming-soon-card h3{font-size:1.4rem;font-weight:700;margin-bottom:8px} .coming-soon-card p{color:var(--sa-text-secondary);max-width:320px;font-size:0.9rem} .toast-container-v2{position:absolute;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background-color:#1f2937;color:#ffffff;padding:12px 24px;border-radius:50px;font-size:0.88rem;font-weight:500;box-shadow:0 4px 12px rgba(0, 0, 0, 0.25);pointer-events:none;opacity:0;z-index:100;transition:all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275)} .toast-container-v2.show{opacity:1;transform:translateX(-50%) translateY(0)} .camera-loader-v2{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--sa-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3;transition:opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;opacity:0;visibility:hidden} .camera-loader-v2.show{opacity:1;visibility:visible} .camera-loader-spinner{width:44px;height:44px;border:3px solid rgba(255, 255, 255, 0.1);border-top-color:var(--sa-primary);border-radius:50%;animation:camera-spin 0.8s linear infinite;margin-bottom:16px;box-shadow:0 0 15px rgba(16, 185, 129, 0.2)} .camera-loader-text{color:var(--sa-text);font-size:0.82rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase} .camera-container-v2 video{width:100% !important;height:100% !important;object-fit:cover !important;animation:video-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards} @keyframes camera-spin{to{transform:rotate(360deg)}} @keyframes video-fade-in{from{opacity:0;filter:blur(6px)} to{opacity:1;filter:blur(0)}} .desktop-text{display:inline} .mobile-text{display:none !important} .permission-arrow-indicator{position:fixed;top:12px;left:20px;display:flex;flex-direction:column;align-items:flex-start;z-index:2000;pointer-events:none;animation:bounce-diagonal 1.2s ease-in-out infinite alternate} .permission-arrow-svg{width:40px;height:40px;color:var(--sa-primary);filter:drop-shadow(0 2px 8px rgba(16, 185, 129, 0.4))} .permission-arrow-label{background:var(--sa-primary);color:#fff;font-size:0.75rem;font-weight:600;padding:6px 12px;border-radius:20px;margin-top:4px;box-shadow:0 4px 12px rgba(16, 185, 129, 0.35);white-space:nowrap;letter-spacing:0.02em} @keyframes bounce-diagonal{from{transform:translate(0, 0)} to{transform:translate(-4px, -4px)}} @media (max-width:768px){#scanapp-root{flex-direction:column} .desktop-sidebar{display:none} .mobile-tab-bar{display:flex;position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);height:64px;width:fit-content;padding:0 12px;background-color:var(--sa-glass-bg);backdrop-filter:blur(20px) saturate(190%);-webkit-backdrop-filter:blur(20px) saturate(190%);border:1px solid var(--sa-border);border-radius:32px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.35);z-index:10;justify-content:center;align-items:center;gap:8px} .app-content{height:100%;width:100%} .subpage-container{padding-bottom:calc(96px + env(safe-area-inset-bottom))} .mobile-tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--sa-text-secondary);text-decoration:none;font-size:0.7rem;font-weight:600;cursor:pointer;gap:4px;height:100%;min-width:90px;padding:0 12px;background:transparent;border:none;outline:none} .mobile-tab-item svg{width:20px;height:20px;fill:currentColor;transition:transform 0.2s ease} .mobile-tab-item:hover svg{transform:scale(1.05)} .mobile-tab-item.active{color:var(--sa-primary)} .mobile-tab-item.disabled{opacity:0.3;cursor:not-allowed;pointer-events:none} .scan-page-container{flex-direction:column} .result-panel-v2{width:100%;height:auto;max-height:80%;border-left:none;border-top:1px solid var(--sa-border);border-top-left-radius:var(--sa-radius-lg);border-top-right-radius:var(--sa-radius-lg);position:absolute;top:auto;right:auto;bottom:0;left:0;transform:translateY(100%);box-shadow:0 -8px 32px rgba(0, 0, 0, 0.25);z-index:12;background-color:var(--sa-glass-bg) !important;backdrop-filter:blur(20px) saturate(190%);-webkit-backdrop-filter:blur(20px) saturate(190%);transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)} .result-panel-v2.show{transform:translateY(0)} .scan-another-footer .result-panel-support-card{display:none} .result-collapsed-tab{display:none !important} .support-panel-v2{width:100%;height:auto;max-height:85%;border-top:1px solid var(--sa-border);border-top-left-radius:var(--sa-radius-lg);border-top-right-radius:var(--sa-radius-lg);position:absolute;bottom:0;left:0;transform:translateY(100%);box-shadow:0 -8px 32px rgba(0, 0, 0, 0.25);z-index:12;background-color:var(--sa-glass-bg) !important;backdrop-filter:blur(20px) saturate(190%);-webkit-backdrop-filter:blur(20px) saturate(190%);display:flex;flex-direction:column;transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease} .support-panel-v2.show{transform:translateY(0)} .support-header-v2{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px 24px;border-bottom:1px solid var(--sa-border)} .support-header-v2 h3{font-size:1.2rem;font-weight:700;color:var(--sa-text);margin:0} .support-body-v2{padding:16px;overflow-y:auto;flex-grow:1;display:flex;flex-direction:column;align-items:center;background-color:var(--sa-bg)} .support-iframe-container{width:100%;background-color:#ffffff;border-radius:var(--sa-radius-lg);overflow:hidden;box-shadow:0 4px 16px rgba(0, 0, 0, 0.1);transition:background-color 0.3s ease;display:flex;flex-direction:column} [data-theme="dark"] .support-iframe-container{background-color:#1a1a1f} .settings-panel-v2{width:100%;height:auto;max-height:85%;border-top:1px solid var(--sa-border);border-top-left-radius:var(--sa-radius-lg);border-top-right-radius:var(--sa-radius-lg);position:absolute;bottom:0;left:0;transform:translateY(100%);box-shadow:0 -8px 32px rgba(0, 0, 0, 0.25);z-index:12;background-color:var(--sa-glass-bg) !important;backdrop-filter:blur(20px) saturate(190%);-webkit-backdrop-filter:blur(20px) saturate(190%);display:flex;flex-direction:column;transition:transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease} .settings-panel-v2.show{transform:translateY(0)} .settings-header-v2{position:relative;display:flex;align-items:center;justify-content:center;padding:20px 24px;border-bottom:1px solid var(--sa-border)} .settings-header-title-container{display:flex;align-items:center;gap:10px} .settings-header-v2 .close-sheet-btn{position:absolute;right:24px} .settings-logo{width:28px;height:28px} .settings-header-text{font-size:1.25rem;font-weight:800;color:var(--sa-text);letter-spacing:-0.5px} .settings-body-v2{padding:24px;display:flex;flex-direction:column;gap:20px} .settings-option-row{display:flex;align-items:center;justify-content:space-between;background-color:var(--sa-surface-elevated);padding:16px;border-radius:var(--sa-radius-lg);border:1px solid var(--sa-border)} .settings-option-info{display:flex;flex-direction:column;gap:4px;text-align:left} .settings-option-label{font-weight:700;color:var(--sa-text);font-size:0.95rem} .settings-option-sublabel{font-size:0.75rem;color:var(--sa-text-secondary)} .settings-theme-select{background-color:var(--sa-bg);color:var(--sa-text);border:1px solid var(--sa-border);border-radius:var(--sa-radius);padding:8px 12px;font-weight:600;outline:none;font-size:0.85rem;cursor:pointer} .settings-privacy-card{display:flex;align-items:flex-start;gap:12px;background-color:rgba(var(--sa-primary-rgb), 0.08);border:1px solid rgba(var(--sa-primary-rgb), 0.18);padding:14px 16px;border-radius:var(--sa-radius-lg);margin-top:16px} .settings-privacy-icon-wrapper{color:var(--sa-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px} .settings-privacy-icon-wrapper svg{width:20px;height:20px;fill:currentColor} .settings-privacy-content{display:flex;flex-direction:column;gap:4px;text-align:left} .settings-privacy-title{font-weight:700;color:var(--sa-text);font-size:0.9rem} .settings-privacy-desc{font-size:0.75rem;color:var(--sa-text-secondary);line-height:1.4} .support-banner-card{display:flex;align-items:center;gap:16px;background:linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.12));border:1px dashed var(--sa-primary);padding:16px;border-radius:var(--sa-radius-lg);cursor:pointer;transition:all 0.2s ease} .support-banner-card:active{transform:scale(0.98);background:linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(6, 182, 212, 0.18))} .support-banner-icon-wrapper{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:#ef4444;color:#ffffff;box-shadow:0 4px 12px rgba(239, 68, 68, 0.3);flex-shrink:0} .support-banner-icon-wrapper svg{width:20px;height:20px;fill:currentColor} .support-banner-content{display:flex;flex-direction:column;gap:4px;flex-grow:1;text-align:left} .support-banner-title{font-weight:700;color:var(--sa-text);font-size:0.95rem} .support-banner-desc{font-size:0.75rem;color:var(--sa-text-secondary);line-height:1.35} .support-banner-arrow{color:var(--sa-text-secondary);font-size:1.1rem;font-weight:700;margin-left:auto} .settings-footer-v2{padding:24px;border-top:1px solid var(--sa-border);display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:auto} .settings-footer-links{display:flex;align-items:center;gap:12px} .settings-footer-link{color:var(--sa-primary);font-weight:600;font-size:0.85rem;text-decoration:none;transition:color 0.2s ease} .settings-footer-link:hover{text-decoration:underline} .settings-footer-separator{color:var(--sa-text-secondary);font-size:0.8rem} .settings-footer-credits{font-size:0.75rem;color:var(--sa-text-secondary);font-weight:500} .mobile-scrim-v2{z-index:11} .floating-controls-left, .floating-controls-right{bottom:calc(92px + env(safe-area-inset-bottom));padding:8px;gap:12px} .floating-controls-left{left:20px} .floating-controls-right{right:20px} .camera-popover{bottom:calc(160px + env(safe-area-inset-bottom));left:20px} .control-btn{width:44px;height:44px} .control-btn.scan-trigger-btn{width:56px;height:56px} .viewfinder-box{width:280px;height:280px} .viewfinder-status-label{top:calc(50% - 185px);font-size:0.85rem;padding:6px 14px} .permission-fallback{justify-content:flex-start;overflow-y:auto;height:100%;padding:24px 20px calc(108px + env(safe-area-inset-bottom)) 20px;-webkit-overflow-scrolling:touch} .fallback-illustration{width:70px;height:70px;margin-top:36px;margin-bottom:12px} .fallback-illustration svg{width:100%;height:100%} .fallback-title{font-size:1.25rem;margin-bottom:8px} .fallback-desc{font-size:0.88rem;margin-bottom:16px;max-width:100%;padding:0 8px} .fallback-action-container{display:flex;flex-direction:column;width:100%;max-width:300px;margin-bottom:24px;gap:12px;align-items:center} .primary-btn, .secondary-btn{width:100%;padding:14px 24px;font-size:0.95rem;box-sizing:border-box;display:flex;justify-content:center;align-items:center;border-radius:24px} .desktop-text{display:none !important} .mobile-text{display:inline !important} .drag-drop-zone{padding:16px;gap:8px;margin-bottom:16px} .drag-drop-zone h4{font-size:0.9rem;margin:0} .drag-drop-zone p{font-size:0.75rem !important;margin:0} .drag-drop-zone svg{width:36px;height:36px} .permission-guide-box{padding:14px;font-size:0.82rem} .permission-guide-box h4{font-size:0.88rem;margin-top:0;margin-bottom:8px} .permission-guide-box ol{margin:0;padding-left:20px} .permission-guide-box li{margin-bottom:6px;line-height:1.4}} .result-content-view{display:flex;flex-direction:column;height:100%;width:100%} .result-placeholder-view{display:flex;flex-direction:column;height:100%;width:100%;box-sizing:border-box} .result-placeholder-info{padding:24px;display:flex;flex-direction:column;gap:16px} .result-placeholder-info h2{font-size:1.25rem;font-weight:700;color:var(--sa-text);margin:0} .result-placeholder-info p{font-size:0.88rem;line-height:1.5;color:var(--sa-text-secondary);margin:0} .result-placeholder-local-pill{font-size:0.8rem;font-weight:600;color:var(--sa-primary);background-color:rgba(var(--sa-primary-rgb), 0.08);border:1px solid rgba(var(--sa-primary-rgb), 0.15);padding:8px 12px;border-radius:var(--sa-radius);display:inline-block;align-self:flex-start} .result-placeholder-divider{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background-color:var(--sa-surface-elevated);border-top:1px solid var(--sa-border);border-bottom:1px solid var(--sa-border)} .result-placeholder-divider span{font-size:0.95rem;font-weight:700;color:var(--sa-text)} .result-placeholder-divider .chevron-icon{width:20px;height:20px;fill:var(--sa-text-secondary)} .result-placeholder-empty-state{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px;background-color:var(--sa-bg)} .result-placeholder-empty-state span{font-size:0.95rem;font-weight:600;color:var(--sa-text-secondary)} .placeholder-phone-svg{color:var(--sa-border);animation:phonePulse 2s infinite ease-in-out} @keyframes phonePulse{0%, 100%{transform:scale(1);opacity:0.85} 50%{transform:scale(1.02);opacity:1}} .upgrade-banner-sidebar{padding:12px 16px;margin:8px 0;background:linear-gradient(135deg, rgba(var(--sa-primary-rgb), 0.12), rgba(var(--sa-primary-rgb), 0.04));border:1px dashed rgba(var(--sa-primary-rgb), 0.3);border-radius:var(--sa-radius-lg, 12px);box-sizing:border-box} .upgrade-banner-sidebar .upgrade-banner-content{display:flex;flex-direction:column;gap:4px} .upgrade-banner-sidebar .upgrade-banner-text{font-size:0.8rem;color:var(--sa-text);font-weight:500;line-height:1.3} .upgrade-banner-sidebar .upgrade-banner-link{font-size:0.8rem;color:var(--sa-primary);font-weight:700;text-decoration:underline;cursor:pointer} .desktop-sidebar.collapsed .upgrade-banner-sidebar{display:none} .upgrade-banner-mobile{width:100%;padding:8px 12px;background-color:#064e3b;color:#ffffff !important;display:flex;align-items:center;justify-content:center;font-size:0.85rem;font-weight:500;box-sizing:border-box;z-index:100;transition:opacity 0.3s ease, margin-top 0.3s ease} .upgrade-banner-mobile .upgrade-banner-content{display:flex;align-items:center;justify-content:center;gap:6px;color:#ffffff !important} .upgrade-banner-mobile .upgrade-banner-content span{color:#ffffff !important} .upgrade-banner-mobile .upgrade-banner-link{color:#ffffff !important;font-weight:700;text-decoration:underline;cursor:pointer} .upgrade-banner-mobile.fade-out{opacity:0;margin-top:-40px;pointer-events:none} .result-kofi-view{display:flex;flex-direction:column;height:100%;width:100%;box-sizing:border-box} .result-placeholder-view .result-panel-support-card{margin:16px 24px 24px 24px} .scan-another-footer{display:flex;flex-direction:column;gap:12px} .scan-another-footer .result-panel-support-card{margin:0} .app-drop-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0, 0, 0, 0.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:99999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.3s ease} .app-drop-overlay.active{opacity:1;pointer-events:auto} .app-drop-overlay-box{background:var(--sa-surface);border:3px dashed var(--sa-primary);border-radius:var(--sa-radius-xl);padding:48px 32px;max-width:480px;width:90%;text-align:center;box-shadow:0 20px 40px rgba(0, 0, 0, 0.4);transform:scale(0.9);transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);display:flex;flex-direction:column;align-items:center;gap:16px} .app-drop-overlay.active .app-drop-overlay-box{transform:scale(1)} .app-drop-overlay-box svg.drop-icon{width:64px;height:64px;fill:var(--sa-primary);animation:floatOverlayIcon 2s ease-in-out infinite} @keyframes floatOverlayIcon{0%, 100%{transform:translateY(0)} 50%{transform:translateY(-8px)}} .app-drop-overlay-box h2{font-size:1.5rem;font-weight:700;color:var(--sa-text);margin:0} .app-drop-overlay-box p{font-size:0.95rem;color:var(--sa-text-secondary);line-height:1.5;margin:0} .sidebar-drop-note{display:flex;align-items:flex-start;gap:8px;background-color:var(--sa-surface-elevated);border-left:3px solid var(--sa-primary);padding:10px 14px;border-radius:0 var(--sa-radius-md) var(--sa-radius-md) 0;margin:12px 0 4px 0;font-size:0.8rem;line-height:1.4;color:var(--sa-text)} .sidebar-drop-note-icon{font-size:0.95rem;flex-shrink:0} .sidebar-drop-note-text{font-weight:500} .sidebar-privacy-card{margin-bottom:24px !important}