/* 正修科技大學 — 虛擬會議司儀 */
:root{
  --blue:#2281C5; --blue-deep:#0E5A94; --blue-dark:#08304F;
  --teal:#2FB89F; --teal-bright:#3AD7B8; --gold:#CA9340;
  --bg:#071A2B; --bg2:#0C2942; --card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.14); --tx:#EAF4FC; --tx-dim:#9DBBD2;
  --ok:#3AD7B8; --warn:#F5B942; --err:#F2615C;
  --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color:var(--tx); background:
    radial-gradient(1200px 700px at 12% -10%, rgba(34,129,197,.34), transparent 60%),
    radial-gradient(900px 600px at 105% 108%, rgba(47,184,159,.26), transparent 60%),
    var(--bg);
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select,textarea{font:inherit;color:inherit}
.btn{
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));
  border:1px solid rgba(255,255,255,.18); border-radius:12px;
  padding:.62rem 1.1rem; font-weight:600; transition:.15s; white-space:nowrap;
}
.btn:hover{filter:brightness(1.12)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--card);border-color:var(--line)}
.btn.ok{background:linear-gradient(180deg,#38C9A8,#1E8E77)}
.btn.danger{background:linear-gradient(180deg,#E8544F,#A62B27)}
.btn.sm{padding:.35rem .7rem;border-radius:9px;font-size:.85rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(8px)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;background:var(--err)}
.dot.on{background:var(--ok);box-shadow:0 0 10px var(--ok)}
.dot.mid{background:var(--warn)}
.muted{color:var(--tx-dim)}
.field{width:100%;padding:.7rem .9rem;border-radius:12px;border:1px solid var(--line);
  background:rgba(0,0,0,.28);outline:none}
.field:focus{border-color:var(--teal-bright)}

/* ============ 大螢幕舞台頁 ============ */
.stage{display:grid;grid-template-rows:auto 1fr auto;height:100vh;gap:14px;padding:16px 20px}
.top{display:flex;align-items:center;gap:18px}
.top h1{margin:0;font-size:clamp(20px,1.7vw,32px);letter-spacing:.5px}
.top .theme{color:var(--teal-bright);font-size:clamp(14px,1.05vw,20px)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:14px;font-variant-numeric:tabular-nums}
.clock{font-size:clamp(20px,1.9vw,34px);font-weight:700}
.main{display:grid;grid-template-columns:34% 1fr;gap:16px;min-height:0}
.left{display:grid;grid-template-rows:1fr auto;gap:12px;min-height:0}
.avatar-wrap{position:relative;overflow:hidden;min-height:0}
#avatar{position:absolute;inset:0;width:100%;height:100%;display:block}
.bubble{
  position:absolute;left:4%;right:4%;bottom:2%;padding:1rem 1.2rem;border-radius:18px;
  background:rgba(255,255,255,.95);color:#0A2338;font-size:clamp(16px,1.35vw,26px);
  line-height:1.5;box-shadow:0 10px 40px rgba(0,0,0,.4);opacity:0;transform:translateY(14px);
  transition:.35s;pointer-events:none
}
.bubble.show{opacity:1;transform:none}
.bubble b{color:var(--blue-deep)}
.qr{display:flex;align-items:center;gap:14px;padding:12px 14px}
.qr svg,.qr img{width:104px;height:104px;background:#fff;border-radius:10px;padding:6px}
.qr .t{font-size:clamp(13px,.95vw,18px);line-height:1.6}
.qr .u{color:var(--teal-bright);font-weight:700;word-break:break-all}
.right-col{display:grid;grid-template-rows:auto 1fr;gap:12px;min-height:0}
.sub-head{display:flex;align-items:center;gap:10px;padding:10px 16px}
.sub-head .now{font-weight:700;font-size:clamp(15px,1.1vw,21px)}
#subs:empty::before{content:'會議尚未開始，即時逐字稿將顯示於此';color:var(--tx-dim);
  font-size:clamp(15px,1.1vw,20px);margin:auto;opacity:.6}
#subs{overflow:hidden;padding:10px 20px 20px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px}
.seg{font-size:clamp(19px,1.62vw,34px);line-height:1.55;animation:rise .4s ease both}
.seg .spk{color:var(--teal-bright);font-weight:700;margin-right:.5em;font-size:.82em}
.seg.raw{color:#8FA9BE}
.seg.corrected{color:#fff}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.bottom{display:flex;gap:10px;align-items:stretch}
.ag{flex:1;padding:9px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);
  font-size:clamp(12px,.9vw,17px);opacity:.55}
.ag.cur{opacity:1;border-color:var(--teal-bright);background:rgba(58,215,184,.14)}
.ag.done{opacity:.32}
.ag .tm{color:var(--teal-bright);font-weight:700;margin-right:.5em}
.pip{position:fixed;right:22px;bottom:92px;width:22vw;max-width:420px;aspect-ratio:16/9;
  border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#000;
  box-shadow:0 12px 44px rgba(0,0,0,.55)}
.pip video{width:100%;height:100%;object-fit:cover}
.pip.hide{display:none}

/* ============ 手機提問頁 ============ */
.ask{max-width:620px;margin:0 auto;padding:18px 16px 40px;min-height:100vh}
.ask header{text-align:center;padding:14px 0 18px}
.ask header .logo{width:88px;margin:0 auto 8px;display:block}
.ask h1{font-size:19px;margin:.2rem 0;line-height:1.45}
.ask .sub{color:var(--teal-bright);font-size:14px}
.ask .box{padding:16px;margin-top:14px}
.ask textarea{min-height:110px;resize:vertical}
.ask .hint{font-size:12.5px;line-height:1.7;color:var(--tx-dim);margin:.6rem 0 0}
.qlist{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.qi{padding:12px 14px;border-radius:13px;background:var(--card);border:1px solid var(--line)}
.qi .meta{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--tx-dim);margin-bottom:5px}
.tag{padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:700}
.tag.pending{background:rgba(245,185,66,.2);color:#F5B942}
.tag.approved{background:rgba(58,215,184,.2);color:#3AD7B8}
.tag.answered{background:rgba(34,129,197,.28);color:#8CC8F2}
.tag.rejected{background:rgba(242,97,92,.2);color:#F2615C}
.qi .ans{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);font-size:14.5px;line-height:1.65}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;
padding:.75rem 1.2rem;border-radius:12px;transition:.25s;pointer-events:none;
  background:rgba(10,35,56,.96);border:1px solid var(--line);z-index:99}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ============ 控制台 ============ */
.admin{max-width:1240px;margin:0 auto;padding:18px}
.admin h2{font-size:16px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
.panel{padding:16px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row+.row{margin-top:10px}
.vu{height:14px;border-radius:99px;background:rgba(0,0,0,.4);overflow:hidden;flex:1;min-width:160px}
.vu i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ok),var(--warn),var(--err));transition:width .06s}
.qadmin{max-height:460px;overflow:auto;display:flex;flex-direction:column;gap:9px}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.topbar .sp{margin-left:auto}