:root{color-scheme:light;--bg: #f7fbff;--paper: #ffffff;--paper-soft: #f3f9fc;--ink: #213f4a;--muted: #6b8490;--line: #c9e4ed;--line-strong: #87c8dc;--accent: #2a8fb8;--accent-deep: #1f6f8c;--accent-soft: #dff3f8;--green: #2f9f83;--warm: #f2b36d;--error: #b84646;--shadow: 0 18px 42px rgba(60, 106, 126, .14);--radius: 8px;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}html,body,#root{width:100%;min-width:0;min-height:100%;height:100%;margin:0}body{background:var(--bg);color:var(--ink);overflow:hidden}button,input,select{font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}.app-shell{height:100dvh;min-height:100dvh;display:grid;grid-template-rows:auto 1fr;background:linear-gradient(180deg,#daf0f7b8,#f7fbff00 270px),var(--bg);padding:max(14px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));gap:14px}.topbar{min-height:68px;display:flex;align-items:center;gap:12px;padding:10px 12px;background:#ffffffe6;border:1px solid rgba(155,207,224,.66);border-radius:var(--radius);box-shadow:0 10px 26px #57869a1f;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand-block{display:flex;align-items:center;gap:10px;min-width:146px}.brand-icon{width:38px;height:38px;border-radius:var(--radius);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep)}.brand-title{font-size:17px;line-height:1.1;font-weight:800}.brand-subtitle{margin-top:3px;color:var(--muted);font-size:12px;line-height:1;font-weight:650}.select-shell{height:42px;min-width:224px;display:flex;align-items:center;gap:8px;padding:0 11px;color:var(--muted);background:var(--paper-soft);border:1px solid var(--line);border-radius:var(--radius);font-size:13px;font-weight:750;white-space:nowrap}.select-shell select{min-width:0;flex:1;border:0;appearance:none;color:var(--ink);background:transparent;outline:none;font-size:14px;font-weight:750}.toolbar-spacer{flex:1}.primary-button,.toggle-button,.icon-button,.mode-switch button{min-height:42px;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:800;transition:transform .16s ease,background-color .16s ease,border-color .16s ease,color .16s ease}.primary-button:active,.toggle-button:active,.icon-button:active,.mode-switch button:active{transform:translateY(1px)}.primary-button{padding:0 18px;color:#fff;background:var(--accent);box-shadow:0 9px 18px #2a8fb833}.primary-button:hover:not(:disabled){background:var(--accent-deep)}.full-width{width:100%}.toggle-button{padding:0 13px;color:var(--accent-deep);background:#fff;border:1px solid var(--line-strong)}.toggle-button.is-on{color:#fff;background:var(--accent);border-color:var(--accent)}.stepper{height:42px;display:inline-flex;align-items:center;gap:8px;padding:0 7px;color:var(--ink);background:var(--paper-soft);border:1px solid var(--line);border-radius:var(--radius);font-size:14px;font-weight:850;white-space:nowrap}.icon-button{width:36px;min-height:34px;color:var(--accent-deep);background:#fff;border:1px solid rgba(135,200,220,.74)}.random-button{width:auto;padding:0 10px}.icon-button.quiet{background:transparent;border-color:transparent;color:var(--muted)}.mode-switch{height:42px;display:inline-flex;align-items:center;gap:3px;padding:3px;background:#e8f5f9;border:1px solid var(--line);border-radius:var(--radius)}.mode-switch button{min-height:34px;padding:0 13px;color:var(--muted);background:transparent}.mode-switch button.active{color:var(--accent-deep);background:#fff;box-shadow:0 6px 12px #366e841f}.display-grid{height:100%;min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(210px,250px) 1fr;gap:16px}.sentence-rail{min-height:0;display:grid;grid-template-rows:auto 1fr;gap:10px}.rail-search{height:46px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#ffffffeb;border:1px solid var(--line);border-radius:var(--radius);color:var(--muted)}.rail-search input{min-width:0;width:100%;border:0;outline:none;background:transparent;color:var(--ink);font-size:14px;font-weight:650}.sentence-list{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-right:3px}.sentence-row{min-height:48px;width:100%;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:8px;padding:9px;color:var(--ink);text-align:left;background:#ffffffdb;border:1px solid rgba(201,228,237,.82);border-radius:var(--radius)}.sentence-row.active{background:#e5f6fb;border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}.sentence-order{width:30px;height:30px;display:grid;place-items:center;color:var(--accent-deep);background:#eef9fc;border:1px solid var(--line);border-radius:7px;font-size:12px;font-weight:900}.sentence-preview{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:750}.asset-check{color:var(--green)}.practice-display{height:100%;min-height:0;overflow:hidden;display:grid;grid-template-rows:minmax(190px,.72fr) minmax(360px,1.28fr);gap:16px}.sentence-stage{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(20px,3vw,38px) clamp(92px,10vw,132px);background:var(--paper);border:1px solid rgba(155,207,224,.75);border-radius:var(--radius);box-shadow:var(--shadow)}.sentence-content{min-width:0;width:100%}.sentence-meta{margin-bottom:12px;color:var(--accent-deep);font-size:15px;line-height:1;font-weight:850}.sentence-stage h1{margin:0;color:#173944;font-family:Georgia,Times New Roman,serif;font-size:clamp(50px,6vw,88px);line-height:1.05;font-weight:750;overflow-wrap:anywhere}.stage-nav-button{position:absolute;top:50%;width:clamp(66px,7vw,88px);height:clamp(66px,7vw,88px);display:grid;place-items:center;color:#fff;background:var(--accent);border:1px solid rgba(31,111,140,.2);border-radius:var(--radius);box-shadow:0 14px 26px #2a8fb840;transform:translateY(-50%);transition:transform .16s ease,background-color .16s ease,box-shadow .16s ease}.stage-nav-button.previous{left:clamp(16px,2vw,28px)}.stage-nav-button.next{right:clamp(16px,2vw,28px)}.stage-nav-button:hover:not(:disabled){background:var(--accent-deep);box-shadow:0 16px 30px #1f6f8c4d}.stage-nav-button:active:not(:disabled){transform:translateY(calc(-50% + 1px))}.handwriting-stage{min-height:0;display:grid;place-items:center;overflow:hidden;padding:clamp(18px,2.4vw,30px);background:linear-gradient(#fff,#fff) padding-box,repeating-linear-gradient(0deg,rgba(162,214,230,.16) 0,rgba(162,214,230,.16) 1px,transparent 1px,transparent 52px) border-box;border:1px solid rgba(155,207,224,.85);border-radius:var(--radius);box-shadow:var(--shadow)}.handwriting-stage img{display:block;width:100%;max-width:980px;max-height:100%;object-fit:contain;background:#fff;border-radius:6px}.empty-state,.hidden-state,.missing-state{color:var(--muted);align-content:center;gap:12px;text-align:center;font-size:20px;font-weight:800}.missing-state{background:linear-gradient(90deg,transparent 0 9%,rgba(152,211,229,.32) 9% 10%,transparent 10% 100%),repeating-linear-gradient(to bottom,#fff 0 60px,#cdeaf2 60px 63px,#fff 63px 120px,#cdeaf2 120px 123px,#fff 123px 180px,#8ecddd 180px 187px,#fff 187px 244px,#cdeaf2 244px 247px)}.manage-view{min-height:0;overflow-y:auto;display:grid;align-content:start;gap:16px}.manage-summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.manage-summary h1{margin:0;font-size:30px;line-height:1.1}.manage-summary p{margin:7px 0 0;color:var(--muted);font-size:15px;font-weight:650}.summary-stats{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.summary-stats span{min-height:34px;display:inline-flex;align-items:center;padding:0 11px;color:var(--accent-deep);background:var(--accent-soft);border-radius:7px;font-size:13px;font-weight:850}.manage-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.manage-panel{display:grid;align-content:start;gap:13px;padding:18px;background:#fffffff0;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 28px #48798f1a}.panel-heading{display:flex;align-items:center;gap:9px;color:var(--accent-deep)}.panel-heading h2{margin:0;color:var(--ink);font-size:20px;line-height:1.2}.field-label{display:grid;gap:7px;color:var(--muted);font-size:13px;font-weight:850}.text-input{min-height:44px;width:100%;padding:0 12px;color:var(--ink);background:#fbfdfe;border:1px solid var(--line);border-radius:var(--radius);outline:none;font-size:15px;font-weight:700}.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #2a8fb824}.inline-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.upload-box{min-height:110px;display:grid;place-items:center;gap:8px;padding:16px;color:var(--accent-deep);text-align:center;background:#f4fbfd;border:1px dashed var(--line-strong);border-radius:var(--radius);font-size:14px;font-weight:850}.upload-box input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.sentence-management-panel{display:grid;gap:14px;padding:18px;background:#fffffff0;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 12px 28px #48798f1a}.sentence-add-row{display:grid;grid-template-columns:1fr auto;gap:10px}.sentence-admin-list{max-height:350px;overflow-y:auto;display:grid;gap:8px;padding-right:3px}.sentence-admin-row{min-height:48px;display:grid;grid-template-columns:42px 1fr auto auto;align-items:center;gap:10px;padding:8px 10px;background:#fbfdfe;border:1px solid rgba(201,228,237,.82);border-radius:var(--radius)}.sentence-admin-order{width:32px;height:30px;display:grid;place-items:center;color:var(--accent-deep);background:#eef9fc;border:1px solid var(--line);border-radius:7px;font-size:12px;font-weight:900}.sentence-admin-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:15px;font-weight:780}.sentence-admin-asset{min-width:64px;color:var(--muted);font-size:13px;font-weight:850;text-align:center}.sentence-admin-asset.ready{color:var(--green)}.sentence-delete-button{min-height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;color:var(--error);background:#fff6f6;border:1px solid #f1caca;border-radius:var(--radius);font-size:13px;font-weight:850}.status-message,.app-error{padding:12px 14px;border-radius:var(--radius);font-size:14px;font-weight:800}.status-message.success{color:#176c55;background:#e7f8f2;border:1px solid #b9e8d9}.status-message.error,.app-error{color:var(--error);background:#fff1f1;border:1px solid #f0c6c6}.login-shell,.loading-screen{min-height:100dvh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#daf0f7d1,#f7fbff00 320px),var(--bg)}.login-panel{width:min(420px,100%);display:grid;gap:13px;padding:30px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.login-mark{width:58px;height:58px;display:grid;place-items:center;color:var(--accent-deep);background:var(--accent-soft);border-radius:var(--radius)}.login-panel h1{margin:2px 0 0;font-size:34px;line-height:1.08}.login-panel p{margin:0 0 8px;color:var(--muted);font-size:16px;font-weight:700}.error-text{color:var(--error);font-size:13px;font-weight:800}.loading-screen{gap:12px;color:var(--muted);font-size:16px;font-weight:800}.loading-line{width:160px;height:6px;overflow:hidden;background:var(--accent-soft);border-radius:999px}.loading-line:after{content:"";display:block;width:48%;height:100%;background:var(--accent);border-radius:999px;animation:loading 1.1s ease-in-out infinite}.floating-manage{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:46px;height:46px;display:none;place-items:center;color:#fff;background:var(--accent);border-radius:var(--radius);box-shadow:0 12px 24px #2a8fb842}@keyframes loading{0%{transform:translate(-100%)}to{transform:translate(220%)}}@media(max-width:980px){body{overflow:auto}.app-shell{min-height:100svh}.topbar{flex-wrap:wrap}.toolbar-spacer{display:none}.select-shell{flex:1;min-width:220px}.display-grid{grid-template-columns:1fr}.sentence-rail{order:2;max-height:164px}.sentence-list{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding-bottom:4px}.sentence-row{min-width:230px}.practice-display{grid-template-rows:minmax(168px,auto) minmax(280px,45svh)}.manage-columns,.sentence-add-row,.sentence-admin-row{grid-template-columns:1fr}.sentence-admin-order,.sentence-admin-asset{justify-self:start}.manage-summary{align-items:flex-start;flex-direction:column}.mode-switch{display:none}.floating-manage{display:grid}}@media(max-width:640px){.app-shell{padding:10px;gap:10px}.topbar{gap:9px;padding:9px}.brand-block{width:100%}.stepper{flex:1;justify-content:space-between}.random-button span{display:none}.sentence-stage h1{font-size:42px}.sentence-stage,.handwriting-stage{padding:16px}.sentence-stage{padding:72px 16px 18px}.stage-nav-button{top:16px;width:52px;height:52px;transform:none}.stage-nav-button.previous{left:16px}.stage-nav-button.next{right:16px}.stage-nav-button:active:not(:disabled){transform:translateY(1px)}.manage-summary h1{font-size:25px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}