/* ============================================================
   AI-ANCHOR: CSS_PAGE_GM — TASK-023 (owner #50): halaman lama berbasis brand.css (reset, legal, offline) memakai
   bahasa visual HOME (css/mine.css: palet navy/emas, font Lilita One + Nunito, kartu kayu ber-outline, tombol oranye 3D).
   Dimuat SETELAH brand.css + stylesheet halaman: menimpa token brand lalu menata ulang kartu/tombol/input. Logika JS tidak berubah.
   ============================================================ */
:root, html body {
	--bg: #0b1024; --bg-rgb: 11, 16, 36; --txt: #eef3ff; --txt-rgb: 238, 243, 255; --mut: #b4c2e6; --mut-rgb: 180, 194, 230;
	--card: #1b2446; --card-rgb: 27, 36, 70; --card2: #26315e; --panel: #151d42; --line: #0b1024; --line2: #34427a; --line-rgb: 52, 66, 122;
	--brand: #ffc933; --brand-rgb: 255, 201, 51; --brand2: #ffe487; --brand2-rgb: 255, 228, 135; --on-brand: #0b1024; --on-brand-rgb: 11, 16, 36;
	--acc: #5ef0ff; --good: #86e85c; --gold: #ffc933;
	--surface-btn-primary: linear-gradient(#ffc04d, #ff9a1f 55%, #f07800); --surface-card-bg: linear-gradient(#26315e, #151d42);
	--font-ui: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font: var(--font-ui);
	--font-title: "Lilita One", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
	--radius-md: 16px; --radius-lg: 24px; --radius-sm: 12px;
}
body { background: radial-gradient(120% 60% at 50% 0%, #1b2a5e 0%, #0b1024 60%) fixed, #0b1024; color: var(--txt); font-family: var(--font-ui); font-weight: 700; }

/* ---------- /reset (py-*) ---------- */
.py { background: transparent; }
.py-head { border-bottom: 3px solid var(--line); background: linear-gradient(rgba(11, 16, 36, .96), rgba(11, 16, 36, .84)); }
.py-head b { font: 400 20px/1.2 var(--font-title); color: #fff; text-shadow: 0 2px 0 var(--line); }
.py-back { color: var(--gold); }
.py-card { position: relative; gap: 16px; padding: 24px 16px; border: 3px solid var(--line); border-radius: 24px; background: linear-gradient(#26315e, #1b2446);
	box-shadow: 0 6px 0 #0a0f26, inset 0 2px 0 rgba(255, 255, 255, .08), 0 16px 32px rgba(0, 0, 0, .35); }
.py-k { color: var(--acc) !important; font: 900 12px/16px var(--font-ui) !important; letter-spacing: .08em; }
.py-sub { color: var(--mut); font-weight: 800; }
.py-f span { color: var(--mut); font-weight: 900; }
.py-in { min-height: 52px; border: 3px solid var(--line); border-radius: 12px; background: #0a0f26; color: var(--txt); font: 800 16px/1.45 var(--font-ui); }
.py-in:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 201, 51, .25); }
.py-btn { position: relative; min-height: 56px; border: 3px solid var(--line); border-radius: 16px; background: var(--surface-btn-primary); color: #fff;
	font: 400 20px/1 var(--font-title); letter-spacing: .03em; text-transform: uppercase; text-decoration: none;
	text-shadow: -1.5px -1.5px 0 #8a3a00, 1.5px -1.5px 0 #8a3a00, -1.5px 1.5px 0 #8a3a00, 1.5px 1.5px 0 #8a3a00, 0 3px 0 #8a3a00;
	box-shadow: 0 6px 0 #b04c00, 0 10px 20px rgba(0, 0, 0, .35), inset 0 3px 0 rgba(255, 255, 255, .45); transition: transform .18s cubic-bezier(.22, 1, .36, 1); }
.py-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #b04c00, inset 0 3px 0 rgba(255, 255, 255, .35); }
.py-err { color: #fda4af; font-weight: 800; }
.py-done .py-k, .py-empty .py-k { color: var(--good) !important; }

/* ---------- legal (lg-*) ---------- */
.lg-head { border-bottom: 3px solid var(--line); background: linear-gradient(rgba(11, 16, 36, .96), rgba(11, 16, 36, .84)); }
.lg-logo b { font: 400 22px/1 var(--font-title); color: var(--gold); text-shadow: 0 2px 0 var(--line); }
.lg-cta { min-height: 44px; border: 3px solid var(--line); border-radius: 12px; background: var(--surface-btn-primary); color: #fff; font: 400 16px/1 var(--font-title); text-transform: uppercase;
	text-shadow: 0 2px 0 #8a3a00; box-shadow: 0 4px 0 #b04c00; }
.lg-main { position: relative; margin-top: 16px; margin-bottom: 32px; padding: 24px 16px; border: 3px solid var(--line); border-radius: 24px; background: linear-gradient(#1b2446, #151d42);
	box-shadow: 0 6px 0 #0a0f26, 0 16px 32px rgba(0, 0, 0, .35); }
@media (min-width: 768px) { .lg-main { padding: 32px; } }
.lg-main h1, .lg-main h2 { font-family: var(--font-title); font-weight: 400; color: #fff; text-shadow: 0 2px 0 var(--line); }
.lg-main h1 { color: var(--gold); }
.lg-main p, .lg-main li { color: var(--txt); font-weight: 700; }
.lg-main a, .lg-foot a { color: var(--brand2); }
.lg-k, .lg-eff { color: var(--acc); font-weight: 900; }

/* ---------- /offline ---------- */
.off-title { font-family: var(--font-title) !important; font-weight: 400 !important; color: #fff; text-shadow: 0 2px 0 var(--line); }
.off-kicker { color: var(--acc) !important; }
.off-btn { border: 3px solid var(--line) !important; border-radius: 16px !important; background: var(--surface-btn-primary) !important; color: #fff !important;
	font-family: var(--font-title) !important; font-weight: 400 !important; text-transform: uppercase; text-shadow: 0 2px 0 #8a3a00; box-shadow: 0 6px 0 #b04c00 !important; }