:root {
    --bg: #0f172a;
    --card: #ffffff;
    --ink: #0f172a;
    --muted: #64748b;
    --accent: #2563eb;
    --accent-ink: #ffffff;
    --ok-bg: #ecfdf5;
    --ok-ink: #065f46;
    --err-bg: #fef2f2;
    --err-ink: #991b1b;
    --line: #e2e8f0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(160deg, #1e293b, #0f172a);
    color: var(--ink);
    min-height: 100vh;
    padding: 2rem 1rem;
}

.card {
    background: var(--card);
    max-width: 460px;
    margin: 3rem auto;
    padding: 2rem 2.25rem 2.5rem;
    border-radius: 14px;
    box-shadow: 0 20px 45px rgba(2, 6, 23, 0.35);
}

.wide { max-width: 900px; }

.brand {
    display: inline-block;
    margin: 0 0 1.25rem;
    line-height: 0;
}

.brand img {
    height: 30px;
    width: auto;
    display: block;
}

h2 { margin: 0 0 1rem; font-size: 1.15rem; }

label { display: block; font-size: 0.85rem; color: var(--muted); margin: 0.75rem 0 0.25rem; }

input[type=email], input[type=text], input[type=url], select {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.95rem;
}

button, .btn {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-ink);
    border: 0;
    border-radius: 8px;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    text-decoration: none;
    margin-top: 1rem;
}

button.secondary, .btn.secondary { background: #e2e8f0; color: var(--ink); }
button.danger, .btn.danger { background: #dc2626; }

.linkbtn {
    background: none;
    color: var(--accent);
    padding: 0;
    margin: 0;
    font-size: inherit;
}

.muted { color: var(--muted); font-size: 0.9rem; }

.msg { padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.9rem; margin: 0.5rem 0; }
.msg.ok { background: var(--ok-bg); color: var(--ok-ink); }
.msg.err { background: var(--err-bg); color: var(--err-ink); }

/* Wrap wide data tables so they scroll within the card instead of spilling outside it. */
.table-scroll { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.9rem; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }

.envlist { list-style: none; padding: 0; margin: 1rem 0; }
.envlist li { margin: 0.5rem 0; }
.envlist a {
    display: block;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 600;
}
.envlist a:hover { border-color: var(--accent); }
.role { color: var(--muted); font-weight: 400; font-size: 0.85rem; }

.adminnav { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.5rem; font-size: 0.9rem; }
.adminnav a { color: var(--accent); text-decoration: none; }
.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.75rem; background: #eef2ff; color: #3730a3; }
.inline { display: inline; margin: 0; }
form.inline button { margin-top: 0; }
.tag-off { color: var(--muted); }