:root{
  --bg:#eef2f4; --card:#ffffff; --ink:#152023; --muted:#5f7078;
  --brand:#0b7a75; --brand2:#12a89f; --line:#e2e8ea; --chip:#eaf5f4; --chipb:#bfe4e0;
  --accent:#0b7a75;
}
:root[data-theme="dark"]{ 
  --bg:#0f1719; --card:#182226; --ink:#e8eef0; --muted:#93a4ab; --brand:#15b3a8;
  --brand2:#1ed3c6; --line:#26343a; --chip:#16302e; --chipb:#245049; --accent:#1ed3c6; 
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ 
    --bg:#0f1719; --card:#182226; --ink:#e8eef0; --muted:#93a4ab; --brand:#15b3a8;
    --brand2:#1ed3c6; --line:#26343a; --chip:#16302e; --chipb:#245049; --accent:#1ed3c6; 
  }
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; transition: background-color 0.3s ease, color 0.3s ease; }
body{
  font-family:'Noto Sans Khmer','Poppins',system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
}

/* App bar */
.appbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; padding-top:calc(12px + env(safe-area-inset-top));
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff; box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.appbar-title{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:1.05rem; }
.appbar-title .flag{ font-size:1.2rem; }
.appbar-spacer{ flex:1; }
.icon-btn{
  width:40px; height:40px; border:none; border-radius:12px; background:rgba(255,255,255,.16);
  color:#fff; display:grid; place-items:center; cursor:pointer;
}
.icon-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }

/* Main */
.wrap{ flex:1; width:100%; max-width:560px; margin:0 auto; padding:18px 14px 8px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:20px;
  padding:18px 16px 16px; box-shadow:0 6px 24px rgba(0,0,0,.06); }
.glass-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.1); }
:root[data-theme="dark"] .glass-card { background: rgba(24, 34, 38, 0.7); border-top: 1px solid rgba(255,255,255,0.05); }

.field-label{ display:block; font-weight:600; font-size:.95rem; margin-bottom:8px; color:var(--muted); }

.input-row{ position:relative; }
#kh-input{
  width:100%; font-family:'Metal', inherit; font-size:1.5rem; font-weight:normal;
  padding:14px 44px 14px 16px; border:2px solid var(--line); border-radius:14px;
  background:var(--bg); color:var(--ink); outline:none; transition:border-color .2s;
}
#kh-input:focus{ border-color:var(--brand); }
.clear-btn{ position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:none; border-radius:50%; background:var(--line);
  color:var(--muted); font-size:.9rem; cursor:pointer; }

/* Result */
.result{ margin-top:16px; padding:16px; border-radius:16px;
  background:linear-gradient(135deg,rgba(11,122,117,.10),rgba(18,168,159,.10));
  border:1px dashed var(--chipb); text-align:center; }
.result-label{ font-size:.72rem; font-weight:700; letter-spacing:.08em; color:var(--muted); }
.latin{ font-family:'Poppins',sans-serif; font-weight:700; font-size:2rem; line-height:1.2;
  margin:6px 0 12px; color:var(--brand); word-break:break-word; }
.latin.empty{ color:var(--muted); font-weight:500; }
.copy-btn{ font-family:inherit; font-size:.95rem; font-weight:600; padding:9px 20px;
  border:none; border-radius:30px; background:var(--brand); color:#fff; cursor:pointer;
  box-shadow:0 3px 10px rgba(11,122,117,.35); transition:transform .1s; }
.copy-btn:active{ transform:scale(.96); }
.copy-btn.copied{ background:#2e9e4f; }

/* Variants / Chips */
.variants-wrap{ margin-top:16px; }
.variants-label{ font-size:.82rem; color:var(--muted); margin-bottom:8px; }
.variants{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-family:'Poppins',sans-serif; font-weight:600; font-size:.92rem; padding:8px 14px;
  border:1.5px solid var(--chipb); border-radius:20px; background:var(--chip); color:var(--ink);
  cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:6px; }
.chip small { color:var(--muted); font-weight:normal; font-size:0.75rem; }
.chip.active{ background:var(--brand); color:#fff; border-color:var(--brand); }
.chip.active small{ color:rgba(255,255,255,0.7); }
.chip:active{ transform:scale(.96); }

/* Keyboard */
.kbd { display: flex; flex-direction: column; gap: 4px; padding: 12px; background: var(--card); border-radius: 16px; border: 1px solid var(--line); }
.row { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.key { min-width: 38px; height: 42px; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  font-family: 'Metal', inherit; font-size: 1.2rem; user-select: none; transition: background 0.1s; }
.key:active { background: var(--chipb); }
.key.wide { padding: 0 12px; font-size: 0.9rem; font-family: inherit; }
.lbl { width: 100%; font-size: 0.75rem; color: var(--muted); text-align: center; margin-top: 6px; }

/* Toast */
.toast { position: fixed; bottom: -60px; left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 12px 24px; border-radius: 30px; font-size: .95rem; font-weight: 500; font-family: 'Noto Sans Khmer', sans-serif; opacity: 0; transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s; z-index: 1000; box-shadow: 0 4px 14px rgba(0,0,0,0.2); }
.toast.show { bottom: 30px; opacity: 1; }