@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{--bg-primary: #ffffff;--bg-secondary: #fafafa;--bg-tertiary: #f0f0f0;--text-primary: #000000;--text-secondary: #555555;--text-muted: #999999;--accent: #000000;--accent-light: #333333;--border: #e2e2e2;--border-focus: #000000;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-full: 9999px;--shadow-subtle: 0 2px 10px rgba(0, 0, 0, .03);--shadow-medium: 0 4px 20px rgba(0, 0, 0, .08);--transition: all .2s cubic-bezier(.4, 0, .2, 1)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}#root{min-height:100vh;display:flex;flex-direction:column}.container{max-width:500px;margin:0 auto;padding:0 24px;width:100%}h1,h2,h3{font-weight:700;letter-spacing:-.02em}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;transition:var(--transition);border:none;width:100%;text-decoration:none}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-light);transform:translateY(-1px)}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-tertiary)}.input-field{width:100%;padding:16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);font-size:16px;font-family:inherit;transition:var(--transition);outline:none}.input-field:focus{border-color:var(--border-focus);background:var(--bg-primary);box-shadow:0 0 0 4px #0000000d}.card{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-subtle);transition:var(--transition)}.card:hover{box-shadow:var(--shadow-medium)}.animate-fade{animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.text-center{text-align:center}.text-muted{color:var(--text-muted);font-size:14px}.fab{position:fixed;bottom:32px;right:24px;width:64px;height:64px;background:var(--accent);color:#fff;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 25px #0003;cursor:pointer;z-index:1000;transition:var(--transition)}.fab:hover{transform:scale(1.05);box-shadow:0 15px 35px #0000004d}.fab:active{transform:scale(.95)}.app-header{height:72px;background:#fffc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:1000;display:flex;align-items:center}.header-inner{display:flex;justify-content:space-between;align-items:center}.header-logo{display:flex;align-items:center;gap:10px;cursor:pointer}.logo-dot{width:10px;height:10px;background:var(--accent);border-radius:50%}.header-logo h1{font-size:20px;font-weight:800}.header-actions{display:flex;align-items:center;gap:12px}.lang-toggle-btn{background:var(--bg-secondary);border:1px solid var(--border);padding:4px 10px;border-radius:var(--radius-sm);font-size:11px;font-weight:800;cursor:pointer;transition:var(--transition);color:var(--text-primary)}.lang-toggle-btn:hover{background:var(--bg-tertiary)}.icon-btn{background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:8px;border-radius:50%;transition:var(--transition)}.icon-btn:hover{background:var(--bg-secondary)}.app-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:80px;background:var(--bg-primary);border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);z-index:1000}.nav-inner{height:100%;display:flex;justify-content:space-around;align-items:center}.nav-item{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-muted);cursor:pointer;transition:var(--transition);padding:8px 4px;border-radius:var(--radius-md);flex:1;min-width:0}.nav-item .material-symbols-outlined{font-size:24px;font-variation-settings:"FILL" 0,"wght" 500}.nav-item span:not(.material-symbols-outlined){font-size:11px;font-weight:600;letter-spacing:.2px}.nav-item.active{color:var(--accent)}.nav-item.active .material-symbols-outlined{font-variation-settings:"FILL" 1,"wght" 600}.scan-page{position:fixed;inset:72px 0 80px;background:#000;overflow:hidden}.scanner-viewport{width:100%;height:100%}.scanner-viewport video{width:100%;height:100%;object-fit:cover}.scanner-status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-weight:600}.scanner-status.error{color:#f55;background:#000c;padding:12px 24px;border-radius:var(--radius-md)}.scan-overlay{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.scan-frame{width:260px;height:260px;position:relative;border:1px solid rgba(255,255,255,.2)}.scan-corner{position:absolute;width:24px;height:24px;border:3px solid #fff}.top-left{top:-2px;left:-2px;border-right:0;border-bottom:0}.top-right{top:-2px;right:-2px;border-left:0;border-bottom:0}.bottom-left{bottom:-2px;left:-2px;border-right:0;border-top:0}.bottom-right{bottom:-2px;right:-2px;border-left:0;border-top:0}.scan-line{position:absolute;top:0;left:0;right:0;height:2px;background:#fff;box-shadow:0 0 10px #fff;animation:scanMove 2s linear infinite}@keyframes scanMove{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}to{top:100%;opacity:0}}.scan-tip{margin-top:40px;background:#0009;padding:8px 20px;border-radius:var(--radius-full)}.scan-tip p{color:#fff;font-size:13px;font-weight:600}.scan-footer{position:absolute;bottom:24px;left:0;right:0;z-index:20}.whitespace-inspector{width:100%;margin:4px 0;display:block}.inspector-display-text{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;font-weight:600;line-height:2.2;color:var(--text-primary);word-break:break-all;white-space:pre-wrap;display:block!important;text-align:inherit}.normal-char{display:inline!important;letter-spacing:-.01em}.invisible-char-highlight{display:inline-block!important;background:#ff4d4d;color:#fff;padding:0 4px;margin:0 1px;border-radius:3px;position:relative;vertical-align:baseline;min-width:14px;text-align:center;box-shadow:0 0 12px #ff4d4d66;font-family:Roboto Mono,monospace;font-size:14px}.char-label{position:absolute;bottom:-16px;left:50%;transform:translate(-50%);font-size:8px;font-weight:800;color:#ff4d4d;background:#fff;padding:0 2px;border-radius:2px;white-space:nowrap;line-height:1;pointer-events:none;border:1px solid rgba(255,77,77,.2);z-index:5}.inspector-legend{margin-top:18px;border-top:1px dashed var(--border);padding-top:10px;display:block}.char-codes-list{display:flex;flex-wrap:wrap;gap:6px}.char-badge{background:#000;color:#fff;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700}.generate-page{padding-top:32px;padding-bottom:120px}.hero-section h2{font-size:28px;margin-bottom:8px}.main-creation-card{background:var(--bg-primary);padding:8px 0}.type-chips-wrapper{display:flex;gap:8px;overflow-x:auto;padding:8px 0;scrollbar-width:none}.type-chips-wrapper::-webkit-scrollbar{display:none}.type-chip-modern{background:var(--bg-secondary);border:1px solid var(--border);padding:10px 20px;border-radius:var(--radius-full);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:var(--transition)}.type-chip-modern.active{background:var(--accent);color:#fff;border-color:var(--accent)}.error-msg{color:#e53e3e;font-size:13px;font-weight:600;text-align:center}.result-preview-card{text-align:center}.preview-image-box{background:#fff;padding:24px;border-radius:var(--radius-md);margin-bottom:16px;border:1px solid var(--border)}.preview-image-box img{max-width:100%}.preview-meta{margin-bottom:24px;display:flex;flex-direction:column;align-items:center;width:100%}.type-badge{background:var(--bg-tertiary);padding:4px 12px;border-radius:var(--radius-full);font-size:11px;font-weight:700;text-transform:uppercase}.preview-val{margin-top:8px;font-size:20px;word-break:break-all}.preview-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.section-header{display:flex;justify-content:space-between;align-items:center}.text-btn{background:none;border:none;font-size:14px;font-weight:600;color:var(--accent);text-decoration:underline;cursor:pointer}.minimal-history-list{display:flex;flex-direction:column;gap:12px}.minimal-history-item{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--bg-secondary);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition)}.minimal-history-item:hover{background:var(--bg-tertiary)}.item-left{display:flex;align-items:center;gap:16px}.item-left .material-symbols-outlined{font-size:24px;color:var(--text-secondary)}.item-val{font-weight:700;font-size:15px;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-meta{font-size:11px;font-weight:600;color:var(--text-muted)}.item-left div{display:flex;flex-direction:column;align-items:flex-start;width:100%}.arrow{color:var(--text-muted)}.test-page{padding-top:32px;padding-bottom:120px}.history-page-header{display:flex;justify-content:space-between;align-items:center}.clear-link{background:none;border:none;color:#e53e3e;font-size:14px;font-weight:600;cursor:pointer;text-decoration:underline}.history-card{padding:16px;display:flex;flex-direction:column}.history-card-top{display:flex;align-items:center;gap:16px}.type-icon-box{width:44px;height:44px;background:var(--bg-secondary);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-primary)}.history-main-info{flex:1;overflow:hidden}.history-value{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-sub{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase}.history-card-actions{display:flex;justify-content:flex-end}.mini-btn{background:var(--bg-secondary);border:1px solid var(--border);padding:6px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}.mini-btn:hover{background:var(--bg-tertiary)}.mini-btn .material-symbols-outlined{font-size:18px}.empty-state{text-align:center;padding:60px 0}.emoji{font-size:64px;color:var(--border);margin-bottom:16px}.compare-page{padding-top:24px;padding-bottom:120px}.compare-page h2{font-size:24px;margin-bottom:4px}.compare-page .text-secondary{font-size:14px;color:var(--text-secondary)}.section{margin-bottom:24px}.section-title{font-size:18px;font-weight:700;margin-bottom:16px;display:flex;align-items:center;gap:8px}.glass-card{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-subtle)}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius-md);padding:40px 20px;text-align:center;cursor:pointer;transition:var(--transition);background:var(--bg-secondary)}.drop-zone:hover{border-color:var(--accent);background:var(--bg-tertiary)}.drop-zone-icon{font-size:40px;margin-bottom:12px}.drop-zone-text{font-weight:600;font-size:15px}.drop-zone-hint{font-size:13px;color:var(--text-muted);margin-top:8px}.recognition-info{display:flex;flex-direction:column;gap:16px}.info-item{display:flex;flex-direction:column;gap:8px}.info-label{font-size:13px;font-weight:700;color:var(--text-primary)}.recognition-info .input,.recognition-info .select{width:100%;padding:12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-secondary);font-family:inherit;font-size:15px}.confidence-badge{align-self:flex-start;padding:4px 12px;border-radius:var(--radius-full);font-size:13px;font-weight:700}.confidence-badge.high{background:#e6fffa;color:#008767}.confidence-badge.medium{background:#fffaf0;color:#975a16}.confidence-badge.low{background:#fff5f5;color:#c53030}.recommendation-badge{margin-top:8px;font-size:13px;color:#4a5568;background:#f7fafc;padding:8px 12px;border-radius:var(--radius-sm);border-left:3px solid var(--accent)}.comparison-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.compare-mode-toggle{display:flex;background:var(--bg-secondary);padding:4px;border-radius:var(--radius-md);border:1px solid var(--border)}.mode-btn{padding:8px 16px;border-radius:var(--radius-sm);border:none;font-size:13px;font-weight:600;cursor:pointer;background:transparent;transition:var(--transition)}.mode-btn.active{background:var(--bg-primary);box-shadow:var(--shadow-subtle)}.size-controls{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;margin-bottom:24px}.size-control-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.slider-with-buttons{display:flex;align-items:center;gap:12px}.pos-btn-grid{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:8px}.pos-row{display:flex;gap:4px}.pos-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm)}.overlay-wrapper{position:relative;width:100%;min-height:200px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;display:flex;align-items:center;justify-content:center}.overlay-layer{display:flex;align-items:center;justify-content:center;padding:20px}.overlay-layer.original{position:relative;z-index:10}.overlay-layer.generated{position:absolute;inset:0;z-index:20;pointer-events:none}.overlay-layer img{max-width:100%;max-height:250px}.comparison-container{display:flex;flex-direction:column;gap:24px}.comparison-item{text-align:center}.comparison-item h4{font-size:14px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;gap:4px}.image-wrapper{background:#fff;padding:20px;border:1px solid var(--border);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center}.barcode-text{margin-top:12px;font-family:Roboto Mono,monospace;font-size:14px;font-weight:700}.processing-status{text-align:center;padding:40px 0}.spinner{width:40px;height:40px;border:3px solid var(--bg-tertiary);border-top-color:var(--accent);border-radius:50%;animation:spin 1s infinite linear;margin:0 auto 16px}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:768px){.comparison-container{flex-direction:row;align-items:center}.comparison-item{flex:1}}.app{display:flex;flex-direction:column;min-height:100vh}.main-content{flex:1;width:100%;padding-bottom:20px}