/* =========================================================
   Grade Helper v6.1 — Luxury Academic 3D Experience
   Lightweight CSS 3D + SVG + vanilla WebGL enhancements
   ========================================================= */

.sp3d-stage{
  --sp3d-x:0deg;--sp3d-y:0deg;
  position:relative;
  width:min(100%,620px);
  min-height:600px;
  margin-inline:auto;
  perspective:1400px;
  transform-style:preserve-3d;
  isolation:isolate;
}
.sp3d-stage::before{
  content:"";position:absolute;inset:9% 4% 7%;z-index:-4;border-radius:42px;
  background:
    radial-gradient(circle at 26% 24%,rgba(91,140,190,.18),transparent 34%),
    radial-gradient(circle at 72% 34%,rgba(86,157,155,.17),transparent 33%),
    radial-gradient(circle at 52% 78%,rgba(166,139,91,.10),transparent 35%);
  filter:blur(22px);
}
.sp3d-webgl{position:absolute;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none;opacity:.58}
html[data-theme="dark"] .sp3d-webgl{opacity:.48}
.sp3d-gridplane{
  position:absolute;left:7%;right:7%;bottom:5%;height:46%;z-index:-2;
  transform:rotateX(69deg) translateZ(-54px);transform-origin:50% 100%;
  background-image:linear-gradient(rgba(88,126,152,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(88,126,152,.14) 1px,transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(to top,rgba(0,0,0,.88),transparent 88%);
}
.sp3d-object{position:absolute;transform-style:preserve-3d;will-change:transform;transition:transform .22s ease-out}
.sp3d-depth-1{transform:translate3d(var(--sp3d-y1,0px),var(--sp3d-x1,0px),42px)}
.sp3d-depth-2{transform:translate3d(var(--sp3d-y2,0px),var(--sp3d-x2,0px),78px)}
.sp3d-depth-3{transform:translate3d(var(--sp3d-y3,0px),var(--sp3d-x3,0px),118px)}

.sp3d-monogram-orb{
  top:4%;right:12%;width:108px;height:108px;border-radius:32px;z-index:6;
  display:grid;place-items:center;color:#F2F8FB;font-size:2rem;font-weight:900;letter-spacing:-.06em;
  background:linear-gradient(145deg,#1B3B58,#4F7EA6 54%,#5B9A9A);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 28px 55px rgba(24,62,91,.24),inset 0 1px 0 rgba(255,255,255,.38);
  animation:sp3dFloatA 9s ease-in-out infinite;
}
.sp3d-monogram-orb::before,.sp3d-monogram-orb::after{
  content:"";position:absolute;border-radius:36px;inset:-14px;border:1px solid rgba(103,155,185,.20);transform:translateZ(-24px) rotate(8deg)
}
.sp3d-monogram-orb::after{inset:-27px;border-color:rgba(90,156,152,.14);transform:translateZ(-42px) rotate(-11deg)}
.sp3d-monogram-orb small{position:absolute;bottom:12px;font-size:.48rem;letter-spacing:.14em;opacity:.76}

.sp3d-doc-stack{left:3%;top:16%;width:290px;height:330px;z-index:3;transform-style:preserve-3d;animation:sp3dFloatB 11s ease-in-out infinite}
.sp3d-doc{
  position:absolute;width:220px;height:285px;border-radius:20px;padding:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(244,249,251,.94));
  border:1px solid rgba(197,214,224,.92);box-shadow:0 24px 50px rgba(30,54,70,.13);
  transform-style:preserve-3d;
}
html[data-theme="dark"] .sp3d-doc{background:linear-gradient(160deg,#20303B,#17252E);border-color:#3A4D59;box-shadow:0 24px 50px rgba(0,0,0,.28)}
.sp3d-doc.back{left:54px;top:35px;transform:translateZ(-70px) rotateY(-10deg) rotateZ(7deg);opacity:.76}
.sp3d-doc.mid{left:30px;top:18px;transform:translateZ(-32px) rotateY(-6deg) rotateZ(-4deg);opacity:.9}
.sp3d-doc.front{left:2px;top:0;transform:translateZ(18px) rotateY(5deg) rotateZ(-2deg)}
.sp3d-doc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:21px}
.sp3d-doc-logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(145deg,#315F87,#5C8AB0);color:white;font-size:.64rem;font-weight:900}
.sp3d-doc-badge{font-size:.54rem;text-transform:uppercase;letter-spacing:.09em;color:#457A6E;background:#E1F0EA;padding:6px 8px;border-radius:999px;font-weight:900}
html[data-theme="dark"] .sp3d-doc-badge{background:#263F39;color:#9FD0BD}
.sp3d-doc h4{margin:0 0 7px;font-size:.9rem;color:var(--vx-ink)}
.sp3d-doc p{margin:0 0 16px;font-size:.64rem;line-height:1.6;color:var(--vx-muted)}
.sp3d-paper-lines{display:grid;gap:7px}.sp3d-paper-lines i{display:block;height:7px;border-radius:99px;background:linear-gradient(90deg,#DDE6EC,#EFF3F5)}
.sp3d-paper-lines i:nth-child(2){width:82%}.sp3d-paper-lines i:nth-child(3){width:66%}
html[data-theme="dark"] .sp3d-paper-lines i{background:linear-gradient(90deg,#31424E,#26353F)}

.sp3d-payment-glass{
  right:1%;top:34%;width:235px;padding:18px 18px 16px;border-radius:22px;z-index:7;
  background:linear-gradient(145deg,rgba(250,253,254,.88),rgba(235,244,247,.78));
  border:1px solid rgba(196,214,225,.9);backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 25px 55px rgba(35,65,83,.14);animation:sp3dFloatC 10s ease-in-out infinite;
}
html[data-theme="dark"] .sp3d-payment-glass{background:linear-gradient(145deg,rgba(31,47,58,.92),rgba(21,34,43,.84));border-color:#3A4E5A}
.sp3d-payment-glass small,.sp3d-payment-glass strong,.sp3d-payment-glass span{display:block}
.sp3d-payment-glass small{text-transform:uppercase;letter-spacing:.1em;font-weight:850;color:var(--vx-muted);font-size:.56rem}
.sp3d-payment-glass strong{font-size:1.38rem;margin:7px 0 4px;color:var(--vx-ink)}
.sp3d-payment-glass span{font-size:.66rem;color:var(--vx-muted)}
.sp3d-card-chip{width:31px;height:23px;border-radius:7px;margin:13px 0;background:linear-gradient(135deg,#D2B36F,#F2DBA6 48%,#B18C48);box-shadow:inset 0 0 0 1px rgba(111,84,38,.18)}
.sp3d-payment-status{display:flex!important;align-items:center;gap:7px!important;margin-top:11px!important;color:#3F8068!important;font-weight:800!important}.sp3d-payment-status::before{content:"✓";width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#DFF1E8;font-size:.63rem}

.sp3d-shield{
  left:12%;bottom:2%;width:112px;height:132px;z-index:8;display:grid;place-items:center;
  filter:drop-shadow(0 20px 24px rgba(28,75,86,.18));animation:sp3dFloatA 12s ease-in-out infinite reverse;
}
.sp3d-shield-shape{position:absolute;inset:0;background:linear-gradient(150deg,#E5F3F2,#B9D9D7 45%,#6A9FA0);clip-path:polygon(50% 0,88% 14%,85% 66%,50% 100%,15% 66%,12% 14%);border-radius:28px}
.sp3d-shield-inner{position:relative;z-index:2;width:64px;height:78px;border-radius:14px;background:linear-gradient(180deg,#FBFDFE,#EAF1F4);border:1px solid rgba(64,111,122,.18);display:grid;place-items:center;color:#315C68;font-weight:900;font-size:.72rem;box-shadow:0 10px 20px rgba(49,89,100,.15)}
.sp3d-shield-inner::after{content:"SECURE";position:absolute;bottom:9px;font-size:.42rem;letter-spacing:.11em}

.sp3d-verify-seal{
  right:8%;bottom:6%;width:122px;height:122px;border-radius:50%;z-index:9;display:grid;place-items:center;text-align:center;
  color:#294B62;background:radial-gradient(circle at 34% 28%,#FDF9E8,#E7D8A6 44%,#B99C5A 72%,#7F6837 100%);
  border:1px solid rgba(123,98,44,.34);box-shadow:0 22px 45px rgba(64,54,30,.18),inset 0 0 0 8px rgba(255,255,255,.22);
  animation:sp3dSeal 14s linear infinite;
}
.sp3d-verify-seal::before{content:"";position:absolute;inset:10px;border-radius:50%;border:1px dashed rgba(82,69,39,.42)}
.sp3d-verify-seal strong{font-size:.92rem;letter-spacing:.03em}.sp3d-verify-seal small{display:block;font-size:.47rem;letter-spacing:.12em;margin-top:4px}

.sp3d-pathboard{
  position:absolute;left:21%;right:17%;bottom:18%;height:82px;z-index:2;transform:translateZ(-20px) rotateX(5deg);
}
.sp3d-pathline{position:absolute;left:0;right:0;top:28px;height:2px;background:linear-gradient(90deg,rgba(81,126,164,.22),rgba(82,151,149,.72),rgba(81,126,164,.22));overflow:hidden}
.sp3d-pathline::after{content:"";position:absolute;inset:0;width:36%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent);animation:sp3dScan 5.8s linear infinite}
.sp3d-pathnodes{display:grid;grid-template-columns:repeat(5,1fr);position:relative;z-index:2}
.sp3d-pathnodes div{text-align:center}.sp3d-pathnodes i{display:block;width:14px;height:14px;margin:21px auto 6px;border-radius:50%;background:#547FA4;border:3px solid var(--vx-surface-2);box-shadow:0 0 0 3px rgba(84,127,164,.15)}
.sp3d-pathnodes div:nth-child(n+4) i{background:#5A9896}.sp3d-pathnodes small{font-size:.52rem;color:var(--vx-muted);font-weight:800}

/* Client workspace 3D progress */
.sp3d-ring{transform:perspective(620px) rotateX(10deg) rotateY(-8deg);box-shadow:0 18px 36px rgba(50,85,110,.14)}
.sp3d-ring::after{content:"";position:absolute;inset:8px;border-radius:50%;box-shadow:inset 8px 10px 18px rgba(255,255,255,.20),inset -8px -10px 18px rgba(32,65,88,.12);pointer-events:none}
.sp3d-payment-scene{position:relative;min-height:210px;perspective:900px}
.sp3d-payment-scene::before{content:"";position:absolute;inset:14% 8%;background:radial-gradient(circle,rgba(80,144,151,.10),transparent 67%);filter:blur(18px)}

.sp3d-file-hero,.sp3d-document-hero{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px 20px;margin-bottom:18px;border:1px solid var(--vx-line);border-radius:20px;background:linear-gradient(135deg,var(--vx-surface-2),var(--vx-surface));box-shadow:var(--vx-shadow-sm);perspective:850px;overflow:hidden}
.sp3d-file-shield-mini{width:78px;height:88px;position:relative;transform:rotateY(-14deg) rotateX(6deg);filter:drop-shadow(0 14px 20px rgba(48,88,101,.14))}
.sp3d-file-shield-mini::before{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,90% 15%,85% 67%,50% 100%,15% 67%,10% 15%);background:linear-gradient(145deg,#DFF0EE,#8EB9B6)}
.sp3d-file-shield-mini::after{content:"▤";position:absolute;inset:18px 19px;border-radius:12px;display:grid;place-items:center;background:var(--vx-surface-2);color:#3F6E78;font-weight:900;border:1px solid var(--vx-line)}
.sp3d-document-seal-mini{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 34% 28%,#FFF9E5,#E5D09B 50%,#A88848);color:#42505A;font-weight:900;transform:rotateY(-15deg) rotateX(8deg);box-shadow:0 17px 30px rgba(84,65,35,.16),inset 0 0 0 6px rgba(255,255,255,.25)}
.sp3d-document-seal-mini span{font-size:.7rem}.sp3d-document-seal-mini small{display:block;font-size:.44rem;letter-spacing:.08em}

/* Verification and trust 3D seals */
.verify-card{position:relative;overflow:visible}
.sp3d-verify-orbit{position:absolute;right:-34px;top:-42px;width:126px;height:126px;perspective:760px;pointer-events:none}
.sp3d-verify-orbit .sp3d-verification-seal{position:absolute;inset:0;width:100%;height:100%;right:auto;bottom:auto}
.trust-seal-card{transform-style:preserve-3d;perspective:900px}
.trust-seal-card .trust-seal{transform:translateZ(34px) rotateY(-8deg);box-shadow:0 22px 45px rgba(32,66,83,.15)}

/* Premium admin depth */
.today-grid article,.kpi-v5,.analytics-card,.kanban-card{transform-style:preserve-3d;transition:transform .18s ease,box-shadow .18s ease}
.today-grid article:hover,.kpi-v5:hover,.analytics-card:hover,.kanban-card:hover{transform:perspective(900px) translateY(-2px) rotateX(.8deg);box-shadow:var(--vx-shadow-md)!important}

@keyframes sp3dFloatA{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes sp3dFloatB{0%,100%{translate:0 0}50%{translate:8px -8px}}
@keyframes sp3dFloatC{0%,100%{translate:0 0}50%{translate:-7px -11px}}
@keyframes sp3dSeal{0%{transform:rotateZ(-3deg) rotateY(-6deg)}50%{transform:rotateZ(3deg) rotateY(8deg)}100%{transform:rotateZ(-3deg) rotateY(-6deg)}}
@keyframes sp3dScan{from{transform:translateX(-120%)}to{transform:translateX(360%)}}

html[data-comfort="true"] .sp3d-object,
html[data-comfort="true"] .sp3d-monogram-orb,
html[data-comfort="true"] .sp3d-doc-stack,
html[data-comfort="true"] .sp3d-payment-glass,
html[data-comfort="true"] .sp3d-shield,
html[data-comfort="true"] .sp3d-verify-seal,
html[data-comfort="true"] .sp3d-pathline::after{animation:none!important}
html[data-comfort="true"] .sp3d-webgl{opacity:.20}
html[data-comfort="true"] .sp3d-stage{--sp3d-x1:0px!important;--sp3d-y1:0px!important;--sp3d-x2:0px!important;--sp3d-y2:0px!important;--sp3d-x3:0px!important;--sp3d-y3:0px!important}
html[data-comfort="true"] .sp3d-ring{transform:none}
html[data-sp3d-reduced="true"] .sp3d-object,
html[data-sp3d-reduced="true"] .sp3d-monogram-orb,
html[data-sp3d-reduced="true"] .sp3d-doc-stack,
html[data-sp3d-reduced="true"] .sp3d-payment-glass,
html[data-sp3d-reduced="true"] .sp3d-shield,
html[data-sp3d-reduced="true"] .sp3d-verify-seal,
html[data-sp3d-reduced="true"] .sp3d-pathline::after{animation:none!important}

@media(prefers-reduced-motion:reduce){
  .sp3d-object,.sp3d-monogram-orb,.sp3d-doc-stack,.sp3d-payment-glass,.sp3d-shield,.sp3d-verify-seal,.sp3d-pathline::after{animation:none!important}
  .sp3d-stage{--sp3d-x1:0px!important;--sp3d-y1:0px!important;--sp3d-x2:0px!important;--sp3d-y2:0px!important;--sp3d-x3:0px!important;--sp3d-y3:0px!important}
}
@media(max-width:980px){
  .sp3d-stage{min-height:560px;max-width:580px}
  .sp3d-monogram-orb{right:9%}.sp3d-payment-glass{right:0}.sp3d-verify-seal{right:5%}
}
@media(max-width:760px){
  .sp3d-stage{min-height:470px;max-width:430px;margin-top:8px}
  .sp3d-webgl{opacity:.32}.sp3d-gridplane{opacity:.55}
  .sp3d-monogram-orb{width:78px;height:78px;border-radius:24px;font-size:1.45rem;right:4%;top:4%}
  .sp3d-doc-stack{transform:scale(.78);transform-origin:top left;left:0;top:16%}
  .sp3d-payment-glass{width:185px;padding:14px;right:0;top:43%}
  .sp3d-payment-glass strong{font-size:1rem}
  .sp3d-shield{width:82px;height:96px;left:4%;bottom:0}
  .sp3d-shield-inner{width:48px;height:60px}
  .sp3d-verify-seal{width:88px;height:88px;right:4%;bottom:2%}.sp3d-verify-seal strong{font-size:.68rem}.sp3d-verify-seal small{font-size:.36rem}
  .sp3d-pathboard{left:16%;right:16%;bottom:12%;height:62px}.sp3d-pathnodes small{display:none}
  .sp3d-file-hero,.sp3d-document-hero{grid-template-columns:1fr;text-align:center}.sp3d-file-shield-mini,.sp3d-document-seal-mini{margin:auto}
}

/* v6.1 repair: standalone verification and trust medallions */
.sp3d-verification-seal{
  position:relative;width:100%;height:100%;border-radius:50%;display:grid;place-items:center;text-align:center;
  color:#31495B;background:radial-gradient(circle at 32% 26%,#FFFDF3 0%,#F4E4AF 32%,#C4A765 63%,#8A713D 100%);
  border:1px solid rgba(123,98,44,.32);box-shadow:0 20px 40px rgba(67,54,30,.17),inset 0 0 0 8px rgba(255,255,255,.24);
  transform:rotateY(-9deg) rotateX(7deg);animation:sp3dSeal 14s ease-in-out infinite;
}
.sp3d-verification-seal::before{content:"";position:absolute;inset:10px;border-radius:50%;border:1px dashed rgba(79,67,40,.38)}
.sp3d-verification-seal strong{display:block;font-size:1rem;letter-spacing:.03em}.sp3d-verification-seal small{display:block;font-size:.45rem;letter-spacing:.13em;margin-top:3px}
.trust-seal-card .trust-seal{
  position:relative;width:100px;height:100px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#29495A;background:radial-gradient(circle at 30% 25%,#FDFCF6,#DDEBE8 35%,#76AAA7 62%,#456E89 100%);
  border:1px solid rgba(71,110,128,.28);box-shadow:0 22px 44px rgba(36,72,88,.17),inset 0 0 0 8px rgba(255,255,255,.22)!important;
}
.trust-seal-card .trust-seal::before{content:"";position:absolute;inset:10px;width:auto;height:auto;border-radius:50%;display:block;background:transparent;border:1px dashed rgba(48,86,99,.36)}
.trust-seal-card .trust-seal span{position:relative;z-index:2;font-size:1.12rem;font-weight:950}.trust-seal-card .trust-seal small{position:relative;z-index:2;font-size:.48rem;letter-spacing:.13em;font-weight:900}
html[data-comfort="true"] .sp3d-verification-seal{animation:none!important;transform:none}

/* v6.1.2 mobile repair: keep the verification medallion inside the viewport. */
@media(max-width:520px){
  .sp3d-verify-orbit{right:4px;top:-34px;width:104px;height:104px}
  .sp3d-verification-seal strong{font-size:.86rem}
  .sp3d-verification-seal small{font-size:.4rem}
}

/* v6.2.1 mobile scroll compositor safeguards */
@media(max-width:760px){
  .sp3d-object{transition:none}
  html[data-mobile-scrolling="true"] .sp3d-stage{transform:none!important}
  html[data-mobile-scrolling="true"] .sp3d-webgl{opacity:.12}
  html[data-mobile-scrolling="true"] .sp3d-gridplane{opacity:.30}
}