:root{
  --bg:#eef3f9;
  --panel:#fff;
  --text:#172033;
  --muted:#5f6b7a;
  --red:#c62828;
  --green:#17803d;
  --shadow:0 7px 18px rgba(20,35,60,.14);
  --page-padding:clamp(7px,1.8vw,16px);
  --tile-min-height:clamp(128px,21vw,185px);
  --grid-gap:clamp(8px,1.8vw,15px);
  --emoji-size:clamp(54px,10vw,82px);
}
*{box-sizing:border-box}
html{min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
body{
  margin:0;min-width:280px;min-height:100vh;min-height:100dvh;
  font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text);
  overscroll-behavior:none;-webkit-tap-highlight-color:transparent
}
button,select,input{font:inherit}
button{min-width:44px;min-height:44px;touch-action:manipulation}
.app-shell{
  width:min(100%,1320px);min-height:100vh;min-height:100dvh;margin:0 auto;
  padding:max(var(--page-padding),env(safe-area-inset-top))
          max(var(--page-padding),env(safe-area-inset-right))
          max(var(--page-padding),env(safe-area-inset-bottom))
          max(var(--page-padding),env(safe-area-inset-left));
  display:flex;flex-direction:column
}
header{
  display:grid;grid-template-columns:minmax(62px,auto) minmax(0,1fr) minmax(76px,auto);
  gap:clamp(7px,1.5vw,12px);align-items:center;margin-bottom:9px
}
.title{min-width:0;font-size:clamp(1.1rem,3.4vw,2.2rem);font-weight:900;text-align:center;overflow-wrap:anywhere}
.home,.settings-btn{
  border:0;border-radius:16px;background:var(--panel);box-shadow:var(--shadow);
  padding:9px 11px;cursor:pointer;color:#1f4b8f;font-size:.76rem;font-weight:900
}
.status{
  min-height:38px;margin-bottom:9px;background:var(--panel);border-radius:14px;padding:8px 14px;
  font-size:clamp(.95rem,2.2vw,1.1rem);font-weight:800;text-align:center;box-shadow:var(--shadow)
}
.sentence-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;margin-bottom:11px}
.sentence{
  min-width:0;min-height:58px;background:var(--panel);border-radius:16px;padding:12px;
  font-size:clamp(1rem,2.7vw,1.3rem);font-weight:800;box-shadow:var(--shadow);overflow-wrap:anywhere
}
.action{border:0;border-radius:15px;padding:0 clamp(11px,2vw,18px);font-weight:900;box-shadow:var(--shadow);cursor:pointer}
.speak-action{background:#dff7e7}.clear-action{background:#ffe8e8}
.home-grid,.page-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap);
  width:100%;align-content:start
}
.tile{
  width:100%;min-width:0;min-height:var(--tile-min-height);border:0;
  border-radius:clamp(17px,3vw,24px);background:var(--panel);box-shadow:var(--shadow);
  padding:clamp(9px,2vw,15px) 7px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;color:var(--text);cursor:pointer
}
.tile:active,.tile.active{transform:scale(.97)}
.tile .emoji{
  display:block;font-size:var(--emoji-size);line-height:1;min-height:1em;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif
}
.tile .label{
  max-width:100%;font-size:clamp(1rem,4.1vw,1.6rem);line-height:1.08;
  font-weight:900;text-align:center;overflow-wrap:anywhere
}
.tile.urgent{border:5px solid var(--red);background:#fff7f7}
.tile.nav{background:#e8f0ff}
.tile.yes{background:#ecfff2}.tile.no{background:#fff0f0}
footer{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;padding:18px 8px 6px;margin-top:auto}
footer a{color:#294f89;font-weight:700}
dialog{
  width:min(720px,calc(100% - 20px));max-height:calc(100dvh - 20px);overflow:auto;
  border:0;border-radius:22px;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:clamp(16px,4vw,24px)
}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog h2{margin-top:0}
.settings-grid{display:grid;grid-template-columns:1fr;gap:12px}
label{font-weight:800}
select,input[type="file"]{
  width:100%;margin-top:5px;padding:12px;border:2px solid #bbc7d6;border-radius:11px;
  font-size:1rem;background:#fff
}
select option:disabled{color:#888}
.voice-preview,.backup-tools{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px;
  background:#eef4ff;border-radius:14px
}
.voice-preview button,.backup-tools button,.import-label{
  border:0;border-radius:12px;padding:12px 16px;font-weight:900;background:#dff7e7;cursor:pointer
}
.import-label input{margin-top:8px;background:#fff}
.voice-preview span{font-weight:700;color:var(--muted)}
.help{color:var(--muted);line-height:1.45}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.dialog-actions button{border:0;border-radius:12px;padding:12px 18px;font-weight:900}

/* Basic mode is simpler, but intentionally uses the SAME tile dimensions and grid rules. */
body.basic-mode .home{visibility:hidden;pointer-events:none}
body.basic-mode .sentence-bar{display:none}

body.button-large{--tile-min-height:clamp(150px,25vw,215px);--emoji-size:clamp(62px,11vw,90px)}
body.button-extra-large{--tile-min-height:clamp(175px,31vw,250px);--emoji-size:clamp(70px,13vw,102px)}
body.button-extra-large .home-grid,
body.button-extra-large .page-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

body.high-contrast{--bg:#000;--panel:#fff;--text:#000;--muted:#111}
body.high-contrast .title{color:#fff}
body.high-contrast .status,body.high-contrast .sentence{border:4px solid #ffd400}

@media(min-width:600px){
  .home-grid,.page-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .settings-grid{grid-template-columns:1fr 1fr}
  .tile .label{font-size:clamp(1.08rem,2.6vw,1.5rem)}
}
@media(min-width:900px){
  .home-grid,.page-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(orientation:landscape) and (min-width:700px){
  .home-grid,.page-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(orientation:landscape) and (max-height:740px){
  :root{--tile-min-height:124px;--emoji-size:58px}
  .app-shell{padding-top:6px;padding-bottom:6px}
  footer{display:none}
}
@media(max-width:420px){
  header{grid-template-columns:58px minmax(0,1fr) 70px}
  .sentence-bar{grid-template-columns:minmax(0,1fr) auto}
  .clear-action{grid-column:2}
  .sentence{grid-row:1/span 2}
  footer{font-size:.9rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.reset-tools{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding:12px;
  border:2px solid #f1b5b5;background:#fff5f5;border-radius:14px
}
.reset-tools .reset-button{
  border:0;border-radius:12px;padding:12px 16px;font-weight:900;
  background:#c62828;color:#fff;cursor:pointer
}
.reset-tools span{
  flex:1 1 260px;font-size:.95rem;line-height:1.35;color:#6b2b2b
}