.legal-page {
  background:
    radial-gradient(circle at 8% 4%, rgb(246 183 60 / 16%), transparent 32rem),
    radial-gradient(circle at 94% 80%, rgb(232 77 103 / 12%), transparent 36rem),
    var(--color-bg);
}
.legal-page .container { width: min(100% - 32px, 760px); margin-inline: auto; padding: 14px 0 40px; }
.legal-page .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--app-header-background); padding: 14px 20px; box-shadow: var(--shadow-sm); color: #fff; }
.legal-page .header .logo, .legal-page .header .logout a { display: flex; align-items: center; gap: 9px; }
.legal-page .header .logo { font-size: 20px; font-weight: 600; }
.legal-page .header .logo i { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: var(--color-primary); color: #fff; }
.legal-page .header .logout a { color: #fff; font-size: .86rem; font-weight: 600; text-decoration: none; }
.legal-page .card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); padding: 22px 24px 28px; box-shadow: var(--shadow-md); }
.legal-page .page-title { display: flex; align-items: center; gap: 11px; margin: 0 0 20px; color: var(--color-text); font-size: 1.55rem; letter-spacing: -.025em; }
.legal-page .page-title i { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 13px; background: var(--color-primary-soft); color: var(--color-primary); font-size: 1rem; }
.legal-page h4 { margin: 24px 0 8px; padding-left: 12px; border-left: 3px solid var(--color-primary); color: var(--color-text); font-size: .98rem; }
.legal-page p, .legal-page li { color: var(--color-text-muted); font-size: .86rem; line-height: 1.7; }
.legal-page p { margin: 0 0 12px; }
.legal-page ul { margin: 8px 0 16px; padding-left: 22px; }
.legal-page li + li { margin-top: 7px; }
.legal-page strong { color: var(--color-text); }
.legal-page .card a { color: var(--color-primary-strong); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.legal-page .card a:hover { text-decoration: underline; }
.legal-page .legal-formula { margin: 16px 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #f4f3f7; padding: 12px 14px; color: var(--color-text); font-style: italic; text-align: center; }
.legal-page .updated { margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .74rem; text-align: right; }
@media (max-width: 560px) {
  .legal-page .container { width: min(100% - 24px, 760px); padding-top: 10px; }
  .legal-page .header { padding: 12px 14px; }
  .legal-page .card { padding: 18px 18px 24px; }
  .legal-page .page-title { font-size: 1.3rem; }
  .legal-page h4 { margin-top: 20px; }
}