/* V4: unified dialogue -> interview -> VO storyboard; Vietnamese-friendly typography */
:root{--blue:#3b5d79;--bluebg:#eef4f8}
body.dark{--blue:#b9d9f3;--bluebg:#2b4050}
.hero h1,.heading h2,.readcontent h2{letter-spacing:-.015em!important;text-wrap:pretty}
.hero h1,.heading h2,.readcontent h2{font-family:"Noto Serif","Cambria",serif!important}
body,.brand,.nav,.speech,button{font-family:"Be Vietnam Pro","Segoe UI",Arial,sans-serif!important}
.heading h2{font-size:clamp(31px,3.1vw,42px)}
.story-hook{background:var(--pale);color:var(--green);border-left:4px solid #6ea486;padding:13px 17px;border-radius:7px;margin:13px 0 3px;line-height:1.65;font-size:14px}
.story-hook strong{display:block;font-size:12px;letter-spacing:.07em;margin-bottom:4px}
.stage-flow{position:relative;padding-left:15px;border-left:2px solid var(--line);margin-left:5px}
.story-block{position:relative;border:1px solid var(--line);border-radius:13px;background:var(--card);margin:0 0 15px 0;overflow:hidden}
.story-block:before{content:"";position:absolute;left:-23px;top:20px;width:12px;height:12px;border-radius:99px;background:#729f83;border:3px solid var(--card);box-shadow:0 0 0 2px var(--line)}
.story-block .block-top{display:flex;align-items:center;gap:9px;padding:12px 16px 0;font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.story-block .index-tag{width:26px;height:26px;display:grid;place-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;flex:0 0 26px;font-size:11px}
.story-block .text-area{padding:9px 18px 18px}
.story-block .text-area p{font-size:var(--fs);line-height:1.76;font-weight:500;margin:0 0 17px;color:var(--text)}
.story-block .text-area p:last-child{margin-bottom:0}
.story-block .text-area p.question-line{padding-left:21px;position:relative;font-size:calc(var(--fs) - 1px)}
.story-block .text-area p.question-line:before{content:"?";position:absolute;left:0;color:var(--blue);font-size:.77em;font-weight:900;top:.25em}
.story-block.live{background:var(--pale);border-color:transparent}
.story-block.live .block-top,.story-block.live .index-tag{color:var(--green)}
.story-block.questions{background:var(--bluebg);border-color:transparent}
.story-block.questions .block-top{color:var(--blue)}
.story-block.vo{background:var(--cream);border-color:transparent}
.story-block.vo .block-top{color:#a06b3a}
.story-block.vo:before{background:#c6905c}
.story-block.fallback{background:var(--bg);border-style:dashed}
.story-block.fallback .block-top{color:var(--sub)}
.story-block.direction{background:var(--card)}
.story-block.direction .block-top{color:var(--sub)}
.story-block.direction .text-area p{font-size:calc(var(--fs) - 4px)}
.story-block.amb{background:var(--bluebg);border-color:transparent}
.story-block.amb .block-top{color:var(--blue)}
.story-block.amb .text-area p{font-size:calc(var(--fs) - 3px)}
.story-block.bridge{background:var(--pale)}
.story-block.bridge .block-top{color:var(--green)}
.flow-legend{font-size:12px;color:var(--sub);margin-bottom:16px}
.editor-pill{display:inline-flex;padding:5px 10px;border-radius:50px;font-size:11px;font-weight:850;background:var(--cream);color:#9b683b;align-items:center;gap:4px}
.shoot-guide{position:sticky;top:75px;align-self:start}
.shoot-guide .source-card{margin-top:14px;padding:14px;background:var(--bg);color:var(--sub);font-size:13px;line-height:1.64;border-radius:11px}
.shoot-guide h3{margin-bottom:10px}
.note-caption{color:var(--sub);font-size:13px;margin:0 0 8px}
.note{line-height:1.6}
.notes .note{min-height:115px}
.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.notes-grid h4{font-size:13px;color:var(--green);margin:0 0 7px}
.filter-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.filter-btn{padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--card);color:var(--sub);font-size:12px;font-weight:800}
.filter-btn.active{background:#315c49;color:white;border-color:#315c49}
.mode-label{font-size:12px;font-weight:800;color:var(--sub)}
.nav.active{background:var(--pale);color:var(--green)}
.sidebar-hint{font-size:12px;line-height:1.75;color:var(--sub);padding:12px;background:var(--pale);border-radius:12px;margin-top:13px}
.story-block.hide-by-filter{display:none}
#rContent .story-block{background:#254536;border:1px solid #456a55}
#rContent .story-block.vo{background:#4b3928;border:1px solid #79583b}
#rContent .story-block.questions,#rContent .story-block.amb{background:#2d4455;border-color:#587189}
#rContent .story-block.fallback{background:#25382e}
#rContent .story-block .text-area p{color:#fff9ed;font-size:calc(var(--fs) + 5px);line-height:1.78}
#rContent .story-block.direction .text-area p,#rContent .story-block.amb .text-area p{font-size:calc(var(--fs) + 1px)}
#rContent .story-block .block-top{color:#bfe4c8}
#rContent .story-block.vo .block-top{color:#f5c88d}
#rContent .story-block.questions .block-top{color:#c4defb}
#rContent .story-block .index-tag{background:#1e3429;color:white;border-color:#66806e}
#rContent .story-hook{background:#254536;color:#d4e8d6;border-left-color:#a7d7b7}
.mobilebar .btn.primary{white-space:nowrap}
@media(max-width:1050px){.grid{grid-template-columns:minmax(0,1fr) minmax(215px,.62fr)}.shoot-guide{position:static}}
@media(max-width:850px){.grid{grid-template-columns:1fr}.shoot-guide{position:static}.notes-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.hero h1{font-size:44px}.tagline{font-size:19px}.top .btn{padding:8px 9px;font-size:12px}.heading{padding:20px 17px}.heading h2{font-size:32px}.story-hook{font-size:13px}.grid{padding:14px 13px}.stage-flow{padding-left:12px}.story-block:before{left:-20px}.story-block .text-area{padding:7px 15px 16px}.story-block .text-area p{line-height:1.68;font-size:var(--fs)}.story-block.direction .text-area p{font-size:calc(var(--fs) - 5px)}.notes-grid{grid-template-columns:1fr}.filter-bar{gap:5px}.filter-btn{padding:7px 9px;font-size:11px}.toolbar{display:block}.toolbar>.controls{display:flex;justify-content:space-between;align-items:center}.toolbar .sizes{display:flex;gap:5px;margin-top:7px}.toolbar span{display:inline;font-size:11px}.notes{padding:0 13px 16px}.readcontent{padding:22px 13px 120px}.readcontent h2{font-size:30px}.reader .readtop strong{font-size:12px;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
@media print{.story-block.hide-by-filter{display:block!important}.story-block{break-inside:avoid}.story-block .text-area p{font-size:17px!important}.flow-legend,.side,.mobilebar,.toolbar,.readtop,.readbottom{display:none!important}.notes-grid{display:none}}