:root{
  --bg:#15161a; --panel:#1c1e23; --panel-border:#2a2d33; --field:#101114;
  --text:#ECE9E2; --muted:#8b8d93; --faint:#55575e;
  --amber:#e3b341; --teal:#6ec6b0; --coral:#e8735f;
  --radius:6px;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:32px 20px 60px;
}
.app{ max-width:980px; margin:0 auto; }
header{ margin-bottom:22px; }
h1{ font-size:22px; font-weight:600; margin:0 0 6px; letter-spacing:-0.01em; }
.tagline{ margin:0; color:var(--muted); font-size:14.5px; line-height:1.5; max-width:62ch; }

.panels{
  display:flex; align-items:stretch;
  border:1px solid var(--panel-border); border-radius:var(--radius);
  overflow:hidden; background:var(--panel);
}
.panel{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; padding:16px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; min-height:28px; }
.panel-head label, .panel-head .label{ font-size:13px; color:var(--muted); }
.head-tools{ display:flex; align-items:center; gap:10px; }

.btn{
  background:transparent; border:1px solid currentColor; padding:5px 12px; border-radius:4px;
  font-size:12.5px; cursor:pointer; white-space:nowrap; font-family:inherit;
}
.btn-coral{ color:var(--coral); }
.btn-coral:hover{ background:rgba(232,115,95,.12); }
.btn-teal{ color:var(--teal); }
.btn-teal:hover{ background:rgba(110,198,176,.12); }
.btn-ghost{ color:var(--muted); border-color:transparent; }
.btn-ghost:hover{ color:var(--text); }
.btn:focus-visible,.link-btn:focus-visible,.menu button:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }

.mode{
  font-size:11.5px; padding:2px 8px; border-radius:10px; cursor:help;
  color:var(--teal); border:1px solid rgba(110,198,176,.4);
}
.mode.latin{ color:var(--amber); border-color:rgba(227,179,65,.5); }

#latinInput{
  flex:1; min-height:260px; resize:vertical;
  background:var(--field); border:1px solid var(--panel-border); border-radius:4px;
  color:var(--amber); padding:12px 14px;
  font-family:"SF Mono","Cascadia Code",Consolas,"Courier New",monospace;
  font-size:15.5px; line-height:1.6; outline:none;
}
#latinInput:focus{ border-color:var(--amber); }
#latinInput::placeholder{ color:var(--faint); }

.divider{
  flex:0 0 auto; width:44px; display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:18px;
  border-left:1px solid var(--panel-border); border-right:1px solid var(--panel-border);
}
.status{ font-size:11.5px; color:var(--muted); }

#output{
  flex:1; min-height:260px; background:var(--field); border:1px solid var(--panel-border);
  border-radius:4px; color:var(--text); padding:14px 16px;
  font-family:Georgia,"Iowan Old Style","Times New Roman",serif;
  font-size:18px; line-height:1.65; outline:none; overflow-wrap:break-word; white-space:pre-wrap;
}
#output:focus{ border-color:var(--teal); }
.placeholder{ color:var(--faint); font-style:italic; }
.lat{ color:var(--amber); }
.sugg{
  text-decoration:underline wavy var(--coral); text-decoration-thickness:1.5px;
  text-underline-offset:3px; cursor:pointer;
}
.sugg:hover{ background:rgba(232,115,95,.14); border-radius:2px; }
.fixed{
  text-decoration:underline dotted var(--teal); text-decoration-thickness:1.5px;
  text-underline-offset:4px; cursor:pointer;
}
.fixed:hover{ background:rgba(110,198,176,.12); border-radius:2px; }

.footer-note{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:10px; margin-top:14px; font-size:13px; color:var(--muted); min-height:30px;
}
.footer-left,.footer-right{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.toggle{ display:flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
.toggle input{ accent-color:var(--coral); }
.hint{ color:var(--coral); }
.link-btn{
  background:none; border:none; padding:0; color:var(--muted); font:inherit; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.link-btn:hover{ color:var(--text); }

.legend{ margin-top:18px; font-size:13px; color:var(--muted); line-height:1.6; max-width:76ch; }
.legend summary{ cursor:pointer; color:var(--text); }
.legend ul{ padding-left:18px; margin:8px 0 0; }
.legend li{ margin-bottom:4px; }
.legend b{ color:var(--text); font-weight:600; }
code{ font-family:"Cascadia Code",Consolas,monospace; font-size:12.5px; color:var(--amber); }

.menu{
  position:absolute; z-index:10; min-width:180px; padding:4px;
  background:#22252b; border:1px solid #3a3e46; border-radius:6px;
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  font-size:14px;
}
.menu button{
  display:block; width:100%; text-align:left; background:none; border:none; color:var(--text);
  padding:6px 10px; border-radius:4px; cursor:pointer; font:inherit;
}
.menu button:hover,.menu button:focus{ background:rgba(255,255,255,.07); outline:none; }
.menu .sug{ font-family:Georgia,"Times New Roman",serif; font-size:16px; }
.menu .sep{ height:1px; background:#3a3e46; margin:4px 2px; }
.menu .muted{ color:var(--muted); font-size:13px; }
.menu .empty{ padding:6px 10px; color:var(--muted); font-size:13px; }

.dict-dialog{
  background:var(--panel); color:var(--text); border:1px solid var(--panel-border);
  border-radius:8px; padding:18px 20px; width:min(520px,92vw); max-height:80vh;
}
.dict-dialog::backdrop{ background:rgba(0,0,0,.55); }
.dict-head{ display:flex; align-items:center; justify-content:space-between; margin:0; }
.dict-head h2{ font-size:17px; margin:0; font-weight:600; }
.dict-dialog h3{ font-size:13px; color:var(--muted); font-weight:600; margin:16px 0 6px; }
.dict-note{ font-size:12.5px; color:var(--muted); margin:6px 0 0; }
.dict-list{ list-style:none; margin:0; padding:0; font-size:14px; }
.dict-list li{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0; border-bottom:1px solid var(--panel-border); }
.dict-list li.empty{ color:var(--faint); border:none; }
.dict-list .x{ color:var(--muted); background:none; border:none; cursor:pointer; font-size:13px; }
.dict-list .x:hover{ color:var(--coral); }
.dict-actions{ margin-top:16px; display:flex; justify-content:flex-end; }

@media (max-width:700px){
  body{ padding:20px 12px 40px; }
  .panels{ flex-direction:column; }
  .divider{ width:auto; height:32px; border-left:none; border-right:none; border-top:1px solid var(--panel-border); border-bottom:1px solid var(--panel-border); }
  .divider span{ display:inline-block; transform:rotate(90deg); }
  #latinInput,#output{ min-height:180px; }
}