:root{--blue:#2878e8;--green:#168b55;--bg:#f8f9fc;--text:#171717;--muted:#626a78;--border:#e4e8ef;--shadow:0 3px 12px rgba(0,0,0,.07)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text)}
body{background:#e9edf3}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.app-shell{width:100%;max-width:760px;min-height:100svh;margin:auto;background:var(--bg);display:flex;flex-direction:column;position:relative;box-shadow:0 0 30px rgba(0,0,0,.08)}
.topbar{height:68px;background:var(--blue);display:flex;align-items:center;padding:0 24px;color:#fff}
.site-name{font-size:24px;font-weight:700;letter-spacing:.2px}
.page{flex:1;overflow:auto;padding:28px 24px 28px}
.center{text-align:center}
.welcome{font-size:44px;line-height:1.08;color:var(--blue);margin:18px 0 34px;font-weight:700}
.hero-logo{width:min(330px,78%);margin:0 auto 22px;display:block}
.tagline{font-size:22px;color:var(--muted);font-weight:600;margin-bottom:42px}
.small-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.card{background:#fff;border-radius:24px;box-shadow:var(--shadow);border:1px solid #eef1f5;padding:24px}
.small-card{min-height:185px;text-align:left;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.small-card:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,0,0,.09)}
.icon{font-size:42px;margin-bottom:18px}.blue{color:var(--blue)}.green{color:var(--green)}
.card h3{margin:0 0 8px;font-size:30px}.card p{margin:0;color:var(--muted);font-size:21px;line-height:1.35}
.get-started{width:100%;height:78px;border:0;border-radius:22px;background:var(--blue);color:#fff;font-size:26px;font-weight:700;box-shadow:0 5px 12px rgba(40,123,232,.22);margin-top:2px}
.screen-title{font-size:42px;color:var(--blue);margin:10px 0 4px}.screen-sub{font-size:21px;color:#666;margin:0 0 24px}
.lang-row{display:grid;grid-template-columns:1fr 58px 1fr;gap:12px;align-items:center;margin-bottom:18px}
.select{width:100%;padding:16px 14px;border:1px solid var(--border);border-radius:18px;background:#fff;color:#222;min-height:58px}
.swap{border:0;background:#fff;border-radius:18px;height:58px;box-shadow:var(--shadow);color:var(--blue);font-size:24px}
.translate-card{padding:22px}.label{font-weight:700;color:var(--blue);font-size:19px;margin-bottom:10px}
.textarea{width:100%;height:220px;resize:vertical;min-height:160px;border:1px solid var(--border);border-radius:20px;padding:18px;outline:none;background:#fff;font-size:21px}
.mic-row{text-align:right}.icon-btn{border:0;background:transparent;color:var(--blue);cursor:pointer;font-size:27px;padding:7px}
.primary{width:100%;height:62px;border:0;border-radius:20px;background:var(--blue);color:#fff;font-weight:700;font-size:21px;cursor:pointer;margin-top:16px}.primary:disabled{opacity:.65}
.result{margin-top:18px}.result-text{font-size:24px;line-height:1.45}.translit{margin-top:10px;color:#596273;font-size:17px;font-style:italic;line-height:1.4}.result-actions{display:flex;justify-content:flex-end;gap:4px}
.settings-list{display:grid;gap:16px}.setting{background:#fff;border-radius:24px;padding:22px;box-shadow:var(--shadow);border:1px solid #eef1f5}
.setting-row{display:flex;justify-content:space-between;gap:18px;align-items:center}.setting h3{margin:0 0 7px;font-size:25px}.setting p{margin:0;color:var(--muted);font-size:17px;line-height:1.4}
.voice-buttons{display:flex;gap:9px;flex-shrink:0}.voice-buttons button{border:1px solid var(--border);background:#fff;border-radius:15px;padding:12px 16px}.voice-buttons .active{background:#eaf2ff;border-color:var(--blue);color:var(--blue);font-weight:700}
.setting-link{display:block;color:inherit;text-decoration:none}.chevron{font-size:32px;color:#727b89}.link-row{display:flex;align-items:center;justify-content:space-between;gap:15px}
.common-list{display:grid;gap:12px}.phrase{background:#fff;border-radius:18px;padding:16px;box-shadow:var(--shadow)}.phrase .native{font-weight:700;font-size:19px}.phrase .pron{color:var(--muted);font-size:14px;margin-top:4px}
.bottom-nav{height:88px;background:#fff;border-radius:26px 26px 0 0;box-shadow:0 -3px 12px rgba(0,0,0,.08);display:grid;grid-template-columns:repeat(4,1fr);padding:8px 8px calc(8px + env(safe-area-inset-bottom));position:sticky;bottom:0;z-index:10}
.bottom-nav button{border:0;background:transparent;color:#666;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.bottom-nav button.active{color:var(--blue);font-weight:700}.bottom-nav button:nth-child(3).active{color:var(--green)}.bottom-nav span{font-size:28px;line-height:28px}.bottom-nav small{font-size:14px}
.notice{background:#eef6ff;border-radius:16px;padding:13px;color:#536174;font-size:14px;line-height:1.4;margin-top:14px}.error{color:#a92727;background:#fff0f0;padding:12px;border-radius:14px;margin-top:12px;font-size:14px}
.modal-backdrop{position:fixed;inset:0;background:rgba(20,31,50,.46);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100}.modal-backdrop[hidden]{display:none}
.language-modal{width:min(440px,100%);background:#fff;border-radius:28px;padding:32px 26px;box-shadow:0 18px 45px rgba(0,0,0,.2);text-align:center}.modal-logo{width:min(230px,75%);margin:0 auto 18px}.language-modal h2{font-size:30px;margin:0 0 8px;color:var(--blue)}.language-modal p{font-size:18px;color:var(--muted);margin:0 0 20px}.modal-select{width:100%;height:58px;border:1px solid var(--border);border-radius:17px;padding:0 14px;background:#fff;font-size:18px}.modal-button{margin-top:14px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:620px){.topbar{height:62px;padding:0 18px}.site-name{font-size:21px}.page{padding:24px 20px 22px}.welcome{font-size:40px;margin:14px 0 30px}.hero-logo{width:250px;margin-bottom:18px}.tagline{font-size:19px;margin-bottom:34px}.small-grid{gap:14px}.card{padding:18px;border-radius:22px}.small-card{min-height:165px}.icon{font-size:36px}.card h3{font-size:26px}.card p{font-size:18px}.get-started{height:70px;font-size:23px}.screen-title{font-size:38px}.screen-sub{font-size:18px}.setting-row{align-items:flex-start;flex-direction:column}.voice-buttons{width:100%}.voice-buttons button{flex:1}.bottom-nav{height:84px}.bottom-nav span{font-size:24px}.bottom-nav small{font-size:12px}}
@media(min-width:621px){.app-shell{min-height:100svh}.bottom-nav{display:none}.page{padding:48px 42px}.topbar{height:72px}.site-name{font-size:25px}}

.change-language{border:1px solid var(--blue);background:#fff;color:var(--blue);border-radius:14px;padding:10px 15px;font-weight:700}.preferred-setting p{font-size:18px}.preferred-setting .link-row{align-items:center}