:root { --ink:#162033; --muted:#667085; --line:#e5e9f0; --brand:#315efb; --brand-dark:#2448cc; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; padding:48px 20px; color:var(--ink); background:linear-gradient(145deg,#f7f9ff,#eef3fb); font-family:"Segoe UI","Microsoft YaHei",sans-serif; }
.container { width:min(860px,100%); margin:auto; }
header { margin-bottom:26px; }
.eyebrow { margin:0 0 8px; color:var(--brand); font-size:12px; font-weight:750; letter-spacing:.18em; }
h1 { margin:0; font-size:clamp(28px,5vw,42px); letter-spacing:-.03em; }
.subtitle { margin:10px 0 0; color:var(--muted); }
.card { margin:16px 0; padding:22px; background:rgba(255,255,255,.94); border:1px solid rgba(229,233,240,.9); border-radius:16px; box-shadow:0 10px 30px rgba(34,56,100,.07); }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; font-weight:700; }
.section-title h2 { margin:0; font-size:18px; }
#counter { color:var(--muted); font-size:13px; font-weight:500; }
textarea { width:100%; min-height:150px; resize:vertical; padding:15px; border:1px solid #cfd6e4; border-radius:11px; font:17px/1.7 inherit; outline:none; transition:.2s; }
textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(49,94,251,.12); }
.actions { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; }
.button,.copy-button,.row-copy { border:0; border-radius:9px; cursor:pointer; font:600 14px inherit; transition:.18s; }
.button { padding:10px 18px; }.primary { color:white; background:var(--brand); }.primary:hover { background:var(--brand-dark); }.secondary { color:var(--ink); background:#eef1f6; }
.copy-button,.row-copy { padding:7px 12px; color:var(--brand); background:#edf1ff; } button:disabled { cursor:not-allowed; opacity:.5; }
.message { min-height:20px; margin:10px 0 -6px; color:var(--muted); font-size:14px; }.message.error { color:#c43232; }
.full-output { min-height:56px; padding:15px; overflow-wrap:anywhere; border-radius:10px; background:#f7f8fb; font-size:19px; line-height:1.55; }.placeholder,.empty-state { color:#98a2b3; }
.split-output { overflow:hidden; border:1px solid var(--line); border-radius:10px; }.split-output.empty-state { padding:18px; border-style:dashed; }
.char-row { display:grid; grid-template-columns:minmax(54px,.35fr) 1fr auto; align-items:center; gap:18px; min-height:58px; padding:8px 12px; border-bottom:1px solid var(--line); }.char-row:last-child { border-bottom:0; }
.char { font-size:20px; font-weight:700; }.pinyin { font-size:18px; }
.row-copy-group { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.row-copy { min-width:52px; white-space:nowrap; }
.row-copy:hover { color:white; background:var(--brand); transform:translateY(-1px); }
@media (max-width:680px) { body{padding:26px 12px}.card{padding:16px}.char-row{grid-template-columns:42px 1fr;gap:8px}.row-copy-group{grid-column:1 / -1;justify-content:flex-start;padding-left:50px}.row-copy{padding:7px 9px} }