\
/* Story & Reel Composer - story.css */
:root{
  --bg:#0f1320; --surface:#161a2b; --border:#232848; --muted:#9aa3c9;
  --text:#e7ecff; --primary:#38bdf8; --accent:#6ee7b7;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans Thai', sans-serif;
  background:var(--bg); color:var(--text);
}
a{color:var(--accent); text-decoration:none}
.header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg,#1a1f38,#0f1320);
  border-bottom:1px solid var(--border);
  padding:10px 14px;
}
.header .row{display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:1200px; margin:0 auto;}
.app-title{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.app-title .logo{
  width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--accent),var(--primary));
  display:grid; place-items:center; color:#05151a; font-weight:800;
}
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.btn{border:1px solid var(--border); background:#101529; color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--primary)); border:none; color:#052a1e}
.btn-outline{background:transparent}
.btn.active{box-shadow:0 0 0 2px rgba(110,231,183,.25) inset}

.container{max-width:1200px; margin:16px auto; padding:0 14px}
.layout{display:grid; grid-template-columns:1fr 320px; gap:14px}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px}
.panel h3{margin:0 0 10px 0; font-size:16px}
hr{border:0; border-top:1px solid var(--border); margin:12px 0}

#previewBox{height:calc(100vh - 170px); display:flex; align-items:center; justify-content:center; overflow:hidden}
#collageCanvas{display:block; max-width:100%; max-height:100%; background:#fff; border-radius:12px}

.control label{font-size:12px; color:var(--muted); display:block; margin-bottom:4px}
.control input[type="range"], .control input[type="color"], .control select, .control input[type="text"]{
  width:100%; padding:6px 8px; border-radius:8px; border:1px solid var(--border);
  background:#0b0f1b; color:#e8eeff; margin-bottom:8px;
}

.thumbbar{display:flex; gap:8px; overflow:auto; padding:8px; border-top:1px solid var(--border); background:#0b0f1b; border-radius:12px}
.thumb{min-width:90px; aspect-ratio:9/16; background:#11162a; border:1px solid var(--border); border-radius:10px; overflow:hidden; position:relative; cursor:pointer}
.thumb.active{outline:2px solid var(--accent)}
.thumb canvas{width:100%; height:100%; display:block}
.thumb .idx{position:absolute; top:6px; left:6px; background:rgba(0,0,0,.45); padding:2px 6px; border-radius:8px; font-size:11px}

.fab{
  position:fixed; z-index:20; bottom:18px; right:18px; padding:10px 14px; border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--primary)); color:#052a1e; border:none; cursor:pointer;
  display:flex; align-items:center; gap:8px; font-weight:700;
}
.fab-left{ left:18px; right:auto; background:var(--surface); color:var(--text); border:1px solid var(--border)}

.dark body{background:#0a0c14}
/* responsive */
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .panel{order:2}
  #previewBox{order:1; height:calc(100vh - 260px)}
}