:root{
  --bg:#f6f5f2; --card:#ffffff; --ink:#1f2430; --sub:#6b7280;
  --line:#e9e7e1; --accent:#2f6f5e; --accent-soft:#eaf3ef;
  --en:#2f6f9e; --en-soft:#eaf3fa;
  --ja:#a6432f; --ja-soft:#fbeeea;
  --vi:#2f6f5e; --vi-soft:#eaf3ef;
  --err:#c0392b; --err-soft:#fbeaea;
  --shadow: 0 1px 2px rgba(20,20,20,.04), 0 8px 24px rgba(20,20,20,.06);
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15171c; --card:#1c1f26; --ink:#eef0f3; --sub:#9aa1ad;
    --line:#2a2e37; --accent:#5fb79b; --accent-soft:#1c2b26;
    --en:#7fb4e0; --en-soft:#17232e;
    --ja:#e08a72; --ja-soft:#2c1c17;
    --vi:#7fd0ae; --vi-soft:#16241f;
    --err:#e07a6f; --err-soft:#2c1a18;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --bg:#15171c; --card:#1c1f26; --ink:#eef0f3; --sub:#9aa1ad;
  --line:#2a2e37; --accent:#5fb79b; --accent-soft:#1c2b26;
  --en:#7fb4e0; --en-soft:#17232e;
  --ja:#e08a72; --ja-soft:#2c1c17;
  --vi:#7fd0ae; --vi-soft:#16241f;
  --err:#e07a6f; --err-soft:#2c1a18;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}
html{scroll-padding-top: env(safe-area-inset-top, 0px); height:100%;}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  min-height:100%;
}
.wrap{max-width:880px; margin:0 auto; padding:18px 16px 60px;}
header{position:relative; background:var(--bg); padding:8px 0 12px; border-bottom:1px solid var(--line); margin-bottom:16px;}
.top-row{display:flex; align-items:center; justify-content:space-between; gap:8px;}
h1{font-size:18px; margin:0; font-weight:800; letter-spacing:-.2px;}
h1 span{color:var(--accent);}
.theme-btn{border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:10px; padding:7px 10px; font-size:14px; cursor:pointer; flex-shrink:0;}
.sub{color:var(--sub); font-size:13px; margin-top:4px;}

/* ---- Free-text translate box ---- */
.translate-box{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:12px; margin-top:14px;}
.textarea-shell{display:flex; align-items:flex-end; gap:8px;}
#viInput{
  flex:1; resize:none; border:1px solid var(--line); border-radius:12px; outline:none;
  background:var(--bg); color:var(--ink); font-family:inherit; font-size:15.5px;
  padding:11px 12px; min-height:46px; max-height:160px; line-height:1.4;
}
#viInput:focus{border-color:var(--accent);}
.btn-col{display:flex; flex-direction:column; gap:6px; flex-shrink:0;}
.icon-btn{border:none; background:var(--accent-soft); color:var(--accent); width:44px; height:44px; border-radius:11px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.icon-btn:disabled{opacity:.5; cursor:not-allowed;}
.icon-btn.primary{background:var(--accent); color:#fff;}
.icon-btn.recording{background:#e0503f; color:#fff; animation:pulse 1.1s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,80,63,.5);}70%{box-shadow:0 0 0 10px rgba(224,80,63,0);}100%{box-shadow:0 0 0 0 rgba(224,80,63,0);}}
.tool-row{display:flex; align-items:center; justify-content:space-between; margin-top:8px;}
.hint{font-size:12px; color:var(--sub);}
.clear-link{background:none; border:none; color:var(--sub); font-size:12.5px; cursor:pointer; text-decoration:underline; padding:4px;}

.status-row{display:flex; align-items:center; gap:8px; margin-top:10px; font-size:13.5px; color:var(--sub); min-height:20px;}
.spinner{width:14px; height:14px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--accent); animation:spin .7s linear infinite; display:none;}
.spinner.on{display:inline-block;}
.status-row.error{color:var(--err);}
.retry-btn{border:1px solid var(--err); color:var(--err); background:var(--err-soft); border-radius:8px; padding:4px 10px; font-size:12.5px; cursor:pointer; margin-left:auto;}
@keyframes spin{to{transform:rotate(360deg);}}

.result-card{background:var(--card); border:1.5px solid var(--accent); border-radius:16px; box-shadow:var(--shadow); padding:14px; margin-top:12px;}
.result-vi{font-size:15px; font-weight:700; margin-bottom:10px; white-space:pre-wrap; word-break:break-word;}
.result-vi .flag{margin-right:6px;}

.cats{display:flex; gap:6px; overflow-x:auto; margin-top:12px; padding-bottom:4px; -webkit-overflow-scrolling:touch;}
.cats::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--sub); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap;}
.chip.active{background:var(--accent); border-color:var(--accent); color:#fff;}

.section-title{font-size:13px; font-weight:700; color:var(--sub); text-transform:uppercase; letter-spacing:.4px; margin:20px 2px 6px;}

.card{background:var(--card); border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--line); padding:14px; margin-top:12px; cursor:pointer;}
.card.match{border-color:var(--accent);}
.vi-line{font-size:16px; font-weight:700; color:var(--ink); margin-bottom:10px; display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
.vi-line .star{cursor:pointer; font-size:17px; color:var(--sub); flex-shrink:0;}
.vi-line .star.on{color:#e0a83f;}
.cols{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.col{border-radius:12px; padding:10px 11px; cursor:pointer; -webkit-tap-highlight-color:transparent; border:1px solid transparent; min-width:0;}
.col:active{transform:scale(.98);}
.col.en{background:var(--en-soft);}
.col.ja{background:var(--ja-soft);}
.tag{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; opacity:.75; display:flex; align-items:center; gap:5px; margin-bottom:4px;}
.col.en .tag{color:var(--en);}
.col.ja .tag{color:var(--ja);}
.txt{font-size:14.5px; font-weight:600; line-height:1.35; word-break:break-word; white-space:pre-wrap;}
.col.ja .txt{font-family:'Noto Sans JP', 'Be Vietnam Pro', sans-serif;}
.romaji{font-size:12px; color:var(--sub); margin-top:3px; font-style:italic; word-break:break-word;}
.speak-hint{font-size:16px; margin-left:auto;}

.empty{text-align:center; color:var(--sub); padding:40px 20px; font-size:14px;}
.empty b{display:block; font-size:15px; color:var(--ink); margin-bottom:6px;}

.footer-note{text-align:center; color:var(--sub); font-size:12px; margin-top:24px; line-height:1.6;}

@media (max-width:420px){
  .cols{grid-template-columns:1fr;}
}


.history-label{font-size:12px; font-weight:700; color:var(--sub); margin:16px 2px -5px;}
.result-history:first-child .history-label{margin-top:0;}