:root{
  --gold:#f5b83d;
  --gold-deep:#d9961c;
  --text:#eef2fb;
  --muted:#a8b2c8;
  --panel:rgba(13,20,38,.62);
  --panel-border:rgba(245,184,61,.28);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:#000;
  color:var(--text);
  font-family:'Noto Sans SC',system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ===== 全螢幕數字人背景 ===== */
.bg-stage{
  position:fixed;inset:0;z-index:0;
  overflow:hidden;background:#000;
}
.bg-stage video{
  position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  height:64%;width:auto;
  max-width:none;
  object-fit:contain;
}
.bg-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.1) 30%,rgba(0,0,0,.15) 55%,rgba(0,0,0,.72) 100%);
}

/* ===== 頂部 ===== */
.topbar{
  position:relative;z-index:10;
  display:flex;justify-content:space-between;align-items:center;
  padding:1rem clamp(1rem,4vw,2.2rem);
}
.brand{display:flex;align-items:center;gap:.8rem}
.brand-logo{height:34px;width:auto;object-fit:contain}
.brand-text{
  font-weight:700;font-size:.95rem;letter-spacing:.05em;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
}
.live-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--panel);border:1px solid var(--panel-border);
  border-radius:999px;padding:.4rem .9rem;
  font-size:.78rem;color:var(--text);backdrop-filter:blur(8px);
}
.live-dot{
  width:8px;height:8px;border-radius:50%;background:#34d399;
  box-shadow:0 0 0 0 rgba(52,211,153,.7);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}
  70%{box-shadow:0 0 0 9px rgba(52,211,153,0)}
  100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}
}

/* ===== 主舞台 ===== */
.stage{
  position:absolute;left:0;right:0;bottom:0;z-index:10;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  padding:0 1.2rem;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  box-sizing:border-box;
}
.panel{
  width:min(372px,88vw);
  background:rgba(13,20,38,.48);
  border:1px solid var(--panel-border);
  border-radius:22px;
  padding:1rem 1.2rem;
  backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -25px rgba(0,0,0,.6);
  animation:panelUp .8s cubic-bezier(.2,.8,.2,1) both;
  box-sizing:border-box;
}
@keyframes panelUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.data-row{
  display:flex;align-items:baseline;gap:.6rem;
  padding:.35rem 0;
}
.data-row.alt{border-top:1px solid rgba(255,255,255,.08);margin-top:.35rem;padding-top:.7rem}
.data-label{font-size:.82rem;color:var(--muted)}
.data-value{font-size:1.05rem;font-weight:800;color:var(--gold)}
.data-sub{font-size:.72rem;color:var(--muted);flex:1;text-align:right}

.panel-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(245,184,61,.4),transparent);margin:.9rem 0}

/* 操作按鈕行（資料庫 + 播放視頻 並排） */
.action-row{
  display:grid;
  grid-template-columns:1fr 1fr;   /* 固定兩欄 → 兩行 */
  gap:.6rem;
  width:100%;
}

.action-btn{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.8rem .5rem;border-radius:14px;
  font-weight:700;font-size:.88rem;
  min-width:0;width:100%;
  box-sizing:border-box;
  overflow:hidden;
  transition:transform .2s,background .25s,box-shadow .25s,border-color .25s,color .25s;
}
.action-btn span{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  min-width:0;
}
.action-btn svg{width:17px;height:17px;flex-shrink:0}
.action-btn.play{
  background:linear-gradient(120deg,var(--gold),var(--gold-deep));
  color:#08101f;
  box-shadow:0 10px 28px -12px rgba(245,184,61,.6);
}
.action-btn.play:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(245,184,61,.75)}
.action-btn.link{
  border:1px solid var(--panel-border);color:var(--text);
}
.action-btn.link:hover{border-color:var(--gold);color:var(--gold)}

/* ===== 視頻模態 ===== */
.video-modal{
  position:fixed;inset:0;z-index:50;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.88);backdrop-filter:blur(8px);
}
.video-modal.show{display:flex}
.video-modal-box{
  position:relative;width:min(520px,94vw);
  border-radius:20px;overflow:hidden;
  border:1px solid var(--panel-border);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9);
}
.video-modal-box video{width:100%;display:block;max-height:72vh;object-fit:contain;background:#000}
.video-close{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:1.4rem;line-height:1;display:grid;place-items:center;
}
.video-close:hover{background:rgba(0,0,0,.85)}
.video-caption{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,.8));
  padding:2.5rem 1rem .9rem;text-align:center;font-size:.9rem;
}

/* ===== 響應式適配：手機 + PC ===== */
/* 手機（默認已適配） */
@media (max-width: 480px){
  .panel{padding:1.1rem 1rem;border-radius:20px}
  .data-value{font-size:.95rem}
  .action-btn{font-size:.84rem;padding:.75rem .35rem;gap:.3rem}
  .action-btn svg{width:16px;height:16px}
  .topbar{padding:.8rem 1rem}
  .brand-text{font-size:.82rem}
  .live-badge{font-size:.72rem;padding:.35rem .7rem}
}

/* 平板 / 小筆電 */
@media (min-width: 768px){
  .stage{padding-bottom:5vh}
  .panel{width:min(440px,92vw);padding:1.6rem 1.8rem}
  .topbar{padding:1.1rem 2.4rem}
}

/* PC 寬屏：維持兩行，僅放大字級與間距（避免手機溢出） */
@media (min-width: 992px){
  .action-row{gap:.8rem}
  .action-btn{font-size:1rem;padding:1rem .8rem;gap:.55rem}
  .action-btn svg{width:20px;height:20px}
}

@media (min-width: 1200px){
  .panel{width:min(480px,92vw);padding:1.9rem 2.1rem}
  .action-row{gap:.9rem}
  .action-btn{font-size:1.05rem;padding:1.05rem .8rem}
  .data-value{font-size:1.15rem}
}