:root {
    --bg: #0f1711;
    --bg-soft: #18221a;
    --panel: rgba(25, 36, 27, 0.88);
    --line: rgba(180, 164, 118, 0.18);
    --gold: #b9a36b;
    --gold-strong: #d1bb83;
    --text: #eef2ea;
    --muted: #b8c2b4;
    --danger: #c86b6b;
    --success: #83b98a;
    --shadow: 0 20px 45px rgba(0, 0, 0, 0.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: Inter, Arial, sans-serif; background:
    radial-gradient(circle at top, rgba(61, 88, 61, 0.25), transparent 35%),
    linear-gradient(180deg, #101813, #0b110d 60%);
    color: var(--text); }

a { color: var(--gold-strong); text-decoration: none; }
a:hover { opacity: .9; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.02), rgba(255,255,255,0.01));
}

.page-shell { width: min(1240px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 40px; }
.topbar, .card, .footer { backdrop-filter: blur(12px); }
.topbar {
    display: flex; justify-content: space-between; align-items: end; gap: 16px;
    padding: 24px 28px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 24px;
    background: linear-gradient(135deg, rgba(28,39,30,.92), rgba(18,28,21,.78)); box-shadow: var(--shadow);
}
.topnav { display: flex; gap: 18px; flex-wrap: wrap; }
.topnav a { padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,0.04); }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; color: var(--gold); font-size: .78rem; margin: 0 0 8px; }
h1, h2, h3 { margin: 0 0 12px; }
p { color: var(--muted); line-height: 1.55; }

.card {
    background: var(--panel); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow);
    padding: 24px;
}
.login-wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: stretch; }
.hero-card {
    min-height: 420px; display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(145deg, rgba(38,55,39,.95), rgba(21,31,23,.82));
}
.feature-list { margin: 18px 0 0; padding-left: 20px; color: var(--text); }
.feature-list li { margin: 8px 0; }

.form-card { max-width: 100%; }
.login-card { justify-content: center; }
label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; color: var(--text); font-size: .95rem; }
input, select, textarea, button {
    font: inherit; border-radius: 16px; border: 1px solid rgba(213, 192, 138, 0.14);
}
input, select, textarea {
    width: 100%; background: rgba(8, 12, 9, 0.45); color: var(--text); padding: 14px 16px;
}
textarea { resize: vertical; min-height: 120px; }
button, .button-link, .button-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
    padding: 13px 18px; border: none; border-radius: 16px; font-weight: 700;
}
button, .button-link {
    background: linear-gradient(135deg, #b79e62, #d0bb7d); color: #172017;
}
.button-secondary {
    background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--line);
}
.flash { margin: 0 0 16px; padding: 14px 16px; border-radius: 16px; }
.flash.success { background: rgba(131, 185, 138, 0.18); color: #d7f0db; }
.flash.error { background: rgba(200, 107, 107, 0.18); color: #ffd8d8; }

.intro-card { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.searchbar { display: flex; gap: 12px; }
.searchbar input { flex: 1; }
.table-card { margin-top: 20px; padding: 0; overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 1200px; }
thead th {
    background: rgba(185, 163, 107, 0.12); color: var(--gold-strong); text-align: left;
    padding: 16px 14px; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
}
tbody td { padding: 14px; border-top: 1px solid rgba(255,255,255,0.05); vertical-align: top; color: #edf2ea; }
tbody tr:hover { background: rgba(255,255,255,0.03); }
.actions { min-width: 150px; }
.actions form { margin-top: 8px; }
.link-danger { background: transparent; color: #f2aaaa; padding: 0; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 18px; }
.full-width { grid-column: 1 / -1; }
.checkbox-row { flex-direction: row; align-items: center; gap: 12px; padding-top: 34px; }
.checkbox-row input { width: auto; }
.form-actions { display: flex; gap: 12px; margin-top: 24px; }
.footer { text-align: center; padding: 20px; margin-top: 24px; color: var(--muted); }

@media (max-width: 900px) {
    .login-wrap, .intro-card, .form-grid { grid-template-columns: 1fr; }
    .topbar { align-items: start; flex-direction: column; }
    .searchbar { flex-direction: column; }
}