/* Vyaas · sign-in / sign-up entrance, from the customer's login wireframes (2 Nov 2026).
   Left panel on the wave artwork; right card white (light) or a glowing navy card (dark). */

body.entrance-body { min-height: 100dvh; background: var(--wave) center / cover no-repeat, var(--s0); overflow-x: hidden; }
.entrance { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(420px, 1fr); }
.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- left panel ---- */
.ent-panel { position: relative; display: flex; flex-direction: column; padding: 64px 48px 56px 76px; min-width: 0; }
.ent-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; align-self: flex-start; }
.ent-brand img { width: 52px; height: 52px; }
.ent-brand span { display: flex; flex-direction: column; line-height: 1.1; }
.ent-brand b { font: 700 30px/1 var(--sans); letter-spacing: -.03em; color: var(--brand-ink); }
.ent-brand b i { font-style: normal; background: var(--grad-ai); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ent-brand small { margin-top: 6px; font: 550 11.5px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--brand-tag); }
.ent-h1 { margin: 64px 0 0; font: 700 52px/1.12 var(--sans); letter-spacing: -.035em; color: var(--t1); }
.ent-h1 span { display: block; white-space: nowrap; }
.ent-h1 em { font-style: normal; background: var(--grad-ai); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ent-sub { margin: 26px 0 0; font: 400 18px/1.55 var(--sans); color: var(--t2); max-width: 36rem; }
.ent-usp { list-style: none; margin: 38px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; max-width: 600px; }
.ent-usp li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 22px; align-items: start; }
.ent-usp .tile { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 16px; }
.ent-usp .tile .i { width: 26px; height: 26px; }
.ent-usp .tile.blue { background: var(--tint-blue); color: var(--ink-blue); }
.ent-usp .tile.purple { background: var(--tint-purple); color: var(--ink-purple); }
.ent-usp .tile.green { background: var(--tint-green); color: var(--ink-green); }
.ent-usp .tile.orange { background: var(--tint-orange); color: var(--ink-orange); }
.ent-usp b { display: block; font: 700 18px/1.3 var(--sans); color: var(--t1); letter-spacing: -.01em; }
.ent-usp span:not(.tile) { display: block; margin-top: 3px; font: 400 15px/1.45 var(--sans); color: var(--t2); }
.ent-trust { margin-top: auto; padding-top: 44px; display: flex; flex-wrap: wrap; align-items: center; gap: 0; font: 500 15px var(--sans); color: var(--t2); }
.ent-trust span { display: inline-flex; align-items: center; gap: 10px; }
.ent-trust span .i { color: var(--t1); width: 22px; height: 22px; }
.ent-trust span + span::before { content: "|"; margin: 0 26px; color: var(--l2); }

/* floating cards illustration */
.ent-art { position: absolute; right: 6px; top: 285px; width: 400px; height: 380px; pointer-events: none; }
.ent-art .card { position: absolute; border-radius: 22px; background: color-mix(in srgb, var(--s1) 78%, transparent); border: 1px solid color-mix(in srgb, #ffffff 70%, var(--l1)); box-shadow: 0 30px 70px -30px rgba(47, 111, 234, .45), inset 0 1px 0 rgba(255, 255, 255, .8); backdrop-filter: blur(6px); }
.ent-art .back { right: 16px; top: 0; width: 188px; height: 320px; transform: rotate(8deg); padding: 32px 24px; }
.ent-art .front { left: 40px; top: 70px; width: 250px; height: 260px; transform: rotate(-9deg); padding: 24px; }
.ent-art .ln { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, #c3cefc, #a9b4f8); margin: 12px 0 0; }
.ent-art .w50 { width: 50%; } .ent-art .w55 { width: 55%; } .ent-art .w60 { width: 60%; } .ent-art .w70 { width: 70%; } .ent-art .w80 { width: 80%; } .ent-art .w90 { width: 90%; }
.ent-art .bars { display: flex; align-items: flex-end; gap: 8px; height: 70px; margin-bottom: 34px; }
.ent-art .bars i { width: 16px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #7c7bff, #2f6fea); }
.ent-art .bars i:nth-child(1) { height: 30%; } .ent-art .bars i:nth-child(2) { height: 50%; } .ent-art .bars i:nth-child(3) { height: 70%; } .ent-art .bars i:nth-child(4) { height: 100%; }
.ent-art .front img { width: 44px; height: 44px; }
.ent-art .badge { position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #fff; box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .7); }
.ent-art .badge .i { width: 22px; height: 22px; }
.ent-art .code { margin-top: 22px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--s1) 85%, transparent); border: 1px solid var(--l1); display: grid; grid-template-columns: 24px 1fr 1fr; gap: 8px 10px; align-items: center; }
.ent-art .code .i { width: 22px; height: 22px; color: var(--accent); grid-row: span 2; }
.ent-art .code .ln { margin: 0; height: 8px; }
.ent-art .code .c1 { background: linear-gradient(90deg, #2f6fea, #4f46e5); } .ent-art .code .c2 { background: #c3cefc; } .ent-art .code .c3 { width: 70%; background: #7c7bff; grid-column: 2 / span 2; }

/* ---- right card ---- */
.ent-card { display: flex; align-items: center; justify-content: center; padding: 40px 36px; background: var(--s1); border-left: 1px solid var(--l1); box-shadow: -30px 0 60px -40px rgba(11, 18, 48, .18); }
.ent-card-in { width: 100%; max-width: 450px; }
.ent-lockup { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto 40px; }
.ent-lockup img { width: 84px; height: 84px; filter: drop-shadow(0 14px 28px color-mix(in srgb, var(--accent) 30%, transparent)); }
.ent-lockup .wm { font: 700 40px/1 var(--sans); letter-spacing: -.035em; color: var(--brand-ink); margin-top: 6px; }
.ent-lockup .wm i { font-style: normal; background: var(--grad-ai); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ent-lockup .tag { display: flex; align-items: center; gap: 14px; font: 550 12px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--brand-tag); }
.ent-lockup .tag::before, .ent-lockup .tag::after { content: ""; width: 52px; height: 2px; border-radius: 2px; background: var(--brand-tag); opacity: .5; }
.ent-title { margin: 0 0 8px; font: 700 26px/1.2 var(--sans); letter-spacing: -.02em; color: var(--t1); }
.ent-lead { margin: 0 0 22px; font: 400 15px/1.5 var(--sans); color: var(--t2); }
.ent-lead a, .ent-link, .ent-legal a { color: var(--ink-purple); font-weight: 500; text-decoration: none; }
.ent-lead a:hover, .ent-link:hover, .ent-legal a:hover { text-decoration: underline; }
.ent-form { display: flex; flex-direction: column; }
.ent-label { font: 500 15px var(--sans); color: var(--t1); margin: 14px 0 8px; }
.ent-label:first-of-type { margin-top: 0; }
.ent-field { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px 0 16px; border: 1px solid var(--l2); border-radius: 12px; background: var(--s0); }
.ent-field .i { color: var(--t2); width: 22px; height: 22px; }
.ent-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--t1); font: 400 16px var(--sans); outline: none; }
.ent-field input::placeholder { color: var(--t3); }
.ent-field:focus-within { border-color: var(--accent); box-shadow: var(--glow); background: var(--s1); }
.ent-field.bad { border-color: var(--bad); }
.ent-field .eye { border: 0; background: none; color: var(--t2); cursor: pointer; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; }
.ent-field .eye:hover { background: var(--s2); color: var(--t1); }
.ent-err, .ent-error { font: 400 13px var(--sans); color: var(--bad); margin-top: 6px; }
.ent-error { padding: 10px 12px; border-radius: 10px; background: var(--bad-soft); margin-bottom: 12px; }
.ent-row.right { display: flex; justify-content: flex-end; margin-top: 12px; font-size: 15px; }
.ent-check { display: flex; align-items: center; gap: 10px; margin-top: 22px; font: 400 15px var(--sans); color: var(--t1); cursor: pointer; }
.ent-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.ent-check .box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--l2); background: var(--s1); display: inline-grid; place-items: center; }
.ent-check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.ent-check input:checked + .box::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.ent-check input:focus-visible + .box { outline: 2px solid var(--focus); outline-offset: 2px; }
.ent-submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 52px; margin-top: 24px; border: 0; border-radius: 12px; background: var(--grad); color: #fff; font: 600 18px var(--sans); cursor: pointer; box-shadow: 0 14px 30px -14px rgba(79, 70, 229, .7); }
.ent-submit .i { width: 22px; height: 22px; color: #fff; }
.ent-submit:hover { filter: brightness(1.06); }
.ent-legal { margin: 26px 0 0; text-align: center; font: 400 15px/1.5 var(--sans); color: var(--t2); }
.ent-crafted { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 38px 0 0; font: 600 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--t1); }
.ent-crafted img { width: 22px; height: 22px; border-radius: 50%; }
.ent-notice { padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--t1); font-size: 14px; margin-bottom: 14px; }

/* ---- dark: neon waves, glowing card ---- */
:root[data-theme="dark"] .ent-card, :root:not([data-theme="light"]) .ent-card.dark-mode-probe { background: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ent-card { background: transparent; border-left: 0; box-shadow: none; } }
:root[data-theme="dark"] .ent-card { background: transparent; border-left: 0; box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ent-card-in { padding: 44px 44px 36px; border-radius: 20px; background: color-mix(in srgb, var(--s1) 88%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--l2)); box-shadow: 0 0 0 1px rgba(124, 123, 255, .15), 0 0 80px -20px rgba(124, 123, 255, .45); backdrop-filter: blur(8px); } }
:root[data-theme="dark"] .ent-card-in { padding: 44px 44px 36px; border-radius: 20px; background: color-mix(in srgb, var(--s1) 88%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--l2)); box-shadow: 0 0 0 1px rgba(124, 123, 255, .15), 0 0 80px -20px rgba(124, 123, 255, .45); backdrop-filter: blur(8px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ent-art .card { background: color-mix(in srgb, var(--s1) 70%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 60px -20px rgba(124, 123, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .08); } :root:not([data-theme="light"]) .ent-art .ln { background: linear-gradient(90deg, #3a4a8a, #5563b8); } :root:not([data-theme="light"]) .ent-field { background: color-mix(in srgb, var(--s0) 70%, transparent); } :root:not([data-theme="light"]) .ent-crafted img { box-shadow: 0 0 0 2px var(--warn); } }
:root[data-theme="dark"] .ent-art .card { background: color-mix(in srgb, var(--s1) 70%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: 0 0 60px -20px rgba(124, 123, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .ent-art .ln { background: linear-gradient(90deg, #3a4a8a, #5563b8); }
:root[data-theme="dark"] .ent-field { background: color-mix(in srgb, var(--s0) 70%, transparent); }
:root[data-theme="dark"] .ent-crafted img { box-shadow: 0 0 0 2px var(--warn); }

/* ---- responsive ---- */
@media (max-width: 1400px) { .ent-art { width: 340px; height: 320px; top: 320px; right: 8px; transform: scale(.85); transform-origin: top right; } .ent-h1 { font-size: 44px; } }
@media (max-width: 1100px) { .ent-art { display: none; } .ent-panel { padding: 48px 36px 40px 44px; } }
@media (max-width: 860px) {
  .entrance { grid-template-columns: 1fr; }
  .ent-panel { display: none; }
  .ent-card { min-height: 100dvh; padding: 28px 18px; border-left: 0; }
  .ent-lockup img { width: 64px; height: 64px; } .ent-lockup .wm { font-size: 32px; }
}