@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');
:root{--ink:#19213a;--muted:#77819a;--bg:#f5f6fb;--purple:#6558d3;--lav:#efedff;--teal:#13a99b;--line:#e7e9f1}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px 'DM Sans',sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0;border-radius:11px;padding:10px 14px;font-weight:750}header{height:72px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 4vw;gap:25px;position:sticky;top:0;z-index:2}.brand{font:800 17px Manrope;color:var(--ink);text-decoration:none;white-space:nowrap}.brand b{display:inline-grid;place-items:center;background:linear-gradient(135deg,#7569e8,#13b6a7);color:white;width:36px;height:36px;border-radius:12px;margin-right:8px}nav{display:flex;gap:5px;flex:1}nav button{background:transparent;color:var(--muted)}nav button.active,nav button:hover{background:var(--lav);color:var(--purple)}.account{display:flex;align-items:center;gap:10px;font-size:13px}.outline{background:white;border:1px solid var(--line);color:var(--ink)}main{max-width:1180px;margin:auto;padding:32px 22px 65px}.hero{background:linear-gradient(115deg,#211c58,#5146ad 65%,#138c8b);color:white;border-radius:24px;padding:42px;display:grid;grid-template-columns:1.4fr .6fr;align-items:center;gap:20px}.eyebrow{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:800;color:var(--purple)}.hero .eyebrow{color:#c9c4ff}.hero h1{font:800 clamp(32px,4vw,48px)/1.1 Manrope;letter-spacing:-1.5px;margin:12px 0}.hero p{color:#e2e0ff;line-height:1.7;max-width:650px}.hero .orb{border:1px solid #ffffff55;border-radius:50%;width:190px;height:190px;display:grid;place-items:center;font-size:52px;margin:auto}.primary{background:var(--purple);color:white}.hero .primary{background:white;color:#40378e}.soft{background:var(--lav);color:var(--purple)}.hero .soft{background:#ffffff22;color:white}.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}.stats,.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.stat,.card,.feature{background:white;border:1px solid var(--line);border-radius:16px;padding:19px}.stat strong{font:800 26px Manrope;display:block}.stat span,.muted{color:var(--muted)}.features{grid-template-columns:repeat(3,1fr)}.feature h3{margin:8px 0}.feature p{color:var(--muted);font-size:13px;line-height:1.5}.feature i{font-size:24px;color:var(--purple)}.head{margin:25px 0 15px}.head h1{font:800 32px Manrope;margin:6px 0}.head p{color:var(--muted)}.stack{display:grid;gap:14px}.field,label input,label select,label textarea,input,select,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink)}label{display:grid;gap:7px;font-weight:700;font-size:13px}.typegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.type{background:white;border:1px solid var(--line);text-align:left;padding:14px}.type.active{border:2px solid var(--purple);background:#faf9ff}.type small{display:block;color:var(--muted);margin-top:5px}.activity{display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.activity .info{flex:1}.activity small{display:block;color:var(--muted);margin-top:3px}.badge{font-size:10px;padding:5px 8px;border-radius:20px;background:#e7f8f2;color:#16816e;font-weight:800}.codebox{background:#211c58;color:white;border-radius:15px;padding:20px;display:flex;justify-content:space-between;align-items:center;margin:15px 0}.code{font:800 34px Manrope;letter-spacing:7px}.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:15px}.question{font:800 26px Manrope;margin:12px 0 20px}.answer{display:block;width:100%;text-align:left;background:#f7f8fc;border:1px solid var(--line);margin:8px 0}.answer.selected{background:var(--lav);border-color:var(--purple);color:var(--purple)}.barrow{margin:14px 0}.barrow div:first-child{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}.bar{height:10px;background:#eef0f6;border-radius:20px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#7568e8,#17b2a4)}.cloud{min-height:200px;background:#faf9ff;border-radius:14px;padding:20px;display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap}.cloud b{font-size:24px;color:var(--purple)}.cloud b:nth-child(3n){color:var(--teal)}.notice{background:#fff7e6;color:#80601a;border-radius:10px;padding:13px;font-size:13px;line-height:1.5}.small{font-size:12px}.dialogtop{display:flex;justify-content:space-between;align-items:center}.x{border-radius:50%;background:#f1f2f7;font-size:20px}.dialog{border:0;border-radius:18px;width:min(430px,calc(100% - 25px));padding:24px;box-shadow:0 20px 60px #0003}.dialog::backdrop{background:#17172f88}#authForm{display:grid;gap:13px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#202743;color:white;padding:12px 17px;border-radius:10px;display:none;z-index:8}footer{text-align:center;padding:20px;color:#9aa2b4;font-size:12px}.empty{text-align:center;padding:35px;color:var(--muted)}@media(max-width:800px){header{height:auto;flex-wrap:wrap;padding:12px}nav{order:3;width:100%;overflow:auto}.hero{grid-template-columns:1fr;padding:25px}.orb{display:none}.features{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}.typegrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){main{padding:20px 13px}.stats{grid-template-columns:repeat(2,1fr)}.features{grid-template-columns:1fr}.account #who{display:none}.codebox{display:block}.code{font-size:28px}.head h1{font-size:27px}}
.hidden{display:none!important}


/* Floating chatbot: independent of the learning interface */
.chatbot-widget{position:fixed;right:24px;bottom:24px;z-index:1000;font-family:'DM Sans',sans-serif}
.chatbot-toggle{display:flex;align-items:center;gap:9px;padding:13px 18px;border-radius:999px;color:#fff;background:linear-gradient(135deg,#6558d3,#159d9b);box-shadow:0 10px 30px #25205b35;transition:transform .25s ease,box-shadow .25s ease}
.chatbot-toggle:hover{transform:translateY(-3px);box-shadow:0 15px 34px #25205b45}
.chatbot-toggle-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ffffff28;font-size:18px}
.chatbot-panel{position:absolute;right:0;bottom:66px;width:min(390px,calc(100vw - 32px));height:min(620px,calc(100vh - 120px));min-height:390px;display:flex;flex-direction:column;overflow:hidden;border:1px solid #ffffffa8;border-radius:22px;background:#ffffffd9;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 24px 70px #17163838;opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:bottom right;transition:opacity .24s ease,transform .24s ease,visibility .24s}
.chatbot-panel.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.chatbot-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:linear-gradient(110deg,#211c58,#5146ad 70%,#138c8b);color:white}
.chatbot-heading strong,.chatbot-heading span{display:block}
.chatbot-heading strong{font-size:14px}
.chatbot-heading span{margin-top:3px;font-size:11px;color:#e1defe}
.chatbot-close{width:34px;height:34px;padding:0;border-radius:50%;background:#ffffff25;color:white;font-size:23px;line-height:1}
.chatbot-panel iframe{width:100%;height:100%;flex:1;border:0;background:white}
@media(max-width:600px){.chatbot-widget{right:14px;bottom:14px}.chatbot-panel{right:-2px;width:calc(100vw - 28px);height:min(72vh,620px);min-height:360px}.chatbot-toggle{padding:12px 15px}}

/* v2 additions */
nav{overflow-x:auto}nav button{white-space:nowrap}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.skillgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.skill h3{margin:0}.big{font:800 30px Manrope;margin:10px 0 6px}
.chip{font-size:11px;font-weight:800;padding:5px 9px;border-radius:20px;background:#eef0f6;color:#5a647d;white-space:nowrap}
.c-Locked{background:#eceef3;color:#8a93a8}.c-Available{background:var(--lav);color:var(--purple)}.c-Inprogress{background:#fff3d6;color:#8a6410}.c-Assessmentpending{background:#e3f1ff;color:#1f6fb5}.c-Completed{background:#e7f8f2;color:#16816e}.c-Needsimprovement{background:#ffe9e4;color:#b4452f}
.flow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.flow b{background:white;border:1px solid var(--line);border-radius:14px;padding:14px 18px}.flow i{color:var(--muted);font-style:normal}
.check{display:flex;gap:9px;align-items:flex-start;font-weight:500}.check input{width:auto;margin-top:3px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);white-space:nowrap}th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px}td.low{color:#b4452f;font-weight:800}
.badge.warn{background:#ffe9e4;color:#b4452f;margin-right:4px}
.qbox{padding:12px 0;border-bottom:1px solid var(--line)}.opt{display:flex;gap:9px;align-items:center;font-weight:500;padding:6px 0}.opt input{width:auto}
.likert{display:flex;gap:18px;margin-top:8px}.likert label{display:flex;gap:6px;align-items:center;font-weight:600}.likert input{width:auto}
.passage{background:#faf9ff;border-radius:12px;padding:16px;line-height:1.7;margin:10px 0}
.chartgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.chart{width:100%;height:auto;margin-top:8px}.chart .gl{stroke:#e7e9f1}.chart .ax{font-size:11px;fill:#77819a}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}
.tog{background:#eceef3;color:#5a647d}.tog.on{background:#e7f8f2;color:#16816e}
@media(max-width:800px){.skillgrid,.chartgrid,.form-grid{grid-template-columns:1fr}}

/* v3: portals, landing sections, portfolio */
.features.four{grid-template-columns:repeat(4,1fr)}
.portal{display:flex;flex-direction:column;gap:10px}.portal i{font-size:26px;color:var(--purple);font-style:normal}.portal h3{margin:0}.portal p{flex:1;margin:0;font-size:13px;line-height:1.5}
.card ul{line-height:1.7;margin:8px 0}.card h4{margin:16px 0 4px}details summary{cursor:pointer;font-weight:700;font-size:13px}
#toast{max-width:90vw;text-align:center}
@media(max-width:800px){.features.four{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.features.four{grid-template-columns:1fr}}
footer a{color:var(--purple);text-decoration:none;cursor:pointer}

/* v4: video lectures, live class */
.features.three{grid-template-columns:repeat(3,1fr)}@media(max-width:800px){.features.three{grid-template-columns:1fr}}
.danger{color:#b4452f;border-color:#f0c9c0}
.player{position:relative;width:100%;aspect-ratio:16/9;background:#0b0d1a;border-radius:16px;overflow:hidden}.player iframe,.player #ytPlayer{position:absolute;inset:0;width:100%;height:100%;border:0}
.comment{margin-top:12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--purple);border-radius:12px;padding:14px 16px;display:grid;gap:6px}.comment.done{border-left-color:var(--teal);background:#f1fbf9}.comment.done b{color:#16816e}
.vcard{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:start}.vcard img{width:200px;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#e9eaf4}.vcard h3{margin:0}@media(max-width:600px){.vcard{grid-template-columns:1fr}.vcard img{width:100%}}
.qbox{padding:12px 0;border-bottom:1px solid var(--line)}.qbox.right{background:#f1fbf9}.qbox.wrong{background:#fff3f0}.opt{display:flex;gap:9px;align-items:center;font-weight:500;padding:5px 0}.opt input{width:auto}.keyopt{color:#16816e;font-weight:700}
.quizlock{text-align:center;color:var(--muted)}
.livecard.on{border-color:#13a99b;background:linear-gradient(120deg,#f1fbf9,#fff)}.livebar{display:flex;align-items:center;gap:14px;background:#f1fbf9;border:1px solid #13a99b;border-radius:14px;padding:14px 18px;margin-bottom:16px}.livebar>div{flex:1}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 0 #e5484d88;animation:pulse 1.6s infinite}@keyframes pulse{70%{box-shadow:0 0 0 10px #e5484d00}100%{box-shadow:0 0 0 0 #e5484d00}}
.big-btn{padding:14px 26px;font-size:16px}
code{background:#eef0f6;padding:1px 5px;border-radius:5px}


/* ===== v5: Glassmorphism, Liquid Bubbles, Motion Graphics & Red/Green Glow ===== */
body{background:#f4f7fb;overflow-x:hidden}
header{background:rgba(248,250,252,.78)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.72)!important;box-shadow:0 4px 20px rgba(30,41,59,.04)}
nav{overflow-x:visible;flex-wrap:wrap}

.ambient-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.liquid-blob{position:absolute;filter:blur(48px);opacity:.42;animation:liquidMorph 18s ease-in-out infinite}
.blob-1{width:420px;height:420px;top:-90px;left:-90px;background:radial-gradient(circle,rgba(92,89,232,.42),rgba(20,184,166,.12))}
.blob-2{width:380px;height:380px;top:32%;right:-100px;background:radial-gradient(circle,rgba(20,184,166,.38),rgba(92,89,232,.1));animation-delay:-6s}
.blob-3{width:340px;height:340px;bottom:-90px;left:32%;background:radial-gradient(circle,rgba(99,91,255,.28),rgba(20,184,166,.16));animation-delay:-11s}
@keyframes liquidMorph{
  0%,100%{border-radius:42% 58% 70% 30%/45% 45% 55% 55%;transform:translate(0,0) scale(1)}
  33%{border-radius:64% 36% 42% 58%/55% 65% 35% 45%;transform:translate(24px,-18px) scale(1.06)}
  66%{border-radius:36% 64% 58% 42%/35% 48% 52% 65%;transform:translate(-18px,16px) scale(.96)}
}

.card,.feature,.portal,.stat{
  background:rgba(255,255,255,.68);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 12px 30px rgba(30,41,59,.06);
  transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s ease,border-color .24s ease;
}
.card:hover,.feature:hover,.portal:hover{transform:translateY(-4px);border-color:rgba(92,89,232,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 18px 38px rgba(92,89,232,.11)}

/* Fluid Section Switch */
#app{transition:opacity .17s ease,transform .22s cubic-bezier(.22,1,.36,1)}
#app.is-leaving{opacity:0;transform:translateY(8px) scale(.99)}
.view-enter{animation:viewIn .3s cubic-bezier(.22,1,.36,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(12px) scale(.988)}to{opacity:1;transform:translateY(0) scale(1)}}

/* Live Telemetry (Date, Time, Weather, Location) */
.live-telemetry{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.tele-item{background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.75);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 24px rgba(30,41,59,.05)}
.tele-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(92,89,232,.14),rgba(20,184,166,.14));color:#4338ca;flex-shrink:0}
.tele-item small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#64748b;font-weight:700}
.tele-item strong{display:block;font-size:14px;color:#1e293b;margin-top:2px}
@media(max-width:860px){.live-telemetry{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.live-telemetry{grid-template-columns:1fr}}

/* Auth / Login Page Glass & Motion */
.auth-card{position:relative;overflow:hidden;background:rgba(255,255,255,.82)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.85)!important;box-shadow:0 24px 60px rgba(81,70,173,.14)!important}
.auth-head{display:flex;align-items:center;justify-content:space-between;gap:14px}

/* Liquidified Mark Glows (Green = Good, Red = Low) */
@keyframes glowGreen{
  0%,100%{box-shadow:0 0 0 1px rgba(16,185,129,.45),0 10px 28px rgba(16,185,129,.22)}
  50%{box-shadow:0 0 0 4px rgba(16,185,129,.25),0 14px 38px rgba(16,185,129,.38)}
}
@keyframes glowRed{
  0%,100%{box-shadow:0 0 0 1px rgba(239,68,68,.45),0 10px 28px rgba(239,68,68,.2)}
  50%{box-shadow:0 0 0 4px rgba(239,68,68,.24),0 14px 36px rgba(239,68,68,.36)}
}
.glow-good{border-color:rgba(16,185,129,.6)!important;background:linear-gradient(135deg,rgba(236,253,245,.88),rgba(255,255,255,.78))!important;animation:glowGreen 2.8s ease-in-out infinite}
.glow-low{border-color:rgba(239,68,68,.55)!important;background:linear-gradient(135deg,rgba(254,242,242,.88),rgba(255,255,255,.78))!important;animation:glowRed 2.6s ease-in-out infinite}

/* Moving SVG Keyframes for 6 Skills & Mascot */
.orbit-slow{transform-origin:center;animation:orbitSpin 30s linear infinite}
.orbit-reverse{transform-origin:center;animation:orbitSpinR 22s linear infinite}
.wave-float{animation:waveFloat 5s ease-in-out infinite}
@keyframes orbitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes orbitSpinR{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes waveFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.skill-arc-1{transform-origin:24px 28px;animation:soundArc 1.8s ease-in-out infinite}
.skill-arc-2{transform-origin:24px 28px;animation:soundArc 1.8s ease-in-out .35s infinite}
@keyframes soundArc{0%,100%{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.eq-bar{transform-origin:center bottom}.eq-1{animation:eqB 1.1s ease-in-out infinite}.eq-2{animation:eqB 1.1s ease-in-out .2s infinite}.eq-3{animation:eqB 1.1s ease-in-out .4s infinite}.eq-4{animation:eqB 1.1s ease-in-out .15s infinite}
@keyframes eqB{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.read-scan{animation:scanSw 2.5s ease-in-out infinite}
@keyframes scanSw{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(14px);opacity:1}}
.pen-glide{animation:penGl 2.4s ease-in-out infinite}.ink-draw{stroke-dasharray:36;animation:inkDr 2.4s ease-in-out infinite}
@keyframes penGl{0%,100%{transform:translate(0,0)}50%{transform:translate(8px,-3px)}}
@keyframes inkDr{0%{stroke-dashoffset:36}60%,100%{stroke-dashoffset:0}}
.syntax-node-a{animation:synF 2.8s ease-in-out infinite}.syntax-node-b{animation:synF 2.8s ease-in-out 1.4s infinite}
@keyframes synF{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,-3px)}}
.vocab-dot-1{transform-origin:center;animation:vSp 2.2s ease-in-out infinite}.vocab-dot-2{transform-origin:center;animation:vSp 2.2s ease-in-out .7s infinite}.vocab-dot-3{transform-origin:center;animation:vSp 2.2s ease-in-out 1.3s infinite}
@keyframes vSp{0%,100%{transform:scale(.82);opacity:.55}50%{transform:scale(1.18);opacity:1}}

/* Ask Coach Halo & Pop */
.chatbot-toggle-wrap{position:relative;display:inline-block}
.chatbot-halo{position:absolute;inset:0;border-radius:999px;background:linear-gradient(135deg,#6558d3,#159d9b);animation:coachHalo 2.4s ease-in-out infinite;pointer-events:none}
@keyframes coachHalo{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.16);opacity:.12}}
.chatbot-toggle{position:relative}
.chatbot-head-left{display:flex;align-items:center;gap:10px}
.chatbot-mascot{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);display:grid;place-items:center;flex-shrink:0}
.chatbot-panel.is-open{transition:opacity .28s ease,transform .32s cubic-bezier(.34,1.56,.64,1),visibility .28s}

/* Motivational Quote Modal */
.quote-modal{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:16px;background:rgba(15,23,42,.42);backdrop-filter:blur(6px)}
.quote-box{max-width:440px;width:100%;border-radius:24px;padding:26px;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.85);box-shadow:0 24px 64px rgba(15,23,42,.22);text-align:center;animation:viewIn .3s cubic-bezier(.34,1.56,.64,1)}
.quote-box.glow-good{border:2px solid rgba(16,185,129,.65)}
.quote-box.glow-low{border:2px solid rgba(239,68,68,.55)}
.quote-box blockquote{margin:14px 0;font-size:16px;line-height:1.6;font-weight:600;color:#1e293b}

@media(prefers-reduced-motion:reduce){
  .liquid-blob,.orbit-slow,.orbit-reverse,.wave-float,.skill-arc-1,.skill-arc-2,.eq-bar,.read-scan,.pen-glide,.ink-draw,.syntax-node-a,.syntax-node-b,.vocab-dot-1,.vocab-dot-2,.vocab-dot-3,.chatbot-halo,.glow-good,.glow-low{animation:none!important}
}

/* v5.1: Interactive Skill Cards, Module Focus & Animated Research Intervention Pathway */
.skill-btn{text-align:left;width:100%;cursor:pointer;display:flex;flex-direction:column;gap:10px}
.skill-btn.is-active{border:2px solid rgba(92,89,232,.55)!important;background:rgba(255,255,255,.88)!important}
.skill-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.skill-pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:#eef2f6;color:#64748b}
.skill-btn.is-active .skill-pill{background:#5C59E8;color:#fff}

.focus-banner{margin-top:16px;border-left:4px solid #5C59E8!important;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.focus-actions{display:flex;flex-wrap:wrap;gap:8px}
.btn-good{background:#059669;color:#fff;font-size:12px;padding:9px 13px;border-radius:10px}
.btn-good:hover{background:#047857}
.btn-low{background:#e11d48;color:#fff;font-size:12px;padding:9px 13px;border-radius:10px}
.btn-low:hover{background:#be123c}

.pathway-card{margin-top:18px;padding:24px!important}
.pathway-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.pathway-wrap{position:relative}
.pathway-line{position:absolute;top:24px;left:36px;right:36px;height:4px;border-radius:999px;background:linear-gradient(90deg,rgba(92,89,232,.25),#5C59E8,#14B8A6,rgba(20,184,166,.25));background-size:200% 100%;animation:flowLine 4.5s linear infinite}
@keyframes flowLine{0%{background-position:0% 50%}100%{background-position:200% 50%}}
.pathway-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;z-index:1}
.pathway-step{background:rgba(255,255,255,.9);border:1px solid rgba(255,255,255,.95);border-radius:14px;padding:16px;box-shadow:0 6px 18px rgba(30,41,59,.05);transition:transform .2s ease}
.pathway-step:hover{transform:translateY(-4px)}
.pathway-num{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,#5C59E8,#14B8A6);color:#fff;font-size:12px;font-weight:800;margin-bottom:8px}
.pathway-step h4{margin:0;font-size:14px;color:#1e293b}
.pathway-step p{margin:6px 0 0;font-size:12px;color:#64748b;line-height:1.45}
@media(max-width:800px){.pathway-line{display:none}.pathway-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pathway-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pathway-line{animation:none!important}}

/* v5.2: Analysis Chart Motion Graphics & Mobile 60fps Optimization */
.chart-bar-anim{transform-box:fill-box;transform-origin:bottom;animation:barGrow .65s cubic-bezier(.22,1,.36,1) both}
@keyframes barGrow{from{transform:scaleY(0);opacity:.3}to{transform:scaleY(1);opacity:1}}
.chart-line-anim{stroke-dasharray:1200;stroke-dashoffset:1200;animation:lineDraw 1.1s cubic-bezier(.22,1,.36,1) forwards}
@keyframes lineDraw{to{stroke-dashoffset:0}}
.chart-dot-anim{transform-box:fill-box;transform-origin:center;animation:dotPop .4s cubic-bezier(.34,1.56,.64,1) .5s both}
@keyframes dotPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.tele-refresh{cursor:pointer}
.tele-refresh:active{transform:scale(.98)}

@media(max-width:768px){
  .liquid-blob{filter:blur(24px);opacity:.26;will-change:transform}
  .card,.feature,.portal,.stat,.tele-item{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.9)}
  header{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
}
@media(prefers-reduced-motion:reduce){
  .chart-bar-anim,.chart-line-anim,.chart-dot-anim{animation:none!important;stroke-dashoffset:0!important}
}

/* v5.3: Unpin sticky header/tabs on mobile so it scrolls out of view cleanly */
@media(max-width:800px){
  header{position:relative!important;top:auto!important;padding:10px 14px;gap:10px}
  nav{gap:4px}
  nav button{padding:7px 10px;font-size:13px}
}

/* v5.4: mobile header stays visible (slim, sticky) and the tabs live behind a menu icon */
.nav-toggle,.nav-scrim{display:none}
[id^="sec-"]{scroll-margin-top:72px}
@media(max-width:800px){
  header{position:sticky!important;top:0!important;z-index:60!important;height:58px;padding:0 12px!important;gap:8px!important;flex-wrap:nowrap!important;align-items:center}
  .brand{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
  .brand b{width:32px;height:32px;margin-right:6px}
  .account{flex:none;gap:6px}.account #who{display:none}
  .account button{padding:8px 12px;font-size:13px}
  .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;flex:none;width:44px;height:44px;padding:0 11px;border-radius:12px;background:var(--lav)}
  .nav-toggle span{display:block;height:2px;border-radius:2px;background:var(--purple);transition:transform .25s ease,opacity .2s ease}
  header.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  header.nav-open .nav-toggle span:nth-child(2){opacity:0}
  header.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  nav{position:absolute;top:100%;left:0;right:0;flex:none;display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;padding:8px 12px 14px;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(25,33,58,.14);max-height:calc(100vh - 58px);max-height:calc(100dvh - 58px);overflow-x:hidden;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .22s ease,transform .22s ease,visibility .22s}
  header.nav-open nav{opacity:1;visibility:visible;transform:none}
  nav button{width:100%;min-height:46px;padding:12px 14px;font-size:15px;text-align:left;border-radius:12px}
  body.nav-open .nav-scrim{display:block;position:fixed;inset:58px 0 0 0;background:rgba(25,33,58,.3);z-index:50}
}
@media(prefers-reduced-motion:reduce){.nav-toggle span,nav{transition:none!important}}

/* ============================ v6: research journey, builder, forum, live quiz ============================ */
.backbtn{display:inline-flex;align-items:center;gap:6px;background:white;border:1px solid var(--line);color:var(--ink);padding:8px 14px;border-radius:999px;font-size:13px;margin-bottom:6px}
.backbtn:hover{background:var(--lav);color:var(--purple)}
.c-Excellent{background:#e7f8f2;color:#16816e}.c-Good{background:var(--lav);color:var(--purple)}.c-Developing{background:#fff3d6;color:#8a6410}.c-Needssupport{background:#ffe9e4;color:#b4452f}
.linklike{background:none;padding:0;color:var(--muted);font-size:11px;font-weight:600;text-decoration:underline}.linkbtn{display:inline-block;padding:10px 14px;border-radius:11px;font-weight:750;text-decoration:none}
.media-img{max-width:100%;border-radius:14px;display:block;margin:auto}
/* journey */
.journey{display:grid;gap:14px}.jstep{display:grid;grid-template-columns:44px 1fr;gap:14px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:18px;padding:18px}
.jstep.is-open{border-color:#cfc9ff;box-shadow:0 8px 24px rgba(101,88,211,.08)}.jstep.is-locked{opacity:.72}.jstep.is-done .jnum{background:#13a99b}
.jnum{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--purple);color:white;font:800 17px Manrope}.jstep.is-locked .jnum{background:#c5cad8}
.jbody h3{margin:0;font:800 18px Manrope}.jbody p{margin:6px 0 10px}.lockmsg{color:#8a93a8;font-size:13px;font-weight:600}
.timeline{display:grid;gap:4px;margin-bottom:16px}.tl{display:grid;grid-template-columns:36px 1fr;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line)}.tl>b{width:36px;height:36px;border-radius:50%;background:var(--lav);color:var(--purple);display:grid;place-items:center}.tl h3{margin:4px 0 2px}.tl p{margin:0}
/* confidence meter */
.conf-card{max-width:460px;margin:24px auto;text-align:center;background:linear-gradient(160deg,#fdeef6,#ece9ff 55%,#e3f6f4)!important}.conf-card h2{font:800 24px Manrope;margin:0}
.gauge{width:230px;max-width:80%;margin:6px auto 0;display:block}.gauge-num{font:800 44px Manrope;fill:#19213a}.conf-word{font:700 18px Manrope;color:#40378e;min-height:26px}
.conf-card input[type=range]{width:100%;accent-color:var(--purple);height:28px}
/* likert */
.likert-scale{display:flex;flex-wrap:wrap;gap:6px 16px}.likert-row{border:0;border-bottom:1px solid var(--line);padding:14px 0;margin:0}.likert-row legend{font-weight:700;padding:0;margin-bottom:10px;line-height:1.45}
.likert-opts{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.likert-opts label{display:grid;justify-items:center;gap:4px;cursor:pointer;font-weight:600;text-align:center}
.likert-opts input{position:absolute;opacity:0;width:1px}.likert-opts span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid #d9d5f7;background:white;font-weight:800;color:var(--purple);transition:.15s}
.likert-opts input:checked+span{background:var(--purple);color:white;border-color:var(--purple);transform:scale(1.08)}.likert-opts input:focus-visible+span{outline:3px solid #b9b1ff}.likert-opts em{font-style:normal;font-size:11px;color:var(--muted)}
/* quiz runner */
.qcard{display:grid;gap:14px}.qtext{font:700 19px/1.45 Manrope;padding:18px;background:#faf9ff;border-radius:14px}.ar{font-weight:600;margin:4px 0}.ar b{color:var(--purple);margin-right:6px}
.tiles{display:grid;gap:10px;grid-template-columns:1fr 1fr}.tiles.t2{grid-template-columns:1fr 1fr}.tile{display:flex;align-items:center;gap:12px;text-align:left;padding:16px;border-radius:14px;color:white;font-weight:700;line-height:1.35;min-height:64px;border:3px solid transparent;transition:transform .12s,opacity .2s;position:relative}
.tile span{flex:none;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.25);display:grid;place-items:center;font-weight:800}
.tile.c0{background:#5a4fcf}.tile.c1{background:#0f9d90}.tile.c2{background:#d9822b}.tile.c3{background:#cf4f7a}
.tile:not(:disabled):hover{transform:translateY(-2px)}.tile.picked{border-color:#19213a;box-shadow:0 0 0 3px #fff inset}.tile:disabled{cursor:default}.tile.dim{opacity:.38}.tile.right{border-color:#19213a;box-shadow:0 0 0 3px #fff inset}
.tile .cnt{margin-left:auto;font-style:normal;font-size:12px;background:rgba(0,0,0,.22);padding:4px 8px;border-radius:20px;white-space:nowrap}
.tiles.big .tile{min-height:92px;font-size:17px}
.fb{border-radius:12px;padding:14px;background:#eef0f6;display:grid;gap:6px;line-height:1.5}.fb.good{background:#e7f8f2;color:#0f5d50}.fb.bad{background:#ffe9e4;color:#8c3320}.expl{background:rgba(255,255,255,.65);border-radius:9px;padding:9px 11px;color:var(--ink)}
.palette{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.palette button{width:34px;height:34px;padding:0;border-radius:9px;background:#eef0f6;color:#5a647d;font-size:12px}.palette .ans{background:#d8f3ee;color:#16816e}.palette .cur{outline:2px solid var(--purple)}
.match{display:grid;gap:8px}.mrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}.mrow span{font-weight:600}
.readwrap{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:start}.passage-pane{max-height:72vh;overflow:auto;position:sticky;top:84px}.passage-body{line-height:1.8;font-size:15.5px}.passage-body h2,.passage-body h3{font-family:Manrope}
.result{text-align:center;max-width:460px;margin:20px auto}.result h1{font:800 54px Manrope;margin:8px 0}
/* flashcards */
.flash{perspective:1200px;max-width:560px;height:300px;margin:10px auto;cursor:pointer}.flash-in{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d}.flash.flipped .flash-in{transform:rotateY(180deg)}
.flash-f,.flash-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:22px;display:grid;place-items:center;padding:28px;text-align:center;font:800 26px/1.35 Manrope;box-shadow:0 14px 34px rgba(25,33,58,.12)}
.flash-f{background:linear-gradient(140deg,#211c58,#5146ad);color:white}.flash-b{background:white;color:var(--ink);transform:rotateY(180deg);font-size:20px;font-weight:600;border:2px solid #d9d5f7}.flash-nav{justify-content:center;align-items:center}
/* library and builder */
.createbar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.createtile{display:grid;gap:4px;justify-items:start;text-align:left;background:white;border:1px solid var(--line);border-radius:16px;padding:16px;color:var(--ink)}.createtile:hover{border-color:var(--purple);transform:translateY(-2px)}
.createtile i{font-style:normal;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;color:white;background:linear-gradient(135deg,#7569e8,#13b6a7)}.createtile span{font-size:12px;color:var(--muted);font-weight:500}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;background:#eceef5;padding:4px;border-radius:12px}.seg button{background:transparent;color:var(--muted);padding:8px 12px;font-size:13px}.seg .on{background:white;color:var(--purple);box-shadow:0 2px 6px rgba(25,33,58,.08)}
.libh{font:800 15px Manrope;margin:18px 0 8px;color:#40378e}.lib-row{display:grid;gap:10px}.lib-acts{display:flex;flex-wrap:wrap;gap:6px}.lib-acts button{padding:7px 11px;font-size:12.5px}
.edtop{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:14px 0}.edtop h1{font:800 26px Manrope;margin:4px 0 0}.edtop .actions{margin:0;align-items:center}
.edwrap{display:grid;grid-template-columns:1.25fr .75fr;gap:16px;align-items:start}.edwrap.one{grid-template-columns:1fr}
.qlist{background:linear-gradient(170deg,#2a2466,#40378e)!important;color:white;position:sticky;top:84px;max-height:78vh;overflow:auto}.qlist h3{margin:0;color:white}.qlist .muted{color:#c9c4ff}
.qitem{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:13.5px;line-height:1.4}.qitem.cur{background:rgba(255,255,255,.1);margin:0 -10px;padding:10px}
.qbtns{display:flex;gap:3px;flex:none}.qbtns button{width:28px;height:28px;padding:0;border-radius:8px;background:rgba(255,255,255,.14);color:white;font-size:12px}.qbtns button:disabled{opacity:.3}.qbtns .danger{color:#ffb3a4}
.rtbar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;background:#f1f2f8;border-radius:10px}.rtbar button{background:white;border:1px solid var(--line);color:var(--ink);padding:6px 10px;font-size:13px;font-weight:600}
.passage-edit{min-height:260px;border:1px solid #d9dcea;border-radius:12px;padding:16px;line-height:1.8;background:white;outline:none}.passage-edit:focus{border-color:var(--purple);box-shadow:0 0 0 3px #e4e0ff}
.previewbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}details.card>summary{font-size:14px}
/* control, attendance */
.stage-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.switch{display:flex;align-items:center;gap:8px;cursor:pointer;flex:none}.switch input{position:absolute;opacity:0;width:1px}.switch span{width:46px;height:26px;border-radius:20px;background:#cfd3e0;position:relative;transition:.2s}.switch span:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:white;transition:.2s}
.switch input:checked+span{background:#13a99b}.switch input:checked+span:after{left:23px}.switch input:focus-visible+span{outline:3px solid #b9b1ff}.switch em{font-style:normal;font-size:12px;font-weight:800;width:46px}
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}.statrow .stat{text-align:center}.statrow .stat b{display:block;font:800 30px Manrope;color:var(--purple)}.statrow .stat span{font-size:12px;color:var(--muted)}
.steps{line-height:1.8;padding-left:20px;margin:0}
/* forum */
.thread-row{display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;width:100%;color:var(--ink);font-weight:500;border:1px solid var(--line)}.thread-row:hover{border-color:var(--purple)}
.chat{display:grid;gap:12px}.msgs{max-height:56vh;overflow:auto;display:grid;gap:12px;padding:4px}.msg{max-width:82%;display:grid;gap:3px;justify-items:start}.msg.mine{margin-left:auto;justify-items:end}
.msg .who{font-size:11.5px;font-weight:700}.bubble{background:#f1f2f8;border-radius:14px 14px 14px 4px;padding:10px 13px;line-height:1.5;overflow-wrap:anywhere}.msg.mine .bubble{background:var(--purple);color:white;border-radius:14px 14px 4px 14px}.msg.staff:not(.mine) .bubble{background:#e7f8f2}
.chatbox{display:flex;gap:8px;align-items:flex-end;border-top:1px solid var(--line);padding-top:12px}.chatbox textarea{flex:1}
/* live quiz */
.lg-stage{background:linear-gradient(150deg,#211c58,#40378e 60%,#136f79);color:white;border-radius:24px;padding:28px;display:grid;gap:16px;text-align:center}.lg-stage .eyebrow{color:#c9c4ff}.lg-stage h1{font:800 34px Manrope;margin:0}.lg-stage .muted{color:#d5d2f5}
.lg-stage .row{flex-wrap:wrap}.lg-stage .actions{justify-content:center;margin-top:4px}.lg-stage .primary{background:white;color:#40378e}.lg-stage .outline{background:transparent;border-color:rgba(255,255,255,.5);color:white}.lg-stage .primary:disabled{opacity:.5}
.lg-code{font:800 clamp(44px,11vw,92px) Manrope;letter-spacing:.08em;display:flex;justify-content:center}.lg-code i{width:.12em}
.namecloud{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}.namecloud span{background:rgba(255,255,255,.16);padding:6px 12px;border-radius:20px;font-size:13px;font-weight:700;animation:pop .35s ease}
.lg-q{font:800 clamp(20px,3.4vw,30px)/1.35 Manrope;background:rgba(255,255,255,.1);border-radius:18px;padding:24px;text-align:center}.lg-q .ar{text-align:left;font-size:.8em}.lg-q .ar b{color:#b8f3ea}
.lg-timer{font:800 22px Manrope}.lgbar{background:rgba(255,255,255,.18)}.lgbar i{background:linear-gradient(90deg,#f2a33a,#5eead4);transition:width .25s linear}
.board{list-style:none;padding:0;margin:0 auto;display:grid;gap:8px;max-width:440px;width:100%}.board li{display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;background:rgba(255,255,255,.12);padding:10px 14px;border-radius:12px;text-align:left;animation:pop .4s ease both}.board li.me{background:rgba(94,234,212,.3)}.board em{font-style:normal;font-weight:800}
.lg-result{text-align:center;justify-items:center}.lg-stage .fb{color:var(--ink)}.lg-stage .fb.good{color:#0f5d50}.lg-stage .fb.bad{color:#8c3320}.lg-stage .card{color:var(--ink);text-align:left}
.lg-wait{display:flex;gap:10px;justify-content:center}.lg-wait span{width:14px;height:14px;border-radius:50%;background:#5eead4;animation:bob 1s infinite ease-in-out}.lg-wait span:nth-child(2){animation-delay:.15s}.lg-wait span:nth-child(3){animation-delay:.3s}
.codein{font:800 24px Manrope;letter-spacing:.3em;text-align:center;max-width:220px}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:40}.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall 2.6s linear forwards}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}
@media(max-width:900px){.readwrap,.edwrap{grid-template-columns:1fr}.passage-pane{position:static;max-height:46vh}.qlist{position:static;max-height:none}.createbar{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tiles{grid-template-columns:1fr}.tiles.t2{grid-template-columns:1fr 1fr}.jstep{grid-template-columns:34px 1fr;gap:10px;padding:14px}.jnum{width:34px;height:34px;font-size:14px}.likert-opts span{width:38px;height:38px}.likert-opts em{font-size:9.5px}.statrow{grid-template-columns:1fr 1fr 1fr;gap:8px}.statrow .stat b{font-size:22px}.activity{flex-wrap:wrap}.msg{max-width:94%}.lg-stage{padding:18px;border-radius:18px}.flash{height:250px}.flash-f,.flash-b{font-size:21px}.stage-row{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.flash-in,.tile,.namecloud span,.board li,.lg-wait span,.confetti i{animation:none!important;transition:none!important}.confetti{display:none}}

/* v6.1: progress grid on the student research page */
.pcard{display:grid;gap:14px}.ppct{font:800 20px Manrope;color:var(--purple)}.pbar{height:12px}.pbar i{transition:width .8s ease}
.pgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:0;row-gap:16px}
.ptile{position:relative;display:grid;justify-items:center;gap:6px;background:transparent;padding:0 4px 10px;border-radius:14px;color:var(--ink);text-align:center;font-weight:500}
.pconn{position:absolute;top:19px;left:50%;width:100%;height:6px;background:#e3e5ef;z-index:0}.pconn i{display:block;height:100%;background:linear-gradient(90deg,#7568e8,#17b2a4);transition:width .8s ease}
.pgrid .ptile:last-child .pconn{display:none}
.pnode{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 16px Manrope;background:white;border:3px solid #d5d8e6;color:#8a93a8;transition:.3s}
.ptile.is-open .pnode{border-color:var(--purple);color:var(--purple)}.ptile.is-done .pnode{background:#13a99b;border-color:#13a99b;color:white}.ptile.is-locked .pnode{font-size:14px}
.ptile.is-cur .pnode{box-shadow:0 0 0 0 rgba(101,88,211,.5);animation:pnode 1.8s infinite}.ptile.is-sel{background:var(--lav)}.ptile.is-sel .pnode{transform:scale(1.08)}
.ptile b{font:800 13px/1.25 Manrope}.pstat{font-size:11px;color:var(--muted);font-weight:700}.ptile.is-done .pstat{color:#16816e}.ptile.is-open .pstat{color:var(--purple)}
.ptile:hover{background:#f3f2ff}.ptile:focus-visible{outline:3px solid #b9b1ff}
.jdetail h3{margin:0;font:800 19px Manrope;display:flex;align-items:center;gap:10px}.jd-num{width:30px;height:30px;border-radius:50%;background:var(--purple);color:white;display:grid;place-items:center;font-size:13px}.jdetail{display:grid;gap:10px;margin-top:14px}
.saybar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
@keyframes pnode{70%{box-shadow:0 0 0 10px rgba(101,88,211,0)}100%{box-shadow:0 0 0 0 rgba(101,88,211,0)}}
@media(max-width:900px){.pgrid{grid-template-columns:repeat(4,1fr)}.pgrid .ptile:nth-child(4n) .pconn{display:none}}
@media(max-width:560px){.pgrid{grid-template-columns:repeat(2,1fr)}.pgrid .ptile:nth-child(4n) .pconn{display:block}.pgrid .ptile:nth-child(2n) .pconn{display:none}.ptile{padding:8px 4px 10px}.pconn{top:27px}}
@media(prefers-reduced-motion:reduce){.ptile.is-cur .pnode{animation:none}.pbar i,.pconn i{transition:none}}