:root {
        --stefanshrm-frontend-primary: #1d3557;
        --stefanshrm-frontend-secondary: #457b9d;
        --stefanshrm-frontend-accent: #e76f51;
        --stefanshrm-frontend-background: #f5f6f8;
        --stefanshrm-frontend-text: #1f2933;
        --stefanshrm-frontend-font: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
        --stefanshrm-primary-color: var(--stefanshrm-frontend-primary);
        --stefanshrm-header-bg: #ffffff;
        --stefanshrm-surface: #ffffff;
        --stefanshrm-muted: #6b7280;
        --stefanshrm-border: #d1d5db;
        --stefanshrm-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
        --stefanshrm-radius-lg: 18px;
        --stefanshrm-radius-md: 12px;
        --stefanshrm-spacing: clamp(1.25rem, 2vw, 2rem);
}

body.stefanshrm-frontend {
        background: var(--stefanshrm-frontend-background);
        color: var(--stefanshrm-frontend-text);
        font-family: var(--stefanshrm-frontend-font, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif);
        line-height: 1.65;
        margin: 0;
        min-height: 100vh;
}

body.stefanshrm-frontend a {
        color: var(--stefanshrm-frontend-primary);
        font-weight: 600;
        text-decoration: none;
}

body.stefanshrm-frontend a:hover,
body.stefanshrm-frontend a:focus {
        color: var(--stefanshrm-frontend-secondary, var(--stefanshrm-frontend-primary));
        text-decoration: underline;
}

.stefanshrm-frontend-layout {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
}

.stefanshrm-frontend-header {
        background: var(--stefanshrm-header-bg);
        border-bottom: 1px solid var(--stefanshrm-border);
        position: sticky;
        top: 0;
        z-index: 10;
}

.stefanshrm-frontend-header__inner {
        align-items: center;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        gap: 1.25rem;
        justify-content: space-between;
        margin: 0 auto;
        max-width: 1200px;
        padding: clamp(0.85rem, 2vw, 1.4rem) var(--stefanshrm-spacing);
        width: 100%;
}

.stefanshrm-frontend-brand {
        align-items: center;
        display: inline-flex;
        gap: 0.75rem;
        min-height: 48px;
}

.stefanshrm-frontend-brand__logo img {
        display: block;
        height: auto;
        max-height: 52px;
        max-width: 200px;
        width: auto;
}

.stefanshrm-frontend-brand__text {
        color: var(--stefanshrm-frontend-text);
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: -0.01em;
}

.stefanshrm-frontend-nav__toggle {
        align-items: center;
        background: transparent;
        border: 1px solid var(--stefanshrm-border);
        border-radius: 999px;
        color: var(--stefanshrm-frontend-text);
        cursor: pointer;
        display: inline-flex;
        gap: 0.6rem;
        padding: 0.55rem 0.95rem;
        transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.stefanshrm-frontend-nav__toggle:hover,
.stefanshrm-frontend-nav__toggle:focus-visible {
        background: rgba(29, 78, 216, 0.08);
        background: color-mix(in srgb, var(--stefanshrm-frontend-primary) 12%, transparent);
        border-color: var(--stefanshrm-frontend-primary);
        color: var(--stefanshrm-frontend-primary);
}

.stefanshrm-frontend-nav__toggle-icon {
        background: currentColor;
        box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
        display: block;
        height: 2px;
        position: relative;
        width: 18px;
}

.stefanshrm-frontend-nav__toggle-label {
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
}

.stefanshrm-frontend-nav {
        display: none;
        width: 100%;
}

.stefanshrm-frontend-nav.is-open {
        display: block;
}

.stefanshrm-frontend-nav__list {
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
}

.stefanshrm-frontend-nav__item {
        border-radius: 999px;
        display: flex;
}

.stefanshrm-frontend-nav__link {
        border-radius: 999px;
        color: var(--stefanshrm-frontend-text);
        display: inline-flex;
        font-weight: 600;
        gap: 0.45rem;
        padding: 0.6rem 0.95rem;
        transition: color 160ms ease, background 160ms ease;
}

.stefanshrm-frontend-nav__item.is-current .stefanshrm-frontend-nav__link,
.stefanshrm-frontend-nav__link:hover,
.stefanshrm-frontend-nav__link:focus-visible {
        background: rgba(29, 78, 216, 0.12);
        background: color-mix(in srgb, var(--stefanshrm-frontend-primary) 16%, transparent);
        color: var(--stefanshrm-frontend-primary);
}

@media (min-width: 782px) {
        .stefanshrm-frontend-nav {
                align-items: center;
                display: flex !important;
                justify-content: flex-end;
                width: auto;
        }

        .stefanshrm-frontend-nav__list {
                flex-direction: row;
                gap: 0.65rem;
                width: auto;
        }

        .stefanshrm-frontend-nav__toggle {
                display: none;
        }
}

@media (min-width: 1080px) {
        .stefanshrm-frontend-nav__link {
                padding-left: 1.15rem;
                padding-right: 1.15rem;
        }
}

.stefanshrm-frontend-content {
        box-sizing: border-box;
        flex: 1;
        padding: clamp(2rem, 4vw, 3.5rem) var(--stefanshrm-spacing) clamp(3rem, 5vw, 4.5rem);
        width: 100%;
}

.stefanshrm-frontend-content__inner {
        box-sizing: border-box;
        margin: 0 auto;
        max-width: 1160px;
        width: 100%;
}

.stefanshrm-frontend-content__inner > *:first-child {
        margin-top: 0;
}

.stefanshrm-frontend-content__inner img {
        border-radius: var(--stefanshrm-radius-md);
        height: auto;
        max-width: 100%;
}

.stefanshrm-frontend-content__inner p,
.stefanshrm-frontend-content__inner li {
        font-size: 1.02rem;
}

.stefanshrm-frontend-content__inner h1,
.stefanshrm-frontend-content__inner h2,
.stefanshrm-frontend-content__inner h3 {
        color: #0f172a;
        letter-spacing: -0.01em;
        line-height: 1.2;
        margin-bottom: 1rem;
        margin-top: 2.25rem;
}

.stefanshrm-frontend-content__inner h1 {
        font-size: clamp(2rem, 3vw, 2.75rem);
}

.stefanshrm-frontend-content__inner h2 {
        font-size: clamp(1.65rem, 2.4vw, 2.1rem);
}

.stefanshrm-frontend-content__inner h3 {
        font-size: clamp(1.4rem, 2vw, 1.65rem);
}

.stefanshrm-login-card {
        background: var(--stefanshrm-surface);
        border: 1px solid rgba(148, 163, 184, 0.4);
        border-radius: var(--stefanshrm-radius-lg);
        box-shadow: var(--stefanshrm-shadow);
        margin: 0 auto;
        max-width: 460px;
        padding: clamp(1.75rem, 4vw, 2.75rem);
}

.stefanshrm-login-title {
        font-size: clamp(1.65rem, 2.4vw, 2rem);
        font-weight: 700;
        margin: 0 0 1.5rem;
        text-align: center;
}

.stefanshrm-login-message,
.stefanshrm-login-errors {
        border-radius: var(--stefanshrm-radius-md);
        font-size: 0.95rem;
        margin-bottom: 1rem;
        padding: 0.9rem 1rem;
}

.stefanshrm-login-message {
        background: rgba(37, 99, 235, 0.08);
        border: 1px solid rgba(59, 130, 246, 0.35);
        color: #1d4ed8;
}

.stefanshrm-login-errors {
        background: rgba(220, 38, 38, 0.08);
        border: 1px solid rgba(248, 113, 113, 0.4);
        color: #991b1b;
}

.stefanshrm-login-form label {
        color: var(--stefanshrm-muted);
        display: block;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        margin-bottom: 0.35rem;
        text-transform: uppercase;
}

.stefanshrm-login-form input[type="text"],
.stefanshrm-login-form input[type="password"] {
        border: 1px solid rgba(148, 163, 184, 0.6);
        border-radius: 12px;
        font-size: 1rem;
        padding: 0.7rem 0.85rem;
        transition: border-color 160ms ease, box-shadow 160ms ease;
        width: 100%;
}

.stefanshrm-login-form input[type="text"]:focus,
.stefanshrm-login-form input[type="password"]:focus {
        border-color: var(--stefanshrm-primary-color);
        box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.18);
        outline: none;
}

.stefanshrm-login-form .stefanshrm-form-row {
        margin-bottom: 1.2rem;
}

.stefanshrm-login-remember {
        align-items: center;
        display: flex;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
}

.stefanshrm-login-remember input[type="checkbox"] {
        accent-color: var(--stefanshrm-primary-color);
        height: 18px;
        width: 18px;
}

.stefanshrm-login-remember span {
        color: var(--stefanshrm-frontend-text);
        font-size: 0.95rem;
        font-weight: 500;
}

.stefanshrm-login-form .button.button-primary {
        background: var(--stefanshrm-primary-color);
        border: none;
        border-radius: 999px;
        box-shadow: 0 10px 20px rgba(29, 78, 216, 0.25);
        font-size: 1rem;
        font-weight: 600;
        padding: 0.75rem 1.65rem;
        text-align: center;
        transition: transform 160ms ease, box-shadow 160ms ease;
        width: 100%;
}

.stefanshrm-login-form .button.button-primary:hover,
.stefanshrm-login-form .button.button-primary:focus-visible {
        box-shadow: 0 12px 28px rgba(29, 78, 216, 0.35);
        transform: translateY(-1px);
}

.stefanshrm-login-links {
        margin-top: 1.5rem;
        text-align: center;
}

.stefanshrm-login-links a {
        font-weight: 600;
}

.stefanshrm-frontend-section {
        background: var(--stefanshrm-surface);
        border: 1px solid rgba(148, 163, 184, 0.35);
        border-radius: var(--stefanshrm-radius-lg);
        box-shadow: var(--stefanshrm-shadow);
        margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
        padding: clamp(1.75rem, 4vw, 2.75rem);
}

.stefanshrm-frontend-section__header {
        margin-bottom: clamp(1.1rem, 2.5vw, 1.75rem);
}

.stefanshrm-frontend-section__title {
        color: #0f172a;
        font-size: clamp(1.8rem, 3vw, 2.3rem);
        margin: 0;
}

.stefanshrm-frontend-section__columns {
        display: grid;
        gap: clamp(1.35rem, 3vw, 2.25rem);
}

@media (min-width: 960px) {
        .stefanshrm-frontend-section__columns[data-columns="2"] {
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .stefanshrm-frontend-section__columns[data-columns="3"] {
                grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .stefanshrm-frontend-section__columns[data-columns="4"] {
                grid-template-columns: repeat(4, minmax(0, 1fr));
        }
}

.stefanshrm-frontend-section__column {
        display: flex;
        flex-direction: column;
        gap: clamp(0.75rem, 2vw, 1.35rem);
}

.stefanshrm-frontend-field {
        border-bottom: 1px solid rgba(148, 163, 184, 0.35);
        padding-bottom: 0.95rem;
}

.stefanshrm-frontend-section__column > .stefanshrm-frontend-field:last-child,
.stefanshrm-frontend-section__column > .stefanshrm-frontend-notice:last-child {
        border-bottom: none;
        padding-bottom: 0;
}

.stefanshrm-frontend-spacing {
        display: block;
        width: 100%;
        height: 32px;
        margin: 16px 0;
        pointer-events: none;
}

.stefanshrm-frontend-field__label {
        color: var(--stefanshrm-muted);
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        display: block;
        text-transform: uppercase;
}

.stefanshrm-frontend-field__value {
        color: var(--stefanshrm-frontend-text);
        display: block;
        font-size: 1.15rem;
        font-weight: 600;
        margin-top: 0.25rem;
        word-break: break-word;
}

.stefanshrm-frontend-notice {
        background: rgba(248, 113, 113, 0.12);
        border: 1px solid rgba(248, 113, 113, 0.4);
        border-radius: var(--stefanshrm-radius-md);
        color: #7f1d1d;
        font-weight: 600;
        margin-top: 0.75rem;
        padding: 1rem 1.25rem;
}

@media (max-width: 782px) {
        .stefanshrm-frontend-header__inner {
                gap: 1rem;
        }

        .stefanshrm-frontend-content {
                padding-top: 1.75rem;
        }

        .stefanshrm-login-card,
        .stefanshrm-frontend-section {
                border-radius: 14px;
                box-shadow: 0 8px 26px rgba(15, 23, 42, 0.12);
        }
}

@media (max-width: 480px) {
        .stefanshrm-frontend-nav__toggle-label {
                font-size: 0.85rem;
        }

        .stefanshrm-login-card {
                padding: 1.5rem;
        }

        .stefanshrm-frontend-section {
                padding: 1.6rem;
        }
}