:root {
    --hub-ink: #17261f;
    --hub-muted: #66756d;
    --hub-line: #dce6df;
    --hub-canvas: #f4f8f5;
    --hub-surface: #ffffff;
    --hub-green: #087443;
    --hub-green-dark: #045a33;
    --hub-green-soft: #e9f7ee;
    --hub-blue-soft: #eaf3ff;
    --hub-radius: 16px;
    --hub-shadow: 0 12px 32px rgba(21, 45, 31, .08);
}

html { min-height: 100%; }

body {
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--hub-canvas);
    color: var(--hub-ink);
    -webkit-font-smoothing: antialiased;
}

a { transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease; }

/* Shared public/authentication pages */
.main-navbar { background: rgba(255, 255, 255, .94) !important; backdrop-filter: blur(16px); }
.main-content { min-height: calc(100vh - 145px); }
.main-footer { background: transparent !important; color: var(--hub-muted) !important; }
.brand-logo { overflow: hidden; box-shadow: 0 8px 22px rgba(8, 116, 67, .22) !important; }
.login-wrapper, .register-page {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 145px) !important;
    padding: 48px 20px !important;
}
.login-wrapper::before, .register-page::before {
    content: "";
    position: fixed;
    z-index: -1;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34, 197, 94, .16), transparent 68%);
    right: -100px;
    bottom: -150px;
}
.login-card, .register-card {
    border: 1px solid rgba(220, 230, 223, .9) !important;
    box-shadow: 0 20px 55px rgba(14, 55, 33, .11) !important;
}
.login-card { max-width: 460px !important; }
.login-logo { width: 86px !important; height: 86px !important; }
.login-header h2, .register-header h2 { color: var(--hub-ink) !important; letter-spacing: -.7px; }
.form-control, .form-select {
    border-color: #d4e0d7 !important;
    box-shadow: none !important;
}
.form-control:focus, .form-select:focus {
    border-color: var(--hub-green) !important;
    box-shadow: 0 0 0 4px rgba(8, 116, 67, .12) !important;
}
.login-btn, .register-btn { background: linear-gradient(135deg, #0a8550, var(--hub-green-dark)) !important; box-shadow: 0 9px 18px rgba(8, 116, 67, .2); }
.login-btn:hover, .register-btn:hover { filter: brightness(.96); }
.role-label { border-color: var(--hub-line) !important; }
.role-option input:checked + .role-label { border-color: var(--hub-green) !important; background: var(--hub-green-soft) !important; }

/* Scorer shell refinements */
.scorer-header {
    background: linear-gradient(120deg, #063c29, #087443 58%, #0b8b51) !important;
    padding: 16px clamp(18px, 4vw, 48px) !important;
}
.scorer-logo { display: flex; align-items: center; gap: 10px; }
.scorer-logo::before { content: ""; width: 32px; height: 32px; border-radius: 10px; background: url('/images/logo.png') center/contain no-repeat, #fff; }
.scorer-container { max-width: 1440px !important; padding: 32px clamp(16px, 3vw, 40px) 56px !important; }
.scorer-nav a { border: 1px solid transparent; }
.scorer-nav a.active { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.22); }
.card { border-color: var(--hub-line) !important; box-shadow: var(--hub-shadow) !important; }

@media (max-width: 700px) {
    .login-wrapper, .register-page { padding: 28px 14px !important; }
    .login-card, .register-card { padding: 28px 22px !important; border-radius: 18px !important; }
    .scorer-header { align-items: stretch !important; }
    .scorer-nav { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 3px; }
    .scorer-nav a { white-space: nowrap; }
}