/* Shared materials. Solid bases also cover browsers without backdrop filtering. */
:root{
  --surface-glass:#2a2239;
  --surface-glass-deep:#171122;
  --surface-glass-soft:#372e4a;
  --surface-glass-tint:#543d79;
  --surface-glass-accent:#ceb6ff;
  --surface-glass-question:#120e1c;
  --surface-glass-answer:#241d38;
  --glass-border:rgba(222,209,255,.22);
  --glass-border-bright:rgba(245,239,255,.4);
  --glass-sheen:none;
  --glass-shadow:0 18px 48px rgba(5,3,12,.2),inset 0 1px 0 rgba(255,255,255,.12);
  --glass-blur:none;
  --glass-blur-mobile:none;
  --glass-text:#f5f1ff;
  --glass-muted:#c8bfd8;
}

/* Keep all materials opaque when either accessibility preference is enabled. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media(prefers-reduced-transparency:no-preference) and (prefers-contrast:no-preference){
    :root{
      --surface-glass:rgba(50,40,71,.6);
      --surface-glass-deep:rgba(20,15,30,.78);
      --surface-glass-soft:rgba(137,119,165,.12);
      --surface-glass-tint:rgba(82,55,128,.9);
      --surface-glass-accent:rgba(206,182,255,.85);
      --surface-glass-question:rgba(10,8,17,.42);
      --surface-glass-answer:rgba(183,155,255,.07);
      --glass-sheen:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,0) 55%);
      --glass-blur:blur(20px) saturate(145%);
      --glass-blur-mobile:blur(12px) saturate(140%);
    }
  }
}

/* Blur belongs to the outer surface; inner rows and controls only carry a tint.
   Mỗi câu hỏi trong FAQ giờ là một thẻ riêng, nên lớp kính thuộc về từng thẻ
   chứ không còn thuộc về cả nhóm .faq-items — nhóm chỉ còn là chỗ đặt khoảng
   cách giữa các thẻ. */
.site-header,
.review-card,
.waitlist-board,
.faq-items details,
.preview-dialog,
.reviews-next{
  background:var(--surface-glass);
  background-image:var(--glass-sheen);
  border-color:var(--glass-border);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}

.site-header,
.faq-items details,
.preview-dialog{
  background-color:var(--surface-glass-deep);
  border-top-color:var(--glass-border-bright);
}

/* Bốn thẻ cạnh nhau: bóng của cả bốn cộng lại sẽ làm đục khoảng trống giữa
   chúng, nên mỗi thẻ chỉ giữ một bóng nông. */
.faq-items details{
  box-shadow:0 10px 26px rgba(5,3,12,.18),inset 0 1px 0 rgba(255,255,255,.08);
}

.site-nav a{color:var(--glass-muted)}
.site-nav a:hover{color:var(--glass-text)}

.primary,
.app-action{
  background:var(--surface-glass-accent);
  background-image:var(--glass-sheen);
  color:#181121;
  box-shadow:inset 0 0 0 1px var(--glass-border-bright),inset 0 1px 0 rgba(255,255,255,.4),0 8px 24px rgba(30,14,55,.18);
}

.primary{
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}

.button.primary:hover{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 1px 0 rgba(255,255,255,.5),0 10px 28px rgba(113,79,172,.25);
}

.plan-card{--secondary:var(--glass-muted)}
.app-card{
  background:var(--surface-glass-soft);
  border-color:var(--glass-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

/* Thẻ đánh giá và bảng đăng ký từng là hai mảng sáng màu nổi bật đột ngột giữa
   nền tối. Giờ cả hai dùng chung lớp kính tối của trang; styles.css giữ nền và
   viền riêng của từng khối, ở đây chỉ thêm lớp mờ và ánh sáng mép. */
.review-card,
.waitlist-board{
  background-image:var(--glass-sheen);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}

.review-card{
  --secondary:var(--glass-muted);
  --caption:var(--glass-muted);
  border-top-color:var(--glass-border-bright);
}
.review-card .avatar{
  box-shadow:inset 0 0 0 1px rgba(var(--core-rgb),.2);
}
.reviews-next:hover{background:var(--surface-glass-tint)}

.waitlist-board{border-top-color:var(--glass-border-bright)}
.form-field input{
  box-shadow:inset 0 1px 2px rgba(4,2,10,.3);
}
.waitlist-submit:disabled{box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}

/* Nền nằm ở từng hàng câu hỏi để khi mở ra, câu trả lời sáng hơn hẳn phần câu
   hỏi ngay trên nó — vẫn trong cùng một khối, chỉ khác một nấc độ sáng. */
.faq-items details{background-color:var(--surface-glass-question)}
.faq-items summary{
  background:transparent;
  color:var(--glass-text);
}
.faq-items details>p{
  background:var(--surface-glass-answer);
  border-top-color:var(--glass-border);
  color:var(--glass-text);
}

.dialog-close,
.dialog-controls button{
  background:var(--surface-glass-soft);
  border-color:var(--glass-border);
  box-shadow:inset 0 0 0 1px var(--glass-border);
}
.preview-dialog::backdrop{
  background:rgba(8,6,13,.8);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.site-footer{border-top-color:var(--glass-border)}

@media(min-width:768px){
  .site-nav a[href="#waitlist"],
  .site-nav a[href="#waitlist"]:hover{
    background:var(--surface-glass-accent);
    background-image:var(--glass-sheen);
    box-shadow:inset 0 0 0 1px var(--glass-border-bright),inset 0 1px 0 rgba(255,255,255,.4);
  }
}

@media(max-width:767px){
  :root{--glass-blur:var(--glass-blur-mobile)}
  .site-nav{
    background:var(--surface-glass-deep);
    background-image:var(--glass-sheen);
    border-color:var(--glass-border-bright);
    box-shadow:var(--glass-shadow);
    -webkit-backdrop-filter:var(--glass-blur);
    backdrop-filter:var(--glass-blur);
  }

  /*
    Khung đăng ký trên điện thoại là mặt phẳng ĐỤC, không còn backdrop-filter.
    Đây là nơi cả luồng gửi diễn ra — bấm nút, cả khung chuyển sang đang gửi, rồi
    đổi sang thẻ thành công với dấu tick và chữ chuyển động bên trong — đúng lúc
    iPhone hay co giãn thanh địa chỉ. Một lớp kính 60% đục mà lớp mờ phía sau
    được vẽ lại sai dù một khung hình là để sáng lọt qua cả khung; mặt phẳng đục
    thì không có gì phía sau để lọt.

    Trông vẫn như kính: đúng bốn lớp của lớp kính cũ, chỉ thay "nền trang đã làm
    mờ" bằng chính nền đó vẽ sẵn — màu trang ở độ sâu này (#0A0712, điểm dừng 78%
    của --page-gradient) và quầng tím của .waitlist:before lọt qua khung. Nền sau
    khung vốn trơn, làm mờ một gradient trơn thì ra lại chính nó. Lấy mẫu pixel
    thật ở 375/390/430: lệch so với bản kính không quá vài mức ở mọi điểm.
  */
  .waitlist-board{
    background-color:#0A0712;
    background-image:
      var(--glass-sheen),
      linear-gradient(var(--surface-glass),var(--surface-glass)),
      radial-gradient(55% 58% at 50% 28%,rgba(var(--veil-rgb),.24),rgba(var(--veil-rgb),.075) 50%,rgba(var(--veil-rgb),.02) 78%,transparent 100%),
      radial-gradient(60% 66% at 50% 30%,rgba(var(--core-rgb),.06),rgba(var(--core-rgb),.02) 54%,transparent 100%);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

@media(prefers-reduced-transparency:reduce){
  .preview-dialog::backdrop{background:#08060c}
  /* styles.css dựng hai khối này bằng gradient, nên background-color của chúng
     là trong suốt. Khi người dùng tắt hiệu ứng trong suốt, thay hẳn bằng một
     màu đặc — không còn lớp nào cho nền trang lọt qua. */
  .review-card,
  .waitlist-board{
    background:#1a1428;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .plan-card,.plan-card-suggest{background:#221b33}
  .form-field input{background:#0b0813}
}

@media(prefers-contrast:more){
  :root{
    --glass-border:#c8b8e3;
    --glass-border-bright:#ede3ff;
    --glass-muted:#f0e9fa;
  }
  .site-nav a{color:var(--glass-text)}
  .form-field input{border-color:#c8b8e3;background:#0b0813}
  .form-field input::placeholder{color:#cfc6de}
  .review-card,.waitlist-board{
    background:#1a1428;
    border-color:#c8b8e3;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .plan-card,.plan-card-suggest{background:#221b33;border-color:#c8b8e3}
  .preview-dialog::backdrop{background:#08060c}
}