@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* SCOPED STRICTLY TO SIGNIN PAGE */
.page-content.user.signin {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    background-color: #f8fafc !important;
    padding-top: 40px !important;
    padding-bottom: 60px !important;
    min-height: calc(100vh - 60px) !important;
}

.page-content.user.signin .ui.container {
    max-width: 440px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.page-content.user.signin .ui.grid {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.page-content.user.signin .ui.grid > .column {
    display: block !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* TOTAL PASSKEY & EXTRA CONTAINER REMOVAL */
.page-content.user.signin .ui.tab[data-tab="passkey"],
.page-content.user.signin .ui.segment[data-tab="passkey"],
.page-content.user.signin div[data-tab="passkey"],
.page-content.user.signin .ui.attached.segment.tab,
.page-content.user.signin .ui.attached.segment:not(:first-of-type),
.page-content.user.signin .ui.top.attached.header:not(:first-of-type),
.page-content.user.signin .ui.attached.header:not(:first-of-type),
.page-content.user.signin #passkey-signin,
.page-content.user.signin .passkey-signin-container,
.page-content.user.signin .ui.attached.bottom.segment {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

/* Explicitly disable pseudo elements on ALL non-primary elements */
.page-content.user.signin .ui.attached.segment::before,
.page-content.user.signin .ui.attached.segment::after,
.page-content.user.signin .ui.bottom.attached.segment::before,
.page-content.user.signin .ui.bottom.attached.segment::after,
.page-content.user.signin .column::before,
.page-content.user.signin .column::after,
.page-content.user.signin .ui.tab::before,
.page-content.user.signin .ui.tab::after,
.page-content.user.signin div::before,
.page-content.user.signin div::after {
    display: none !important;
    content: none !important;
}

/* Primary Top Header with Hero Image */
.page-content.user.signin > .ui.container > .ui.grid > .column > .ui.top.attached.header,
.page-content.user.signin .ui.top.attached.header:first-child {
    border: none !important;
    background: transparent !important;
    text-align: center !important;
    padding: 10px 0 15px !important;
    font-size: 24px !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    display: block !important;
}

.page-content.user.signin > .ui.container > .ui.grid > .column > .ui.top.attached.header::before,
.page-content.user.signin .ui.top.attached.header:first-child::before {
    content: "" !important;
    display: block !important;
    width: 145px !important;
    height: 145px !important;
    margin: 0 auto 16px !important;
    border-radius: 50% !important;
    background-image: url("/assets/img/Lakshmi-Hayagriva.jpg") !important;
    background-size: cover !important;
    background-position: center !important;
    border: 4px solid #ffffff !important;
    box-shadow: 0 12px 30px rgba(245, 158, 11, 0.45), 0 0 0 4px #d97706 !important;
    transition: transform 0.3s ease !important;
}

.page-content.user.signin .ui.top.attached.header:first-child:hover::before {
    transform: scale(1.04) !important;
}

/* Main Form Card */
.page-content.user.signin .ui.attached.segment:first-of-type {
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.6) !important;
    padding: 32px !important;
    color: #0f172a !important;
}

/* Form Controls */
.page-content.user.signin .ui.form .field label {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
    text-transform: none !important;
}

.page-content.user.signin .ui.form input[type="text"],
.page-content.user.signin .ui.form input[type="password"] {
    border-radius: 10px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.page-content.user.signin .ui.form input:focus {
    border-color: #4f46e5 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12) !important;
    color: #0f172a !important;
}

/* Checkbox & Links */
.page-content.user.signin .ui.checkbox label,
.page-content.user.signin a {
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.page-content.user.signin a:hover {
    color: #4f46e5 !important;
}

/* Submit Button */
.page-content.user.signin .ui.primary.button,
.page-content.user.signin button[type="submit"] {
    background: linear-gradient(135deg, #4f46e5 0%, #3730a3 100%) !important;
    color: #ffffff !important;
    border-radius: 10px !important;
    padding: 14px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.25) !important;
    width: 100% !important;
    margin-top: 12px !important;
    border: none !important;
}

.page-content.user.signin button[type="submit"]:hover {
    background: linear-gradient(135deg, #4338ca 0%, #312e81 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 24px rgba(79, 70, 229, 0.35) !important;
}