:root {
  --blue: #1677c8;
  --blue-deep: #075d9f;
  --blue-soft: #eaf4fc;
  --orange: #ff8a2b;
  --orange-soft: #fff3e9;
  --ink: #152235;
  --muted: #607086;
  --faint: #8d99a9;
  --line: #dde4eb;
  --line-soft: #edf1f4;
  --canvas: #f5f7f9;
  --surface: #ffffff;
  --green: #1f9d68;
  --green-soft: #eaf8f1;
  --purple: #7957d5;
  --purple-soft: #f1edff;
  --red: #dc4d55;
  --red-soft: #fff0f1;
  --amber: #d79526;
  --amber-soft: #fff8e6;
  --shadow-sm: 0 1px 2px rgba(26, 39, 55, .04), 0 4px 16px rgba(26, 39, 55, .04);
  --shadow-md: 0 16px 40px rgba(28, 43, 61, .1);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--canvas); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button { border: 0; color: inherit; background: none; cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(22, 119, 200, .2); outline-offset: 2px; }
a { color: inherit; }
.ui-icon { width: 18px; height: 18px; flex: none; }
.eyebrow { display: block; color: var(--blue); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.avatar { width: 35px; height: 35px; display: inline-grid; place-items: center; flex: none; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #2c82be, #165883); font-size: 11px; font-weight: 750; }
.primary-button { min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; color: #fff; background: var(--blue); box-shadow: 0 7px 18px rgba(22, 119, 200, .18); font-size: 13px; font-weight: 650; }
.primary-button:hover { background: var(--blue-deep); transform: translateY(-1px); }
.icon-button { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #fff; }

.client-brand { padding: 0; display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.client-brand img { display: block; width: 76px; height: auto; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(27, 55, 72, .08)); }

.portal { min-height: 100vh; }
.portal-header-a { height: 72px; position: sticky; z-index: 30; top: 0; border-bottom: 1px solid rgba(221, 228, 235, .8); background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px); }
.portal-header__inner { width: min(1380px, calc(100% - 48px)); height: 100%; margin: auto; display: flex; align-items: center; gap: 36px; }
.portal-header__inner nav { display: flex; align-items: center; gap: 4px; }
.portal-header__inner .account-button { margin-left: auto; display: flex; align-items: center; gap: 5px; color: var(--faint); }
.portal-header__inner .account-button.is-active { color: var(--blue); }
.portal-header__inner .account-button .ui-icon { width: 13px; transform: rotate(90deg); }
.nav-link, .portal-header__inner nav > button:not(.nav-link) { min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; gap: 7px; border-radius: 9px; color: #35607f; font-size: 13px; font-weight: 550; white-space: nowrap; }
.nav-link .ui-icon, .portal-header__inner nav > button .ui-icon { width: 16px; }
.nav-link:hover, .portal-header__inner nav > button:hover { background: #f3f7fa; }
.nav-link.is-active { color: var(--orange); background: var(--orange-soft); }
.nav-link b { margin-left: auto; min-width: 23px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; color: var(--blue); background: var(--blue-soft); font-size: 10px; }
.portal-main-a { width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 38px 0 80px; }

/* Common page structure */
.page-heading { margin-bottom: 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.page-heading h1 { margin: 7px 0 8px; color: #111d2d; font-size: clamp(27px, 3vw, 38px); line-height: 1.06; letter-spacing: -.04em; }
.page-heading p { max-width: 620px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.heading-meta { min-width: 190px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: #fff; box-shadow: var(--shadow-sm); }
.heading-meta > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; color: var(--green); background: var(--green-soft); }
.heading-meta .ui-icon { width: 15px; }
.heading-meta small, .heading-meta strong { display: block; }
.heading-meta small { color: var(--faint); font-size: 9px; }
.heading-meta strong { margin-top: 3px; font-size: 11px; }

.search-toolbar { padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); }
.search-control { height: 44px; padding: 0 13px; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid #dbe2e8; border-radius: 9px; color: var(--faint); background: #fff; }
.search-control .ui-icon { width: 17px; }
.search-control input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.search-control input::placeholder { color: #99a4b1; }
.search-control kbd { padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--faint); background: #f7f8f9; font-size: 8px; box-shadow: inset 0 -1px rgba(0, 0, 0, .05); }
.filter-button { height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 9px; color: #536477; background: #fff; font-size: 11px; font-weight: 650; }
.filter-button:hover, .filter-button.is-active { color: var(--blue); border-color: #b7d6ec; background: var(--blue-soft); }
.filter-button .ui-icon { width: 16px; }
.filter-button b { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 99px; color: #fff; background: var(--blue); font-size: 9px; }
.quick-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.quick-filters button { min-height: 31px; padding: 0 11px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: #fff; font-size: 10px; font-weight: 550; }
.quick-filters button:hover { color: var(--blue); border-color: #b9d7eb; }
.quick-filters button.is-active { color: #fff; border-color: var(--ink); background: var(--ink); }
.orders-page > .quick-filters { margin-top: 13px; }
.list-header { min-height: 49px; display: flex; align-items: center; justify-content: space-between; color: var(--faint); font-size: 9px; }
.list-header span:last-child { display: flex; align-items: center; gap: 5px; }
.list-header .ui-icon { width: 13px; }

/* Order list A */
.legacy-order-list { display: grid; gap: 10px; }
.order-list-card { min-height: 112px; position: relative; display: grid; grid-template-columns: 6px minmax(250px, 1.2fr) minmax(185px, .8fr) minmax(245px, 1fr) auto; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); cursor: pointer; transition: .18s ease; }
.order-list-card:hover { border-color: #bdd5e6; box-shadow: 0 10px 27px rgba(39, 60, 82, .09); transform: translateY(-1px); }
.order-list-card .status-rail { align-self: stretch; background: #b9c1ca; }
.order-list-card.status-completed .status-rail { background: var(--green); }
.order-list-card.status-paid .status-rail { background: var(--purple); }
.order-list-card.status-progress .status-rail { background: var(--blue); }
.order-list-card.status-cancelled .status-rail { background: var(--red); }
.order-primary, .order-secondary, .order-customer, .order-status { min-width: 0; padding: 17px 20px; }
.order-primary h2 { margin: 7px 0 5px; overflow: hidden; font-size: 14px; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.order-primary p { margin: 0; color: var(--faint); font-size: 9px; }
.order-tags { display: flex; align-items: center; gap: 6px; }
.order-tags > span { color: var(--blue); font-size: 9px; font-weight: 700; letter-spacing: .08em; }
.order-tags .pci-tag { padding: 3px 6px; display: flex; align-items: center; gap: 3px; border-radius: 99px; color: #12805a; background: var(--green-soft); font-size: 8px; letter-spacing: 0; }
.pci-tag .ui-icon { width: 11px; }
.order-secondary { display: grid; gap: 8px; border-left: 1px solid var(--line-soft); }
.order-secondary span { display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.order-secondary .ui-icon { width: 14px; color: var(--faint); }
.order-customer { border-left: 1px solid var(--line-soft); }
.order-customer small, .order-customer strong, .order-customer span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-customer small { color: var(--faint); font-size: 8px; letter-spacing: .1em; }
.order-customer strong { margin-top: 7px; font-size: 11px; }
.order-customer span { margin-top: 5px; color: var(--muted); font-size: 9px; }
.order-status { padding-right: 17px; display: flex; align-items: center; gap: 13px; }
.order-status > .ui-icon { width: 14px; color: var(--faint); }
.status-badge { height: 26px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; font-size: 9px; font-weight: 650; white-space: nowrap; }
.status-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.status-completed { color: #167a54; background: var(--green-soft); }
.status-badge.status-paid { color: #6747c1; background: var(--purple-soft); }
.status-badge.status-pending { color: #6b7580; background: #f0f2f4; }
.status-badge.status-progress { color: #176ba9; background: var(--blue-soft); }
.status-badge.status-cancelled { color: #bd3e46; background: var(--red-soft); }

.filter-drawer fieldset { min-width: 0; margin: 0; padding: 0; display: grid; gap: 4px; border: 0; }
.filter-drawer legend { width: 100%; margin-bottom: 7px; color: var(--faint); font-size: 8px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.filter-drawer fieldset > button { width: 100%; min-height: 32px; padding: 0 8px; display: flex; align-items: center; justify-content: space-between; border-radius: 7px; color: #687789; font-size: 10px; text-align: left; }
.filter-drawer fieldset > button:hover, .filter-drawer fieldset > button.is-active { color: var(--blue); background: var(--blue-soft); }
.filter-drawer fieldset .ui-icon { width: 13px; }
.status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #aab1b8; }
.status-dot.status-completed, i.status-completed, .marker-core.status-completed { background: var(--green); }
.status-dot.status-paid, i.status-paid, .marker-core.status-paid { background: var(--purple); }
.status-dot.status-progress, i.status-progress, .marker-core.status-progress { background: var(--blue); }
.status-dot.status-cancelled, i.status-cancelled, .marker-core.status-cancelled { background: var(--red); }

/* Map */
.map-page { min-width: 0; }
.map-page { width: calc(100vw - 40px); margin-left: calc((min(1380px, calc(100vw - 48px)) - 100vw + 40px) / 2); margin-top: -22px; }
.map-split { height: calc(100vh - 104px); min-height: 650px; display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 12px; }
.illustrated-map { min-height: 420px; position: relative; overflow: hidden; border: 1px solid #dce3df; border-radius: 15px; background: #eef3ed; box-shadow: var(--shadow-sm); }
.illustrated-map > svg { width: 100%; height: 100%; display: block; }
.leaflet-host .leaflet-container, .leaflet-host.leaflet-container { width: 100%; height: 100%; font-family: Inter, sans-serif; }
.leaflet-host .leaflet-control-attribution { color: #718078; font-size: 8px; }
.leaflet-host .leaflet-control-zoom { overflow: hidden; border: 1px solid #d7ddd9; border-radius: 9px; box-shadow: var(--shadow-sm); }
.leaflet-host .leaflet-control-zoom a { color: #334155; border-color: var(--line); }
.map-loading { height: 100%; display: grid; place-items: center; color: var(--faint); background: #eef3ed; font-size: 10px; }
.leaflet-order-marker { width: 19px; height: 19px; display: block; border: 4px solid #fff; border-radius: 50%; background: #98a2aa; box-shadow: 0 3px 8px rgba(24, 40, 31, .35); transition: transform .15s ease; }
.leaflet-order-marker.status-completed { background: var(--green); }.leaflet-order-marker.status-paid { background: var(--purple); }.leaflet-order-marker.status-progress { background: var(--blue); }.leaflet-order-marker.status-cancelled { background: var(--red); }
.leaflet-order-marker.is-focused { transform: scale(1.35); box-shadow: 0 0 0 7px rgba(36, 130, 196, .18), 0 3px 8px rgba(24, 40, 31, .35); }
.leaflet-popup-content strong, .leaflet-popup-content span { display: block; }.leaflet-popup-content strong { margin-bottom: 4px; font-size: 10px; }.leaflet-popup-content span { color: var(--muted); font-size: 9px; }
.map-river { fill: none; stroke: #afd9e3; stroke-width: 20; opacity: .75; }
.map-road { fill: none; stroke: #fff; stroke-width: 16; filter: drop-shadow(0 0 1px #b5bab6); }
.map-road.main { stroke: #fff5de; stroke-width: 22; }
.map-road.minor { stroke-width: 9; }
.map-city circle { fill: none; stroke: #d0d8d0; stroke-width: 3; stroke-dasharray: 6 5; }
.map-city path { fill: none; stroke: #d2d9d2; stroke-width: 3; }
.map-label-main, .map-label { fill: #66736b; font-size: 14px; font-family: Inter, sans-serif; }
.map-label { font-size: 12px; }
.map-marker { cursor: pointer; transition: .2s ease; }
.map-marker:hover, .map-marker.is-focused { transform-box: fill-box; transform-origin: center; scale: 1.25; }
.marker-halo { fill: #fff; stroke: rgba(42, 58, 48, .12); stroke-width: 2; filter: drop-shadow(0 3px 4px rgba(36, 50, 41, .25)); }
.marker-core { fill: #a6afb0; }
.map-controls { position: absolute; top: 14px; left: 14px; display: grid; overflow: hidden; border: 1px solid #d7ddd9; border-radius: 9px; background: #fff; box-shadow: var(--shadow-sm); }
.map-controls button { width: 34px; height: 34px; display: grid; place-items: center; font-size: 19px; }
.map-controls button + button { border-top: 1px solid var(--line); }
.map-attribution { position: absolute; right: 12px; bottom: 9px; color: #7b8980; font-size: 8px; }
.map-side-panel { min-height: 0; padding: 13px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.map-panel-toolbar { display: grid; grid-template-columns: 1fr 43px; gap: 8px; }
.map-panel-toolbar > button { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); }
.status-legend { min-height: 45px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.status-legend span { height: 25px; padding: 0 8px; display: flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 8px; }
.status-legend i { width: 6px; height: 6px; border-radius: 50%; background: #a7afb6; }
.status-legend .status-completed { background: var(--green); }.status-legend .status-paid { background: var(--purple); }
.map-order-scroll { min-height: 0; display: grid; align-content: start; gap: 7px; overflow: auto; scrollbar-width: thin; }
.map-order-card { width: 100%; min-height: 77px; padding: 10px; display: grid; grid-template-columns: 7px minmax(0, 1fr) auto; align-items: start; gap: 8px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; text-align: left; }
.map-order-card:hover, .map-order-card.is-focused { border-color: #a9cee7; background: #f5fafe; box-shadow: inset 3px 0 var(--blue); }
.map-order-card > .status-dot { margin-top: 4px; }
.map-order-card small, .map-order-card strong, .map-order-card div > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-order-card small { color: var(--faint); font-size: 8px; }
.map-order-card strong { margin-top: 5px; font-size: 10px; }
.map-order-card div > span { margin-top: 5px; color: var(--muted); font-size: 8px; }
.map-order-card > b { display: flex; align-items: center; gap: 3px; color: var(--faint); font-size: 8px; font-weight: 500; }
.map-order-card > b .ui-icon { width: 11px; }
.map-side-panel > footer { min-height: 49px; margin-top: 8px; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 8px; }
.pagination { display: flex; gap: 4px; }.pagination button { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px; }.pagination .is-active { color: #fff; border-color: var(--blue); background: var(--blue); }
/* Detail */
.breadcrumbs { margin-bottom: 25px; display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 9px; }.breadcrumbs button { color: var(--blue); }.breadcrumbs .ui-icon { width: 12px; }
.detail-title { display: grid; justify-items: center; text-align: center; }
.detail-title h1 { margin: 7px 0 8px; font-size: 24px; letter-spacing: -.035em; }.siopi-link { display: flex; align-items: center; gap: 5px; color: var(--blue); font-size: 9px; font-weight: 650; text-decoration: none; }.siopi-link.is-disabled { color: var(--faint); pointer-events: none; }.siopi-link .ui-icon { width: 12px; }
.status-select { min-width: 158px; margin-top: 17px; position: relative; z-index: 20; color: #536170; }
.status-select summary { height: 40px; padding: 0 12px; display: grid; grid-template-columns: 15px minmax(0, 1fr) 13px; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 99px; background: #eef1f3; box-shadow: 0 1px 2px rgba(26,39,55,.04); cursor: pointer; list-style: none; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.status-select summary::-webkit-details-marker { display: none; }.status-select summary:hover { border-color: rgba(84,104,124,.15); box-shadow: 0 5px 16px rgba(29,45,63,.09); transform: translateY(-1px); }.status-select[open] summary { border-color: rgba(22,119,200,.22); box-shadow: 0 0 0 4px rgba(22,119,200,.08); }.status-select summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 700; }.status-select summary .ui-icon { width: 13px; }.status-select summary .ui-icon:last-child { transform: rotate(90deg); transition: transform .16s ease; }.status-select[open] summary .ui-icon:last-child { transform: rotate(-90deg); }
.status-select.status-completed summary { color: #147a54; background: var(--green-soft); }.status-select.status-paid summary { color: var(--purple); background: var(--purple-soft); }.status-select.status-progress summary { color: var(--blue); background: var(--blue-soft); }.status-select.status-cancelled summary { color: var(--red); background: var(--red-soft); }.status-select.is-saving summary { opacity: .65; pointer-events: none; }
.status-menu { width: 220px; padding: 6px; position: absolute; top: calc(100% + 8px); left: 50%; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 45px rgba(23,39,57,.16); transform: translateX(-50%); animation: status-menu-in .14s ease-out; }.status-menu button { min-height: 36px; padding: 0 9px; display: grid; grid-template-columns: 9px 1fr 14px; align-items: center; gap: 9px; border-radius: 8px; color: #445469; text-align: left; font-size: 10px; }.status-menu button:hover { color: var(--ink); background: #f5f8fa; }.status-menu button[aria-checked="true"] { color: var(--blue-deep); background: var(--blue-soft); font-weight: 700; }.status-menu button .ui-icon { width: 13px; color: var(--blue); }.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #9ca7b2; }.status-dot.status-progress { background: var(--blue); }.status-dot.status-completed { background: var(--green); }.status-dot.status-paid { background: var(--purple); }.status-dot.status-cancelled { background: var(--red); }
.detail-surface { margin-top: 28px; padding: 27px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(390px, 1fr); gap: 24px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow-sm); }
.detail-information > header { min-height: 55px; margin-bottom: 15px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line-soft); }.detail-information h2, .documents-panel h2 { margin: 0 0 6px; font-size: 18px; letter-spacing: -.025em; }.detail-information > header p { margin: 0; color: var(--faint); font-size: 8px; line-height: 1.45; }.detail-info-list { margin: 0; display: grid; gap: 0; }.detail-info-list > div { min-height: 31px; display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: baseline; gap: 12px; }.detail-info-list dt { color: #445266; font-size: 9px; font-weight: 750; text-transform: uppercase; }.detail-info-list dd { margin: 0; overflow-wrap: anywhere; color: #273547; font-size: 10px; line-height: 1.45; }
.information-source-tabs { padding: 3px; display: flex; gap: 3px; border: 1px solid var(--line); border-radius: 10px; background: #f6f8fa; }.information-source-tabs button { min-height: 32px; padding: 0 9px; display: flex; align-items: center; gap: 6px; border-radius: 7px; color: var(--muted); font-size: 8px; font-weight: 650; white-space: nowrap; }.information-source-tabs button.is-active { color: var(--blue-deep); background: #fff; box-shadow: 0 1px 3px rgba(30,45,60,.09); }.information-source-tabs .ui-icon { width: 13px; }.information-source-tabs button > i { width: 5px; height: 5px; border-radius: 50%; background: #c8d0d7; }.information-source-tabs button > i.is-available { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.source-empty { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 7px; color: var(--faint); text-align: center; }.source-empty .ui-icon { width: 24px; color: #aab6c1; }.source-empty strong { color: var(--muted); font-size: 10px; }.source-empty p { max-width: 290px; margin: 0; font-size: 8px; line-height: 1.55; }
.conclusion-conflict { max-width: 1120px; margin: 22px auto 0; padding: 17px 18px; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 13px; border: 1px solid #ecd69d; border-radius: 14px; background: linear-gradient(135deg, #fffaf0, #fff); box-shadow: 0 8px 24px rgba(83,64,20,.06); }.conflict-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #a36a0b; background: #fff0c8; }.conflict-icon .ui-icon { width: 18px; }.conclusion-conflict h2 { margin: 5px 0 4px; font-size: 14px; }.conclusion-conflict p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.5; }.conclusion-options { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 7px; }.conclusion-options button { min-height: 54px; padding: 8px 10px; display: grid; grid-template-columns: 8px minmax(0,1fr) auto 14px; align-items: center; gap: 8px; border: 1px solid #e4e7e9; border-radius: 10px; color: var(--ink); background: #fff; text-align: left; }.conclusion-options button:hover { border-color: #d2b870; }.conclusion-options button.is-selected { border-color: rgba(22,119,200,.35); background: var(--blue-soft); box-shadow: 0 0 0 3px rgba(22,119,200,.06); }.conclusion-options button > i { width: 7px; height: 7px; border: 2px solid #b7c0c8; border-radius: 50%; }.conclusion-options button.is-selected > i { border-color: var(--blue); background: var(--blue); box-shadow: inset 0 0 0 1px #fff; }.conclusion-options strong, .conclusion-options small { display: block; }.conclusion-options strong { font-size: 9px; }.conclusion-options small { margin-top: 3px; color: var(--faint); font-size: 7px; }.conclusion-options b { font-size: 10px; white-space: nowrap; }.conclusion-options .ui-icon { width: 13px; color: var(--blue); }
.detail-map-card { min-width: 0; position: relative; }.single-map { width: 100%; height: 100%; min-height: 350px; position: relative; overflow: hidden; border: 1px solid #dedfdc; border-radius: 13px; background: #f2f1ed; }.single-map > span { position: absolute; z-index: 500; right: 12px; bottom: 10px; padding: 7px 9px; border-radius: 99px; color: var(--muted); background: rgba(255,255,255,.9); font-size: 8px; box-shadow: var(--shadow-sm); pointer-events: none; }
.coordinate-note { position: absolute; z-index: 900; left: 13px; bottom: 12px; padding: 8px 10px; display: flex; align-items: center; gap: 6px; border-radius: 99px; color: #4f6172; background: rgba(255,255,255,.93); box-shadow: var(--shadow-sm); font-size: 8px; }.coordinate-note.is-pci { color: #147a54; }.coordinate-note.is-missing { color: #9a6816; background: rgba(255,248,230,.95); }.coordinate-note .ui-icon { width: 13px; }
.documents-panel { min-width: 0; grid-column: 1 / -1; padding-top: 5px; }.documents-panel.is-embedded { grid-column: auto; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }.documents-panel > header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }.documents-panel h2 { margin: 5px 0 0; }.documents-panel h2 b { padding: 3px 6px; border-radius: 99px; color: var(--blue); background: var(--blue-soft); font-size: 9px; vertical-align: middle; }.documents-panel > header > div:last-child { display: flex; gap: 6px; }.documents-panel > header button, .upload-button { min-height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fff; font-size: 9px; cursor: pointer; }.documents-panel > header .ui-icon { width: 14px; }.upload-button { color: #fff; border-color: var(--blue); background: var(--blue); }
.document-list { padding: 8px; display: grid; gap: 7px; border-radius: 12px; background: #f6f8fa; }.document-item { min-height: 52px; padding: 7px 9px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid #e7ebee; border-radius: 9px; background: #fff; }.file-type { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 7px; color: var(--blue); background: var(--blue-soft); }.file-type.file-pdf { color: var(--red); background: var(--red-soft); }.file-type.file-xlsx, .file-type.file-xls { color: var(--green); background: var(--green-soft); }.file-type .ui-icon { width: 14px; }.document-item strong, .document-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.document-item strong { font-size: 9px; }.document-item small { margin-top: 4px; color: var(--faint); font-size: 8px; }.document-item > div:last-child { display: flex; gap: 3px; }.document-item a, .document-item button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: var(--muted); text-decoration: none; }.document-item a:hover { color: var(--blue); background: var(--blue-soft); }.document-item button:hover { color: var(--red); background: var(--red-soft); }.document-item button.coordinate-action { color: #16865b; }.document-item button.coordinate-action:hover { color: #0c7049; background: var(--green-soft); }.document-item button.coordinate-action[disabled] { opacity: .55; cursor: wait; }.document-item button.coordinate-action[disabled] .ui-icon { animation: spin .8s linear infinite; }.document-item .ui-icon { width: 14px; }

/* Results */
.results-hero { padding: 26px; display: flex; align-items: end; justify-content: space-between; gap: 30px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }.results-hero h1 { margin: 7px 0 8px; font-size: 31px; letter-spacing: -.04em; }.results-hero p { margin: 0; color: var(--muted); font-size: 11px; }
.result-filters { display: grid; grid-template-columns: 150px 130px 210px; gap: 9px; }.result-filters label > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .06em; }.result-filters select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; outline: 0; color: var(--ink); background: #fff; font-size: 10px; }.result-filters.is-vertical { display: grid; grid-template-columns: 1fr; }.period-card { margin-top: 14px; padding: 19px 21px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); }.period-card span, .period-card strong, .period-card p { display: block; }.period-card span { color: var(--faint); font-size: 8px; font-weight: 750; letter-spacing: .08em; }.period-card strong { margin-top: 7px; font-size: 15px; }.period-card p { margin: 6px 0 0; color: var(--muted); font-size: 9px; }
.result-metrics { margin-top: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }.result-metric { min-height: 160px; padding: 19px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); }.result-metric > span { color: var(--muted); font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }.result-metric > strong { display: block; margin-top: 14px; font-size: 23px; letter-spacing: -.035em; }.result-metric p { min-height: 32px; margin: 12px 0 14px; color: var(--muted); font-size: 9px; line-height: 1.55; }.result-metric small { display: flex; align-items: center; gap: 5px; color: var(--faint); font-size: 8px; }.result-metric small i { width: 5px; height: 5px; border-radius: 50%; background: #a7b0b8; }.result-metric.tone-revenue { background: linear-gradient(145deg, #fff, #f2f7fc); }.result-metric.tone-success small i { background: var(--green); }.result-metric.tone-paid small i { background: var(--purple); }.result-metrics .result-metric:nth-child(5) { grid-column: 1 / 2; }
.results-chart, .company-table { margin-top: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); }.results-chart > header, .company-table > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.results-chart h2, .company-table h2 { margin: 0; font-size: 13px; }.results-chart header p, .company-table header p { margin: 6px 0 0; color: var(--muted); font-size: 9px; }.chart-legend { display: flex; gap: 13px; }.chart-legend span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 8px; }.chart-legend i { width: 8px; height: 8px; border-radius: 2px; }.chart-legend .received, .bars .received { background: #95a4b2; }.chart-legend .completed, .bars .completed { background: var(--blue); }
.chart-area { height: 230px; margin-top: 22px; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 7px; }.chart-y { padding-bottom: 23px; display: flex; flex-direction: column; justify-content: space-between; color: var(--faint); font-size: 8px; text-align: right; }.chart-grid { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(28px, 1fr)); gap: 6px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, var(--line-soft) 0 1px, transparent 1px 33.333%); }.chart-column { min-width: 0; display: grid; grid-template-rows: 1fr 22px; }.bars { min-height: 0; display: flex; align-items: end; justify-content: center; gap: 2px; }.bars i { width: min(12px, 36%); min-height: 3px; border-radius: 3px 3px 0 0; }.chart-column > span { padding-top: 7px; color: var(--faint); font-size: 7px; text-align: center; }
.company-table > header button { padding: 7px 9px; display: flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: 8px; }.company-table > header button .ui-icon { width: 12px; }.company-table__head, .company-table__row { display: grid; grid-template-columns: minmax(250px, 1.5fr) 100px 100px 140px; align-items: center; gap: 10px; }.company-table__head { min-height: 40px; margin-top: 13px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }.company-table__row { min-height: 57px; border-bottom: 1px solid var(--line-soft); font-size: 9px; }.company-table__row > span:first-child { display: flex; align-items: center; gap: 9px; }.company-table__row i { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: var(--blue); background: var(--blue-soft); font-size: 8px; font-style: normal; }.company-table__row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Email integrations */
.integrations-page { max-width: 1160px; margin: 0 auto; }
.integration-summary { min-width: 210px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: var(--shadow-sm); }
.integration-summary > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: var(--green); background: var(--green-soft); }
.integration-summary small, .integration-summary strong, .integration-summary em { display: block; }
.integration-summary small { color: var(--faint); font-size: 8px; font-weight: 750; letter-spacing: .07em; }
.integration-summary strong { margin-top: 2px; font-size: 18px; }
.integration-summary em { color: var(--muted); font-size: 8px; font-style: normal; }
.integration-security-note { margin-bottom: 18px; padding: 14px 16px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 11px; border: 1px solid #cfe9dd; border-radius: 12px; color: #176c4b; background: #f1faf6; }
.integration-security-note > .ui-icon { width: 18px; justify-self: center; }
.integration-security-note strong { display: block; font-size: 10px; }
.integration-security-note p { margin: 4px 0 0; color: #548170; font-size: 9px; }
.integration-security-note > span { padding: 5px 8px; border: 1px solid #c5e4d5; border-radius: 99px; font-size: 8px; font-weight: 750; }
.provider-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.provider-card { min-height: 230px; padding: 21px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.provider-card > header, .provider-card > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.provider-mark, .connection-provider { display: grid; place-items: center; font-weight: 850; }
.provider-mark { width: 43px; height: 43px; border: 1px solid var(--line); border-radius: 12px; font-size: 18px; box-shadow: var(--shadow-sm); }
.provider-google .provider-mark, .connection-provider.provider-google { color: #4285f4; background: #f5f8ff; }
.provider-microsoft .provider-mark, .connection-provider.provider-microsoft { color: #087cbd; background: #eef8fd; }
.provider-readiness { display: inline-flex; align-items: center; gap: 6px; color: var(--amber); font-size: 8px; font-weight: 700; }
.provider-readiness i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.provider-readiness.is-ready { color: var(--green); }
.provider-card h2 { margin: 20px 0 7px; font-size: 18px; }
.provider-card > p { max-width: 460px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.65; }
.provider-card > footer { margin-top: auto; padding-top: 20px; }
.provider-card > footer > span { color: var(--faint); font-size: 9px; }
.provider-card .primary-button { min-height: 39px; font-size: 10px; }
.provider-card .primary-button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.provider-card .primary-button.is-loading .ui-icon { animation: spin .8s linear infinite; }
.integration-section-heading { margin: 28px 0 14px; }
.integration-section-heading h2 { margin: 6px 0 5px; font-size: 18px; }
.integration-section-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.siopi-access-section { margin-bottom: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.siopi-access-section > header { min-height: 82px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line-soft); }
.siopi-access-section h2 { margin: 5px 0 4px; font-size: 16px; }
.siopi-access-section h2 b { padding: 3px 6px; border-radius: 99px; color: var(--blue); background: var(--blue-soft); font-size: 9px; vertical-align: middle; }
.siopi-access-section header p { margin: 0; color: var(--muted); font-size: 9px; }
.siopi-section-status { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 8px; font-weight: 700; white-space: nowrap; }
.siopi-section-status .ui-icon { width: 13px; }
.siopi-section-actions { display: flex; align-items: center; gap: 12px; }
.siopi-add-button { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; color: #fff; background: var(--blue); box-shadow: 0 6px 16px rgba(22,119,200,.18); font-size: 9px; font-weight: 700; white-space: nowrap; transition: transform .16s ease, box-shadow .16s ease; }
.siopi-add-button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(22,119,200,.24); }
.siopi-add-button .ui-icon { width: 13px; }
.siopi-access-list { padding: 0 20px; }
.siopi-access-row { min-height: 78px; display: grid; grid-template-columns: 38px minmax(190px, 1fr) minmax(210px, 1fr) minmax(170px, .8fr); align-items: center; gap: 13px; border-bottom: 1px solid var(--line-soft); }
.siopi-access-row:last-child { border-bottom: 0; }
.siopi-access-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #2685c5, #0b5f99); font-size: 12px; font-weight: 850; }
.siopi-access-row > div strong, .siopi-access-row > div span, .siopi-access-row > div small { display: block; }
.siopi-access-row > div > strong { overflow: hidden; text-overflow: ellipsis; font-size: 9px; white-space: nowrap; }
.siopi-access-row > div > span, .siopi-access-row > div > small { margin-top: 4px; color: var(--faint); font-size: 7px; }
.connections-section { margin-top: 18px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow-sm); }
.connections-section > header { min-height: 78px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line-soft); }
.connections-section h2 { margin: 5px 0 0; font-size: 16px; }
.connections-section > header button, .connection-actions button { min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: #fff; font-size: 8px; font-weight: 650; }
.connections-section button .ui-icon { width: 13px; }
.connections-section button[disabled] { opacity: .45; cursor: wait; }
.connections-list { padding: 0 20px; }
.connection-row { min-height: 88px; position: relative; display: grid; grid-template-columns: 38px minmax(180px, 1fr) minmax(180px, .8fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-soft); }
.connection-row:last-child { border-bottom: 0; }
.connection-row.is-inactive { opacity: .58; }
.connection-provider { width: 38px; height: 38px; border-radius: 10px; font-size: 13px; }
.connection-identity strong, .connection-identity span, .connection-state span, .connection-state small { display: block; }
.connection-identity strong { font-size: 10px; }
.connection-identity span, .connection-state small { margin-top: 5px; color: var(--faint); font-size: 8px; }
.connection-state > span { width: max-content; padding: 5px 8px; border-radius: 99px; color: var(--muted); background: #f1f3f5; font-size: 8px; font-weight: 700; }
.connection-state > span i { width: 5px; height: 5px; margin-right: 5px; display: inline-block; border-radius: 50%; background: currentColor; }
.connection-state > span.is-active { color: var(--green); background: var(--green-soft); }
.connection-state > span.is-attention { color: var(--red); background: var(--red-soft); }
.connection-state > span.is-pending { color: var(--amber); background: var(--amber-soft); }
.connection-actions { display: flex; gap: 6px; }
.connection-actions .disconnect-button { color: var(--red); }
.connection-error { grid-column: 2 / -1; margin: -8px 0 10px; display: flex; align-items: center; gap: 6px; color: var(--red); font-size: 8px; }
.connection-error .ui-icon { width: 12px; }
.connections-empty, .connections-loading { min-height: 190px; padding: 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--faint); text-align: center; }
.connections-empty > .ui-icon { width: 27px; height: 27px; }
.connections-empty strong, .connections-loading strong { margin-top: 11px; color: var(--ink); font-size: 11px; }
.connections-empty p { max-width: 410px; margin: 6px 0 0; font-size: 9px; line-height: 1.55; }
.connections-empty button { margin-top: 13px; padding: 8px 10px; border-radius: 8px; color: #fff; background: var(--blue); font-size: 9px; }
.connections-loading .brand-spinner { width: 31px; height: 31px; margin-bottom: 0; }

/* Drawers and report */
.modal-backdrop { position: fixed; z-index: 2000; inset: 0; display: flex; justify-content: flex-end; background: rgba(18, 31, 44, .36); backdrop-filter: blur(4px); animation: fade-in .16s ease-out; }
.filter-drawer { width: min(405px, 100%); height: 100%; display: grid; grid-template-rows: auto 1fr auto; background: #fff; box-shadow: -20px 0 60px rgba(28, 41, 55, .15); animation: slide-left .22s ease-out; }
.filter-drawer > header { min-height: 83px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.filter-drawer h2 { margin: 6px 0 0; font-size: 18px; }.filter-drawer > header > button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; }.filter-drawer__body { min-height: 0; padding: 20px; display: grid; align-content: start; gap: 24px; overflow: auto; }.filter-drawer fieldset > button { min-height: 38px; padding: 0 10px; }.check-row { padding: 12px; display: grid; grid-template-columns: 17px 26px 1fr; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 10px; }.check-row > span { color: var(--green); }.check-row .ui-icon { width: 16px; }.check-row strong, .check-row small { display: block; }.check-row strong { font-size: 9px; }.check-row small { margin-top: 4px; color: var(--faint); font-size: 8px; }.filter-drawer > footer { padding: 14px 20px; display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }.filter-drawer > footer > button:first-child { padding: 0 12px; color: var(--muted); font-size: 10px; }
.report-backdrop { padding: 30px; align-items: center; justify-content: center; }.report-modal { width: min(1000px, 100%); max-height: calc(100vh - 60px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border-radius: 17px; background: #fff; box-shadow: 0 30px 90px rgba(20, 33, 47, .25); animation: modal-in .2s ease-out; }.report-modal > header { min-height: 94px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }.report-modal h2 { margin: 6px 0 4px; font-size: 21px; }.report-modal header p { margin: 0; color: var(--muted); font-size: 9px; }.report-modal > header > button { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; }.report-modal__body { min-height: 0; padding: 20px 24px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; overflow: auto; }.report-form { display: grid; align-content: start; gap: 12px; }.report-form > label, .form-grid > label { display: grid; gap: 6px; color: var(--muted); font-size: 8px; font-weight: 700; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.report-form input, .report-form select { width: 100%; height: 39px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font-size: 9px; }.report-orders { min-width: 0; margin: 5px 0 0; padding: 0; display: grid; border: 0; }.report-orders legend { width: 100%; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; font-size: 10px; font-weight: 700; }.report-orders legend span { color: var(--faint); font-size: 8px; font-weight: 500; }.report-orders label { min-height: 48px; padding: 7px 6px; display: grid; grid-template-columns: 17px minmax(0, 1fr) auto; align-items: center; gap: 7px; border-bottom: 1px solid var(--line-soft); }.report-orders label.select-all { min-height: 36px; grid-template-columns: 17px 1fr; color: var(--blue); font-size: 8px; font-weight: 650; }.report-orders strong, .report-orders small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.report-orders strong { font-size: 8px; }.report-orders small { margin-top: 4px; color: var(--faint); font-size: 7px; }.report-orders em { color: var(--muted); font-size: 8px; font-style: normal; }.report-preview { min-height: 420px; padding: 15px; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: 12px; background: #f7f9fa; }.report-preview header { display: flex; align-items: center; justify-content: space-between; }.report-preview header strong { display: block; margin-top: 5px; font-size: 11px; }.report-preview header button { padding: 7px 8px; display: flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 7px; background: #fff; font-size: 8px; }.report-preview pre { min-width: 0; margin: 13px 0 0; padding: 13px; overflow: auto; border: 1px solid #e4e8ea; border-radius: 8px; color: #395165; background: #fff; font: 8px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }.report-modal > footer { min-height: 67px; padding: 12px 24px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); }.report-modal > footer > button:first-child { padding: 0 14px; color: var(--muted); font-size: 10px; }.report-modal > footer .primary-button[disabled] { opacity: .45; cursor: not-allowed; }
.status-modal-backdrop { padding: 20px; align-items: center; justify-content: center; }.status-date-modal { width: min(470px, 100%); overflow: hidden; border: 1px solid rgba(221,228,235,.8); border-radius: 18px; background: #fff; box-shadow: 0 30px 90px rgba(20,33,47,.25); animation: modal-in .2s ease-out; }.status-date-modal > header { padding: 22px 22px 18px; display: grid; grid-template-columns: 42px 1fr 34px; align-items: start; gap: 13px; border-bottom: 1px solid var(--line-soft); }.status-modal-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: var(--blue-soft); }.status-modal-icon .ui-icon { width: 19px; }.status-date-modal h2 { margin: 6px 0 5px; font-size: 18px; letter-spacing: -.025em; }.status-date-modal header p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.status-date-modal > header > button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); }.status-date-modal > header > button .ui-icon { width: 14px; }.status-date-modal__body { padding: 22px; }.status-date-modal__body label > span { display: block; margin-bottom: 8px; color: #405168; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .05em; }.status-date-modal__body label > div { height: 48px; padding: 0 13px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: #fbfcfd; transition: border-color .16s ease, box-shadow .16s ease; }.status-date-modal__body label > div:focus-within { border-color: rgba(22,119,200,.5); box-shadow: 0 0 0 4px rgba(22,119,200,.08); background: #fff; }.status-date-modal__body .ui-icon { width: 16px; color: var(--blue); }.status-date-modal__body input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; font-weight: 650; }.status-date-modal__body small { margin-top: 8px; display: block; color: var(--faint); font-size: 8px; }.status-date-modal > footer { padding: 14px 22px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line-soft); background: #fbfcfd; }.status-date-modal > footer > button:first-child { min-height: 40px; padding: 0 13px; color: var(--muted); font-size: 10px; }.status-date-modal > footer .primary-button { min-height: 40px; font-size: 10px; }.status-date-modal > footer .primary-button .ui-icon { width: 14px; }.status-date-modal > footer .primary-button[disabled] .ui-icon { animation: spin .8s linear infinite; }
.siopi-access-backdrop { padding: 20px; align-items: center; justify-content: center; }
.siopi-access-modal { width: min(620px, 100%); overflow: hidden; border: 1px solid rgba(221,228,235,.8); border-radius: 18px; background: #fff; box-shadow: 0 30px 90px rgba(20,33,47,.25); animation: modal-in .2s ease-out; }
.siopi-access-modal > header { padding: 22px 24px 18px; display: grid; grid-template-columns: 42px 1fr 34px; align-items: start; gap: 13px; border-bottom: 1px solid var(--line-soft); }
.siopi-modal-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: var(--blue); background: var(--blue-soft); }
.siopi-modal-icon .ui-icon { width: 19px; }
.siopi-access-modal h2 { margin: 6px 0 5px; font-size: 18px; letter-spacing: -.025em; }
.siopi-access-modal header p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.siopi-access-modal > header > button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); }
.siopi-access-modal > header > button .ui-icon { width: 14px; }
.siopi-access-modal__body { padding: 22px 24px; display: grid; gap: 15px; }
.siopi-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.siopi-access-modal__body label { display: grid; gap: 7px; color: #405168; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .045em; }
.siopi-access-modal__body input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; outline: 0; color: var(--ink); background: #fbfcfd; font-size: 10px; font-weight: 550; text-transform: none; letter-spacing: normal; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease; }
.siopi-access-modal__body input:focus { border-color: rgba(22,119,200,.52); box-shadow: 0 0 0 4px rgba(22,119,200,.08); background: #fff; }
.siopi-email-field small { color: var(--faint); font-size: 8px; font-weight: 500; line-height: 1.45; text-transform: none; letter-spacing: normal; }
.siopi-credential-note { padding: 12px 13px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 9px; border: 1px solid #cfe9dd; border-radius: 10px; color: #176c4b; background: #f1faf6; }
.siopi-credential-note > .ui-icon { width: 15px; justify-self: center; }
.siopi-credential-note strong { display: block; font-size: 9px; }
.siopi-credential-note p { margin: 3px 0 0; color: #548170; font-size: 8px; line-height: 1.45; }
.siopi-access-modal > footer { padding: 14px 24px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; border-top: 1px solid var(--line-soft); background: #fbfcfd; }
.siopi-access-modal > footer > button:first-child { min-height: 40px; padding: 0 13px; color: var(--muted); font-size: 10px; }
.siopi-access-modal > footer .primary-button { min-height: 40px; font-size: 10px; }
.siopi-access-modal > footer .primary-button .ui-icon { width: 14px; }
.siopi-access-modal > footer .primary-button.is-loading .ui-icon { animation: spin .8s linear infinite; }

/* Feedback and states */
.client-toast { min-width: 300px; max-width: 420px; min-height: 63px; padding: 11px 14px; position: fixed; z-index: 2200; right: 20px; bottom: 20px; display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 10px; border: 1px solid #dce5e0; border-radius: 12px; background: #fff; box-shadow: var(--shadow-md); animation: toast-in .22s ease-out; }.client-toast > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: var(--green-soft); }.client-toast .ui-icon { width: 15px; }.client-toast strong, .client-toast small { display: block; }.client-toast strong { font-size: 10px; }.client-toast small { margin-top: 5px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.client-loading, .client-error { min-height: 65vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.brand-spinner { width: 41px; height: 41px; margin-bottom: 15px; display: block; border: 3px solid #dcebf5; border-top-color: var(--orange); border-radius: 50%; animation: spin .8s linear infinite; }.client-loading strong { font-size: 13px; }.client-loading small { margin-top: 6px; color: var(--faint); font-size: 9px; }.client-error > .ui-icon { width: 32px; height: 32px; color: var(--red); }.client-error h1 { margin: 15px 0 7px; font-size: 20px; }.client-error p { margin: 0; color: var(--muted); font-size: 10px; }.client-error button, .empty-orders button { margin-top: 15px; padding: 9px 12px; border-radius: 8px; color: #fff; background: var(--blue); font-size: 9px; }.empty-orders { min-height: 280px; grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--faint); text-align: center; }.empty-orders > .ui-icon { width: 25px; height: 25px; }.empty-orders strong { margin-top: 11px; color: var(--ink); font-size: 12px; }.empty-orders span { margin-top: 6px; font-size: 9px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes slide-left { from { transform: translateX(25px); opacity: 0; } }
@keyframes modal-in { from { transform: translateY(12px) scale(.985); opacity: 0; } }
@keyframes status-menu-in { from { transform: translate(-50%, -4px) scale(.98); opacity: 0; } }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 1180px) {
  .order-list-card { grid-template-columns: 6px minmax(240px, 1.2fr) minmax(210px, 1fr) auto; }
  .order-secondary { display: none; }
  .result-metrics { grid-template-columns: repeat(3, 1fr); }
  .result-metrics .result-metric:nth-child(5) { grid-column: auto; }
  .result-filters { grid-template-columns: 125px 105px 170px; }
}

@media (max-width: 960px) {
  .portal-main-a { width: min(100% - 30px, 1380px); }.portal-header__inner { width: calc(100% - 30px); }
  .portal-header__inner { gap: 18px; }.portal-header__inner nav > button:last-child { display: none; }
  .order-list-card { grid-template-columns: 6px minmax(230px, 1fr) minmax(210px, .8fr) auto; }.order-customer { display: none; }
  .map-split { grid-template-columns: minmax(0, 1fr) 370px; }.map-page { width: 100%; margin-left: 0; }
  .detail-surface { grid-template-columns: 1fr; }.detail-map-card { min-height: 380px; }
  .results-hero { align-items: start; flex-direction: column; }.result-metrics { grid-template-columns: repeat(2, 1fr); }
  .connection-row { grid-template-columns: 38px minmax(160px, 1fr) minmax(160px, .8fr); }.connection-actions { grid-column: 2 / -1; padding-bottom: 12px; }
  .siopi-access-row { grid-template-columns: 38px minmax(160px, 1fr) minmax(180px, 1fr); }.siopi-access-row .connection-state { grid-column: 2 / -1; padding-bottom: 12px; }
}

@media (max-width: 720px) {
  .portal-header-a { height: auto; }.portal-header__inner { min-height: 64px; flex-wrap: wrap; gap: 10px; padding: 10px 0; }.portal-header__inner nav { width: 100%; order: 3; overflow-x: auto; }.portal-header__inner .account-button { position: absolute; right: 15px; top: 14px; }.portal-main-a { padding-top: 24px; }
  .page-heading { align-items: flex-start; flex-direction: column; }.heading-meta { display: none; }
  .search-toolbar { grid-template-columns: 1fr; }.filter-button { justify-content: center; }.search-control kbd { display: none; }
  .list-header span:last-child { display: none; }.order-list-card { grid-template-columns: 6px minmax(0, 1fr) auto; }.order-status { padding-left: 5px; }.order-status > .ui-icon { display: none; }
  .map-split { height: auto; display: grid; grid-template-columns: 1fr; }.map-split .illustrated-map { height: 48vh; min-height: 350px; }.map-side-panel { height: 540px; }
  .detail-title h1 { font-size: 18px; }.detail-surface { padding: 16px; }.detail-info-list > div { grid-template-columns: 115px 1fr; }.documents-panel > header { align-items: flex-start; flex-direction: column; }.documents-panel > header button span, .upload-button span { display: none; }
  .result-filters { width: 100%; max-width: none; grid-template-columns: 1fr 1fr; }.result-filters label:last-child { grid-column: 1 / -1; }.result-metrics { grid-template-columns: 1fr 1fr; }.results-chart, .company-table { padding: 14px; }.company-table { overflow-x: auto; }.company-table__head, .company-table__row { min-width: 670px; }
  .report-backdrop { padding: 10px; }.report-modal { max-height: calc(100vh - 20px); }.report-modal__body { grid-template-columns: 1fr; }.report-preview { min-height: 300px; }.report-modal > header, .report-modal__body, .report-modal > footer { padding-right: 15px; padding-left: 15px; }
  .client-toast { right: 12px; bottom: 12px; left: 12px; min-width: 0; }
  .provider-grid { grid-template-columns: 1fr; }.integration-security-note { grid-template-columns: 28px 1fr; }.integration-security-note > span { display: none; }.connection-row { padding: 14px 0; grid-template-columns: 38px minmax(0, 1fr); }.connection-state, .connection-actions { grid-column: 2; }.connection-actions { padding-bottom: 0; }.integration-summary { width: 100%; }
  .siopi-access-section > header { align-items: flex-start; flex-direction: column; }.siopi-section-actions { width: 100%; justify-content: space-between; }.siopi-access-row { padding: 14px 0; grid-template-columns: 38px minmax(0, 1fr); }.siopi-access-row > div, .siopi-access-row .connection-state { grid-column: 2; padding-bottom: 0; }
  .siopi-access-backdrop { padding: 10px; }.siopi-access-modal { max-height: calc(100vh - 20px); overflow-y: auto; }.siopi-form-grid { grid-template-columns: 1fr; }.siopi-access-modal > header, .siopi-access-modal__body, .siopi-access-modal > footer { padding-right: 16px; padding-left: 16px; }
}

@media (max-width: 470px) {
  .portal-main-a { width: calc(100% - 20px); }.portal-header__inner { width: calc(100% - 20px); }
  .nav-link { padding: 0 9px; }.nav-link span { font-size: 10px; }
  .order-list-card { min-height: 104px; }.order-primary { padding: 14px 11px; }.order-primary h2 { font-size: 11px; }.order-status { padding-right: 9px; }.status-badge { padding: 0 7px; font-size: 8px; }.status-badge i { display: none; }
  .result-metrics { grid-template-columns: 1fr; }.result-filters { grid-template-columns: 1fr; }.result-filters label:last-child { grid-column: auto; }
  .document-item { grid-template-columns: 29px minmax(0, 1fr) auto; }.document-item > div:last-child button { display: none; }
  .detail-info-list > div { min-height: 40px; grid-template-columns: 1fr; gap: 2px; }.detail-info-list dt { font-size: 8px; }
  .form-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Authenticated portal shell */
.account-shell { position: relative; margin-left: auto; }
.account-copy { min-width: 0; text-align: left; }
.account-copy strong, .account-copy small { max-width: 150px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { color: var(--ink); font-size: 10px; font-weight: 750; }
.account-copy small { margin-top: 2px; color: var(--faint); font-size: 8px; }
.account-shell .account-button { margin-left: 0; padding: 5px 7px 5px 5px; border: 1px solid transparent; border-radius: 10px; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.account-shell .account-button:hover, .account-shell .account-button.is-active { border-color: var(--line); background: #fff; box-shadow: 0 8px 28px rgba(29, 53, 75, .09); }
.account-shell .account-button > .ui-icon { transition: transform .18s ease; }
.account-shell .account-button.is-active > .ui-icon { transform: rotate(270deg); }
.account-menu { width: 260px; padding: 7px; position: absolute; z-index: 80; top: calc(100% + 10px); right: 0; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.97); box-shadow: 0 24px 60px rgba(30, 49, 67, .16); backdrop-filter: blur(18px); animation: account-in .2s cubic-bezier(.2,.8,.2,1); }
.account-menu::before { content: ""; width: 10px; height: 10px; position: absolute; right: 17px; top: -6px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: #fff; transform: rotate(45deg); }
.account-menu header { padding: 10px 9px 12px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 9px; border-bottom: 1px solid var(--line-soft); }
.account-menu header .avatar { width: 34px; height: 34px; }
.account-menu header strong, .account-menu header small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu header strong { color: var(--ink); font-size: 10px; }
.account-menu header small { margin-top: 4px; color: var(--faint); font-size: 8px; }
.account-menu > button, .account-menu__link { width: 100%; min-height: 38px; padding: 0 9px; display: flex; align-items: center; gap: 9px; border-radius: 8px; color: var(--muted); background: transparent; font-size: 9px; text-align: left; text-decoration: none; transition: color .14s ease, background .14s ease; }
.account-menu > button:hover, .account-menu__link:hover { color: var(--ink); background: #f4f7f9; }
.account-menu > button .ui-icon, .account-menu__link .ui-icon { width: 14px; }
.account-menu .account-menu__logout { margin-top: 4px; border-top: 1px solid var(--line-soft); border-radius: 0 0 8px 8px; color: var(--red); }

/* Login */
.auth-page { --auth-blue: #0c6fb8; --auth-orange: #ff8a1f; min-height: 100vh; position: relative; isolation: isolate; overflow: hidden; color: #10273a; background: #f3f7fa; }
.auth-page::before { content: ""; position: absolute; z-index: -3; inset: 0; background-image: linear-gradient(rgba(32,81,113,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(32,81,113,.045) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(to bottom, #000, transparent 86%); }
.auth-page::after { content: ""; width: min(70vw, 900px); aspect-ratio: 1; position: absolute; z-index: -2; left: -18%; top: -42%; border-radius: 50%; background: radial-gradient(circle, rgba(18,130,200,.18), rgba(18,130,200,.04) 45%, transparent 68%); filter: blur(12px); }
.auth-ambient { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); opacity: .65; }
.auth-ambient--one { width: 360px; height: 360px; right: -160px; top: 18%; background: radial-gradient(circle, rgba(255,138,31,.16), transparent 68%); animation: auth-float 9s ease-in-out infinite; }
.auth-ambient--two { width: 420px; height: 420px; left: 42%; bottom: -300px; background: radial-gradient(circle, rgba(12,111,184,.16), transparent 70%); animation: auth-float 11s ease-in-out -3s infinite reverse; }
.auth-brand { height: 76px; width: min(1180px, calc(100% - 48px)); margin: auto; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; animation: auth-down .55s cubic-bezier(.2,.8,.2,1); }
.auth-brand .brand-lockup { margin: 0; }
.auth-brand .brand-lockup img { width: 91px; }
.auth-brand > span:last-child { padding-left: 12px; border-left: 1px solid #cfdae3; color: #718594; font-size: 10px; font-weight: 650; letter-spacing: .04em; }
.auth-layout { width: min(1120px, calc(100% - 48px)); min-height: calc(100vh - 140px); margin: auto; padding: 40px 0 80px; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(380px,.75fr); align-items: center; gap: clamp(50px,8vw,120px); }
.auth-story { max-width: 570px; animation: auth-up .68s .05s both cubic-bezier(.2,.8,.2,1); }
.auth-kicker { display: inline-flex; align-items: center; gap: 8px; color: #527287; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.auth-kicker i { width: 7px; height: 7px; position: relative; border-radius: 50%; background: #24ad70; box-shadow: 0 0 0 5px rgba(36,173,112,.1); }
.auth-kicker i::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(36,173,112,.42); border-radius: inherit; animation: auth-pulse 2s ease-out infinite; }
.auth-story h1 { margin: 22px 0 20px; color: #102a3d; font-size: clamp(43px,5vw,68px); font-weight: 770; line-height: .99; letter-spacing: -.055em; }
.auth-story h1 em { color: var(--auth-blue); font-style: normal; }
.auth-story > p { max-width: 500px; margin: 0; color: #637d8e; font-size: 16px; line-height: 1.75; }
.auth-flow { max-width: 500px; margin-top: 38px; position: relative; display: grid; gap: 10px; }
.auth-flow__rail { width: 1px; position: absolute; left: 20px; top: 20px; bottom: 20px; overflow: hidden; background: #d8e3ea; }
.auth-flow__rail i { width: 100%; height: 45%; display: block; background: linear-gradient(var(--auth-blue), var(--auth-orange)); animation: auth-rail 3.2s ease-in-out infinite; }
.auth-flow > span:not(.auth-flow__rail) { min-height: 48px; padding: 0 12px 0 0; position: relative; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; border: 1px solid rgba(199,215,225,.74); border-radius: 13px; background: rgba(255,255,255,.6); box-shadow: 0 8px 30px rgba(30,67,92,.035); backdrop-filter: blur(10px); animation: auth-item-in .55s var(--delay) both cubic-bezier(.2,.8,.2,1); }
.auth-flow > span > .ui-icon { width: 15px; margin: auto; position: relative; color: var(--auth-blue); }
.auth-flow > span b { font-size: 10px; }
.auth-flow > span small { color: #78909f; font-size: 8px; }
.login-card { padding: 28px; border: 1px solid rgba(204,218,227,.82); border-radius: 24px; background: rgba(255,255,255,.86); box-shadow: 0 30px 90px rgba(29,65,89,.14), inset 0 1px rgba(255,255,255,.8); backdrop-filter: blur(24px); animation: auth-card-in .72s .12s both cubic-bezier(.2,.8,.2,1); }
.login-card > header { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; }
.auth-card-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(12,111,184,.15); border-radius: 14px; color: var(--auth-blue); background: linear-gradient(145deg, rgba(12,111,184,.1), rgba(12,111,184,.03)); box-shadow: inset 0 1px rgba(255,255,255,.8); }
.auth-card-mark .ui-icon { width: 20px; }
.login-card > header small { color: var(--auth-blue); font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.login-card > header h2 { margin: 5px 0 5px; color: #173247; font-size: 21px; letter-spacing: -.025em; }
.login-card > header p { margin: 0; color: #7b909e; font-size: 9px; }
.login-card form { margin-top: 26px; display: grid; gap: 15px; }
.login-card form > label { display: grid; gap: 7px; }
.login-card form > label > span { color: #49677a; font-size: 9px; font-weight: 750; }
.login-card form > label > div { height: 48px; padding: 0 13px; display: flex; align-items: center; gap: 10px; border: 1px solid #d8e2e8; border-radius: 12px; background: rgba(248,251,252,.86); transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; }
.login-card form > label > div:focus-within { border-color: rgba(12,111,184,.5); background: #fff; box-shadow: 0 0 0 4px rgba(12,111,184,.08); transform: translateY(-1px); }
.login-card form > label .ui-icon { width: 16px; color: #7691a2; }
.login-card input { min-width: 0; flex: 1; border: 0; outline: 0; color: #183247; background: transparent; font-size: 11px; }
.login-card input::placeholder { color: #a5b5bf; }
.login-options { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #7a919f; font-size: 8px; }
.login-options > label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.login-options input { width: 0; height: 0; position: absolute; opacity: 0; }
.login-options label i { width: 16px; height: 16px; display: grid; place-items: center; border: 1px solid #ccd9e1; border-radius: 5px; background: #fff; transition: .16s ease; }
.login-options input:checked + i { border-color: var(--auth-blue); background: var(--auth-blue); box-shadow: inset 0 0 0 3px #fff; }
.login-error { min-height: 40px; padding: 9px 11px; display: flex; align-items: center; gap: 9px; border: 1px solid #f1ced0; border-radius: 10px; color: #b83b43; background: #fff5f5; font-size: 9px; line-height: 1.45; animation: auth-shake .35s ease; }
.login-error .ui-icon { width: 15px; flex: 0 0 auto; }
.login-submit { height: 48px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 12px; color: #fff; background: linear-gradient(115deg, #0c6fb8, #0787ca); box-shadow: 0 13px 28px rgba(12,111,184,.22); font-size: 10px; font-weight: 750; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.login-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(12,111,184,.28); filter: saturate(1.08); }
.login-submit:active:not(:disabled) { transform: translateY(0); }
.login-submit:disabled { opacity: .72; cursor: wait; }
.login-submit .ui-icon { width: 16px; transition: transform .18s ease; }
.login-submit:hover .ui-icon { transform: translateX(3px); }
.login-spinner { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.login-card > footer { margin-top: 22px; padding-top: 18px; display: flex; align-items: center; justify-content: center; gap: 7px; border-top: 1px solid #e7edf1; color: #8295a2; font-size: 8px; }
.login-card > footer a { display: inline-flex; align-items: center; gap: 4px; color: var(--auth-blue); font-weight: 750; text-decoration: none; }
.login-card > footer .ui-icon { width: 12px; }
.auth-footer { height: 58px; padding: 0 24px; position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; color: #879ba8; font-size: 8px; }
.auth-footer span:last-child { display: flex; align-items: center; gap: 7px; }
.auth-footer i { width: 6px; height: 6px; border-radius: 50%; background: #27ad71; box-shadow: 0 0 0 4px rgba(39,173,113,.1); }
.auth-page--loading { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.auth-page--loading strong { margin-top: 23px; color: #19364b; font-size: 12px; }
.auth-page--loading small { margin-top: 6px; color: #78909e; font-size: 9px; }
.auth-orbit { width: 58px; height: 58px; position: relative; display: block; border: 1px solid rgba(12,111,184,.15); border-radius: 50%; animation: spin 3s linear infinite; }
.auth-orbit i { width: 8px; height: 8px; position: absolute; border-radius: 50%; background: var(--auth-blue); box-shadow: 0 0 14px rgba(12,111,184,.45); }
.auth-orbit i:first-child { left: 4px; top: 10px; }
.auth-orbit i:nth-child(2) { right: 3px; bottom: 12px; background: var(--auth-orange); }
.auth-orbit b { width: 16px; height: 16px; position: absolute; inset: 0; margin: auto; border-radius: 6px; background: linear-gradient(145deg, var(--auth-blue), #0d8bce); box-shadow: 0 6px 15px rgba(12,111,184,.25); }

@keyframes account-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes auth-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes auth-down { from { opacity: 0; transform: translateY(-14px); } }
@keyframes auth-card-in { from { opacity: 0; transform: translateY(24px) scale(.975); } }
@keyframes auth-item-in { from { opacity: 0; transform: translateX(-12px); } }
@keyframes auth-pulse { 0% { opacity: .65; transform: scale(.65); } 80%,100% { opacity: 0; transform: scale(1.8); } }
@keyframes auth-rail { 0% { transform: translateY(-100%); } 50%,100% { transform: translateY(240%); } }
@keyframes auth-float { 50% { transform: translate3d(-18px, 24px, 0) scale(1.06); } }
@keyframes auth-shake { 25% { transform: translateX(-4px); } 55% { transform: translateX(3px); } 80% { transform: translateX(-2px); } }

@media (max-width: 860px) {
  .auth-layout { grid-template-columns: 1fr; align-content: center; gap: 40px; padding-top: 20px; }
  .auth-story { margin: auto; text-align: center; }
  .auth-story h1 { font-size: clamp(40px,9vw,58px); }
  .auth-story > p { margin-inline: auto; }
  .auth-flow { display: none; }
  .login-card { width: min(460px,100%); margin: auto; }
}

@media (max-width: 560px) {
  .auth-brand, .auth-layout { width: calc(100% - 28px); }
  .auth-brand > span:last-child { display: none; }
  .auth-layout { padding-top: 0; }
  .auth-story h1 { margin-top: 15px; font-size: 38px; }
  .auth-story > p { font-size: 13px; }
  .login-card { padding: 22px 18px; border-radius: 19px; }
  .login-options > span { display: none; }
  .auth-footer { justify-content: center; }
  .auth-footer span:last-child { display: none; }
  .account-copy { display: none; }
}