:root {
  color-scheme: dark;
  --bg: #0d0b12;
  --panel: #17141f;
  --panel-2: #201b2b;
  --text: #f3efff;
  --muted: #a69fb5;
  --purple: #7556ff;
  --purple-soft: #b7a9ff;
  --border: #332c42;
  --danger: #ff7b78;
  --warning: #ffd27a;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.modal-open { overflow: hidden; }
a { color: var(--purple-soft); text-decoration: none; }
.topbar { height: 68px; padding: 0 max(24px, calc((100vw - 1120px) / 2)); display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid var(--border); background: rgba(13,11,18,.92); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(18px); }
.brand { color: var(--text); font-weight: 800; letter-spacing: .08em; }.brand span { color: var(--purple-soft); font-weight: 500; }
.topbar .site-map-topbar-button { order: 99; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); color: var(--purple-soft); font-size: 14px; font-weight: 750; letter-spacing: 0; white-space: nowrap; }
.topbar .site-map-topbar-button:hover { color: #fff; filter: brightness(1.1); }
.page { max-width: 1120px; margin: 0 auto; padding: 60px 24px 100px; }.page.narrow { max-width: 900px; }
.hero { max-width: 820px; margin-bottom: 36px; }.hero.compact { margin-bottom: 28px; }.hero h1 { font-size: clamp(34px, 5vw, 58px); line-height: 1.08; margin: 8px 0 16px; letter-spacing: -.035em; }.hero.compact h1 { font-size: 40px; }.hero p { color: var(--muted); font-size: 18px; }
.eyebrow { color: var(--purple-soft) !important; font-size: 12px !important; letter-spacing: .16em; font-weight: 800; margin: 0; }
.panel, .sentence-card { background: var(--panel); border: 1px solid var(--border); border-radius: 22px; padding: 28px; margin-bottom: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.18); }
h2 { margin: 0 0 20px; font-size: 24px; } .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }.section-heading h2 { margin: 0; }
.count { background: var(--panel-2); border: 1px solid var(--border); color: var(--purple-soft); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr auto; gap: 16px; align-items: end; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.practice-type-fieldset { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.practice-type-fieldset legend { width: 100%; padding: 0; margin: 0 0 6px; color: var(--muted); font-size: 14px; font-weight: 650; }
label { display: grid; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 650; }
label[hidden] { display: none; }
input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: 12px; background: #100d16; color: var(--text); padding: 13px 14px; font: inherit; outline: none; } textarea { margin-top: 8px; font-size: 22px; resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(117,86,255,.15); }
button, .button-link { border: 0; border-radius: 12px; background: var(--purple); color: white; padding: 14px 20px; font: inherit; font-weight: 750; cursor: pointer; } button:hover, .button-link:hover { filter: brightness(1.1); } button:disabled { opacity: .65; cursor: wait; }.button-link { display: inline-flex; align-items: center; justify-content: center; }
.button-link.secondary { background: var(--panel-2); color: var(--purple-soft); border: 1px solid var(--border); }
.generator form { display: grid; gap: 20px; }.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.form-actions p { margin: 0; color: var(--muted); font-size: 13px; }
.segment-field-group { display: grid; gap: 10px; }
.segment-field-label { margin: 0; color: var(--muted); font-size: 14px; font-weight: 650; }
.segment-field-label .muted { font-weight: 500; }
.segment-field-list { display: grid; gap: 8px; }
.segment-field-row { display: flex; gap: 8px; align-items: center; }
.segment-field-row input { flex: 1; }
.segment-field-remove { flex: 0 0 auto; width: 40px; padding: 0; background: rgba(255,138,134,.14); border: 1px solid rgba(255,138,134,.5); color: #ff8a86; font-size: 15px; }
#add-segment-button { justify-self: start; padding: 10px 16px; font-size: 13px; }
.segmentation-preset-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.segmentation-preset-button { padding: 8px 13px; font-size: 13px; }
.segmentation-rejoined-label { margin: 18px 0 4px; color: var(--muted); font-size: 12px; }
.segmentation-rejoined { margin: 0; font-size: 18px; }
.segmentation-lab-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.segmentation-lab-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.03); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; }
.segmentation-lab-chip:hover { border-color: var(--purple); }
.segmentation-lab-chip small { color: var(--muted); }
.segmentation-lab-chip.selected { background: var(--purple); border-color: var(--purple); }
.jlpt-pool-level-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.jlpt-pool-level-button { padding: 6px 13px; font-size: 12.5px; font-weight: 700; border-radius: 999px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.jlpt-pool-level-button:hover { border-color: var(--purple); }
.jlpt-pool-level-button.is-active { background: var(--purple); border-color: var(--purple); color: white; }
#add-entry-form { display: grid; gap: 16px; }
.add-entry-field[hidden] { display: none; }
.jlpt-pool-section > summary { cursor: pointer; list-style: none; margin-bottom: 20px; }
.jlpt-pool-section > summary::-webkit-details-marker { display: none; }
.jlpt-pool-section[open] > summary { margin-bottom: 20px; }
.jlpt-pool-summary-title { display: flex; align-items: center; gap: 14px; }
.jlpt-pool-chevron { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto; color: var(--purple-soft); font-size: 26px; line-height: 1; transition: transform .15s ease; }
.jlpt-pool-section[open] > summary .jlpt-pool-chevron { transform: rotate(90deg); }
.segmentation-lab-chip.selected small { color: rgba(255,255,255,.85); }
.analysis-level-select { width: auto; padding: 6px 10px; border-radius: 8px; font-size: 13px; }
.analysis-row-checkbox { width: auto; }
#segmentation-notebook-status { min-height: 16px; }
.segment-picker { display: grid; gap: 10px; }
.segment-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#segment-sentence-button { padding: 10px 16px; font-size: 13px; }
.segment-picker-status { color: var(--muted); font-size: 13px; min-height: 16px; }
.segment-picker-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.segment-picker-chip { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 15px; font-weight: 650; padding: 8px 13px; border-radius: 11px; }
.segment-picker-chip:hover { border-color: var(--purple); }
.segment-picker-chip.selected { background: var(--purple); border-color: var(--purple); color: white; }
.alert { padding: 14px 18px; border-radius: 12px; margin-bottom: 20px; border: 1px solid; }.alert.error { color: var(--danger); background: rgba(255,123,120,.08); border-color: rgba(255,123,120,.35); }.alert.warning { color: var(--warning); background: rgba(255,210,122,.07); border-color: rgba(255,210,122,.3); }
.table-wrap { overflow-x: auto; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--border); } th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.small-link, .back-link { font-size: 14px; font-weight: 700; }.empty { color: var(--muted); padding: 24px 0; }.empty.callout { background: var(--panel-2); padding: 20px; border-radius: 14px; }
.notes-section { margin-top: 44px; }.note-grid, .analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }.note-card, .analysis-card { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 22px; color: var(--text); transition: transform .15s, border-color .15s; }.note-card:hover { transform: translateY(-2px); border-color: var(--purple); }.note-card h3 { margin: 18px 0 8px; font-size: 23px; }.note-card p { color: var(--muted); margin: 0 0 18px; }
.note-meta { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }.chips { display: flex; flex-wrap: wrap; gap: 7px; }.chips span, .chips a { background: var(--panel-2); border-radius: 999px; padding: 4px 9px; color: var(--purple-soft); font-size: 12px; }.chips a:hover { color: var(--text); background: rgba(117,86,255,.22); }
.back-link { display: inline-block; margin-bottom: 22px; }.sentence-card h1 { font-size: clamp(30px,5vw,52px); line-height: 1.25; margin: 30px 0 12px; }.translation { color: var(--purple-soft); font-size: 20px; }.analysis-section { margin-top: 44px; }.analysis-card .term, .note-item-main .term { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }.term strong { font-size: 21px; }.term span, .muted { color: var(--muted); }.analysis-card dl { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; margin: 20px 0 0; font-size: 14px; }.analysis-card dt { color: var(--muted); }.analysis-card dd { margin: 0; }
.note-items-section { margin-top: 34px; }.note-items-table-wrap { border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }.note-items-table th, .note-items-table td { vertical-align: top; }.note-items-table td { font-size: 14px; }.note-items-table td:nth-child(2) strong { font-size: 18px; }.note-items-table td:nth-child(4) { min-width: 240px; color: var(--muted); }.note-items-table td:nth-child(7) code { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }.note-item-kind { display: inline-block; border-radius: 999px; padding: 5px 10px; background: rgba(117,86,255,.14); color: var(--purple-soft); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }.note-item-kind.expression { background: rgba(255,210,122,.1); color: var(--warning); }.note-item-kind.grammar { background: rgba(255,123,120,.1); color: #ffaaa7; text-align: left; }
.note-item-kind.sentence { background: rgba(255,255,255,.06); color: var(--muted); }
.note-item-kind.dialogue { background: rgba(117,86,255,.14); color: var(--purple-soft); }
.note-item-kind.kp-sequence { background: rgba(79,179,169,.14); color: #6fd6c9; }
.dialogue-line.is-interaction-line { background: rgba(242,210,75,.08); border-radius: 10px; padding: 10px; border-top-color: transparent; }
.inline-example-form button { padding: 7px 10px; border-radius: 9px; font-size: 12px; white-space: nowrap; }.inline-example-form button:disabled { cursor: wait; opacity: .68; }.note-item-generate-form { margin-top: 18px; }.note-item-generate-form button { padding: 10px 14px; }.segment-generate-form { margin: 12px 0; }.note-example-card h3 { margin: 2px 0 0; font-size: 26px; }.note-example-card h4 { margin: 24px 0 12px; color: var(--purple-soft); }.example-sentence-list, .example-dialogue-list { display: grid; gap: 12px; }.example-sentence, .example-dialogue { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #100d16; }.example-sentence p, .dialogue-line p { margin: 0 0 4px; }.reading { color: #c8bee6; font-size: 13px; }.example-dialogue h5 { margin: 0 0 12px; font-size: 17px; }.dialogue-line { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.05); }.dialogue-line:first-of-type { border-top: 0; }.example-segments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }.example-segment { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 11px; background: rgba(255,255,255,.03); color: var(--text); font-size: 13px; }.example-segment small { color: var(--muted); }.segment-audio-player { width: 72px; height: 24px; }
.segment-play-button { width: 22px; height: 22px; padding: 0; border: 1px solid rgba(117,86,255,.5); border-radius: 999px; background: rgba(117,86,255,.1); color: var(--purple); font-size: 10px; line-height: 1; }.segment-play-button:disabled { cursor: default; opacity: .6; }
.example-play-button { margin: 10px 0; }
.raw-json { margin-top: 44px; color: var(--muted); }.raw-json summary { cursor: pointer; }.raw-json pre { overflow: auto; white-space: pre-wrap; background: #08070b; border: 1px solid var(--border); border-radius: 14px; padding: 20px; color: #cfc8dc; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.raw-prompt { margin: 0 0 18px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: #08070b; color: #d8d0e8; white-space: pre-wrap; font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.image-test-actions { justify-content: flex-start; }
.image-result-panel img { width: min(100%, 512px); display: block; margin: 0 auto; border-radius: 14px; border: 1px solid var(--border); background: #08070b; }
.site-map-page { max-width: 1240px; }
.site-map-section { padding: 24px; }
.site-map-table th:nth-child(1) { min-width: 170px; }
.site-map-table th:nth-child(2) { min-width: 260px; }
.site-map-table th:nth-child(3) { min-width: 210px; }
.site-map-table td { vertical-align: top; }
.site-map-table td:nth-child(4) { color: var(--muted); min-width: 280px; }
.site-map-table code { color: #d8d0e8; font-size: 13px; }
.site-map-title { color: var(--text); font-weight: 850; }
a.site-map-title:hover { color: var(--purple-soft); }

.settings-page { max-width: 1080px; }
.settings-form { display: grid; gap: 22px; }
.settings-provider-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.settings-provider-card { display: grid; gap: 18px; margin-bottom: 0; }
.settings-provider-card .section-heading { margin-bottom: 0; }
.settings-clear-key { margin: 0; color: var(--muted); }
.settings-actions { justify-content: flex-start; }
.settings-voice-table-wrap { overflow-x: auto; }
.settings-voice-table { width: 100%; border-collapse: collapse; }
.settings-voice-table th { color: var(--muted); font-size: 14px; text-align: left; padding: 0 8px 8px 0; }
.settings-voice-table td { padding: 0 8px 10px 0; vertical-align: top; }
.settings-voice-table input { min-width: 220px; }
.settings-env-label { display: inline-flex; align-items: center; gap: 8px; }
.settings-env-badge { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.06); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
input[readonly].settings-readonly-input { background: transparent; border-style: dashed; color: var(--muted); cursor: default; }

/* Translation interaction prototype */
.translation-page { min-height: calc(100vh - 68px); padding: 20px 24px 40px; background: radial-gradient(circle at 50% 15%, rgba(117,86,255,.09), transparent 35%); }
.translation-intro { max-width: 620px; margin: 0 auto 12px; }.translation-intro h1 { display: inline; margin: 0 12px 0 0; font-size: 27px; }.translation-intro .eyebrow { display: inline; margin-right: 12px; }.translation-intro > p:last-child { color: var(--muted); margin: 4px 0 0; font-size: 14px; }
.translation-device { width: min(620px, 100%); min-height: 610px; margin: 0 auto; padding: 16px 28px 0; border: 1px solid #272231; border-radius: 30px; background: #0b0a10; box-shadow: 0 28px 80px rgba(0,0,0,.38); display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.translation-device[hidden] { display: none; }
.translation-header { display: grid; grid-template-columns: 46px 1fr 48px; align-items: center; min-height: 42px; font-size: 17px; }.translation-header strong { text-align: center; }.translation-header > span { color: var(--muted); font-weight: 800; text-align: right; white-space: nowrap; }.translation-close { width: 40px; height: 40px; border-radius: 50%; background: #18151f; color: var(--text); font-size: 31px; font-weight: 200; line-height: 36px; text-align: center; }
.scene-card { position: relative; flex: 0 0 128px; overflow: hidden; border-radius: 19px; background-color: #292830; background-position: center; background-size: cover; }.scene-card span { position: absolute; left: 16px; bottom: 13px; color: #ddd8e6; font-size: 12px; font-weight: 650; letter-spacing: .1em; }
.translation-prompt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.translation-prompt { padding: 7px 14px; border-radius: 12px; background: #ff5754; color: white; font-size: 15px; font-weight: 800; }.speak-target { min-width: 116px; padding: 7px 13px; border: 1px solid rgba(117,86,255,.75); border-radius: 999px; background: rgba(117,86,255,.11); color: var(--purple); font-size: 14px; }.speak-target:disabled { cursor: default; opacity: 1; }.speak-target.is-playing { background: rgba(117,86,255,.28); border-color: rgba(117,86,255,1); animation: speak-pulse 0.9s ease-in-out infinite alternate; }@keyframes speak-pulse { from { box-shadow: 0 0 0 0 rgba(117,86,255,.4); } to { box-shadow: 0 0 0 6px rgba(117,86,255,0); } }
.translation-audio-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.speak-target.play-local-audio { min-width: 150px; border-style: dashed; font-size: 13px; }
.speak-target.play-local-audio[hidden] { display: none; }
.native-sentence, .to-be-translated-sentence { margin: 0; font-size: clamp(24px, 4vw, 29px); line-height: 1.2; }
.answer-zone { position: relative; min-height: 84px; padding-bottom: 7px; display: flex; align-items: flex-end; }.answer-zone[hidden] { display: none; }.answer-zone::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: #504b5c; }.answer-segments { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; width: 100%; padding-bottom: 7px; }
.segment-bank { flex: 1 1 140px; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 10px; padding: 12px 4px 10px; }.segment-bank[hidden] { display: none; }.segment-chip { min-width: 92px; min-height: 64px; padding: 7px 15px 9px; border-radius: 16px; background: #7150ff; color: white; box-shadow: 0 4px 0 rgba(0,0,0,.2); display: inline-flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.05; transition: filter .15s, opacity .15s; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }.segment-reading { min-height: 14px; font-size: 11px; font-weight: 700; }.segment-text { margin-top: 3px; font-size: 21px; font-weight: 800; white-space: nowrap; }.bank-chip.selected { background: transparent; color: #46414f; border: 2px solid #34303d; box-shadow: none; opacity: .75; }.moving-chip { position: fixed; z-index: 100; margin: 0; pointer-events: none; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.translation-tray { flex: 0 0 76px; margin: 0 -28px; padding: 12px 28px 0; border-top: 1px solid #292530; display: grid; grid-template-columns: 58px 58px 1fr; align-items: start; gap: 10px; }.translation-tray button { height: 56px; border-radius: 17px; }.tray-small { padding: 0; background: #17141d; color: var(--purple); font-size: 23px; }.tray-small.tray-muted { color: var(--muted); }.continue-button { justify-self: end; width: min(190px, 100%); background: var(--purple); font-size: 17px; }.continue-button:disabled { background: #1d1925; color: #524667; cursor: default; opacity: 1; }.continue-button.incorrect { background: #3b2935; color: #ff8a86; }
.continue-button-row { justify-self: end; display: flex; align-items: center; gap: 10px; }
.check-result-label { font-size: 13px; font-weight: 800; }
.check-result-label.correct { color: #6fe0a0; }
.check-result-label.incorrect { color: #ff8a86; }
.speech-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(117,86,255,.3); border-top-color: var(--purple); border-radius: 50%; vertical-align: -2px; animation: speech-spin .8s linear infinite; } @keyframes speech-spin { to { transform: rotate(360deg); } }

.translation-lab-page { min-height: calc(100vh - 68px); padding: 10px 12px 18px; background: #000; }
.hearing-lab-page .translation-intro { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ios-simulator { display: grid; justify-items: center; }
.iphone-frame { position: relative; width: min(402px, calc((100vh - 104px) * 402 / 874), calc(100vw - 32px)); aspect-ratio: 402 / 874; padding: 13px; border: 2px solid #505052; border-radius: 78px; background: #0a0a0b; box-shadow: inset 0 0 0 2px #1e1e20, 0 0 0 1px rgba(255,255,255,.14), 0 26px 70px rgba(0,0,0,.7); }
.iphone-side-button { position: absolute; width: 5px; border-radius: 3px; background: linear-gradient(#545456,#222225); }
.iphone-side-button.left { left: -6px; }.iphone-side-button.left.top { top: 142px; height: 28px; }.iphone-side-button.left.middle { top: 195px; height: 55px; }.iphone-side-button.left.lower { top: 266px; height: 55px; }
.iphone-side-button.right { right: -6px; top: 230px; height: 86px; }
.translation-lab-page .translation-device { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; gap: 0; border: 0; border-radius: 64px; background: #0b0a10; box-shadow: none; overflow: hidden; }
.ios-status-bar { position: relative; flex: 0 0 72px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 16px 48px 0; color: #f5f2fb; font-size: 16px; font-weight: 800; }
.dynamic-island { justify-self: center; width: 112px; height: 22px; border-radius: 999px; background: #000; }
.status-icons { justify-self: end; display: flex; align-items: center; gap: 8px; }
.status-icons i { width: 20px; height: 14px; display: inline-block; border: 3px solid #f6f4fb; border-color: #f6f4fb transparent transparent transparent; border-radius: 50%; transform: translateY(5px); }
.status-icons b { width: 23px; height: 12px; display: inline-block; border: 2px solid #f6f4fb; border-radius: 4px; box-shadow: inset -3px 0 0 rgba(255,255,255,.34); }
.translation-lab-page .translation-header { flex: 0 0 52px; grid-template-columns: 1fr; padding: 0 31px 4px; background: #0f0d13; font-size: 17px; }
.translation-lab-page .translation-header > span { color: #aaa4b7; font-size: 22px; }
.translation-lab-page .scene-card { flex: 0 0 126px; border-radius: 0; background-color: #2a292f; background-image: linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%), linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%); background-position: 0 0, 16px 16px; background-size: 32px 32px; }
.translation-lab-page .scene-card span { left: 24px; bottom: 28px; color: #9f9aaa; font-size: 13px; font-weight: 800; letter-spacing: .18em; }
.translation-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.translation-content { min-height: 100%; display: flex; flex-direction: column; padding: 20px 24px 0; }
.translation-lab-page .translation-prompt-row { align-items: center; }
.translation-lab-page .translation-prompt { padding: 11px 17px; border-radius: 16px; background: #ff5754; font-size: 17px; letter-spacing: .01em; }
.translation-lab-page .speak-target { min-width: 96px; padding: 9px 13px; border-width: 1.5px; color: #7a58ff; font-size: 16px; }
.translation-lab-page .native-sentence { margin: 26px 0 0; min-height: 84px; font-size: 28px; line-height: 1.2; letter-spacing: 0; }
.translation-lab-page .hearing-sentence-spacer { visibility: hidden; }
.translation-lab-page .answer-zone { min-height: 100px; padding-bottom: 12px; align-items: flex-end; }
.translation-lab-page .answer-zone::after { height: 2px; background: #5b5665; }
.translation-lab-page .answer-segments { justify-content: center; gap: 12px; padding-bottom: 10px; }
.translation-lab-page .segment-bank { flex: 1; align-content: flex-start; justify-content: center; gap: 12px 10px; padding: 58px 0 10px; }
.translation-lab-page .segment-chip { min-width: 78px; min-height: 61px; padding: 8px 16px 10px; border-radius: 16px; background: #7050ff; box-shadow: 0 4px 0 rgba(0,0,0,.25); }
.translation-lab-page .segment-reading { font-size: 12px; min-height: 15px; }
.translation-lab-page .segment-text { font-size: 20px; }
.translation-lab-page .moving-chip .segment-reading { font-size: 12px; min-height: 15px; }
.translation-lab-page .moving-chip .segment-text { font-size: 20px; }
.translation-lab-page .translation-tray { flex: 0 0 92px; margin: 0; padding: 18px 24px 0; border-top: 1px solid #272331; grid-template-columns: 58px 58px 1fr; gap: 14px; background: rgba(15,13,20,.98); }
.translation-lab-page .translation-tray button { height: 58px; border-radius: 17px; }
.translation-lab-page .tray-small { background: #1b1722; color: #7b5bff; font-size: 26px; }
.translation-lab-page .tray-muted { color: #aaa4b7; }
.translation-lab-page .continue-button { width: 118px; background: #221d2b; color: #7b5bff; font-size: 18px; }
.translation-lab-page .continue-button:disabled { background: #221d2b; color: #65517e; opacity: 1; }

.row-actions { display: flex; justify-content: flex-end; gap: 16px; white-space: nowrap; }.knowledge-hero { margin-bottom: 20px; }.knowledge-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-bottom: 24px; }.knowledge-summary > div { display: flex; align-items: center; gap: 14px; padding: 17px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel); }.knowledge-summary strong { color: var(--purple-soft); font-size: 26px; }.knowledge-summary span { color: var(--muted); font-size: 13px; }.knowledge-grid { display: grid; gap: 18px; }.knowledge-card { overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); box-shadow: 0 20px 60px rgba(0,0,0,.16); }.knowledge-card > header { display: flex; justify-content: space-between; align-items: center; padding: 22px 24px; border-bottom: 1px solid var(--border); background: var(--panel-2); }.knowledge-card h2 { margin: 3px 0 0; font-size: 30px; text-transform: uppercase; }.jlpt-badge { display: inline-block; border: 1px solid rgba(117,86,255,.5); border-radius: 999px; padding: 5px 11px; color: var(--purple-soft); font-size: 13px; font-weight: 750; white-space: nowrap; }.knowledge-section { padding: 22px 24px 4px; }.knowledge-section .section-heading { margin-bottom: 12px; }.knowledge-section h3 { margin: 0; font-size: 17px; }.knowledge-chips { display: flex; flex-wrap: wrap; gap: 8px; }.knowledge-chips span { padding: 6px 11px; border-radius: 10px; background: rgba(117,86,255,.14); color: #d9d1ff; font-weight: 700; }.grammar-chips span { background: rgba(255,123,120,.1); color: #ffaaa7; }.effective-count { margin: 12px 0 0; color: var(--muted); font-size: 12px; }.compact-empty { padding: 4px 0; margin: 0; font-size: 14px; }.knowledge-card footer { margin-top: 20px; padding: 14px 24px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }.knowledge-empty { text-align: center; padding: 56px 28px; }.knowledge-empty h2 { margin: 9px 0; }.knowledge-empty p:last-child { color: var(--muted); }
.user-name-link { color: var(--text); }.user-name-link:hover { color: var(--purple-soft); }.user-profile-header { display: flex; align-items: center; gap: 24px; padding: 30px; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 22px; background: var(--panel); }.user-profile-header h1 { margin: 3px 0; font-size: 38px; }.user-profile-header p:last-child { margin: 0; color: var(--muted); }.user-avatar { width: 84px; height: 84px; flex: 0 0 84px; overflow: hidden; border-radius: 24px; background: linear-gradient(145deg,var(--purple),#4a2dbc); color: transparent; position: relative; }.user-avatar::after { content: "人"; position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: 34px; font-weight: 800; }.user-hub-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }.user-hub-card { position: relative; display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: start; min-height: 210px; padding: 26px; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); color: var(--text); transition: transform .15s,border-color .15s; }.user-hub-card:hover { transform: translateY(-2px); border-color: var(--purple); }.hub-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; background: rgba(117,86,255,.16); color: var(--purple-soft); font-size: 23px; font-weight: 800; }.user-hub-card h2 { margin: 3px 0 6px; }.user-hub-card p:last-child { margin: 0; color: var(--muted); font-size: 14px; }.user-hub-card > strong { color: var(--purple-soft); font-size: 26px; }.hub-arrow { position: absolute; right: 25px; bottom: 22px; color: var(--purple-soft); font-size: 22px; }.user-notes-hero { margin-bottom: 10px; }.user-notes-section { margin-top: 24px; }
@media (max-width: 760px) { .topbar { padding: 0 18px; }.page { padding: 36px 16px 70px; }.form-grid, .note-grid, .analysis-grid { grid-template-columns: 1fr; }.form-actions { align-items: stretch; flex-direction: column; }.form-actions button { width: 100%; }.panel { padding: 20px; }.note-meta { flex-direction: column; gap: 4px; } }
@media (max-width: 760px) { .translation-page { padding: 14px 0 0; }.translation-intro { padding: 0 18px; }.translation-intro > p:last-child { display: none; }.translation-device { min-height: calc(100vh - 136px); padding: 14px 18px 0; border: 0; border-radius: 0; }.translation-tray { margin: 0 -18px; padding: 10px 18px 0; grid-template-columns: 56px 56px 1fr; }.segment-bank { gap: 8px; }.segment-chip { min-width: 88px; padding-left: 12px; padding-right: 12px; } }
@media (max-width: 600px) { .knowledge-summary { grid-template-columns: 1fr; }.knowledge-card > header { padding: 18px; }.knowledge-section { padding: 18px 18px 2px; }.row-actions { flex-direction: column; gap: 3px; } }
@media (max-width: 700px) { .user-hub-grid { grid-template-columns: 1fr; }.user-profile-header { padding: 22px; }.user-avatar { width: 68px; height: 68px; flex-basis: 68px; }.user-profile-header h1 { font-size: 30px; } }
@media (max-width: 760px) { .compact-example-row { grid-template-columns: 1fr; }.compact-example-meta { text-align: left; } }
.practice-lab-page { max-width: 980px; }.practice-lab-hero { margin-bottom: 22px; }.practice-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 22px; }.practice-stat-grid > div { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 15px; background: var(--panel); }.practice-stat-grid strong { color: var(--purple-soft); font-size: 25px; }.practice-stat-grid span { color: var(--muted); font-size: 13px; }.practice-controls { padding: 22px; }.practice-controls h2 { margin: 2px 0 0; }.practice-controls form { display: grid; grid-template-columns: 120px 1fr auto; align-items: end; gap: 14px; margin-top: 18px; }.practice-controls input { padding: 10px 12px; }.practice-controls button { padding: 11px 18px; }.algorithm-note { margin: 15px 0 0; font-size: 12px; }.practice-results { margin-top: 34px; }.practice-result-list { display: grid; gap: 13px; }.practice-result-card { display: grid; grid-template-columns: 38px minmax(0,1fr) 230px; gap: 17px; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }.practice-rank { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: rgba(117,86,255,.16); color: var(--purple-soft); font-weight: 800; }.practice-item-main h3 { margin: 8px 0 2px; font-size: 25px; }.practice-item-main > p { margin: 0; color: var(--muted); }.practice-item-main blockquote { margin: 13px 0 0; padding-left: 12px; border-left: 2px solid var(--border); color: var(--muted); font-size: 13px; }.practice-result-card dl { display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 5px 12px; margin: 0; font-size: 12px; }.practice-result-card dt { color: var(--muted); }.practice-result-card dd { margin: 0; color: var(--text); text-align: right; }.practice-awaiting { padding: 42px; color: var(--muted); text-align: center; }.practice-awaiting span { color: var(--purple-soft); font-size: 28px; }.practice-awaiting p { margin: 4px; }.user-hub-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }.user-hub-card { grid-template-columns: 46px 1fr auto; padding: 22px; }.hub-icon { width: 46px; height: 46px; }
.notes-practice-preview { margin-top: 28px; }.notes-practice-preview form { grid-template-columns: minmax(220px,1.4fr) 150px 150px auto; }.notes-practice-results { margin-top: 36px; }.practice-candidate-table td:nth-child(5), .practice-candidate-table td:nth-child(6) { min-width: 220px; color: var(--muted); }.practice-candidate-table td:nth-child(7) { color: var(--purple-soft); font-weight: 800; }
.practice-controls .practice-example-form { grid-template-columns: 120px 1fr minmax(170px,auto) minmax(220px,auto); margin-top: 12px; }.practice-controls .practice-set-form { grid-template-columns: 120px 1fr minmax(170px,auto) minmax(170px,auto) minmax(220px,auto); }.practice-controls .checkbox-label { display: flex; align-items: center; gap: 8px; min-height: 42px; color: var(--muted); font-size: 13px; }.practice-controls .checkbox-label input { width: auto; padding: 0; }.practice-example-card { grid-template-columns: 38px minmax(0,1fr) 270px; }.practice-example-card .reading { margin: 6px 0; }
.practice-set-device { max-width: none; min-height: 620px; margin-top: 18px; }.practice-set-note-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 38px; color: var(--muted); }.practice-set-note-strip strong { color: var(--text); font-size: 20px; }.practice-set-note-strip .note-item-kind { align-self: center; }.practice-set-device .native-sentence[hidden] { display: none; }.practice-set-device .answer-zone { min-height: 108px; }
.note-item-index-panel { margin-top: 26px; }.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 20px; }.filter-chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); color: var(--purple-soft); font-size: 13px; font-weight: 750; }.filter-chip:hover { border-color: var(--purple); }.atomic-note-items-table td:nth-child(1) { min-width: 0; width: 34px; text-align: center; color: inherit; }.atomic-note-items-table td:nth-child(4) { min-width: 0; color: inherit; }.atomic-note-items-table td:nth-child(3) strong { font-size: 18px; }.atomic-note-items-table td:nth-child(5) { min-width: 280px; color: var(--muted); }.atomic-note-items-table td:nth-child(11) code { display: block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.note-detail-items-table td:nth-child(1) { min-width: 0; width: 34px; text-align: center; color: inherit; }.note-detail-items-table td:nth-child(4) { min-width: 0; color: inherit; }.note-detail-items-table td:nth-child(3) strong { font-size: 18px; }.note-detail-items-table td:nth-child(5) { min-width: 240px; color: var(--muted); }.note-detail-items-table td:nth-child(8) code { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.bulk-example-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); }
.bulk-example-bar button#bulk-example-generate { padding: 7px 12px; font-size: 12.5px; border-radius: 9px; }
.bulk-example-item-checkbox, #bulk-example-select-all { width: 19px; height: 19px; accent-color: var(--purple); cursor: pointer; }
.bulk-example-bar #bulk-example-selected-count { font-size: 13px; font-weight: 750; color: var(--purple-soft); }
.bulk-example-count-label { display: flex; align-items: center; gap: 6px; width: auto; font-size: 12.5px; }
.bulk-example-count-label input { width: 56px; padding: 6px 8px; font-size: 13px; }
.bulk-example-progress { display: flex; align-items: center; gap: 10px; flex: 1 1 200px; min-width: 160px; }
.bulk-example-progress-track { flex: 1; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.bulk-example-progress-fill { height: 100%; width: 0%; background: var(--purple); transition: width .2s ease; }
.bulk-example-status { font-size: 13px; color: var(--muted); }
.note-item-text-link { color: var(--text); }.note-item-text-link:hover, .count-link:hover { color: var(--purple-soft); }.count-link { color: var(--purple); font-weight: 850; }.note-item-main-card .chips { margin-top: 18px; }.linked-note-grid { grid-template-columns: 1fr; }.linked-note-card h3 { font-size: 20px; }
@media (max-width: 850px) { .user-hub-grid { grid-template-columns: 1fr; }.practice-result-card { grid-template-columns: 38px 1fr; }.practice-result-card dl { grid-column: 2; }.practice-controls form { grid-template-columns: 1fr 1fr; }.practice-controls button { grid-column: 1 / -1; }.practice-stat-grid { grid-template-columns: 1fr; } }
@media (max-width: 850px) { .practice-controls .practice-set-form { grid-template-columns: 1fr 1fr; } }

.examples-page .hero h1 { font-size: clamp(30px,4vw,46px); }
.scoped-example-item h2 { margin: 2px 0 0; font-size: 32px; }
.example-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
.view-toggle { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 13px; background: var(--panel); }
.view-toggle a { min-width: 86px; padding: 8px 13px; border-radius: 9px; color: var(--muted); text-align: center; font-weight: 800; }
.view-toggle a.active { background: var(--purple); color: white; }
.generation-mode-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; }
.generation-mode-actions form { margin: 0; }
.generation-mode-actions button, .generation-mode-actions .button-link { padding: 10px 14px; border-radius: 10px; }
.compact-example-list { display: grid; gap: 10px; }
.compact-example-row { display: grid; grid-template-columns: 100px minmax(0,1fr) 210px; gap: 14px; align-items: start; padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); }
.compact-example-kind { display: grid; gap: 8px; align-content: start; }
.compact-example-row strong { display: block; font-size: 18px; line-height: 1.35; }
.compact-example-row p { margin: 2px 0; }
.compact-example-meta { display: grid; gap: 4px; color: var(--muted); font-size: 12px; text-align: right; }
.compact-dialogue-line { font-size: 14px; }
.compact-dialogue-line span:first-child { color: var(--purple-soft); font-weight: 800; }
.example-browser-list { display: grid; gap: 14px; }
.example-browser-card { padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--panel); }
.example-browser-card h3 { margin: 14px 0 8px; }
.example-item-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.example-item-header > span:last-child { margin-left: auto; color: var(--muted); font-size: 12px; }
.example-item-link { color: var(--text); font-weight: 800; }
.example-japanese { margin: 0 0 3px; font-size: 23px; font-weight: 750; }

.checkbox-line { display: inline-flex; grid-auto-flow: column; align-items: center; gap: 8px; width: auto; margin: 0 12px 0 0; color: var(--purple-soft); font-size: 13px; font-weight: 750; }
.checkbox-line input { width: auto; accent-color: var(--purple); }
.compact-checkbox { display: flex; margin: 0 0 7px; font-size: 12px; }
.note-item-generate-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.example-audio-player { display: block; width: min(420px, 100%); margin-top: 12px; height: 34px; accent-color: var(--purple); }
.compact-audio-player { max-width: 320px; margin-top: 8px; }

.practice-translation-page { padding-top: 16px; }
.practice-translation-intro { margin-bottom: 10px; }
.practice-translation-device { min-height: 660px; }
.practice-warning { max-width: 620px; margin: 0 auto 12px; }
.practice-warning p { margin: 4px 0 0; font-size: 13px; }
.practice-focus-card { display: grid; grid-template-columns: auto 1fr auto; gap: 3px 8px; align-items: center; padding: 7px 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.025); }
.practice-focus-card[hidden] { display: none; }
.practice-translation-device .translation-tray { grid-template-columns: auto 1fr; }
.practice-translation-device .continue-button-row { grid-column: 2; }
.translation-take-note-button { grid-column: 1; }
.speaking-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 0; }
.speaking-panel[hidden] { display: none; }
.mic-button { width: 84px; height: 84px; padding: 0; border: 2px solid rgba(117,86,255,.6); border-radius: 999px; background: rgba(117,86,255,.14); color: var(--purple); font-size: 32px; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.mic-button:disabled { cursor: default; opacity: .6; }
.mic-button.is-recording { background: rgba(255,87,84,.18); border-color: rgba(255,87,84,.85); animation: speak-pulse 0.9s ease-in-out infinite alternate; }
.mic-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.mic-side-button { height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.mic-side-button:disabled { background: rgba(255,255,255,.05); border-color: var(--border); color: #524667; cursor: default; opacity: 1; }
.mic-cancel-button { background: rgba(255,138,134,.14); border: 1px solid rgba(255,138,134,.5); color: #ff8a86; }
.mic-check-button { background: rgba(111,224,160,.14); border: 1px solid rgba(111,224,160,.5); color: #6fe0a0; }
.answer-for-me-button { background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--purple-soft); font-size: 13px; padding: 0 14px; white-space: nowrap; flex-shrink: 0; }
.speaking-status { margin: 0; color: var(--muted); font-size: 14px; text-align: center; }
.speaking-status.incorrect { color: #ff8a86; }
.speaking-transcript { margin: 0; font-size: 20px; font-weight: 700; text-align: center; min-height: 26px; }
.speaking-transcript.ruby-line { line-height: 2.5; }
.speaking-script-row { display: flex; align-items: center; gap: 14px; }
.script-toggle { padding: 0; border: 0; background: none; color: var(--purple); font-size: 12px; font-weight: 700; }
.pass-button { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.pass-button:disabled { cursor: default; opacity: .5; }
.speaking-script { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 18px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--panel-2); text-align: center; }
.speaking-script[hidden] { display: none; }
.speaking-match { color: #6fe0a0; }
.speaking-mismatch { opacity: .6; }
@keyframes take-note-sheet-in { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: translateY(0); } }
.take-note-backdrop { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 12px; background: rgba(8,7,11,.6); backdrop-filter: blur(2px); z-index: 200; }
.take-note-backdrop[hidden] { display: none; }
.take-note-sheet { width: min(480px, 100%); padding: 20px 18px 18px; border: 1px solid rgba(117,86,255,.28); border-radius: 24px; background: #181620; box-shadow: 0 -20px 50px -18px rgba(0,0,0,.75); animation: take-note-sheet-in .2s ease; }
.take-note-title { margin: 0 0 4px; font-size: 17px; }
.take-note-subtitle { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.take-note-segment-list { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.take-note-segment-chip { background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.14); color: var(--muted); font-size: 15px; font-weight: 600; padding: 9px 14px; border-radius: 11px; }
.take-note-segment-chip.selected { background: #ff8a3d; border-color: #ff8a3d; color: #2a1608; }
.take-note-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.take-note-cancel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); color: var(--text); font-weight: 700; padding: 13px; }
.take-note-add { background: var(--purple); color: white; font-weight: 700; padding: 13px; }
.contextual-dialogue-line-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.contextual-dialogue-line-actions .context-line-play-button { margin-top: 0; }
.take-note-button { display: inline-flex; align-items: center; gap: 6px; background: rgba(117,86,255,.08); border: 1.5px solid rgba(183,169,255,.55); color: var(--purple-soft); font-size: 12.5px; font-weight: 700; padding: 8px 15px; }
.take-note-button[hidden] { display: none; }
.practice-focus-card .note-item-kind { grid-row: 1 / -1; align-self: center; padding: 3px 8px; min-height: 0; font-size: 10px; }
.practice-focus-card strong { font-size: 15px; line-height: 1.3; }
.practice-focus-card strong ruby { ruby-position: over; }
.practice-focus-card strong rt { font-size: 9px; color: var(--muted); }
.practice-focus-card .reading { font-size: 12px; }
.practice-focus-card .muted { grid-column: 2; font-size: 11px; }
.explanation-toggle { grid-column: 2; justify-self: start; align-self: flex-start; margin-top: 0; padding: 0; border: 0; background: none; color: var(--purple); font-size: 11px; font-weight: 700; }
.mastery-pill { grid-column: 3; grid-row: 1 / -1; justify-self: end; align-self: center; padding: 7px 13px; border: 1px solid rgba(255,138,61,.75); border-radius: 999px; background: rgba(255,138,61,.14); color: #ff8a3d; font-size: 12px; font-weight: 800; cursor: pointer; }
.mastery-pill:hover { background: rgba(255,138,61,.24); }
.mastery-pill.is-mastered { border-color: rgba(150,140,170,.4); background: var(--panel-2); color: var(--muted); }
.mastery-pill.is-mastered:hover { border-color: rgba(255,138,61,.5); color: #ff8a3d; }
.review-panel { max-width: 640px; margin: 28px auto 0; text-align: center; }
.review-panel h2 { margin: 4px 0 8px; }
.delete-example-button { margin-top: 6px; padding: 12px 22px; border: 1px solid rgba(255,123,120,.5); border-radius: 12px; background: rgba(255,123,120,.1); color: var(--danger); font-weight: 800; cursor: pointer; }
.delete-example-button:hover { background: rgba(255,123,120,.2); }
.delete-example-button:disabled { opacity: .6; cursor: default; }
.delete-example-status { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.delete-example-status.is-error { color: var(--danger); }
.reading-toggle { align-self: flex-start; margin: -6px 0 0; padding: 0; border: 0; background: none; color: var(--purple); font-size: 12px; font-weight: 700; text-align: left; }
.target-reading-preview { min-height: 18px; margin: -6px 0 0; color: var(--muted); font-size: 12px; }
.translation-peek-toggle { align-self: flex-start; margin: 0; padding: 0; border: 0; background: none; color: var(--purple); font-size: 12px; font-weight: 700; text-align: left; }
.translation-peek-preview { min-height: 18px; margin: -6px 0 0; color: var(--muted); font-size: 12px; }
.dialogue-line-list .example-japanese { font-size: 18px; line-height: 2.5; }
.example-japanese.ruby-line, .dialogue-line-list .example-japanese { line-height: 2.5; }
ruby { ruby-position: over; }
rt { font-size: 11px; color: var(--muted); user-select: none; }
.context-line-play-button { width: 26px; height: 26px; margin-top: 6px; padding: 0; border: 1px solid rgba(117,86,255,.5); border-radius: 999px; background: rgba(117,86,255,.1); color: var(--purple); font-size: 11px; }
.context-line-play-button:disabled { cursor: default; opacity: .6; }
.practice-empty-panel { max-width: 680px; margin: 24px auto; }

.volume-author-page { max-width: 1380px; }
.volume-author-page.page { padding-top: 12px; }
.volume-author-hero { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: baseline; max-width: none; margin-bottom: 8px; }
.volume-author-hero .eyebrow { grid-column: 1; font-size: 11px !important; }
.volume-author-hero h1 { grid-column: 1; margin: 0; font-size: 30px; line-height: 1; }
.volume-author-hero p:not(.eyebrow) { grid-column: 2; grid-row: 1 / span 2; max-width: 760px; margin: 0; font-size: 13px; line-height: 1.3; align-self: end; }
.native-language-input { font-size: 18px; }
.volume-save-panel { display: grid; grid-template-columns: minmax(260px,1fr) auto; gap: 8px 12px; align-items: end; margin-bottom: 11px; padding: 11px; }
/* Same aggressively-compact treatment as .editor-panel (2/3 of that pass's already-shrunk
   sizing) — scoped to these three cards so the rest of the site's .panel-based forms are
   unaffected. */
.volume-save-panel .section-heading, .volume-scenes-panel .section-heading, .volume-array-panel .section-heading { margin-bottom: 3px; }
.volume-save-panel h2, .volume-scenes-panel h2, .volume-array-panel h2 { font-size: 11px; }
.volume-save-panel label, .volume-scenes-panel label, .volume-array-panel label { font-size: 8px; gap: 2px; }
.volume-save-panel input, .volume-save-panel select, .volume-save-panel textarea,
.volume-scenes-panel input, .volume-scenes-panel select, .volume-scenes-panel textarea,
.volume-array-panel input, .volume-array-panel select, .volume-array-panel textarea { padding: 5px 6px; font-size: 9px; border-radius: 5px; }
.volume-save-panel textarea, .volume-scenes-panel textarea, .volume-array-panel textarea { margin-top: 2px; font-size: 9px; line-height: 1.3; }
.volume-save-panel .status-line, .volume-scenes-panel .status-line, .volume-array-panel .status-line { font-size: 8px; min-height: 11px; }
.volume-save-panel .muted, .volume-scenes-panel .muted, .volume-array-panel .muted { font-size: 8px; }
.volume-save-panel .count, .volume-scenes-panel .count, .volume-array-panel .count { font-size: 9px; padding: 2px 7px; }
.volume-save-panel button, .volume-save-panel .button-link,
.volume-scenes-panel button, .volume-scenes-panel .button-link,
.volume-array-panel button, .volume-array-panel .button-link { padding: 5px 9px; font-size: 9px; min-height: 24px; }
.volume-save-panel label { margin: 0; }
.volume-save-actions { display: flex; gap: 7px; align-items: center; }
.volume-save-actions .button-link, .volume-save-actions button { min-height: 30px; padding: 7px 11px; white-space: nowrap; }
.volume-save-panel .status-line { grid-column: 1 / -1; }
.volume-language-grids { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px; }
.language-checkbox-group { flex: 1 1 240px; margin: 0; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: #100d16; }
.language-checkbox-group legend { padding: 0 3px; font-size: 8px; font-weight: 750; color: var(--muted); }
.language-checkbox { display: inline-flex; align-items: center; gap: 4px; margin: 3px 7px 3px 0; font-size: 9px; font-weight: 400; }
.language-checkbox input { width: auto; accent-color: var(--purple); }
.publish-toggle { grid-column: 1 / -1; display: flex; font-size: 9px; color: var(--muted); }
.volume-index-panel { max-width: 880px; }
.volume-index-list { display: grid; gap: 12px; }
.volume-index-row { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: #100d16; }
.volume-index-row-main { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; }
.volume-index-row strong { display: block; font-size: 19px; }
.volume-index-row p { margin: 3px 0 0; }
.volume-index-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.volume-index-toolbar button, .volume-index-toolbar .button-link { min-height: 46px; padding: 10px 16px; }
.volume-index-toolbar #volume-import-button,
.volume-index-toolbar #volume-export-button { border: 0; background: var(--purple); color: #fff; }
.volume-index-toolbar #volume-export-button:disabled { opacity: 1; cursor: not-allowed; }
.volume-select-checkbox { width: 20px; height: 20px; margin: 0; accent-color: var(--purple); cursor: pointer; }
.volume-select-checkbox:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(1); }
.volume-index-actions { display: flex; align-items: center; gap: 8px; }
.volume-index-actions button.secondary { border: 1px solid var(--border); background: var(--panel-2); color: var(--purple-soft); }
.volume-delete-button { min-height: 46px; padding: 10px 16px; border: 1px solid rgba(255,123,120,.5); background: rgba(255,123,120,.1); color: var(--danger); }
.volume-delete-clear-button { min-height: 46px; padding: 10px 16px; border: 1px solid rgba(255,123,120,.7); background: rgba(255,123,120,.22); color: var(--danger); font-weight: 800; }
.kp-delete-button { min-height: 0; padding: 6px 12px; border: 1px solid rgba(255,123,120,.5); border-radius: 8px; background: rgba(255,123,120,.1); color: var(--danger); font-size: 13px; font-weight: 750; white-space: nowrap; }
.volume-scenes-toggle { padding-left: 34px; }
.volume-scenes-toggle summary { cursor: pointer; list-style: none; color: var(--muted); font-size: 13px; font-weight: 750; }
.volume-scenes-toggle summary::-webkit-details-marker { display: none; }
.volume-scenes-toggle summary::before { content: '▸'; display: inline-block; margin-right: 8px; color: var(--muted); font-size: 12px; transition: transform .12s; }
.volume-scenes-toggle[open] summary::before { transform: rotate(90deg); }
.volume-scene-select-list { display: grid; gap: 6px; margin-top: 10px; }
.volume-scene-select-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; margin: 0; padding: 8px 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(255,255,255,.03); font-size: 14px; }
.volume-scene-select-row input { width: 17px; height: 17px; margin: 0; accent-color: var(--purple); }
.volume-scene-select-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.volume-scene-select-row small { color: var(--muted); font-size: 12px; }
.volume-package-status,
.volume-delete-status { margin: 14px 0 0; color: var(--muted); }
.volume-package-status.is-error,
.volume-delete-status.is-error { color: var(--danger); }
.volume-script-missing-warning { margin: -6px 0 18px; color: var(--danger); font-weight: 900; line-height: 1.45; overflow-wrap: anywhere; }
.volume-workspace { display: grid; grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); gap: 22px; align-items: start; }
.editor-panel { position: sticky; top: 88px; display: grid; gap: 6px; padding: 12px 13px; }
/* The editor panel packs far more fields into view than a standard .panel — these
   overrides shrink fonts/spacing scoped to it alone so every other .panel-based form
   sitewide keeps its normal (larger, touch-friendlier) sizing. Sized at 2/3 of an
   already-compact first pass — deliberately near the floor of legibility so the
   whole form fits with minimal scrolling; the phone preview to its right is a
   separate, unscoped subtree and keeps its normal (real-app-matching) sizing. */
.editor-panel .section-heading { margin-bottom: 3px; }
.editor-panel h2 { font-size: 11px; }
.editor-panel label { font-size: 8px; gap: 2px; }
.editor-panel input, .editor-panel select, .editor-panel textarea { padding: 5px 6px; font-size: 9px; border-radius: 5px; }
.editor-panel textarea { margin-top: 2px; font-size: 9px; line-height: 1.3; }
.editor-panel #panel-japanese { font-size: 10px; }
.editor-panel .status-line { font-size: 8px; min-height: 11px; }
.editor-panel .checkbox-line { font-size: 8px; }
.editor-panel .muted { font-size: 8px; }
.editor-panel .count { font-size: 9px; padding: 2px 7px; }
.volume-option-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.volume-checkbox { min-height: 20px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: #100d16; }
.interaction-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-items: end; }
.character-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; align-items: end; }
.character-controls.is-disabled, .character-controls .is-disabled { opacity: .45; }
.dimension-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 5px; align-items: end; }
.chrome-toggle { margin-top: 9px; }
.image-drop-zone { position: relative; min-height: 56px; display: grid; place-items: center; border: 1px dashed rgba(183,169,255,.45); border-radius: 8px; background: rgba(117,86,255,.08); text-align: center; cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s; }
.image-drop-zone:hover, .image-drop-zone.is-dragging { border-color: var(--purple); background: rgba(117,86,255,.16); }
.image-drop-zone strong { display: block; font-size: 9px; }
.image-drop-zone span { display: block; color: var(--muted); font-size: 7px; }
.image-drop-zone .drop-zone-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.image-drop-zone.has-image > div { display: none; }
.image-drop-zone.has-image { background: #0b0a10; }
.volume-scenes-panel { padding: 19px; margin-bottom: 19px; }
.scene-cover-drop { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border: 1px dashed rgba(183,169,255,.45); border-radius: 7px; background: rgba(117,86,255,.08); cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s; }
.scene-cover-drop:hover, .scene-cover-drop.is-dragging { border-color: var(--purple); background: rgba(117,86,255,.16); }
.scene-cover-drop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scene-cover-drop span { color: var(--muted); font-size: 13px; line-height: 1; }
.volume-scene-row { border: 1px solid var(--border); border-radius: 8px; background: #100d16; margin-bottom: 5px; overflow: hidden; }
.volume-scene-row-summary { display: flex; align-items: center; gap: 5px; padding: 5px; }
.volume-scene-row-summary .drag-handle { width: 22px; height: 22px; font-size: 9px; }
.volume-scene-row-name { flex: 1; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.volume-scene-row-body { display: flex; align-items: center; gap: 5px; padding: 0 5px 7px; }
.volume-scene-row-body .scene-name-input { flex: 1; }
.volume-cover-field { display: grid; gap: 5px; }
.volume-cover-field .field-label { color: var(--muted); font-size: 9px; font-weight: 650; }
.volume-cover-drop { width: 33vw; max-width: 427px; height: 453px; border-radius: 9px; }
.volume-cover-drop span { font-size: 21px; }
.volume-description-fields { grid-column: 1 / -1; display: grid; gap: 7px; }
.volume-description-fields .field-label { color: var(--muted); font-size: 9px; font-weight: 650; }
.volume-description-field { border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; }
.volume-description-field summary { display: flex; align-items: center; gap: 5px; padding: 5px 0; cursor: pointer; list-style: none; }
.volume-description-field summary::-webkit-details-marker { display: none; }
.volume-description-field summary::before { content: '▸'; color: var(--muted); font-size: 8px; transition: transform .12s; }
.volume-description-field[open] summary::before { transform: rotate(90deg); }
.volume-description-field .volume-description-lang-label { font-size: 9px; font-weight: 650; color: var(--muted); }
.volume-description-field .volume-description-fill-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--purple); }
.volume-description-field textarea { width: 100%; margin: 0 0 7px; }
.question-localization-item summary { cursor: pointer; list-style: none; }
.question-localization-item summary::-webkit-details-marker { display: none; }
.question-localization-item summary::before { content: '▸'; display: inline-block; margin-right: 8px; color: var(--muted); font-size: 12px; transition: transform .12s; }
.question-localization-item[open] summary::before { transform: rotate(90deg); }
.collapsible-panel { margin-top: 14px; }
.collapsible-panel summary { cursor: pointer; list-style: none; color: var(--muted); font-size: 14px; font-weight: 650; }
.collapsible-panel summary::-webkit-details-marker { display: none; }
.collapsible-panel summary::before { content: '▸'; display: inline-block; margin-right: 8px; color: var(--muted); font-size: 12px; transition: transform .12s; }
.collapsible-panel[open] summary::before { transform: rotate(90deg); }
.collapsible-panel[open] summary { margin-bottom: 10px; }
.author-actions { display: grid; grid-template-columns: 1.2fr 1.2fr .7fr; gap: 5px; }
.author-actions button { min-height: 24px; padding: 5px 8px; font-size: 9px; }
.status-line { margin: 0; min-height: 24px; font-size: 13px; }
.preview-panel { min-width: 0; padding-top: 0; }
.preview-panel .section-heading { margin-bottom: 2px; min-height: 32px; }
.preview-panel .section-heading h2 { font-size: 19px; }
.preview-panel .section-heading .button-link { padding: 7px 12px; border-radius: 9px; font-size: 14px; }
/* 402:790 approximates the real app's actual on-screen proportions for this view —
   nav bar + progress bar + a fixed 9:16 scene image, with no reserved home-indicator
   space (the OS draws that as a system overlay, not something the app itself lays
   out for) — rather than a generic full iPhone screen ratio, which left dead space
   below the content on descriptive panels. */
/* .volume-preview-shell keeps its own margin: 0 auto below — inside this flex row that
   pushes it as far as the row will allow toward the center, which in turn pushes the two
   step buttons out to the row's own left/right edges rather than hugging the phone. */
.preview-shell-flanked { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 25px; }
.panel-step-button { flex: 0 0 auto; min-width: 96px; line-height: 1.25; text-align: center; }
.volume-preview-shell { width: min(520px, calc((100vh - 72px) * 402 / 790), calc(100vw - 32px)); aspect-ratio: 402 / 790; max-width: 100%; margin: 0 auto; padding: 0; overflow: visible; }
.volume-preview-shell.has-device-chrome { width: calc(0.88 * min(520px, calc((100vh - 72px) * 402 / 790), calc(100vw - 32px))); padding: 13px; border: 2px solid #505052; border-radius: 68px; background: #0a0a0b; box-shadow: inset 0 0 0 2px #1e1e20, 0 0 0 1px rgba(255,255,255,.14), 0 26px 70px rgba(0,0,0,.7); position: relative; }
.device-speaker { display: none; }
.has-device-chrome .device-speaker { position: absolute; top: 15px; left: 50%; display: block; width: 92px; height: 7px; border-radius: 999px; background: #24202b; transform: translateX(-50%); }
.volume-panel-preview { width: 100%; height: 100%; max-width: 100%; overflow: hidden; border: 0; border-radius: 64px; background: #0b0a10; }
.volume-phone-screen { position: relative; display: flex; flex-direction: column; }
.volume-full-image { position: relative; width: 100%; height: 100%; overflow: hidden; background: #15121b; }
/* Matches TScenePlayerViewController.updateSceneCardAspectRatio's fixed 9:16 for
   descriptive panels, so a manga image sized for one renders identically (same crop
   via object-fit: cover) in both the publishing tool and the app. */
.noninteractive-panel .volume-full-image { flex: 0 0 auto; aspect-ratio: 9 / 16; height: auto; }
.volume-full-image img, .volume-landscape-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mirrors TScenePlayerViewController.configureNavigationBar/configureProgressBar — the
   real app's persistent chrome (close button + title, then a progress bar) fixed above
   every panel's content regardless of panel type. */
.phone-nav-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 50px 16px 10px; }
.phone-nav-close { width: 28px; height: 28px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; background: transparent; color: var(--purple); font-size: 20px; line-height: 1; box-shadow: none; }
.phone-nav-title { min-width: 0; margin: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 17px; font-weight: 800; }
.phone-nav-badge { padding: 7px 16px; border-radius: 999px; background: #ff5754; color: #fff; font-size: 13px; font-weight: 800; }
.phone-progress-track { flex: 0 0 auto; margin: 8px 16px 10px; height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; }
.phone-progress-fill { height: 100%; border-radius: 2px; background: var(--purple); transition: width .25s ease; }
.volume-story-caption { position: absolute; left: 34px; right: 34px; top: 54px; min-height: 118px; padding: 16px 20px; border: none; background: transparent; cursor: grab; user-select: none; }
.volume-story-caption.is-sized { overflow: hidden; }
.caption-resize-handle { position: absolute; right: 4px; bottom: 4px; width: 18px; height: 18px; cursor: se-resize; background: linear-gradient(135deg, transparent 40%, #bbb 40%, #bbb 55%, transparent 55%, transparent 65%, #bbb 65%, #bbb 80%, transparent 80%); }
.caption-tail-toggle-btn { position: absolute; left: 6px; bottom: 6px; width: 20px; height: 20px; min-height: 0; padding: 0; border: none; background: transparent; color: #bbb; font-size: 13px; line-height: 1; cursor: pointer; box-shadow: none; }
.caption-tail-toggle-btn.is-active { color: #7656ff; }
.caption-bubble { position: absolute; z-index: 0; pointer-events: none; overflow: visible; }
.caption-bubble path { fill: #fff; stroke: #050505; stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round; }
.caption-tail-handle { position: absolute; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: #7656ff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.4); cursor: grab; }
.caption-tail-handle:hover { background: #8a70ff; }
.caption-tail-handle.is-dragging { cursor: grabbing; background: #8a70ff; }
.volume-story-caption.has-audio { display: grid; grid-template-columns: minmax(0,1fr) 48px; gap: 10px; align-items: start; }
.volume-story-caption-text { min-width: 0; }
.volume-story-caption p { margin: 0; line-height: 1.38; font-weight: 800; }
p.story-caption-japanese { color: #050505; font-size: 16px; line-height: 1.9; }
.story-caption-japanese ruby { ruby-position: over; }
.story-caption-japanese rt { font-size: 9px; font-weight: 700; color: #050505; user-select: none; }
.story-caption-native { margin-top: 8px !important; color: #666; font-size: 12px; }
.story-caption-audio-btn { width: 44px; height: 44px; min-height: 0; padding: 0; place-self: start end; display: grid; place-items: center; border: 3px solid #050505; border-radius: 50%; background: #fff; color: #050505; font-size: 18px; line-height: 1; }
.story-caption-audio-btn span { display: contents; }
/* Mirrors TDescriptiveBottomTray — the single floating bottom tray the real app uses
   for every panel type: a notebook icon, an optional help icon, and the primary
   action button. */
.volume-control-tray { flex: none; display: flex; align-items: center; gap: 10px; min-height: 61px; padding: 6px; border-radius: 32px; background: #1a1820; box-shadow: 0 18px 42px rgba(0,0,0,.5); }
.volume-tray-icon { flex: none; width: 48px; height: 48px; min-height: 0; padding: 0; display: grid; place-items: center; border-radius: 50%; background: #26232e; color: #d8d8dc; font-size: 18px; line-height: 1; box-shadow: none; }
.volume-tray-icon.is-notebook svg { width: 18px; height: 18px; }
.volume-tray-icon.is-help { color: #ffbd7a; }
.volume-tray-action { flex: 1; min-width: 0; min-height: 48px; padding: 0 8px; border-radius: 24px; background: linear-gradient(135deg, #6d4bdb, #8b6be8); color: #fff; font-size: 17px; font-weight: 850; box-shadow: none; white-space: nowrap; }
.noninteractive-panel > .volume-control-tray { position: absolute; left: 16px; right: 16px; bottom: 20px; z-index: 2; }
.volume-panel-preview.translation-device { width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; gap: 0; box-shadow: none; }
.translation-panel-preview .scene-card.volume-landscape-image { aspect-ratio: 16 / 9; border-radius: 0; position: sticky; top: 0; z-index: 1; }
.translation-panel-preview .translation-content { position: relative; z-index: 2; background: #0d0b12; padding-top: 10px; }
.volume-interaction-header { flex: 0 0 72px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; padding: 0 28px 16px; background: #100e15; color: var(--text); }
.volume-interaction-header span { justify-self: center; margin-left: 54px; font-size: 20px; font-weight: 850; }
.volume-interaction-header strong { color: #aaa4b7; font-size: 22px; }
.volume-landscape-image { flex: 0 0 auto; aspect-ratio: 16 / 9; overflow: hidden; background: #2a292f; background-image: linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%), linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%); background-position: 0 0, 16px 16px; background-size: 32px 32px; }
.volume-interaction-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 20px 24px 0; overflow-y: auto; }
.translation-panel-preview .speak-target { min-width: 82px; padding: 7px 11px; font-size: 13px; }
.translation-panel-preview .native-sentence, .translation-panel-preview .to-be-translated-sentence { margin: 18px 0 24px; min-height: 72px; font-size: 23px; line-height: 1.22; }
.translation-panel-preview .answer-zone { min-height: 78px; padding-bottom: 10px; }
.translation-panel-preview .answer-zone::after { height: 2px; background: #5b5665; }
.translation-panel-preview .segment-bank { flex: 1; align-content: flex-start; justify-content: center; gap: 8px; padding: 36px 0 8px; }
.translation-panel-preview .example-segment { min-width: 66px; min-height: 50px; justify-content: center; flex-direction: column; gap: 2px; padding: 6px 12px 8px; border: 0; border-radius: 13px; background: #7050ff; box-shadow: 0 3px 0 rgba(0,0,0,.25); color: white; font-size: 17px; font-weight: 850; cursor: pointer; }
.translation-panel-preview .example-segment small { color: white; font-size: 10px; font-weight: 750; }
.translation-panel-preview .example-segment.is-used { background: #2a2040; box-shadow: none; color: rgba(255,255,255,.25); cursor: default; }
.translation-panel-preview .example-segment.is-in-answer { background: #5a3fe0; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.translation-panel-preview .answer-segments { display: flex; flex-wrap: wrap; gap: 8px; min-height: 54px; align-content: flex-start; }
.player-segment-toast { position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%); background: rgba(28,22,40,.97); border: 1px solid rgba(255,87,84,.5); color: #ff7a77; padding: 6px 18px; border-radius: 99px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 20; white-space: nowrap; }.player-segment-toast.is-visible { opacity: 1; }
.drag-ghost { box-shadow: 0 10px 32px rgba(0,0,0,.7); opacity: 0.92; border: 2px solid rgba(117,86,255,.9); }
.drag-spacer { border-radius: 13px; background: rgba(117,86,255,.12); border: 2px dashed rgba(117,86,255,.45); box-sizing: border-box; }
.translation-panel-preview .volume-control-tray { margin: 0 14px 14px; }
.translation-panel-preview .translation-tray { flex: 0 0 72px; margin: 0; padding: 12px 24px 0; grid-template-columns: 48px 48px 1fr; gap: 10px; background: rgba(15,13,20,.98); }
.translation-panel-preview .translation-tray button { height: 48px; border-radius: 14px; }
.translation-panel-preview .tray-small { background: #1b1722; color: #7b5bff; font-size: 21px; }
.translation-panel-preview .continue-button { width: 104px; background: #221d2b; color: #65517e; font-size: 16px; }
.hearing-panel-preview .hearing-sentence-spacer { visibility: hidden; min-height: 0; margin: 8px 0; }
.hearing-panel-preview .segment-bank { padding-top: 24px; }
.hearing-panel-preview .translation-content { padding-top: 10px; }
.hearing-panel-preview .hearing-audio-player { margin-top: 12px; }
.hearing-no-segments-hint { margin: 24px 12px; font-size: 10px; color: rgba(255,255,255,.35); text-align: center; line-height: 1.5; }
.hearing-fixed-text { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 8px; margin-bottom: 6px; color: #fff; font-size: 17px; font-weight: 850; }
.hearing-fixed-seg { display: inline-flex; flex-direction: column; align-items: center; padding: 4px 10px 5px; border-radius: 12px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); }
.hearing-fixed-seg small { font-size: 10px; font-weight: 700; min-height: 13px; line-height: 1; }
.hearing-audio-player { display: flex; align-items: center; gap: 10px; background: rgba(123,97,255,.12); border: 1px solid rgba(123,97,255,.50); border-radius: 14px; padding: 10px 16px; margin-bottom: 8px; position: relative; }
.hearing-char-player-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; margin-left: -10px; }
.hearing-panel-preview .hearing-char-player-row { margin-top: 12px; }
.hearing-char-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(123,97,255,.4); background: #2a2535; }
.hearing-char-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hearing-audio-player.hearing-char-bubble { flex: 1; border-radius: 4px 14px 14px 14px; margin-top: 0; margin-bottom: 0; }
.hearing-audio-player.hearing-char-bubble::before { content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 12px; height: 12px; background: rgba(123,97,255,.12); border-left: 1px solid rgba(123,97,255,.50); border-bottom: 1px solid rgba(123,97,255,.50); }
/* Speaking panel preview — bubble (audio player, furigana line, mic button) with the
   character's avatar to its right, patterned after rpgPanelHTML's own "YOUR TURN" bubble
   (`.rpg-user-message`/`.rpg-user-turn-bubble`), which places the avatar the same way. */
.speaking-message { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; margin-top: 12px; }
.speaking-bubble { position: relative; background: #1c1838; border: 1px solid rgba(123,97,255,.45); box-shadow: 0 0 14px rgba(123,97,255,.12); border-radius: 14px 5px 14px 14px; padding: 12px; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.speaking-bubble .hearing-audio-player { margin: 0; }
.speaking-bubble-text { margin: 0; }
.speaking-bubble-text-plain { margin: 0; color: #fff; font-size: 15px; font-weight: 750; }
.speaking-mic-btn { align-self: center; width: 44px; height: 44px; border-radius: 50%; background: #7c3aed; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.speaking-mic-icon { font-size: 18px; line-height: 1; }
.speaking-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(123,97,255,.4); background: #2a2535; margin-top: 4px; }
.speaking-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.speaking-avatar-placeholder { background: #d1c4e9; }
.hearing-player-btn { flex: none; width: 36px; height: 36px; border-radius: 50%; border: none; background: #7B61FF; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; padding: 0; min-width: unset; box-shadow: 0 4px 12px -6px #7B61FF; }
.hearing-player-btn:hover { filter: brightness(1.12); }
.hearing-player-btn:disabled { background: #4a4558; box-shadow: none; cursor: default; opacity: .6; }
.hearing-audio-player.is-no-audio { opacity: .55; }
.hearing-audio-player.is-playing .hearing-player-btn { animation: hearing-btn-pulse 1.2s ease-in-out infinite alternate; }
@keyframes hearing-btn-pulse { from { box-shadow: 0 4px 12px -6px #7B61FF; } to { box-shadow: 0 4px 16px 0 rgba(123,97,255,.5); } }
.hearing-player-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hearing-player-track { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; user-select: none; }
.hearing-player-rail-bg, .hearing-player-rail-fill { position: absolute; left: 0; right: 0; height: 7px; border-radius: 5px; pointer-events: none; }
.hearing-player-rail-bg { background: rgba(255,255,255,.25); } /* overridden per-player by inline gradient */
.hearing-player-rail-fill { background: #fff; clip-path: inset(0 100% 0 0 round 5px); } /* overridden per-player by inline gradient */
.hearing-player-thumb { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid rgba(255,255,255,.6); transform: translateX(-50%); pointer-events: none; }
.hearing-player-divider { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 2px; height: 12px; border-radius: 1px; background: rgba(14,13,18,.55); pointer-events: none; }
#hearing-segment-selector { padding: 14px 0 4px; }
.form-section-label { margin: 0 0 4px; font-size: 8px; font-weight: 700; color: var(--muted); }
.hearing-segment-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.hearing-seg-toggle { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 10px 7px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12); color: var(--muted); font-size: 15px; font-weight: 850; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.hearing-seg-toggle small { font-size: 10px; font-weight: 700; min-height: 12px; }
.hearing-seg-toggle.is-active { background: rgba(112,80,255,.22); border-color: rgba(112,80,255,.7); color: #c8b8ff; }
.character-speech-layout { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; align-items: start; margin: 24px -8px 0 -24px; }
.character-speaker { display: grid; justify-items: center; gap: 5px; color: #c7b9ff; font-size: 12px; font-weight: 800; }
.character-speaker img { width: 38px; height: 38px; object-fit: cover; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.78); }
.character-speech-content { display: grid; gap: 14px; min-width: 0; }
.character-speech-bubble { position: relative; padding: 16px; border: 1.5px solid rgba(117,86,255,.6); border-radius: 18px; background: rgba(51,39,89,.35); box-shadow: inset 0 0 0 1px rgba(117,86,255,.14); }
.character-speech-bubble .to-be-translated-sentence { margin: 0; font-size: 17px; line-height: 1.3; color: #e7e1ff; }
.character-answer-lines { height: 2px; margin: 0 4px; border-radius: 999px; background: #504b5c; }
.translation-panel-preview .character-segment-bank { flex: 0 0 auto; padding: 28px 8px 0; }
.translation-panel-preview .character-segment-bank .example-segment { min-width: 92px; min-height: 54px; border-radius: 15px; font-size: 18px; }
.manga-frame { width: 402px; height: 874px; max-width: min(100%, calc(100vw - 96px)); max-height: calc(100vh - 250px); overflow: hidden; display: grid; place-items: center; background: linear-gradient(145deg,#1c1824,#0d0b12); }
.manga-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.manga-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); font-weight: 850; letter-spacing: .08em; background: repeating-linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.035) 12px, transparent 12px, transparent 24px); }
.volume-caption { padding: 18px; border-top: 1px solid var(--border); background: #0b0a10; }
.volume-caption h2 { margin: 12px 0 6px; font-size: 24px; line-height: 1.28; }
.volume-caption .translation { margin: 6px 0 0; font-size: 16px; color: var(--muted); }
.volume-caption .example-segments { margin-top: 14px; }
.volume-caption .example-audio-player { margin-top: 14px; }
.choice-panel-preview { background: #131217; }
.choice-panel-preview .choice-scene-image { flex: none; aspect-ratio: 16 / 9; border-radius: 0; }
.choice-chat-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 18px 14px 10px; overflow: hidden; }
.choice-npc-row { display: flex; align-items: flex-start; gap: 9px; max-width: 90%; }
.choice-npc-bubble { position: relative; background: #fff; border-radius: 4px 16px 16px 16px; padding: 11px 14px; margin-top: 2px; }
.choice-npc-bubble::before { content: ""; position: absolute; left: -5px; top: 11px; width: 10px; height: 10px; background: #fff; transform: rotate(45deg); }
.choice-npc-jp-row { display: flex; align-items: center; gap: 6px; }
.choice-npc-jp { margin: 0; font-size: 15px; line-height: 1.4; color: #1B1922; }
.choice-npc-en { margin: 3px 0 0; font-size: 11px; line-height: 1.35; color: #8b8893; font-style: italic; }
.choice-npc-audio-btn { flex: none; width: 22px; height: 22px; min-height: 0; padding: 0; place-self: auto; border-width: 2px; font-size: 10px; }
.choice-player-row { display: flex; align-items: flex-start; flex-direction: row-reverse; gap: 9px; align-self: flex-end; max-width: 98%; }
.choice-player-area { position: relative; flex: 1; background: rgba(123,97,255,.10); border: 1px solid rgba(123,97,255,.30); border-radius: 16px 4px 16px 16px; padding: 12px; }
.choice-player-area::before { content: ""; position: absolute; right: -5px; top: 12px; width: 10px; height: 10px; background: rgba(123,97,255,.10); border-top: 1px solid rgba(123,97,255,.30); border-right: 1px solid rgba(123,97,255,.30); transform: rotate(45deg); }
.choice-avatar-col { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.choice-avatar-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(123,97,255,.5); box-shadow: 0 2px 6px -2px rgba(109,75,219,.5); }
.choice-avatar-name { font-size: 10px; font-weight: 600; color: #c4b4ff; }
.choice-label { font-size: 8px; letter-spacing: .13em; color: #9b97a6; margin-bottom: 10px; text-transform: uppercase; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-btn { display: flex; align-items: center; justify-content: center; background: #6D4BDB; border: none; border-radius: 12px; padding: 10px 8px; min-height: 54px; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.28); width: 100%; }
.choice-btn-text { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.3; text-align: center; }
.choice-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice-panel-preview .volume-control-tray { margin: 0 14px 14px; }
.choice-npc-row .choice-avatar-col { gap: 3px; }
.choice-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#choice-options-section .choice-options-grid { grid-template-columns: 1fr; gap: 12px; }
#choice-options-section .input-pick-row { gap: 8px; }
#choice-options-section .icon-pick-btn { width: 42px; height: 42px; border-radius: 10px; font-size: 18px; }
.volume-script-loader { margin-top: 24px; }
.script-loader-controls { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.script-loader-controls select { flex: 1; }
.script-expressions-container { margin-top: 14px; display: grid; gap: 10px; max-height: 320px; overflow-y: auto; }
.script-expression-group { display: flex; align-items: flex-start; gap: 10px; }
.script-expression-id { flex: none; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; min-width: 64px; }
.script-expression-sentences { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.script-sentence-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); color: var(--text); font-size: 13px; cursor: pointer; text-align: left; }
.script-sentence-btn:hover { border-color: var(--purple-soft); background: rgba(123,97,255,.08); }
.script-sentence-version { font-size: 10px; font-weight: 700; color: var(--muted); background: rgba(255,255,255,.06); border-radius: 6px; padding: 1px 5px; flex: none; }
.volume-array-panel { margin-top: 16px; padding: 19px; margin-bottom: 19px; }
.volume-panel-list { display: grid; gap: 8px; }
.volume-panel-row { display: grid; grid-template-columns: 28px 48px minmax(0,1fr) auto; gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--border); border-radius: 11px; background: #100d16; }
.volume-panel-row.is-hidden-panel { border-color: rgba(255,255,255,.12); opacity: .68; }
.volume-array-panel .drag-handle { width: 25px; height: 29px; padding: 0; border-radius: 8px; background: var(--panel-2); color: var(--purple-soft); cursor: grab; }
.volume-row-thumb { width: 48px; height: 56px; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); color: var(--muted); font-size: 8px; font-weight: 800; }
.volume-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.volume-panel-row strong { display: block; font-size: 12px; }
.volume-panel-row p { margin: 1px 0; color: var(--text); font-size: 9px; }
.volume-panel-row .row-actions { gap: 7px; }
.volume-panel-row .row-actions button { padding: 6px 8px; font-size: 9px; }
.volume-json-output { min-height: 120px; max-height: 360px; margin: 18px 0 0; overflow: auto; white-space: pre-wrap; border: 1px solid var(--border); border-radius: 14px; background: #08070b; color: #cfc8dc; padding: 16px; font-size: 12px; }
.volume-array-panel .volume-json-output { min-height: 80px; max-height: 240px; margin: 12px 0 0; padding: 11px; font-size: 8px; }
.volume-player, .volume-overview { position: fixed; inset: 0; z-index: 60; display: grid; grid-template-rows: auto 1fr; gap: 18px; padding: 26px; background: rgba(5,4,9,.94); backdrop-filter: blur(18px); overflow: auto; }
.volume-player[hidden], .volume-overview[hidden] { display: none; }
.volume-player-toolbar { width: min(980px, 100%); margin: 0 auto; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px; }
.volume-player-toolbar .translation-close { display: grid; place-items: center; padding: 0; line-height: 1; }
.volume-player-toolbar strong { text-align: center; color: var(--muted); }
.volume-player-actions { display: flex; justify-content: flex-end; gap: 10px; }
.volume-player-actions .button-link { min-width: 100px; padding: 12px 18px; }
.volume-player #player-shell { align-self: start; }
.volume-overview { overflow: hidden; overscroll-behavior: contain; }
.volume-overview-scroll { min-width: 0; min-height: 0; display: flex; gap: 28px; align-items: flex-start; overflow-x: auto; overflow-y: hidden; padding: 0 max(26px, calc((100vw - 1240px) / 2)) 64px; overscroll-behavior: contain; scroll-behavior: auto; }
.volume-overview-card { flex: 0 0 auto; width: 330px; max-width: calc(100vw - 68px); display: grid; gap: 12px; }
.volume-overview-card-header { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 32px; color: var(--muted); }
.volume-overview-card-header span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; border: 1px solid rgba(123,97,255,.28); background: rgba(123,97,255,.12); color: var(--purple-soft); font-size: 13px; font-weight: 800; }
.volume-overview-card-header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 14px; }
.volume-overview-card-header em { padding: 4px 8px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--muted); font-style: normal; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.volume-overview-phone-stage { position: relative; width: 100%; aspect-ratio: 402 / 874; overflow: visible; }
.volume-overview-card.is-wide .volume-overview-phone-stage { aspect-ratio: 812 / 874; }
.volume-preview-shell.volume-overview-shell { position: absolute; top: 0; left: 0; width: var(--overview-base-width, 402px); max-width: none; margin: 0; transform: scale(var(--overview-scale, .821)); transform-origin: top left; }
.volume-preview-shell.volume-overview-shell.is-rpg { width: var(--overview-base-width, 812px); }
.volume-overview-card.is-wide { width: min(660px, calc(100vw - 68px)); }
.volume-overview-branch-group { flex: 0 0 auto; display: flex; gap: 20px; align-items: flex-start; padding: 20px 20px 24px; border-radius: 24px; background: rgba(123,97,255,.08); border: 1px solid rgba(123,97,255,.22); }
@media (max-width: 1050px) { .volume-workspace { grid-template-columns: 1fr; }.editor-panel { position: static; }.preview-panel { overflow-x: auto; } }
@media (max-width: 760px) { .volume-save-panel, .volume-option-grid, .interaction-controls, .character-controls, .dimension-grid, .author-actions, .volume-panel-row, .volume-index-row { grid-template-columns: 1fr; }.volume-save-actions { flex-wrap: wrap; }.volume-row-thumb { width: 100%; height: 140px; }.volume-player, .volume-overview { padding: 14px; }.volume-player-toolbar { grid-template-columns: 48px 1fr auto; }.volume-player-actions .button-link { min-width: 72px; padding: 10px 12px; }.volume-overview-scroll { gap: 18px; padding-inline: 8px; }.volume-overview-card { max-width: calc(100vw - 44px); }.volume-overview-branch-group { gap: 14px; padding: 14px 14px 18px; } }
/* Expression picker dialog */
.expression-picker-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); color: var(--text); padding: 0; width: min(800px, 95vw); height: min(78vh, 720px); grid-template-rows: auto auto 1fr; overflow: hidden; }
.expression-picker-dialog[open] { display: grid; }
.expression-picker-dialog:not([open]) { display: none; }
.expression-picker-dialog::backdrop { background: rgba(5,4,9,.78); backdrop-filter: blur(8px); }
.expression-picker-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.expression-picker-header strong { font-size: 17px; }
.expression-picker-filters { display: flex; align-items: stretch; border-bottom: 1px solid var(--border); }
.expression-picker-filters .expression-picker-search { flex: 1; border-bottom: 0; }
.expression-picker-filters select#expression-picker-scene-filter { border: 0; border-left: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 12px 16px; font: inherit; font-size: 14px; outline: none; max-width: 40%; }
.expression-picker-search { display: block; width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--border); background: var(--panel-2); color: var(--text); padding: 12px 20px; font: inherit; font-size: 15px; outline: none; }
.expression-picker-search:focus { background: rgba(123,97,255,.07); }
.expression-picker-scroll { overflow-y: auto; min-height: 0; }
.expression-picker-table { width: 100%; border-collapse: collapse; }
.expression-picker-table thead { position: sticky; top: 0; background: var(--panel-2); z-index: 1; }
.expression-picker-table th { padding: 9px 14px; font-size: 12px; font-weight: 700; color: var(--muted); text-align: left; border-bottom: 1px solid var(--border); }
.expression-picker-table th.is-selected-level { color: var(--purple-soft); }
.expression-picker-table td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: top; }
.expression-picker-table tr:last-child td { border-bottom: 0; }
.expr-col-id { width: 88px; font-size: 11px; font-weight: 700; color: var(--muted); padding: 10px 8px; white-space: nowrap; vertical-align: middle; }
.expr-col-cell { min-width: 180px; padding: 10px 10px; font-size: 13px; line-height: 1.45; }
.expr-col-cell.is-empty { color: var(--muted); }
.expr-col-cell.is-selected-level { background: rgba(123,97,255,.07); }
.expr-row { cursor: pointer; }
.expr-row:hover td { background: rgba(123,97,255,.13); }
.expr-row:hover td.is-selected-level { background: rgba(123,97,255,.22); }
.expr-row.no-selected-level { opacity: .45; cursor: default; }
.expr-cell-translation { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); line-height: 1.35; }
/* Level segmented control */
.preview-level-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.level-segmented-control { display: flex; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; padding: 3px; gap: 2px; }
.level-seg-btn { background: transparent; border-radius: 7px; padding: 5px 11px; font-size: 12px; font-weight: 700; color: var(--muted); }
.level-seg-btn.is-active { background: var(--purple); color: #fff; }
.level-seg-btn:hover:not(.is-active) { color: var(--text); background: rgba(255,255,255,.05); }
/* Field with expression pick */
.field-with-pick { display: flex; flex-direction: column; gap: 0; }
.field-with-pick[hidden] { display: none; }
.field-pick-header { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 3px; }
.field-pick-header label { font-weight: 700; font-size: 8px; }
.pick-expr-btn { flex: none; padding: 3px 7px; border-radius: 5px; font-size: 8px; font-weight: 700; background: var(--panel-2); color: var(--purple-soft); border: 1px solid var(--border); cursor: pointer; white-space: nowrap; }
.pick-expr-btn:hover { border-color: rgba(123,97,255,.6); background: rgba(123,97,255,.08); }
/* Input with icon pick button (choice inputs) */
.input-pick-row { display: flex; gap: 5px; align-items: center; margin-top: 6px; }
.input-pick-row input { flex: 1; margin-top: 0 !important; }
.icon-pick-btn { flex: none; width: 30px; height: 30px; padding: 0; border-radius: 7px; font-size: 13px; background: var(--panel-2); color: var(--purple-soft); border: 1px solid var(--border); display: grid; place-items: center; cursor: pointer; }
.icon-pick-btn:hover { border-color: rgba(123,97,255,.6); background: rgba(123,97,255,.08); }
/* Native picker dialog (choice A-D in volume builder) */
.native-picker-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); color: var(--text); padding: 0; width: min(560px, 95vw); height: min(60vh, 560px); grid-template-rows: auto auto 1fr; overflow: hidden; }
.native-picker-dialog[open] { display: grid; }
.native-picker-dialog:not([open]) { display: none; }
.native-picker-dialog::backdrop { background: rgba(5,4,9,.78); backdrop-filter: blur(8px); }
.panel-json-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); color: var(--text); padding: 0; width: min(640px, 95vw); height: min(70vh, 620px); grid-template-rows: auto 1fr auto; overflow: hidden; }
.panel-json-dialog[open] { display: grid; }
.panel-json-dialog:not([open]) { display: none; }
.panel-json-dialog::backdrop { background: rgba(5,4,9,.78); backdrop-filter: blur(8px); }
.panel-json-dialog .volume-json-output { margin: 14px 20px; height: 100%; max-height: none; }
.panel-json-dialog #copy-panel-json { margin: 0 20px 18px; justify-self: start; }
.panel-goal-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); color: var(--text); padding: 0; width: min(560px, 95vw); height: min(80vh, 640px); grid-template-rows: auto 1fr auto; overflow: hidden; }
.panel-goal-dialog[open] { display: grid; }
.panel-goal-dialog:not([open]) { display: none; }
.panel-goal-dialog::backdrop { background: rgba(5,4,9,.78); backdrop-filter: blur(8px); }
.panel-goal-fields { margin: 14px 20px; overflow-y: auto; display: grid; gap: 14px; }
.panel-goal-fields label { display: grid; gap: 6px; font-size: 13px; font-weight: 650; color: var(--muted); }
.panel-goal-fields textarea { font-size: 14px; }
.panel-goal-dialog #save-panel-goal { margin: 0 20px 18px; justify-self: start; }
/* `.translation-close`'s own `line-height: 36px` doesn't perfectly center a glyph inside this
   dialog's own smaller close button — same fix already used for `.volume-player-toolbar
   .translation-close`, which has the identical problem. */
.panel-goal-dialog .translation-close { display: grid; place-items: center; padding: 0; line-height: 1; font-size: 16px; }
.panel-goal-summary { margin: -4px 0 4px; font-size: 12px; line-height: 1.5; white-space: pre-line; }
/* Practice cover cropper */
.practice-cover-crop-dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; border: 1px solid var(--border); border-radius: 20px; background: var(--panel); color: var(--text); padding: 0; width: min(760px, 95vw); max-height: 92vh; grid-template-rows: auto 1fr auto; overflow: hidden; }
.practice-cover-crop-dialog[open] { display: grid; }
.practice-cover-crop-dialog:not([open]) { display: none; }
.practice-cover-crop-dialog::backdrop { background: rgba(5,4,9,.78); backdrop-filter: blur(8px); }
.practice-cover-crop-dialog .translation-close { display: grid; place-items: center; padding: 0; line-height: 1; font-size: 16px; }
.practice-cover-crop-body { overflow: auto; padding: 16px 20px; display: flex; align-items: center; justify-content: center; min-height: 0; }
.practice-cover-crop-stage { position: relative; line-height: 0; touch-action: none; user-select: none; overflow: hidden; }
.practice-cover-crop-stage img { display: block; max-width: 100%; max-height: 58vh; -webkit-user-drag: none; }
.practice-cover-crop-box { position: absolute; box-sizing: border-box; border: 1.5px solid #fff; box-shadow: 0 0 0 9999px rgba(5,4,9,.6); cursor: move; }
.practice-cover-crop-handle { position: absolute; width: 14px; height: 14px; background: #fff; border: 1px solid var(--purple); border-radius: 3px; }
.practice-cover-crop-handle[data-corner="nw"] { top: -8px; left: -8px; cursor: nwse-resize; }
.practice-cover-crop-handle[data-corner="ne"] { top: -8px; right: -8px; cursor: nesw-resize; }
.practice-cover-crop-handle[data-corner="sw"] { bottom: -8px; left: -8px; cursor: nesw-resize; }
.practice-cover-crop-handle[data-corner="se"] { bottom: -8px; right: -8px; cursor: nwse-resize; }
.practice-cover-crop-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 20px 18px; }
.practice-cover-crop-actions .muted { font-size: 12px; color: var(--muted); }
.native-picker-list { padding: 10px; display: grid; gap: 5px; }
.native-picker-item { text-align: left; padding: 11px 16px; border-radius: 12px; background: transparent; border: 1px solid transparent; font-size: 15px; color: var(--text); cursor: pointer; font-weight: 500; line-height: 1.4; }
.native-picker-item:hover { background: rgba(123,97,255,.1); border-color: rgba(123,97,255,.3); color: var(--purple-soft); }
/* Native script editor page */
.native-script-page .native-script-workspace { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; }
.ns-sidebar { position: sticky; top: 88px; }
.ns-create-form { display: flex; gap: 8px; margin-bottom: 18px; }
.ns-create-form input { flex: 1; padding: 10px 12px; font-size: 14px; }
.ns-create-form button { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
.ns-script-list { display: grid; gap: 6px; }
.ns-script-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; text-align: left; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; }
.ns-script-item:hover { border-color: rgba(123,97,255,.5); }
.ns-script-item.is-active { border-color: var(--purple); background: rgba(123,97,255,.12); color: var(--purple-soft); }
.ns-script-item-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-script-item-count { background: var(--panel); border: 1px solid var(--border); color: var(--muted); border-radius: 999px; padding: 2px 8px; font-size: 12px; flex: none; }
.ns-editor-area { display: grid; gap: 0; }
.ns-no-selection { display: flex; align-items: center; justify-content: center; min-height: 260px; }
.ns-title-row { display: flex; align-items: center; gap: 12px; }
.ns-title-form { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.ns-title-form input { flex: 1; padding: 10px 12px; font-size: 15px; }
.ns-title-form button { padding: 10px 14px; font-size: 13px; }
.ns-form-actions { margin-top: 10px; }
.ns-sentence-list { display: grid; gap: 8px; }
.ns-sentence-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.ns-sentence-row:last-child { border-bottom: 0; }
.ns-drag-handle { flex: none; height: 36px; width: 32px; padding: 0; font-size: 16px; }
.ns-sentence-body { flex: 1; min-width: 0; }
.ns-sentence-text { margin: 0; font-size: 16px; line-height: 1.5; padding-top: 6px; }
.ns-sentence-translations { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ns-translation-chip { font-size: 12px; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; }
.ns-translation-chip strong { color: var(--purple-soft); margin-right: 4px; }
.ns-sentence-edit-form { padding-top: 4px; }
.ns-sentence-edit-form textarea { font-size: 15px; margin-top: 0; }
.ns-edit-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 8px 0 3px; }
.ns-edit-label:first-of-type { margin-top: 0; }
.ns-edit-actions { display: flex; gap: 8px; margin-top: 8px; }
.ns-edit-actions button { padding: 8px 14px; font-size: 13px; }
.ns-sentence-actions { display: flex; gap: 6px; align-items: center; flex: none; padding-top: 4px; }
.ns-sentence-actions button { padding: 7px 10px; border-radius: 9px; font-size: 12px; font-weight: 700; }
.status-line { margin: 0; font-size: 13px; }
/* Native script loader in volume builder */
.ns-loader-select-row { display: flex; gap: 8px; align-items: center; }
.ns-loader-select-row select { flex: 1; }
.ns-loader-sentences { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.ns-sentence-chip { padding: 7px 12px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: border-color .12s, background .12s; }
.ns-sentence-chip:hover { border-color: rgba(123,97,255,.6); background: rgba(123,97,255,.1); color: var(--purple-soft); }
@media (max-width: 760px) { .native-script-page .native-script-workspace { grid-template-columns: 1fr; }.ns-sidebar { position: static; } }

/* RPG two-phone layout */
.volume-preview-shell.is-rpg { aspect-ratio: 812 / 874; width: min(812px, calc((100vh - 72px) * 812 / 874), calc(100vw - 32px)); }
.rpg-panel-preview { display: flex; gap: 6px; width: 100%; height: 100%; background: #0b0a10; border-radius: 0; overflow: hidden; padding: 0; }
.rpg-phone { flex: 1 1 0; min-width: 0; display: flex; }
.rpg-phone-chrome { flex: 1; display: flex; flex-direction: column; border: 2px solid #505052; border-radius: 60px; background: #0a0a0b; box-shadow: inset 0 0 0 2px #1e1e20, 0 0 0 1px rgba(255,255,255,.10); overflow: hidden; }
.rpg-phone-inner { display: flex; flex-direction: column; flex: 1; background: #0b0a10; border-radius: 58px; overflow: hidden; }

/* RPG nav bar */
.rpg-nav, .rpg-help-header { display: flex; align-items: center; padding: 6px 10px 8px; gap: 6px; border-bottom: 1px solid rgba(255,255,255,.07); flex: none; }
.rpg-nav-btn { font-size: 13px; color: #a78bfa; background: none; border: none; padding: 3px 5px; cursor: pointer; flex: none; line-height: 1; }
.rpg-nav-center { flex: 1; text-align: center; overflow: hidden; }
.rpg-nav-title { display: block; font-size: 10px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpg-nav-subtitle { display: block; font-size: 8px; color: rgba(255,255,255,.4); margin-top: 1px; }
.rpg-panel-preview .rpg-scene-image { flex: none; aspect-ratio: 16 / 9; border-radius: 0; }

/* RPG chat body (left phone) */
.rpg-chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 8px; display: flex; flex-direction: column; gap: 8px; background: #120f1c; }
.rpg-npc-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; }
.rpg-npc-avatar-placeholder { width: 38px; height: 38px; border-radius: 50%; background: #d1c4e9; flex: none; }
.rpg-npc-avatar-spacer { width: 38px; flex: none; }
.rpg-npc-caption { display: flex; align-items: center; gap: 4px; }
.rpg-npc-name { font-size: 9px; font-weight: 700; color: #fff; }
.rpg-listen-btn { font-size: 8px; color: #7c3aed; background: none; border: none; padding: 2px 4px; cursor: pointer; flex: none; }
.rpg-npc-jp { margin: 0 0 2px; font-size: 10px; font-weight: 700; color: #111; line-height: 1.4; }
.rpg-npc-tl { margin: 0; font-size: 9px; color: #666; line-height: 1.3; }
.rpg-user-row { display: flex; justify-content: flex-end; padding-right: 2px; }
.rpg-user-avatar { font-size: 9px; font-weight: 700; color: #fff; background: #7c3aed; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }

/* RPG your-turn card (bottom of left phone) */
.rpg-your-turn-card { flex: none; border-top: 1px solid rgba(123,97,255,.3); background: #0d0b17; padding: 8px 10px; }
.rpg-mic-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.rpg-mic-btn { position: relative; width: 30px; height: 30px; border-radius: 50%; background: #7c3aed; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; }
.rpg-mic-pulse { position: absolute; top: 50%; left: 50%; margin-top: -19px; margin-left: -19px; width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(123,97,255,.4); animation: rpg-pulse 1.6s ease-in-out infinite; }
@keyframes rpg-pulse { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.18); opacity: .2; } }
.rpg-mic-icon { font-size: 13px; line-height: 1; }
.rpg-mic-hint { font-size: 8.5px; color: rgba(255,255,255,.55); flex: 1; }
.rpg-action-row { display: flex; gap: 5px; }
.rpg-action-btn { flex: 1; padding: 5px 4px; font-size: 8.5px; font-weight: 600; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.8); cursor: pointer; white-space: nowrap; }
.rpg-action-btn.is-help { border-color: rgba(123,97,255,.4); color: #a78bfa; }

/* RPG help panel (right phone) */
.rpg-help-title-en { font-size: 7px; font-weight: 500; color: rgba(255,255,255,.4); letter-spacing: .05em; }
.rpg-help-body { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.rpg-help-instructions { margin: 0 0 2px; font-size: 9.5px; color: rgba(255,255,255,.45); text-align: center; }
.rpg-help-section { display: flex; flex-direction: column; gap: 8px; background: #1c1a28; border-radius: 12px; padding: 10px; }
.rpg-help-message { margin: 0; font-size: 10px; color: #fff; font-weight: 600; }
.rpg-help-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rpg-help-btn { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px; background: rgba(255,255,255,.1); border: none; border-radius: 10px; cursor: pointer; min-width: 0; }
.rpg-help-btn-image { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: 7px; overflow: hidden; background: #2a292f; background-image: linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%), linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%); background-position: 0 0, 8px 8px; background-size: 16px 16px; }
.rpg-help-btn-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpg-help-btn-jp { font-size: 10px; font-weight: 600; color: #fff; line-height: 1.3; text-align: center; }
.rpg-help-empty { font-size: 10px; color: rgba(255,255,255,.3); text-align: center; padding: 20px 0; margin: 0; }
.rpg-npc-message { display: flex; flex-direction: row; align-items: flex-start; gap: 7px; max-width: 95%; }
.rpg-npc-avatar-col { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; }
.rpg-npc-bubble { background: #fff; border-radius: 5px 14px 14px 14px; padding: 8px 11px; flex: 1; min-width: 0; }
.rpg-npc-message + .rpg-npc-message .rpg-npc-bubble { border-radius: 14px; }
.rpg-placeholder { color: #999 !important; font-style: italic; }
.rpg-user-message { display: flex; flex-direction: row; align-items: flex-start; gap: 7px; width: 100%; padding-left: 28px; margin-top: 20px; }
.rpg-user-turn-bubble { position: relative; background: #1c1838; border: 1px solid rgba(123,97,255,.45); box-shadow: 0 0 14px rgba(123,97,255,.12); border-radius: 14px 5px 14px 14px; padding: 10px 11px 5px; flex: 1; min-width: 0; min-height: 240px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rpg-your-turn-label { margin: 0; font-size: 7px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); align-self: flex-start; }
.rpg-user-turn-bubble .rpg-mic-btn { width: 54px; height: 54px; flex: none; position: absolute; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); }
.rpg-user-turn-bubble .rpg-mic-pulse { width: 64px; height: 64px; margin-top: -32px; margin-left: -32px; }
.rpg-user-turn-bubble .rpg-action-row { width: 100%; margin-top: auto; }
.rpg-user-turn-bubble .rpg-action-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.9); padding: 7px 4px; font-size: 9.5px; }
.rpg-user-turn-bubble .rpg-action-btn.is-help { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.9); }

/* RPG authoring form */
.rpg-author-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rpg-author-section-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--purple-soft); }
.rpg-author-add-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(123,97,255,.12); border: 1px solid rgba(123,97,255,.35); border-radius: 8px; padding: 5px 10px; cursor: pointer; color: var(--purple-soft); font-size: 12px; font-weight: 700; }
.rpg-author-add-btn:hover { background: rgba(123,97,255,.2); }
.rpg-author-hint { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.rpg-author-empty { margin: 4px 0 8px; font-size: 12px; color: var(--muted); font-style: italic; }
.rpg-intent-item { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.rpg-intent-remove-btn { align-self: flex-start; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 0; line-height: 1; }
.rpg-intent-remove-btn:hover { color: #f87171; }
#rpg-dialogues-list, #rpg-help-cards-list { display: flex; flex-direction: column; gap: 10px; }
.rpg-dialogue-card, .rpg-help-card-editor { background: #161520; border: 1px solid #26242f; border-radius: 12px; padding: 12px; }
.rpg-card-header { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.rpg-card-badge { width: 20px; height: 20px; border-radius: 6px; background: rgba(123,97,255,.2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--purple-soft); flex: none; }
.rpg-card-badge.is-help { background: rgba(226,101,92,.18); color: #eaa39c; }
.rpg-card-header-label { flex: 1; font-size: 12px; font-weight: 700; color: var(--text-secondary, #cfccd8); }
.rpg-card-remove-btn { width: 24px; height: 24px; border-radius: 7px; border: 1px solid #2f2c39; background: transparent; color: var(--muted); cursor: pointer; font-size: 11px; display: flex; align-items: center; justify-content: center; flex: none; }
.rpg-card-remove-btn.is-small { width: 28px; height: 28px; border-radius: 8px; }
.rpg-card-remove-btn:hover { border-color: rgba(255,80,80,.4); color: #ff6b6b; }
.rpg-sub-label { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.rpg-sub-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.rpg-sub-label-row .rpg-sub-label { margin-bottom: 0; }
.rpg-char-select { flex: 1; font-size: 12px; padding: 4px 7px; border-radius: 8px; background: #1f1d29; border: 1px solid #2f2c39; color: var(--text); min-width: 0; }
.rpg-dialogue-card textarea, .rpg-dialogue-card input[type=text], .rpg-help-card-editor input[type=text], .rpg-help-card-editor textarea { width: 100%; background: #1f1d29; border: 1px solid #2f2c39; border-radius: 9px; padding: 8px 11px; font-size: 13.5px; color: var(--text); margin-bottom: 8px; resize: none; }
.rpg-dialogue-card textarea:last-child, .rpg-help-card-editor input:last-child { margin-bottom: 0; }
.rpg-dialogue-card textarea[lang=ja] { font-size: 14px; line-height: 1.45; }
#rpg-intent { width: 100%; background: #1f1d29; border: 1px solid #2f2c39; border-radius: 9px; padding: 10px 12px; font-size: 13.5px; color: var(--text); resize: none; margin-bottom: 0; }
.rpg-btns-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.rpg-btn-group { display: flex; flex-direction: column; gap: 5px; }
.rpg-btn-row { display: flex; align-items: center; gap: 7px; }
.rpg-btn-row input[type=text] { flex: 1; margin-bottom: 0; }
.rpg-help-btn-image-drop { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px dashed rgba(183,169,255,.45); border-radius: 8px; background: rgba(117,86,255,.08); cursor: pointer; overflow: hidden; transition: border-color .15s, background .15s; }
.rpg-help-btn-image-drop:hover, .rpg-help-btn-image-drop.is-dragging { border-color: var(--purple); background: rgba(117,86,255,.16); }
.rpg-help-btn-image-drop img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpg-help-btn-image-drop span { color: var(--muted); font-size: 14px; line-height: 1; }
.rpg-help-btn-image-drop.is-spacer { visibility: hidden; }
.rpg-btn-expression-select { flex: 1; font-size: 12px; padding: 4px 7px; border-radius: 8px; background: #1f1d29; border: 1px solid #2f2c39; color: var(--text); min-width: 0; }
.rpg-add-btn-link { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px dashed #3a3746; border-radius: 8px; padding: 6px 10px; cursor: pointer; color: var(--muted); font-size: 12px; font-weight: 600; }

.stat-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 8px; }
.stat-tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: 16px; padding: 18px 20px; }
.stat-tile .stat-value { font-size: 30px; font-weight: 800; line-height: 1; margin-bottom: 6px; color: var(--text); }
.stat-tile .stat-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.stat-tile.mastered .stat-value { color: var(--purple-soft); }
.stat-tile.practicing .stat-value { color: var(--warning); }
.stat-tile.weak .stat-value { color: var(--danger); }

.meter-row { display: flex; align-items: center; gap: 12px; }
.meter-row + .meter-row { margin-top: 10px; }
.meter-label { width: 120px; flex: none; font-size: 13px; font-weight: 700; color: var(--text); }
.meter-count { width: 60px; flex: none; font-size: 12px; color: var(--muted); }
.meter-track { flex: 1; height: 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.meter-fill { height: 100%; border-radius: 999px; background: var(--purple); }
.meter-fill.vocabulary { background: var(--purple); }
.meter-fill.expression { background: var(--warning); }
.meter-fill.grammar { background: #ffaaa7; }
.meter-fill.mastered { background: var(--purple); }
.meter-fill.practicing { background: var(--warning); }
.meter-fill.weak { background: var(--danger); }
.meter-value { width: 42px; flex: none; text-align: right; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

.confidence-cell { display: flex; align-items: center; gap: 8px; }
.confidence-cell .meter-track { width: 70px; height: 8px; }
.confidence-cell .meter-value { width: 36px; }
.mastered-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(117,86,255,.14); color: var(--purple-soft); font-size: 11px; font-weight: 800; }
.inline-form { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.inline-form .short-input { width: 64px; padding: 5px 8px; border-radius: 8px; }
.remove-mastery-button { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
.remove-mastery-button:hover { border-color: rgba(255,123,120,.5); color: var(--danger); }
.remove-mastery-button:disabled { opacity: .6; cursor: wait; }
.example-browser-card form { margin-top: 14px; }
.contextual-example-list { display: grid; gap: 16px; }
.contextual-example-card .example-item-header { margin-bottom: 14px; }
.contextual-example-card .dialogue-line { grid-template-columns: minmax(60px, max-content) 1fr; align-items: start; }
.contextual-example-card .dialogue-line strong { padding-top: 2px; white-space: nowrap; }
.contextual-example-source { margin-top: -4px; font-size: 13px; }
.contextual-example-context { display: grid; gap: 6px; margin: 16px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); }
.contextual-example-context p { margin: 0; font-size: 14px; color: var(--text); }
.contextual-example-context strong { display: block; color: var(--purple-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.contextual-example-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.contextual-dialogue-translation { margin: 2px 0 0; }

.contextual-round-panel { gap: 16px; padding-bottom: 20px; overflow-y: auto; }
.contextual-round-panel .translation-header { grid-template-columns: none; display: flex; align-items: center; gap: 10px; }
.contextual-round-panel .translation-header strong { text-align: left; font-size: 16px; }
.contextual-round-panel .translation-tray { grid-template-columns: 1fr; }
.contextual-round-panel .continue-button { width: auto; min-width: 110px; padding: 0 18px; }
.contextual-round-panel .dialogue-line { grid-template-columns: minmax(60px, max-content) 1fr; align-items: start; }
.contextual-round-panel .dialogue-line strong { padding-top: 2px; white-space: nowrap; }
.contextual-round-badge { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(117,86,255,.35), rgba(255,138,61,.3)); border: 1px solid rgba(183,169,255,.5); color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; }

.contextual-round-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px; text-align: center; }
.contextual-round-placeholder[hidden] { display: none; }
.contextual-round-generate-status { margin: 0; color: var(--muted); font-size: 13px; }
.contextual-round-generate-status.is-error { color: var(--danger); }

.contextual-round-context { padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.02); }
.contextual-round-context p:last-child { margin: 4px 0 0; font-size: 14px; color: var(--text); line-height: 1.5; }

.contextual-round-goal { padding: 14px 16px; border: 1px solid rgba(255,138,61,.35); border-radius: 14px; background: rgba(255,138,61,.06); }
.contextual-round-goal p:last-child { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--text); }

.contextual-round-response { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0 20px; }
.contextual-round-response[hidden] { display: none; }
.contextual-round-bubble { position: relative; padding: 14px; border-radius: 28px; background: var(--panel-2); border: 1px solid var(--border); }
.contextual-round-bubble::after { content: ''; position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 16px; height: 16px; background: var(--panel-2); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.contextual-round-feedback { max-width: 460px; margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 13px; text-align: center; background: var(--panel-2); border: 1px solid var(--border); color: var(--text); }
.contextual-round-feedback.correct { border-color: rgba(117,86,255,.4); background: rgba(117,86,255,.1); }
.contextual-round-feedback.incorrect { border-color: rgba(255,123,120,.4); background: rgba(255,123,120,.08); }
.contextual-round-trigger { padding: 0 20px; border: 0; background: #ff8a3d; color: white; font-size: 15px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.contextual-round-trigger:hover:not(:disabled) { filter: brightness(1.08); }
.contextual-round-trigger:disabled { background: #1d1925; color: #524667; cursor: default; opacity: 1; }

/* Example Lab's searchable knowledge-point combobox. */
.combobox { position: relative; }
.combobox-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; max-height: 320px; overflow-y: auto; background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); padding: 6px; }
.combobox-result { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; background: transparent; color: var(--text); border-radius: 10px; padding: 10px 12px; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.combobox-result:hover, .combobox-result:focus { background: rgba(117,86,255,.14); }
.combobox-result-text { font-weight: 700; }
.combobox-result-meaning { color: var(--muted); font-size: 13px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.count-fields { display: flex; gap: 20px; margin: 4px 0 10px; }
.count-field { display: flex; flex-direction: column; gap: 6px; font-weight: 750; color: var(--purple-soft); font-size: 13px; }
.count-field input { width: 90px; }
.example-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 16px; padding: 18px 22px; margin-bottom: 14px; }
.example-card:last-child { margin-bottom: 0; }
.example-card-japanese { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.example-dialogue-line { margin: 10px 0; }
.example-card-goal { color: var(--purple-soft); font-size: 13px; font-weight: 700; margin: 8px 0 0; }
.goals-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.goal-chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--text); }
#volume-examples-points-goal-filter { width: 100%; }
#examples-goal-filter { width: 100%; }
#scene-goals-page { width: 100%; max-width: 1800px; padding-right: clamp(16px,3vw,48px); padding-left: clamp(16px,3vw,48px); }
.scene-goals-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; align-items: end; }
.scene-goals-controls .form-actions { grid-column: 1 / -1; }
#scene-goals-table { table-layout: fixed; min-width: 1100px; }
#scene-goals-table th:nth-child(1) { width: 23%; }
#scene-goals-table th:nth-child(2) { width: 13%; }
#scene-goals-table th:nth-child(3) { width: 30%; }
#scene-goals-table th:nth-child(4) { width: 28%; }
#scene-goals-table th:nth-child(5) { width: 90px; }
#scene-goals-table td { vertical-align: top; }
.scene-goal-kp-list { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.scene-goal-kp-item { display: inline-flex; align-items: center; max-width: 100%; padding: 4px 8px; border: 1px solid rgba(116,86,255,.4); border-radius: 999px; background: rgba(116,86,255,.18); color: #c7b9ff; line-height: 1.25; }
.scene-goal-kp-item.expression { border-color: rgba(220,158,60,.4); background: rgba(220,158,60,.16); color: #e8c583; }
.scene-goal-kp-item.grammar { border-color: rgba(79,179,169,.42); background: rgba(79,179,169,.16); color: #8fdbd2; }
.scene-goal-kp-text { color: inherit; font-size: 11px; overflow-wrap: normal; word-break: keep-all; }
.scene-goal-kp-separator { margin: 0 1px; opacity: .6; font-size: 10px; }
.scene-goal-kp-explanation { color: var(--muted); font-size: 10px; font-weight: 500; }
@media (max-width: 760px) {
  .scene-goals-controls { grid-template-columns: 1fr; }
  .scene-goals-controls .form-actions { grid-column: auto; }
}
.checklist-selected { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.checklist-selected .section-heading { margin-bottom: 8px; }
.checklist-selected .section-heading h3 { margin: 0; font-size: 17px; }
.checklist-box { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 14px; padding: 6px; background: var(--panel-2); display: flex; flex-direction: column; gap: 2px; }
.checklist-row { display: grid; grid-template-columns: auto auto 1fr auto auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.checklist-row:hover { background: rgba(117,86,255,.1); }
.checklist-row .note-item-kind { border: 1px solid rgba(116,86,255,.4); background: rgba(116,86,255,.18); color: #c7b9ff; }
.checklist-row .note-item-kind.expression { border-color: rgba(220,158,60,.4); background: rgba(220,158,60,.16); color: #e8c583; }
.checklist-row .note-item-kind.grammar { border-color: rgba(79,179,169,.42); background: rgba(79,179,169,.16); color: #8fdbd2; }
.checklist-row-checkbox { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--purple); cursor: pointer; }
.checklist-row-text { font-weight: 700; }
.checklist-row-meaning { color: var(--muted); font-size: 13px; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.checklist-row-count { width: 56px; padding: 6px 8px; font-size: 13px; text-align: center; cursor: text; }
.checklist-row-counts { display: flex; align-items: center; gap: 12px; cursor: text; white-space: nowrap; }
.checklist-row-count-mini { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.checklist-row-goal { width: 190px; padding: 6px 8px; font-size: 12px; cursor: text; }
.checklist-row-count-mini input { width: 36px; padding: 5px 2px; font-size: 13px; text-align: center; cursor: text; }

.practice-set-editor-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; margin-top: 20px; }
.pse-examples-heading-actions { display: flex; align-items: center; gap: 10px; }
.pse-examples-filters { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; margin: 4px 0 10px; }
.pse-examples-filters .compact-checkbox { margin: 0; }
.pse-examples-filters select { width: auto; min-width: 140px; }
.pse-set-actions.form-actions { justify-content: flex-end; gap: 10px; }
.pse-row { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.pse-row:last-child { border-bottom: none; }
.pse-card-body { flex: 1; min-width: 0; margin: 0; }
.pse-mini-button { flex-shrink: 0; width: 32px; height: 32px; padding: 0; border-radius: 999px; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.pse-add-button { background: var(--panel-2); color: var(--purple-soft); border: 1px solid var(--border); }
.pse-remove-button { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
.pse-remove-button:hover { background: rgba(255,90,90,.15); color: #ff8080; }
.pse-item-row.pse-dragging { opacity: .4; }
.pse-drag-handle { flex-shrink: 0; color: var(--muted); font-size: 18px; padding-top: 8px; cursor: grab; }
.pse-item-rank { flex-shrink: 0; width: 22px; padding-top: 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.pse-collapsed-summary { flex: 1; min-width: 0; margin: 0; padding-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: none; }
#pse-items-list.pse-items-collapsed .pse-card-body { display: none; }
#pse-items-list.pse-items-collapsed .pse-collapsed-summary { display: block; }
@media (max-width: 850px) { .practice-set-editor-columns { grid-template-columns: 1fr; } }
#practice-sets-list .jlpt-pool-section { border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; margin-bottom: 16px; background: var(--panel); }
#practice-sets-list .jlpt-pool-section:last-child { margin-bottom: 0; }
#practice-sets-list .jlpt-pool-summary-title { flex-wrap: wrap; }
.practice-sets-viewer-items { margin-top: 4px; }
.examples-filter-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; align-items: start; }
.examples-filter-grid[hidden] { display: none; }
.examples-goal-filter-row { margin-top: 14px; }
.examples-goal-filter select { margin-top: 6px; }
.examples-result-heading-actions { display: flex; align-items: center; gap: 14px; }
.examples-segmentation-toggle { margin: 0; }
.examples-segmentations-hidden .examples-segmentation { display: none; }
.examples-kp-group { margin-bottom: 24px; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.018); }
.examples-kp-group:last-child { margin-bottom: 0; }
.examples-kp-group-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.examples-kp-group-heading h3 { flex: 1; margin: 0; font-size: 21px; }
.examples-kp-group .example-card { margin-bottom: 10px; }
.examples-interaction-checkbox { margin-top: 4px; }
.examples-card-practice-type { margin: 10px 0 0; color: var(--purple-soft); font-size: 12px; font-weight: 750; }
.examples-inline-practice-type { display: flex; align-items: center; gap: 9px; width: fit-content; margin-top: 12px; color: var(--purple-soft); font-size: 12px; font-weight: 750; }
.examples-inline-practice-type select { width: auto; min-width: 130px; padding: 7px 10px; border-radius: 9px; }
.examples-inline-interaction-checkbox { display: inline-flex; margin: 7px 0 0 10px; vertical-align: middle; }
.examples-readonly-practice-type,
.examples-readonly-practice-badge { display: inline-flex; align-items: center; width: fit-content; margin-top: 8px; padding: 4px 9px; border: 1px solid rgba(156, 126, 255, .35); border-radius: 999px; background: rgba(112, 75, 211, .16); color: var(--purple-soft); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.examples-readonly-practice-badge { margin: 0 0 0 9px; }
.examples-card-meta { margin: 8px 0 0; font-size: 12px; }
.practice-sets-package-actions { justify-content: flex-start; gap: 10px; margin-top: 14px; }
.examples-audio-player { display: block; width: min(100%,420px); height: 34px; margin: 8px 0; }
.examples-line-reading { color: #c8bee6; font-size: 12px; }
.examples-segmentation { margin-top: 12px; }
.examples-segmentation-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.examples-segment-list { display: flex; flex-wrap: wrap; gap: 7px; }
.examples-segment-chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 68px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.035); }
.examples-segment-chip strong { color: var(--text); font-size: 14px; }
.examples-segment-chip small { color: #c8bee6; font-size: 10px; line-height: 1.25; }
.examples-segment-chip .examples-segment-translation { color: var(--muted); }
.examples-segment-chip .examples-audio-player { width: 90px; height: 24px; margin: 4px 0 0; }
.example-dialogue-line { padding: 10px 0; border-top: 1px solid rgba(255,255,255,.06); }
.example-dialogue-line:first-of-type { border-top: 0; }
.example-dialogue-line > p { margin: 0; }
.examples-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.examples-edit-form { padding-top: 4px; }
.examples-edit-form textarea { font-size: 15px; margin-top: 6px; }
.examples-edit-field { display: block; margin-bottom: 10px; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.examples-edit-field input { margin-top: 6px; font-size: 15px; }
.examples-edit-line { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.examples-edit-status { min-height: 18px; color: #ff8080; }
.examples-edit-actions { margin-top: 4px; }
.examples-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
@media (max-width: 760px) { .examples-filter-grid { grid-template-columns: 1fr; } }
.manual-audio-row:empty { margin: 0; }
.manual-audio-row { margin-top: 4px; }
.manual-kp-new-form { border: 1px solid var(--border); border-radius: 16px; padding: 20px; margin-top: 14px; background: var(--panel-2); }

.kp-conjugation-row td { padding-top: 0; padding-bottom: 14px; border-top: none; }
.kp-conjugation { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--border); }
.kp-conjugation-badge { display: inline-block; border-radius: 999px; padding: 4px 10px; background: rgba(117,86,255,.14); color: var(--purple-soft); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; margin-top: 3px; }
.kp-conjugation-rule { color: var(--muted); font-size: 13px; flex-basis: 100%; }
.kp-conjugation-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kp-conjugation-step { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1.25; font-size: 16px; font-weight: 850; padding: 6px 12px; border-radius: 10px; background: rgba(123,97,255,.12); border: 1px solid rgba(123,97,255,.35); min-width: 34px; }
.kp-conjugation-step-form { color: var(--text); }
.kp-conjugation-step-reading { font-size: 10.5px; font-weight: 650; color: var(--purple-soft); }
.kp-conjugation-step-label { font-size: 10px; font-weight: 600; color: var(--muted); text-align: center; }
.kp-conjugation-arrow { color: var(--muted); }
.kp-conjugation-final .kp-conjugation-step-form { font-weight: 850; }

.completeness-summary-inline { font-size: 13px; }
.completeness-issue-list { display: grid; gap: 14px; }
.completeness-issue-card { border: 1px solid var(--border); border-radius: 14px; background: var(--panel-2); padding: 16px 18px; }
.completeness-issue-card h3 { margin: 0 0 8px; font-size: 15px; color: var(--purple-soft); }
.completeness-issue-card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.completeness-issue-card li { color: var(--danger); }
.completeness-scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 20px; width: 100%; }
.completeness-scene-checkbox { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; margin: 0; color: inherit; }
.completeness-scene-checkbox input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--purple); }
.completeness-verify-checkbox { display: flex; align-items: flex-start; gap: 10px; max-width: 460px; margin: 0; color: inherit; font-size: 13px; font-weight: normal; }
.completeness-verify-checkbox input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--purple); }
.completeness-report-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.completeness-small-button { padding: 6px 12px; font-size: 12px; }
.chat-bubble-row { display: flex; margin: 14px 0; }
.chat-bubble-row.chat-bubble-left { justify-content: flex-start; }
.chat-bubble-row.chat-bubble-right { justify-content: flex-end; }
.chat-bubble { max-width: 78%; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: #17121f; display: grid; gap: 8px; }
.chat-bubble-row.chat-bubble-left .chat-bubble { border-top-left-radius: 4px; }
.chat-bubble-row.chat-bubble-right .chat-bubble { border-top-right-radius: 4px; background: rgba(117,86,255,.1); border-color: rgba(117,86,255,.4); }
.chat-bubble .examples-edit-field { margin: 0; }
.chat-bubble .examples-edit-field textarea, .chat-bubble .examples-edit-field select { margin-top: 4px; }
.chat-bubble .example-segments:empty, .chat-bubble .manual-audio-row:empty { display: none; }