@import "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=Lexend:wght@300;400;500;600&display=swap";:root{--bg:oklch(97.5% .008 75);--bg-card:oklch(99.5% .003 75);--bg-hover:oklch(95% .018 75);--border:oklch(75% .05 65/.2);--border-glow:oklch(68% .14 52/.35);--accent:oklch(62% .2 50);--accent-dark:oklch(52% .18 50);--accent-2:oklch(84% .14 78);--success:oklch(70% .15 152);--danger:oklch(62% .18 22);--warn:oklch(84% .16 88);--muted:oklch(50% .018 270);--text:oklch(20% .025 270);--text-sub:oklch(52% .022 270);--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;--shadow-sm:0 1px 4px oklch(55% .16 50/.07);--shadow-md:0 4px 20px oklch(55% .16 50/.1);--shadow-lg:0 8px 40px oklch(55% .16 50/.13);--ease-out-quint:cubic-bezier(.22, 1, .36, 1);--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--accent-tint:oklch(62% .2 50/.07);--success-bg:oklch(70% .15 152/.09);--success-border:oklch(70% .15 152/.24);--success-text:oklch(44% .15 152);--danger-bg:oklch(62% .18 22/.1);--danger-border:oklch(62% .18 22/.22);--danger-text:oklch(48% .18 22);--camera-fg:oklch(96% .01 76)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}h1,h2,.header-logo,.scanner-title,.fc-word{font-family:Bricolage Grotesque,system-ui,sans-serif}button{cursor:pointer;border:none;outline:none;font-family:inherit;transition:all .2s}input,textarea,select{font-family:inherit;font-size:16px}button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Lexend,system-ui,sans-serif;overflow:hidden}.shell{background:var(--bg-card);max-width:520px;height:100dvh;box-shadow:var(--shadow-lg);padding-top:env(safe-area-inset-top);flex-direction:column;margin:0 auto;display:flex;position:relative;overflow-x:hidden}.header{border-bottom:1px solid var(--border);background:var(--bg-card);flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 20px 13px;display:flex}.header-logo{letter-spacing:-.7px;color:var(--accent);font-size:1.28rem;font-weight:800}.content{background:var(--bg);flex:1;position:relative;overflow:hidden}.bottom-nav{border-top:1px solid var(--border);padding-bottom:env(safe-area-inset-bottom);background:var(--bg-card);flex-shrink:0;display:flex}.nav-btn{color:var(--muted);letter-spacing:.02em;background:0 0;border-radius:0;flex-direction:column;flex:1;align-items:center;gap:4px;padding:11px 8px 13px;font-size:.75rem;font-weight:500;transition:color .2s;display:flex;position:relative}.nav-btn.active{color:var(--accent);background:0 0}.nav-pill{border-radius:var(--radius-sm);z-index:0;background:oklch(62% .2 50/.1);position:absolute;inset:5px 6px}.web-app{flex-direction:column;min-height:100vh;display:none}@media (width>=768px){body{background:radial-gradient(1200px 700px at 84% -8%, oklch(84% .1 70/.3), transparent 60%), radial-gradient(1000px 600px at -6% 100%, oklch(72% .1 200/.1), transparent 55%), var(--bg);background-attachment:fixed;overflow:auto}.shell{display:none}.web-app{display:flex}.web-topbar{z-index:40;-webkit-backdrop-filter:blur(16px)saturate(1.4);backdrop-filter:blur(16px)saturate(1.4);border-bottom:1px solid var(--border);background:oklch(99.5% .003 75/.82);flex-shrink:0;align-items:center;gap:18px;height:64px;padding:0 24px;display:flex;position:sticky;top:0}.web-brand{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:9px;display:flex}.web-brand-name{letter-spacing:-.7px;color:var(--accent);font-family:Bricolage Grotesque,system-ui,sans-serif;font-size:1.32rem;font-weight:800}.web-tabs{gap:4px;margin-left:28px;display:flex}.web-tab{color:var(--text-sub);border-radius:99px;align-items:center;gap:8px;padding:8px 16px;font-size:.9rem;font-weight:600;display:flex;position:relative}.web-tab:hover{color:var(--text)}.web-tab.on{color:var(--accent)}.web-tab .tab-pill{z-index:0;background:oklch(62% .2 50/.1);border-radius:99px;position:absolute;inset:0}.web-tab>*{z-index:1;position:relative}.web-topbar-spacer{flex:1}.web-avatar{background:var(--accent);color:#fff;cursor:pointer;width:38px;height:38px;box-shadow:var(--shadow-sm);border:none;border-radius:50%;flex-shrink:0;place-items:center;font-size:1rem;font-weight:800;display:grid}.web-avatar:hover{background:var(--accent-dark)}.web-main{flex:1;min-width:0}.web-page{max-width:1080px;margin:0 auto;padding:36px clamp(24px,4vw,60px) 80px}.web-page-wide{max-width:1280px}}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.scanner-page{background:var(--bg);flex-direction:column;flex:1;gap:14px;min-height:100%;padding:20px;display:flex}.scanner-center{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:14px;width:100%;display:flex}.scanner-title{letter-spacing:-.4px;color:var(--text);font-size:1.4rem;font-weight:700}.scanner-sub{color:var(--text-sub);margin-top:3px;font-size:.83rem}.drop-zone{border-radius:var(--radius-lg);aspect-ratio:3/4;cursor:pointer;background:var(--bg-card);width:100%;max-width:420px;max-height:60vh;box-shadow:var(--shadow-sm);border:2px dashed oklch(70% .1 65/.28);flex-direction:column;justify-content:center;align-items:center;gap:12px;transition:border-color .25s,background .25s;display:flex;position:relative;overflow:hidden}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:oklch(62% .2 50/.03)}.drop-zone .preview-img{object-fit:cover;border-radius:calc(var(--radius-lg) - 2px);width:100%;height:100%;position:absolute;inset:0}.drop-zone .preview-overlay{border-radius:calc(var(--radius-lg) - 2px);opacity:0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:oklch(20% .025 270/.35);flex-direction:column;justify-content:center;align-items:center;gap:8px;transition:opacity .2s;display:flex;position:absolute;inset:0}.drop-zone:hover .preview-overlay,.drop-zone .preview-overlay:focus-within{opacity:1}@media (hover:none){.drop-zone .preview-overlay{opacity:1}}.drop-zone .corner{width:22px;height:22px;animation:3.2s ease-in-out infinite corner-breathe;position:absolute}.corner.tl{border-top:2px solid var(--accent);border-left:2px solid var(--accent);border-radius:4px 0 0;animation-delay:0s;top:14px;left:14px}.corner.tr{border-top:2px solid var(--accent);border-right:2px solid var(--accent);border-radius:0 4px 0 0;animation-delay:.8s;top:14px;right:14px}.corner.bl{border-bottom:2px solid var(--accent);border-left:2px solid var(--accent);border-radius:0 0 0 4px;animation-delay:1.6s;bottom:14px;left:14px}.corner.br{border-bottom:2px solid var(--accent);border-right:2px solid var(--accent);border-radius:0 0 4px;animation-delay:2.4s;bottom:14px;right:14px}@keyframes corner-breathe{0%,to{opacity:.6}25%{opacity:1}}.drop-icon{color:var(--accent-2)}.drop-label{color:var(--text-sub);font-size:.88rem;font-weight:500}.drop-hint{color:var(--muted);font-size:.73rem}.loading-box{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:14px;height:100%;padding:40px;display:flex}.spinner{border:3px solid oklch(62% .2 50/.15);border-top-color:var(--accent);border-radius:50%;width:40px;height:40px;animation:.75s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.progress-bar-track{background:oklch(62% .2 50/.1);border-radius:99px;width:180px;height:3px;overflow:hidden}.progress-bar-fill{background:var(--accent);transform-origin:0;border-radius:99px;width:100%;height:100%;animation:5s ease-in-out forwards fill-bar}@keyframes fill-bar{0%{transform:scaleX(0)}to{transform:scaleX(.95)}}.loading-label{color:var(--text-sub);font-size:.83rem;font-weight:500}.scan-btn{border-radius:var(--radius-lg);background:var(--accent);color:#fff;justify-content:center;align-items:center;gap:8px;width:100%;padding:15px;font-size:.93rem;font-weight:600;display:flex;box-shadow:0 4px 18px oklch(55% .18 50/.28),inset 0 1px oklch(100% 0 0/.18)}.scan-btn:hover:not(:disabled){background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 6px 24px oklch(55% .18 50/.4)}.scan-btn:active:not(:disabled){transition-duration:80ms;transform:translateY(0)scale(.97)}.scan-btn:disabled{opacity:.35;cursor:not-allowed}.upload-btn{border-radius:var(--radius-md);background:var(--bg-card);border:1px solid var(--border);width:100%;color:var(--text-sub);box-shadow:var(--shadow-sm);justify-content:center;align-items:center;gap:7px;padding:12px;font-size:.88rem;font-weight:500;display:flex}.upload-btn:hover{border-color:var(--accent);color:var(--text)}.back-btn{background:var(--bg-card);border:1px solid var(--border);color:var(--text);border-radius:var(--radius-sm);width:44px;height:44px;box-shadow:var(--shadow-sm);flex-shrink:0;justify-content:center;align-items:center;display:flex}.back-btn:hover{border-color:var(--accent)}.back-btn:active{transition-duration:80ms;transform:scale(.93)}.camera-tool-btn{color:var(--camera-fg);background:oklch(62% .2 50/.32);border:1px solid oklch(62% .2 50/.4);border-radius:99px;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.fc-page{background:var(--bg);flex-direction:column;gap:10px;padding:20px;display:flex}.fc-header{align-items:center;gap:12px;margin-bottom:4px;display:flex}.fc-header h2{color:var(--text);font-size:1.15rem;font-weight:700}.fc-count{color:var(--text-sub);background:var(--bg-hover);border-radius:99px;margin-left:auto;padding:4px 10px;font-size:.75rem;font-weight:500}.word-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;padding:13px 16px;transition:border-color .2s,background .2s,box-shadow .2s;display:flex}.word-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px oklch(62% .2 50/.15), var(--shadow-sm);background:oklch(62% .2 50/.05)}.word-card:hover{background:var(--bg-hover);box-shadow:var(--shadow-md);transition:border-color .2s,background .2s,box-shadow .2s,transform .2s;transform:translateY(-1px)}.word-card-text h3{color:var(--text);font-size:.97rem;font-weight:600}.word-card-text p{color:var(--text-sub);margin-top:2px;font-size:.78rem}.check-circle{border:1.5px solid var(--border);background:var(--bg);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:21px;height:21px;transition:all .2s;display:flex}.word-card.selected .check-circle{background:var(--accent);border-color:var(--accent)}.study-btn-wrap{background:linear-gradient(transparent, var(--bg) 50%);padding:12px 0 4px;position:sticky;bottom:0}.study-page{background:var(--bg);flex-direction:column;gap:16px;height:100%;padding:20px;display:flex;position:relative}.study-top{justify-content:space-between;align-items:center;display:flex}.card-counter{color:var(--text-sub);font-size:.8rem;font-weight:500}.progress-dots{align-items:center;gap:5px;display:flex}.progress-dots .pdot{background:oklch(62% .2 50/.15);border-radius:50%;width:6px;height:6px;transition:background .3s,transform .3s}.progress-dots .pdot.active{background:var(--accent);animation:dot-pop .35s var(--ease-out-expo);transform:scale(1.3)}@keyframes dot-pop{0%{transform:scale(1)}to{transform:scale(1.3)}}.flashcard-wrap{perspective:1000px;flex:1;align-items:center;display:flex}.flashcard{border-radius:var(--radius-xl);background:var(--bg-card);border:1px solid var(--border);text-align:center;cursor:pointer;width:100%;min-height:268px;box-shadow:var(--shadow-md), inset 0 1px 0 oklch(100% 0 0/.65);background-image:repeating-linear-gradient(#0000 0 31px,oklch(65% .04 75/.07) 31px 32px);flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:44px 28px;transition:box-shadow .2s;display:flex;position:relative}.flashcard.back{background-color:oklch(97% .022 80);background-image:repeating-linear-gradient(#0000 0 31px,oklch(65% .04 75/.07) 31px 32px);border-color:oklch(76% .12 78/.42)}.fc-tag{letter-spacing:.08em;text-transform:uppercase;color:var(--text-sub);background:var(--bg-hover);border-radius:99px;padding:4px 10px;font-size:.68rem;font-weight:600}.fc-word{letter-spacing:-1.5px;color:var(--text);word-break:break-word;font-size:2.8rem;font-weight:800;line-height:1.05}.fc-translation{color:var(--accent);letter-spacing:-.4px;font-size:1.85rem;font-weight:700}.fc-hint{color:var(--muted);font-size:.78rem}.fc-context{color:var(--text-sub);max-width:260px;font-size:.82rem;font-style:italic;line-height:1.5}.empty-state{height:100%;color:var(--text-sub);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:40px;display:flex}.empty-state h3{color:var(--text);font-size:1rem;font-weight:600}.empty-state p{font-size:.83rem}.experimental-container{background:var(--bg);flex-direction:column;gap:20px;padding:20px 18px 40px;display:flex}.section-header{align-items:center;gap:12px;display:flex}.section-header h2{color:var(--text);margin:0;font-size:1.35rem;font-weight:700}.info-card{border-radius:var(--radius-md);color:var(--text-sub);background:oklch(62% .2 50/.07);border:1px solid oklch(62% .2 50/.15);align-items:flex-start;gap:12px;padding:14px 16px;font-size:.9rem;line-height:1.4;display:flex}.info-card p{margin:0}.info-card svg{color:var(--accent);flex-shrink:0;margin-top:2px}.debug-grid{flex-direction:column;gap:16px;display:flex}.debug-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex-direction:column;display:flex;overflow:hidden}.card-header{border-bottom:1px solid var(--border);color:var(--text-sub);background:oklch(62% .2 50/.04);align-items:center;gap:8px;padding:12px 14px;font-size:.87rem;font-weight:600;display:flex}.image-wrapper{aspect-ratio:1;background:var(--bg);justify-content:center;align-items:center;width:100%;display:flex;overflow:hidden}.image-wrapper img{object-fit:contain;max-width:100%;max-height:100%}.image-wrapper.binarized img{image-rendering:pixelated}.card-footer{color:var(--muted);border-top:1px solid var(--border);padding:12px 14px;font-size:.82rem;line-height:1.4}.empty-state svg{color:oklch(62% .2 50/.55);animation:3.5s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}