:root {
  --bg: #15110e; --panel: #201a15; --line: #3a2f26; --text: #f3e6d2; --dim: #a8987f;
  --gold: #e9c46a; --ok: #6cc070; --warn: #e0a640; --bad: #e0584f; --accent: #2f7d5b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, "Segoe UI", sans-serif; }
button, select, input, textarea { font: inherit; color: inherit; }
button, .btn { background: #2c241d; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
button:hover { border-color: var(--gold); }
button.primary { background: var(--accent); border-color: var(--accent); }
button.danger, button.on.danger { background: #5a1f1b; border-color: #7a2a24; }
button.active { outline: 2px solid var(--gold); }
input, select, textarea { background: #120e0b; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; width: 100%; }
textarea { resize: vertical; }
h3 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
small { color: var(--dim); display: block; }
.hint { color: var(--dim); font-size: 12px; margin: 6px 0; }
.err { color: var(--bad); display: block; font-size: 12px; }
.row { display: flex; gap: 6px; align-items: center; margin: 6px 0; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1; }
.link { color: var(--gold); cursor: pointer; }
.check { display: flex; gap: 4px; align-items: center; color: var(--dim); }
.check input { width: auto; }

.login { max-width: 420px; margin: 15vh auto; padding: 20px; background: var(--panel); border-radius: 12px; }

/* Vừa một màn hình: trang không cuộn, danh sách dài tự cuộn trong khung của nó. */
#app:not([hidden]) { height: 100vh; display: flex; flex-direction: column; }
.bar { display: flex; gap: 8px; align-items: center; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); flex-wrap: wrap; flex-shrink: 0; }
.brand { color: var(--gold); margin-right: 6px; }
.chip { padding: 3px 10px; border-radius: 999px; background: #120e0b; border: 1px solid var(--line); font-size: 13px; }
.chip .tz { width: auto; padding: 0 4px; margin-left: 4px; border: 0; background: transparent; color: var(--dim); }
.chip .tz option { background: var(--panel); color: var(--text); }
.chip.ok { border-color: var(--ok); color: var(--ok); }
.chip.warn { border-color: var(--warn); color: var(--warn); }
.chip.bad { border-color: var(--bad); color: var(--bad); }

/* Desktop: 3 cột; màn hẹp: xếp chồng. */
.grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.2fr) minmax(260px, .9fr); grid-template-rows: minmax(0, 1fr); gap: 10px; padding: 10px; }
.col { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.col > * { flex-shrink: 0; }
.pane { flex: 1 1 auto; min-height: 0; overflow: auto; }
.lib { max-height: 36%; overflow: auto; border-top: 1px solid var(--line); margin-top: 6px; }
.lib h3 { margin-top: 8px; }

.tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.tabs button { flex: 1; padding: 6px 4px; }
.tabs button.on { background: var(--accent); border-color: var(--accent); }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 8px; }
.thumb { position: relative; background: #000; border: 2px solid transparent; border-radius: 6px; cursor: pointer; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.thumb canvas, .thumb img { max-width: 100%; max-height: 100%; }
.thumb span { position: absolute; left: 4px; bottom: 2px; font-size: 11px; background: rgba(0,0,0,.6); padding: 0 4px; border-radius: 4px; }
.thumb.cur { border-color: var(--gold); }

.files { list-style: none; margin: 0; padding: 0; }
.files li { display: flex; gap: 6px; align-items: center; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.files li .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.files li.cur .name { color: var(--gold); }
.files.small { font-size: 12px; }
.files button { padding: 2px 8px; }
.tag { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #120e0b; color: var(--dim); text-transform: uppercase; }

.drop { display: block; border: 2px dashed var(--line); border-radius: 10px; padding: 8px; text-align: center; color: var(--dim); cursor: pointer; }
.drop.over { border-color: var(--gold); color: var(--text); }
.upload { font-size: 12px; margin: 4px 0; }
.upload progress { width: 100%; height: 6px; }

.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button { font-size: 12px; }

/* Khung xem trước chiếm phần cao còn lại của cột giữa, giữ tỉ lệ 9:16. */
.stage .preview { flex: 1 1 0; min-height: 160px; display: flex; justify-content: center; background: #000; border-radius: 10px; padding: 4px; }
.preview iframe { height: 100%; max-width: 100%; aspect-ratio: 9 / 16; border: 0; display: block; }
.now { display: flex; gap: 10px; margin-top: 8px; align-items: flex-start; }
.nowText { flex: 1; min-width: 0; }
.nowText b { display: block; font-size: 16px; overflow-wrap: anywhere; }
.next { width: 136px; text-align: center; font-size: 12px; }
.next canvas { width: 128px; height: 72px; background: #000; border-radius: 4px; display: block; margin: 2px auto; object-fit: contain; }
.notes { display: block; margin-top: 8px; }

.comments { list-style: none; margin: 0; padding: 0; flex: 1 1 0 !important; min-height: 80px; overflow: auto; }
.comments li { padding: 6px; border-bottom: 1px solid var(--line); display: flex; gap: 6px; align-items: flex-start; }
.comments li .msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.comments li .who { color: var(--gold); margin-right: 4px; }
.comments li.q { background: rgba(233,196,106,.08); }
.comments li button { padding: 1px 6px; font-size: 12px; }
.comments.qonly li:not(.q) { display: none; }
.top { margin: 0; padding-left: 22px; max-height: 22%; overflow: auto; }
.top li { padding: 2px 0; }
.top li.right { color: #7ee08a; font-weight: 700; }
#recapBox textarea { width: 100%; box-sizing: border-box; margin-bottom: 6px; }
.pick { cursor: pointer; }
.who.pick { text-decoration: underline dotted; }
.usermenu { position: fixed; z-index: 1000; display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 8px; background: #2b211b; border: 1px solid #e9c46a; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.usermenu b { padding: 2px 6px 6px; color: #e9c46a; }
.usermenu button { text-align: left; }
.bank { margin: 6px 0 0; padding-left: 22px; }
.bank li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.bank .bq-choices { font-size: 0.92em; opacity: 0.9; margin: 2px 0; }
.bank .bq-warn { color: #f0b35a; font-size: 0.9em; }
.bank .bq-ok, .bank .bq-draft { font-size: 0.8em; padding: 1px 6px; border-radius: 8px; }
.bank .bq-ok { background: #2f6b3d; }
.bank .bq-draft { background: #6b5a2f; }
.bank .bq-off { background: #4a4a4a; }
.bank .bq-edit input[type='radio'] { flex: none; }

.audio { flex-shrink: 0; display: grid; grid-template-columns: minmax(180px, 1fr) minmax(260px, 1.3fr) minmax(320px, 1.7fr); gap: 10px; padding: 0 10px 10px; align-items: stretch; }
.audio > div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; }
.audio .row { margin: 2px 0 0; }
.music b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mixer { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; align-content: center; }
.mixer label { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 6px; margin: 2px 0; font-size: 13px; }
.mixer input { padding: 0; }
.pads { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; align-content: center; }
.pads button { padding: 8px 2px; font-size: 13px; }
.pads button kbd { font-size: 10px; color: var(--dim); margin-left: 4px; }
/* Màn hẹp: xếp chồng, cuộn cả trang như bình thường. */
@media (max-width: 1100px) {
  #app:not([hidden]) { height: auto; }
  .grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .col { overflow: visible; }
  .stage .preview { flex: none; height: 60vh; }
  .audio { grid-template-columns: 1fr; }
  .pads { grid-template-columns: repeat(3, 1fr); }
}

.toast { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: #5a1f1b; border: 1px solid var(--bad); padding: 8px 16px; border-radius: 8px; z-index: 10; }
.toast.info { background: #1f3d2f; border-color: var(--ok); }

/* Camera của cô: xem trước (lật gương cho tự nhiên), thanh đo mic, chọn chế độ bàn giáo viên. */
.cam { position: relative; background: #000; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; }
.cam video { width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); }
.cam meter { position: absolute; left: 8px; right: 8px; bottom: 6px; width: auto; height: 8px; }
.pane h4 { margin: 12px 0 4px; font-size: 13px; color: var(--dim); }
.seg { gap: 0; }
.seg button { flex: 1; border-radius: 0; }
.seg button:first-child { border-radius: 8px 0 0 8px; }
.seg button:last-child { border-radius: 0 8px 8px 0; }
.seg button.on, #camBoard.on { background: var(--accent); border-color: var(--accent); }

/* Ngăn Quản trị: trượt từ phải, đè lên Studio; điện thoại thì chiếm cả màn hình. */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 20; overflow: auto; padding: 10px 14px 24px;
  background: var(--panel); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0, 0, 0, .45); }
.drawer h3 { margin: 4px 0; }
.drawer button.on { background: var(--accent); border-color: var(--accent); }
.drawer .files li { cursor: pointer; }
.drawer .files li.cur { color: var(--gold); }
/* Bình luận: quà, follow, chia sẻ chỉ hiện khi bật "Quà, follow". */
.comments li.ev .msg { color: var(--dim); }
.comments:not(.events) li.ev { display: none; }
.qr { display: flex; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.qr svg { width: 150px; height: 150px; background: #fff; border-radius: 6px; }