:root {
    --brand-teal: #0f5c56;
    --brand-teal-dark: #0a3d3a;
    --brand-teal-darker: #0f2b27;
    --brand-amber: #f2a83e;
    --ink: #14302c;
    --ink-muted: #5a6b66;
    --ink-faint: #8a9c96;
    --line: #e2ebe8;
    --surface-tint: #f5f8f7;
    --shadow-sm: 0 1px 2px rgba(15, 45, 41, 0.05);
    --shadow-md: 0 1px 2px rgba(15, 45, 41, 0.05), 0 10px 26px -16px rgba(15, 45, 41, 0.22);
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 7px;
}

html, body {
    height: 100%;
}

.text-brand-teal {
    color: var(--brand-teal);
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background-color: var(--surface-tint);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* ---------- Buttons ---------- */
.btn {
    font-weight: 600;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.1rem;
}

.btn-sm {
    padding: 0.32rem 0.75rem;
}

.btn-primary {
    --bs-btn-bg: var(--brand-teal);
    --bs-btn-border-color: var(--brand-teal);
    --bs-btn-hover-bg: var(--brand-teal-dark);
    --bs-btn-hover-border-color: var(--brand-teal-dark);
    --bs-btn-active-bg: var(--brand-teal-dark);
    --bs-btn-active-border-color: var(--brand-teal-dark);
    --bs-btn-focus-shadow-rgb: 15, 92, 86;
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-muted);
    --bs-btn-border-color: #d5e1dd;
    --bs-btn-hover-bg: var(--surface-tint);
    --bs-btn-hover-color: var(--ink);
    --bs-btn-hover-border-color: #c3d3ce;
}

/* ---------- Navbar ---------- */
.navbar.bg-dark {
    background-color: var(--brand-teal-dark) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---------- App shell / sidebar ---------- */
.app-shell {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.app-sidebar {
    width: 240px;
    flex-shrink: 0;
    background-color: var(--brand-teal-darker);
    color: #b7cdc7;
    transition: width 0.15s ease;
    overflow: hidden;
}

.sidebar-inner {
    width: 240px;
    padding: 0.9rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 0 0.6rem auto;
    background: transparent;
    border: none;
    color: #6f948c;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.sidebar-collapse-btn:hover {
    background: #17423b;
    color: #fff;
}

.nav-section + .nav-section {
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-section-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    background: none;
    border: none;
    padding: 0.4rem 0.6rem;
    color: #6f948c;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.nav-section-toggle .nav-section-icon {
    font-size: 0.85rem;
}

.nav-section-title {
    flex: 1;
    text-align: left;
}

.nav-section-chevron {
    font-size: 0.7rem;
    transition: transform 0.15s ease;
}

.nav-section-toggle.collapsed .nav-section-chevron {
    transform: rotate(-90deg);
}

.nav-item-list {
    gap: 0.1rem;
}

.app-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #c3d6d1;
    font-size: 0.89rem;
    font-weight: 500;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.app-sidebar .nav-item-icon {
    flex-shrink: 0;
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
    opacity: 0.85;
}

.app-sidebar .nav-link.active,
.app-sidebar .nav-link:hover {
    color: #fff;
    background-color: #17423b;
}

.app-sidebar .nav-link.active .nav-item-icon {
    opacity: 1;
    color: var(--brand-amber);
}

.nav-flyout-title {
    display: none;
    padding: 0.3rem 0.7rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6f948c;
}

/* Icon-rail collapse + flyout submenus are a desktop-only affordance — a 64px icon strip
   makes no sense as a mobile/tablet drawer, which gets its own full-width off-canvas treatment
   below. The breakpoint matches the mobile-toggle button's own d-lg-none visibility (992px) so
   the two never disagree about which mode is active. */
@media (min-width: 992px) {
    .sidebar-collapsed .app-sidebar {
        width: 64px;
        overflow: visible;
    }

    .sidebar-collapsed .sidebar-inner {
        width: 64px;
        padding: 0.9rem 0.5rem;
        align-items: center;
    }

    .sidebar-collapsed .sidebar-collapse-btn {
        margin: 0 0 0.6rem;
    }

    .sidebar-collapsed .nav-section-title,
    .sidebar-collapsed .nav-section-chevron,
    .sidebar-collapsed .nav-item-label {
        display: none;
    }

    .sidebar-collapsed .nav-section-toggle {
        justify-content: center;
        padding: 0.4rem;
    }

    .sidebar-collapsed .app-sidebar .nav-link {
        justify-content: center;
        padding: 0.6rem;
    }

    /* Icon-rail mode: sub-items are hidden by default and only surface as a flyout panel next
       to the section icon that was clicked — keeps the rail to one icon per section instead of
       every child item flattened into one long unlabeled list. */
    .sidebar-collapsed .nav-section {
        position: relative;
    }

    .sidebar-collapsed .nav-flyout {
        display: none !important;
    }

    .sidebar-collapsed .nav-section.flyout-open {
        z-index: 1050;
    }

    .sidebar-collapsed .nav-section.flyout-open .nav-flyout {
        display: block !important;
        position: absolute;
        left: 100%;
        top: 0;
        margin-left: 0.5rem;
        min-width: 210px;
        background-color: var(--brand-teal-darker);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        padding: 0.4rem;
    }

    .sidebar-collapsed .nav-section.flyout-open .nav-flyout-title {
        display: block;
    }

    .sidebar-collapsed .nav-section.flyout-open .nav-link {
        justify-content: flex-start;
        padding: 0.55rem 0.7rem;
    }

    .sidebar-collapsed .nav-section.flyout-open .nav-item-label {
        display: inline;
    }

    .sidebar-collapsed .nav-section-toggle.active-section .nav-section-icon {
        color: var(--brand-amber);
    }
}

/* ---------- Mobile/tablet off-canvas sidebar (<992px) ---------- */
.sidebar-mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    border-radius: var(--radius-sm);
}

.sidebar-mobile-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    .app-sidebar {
        position: fixed;
        top: 56px;
        bottom: 0;
        left: 0;
        width: 240px;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        z-index: 1040;
        overflow-y: auto;
    }

    .sidebar-mobile-open .app-sidebar {
        transform: translateX(0);
        box-shadow: var(--shadow-md);
    }

    .sidebar-mobile-open .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        top: 56px;
        background: rgba(0, 0, 0, 0.4);
        z-index: 1035;
    }

    .app-content {
        padding: 1.25rem 1rem;
    }

    /* Touch-target sizing: bumps interactive controls to ~44px on phones/tablets without
       touching desktop density (≥992px, outside this block). */
    .sidebar-mobile-toggle,
    .sidebar-collapse-btn {
        width: 44px;
        height: 44px;
    }

    .app-sidebar .nav-link {
        min-height: 44px;
        padding: 0.7rem 0.75rem;
    }

    .btn,
    .form-control,
    .form-select {
        min-height: 44px;
    }

    .btn-sm {
        min-height: 38px;
    }
}

/* ---------- Content area ---------- */
.app-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.75rem 2rem;
    background-color: var(--surface-tint);
}

/* ---------- Cards, panels ---------- */
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid var(--line);
    font-weight: 700;
}

.page-header-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.page-header-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(155deg, #fdecd2, #f6d9a3);
    color: #a56413;
    font-size: 1.35rem;
}

.stat-tile-group {
    display: flex;
    gap: 0.9rem;
    flex-shrink: 0;
}

.stat-tile {
    text-align: center;
    padding: 0.3rem 1.1rem;
    border-left: 1px solid var(--line);
}

.stat-tile:first-child {
    border-left: none;
}

.stat-tile-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--brand-teal);
    line-height: 1;
}

.stat-tile-label {
    font-size: 0.68rem;
    color: var(--ink-faint);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.3rem;
    font-weight: 700;
}

/* ---------- Badges / pills ---------- */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.4em 0.7em;
    border-radius: 100px;
}

/* ---------- Chips (permission/role tags) ---------- */
.chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.chip {
    font-size: 0.78rem;
    font-weight: 500;
    padding: 0.32rem 0.65rem;
    border-radius: var(--radius-sm);
    background: #eef4f3;
    color: var(--brand-teal);
    border: 1px solid #dbe9e5;
    font-family: 'Poppins', monospace;
}

.chip-group-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.55rem;
}

/* ---------- Tables / DataTables ---------- */
.table {
    --bs-table-hover-bg: var(--surface-tint);
}

.table thead th {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border-bottom-width: 1px;
    padding-top: 0.4rem;
    padding-bottom: 0.6rem;
}

.table td {
    vertical-align: middle;
}

table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
}

div.dataTables_wrapper div.dataTables_length select,
div.dataTables_wrapper div.dataTables_filter input {
    border-radius: var(--radius-sm);
    border: 1px solid #d5e1dd;
    padding: 0.3rem 0.6rem;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button.current,
div.dataTables_wrapper div.dataTables_paginate .paginate_button.current:hover {
    background: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
    color: #fff !important;
}

div.dataTables_wrapper div.dataTables_paginate .paginate_button:hover {
    background: var(--surface-tint) !important;
    border-color: #d5e1dd !important;
}

/* ---------- Forms ---------- */
.form-control, .form-select {
    border-radius: var(--radius-sm);
    border-color: #d5e1dd;
}

.form-control:focus, .form-select:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 0.2rem rgba(15, 92, 86, 0.15);
}

.form-label {
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ink);
}

.password-toggle-wrapper {
    position: relative;
}

.password-toggle-wrapper input {
    padding-right: 2.5rem;
}

.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--ink-muted);
    padding: 0.25rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.password-toggle-btn:hover {
    color: var(--ink);
}

/* ---------- Login page ---------- */
.login-body {
    margin: 0;
}

.login-split {
    min-height: 100vh;
    display: flex;
}

.login-brand-panel {
    flex: 1 1 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, #0f5c56 0%, #0a3d3a 60%, #08302d 100%);
    position: relative;
    overflow: hidden;
}

.login-brand-panel .brand-illustration {
    width: 100%;
    max-width: 360px;
    margin-bottom: 2rem;
}

.login-brand-panel h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #fff;
}

.login-brand-panel p {
    color: rgba(255, 255, 255, 0.75);
    max-width: 380px;
    margin: 0 auto;
}

.login-form-panel {
    flex: 1 1 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #ffffff;
}

.login-form-panel .login-form-inner {
    width: 100%;
    max-width: 360px;
}

.login-form-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.login-mobile-brand {
    display: none;
}

@media (max-width: 767.98px) {
    .login-brand-panel {
        display: none;
    }

    .login-form-panel {
        align-items: flex-start;
        padding-top: 4rem;
    }

    .login-mobile-brand {
        display: block;
        text-align: center;
        margin-bottom: 1.5rem;
    }
}

/* ---------- Busy overlay (form submission in progress) ---------- */
.busy-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(15, 43, 39, 0.55);
}

.busy-overlay.show {
    display: flex;
}

.busy-overlay-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: #ffffff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.75rem 2.25rem;
}

.busy-overlay-spinner {
    font-size: 2rem;
    line-height: 1;
    color: var(--brand-teal);
    animation: busy-overlay-spin 0.8s linear infinite;
}

.busy-overlay-text {
    font-weight: 600;
    color: var(--ink);
}

@keyframes busy-overlay-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .busy-overlay-spinner {
        animation: none;
    }
}


/* Staff PIN entry: four large rounded single-digit boxes, sized for thumbs on phones. */
.pin-boxes { display: flex; gap: 0.75rem; }
.pin-boxes .pin-box {
    flex: 1 1 0;
    min-width: 0;
    height: 3.75rem;
    padding: 0;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    border: 2px solid #dfe5ea;
    border-radius: 0.85rem;
    background: #fff;
}
.pin-boxes .pin-box:focus {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 0.2rem rgba(15, 92, 86, 0.15);
}

/* Language switcher (EN | DE) — sits in the dark top bar, and floats top-right on login pages. */
.lang-switch { display: inline-flex; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 0.5rem; overflow: hidden; }
.lang-switch a { padding: 0.2rem 0.6rem; font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.lang-switch a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.lang-switch a.active { background: #fff; color: var(--brand-teal-dark, #0a3d3a); }
.lang-switch-floating { position: absolute; top: 0.9rem; right: 1rem; z-index: 20; }
.lang-switch-floating .lang-switch { border-color: #cdd6dc; background: #fff; }
.lang-switch-floating .lang-switch a { color: #4a5a63; }
.lang-switch-floating .lang-switch a:hover { background: #eef2f4; color: #0a3d3a; }
.lang-switch-floating .lang-switch a.active { background: var(--brand-teal, #0f5c56); color: #fff; }

/* =====================================================================================
   Refresh (2026-11) — "a little more modern". Mobile-first: the plain rules below are the
   phone layout; anything that only suits wider screens sits in a min-width query. Built on
   the existing tokens, so it can be backed out by deleting this block.
   ===================================================================================== */
:root {
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 10px;
    --shadow-md: 0 1px 2px rgba(15, 45, 41, 0.04), 0 12px 28px -18px rgba(15, 45, 41, 0.28);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Buttons, forms, cards, tables: softer corners and a little depth ---- */
.btn {
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}

.btn-primary {
    box-shadow: 0 6px 14px -9px rgba(15, 92, 86, 0.85);
}

@media (hover: hover) {
    .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 18px -10px rgba(15, 92, 86, 0.9);
    }
}

.form-control:not(.form-control-sm),
.form-select:not(.form-select-sm) {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    background-color: #fff;
}

.card {
    border-color: var(--line);
}

.table thead th {
    background-color: var(--surface-tint);
}

.alert {
    border: 0;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* ---- Top bar: a touch of gradient; the long product name only where there's room ---- */
.navbar.bg-dark {
    background: linear-gradient(90deg, var(--brand-teal-dark), #0c4a45) !important;
}

.navbar-brand .brand-text {
    white-space: nowrap;
}

/* "Staff" tag next to the name on the staff portal — hidden on the narrowest phones. */
.brand-tag {
    display: none;
    margin-left: 0.5rem;
    padding: 0.14rem 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    vertical-align: middle;
}

@media (min-width: 576px) {
    .brand-tag {
        display: inline-block;
    }
}

/* On phones the staff bar keeps its original arrangement (name on its own row, menu button and
   account controls on the next, below ~414px wide; wider phones fit the menu button beside the name). The shorter product name would otherwise let the menu button
   jump up beside the name, moving it from where staff are used to finding it. */
@media (max-width: 413.98px) {
    .navbar-staff .navbar-brand {
        flex: 0 0 100%;
    }
}

/* ---- Sign-in pages ---- */
.brand-eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #b36b0d;
}

.login-brand-panel .brand-eyebrow {
    color: var(--brand-amber);
}

.login-body {
    background: var(--surface-tint);
}

/* The form sits on a card (phone first: full width up to 420px). */
.login-form-panel {
    background: transparent;
}

.login-form-inner {
    max-width: 420px;
    padding: 1.5rem 1.25rem 1.75rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    /* No fill-mode on purpose: if an animation never runs the form is simply visible. */
    animation: login-rise 0.4s ease;
}

.login-form-logo svg {
    border-radius: 14px;
    box-shadow: 0 10px 20px -10px rgba(15, 92, 86, 0.65);
}

/* 16px text and 48px controls: comfortable to tap, and stops iOS zooming into the field. */
.login-form-inner .form-control {
    min-height: 48px;
    font-size: 1rem;
}

.login-form-inner .btn-primary {
    min-height: 48px;
    font-size: 1rem;
    border-radius: var(--radius-md);
}

.login-mobile-brand h4 {
    font-size: 1.05rem;
    line-height: 1.3;
}

.pin-boxes .pin-box {
    border-radius: 14px;
}

@keyframes login-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-form-inner {
        animation: none;
    }
    .btn,
    .btn-primary:hover {
        transition: none;
        transform: none;
    }
}

/* ---- Phones: keep the whole sign-in form on screen without scrolling ----
   A 642px-tall viewport (e.g. a small phone with browser chrome) must still show the Sign in
   button. Bootstrap's spacing utilities are !important, so the tightened ones need it too. */
@media (max-width: 767.98px) {
    .login-form-panel {
        padding-top: 3.25rem;
        padding-bottom: 1rem;
    }

    .login-form-inner {
        padding: 1rem 1rem 1.15rem;
    }

    .login-form-logo {
        margin-bottom: 0.6rem;
    }

    .login-form-logo svg {
        width: 40px;
        height: 40px;
    }

    .login-mobile-brand {
        margin-bottom: 0.75rem;
    }

    .login-mobile-brand .brand-eyebrow {
        margin-bottom: 0;
    }

    .login-form-inner p.mb-4 {
        margin-bottom: 0.9rem !important;
    }

    .login-form-inner .mb-3 {
        margin-bottom: 0.7rem !important;
    }

    .login-form-inner .form-text {
        margin-top: 0.2rem;
    }
}

/* ---- Wider screens only: the brand panel and a roomier form card ---- */
@media (min-width: 768px) {
    .login-brand-panel {
        background:
            radial-gradient(900px 520px at 88% -8%, rgba(242, 168, 62, 0.2), transparent 60%),
            radial-gradient(720px 520px at -8% 108%, rgba(46, 170, 158, 0.28), transparent 56%),
            linear-gradient(135deg, #0f5c56 0%, #0a3d3a 58%, #08302d 100%);
    }

    .login-brand-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
        background-size: 22px 22px;
        -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 75%);
        mask-image: radial-gradient(circle at 50% 50%, #000 25%, transparent 75%);
        pointer-events: none;
    }

    .login-brand-panel > * {
        position: relative;
    }

    .login-brand-panel h1 {
        font-size: 2rem;
        line-height: 1.15;
        letter-spacing: -0.02em;
    }

    .login-brand-panel .brand-eyebrow {
        font-size: 0.8rem;
        margin-bottom: 0.5rem;
    }

    .login-form-panel {
        background: linear-gradient(180deg, #f8fbfa, #eef4f2);
    }

    .login-form-inner {
        max-width: 400px;
        padding: 2.25rem 2rem 2rem;
        box-shadow: 0 28px 50px -30px rgba(15, 45, 41, 0.4), var(--shadow-sm);
    }
}