/* Sign-in pages (sign in, owner setup, change password): brand story on the left, the form card on the right. */
:root {
  --si-navy: #0b1f4d; --si-blue: #1565d8; --si-blue2: #2f8cf0; --si-sky: #e8f1fe; --si-teal: #14b8a6;
  --si-text: #1d2a44; --si-muted: #5b6b86; --si-line: #dbe4f2; --si-card: #ffffff;
  --si-grad: linear-gradient(135deg, #1565d8 0%, #2f8cf0 100%);
}
* { box-sizing: border-box }
html, body { margin: 0; min-height: 100% }
body.si {
  font-family: "Segoe UI", Inter, system-ui, -apple-system, Roboto, Arial, sans-serif; color: var(--si-text);
  background:
    radial-gradient(900px 600px at 8% 92%, rgba(56, 189, 248, .14), transparent 60%),
    radial-gradient(800px 600px at 55% 10%, rgba(99, 102, 241, .08), transparent 60%),
    repeating-linear-gradient(135deg, rgba(21, 101, 216, .035) 0 1px, transparent 1px 46px),
    linear-gradient(90deg, #f3f7fd 0%, #f7f9fe 58%, #f4f7fc 100%);
}
.si-page { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }

/* Left: brand and what the ERP does */
.si-hero { position: relative; padding: clamp(32px, 6vh, 80px) clamp(24px, 5vw, 96px); display: flex; flex-direction: column; justify-content: center; gap: 18px; border-right: 1px solid rgba(219, 228, 242, .7) }
.si-brand { display: flex; align-items: center; gap: 20px }
.si-logo { width: 96px; height: 80px; display: grid; place-items: center; background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(11, 31, 77, .08); border: 1px solid var(--si-line);
  font: italic 800 38px/1 Georgia, "Times New Roman", serif; letter-spacing: -1px; background-clip: padding-box; color: var(--si-blue) }
.si-name { font-weight: 900; font-size: clamp(26px, 2.4vw, 38px); letter-spacing: .5px; color: var(--si-navy); line-height: 1.1 }
.si-name span { background: var(--si-grad); -webkit-background-clip: text; background-clip: text; color: transparent }
.si-tag { margin-top: 8px; overflow-wrap: anywhere; font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; color: #3b4a66 }
.si-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--si-line); font-weight: 700; color: var(--si-navy); font-size: 15px; box-shadow: 0 4px 14px rgba(11, 31, 77, .05) }
.si-badge i { width: 10px; height: 10px; border-radius: 50%; background: var(--si-blue2); box-shadow: 0 0 0 4px rgba(47, 140, 240, .18) }
.si-head { margin: 4px 0 0; max-width: 640px; font-weight: 900; font-size: clamp(36px, 4.2vw, 64px); line-height: 1.02; letter-spacing: -1.5px; color: var(--si-navy) }
.si-sub { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #2c3e63 }
.si-sub b { margin-left: 14px; letter-spacing: .3px; font-size: 17px; text-transform: none; background: linear-gradient(90deg, #1565d8, #6d4ef0); -webkit-background-clip: text; background-clip: text; color: transparent }
.si-desc { margin: 0; max-width: 720px; font-size: 16px; line-height: 1.55; color: var(--si-muted) }
.si-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 780px; margin-top: 4px }
.si-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255, 255, 255, .92); border: 1px solid var(--si-line); border-radius: 14px; box-shadow: 0 6px 18px rgba(11, 31, 77, .04) }
.si-card b { display: block; font-size: 14.5px; color: var(--si-navy) }
.si-card small { display: block; margin-top: 3px; font-size: 12px; color: var(--si-muted) }
.si-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #2f8cf0, #5b5bf0); color: #fff; font-weight: 800; font-size: 11.5px; letter-spacing: .3px; box-shadow: 0 6px 14px rgba(47, 100, 240, .28) }
.si-foot { margin: 6px 0 0; display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 13px; color: var(--si-navy) }
.si-foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--si-teal) }

/* A small glass card with a Balance Sheet preview (no images) */
.si-glass { position: absolute; top: clamp(40px, 9vh, 96px); right: clamp(24px, 4vw, 72px); width: 210px; padding: 16px; border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .85), rgba(232, 241, 254, .7)); border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 18px 40px rgba(21, 101, 216, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: rotate(2deg) }
.si-glass-title { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; color: var(--si-navy) }
.si-glass-title span { font-size: 10px; font-weight: 800; color: #0f766e; background: #dff7f2; padding: 2px 8px; border-radius: 999px }
.si-kpi { margin-top: 10px } .si-kpi small { display: block; font-size: 11px; color: var(--si-muted) } .si-kpi b { font-size: 22px; color: var(--si-navy) }
.si-bars { margin-top: 10px; height: 56px; display: flex; align-items: flex-end; gap: 6px } .si-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: var(--si-grad); opacity: .85 }
.si-rows { margin-top: 12px; display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; font-size: 11.5px; color: var(--si-muted) } .si-rows b { color: var(--si-navy) } .si-rows .ok { color: #0f766e }

/* Right: the card with the form */
.si-panel { display: grid; place-items: center; padding: 32px clamp(16px, 4vw, 72px) }
.si-box { width: 100%; max-width: 580px; background: var(--si-card); border: 1px solid #e6edf7; border-radius: 28px; padding: clamp(28px, 3.4vw, 46px); box-shadow: 0 30px 70px rgba(11, 31, 77, .10), 0 2px 6px rgba(11, 31, 77, .04) }
.si-box form { display: grid; gap: 16px; margin: 0 }
.si-pill { justify-self: start; padding: 8px 14px; border-radius: 8px; background: var(--si-sky); color: var(--si-blue); font-weight: 800; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase }
.si-welcome { margin: 6px 0 0; font-weight: 900; font-size: clamp(30px, 2.6vw, 40px); letter-spacing: -.5px; color: var(--si-navy) }
.si-lead { margin: -6px 0 10px; color: var(--si-muted); font-size: 16px }
.si-field { display: grid; gap: 10px } .si-field > span:first-child { font-weight: 800; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--si-navy) }
.si-input { display: flex; align-items: center; border: 1px solid #cfd9e8; border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s }
.si-input:focus-within { border-color: var(--si-blue2); box-shadow: 0 0 0 4px rgba(47, 140, 240, .15) }
.si-input svg { flex: none; width: 52px; height: 22px; padding-right: 14px; margin-right: 14px; border-right: 1px solid #dfe6f1; fill: none; stroke: #7d8aa3; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.si-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 20px 18px 20px 0; font: inherit; font-size: 16px; color: var(--si-text) }
.si-button { margin-top: 6px; width: 100%; border: 0; border-radius: 12px; padding: 19px; font: inherit; font-weight: 800; font-size: 18px; color: #fff; cursor: pointer; background: linear-gradient(90deg, #0f5bd0 0%, #2f8cf0 100%); box-shadow: 0 12px 26px rgba(21, 101, 216, .28); transition: transform .1s, box-shadow .15s }
.si-button:hover { box-shadow: 0 14px 30px rgba(21, 101, 216, .36) } .si-button:active { transform: translateY(1px) }
.si-button:focus-visible { outline: 3px solid rgba(47, 140, 240, .45); outline-offset: 2px }
.si-problem { padding: 12px 14px; border-radius: 10px; background: #fff1f1; border: 1px solid #f6c9c9; color: #a12222; font-weight: 600; font-size: 14px }
.si-note { margin: 4px 0 0; text-align: center; color: var(--si-muted); font-size: 13.5px }
.si-small { margin: 0; text-align: center; color: #8592a8; font-size: 12px }

/* Owner setup and change password use plain labels and inputs inside the same card. */
.si-box .brand-mark { display: none }
.si-box h1 { font-weight: 900; font-size: 30px; letter-spacing: -.5px; color: var(--si-navy); text-align: left !important }
.si-box .muted { color: var(--si-muted) }
.si-box form > label:not(.si-field) { display: grid; gap: 8px; font-weight: 800; font-size: 13px; letter-spacing: .4px; color: var(--si-navy) }
.si-box form > label:not(.si-field) input { border: 1px solid #cfd9e8; border-radius: 12px; padding: 15px 16px; font: inherit; font-size: 16px; font-weight: 400; letter-spacing: 0; color: var(--si-text); background: #fff }
.si-box form > label:not(.si-field) input:focus { outline: 0; border-color: var(--si-blue2); box-shadow: 0 0 0 4px rgba(47, 140, 240, .15) }
.si-box form > label:not(.si-field) small { font-weight: 400; letter-spacing: 0 }
.si-box .button.primary { border: 0; border-radius: 12px; padding: 17px; font: inherit; font-weight: 800; font-size: 17px; color: #fff; cursor: pointer; background: linear-gradient(90deg, #0f5bd0, #2f8cf0); box-shadow: 0 12px 26px rgba(21, 101, 216, .28) }
.si-box .warning { padding: 12px 14px; border-radius: 10px; background: #fff1f1; border: 1px solid #f6c9c9; color: #a12222; font-weight: 600 }
.si-box a { color: var(--si-blue); font-weight: 700; text-decoration: none }

@media (max-width: 1599px) { .si-glass { display: none } }
@media (max-width: 1000px) {
  .si-page { grid-template-columns: 1fr }
  .si-panel { order: -1; padding-top: 24px; padding-bottom: 8px }
  .si-hero { border-right: 0; padding-top: 24px }
}
@media (max-width: 640px) {
  .si-cards { grid-template-columns: 1fr }
  .si-brand { gap: 14px } .si-logo { width: 72px; height: 60px; font-size: 30px }
  .si-sub b { display: block; margin: 6px 0 0 }
  .si-box { border-radius: 20px }
}