:root{
  color-scheme: dark;
  --page:        #0d0d0d;
  --surface:     #1a1a19;
  --surface-2:   #232322;
  --text-1:      #ffffff;
  --text-2:      #c3c2b7;
  --muted:       #898781;
  --grid:        #2c2c2a;
  --border:      rgba(255,255,255,0.10);
  --blue:        #3987e5;
  --gold:        #c98500;
}
@media (prefers-color-scheme: light){
  :root{
    color-scheme: light;
    --page:        #f9f9f7;
    --surface:     #fcfcfb;
    --surface-2:   #f0efec;
    --text-1:      #0b0b0b;
    --text-2:      #52514e;
    --muted:       #898781;
    --grid:        #e1e0d9;
    --border:      rgba(11,11,11,0.10);
    --blue:        #2a78d6;
    --gold:        #eda100;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --page:        #0d0d0d;
  --surface:     #1a1a19;
  --surface-2:   #232322;
  --text-1:      #ffffff;
  --text-2:      #c3c2b7;
  --muted:       #898781;
  --grid:        #2c2c2a;
  --border:      rgba(255,255,255,0.10);
  --blue:        #3987e5;
  --gold:        #c98500;
}
:root[data-theme="light"]{
  color-scheme: light;
  --page:        #f9f9f7;
  --surface:     #fcfcfb;
  --surface-2:   #f0efec;
  --text-1:      #0b0b0b;
  --text-2:      #52514e;
  --muted:       #898781;
  --grid:        #e1e0d9;
  --border:      rgba(11,11,11,0.10);
  --blue:        #2a78d6;
  --gold:        #eda100;
}
*{box-sizing:border-box;}
html, body{height:100%;}
body{
  margin:0; background:var(--page); color:var(--text-1);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display:flex; flex-direction:column; align-items:center;
}
.legal-frame{width:100%; max-width:2200px; display:flex; flex-direction:column; flex:1;}
.legal-header{
  display:flex; align-items:center; gap:10px; padding:16px 24px; border-bottom:1px solid var(--border);
}
.legal-header a{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text-1);}
.legal-header img{width:36px; height:36px; border-radius:8px; display:block;}
.legal-header span{font-weight:800; font-size:1.05rem;}
.legal-main{flex:1; padding:32px 24px 24px; display:flex; justify-content:center;}
.legal-wrap{width:100%; max-width:760px;}
h1{font-size:1.6rem; margin:0 0 4px; text-align:center;}
.sub{color:var(--text-2); margin:0 0 24px; font-size:0.9rem; text-align:center;}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  padding:24px; margin-bottom:20px;
}
.card h2{font-size:1.05rem; margin:22px 0 12px;}
.card h2:first-child{margin-top:0;}
.card p{margin:0 0 12px; line-height:1.55;}
.card ul{margin:0 0 12px 20px; padding:0; line-height:1.55;}
.card li{margin-bottom:5px;}
a{color:var(--blue);}
a:hover{color:var(--gold);}
.legal-btn-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px;}
.legal-btn{
  font-family:inherit; font-size:0.9rem; font-weight:600; text-decoration:none;
  border-radius:8px; border:1px solid var(--border); padding:11px 16px;
  background:var(--surface-2); color:var(--text-1); display:inline-block;
}
.legal-btn:hover{color:var(--text-1); box-shadow:0 4px 12px rgba(0,0,0,0.2);}
.legal-footer-nav{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:20px; color:var(--muted); font-size:0.8rem;
}
.legal-footer-nav a{color:var(--muted); text-decoration:underline;}
.legal-footer-nav a:hover{color:var(--text-1);}
#legal-ad-slot{
  width:100%; min-height:90px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:0.78rem; letter-spacing:0.04em; text-transform:uppercase;
  border-top:1px dashed var(--border);
}