/* Dent Desk — sign-in page (needs base.css first) */

/* layout */
.lg-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: #fff }

/* left brand panel */
.lg-brand { position: relative; overflow: hidden; background: linear-gradient(150deg, #EEF6FD 0%, #E6F4F4 55%, #EAF0FB 100%); padding: 44px 56px; display: flex; flex-direction: column }
.lg-blob { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55 }
.lg-blob.b1 { width: 420px; height: 420px; background: #CFE6F7; right: -120px; top: -80px }
.lg-blob.b2 { width: 360px; height: 360px; background: #CDEDE7; left: -120px; bottom: -100px }
.lg-mark { position: absolute; right: -60px; bottom: -40px; width: 420px; opacity: .06; transform: rotate(-12deg) }
.lg-logo { height: 38px; width: auto; position: relative; align-self: flex-start }
.lg-copy { position: relative; margin-top: auto; max-width: 460px }
.lg-copy h2 { font-size: 34px; line-height: 1.15; letter-spacing: -.03em; font-weight: 700; color: #14303F; text-wrap: balance }
.lg-copy p { font-size: 15.5px; color: #4A5F6B; margin: 12px 0 26px; line-height: 1.6 }
.lg-feat { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px }
.lg-feat li { display: flex; gap: 14px; align-items: flex-start }
.lg-feat svg { width: 20px; height: 20px; flex: none; color: #0F9D8A; background: #fff; box-sizing: content-box; padding: 9px; border-radius: 12px; box-shadow: 0 4px 14px rgba(15, 80, 90, .08) }
.lg-feat b { display: block; font-size: 14.5px; color: #14303F }
.lg-feat span { font-size: 13.5px; color: #5A6E79; line-height: 1.45 }

/* "today" floating card */
.lg-float { position: relative; margin-top: 34px; margin-bottom: auto; background: rgba(255, 255, 255, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 20px; padding: 14px 16px; box-shadow: 0 18px 44px rgba(20, 60, 80, .12); max-width: 380px; border: 1px solid rgba(255, 255, 255, .9) }
.lg-fh { font-size: 12px; font-weight: 600; color: #5A6E79; display: flex; align-items: center; gap: 8px; margin-bottom: 6px }
.lg-fh .dot { width: 8px; height: 8px; border-radius: 50%; background: #0F9D8A; box-shadow: 0 0 0 4px rgba(15, 157, 138, .15) }
.lg-fr { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid #EEF2F5; font-size: 13px }
.lg-fr b { font-variant-numeric: tabular-nums; color: #14303F }
.lg-fr span { color: #4A5F6B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.lg-fr i { font-style: normal; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px }
.lg-fr i.t { background: #E2E6FA; color: #2F3D91 }
.lg-fr i.c { background: #D5F1EC; color: #0A5A50 }
.lg-fr i.b { background: #DDEBF8; color: #0E3A66 }

/* right form panel */
.lg-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 24px 24px }
.lg-form { width: min(380px, 100%); margin: auto 0 }
.lg-logo-m { display: none }
.lg-hi { font-size: 13px; font-weight: 600; color: #0F9D8A; margin-bottom: 6px }
.lg-form h1 { font-size: 28px; letter-spacing: -.025em }
.lg-group { margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--mut) }
.lg-sub { color: var(--mut); font-size: 14px; margin: 8px 0 26px; line-height: 1.55 }
.lg-in { position: relative }
.lg-in > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--mut2); pointer-events: none }
.lg-in .input { height: 48px; padding-left: 42px; font-size: 15px; border-radius: 14px }
.lg-in .input:focus + .lg-eye, .lg-in:focus-within > svg { color: #2F7DD3 }
.lg-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--mut); font-weight: 600; font-size: 13px; cursor: pointer }
.lg-eye:hover { background: #F2F4F7; color: var(--ink) }
#lp { padding-right: 72px }
.lg-go { width: 100%; height: 50px; margin-top: 22px; font-size: 15px; border-radius: 14px }
.lg-help { font-size: 13px; color: var(--mut); text-align: center; margin-top: 16px }
.lg-form .err { margin-top: 14px }
.lg-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mut2); margin-top: 28px; text-align: center }
.lg-foot img { width: 16px; height: 16px; opacity: .7 }

/* tablet / phone: hide brand panel */
@media (max-width: 900px) {
    .lg-wrap { grid-template-columns: 1fr }
    .lg-brand { display: none }
    .lg-main { padding: 0 20px 20px; justify-content: flex-start; background: linear-gradient(180deg, #EEF6FD 0px, #F2FAF8 220px, #fff 420px) }
    .lg-form { margin: 0; padding-top: max(48px, env(safe-area-inset-top)) }
    .lg-logo-m { display: block; height: 40px; width: auto; margin: 0 auto 34px }
    .lg-hi, .lg-form h1, .lg-sub { text-align: center }
    .lg-form h1 { font-size: 25px }
    .lg-sub { margin-bottom: 22px }
    .lg-foot { margin-top: auto; padding-top: 28px; justify-content: center; flex-wrap: wrap }
    .lg-in .input { font-size: 16px }
}