:root{--bg-top: #f5e7cf;--bg-bottom: #e7d7bb;--frame: rgba(255, 250, 242, .9);--panel: rgba(255, 252, 246, .9);--panel-strong: #fffdf8;--line: rgba(28, 53, 48, .12);--line-strong: rgba(28, 53, 48, .2);--text: #1c2b29;--muted: #6c7772;--deep: #193f37;--accent: #2d6d5d;--accent-soft: rgba(45, 109, 93, .1);--sand: #efe0c1;--gold: #a56d26;--warning: #9a6032;--danger: #ad473f;--success: #1c7252;--shadow: 0 28px 80px rgba(25, 63, 55, .14);--radius-xl: 28px;--radius-lg: 22px;--radius-md: 16px;--radius-sm: 12px;--font-sans: "Avenir Next", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", sans-serif;--font-display: "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;color:var(--text);font:16px/1.55 var(--font-sans);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#app{height:100%;min-height:100%}body{margin:0;overflow:hidden;overscroll-behavior:none;background:radial-gradient(circle at top left,rgba(165,109,38,.18),transparent 30%),radial-gradient(circle at top right,rgba(45,109,93,.16),transparent 28%),linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%)}button,input,select,textarea{font:inherit}button{border:0;cursor:pointer;color:inherit}input,select,textarea{border:1px solid var(--line);color:var(--text)}a{color:inherit}#app{height:100svh;min-height:100svh}.app-shell{height:100%;min-height:100%;display:flex;justify-content:center;align-items:stretch;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}.app-frame{position:relative;width:min(100%,450px);height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.38);border-radius:34px;background:linear-gradient(180deg,#ffffff38,#ffffff0f),var(--frame);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.overlay-stack{pointer-events:none;position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;right:14px;z-index:30;display:flex;flex-direction:column;gap:8px}.toast,.busy-indicator{margin:0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:#fffcf6eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:auto}.toast.success,.status-banner.success{color:var(--success);border-color:#1c72522e;background:#1c725214}.toast.warning,.status-banner.warning{color:var(--warning);border-color:#9a603233;background:#9a603214}.toast.error,.status-banner.error{color:var(--danger);border-color:#ad473f33;background:#ad473f14}.busy-indicator{align-self:flex-end;width:fit-content;color:var(--deep)}.screen-shell{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch;scroll-padding-top:24px}.screen-shell::-webkit-scrollbar{width:0}.screen-content{display:flex;flex-direction:column;gap:16px;min-height:100%;padding:calc(20px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom))}.center-shell{justify-content:center;align-items:center;text-align:center}.screen-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.screen-header h1,.study-card h2,.section-head h2,.quick-card strong,.mode-card strong,.stack-card strong,.form-shell h2{margin:0}.screen-header h1{font:700 32px/1 var(--font-display);letter-spacing:-.03em;color:var(--deep)}.home-header h1{font-size:40px}.screen-copy,.study-copy,.detail-block p,.detail-row p,.quick-card span,.mode-card span,.stack-card p,.stack-card span,.stack-card em,.hero-summary span,.form-field,.text-button,.study-headline p{color:var(--muted)}.overline{margin:0 0 6px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}.back-button,.text-button{padding:0;background:transparent}.hero-summary,.mode-grid,.quick-grid,.filter-row{display:grid;gap:12px}.hero-summary,.hero-summary.compact{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-summary>div,.mode-card,.quick-card,.study-card,.section-block,.stack-card,.form-shell,.detail-block,.detail-row,.option-button{border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);box-shadow:0 12px 32px #193f370f}.hero-summary>div{padding:12px}.hero-summary strong{display:block;margin-top:8px;font-size:clamp(26px,7vw,34px);line-height:1;color:var(--deep)}.section-block,.study-card,.form-shell{padding:16px}.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.section-head h2{font-size:18px;color:var(--deep)}.mode-grid,.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-card,.quick-card,.stack-card{width:100%;padding:14px;text-align:left}.mode-card,.quick-card,.button-card,.option-button,.mode-strip button,.tab-strip button,.bottom-nav button,.inline-button,.upload-button{transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}.mode-card:hover,.quick-card:hover,.button-card:hover,.option-button:hover,.mode-strip button:hover,.tab-strip button:hover,.bottom-nav button:hover,.solid-button:hover,.soft-button:hover,.ghost-button:hover,.upload-button:hover{transform:translateY(-1px)}.mode-card strong,.quick-card strong,.stack-card strong,.study-card h2,.detail-block strong,.detail-row strong{color:var(--deep)}.mode-card em,.stack-card em{display:block;margin-top:6px;font-style:normal}.mode-card-label{margin:0 0 6px;font-size:14px;color:var(--muted)}.static-card{cursor:default}.mode-strip,.tab-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px}.mode-strip::-webkit-scrollbar,.tab-strip::-webkit-scrollbar{width:0;height:0}.mode-strip button,.tab-strip button{flex:0 0 auto;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:#fffaf2b8;color:var(--muted)}.mode-strip .is-active,.tab-strip .is-active,.bottom-nav .is-active{background:var(--deep);border-color:transparent;color:#fff8ef}.study-summary{display:flex;flex-wrap:wrap;gap:8px}.study-summary span,.pill{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--panel-strong);color:var(--muted);font-size:13px}.pill.word{background:#a56d261f;color:#8c5a1f}.pill.phrase{background:#2d6d5d1f;color:var(--accent)}.status-banner{padding:12px 14px;border-radius:14px;border:1px solid var(--line)}.feedback-overlay{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:28px;background:#141e1c3d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.feedback-panel{width:min(100%,320px);padding:28px 22px;border-radius:26px;border:1px solid var(--line);background:var(--panel-strong);box-shadow:0 22px 60px #193f372e;text-align:center}.feedback-panel h3{margin:0;font:700 34px/1 var(--font-display);color:var(--deep)}.feedback-panel p{margin:12px 0 0;color:var(--muted)}.feedback-mark{width:76px;height:76px;margin:0 auto 16px;border-radius:999px;display:grid;place-items:center;font:700 22px/1 var(--font-sans)}.feedback-overlay.success .feedback-mark{background:#1c72521f;color:var(--success)}.feedback-overlay.warning .feedback-mark,.feedback-overlay.error .feedback-mark{background:#ad473f1f;color:var(--danger)}.study-headline{margin-bottom:14px}.study-screen .study-card{min-height:52svh}.progress-shell{display:flex;flex-direction:column;gap:8px}.progress-shell p{margin:0;font-size:13px;color:var(--muted)}.progress-track{height:10px;overflow:hidden;border-radius:999px;background:#193f3714}.progress-fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#5e9d8d)}.study-word,.study-sentence{margin:0;font:700 clamp(32px,7vw,42px) / 1.08 var(--font-display);letter-spacing:-.03em;color:var(--deep);text-align:center}.study-sentence{font-size:clamp(26px,6vw,34px)}.center-copy{text-align:center}.focus-card{display:flex;flex-direction:column;justify-content:center;gap:16px}.focus-card .study-copy{margin:0}.study-footer{margin-top:auto;padding-bottom:4px}.detail-list,.stack-list,.option-list{display:flex;flex-direction:column;gap:12px}.detail-block,.detail-row{padding:14px}.detail-block.warning{border-color:#9a60323d;background:#9a603214}.detail-row p,.detail-block p{margin:8px 0 0}.option-button{display:flex;flex-direction:column;gap:6px;padding:16px;text-align:left}.option-button span{font-size:12px;color:var(--gold)}.primary-actions{display:flex;flex-direction:column;gap:10px}.split-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.solid-button,.soft-button,.ghost-button,.upload-button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 16px;border-radius:14px}.solid-button{background:var(--deep);color:#fff8ef}.soft-button{background:var(--accent-soft);color:var(--accent)}.ghost-button{background:#193f370f;color:var(--muted)}.ghost-button.danger{color:var(--danger)}.inline-button{min-width:90px}.filter-shell,.strategy-block{display:flex;flex-direction:column;gap:12px}.filter-shell input,.filter-row select,.form-field input,.form-field select,.form-field textarea{width:100%;border-radius:14px;padding:12px 14px;background:#fffcf6f5}.filter-row{grid-template-columns:repeat(2,minmax(0,1fr))}.form-shell{gap:12px}.form-field{display:flex;flex-direction:column;gap:8px}.form-field textarea{min-height:94px;resize:vertical}.form-field select:disabled{opacity:.6}.button-card{background:var(--panel)}.item-topline,.deck-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.upload-button{position:relative;overflow:hidden;background:#a56d261f;color:#8c5a1f}.upload-button input{position:absolute;inset:0;opacity:0;cursor:pointer}.success-card{background:linear-gradient(135deg,#2d6d5d14,#a56d261f),var(--panel)}.bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;padding:12px 14px calc(14px + env(safe-area-inset-bottom));border-top:1px solid rgba(25,63,55,.08);background:#fffaf2f5;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.bottom-nav button{min-height:46px;border-radius:16px;background:#193f370d;color:var(--muted)}@media(max-width:420px){.app-shell{padding:0}.app-frame{width:100%;height:100svh;border-radius:0;border-left:0;border-right:0}.screen-content{padding:calc(18px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom))}.filter-row,.split-actions{grid-template-columns:1fr}.screen-header h1{font-size:30px}.study-screen .study-card{min-height:0}}@media(max-width:360px){.hero-summary,.hero-summary.compact,.mode-grid,.quick-grid{grid-template-columns:1fr}}