:root {
    color-scheme: light;
    --ink: #16243b;
    --muted: #7e8ba0;
    --line: #e5ebf2;
    --accent: #218b8d;
    --accent-dark: #176e76;
    --navy: #101d35;
    --navy-deep: #0a1428;
}

* { box-sizing: border-box; }

html, body { min-width: 320px; min-height: 100%; margin: 0; }

body {
    background: #f2f5f9;
    color: var(--ink);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.login-page {
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(440px, .97fr);
    min-height: 100vh;
    min-height: 100svh;
    padding: clamp(14px, 2.4vw, 34px);
    gap: clamp(14px, 2.4vw, 34px);
}

.login-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 68px);
    min-height: min(720px, calc(100svh - 68px));
    overflow: hidden;
    padding: clamp(28px, 4vw, 58px);
    border-radius: 26px;
    color: #f7fbff;
    background:
        radial-gradient(ellipse at 82% 74%, rgba(30, 152, 157, .34), transparent 33%),
        radial-gradient(ellipse at 10% 92%, rgba(38, 75, 123, .55), transparent 46%),
        linear-gradient(145deg, #172944 0%, #101d35 53%, #0a1428 100%);
    isolation: isolate;
}

.showcase-grid {
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .14;
    background-image: linear-gradient(rgba(207, 224, 242, .17) 1px, transparent 1px), linear-gradient(90deg, rgba(207, 224, 242, .17) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(135deg, #000 15%, transparent 82%);
}

.showcase-orbit {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(174, 219, 224, .13);
    border-radius: 50%;
    pointer-events: none;
}

.orbit-one { width: 570px; height: 570px; right: -230px; top: 12%; }
.orbit-two { width: 410px; height: 410px; right: -150px; top: 23%; border-color: rgba(174, 219, 224, .1); }

.brand, .mobile-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    color: inherit;
    text-decoration: none;
}

.brand-mark {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(194, 235, 235, .28);
    border-radius: 14px;
    color: #b9efea;
    background: rgba(112, 188, 186, .11);
}

.brand-mark svg { width: 32px; height: 32px; }
.brand-copy { display: grid; gap: 3px; }
.brand-copy strong { color: #f7fbff; font-size: 13px; letter-spacing: .13em; }
.brand-copy small { color: #9baec2; font-size: 9px; letter-spacing: .17em; }

.showcase-copy { position: relative; z-index: 1; max-width: 530px; margin-top: clamp(56px, 8vh, 104px); }
.eyebrow, .form-kicker { display: inline-flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 700; letter-spacing: .19em; }
.eyebrow { color: #9edbd8; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: #64c6bc; box-shadow: 0 0 0 4px rgba(100, 198, 188, .12); }

.showcase-copy h1 {
    margin: 22px 0 15px;
    color: #f7fbff;
    font-size: clamp(34px, 4.1vw, 55px);
    font-weight: 600;
    line-height: 1.13;
    letter-spacing: -.045em;
}

.showcase-copy p { max-width: 410px; margin: 0; color: #acbbce; font-size: 15px; line-height: 1.8; }

.workflow-card {
    position: relative;
    z-index: 1;
    width: min(100%, 470px);
    margin-top: auto;
    padding: 21px 22px 18px;
    border: 1px solid rgba(205, 225, 239, .15);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
    box-shadow: 0 20px 55px rgba(0, 0, 0, .16);
    backdrop-filter: blur(10px);
}

.workflow-heading { display: flex; align-items: center; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid rgba(214, 228, 239, .12); }
.workflow-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #a7e0d9; background: rgba(83, 181, 176, .14); }
.workflow-icon svg { width: 21px; height: 21px; }
.workflow-heading strong, .workflow-heading small { display: block; }
.workflow-heading strong { color: #f3f8fc; font-size: 12px; font-weight: 600; }
.workflow-heading small { margin-top: 4px; color: #94a8bd; font-size: 10px; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 8px; border: 1px solid rgba(137, 211, 196, .2); border-radius: 20px; color: #a8e0d5; font-size: 8px; letter-spacing: .1em; }
.status-pill i { width: 5px; height: 5px; border-radius: 50%; background: #76d3b8; }
.workflow-steps { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding-top: 17px; color: #bdcada; font-size: 10px; }
.workflow-steps > div { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.step-number { color: #71c8bf; font-size: 9px; font-weight: 700; }
.step-line { height: 1px; flex: 1; min-width: 7px; background: rgba(199, 219, 232, .18); }

.showcase-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 27px; color: #8095ad; font-size: 8px; font-weight: 600; letter-spacing: .15em; }

.login-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: clamp(22px, 3vw, 44px); }
.login-card { width: min(100%, 420px); }
.mobile-brand { display: none; padding: 6px 9px; border-radius: 10px; background: #fff; box-shadow: 0 4px 14px rgba(20, 42, 62, .08); }
.form-heading { margin-bottom: 34px; }
.form-kicker { color: var(--accent); }
.form-heading h2 { margin: 13px 0 8px; color: #17263d; font-size: clamp(27px, 3vw, 34px); font-weight: 650; letter-spacing: -.04em; line-height: 1.2; }
.form-heading p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.login-form { display: grid; gap: 20px; }
.form-field label { display: block; margin-bottom: 8px; color: #29384d; font-size: 12px; font-weight: 650; }
.input-wrap { position: relative; }
.input-icon { position: absolute; top: 50%; left: 15px; display: grid; width: 20px; height: 20px; place-items: center; color: #8796a9; transform: translateY(-50%); pointer-events: none; }
.input-icon svg { width: 19px; height: 19px; }
.input-wrap input { display: block; width: 100%; height: 54px; padding: 0 15px 0 47px; border: 1px solid var(--line); border-radius: 10px; outline: none; background: #fff; color: #1d2b40; font: inherit; font-size: 13px; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.input-wrap input::placeholder { color: #a3afbd; opacity: 1; }
.input-wrap input:hover { border-color: #cbd6e1; }
.input-wrap input:focus { border-color: #4aafaa; background: #fcffff; box-shadow: 0 0 0 4px rgba(47, 153, 151, .11); }
.input-wrap:focus-within .input-icon { color: var(--accent); }
.field-error { display: none; align-items: center; gap: 7px; margin-top: 8px; color: #ba4d54; font-size: 11px; line-height: 1.45; }
.error-symbol { display: inline-grid; width: 15px; height: 15px; flex: 0 0 15px; place-items: center; border-radius: 50%; color: #fff; background: #d46c72; font-size: 10px; font-weight: 700; }

.sign-in-button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; margin-top: 5px; border: 0; border-radius: 10px; color: #fff; background: linear-gradient(100deg, #207f84, #279c96); box-shadow: 0 9px 18px rgba(32, 127, 132, .18); cursor: pointer; font: inherit; font-size: 13px; font-weight: 650; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
.sign-in-button svg { width: 18px; height: 18px; transition: transform .16s ease; }
.sign-in-button:hover { filter: brightness(1.04); box-shadow: 0 12px 23px rgba(32, 127, 132, .25); transform: translateY(-1px); }
.sign-in-button:hover svg { transform: translateX(3px); }
.sign-in-button:focus-visible { outline: 3px solid rgba(39, 156, 150, .3); outline-offset: 3px; }
.sign-in-button:active { transform: translateY(0); }

.security-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 25px; color: #8794a5; font-size: 11px; }
.security-icon { display: inline-flex; color: #4d9993; }
.security-icon svg { width: 17px; height: 17px; }
.panel-footer { display: flex; justify-content: space-between; gap: 14px; width: min(100%, 420px); margin-top: auto; padding-top: 30px; color: #9ba7b5; font-size: 9px; letter-spacing: .1em; }

@media (max-width: 980px) {
    .login-page { grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); }
    .login-showcase { padding: 34px; }
    .workflow-card { padding: 17px; }
    .workflow-steps { font-size: 9px; }
    .login-panel { padding: 30px; }
}

@media (max-width: 760px) {
    .login-page { display: block; padding: 0; background: #f7f9fc; }
    .login-showcase { min-height: auto; padding: 24px 24px 27px; border-radius: 0 0 24px 24px; }
    .login-showcase > .brand, .workflow-card, .showcase-footer, .showcase-orbit { display: none; }
    .showcase-copy { margin-top: 0; }
    .showcase-copy h1 { margin: 19px 0 8px; font-size: clamp(27px, 7vw, 36px); }
    .showcase-copy p { max-width: 480px; font-size: 13px; }
    .eyebrow { font-size: 9px; }
    .login-panel { padding: 0 24px 26px; }
    .login-card { max-width: 460px; padding-top: 26px; }
    .mobile-brand { display: inline-flex; margin-bottom: 31px; }
    .mobile-brand .brand-mark { width: 38px; height: 38px; border-color: #cfe3e5; color: var(--accent); background: #eaf5f4; }
    .mobile-brand .brand-copy strong { color: #203149; }
    .mobile-brand .brand-copy small { color: #8998a9; }
    .form-heading { margin-bottom: 25px; }
    .panel-footer { max-width: 460px; margin-top: 22px; padding-top: 20px; }
}

@media (max-width: 420px) {
    .login-showcase { padding: 21px 20px 24px; }
    .login-panel { padding-right: 20px; padding-left: 20px; }
    .login-card { padding-top: 22px; }
    .form-heading h2 { font-size: 27px; }
    .login-form { gap: 17px; }
    .input-wrap input, .sign-in-button { height: 51px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}






/* Databox logo and login guidance */
.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .15);
    text-decoration: none;
}

.brand-logo { display: block; width: 170px; height: auto; object-fit: contain; }

.mobile-brand {
    display: none;
    align-items: center;
    width: fit-content;
    padding: 6px 9px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(20, 42, 62, .08);
}

.form-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 11px 13px;
    border-left: 3px solid var(--accent);
    border-radius: 8px;
    color: #547375;
    background: #edf7f6;
    font-size: 12px;
    line-height: 1.5;
}

.note-icon {
    display: inline-grid;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #5da9a5;
    font-family: Georgia, serif;
    font-size: 12px;
    font-weight: 700;
}

.field-error {
    padding: 8px 10px;
    border: 1px solid #f1d8da;
    border-radius: 8px;
    background: #fff7f7;
}

@media (max-width: 760px) {
    .mobile-brand { display: inline-flex; margin-bottom: 25px; }
    .mobile-brand .brand-logo { width: 154px; }
}

.register-prompt {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 17px;
    color: #8793a3;
    font-size: 12px;
}

.register-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-dark);
    font-weight: 650;
    text-decoration: none;
    cursor: default;
}

.register-link:hover { color: var(--accent-dark); text-decoration: none; }
.register-link .coming-soon { padding: 3px 6px; border-radius: 8px; color: #8191a0; background: #e9eef3; font-size: 9px; font-weight: 600; letter-spacing: .03em; }

@media (min-width: 761px) {
    .form-heading { margin-bottom: 24px; }
    .form-note { margin-top: 11px; padding-top: 9px; padding-bottom: 9px; }
    .login-form { gap: 16px; }
    .input-wrap input, .sign-in-button { height: 51px; }
    .register-prompt { margin-top: 11px; }
    .security-note { margin-top: 17px; }
    .panel-footer { padding-top: 14px; }
}

.form-intro {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

.field-error .l_ts {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    font-size: 12px;
    line-height: 1.4;
}

.field-error .l_ts img {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    object-fit: contain;
}

.showcase-copy p { max-width: 440px; }
.showcase-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 19px;
}
.showcase-features span {
    padding: 7px 10px;
    border: 1px solid rgba(185, 224, 231, .17);
    border-radius: 20px;
    color: #c1d7e2;
    background: rgba(255, 255, 255, .055);
    font-size: 10px;
    line-height: 1.2;
}
.workflow-heading strong { font-size: 13px; }
.workflow-heading small { font-size: 11px; }
.workflow-steps { font-size: 10px; }

@media (max-width: 980px) {
    .showcase-features { gap: 6px; margin-top: 15px; }
    .showcase-features span { padding: 6px 8px; font-size: 9px; }
}

@media (max-width: 760px) {
    .showcase-features { margin-top: 13px; }
    .showcase-features span { font-size: 9px; }
}

@media (min-width: 761px) {
    .showcase-copy { margin-top: clamp(36px, 6vh, 82px); }
    .showcase-copy h1 { margin: 16px 0 10px; font-size: clamp(34px, 3.8vw, 50px); }
    .showcase-features { margin-top: 14px; }
    .workflow-card { padding: 18px 20px 15px; }
    .showcase-footer { margin-top: 18px; }
}
@media (min-width: 761px) {
    .login-panel { padding: clamp(20px, 2.5vw, 38px); }
}

/* Unified blue identity and compact capability overview */
:root { --accent: #3478db; --accent-dark: #2867c3; }
.showcase-copy h1 { max-width: 610px; font-size: clamp(32px, 3.35vw, 48px); letter-spacing: -.035em; }
.eyebrow { color: #a9ceff; }
.eyebrow-dot { background: #65a6ff; box-shadow: 0 0 0 4px rgba(101,166,255,.14); }
.showcase-features { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; max-width: 500px; margin-top: 17px; }
.showcase-features > span { display: grid; grid-template-columns: 27px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; column-gap: 9px; min-width: 0; padding: 8px 10px; border: 1px solid rgba(185,211,245,.17); border-radius: 10px; color: #d6e3f4; background: rgba(255,255,255,.055); line-height: 1.25; }
.showcase-features b { overflow: hidden; color: #e7f0fc; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.showcase-features small { grid-column: 2; margin-top: 3px; overflow: hidden; color: #a7bad3; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.capability-mark { grid-column: 1; grid-row: 1 / span 2; display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(129,179,243,.2); border-radius: 8px; color: #9dc4ff; background: rgba(65,129,216,.16); font-size: 8px; font-style: normal; font-weight: 700; }
.status-pill { border-color: rgba(137,180,237,.23); color: #b1d0ff; letter-spacing: .06em; white-space: nowrap; }
.status-pill i { background: #76aef7; }
.step-number { color: #8bbaff; }
.login-panel { position: relative; }
.input-wrap input:focus { border-color: #6da0e7; background: #fcfdff; box-shadow: 0 0 0 4px rgba(52,120,219,.11); }
.sign-in-button { background: linear-gradient(100deg,#3478db,#2867c3); box-shadow: 0 9px 18px rgba(43,105,194,.2); }
.sign-in-button:hover { box-shadow: 0 12px 23px rgba(43,105,194,.25); }
.sign-in-button:focus-visible { outline-color: rgba(52,120,219,.3); }
.security-icon { color: #4b84cc; }
.platform-capabilities { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.platform-heading { flex: 0 0 auto; color: #8fa4bf; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.platform-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.platform-badge { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 5px 9px; border: 1px solid rgba(190,212,239,.17); border-radius: 9px; color: #d6e3f4; background: rgba(255,255,255,.055); }
.platform-badge i { font-size: 15px; line-height: 1; }
.platform-badge b { color: #c8d7e9; font-size: 8px; font-weight: 700; letter-spacing: .04em; }
.platform-whatsapp i { color: #4bd18a; }
.platform-telegram i { color: #45b8f4; }
.platform-facebook i { color: #79aaff; }
.platform-instagram i { color: #e8a1cf; }
.platform-ios i { color: #eef3fb; }
@media (max-width: 980px) {
    .showcase-features { gap: 6px; margin-top: 13px; }
    .showcase-features > span { padding: 7px 8px; }
}
@media (max-width: 760px) {
    .showcase-features { margin-top: 12px; }
    .showcase-features small { font-size: 8px; }
    .platform-capabilities { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 13px; }
}
.login-card { padding: 34px 32px 29px; border: 1px solid #e4eaf2; border-radius: 18px; background: #fff; box-shadow: 0 18px 48px rgba(30,55,91,.08); }
.form-heading h2 { color: #1c3454; }
.form-kicker { padding: 6px 9px; border: 1px solid #dce9fc; border-radius: 7px; background: #f2f7ff; letter-spacing: .11em; }
.form-field label { color: #354a67; font-size: 12px; }
.input-wrap input { border-color: #dce4ef; border-radius: 9px; background: #fbfcfe; }
.input-wrap input:hover { border-color: #b9cae0; background: #fff; }
.input-wrap input:focus { border-color: #6da0e7; background: #fff; box-shadow: 0 0 0 4px rgba(52,120,219,.1); }
.input-icon { color: #8497b1; }
.input-wrap:focus-within .input-icon { color: #3478db; }
.register-prompt { padding-top: 15px; border-top: 1px solid #edf1f6; }
.security-note { margin-top: 20px; }
@media (max-width: 760px) { .login-card { padding: 26px 24px 22px; border-radius: 16px; } }
.showcase-copy { max-width: 760px; margin-top: clamp(28px,4vh,46px); }
.showcase-copy h1 { max-width: 760px; font-size: clamp(34px,3.15vw,46px); line-height: 1.12; }
.showcase-features { max-width: 760px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 15px; }
.showcase-features > span { min-height: 54px; padding: 8px 10px; }
.workflow-card { width: min(100%,760px); margin-top: 22px; }
.platform-capabilities { margin-top: 14px; }
.login-card { width: min(100%,440px); }
@media (max-width: 980px) {
    .showcase-copy { max-width: 100%; margin-top: 34px; }
    .showcase-copy h1 { max-width: 100%; font-size: clamp(32px,4vw,42px); }
    .showcase-features { max-width: 100%; grid-template-columns: repeat(2,minmax(0,1fr)); }
    .workflow-card { width: min(100%,620px); margin-top: 18px; }
}
@media (max-width: 760px) {
    .showcase-copy { margin-top: 0; }
    .showcase-copy h1 { font-size: clamp(28px,7vw,36px); }
    .showcase-features { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .workflow-card { display: block; width: 100%; margin-top: 16px; }
    .platform-capabilities { display: flex; }
}
@media (max-width: 380px) {
    .showcase-features { grid-template-columns: 1fr; }
}
/* Matching two-panel login layout */
.login-page { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: min(850px,calc(100svh - 64px)); align-content: center; }
.login-showcase,.login-panel { height: 100%; min-height: 0; border-radius: 26px; }
.login-panel { border: 1px solid #e3eaf3; background: #fff; justify-content: flex-start; padding: clamp(30px,4vw,62px); }
.login-card { width: min(100%,460px); margin: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.panel-footer { width: min(100%,460px); margin: 0 auto; padding-top: 18px; }
.platform-capabilities { margin-top: auto; padding-top: 16px; }
@media (max-height: 860px) and (min-width: 761px) {
    .login-page { grid-template-rows: auto; align-content: start; }
    .login-showcase,.login-panel { height: auto; min-height: calc(100svh - 68px); }
}
@media (max-width: 760px) {
    .login-page { display: block; min-height: 100vh; padding: 0; }
    .login-showcase { height: auto; min-height: 0; border-radius: 0 0 24px 24px; }
    .login-panel { height: auto; min-height: 0; border: 0; border-radius: 0; padding: 0 24px 26px; }
    .login-card { width: min(100%,460px); margin: 0 auto; padding: 26px 24px 22px; border: 1px solid #e4eaf2; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(30,55,91,.07); }
    .panel-footer { margin-top: 22px; padding-top: 20px; }
    .platform-capabilities { margin-top: 14px; padding-top: 0; }
}
/* Lighter brand-blue showcase surface */
.login-showcase {
    color: #203b5e;
    background: radial-gradient(ellipse at 83% 78%,rgba(94,169,202,.18),transparent 34%),radial-gradient(ellipse at 12% 96%,rgba(107,157,223,.16),transparent 46%),linear-gradient(145deg,#edf4ff 0%,#eaf2fc 56%,#e8f4f8 100%);
}
.showcase-grid { opacity: .55; background-image: linear-gradient(rgba(76,123,184,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(76,123,184,.075) 1px,transparent 1px); }
.showcase-orbit { border-color: rgba(75,124,185,.12); }
.showcase-copy h1 { color: #1b3658; }
.showcase-copy p { color: #5e728e; }
.eyebrow { color: #3478c8; }
.eyebrow-dot { background: #4389e5; box-shadow: 0 0 0 4px rgba(67,137,229,.13); }
.showcase-features > span { border-color: #dce7f4; color: #526c8d; background: rgba(255,255,255,.78); box-shadow: 0 3px 10px rgba(37,74,119,.035); }
.showcase-features b { color: #29496e; }
.showcase-features small { color: #7588a1; }
.capability-mark { border-color: #d9e7fa; color: #3478db; background: #edf4ff; }
.workflow-card { border-color: #d9e5f2; background: rgba(255,255,255,.8); box-shadow: 0 12px 30px rgba(34,72,120,.07); backdrop-filter: blur(8px); }
.workflow-heading { border-color: #e3ebf5; }
.workflow-icon { color: #3478db; background: #eaf2ff; }
.workflow-heading strong { color: #294666; }
.workflow-heading small { color: #788ba4; }
.status-pill { border-color: #d4e4fa; color: #4277b7; background: #f3f7fd; }
.status-pill i { background: #4c8ce2; }
.workflow-steps { color: #5f7694; }
.step-number { color: #3478db; }
.step-line { background: #dce6f1; }
.platform-heading { color: #7a8da7; }
.platform-badge { border-color: #d9e5f2; color: #526b89; background: rgba(255,255,255,.82); }
.platform-badge b { color: #526b89; }
/* Balanced mid-tone blue surface */
.login-showcase { background: radial-gradient(ellipse at 83% 78%,rgba(77,153,189,.2),transparent 34%),radial-gradient(ellipse at 12% 96%,rgba(74,126,190,.16),transparent 46%),linear-gradient(145deg,#c5d9f1 0%,#b8cce8 56%,#b3d3df 100%); }
.showcase-grid { opacity: .68; background-image: linear-gradient(rgba(52,95,146,.085) 1px,transparent 1px),linear-gradient(90deg,rgba(52,95,146,.085) 1px,transparent 1px); }
.showcase-orbit { border-color: rgba(52,96,151,.15); }
.showcase-features > span { background: rgba(255,255,255,.88); }
.workflow-card { background: rgba(255,255,255,.9); }
.platform-badge { background: rgba(255,255,255,.9); }
.platform-brand-mark { display: block; width: 16px; height: 16px; flex: 0 0 16px; }
.platform-amazon i { color: #e29b27; }
.platform-binance .platform-brand-mark { color: #c8a42c; }
.platform-kucoin .kucoin-mark { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 5px; color: #fff; background: #26a17b; font-size: 11px; font-weight: 800; }
/* Quiet the showcase so content hierarchy reads at a glance */
.login-showcase { background: #c5d5e8; }
.showcase-grid,.showcase-orbit { display: none; }
.showcase-features { gap: 5px 20px; }
.showcase-features > span { display: flex; gap: 10px; min-height: 0; padding: 7px 2px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.showcase-features b { color: #294666; font-size: 12px; }
.capability-mark { display: inline-grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 0; border-radius: 0; color: #3975bd; background: transparent; font-size: 10px; }
.showcase-features small { display: none; }
.workflow-card { border-color: rgba(192,207,225,.9); background: #f7faff; box-shadow: none; backdrop-filter: none; }
.platform-badge { box-shadow: none; }
@media (max-width: 980px) { .showcase-features { gap: 4px 12px; } }

/* Refined showcase: confident blue depth with a calm, legible hierarchy */
.login-showcase {
    color: #f5f8fc;
    background: radial-gradient(ellipse at 82% 78%,rgba(43,159,174,.22),transparent 38%),linear-gradient(140deg,#52769f 0%,#466c93 55%,#3e7488 100%);
}
.showcase-copy h1 { color: #fff; }
.showcase-copy p { color: rgba(239,246,255,.82); }
.eyebrow { color: #d7e7ff; }
.eyebrow-dot { background: #8dc2ff; box-shadow: 0 0 0 4px rgba(190,222,255,.15); }
.showcase-features { gap: 14px 18px; }
.showcase-features > span { align-items: flex-start; gap: 11px; padding: 4px 0; color: rgba(245,249,255,.9); }
.showcase-features > span > span { display: grid; gap: 4px; }
.showcase-features b { color: #fff; font-size: 12px; }
.showcase-features small { display: block; color: rgba(229,239,251,.72); font-size: 10px; line-height: 1.45; }
.capability-mark { display: inline-grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid rgba(224,239,255,.23); border-radius: 8px; color: #c8e4ff; background: rgba(240,248,255,.1); font-size: 12px; }
.workflow-card { border-color: rgba(230,241,255,.19); background: rgba(18,43,70,.3); box-shadow: 0 10px 26px rgba(17,40,67,.09); backdrop-filter: blur(8px); }
.workflow-heading { border-color: rgba(230,241,255,.16); }
.workflow-icon { color: #bde6e2; background: rgba(108,190,181,.18); }
.workflow-heading strong { color: #f6f9fd; }
.workflow-heading small { color: rgba(226,238,250,.68); }
.status-pill { border-color: rgba(221,237,255,.17); color: #c8dff6; background: rgba(237,246,255,.08); }
.status-pill i { background: #86c4ff; }
.workflow-steps { color: rgba(235,243,252,.82); }
.step-number { color: #b9d9ff; }
.step-line { background: rgba(224,239,255,.2); }
.platform-capabilities { align-items: center; }
.platform-heading { color: rgba(221,235,250,.68); }
.platform-badges { gap: 18px; }
.platform-badge { gap: 7px; min-height: 0; padding: 3px 0; border: 0; border-radius: 0; color: rgba(245,249,255,.85); background: transparent; }
.platform-badge b { color: rgba(245,249,255,.88); font-size: 9px; }
.platform-badge i { font-size: 16px; }
.platform-whatsapp i { color: #70d7a2; }
.platform-telegram i { color: #75c9f2; }
.platform-facebook i { color: #9cc0ff; }
.platform-instagram i { color: #f0afd2; }
.platform-ios i { color: #f2f6fb; }
.platform-amazon i { color: #ffc45b; }
.platform-binance .platform-brand-mark { width: 15px; height: 15px; flex: 0 0 15px; color: #f1c75b; }
.platform-kucoin .kucoin-mark { width: 15px; height: 15px; flex: 0 0 15px; border-radius: 4px; color: #78dfbd; background: transparent; font-size: 13px; }
@media (max-width: 980px) {
    .showcase-features { gap: 10px 12px; }
    .platform-badges { gap: 13px; }
}
@media (max-width: 760px) {
    .login-showcase { background: linear-gradient(145deg,#52769f 0%,#466c93 58%,#3e7488 100%); }
    .showcase-features small { font-size: 9px; }
    .platform-capabilities { align-items: flex-start; }
}

/* Keep capability copy readable instead of squeezing it into a single line */
.showcase-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    max-width: 760px;
}
.showcase-features > span {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid rgba(224,239,255,.15);
    border-radius: 10px;
    background: rgba(17,43,72,.16);
}
.showcase-features > span > span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    grid-column: 2;
    grid-row: 1;
}
.showcase-features b,
.showcase-features small {
    display: block;
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}
.showcase-features b { font-size: 12px; line-height: 1.3; }
.showcase-features small { font-size: 10px; line-height: 1.35; }
.capability-mark { grid-column: 1; grid-row: 1; }
@media (max-width: 760px) {
    .showcase-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .showcase-features > span { padding: 8px; }
    .showcase-features b { font-size: 11px; }
    .showcase-features small { font-size: 9px; }
}
@media (max-width: 420px) {
    .showcase-features { grid-template-columns: 1fr; }
}
.platform-more { color: rgba(221,235,250,.76); font-size: 9px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }

/* Final balance pass: remove nested outlines and give each region room */
.showcase-features > span > span {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    box-shadow: none;
}
.login-card { width: min(100%,500px); }
.panel-footer { width: min(100%,500px); }
.platform-capabilities { gap: 18px; }
.platform-badges { gap: 9px 16px; }
.platform-badge { gap: 7px; }
.platform-badge i { font-size: 18px; }
.platform-badge b { font-size: 10px; }
.platform-more { margin-left: 2px; font-size: 10px; }
@media (max-width: 980px) {
    .login-card { width: min(100%,480px); }
    .platform-capabilities { gap: 10px; }
    .platform-badges { gap: 8px 12px; }
}
@media (max-width: 760px) {
    .login-card { width: min(100%,460px); }
    .platform-badges { max-width: 100%; gap: 8px 12px; }
}