:root{
    --overlay-bg: rgba(0, 50, 130, 0.8);
    --btn-bg: linear-gradient(135deg, #4f9eff, #1e6eff);
    --btn-hover: linear-gradient(135deg, #74b6ff, #2b80ff);
    --btn-active: linear-gradient(135deg, #1e6eff, #0e4fc5);
    --text-light: #f8fbff;
    --card-bg: rgba(255,255,255,0.1);
    --small-btn-bg: rgba(255,255,255,0.2);
    --small-btn-hover: rgba(255,255,255,0.3);
}

.logo-div{
    grid-column: span 2;
    text-align: center;
}
.logo-div > h3{
    margin-bottom: 4%;
}
.survey-logo{
    width: 20%;
    margin-bottom:2%;
}
#surveyInstructions{
    grid-column: span 2;
    line-height: 30px;
    margin-bottom: 8%;
}

#multiSelectHint {
  grid-column: span 2;
  text-align: center;
  color: #f0f8ff;
}


    /* html,body{height:100%;margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans TC','Microsoft JhengHei',sans-serif;background-color:#f4f8ff}
    .container{padding:24px} */

.overlay{
    position:fixed;
    inset:0;
    background:var(--overlay-bg);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
}
.overlay.active{display:flex;animation:fadeIn .25s ease forwards;}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.overlay-card{
    background:var(--card-bg);
    backdrop-filter:blur(10px);
    padding:36px 30px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.3);
    display:grid;
    gap:20px;
    grid-template-columns:repeat(2, 240px);
    align-items:center;
    justify-items:center;
    text-align:center;
    color:var(--text-light);
    transform:scale(0.95);
    opacity:1;
    transition:opacity 0.4s ease;
    animation:popIn .3s ease forwards;
    position: relative;
}
@keyframes popIn{to{transform:scale(1)}}

.overlay-card.fade-out{opacity:0;}

.overlay h2{margin:0 0 12px;font-size:20px;font-weight:700;grid-column:span 2;color:var(--text-light)}
.overlay p{margin:0 0 12px;font-size:14px;grid-column:span 2;color:var(--text-light)}

.overlay-button{
    height:180px;
    width:180px;
    border-radius:20px;
    border:none;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    color:var(--text-light);
    background:var(--btn-bg);
    box-shadow:0 6px 14px rgba(30,110,255,0.4);
    transition:transform .1s ease, box-shadow .1s ease, background .15s ease;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
}
.overlay-button.selected{border: 3px solid #fff;}
.overlay-button svg{width:40px;height:40px;fill:var(--text-light)}
.overlay-button:hover{background:var(--btn-hover);transform:translateY(-2px);box-shadow:0 8px 18px rgba(30,110,255,0.5)}
.overlay-button:active{background:var(--btn-active);transform:translateY(2px);box-shadow:0 3px 8px rgba(30,110,255,0.3)}

.small-button{
    position:absolute;
    bottom:16px;
    grid-column:span 2;
    padding:8px 16px;
    border-radius:12px;
    border:none;
    background:var(--small-btn-bg);
    color:var(--text-light);
    cursor:pointer;
    font-size:14px;
    transition:background .2s ease;
}
.small-button:hover{background:var(--small-btn-hover);}

@media (max-width:520px){
    .overlay-card{grid-template-columns:repeat(2,140px); padding:24px 18px; gap:14px}
    .overlay-button{height:140px;width:140px;font-size:14px}
    .overlay-button svg{width:32px;height:32px}
    .small-button{font-size:12px;padding:6px 12px;bottom:10px}
}




/* 30秒自動跳出字卡 */


/* 右側彈出的小卡 */
#surveyInviteCard {
  position: fixed;
  right: -300px;
  bottom: 30px;
  width: 260px;
  background: #1976d2;
  color: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: right 0.6s ease;
  font-family: "Noto Sans TC", sans-serif;
  z-index: 2000;
}

#surveyInviteCard.active {
  right: 30px;
}

.invite-content {
  text-align: center;
}

#openSurveyBtn {
  background: #fff;
  color: #1976d2;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  margin-top: 8px;
  cursor: pointer;
  font-weight: bold;
}

#openSurveyBtn:hover {
  background: #e3f2fd;
}

.countdown-text {
  font-size: 13px;
  margin-top: 6px;
  opacity: 0.9;
}