:root{
  --bg:#f9fafb;        /* page background */
  --card:#ffffff;      /* panels, tiles */
  --text:#111827;      /* dark text */
  --muted:#4b5563;     /* gray text */
  --btn:#e5e7eb;       /* buttons */
  --btn-hover:#d1d5db; /* hover state */
  --accent:#0284c7;    /* blue accent */
  --shadow:0 4px 12px rgba(0,0,0,.1);
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Noto Sans Khmer",system-ui,sans-serif;
}

.app{max-width:720px; margin:0 auto; padding:12px 12px calc(84px + var(--safe-bottom));}

/* Sticky header */
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 6px env(safe-area-inset-right) 10px;
  background:#f3f4f6; border-bottom:1px solid #d1d5db;
}
.topbar h1{font-size:1.1rem; margin:0; letter-spacing:.2px}
.ghost{
  background:transparent; color:#374151; border:1px solid #9ca3af;
  padding:10px 12px; border-radius:12px; font-size:.95rem;
}

/* Sentence area */
.sentence{
  margin:10px 0 6px; background:var(--card); border:1px solid #d1d5db; border-radius:14px; padding:10px; box-shadow:var(--shadow);
}
.sentence textarea{
  width:100%; border:none; outline:none; background:transparent; color:var(--text);
  font-size:1.15rem; line-height:1.6; min-height:72px; resize:vertical;
}
.sentence .row{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.sentence select,.sentence .ghost{
  background:#f9fafb; color:var(--text); border:1px solid #d1d5db;
  padding:10px 12px; border-radius:12px; font-size:.95rem;
}

/* Tabs */
.tabs{display:flex; gap:8px; overflow:auto; padding:8px 2px; margin:8px -2px 8px; scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto; background:#f3f4f6; border:1px solid #d1d5db; color:#4b5563;
  padding:10px 12px; border-radius:12px; font-size:1rem; white-space:nowrap;
}
.tab.active{color:#111827; border-color:var(--accent); box-shadow:0 0 0 2px rgba(2,132,199,.25) inset}

/* Grid */
.grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px}
@media (min-width:700px){ .grid{ grid-template-columns:repeat(3, 1fr);} }

.tile{
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
  background:var(--card); border:1px solid #d1d5db; border-radius:18px; padding:14px; min-height:120px;
  box-shadow:var(--shadow); user-select:none; touch-action:manipulation;
}
.tile:active{transform:scale(.98)}
.tile .emoji{font-size:1.8rem; line-height:1}
.tile .km{font-size:1.3rem; font-weight:700; margin-top:6px}
.tile .en{font-size:1rem; margin-top:2px; color:#4b5563}

/* Bottom action bar */
.actionbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:grid; grid-template-columns:auto auto 1fr; gap:8px;
  padding:10px 12px calc(10px + var(--safe-bottom));
  background:#f3f4f6; border-top:1px solid #d1d5db;
}
.actionbar .primary{
  background:var(--accent); color:#fff; border:none;
  padding:14px 16px; border-radius:14px; font-size:1.05rem; font-weight:700;
}
.actionbar .toggle{
  background:#e5e7eb; color:#111827; border:1px solid #d1d5db; border-radius:14px; padding:14px 14px; font-size:1rem;
}

.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}
html.bigtext body{font-size:20px}