:root {
  --fd-background: #f7f9fb;
  --fd-surface: #ffffff;
  --fd-text: #191c1e;
  --fd-variant: #444749;
  --fd-outline: #c4c7c9;
  --fd-outline-strong: #75777a;
  --fd-placeholder: #717786;
  --fd-black: #000000;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { color: var(--fd-text); background: var(--fd-background); font-family: Inter, Arial, sans-serif; }
button, input { font: inherit; }
.fd-material { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; line-height: 1; white-space: nowrap; }

/* Frame 1: desktop login. The two columns are deliberately real elements, never a pseudo-element. */
.fd-login { min-height: 100vh; display: flex; flex-direction: row; overflow: hidden; }
.fd-login-visual { position: relative; width: 45%; height: 100vh; flex: 0 0 45%; overflow: hidden; }
.fd-login-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: brightness(.75) contrast(1.25) grayscale(1); }
.fd-login-visual::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .2); mix-blend-mode: multiply; pointer-events: none; }
.fd-login-visual::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent 52%); pointer-events: none; }
.fd-login-brand { position: absolute; z-index: 3; bottom: 48px; left: 48px; display: flex; align-items: center; gap: 16px; color: #fff; }
.fd-login-brand-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 8px; color: #000; background: #fff; }
.fd-login-brand h2 { margin: 0; color: #fff; font: 900 32px/38.4px Inter, Arial, sans-serif; }
.fd-login-brand p { margin: 0; color: rgba(224, 227, 229, .8); font: 500 14px/20px Inter, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.fd-login-panel { position: relative; display: flex; width: 55%; height: 100vh; flex: 0 0 55%; align-items: center; justify-content: center; padding: 96px; background: var(--fd-surface); }
.fd-login-content { position: relative; width: 100%; max-width: 448px; }
.fd-login-header { margin: 0 0 48px; text-align: left; }
.fd-login-header h1 { margin: 0 0 8px; color: #000; font: 700 32px/38.4px Inter, Arial, sans-serif; letter-spacing: -.8px; }
.fd-login-header p { margin: 0; color: var(--fd-variant); font: 400 15px/22px Inter, Arial, sans-serif; }
.fd-login-card { position: relative; padding: 32px; border: 1px solid rgba(196, 199, 201, .3); border-radius: 20px; background: #fff; box-shadow: 0 4px 24px -8px rgba(0, 0, 0, .05); }
.fd-login-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 1px solid rgba(255, 255, 255, .5); border-radius: 20px; }
.fd-login-form { position: relative; z-index: 1; display: grid; gap: 24px; }
.fd-field { display: grid; gap: 8px; }
.fd-field label { color: #000; font: 500 14px/20px Inter, Arial, sans-serif; }
.fd-input-wrap { position: relative; }
.fd-input-icon { position: absolute; top: 50%; left: 16px; color: var(--fd-variant); transform: translateY(-50%); pointer-events: none; }
.fd-input { width: 100%; height: 48px; padding: 8px 16px 8px 48px; border: 1px solid var(--fd-outline); border-radius: 12px; outline: 0; color: #000; background: var(--fd-background); font: 400 15px/22px Inter, Arial, sans-serif; }
.fd-input::placeholder { color: var(--fd-placeholder); }
.fd-input:focus { border-color: #000; box-shadow: 0 0 0 1px #000; }
.fd-password-input { padding-right: 48px; }
.fd-password-toggle { position: absolute; top: 50%; right: 16px; display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; color: var(--fd-variant); background: transparent; transform: translateY(-50%); cursor: pointer; }
.fd-login-actions { display: flex; justify-content: flex-end; padding-top: 4px; }
.fd-login-actions a, .fd-login-support a { color: var(--fd-variant); text-decoration: none; }
.fd-login-actions a:hover, .fd-login-support a:hover { color: #000; }
.fd-login-button { display: inline-flex; width: 100%; height: 48px; align-items: center; justify-content: center; gap: 8px; margin-top: -4px; padding: 0; border: 0; border-radius: 12px; color: #fff; background: #000; font: 700 14px/20px Inter, Arial, sans-serif; cursor: pointer; }
.fd-login-button:disabled { opacity: .65; cursor: wait; }
.fd-login-message { position: absolute; right: 0; left: 0; margin: 0; color: #ba1a1a; font: 500 14px/20px Inter, Arial, sans-serif; transform: translateY(8px); }
.fd-login-support { margin: 32px 0 0; color: var(--fd-outline-strong); font: 500 14px/20px Inter, Arial, sans-serif; text-align: left; }
.fd-login-mobile-brand { display: none; }

/* Frame 2: mobile login. It is a distinct source layout, not a resized desktop login. */
.fd-mobile-login { display: none; }
.fd-mobile-device { position: relative; display: flex; width: 100%; height: 100vh; flex-direction: column; overflow: hidden; background: #fff; }
.fd-mobile-visual { position: relative; width: 100%; height: 36%; flex: 0 0 36%; overflow: hidden; background: #000; }
.fd-mobile-visual-image, .fd-mobile-visual-overlay { position: absolute; inset: 0; }
.fd-mobile-visual-image { background: #000 url('/commercial/assets/stitch-final-delivery/stitch-final-delivery-01.jpg') center / cover no-repeat; }
.fd-mobile-visual-overlay { background: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 50%, rgba(0,0,0,.8)); }
.fd-mobile-brand { position: absolute; top: 15%; right: 0; left: 0; z-index: 1; padding: 0 32px; color: #fff; text-align: center; }
.fd-mobile-brand h1 { margin: 0; color: #fff; font: 800 40px/48px "Hanken Grotesk", Arial, sans-serif; letter-spacing: -.8px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.fd-mobile-brand p { margin: 4px 0 0; color: rgba(255,255,255,.8); font: 500 15px/22px Inter, Arial, sans-serif; letter-spacing: .2em; }
.fd-mobile-sheet { position: relative; z-index: 2; display: flex; min-height: 0; flex: 1; flex-direction: column; margin-top: -24px; padding: 40px 24px 32px; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -4px 24px rgba(0,0,0,.08); }
.fd-mobile-heading { margin: 0 0 32px; }
.fd-mobile-heading h2 { margin: 0 0 8px; color: #000; font: 700 32px/38.4px Inter, Arial, sans-serif; letter-spacing: -.8px; }
.fd-mobile-heading p { margin: 0; color: var(--fd-variant); font: 400 15px/22px Inter, Arial, sans-serif; }
.fd-mobile-form { position: relative; display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 24px; }
.fd-mobile-field { display: grid; gap: 8px; }
.fd-mobile-field label, .fd-mobile-password-label a { color: #000; font: 500 14px/20px Inter, Arial, sans-serif; text-decoration: none; }
.fd-mobile-password-label { display: flex; align-items: center; justify-content: space-between; }
.fd-mobile-password-label a { color: var(--fd-variant); }
.fd-mobile-input-wrap { position: relative; }
.fd-mobile-input-icon { position: absolute; top: 50%; left: 12px; color: var(--fd-outline-strong); transform: translateY(-50%); pointer-events: none; }
.fd-mobile-input-wrap input { width: 100%; height: 48px; padding: 8px 16px 8px 40px; border: 1px solid var(--fd-outline); border-radius: 12px; outline: 0; color: #000; background: #fff; font: 400 15px/22px Inter, Arial, sans-serif; }
.fd-mobile-input-wrap input:focus { border-color: #000; box-shadow: 0 0 0 1px #000; }
.fd-mobile-input-wrap input::placeholder { color: var(--fd-placeholder); }
.fd-mobile-password-toggle { position: absolute; top: 50%; right: 12px; display: grid; width: 24px; height: 24px; place-items: center; padding: 0; border: 0; color: var(--fd-outline-strong); background: transparent; transform: translateY(-50%); cursor: pointer; }
.fd-mobile-input-wrap input[name="password"] { padding-right: 40px; }
.fd-mobile-remember { display: flex; align-items: center; gap: 12px; margin-top: -8px; color: var(--fd-variant); font: 400 15px/22px Inter, Arial, sans-serif; cursor: pointer; }
.fd-mobile-remember input { width: 20px; height: 20px; margin: 0; border: 1px solid var(--fd-outline); border-radius: 4px; accent-color: #000; }
.fd-mobile-submit-block { margin-top: auto; padding-top: 24px; }
.fd-mobile-submit { display: flex; width: 100%; height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 0; border: 0; border-radius: 12px; color: #fff; background: #000; font: 500 14px/20px Inter, Arial, sans-serif; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.fd-mobile-submit:disabled { opacity: .65; cursor: wait; }
.fd-mobile-terms { margin: 24px 0 0; color: var(--fd-variant); font: 400 13px/22px Inter, Arial, sans-serif; text-align: center; }
.fd-mobile-terms a { color: #000; text-decoration: underline; text-underline-offset: 4px; }
.fd-mobile-message { position: absolute; right: 0; bottom: -20px; left: 0; margin: 0; color: #ba1a1a; font: 500 14px/20px Inter, Arial, sans-serif; text-align: center; }

/* Frame 3: workspace selection. It intentionally has no sidebar. */
.fd-workspace { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; background: var(--fd-background); }
.fd-workspace-topbar { position: sticky; top: 0; z-index: 5; display: flex; width: 100%; height: 64px; align-items: center; justify-content: space-between; padding: 0 40px; border-bottom: 1px solid var(--fd-outline); background: rgba(247, 249, 251, .8); backdrop-filter: blur(12px); }
.fd-workspace-brand { color: #000; font: 800 22px/28px "Hanken Grotesk", Arial, sans-serif; letter-spacing: -.55px; }
.fd-top-actions { display: flex; align-items: center; gap: 24px; }
.fd-global-search-wrap { position: relative; width: 256px; }
.fd-global-search-wrap .fd-material { position: absolute; top: 50%; left: 12px; color: var(--fd-outline-strong); transform: translateY(-50%); font-size: 20px; pointer-events: none; }
.fd-global-search { width: 256px; height: 40px; padding: 8px 16px 8px 40px; border: 1px solid var(--fd-outline); border-radius: 12px; outline: 0; color: #000; background: #fff; font: 400 15px/22px Inter, Arial, sans-serif; }
.fd-top-icon { display: grid; width: 40px; height: 40px; place-items: center; padding: 8px; border: 0; border-radius: 9999px; color: var(--fd-variant); background: transparent; font-size: 22px; cursor: pointer; }
.fd-top-icon:hover { color: #000; background: #eceef0; }
.fd-workspace-main { display: flex; width: 100%; max-width: 1440px; height: calc(100vh - 64px); flex: 1; flex-direction: column; margin: 0 auto; padding: 40px; }
.fd-workspace-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 24px; }
.fd-workspace-heading h1 { margin: 0 0 8px; color: #000; font: 700 32px/38.4px Inter, Arial, sans-serif; letter-spacing: -.8px; }
.fd-workspace-heading p { max-width: 672px; margin: 0; color: var(--fd-variant); font: 400 17px/26px Inter, Arial, sans-serif; }
.fd-sync { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border: 1px solid var(--fd-outline); border-radius: 8px; color: var(--fd-variant); background: #eceef0; font: 500 14px/20px Inter, Arial, sans-serif; white-space: nowrap; }
.fd-sync .fd-material { color: #00201c; font-size: 18px; }
.fd-portal-grid { display: grid; min-height: 0; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.fd-portal-card { position: relative; display: flex; min-height: 0; flex-direction: column; overflow: hidden; padding: 24px; border: 1px solid var(--fd-outline); border-radius: 20px; color: var(--fd-text); background: #fff; text-align: left; }
.fd-portal-card::before { position: absolute; top: -64px; right: -64px; width: 256px; height: 256px; border-radius: 50%; background: #e6e8ea; content: ""; opacity: .2; }
.fd-portal-card > * { position: relative; z-index: 1; }
.fd-portal-card:hover { border-color: var(--fd-outline-strong); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.fd-portal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; }
.fd-portal-title { display: flex; align-items: center; gap: 16px; }
.fd-portal-mark { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; color: #fff; background: #000; font-size: 24px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.fd-portal-title h2 { margin: 0; color: #000; font: 600 22px/28px "Hanken Grotesk", Arial, sans-serif; letter-spacing: -.55px; }
.fd-portal-title p { display: block; margin: 4px 0 0; color: var(--fd-variant); font: 500 14px/20px Inter, Arial, sans-serif; }
.fd-portal-arrow { color: var(--fd-outline); font-size: 24px; }
.fd-portal-content { flex: 1; }
.fd-portal-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0 0 24px; }
.fd-metric { padding: 16px; border: 1px solid var(--fd-outline); border-radius: 8px; background: var(--fd-background); }
.fd-metric-label { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; color: var(--fd-variant); font: 500 14px/20px Inter, Arial, sans-serif; }
.fd-metric-label .fd-material { font-size: 16px; }
.fd-metric-value { color: #000; font: 700 32px/38.4px Inter, Arial, sans-serif; }
.fd-recent { padding-top: 16px; border-top: 1px solid var(--fd-outline); }
.fd-recent-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fd-recent-label, .fd-recent-client { font: 500 14px/20px Inter, Arial, sans-serif; }
.fd-recent-label { color: #000; }
.fd-recent-client { color: var(--fd-variant); }
.fd-chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-chip { display: inline-flex; align-items: center; padding: 4px 12px; border: 1px solid var(--fd-outline); border-radius: 9999px; color: var(--fd-variant); background: #eceef0; font: 500 14px/20px Inter, Arial, sans-serif; }
.fd-portal-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; color: var(--fd-outline-strong); font: 500 14px/20px Inter, Arial, sans-serif; }
.fd-portal-footer strong { color: #000; font-weight: 500; }

@media (min-width: 768px) and (max-width: 1023px) {
  .fd-desktop-login { display: none; }
  .fd-mobile-login { display: flex; width: 100%; min-height: 100vh; align-items: center; justify-content: center; background: #f0f0f0; }
  .fd-mobile-device { width: 390px; height: 844px; border: 12px solid #1a1a1a; border-radius: 40px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }
}
@media (max-width: 767px) {
  .fd-desktop-login { display: none; }
  .fd-mobile-login { display: block; min-height: 100vh; background: #fff; }
  .fd-mobile-device { min-height: 100vh; }
}
@media (max-width: 1023px) {
  .fd-workspace-main { height: auto; min-height: calc(100vh - 64px); }
}
@media (max-width: 767px) {
  .fd-workspace-topbar { padding: 0 16px; }
  .fd-top-actions { gap: 8px; }
  .fd-global-search-wrap { display: none; }
  .fd-workspace-main { padding: 24px 16px; }
  .fd-workspace-heading { align-items: flex-start; flex-direction: column; }
  .fd-workspace-heading h1 { font-size: 26px; line-height: 32px; }
  .fd-portal-grid { grid-template-columns: 1fr; }
  .fd-portal-card { min-height: 520px; }
}