.gscm-portal {
--gscm-navy: #0f172a;
--gscm-navy-soft: #1e293b;
--gscm-gold: #c5a059;
--gscm-gold-dark: #9a7639;
--gscm-ink: #263348;
--gscm-muted: #66748a;
--gscm-border: #e3e8ef;
--gscm-surface: #ffffff;
--gscm-background: #f4f6f9;
max-width: 1120px;
margin: 28px auto;
border: 1px solid var(--gscm-border);
border-radius: 18px;
background: var(--gscm-background);
box-shadow: 0 16px 45px rgba(15, 23, 42, .09);
color: var(--gscm-ink);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
line-height: 1.55;
overflow: hidden;
}
.gscm-portal *,
.gscm-portal *::before,
.gscm-portal *::after {
box-sizing: border-box;
}
.gscm-brand {
align-items: center;
background: var(--gscm-navy);
color: #fff;
display: flex;
gap: 14px;
padding: 22px clamp(20px, 5vw, 48px);
}
.gscm-brand-mark {
align-items: center;
border: 1px solid rgba(197, 160, 89, .7);
border-radius: 12px;
color: var(--gscm-gold);
display: flex;
font-size: 16px;
font-weight: 800;
height: 44px;
justify-content: center;
letter-spacing: .04em;
width: 44px;
}
.gscm-brand h2 {
color: #fff;
font-size: 19px;
line-height: 1.2;
margin: 0;
}
.gscm-eyebrow {
color: var(--gscm-gold-dark);
font-size: 11px;
font-weight: 800;
letter-spacing: .12em;
margin: 0 0 5px;
}
.gscm-brand .gscm-eyebrow {
color: var(--gscm-gold);
}
.gscm-intro {
max-width: 720px;
padding: 34px clamp(20px, 5vw, 48px) 20px;
}
.gscm-intro h3,
.gscm-dashboard h3 {
color: var(--gscm-navy);
font-size: clamp(24px, 3vw, 32px);
line-height: 1.2;
margin: 0 0 9px;
}
.gscm-intro > p:last-child,
.gscm-dashboard-heading p:last-child {
color: var(--gscm-muted);
margin: 0;
}
.gscm-auth-grid {
align-items: start;
display: grid;
gap: 18px;
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 0 clamp(20px, 5vw, 48px) 20px;
}
.gscm-card {
background: var(--gscm-surface);
border: 1px solid var(--gscm-border);
border-radius: 14px;
box-shadow: 0 5px 20px rgba(15, 23, 42, .035);
padding: 24px;
}
.gscm-card h3 {
color: var(--gscm-navy);
font-size: 19px;
margin: 0 0 4px;
}
.gscm-card-copy {
color: var(--gscm-muted);
font-size: 14px;
margin: 0 0 20px;
}
.gscm-field {
margin: 0 0 15px;
}
.gscm-field label {
color: var(--gscm-ink);
display: block;
font-size: 13px;
font-weight: 700;
margin: 0 0 6px;
}
.gscm-field input {
background: #fff;
border: 1px solid #cfd7e2;
border-radius: 8px;
box-shadow: none;
color: var(--gscm-ink);
font: inherit;
font-size: 15px;
min-height: 44px;
padding: 9px 12px;
width: 100%;
}
.gscm-field input:focus {
border-color: var(--gscm-gold-dark);
box-shadow: 0 0 0 3px rgba(197, 160, 89, .18);
outline: 0;
}
.gscm-field small {
color: var(--gscm-muted);
display: block;
font-size: 12px;
margin-top: 5px;
}
.gscm-remember {
align-items: center;
color: var(--gscm-muted);
display: flex;
font-size: 13px;
gap: 8px;
margin: 0 0 18px;
}
.gscm-remember input {
accent-color: var(--gscm-navy);
}
.gscm-button {
align-items: center;
background: var(--gscm-navy);
border: 1px solid var(--gscm-navy);
border-radius: 8px;
color: #fff;
cursor: pointer;
display: inline-flex;
font: inherit;
font-size: 14px;
font-weight: 750;
justify-content: center;
min-height: 44px;
padding: 10px 16px;
text-decoration: none;
transition: background .15s ease, border-color .15s ease, transform .15s ease;
width: 100%;
}
.gscm-button:hover,
.gscm-button:focus {
background: var(--gscm-navy-soft);
border-color: var(--gscm-navy-soft);
color: #fff;
transform: translateY(-1px);
}
.gscm-button-secondary {
background: var(--gscm-gold);
border-color: var(--gscm-gold);
color: var(--gscm-navy);
margin-top: 3px;
}
.gscm-button-secondary:hover,
.gscm-button-secondary:focus {
background: #d1ad6b;
border-color: #d1ad6b;
color: var(--gscm-navy);
}
.gscm-help {
color: var(--gscm-muted);
font-size: 12px;
margin: 14px 0 0;
}
.gscm-help a,
.gscm-dashboard-state a {
color: var(--gscm-gold-dark);
font-weight: 700;
}
.gscm-privacy-note {
color: var(--gscm-muted);
font-size: 12px;
margin: 0;
padding: 0 clamp(20px, 5vw, 48px) 28px;
}
.gscm-notice {
border-radius: 9px;
font-size: 14px;
font-weight: 600;
margin: 20px clamp(20px, 5vw, 48px) 0;
padding: 12px 15px;
}
.gscm-notice-success {
background: #eaf8f0;
border: 1px solid #a9dfbe;
color: #17663a;
}
.gscm-notice-error {
background: #fff1f0;
border: 1px solid #f0b7b2;
color: #9e3028;
}
.gscm-closed-registration {
background: #f7f8fa;
border: 1px dashed #cbd4df;
border-radius: 9px;
color: var(--gscm-muted);
font-size: 14px;
padding: 16px;
}
.gscm-closed-registration p {
margin: 0 0 7px;
}
.gscm-closed-registration p:last-child {
margin-bottom: 0;
}
.gscm-dashboard {
padding: 30px clamp(20px, 5vw, 48px) 40px;
}
.gscm-dashboard-heading {
align-items: center;
display: flex;
gap: 18px;
justify-content: space-between;
margin-bottom: 24px;
}
.gscm-dashboard-heading h3 {
font-size: 27px;
}
.gscm-logout {
border: 1px solid var(--gscm-border);
border-radius: 8px;
color: var(--gscm-ink);
font-size: 13px;
font-weight: 700;
padding: 9px 13px;
text-decoration: none;
white-space: nowrap;
}
.gscm-logout:hover {
background: #fff;
color: var(--gscm-navy);
}
.gscm-dashboard-state,
.gscm-access-denied {
background: #fff;
border: 1px solid var(--gscm-border);
border-radius: 14px;
margin: 0;
padding: clamp(22px, 5vw, 38px);
}
.gscm-state-icon {
align-items: center;
background: #eaf8f0;
border-radius: 50%;
color: #16824a;
display: flex;
font-size: 19px;
font-weight: 800;
height: 42px;
justify-content: center;
margin-bottom: 20px;
width: 42px;
}
.gscm-dashboard-state h4,
.gscm-access-denied h3 {
color: var(--gscm-navy);
font-size: 21px;
margin: 0 0 7px;
}
.gscm-dashboard-state > p:not(.gscm-eyebrow),
.gscm-access-denied p {
color: var(--gscm-muted);
margin: 0;
max-width: 700px;
}
.gscm-dashboard-state > a {
display: inline-block;
margin-top: 18px;
}
.gscm-access-denied {
margin: 30px clamp(20px, 5vw, 48px) 40px;
}
.gscm-button-link {
margin-top: 18px;
max-width: 160px;
}
@media (max-width: 760px) {
.gscm-portal {
border-radius: 12px;
margin: 16px auto;
}
.gscm-auth-grid {
grid-template-columns: 1fr;
}
.gscm-dashboard-heading {
align-items: flex-start;
flex-direction: column;
}
}