:root{--bg:#0b0d10;--bg2:#141820;--panel:#1a1f2a;--bd:#2a3344;--tx:#f4f6fa;--mu:#9aa3b5;--ac:#4cc9f0;--ok:#3ddc97;--ph:#2ecc71;--phbg:#0f2e1c;--phbd:#1f7a45;--bad:#ff6b6b;--warn:#ffd166;--btn:#232a38;--btnh:#2e384c;--btna:#3d4a63;--foc:#7dd3fc;--r:14px;--tap:56px;--font:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:var(--bg);color:var(--tx);font-family:var(--font);-webkit-tap-highlight-color:transparent}
body{line-height:1.35}
button,textarea{font:inherit;color:inherit}
.app{max-width:960px;margin:0 auto;padding:12px 14px 32px}
.header{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--bd)}
.brand h1{margin:0;font-size:clamp(1.5rem,5vw,2rem);font-weight:800;letter-spacing:-.02em}
.brand .subtitle{margin:4px 0 0;color:var(--mu);font-size:.95rem}
.brand .subtitle strong{color:var(--ac)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.banner{display:none;margin-bottom:14px;padding:12px 14px;border-radius:var(--r);background:#3a2208;border:1px solid #a86b1a;color:#ffe6b8;font-weight:600}
.banner.visible{display:block}
.banner code{background:rgba(0,0,0,.35);padding:2px 6px;border-radius:6px}
.tabs{display:flex;gap:8px;margin-bottom:14px;padding:4px;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r)}
.tab-btn{flex:1;min-height:var(--tap);padding:12px 16px;border:2px solid transparent;border-radius:12px;background:transparent;color:var(--mu);font-size:1.15rem;font-weight:800;cursor:pointer;touch-action:manipulation}
.tab-btn:hover{color:var(--tx);background:var(--btn)}
.tab-btn.active{color:#041018;background:var(--ac);border-color:var(--ac)}
.tab-btn:focus-visible{outline:3px solid var(--foc);outline-offset:2px}
.tab-panel{display:none}
.tab-panel.active{display:block}
.panel{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:14px;margin-bottom:14px}
.panel h2{margin:0 0 10px;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mu)}
.phrase-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.phrase-btn{min-height:var(--tap);padding:12px 10px;border:2px solid var(--bd);border-radius:12px;background:var(--btn);color:var(--tx);font-size:clamp(1rem,2.8vw,1.15rem);font-weight:700;text-align:center;cursor:pointer;touch-action:manipulation;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.phrase-btn:hover{background:var(--btnh);border-color:#1f6f8b}
.phrase-btn:active,.phrase-btn.pressed{background:var(--btna);border-color:var(--ac);transform:scale(.97)}
.phrase-btn:focus-visible{outline:3px solid var(--foc);outline-offset:2px}
.phrase-btn.speaking{border-color:var(--ok);box-shadow:0 0 0 2px rgba(61,220,151,.35)}
.phrase-btn.phone{background:var(--phbg);border-color:var(--phbd);color:#d8ffe8}
.phrase-btn.phone:hover{background:#164a2c;border-color:var(--ph)}
.phrase-btn.phone:active,.phrase-btn.phone.pressed{background:#1a5c36;border-color:var(--ph)}
.phrase-btn-label{display:block;font-weight:800}
.phrase-btn-sub{display:block;font-size:.78rem;font-weight:600;color:#8fe0b0}
.freeform label{display:block;margin-bottom:8px;font-weight:700;font-size:1.05rem}
.freeform textarea{width:100%;min-height:96px;resize:vertical;padding:14px;border-radius:12px;border:2px solid var(--bd);background:var(--panel);color:var(--tx);font-size:1.15rem;line-height:1.4}
.freeform textarea:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(76,201,240,.25)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.btn{min-height:var(--tap);min-width:110px;padding:12px 18px;border:none;border-radius:12px;font-size:1.1rem;font-weight:800;cursor:pointer;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid var(--foc);outline-offset:2px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-primary{background:var(--ac);color:#041018}
.btn-secondary{background:var(--btn);color:var(--tx);border:2px solid var(--bd)}
.btn-danger{background:#5a1d1d;color:#ffd5d5;border:2px solid #8b2e2e}
.spinner{width:1.1em;height:1.1em;border:2px solid rgba(4,16,24,.25);border-top-color:#041018;border-radius:50%;animation:spin .7s linear infinite;display:none}
.btn.loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.recent{margin-top:12px}
.recent h3{margin:0 0 8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mu)}
.recent-list{display:flex;flex-wrap:wrap;gap:8px}
.recent-chip{min-height:44px;max-width:100%;padding:8px 12px;border-radius:999px;border:1px solid var(--bd);background:var(--panel);color:var(--tx);font-size:.95rem;font-weight:600;cursor:pointer;touch-action:manipulation;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sentence-strip{min-height:72px;padding:16px 18px;border-radius:12px;border:2px solid var(--bd);background:var(--panel);color:var(--tx);font-size:clamp(1.25rem,4vw,1.55rem);font-weight:700;line-height:1.4;word-break:break-word}
.sentence-strip.empty{color:var(--mu);font-weight:600;font-style:italic}
.word-banks{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.word-bank h3{margin:0 0 8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mu)}
.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.word-grid.number-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
.word-btn{min-height:var(--tap);padding:10px 8px;border:2px solid var(--bd);border-radius:12px;background:var(--btn);color:var(--tx);font-size:clamp(1rem,2.6vw,1.1rem);font-weight:700;text-align:center;cursor:pointer;touch-action:manipulation;user-select:none}
.word-btn:hover{background:var(--btnh);border-color:#1f6f8b}
.word-btn:active{background:var(--btna);border-color:var(--ac);transform:scale(.97)}
.word-btn:focus-visible{outline:3px solid var(--foc);outline-offset:2px}
.number-btn{font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:800;background:#1a2436;border-color:#3a4d6a}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(120%);max-width:min(92vw,420px);padding:14px 18px;border-radius:12px;background:#4a1515;border:1px solid var(--bad);color:#ffe8e8;font-weight:700;z-index:100;opacity:0;transition:transform .25s ease,opacity .25s ease;pointer-events:none}
.toast.visible{transform:translateX(-50%) translateY(0);opacity:1}
.status-dot{width:10px;height:10px;border-radius:50%;background:var(--warn);display:inline-block}
.status-dot.ok{background:var(--ok)}
.status-dot.bad{background:var(--bad)}
.status-label{font-size:.85rem;color:var(--mu)}
.footer-note{margin-top:8px;text-align:center;color:var(--mu);font-size:.8rem}
@media(min-width:640px){.app{padding:20px 24px 40px}.phrase-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.word-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}
/* ---- Type tab (autocomplete) ---- */
.type-text{width:100%;min-height:120px;resize:vertical;padding:16px 18px;border-radius:14px;border:2px solid var(--bd);background:var(--panel);color:var(--tx);font-size:clamp(1.4rem,4.2vw,1.9rem);font-weight:600;line-height:1.35}
.type-text:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px rgba(76,201,240,.25)}
.type-actions{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.type-actions .btn{min-height:72px;font-size:1.25rem;width:100%;min-width:0}
.type-speak{font-size:1.5rem!important}
.type-words{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.type-word{min-height:72px;padding:10px 8px;border:2px solid #2f5d73;border-radius:14px;background:#13283a;color:var(--tx);font-size:clamp(1.2rem,3.6vw,1.55rem);font-weight:800;cursor:pointer;touch-action:manipulation;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.type-word:hover{background:#1a3850;border-color:var(--ac)}
.type-word:active{background:#21486a;transform:scale(.97)}
.type-word:focus-visible,.type-sentence:focus-visible,.type-say:focus-visible,.type-history-chip:focus-visible{outline:3px solid var(--foc);outline-offset:2px}
.type-sentences-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 0 8px}
.type-sentences-head h3,.type-history h3{margin:0;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mu)}
.type-engine{font-size:.85rem;font-weight:700;color:var(--mu)}
.type-engine[data-state="ai"]{color:var(--ok)}
.type-engine[data-state="loading"]{color:var(--warn)}
.type-sentences{display:flex;flex-direction:column;gap:10px}
.type-sentence-row{display:flex;gap:10px;align-items:stretch}
.type-sentence{flex:1;min-height:72px;padding:12px 16px;border:2px solid var(--bd);border-radius:14px;background:var(--btn);color:var(--tx);font-size:clamp(1.15rem,3.4vw,1.4rem);font-weight:700;text-align:left;line-height:1.3;cursor:pointer;touch-action:manipulation}
.type-sentence:hover{background:var(--btnh);border-color:#1f6f8b}
.type-sentence:active{background:var(--btna);transform:scale(.99)}
.type-say{flex:0 0 84px;min-height:72px;border:2px solid #1f7a45;border-radius:14px;background:var(--phbg);color:#d8ffe8;font-size:1.6rem;font-weight:800;cursor:pointer;touch-action:manipulation}
.type-say:hover{background:#164a2c;border-color:var(--ph)}
.type-say:active{background:#1a5c36;transform:scale(.97)}
.type-hint{margin:6px 2px;color:var(--mu);font-style:italic}
.type-history{margin-top:18px}
.type-history h3{margin-bottom:8px}
.type-history-list{display:flex;flex-wrap:wrap;gap:10px}
.type-history-chip{min-height:56px;max-width:100%;padding:10px 16px;border-radius:999px;border:2px solid var(--bd);background:var(--panel);color:var(--tx);font-size:1.1rem;font-weight:700;cursor:pointer;touch-action:manipulation;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.type-history-chip:active{background:var(--btna)}
@media(max-width:520px){.type-words{grid-template-columns:repeat(2,1fr)}.type-actions{grid-template-columns:1fr 1fr}.type-actions .type-speak{grid-column:1/-1}.type-say{flex-basis:72px}}
@media(max-width:520px){.type-word:nth-child(n+7){display:none}}