:root {
  color-scheme: dark;
  font-family: "Noto Sans Thai", "Segoe UI", Tahoma, sans-serif;
  background: #071426;
  color: #edf7ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(93, 74, 220, .26), transparent 36rem),
    radial-gradient(circle at 92% 5%, rgba(17, 184, 163, .18), transparent 34rem),
    #071426;
}

.legal-shell { width: min(900px, calc(100% - 32px)); margin: 34px auto 64px; }
.legal-header, .legal-card {
  border: 1px solid #275678;
  background: rgba(8, 31, 52, .94);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .24);
}
.legal-header { border-radius: 24px; padding: 24px 28px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.brand-mark {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px;
  background: linear-gradient(145deg, #39c6fa, #3478f6); color: #031527;
  font: 800 18px Georgia, serif;
}
.brand strong { display: block; font: 700 25px Georgia, serif; }
.brand small { color: #75dfff; letter-spacing: .13em; }
.legal-card { margin-top: 18px; border-radius: 24px; padding: clamp(24px, 5vw, 48px); }
.eyebrow { color: #62e8d0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 10px 0 8px; font-size: clamp(30px, 5vw, 46px); line-height: 1.2; }
.updated { color: #9bb3c8; margin: 0 0 32px; }
h2 { color: #86e9ff; font-size: 20px; margin: 30px 0 9px; }
p, li { color: #c9d8e6; line-height: 1.75; }
ul { padding-left: 22px; }
a { color: #6fe8ff; }
.notice { border-left: 4px solid #35ddb6; padding: 12px 16px; background: #0a3b3d; border-radius: 8px; }
.actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }
.button { display: inline-flex; padding: 11px 18px; border: 1px solid #2d7496; border-radius: 12px; text-decoration: none; font-weight: 700; }
.button.primary { background: linear-gradient(135deg, #13b98f, #168db5); color: white; border: 0; }
@media (max-width: 560px) { .legal-shell { width: min(100% - 20px, 900px); margin-top: 12px; } .legal-header { padding: 18px; } }