/* Scoped standalone login styles; no dashboard theme or carousel dependencies. */
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #111c45; background: #fafbfe; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #234a91; text-underline-offset: 4px; }
a:hover { color: #101b50; }
a:focus-visible, button:focus-visible { outline: 3px solid #397bbc; outline-offset: 5px; }
.login-layout { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 100vh; min-height: 100svh; padding: 20px; gap: 20px; }
.sign-in-panel { display: flex; flex-direction: column; padding: 30px clamp(24px, 5vw, 90px) 16px; }
.brand { align-self: flex-start; }
.brand img { display: block; width: auto; max-width: 100%; object-fit: contain; }
.sign-in-content { width: 100%; max-width: 410px; margin: auto; padding: 64px 0; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.2px; margin: 0 0 20px; color: #345d98; }
h1 { font-size: clamp(32px, 3vw, 44px); font-weight: 650; letter-spacing: -1.6px; margin: 0 0 12px; }
.intro { color: #64718a; font-size: 16px; line-height: 1.6; margin: 0 0 36px; }
.field { margin-bottom: 22px; }
.field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 9px; }
.field input, .field select { width: 100%; min-height: 52px; border: 1px solid #ccd5e4; border-radius: 9px; background: #fff; padding: 14px 16px; color: #111c45; font: inherit; font-size: 16px; }
.field input::placeholder { color: #717e95; }
.field input:focus, .field select:focus { outline: 3px solid #d5effa; border-color: #397bbc; }
.recovery { text-align: right; margin: -3px 0 28px; font-size: 14px; }
.sign-in-button { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 9px; background: #101b50; color: #fff; padding: 14px 20px; font: inherit; font-weight: 600; cursor: pointer; }
.sign-in-button:hover { background: #1d3471; }
.sign-in-button span { font-size: 22px; line-height: 1; }
.access-note { color: #65728a; font-size: 13px; line-height: 1.6; margin: 22px 0 0; text-align: center; }
.login-footer { color: #65728a; font-size: 12px; }
.login-alert { padding: 14px 16px; margin-bottom: 24px; background: #fff0ef; border: 1px solid #efc7c3; border-radius: 8px; color: #9c3027; font-size: 14px; }
.login-alert p { margin: 0; line-height: 1.6; }
.login-alert-info { color: #14532d; background: #dcfce7; border-color: #86cfa0; border-left: 4px solid #21864b; font-weight: 500; }
.password-policy-title { margin: 18px 0 9px; font-size: 12px; font-weight: 600; color: #546580; }
.password-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 12px; line-height: 1.5; }
.password-rules li { display: flex; align-items: center; gap: 7px; padding: 9px 10px; border: 1px solid #e1e7f0; border-radius: 8px; background: #f5f7fb; }
.password-rules li::before { content: "○"; flex-shrink: 0; width: 16px; text-align: center; font-size: 14px; }
.password-rules .text-danger { color: #596981; }
.password-rules .text-success { color: #187443; background: #edf9f1; border-color: #b9dfc7; }
.password-rules .text-success::before { content: "✓"; font-weight: 700; }
@media (max-width: 380px) { .password-rules { grid-template-columns: 1fr; } }
.policy-message { font-size: 12px; line-height: 1.6; margin-bottom: 0; }
.policy-message.text-danger { color: #9c3027; }
.policy-message.text-success { color: #187443; }
.resend-form { margin-top: 14px; }
.resend-button { width: 100%; min-height: 48px; border: 1px solid #2857a1; border-radius: 9px; background: #2857a1; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.resend-button:hover:not(:disabled) { background: #1d427e; border-color: #1d427e; }
.resend-button:disabled { color: #234e83; background: #e2f2fc; border-color: #9ccce9; opacity: 1; cursor: not-allowed; }
.merchant-panel { position: relative; isolation: isolate; border-radius: 24px; background: radial-gradient(ellipse at 95% 52%, #214f86 0, transparent 58%), radial-gradient(ellipse at 0 100%, #123867 0, transparent 50%), #0b1544; color: #fff; padding: clamp(28px, 3.6vw, 60px); overflow: hidden; display: flex; align-items: center; }
.merchant-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(#abdff525 .7px, transparent .7px); background-size: 22px 22px; mask-image: linear-gradient(135deg, transparent 15%, #000 100%); }
.panel-content { width: 100%; max-width: 600px; margin: auto; }
.merchant-panel .eyebrow { color: #b5eafb; font-size: 10px; letter-spacing: 1.8px; display: flex; align-items: center; gap: 10px; }
.brand-spark { font-size: 22px; }
.merchant-panel h2 { color: #fff; font-size: clamp(36px, 3.7vw, 58px); line-height: 1.1; letter-spacing: -2px; font-weight: 550; margin: 0 0 20px; }
.merchant-panel h2 > span { color: #9ce6f6; }
.panel-intro { color: #cedcf0; line-height: 1.7; font-size: 15px; margin: 0; }
.payment-workspace { position: relative; height: 365px; margin: 20px -8px 16px; }
.workspace-orbit { position: absolute; width: 110%; height: 280px; border: 1px solid #a4e7ff21; border-radius: 50%; top: 44px; left: -5%; transform: rotate(-24deg); }
.orbit-offset { transform: rotate(-40deg); width: 100%; left: 0; }
.workspace-window { position: absolute; width: 88%; left: 6%; top: 42px; border: 1px solid #ffffff90; border-radius: 15px; background: #f7fbff; box-shadow: 0 30px 70px #02092766; color: #142651; transform: perspective(1100px) rotateY(-8deg) rotateZ(-3deg); overflow: hidden; }
.window-top { display: flex; align-items: center; gap: 10px; padding: 11px 17px; background: #fff; border-bottom: 1px solid #e4edf5; font-size: 10px; font-weight: 600; }
.window-mark { font-size: 23px; font-weight: 800; letter-spacing: -3px; }
.window-mark > span { color: #319bc9; }
.window-dots { margin-left: auto; color: #8c9bb5; letter-spacing: 2px; }
.workspace-body { padding: 18px 20px 10px; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.micro-label { display: block; font-size: 8px; color: #617796; letter-spacing: 1.5px; margin-bottom: 6px; }
.workspace-heading strong { font-size: 17px; font-weight: 650; }
.period-pill { border: 1px solid #dce7f2; border-radius: 6px; padding: 6px 8px; font-size: 9px; color: #59708f; }
.activity-chart { height: 94px; position: relative; margin: 13px 0; }
.chart-grid { position: absolute; inset: 0; background: repeating-linear-gradient(to top, #dfeaf4 0 1px, transparent 1px 30px); }
.activity-chart svg { position: relative; width: 100%; height: 100%; overflow: visible; }
.workspace-row { display: flex; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid #e2eaf4; font-size: 10px; font-weight: 600; }
.workspace-row small { display: block; font-size: 8px; color: #697a94; font-weight: 400; margin-top: 4px; }
.transaction-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: #20658e; background: #ddf5fb; font-size: 17px; }
.report-icon { background: #e5eafa; color: #3e579a; }
.row-pill { margin-left: auto; border-radius: 20px; background: #e0f2fa; color: #256586; padding: 5px 9px; font-size: 8px; }
.row-arrow { margin-left: auto; color: #627b9a; font-size: 16px; }
.floating-link, .floating-status { position: absolute; display: flex; align-items: center; border-radius: 12px; box-shadow: 0 15px 35px #030b393b; }
.floating-link { top: 12px; right: -3px; background: #a6ebf8; color: #10234c; padding: 13px 16px; gap: 10px; transform: rotate(5deg); }
.link-symbol { font-size: 23px; border: 1px solid #237eaa40; border-radius: 8px; padding: 4px 9px; }
.floating-link small { display: block; font-size: 8px; letter-spacing: 1.2px; margin-bottom: 5px; }
.floating-link strong { display: block; font-size: 13px; }
.link-glint { font-size: 20px; margin-left: 12px; color: #286b9d; }
.floating-status { left: -8px; bottom: 27px; gap: 10px; padding: 13px 17px; color: #fff; background: #203d75; border: 1px solid #668cc1; transform: rotate(2deg); }
.status-check { width: 30px; height: 30px; display: grid; place-items: center; background: #a6ebf8; color: #162b56; border-radius: 50%; font-size: 17px; }
.floating-status strong { display: block; font-size: 11px; font-weight: 600; }
.floating-status small { display: block; font-size: 9px; color: #cbdef7; margin-top: 5px; }
.workspace-caption { position: absolute; bottom: 0; right: 5px; font-size: 9px; letter-spacing: .2px; color: #aec8e5; }
.merchant-bottom { border-top: 1px solid #ffffff25; padding-top: 22px; }
.merchant-bottom p { color: #cedcf0; font-size: 15px; line-height: 1.6; margin: 0 0 17px; }
.merchant-bottom strong { color: #fff; font-weight: 500; }
.feature-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.feature-chips li { border: 1px solid #ffffff30; border-radius: 24px; padding: 7px 12px; color: #d8e9fa; font-size: 10px; }
@media (min-width: 901px) and (max-width: 1100px) {
    .workspace-body { padding: 15px 12px 8px; }
    .period-pill { display: none; }
    .floating-link { right: -8px; }
}
@media (max-width: 900px) {
    .login-layout { grid-template-columns: 1fr; padding: 0; gap: 0; }
    .sign-in-panel { min-height: 100svh; padding: 32px 24px 24px; }
    .brand, .login-footer { width: 100%; max-width: 410px; margin-left: auto; margin-right: auto; }
    .sign-in-content { padding: 48px 0; }
    .merchant-panel { display: none; }
}