:root {
    --color-bg: #14151a;
    --color-surface: #1f212b;
    --color-surface-alt: #262838;
    --color-border: #343650;
    --color-text: #e8e8f0;
    --color-text-dim: #9a9cb5;
    --color-accent: #c9a24a;
    --color-accent-hover: #e0b95c;
    --color-danger: #d96c6c;
    --color-success: #6fbf73;
    --radius: 8px;
    --max-width: 640px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); }

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    max-width: 960px;
    margin: 0 auto;
}

.brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text);
}

.nav-toggle {
    display: block;
    background: none;
    border: none;
    color: var(--color-text);
    font-size: 1.5rem;
    cursor: pointer;
}

.nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 1rem 1rem;
}

.nav-links.open { display: flex; }

.nav-links a {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.nav-links a:last-child { border-bottom: none; }

.sign-in-link {
    color: var(--color-accent);
    font-weight: 600;
}

@media (min-width: 720px) {
    .nav-toggle { display: none; }
    .nav-links {
        display: flex;
        flex-direction: row;
        position: static;
        background: none;
        border: none;
        padding: 0;
        gap: 1.25rem;
    }
    .nav-links a { border-bottom: none; padding: 0; }
}

.site-main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.site-footer {
    text-align: center;
    color: var(--color-text-dim);
    font-size: 0.85rem;
    padding: 1.5rem 1rem;
}

h1, h2, h3 { color: var(--color-text); }

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
    margin-top: 1rem;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select {
    width: 100%;
    padding: 0.65rem 0.75rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 1rem;
}

input:focus, select:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.field-hint {
    font-size: 0.8rem;
    color: var(--color-text-dim);
    margin-top: 0.25rem;
}

.field-error {
    font-size: 0.85rem;
    color: var(--color-danger);
    margin-top: 0.25rem;
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.checkbox-row input { width: auto; margin-top: 0.2rem; }

.btn {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: var(--color-accent);
    color: #1a1a1a;
    border: none;
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 1.5rem;
}

.btn:hover { background: var(--color-accent-hover); }

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alert-error {
    background: rgba(217, 108, 108, 0.15);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}

.alert-success {
    background: rgba(111, 191, 115, 0.15);
    border: 1px solid var(--color-success);
    color: var(--color-success);
}

.subscribe-box {
    border: 1px dashed var(--color-accent);
    border-radius: var(--radius);
    padding: 1rem;
    margin-top: 1.5rem;
    background: rgba(201, 162, 74, 0.06);
}

.subscribe-box h3 { margin-top: 0; }

.price-tag {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-accent);
}

#paypal-button-container {
    margin-top: 1rem;
    max-width: 350px;
}

.alert-info {
    background: rgba(99, 137, 210, 0.15);
    border: 1px solid #6389d2;
    color: #92abdf;
}

.btn-danger {
    background: var(--color-danger);
    color: #fff;
}
.btn-danger:hover { background: #c45a5a; }

dl.info-list { margin: 0; }
dl.info-list dt {
    font-size: 0.8rem;
    color: var(--color-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.9rem;
}
dl.info-list dd {
    margin: 0.15rem 0 0;
    font-weight: 500;
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 99px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.badge--super_admin  { background: rgba(201,162,74,0.25); color: var(--color-accent); }
.badge--admin        { background: rgba(99,137,210,0.2);  color: #92abdf; }
.badge--advanced_user{ background: rgba(111,191,115,0.2); color: var(--color-success); }
.badge--regular_user { background: rgba(154,156,181,0.15);color: var(--color-text-dim); }

/* ── Rebuilt nav (2025) ── */
.brand { display:flex; align-items:center; gap:.4rem; font-weight:700; font-size:1.05rem; color:var(--color-accent); text-decoration:none; }
.brand-rune { font-size:1.1rem; }
@media(min-width:700px){
  .nav-toggle { display:none; }
  .nav-links   { display:flex !important; flex-direction:row; position:static;
                 background:none; border:none; padding:0; gap:.15rem; align-items:center; }
  .nav-links.open { display:flex; }
}
.nav-link { display:flex; align-items:center; gap:.3rem; padding:.45rem .7rem;
            border-radius:var(--radius); font-size:.85rem; color:var(--color-text-dim);
            text-decoration:none; transition:all .15s; white-space:nowrap; }
.nav-link:hover, .nav-link.active { color:var(--color-text); background:var(--color-surface-alt); }
.nav-link.active { color:var(--color-accent); }
.nav-link--dim { color:var(--color-text-dim); }
.sign-in-link { border:1px solid var(--color-border); }
.sign-in-link:hover { border-color:var(--color-accent); color:var(--color-accent); }

/* ── Nav groups (dropdown menus) ──────────────────────────────────────────────
   Mobile: the group is a labelled block whose items sit inline beneath it —
   no hover to discover, everything visible in the drawer.
   Desktop (700px+): a real dropdown on hover, focus, or tap. */
.nav-group { position:relative; }
.nav-group-label { cursor:default; user-select:none; }
.nav-group.active > .nav-group-label { color:var(--color-accent); }
.nav-group-menu { display:flex; flex-direction:column; }
.nav-group-menu .nav-link { font-size:.82rem; padding-left:1.5rem; }

@media(min-width:700px){
    .nav-group-label { cursor:pointer; }
    .nav-group-menu {
        display:none; position:absolute; top:100%; left:0; z-index:60;
        min-width:11.5rem; padding:.3rem;
        background:var(--color-surface); border:1px solid var(--color-border);
        border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.45);
    }
    /* A hair of overlap so the pointer can cross into the menu. */
    .nav-group::after { content:""; position:absolute; top:100%; left:0; right:0; height:.35rem; }
    .nav-group:hover > .nav-group-menu,
    .nav-group:focus > .nav-group-menu,
    .nav-group:focus-within > .nav-group-menu { display:flex; }
    .nav-group-menu .nav-link { padding-left:.7rem; }
}

/* ── Region tabs ──────────────────────────────────────────────────────────────
   Without JS every panel just renders stacked (progressive enhancement);
   .js-tabs is added by script, and only then do panels hide. */
.rtab-strip { display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none;
              margin:.75rem 0 .5rem; padding-bottom:.15rem; -webkit-overflow-scrolling:touch; }
.rtab-strip::-webkit-scrollbar { display:none; }
.rtab { display:flex; align-items:center; gap:.3rem; white-space:nowrap; cursor:pointer;
        padding:.5rem .8rem; font-size:.82rem; font-family:inherit;
        color:var(--color-text-dim); background:var(--color-surface);
        border:1px solid var(--color-border); border-radius:var(--radius);
        transition:all .15s; }
.rtab:hover { color:var(--color-text); border-color:var(--color-text-dim); }
.rtab.active { color:var(--color-accent); border-color:var(--color-accent);
               background:rgba(201,162,74,.08); }
.rtab-count { font-size:.68rem; font-weight:700; color:var(--color-text-dim);
              background:var(--color-surface-alt); border-radius:8px; padding:.02rem .32rem; }
.rtab.active .rtab-count { color:var(--color-accent); background:rgba(201,162,74,.14); }
.js-tabs .rpanel { display:none; }
.js-tabs .rpanel.active { display:block; animation:rpanel-in .16s ease-out; }
@keyframes rpanel-in { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
/* Tighter tab labels on very small screens — icons carry the meaning. */
@media(max-width:420px){ .rtab span:not(.rtab-count) { display:none; } .rtab { padding:.5rem .65rem; } }

/* ── Nav quest badge ── */
.nav-badge{display:inline-block;background:var(--color-accent);color:#1a1200;font-size:.68rem;font-weight:800;border-radius:9px;padding:.05rem .4rem;margin-left:.15rem;vertical-align:middle}


/* ── Form validation & password toggles ──────────────────────────────────── */
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 2px rgba(200, 60, 60, .12);
}

input.is-valid {
    border-color: rgba(106, 154, 90, .7);
}

input.is-checking {
    background-image: linear-gradient(90deg, transparent, rgba(201,162,74,.14), transparent);
    background-size: 200% 100%;
    animation: fieldCheck 1s linear infinite;
}
@keyframes fieldCheck { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.form-alert { margin-bottom: .75rem; }

/* Password field + show/hide button */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 2.6rem; }
.pw-toggle {
    position: absolute;
    top: 50%;
    right: .5rem;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: .15rem .3rem;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
    border-radius: 4px;
}
.pw-toggle:hover { opacity: 1; }
.pw-toggle:focus-visible { outline: 2px solid var(--color-accent); opacity: 1; }


/* ── Quest wayfinding ────────────────────────────────────────────────────────
   The scroll icon and the caption carry the meaning; colour only reinforces it,
   so these still read for anyone who can't distinguish the accent hue. */
.quest-dir{font-size:.78rem;margin:.25rem 0 .1rem;color:var(--color-accent)}
.quest-dir--here{color:var(--color-success)}
.quest-dir--sea{color:#7fa5c9}
.panel-quest{font-size:.78rem;color:var(--color-accent);margin:.3rem 0}