@font-face {
    font-family: 'ClassyVogue';
    src: url('/assets/fonts/Classyvogueregular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FuturaBT';
    src: url('/assets/fonts/FuturaBT-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

:root {
    --green-deep: #1a3428;
    --green-mid: #1f3d30;
    --green-card: rgba(22, 46, 36, 0.92);
    --green-border: rgba(201, 166, 107, 0.22);
    --gold-primary: #c9a66b;
    --gold-secondary: #b08d57;
    --gold-light: #e8d4b0;
    --gold-gradient: linear-gradient(135deg, #e8d4b0 0%, #c9a66b 45%, #9a7340 100%);
    --text-primary: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.62);
    --text-gold: #d4b483;
    --danger-bg: rgba(180, 70, 70, 0.12);
    --danger-border: rgba(220, 120, 120, 0.28);
    --danger-text: #f0b4b4;
    --success-bg: rgba(72, 140, 100, 0.14);
    --success-border: rgba(120, 190, 150, 0.28);
    --success-text: #b8e6cc;
    --font-display: 'ClassyVogue', Georgia, 'Times New Roman', serif;
    --font-body: 'FuturaBT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    min-height: 100vh;
    background: var(--green-deep);
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0, transparent 8%, transparent 92%, rgba(0, 0, 0, 0.18) 100%),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 72px
        );
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(201, 166, 107, 0.08), transparent 42%);
    pointer-events: none;
    z-index: 0;
}

h1, h2, h3, .brand-heading {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}

.panel-card,
.login-card {
    background: var(--green-card);
    border: 1px solid var(--green-border);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-gold);
    margin-bottom: 8px;
    font-weight: 600;
}

.form-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(201, 166, 107, 0.18);
    border-radius: 10px;
    padding: 13px 15px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.32);
}

.form-input:focus {
    border-color: var(--gold-primary);
    background: rgba(0, 0, 0, 0.24);
    box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.12);
}

.btn {
    padding: 11px 18px;
    border-radius: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.btn-primary,
.btn-login {
    background: var(--gold-gradient);
    color: #1f2a22;
    box-shadow: 0 8px 24px rgba(154, 115, 64, 0.28);
}

.btn-primary:hover,
.btn-login:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(154, 115, 64, 0.36);
}

.btn-secondary {
    background: transparent;
    border: 1px solid rgba(201, 166, 107, 0.35);
    color: var(--gold-light);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary:hover {
    background: rgba(201, 166, 107, 0.08);
}

.btn-danger {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger-text);
}

.btn-danger:hover {
    background: rgba(180, 70, 70, 0.22);
    color: #fff;
}

.alert-error,
.alert-danger {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger-text);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.45;
}

.alert-success {
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    color: var(--success-text);
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13.5px;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.status-active {
    background: rgba(72, 140, 100, 0.18);
    color: #9fd9b5;
}

.status-expired {
    background: var(--danger-bg);
    color: var(--danger-text);
}

.status-never {
    background: rgba(201, 166, 107, 0.14);
    color: var(--gold-light);
}

.brand-logo {
    width: min(168px, 52vw);
    height: auto;
    display: block;
    margin: 0 auto 14px;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.28));
}

.brand-subtitle {
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-gold);
    text-align: center;
    font-weight: 600;
}

.brand-divider {
    width: 72px;
    height: 1px;
    background: var(--gold-gradient);
    margin: 18px auto 0;
    opacity: 0.85;
}