/* =========================================================
   Grade Helper v6.2 — Visual Intelligence System
   Responsive premium graphics for desktop, tablet and mobile.
   ========================================================= */

:root{
  --vi-blue:#4d7db8;--vi-teal:#4d9698;--vi-gold:#a98449;--vi-indigo:#6d70ae;
  --vi-green:#4f8f76;--vi-amber:#a97937;--vi-red:#a85c5c;
  --vi-ease:cubic-bezier(.2,.75,.2,1);
  --vi-glass:rgba(255,255,255,.72);
}
html[data-theme="dark"]{--vi-glass:rgba(24,36,47,.72)}
html{--vi-motion:1;--vi-depth:1;--vi-lift:8px}
html[data-experience-tier="tablet"]{--vi-motion:.72;--vi-depth:.72;--vi-lift:5px}
html[data-experience-tier="mobile"]{--vi-motion:.48;--vi-depth:.48;--vi-lift:2px}
html[data-comfort="true"],html[data-sp3d-reduced="true"]{--vi-motion:0;--vi-depth:.18;--vi-lift:0px}

/* Page arrival and responsive reveal language */
body.vi-ready main,body.vi-ready .workspace-host,body.vi-ready #dashboardView{animation:viPageIn .46s var(--vi-ease) both}
.vi-reveal{opacity:0;transform:translateY(calc(14px * var(--vi-motion))) scale(.992);transition:opacity .62s var(--vi-ease),transform .62s var(--vi-ease)}
.vi-reveal.vi-visible{opacity:1;transform:none}
@keyframes viPageIn{from{opacity:.72;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){body.vi-ready main,body.vi-ready .workspace-host,body.vi-ready #dashboardView{animation:none}.vi-reveal{opacity:1;transform:none;transition:none}}
html[data-comfort="true"] .vi-reveal{opacity:1;transform:none;transition:none}

/* Unified state language */
.status-chip,.revision-status,.version-badge,.ops-pill,.luxury-pill{position:relative;overflow:hidden}
.vi-state-received{--vi-state:#4d7db8;--vi-state-bg:rgba(77,125,184,.12)}
.vi-state-review,.vi-state-progress{--vi-state:#6d70ae;--vi-state-bg:rgba(109,112,174,.12)}
.vi-state-awaiting,.vi-state-revision{--vi-state:#a97937;--vi-state-bg:rgba(169,121,55,.13)}
.vi-state-paid,.vi-state-completed,.vi-state-verified{--vi-state:#4f8f76;--vi-state-bg:rgba(79,143,118,.13)}
.vi-state-delivered{--vi-state:#4d9698;--vi-state-bg:rgba(77,150,152,.13)}
[class*="vi-state-"]{border-color:color-mix(in srgb,var(--vi-state) 30%,transparent)!important;background:var(--vi-state-bg)!important;color:var(--vi-state)!important}
[class*="vi-state-"]::before{content:"";width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:6px;background:currentColor;box-shadow:0 0 0 4px color-mix(in srgb,currentColor 14%,transparent)}

/* Custom visual icon family */
.vi-icon{--vi-icon-accent:var(--vi-blue);position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(145deg,color-mix(in srgb,var(--vi-icon-accent) 15%,var(--vx-surface)),var(--vx-surface));border:1px solid color-mix(in srgb,var(--vi-icon-accent) 28%,var(--vx-line));box-shadow:0 11px 30px color-mix(in srgb,var(--vi-icon-accent) 13%,transparent);transform:translateZ(calc(16px * var(--vi-depth)));transition:transform .28s var(--vi-ease),box-shadow .28s var(--vi-ease)}
.vi-icon svg{width:23px;height:23px;fill:none;stroke:var(--vi-icon-accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vi-icon.teal{--vi-icon-accent:var(--vi-teal)}.vi-icon.gold{--vi-icon-accent:var(--vi-gold)}.vi-icon.indigo{--vi-icon-accent:var(--vi-indigo)}.vi-icon.green{--vi-icon-accent:var(--vi-green)}
.vi-icon::after{content:"";position:absolute;inset:5px;border-radius:11px;border-top:1px solid rgba(255,255,255,.42);pointer-events:none}

/* Homepage visual intelligence showcase */
.vi-section{position:relative;overflow:hidden;padding-block:88px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--vx-blue-soft) 34%,transparent),transparent)}
.vi-section::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 15% 20%,rgba(77,125,184,.11),transparent 24%),radial-gradient(circle at 86% 66%,rgba(77,150,152,.10),transparent 22%)}
.vi-showcase{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr);gap:28px;align-items:stretch}
.vi-panel{position:relative;border:1px solid var(--vx-line);border-radius:28px;background:linear-gradient(150deg,color-mix(in srgb,var(--vx-surface) 94%,transparent),color-mix(in srgb,var(--vx-surface-2) 90%,transparent));box-shadow:var(--vx-shadow-md);padding:24px;overflow:hidden;transform-style:preserve-3d}
.vi-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 12%,rgba(255,255,255,.18) 38%,transparent 55%);transform:translateX(-130%);animation:viPanelSweep 12s ease-in-out infinite}
@keyframes viPanelSweep{0%,72%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}
.vi-panel-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:22px}.vi-panel-head h3{margin:4px 0 0;font-size:1.28rem}.vi-panel-head p{margin:6px 0 0;color:var(--vx-muted);font-size:.82rem;line-height:1.55}
.vi-icon-dock{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.vi-icon-tile{padding:14px 10px;border:1px solid var(--vx-line);border-radius:18px;background:var(--vx-surface);text-align:center;display:grid;justify-items:center;gap:8px;transition:transform .28s var(--vi-ease),box-shadow .28s var(--vi-ease),border-color .28s ease}.vi-icon-tile strong{font-size:.69rem}.vi-icon-tile small{font-size:.58rem;color:var(--vx-muted)}
html[data-experience-tier="desktop"] .vi-icon-tile:hover{transform:translateY(calc(-1 * var(--vi-lift))) rotateX(2deg);box-shadow:var(--vx-shadow-sm);border-color:var(--vx-line-strong)}

.vi-lifecycle{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:22px 6px 4px}.vi-lifecycle::before{content:"";position:absolute;left:7%;right:7%;top:36px;height:2px;background:linear-gradient(90deg,var(--vi-blue),var(--vi-indigo),var(--vi-teal));opacity:.28}.vi-stage{position:relative;z-index:1;text-align:center}.vi-stage i{display:grid;place-items:center;margin:auto;width:28px;height:28px;border-radius:50%;background:var(--vx-surface);border:2px solid color-mix(in srgb,var(--vi-blue) 42%,var(--vx-line));box-shadow:0 4px 18px rgba(35,70,100,.08);font-style:normal;font-size:.62rem;font-weight:900;color:var(--vi-blue)}.vi-stage:nth-child(n+4) i{border-color:color-mix(in srgb,var(--vi-teal) 45%,var(--vx-line));color:var(--vi-teal)}.vi-stage span{display:block;margin-top:8px;font-size:.6rem;color:var(--vx-muted);font-weight:800}.vi-stage.current i{animation:viStagePulse 2.8s ease-in-out infinite;background:color-mix(in srgb,var(--vi-teal) 11%,var(--vx-surface))}@keyframes viStagePulse{50%{box-shadow:0 0 0 8px rgba(77,150,152,.10),0 8px 26px rgba(54,110,112,.13)}}

.vi-side-stack{display:grid;gap:18px}.vi-quote-card{border:1px solid var(--vx-line);border-radius:24px;background:var(--vx-surface);padding:20px;box-shadow:var(--vx-shadow-sm);position:relative;overflow:hidden}.vi-quote-card::before{content:"GH";position:absolute;right:-5px;top:-20px;font-size:6.4rem;font-weight:950;color:var(--vi-blue);opacity:.035;letter-spacing:-.08em}.vi-quote-row{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed var(--vx-line);font-size:.73rem}.vi-quote-row:last-of-type{border:0}.vi-quote-row span{color:var(--vx-muted)}.vi-quote-row.discount strong{color:var(--vi-green)}.vi-quote-total{display:flex;justify-content:space-between;align-items:end;margin-top:10px;padding-top:12px;border-top:1px solid var(--vx-line)}.vi-quote-total strong{font-size:1.42rem}.vi-quote-total small{display:block;color:var(--vx-muted);font-size:.6rem}
.vi-notification-stack{position:relative;height:160px}.vi-note{position:absolute;left:0;right:0;display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;padding:12px;border:1px solid var(--vx-line);border-radius:16px;background:color-mix(in srgb,var(--vx-surface) 92%,transparent);box-shadow:var(--vx-shadow-xs);backdrop-filter:blur(14px);transition:transform .32s var(--vi-ease)}.vi-note:nth-child(1){top:0;z-index:3}.vi-note:nth-child(2){top:44px;left:14px;right:14px;z-index:2;opacity:.82;transform:scale(.97)}.vi-note:nth-child(3){top:84px;left:28px;right:28px;z-index:1;opacity:.58;transform:scale(.94)}.vi-note .vi-icon{width:36px;height:36px;border-radius:12px}.vi-note .vi-icon svg{width:18px;height:18px}.vi-note strong,.vi-note small{display:block}.vi-note strong{font-size:.69rem}.vi-note small{font-size:.58rem;color:var(--vx-muted);margin-top:3px}

.vi-course-map{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:16px}.vi-week{position:relative;padding:12px 8px 10px;border:1px solid var(--vx-line);border-radius:14px;background:var(--vx-surface);text-align:center}.vi-week strong,.vi-week small{display:block}.vi-week strong{font-size:.66rem}.vi-week small{font-size:.55rem;color:var(--vx-muted);margin-top:3px}.vi-week::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--vx-line-strong);display:block;margin:0 auto 8px}.vi-week.done::before{background:var(--vi-teal);box-shadow:0 0 0 5px rgba(77,150,152,.10)}.vi-week.current{border-color:color-mix(in srgb,var(--vi-blue) 45%,var(--vx-line));background:color-mix(in srgb,var(--vi-blue) 5%,var(--vx-surface))}.vi-week.current::before{background:var(--vi-blue);animation:viStagePulse 2.8s infinite}

/* Client: quote intelligence and payment milestone graphics */
.vi-quote-breakdown{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.62fr);gap:15px;margin:14px 0 18px}.vi-quote-breakdown-card,.vi-payment-milestones{border:1px solid var(--vx-line);border-radius:18px;background:var(--vx-surface-2);padding:16px;position:relative;overflow:hidden}.vi-quote-breakdown-card::after{content:"GH";position:absolute;right:-8px;bottom:-31px;font-size:6rem;font-weight:950;opacity:.035;color:var(--vi-blue)}.vi-breakdown-line{display:flex;justify-content:space-between;gap:15px;padding:8px 0;border-bottom:1px dashed var(--vx-line);font-size:.75rem}.vi-breakdown-line span{color:var(--vx-muted)}.vi-breakdown-line.discount b{color:var(--vi-green)}.vi-breakdown-line.total{border:0;padding-top:11px}.vi-breakdown-line.total b{font-size:1rem}.vi-quote-progress{height:7px;border-radius:999px;background:var(--vx-bg-alt);overflow:hidden;margin-top:10px}.vi-quote-progress i{display:block;height:100%;width:var(--vi-paid,0%);border-radius:inherit;background:linear-gradient(90deg,var(--vi-blue),var(--vi-teal));transition:width .7s var(--vi-ease)}
.vi-payment-milestones h4{margin:0 0 14px;font-size:.82rem}.vi-milestone{display:grid;grid-template-columns:22px 1fr;gap:9px;position:relative;padding-bottom:14px}.vi-milestone:last-child{padding-bottom:0}.vi-milestone:not(:last-child)::after{content:"";position:absolute;left:10px;top:22px;bottom:0;width:2px;background:var(--vx-line)}.vi-milestone i{position:relative;z-index:1;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:var(--vx-surface);border:2px solid var(--vx-line);font-style:normal;font-size:.55rem;font-weight:900}.vi-milestone.done i{border-color:var(--vi-teal);background:rgba(77,150,152,.10);color:var(--vi-teal)}.vi-milestone.current i{border-color:var(--vi-gold);background:rgba(169,132,73,.10);color:var(--vi-gold);box-shadow:0 0 0 5px rgba(169,132,73,.08)}.vi-milestone strong,.vi-milestone small{display:block}.vi-milestone strong{font-size:.7rem}.vi-milestone small{font-size:.61rem;color:var(--vx-muted);margin-top:2px}

/* Client: revision flow graphic */
.vi-revision-flow{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;gap:8px;align-items:center;margin:0 0 16px;padding:14px;border:1px solid var(--vx-line);border-radius:17px;background:linear-gradient(135deg,color-mix(in srgb,var(--vx-blue-soft) 35%,var(--vx-surface)),var(--vx-surface))}.vi-revision-doc{position:relative;min-height:92px;padding:12px;border:1px solid var(--vx-line);border-radius:13px;background:var(--vx-surface);box-shadow:var(--vx-shadow-xs);transform-style:preserve-3d}.vi-revision-doc::before{content:"";position:absolute;right:8px;top:8px;width:20px;height:24px;border:1px solid var(--vx-line);border-radius:4px;background:linear-gradient(135deg,transparent 8px,var(--vx-bg-alt) 8px)}.vi-revision-doc small,.vi-revision-doc strong{display:block;max-width:80%}.vi-revision-doc small{font-size:.55rem;color:var(--vx-muted);text-transform:uppercase;letter-spacing:.08em}.vi-revision-doc strong{font-size:.7rem;margin-top:5px}.vi-revision-doc i{display:block;height:4px;border-radius:99px;background:var(--vx-line);margin-top:12px;width:72%}.vi-revision-doc i+ i{width:52%;margin-top:5px}.vi-revision-doc.feedback{border-color:color-mix(in srgb,var(--vi-gold) 32%,var(--vx-line))}.vi-revision-doc.final{border-color:color-mix(in srgb,var(--vi-teal) 38%,var(--vx-line))}.vi-revision-arrow{height:2px;background:linear-gradient(90deg,var(--vx-line-strong),var(--vi-blue));position:relative}.vi-revision-arrow::after{content:"";position:absolute;right:-1px;top:-4px;border-left:6px solid var(--vi-blue);border-top:5px solid transparent;border-bottom:5px solid transparent}

/* File/document cards become dimensional previews */
.version-card,.document-premium-card,.revision-return-card,.message-bubble,.activity-item,.premium-ledger>div{transition:transform .24s var(--vi-ease),box-shadow .24s var(--vi-ease),border-color .24s ease}
html[data-experience-tier="desktop"] .version-card:hover,html[data-experience-tier="desktop"] .document-premium-card:hover{transform:translateY(-4px) rotateX(1deg);box-shadow:var(--vx-shadow-sm);border-color:var(--vx-line-strong)}
.file-preview-icon,.doc-mini-preview{transform-style:preserve-3d;box-shadow:0 8px 18px rgba(31,55,73,.10)}
.file-preview-icon::after,.doc-mini-preview::after{content:"";position:absolute;inset:4px;border-radius:inherit;border-top:1px solid rgba(255,255,255,.38);pointer-events:none}

/* Upload visual feedback */
.upload-progress{position:relative;overflow:hidden}.upload-progress::after{content:"";position:absolute;inset:0;width:32%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);transform:translateX(-140%);animation:viUploadSweep 1.4s linear infinite}.upload-progress[hidden]::after{display:none}@keyframes viUploadSweep{to{transform:translateX(420%)}}
.vi-uploading .file-picker,.vi-uploading #revisionReturnFile{box-shadow:0 0 0 4px rgba(77,150,152,.08);border-color:color-mix(in srgb,var(--vi-teal) 45%,var(--vx-line))}

/* Empty states with branded visual hints */
.client-empty{position:relative;overflow:hidden;min-height:74px;padding:18px 18px 18px 62px!important;display:flex;align-items:center}.client-empty::before{content:"GH";position:absolute;left:15px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--vi-blue) 18%,var(--vx-surface)),color-mix(in srgb,var(--vi-teal) 12%,var(--vx-surface)));border:1px solid var(--vx-line);font-size:.62rem;font-weight:950;color:var(--vi-blue)}

/* Verification hologram-like digital effect (visual only; QR remains verification) */
.sp3d-verification-seal,.sp3d-document-seal-mini,.trust-seal-card .trust-seal,.sp3d-verify-seal{isolation:isolate;overflow:hidden}
.sp3d-verification-seal::after,.sp3d-document-seal-mini::after,.trust-seal-card .trust-seal::after,.sp3d-verify-seal::after{content:"";position:absolute;inset:-35%;z-index:3;pointer-events:none;background:conic-gradient(from 40deg,transparent 0 15%,rgba(122,184,205,.15) 22%,rgba(196,164,108,.18) 30%,rgba(126,178,161,.17) 39%,transparent 50% 100%);mix-blend-mode:screen;animation:viHolo 9s linear infinite}@keyframes viHolo{to{transform:rotate(360deg)}}

/* Notification graphics */
.notification-popover-item,.notification-item{position:relative;overflow:hidden}.notification-popover-item::after,.notification-item::after{content:"";position:absolute;left:0;top:12%;bottom:12%;width:2px;border-radius:3px;background:var(--vi-blue);opacity:.55}.notification-popover-item:has(.activity-icon.payment)::after,.notification-item.payment::after{background:var(--vi-green)}.notification-popover-item:has(.activity-icon.revision)::after,.notification-item.revision::after{background:var(--vi-gold)}

/* Admin visual depth and responsive intelligence */
.today-grid article,.kpi-v5,.panel-v5,.kanban-card,.analytics-card{transform-style:preserve-3d;transition:transform .26s var(--vi-ease),box-shadow .26s var(--vi-ease),border-color .26s ease}
html[data-experience-tier="desktop"] .today-grid article:hover,html[data-experience-tier="desktop"] .kpi-v5:hover{transform:translateY(-3px);box-shadow:var(--vx-shadow-sm)}
.today-grid article::before,.kpi-v5::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.13),transparent 42%);opacity:.8}
#statQuoted,#statCollected,#todayOutstanding{font-variant-numeric:tabular-nums}

/* Device-specific motion and layout */
@media(max-width:1024px){
  .vi-showcase{grid-template-columns:1fr}.vi-side-stack{grid-template-columns:1fr 1fr}.vi-icon-dock{grid-template-columns:repeat(4,1fr)}
  .vi-panel::after{animation-duration:16s}
}
@media(max-width:760px){
  .vi-section{padding-block:58px}.vi-panel{padding:18px;border-radius:22px}.vi-panel-head{display:block}.vi-panel-head .vi-icon{margin-top:12px}
  .vi-icon-dock{grid-template-columns:repeat(2,1fr)}.vi-side-stack{grid-template-columns:1fr}.vi-lifecycle{overflow-x:auto;grid-template-columns:repeat(6,minmax(82px,1fr));scrollbar-width:none;padding-bottom:10px}.vi-lifecycle::-webkit-scrollbar{display:none}.vi-lifecycle::before{left:44px;right:auto;width:calc(6 * 90px - 70px)}
  .vi-course-map{overflow-x:auto;grid-template-columns:repeat(5,minmax(96px,1fr));scroll-snap-type:x proximity;padding-bottom:6px}.vi-week{scroll-snap-align:start}
  .vi-quote-breakdown{grid-template-columns:1fr}.vi-revision-flow{grid-template-columns:1fr 24px 1fr 24px 1fr;padding:10px;gap:5px}.vi-revision-doc{min-height:78px;padding:9px}.vi-revision-doc::before{width:16px;height:20px}.vi-revision-doc small{font-size:.48rem}.vi-revision-doc strong{font-size:.61rem}.vi-revision-arrow::after{border-left-width:5px}
  .sp3d-verification-seal::after,.sp3d-document-seal-mini::after,.trust-seal-card .trust-seal::after,.sp3d-verify-seal::after{animation-duration:14s;opacity:.72}
  .notification-popover-item,.notification-item{transform:none!important}
}
@media(max-width:480px){
  .vi-icon-dock{gap:8px}.vi-icon-tile{padding:11px 7px}.vi-icon{width:40px;height:40px;border-radius:13px}.vi-icon svg{width:20px;height:20px}
  .vi-revision-flow{grid-template-columns:1fr;gap:7px}.vi-revision-arrow{width:2px;height:18px;margin:auto;background:linear-gradient(var(--vx-line-strong),var(--vi-blue))}.vi-revision-arrow::after{right:-4px;top:auto;bottom:-1px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--vi-blue);border-bottom:0}
  .vi-revision-doc{min-height:68px}.vi-notification-stack{height:148px}
}

/* Comfort and reduced-motion fallbacks */
html[data-comfort="true"] .vi-panel::after,html[data-comfort="true"] .vi-stage.current i,html[data-comfort="true"] .vi-week.current::before,html[data-comfort="true"] .upload-progress::after,html[data-comfort="true"] .sp3d-verification-seal::after,html[data-comfort="true"] .sp3d-document-seal-mini::after,html[data-comfort="true"] .trust-seal-card .trust-seal::after,html[data-comfort="true"] .sp3d-verify-seal::after{animation:none!important}
html[data-comfort="true"] .vi-panel,html[data-comfort="true"] .vi-icon-tile,html[data-comfort="true"] .version-card,html[data-comfort="true"] .document-premium-card{transform:none!important}
@media(prefers-reduced-motion:reduce){
  .vi-panel::after,.vi-stage.current i,.vi-week.current::before,.upload-progress::after,.sp3d-verification-seal::after,.sp3d-document-seal-mini::after,.trust-seal-card .trust-seal::after,.sp3d-verify-seal::after{animation:none!important}
  .vi-icon-tile,.version-card,.document-premium-card,.today-grid article,.kpi-v5,.panel-v5,.kanban-card,.analytics-card{transition:none!important;transform:none!important}
}

/* v6.2 repair: keep released file cards inside narrow mobile workspaces. */
@media(max-width:760px){
  .version-card{grid-template-columns:46px minmax(0,1fr)!important;max-width:100%;min-width:0;overflow:hidden}
  .version-card>div{min-width:0;overflow-wrap:anywhere}
  .version-card small,.version-card p{overflow-wrap:anywhere;word-break:break-word}
  .version-card em{display:none}
  .file-preview-icon{width:46px;height:56px;min-width:46px}
}

/* =========================================================
   v6.2.1 — Equal installments + mobile scroll performance
   ========================================================= */
.installment-preview-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:12px}
.installment-preview-head small,.installment-preview-head strong{display:block}.installment-preview-head small{font-size:.63rem;text-transform:uppercase;letter-spacing:.07em;color:var(--vx-muted);font-weight:850}.installment-preview-head strong{margin-top:4px;font-size:.9rem}
.installment-preview-list,.client-installment-grid{display:grid;gap:8px}.installment-preview-row,.client-installment{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:11px 12px;border:1px solid var(--vx-line);border-radius:13px;background:var(--vx-surface)}
.installment-preview-row>span,.client-installment>span{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800}.installment-preview-row i,.client-installment>span{font-style:normal}.installment-preview-row i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--vx-surface-muted);color:var(--vx-muted);font-size:.61rem}.installment-preview-row b,.client-installment>b{font-size:.78rem;font-variant-numeric:tabular-nums}.installment-preview-row small{grid-column:1/-1;color:var(--vx-muted);font-size:.61rem;padding-left:30px}
.installment-preview-row.due,.client-installment.due{border-color:color-mix(in srgb,var(--vi-blue) 42%,var(--vx-line));background:color-mix(in srgb,var(--vi-blue) 5%,var(--vx-surface))}.installment-preview-row.due i{background:var(--vi-blue);color:#fff}.installment-preview-row.paid,.client-installment.paid{border-color:color-mix(in srgb,var(--vi-green) 28%,var(--vx-line));background:color-mix(in srgb,var(--vi-green) 5%,var(--vx-surface))}.installment-preview-row.paid i{background:var(--vi-green);color:#fff}.installment-preview-row.partial,.client-installment.partial{border-color:color-mix(in srgb,var(--vi-gold) 36%,var(--vx-line));background:color-mix(in srgb,var(--vi-gold) 6%,var(--vx-surface))}.installment-schedule-card .section-title{margin-bottom:12px}.client-installment{grid-template-columns:34px minmax(0,1fr) auto;padding:12px 13px}.client-installment>span{width:29px;height:29px;border-radius:10px;display:grid;place-items:center;background:var(--vx-surface-muted);color:var(--vx-muted);font-size:.66rem}.client-installment>div strong,.client-installment>div small{display:block}.client-installment>div strong{font-size:.72rem}.client-installment>div small{margin-top:2px;color:var(--vx-muted);font-size:.59rem}.client-installment.due>span{background:var(--vi-blue);color:#fff}.client-installment.paid>span{background:var(--vi-green);color:#fff}.client-installment.partial>span{background:var(--vi-gold);color:#fff}

/* Phone scrolling is a distinct performance state. Decorative effects pause while
   the finger is moving; they resume shortly after scrolling stops. */
@media(max-width:760px){
  html[data-mobile-scrolling="true"] .sp3d-monogram-orb,
  html[data-mobile-scrolling="true"] .sp3d-doc-stack,
  html[data-mobile-scrolling="true"] .sp3d-payment-glass,
  html[data-mobile-scrolling="true"] .sp3d-shield,
  html[data-mobile-scrolling="true"] .sp3d-verify-seal,
  html[data-mobile-scrolling="true"] .sp3d-verification-seal,
  html[data-mobile-scrolling="true"] .sp3d-pathline::after,
  html[data-mobile-scrolling="true"] .vi-panel::after,
  html[data-mobile-scrolling="true"] .vi-stage.current i,
  html[data-mobile-scrolling="true"] .vi-week.current::before,
  html[data-mobile-scrolling="true"] .sp3d-verification-seal::after,
  html[data-mobile-scrolling="true"] .sp3d-document-seal-mini::after,
  html[data-mobile-scrolling="true"] .trust-seal-card .trust-seal::after,
  html[data-mobile-scrolling="true"] .sp3d-verify-seal::after,
  html[data-mobile-scrolling="true"] .float-card,
  html[data-mobile-scrolling="true"] .marquee-track,
  html[data-mobile-scrolling="true"] .orbit-ring.r2{animation-play-state:paused!important}

  html[data-mobile-scrolling="true"] .nav,
  html[data-mobile-scrolling="true"] .workspace-mobile-nav,
  html[data-mobile-scrolling="true"] .sp3d-payment-glass,
  html[data-mobile-scrolling="true"] .vi-note{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

  html[data-mobile-scrolling="true"] .sp3d-stage::before,
  html[data-mobile-scrolling="true"] .sp3d-payment-scene::before{filter:none!important}
  html[data-mobile-scrolling="true"] .sp3d-shield,
  html[data-mobile-scrolling="true"] .sp3d-file-shield-mini{filter:none!important}
  html[data-mobile-scrolling="true"] .vi-note,
  html[data-mobile-scrolling="true"] .document-premium-card,
  html[data-mobile-scrolling="true"] .workspace-section,
  html[data-mobile-scrolling="true"] .panel-v5{box-shadow:none!important}

  /* Lower-cost idle mobile graphics while preserving the premium design. */
  .sp3d-webgl{opacity:.24}
  .sp3d-stage::before{filter:blur(10px)}
  .sp3d-payment-glass{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .vi-note{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
  .sp3d-monogram-orb,.sp3d-doc-stack,.sp3d-payment-glass,.sp3d-shield,.sp3d-verify-seal{will-change:auto}

  /* Skip painting large off-screen blocks until they approach the viewport. */
  .section,.vi-section,.workspace-section,.panel-v5,.analytics-card,.settings-section-v5{content-visibility:auto;contain-intrinsic-size:1px 480px}
  .hero,.workspace-topbar,.workspace-mobile-nav,.premium-admin-side,.admin-top-v5{content-visibility:visible}

  .client-installment{grid-template-columns:30px minmax(0,1fr) auto;gap:8px;padding:10px}.client-installment>b{font-size:.72rem}.installment-preview-head{align-items:flex-start}.installment-preview-head>div:last-child{text-align:right}
}
@media(max-width:760px){
  .installment-schedule-card .section-title{display:block}
  .installment-schedule-card .section-title .status-chip{display:inline-flex;margin-top:10px;max-width:100%;white-space:normal}
}
@media(max-width:760px){
  .sp3d-payment-glass,.vi-note{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
/* v7.0.3 installment scheduling states */
.installment-preview-row.overdue,.client-installment.overdue{border-color:color-mix(in srgb,#a85d45 38%,var(--vx-line));background:color-mix(in srgb,#a85d45 6%,var(--vx-surface))}
.installment-preview-row.overdue i,.client-installment.overdue>span{background:#a85d45;color:#fff}