* { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-body, 'Segoe UI', system-ui, sans-serif); }

body { background: var(--bg-primary, #0b0b0b); color: var(--text-primary, #eee); min-height: 100vh; }

/* ── Header ── */
.legal-header {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-primary, #0b0b0b);
    border-bottom: 1px solid var(--bg-border, #1a1a1a);
}
.legal-back {
    background: none; border: none; cursor: pointer; padding: 6px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary, #888); width: 32px; height: 32px;
    transition: background 0.15s;
}
.legal-back:hover { background: var(--bg-input, #1a1a1a); color: var(--text-primary, #eee); }
.legal-header-title { font-size: 15px; font-weight: 700; color: var(--text-primary, #eee); }

/* ── Main ── */
.legal-main { padding: 0 0 60px; }

.legal-content {
    max-width: 680px; margin: 0 auto;
    padding: 32px 20px;
}

/* ── Hero ── */
.legal-hero { margin-bottom: 24px; }
.legal-hero h1 {
    font-size: 26px; font-weight: 800; color: var(--text-primary, #eee);
    letter-spacing: -0.5px; margin-bottom: 6px;
}
.legal-updated { font-size: 12px; color: var(--text-tertiary, #555); }

.legal-intro {
    font-size: 15px; line-height: 1.65; color: var(--text-secondary, #888);
    padding: 16px; background: var(--bg-card, #111);
    border-radius: 12px; border-left: 3px solid var(--accent, #fff);
    margin-bottom: 28px;
}

/* ── Sections ── */
.legal-section {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--bg-border, #1a1a1a);
}
.legal-section:last-child { border-bottom: none; margin-bottom: 0; }

.legal-section h2 {
    font-size: 17px; font-weight: 700; color: var(--text-primary, #eee);
    margin-bottom: 10px;
}
.legal-section h3 {
    font-size: 14px; font-weight: 600; color: var(--text-secondary, #888);
    margin: 14px 0 6px;
}
.legal-section p {
    font-size: 14px; line-height: 1.7; color: var(--text-secondary, #888);
    margin-bottom: 10px;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul {
    list-style: none; display: flex; flex-direction: column; gap: 8px;
    padding: 0;
}
.legal-section ul li {
    font-size: 14px; line-height: 1.6; color: var(--text-secondary, #888);
    padding-left: 16px; position: relative;
}
.legal-section ul li::before {
    content: "·"; position: absolute; left: 4px;
    color: var(--accent, #fff); font-weight: 700;
}
.legal-section a {
    color: var(--accent, #fff); text-decoration: none;
}
.legal-section a:hover { text-decoration: underline; }

@media (min-width: 768px) {
    .legal-content { padding: 48px 32px; }
    .legal-hero h1 { font-size: 32px; }
}