:root {
  --ink: #24354d;
  --muted: #63738a;
  --line: #d8e1ea;
  --surface: #ffffff;
  --page: #f1f5f8;
  --blue-50: #edf8fd;
  --blue-100: #d8effa;
  --blue-500: #2695c7;
  --blue-700: #176b9a;
  --purple-100: #eee9ff;
  --purple-500: #7357b8;
  --danger: #a94d5c;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  color: var(--ink);
  background: var(--page);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, select, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(100% - 32px, 980px); margin: 44px auto 72px; }
.app-header { padding: 18px 32px 27px; background: linear-gradient(120deg, var(--blue-100), #f8fbfd 72%); border: 1px solid #c9e4ef; border-radius: 18px 18px 8px 8px; }
h1, h2, p { margin-top: 0; }
h1 { position: relative; display: inline-block; color: var(--blue-700); font-size: clamp(1.65rem, 4vw, 2.25rem); margin: 0; letter-spacing: .01em; }
.title-outline { position: absolute; inset: 0; z-index: 0; color: #fff; -webkit-text-fill-color: #fff; -webkit-text-stroke: 2px #fff; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff); pointer-events: none; white-space: nowrap; }
.title-text { position: relative; z-index: 1; display: inline-block; background: linear-gradient(180deg, #0033cc, #176b9a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.chrome-recommendation { margin: 0 0 20px; color: #53677f; font-size: .78rem; line-height: 1.6; }
.chrome-recommendation a { color: var(--blue-700); font-weight: 800; margin-left: .35em; white-space: nowrap; }
.title-row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.subtitle { color: #526d83; margin: 0; font-size: .94rem; font-weight: 700; }
.notice { margin: 18px 0; border-radius: 9px; padding: 12px 15px; background: #e8f5fa; color: var(--blue-700); font-size: .92rem; }
.notice.is-warning { border: 1px solid #e37b91; background: #ffe8ee; color: #9c3850; text-shadow: 0 0 2px #fff, 0 0 4px #fff; }
.notice.is-warning strong { display: block; margin-bottom: 5px; color: #8c1837; }
.notice a { display: block; width: fit-content; margin-top: 7px; color: inherit; font-weight: 800; }

.mode-switcher { margin-top: 18px; padding: 11px; border: 1px solid #cbd7e1; background: #e8edf2; border-radius: 13px; }
.mode-label { margin: 0 0 8px 3px; color: #53677f; font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tab { min-height: 50px; border: 1px solid #3366ff; border-radius: 10px; color: #0033cc; background: #edf1ff; font-weight: 800; box-shadow: inset 1px 1px 0 #fff, 4px 5px 0 #9db4ff; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease; }
.tab.is-active { border-color: #0033cc; background: #d6e0ff; color: #0033cc; box-shadow: inset 1px 1px 0 #fff, 4px 5px 0 #7898ff; }
.tab:hover { color: #2451e8; text-shadow: 0 0 1px #fff, 0 0 3px #fff; filter: brightness(.97); }
.tab:active { box-shadow: inset 0 2px 5px #17364b55; filter: brightness(.94); }

.panel { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: clamp(20px, 4vw, 32px); box-shadow: 0 8px 24px #48637d10; }
.is-hidden { display: none; }
.section-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
h2 { font-size: 1.18rem; margin-bottom: 7px; }
.section-heading p { color: var(--muted); line-height: 1.65; margin-bottom: 18px; font-size: .92rem; }
kbd, code { color: var(--purple-500); background: var(--purple-100); border-radius: 4px; padding: 2px 5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pause-setting { flex: 0 0 142px; color: var(--muted); white-space: nowrap; font-size: .85rem; font-weight: 700; }
.pause-setting select { width: 142px; min-width: 142px; padding-right: 38px; }
.pause-insert-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 16px; }
button.button-pause-insert { min-height: 40px; padding: 0 15px; border: 1px solid #9933ff; color: #8800cc; background: #d6d6ff; font-size: .86rem; box-shadow: inset 1px 1px 0 #fff, 4px 5px 0 #b368ff; }
button.button-pause-insert:hover { color: #ab00ef; text-shadow: 0 0 1px #fff, 0 0 3px #fff; }
button.button-clear { min-height: 40px; margin-left: auto; padding: 0 15px; border: 1px solid #1aa9c4; color: #0066aa; background: #d6f6ff; font-size: .86rem; box-shadow: inset 1px 1px 0 #fff, 4px 5px 0 #94ddec; }
button.button-clear:hover { color: #008ad0; text-shadow: 0 0 1px #fff, 0 0 3px #fff; }
select { display: block; width: 100%; margin-top: 6px; min-height: 42px; border: 2px solid #77b9d7; border-radius: 8px; background: #f8fdff; color: var(--ink); padding: 0 10px; font-weight: 700; box-shadow: 0 1px 3px #176b9a14; }
select:focus { outline: 3px solid #cceefa; }
textarea { width: 100%; min-height: 15.5em; max-height: 70vh; resize: vertical; display: block; border: 2px solid #cfdae3; border-radius: 10px; padding: 16px; color: var(--ink); background: #fbfdff; line-height: 1.7; outline: none; }
textarea:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px #cceefa; }
.input-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 7px; }
.text-length { margin: 0; color: #687a90; font-size: .78rem; line-height: 1.55; text-align: left; }
.text-length.is-long { color: #7b5a9c; font-weight: 700; }
.resize-note { color: #7b8897; font-size: .74rem; line-height: 1.55; text-align: right; }
.length-guidance { margin: 5px 0 0; color: var(--blue-700); font-size: .78rem; line-height: 1.55; }
.voice-guidance { margin: 11px 0 0; padding: 11px 13px; border-left: 3px solid #77b9d7; border-radius: 0 7px 7px 0; background: #f3f9fc; color: #63738a; font-size: .79rem; line-height: 1.7; }
.voice-guidance strong { color: #176b9a; font-weight: 800; }

.voice-controls, .speaker-card { margin-top: 24px; padding: 18px; border: 1px solid #cde4ee; border-radius: 11px; background: var(--blue-50); }
.control-title { font-size: .95rem; font-weight: 800; margin: 0 0 13px; }
.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.control-grid label { color: var(--muted); font-size: .85rem; font-weight: 700; }
.fixed-language { margin-top: 6px; min-height: 42px; display: flex; align-items: center; border: 2px solid #b9cbd7; border-radius: 8px; background: #f4f7fa; color: #53677f; padding: 0 10px; font-weight: 700; }
.range-row { margin-top: 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; font-weight: 700; }
input[type="range"] { accent-color: var(--blue-500); width: 100%; }
.range-value { color: var(--blue-700); min-width: 2.8em; text-align: right; }
.actions { margin-top: 25px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.top-actions { justify-content: flex-start; margin: 0 0 16px; }
.button { border: 2px solid transparent; border-radius: 10px; min-height: 46px; padding: 0 18px; font-weight: 800; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease; }
.button-primary { color: #0033cc; background: #d6e0ff; border: 1px solid #3366ff; box-shadow: inset 1px 1px 0 #fff, 4px 5px 0 #7898ff; }
.button-primary:hover { color: #2451e8; text-shadow: 0 0 1px #fff, 0 0 3px #fff; }
.button-accent { color: #cc00cc; background: #ffd6ff; border: 1px solid #ff33ff; box-shadow: inset 1px 1px 0 #fff, 4px 5px 0 #ff78ff; }
.button-accent:hover { color: #ef00ef; text-shadow: 0 0 1px #fff, 0 0 3px #fff; }
.button-secondary { color: #40536b; background: #e8edf2; border-color: #9aabbc; box-shadow: 4px 5px 0 #cbd5df; }
.button-danger { color: var(--danger); background: #faebed; border-color: #c78390; box-shadow: 4px 5px 0 #ecc6ce; }
.button-preview { min-height: 38px; padding: 0 13px; color: #0085a6; background: #d6f6ff; border: 1px solid #1aa9c4; box-shadow: inset 1px 1px 0 #fff, 4px 5px 0 #72d5e8; font-size: .85rem; }
.button-preview:hover { color: #00a8cf; text-shadow: 0 0 1px #fff, 0 0 3px #fff; }
.button:hover { filter: brightness(.97); }
.button:active { box-shadow: inset 0 2px 5px #17364b55; filter: brightness(.86); }
.button-step { min-height: 52px; font-size: 1rem; font-weight: 700; }
.dialogue-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid #d5e0e8; border-radius: 10px; background: #fbfdff; }
#dialogue-message { color: var(--danger); font-size: .88rem; margin: 0; }
.speaker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.speaker-card[data-speaker="B"] { background: #f5f2ff; border-color: #ddd4fc; }
.dialogue-list { margin-top: 22px; display: grid; gap: 9px; }
.line-card { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px; background: #f9fbfc; }
.line-card.is-speaking { border-color: var(--blue-500); background: #e9f7fd; }
.speaker-badge { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-100); color: var(--blue-700); font-size: .8rem; font-weight: 900; }
.line-card[data-speaker="B"] .speaker-badge { background: var(--purple-100); color: var(--purple-500); }
.line-text { line-height: 1.55; }
.help { margin-top: 18px; border: 1px solid #d9e1e8; border-left: 5px solid #b9dbea; border-radius: 10px; background: #f8fafc; padding: 18px 20px; color: var(--muted); }
.help h2 { color: var(--ink); font-size: 1rem; margin: 0 0 14px; }
.help-item + .help-item { margin-top: 13px; padding-top: 13px; border-top: 1px solid #e1e8ee; }
.help-item h3 { color: var(--blue-700); font-size: .88rem; margin: 0 0 4px; }
.help-item p { margin: 0; font-size: .84rem; line-height: 1.75; }

@media (max-width: 640px) {
  .app-shell { width: min(100% - 20px, 980px); margin-top: 20px; }
  .app-header { padding: 18px 20px 24px; }
  .section-heading { display: block; }
  .pause-setting { display: inline-block; margin-bottom: 18px; }
  .control-grid, .speaker-grid { grid-template-columns: 1fr; }
  .actions .button { flex: 1 1 140px; }
  .input-meta { align-items: flex-start; flex-direction: column; gap: 2px; }
  .resize-note { text-align: left; }
  .actions .button-clear, .dialogue-actions .button-clear { margin-left: 0; }
  .dialogue-actions .button { flex: 1 1 170px; }
}