:root{--background:#fbf9f1;--surface-card:#fff;--surface-container:#efeee5;--surface-container-low:#f5f4eb;--surface-container-high:#eae8e0;--on-surface:#1b1c17;--on-surface-variant:#3e4947;--outline:#6e7977;--outline-variant:#bdc9c6;--border-subtle:#f5f5f4;--primary:#0f766e;--primary-deep:#005c55;--on-primary:#fff;--inverse-primary:#80d5cb;--error:#ba1a1a;--error-container:#ffdad6;--status-info:#475266;--status-success:#0f766e;--shadow-card:0 4px 12px #0f766e0d;--shadow-float:0 8px 24px #00000014;--shadow-press:inset 0 2px 6px #1b1c1729;--radius:.5rem;--radius-md:.75rem;--radius-lg:1rem;--radius-xl:1.5rem;--radius-full:9999px;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--card-padding:20px;--safe-margin:16px;--font-content:"Source Serif 4", "Songti SC", "Noto Serif SC", serif;--font-ui:"Hanken Grotesk", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;--ink:var(--on-surface);--muted:var(--on-surface-variant);--paper:var(--background);--card:var(--surface-card);--line:var(--border-subtle);--teal:var(--primary);--teal-dark:var(--primary-deep);--bad:var(--error);--shadow:var(--shadow-card);--tap:48px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:var(--font-ui);color:var(--on-surface);background:var(--background);-webkit-text-size-adjust:100%;line-height:1.5}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{min-height:100dvh;margin:0}body{background-color:var(--background);background-image:radial-gradient(at 82% -8%,#0f766e14,#0000 42%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");background-size:auto,180px 180px}button,input,textarea{font-family:inherit;font-size:16px}button{touch-action:manipulation}.app{width:min(768px,100%);padding:0 var(--safe-margin) calc(96px + var(--safe-bottom));margin:0 auto;position:relative}.settings-page{padding-bottom:var(--space-lg)}.ios-caption,.ios-footnote{color:var(--on-surface-variant);letter-spacing:.05em;margin:0 4px 8px;font-size:12px;font-weight:700}.ios-footnote{letter-spacing:0;margin-top:12px;font-size:14px;font-weight:400;line-height:24px}.ios-footnote a{color:var(--primary)}.ios-group{background:var(--surface-card);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);box-shadow:var(--shadow-card);overflow:hidden}.ios-row{background:var(--surface-card);border:0;border-bottom:1px solid var(--border-subtle);text-align:left;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 16px;font-weight:600;display:flex}.ios-row:last-child{border-bottom:0}.ios-row span{color:var(--on-surface);flex:0 0 72px}.ios-row input{min-width:0;min-height:32px;color:var(--on-surface);background:0 0;border:0;flex:1;padding:0}.ios-row input:focus{outline:none}.ios-row.action{color:var(--on-primary);background:var(--primary);justify-content:center;min-height:48px;font-size:16px}.topbar{z-index:16;margin:0 calc(-1 * var(--safe-margin)) var(--space-md);min-height:48px;padding:var(--safe-top) var(--safe-margin) 8px;background:color-mix(in srgb, var(--background) 86%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--on-surface);justify-content:center;align-items:center;display:flex;position:sticky;top:0}.topbar h1{text-align:center;font-family:var(--font-ui);letter-spacing:.02em;margin:0;font-size:17px;font-weight:700;line-height:22px}.tabbar{z-index:26;background:var(--surface-card);border-top:1px solid var(--border-subtle);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:768px;padding:8px 4px calc(8px + var(--safe-bottom));box-shadow:var(--shadow-float);grid-template-columns:repeat(4,1fr);margin:0 auto;display:grid;position:fixed;bottom:0;left:0;right:0}.tabbar button{color:var(--on-surface-variant);background:0 0;border:0;place-items:center;gap:2px;min-height:48px;font-size:14px;font-weight:600;line-height:18px;display:grid}.tabbar button svg{fill:currentColor;width:22px;height:22px}.tabbar button.on{color:var(--primary)}.eyebrow{color:var(--primary);letter-spacing:.05em;margin:0 0 8px;font-size:12px;font-weight:700;line-height:16px}h1,h2{font-family:var(--font-content)}h1{margin:2px 0 0;font-size:24px;font-weight:600;line-height:32px}h2{letter-spacing:-.01em;margin:0 0 8px;font-size:24px;font-weight:600;line-height:32px}.muted{color:var(--on-surface-variant);margin:0 0 16px;font-size:16px;line-height:24px}.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--card-padding);box-shadow:var(--shadow-card);margin-bottom:var(--space-md)}.card.soft{background:color-mix(in srgb, var(--surface-card) 72%, var(--background))}.list-page{gap:var(--space-md);display:grid}.list-page .card{margin-bottom:0}.list-head{flex:1;min-width:0}.list-head h2{margin-bottom:12px}.list-head .pair{width:100%;max-width:320px}.pair-span{grid-column:1/-1}.list-head .btn{min-height:48px;padding:8px 12px;font-size:16px}.card-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.thumb{object-fit:cover;border-radius:var(--radius);border:1px solid var(--border-subtle);flex:0 0 64px;width:64px;height:64px}.thumb-btn{background:0 0;border:0;flex:0 0 64px;min-height:48px;padding:0;line-height:0}.actions,.row{gap:10px;display:flex}.row.wrap,.actions{flex-wrap:wrap}.actions{flex-direction:column}.pair{grid-template-columns:1fr 1fr;gap:8px;display:grid}.actions .btn,.stack .btn{width:100%}.btn{border:2px solid var(--primary);color:var(--primary);border-radius:var(--radius);min-height:var(--tap);cursor:pointer;font-family:var(--font-ui);background:0 0;justify-content:center;align-items:center;gap:8px;padding:12px 16px;font-size:16px;font-weight:600;line-height:20px;transition:transform .12s,box-shadow .12s,background .12s;display:inline-flex}.btn svg{fill:currentColor;flex:0 0 20px;width:20px;height:20px}.btn:hover:not(:disabled){background:color-mix(in srgb, var(--primary) 8%, transparent)}.btn:active:not(:disabled){box-shadow:var(--shadow-press);transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}.btn.primary:hover:not(:disabled){background:var(--primary-deep);border-color:var(--primary-deep)}.btn.lg{min-height:52px}.btn.ghost{color:var(--primary);background:0 0;border-color:#0000}.btn.danger{border-color:var(--error);color:var(--error)}.btn.danger:hover:not(:disabled){background:color-mix(in srgb, var(--error) 8%, transparent)}.btn.block{width:100%}.link{color:var(--primary);cursor:pointer;background:0 0;border:0;min-height:48px;padding:8px;font-weight:600}.link.danger{color:var(--error)}.hidden-input{display:none}.hint,.banner,.error{margin:12px 0 0}.hint{color:var(--on-surface-variant);font-size:13px}.banner{background:color-mix(in srgb, var(--primary) 12%, var(--surface-card));color:var(--primary-deep);border-radius:var(--radius);border:1px solid color-mix(in srgb, var(--primary) 16%, transparent);margin-bottom:12px;padding:12px 14px;font-size:14px;line-height:20px}.banner.info{background:color-mix(in srgb, var(--status-info) 10%, var(--surface-card));color:var(--status-info);border-color:color-mix(in srgb, var(--status-info) 16%, transparent)}.error{color:var(--error)}.word-list{gap:var(--space-md);display:grid}.word-item{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--surface-card);box-shadow:var(--shadow-card);grid-template-rows:auto auto;grid-template-columns:36px 1fr auto;align-items:center;gap:4px 12px;padding:16px;display:grid}.word-no{color:var(--outline);letter-spacing:.05em;text-align:center;grid-row:1/3;font-size:12px;font-weight:700}.word-item .word-en,.word-item .word-zh{border:0;border-bottom:1px solid var(--outline-variant);background:0 0;border-radius:0;grid-column:2;width:100%;min-width:0;min-height:48px;padding:8px 0}.word-item .word-en{font-family:var(--font-content);letter-spacing:-.02em;color:var(--primary);font-size:24px;font-weight:600;line-height:32px}.word-item .word-zh{color:var(--on-surface-variant);font-size:16px;line-height:24px}.word-item input:focus{border-bottom-width:2px;border-bottom-color:var(--primary);outline:none}.word-item .icon-btn{grid-area:1/3/3}.icon-btn{background:color-mix(in srgb, var(--error) 8%, transparent);width:44px;height:44px;min-height:44px;color:var(--error);border-radius:var(--radius);cursor:pointer;border:0;place-items:center;padding:0;display:grid}.icon-btn svg{fill:currentColor;width:20px;height:20px}.icon-btn:active:not(:disabled){transform:scale(.96)}.field input{width:100%;min-height:var(--tap);border:1px solid var(--outline-variant);border-radius:var(--radius);background:var(--surface-card);padding:12px}.field input:focus{border:2px solid var(--primary);outline:none;padding:11px}.segment{background:var(--surface-container);border-radius:var(--radius);gap:6px;width:100%;margin-bottom:16px;padding:4px;display:flex}.segment button{border-radius:calc(var(--radius) - 2px);cursor:pointer;min-height:48px;color:var(--on-surface-variant);background:0 0;border:0;flex:1;padding:8px 10px;font-size:16px;font-weight:600}.segment button.on{background:var(--surface-card);color:var(--primary);box-shadow:var(--shadow-card)}.field{gap:8px;font-weight:700;display:grid}.print-preview{border-radius:var(--radius-lg);text-align:center;background:#e8ebe9;margin:8px 0 20px;padding:20px 16px 24px}.print-preview-label{letter-spacing:.14em;color:var(--outline);margin:0 0 16px;font-size:12px;font-weight:700}.print-preview-sheet{background:#fff;border-radius:4px;max-width:420px;margin:0 auto;overflow:hidden;box-shadow:0 18px 40px #1b1c171f,0 4px 12px #0f766e0f}.print-preview-sheet img{border:0;border-radius:0;width:100%;margin:0;display:block}.print-preview-placeholder{min-height:280px;color:var(--outline);place-items:center;font-size:14px;display:grid}.url{display:none}.lightbox{z-index:40;background:#1b1c17e0;place-items:center;padding:48px 16px 24px;display:grid;position:fixed;inset:0}.lightbox img{object-fit:contain;border-radius:var(--radius);max-width:100%;max-height:min(88dvh,100%)}.lightbox-close{top:calc(8px + var(--safe-top));color:#fff;border-radius:var(--radius-full);background:#ffffff29;border:0;min-height:36px;padding:0 12px;font-size:14px;position:absolute;right:12px}.overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;text-align:center;z-index:20;font-family:var(--font-ui);background:#1b1c177a;place-content:center;gap:12px;padding:24px;display:grid;position:fixed;inset:0}.spinner{border:4px solid #ffffff47;border-top-color:var(--inverse-primary);border-radius:50%;width:42px;height:42px;margin:0 auto;animation:.8s linear infinite spin}.sticky-bar{bottom:calc(72px + var(--safe-bottom));z-index:8;background:linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 40%, transparent), var(--surface-card) 28%);border-top:1px solid var(--border-subtle);gap:8px;margin:16px -20px -20px;padding:12px 20px;display:grid;position:sticky}.sticky-bar .btn{width:100%}.sticky-bar .pair{grid-template-columns:1fr 1fr;gap:8px;display:grid}.print-only{display:none}@keyframes spin{to{transform:rotate(360deg)}}@media print{.topbar,.tabbar,.banner,.card,.overlay,.lightbox,.sticky-bar{display:none!important}.print-only{display:block}.print-only table{width:100%}.print-only td:last-child{border-bottom:1px dashed #999;height:42px}}@media (width>=768px){.app{padding:0 var(--space-lg) calc(96px + var(--safe-bottom))}.topbar{margin:0 calc(-1 * var(--space-lg)) var(--space-lg);padding-left:var(--space-lg);padding-right:var(--space-lg)}h1{font-size:32px;line-height:40px}h2{font-size:24px}.card{padding:var(--space-lg)}.actions{flex-direction:row}.actions .btn{width:auto;min-width:168px}.thumb{flex-basis:88px;width:88px;height:88px}.url{overflow-wrap:anywhere;background:var(--surface-container);border-radius:var(--radius);padding:8px 10px;font-size:12px;display:block}.sticky-bar{background:0 0;border:0;margin:16px 0 0;padding:0;position:static}.sticky-bar .btn,.sticky-bar .pair{width:auto}.sticky-bar .pair,.pair{display:flex}.word-item .word-en{font-size:32px;line-height:40px}}