@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

#main{--ink:#10233f;--muted:#627189;--blue:#2468ee;--line:#e2e8f1}
#main * {box-sizing:border-box}
html {scroll-behavior:smooth}
#main {margin:0;color:var(--ink);background:#f6f8fc;font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.65}
#main a {color:inherit;text-decoration:none}
#main button, #main input {font:inherit}
#main a, #main button { -webkit-tap-highlight-color:transparent}
#main a:focus-visible, #main button:focus-visible, #main input:focus-visible, #main summary:focus-visible {outline:3px solid #4b99ff;outline-offset:5px}
#main [hidden] {display:none!important}
#main .wrap {width:min(1180px,calc(100% - 48px));margin:auto}
#main .skip-link {position:absolute;top:-80px;left:20px;z-index:10;background:white;padding:12px}
#main .skip-link:focus {top:10px}
#main .hero {position:relative;overflow:hidden;background:#09162c;color:#fff;padding:78px 0 68px}
#main .hero:before {content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 80% 45%,#163867 0,transparent 55%),linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:auto,64px 64px,64px 64px;pointer-events:none}
#main .hero-grid {position:relative;display:grid;grid-template-columns:1.12fr 1fr;gap:70px;align-items:center}
#main .eyebrow {text-transform:uppercase;font-size:11px;letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:10px}
#main .eyebrow i {width:7px;height:7px;background:#69a5ff;border-radius:50%;box-shadow:0 0 0 5px #69a5ff15}
#main .hero .eyebrow {color:#9bbfff}
#main .hero h1 {font:600 clamp(40px,4.6vw,62px)/1.12 Manrope,sans-serif;letter-spacing:-2.8px;margin:26px 0 22px}
#main .hero h1 em {font-style:normal;color:#7aabff}
#main .hero-copy {font-size:16px;color:#adbad0;max-width:460px;line-height:1.8}
#main .lookup {margin-top:30px}
#main .lookup label {display:block;font-size:12px;font-weight:600;margin-bottom:10px}
#main .lookup-row {display:flex;background:white;border-radius:8px;padding:6px;gap:6px;box-shadow:0 8px 28px #0002}
#main .lookup input {width:100%;min-width:0;border:0;padding:12px;color:var(--ink);background:transparent;font-size:14px}
#main .portal-button {display:inline-flex;align-items:center;justify-content:center;gap:14px;white-space:nowrap;border:0;border-radius:5px;background:var(--blue);color:#fff;padding:13px 20px;cursor:pointer;font-weight:600;font-size:13px;transition:background .2s,transform .2s}
#main .portal-button:hover {background:#1851c7;transform:translateY(-2px)}
#main .lookup-help {font-size:11px;color:#98aac4;margin:12px 0 0}
#main .lookup-help a {color:#c6dbff;text-decoration:underline;text-underline-offset:3px}
#main .lookup-message {font-size:12px;color:#c6dbff;min-height:20px;margin:10px 0 0}
#main .lookup-message[data-state=error] {color:#ffb3ab}
#main .visual {position:relative;padding:26px 0 28px 16px;animation:enter .8s ease both}
#main .orbit {position:absolute;width:410px;height:410px;border:1px solid #8cbaff18;border-radius:50%;top:-20px;left:5px}
#main .orbit:after {content:'';position:absolute;inset:25px;border:1px dashed #8cbaff22;border-radius:50%;animation:rotate 80s linear infinite}
#main .project-preview {position:relative;background:linear-gradient(130deg,#203452,#12243e);border:1px solid #8aabd536;border-radius:14px;padding:25px;box-shadow:0 30px 65px #0003;transform:perspective(1000px) rotateY(-5deg);animation:float 7s ease-in-out infinite}
#main .preview-top {display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff14;padding-bottom:18px;font-size:11px;color:#a7bddb}
#main .preview-top b {color:white;font-weight:500;font-size:12px}
#main .preview-top b:before {content:'◈';color:#80afff;margin-right:8px}
#main .preview-label {font-size:9px;letter-spacing:1.6px;color:#91a8c8;margin:22px 0 5px}
#main .project-preview h2 {font:600 22px Manrope,sans-serif;margin:0}
#main .preview-status {font-size:10px;color:#8ce1bf;background:#65d8b21a;border:1px solid #65d8b22a;border-radius:30px;padding:4px 9px;display:inline-block;margin-top:12px}
#main .preview-progress {display:flex;justify-content:space-between;font-size:11px;margin:25px 0 9px;color:#adbed5}
#main .preview-progress b {color:white}
#main .progress-track {height:6px;border-radius:10px;background:#ffffff12;overflow:hidden}
#main .progress-fill {height:100%;width:72%;background:linear-gradient(90deg,#3979f6,#86b2ff);border-radius:inherit;transform-origin:left;animation:grow 1.8s ease both}
#main .preview-stages {display:flex;justify-content:space-between;margin-top:10px;color:#92a9c9;font-size:9px}
#main .preview-update {display:flex;align-items:center;gap:12px;margin-top:24px;padding:14px;background:#ffffff05;border:1px solid #ffffff0c;border-radius:7px;font-size:11px}
#main .check-icon {display:grid;place-items:center;width:29px;height:29px;border-radius:50%;color:#89dcbd;background:#89dcbd18}
#main .preview-update small {display:block;color:#96aac7;font-size:10px}
#main .floating-note {position:relative;margin:-8px -16px 0 auto;max-width:224px;background:#fff;color:var(--ink);border-radius:9px;padding:14px 18px;box-shadow:0 12px 35px #0003;font-size:11px;display:flex;align-items:center;gap:12px}
#main .floating-note span:first-child {color:var(--blue);font-size:24px}
#main .floating-note small {display:block;color:var(--muted);font-size:10px}
#main .preview-caption {text-align:center;font-size:10px;color:#8fa4c3;position:relative;margin:20px 0 0}
#main .hero-bottom {position:relative;border-top:1px solid #ffffff12;margin-top:44px;padding-top:22px;display:flex;gap:32px;color:#93a6c2;font-size:11px}
#main .hero-bottom span:before {content:'✓';color:#80afff;margin-right:9px}
#main .tracking-layout {padding:55px 0 0;scroll-margin-top:20px}
#main .portal-grid.two {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
#main .portal-card {background:white;border:1px solid var(--line);border-radius:10px;padding:28px;margin-bottom:22px;min-width:0}
#main .portal-card h3 {font:700 20px Manrope,sans-serif;margin-top:0}
#main .portal-card h4 {font-size:16px}
#main .portal-muted {color:var(--muted)}
#main .portal-table-wrap {overflow:auto}
#main .portal-table {border-collapse:collapse;width:100%;text-align:left;font-size:13px}
#main .portal-table th {color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1px}
#main .portal-table th, #main .portal-table td {padding:15px 12px;border-bottom:1px solid var(--line)}
#main .portal-table a {color:var(--blue)}
#main .portal-table a.portal-button {color:white}
#main .portal-badge {border-radius:30px;background:#edf3ff;padding:5px 10px;font-size:11px}
#main .tracking-step {padding:10px 0 10px 24px;border-left:2px solid var(--line);position:relative;margin-left:6px;color:var(--muted);font-size:13px}
#main .tracking-step:before {content:'';position:absolute;width:9px;height:9px;background:#c5d0e1;left:-5.5px;top:17px;border-radius:50%}
#main .tracking-step.done:before, #main .tracking-step.active:before {background:var(--blue)}
#main .tracking-step.active {color:var(--ink)}
#main .portal-empty {padding:18px 0;color:var(--muted)}
#main [data-progress-bar] {transition:width 1s ease}
#main .mb-0 {margin-bottom:0}
#main .mt-4 {margin-top:24px}
@keyframes float{0%,100%{transform:translateY(0) rotateY(-5deg)}50%{transform:translateY(-9px) rotateY(-5deg)}}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes enter{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media(min-width:1200px){
#main .hero-copy-block {animation:enter .65s ease both}}
@media(max-width:980px){
#main .hero-grid {gap:35px}
#main .site-nav {gap:18px}
#main .hero h1 {font-size:46px}
#main .feature-grid {grid-template-columns:repeat(2,1fr)}
#main .floating-note {margin-right:0}
#main .orbit {width:310px;height:310px}
#main .hero {padding-top:55px}
#main .lookup-row {flex-wrap:wrap}
#main .lookup-row button {width:100%}}
@media(max-width:700px){
#main .wrap {width:calc(100% - 36px)}
#main .header-inner {min-height:74px}
#main .site-nav {display:none}
#main .mobile-nav {display:block;font-size:13px;position:relative}
#main .mobile-nav summary {cursor:pointer;padding:9px 12px;border:1px solid var(--line);border-radius:6px}
#main .mobile-nav nav {position:absolute;right:0;top:46px;width:190px;background:white;z-index:5;box-shadow:0 12px 30px #11224420;padding:12px;border:1px solid var(--line);border-radius:8px}
#main .mobile-nav a {display:block;padding:8px}
#main .hero-grid {grid-template-columns:1fr;gap:32px}
#main .hero h1 {font-size:43px;letter-spacing:-2px}
#main .hero {padding:42px 0 28px}
#main .hero-copy {font-size:14px}
#main .lookup-row {flex-wrap:nowrap}
#main .lookup-row button {width:auto;padding:12px}
#main .visual {max-width:430px;width:100%;margin:auto;padding-left:0}
#main .hero-bottom {gap:12px;flex-wrap:wrap;margin-top:22px;font-size:10px}
#main .overview {padding:45px 0 30px}
#main .section-heading {display:block}
#main .section-heading>p {margin-top:18px}
#main .feature-grid {gap:12px}
#main .feature {padding:20px 16px}
#main .feature h3 {font-size:14px}
#main .help, #main .footer-inner {align-items:start;flex-direction:column}
#main .footer-links {flex-wrap:wrap;gap:18px}
#main .portal-grid.two {grid-template-columns:1fr;gap:0}
#main .portal-card {padding:20px}
#main .brand {font-size:21px}}
@media(prefers-reduced-motion:reduce){
html {scroll-behavior:auto}
#main *, #main *:before, #main *:after {animation:none!important;transition:none!important}}

/* Shared site chrome remains styled by app.css; dashboard rules are scoped. */
.tracking-page .skip-link { position: fixed; top: -100px; left: 16px; z-index: 99999; background: white; padding: 12px 20px; }
.tracking-page .skip-link:focus { top: 12px; }
.tracking-page .navigation-wrap { background: white; }
#main { padding-top: 120px; }
#main .hero h1, #main .project-preview h2 { color: white; }
#main .tracking-layout { padding: 60px 0; scroll-margin-top: 110px; }
#main .workspace-heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; }
#main .workspace-heading .eyebrow { color: var(--blue); margin: 0 0 12px; }
#main .workspace-heading h2 { font: 700 clamp(24px,3vw,34px)/1.3 Manrope,sans-serif; letter-spacing: -1px; color: var(--ink); margin: 0; }
#main .workspace-id { border: 1px solid var(--line); padding: 12px 18px; border-radius: 8px; font-size: 9px; letter-spacing: 1px; color: var(--muted); background: white; flex-shrink: 0; }
#main .workspace-id strong { display: block; font-size: 13px; letter-spacing: .5px; color: var(--ink); }
#main .result-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
#main .result-grid > * { min-width: 0; }
#main .portal-card { position: relative; border-radius: 16px; padding: 30px; box-shadow: 0 6px 25px #18396905; animation: dashboard-enter .65s ease both; transition: box-shadow .25s, border-color .25s, transform .25s; }
#main .portal-card:hover { border-color: #b9cef0; box-shadow: 0 15px 35px #1839690c; }
#main .result-grid .portal-card:nth-child(2) { animation-delay: .12s; }
#main .journey-card { animation-delay: .18s; }
#main .details-grid { grid-template-columns: 1.35fr 1fr; }
#main .card-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
#main .card-heading h3 { margin: 0; }
#main .card-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #eef4ff; color: var(--blue); font-size: 23px; }
#main .card-label { display: block; font-size: 10px; letter-spacing: 1.4px; font-weight: 600; color: var(--muted); margin: 0 0 8px; }
#main .project-card { background: radial-gradient(ellipse at 100% 100%,#eaf2ff,transparent 70%),white; }
#main .project-card h3 { font-size: 27px; letter-spacing: -.8px; margin: 0 0 10px; overflow-wrap: anywhere; }
#main .client-line { font-size: 12px; color: var(--muted); margin: 0; }
#main .project-progress-layout { display: flex; align-items: center; gap: 26px; margin-top: 24px; }
#main .progress-ring { position: relative; width: 128px; height: 128px; flex-shrink: 0; }
#main .progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#main .progress-ring circle { fill: none; stroke-width: 7; }
#main .ring-track { stroke: #e3ebf9; }
#main .ring-fill { stroke: var(--blue); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.3s cubic-bezier(.22,1,.36,1); }
#main .progress-ring > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#main .progress-ring strong { font: 800 29px Manrope,sans-serif; color: var(--ink); }
#main .progress-ring small { font-size: 8px; color: var(--muted); letter-spacing: 1.3px; margin-top: 4px; }
#main .progress-context strong { color: var(--blue); font-size: 16px; }
#main .progress-context p { font-size: 12px; color: var(--muted); max-width: 190px; margin: 7px 0 0; }
#main .total-value { font: 800 clamp(28px,3vw,38px)/1.3 Manrope,sans-serif; letter-spacing: -1px; display: block; color: var(--ink); overflow-wrap: anywhere; }
#main .payment-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 23px 0; }
#main .payment-split span { display: block; font-size: 11px; color: var(--muted); }
#main .payment-split strong { display: block; font: 700 21px Manrope,sans-serif; color: var(--ink); margin-top: 8px; overflow-wrap: anywhere; }
#main .legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #dce5f2; margin-right: 5px; }
#main .legend-dot.paid { background: #19a980; }
#main .payment-meter { height: 9px; overflow: hidden; border-radius: 20px; background: #e8edf5; }
#main .payment-meter > div { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg,#22a889,#63d7b3); transition: width 1.2s ease; }
#main .payment-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 10px; color: var(--muted); }
#main .portal-badge { display: inline-flex; align-items: center; gap: 7px; color: #305690; font-size: 11px; font-weight: 600; padding: 6px 10px; }
#main .portal-badge:before { content: ''; width: 5px; height: 5px; background: currentColor; border-radius: 50%; flex-shrink: 0; }
#main .portal-badge[data-tone=success] { color: #10775b; background: #e7f7ef; }
#main .portal-badge[data-tone=warning] { color: #946112; background: #fff5dc; }
#main .portal-badge[data-tone=danger] { color: #b63d47; background: #ffedef; }
#main .project-journey { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 22px 14px; list-style: none; margin: 0; padding: 4px 0; }
#main .journey-stage { position: relative; padding: 0 8px; font-size: 11px; color: var(--muted); }
#main .journey-stage:before { content: ''; position: absolute; top: 17px; left: 49px; right: -14px; height: 2px; background: #e8edf5; }
#main .journey-stage:nth-child(6n):before, #main .journey-stage:last-child:before { display: none; }
#main .stage-node { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #f1f4f9; border: 1px solid #e1e8f2; color: #8090a5; margin-bottom: 11px; font-size: 11px; position: relative; }
#main .journey-stage strong { display: block; font-size: 11px; line-height: 1.5; color: inherit; }
#main .journey-stage small { display: block; font-size: 9px; margin-top: 4px; }
#main .journey-stage.done .stage-node { color: #138566; background: #e9f8f1; border-color: #c9ebdc; }
#main .journey-stage.done:before { background: #b3ddcd; }
#main .journey-stage.active { color: var(--blue); }
#main .journey-stage.active .stage-node { background: var(--blue); color: white; border-color: var(--blue); animation: stage-pulse 2.5s ease-out 3; }
#main .activity-item { display: flex; gap: 15px; padding: 0 0 24px; position: relative; animation: dashboard-enter .5s ease both; }
#main .activity-item:before { content: ''; position: absolute; left: 15px; top: 33px; bottom: 2px; border-left: 1px solid var(--line); }
#main .activity-item:last-child { padding-bottom: 0; }
#main .activity-item:last-child:before { display: none; }
#main .activity-dot { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; color: var(--blue); background: #edf3ff; }
#main .activity-item h4 { font-size: 14px; margin: 2px 0 7px; }
#main .activity-item p { color: var(--muted); font-size: 12px; margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
#main .activity-item time { display: block; font-size: 10px; color: var(--muted); margin-top: 8px; }
#main .retainer-panel { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 24px; }
#main .retainer-panel strong { font-size: 14px; display: block; }
#main .access-state { border: 1px solid var(--line); padding: 15px; border-radius: 10px; font-size: 12px; background: #f8faff; }
#main .access-state strong { display: block; margin-bottom: 5px; color: var(--ink); }
#main .access-state p { margin: 0; color: var(--muted); }
#main .access-state + .portal-button { margin-top: 14px; }
#main .count-badge { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 9px; background: #f0f4fb; color: var(--blue); border-radius: 9px; font-size: 12px; font-weight: 700; }
#main .entry-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
#main .entry-card { min-width: 0; border: 1px solid var(--line); padding: 20px; border-radius: 12px; background: #fcfdff; display: flex; flex-direction: column; gap: 14px; transition: transform .25s, box-shadow .25s; animation: dashboard-enter .5s ease both; }
#main .entry-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px #1839690c; }
#main .entry-card h4 { font-size: 14px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
#main .entry-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#main .entry-amount { font: 700 25px Manrope,sans-serif; color: var(--ink); overflow-wrap: anywhere; }
#main .entry-card .portal-button, #main .entry-note { margin-top: auto; }
#main .entry-note { color: var(--muted); font-size: 11px; }
#main .portal-empty { grid-column: 1/-1; text-align: center; border: 1px dashed #d8e2f2; border-radius: 12px; padding: 30px 20px; font-size: 12px; background: #fafcff; }
#main .portal-empty i { display: block; color: #6d96ce; font-size: 30px; margin-bottom: 8px; }
#main .hero:after { content: ''; position: absolute; width: 240px; height: 240px; border-radius: 50%; background: #277bff16; filter: blur(40px); right: -60px; top: 60px; pointer-events: none; animation: glow-drift 8s ease-in-out 3; }
#main .hero > .wrap { position: relative; z-index: 1; }
@keyframes dashboard-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes stage-pulse { 0% { box-shadow: 0 0 0 0 #2468ee35; } 75%,100% { box-shadow: 0 0 0 10px #2468ee00; } }
@keyframes glow-drift { 50% { transform: translate(-80px,100px) scale(1.3); } }
@media(max-width: 980px) {
 #main .entry-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 #main .result-grid { gap: 18px; }
 #main .portal-card { padding: 23px; }
 #main .project-progress-layout { gap: 15px; }
 #main .progress-ring { width: 105px; height: 105px; }
 #main .project-journey { grid-template-columns: repeat(4,minmax(0,1fr)); }
 #main .journey-stage:nth-child(6n):before { display: block; }
 #main .journey-stage:nth-child(4n):before, #main .journey-stage:last-child:before { display: none; }
}
@media(max-width: 700px) {
 #main { padding-top: 95px; }
 #main .workspace-heading { align-items: flex-start; flex-direction: column; }
 #main .result-grid, #main .details-grid, #main .entry-grid { grid-template-columns: 1fr; }
 #main .result-grid { gap: 0; }
 #main .portal-card { padding: 22px; }
 #main .tracking-layout { padding: 35px 0; }
 #main .project-journey { grid-template-columns: repeat(3,minmax(0,1fr)); }
 #main .journey-stage:nth-child(4n):before { display: block; }
 #main .journey-stage:nth-child(3n):before, #main .journey-stage:last-child:before { display: none; }
}
@media(prefers-reduced-motion: reduce) {
 #main *, #main *:before, #main *:after { animation: none !important; transition: none !important; }
}