*, *::before, *::after { box-sizing: border-box; }

:root {
    --mg-accent:      #7c3aed;
    --mg-accent-dark: #5b21b6;
    --mg-accent-soft: #ede9fe;
    --mg-border:      #e4e8f0;
    --mg-bg:          #f4f6fb;
    --mg-text:        #1a1d2e;
    --mg-muted:       #6b7280;
    --mg-radius:      8px;
}

html, body { height: 100%; font-family: 'Inter', system-ui, sans-serif; }

body {
    margin: 0; padding: 0;
    background: var(--mg-bg);
}

.mg-login-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

@media (max-width: 768px) {
    .mg-login-page { grid-template-columns: 1fr; }
    .mg-deco { display: none; }
}

/* ── Decorative left panel ── */
.mg-deco {
    background: linear-gradient(145deg, #2e1065 0%, #4c1d95 35%, #7c3aed 70%, #a855f7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}
.mg-deco::before {
    content: '';
    position: absolute;
    width: 550px; height: 550px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    top: -180px; right: -180px;
    pointer-events: none;
}
.mg-deco::after {
    content: '';
    position: absolute;
    width: 350px; height: 350px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    bottom: -100px; left: -100px;
    pointer-events: none;
}
.mg-deco-blob {
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,.03);
    top: 40%; left: 10%;
    pointer-events: none;
}
.mg-deco-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #fff;
}
.mg-deco-icon {
    width: 76px; height: 76px;
    border-radius: 22px;
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    margin: 0 auto 1.5rem;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
}
.mg-deco-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 100px;
    padding: .3rem .85rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    margin-bottom: 1.25rem;
}
.mg-deco-content h1 {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -.045em;
    margin-bottom: .5rem;
    line-height: 1.15;
}
.mg-deco-content p {
    font-size: .875rem;
    opacity: .7;
    line-height: 1.75;
    max-width: 290px;
    margin: 0 auto 2.25rem;
}
.mg-deco-features {
    list-style: none;
    text-align: left;
    display: inline-block;
    padding: 0;
}
.mg-deco-features li {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .85rem;
    opacity: .8;
    margin-bottom: .7rem;
}
.mg-deco-features li i { font-size: .95rem; opacity: .9; flex-shrink: 0; }

/* ── Right form panel ── */
.mg-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: #fff;
}
.mg-form-inner { width: 100%; max-width: 400px; }

.mg-form-header { margin-bottom: 2rem; }
.mg-admin-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--mg-accent-soft);
    color: var(--mg-accent);
    border-radius: 100px;
    padding: .25rem .75rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: .85rem;
}
.mg-form-header h2 {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.045em;
    color: var(--mg-text);
    margin-bottom: .3rem;
    line-height: 1.2;
}
.mg-form-header p { font-size: .875rem; color: var(--mg-muted); }

/* ── Filament form cosmetic overrides ── */
.fi-simple-page { background: transparent !important; padding: 0 !important; min-height: unset !important; }
.fi-simple-main { background: transparent !important; box-shadow: none !important; border: none !important; padding: 0 !important; max-width: unset !important; width: 100% !important; }
.fi-simple-header { display: none !important; }
.fi-simple-layout { display: contents; }
.fi-simple-main-ctn { display: contents; }

.fi-input-wrp {
    border-radius: var(--mg-radius) !important;
    border-width: 1.5px !important;
    border-color: var(--mg-border) !important;
    background: #fafbfd !important;
    transition: border-color .15s, box-shadow .15s !important;
}
.fi-input-wrp:focus-within {
    border-color: var(--mg-accent) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,.1) !important;
}
.fi-input { font-family: 'Inter', system-ui, sans-serif !important; font-size: .9rem !important; }
.fi-label-wrp label { font-size: .8rem !important; font-weight: 600 !important; color: var(--mg-text) !important; }

.fi-btn[wire\:click*="authenticate"],
.fi-form-actions .fi-btn-primary,
.fi-simple-page .fi-btn-color-primary {
    background-color: var(--mg-accent) !important;
    border-color: var(--mg-accent) !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 700 !important;
    border-radius: var(--mg-radius) !important;
}
.fi-link { color: var(--mg-accent) !important; }

/* ── Portal link footer ── */
.mg-form-footer {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .8rem;
    color: var(--mg-muted);
}
.mg-form-footer a { color: var(--mg-accent); text-decoration: none; font-weight: 500; }
.mg-form-footer a:hover { text-decoration: underline; }

.mg-portal-access {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--mg-border);
}
.mg-portal-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem;
    border-radius: var(--mg-radius);
    font-size: .825rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--mg-muted);
    background: #fafbfd;
    border: 1.5px solid var(--mg-border);
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
    letter-spacing: .01em;
}
.mg-portal-btn:hover {
    color: var(--mg-accent);
    border-color: #ddd6fe;
    background: var(--mg-accent-soft);
}
.mg-portal-label {
    font-size: .72rem;
    color: var(--mg-muted);
    text-align: center;
    margin-top: .5rem;
    opacity: .7;
}