:root {
  color-scheme: dark;
  --canvas: #06142f;
  --canvas-deep: #030c21;
  --surface: rgba(9, 27, 63, 0.7);
  --surface-hover: rgba(14, 36, 82, 0.88);
  --text: #f8faff;
  --muted: #b5bfd8;
  --line: rgba(130, 151, 220, 0.48);
  --violet: #7557ff;
  --violet-light: #9a86ff;
  --mint: #36d89a;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--canvas); }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  background: radial-gradient(circle at 51% 41%, rgba(52, 90, 166, 0.15), transparent 32rem), linear-gradient(145deg, var(--canvas-deep) 0%, var(--canvas) 53%, #04102b 100%);
}
body::before, body::after {
  content: "";
  position: fixed;
  z-index: 0;
  width: 270px;
  height: 270px;
  pointer-events: none;
  opacity: 0.7;
  background-image: radial-gradient(circle, rgba(117, 87, 255, 0.72) 1.6px, transparent 1.8px);
  background-size: 18px 18px;
  mask-image: linear-gradient(135deg, #000, transparent 74%);
}
body::before { top: 88px; right: -54px; transform: rotate(180deg); }
body::after { left: -60px; bottom: -58px; }
.topbar {
  position: relative;
  z-index: 2;
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(24px, 4vw, 56px);
  border-bottom: 1px solid rgba(100, 124, 199, 0.23);
  background: rgba(3, 12, 33, 0.54);
  backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: 14px; color: var(--text); font-size: 24px; font-weight: 800; letter-spacing: 0.16em; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; color: var(--violet); }
.brand-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.portal-label { color: #9ca9c8; font-size: 13px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; }
.account-area { display: flex; align-items: center; gap: 16px; }
.account-name { color: #c9d2e9; font-size: 14px; font-weight: 650; }
.account-area form { margin: 0; }
.logout-button { min-height: 40px; padding: 0 17px; border: 1px solid rgba(154, 134, 255, 0.46); border-radius: 9px; color: var(--text); background: rgba(117, 87, 255, 0.12); font: 700 13px/1 inherit; cursor: pointer; }
.logout-button:hover, .logout-button:focus-visible { border-color: var(--violet-light); background: rgba(117, 87, 255, 0.24); outline: none; }
main { position: relative; z-index: 1; padding: 70px 24px 44px; }
.launcher { width: min(1120px, 100%); margin: 0 auto; }
.heading-block { margin-bottom: 42px; text-align: center; }
.heading-block h1 { margin: 0; font-size: clamp(38px, 5vw, 58px); line-height: 1.05; letter-spacing: -0.045em; }
.heading-line { display: block; width: 58px; height: 5px; margin: 23px auto 0; border-radius: 999px; background: var(--violet); box-shadow: 0 0 18px rgba(117, 87, 255, 0.44); }
.app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.app-card {
  min-width: 0;
  min-height: 486px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 46px 40px 38px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: linear-gradient(150deg, rgba(12, 31, 71, 0.86), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 22px 50px rgba(0, 5, 22, 0.23);
  text-align: center;
  text-decoration: none;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.app-card:hover, .app-card:focus-visible { transform: translateY(-5px); border-color: rgba(154, 134, 255, 0.88); background: linear-gradient(150deg, rgba(18, 42, 92, 0.94), var(--surface-hover)); box-shadow: 0 26px 64px rgba(0, 5, 22, 0.34), 0 0 0 4px rgba(117, 87, 255, 0.1); outline: none; }
.app-visual { width: 180px; height: 150px; display: grid; place-items: center; margin-bottom: 17px; }
.app-visual svg { width: 100%; height: 100%; overflow: visible; }
.listing-visual svg { fill: rgba(248, 250, 255, 0.94); stroke: var(--violet-light); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.listing-visual .soft { fill: #dfe7fb; stroke: #cbd5f1; stroke-width: 6; }
.listing-visual .accent { fill: none; stroke: var(--mint); }
.listing-visual .ai-chip { fill: var(--violet); stroke: none; }
.listing-visual text { fill: white; stroke: none; font: 800 26px Inter, sans-serif; }
.fulfillo-visual svg { stroke-linecap: round; stroke-linejoin: round; }
.parcel-top { fill: #aa98ff; }
.parcel-left { fill: #7557ff; }
.parcel-right { fill: #8b73ff; }
.route { fill: none; stroke: var(--violet); stroke-width: 4; }
.report { fill: #f8faff; stroke: #d7dff4; stroke-width: 2; }
.chart { fill: none; stroke: var(--mint); stroke-width: 4; }
.mint { fill: var(--mint); }
.app-copy { display: grid; gap: 14px; min-height: 92px; align-content: start; }
.app-copy strong { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.035em; }
.app-copy > span { color: var(--muted); font-size: 17px; line-height: 1.5; }
.fulfillo-copy img { width: min(245px, 75%); height: 49px; margin: 0 auto; object-fit: contain; }
.open-button { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: auto; border-radius: 10px; color: white; background: linear-gradient(135deg, #6846f4, #7656ff 58%, #6447ef); box-shadow: 0 12px 30px rgba(66, 40, 185, 0.26); font-size: 18px; font-weight: 750; }
.open-button span { font-size: 29px; font-weight: 400; transition: transform 180ms ease; }
.app-card:hover .open-button span { transform: translateX(5px); }
footer { position: relative; z-index: 1; display: flex; justify-content: center; gap: 10px; padding: 18px 24px 34px; color: #818eae; font-size: 13px; }
.login-body { display: flex; flex-direction: column; }
.login-topbar { width: 100%; }
.login-main { width: 100%; flex: 1; display: grid; place-items: center; padding-block: 56px; }
.login-card { width: min(440px, 100%); padding: 42px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(150deg, rgba(12, 31, 71, 0.94), rgba(9, 27, 63, 0.84)); box-shadow: 0 26px 70px rgba(0, 5, 22, 0.34); }
.login-mark { width: 48px; height: 48px; margin-bottom: 24px; color: var(--violet); }
.login-mark svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.login-card h1 { margin: 0; font-size: 34px; line-height: 1.08; letter-spacing: -0.04em; }
.login-card > p { margin: 13px 0 30px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.login-card form { display: grid; gap: 19px; }
.login-card label { display: grid; gap: 8px; color: #dfe5f6; font-size: 13px; font-weight: 700; }
.login-card input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid rgba(130, 151, 220, 0.55); border-radius: 9px; color: var(--text); background: rgba(3, 12, 33, 0.72); font: 550 16px/1 inherit; outline: none; }
.login-card input:focus { border-color: var(--violet-light); box-shadow: 0 0 0 4px rgba(117, 87, 255, 0.13); }
.login-error { min-height: 20px; margin: -4px 0 0; color: #ffaaa9; font-size: 13px; line-height: 1.45; }
.login-error:empty { visibility: hidden; }
.login-button { min-height: 54px; border: 0; border-radius: 9px; color: white; background: linear-gradient(135deg, #6846f4, #7656ff 58%, #6447ef); box-shadow: 0 12px 30px rgba(66, 40, 185, 0.28); font: 750 16px/1 inherit; cursor: pointer; }
.login-button:hover, .login-button:focus-visible { filter: brightness(1.08); outline: 3px solid rgba(154, 134, 255, 0.28); }
@media (max-width: 760px) {
  .topbar { min-height: 72px; padding-inline: 20px; }
  .brand { font-size: 19px; gap: 10px; }
  .brand-mark { width: 32px; height: 32px; }
  .portal-label, .account-name { display: none; }
  main { padding: 48px 17px 24px; }
  .heading-block { margin-bottom: 30px; }
  .heading-block h1 { font-size: 36px; }
  .app-grid { grid-template-columns: 1fr; gap: 16px; }
  .app-card { min-height: 420px; padding: 34px 25px 26px; }
  .app-visual { transform: scale(0.88); margin-block: -8px 4px; }
  .app-copy strong { font-size: 29px; }
  .app-copy > span { font-size: 15px; }
  footer { flex-wrap: wrap; padding-bottom: 28px; }
  .login-main { padding: 34px 17px; }
  .login-card { padding: 31px 24px; }
  .login-card h1 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .app-card, .open-button span { transition: none; } }