@import"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap";:root{--color-paper: #faf8f5;--color-paper-warm: #fffdf9;--color-olive: #3a8055;--color-olive-light: #4a9e69;--color-olive-pale: #edf5f0;--color-terracotta: #d4541a;--color-terracotta-light: #e86830;--color-terracotta-pale: #fdf0eb;--color-ink: #2c2420;--color-ink-light: #4a4039;--color-text-secondary: #6b5f54;--color-text-muted: #9c8e82;--color-border: #e0d8cf;--color-border-light: #ece7e0;--color-gridline: rgba(61, 90, 71, .06);--color-success: #3d5a47;--color-warning: #c4714a;--color-error: #c0392b;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--font-display: "Cormorant Garamond", Georgia, serif;--font-body: "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "DM Mono", "SF Mono", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-pill: 999px;--shadow-sm: 0 1px 3px rgba(44, 36, 32, .06), 0 1px 2px rgba(44, 36, 32, .04);--shadow-md: 0 4px 12px rgba(44, 36, 32, .08), 0 2px 4px rgba(44, 36, 32, .04);--shadow-lg: 0 8px 24px rgba(44, 36, 32, .1), 0 4px 8px rgba(44, 36, 32, .06)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--color-paper);color:var(--color-ink);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased;background-image:linear-gradient(var(--color-gridline) 1px,transparent 1px),linear-gradient(90deg,var(--color-gridline) 1px,transparent 1px);background-size:28px 28px;background-position:0 0}.app{max-width:860px;margin:0 auto;padding:48px 24px 80px}h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.2;color:var(--color-ink)}.header{text-align:center;margin-bottom:52px;animation:fadeSlideUp .6s ease-out both}.header h1{font-size:clamp(2.4rem,5vw,3.2rem);font-weight:700;letter-spacing:-.02em;color:var(--color-ink);margin-bottom:10px}.header h1 .accent-l{color:var(--color-terracotta)}.header h1 .accent-e{color:var(--color-olive)}.header-tagline{font-family:var(--font-display);font-size:1.15rem;font-style:italic;color:var(--color-text-secondary);letter-spacing:.01em}.header-divider{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}.header-divider-line{width:40px;height:1px;background:var(--color-border)}.header-divider-dot{width:5px;height:5px;border-radius:50%;background:var(--color-terracotta)}.card-title{font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--color-ink);margin-bottom:20px;display:flex;align-items:center;gap:10px}.card-title:after{content:"";flex:1;height:1px;background:linear-gradient(to right,var(--color-border),transparent);margin-left:8px}.main-content{display:flex;flex-direction:column;gap:28px}.card{background:var(--color-paper-warm);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);padding:28px 32px;box-shadow:var(--shadow-sm);transition:box-shadow .25s ease,border-color .25s ease,transform .2s ease}.card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border)}.main-content>*:nth-child(1){animation:fadeSlideUp .5s .1s ease-out both}.main-content>*:nth-child(2){animation:fadeSlideUp .5s .2s ease-out both}.main-content>*:nth-child(3){animation:fadeSlideUp .5s .3s ease-out both}.main-content>*:nth-child(4){animation:fadeSlideUp .5s .4s ease-out both}.main-content>*:nth-child(5){animation:fadeSlideUp .5s .5s ease-out both}.main-content>*:nth-child(6){animation:fadeSlideUp .5s .6s ease-out both}.main-content>*:nth-child(7){animation:fadeSlideUp .5s .7s ease-out both}.word-input-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}.quota-badge{font-family:var(--font-mono);font-size:.78rem;font-weight:700;padding:4px 12px;border-radius:var(--radius-pill);white-space:nowrap;transition:all .2s ease;border:1.5px solid transparent;flex-shrink:0}.quota-badge[data-state=idle]{color:var(--color-text-muted);background:var(--color-paper);border-color:var(--color-border-light)}.quota-badge[data-state=ok]{color:var(--color-olive);background:var(--color-olive-pale);border-color:#3a80554d}.quota-badge[data-state=over]{color:#b84a1c;background:#fdf0ef;border-color:#b84a1c59}.word-input-container{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-paper-warm);overflow:hidden;box-shadow:var(--shadow-sm);transition:border-color .2s ease,box-shadow .2s ease}.word-input-container:focus-within{border-color:var(--color-olive);box-shadow:var(--shadow-md),0 0 0 3px #3d5a4714}.word-textarea{width:100%;padding:24px 28px;border:none;background:transparent;font-family:var(--font-body);font-size:1.05rem;color:var(--color-ink);line-height:1.8;resize:none;min-height:160px;outline:none}.word-textarea::placeholder{color:var(--color-text-muted);font-style:italic}.word-textarea:focus-visible,.clean-select:focus-visible,.tab-item:focus-visible,.create-btn:focus-visible,.action-btn:focus-visible,.history-card:focus-visible,.share-copy-btn:focus-visible{outline:2px solid var(--color-olive)!important;outline-offset:2px!important}.input-bottom-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;background:#f0ece5;border-top:1px solid var(--color-border-light)}.input-bottom-bar .word-count{margin-left:auto}.file-upload-mini{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;background:#edf5f0;border:1.5px solid rgba(58,128,85,.35);border-radius:var(--radius-md);cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .12s ease,box-shadow .18s ease;font-family:var(--font-body);font-size:.82rem;font-weight:700;color:#2d6e42;-webkit-user-select:none;user-select:none;box-shadow:0 2px 6px #3a80551f,0 1px 2px #0000000a}.file-upload-mini:hover{background:#d8eedf;border-color:#3a805599;color:#245a35;transform:translateY(-1px);box-shadow:0 4px 12px #3a805533,0 2px 4px #0000000f}.file-upload-mini:active{transform:translateY(0) scale(.97);box-shadow:0 1px 3px #3a805526,0 1px 2px #0000000a}.file-upload-mini input{display:none}.file-upload-mini.extracting{opacity:.55;cursor:not-allowed;pointer-events:none}.word-count{font-family:var(--font-mono);font-size:.8rem;font-weight:500;color:var(--color-text-muted);padding:4px 10px;background:var(--color-paper);border:1px solid var(--color-border-light);border-radius:var(--radius-pill)}.word-count.warning{color:var(--color-terracotta);border-color:var(--color-terracotta-pale);background:var(--color-terracotta-pale)}.settings-panel{display:grid;gap:24px}.setting-label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px}.option-tabs{display:flex;background:var(--color-paper);border:1px solid var(--color-border-light);border-radius:var(--radius-md);padding:3px;gap:3px}.tab-item{flex:1;padding:9px 8px;border:none;background:transparent;border-radius:7px;font-family:var(--font-body);font-size:.88rem;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease;text-align:center}.tab-item.active{background:var(--color-paper-warm);color:var(--color-olive);box-shadow:var(--shadow-sm);font-weight:700}.tab-item:hover:not(.active){color:var(--color-ink)}.clean-select{width:100%;padding:12px 40px 12px 16px;background:var(--color-paper);border:1px solid var(--color-border-light);border-radius:var(--radius-md);font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--color-ink);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b5f54'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:1.1rem;transition:border-color .2s ease,box-shadow .2s ease}.clean-select:focus{outline:none;background-color:var(--color-paper-warm);border-color:var(--color-olive);box-shadow:0 0 0 3px #3d5a4714}.create-btn{width:100%;margin-top:4px;padding:16px 32px;background:var(--color-olive);color:#fff;border:none;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:1.05rem;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:background .2s ease,transform .15s ease,box-shadow .2s ease;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 2px 8px #3d5a4740,0 1px 3px #3d5a4726}.create-btn:hover:not(:disabled){background:var(--color-olive-light);transform:translateY(-1px);box-shadow:0 4px 16px #3d5a474d,0 2px 6px #3d5a4726}.create-btn:active:not(:disabled){transform:translateY(0) scale(.99);box-shadow:0 1px 4px #3d5a4733}.create-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.audio-result-card{border:1px solid var(--color-border);background:var(--color-paper-warm);margin-top:0;border-left:4px solid var(--color-olive)}.result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px}.success-badge{color:var(--color-olive);font-weight:700;font-family:var(--font-display);font-size:1.1rem;display:flex;align-items:center;gap:8px}.success-badge:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--color-olive);box-shadow:0 0 0 3px var(--color-olive-pale)}.audio-player-simple{width:100%;height:44px;border-radius:var(--radius-pill)}.action-group{display:flex;align-items:center;gap:10px}.action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--color-ink);font-family:var(--font-body);font-size:.85rem;font-weight:600;text-decoration:none;padding:8px 16px;border-radius:var(--radius-pill);background:var(--color-paper);border:1px solid var(--color-border);cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .1s ease}.action-btn:hover{background:var(--color-olive-pale);border-color:var(--color-olive);color:var(--color-olive);transform:scale(1.02)}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:20px}.history-card{background:var(--color-paper-warm);padding:18px 20px;border-radius:var(--radius-lg);border:1px solid var(--color-border-light);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,border-color .2s ease,transform .15s ease;display:flex;flex-direction:column;gap:10px;cursor:default}.history-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border);transform:translateY(-1px)}.history-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.history-title{font-weight:600;font-size:.95rem;color:var(--color-ink);line-height:1.4}.history-date{font-family:var(--font-mono);font-size:.72rem;color:var(--color-text-muted);margin-top:3px}.play-action-btn{width:34px;height:34px;border-radius:50%;background:var(--color-olive-pale);display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border-light);cursor:pointer;transition:background .2s ease,transform .15s ease,border-color .2s ease;flex-shrink:0;font-size:.75rem}.play-action-btn:hover{background:var(--color-olive);border-color:var(--color-olive);transform:scale(1.1)}.word-tooltip{position:absolute;z-index:1000;top:100%;left:0;margin-top:8px;animation:fadeInTooltip .2s ease-out}.tooltip-content{background:var(--color-ink);color:#faf8f5;padding:12px 16px;border-radius:var(--radius-md);font-family:var(--font-body);font-size:.85rem;font-weight:500;max-width:380px;min-width:320px;line-height:1.7;box-shadow:var(--shadow-lg);word-wrap:break-word}@keyframes fadeInTooltip{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.wordbook-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.wordbook-header .card-title{margin-bottom:0}.wordbook-add-btn{padding:7px 18px;background:var(--color-paper-warm);border:1px solid var(--color-border);border-radius:var(--radius-pill);font-family:var(--font-body);font-size:.82rem;font-weight:700;color:var(--color-olive);cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .1s ease;letter-spacing:.02em}.wordbook-add-btn:hover{background:var(--color-olive);color:#fff;border-color:var(--color-olive);transform:scale(1.03)}.wordbook-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.wordbook-card{background:var(--color-paper-warm);padding:18px 20px;border-radius:var(--radius-lg);border:1px solid var(--color-border-light);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,border-color .2s ease;display:flex;flex-direction:column;gap:8px}.wordbook-card:hover{box-shadow:var(--shadow-md);border-color:var(--color-border)}.wordbook-card.expanded{grid-column:1 / -1;border-color:var(--color-olive);border-left-width:3px}.wordbook-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.wordbook-info{flex:1;cursor:pointer;min-width:0}.wordbook-title{font-weight:700;font-size:.98rem;color:var(--color-ink);margin-bottom:4px}.wordbook-meta{font-family:var(--font-mono);font-size:.72rem;color:var(--color-text-muted)}.wordbook-name-input{width:100%;padding:6px 10px;border:1px solid var(--color-olive);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.98rem;font-weight:600;color:var(--color-ink);outline:none;background:var(--color-paper-warm)}.wordbook-use-btn{width:34px;height:34px;border-radius:50%;background:var(--color-terracotta-pale);display:flex;align-items:center;justify-content:center;border:1px solid rgba(196,113,74,.2);cursor:pointer;transition:background .2s ease,transform .15s ease;flex-shrink:0}.wordbook-use-btn:hover{background:var(--color-terracotta);transform:scale(1.1)}.wordbook-detail{margin-top:8px;padding-top:12px;border-top:1px dashed var(--color-border);animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.wordbook-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.word-tag{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;background:var(--color-terracotta-pale);border:1px solid rgba(196,113,74,.25);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.82rem;font-weight:600;color:var(--color-ink-light);transition:background .15s ease,transform .1s ease;transform:rotate(-.3deg)}.word-tag:nth-child(2n){transform:rotate(.3deg)}.word-tag:nth-child(3n){transform:rotate(-.5deg);background:var(--color-olive-pale);border-color:#3d5a4733}.word-tag:hover{transform:rotate(0) scale(1.04)}.word-tag-remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:none;background:transparent;color:var(--color-text-muted);font-size:1rem;cursor:pointer;border-radius:50%;line-height:1;padding:0;transition:background .15s ease,color .15s ease}.word-tag-remove:hover{background:#c4714a33;color:var(--color-terracotta)}.wordbook-empty-hint{font-size:.82rem;color:var(--color-text-muted);font-style:italic}.wordbook-actions{display:flex;gap:10px}.wordbook-action-btn{padding:5px 12px;border:1px solid var(--color-border);background:var(--color-paper);border-radius:var(--radius-sm);font-family:var(--font-body);font-size:.78rem;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}.wordbook-action-btn:hover{background:var(--color-paper-warm);border-color:var(--color-border);color:var(--color-ink)}.wordbook-action-btn.delete{color:var(--color-error);border-color:#c0392b33}.wordbook-action-btn.delete:hover{background:#fdf0ef;border-color:#c0392b66}.wordbook-create-input{width:100%;padding:12px 16px;background:var(--color-paper);border:1px solid var(--color-border-light);border-radius:var(--radius-md);font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--color-ink);outline:none;transition:border-color .2s ease,box-shadow .2s ease}.wordbook-create-input:focus{background:var(--color-paper-warm);border-color:var(--color-olive);box-shadow:0 0 0 3px #3d5a4714}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#2c242059;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .15s ease-out;padding:16px}.modal-content{background:var(--color-paper-warm);border-radius:var(--radius-xl);padding:32px;width:90%;max-width:420px;box-shadow:var(--shadow-lg),0 0 0 1px var(--color-border-light)}.modal-title{font-family:var(--font-display);font-size:1.4rem;font-weight:700;margin-bottom:16px;color:var(--color-ink)}.modal-body{margin-bottom:24px}.modal-body p{margin-bottom:6px;color:var(--color-text-secondary);font-size:.92rem}.modal-body p strong{color:var(--color-ink)}.modal-actions{display:flex;gap:10px;justify-content:flex-end}.modal-btn{padding:10px 22px;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:.9rem;font-weight:700;cursor:pointer;transition:background-color .2s ease,transform .1s ease,box-shadow .2s ease;border:none}.modal-btn.cancel{background:var(--color-paper);color:var(--color-text-secondary);border:1px solid var(--color-border)}.modal-btn.cancel:hover{background:var(--color-paper-warm);border-color:var(--color-border);color:var(--color-ink)}.modal-btn.confirm{background:var(--color-olive);color:#fff;box-shadow:0 2px 8px #3d5a4740}.modal-btn.confirm:hover{background:var(--color-olive-light);transform:translateY(-1px);box-shadow:0 4px 14px #3d5a474d}.modal-btn.confirm:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}.share-modal{max-width:440px}.share-link-section{margin-bottom:20px}.share-link-row{display:flex;gap:8px}.share-link-input{flex:1;padding:11px 14px;background:var(--color-paper);border:1px solid var(--color-border-light);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:.8rem;color:var(--color-ink);outline:none;min-width:0;transition:border-color .2s ease}.share-link-input:focus{border-color:var(--color-olive)}.share-copy-btn{padding:11px 18px;background:var(--color-olive);color:#fff;border:none;border-radius:var(--radius-md);font-family:var(--font-body);font-size:.85rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .2s ease,transform .1s ease;flex-shrink:0}.share-copy-btn:hover{background:var(--color-olive-light)}.share-copy-btn.copied{background:var(--color-success)}.share-qr-section{display:flex;flex-direction:column;align-items:center;padding:20px;background:var(--color-paper);border-radius:var(--radius-lg);margin-bottom:20px;border:1px dashed var(--color-border)}.share-qr-canvas{border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}.share-qr-hint{margin-top:10px;font-size:.78rem;color:var(--color-text-muted);text-align:center}.share-actions{display:flex;gap:10px;margin-bottom:16px}.share-action-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 10px;background:var(--color-paper);border:1px solid var(--color-border-light);border-radius:var(--radius-md);font-family:var(--font-body);font-size:.78rem;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .1s ease;text-decoration:none}.share-action-item:hover{background:var(--color-olive-pale);border-color:var(--color-olive);color:var(--color-olive);transform:translateY(-1px)}.share-action-icon{font-size:1.3rem}.empty-state{text-align:center;padding:40px 24px;color:var(--color-text-muted)}.empty-state .icon{font-size:2.2rem;margin-bottom:10px;display:block}.empty-state p{font-size:.9rem;line-height:1.5}.status-message{padding:12px 18px;border-radius:var(--radius-md);font-size:.88rem;font-weight:500}.status-message.error{background:#fdf0ef;color:var(--color-error);border:1px solid rgba(192,57,43,.2)}.status-message.warning{background:var(--color-terracotta-pale);color:var(--color-terracotta);border:1px solid rgba(196,113,74,.2)}.spinner-white{width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .75s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 640px){.app{padding:28px 14px 60px}.header{margin-bottom:36px}.card{padding:20px 18px}.card-title{font-size:1.15rem}.result-header{flex-direction:column;align-items:flex-start}.action-group{width:100%}.action-btn{flex:1;justify-content:center}.settings-panel>div{grid-template-columns:1fr!important}.input-bottom-bar{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:8px 12px;scrollbar-width:none}.input-bottom-bar::-webkit-scrollbar{display:none}.file-upload-mini{padding:6px 10px;font-size:.75rem;flex-shrink:0;gap:4px}.word-count{font-size:.72rem;padding:4px 8px;flex-shrink:0}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--color-paper)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}::selection{background:var(--color-olive-pale);color:var(--color-olive)}