/* ================================================================
   Masters Society — Theme Override  v3.0
   Premium dark identity. Negro profundo · Carbón · Oro elegante.
   Cargado DESPUÉS del CSS de Roksyn.
   ================================================================ */

/* ── §1  PALETTE & VARIABLES ────────────────────────────────────── */
[data-bs-theme=dark] {

    /* Surfaces — elevation system */
    --ms-bg-base: #09090c;   /* cuerpo / fondo de página     */
    --ms-bg-1:    #0d0d10;   /* sidebar                      */
    --ms-bg-2:    #111114;   /* topbar                       */
    --ms-bg-3:    #161619;   /* card surface                 */
    --ms-bg-4:    #1c1c21;   /* card elevated / dropdowns    */
    --ms-bg-5:    #222226;   /* inputs / code blocks         */

    /* Borders */
    --ms-border-1:    rgba(255, 255, 255, 0.045);  /* muy sutil        */
    --ms-border-2:    rgba(255, 255, 255, 0.075);  /* moderado         */
    --ms-border-3:    rgba(255, 255, 255, 0.11);   /* fuerte           */
    --ms-border-gold: rgba(201, 168,  76, 0.18);   /* borde dorado     */

    /* Text hierarchy — tonos cálidos, no fríos */
    --ms-t1: #f0ede7;   /* texto principal — blanco cálido  */
    --ms-t2: #a09b93;   /* texto secundario                 */
    --ms-t3: #5d5952;   /* texto muted                      */
    --ms-t4: #302d29;   /* muy muted / ornamental           */

    /* Gold palette — el único acento de color */
    --ms-gold:        #c9a84c;              /* dorado principal          */
    --ms-gold-light:  #e5cf96;              /* champagne / highlights    */
    --ms-gold-dark:   #8a6f2e;             /* dorado oscuro / muted     */
    --ms-gold-bg:     rgba(201,168,76,0.06);  /* wash dorado very subtle */
    --ms-gold-bg-md:  rgba(201,168,76,0.11);  /* hover activo            */
    --ms-gold-border: rgba(201,168,76,0.22);  /* borde dorado            */
    --ms-gold-glow:   rgba(201,168,76,0.03);  /* hover muy sutil         */

    /* Bootstrap override bridges */
    --bs-body-bg-2: var(--ms-bg-base);
    --bs-body-bg:   var(--ms-bg-2);

    /* Tokens */
    --ms-radius:     7px;
    --ms-radius-lg:  12px;
    --ms-transition: 0.15s ease;

    /* Backward compatibility aliases (usados en Blade views existentes) */
    --ms-body-bg:          var(--ms-bg-base);
    --ms-sidebar-bg:       var(--ms-bg-1);
    --ms-topbar-bg:        var(--ms-bg-2);
    --ms-card-bg:          var(--ms-bg-3);
    --ms-card-bg-elevated: var(--ms-bg-4);
    --ms-border:           var(--ms-border-1);
    --ms-border-strong:    var(--ms-border-3);
    --ms-text-primary:     var(--ms-t1);
    --ms-text-secondary:   var(--ms-t2);
    --ms-text-muted:       var(--ms-t3);
    --ms-accent:           var(--ms-gold);
    --ms-accent-dim:       var(--ms-gold-bg);
    --ms-accent-border:    var(--ms-gold-border);
}

/* ── §2  BODY & TYPOGRAPHY ──────────────────────────────────────── */

[data-bs-theme=dark] body {
    background-color: var(--ms-bg-base);
    font-family: 'DM Sans', 'Noto Sans', system-ui, sans-serif;
    font-size: 13.5px;
    color: var(--ms-t1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[data-bs-theme=dark] h1,
[data-bs-theme=dark] h2,
[data-bs-theme=dark] h3,
[data-bs-theme=dark] h4,
[data-bs-theme=dark] h5,
[data-bs-theme=dark] h6 {
    color: var(--ms-t1);
    font-weight: 600;
    letter-spacing: -0.015em;
}

[data-bs-theme=dark] p { color: var(--ms-t2); }

[data-bs-theme=dark] a {
    color: var(--ms-gold-light);
    text-decoration: none;
    transition: color var(--ms-transition);
}
[data-bs-theme=dark] a:hover { color: var(--ms-gold); }


/* ── §3  TOPBAR ──────────────────────────────────────────────────── */

[data-bs-theme=dark] .top-header .navbar {
    background-color: var(--ms-bg-2);
    border-bottom: 1px solid var(--ms-border-1);
}

[data-bs-theme=dark] .top-header .navbar .btn-toggle-menu {
    background-color: transparent;
    border: 1px solid var(--ms-border-2);
    color: var(--ms-t3);
    border-radius: 6px;
    transition: color var(--ms-transition), border-color var(--ms-transition);
}
[data-bs-theme=dark] .top-header .navbar .btn-toggle-menu:hover {
    color: var(--ms-t1);
    border-color: var(--ms-border-3);
}

[data-bs-theme=dark] .top-header .navbar .top-right-menu .nav-item .nav-link {
    background-color: transparent;
    border: 1px solid var(--ms-border-2);
    color: var(--ms-t3);
    border-radius: 6px;
    transition: color var(--ms-transition), border-color var(--ms-transition);
}
[data-bs-theme=dark] .top-header .navbar .top-right-menu .nav-item .nav-link:hover {
    color: var(--ms-t2);
    border-color: var(--ms-border-3);
}

/* Topbar title */
.ms-topbar-title {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ms-t3);
}


/* ── §4  SIDEBAR ─────────────────────────────────────────────────── */

[data-bs-theme=dark] .sidebar-wrapper {
    background-color: var(--ms-bg-1);
    border-right: 1px solid var(--ms-border-1);
}

[data-bs-theme=dark] .sidebar-wrapper .sidebar-header {
    border-bottom: 1px solid var(--ms-border-1);
    background-color: var(--ms-bg-1);
    height: 60px;
    padding: 0 1.25rem;
}

/* Monograma — borde dorado, letra dorada */
.ms-monogram {
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--ms-gold);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ms-gold);
    flex-shrink: 0;
    user-select: none;
    letter-spacing: 0;
}

[data-bs-theme=dark] .sidebar-wrapper .sidebar-header .logo-name h5 {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ms-t2);
    margin: 0;
}

[data-bs-theme=dark] .sidebar-wrapper .sidebar-nav {
    background-color: var(--ms-bg-1);
}

/* Nav items */
[data-bs-theme=dark] .sidebar-wrapper .metismenu a {
    color: var(--ms-t3);
    padding: 0.575rem 1.25rem;
    border-radius: 0;
    border-left: 2px solid transparent;
    gap: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 400;
    transition: color var(--ms-transition), background var(--ms-transition), border-color var(--ms-transition);
}
[data-bs-theme=dark] .sidebar-wrapper .metismenu a:hover {
    color: var(--ms-t2);
    background-color: var(--ms-gold-glow);
    border-left-color: rgba(201,168,76,0.2);
}

/* Nav active */
[data-bs-theme=dark] .sidebar-wrapper .metismenu .mm-active > a,
[data-bs-theme=dark] .sidebar-wrapper .metismenu .mm-active > a:hover {
    color: var(--ms-gold-light);
    background-color: var(--ms-gold-bg);
    border-left-color: var(--ms-gold);
    font-weight: 500;
}

/* Eliminar icon box de Roksyn */
[data-bs-theme=dark] .sidebar-wrapper .metismenu a .parent-icon {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    width: auto;
    height: auto;
    font-size: 17px;
    flex-shrink: 0;
}
[data-bs-theme=dark] .sidebar-wrapper .metismenu .mm-active > a .parent-icon,
[data-bs-theme=dark] .sidebar-wrapper .metismenu a:hover .parent-icon,
[data-bs-theme=dark] .sidebar-wrapper .metismenu a:focus .parent-icon,
[data-bs-theme=dark] .sidebar-wrapper .metismenu a:active .parent-icon {
    background-color: transparent !important;
    color: inherit !important;
}

/* Sub-menú */
[data-bs-theme=dark] .sidebar-wrapper .metismenu ul {
    background-color: transparent;
    border: none;
    padding-left: 2rem;
}
[data-bs-theme=dark] .sidebar-wrapper .metismenu ul a {
    color: var(--ms-t4);
    font-size: 0.8rem;
    padding: 0.4rem 1rem;
    border-left: none;
    border-radius: 0;
}
[data-bs-theme=dark] .sidebar-wrapper .metismenu ul a:hover {
    color: var(--ms-t3);
    background: transparent;
    border-left: none;
}
[data-bs-theme=dark] .sidebar-wrapper .metismenu ul .mm-active > a {
    color: var(--ms-gold);
    background: transparent;
    font-weight: 500;
}

/* Section labels */
[data-bs-theme=dark] .sidebar-wrapper .metismenu li.menu-label {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ms-t4);
    padding: 1.25rem 1.25rem 0.3rem;
}

/* Sidebar bottom user */
[data-bs-theme=dark] .sidebar-wrapper .sidebar-bottom {
    border-top: 1px solid var(--ms-border-1);
    background-color: var(--ms-bg-1);
}
[data-bs-theme=dark] .sidebar-wrapper .sidebar-bottom .user-info .user-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ms-t1);
    letter-spacing: 0.01em;
}
[data-bs-theme=dark] .sidebar-wrapper .sidebar-bottom .user-info .user-designation {
    font-size: 0.7rem;
    color: var(--ms-t3);
    letter-spacing: 0.03em;
}
[data-bs-theme=dark] .sidebar-wrapper .sidebar-bottom .dropdown-menu {
    background-color: var(--ms-bg-4);
    border: 1px solid var(--ms-border-gold);
    border-radius: var(--ms-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
[data-bs-theme=dark] .sidebar-wrapper .sidebar-bottom .dropdown-item {
    color: var(--ms-t2);
    font-size: 0.8rem;
    border-radius: 5px;
    padding: 0.45rem 0.75rem;
    transition: background var(--ms-transition), color var(--ms-transition);
}
[data-bs-theme=dark] .sidebar-wrapper .sidebar-bottom .dropdown-item:hover {
    background-color: var(--ms-gold-glow);
    color: var(--ms-t1);
}


/* ── §5  PAGE CONTENT ────────────────────────────────────────────── */

[data-bs-theme=dark] .page-content {
    background-color: var(--ms-bg-base);
}


/* ── §6  CARDS / SURFACE SYSTEM ─────────────────────────────────── */

[data-bs-theme=dark] .card {
    background-color: var(--ms-bg-3);
    border: 1px solid var(--ms-border-1);
    border-radius: var(--ms-radius);
    box-shadow: none;
}
[data-bs-theme=dark] .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--ms-border-1);
    padding: 0.875rem 1.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ms-t1);
}
[data-bs-theme=dark] .card-body {
    padding: 1.375rem;
}
[data-bs-theme=dark] .card-footer {
    background-color: transparent;
    border-top: 1px solid var(--ms-border-1);
    padding: 0.875rem 1.375rem;
}

/* Card variants */
[data-bs-theme=dark] .card.ms-card-interactive {
    transition: border-color var(--ms-transition), box-shadow var(--ms-transition);
    cursor: pointer;
}
[data-bs-theme=dark] .card.ms-card-interactive:hover {
    border-color: var(--ms-border-gold);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35);
}
[data-bs-theme=dark] .card.ms-card-elevated {
    background-color: var(--ms-bg-4);
    border-color: var(--ms-border-2);
}
[data-bs-theme=dark] .card.ms-card-gold {
    border-left: 2px solid var(--ms-gold);
    border-top: 1px solid var(--ms-border-1);
    border-right: 1px solid var(--ms-border-1);
    border-bottom: 1px solid var(--ms-border-1);
}


/* ── §7  PAGE HEADER COMPONENT ──────────────────────────────────── */

.ms-page-header {
    margin-bottom: 1.75rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.ms-page-header .ms-header-meta { flex: 1; }

.ms-page-header .ms-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ms-t4);
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
}
.ms-page-header .ms-breadcrumb a {
    color: var(--ms-t4);
    text-decoration: none;
    transition: color var(--ms-transition);
}
.ms-page-header .ms-breadcrumb a:hover { color: var(--ms-t3); }
.ms-page-header .ms-breadcrumb .ms-sep { opacity: 0.3; user-select: none; }

.ms-page-header .ms-page-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ms-t1);
    margin: 0 0 0.2rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.ms-page-header .ms-page-subtitle {
    font-size: 0.8rem;
    color: var(--ms-t3);
    margin: 0;
    line-height: 1.5;
}
.ms-page-header .ms-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-top: 0.125rem;
}


/* ── §8  MODULE TABS COMPONENT ──────────────────────────────────── */

.ms-module-tabs {
    display: flex;
    border-bottom: 1px solid var(--ms-border-1);
    margin-bottom: 1.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.ms-module-tabs::-webkit-scrollbar { display: none; }

.ms-module-tabs .ms-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.6rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ms-t3);
    text-decoration: none;
    border-bottom: 1.5px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color var(--ms-transition), border-color var(--ms-transition);
}
.ms-module-tabs .ms-tab:hover { color: var(--ms-t2); }
.ms-module-tabs .ms-tab.active {
    color: var(--ms-gold-light);
    border-bottom-color: var(--ms-gold);
    font-weight: 600;
}
.ms-module-tabs .ms-tab .ms-tab-icon { font-size: 14px; line-height: 1; }
.ms-module-tabs .ms-tab-badge {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.1em 0.5em;
    border-radius: 10px;
    background-color: var(--ms-gold-bg);
    color: var(--ms-gold);
    border: 1px solid var(--ms-gold-border);
    line-height: 1.6;
    letter-spacing: 0.03em;
}


/* ── §9  AVATAR / MONOGRAM ──────────────────────────────────────── */

.ms-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7a5a20, #c9a84c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #09090c;
    flex-shrink: 0;
    letter-spacing: 0.06em;
    user-select: none;
}
.ms-avatar.ms-avatar-lg {
    width: 38px;
    height: 38px;
    font-size: 0.75rem;
}
.ms-avatar.ms-avatar-xl {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
    font-weight: 800;
}


/* ── §10  FORMS ─────────────────────────────────────────────────── */

[data-bs-theme=dark] .form-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ms-t3);
    margin-bottom: 0.375rem;
}

[data-bs-theme=dark] .form-control,
[data-bs-theme=dark] .form-select {
    background-color: var(--ms-bg-5);
    border: 1px solid var(--ms-border-2);
    color: var(--ms-t1);
    font-size: 0.8125rem;
    border-radius: var(--ms-radius);
    padding: 0.5625rem 0.875rem;
    transition: border-color var(--ms-transition), box-shadow var(--ms-transition);
}
[data-bs-theme=dark] .form-control::placeholder { color: var(--ms-t3); opacity: 1; }
[data-bs-theme=dark] .form-control:focus,
[data-bs-theme=dark] .form-select:focus {
    background-color: var(--ms-bg-5);
    border-color: var(--ms-gold-border);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.07);
    color: var(--ms-t1);
    outline: none;
}
[data-bs-theme=dark] .input-group-text {
    background-color: var(--ms-bg-5);
    border-color: var(--ms-border-2);
    color: var(--ms-t3);
}
[data-bs-theme=dark] .form-control.is-invalid { border-color: #b94040; }
[data-bs-theme=dark] .invalid-feedback { font-size: 0.75rem; color: #e06060; }
[data-bs-theme=dark] .form-check-input {
    background-color: var(--ms-bg-5);
    border-color: var(--ms-border-2);
}
[data-bs-theme=dark] .form-check-input:checked {
    background-color: var(--ms-gold);
    border-color: var(--ms-gold);
}
[data-bs-theme=dark] textarea.form-control {
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}


/* ── §11  TABLES ────────────────────────────────────────────────── */

[data-bs-theme=dark] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ms-t2);
    --bs-table-border-color: var(--ms-border-1);
    --bs-table-striped-bg: rgba(255,255,255,0.015);
    --bs-table-hover-bg: var(--ms-gold-glow);
    color: var(--ms-t2);
    font-size: 0.8125rem;
}
[data-bs-theme=dark] .table thead th {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ms-t3);
    border-bottom: 1px solid var(--ms-border-2);
    border-top: none;
    padding: 0.75rem 1rem;
    white-space: nowrap;
}
[data-bs-theme=dark] .table td {
    padding: 0.875rem 1rem;
    border-color: var(--ms-border-1);
    vertical-align: middle;
    color: var(--ms-t2);
}
[data-bs-theme=dark] .table tbody tr:hover td {
    background-color: var(--ms-gold-glow);
}
[data-bs-theme=dark] .table-responsive { border-radius: var(--ms-radius); }


/* ── §12  BUTTONS ───────────────────────────────────────────────── */

[data-bs-theme=dark] .btn-primary {
    background-color: var(--ms-gold);
    border-color: var(--ms-gold);
    color: #09090c;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    transition: background var(--ms-transition), border-color var(--ms-transition), box-shadow var(--ms-transition);
}
[data-bs-theme=dark] .btn-primary:hover,
[data-bs-theme=dark] .btn-primary:focus {
    background-color: var(--ms-gold-light);
    border-color: var(--ms-gold-light);
    color: #09090c;
    box-shadow: 0 0 0 3px rgba(201,168,76,0.18);
}
[data-bs-theme=dark] .btn-primary:active {
    background-color: var(--ms-gold-dark);
    border-color: var(--ms-gold-dark);
    color: #f0ede7;
}

[data-bs-theme=dark] .btn-secondary {
    background-color: transparent;
    border-color: var(--ms-border-2);
    color: var(--ms-t2);
    font-size: 0.8125rem;
}
[data-bs-theme=dark] .btn-secondary:hover {
    background-color: rgba(255,255,255,0.04);
    border-color: var(--ms-border-3);
    color: var(--ms-t1);
}

[data-bs-theme=dark] .btn-sm {
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    border-radius: 5px;
}


/* ── §13  DROPDOWNS ─────────────────────────────────────────────── */

[data-bs-theme=dark] .dropdown-menu {
    background-color: var(--ms-bg-4);
    border: 1px solid var(--ms-border-gold);
    border-radius: var(--ms-radius);
    padding: 0.375rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
[data-bs-theme=dark] .dropdown-item {
    border-radius: 5px;
    font-size: 0.8rem;
    color: var(--ms-t2);
    padding: 0.45rem 0.75rem;
    transition: background var(--ms-transition), color var(--ms-transition);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
[data-bs-theme=dark] .dropdown-item:hover {
    background-color: var(--ms-gold-glow);
    color: var(--ms-t1);
}
[data-bs-theme=dark] .dropdown-divider {
    border-color: var(--ms-border-1);
    margin: 0.25rem 0.5rem;
}


/* ── §14  BADGES / LABELS ───────────────────────────────────────── */

[data-bs-theme=dark] .badge {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.2em 0.55em;
    border-radius: 4px;
}
[data-bs-theme=dark] .badge.bg-primary,
[data-bs-theme=dark] .ms-badge-gold {
    background-color: var(--ms-gold-bg) !important;
    color: var(--ms-gold);
    border: 1px solid var(--ms-gold-border);
}
[data-bs-theme=dark] .badge.bg-secondary {
    background-color: var(--ms-bg-5) !important;
    color: var(--ms-t3);
    border: 1px solid var(--ms-border-1);
}


/* ── §15  ALERTS ────────────────────────────────────────────────── */

[data-bs-theme=dark] .alert {
    border-radius: var(--ms-radius);
    font-size: 0.8125rem;
    padding: 0.75rem 1rem;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left-width: 3px;
}
[data-bs-theme=dark] .alert-success {
    background-color: rgba(39,174,96,0.07);
    border-left-color: #27ae60;
    color: #6ecda0;
}
[data-bs-theme=dark] .alert-danger {
    background-color: rgba(176,42,42,0.07);
    border-left-color: #b02a2a;
    color: #e06060;
}
[data-bs-theme=dark] .alert-warning {
    background-color: var(--ms-gold-bg);
    border-left-color: var(--ms-gold);
    color: var(--ms-gold-light);
}


/* ── §16  SEPARATORS / UTILITIES ────────────────────────────────── */

.ms-separator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ms-t4);
    margin: 1.25rem 0;
}
.ms-separator::before,
.ms-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--ms-border-1);
}

/* Custom scrollbars */
[data-bs-theme=dark] * {
    scrollbar-width: thin;
    scrollbar-color: var(--ms-bg-4) transparent;
}
[data-bs-theme=dark] *::-webkit-scrollbar { width: 5px; }
[data-bs-theme=dark] *::-webkit-scrollbar-thumb {
    background: var(--ms-bg-4);
    border-radius: 3px;
}


/* ── §17  LOGIN ──────────────────────────────────────────────────── */

.ms-login-page {
    min-height: 100vh;
    background-color: #09090c;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
}

/* Warm gold ambient glow — sin brillo, muy sutil */
.ms-login-page::before {
    content: '';
    position: fixed;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(201,168,76,0.04) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

.ms-login-box {
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 1;
}

/* Login brand block */
.ms-login-brand {
    text-align: center;
    margin-bottom: 2.25rem;
}

.ms-login-monogram {
    width: 42px;
    height: 42px;
    border: 1.5px solid #c9a84c;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: #c9a84c;
    margin-bottom: 1rem;
    letter-spacing: 0;
}

.ms-login-title {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #f0ede7;
    margin: 0 0 0.35rem;
}

.ms-login-subtitle {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5d5952;
    margin: 0;
}

/* Login form card */
.ms-login-card {
    background-color: #161619;
    border: 1px solid rgba(255,255,255,0.075);
    border-radius: 12px;
    padding: 2rem;
}
.ms-login-card .form-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5d5952;
    margin-bottom: 0.4rem;
}
.ms-login-card .form-control {
    background-color: #222226;
    border: 1px solid rgba(255,255,255,0.075);
    color: #f0ede7;
    font-size: 0.8125rem;
    border-radius: 7px;
    padding: 0.5625rem 0.875rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ms-login-card .form-control::placeholder { color: #5d5952; opacity: 1; }
.ms-login-card .form-control:focus {
    background-color: #222226;
    border-color: rgba(201,168,76,0.35);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.07);
    color: #f0ede7;
    outline: none;
}
.ms-login-card .input-group-text {
    background-color: #222226;
    border-color: rgba(255,255,255,0.075);
    color: #5d5952;
    cursor: pointer;
    transition: color 0.15s;
}
.ms-login-card .input-group-text:hover { color: #a09b93; }

.ms-login-card .btn-login {
    background-color: #c9a84c;
    border-color: #c9a84c;
    color: #09090c;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.6875rem;
    border-radius: 7px;
    width: 100%;
    transition: background 0.15s, box-shadow 0.15s;
    display: block;
    text-align: center;
    cursor: pointer;
    border: none;
}
.ms-login-card .btn-login:hover {
    background-color: #e5cf96;
    box-shadow: 0 0 24px rgba(201,168,76,0.15);
}

.ms-login-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #302d29;
}

/* ================================================================
   §18 Shared module utilities (used in admin module views)
   ================================================================ */

.ms-form-section-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ms-t2);
    margin-bottom: 1.125rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Score rating row (admin review form) */
.ms-rating-row {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.ms-rating-pill { display: none; }
.ms-rating-pill + label {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: #746f6a;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}
.ms-rating-pill + label:hover {
    border-color: rgba(201,168,76,0.5);
    color: var(--ms-t1);
    background: rgba(201,168,76,0.09);
    box-shadow: 0 0 8px rgba(201,168,76,0.14);
}
.ms-rating-pill:checked + label {
    background-color: var(--ms-gold);
    border-color: var(--ms-gold);
    color: #09090c;
    font-weight: 700;
    box-shadow: 0 0 14px rgba(201,168,76,0.45);
}

/* ── ms-form-section spacing (used in review form) ─────────────── */
.ms-form-section {
    margin-bottom: 2.25rem;
    padding-bottom: 2.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ms-form-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* ── Review form: scoped input/select overrides ──────────────── */
.ms-review-form .form-control,
.ms-review-form .form-select {
    background-color: #1e1e24;
    border-color: rgba(255,255,255,0.14);
}
.ms-review-form .form-control:focus,
.ms-review-form .form-select:focus {
    border-color: var(--ms-gold);
    box-shadow: 0 0 0 3px rgba(201,168,76,0.13);
    outline: none;
}
.ms-review-form .form-label {
    color: var(--ms-t2);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin-bottom: 0.4rem;
}

/* Gold badge */
.ms-badge-gold {
    background: rgba(201,168,76,0.1);
    color: var(--ms-gold);
    border: 1px solid rgba(201,168,76,0.25);
    font-size: 0.65rem;
    font-weight: 600;
    padding: .25rem .55rem;
    border-radius: 4px;
    letter-spacing: 0.03em;
}