:root{font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Segoe UI,system-ui,sans-serif;color:#1d1d1f;background:#f5f5f7;font-synthesis:none;text-rendering:optimizeLegibility;font-optical-sizing:auto;--surface: rgb(255 255 255 / .82);--surface-solid: #ffffff;--surface-tint: rgb(248 249 252 / .86);--line: rgb(29 29 31 / .1);--line-strong: rgb(29 29 31 / .18);--muted: #6e6e73;--ink-soft: #424245;--action: #0071e3;--action-hover: #0077ed;--action-pressed: #0068d3;--action-soft: rgb(0 113 227 / .09);--success: #248a3d;--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-in-out: cubic-bezier(.77, 0, .175, 1);--shadow-card: 0 18px 46px rgb(15 23 42 / .08), 0 2px 8px rgb(15 23 42 / .04);--shadow-action: 0 10px 24px rgb(0 113 227 / .22)}*{box-sizing:border-box}html{min-width:320px;min-height:100%;background:#f5f5f7}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at 8% -8%,rgb(0 113 227 / .12),transparent 34rem),radial-gradient(circle at 100% 18%,rgb(147 197 253 / .1),transparent 30rem),#f5f5f7}button,input{font:inherit}button{border:0}.app-shell{position:relative;width:min(880px,100%);min-height:100vh;margin:0 auto;padding:42px 24px 88px}.app-header{position:relative;display:flex;align-items:center;min-height:74px;margin-bottom:22px;padding:0 24px;border:1px solid rgb(255 255 255 / .9);border-radius:24px;background:#ffffffb3;box-shadow:0 14px 34px #0f172a0f;backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}.app-header:after{position:absolute;right:24px;width:52px;height:4px;border-radius:99px;background:linear-gradient(90deg,#0071e3,#5ac8fa);content:"";opacity:.75}.app-header h1{margin:0;color:#1d1d1f;font-size:clamp(28px,4vw,38px);font-weight:760;letter-spacing:-.045em;line-height:1.05}.primary-workflow{position:relative;display:grid;gap:18px}.primary-workflow:before{position:absolute;top:34px;bottom:34px;left:37px;width:1px;background:linear-gradient(180deg,#0071e32e,#0071e308);content:"";pointer-events:none}.panel.workflow-card{position:relative;z-index:1;padding:30px;border:1px solid var(--line);border-radius:26px;background:var(--surface);box-shadow:var(--shadow-card);backdrop-filter:blur(22px) saturate(130%);-webkit-backdrop-filter:blur(22px) saturate(130%);transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),border-color .22s var(--ease-out)}.panel.workflow-card:before{position:absolute;top:30px;left:30px;width:14px;height:14px;border:3px solid var(--surface-solid);border-radius:50%;background:var(--action);box-shadow:0 0 0 1px #0071e338,0 4px 10px #0071e333;content:""}.panel.workflow-card:hover{border-color:#0071e333;box-shadow:0 22px 56px #0f172a1c,0 3px 12px #0f172a0d;transform:translateY(-1px)}.workflow-card h2{margin:0 0 22px;padding-left:28px;color:#1d1d1f;font-size:clamp(19px,2.6vw,22px);font-weight:720;letter-spacing:-.028em;line-height:1.2}.upload-window{display:grid;justify-items:center;gap:12px;min-height:232px;padding:38px 26px;border:1.5px dashed rgb(0 113 227 / .36);border-radius:20px;background:linear-gradient(180deg,#ffffffd6,#f7faffb8),var(--surface-tint);text-align:center;cursor:pointer;transition:border-color .18s var(--ease-out),background-color .18s var(--ease-out),box-shadow .18s var(--ease-out),transform .14s var(--ease-out)}.upload-window input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.upload-window svg{width:38px;height:38px;padding:8px;border-radius:12px;fill:none;stroke:var(--action);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7;background:var(--action-soft)}.upload-window strong{max-width:100%;overflow-wrap:anywhere;color:#1d1d1f;font-size:18px;font-weight:680;letter-spacing:-.015em}.upload-window span{max-width:34em;color:var(--muted);font-size:14px;line-height:1.55}.upload-window.has-file{border-color:#248a3d7a;background:linear-gradient(180deg,#f5fff8eb,#effbf4c7)}.upload-window.has-file svg{stroke:var(--success);background:#248a3d1c}.upload-window:active{transform:scale(.985)}.upload-window:focus-within{outline:3px solid rgb(0 113 227 / .18);outline-offset:4px}.workflow-status{display:flex;align-items:center;min-height:28px;margin:-7px 0 20px;padding-left:28px;color:var(--ink-soft);font-size:16px;line-height:1.5}.workflow-status:before{width:7px;height:7px;flex:0 0 auto;margin-right:10px;border-radius:50%;background:#6e6e738c;content:""}.auto-translation-panel .workflow-status:before{background:var(--action);box-shadow:0 0 0 4px #0071e31a}.output-panel .workflow-status:before{background:var(--success);box-shadow:0 0 0 4px #248a3d1a}.workflow-action{width:100%;min-height:66px;padding:16px 24px;border-radius:16px;color:#fff;background:linear-gradient(180deg,#0a84ff,#0071e3);box-shadow:var(--shadow-action);font-size:18px;font-weight:700;letter-spacing:-.012em;cursor:pointer;transition:transform .14s var(--ease-out),background-color .16s var(--ease-out),box-shadow .18s var(--ease-out),opacity .16s var(--ease-out)}.translation-action{min-height:78px;font-size:21px}.translation-feedback{display:grid;gap:12px;margin-top:22px;padding:18px 20px 20px;border:1px solid rgb(0 113 227 / .12);border-radius:18px;background:linear-gradient(145deg,#fffffff5,#f8faffe0)}.feedback-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.feedback-heading-meta{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:7px}.feedback-eyebrow{margin:0 0 5px;color:var(--action);font-size:10px;font-weight:800;letter-spacing:.14em}.feedback-heading h3{margin:0;color:#1d1d1f;font-size:17px;font-weight:700;letter-spacing:-.02em}.feedback-confirmed{flex:0 0 auto;padding:5px 9px;border-radius:999px;color:var(--success);background:#248a3d1a;font-size:11px;font-weight:700}.feedback-score{min-width:76px;color:var(--ink-soft);font-size:12px;font-variant-numeric:tabular-nums;text-align:right}.feedback-stars{display:flex;align-items:center;gap:4px;min-height:48px}.feedback-star{display:inline-grid;width:42px;height:42px;place-items:center;padding:0;border-radius:12px;color:#c5c8d3;background:transparent;font-size:34px;line-height:1;cursor:pointer;transition:color .16s var(--ease-out),transform .16s var(--ease-out),background-color .16s var(--ease-out)}.feedback-star.is-active{color:#f4b740;text-shadow:0 3px 8px rgb(244 183 64 / .26)}.feedback-star:not(:disabled):hover{color:#f4b740;background:#f4b7401c;transform:translateY(-2px) scale(1.06)}.feedback-star:disabled{cursor:default;opacity:1}.feedback-star:focus-visible{outline:3px solid rgb(0 113 227 / .24);outline-offset:2px}.feedback-instruction{margin:-2px 0 0;color:var(--muted);font-size:12px;line-height:1.45}.feedback-input{width:100%;min-height:84px;padding:12px 13px;resize:vertical;border:1px solid var(--line);border-radius:12px;color:#1d1d1f;background:#ffffffd1;font-size:14px;line-height:1.5}.feedback-input::placeholder{color:var(--muted);opacity:.56}.feedback-input:focus-visible{outline:3px solid rgb(0 113 227 / .18);outline-offset:2px;border-color:#0071e375}.workflow-action:active:not(:disabled){background:linear-gradient(180deg,#0077ed,#0068d3);box-shadow:0 6px 14px #0071e32e;transform:scale(.975)}.workflow-action:focus-visible{outline:3px solid rgb(0 113 227 / .26);outline-offset:4px}.workflow-action:disabled{color:#8d8d92;background:#1d1d1f14;box-shadow:none;cursor:not-allowed}.toast{position:fixed;top:20px;right:20px;z-index:20;max-width:min(430px,calc(100vw - 40px));padding:13px 16px;border:1px solid rgb(0 113 227 / .16);border-radius:15px;color:#1d1d1f;background:#ffffffe0;box-shadow:0 16px 36px #0f172a24;backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);font-size:14px;line-height:1.5}@media(hover:hover)and (pointer:fine){.upload-window:hover{border-color:var(--action);background:linear-gradient(180deg,#fffffff2,#f1f7ffd6),var(--surface-tint);box-shadow:inset 0 0 0 1px #0071e30f}.workflow-action:hover:not(:disabled){background:linear-gradient(180deg,#1a8cff,#0077ed);box-shadow:0 14px 30px #0071e340}}@media(max-width:600px){.app-shell{padding:24px 14px 54px}.app-header{min-height:64px;margin-bottom:18px;padding:0 18px;border-radius:20px}.app-header:after{right:18px;width:42px}.app-header h1{font-size:29px}.primary-workflow{gap:14px}.primary-workflow:before{left:28px;top:28px;bottom:28px}.panel.workflow-card{padding:24px 20px 22px;border-radius:22px}.panel.workflow-card:before{top:25px;left:21px;width:12px;height:12px;border-width:2px}.workflow-card h2{margin-bottom:18px;padding-left:24px;font-size:19px}.upload-window{min-height:206px;padding:30px 18px;border-radius:18px}.workflow-status{padding-left:24px;font-size:15px}.workflow-action,.translation-action{min-height:64px;font-size:17px}.translation-action{min-height:70px;font-size:19px}.translation-feedback{padding:16px;border-radius:16px}.feedback-star{width:38px;height:38px;font-size:30px}.toast{top:12px;right:12px;max-width:calc(100vw - 24px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}.panel.workflow-card:hover{transform:none}}@media(prefers-reduced-transparency:reduce){.app-header,.panel.workflow-card,.toast{background:var(--surface-solid);backdrop-filter:none;-webkit-backdrop-filter:none}}@media(prefers-contrast:more){.app-header,.panel.workflow-card,.upload-window,.workflow-action:disabled{border-color:var(--line-strong)}.workflow-status,.upload-window span{color:#3a3a3c}}
