/* 0243 寫詞 — light theme only, 繁體中文. Clean and public-friendly. */
:root{
  --bg:#eef1f4; --panel:#ffffff; --line:#dde3e9; --line2:#c7d0d9;
  --txt:#2a3640; --dim:#647380; --faint:#9aa7b2; --bright:#10202c;
  --blue:#1f6fd6; --teal:#0b7e8b; --amber:#9d6900;
  --mono:'IBM Plex Mono','Noto Sans TC',monospace;
  --han:'Noto Sans TC',sans-serif;
  --shadow:0 1px 2px rgba(16,32,44,.05), 0 4px 16px rgba(16,32,44,.06);
}
*{box-sizing:border-box; margin:0; padding:0}
html{background:var(--bg)}
body{
  font-family:var(--han); color:var(--txt); min-height:100vh; line-height:1.6;
  background:
    radial-gradient(1100px 520px at 80% -12%, #e3ecf5 0%, transparent 60%),
    radial-gradient(820px 460px at -10% 110%, #e6eef4 0%, transparent 55%),
    var(--bg);
}

header{padding:34px 20px 6px; text-align:center}
h1{font-size:34px; font-weight:900; letter-spacing:.04em; color:var(--bright); font-family:var(--mono)}
h1 span{color:var(--blue)}
.tagline{font-size:13px; color:var(--dim); letter-spacing:.22em; margin-top:4px}

main{max-width:1080px; margin:0 auto; padding:18px 18px 40px; display:flex; flex-direction:column; gap:18px}

/* input (left) | output (right) — stacks on narrow screens */
.panes{display:grid; grid-template-columns:minmax(300px,360px) 1fr; gap:18px; align-items:start}
@media(max-width:760px){ .panes{grid-template-columns:1fr} }
.pane-in{position:sticky; top:18px}
@media(max-width:760px){ .pane-in{position:static} }
.pane-out{display:flex; flex-direction:column; gap:10px; min-width:0}

.optrow{display:flex; align-items:center; gap:8px; margin-top:12px; font-size:13px; color:var(--dim); cursor:pointer; user-select:none}
.optrow input{accent-color:var(--blue); cursor:pointer; margin:0; width:16px; height:16px; flex:none}

.intro{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow)}
.intro p{font-size:14px; color:var(--txt)}
.intro b{color:var(--teal); font-weight:700}
.companion{margin-top:10px; font-size:13px; color:var(--dim)}
.intro a, footer a{color:var(--blue); text-decoration:none}
.intro a:hover, footer a:hover{text-decoration:underline}
.companion a{font-weight:600}
.legend{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; font-family:var(--mono)}
.legend .lk{font-size:11px; color:var(--faint); letter-spacing:.14em; margin-right:4px; font-family:var(--han)}
.legend .chip{display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:40px; padding:4px 8px; border:1px solid var(--line2); border-radius:8px; background:#f6f9fb;
  font-size:18px; font-weight:600; color:var(--blue); line-height:1.1}
.legend .chip small{font-size:9px; color:var(--faint); font-weight:400; margin-top:2px; font-family:var(--han)}
.legend .chip.hi{border-color:var(--blue); background:#eef5ff}
.legend .arr{color:var(--faint); font-size:15px}

.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow)}
.inhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.inhead label{font-size:13px; color:var(--dim); letter-spacing:.06em}
textarea{width:100%; background:#f8fafc; border:1px solid var(--line2); border-radius:8px; color:var(--txt);
  font-family:var(--han); font-size:16px; padding:12px 14px; resize:vertical; line-height:1.8}
textarea:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(31,111,214,.12)}
textarea::placeholder{color:var(--faint)}

.run{width:100%; margin-top:14px; background:var(--blue); color:#fff; border:0; border-radius:8px;
  padding:13px; font-family:var(--han); font-weight:700; font-size:15px; letter-spacing:.16em; cursor:pointer;
  transition:filter .15s, transform .06s}
.run:hover{filter:brightness(1.06)}
.run:active{transform:translateY(1px)}
.run:disabled{opacity:.5; cursor:wait}

.link{background:none; border:0; color:var(--blue); font-family:var(--han); font-size:13px; cursor:pointer; padding:2px 4px}
.link:hover{text-decoration:underline}

.outhead{display:flex; align-items:center; justify-content:space-between; padding:0 2px}
.outhead[hidden]{display:none}
#outinfo{font-size:12px; color:var(--dim)}

/* result grid */
.song{display:flex; flex-direction:column; gap:12px}
.lyrline{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:10px 14px 13px; box-shadow:var(--shadow)}
.ltext{font-size:13px; color:var(--dim); font-family:var(--han); margin-bottom:4px}
.cells{display:flex; flex-wrap:wrap; align-items:flex-start; gap:0}
.cell{display:flex; flex-direction:column; align-items:center; min-width:36px; padding:4px 6px; border-radius:6px}
.cell .han{font-size:26px; color:var(--bright); font-family:var(--han); font-weight:700; line-height:1.15}
.cell .jp{font-size:10px; color:var(--dim); margin-top:3px; min-height:12px; font-family:var(--mono)}
.cell .lv{font-size:18px; font-weight:600; color:var(--blue); margin-top:3px; font-family:var(--mono); line-height:1; min-height:18px}
.cell.nontonal .han{color:var(--faint); font-size:21px}
.cell.nontonal .jp,.cell.nontonal .lv{visibility:hidden}
.cell.amb{background:#fff7e6}
.cell.amb .lv{color:var(--amber)}
.cell.amb .han{position:relative}
.cell.amb .han::after{content:"?"; position:absolute; top:-4px; right:-7px; font-size:10px; color:var(--amber); font-family:var(--mono)}

.idle{border:1px dashed var(--line2); border-radius:10px; padding:46px 20px; text-align:center; color:var(--faint); font-size:14px}
.idle.err{color:#d72237; border-color:#d72237}

.ambnote{font-size:11px; color:var(--amber); margin-top:8px}

footer{max-width:1080px; margin:0 auto; padding:8px 18px 40px; text-align:center; color:var(--faint); font-size:11px; display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
footer .sep{color:var(--line2)}

.copied{color:var(--teal) !important}