/* Astha Gems sign-in page. */

:root {
    --green: #075b49;
    --green-dark: #034638;
    --gold: #d9a52b;
    --cream: #f8e9bd;
    --ink: #172b2b;
    --muted: #586b68;
    --line: #b9c9c4;
    --ruby: #b3203a;
}

* { box-sizing: border-box; }

html, body, form { height: 100%; }

body {
    margin: 0;
    font: 15px/1.45 "Segoe UI", Arial, sans-serif;
    color: var(--ink);
    background: #f5f8f7;
}

.lg-shell { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100%; }

/* Brand side: the one strong shape on the page */
.lg-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 48px;
    color: var(--cream);
    background: linear-gradient(135deg, #003e35, #075b49 60%, #003c32);
    border-right: 3px solid var(--gold);
}

.lg-wordmark { position: relative; z-index: 1; }
.lg-wordmark strong { display: block; font: 400 44px/1.05 Georgia, "Times New Roman", serif; letter-spacing: .5px; }
.lg-wordmark span { display: block; margin-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: #d8c58e; }

.lg-gem {
    position: absolute;
    right: -6%;
    bottom: -30%;
    height: 112%;
    max-width: 92%;
}

.lg-facets { fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-opacity: .6; }

/* Form side */
.lg-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.lg-form { width: 100%; max-width: 380px; }

.lg-form h1 { margin: 0 0 24px; font: 400 34px/1.15 Georgia, "Times New Roman", serif; color: var(--green-dark); }

.lg-field { margin-bottom: 16px; }
.lg-field label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: #435d58; }

.lg-field input[type="text"], .lg-field input[type="password"], .lg-field select {
    display: block;
    width: 100%;
    height: 44px;
    padding: 9px 12px;
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    outline: none;
}

.lg-field input:focus, .lg-field select:focus { border-color: #16836a; box-shadow: 0 0 0 3px rgba(22, 131, 106, .14); }
.lg-field [aria-invalid="true"] { border-color: var(--ruby); box-shadow: 0 0 0 3px rgba(179, 32, 58, .12); }

.lg-password { position: relative; }
.lg-password input[type="text"], .lg-password input[type="password"] { padding-right: 64px; }

.lg-show {
    position: absolute;
    top: 6px;
    right: 6px;
    height: 32px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--green);
    background: none;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.lg-show:hover { background: #e8f4f0; }

.lg-message { min-height: 22px; margin: 4px 0 10px; font-size: 14px; font-weight: 600; color: var(--ruby); }

.lg-submit {
    display: block;
    width: 100%;
    height: 48px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #241a05;
    background: linear-gradient(135deg, #ffe99b, #d9a02a);
    border: 1px solid #e3c264;
    border-radius: 9px;
    box-shadow: 0 4px 12px rgba(180, 128, 20, .22);
    cursor: pointer;
    transition: filter .15s;
}

.lg-submit:hover { filter: brightness(.96); }
.lg-submit:disabled { filter: grayscale(.5); opacity: .75; cursor: progress; }

.lg-show:focus-visible, .lg-submit:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

@media (max-width: 860px) {
    html, body, form { height: auto; }
    .lg-shell { grid-template-columns: minmax(0, 1fr); min-height: 100vh; grid-template-rows: auto 1fr; }
    .lg-brand { min-height: 150px; padding: 24px; border-right: 0; border-bottom: 3px solid var(--gold); }
    .lg-wordmark strong { font-size: 34px; }
    .lg-gem { right: -36px; top: -40px; bottom: auto; height: 240px; max-width: none; }
    .lg-panel { align-items: flex-start; padding: 32px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .lg-submit { transition: none; }
}