@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans:wght@300;400;500;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap");:root{--bg:#07080F;--bg-1:#0D0E18;--bg-2:#12141F;--bg-3:#1A1C2A;--surface:rgba(255,255,255,0.042);--surface-high:rgba(255,255,255,0.072);--border:rgba(255,255,255,0.075);--border-hi:rgba(255,255,255,0.14);--text-0:#FFFFFF;--text-1:rgba(255,255,255,0.86);--text-2:rgba(255,255,255,0.52);--text-3:rgba(255,255,255,0.28);--accent:#0A84FF;--accent-dim:rgba(10,132,255,0.12);--accent-glow:rgba(10,132,255,0.28);--vi:#FF6B35;--vi-dim:rgba(255,107,53,0.1);--en:#30D158;--en-dim:rgba(48,209,88,0.1);--warn:#FF9F0A;--ok:#30D158;--err:#FF453A;--r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-2xl:36px;--shadow-1:0 1px 3px rgba(0,0,0,0.3),0 1px 2px rgba(0,0,0,0.2);--shadow-2:0 4px 16px rgba(0,0,0,0.4),0 1px 4px rgba(0,0,0,0.2);--shadow-3:0 12px 40px rgba(0,0,0,0.55),0 4px 12px rgba(0,0,0,0.3);--spring:cubic-bezier(0.34,1.56,0.64,1);--ease:cubic-bezier(0.4,0,0.2,1);--fast:140ms;--mid:220ms;--slow:380ms;--font-ui:"Inter",-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;--font-doc:"Noto Sans","Noto Sans SC",system-ui,sans-serif}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{height:100%;font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:var(--font-ui);background:var(--bg);color:var(--text-1);min-height:100vh;line-height:1.5;overflow-x:hidden}a{text-decoration:none;color:inherit}button{font-family:inherit}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:99px}.app{display:flex;flex-direction:column;min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:0 32px;width:100%}.material{background:var(--surface);border:1px solid var(--border);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%)}.material--hi{background:var(--surface-high);border-color:var(--border-hi)}.header{position:-webkit-sticky;position:sticky;top:0;z-index:100;background:rgba(7,8,15,.82);backdrop-filter:blur(32px) saturate(180%);-webkit-backdrop-filter:blur(32px) saturate(180%);border-bottom:1px solid var(--border);height:52px}.header,.header__inner{display:flex;align-items:center}.header__inner{justify-content:space-between;height:100%}.logo{gap:9px}.logo,.logo__mark{display:flex;align-items:center}.logo__mark{width:28px;height:28px;background:linear-gradient(145deg,#0A84FF,#5AC8FA);border-radius:7px;justify-content:center;font-size:14px;box-shadow:0 2px 10px rgba(10,132,255,.4);flex-shrink:0}.logo__name{font-size:15px;font-weight:600;letter-spacing:-.3px;color:var(--text-0)}.logo__ver{font-size:10px;font-weight:500;letter-spacing:.04em;color:var(--text-3);margin-top:1px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:500;padding:7px 14px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;transition:all var(--fast) var(--ease);letter-spacing:-.1px;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:none;position:relative}.btn:active{transform:scale(.97)}.btn--primary{background:var(--accent);color:#fff;border-color:rgba(255,255,255,.15);box-shadow:0 1px 3px rgba(10,132,255,.35),inset 0 1px 0 rgba(255,255,255,.12)}.btn--primary:hover{background:#1A8FFF;box-shadow:0 4px 16px rgba(10,132,255,.4)}.btn--ghost{background:var(--surface);border-color:var(--border);color:var(--text-2)}.btn--ghost:hover{background:var(--surface-high);border-color:var(--border-hi);color:var(--text-1)}.btn--danger{background:rgba(255,69,58,.1);border-color:rgba(255,69,58,.2);color:var(--err)}.btn--danger:hover{background:rgba(255,69,58,.18)}.btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.btn--lg{font-size:15px;font-weight:600;padding:11px 24px;border-radius:var(--r-md);letter-spacing:-.2px}.hero{padding:80px 0 64px;text-align:center}.hero__label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:28px}.hero__h1{font-size:clamp(40px,6vw,64px);font-weight:700;letter-spacing:-.04em;line-height:1.05;color:var(--text-0);margin-bottom:20px}.hero__h1 em{font-style:normal;background:linear-gradient(90deg,#0A84FF,#5AC8FA);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero__sub{font-size:17px;font-weight:400;color:var(--text-2);max-width:520px;margin:0 auto 48px;line-height:1.65;letter-spacing:-.1px}.upload-zone{position:relative;border:1px solid var(--border);border-radius:var(--r-xl);padding:72px 40px;text-align:center;cursor:pointer;background:var(--surface);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);transition:all var(--mid) var(--ease);box-shadow:var(--shadow-1);overflow:hidden}.upload-zone:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 60% 40% at 50% 0,rgba(10,132,255,.06) 0,transparent 70%);pointer-events:none}.upload-zone:hover{border-color:rgba(10,132,255,.4);background:rgba(10,132,255,.04);box-shadow:var(--shadow-2),0 0 0 4px rgba(10,132,255,.06);transform:translateY(-1px)}.upload-zone--drag{border-color:var(--accent);background:var(--accent-dim);box-shadow:var(--shadow-2),0 0 0 4px rgba(10,132,255,.1)}.upload-zone__input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.upload-zone__icon{width:56px;height:56px;background:linear-gradient(145deg,rgba(10,132,255,.15),rgba(90,200,250,.1));border:1px solid rgba(10,132,255,.2);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 20px;transition:transform var(--mid) var(--spring)}.upload-zone:hover .upload-zone__icon{transform:translateY(-3px) scale(1.04)}.upload-zone__title{font-size:19px;font-weight:600;color:var(--text-0);letter-spacing:-.3px;margin-bottom:8px}.upload-zone__sub{font-size:13px;color:var(--text-2);margin-bottom:24px;line-height:1.5}.upload-zone__badges{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.badge{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-xs);background:var(--surface-high);border:1px solid var(--border-hi);color:var(--text-3)}.steps{padding:80px 0;border-top:1px solid var(--border)}.steps__label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);text-align:center;margin-bottom:48px}.steps__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:1px;gap:1px;background:var(--border);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border)}.step-card{background:var(--bg-1);padding:32px 28px;position:relative;transition:background var(--fast) var(--ease)}.step-card:hover{background:var(--bg-2)}.step-num{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text-3);margin-bottom:20px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.step-icon{font-size:22px;margin-bottom:14px;display:block}.step-title{font-size:15px;font-weight:600;color:var(--text-0);letter-spacing:-.2px;margin-bottom:8px}.step-desc{font-size:13px;color:var(--text-2);line-height:1.6}.preview-strip{padding:0 0 96px}.preview-card{border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);background:var(--bg-1)}.preview-card__header{display:flex;gap:6px;padding:14px 20px;border-bottom:1px solid var(--border);align-items:center}.preview-card__dot{width:10px;height:10px;border-radius:50%}.preview-card__title{font-size:12px;font-weight:500;color:var(--text-3);margin-left:6px;letter-spacing:.02em}.preview-card__body{display:grid;grid-template-columns:1fr 1px 1fr}.preview-cell{padding:32px 28px}.preview-cell__lang{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px}.preview-cell__lang--vi{color:var(--vi)}.preview-cell__lang--zh{color:var(--accent)}.preview-cell__text{font-family:var(--font-doc);font-size:15px;line-height:1.75;color:var(--text-1);letter-spacing:.01em}.lang-sel{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px;gap:2px}.lang-opt{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:6px 14px;border-radius:8px;border:none;cursor:pointer;background:transparent;color:var(--text-2);font-family:inherit;transition:all var(--fast) var(--ease);letter-spacing:-.1px}.lang-opt--active{background:var(--bg-3);color:var(--text-0);border:1px solid var(--border-hi);box-shadow:var(--shadow-1)}.lang-opt:hover:not(.lang-opt--active){color:var(--text-1)}.workspace{display:flex;flex-direction:column;height:calc(100vh - 52px);overflow:hidden}.toolbar{justify-content:space-between;padding:10px 24px;border-bottom:1px solid var(--border);gap:12px;flex-shrink:0;flex-wrap:wrap;background:rgba(7,8,15,.6);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.toolbar,.toolbar__file{display:flex;align-items:center}.toolbar__file{gap:10px;min-width:0;flex:1 1}.file-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;background:var(--surface-high);border:1px solid var(--border)}.file-name{font-size:13px;font-weight:500;color:var(--text-0);letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-meta{font-size:11px;color:var(--text-3);margin-top:1px}.toolbar__actions{display:flex;gap:6px;align-items:center;flex-shrink:0}.split{display:grid;grid-template-columns:1fr 1px 1fr;flex:1 1;min-height:0;overflow:hidden}.split__divider{background:var(--border)}.pane{display:flex;flex-direction:column;min-height:0;overflow:hidden}.pane__header{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid var(--border);flex-shrink:0;background:rgba(13,14,24,.5)}.pane__tag{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}.pane__tag--vi{color:var(--vi)}.pane__tag--en{color:var(--en)}.pane__count{font-size:11px;color:var(--text-3)}.pane__scroll{flex:1 1;overflow-y:auto;padding:8px 0}.para{display:flex;gap:12px;padding:11px 20px;border-left:2px solid transparent;cursor:pointer;transition:background var(--fast) var(--ease),border-color var(--fast);position:relative}.para:hover{background:var(--surface)}.para--active{background:var(--accent-dim);border-left-color:var(--accent)}.para--done{border-left-color:rgba(48,209,88,.3)}.para--working{background:rgba(255,159,10,.06);border-left-color:var(--warn)}.para__n{font-size:10px;font-weight:600;color:var(--text-3);min-width:22px;padding-top:2px;-webkit-user-select:none;-moz-user-select:none;user-select:none;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.para__text{font-family:var(--font-doc);font-size:14px;line-height:1.75;color:var(--text-1);flex:1 1}.para__placeholder{color:var(--text-3);font-style:italic}.para__copy{opacity:0;position:absolute;top:10px;right:14px;font-size:11px;font-weight:500;padding:3px 8px;border-radius:var(--r-xs);background:var(--bg-3);border:1px solid var(--border-hi);color:var(--text-2);cursor:pointer;font-family:inherit;transition:opacity var(--fast)}.para:hover .para__copy{opacity:1}.progress{height:2px;background:var(--border);overflow:hidden;flex-shrink:0}.progress__bar{height:100%;background:linear-gradient(90deg,var(--accent),#5AC8FA);transition:width var(--mid) var(--ease)}.progress__bar--run{width:30%;animation:run 1.3s ease-in-out infinite}@keyframes run{0%{transform:translateX(-100%)}to{transform:translateX(500%)}}.status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px}.status--ok{background:rgba(48,209,88,.1);color:var(--ok);border:1px solid rgba(48,209,88,.2)}.status--run{background:rgba(255,159,10,.1);color:var(--warn);border:1px solid rgba(255,159,10,.2)}.status--err{background:rgba(255,69,58,.1);color:var(--err);border:1px solid rgba(255,69,58,.2)}.dot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:blink 1.2s ease infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}.skel{display:inline-block;border-radius:4px;background:linear-gradient(90deg,var(--surface) 25%,var(--surface-high) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.errbar{display:flex;align-items:center;gap:10px;padding:10px 24px;background:rgba(255,69,58,.08);border-bottom:1px solid rgba(255,69,58,.15);font-size:13px;color:var(--err);flex-shrink:0}.errbar__close{margin-left:auto;background:none;border:none;color:inherit;cursor:pointer;font-size:14px;opacity:.6}.errbar__close:hover{opacity:1}.export{display:flex;gap:6px}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:10px;color:var(--text-3);font-size:13px;text-align:center;padding:40px}.empty__icon{font-size:28px;opacity:.4;margin-bottom:4px}@keyframes fadeUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.anim-up{animation:fadeUp var(--slow) var(--ease) both}.anim-up-1{animation-delay:60ms}.anim-up-2{animation-delay:.12s}.anim-up-3{animation-delay:.18s}@media (max-width:880px){.steps__grid{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr;grid-template-rows:1fr 1px 1fr}.split__divider{height:1px}.container{padding:0 16px}.hero__h1{font-size:36px}.hero{padding:56px 0 40px}.toolbar{gap:8px;padding:8px 16px}}@media (max-width:540px){.preview-card__body,.steps__grid{grid-template-columns:1fr}.preview-card__body{grid-template-rows:auto 1px auto}}.site-footer{margin-top:96px;padding:48px 0 56px;border-top:1px solid var(--border)}.site-footer__label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:28px}.about{display:grid;grid-template-columns:150px minmax(0,1fr);grid-gap:16px 32px;gap:16px 32px;margin:0;max-width:820px}.about dt{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}.about dd{margin:0;font-size:13px;line-height:1.6;color:var(--text-1)}.about a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-dim)}.about a:hover{border-bottom-color:var(--accent)}.site-footer__note{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);font-size:12px;color:var(--text-3)}@media (max-width:640px){.about{grid-template-columns:1fr;gap:4px 0}.about dd{margin-bottom:14px}}