/* Intro page — blue & gold theme (same look as the three sections).
   Loaded after the page's own <style>, so it overrides the variables and shapes only. */
:root {
    --primary-gradient: linear-gradient(135deg, #3f7fc4, #1f4f86);
    --primary-color: #2f6fb2;
    --primary-hover-color: #1f4f86;
    --secondary-color: #d9a441;
    --secondary-hover-color: #a87a1c;
    --container-bg: rgba(255, 255, 255, 0.92);
    --card-border: #e3ebf4;
    --text-color-dark: #12243a;
    --text-color-light: #5d6b7b;
    --border-color: #dbe3ec;
    --box-shadow-color: rgba(31, 79, 134, 0.14);
    --body-bg-color: #f4f7fb;
    --body-bg-pattern: radial-gradient(900px 420px at 85% -100px, rgba(47,111,178,.16), transparent 70%), radial-gradient(800px 380px at 0% -80px, rgba(217,164,65,.18), transparent 70%);
    --switch-icon-color: #d9a441;
}
[data-theme="dark"] {
    --primary-gradient: linear-gradient(135deg, #3f7fc4, #1f4f86);
    --primary-color: #6aa6e4;
    --primary-hover-color: #9cc4ee;
    --secondary-color: #e8b957;
    --secondary-hover-color: #f1cd84;
    --container-bg: rgba(16, 33, 62, 0.9);
    --card-border: rgba(255, 255, 255, 0.08);
    --text-color-dark: #f1f6fc;
    --text-color-light: #a3b4c8;
    --border-color: #2a4166;
    --box-shadow-color: rgba(0, 0, 0, 0.5);
    --body-bg-color: #0a1730;
    --body-bg-pattern: radial-gradient(900px 420px at 85% -100px, rgba(47,111,178,.3), transparent 70%), radial-gradient(800px 380px at 0% -80px, rgba(217,164,65,.14), transparent 70%);
}
.container { max-width: 820px; padding: 44px 40px 40px; border-radius: 28px; }
.container::before { width: 200px; height: 5px; background: linear-gradient(90deg, #1f4f86, #2f6fb2, #d9a441); }
.brand-logo { width: 132px; padding: 14px 20px; background: #fff; border: 1px solid #efd9a3; border-radius: 22px; box-shadow: 0 10px 28px var(--box-shadow-color), 0 0 0 5px rgba(217,164,65,.14); }
.subtitle { position: relative; padding-bottom: 22px; }
.subtitle::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 90px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #2f6fb2, #d9a441); }
.btn { justify-content: flex-start; gap: 16px; padding: 18px 22px; text-align: right; border-radius: 18px; background: var(--primary-gradient); box-shadow: 0 6px 18px rgba(31,79,134,.28); border-bottom: 4px solid #d9a441; }
.btn > i { flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(255,255,255,.18); font-size: 20px; }
.btn .bt { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.btn .bt b { font-size: 17px; font-weight: 800; }
.btn .bt small { font-size: 12.5px; font-weight: 400; opacity: .88; }
.btn:hover, .btn:focus-visible { box-shadow: 0 14px 28px rgba(31,79,134,.38); }
.btn-accent { background: linear-gradient(135deg, #e8b957, #c48a1e); color: #2b2108; border-bottom-color: #1f4f86; box-shadow: 0 6px 18px rgba(196,138,30,.32); }
.btn-accent > i { background: rgba(255,255,255,.35); }
.btn-accent:hover, .btn-accent:focus-visible { box-shadow: 0 14px 28px rgba(196,138,30,.4); }
.btn.btn-navy { background: linear-gradient(135deg, #2f6fb2, #1f3a5f); }
#import-json-btn { background: transparent; color: var(--primary-color); border: 2px dashed var(--primary-color); box-shadow: none; justify-content: center; padding: 14px 22px; }
#import-json-btn > i { background: transparent; width: auto; height: auto; font-size: 18px; }
#import-json-btn:hover, #import-json-btn:focus-visible { background: rgba(47,111,178,.08); box-shadow: none; }
.import-status.ok { color: #1c7a5b; }
footer { font-size: 13px; }
footer p { display: inline-block; padding: 6px 18px; border-radius: 20px; background: var(--container-bg); border: 1px solid var(--border-color); color: var(--text-color-light); }
.modal-link { background: var(--primary-gradient); box-shadow: 0 6px 18px rgba(31,79,134,.28); }
@media (max-width: 480px) {
    .container { padding: 28px 16px 26px; border-radius: 22px; }
    .brand-logo { width: 104px; padding: 10px 14px; }
    .btn { padding: 14px 16px; gap: 12px; }
    .btn > i { width: 40px; height: 40px; font-size: 18px; }
    .btn .bt b { font-size: 15.5px; }
}
header { margin-bottom: 22px; }
.subtitle { margin-bottom: 12px; }
.import-status:empty { display: none; }