.portal { background: radial-gradient(ellipse at 10% 0%,#dfeef7 0,transparent 52%),radial-gradient(ellipse at 95% 45%,#e5f1f7 0,transparent 48%),#f2f7fa; color:#1b364b; }
.portal [hidden] { display:none !important; }
.portal button,.portal input,.portal select { font:inherit; }
.portal button,.portal a { touch-action:manipulation; }
.portal button { cursor:pointer; }
.portal button:disabled { cursor:default; }
.portal-header .management-link { color:#668192; text-decoration:none; font-size:.72rem; }
.account-button [data-company] { color:#294a5e; font-size:.8rem; }
.portal-message { padding:1rem 1.3rem; border:1px solid #cedfe8; border-radius:1rem; background:#f8fcff; color:#557687; font-size:.8rem; line-height:1.7; }
.portal-message[data-state=error] { color:#955652; border-color:#dfc2bc; }
.portal .form-error { color:#955652; font-size:.78rem; line-height:1.7; margin:0; }
.mandate-download { display:block; margin:1rem 0 .5rem; color:#466c83; }
.portal :focus-visible { outline:2px solid #79a618; outline-offset:4px; }
.portal-header { max-width:1440px; margin:auto; display:flex; align-items:center; gap:1.5rem; padding:2rem clamp(1.25rem,4vw,4rem); }
.wordmark { color:#1b364b; font-size:2rem; letter-spacing:-.07em; text-decoration:none; line-height:1; }
.wordmark span { display:block; margin-top:.7rem; font-size:.56rem; letter-spacing:.24em; color:#657f90; }
.preview-badge { align-self:center; border:1px solid #c7d9e3; border-radius:2rem; padding:.35rem .7rem; font-size:.65rem; color:#577486; }
.portal-header nav { display:flex; gap:2rem; margin-left:auto; }
.portal-header nav a { text-decoration:none; color:#526d7f; font-size:.83rem; }
.account-button { border:0; background:transparent; text-align:right; padding:0; color:#294a5e; font-size:.8rem !important; margin-left:auto; }
.account-button span { display:block; margin-top:.3rem; color:#6b8391; font-size:.68rem; }
.portal main { max-width:1312px; margin:0 auto; padding:0 clamp(1.25rem,4vw,3rem); }
.kicker { font-size:.65rem; letter-spacing:.23em; font-weight:500; color:#6b8494; margin:0 0 1.25rem; line-height:1.8; }
.portal h1 { font-size:clamp(2.65rem,4.4vw,4.6rem); line-height:1.1; font-weight:400; letter-spacing:-.065em; margin:0 0 1.5rem; }
.portal h2 { font-size:clamp(1.7rem,2.8vw,2.6rem); line-height:1.2; font-weight:400; letter-spacing:-.05em; margin:0; }
.portal h3 { font-size:1.05rem; font-weight:500; letter-spacing:-.02em; margin:1.8rem 0 1rem; }
.portal-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding:3rem 0 2.6rem; }
.intro-actions { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; flex-wrap:wrap; }
.direct-customer-fields { display:grid; gap:1.1rem; }
.pill.delete-action { color:#8a5553; border-color:#d9b9b5; background:#fbf4f2; }
.portal-intro p:last-child { max-width:36rem; color:#5d7788; line-height:1.8; font-size:.95rem; margin:0; }
.pill { display:inline-flex; align-items:center; justify-content:center; gap:1.3rem; min-height:3.15rem; padding:.85rem 1.5rem; border:1px solid #ccdde6; border-radius:999px; background:#f7fbfd; color:#28495b; text-decoration:none; font-size:.8rem !important; font-weight:500; white-space:nowrap; }
.pill.primary { border-color:#a3bd6c; background:#f1f8e7; color:#354920; box-shadow:0 .6rem 1.4rem #4e6b2720,inset 0 1px #fff; }
.pill.primary i { display:block; width:.42rem; height:.42rem; background:#79a618; border-radius:50%; box-shadow:0 0 .55rem #8cba4390; }
.pill:disabled { opacity:.45; box-shadow:none; }
.pill:enabled:hover { background:#fff; }
.pill.primary:enabled:hover { background:#e8f4d7; }
.glass { border:1px solid #fff; border-radius:2rem; background:linear-gradient(135deg,#fbfdffbb,#edf5f9bb); box-shadow:0 1rem 3rem #517a8e0a,inset 0 1px #fff; }
.records-panel { padding:2rem 2rem .5rem; }
.panel-heading { display:flex; justify-content:space-between; gap:1.5rem; align-items:center; }
.panel-heading .kicker { margin-bottom:.4rem; }
.counts { display:flex; gap:2rem; color:#6a8292; font-size:.72rem; }
.counts b { display:block; font-size:1.75rem; color:#345268; font-weight:400; letter-spacing:-.05em; margin-bottom:.3rem; }
.records-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:2rem 0 1.3rem; }
.filters { display:flex; gap:.3rem; border:1px solid #d4e2ea; background:#e6eff57a; border-radius:2rem; padding:.25rem; }
.filters button { font-size:.72rem; color:#647d8c; background:none; border:0; border-radius:2rem; padding:.65rem .9rem; }
.filters button[aria-pressed=true] { background:#fff; color:#29485c; box-shadow:0 .15rem .6rem #335b6a0a; }
.search input { width:15rem; max-width:100%; border:1px solid #d2e0e9; background:#ffffff88; border-radius:2rem; font-size:.73rem; padding:.8rem 1rem; color:#345268; }
.record-columns,.record { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1.2fr) minmax(0,1.1fr) minmax(0,1fr) 11rem; align-items:center; gap:1.25rem; }
.record-columns { font-size:.61rem; color:#78909f; padding:.3rem .5rem .75rem; }
.record { border-top:1px solid #d7e4ec; padding:1.35rem .5rem; font-size:.8rem; line-height:1.6; }
.record small { display:block; color:#78909e; font-size:.65rem; margin-top:.1rem; }
.record .customer { font-weight:500; }
.record .status { display:inline-flex; align-items:center; gap:.4rem; font-size:.65rem; color:#547041; }
.status::before { content:''; width:.35rem; height:.35rem; border-radius:50%; background:#8cae5d; flex:none; }
.record .status.converted { color:#627989; }
.status.converted::before { background:#91a8b5; }
.record button { border:1px solid #d0e0e9; background:#ffffff80; border-radius:2rem; padding:.55rem .9rem; font-size:.7rem; color:#456174; }
.record-actions { display:flex; flex-direction:column; gap:.4rem; }
.record-actions .convert-button { color:#4b642f; border-color:#bdd09b; background:#f2f8e9; white-space:nowrap; }
.empty-state { padding:2rem; text-align:center; color:#718a99; font-size:.85rem; }
.documents { padding:3rem 0 1.5rem; }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.section-heading .kicker { margin-bottom:.45rem; }
.section-heading>p { margin:0; font-size:.8rem; color:#708897; }
.document-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.document { display:flex; align-items:center; gap:1rem; padding:1.4rem; border:1px solid #fff; border-radius:1.4rem; background:#f9fcff88; }
.document-icon { color:#708e9e; width:2.5rem; height:3rem; border:1px solid #cddfe8; border-radius:.4rem .9rem .4rem .4rem; display:grid; place-items:center; flex:none; font-size:.6rem; }
.document h3 { margin:0 0 .25rem; font-size:.88rem; font-weight:500; }
.document p { margin:0; font-size:.65rem; color:#78909e; line-height:1.6; }
.document button,.document a { margin-left:auto; border:0; background:transparent; color:#9db1be; font-size:1.3rem; }
.document a { color:#466c83; text-decoration:none; }
.portal-footer { max-width:1312px; margin:2rem auto 0; padding:1.4rem clamp(1.25rem,4vw,3rem) 1.8rem; display:flex; align-items:baseline; justify-content:space-between; gap:2rem; color:#78909f; font-size:.63rem; line-height:1.7; }
.portal-footer p { margin:0; max-width:38rem; }
.login-stage { min-height:66vh; display:grid; grid-template-columns:1.1fr 1fr; gap:6rem; align-items:center; padding:3.5rem 0; }
.login-copy>p:not(.kicker) { color:#657f90; max-width:29rem; line-height:1.9; font-size:1rem; }
.login-copy>span { font-size:.75rem; color:#79909d; }
.login-line { height:1px; width:5rem; background:#94b450; margin:2rem 0 1.25rem; }
.login-card { padding:3rem; }
.login-card h2 { margin-bottom:2rem; }
.login-card form { display:grid; gap:1.2rem; }
.login-card .pill { width:100%; margin-top:.5rem; }
.quiet { font-size:.67rem; line-height:1.7; color:#8196a3; }
.login-card>.quiet { text-align:center; margin:1.3rem 0 0; }
.portal-dialog { padding:0; border:1px solid #fff; border-radius:2rem; width:min(58rem,calc(100% - 2rem)); max-height:calc(100svh - 3rem); background:#f0f7fb; color:#244359; box-shadow:0 2rem 8rem #15374e24; }
.portal-dialog::backdrop { background:#e1ebf0a0; backdrop-filter:blur(10px); }
.dialog-surface { position:relative; padding:clamp(1.5rem,4vw,3rem); }
.dialog-surface>.kicker { padding-right:2rem; }
.close-button { position:absolute; right:1.2rem; top:1.2rem; width:2.4rem; height:2.4rem; border-radius:50%; background:#ffffff80; border:1px solid #d3e2ea; color:#7190a0; font-size:1.5rem !important; }
.dialog-intro { color:#6b8596; line-height:1.8; font-size:.85rem; margin:1rem 0 2rem; }
.portal-dialog form { display:grid; gap:1.1rem; }
.fields { display:grid; gap:1rem; }
.name-fields { grid-template-columns:.8fr .9fr 1.25fr 1.25fr; }
.two { grid-template-columns:1fr 1fr; }
.portal .test-field { display:flex; flex-direction:column; gap:.5rem; min-width:0; font-size:.76rem; color:#4a687d; }
.portal .test-field input,.portal .test-field select,.portal .test-date-trigger { width:100%; min-height:3rem; background-color:#f9fcff99; border:1px solid #cedeE8; border-radius:1rem; padding:.75rem 1rem; color:#36576c; font-size:.8rem; }
.portal .test-date-trigger { display:flex; align-items:center; justify-content:space-between; text-align:left; }
.date-summary { margin:0; padding:.8rem 1rem; background:#e9f1f6; border-radius:.8rem; color:#567687; font-size:.76rem; }
.inline-documents { display:flex; flex-wrap:wrap; gap:.6rem 1rem; padding:1rem 0 .3rem; color:#647f90; font-size:.7rem; }
.inline-documents .quiet { flex-basis:100%; }
.inline-documents a { color:#466c83; text-underline-offset:.2em; }
.form-actions { margin-top:.9rem; display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.form-actions>span { font-size:.65rem; color:#7b919e; }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; padding:1.4rem 0; border-block:1px solid #d6e4ec; }
.detail-grid dt { color:#7d93a1; font-size:.67rem; margin-bottom:.45rem; }
.detail-grid dd { margin:0; font-size:.9rem; overflow-wrap:anywhere; }
.detail-grid dl { margin:0; }
.detail-history { margin:1.5rem 0; color:#708a99; font-size:.75rem; line-height:2; }
.detail-history span { display:block; }
.detail-history span::before { content:'•'; color:#79a618; margin-right:.7rem; }
.order-summary { display:grid; gap:.4rem; padding:1.2rem 1.4rem; border-radius:1rem; background:#e5eff5; margin-bottom:1.3rem; font-size:.8rem; line-height:1.7; }
.order-summary small { color:#718a99; }
.street-fields { grid-template-columns:3fr 1fr; }
.address-fields { grid-template-columns:1fr 1.5fr 1.5fr; }
.upload-field { display:grid; gap:.9rem; border:1px dashed #b4cbd7; border-radius:1.2rem; padding:1.3rem; background:#f8fcff88; font-size:.8rem; color:#516f82; }
.upload-field input { width:100%; min-width:0; font-size:.73rem; }
.upload-field input::file-selector-button { border:1px solid #cbdde7; border-radius:2rem; padding:.6rem 1rem; margin-right:.7rem; font:inherit; color:#3e5e72; background:#fff; cursor:pointer; }
.upload-field small { font-size:.65rem; color:#8398a4; }
.file-error { color:#9c4f4f; font-size:.75rem; margin:0; }
.confirmation-dialog { max-width:34rem; text-align:center; }
.confirmation-dialog h2 { font-size:2rem; }
.confirmation-dialog p:not(.kicker) { font-size:.85rem; line-height:1.8; color:#6c8696; }
.confirmation-dialog .pill { margin-top:1rem; }
.confirmation-mark { display:grid; place-items:center; width:3rem; height:3rem; margin:0 auto 1.4rem; color:#658f27; border-radius:50%; border:1px solid #bdd49b; background:#f0f7e6; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:64rem) { .portal-header { padding-top:1.4rem; gap:1rem; }.portal-header nav { gap:1rem; }.account-button { max-width:10rem; }.login-stage { gap:2rem; }.login-card { padding:2rem; }.portal-intro { align-items:flex-start; }.portal-intro>.pill { margin-top:2rem; }.records-panel { padding:1.5rem 1.25rem .5rem; }.record,.record-columns { grid-template-columns:1.1fr 1.2fr 1fr auto; gap:1rem; }.record>.status,.record-columns>span:nth-child(4) { display:none; }.counts { gap:1rem; }.document { padding:1.1rem; gap:.7rem; }.document-icon { width:2rem; }.name-fields { grid-template-columns:1fr 1fr; } }
@media(max-width:46rem) { .portal-header { flex-wrap:wrap; }.wordmark { font-size:1.7rem; }.portal-header nav { order:4; width:100%; padding-top:.6rem; }.account-button { font-size:.65rem !important; }.preview-badge { padding:.25rem .5rem; }.login-stage { grid-template-columns:1fr; gap:2rem; padding:2rem 0; }.login-copy h1 { font-size:2.8rem; }.login-copy>p:not(.kicker) { font-size:.9rem; }.login-line,.login-copy>span { display:none; }.portal-intro { display:block; padding:2rem 0; }.portal-intro h1 { font-size:2.65rem; }.portal-intro>.pill { margin-top:1.5rem; }.panel-heading { align-items:flex-start; }.counts { font-size:.59rem; gap:.7rem; }.counts b { font-size:1.3rem; }.panel-heading h2 { font-size:1.65rem; }.records-toolbar { display:block; margin:1.5rem 0 1rem; }.filters { width:max-content; max-width:100%; }.filters button { font-size:.62rem; padding:.6rem .7rem; }.search { display:block; margin-top:1rem; }.search input { width:100%; }.record-columns { display:none; }.record { grid-template-columns:1fr auto; gap:.6rem; padding:1.2rem 0; }.record>div:nth-child(2) { grid-column:1; }.record>div:nth-child(3) { grid-column:1; font-size:.7rem; }.record>button { grid-column:2; grid-row:1 / span 3; }.document-grid { grid-template-columns:1fr; }.section-heading { display:block; }.section-heading>p { margin-top:.8rem; }.portal-footer { flex-direction:column; gap:.5rem; }.portal-dialog { width:calc(100% - 1rem); max-height:calc(100svh - 1rem); border-radius:1.4rem; }.portal-dialog h2 { font-size:1.9rem; max-width:85%; }.confirmation-dialog h2 { max-width:100%; }.two,.address-fields { grid-template-columns:1fr; }.detail-grid { grid-template-columns:1fr; gap:1rem; }.form-actions .pill { width:100%; }.name-fields { grid-template-columns:1fr 1fr; } }
@media(prefers-reduced-motion:no-preference) { .portal button,.portal a { transition:background-color .2s ease,border-color .2s ease; } }
@media(max-width:64rem) { .intro-actions { padding-top:1rem; } }
@media(max-width:46rem) { .intro-actions { justify-content:flex-start; padding-top:1.5rem; }.intro-actions .pill { flex:1 1 auto; } }
@media(max-width:46rem) { .record>.record-actions { grid-column:1 / -1; display:flex; flex-direction:row; flex-wrap:wrap; gap:.5rem; padding-top:.4rem; } }
@media(min-width:46.001rem) and (max-width:64rem) { .record,.record-columns { grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1fr) 11rem; } }