@font-face {
    font-family: 'Vazir-FD-WOL';
    src: url('/assets/fonts/iransans-light/IRANSansWeb_FaNum_Light.woff') format('woff');
    font-display: swap;
}

:root {
  --lidino-primary: #0E52F1;
  --lidino-primary-dark: #093BC6;
  --lidino-primary-soft: #EFF4FF;
  --lidino-ink: #0B1737;
  --lidino-muted: #76829B;
  --lidino-border: #E7ECF5;
  --lidino-font: 'Vazir-FD-WOL', Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-width: 320px; font-family: var(--lidino-font); color: var(--lidino-ink); }
button, input, a { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; }
button { cursor: pointer; }
svg { display: block; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.page-form { margin: 0; }

/* Desktop background and overall shell */
.auth-viewport {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--lidino-primary);
  background-image:
    radial-gradient(ellipse at 13% 12%, rgba(255,255,255,.20), transparent 33%),
    radial-gradient(ellipse at 90% 85%, rgba(3,21,115,.3), transparent 48%);
  padding: 46px 28px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.ambient { position: absolute; border-radius: 50%; pointer-events: none; z-index: -1; }
.ambient-one { width: 520px; height: 520px; top: -235px; right: -165px; border: 1px solid rgba(255,255,255,.22); box-shadow: 0 0 0 62px rgba(255,255,255,.055), 0 0 0 122px rgba(255,255,255,.045); }
.ambient-two { width: 420px; height: 420px; bottom: -220px; left: -160px; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 0 0 60px rgba(255,255,255,.045); }
.auth-layout {
  width: min(1130px, 100%);
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .98fr);
  direction: rtl;
  background: #fff;
  border: 1px solid rgba(255,255,255,.47);
  border-radius: 31px;
  box-shadow: 0 32px 110px rgba(3,21,83,.25);
  overflow: hidden;
  position: relative;
}
.auth-panel {
  background: #fff !important;
  padding: 34px clamp(28px, 4vw, 58px) 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* Identity */
.brand-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-home { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: var(--lidino-ink); }
.brand-logo { width: 96px; height: 50px; display: flex; align-items: center; justify-content: center; flex: none; border-radius: 12px; background: #fff; }
.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-caption { display: flex; flex-direction: column; min-width: 0; gap: 2px; padding-right: 10px; border-right: 1px solid #E5EAF4; }
.brand-caption b { font-size: 12px; color: #1D2B4C; font-weight: 800; }
.brand-caption small { font-size: 10px; color: #8A94A8; white-space: nowrap; }
.home-shortcut { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 9px 11px; border-radius: 11px; font-size: 11px; font-weight: 700; background: #F5F7FC; color: #526079; transition: color .2s ease, background .2s ease; }
.home-shortcut .ico { width: 15px; height: 15px; }
.home-shortcut:hover { background: var(--lidino-primary-soft); color: var(--lidino-primary); }

/* Form */
.login-main { width: 100%; max-width: 420px; margin: auto; padding: 28px 0 8px; }
.welcome-chip { width: fit-content; display: flex; align-items: center; gap: 8px; border: 1px solid #DCE6FF; background: #F3F7FF; border-radius: 30px; color: var(--lidino-primary); padding: 7px 13px; font-size: 10px; font-weight: 800; margin-bottom: 19px; }
.welcome-chip .ico { width: 15px; height: 15px; }
.login-main h1 { font-size: clamp(27px, 2.8vw, 35px); font-weight: 900; letter-spacing: -.5px; margin: 0 0 6px; line-height: 1.6; }
.wave { font-weight: 500; color: var(--lidino-primary); font-size: .72em; display: inline-block; transform: rotate(-15deg); }
.login-subtitle { margin: 0; color: #77839A; font-size: 12px; line-height: 2; }
.tenant-row { display: flex; align-items: center; gap: 11px; background: #F4F8FF; border: 1px solid #DDE8FF; border-radius: 15px; margin-top: 22px; padding: 10px 13px; }
.tenant-row[hidden] { display: none !important; }
.tenant-avatar { flex: none; height: 39px; width: 39px; display: grid; place-items: center; color: var(--lidino-primary); background: #fff; border-radius: 12px; }
.tenant-avatar .ico { width: 20px; height: 20px; }
.tenant-avatar:has(.tenant-avatar-image) .ico { display: none; }
.tenant-avatar-image { width: 32px; height: 32px; object-fit: contain; border-radius: 8px; }
.tenant-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tenant-copy small { color: #77839A; font-size: 10px; }
.tenant-copy strong { color: #183F99; font-size: 12px; font-weight: 900; overflow-wrap: anywhere; }
.auth-fields { margin-top: 29px; }
.input-group-custom + .input-group-custom { margin-top: 19px; }
.input-group-custom label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 800; color: #263451; }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-label-row label { margin-bottom: 9px; }
.forgot-top { margin-bottom: 9px; color: var(--lidino-primary); font-size: 10px; font-weight: 800; }
.forgot-top:hover { color: var(--lidino-primary-dark); text-decoration: underline; }
.field-shell { display: flex; align-items: center; position: relative; min-height: 58px; border: 1.5px solid #E6ECF6; border-radius: 16px; background: #F8FAFE; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.field-shell:hover { border-color: #CCD9F5; }
.field-shell:focus-within { background: #fff; border-color: #6898FF; box-shadow: 0 0 0 4px rgba(14,82,241,.09); }
.field-icon { width: 53px; height: 58px; display: flex; justify-content: center; align-items: center; flex: none; color: #97A5BB; }
.field-shell:focus-within .field-icon { color: var(--lidino-primary); }
.auth-input { display: block; min-width: 0; width: 100%; height: 56px; line-height: 56px; padding: 0 0 0 17px; border: 0 !important; box-shadow: none !important; outline: none !important; background: transparent !important; font-family: var(--lidino-font) !important; font-size: 13px !important; color: #142443 !important; font-weight: 600; }
.auth-input::placeholder { color: #AFB8C9; font-weight: 400; opacity: 1; }
.phone-input { direction: ltr; text-align: right; unicode-bidi: plaintext; }
.password-input { padding-left: 47px; }
.password-toggle { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 39px; height: 39px; border: 0; border-radius: 11px; background: transparent; color: #8794A8; display: grid; place-items: center; }
.password-toggle:hover { background: #EAF0FB; color: var(--lidino-primary); }
.password-toggle .eye-off { display: none; }
.password-toggle[aria-pressed="true"] .eye-on { display: none; }
.password-toggle[aria-pressed="true"] .eye-off { display: block; }
.message-slot { min-height: 27px; padding-top: 10px; color: #E11D48; font-size: 11px; line-height: 1.9; }
.server-message:empty { display: none; }
.client-message[hidden] { display: none !important; }
.client-message { color: #E11D48; }
.auth-input[aria-invalid="true"] { color: #C51D45 !important; }
.submit-button { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 14px; border: none; border-radius: 16px; background: var(--lidino-primary); color: #fff !important; font-size: 14px; font-weight: 900; box-shadow: 0 14px 32px rgba(14,82,241,.22); position: relative; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.submit-button:hover { color: #fff; background: var(--lidino-primary-dark); box-shadow: 0 19px 36px rgba(14,82,241,.26); transform: translateY(-1px); }
.submit-button:active { transform: translateY(1px); }
.submit-arrow { position: absolute; left: 16px; display: grid; place-items: center; width: 33px; height: 33px; background: rgba(255,255,255,.16); border-radius: 10px; }
.submit-arrow .ico { width: 19px; height: 19px; }
.form-bottom { margin-top: 27px; }
.divider-label { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; font-size: 10px; color: #9AA5B5; white-space: nowrap; }
.divider-label::before,.divider-label::after { content: ''; display: block; height: 1px; flex: 1; background: #E9EDF4; }
.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.quick-action { min-height: 50px; padding: 10px; display: flex; align-items: center; gap: 8px; border: 1px solid #E8EEF7; background: #fff; border-radius: 12px; font-size: 10px; font-weight: 800; color: #3D4C66; transition: background .2s, border-color .2s, transform .2s; }
.quick-action:hover { background: #F5F8FF; border-color: #BFD3FF; color: var(--lidino-primary); transform: translateY(-2px); }
.quick-icon { background: #EFF4FF; border-radius: 9px; display: grid; place-items: center; width: 30px; height: 30px; flex: none; color: var(--lidino-primary); }
.quick-icon .ico { width: 16px; height: 16px; }
.quick-arrow { width: 13px; height: 13px; margin-right: auto; color: #9EACC0; }
.quick-action-always { grid-column: 1 / -1; }
.panel-footer { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 12px; margin-top: 20px; color: #9AA4B4; font-size: 10px; }
.footer-point { width: 3px; height: 3px; border-radius: 50%; background: #C2CAD7; }

/* Editorial app showcase */
.auth-showcase { position: relative; overflow: hidden; background: linear-gradient(150deg, #124DEE 0%, #0938AE 55%, #061F6D 100%); color: #fff; padding: 38px clamp(30px, 4vw, 52px); isolation: isolate; }
.auth-showcase::after { position: absolute; content: ''; width: 480px; height: 480px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); bottom: -230px; left: -160px; box-shadow: 0 0 0 58px rgba(255,255,255,.026), 0 0 0 118px rgba(255,255,255,.026); pointer-events: none; }
.showcase-glow { position: absolute; border-radius: 50%; filter: blur(48px); z-index: -1; opacity: .42; }
.showcase-glow-one { background: #2681FF; width: 260px; height: 260px; top: 80px; left: -100px; }
.showcase-glow-two { background: #05C9D9; width: 220px; height: 220px; bottom: -70px; right: -110px; opacity: .24; }
.showcase-inner { max-width: 490px; margin: 0 auto; position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.showcase-topline { display: flex; align-items: center; gap: 9px; direction: ltr; justify-content: flex-start; font: 800 10px/1.3 Arial, sans-serif; letter-spacing: 2.5px; color: #CDDFFF; }
.topline-dot { width: 6px; height: 6px; background: #66F5DA; border-radius: 50%; box-shadow: 0 0 0 4px rgba(102,245,218,.15); }
.showcase-index { margin-left: auto; font-size: 9px; letter-spacing: .7px; color: rgba(255,255,255,.64); }
.showcase-intro { padding-top: clamp(44px, 5.2vh, 70px); }
.showcase-eyebrow { display: inline-flex; align-items: center; gap: 6px; color: #B9D3FF; font-size: 11px; font-weight: 700; margin-bottom: 12px; }
.showcase-eyebrow .ico { width: 15px; height: 15px; color: #76F2E7; }
.showcase-intro h2 { font-size: clamp(27px, 3.1vw, 39px); font-weight: 900; line-height: 1.7; letter-spacing: -.7px; margin: 0; }
.showcase-intro h2 em { font-style: normal; color: #80FFF4; }
.showcase-intro p { margin: 14px 0 0; max-width: 345px; color: #CDDEFF; line-height: 2.1; font-size: 11px; }
.app-mockup { position: relative; margin-top: 29px; border: 1px solid rgba(255,255,255,.75); border-radius: 19px; overflow: hidden; color: #1B2B48; background: #fff; box-shadow: 0 22px 46px rgba(5,16,90,.32); transform: rotate(-1.7deg); }
.mockup-top { display: flex; align-items: center; gap: 8px; height: 61px; padding: 10px 15px; border-bottom: 1px solid #F0F2F8; }
.mockup-appmark { width: 34px; height: 34px; border-radius: 10px; background: var(--lidino-primary); display: grid; place-items: center; color: white; }
.mockup-appmark .ico { width: 18px; height: 18px; }
.mockup-appname { display: flex; flex-direction: column; gap: 1px; }
.mockup-appname strong { font-size: 10px; }
.mockup-appname span { font-size: 8px; color: #9DA8B9; }
.mockup-indicator { display: flex; gap: 4px; margin-right: auto; direction: ltr; }
.mockup-indicator span { width: 6px; height: 6px; border-radius: 50%; background: #E8ECF6; }
.mockup-indicator span:first-child { background: #C0F8EE; }
.mockup-body { padding: 18px 19px 17px; display: grid; grid-template-columns: 1.15fr 1fr; gap: 15px; }
.mockup-graph { border: 1px solid #E8EEF8; background: #FCFDFF; border-radius: 12px; padding: 11px; }
.mockup-graph-header { display: flex; align-items: center; justify-content: space-between; color: #283854; font-size: 9px; font-weight: 800; }
.mockup-graph-header .ico { width: 15px; height: 15px; color: #8B9DBE; }
.bars { display: flex; align-items: end; gap: 7px; height: 96px; justify-content: space-evenly; padding: 10px 3px 0; border-bottom: 1px dashed #DEE6F5; }
.bars i { display: block; width: 12px; background: linear-gradient(#4588FF, #C8DBFF); border-radius: 5px 5px 0 0; }
.bars i:nth-child(1) { height: 36%; } .bars i:nth-child(2) { height: 62%; } .bars i:nth-child(3) { height: 45%; } .bars i:nth-child(4) { height: 87%; } .bars i:nth-child(5) { height: 65%; } .bars i:nth-child(6) { height: 76%; } .bars i:nth-child(7) { height: 53%; } .bars i:nth-child(8) { height: 96%; background: linear-gradient(#00D4BE,#B0F4E6); }
.mockup-graph-foot { display: flex; justify-content: space-between; gap: 3px; margin-top: 8px; font-size: 6px; color: #97A5BB; }
.mockup-tasks { display: flex; flex-direction: column; gap: 8px; }
.mockup-section-title { color: #1A305B; font-size: 9px; font-weight: 900; margin-bottom: 3px; }
.mock-task { min-height: 33px; display: flex; align-items: center; gap: 7px; border: 1px solid #ECF0F7; border-radius: 9px; padding: 6px; }
.task-check { flex: none; width: 17px; height: 17px; border-radius: 5px; border: 1px solid #C8D7ED; }
.task-check.checked { display: grid; place-items: center; background: #E5F9F4; border-color: #E5F9F4; color: #12A88E; }
.task-check .ico { width: 12px; height: 12px; }
.task-name { font-size: 8px; font-weight: 700; white-space: nowrap; }
.task-pill { margin-right: auto; border-radius: 5px; color: #14A28A; background: #EAFAF5; padding: 4px; white-space: nowrap; font-size: 6px; }
.task-lines { width: 13px; height: 3px; margin-right: auto; border-radius: 3px; background: #D5DFEF; }
.showcase-bottom { margin-top: auto; padding-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.showcase-feature { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #DBE8FF; font-weight: 700; }
.feature-dot { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: #53F0D6; border: 1px solid rgba(130,251,223,.55); }
.feature-dot .ico { width: 15px; height: 15px; }
.tenant-media { border-radius: 10px; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.95); padding: 4px; width: 70px; height: 55px; overflow: hidden; flex: none; }
.tenant-media img { object-fit: contain; width: 100%; height: 100%; border-radius: 7px; }

/* Accessibility and responsiveness */
a:focus-visible, button:focus-visible, .auth-input:focus-visible { outline: 3px solid #71A2FF !important; outline-offset: 3px; }
@media (max-width: 1080px) {
  .auth-layout { width: min(960px, 100%); }
  .auth-panel { padding-inline: 30px; }
  .auth-showcase { padding-inline: 30px; }
  .brand-caption small { display: none; }
  .login-main { max-width: 390px; }
  .showcase-intro h2 { font-size: 28px; }
  .mockup-body { grid-template-columns: 1fr; }
  .mockup-tasks { display: none; }
}
@media (max-width: 767px) {
  body { background: #F5F7FD; }
  .auth-viewport { display: block; min-height: 100vh; min-height: 100dvh; padding: 0; background: #F5F7FD !important; overflow: visible; }
  .ambient { display: none; }
  .auth-layout { display: block; width: 100%; min-height: 100vh; min-height: 100dvh; background: transparent; border: 0; border-radius: 0; overflow: visible; box-shadow: none; }
  .auth-showcase { display: none; }
  .auth-panel { width: 100%; min-height: 100vh; min-height: 100dvh; padding: 0 0 max(21px, env(safe-area-inset-bottom)); border-radius: 0; background: #F5F7FD !important; }
  .brand-header { min-height: 204px; padding: calc(24px + env(safe-area-inset-top)) 22px 82px; align-items: flex-start; background: linear-gradient(140deg, var(--tenant-accent, #0E52F1), #0A3CBF); position: relative; isolation: isolate; overflow: hidden; }
  .brand-header::after { content: ''; position: absolute; width: 240px; height: 240px; border: 1px solid rgba(255,255,255,.19); border-radius: 50%; bottom: -128px; left: -66px; box-shadow: 0 0 0 34px rgba(255,255,255,.045), 0 0 0 70px rgba(255,255,255,.035); z-index: -1; }
  .brand-home { gap: 8px; }
  .brand-logo { width: 96px; height: 46px; border-radius: 12px; padding: 4px; box-shadow: 0 7px 17px rgba(2,16,84,.12); }
  .brand-caption { color: #fff; border-color: rgba(255,255,255,.3); padding-right: 10px; }
  .brand-caption b { color: #fff; font-size: 11px; }
  .brand-caption small { color: #BFD1FC; display: block; font-size: 9px; }
  .home-shortcut { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.23); padding: 9px; }
  .home-shortcut span { display: none; }
  .home-shortcut .ico { width: 19px; height: 19px; }
  .home-shortcut:hover { background: rgba(255,255,255,.24); color: #fff; }
  .login-main { width: calc(100% - 28px); max-width: 520px; margin: -74px auto 0; padding: 26px 22px 22px; border: 1px solid #E9EEFA; border-radius: 25px; position: relative; z-index: 2; background: #fff; box-shadow: 0 18px 50px rgba(12,47,127,.09); }
  .welcome-chip { padding: 6px 11px; margin-bottom: 12px; font-size: 10px; }
  .login-main h1 { font-size: clamp(24px, 6vw, 30px); }
  .login-subtitle { font-size: 11px; }
  .auth-fields { margin-top: 23px; }
  .field-shell { min-height: 56px; }
  .field-icon { height: 54px; }
  .auth-input { height: 54px; line-height: 54px; font-size: 13px !important; }
  .submit-button { min-height: 56px; }
  .panel-footer { margin: auto 0 0; padding: 20px 10px 0; }
}
@media (max-width: 380px) {
  .brand-header { padding-inline: 16px; }
  .brand-caption small { display: none; }
  .login-main { width: calc(100% - 20px); padding: 22px 16px; border-radius: 21px; }
  .quick-action { padding: 8px 6px; font-size: 9px; gap: 5px; }
  .quick-icon { width: 26px; height: 26px; }
  .quick-arrow { width: 11px; height: 11px; }
  .forgot-top { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}