/* Smarty PANCE Study Groups */ .sp-sg{--sg-navy:#1c4587;--sg-ink:#1f2937;--sg-muted:#6b7280;--sg-line:#e5e7eb;--sg-soft:#f4f7fc;--sg-green:#15803d;--sg-amber:#b45309;--sg-red:#b91c1c; font-family:Lato,"Helvetica Neue",Arial,sans-serif;color:var(--sg-ink);max-width:1100px;margin:0 auto 40px;font-size:16px;line-height:1.5} .sp-sg *{box-sizing:border-box} .sp-sg h1,.sp-sg h2{font-family:inherit !important;color:var(--sg-ink) !important;letter-spacing:0;text-transform:none} .sp-sg h1{font-size:30px !important;line-height:1.2 !important;margin:4px 0 8px !important;font-weight:800 !important} .sp-sg h2{font-size:19px !important;line-height:1.3 !important;margin:0 0 10px !important;font-weight:800 !important} .sp-sg p{margin:0 0 10px;font-family:inherit !important} .sp-sg a{color:var(--sg-navy)} .sp-sg .sg-muted{color:var(--sg-muted);font-weight:400} .sp-sg .sg-small{font-size:13px} .sp-sg .sg-head{background:linear-gradient(135deg,#1c4587,#2c5fb3);color:#fff;border-radius:14px;padding:22px 24px;margin:0 0 16px} .sp-sg .sg-head h1{color:#fff !important} .sp-sg .sg-kicker{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.85} .sp-sg .sg-card .sg-kicker{color:var(--sg-navy);opacity:1} .sp-sg .sg-sub{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:15px} .sp-sg .sg-chip{background:rgba(255,255,255,.18);border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700} .sp-sg .sg-adminbar{background:#fff7e6;border:1px solid #f5d38b;border-radius:10px;padding:8px 12px;font-size:14px;margin:0 0 16px} .sp-sg .sg-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start} .sp-sg .sg-main,.sp-sg .sg-side{display:flex;flex-direction:column;gap:16px;min-width:0} .sp-sg .sg-card{background:#fff;border:1px solid var(--sg-line);border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px rgba(0,0,0,.04)} .sp-sg > .sg-card{margin-bottom:16px} .sp-sg .sg-center{max-width:620px;margin:24px auto;text-align:center} .sp-sg .sg-focus-sys{font-size:22px;font-weight:800;color:var(--sg-navy);margin:2px 0 6px} .sp-sg .sg-note{font-style:italic} .sp-sg .sg-steps{margin:8px 0 12px 20px;padding:0} .sp-sg .sg-steps li{margin:0 0 4px} .sp-sg .sg-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px} .sp-sg .sg-stat{background:var(--sg-soft);border-radius:10px;padding:12px} .sp-sg .sg-stat b{display:block;font-size:26px;line-height:1.1;color:var(--sg-navy)} .sp-sg .sg-stat span{font-size:13px;color:var(--sg-muted)} .sp-sg .sg-locked{margin:12px 0 0;background:var(--sg-soft);border-radius:10px;padding:10px 12px;font-size:14px} .sp-sg .sg-bars{list-style:none !important;margin:0 !important;padding:0 !important} .sp-sg .sg-bars li{margin:0 0 12px !important;padding:0 !important;list-style:none !important} .sp-sg .sg-bars li:before{display:none !important} .sp-sg .sg-bar-top{display:flex;justify-content:space-between;gap:8px;font-size:15px;margin-bottom:4px} .sp-sg .sg-bar{position:relative;height:10px;background:#e8edf5;border-radius:999px;overflow:visible;margin:4px 0 10px} .sp-sg .sg-bar i{display:block;height:100%;background:var(--sg-navy);border-radius:999px} .sp-sg .sg-bar-green i{background:var(--sg-green)} .sp-sg .sg-bar em{position:absolute;top:-3px;width:3px;height:16px;background:var(--sg-amber);border-radius:2px;margin-left:-1px} .sp-sg .sg-strong{font-size:14px;margin-top:6px} .sp-sg .sg-table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 12px} .sp-sg .sg-table th,.sp-sg .sg-table td{border:0 !important;border-bottom:1px solid var(--sg-line) !important;padding:8px 6px !important;text-align:left;background:none !important} .sp-sg .sg-table th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--sg-muted);font-weight:700} .sp-sg .sg-table tr.sg-me td{background:#eef4ff !important;font-weight:700} .sp-sg .sg-you{background:var(--sg-navy);color:#fff;border-radius:999px;font-size:11px;padding:1px 7px;font-weight:700} .sp-sg .sg-pill{display:inline-block;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700} .sp-sg .sg-pill-active{background:#dcfce7;color:var(--sg-green)} .sp-sg .sg-pill-waiting{background:#fef3c7;color:var(--sg-amber)} .sp-sg .sg-pill-invite{background:#fee2e2;color:var(--sg-red)} .sp-sg .sg-pill-ended{background:#f3f4f6;color:var(--sg-muted)} .sp-sg .sg-form{display:flex;flex-direction:column;gap:10px;margin-top:12px;border-top:1px solid var(--sg-line);padding-top:12px} .sp-sg .sg-form label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:700} .sp-sg .sg-form label .sg-muted{display:inline;font-weight:400} .sp-sg .sg-form label.sg-check{flex-direction:row;align-items:center;gap:8px} .sp-sg .sg-form input[type=text],.sp-sg .sg-form select,.sp-sg .sg-copytext{width:100% !important;max-width:100% !important;border:1px solid #cbd5e1 !important;border-radius:8px !important;padding:8px 10px !important;font:inherit !important;font-weight:400 !important;background:#fff !important;color:var(--sg-ink) !important;height:auto !important;box-shadow:none !important} .sp-sg .sg-copytext{font-size:13px !important;margin:8px 0 !important} .sp-sg .sg-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .sp-sg a.sg-btn,.sp-sg button.sg-btn{display:inline-block !important;float:none !important;width:auto !important;height:auto !important;margin:0 !important;padding:9px 16px !important;border-radius:8px !important;border:2px solid var(--sg-navy) !important;background:var(--sg-navy) !important;color:#fff !important;font:700 15px/1.2 Lato,"Helvetica Neue",Arial,sans-serif !important;text-decoration:none !important;cursor:pointer;text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;text-shadow:none !important;min-width:0 !important} .sp-sg a.sg-btn:hover,.sp-sg button.sg-btn:hover{filter:brightness(1.1)} .sp-sg a.sg-btn.sg-btn-ghost,.sp-sg button.sg-btn.sg-btn-ghost{background:#fff !important;color:var(--sg-navy) !important} .sp-sg .sg-form button.sg-btn{align-self:flex-start} .sp-sg .sg-seatline{font-size:15px} .sp-sg .sg-details{margin-top:10px} .sp-sg .sg-details summary{cursor:pointer;font-weight:700;color:var(--sg-navy)} .sp-sg .sg-faculty{background:linear-gradient(180deg,#f4f7fc,#fff);border-color:#c7d6f0} .sp-sg .sg-faculty-on{background:#f0fdf4;border-color:#bbf7d0} .sp-sg .sg-list{list-style:none;margin:0;padding:0;text-align:left} .sp-sg .sg-list li{padding:8px 0;border-bottom:1px solid var(--sg-line)} .sp-sg .sg-toast{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:10px;padding:8px 12px;margin:0 0 12px;font-weight:700} .sp-sg .sg-toast-expired,.sp-sg .sg-toast-denied{background:#fef2f2;border-color:#fecaca} .sp-sg .sg-privacy{font-size:13px;color:var(--sg-muted);margin:8px 0 0;text-align:center} @media (max-width:820px){ .sp-sg .sg-grid{grid-template-columns:1fr} .sp-sg .sg-head{padding:18px 16px} .sp-sg h1{font-size:24px !important} .sp-sg .sg-card{padding:16px} .sp-sg .sg-table{font-size:14px} } /* Landing page: matches /institutional-pricing/ (#sp-inst) */ body.sp-sg-page .main-title-section-wrapper{display:none !important} .sp-sg .sgl{--acc:#1D5FD1;--acc-h:#16479E;--ink:#0E1A2B;--t2:#3B4658;--t3:#4A5568;--mist:#F4F7FB;--soft:#FBFCFE;--line:#E3E8EF;--line2:#C9D2DE;--onacc:#EAF1FF;--good:#15803D;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);font-size:17px;line-height:1.6} .sp-sg .sgl *{box-sizing:border-box} .sp-sg .sgl .band{background:var(--bg,#fff);box-shadow:0 0 0 100vmax var(--bg,#fff);clip-path:inset(0 -100vmax)} .sp-sg .sgl .band.mist{--bg:var(--mist)} .sp-sg .sgl .band.accent{--bg:var(--acc);color:#fff} .sp-sg .sgl .wrap{max-width:1200px;margin:0 auto;padding:88px 24px} .sp-sg .sgl h1,.sp-sg .sgl h2,.sp-sg .sgl h3{font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif !important;color:var(--ink) !important;text-transform:none !important;letter-spacing:-.01em !important;font-weight:800 !important} .sp-sg .sgl h1{font-size:52px !important;line-height:1.08 !important;letter-spacing:-.02em !important;margin:0 0 20px !important} .sp-sg .sgl .h2-38{font-size:38px !important;line-height:1.15 !important;margin:0 0 14px !important} .sp-sg .sgl .h2-24{font-size:24px !important;line-height:1.25 !important;margin:0 0 8px !important} .sp-sg .sgl h3{font-size:19px !important;line-height:1.3 !important;margin:14px 0 6px !important;font-weight:700 !important} .sp-sg .sgl p{margin:0 0 12px;color:var(--t2)} .sp-sg .sgl a{color:var(--acc)} .sp-sg .sgl .eyebrow{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--acc);margin:0 0 14px} .sp-sg .sgl .lead{font-size:20px;line-height:1.55;color:var(--t2);max-width:620px;margin:0 0 28px} .sp-sg .sgl .intro{font-size:18px;color:var(--t3);max-width:720px} .sp-sg .sgl .small{font-size:15px;color:var(--t3);margin:16px 0 0} .sp-sg .sgl .sec-head{margin:0 0 40px} .sp-sg .sgl .btns{display:flex;flex-wrap:wrap;gap:12px} .sp-sg .sgl .btn{display:inline-flex !important;align-items:center;justify-content:center;min-height:48px;padding:14px 24px !important;border-radius:8px !important;font:600 16px/1.2 Inter,system-ui,sans-serif !important;text-decoration:none !important;border:1px solid transparent !important;cursor:pointer;text-transform:none !important;letter-spacing:0 !important;box-shadow:none !important;transition:background .15s,border-color .15s} .sp-sg .sgl .btn-primary{background:var(--acc) !important;color:#fff !important} .sp-sg .sgl .btn-primary:hover{background:var(--acc-h) !important} .sp-sg .sgl .btn-secondary{background:#fff !important;color:var(--ink) !important;border-color:var(--line2) !important} .sp-sg .sgl .btn-secondary:hover{border-color:var(--ink) !important} .sp-sg .sgl .btn-inverse{background:#fff !important;color:var(--acc) !important} .sp-sg .sgl .btn-inverse:hover{background:var(--onacc) !important} .sp-sg .sgl .btn-outline{background:transparent !important;color:#fff !important;border-color:rgba(255,255,255,.75) !important} .sp-sg .sgl .btn-outline:hover{border-color:#fff !important;background:rgba(255,255,255,.08) !important} /* hero */ .sp-sg .sgl .hero .wrap{display:flex;align-items:center;gap:56px;padding-top:80px;padding-bottom:96px} .sp-sg .sgl .hero-copy{flex:1 1 44%;min-width:0} .sp-sg .sgl .hero-shot{flex:1 1 56%;min-width:0} /* app window mock (mirrors the group page) */ .sp-sg .sgl .mock{display:block;text-decoration:none !important;color:#122640;border-radius:16px;background:#fff;border:1px solid #dbe4ee;box-shadow:0 30px 70px rgba(14,26,43,.18),0 2px 6px rgba(14,26,43,.06);overflow:hidden;transform:perspective(1600px) rotateY(-4deg) rotateX(2deg);transition:transform .35s ease,box-shadow .35s ease;font-family:Lato,Inter,system-ui,sans-serif} .sp-sg .sgl .mock:hover{transform:none;box-shadow:0 34px 80px rgba(14,26,43,.22)} .sp-sg .sgl .mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f4f7fb;border-bottom:1px solid #e3e8ef} .sp-sg .sgl .mock-bar i{width:10px;height:10px;border-radius:50%;background:#d6dde6} .sp-sg .sgl .mock-bar span{margin-left:10px;font-size:12px;color:#5a6b80;background:#fff;border:1px solid #e3e8ef;border-radius:999px;padding:2px 12px} .sp-sg .sgl .mock-app{display:grid;grid-template-columns:132px minmax(0,1fr);min-height:330px;background:#eef3f8} .sp-sg .sgl .mock-side{background:linear-gradient(180deg,#0f2f5c 0%,#12386d 100%);padding:14px 8px;display:flex;flex-direction:column;gap:3px} .sp-sg .sgl .mock-brand{color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px 10px} .sp-sg .sgl .mock-side span{font-size:12px;font-weight:700;color:#c9d9ec;padding:6px 8px;border-radius:7px;position:relative} .sp-sg .sgl .mock-side span.on{background:rgba(255,255,255,.13);color:#fff} .sp-sg .sgl .mock-side span.on:before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:#25BEF4} .sp-sg .sgl .mock-main{padding:14px 16px;display:grid;gap:10px;align-content:start} .sp-sg .sgl .mock-eyebrow{margin:0;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#0e86b5} .sp-sg .sgl .mock-h{margin:-6px 0 0;font-size:17px;font-weight:900;color:#122640;line-height:1.2} .sp-sg .sgl .mock-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .sp-sg .sgl .mock-kpis div{background:#fff;border:1px solid #dbe4ee;border-top:3px solid #25BEF4;border-radius:8px;padding:7px 9px;display:grid} .sp-sg .sgl .mock-kpis div:nth-child(2){border-top-color:#36BCB1}.sp-sg .sgl .mock-kpis div:nth-child(3){border-top-color:#163F7A} .sp-sg .sgl .mock-kpis small{font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5a6b80} .sp-sg .sgl .mock-kpis b{font-size:18px;font-weight:900;color:#122640;line-height:1.15} .sp-sg .sgl .mock-cards{display:grid;grid-template-columns:1.25fr 1fr;gap:8px} .sp-sg .sgl .mock-card{background:#fff;border:1px solid #dbe4ee;border-radius:8px;padding:9px 10px;display:grid;gap:6px;align-content:start} .sp-sg .sgl .mock-ch{margin:0;font-size:11px;font-weight:900;color:#122640;display:flex;align-items:center;gap:6px} .sp-sg .sgl .mock-ch:before{content:"";width:3px;height:11px;border-radius:2px;background:#25BEF4} .sp-sg .sgl .mock-focus{margin:0;font-size:14px;font-weight:900;color:#163F7A} .sp-sg .sgl .mock-sys{display:grid;grid-template-columns:54px 1fr;gap:6px;align-items:center;font-size:10px;color:#3b4658} .sp-sg .sgl .mock-sys i{position:relative;height:5px;border-radius:3px;background:#e3f6fb} .sp-sg .sgl .mock-sys em{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:#25BEF4} .sp-sg .sgl .mock-sys u{position:absolute;top:-2px;width:2px;height:9px;background:#122640;opacity:.6} .sp-sg .sgl .mock-lb{display:grid;grid-template-columns:18px 1fr auto;gap:6px;align-items:center;font-size:10.5px;font-weight:700;background:#f8fafc;border-radius:6px;padding:3px 6px} .sp-sg .sgl .mock-lb b{font-size:10.5px;color:#5a6b80} .sp-sg .sgl .mock-rank{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:#e7eef6;font-size:9px;font-weight:900} .sp-sg .sgl .mock-rank.r1{background:#f6c945}.sp-sg .sgl .mock-rank.r2{background:#d5dde7}.sp-sg .sgl .mock-rank.r3{background:#e9b48a} .sp-sg .sgl .mock-cta{display:block;padding:11px 16px;background:#fff;border-top:1px solid #e3e8ef;font-size:14px;font-weight:700;color:#1D5FD1;text-align:center} /* features */ .sp-sg .sgl .grid-f{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .sp-sg .sgl .card{border:1px solid var(--line);border-radius:12px;padding:28px;background:#fff} .sp-sg .sgl .card svg{width:28px;height:28px} .sp-sg .sgl .card p{font-size:16px;margin:0} /* steps */ .sp-sg .sgl .steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none !important;margin:32px 0 0 !important;padding:0 !important} .sp-sg .sgl .steps li{list-style:none !important;background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px !important;margin:0 !important;display:flex;flex-direction:column;gap:6px} .sp-sg .sgl .steps .num{font:800 28px/1 "Plus Jakarta Sans",Inter,sans-serif;color:var(--acc);margin:0 0 6px} .sp-sg .sgl .steps strong{font-size:17px;color:var(--ink)} .sp-sg .sgl .steps .d{font-size:15px;color:var(--t3);line-height:1.5} /* pricing */ .sp-sg .sgl .tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .sp-sg .sgl .tier{border:1px solid var(--line);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:8px;background:var(--soft)} .sp-sg .sgl .tier b{font:800 30px/1.1 "Plus Jakarta Sans",Inter,sans-serif;color:var(--acc)} .sp-sg .sgl .tier .range{font-weight:700;color:var(--ink);margin:0 0 6px} .sp-sg .sgl .tier .price{font-size:15px;color:var(--t3);line-height:1.45} .sp-sg .sgl .tier .price strong{color:var(--ink);font-size:17px} /* privacy */ .sp-sg .sgl .privacy .wrap{display:flex;gap:24px;align-items:flex-start;padding-top:64px;padding-bottom:64px} .sp-sg .sgl .privacy svg{width:44px;height:44px;flex:0 0 44px} .sp-sg .sgl .privacy p{max-width:760px;margin:0} /* parallax photo band */ body.sp-sg-page{overflow-x:clip} .sp-sg .sgl .px{position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);min-height:640px;display:flex;align-items:center;justify-content:center;background:#0E1A2B;isolation:isolate} .sp-sg .sgl .px-img{position:absolute;left:0;top:-14%;width:100% !important;height:128% !important;max-width:none !important;object-fit:cover;object-position:50% 30%;filter:brightness(1.15);margin:0 !important;border-radius:0 !important;will-change:transform;z-index:-2} .sp-sg .sgl .px:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 58% 75% at 50% 50%,rgba(14,26,43,.80) 0%,rgba(14,26,43,.55) 55%,rgba(14,26,43,.28) 100%)} .sp-sg .sgl .px-in{max-width:760px;padding:96px 24px;text-align:center} .sp-sg .sgl .px .eyebrow{color:#9DC0FF} .sp-sg .sgl .px h2{color:#fff !important;font-size:46px !important;line-height:1.1 !important;margin:0 0 18px !important;text-shadow:0 2px 24px rgba(0,0,0,.35)} .sp-sg .sgl .px p{color:#E6EEFA;font-size:19px;line-height:1.55;margin:0 auto 30px;max-width:620px;text-shadow:0 1px 12px rgba(0,0,0,.35)} .sp-sg .sgl .px .btns{justify-content:center} /* request form */ .sp-sg .sgl .reqform{max-width:760px;display:grid;gap:18px} .sp-sg .sgl .reqform label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px;color:var(--ink)} .sp-sg .sgl .reqform .opt{font-weight:400;color:var(--t3)} .sp-sg .sgl .reqform input,.sp-sg .sgl .reqform select,.sp-sg .sgl .reqform textarea{width:100% !important;max-width:100% !important;min-height:48px;border:1px solid var(--line2) !important;border-radius:8px !important;padding:12px 14px !important;font:400 16px/1.4 Inter,system-ui,sans-serif !important;color:var(--ink) !important;background:#fff !important;box-shadow:none !important;margin:0 !important} .sp-sg .sgl .reqform textarea{min-height:110px} .sp-sg .sgl .reqform input:focus,.sp-sg .sgl .reqform select:focus,.sp-sg .sgl .reqform textarea:focus{outline:2px solid var(--acc) !important;outline-offset:1px;border-color:var(--acc) !important} .sp-sg .sgl .two{display:grid;grid-template-columns:1fr 1fr;gap:18px} .sp-sg .sgl .hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden} .sp-sg .sgl .note{max-width:760px;border-radius:8px;padding:14px 16px;margin:0 0 24px;font-weight:600;font-size:16px} .sp-sg .sgl .note.ok{background:#ECFDF3;color:var(--good);border:1px solid #BBE5C8} .sp-sg .sgl .note.err{background:#FEF3F2;color:#B42318;border:1px solid #F5C2BD} /* faculty CTA */ .sp-sg .sgl .cta .wrap{text-align:center} .sp-sg .sgl .cta h2{color:#fff !important;font-size:42px !important;line-height:1.15 !important;margin:0 0 16px !important} .sp-sg .sgl .cta p{color:var(--onacc);font-size:18px;max-width:720px;margin:0 auto 28px} .sp-sg .sgl .cta .btns{justify-content:center} .sp-sg .sgl .cta .small{color:var(--onacc);margin:20px auto 0} /* faq */ .sp-sg .sgl .faq .h2-38{margin-bottom:24px !important} .sp-sg .sgl .faq-item{border-top:1px solid var(--line);padding:22px 0;max-width:860px} .sp-sg .sgl .faq-item h3{margin:0 0 6px !important} .sp-sg .sgl .faq-item p{margin:0} @media (max-width:960px){ .sp-sg .sgl .hero .wrap{flex-direction:column;align-items:stretch;gap:40px;padding-bottom:72px} .sp-sg .sgl .hero-shot{padding:0} .sp-sg .sgl .mock{transform:none} .sp-sg .sgl .grid-f,.sp-sg .sgl .tiers{grid-template-columns:1fr 1fr} .sp-sg .sgl .steps{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .sp-sg .sgl{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} .sp-sg .sgl .wrap{padding:56px 20px} .sp-sg .sgl h1{font-size:36px !important} .sp-sg .sgl .h2-38{font-size:28px !important} .sp-sg .sgl .cta h2{font-size:30px !important} .sp-sg .sgl .lead{font-size:18px} .sp-sg .sgl .grid-f,.sp-sg .sgl .tiers,.sp-sg .sgl .steps,.sp-sg .sgl .two{grid-template-columns:1fr} .sp-sg .sgl .btns .btn{width:100%} .sp-sg .sgl .privacy .wrap{flex-direction:column;gap:12px} .sp-sg .sgl .hero .wrap{padding-top:48px} .sp-sg .sgl .mock-app{grid-template-columns:96px minmax(0,1fr);min-height:0} .sp-sg .sgl .mock-side span{font-size:10.5px;padding:5px 6px} .sp-sg .sgl .mock-cards{grid-template-columns:1fr} .sp-sg .sgl .mock-kpis b{font-size:15px} .sp-sg .sgl .px{min-height:560px} .sp-sg .sgl .px-img{object-position:50% 50%} .sp-sg .sgl .px h2{font-size:32px !important} .sp-sg .sgl .px p{font-size:17px} } /* public sample group */ .sp-sg .sg-samplebar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;background:#EAF1FF;border:1px solid #C9D9F5;border-radius:12px;padding:14px 18px;margin:0 0 18px;font-size:15px;color:#0E1A2B} .sp-sg .sg-samplebar span{color:#3B4658} .sp-sg .sg-samplebar-r{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .sp-sg .sg-seg{display:inline-flex;background:#fff;border:1px solid #C9D2DE;border-radius:999px;padding:3px} .sp-sg .sg-seg a{padding:6px 14px;border-radius:999px;font-weight:600;font-size:14px;color:#3B4658 !important;text-decoration:none !important} .sp-sg .sg-seg a.on{background:#1D5FD1;color:#fff !important} .sp-sg .sg-center-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:24px 0 8px} /* ===== Study Group app (built on the Program Portal's #sp-pp design system) ===== */ #sp-pp.sp-sg-app .sp-pp-panel:not(.is-on) { display: none; } #sp-pp.sp-sg-app .sp-pp-main > .sp-pp-panel { max-width: 1240px; } #sp-pp.sp-sg-app .sp-pp-tabs a { position: relative; } #sp-pp.sp-sg-app .sp-pp-side-h .sp-pp-ico { width: 13px; height: 13px; flex-basis: 13px; } #sp-pp.sp-sg-app .sp-pp-kpi b .sp-sg-of { font-size: .95rem; font-weight: 700; color: var(--pp-muted); } #sp-pp.sp-sg-app .sp-sg-kpi-lock { background: #f6f9fc; border-style: dashed; } #sp-pp.sp-sg-app .sg-toast { padding: 12px 16px; border-radius: 12px; background: #e9f7f0; border: 1px solid #b9e2cd; color: #14573b; font-weight: 700; } #sp-pp.sp-sg-app .sg-toast-expired, #sp-pp.sp-sg-app .sg-toast-denied { background: #fdecec; border-color: #f0c2c2; color: #7d2323; } #sp-pp.sp-sg-app .sp-sg-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; } #sp-pp.sp-sg-app .sp-sg-col { display: grid; gap: 18px; min-width: 0; } #sp-pp.sp-sg-app .sp-sg-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } #sp-pp.sp-sg-app .sp-sg-more { font-size: .85rem; font-weight: 700; white-space: nowrap; } #sp-pp.sp-sg-app .sp-sg-small { font-size: .85rem; } #sp-pp.sp-sg-app .sp-sg-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* focus */ #sp-pp.sp-sg-app .sp-sg-focus { background: linear-gradient(135deg, #ffffff 0%, #f1f9fd 100%); } #sp-pp.sp-sg-app .sp-sg-focus-sys { display: flex; align-items: center; gap: 12px; } #sp-pp.sp-sg-app .sp-sg-focus-sys .sp-pp-ico { width: 34px; height: 34px; flex-basis: 34px; padding: 7px; border-radius: 10px; background: var(--pp-tint); color: #0e86b5; } #sp-pp.sp-sg-app .sp-sg-focus-sys b { font-size: 1.5rem; font-weight: 900; color: var(--pp-ink); line-height: 1.2; } #sp-pp.sp-sg-app .sp-sg-note { padding: 10px 14px; border-left: 3px solid var(--pp-sky); background: #fff; border-radius: 0 8px 8px 0; color: #22364f; } #sp-pp.sp-sg-app .sp-sg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } #sp-pp.sp-sg-app .sp-sg-steps li { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 0; } #sp-pp.sp-sg-app .sp-sg-steps li::before { display: none; content: none; } #sp-pp.sp-sg-app .sp-sg-steps li > span { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--pp-brand); color: #fff; font-size: .78rem; font-weight: 900; } #sp-pp.sp-sg-app .sp-sg-edit { border-top: 1px solid var(--pp-line); padding-top: 12px; } #sp-pp.sp-sg-app .sp-sg-edit summary { cursor: pointer; font-weight: 700; color: var(--pp-brand); font-size: .9rem; } #sp-pp.sp-sg-app .sp-sg-form { display: grid; gap: 12px; margin-top: 12px; max-width: 560px; } #sp-pp.sp-sg-app .sp-sg-form label { display: grid; gap: 5px; font-size: .86rem; font-weight: 700; color: #22364f; } #sp-pp.sp-sg-app .sp-sg-form input[type=text], #sp-pp.sp-sg-app .sp-sg-form select { width: 100%; height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--pp-line); border-radius: 8px; background: #fff; color: var(--pp-ink); font: inherit; font-size: .95rem; box-shadow: none; } #sp-pp.sp-sg-app .sp-sg-form input:focus, #sp-pp.sp-sg-app .sp-sg-form select:focus { outline: none; border-color: var(--pp-sky); box-shadow: 0 0 0 3px rgba(37, 190, 244, .18); } #sp-pp.sp-sg-app .sp-sg-form .sp-sg-check { display: flex; align-items: center; gap: 8px; font-weight: 700; } #sp-pp.sp-sg-app .sp-sg-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--pp-brand); } #sp-pp.sp-sg-app .sp-sg-optin { border-top: 1px solid var(--pp-line); padding-top: 14px; } /* systems */ #sp-pp.sp-sg-app .sp-sg-systable td:first-child { min-width: 220px; } #sp-pp.sp-sg-app .sp-sg-sysname { display: block; font-weight: 700; } #sp-pp.sp-sg-app .sp-sg-cmp { display: block; position: relative; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--pp-tint); max-width: 260px; } #sp-pp.sp-sg-app .sp-sg-cmp i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--pp-sky); } #sp-pp.sp-sg-app .sp-sg-cmp em { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--pp-ink); opacity: .6; } #sp-pp.sp-sg-app .sp-sg-locked { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 10px; background: #f6f9fc; border: 1px dashed var(--pp-line); } #sp-pp.sp-sg-app .sp-sg-locked > .sp-pp-ico { width: 26px; height: 26px; flex-basis: 26px; color: var(--pp-muted); } #sp-pp.sp-sg-app .sp-sg-locked p { color: var(--pp-muted); font-size: .9rem; margin: 2px 0 10px; } #sp-pp.sp-sg-app .sp-sg-locked .sp-pp-bar { max-width: 280px; height: 7px; } /* me */ #sp-pp.sp-sg-app .sp-sg-mini-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } #sp-pp.sp-sg-app .sp-sg-mini-kpis div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #f6f9fc; } #sp-pp.sp-sg-app .sp-sg-mini-kpis b { font-size: 1.3rem; font-weight: 900; font-variant-numeric: tabular-nums; } #sp-pp.sp-sg-app .sp-sg-mini-kpis span { font-size: .75rem; color: var(--pp-muted); } /* leaderboard */ #sp-pp.sp-sg-app .sp-sg-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: none; } #sp-pp.sp-sg-app .sp-sg-board li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto auto; gap: 12px; align-items: center; margin: 0; padding: 8px 10px; border-radius: 10px; background: #f8fafc; } #sp-pp.sp-sg-app .sp-sg-board li::before { display: none; content: none; } #sp-pp.sp-sg-app .sp-sg-board li.me { background: var(--pp-tint); } #sp-pp.sp-sg-app .sp-sg-rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e7eef6; color: var(--pp-ink); font-weight: 900; font-size: .85rem; } #sp-pp.sp-sg-app .sp-sg-rank.r1 { background: #f6c945; color: #4a3500; } #sp-pp.sp-sg-app .sp-sg-rank.r2 { background: #d5dde7; } #sp-pp.sp-sg-app .sp-sg-rank.r3 { background: #e9b48a; color: #4a2a10; } #sp-pp.sp-sg-app .sp-sg-who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sp-pp.sp-sg-app .sp-sg-q7 { font-size: .9rem; color: var(--pp-muted); white-space: nowrap; } #sp-pp.sp-sg-app .sp-sg-q7 b { color: var(--pp-ink); } #sp-pp.sp-sg-app .sp-sg-ans { font-size: .82rem; color: var(--pp-muted); white-space: nowrap; } /* organizer */ #sp-pp.sp-sg-app .sp-sg-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } #sp-pp.sp-sg-app .sp-sg-meters .sp-pp-bar { height: 8px; } #sp-pp.sp-sg-app .sp-sg-meter-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } #sp-pp.sp-sg-app .sp-sg-meter-top b { font-size: 1.25rem; font-weight: 900; } #sp-pp.sp-sg-app .sp-sg-meter-top span { color: var(--pp-muted); font-size: .88rem; } #sp-pp.sp-sg-app .sp-sg-invite { display: grid; gap: 8px; } #sp-pp.sp-sg-app .sp-sg-invite label { font-weight: 700; font-size: .88rem; } #sp-pp.sp-sg-app .sp-sg-invite textarea { width: 100%; margin: 0; padding: 10px 12px; border: 1px solid var(--pp-line); border-radius: 8px; background: #f8fafc; font: inherit; font-size: .9rem; color: var(--pp-ink); resize: vertical; } /* faculty */ #sp-pp.sp-sg-app .sp-sg-faculty { background: linear-gradient(135deg, #0f2f5c 0%, #163F7A 100%); border-color: #163F7A; color: #e3eefa; } #sp-pp.sp-sg-app .sp-sg-faculty h2, #sp-pp.sp-sg-app .sp-sg-faculty b { color: #fff; } #sp-pp.sp-sg-app .sp-sg-faculty .sp-pp-eyebrow { color: #7fd6f7; display: block; padding: 18px 20px 0; } #sp-pp.sp-sg-app .sp-sg-faculty .sp-pp-card-head { background: transparent !important; border: 0 !important; } #sp-pp.sp-sg-app .sp-sg-faculty .sp-pp-card-head h2 { color: #fff !important; } #sp-pp.sp-sg-app .sp-sg-faculty .sp-pp-card-head p { color: #d6e4f3 !important; } #sp-pp.sp-sg-app .sp-sg-faculty .sp-pp-card-head h2::before { background: #7fd6f7; } #sp-pp.sp-sg-app .sp-sg-faculty .sp-sg-ticks { margin: 4px 20px 0; } #sp-pp.sp-sg-app .sp-sg-faculty p { color: #d6e4f3; max-width: 720px; } #sp-pp.sp-sg-app .sp-sg-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } #sp-pp.sp-sg-app .sp-sg-ticks li { position: relative; margin: 0; padding-left: 26px; color: #e3eefa; } #sp-pp.sp-sg-app .sp-sg-ticks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; border-radius: 50%; background: #25BEF4; box-shadow: inset 0 0 0 4px #164c8c; } #sp-pp.sp-sg-app .sp-sg-faculty a.sp-pp-btn { background: #fff !important; border-color: #fff !important; color: #163F7A !important; text-decoration: none; } #sp-pp.sp-sg-app .sp-sg-faculty a.sp-pp-btn.sp-pp-ghost { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, .6) !important; } /* sample */ #sp-pp.sp-sg-app .sp-sg-seg { display: inline-flex; background: #f0f4f8; border-radius: 999px; padding: 3px; } #sp-pp.sp-sg-app .sp-sg-seg a { padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: .82rem; color: var(--pp-muted); text-decoration: none; } #sp-pp.sp-sg-app .sp-sg-seg a.on { background: #fff; color: var(--pp-ink); box-shadow: 0 1px 3px rgba(18, 38, 64, .15); } #sp-pp.sp-sg-app a.sp-pp-btn { text-decoration: none; } #sp-pp.sp-sg-app .sp-sg-sample-cta { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 8px 0 0; } @media (max-width: 1080px) { #sp-pp.sp-sg-app .sp-sg-cols { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { #sp-pp.sp-sg-app a.sp-pp-btn.sp-sg-top-cta { padding: 6px 10px !important; font-size: 12px !important; min-height: 34px !important; } #sp-pp.sp-sg-app .sp-sg-board li { grid-template-columns: 28px minmax(0, 1fr) auto auto; } #sp-pp.sp-sg-app .sp-sg-ans { display: none; } #sp-pp.sp-sg-app .sp-sg-mini-kpis { grid-template-columns: 1fr 1fr 1fr; } #sp-pp.sp-sg-app .sp-sg-systable td:first-child { min-width: 150px; } } /* ---------- 0.4: together features ---------- */ #sp-pp.sp-sg-app .sp-pp-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } #sp-pp.sp-sg-app .sp-sg-countdown { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: linear-gradient(135deg, #163F7A, #1D5FD1); color: #fff; box-shadow: 0 6px 18px rgba(22, 63, 122, .25); flex: 0 0 auto; } #sp-pp.sp-sg-app .sp-sg-countdown b { font-size: 2rem; font-weight: 900; line-height: 1; } #sp-pp.sp-sg-app .sp-sg-countdown span { font-size: .78rem; line-height: 1.25; color: #cfe3fb; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } #sp-pp.sp-sg-app .sp-pp-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } #sp-pp.sp-sg-app .sp-sg-kpi-fire b { color: #ea580c; } #sp-pp.sp-sg-app .sp-sg-h3 { margin: 18px 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--pp-muted); } #sp-pp.sp-sg-app .sp-sg-sample-hint { background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 8px 10px; } /* coach */ #sp-pp.sp-sg-app .sp-sg-coach { display: flex; gap: 14px; align-items: flex-start; padding: 16px 20px; background: linear-gradient(135deg, #f0f7ff 0%, #f5f3ff 100%); border-color: #d9e6fb; } #sp-pp.sp-sg-app .sp-sg-coach-ico { flex: 0 0 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #25BEF4, #7c3aed); color: #fff; } #sp-pp.sp-sg-app .sp-sg-coach-ico .sp-pp-ico { width: 22px; height: 22px; stroke: #fff; } #sp-pp.sp-sg-app .sp-sg-coach .sp-pp-eyebrow { color: #6d28d9; } #sp-pp.sp-sg-app .sp-sg-coach p { margin: 4px 0 0; font-size: 1rem; line-height: 1.55; color: var(--pp-ink); } /* weekly challenge */ #sp-pp.sp-sg-app .sp-sg-goal { padding: 4px 20px 18px; } #sp-pp.sp-sg-app .sp-sg-challenge .sp-sg-h3, #sp-pp.sp-sg-app .sp-sg-challenge .sp-sg-chips, #sp-pp.sp-sg-app .sp-sg-challenge .sp-sg-weeks, #sp-pp.sp-sg-app .sp-sg-challenge > p, #sp-pp.sp-sg-app .sp-sg-streakline { margin-left: 20px; margin-right: 20px; } #sp-pp.sp-sg-app .sp-sg-goal-num { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; } #sp-pp.sp-sg-app .sp-sg-goal-num b { font-size: 2.1rem; font-weight: 900; color: var(--pp-ink); line-height: 1; } #sp-pp.sp-sg-app .sp-sg-goal-num span { color: var(--pp-muted); font-weight: 700; } #sp-pp.sp-sg-app .sp-sg-goal-bar { position: relative; height: 16px; border-radius: 999px; background: #e8eef6; overflow: hidden; } #sp-pp.sp-sg-app .sp-sg-goal-bar > span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #25BEF4, #1D5FD1 60%, #163F7A); transition: width .6s ease; } #sp-pp.sp-sg-app .sp-sg-challenge.is-hit .sp-sg-goal-bar > span { background: linear-gradient(90deg, #36BCB1, #16a34a); } #sp-pp.sp-sg-app .sp-sg-goal-bar i { position: absolute; top: 3px; bottom: 3px; width: 2px; background: rgba(255, 255, 255, .7); } #sp-pp.sp-sg-app .sp-sg-goal-msg { margin: 10px 0 0; color: var(--pp-ink); } #sp-pp.sp-sg-app .sp-sg-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } #sp-pp.sp-sg-app .sp-sg-chips li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px 6px 6px; border: 1px solid var(--pp-line); border-radius: 999px; background: #fff; font-weight: 700; } #sp-pp.sp-sg-app .sp-sg-chips li b { color: #1D5FD1; } #sp-pp.sp-sg-app .sp-sg-chips li.me { border-color: #36BCB1; background: #f0fdfa; } #sp-pp.sp-sg-app .sp-sg-weeks { display: flex; gap: 8px; flex-wrap: wrap; } #sp-pp.sp-sg-app .sp-sg-week { min-width: 74px; padding: 8px 10px; border-radius: 10px; background: #f1f5f9; text-align: center; display: grid; gap: 2px; } #sp-pp.sp-sg-app .sp-sg-week span { font-size: .72rem; color: var(--pp-muted); font-weight: 700; } #sp-pp.sp-sg-app .sp-sg-week b { font-size: 1.1rem; } #sp-pp.sp-sg-app .sp-sg-week small { font-size: .72rem; color: var(--pp-muted); } #sp-pp.sp-sg-app .sp-sg-week.hit { background: #dcfce7; } #sp-pp.sp-sg-app .sp-sg-week.hit b { color: #15803d; } #sp-pp.sp-sg-app .sp-sg-streakline { display: flex; gap: 12px; align-items: center; margin-top: 16px; margin-bottom: 18px; padding: 12px 14px; border-radius: 12px; background: #fff7ed; border: 1px solid #fed7aa; } #sp-pp.sp-sg-app .sp-sg-streakline .sp-pp-ico { width: 28px; height: 28px; stroke: #ea580c; fill: #fdba74; flex: 0 0 auto; } #sp-pp.sp-sg-app .sp-sg-streakline span { display: block; font-size: .86rem; color: #9a3412; } /* you */ #sp-pp.sp-sg-app .sp-sg-you > *:not(.sp-pp-card-head) { margin-left: 20px; margin-right: 20px; } #sp-pp.sp-sg-app .sp-sg-you-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } #sp-pp.sp-sg-app .sp-sg-flamebig { display: grid; justify-items: center; padding: 10px 16px; border-radius: 14px; background: #f1f5f9; color: var(--pp-muted); } #sp-pp.sp-sg-app .sp-sg-flamebig .sp-pp-ico { width: 30px; height: 30px; } #sp-pp.sp-sg-app .sp-sg-flamebig.on { background: linear-gradient(160deg, #fff7ed, #ffedd5); color: #9a3412; } #sp-pp.sp-sg-app .sp-sg-flamebig.on .sp-pp-ico { stroke: #ea580c; fill: #fb923c; } #sp-pp.sp-sg-app .sp-sg-flamebig b { font-size: 1.8rem; font-weight: 900; line-height: 1; color: inherit; } #sp-pp.sp-sg-app .sp-sg-flamebig span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; } #sp-pp.sp-sg-app .sp-sg-you-top .sp-sg-mini-kpis { flex: 1 1 220px; } #sp-pp.sp-sg-app .sp-sg-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; margin-bottom: 16px; } #sp-pp.sp-sg-app .sp-sg-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; border: 1px dashed #cbd5e1; color: #94a3b8; font-weight: 700; font-size: .85rem; background: #f8fafc; filter: grayscale(1); } #sp-pp.sp-sg-app .sp-sg-badge i { font-style: normal; font-size: 1.05rem; } #sp-pp.sp-sg-app .sp-sg-badge small { display: block; font-weight: 500; font-size: .74rem; color: inherit; } #sp-pp.sp-sg-app .sp-sg-badge.on { filter: none; border: 1px solid #fde68a; background: linear-gradient(160deg, #fffbeb, #fef3c7); color: #78350f; } /* mvp + flames */ #sp-pp.sp-sg-app .sp-sg-mvp { display: flex; gap: 10px; align-items: center; margin: 0 20px 10px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1px solid #fde68a; } #sp-pp.sp-sg-app .sp-sg-mvp > span { font-size: 1.5rem; } #sp-pp.sp-sg-app .sp-sg-mvp small { display: block; color: #92400e; } #sp-pp.sp-sg-app .sp-sg-flame { font-size: .8rem; font-weight: 800; color: #c2410c; background: #fff7ed; border-radius: 999px; padding: 2px 8px; white-space: nowrap; } /* mock day */ #sp-pp.sp-sg-app .sp-sg-mockrow { display: flex; gap: 12px; align-items: center; padding: 0 20px 18px; } #sp-pp.sp-sg-app .sp-sg-mockrow small, #sp-pp.sp-sg-app .sp-sg-mockmini > p { display: block; color: var(--pp-muted); } #sp-pp.sp-sg-app .sp-sg-mockmini > p { margin: 0 20px 18px; } #sp-pp.sp-sg-app .sp-sg-cal { flex: 0 0 auto; width: 54px; border-radius: 10px; overflow: hidden; text-align: center; border: 1px solid var(--pp-line); background: #fff; box-shadow: 0 2px 6px rgba(18, 38, 64, .08); } #sp-pp.sp-sg-app .sp-sg-cal span { display: block; background: #dc2626; color: #fff; font-size: .7rem; font-weight: 800; text-transform: uppercase; padding: 2px 0; } #sp-pp.sp-sg-app .sp-sg-cal b { display: block; font-size: 1.5rem; font-weight: 900; padding: 2px 0 4px; } #sp-pp.sp-sg-app .sp-sg-cal small { display: block; font-size: .72rem; color: var(--pp-muted); padding-bottom: 6px; } #sp-pp.sp-sg-app .sp-sg-cal.big { width: 84px; } #sp-pp.sp-sg-app .sp-sg-cal.big b { font-size: 2.3rem; } #sp-pp.sp-sg-app .sp-sg-mockhero { display: flex; gap: 18px; padding: 4px 20px 18px; align-items: flex-start; } #sp-pp.sp-sg-app .sp-sg-mockhero h3 { margin: 0 0 4px; font-size: 1.25rem; } #sp-pp.sp-sg-app .sp-sg-countline { margin: 0 0 10px; color: var(--pp-muted); } #sp-pp.sp-sg-app .sp-sg-countline b { color: var(--pp-ink); } #sp-pp.sp-sg-app .sp-sg-mock > .sp-pp-dim, #sp-pp.sp-sg-app .sp-sg-results, #sp-pp.sp-sg-app .sp-sg-mock .sp-sg-edit { margin-left: 20px; margin-right: 20px; } #sp-pp.sp-sg-app .sp-sg-results { border-top: 1px solid var(--pp-line); padding-bottom: 12px; } #sp-pp.sp-sg-app .sp-sg-mine { display: inline-grid; padding: 10px 16px; border-radius: 12px; background: #f0fdfa; border: 1px solid #99f6e4; margin-bottom: 8px; } #sp-pp.sp-sg-app .sp-sg-mine b { font-size: 1.8rem; font-weight: 900; color: #0f766e; line-height: 1.1; } #sp-pp.sp-sg-app .sp-sg-mine small { color: var(--pp-muted); font-size: .75rem; } #sp-pp.sp-sg-app .sp-sg-hist { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 8px 0 0; margin-top: 30px; max-width: 460px; } #sp-pp.sp-sg-app .sp-sg-hist > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; text-align: center; } #sp-pp.sp-sg-app .sp-sg-hist span { position: relative; display: block; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, #25BEF4, #1D5FD1); min-height: 4px; } #sp-pp.sp-sg-app .sp-sg-hist em { position: absolute; top: -20px; left: 0; right: 0; font-style: normal; font-weight: 800; font-size: .8rem; color: var(--pp-ink); } #sp-pp.sp-sg-app .sp-sg-hist small { margin-top: 6px; font-size: .75rem; color: var(--pp-muted); font-weight: 700; } #sp-pp.sp-sg-app .sp-sg-list { list-style: none; padding: 0; margin: 12px 0 0; } #sp-pp.sp-sg-app .sp-sg-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--pp-line); margin: 0; } #sp-pp.sp-sg-app .sp-sg-link { background: none; border: 0; padding: 0; color: #b91c1c; font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; } #sp-pp.sp-sg-app .sp-sg-inline { display: inline; margin: 0; } /* duels */ #sp-pp.sp-sg-app .sp-sg-duels > .sp-pp-dim, #sp-pp.sp-sg-app .sp-sg-duels .sp-sg-edit, #sp-pp.sp-sg-app .sp-sg-duel-list { margin-left: 20px; margin-right: 20px; } #sp-pp.sp-sg-app .sp-sg-duel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 14px; } #sp-pp.sp-sg-app .sp-sg-duel { border: 1px solid var(--pp-line); border-radius: 14px; padding: 12px 14px; background: #fff; } #sp-pp.sp-sg-app .sp-sg-duel.is-active { border-color: #bfdbfe; background: linear-gradient(180deg, #f8fbff, #fff); } #sp-pp.sp-sg-app .sp-sg-duel.is-pending { border-style: dashed; } #sp-pp.sp-sg-app .sp-sg-duel.is-done { background: #f8fafc; } #sp-pp.sp-sg-app .sp-sg-duel.is-mine { box-shadow: inset 3px 0 0 #36BCB1; } #sp-pp.sp-sg-app .sp-sg-duel-head { display: flex; gap: 10px; align-items: center; } #sp-pp.sp-sg-app .sp-sg-duel-head small { display: block; color: var(--pp-muted); font-size: .8rem; } #sp-pp.sp-sg-app .sp-sg-duel-ico { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #eef2ff; } #sp-pp.sp-sg-app .sp-sg-duel-ico .sp-pp-ico { width: 18px; height: 18px; stroke: #4338ca; } #sp-pp.sp-sg-app .sp-sg-duel-msg { margin: 8px 0 0; font-style: italic; color: var(--pp-muted); font-size: .9rem; } #sp-pp.sp-sg-app .sp-sg-duel-bars { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; } #sp-pp.sp-sg-app .sp-sg-duel-bars li { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; gap: 8px; align-items: center; margin: 0; font-size: .88rem; } #sp-pp.sp-sg-app .sp-sg-duel-bars li span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #sp-pp.sp-sg-app .sp-sg-duel-bars i { height: 10px; border-radius: 999px; background: #eef2f7; overflow: hidden; } #sp-pp.sp-sg-app .sp-sg-duel-bars em { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #818cf8, #4338ca); } #sp-pp.sp-sg-app .sp-sg-duel-bars li.me em { background: linear-gradient(90deg, #5eead4, #0f766e); } #sp-pp.sp-sg-app .sp-sg-duel .sp-sg-row { margin-top: 10px; } /* national */ #sp-pp.sp-sg-app .sp-sg-natlist { list-style: none; padding: 0 20px 6px; margin: 0; } #sp-pp.sp-sg-app .sp-sg-natlist li { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--pp-line); margin: 0; } #sp-pp.sp-sg-app .sp-sg-natlist li:first-child { border-top: 0; } #sp-pp.sp-sg-app .sp-sg-natlist li small { display: block; color: var(--pp-muted); font-size: .8rem; } #sp-pp.sp-sg-app .sp-sg-natlist li.us { background: #f0fdfa; margin: 0 -20px; padding: 10px 20px; } #sp-pp.sp-sg-app .sp-sg-national > .sp-pp-dim { margin: 0 20px 18px; } /* AI */ #sp-pp.sp-sg-app .sp-sg-ai > p, #sp-pp.sp-sg-app .sp-sg-ai-cta, #sp-pp.sp-sg-app .sp-sg-prompts { margin-left: 20px; margin-right: 20px; } #sp-pp.sp-sg-app .sp-sg-ai-cta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, #eef6ff, #f5f3ff); border: 1px solid #dbe5f5; } #sp-pp.sp-sg-app .sp-sg-ai-cta span { display: block; color: var(--pp-muted); font-size: .85rem; } #sp-pp.sp-sg-app .sp-sg-prompts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-bottom: 8px; } #sp-pp.sp-sg-app .sp-sg-prompt { border: 1px solid var(--pp-line); border-radius: 12px; padding: 12px; background: #fff; } #sp-pp.sp-sg-app .sp-sg-prompt textarea { min-height: 96px; } /* organizer settings */ #sp-pp.sp-sg-app .sp-sg-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: end; } #sp-pp.sp-sg-app .sp-sg-grid2 .sp-sg-check { align-self: start; } #sp-pp.sp-sg-app .sp-sg-grid2 [hidden] { display: none !important; } #sp-pp.sp-sg-app .sp-sg-span2 { grid-column: 1 / -1; } #sp-pp.sp-sg-app .sp-sg-settings > .sp-sg-form, #sp-pp.sp-sg-app .sp-sg-settings > p { margin-left: 20px; margin-right: 20px; } #sp-pp.sp-sg-app input[type=date], #sp-pp.sp-sg-app input[type=number] { width: 100%; padding: 9px 10px; border: 1px solid var(--pp-line); border-radius: 8px; font: inherit; } @media (max-width: 1240px) { #sp-pp.sp-sg-app .sp-pp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { #sp-pp.sp-sg-app .sp-pp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } #sp-pp.sp-sg-app .sp-pp-pagehead { flex-direction: column; } #sp-pp.sp-sg-app .sp-sg-grid2 { grid-template-columns: minmax(0, 1fr); } #sp-pp.sp-sg-app .sp-sg-mockhero { flex-direction: column; } #sp-pp.sp-sg-app .sp-sg-ai-cta { flex-direction: column; align-items: flex-start; } #sp-pp.sp-sg-app .sp-sg-coach { flex-direction: column; gap: 8px; } #sp-pp.sp-sg-app .sp-sg-prompts, #sp-pp.sp-sg-app .sp-sg-duel-list { grid-template-columns: minmax(0, 1fr); } } #sp-pp.sp-sg-app .sp-sg-boardmini .sp-sg-ans { display: none; } #sp-pp.sp-sg-app .sp-sg-boardmini .sp-sg-board li { grid-template-columns: 30px minmax(0, 1fr) auto auto; } #sp-pp.sp-sg-app .sp-sg-boardmini .sp-sg-board, #sp-pp.sp-sg-app .sp-sg-boardmini > .sp-pp-dim { margin: 0 20px 18px; } /* ---------- 0.5: daily Fast 5, flashcards, rotations, community ---------- */ #sp-pp.sp-sg-app .sp-sg-daily > *:not(.sp-pp-card-head), #sp-pp.sp-sg-app .sp-sg-rots > *:not(.sp-pp-card-head), #sp-pp.sp-sg-app .sp-sg-shelf > *:not(.sp-pp-card-head), #sp-pp.sp-sg-app .sp-sg-mighty > *:not(.sp-pp-card-head), #sp-pp.sp-sg-app .sp-sg-nblm > *:not(.sp-pp-card-head) { margin-left: 20px; margin-right: 20px; } #sp-pp.sp-sg-app .sp-sg-daily > :last-child, #sp-pp.sp-sg-app .sp-sg-rots > :last-child, #sp-pp.sp-sg-app .sp-sg-shelf > :last-child, #sp-pp.sp-sg-app .sp-sg-mighty > :last-child, #sp-pp.sp-sg-app .sp-sg-nblm > :last-child { margin-bottom: 20px; } #sp-pp.sp-sg-app .sp-sg-chip { display: inline-block; font-style: normal; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #e8f1fd; color: #1D5FD1; vertical-align: middle; } #sp-pp.sp-sg-app .sp-sg-empty { color: var(--pp-muted); font-size: .9rem; padding: 12px 14px; border: 1px dashed var(--pp-line); border-radius: 10px; background: #fafcff; } #sp-pp.sp-sg-app .sp-sg-linkbtn { appearance: none; background: none; border: 0; padding: 0; margin: 0; color: #1D5FD1; font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } #sp-pp.sp-sg-app .sp-sg-linkbtn:hover { text-decoration: underline; } #sp-pp.sp-sg-app .sp-sg-linkbtn .sp-pp-ico { width: 15px; height: 15px; } #sp-pp.sp-sg-app .sp-sg-dstats { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 4px; } #sp-pp.sp-sg-app .sp-sg-dstats .sp-sg-mini-kpis { flex: 1 1 260px; } #sp-pp.sp-sg-app .sp-sg-flamebig.on .sp-pp-ico[viewBox] { stroke: #ea580c; } #sp-pp.sp-sg-app .sp-sg-fast { margin-top: 16px; } #sp-pp.sp-sg-app .sp-sg-fstart { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px; border-radius: 14px; background: linear-gradient(135deg, #0f2f66, #1D5FD1); color: #dbeafe; } #sp-pp.sp-sg-app .sp-sg-fstart .sp-sg-small { color: #dbeafe; } #sp-pp.sp-sg-app .sp-sg-big { font-size: 1.05rem; padding: 12px 20px; background: #fbbf24 !important; color: #1f2937 !important; border-color: #fbbf24 !important; display: inline-flex; align-items: center; gap: 8px; } #sp-pp.sp-sg-app .sp-sg-big .sp-pp-ico { width: 20px; height: 20px; fill: #1f2937; stroke: #1f2937; } #sp-pp.sp-sg-app .sp-sg-fdone { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; } #sp-pp.sp-sg-app .sp-sg-fdone > span { display: flex; flex-wrap: wrap; gap: 8px; } #sp-pp.sp-sg-app .sp-sg-player { margin-top: 14px; padding: 16px; border: 1px solid var(--pp-line); border-radius: 14px; background: #fff; box-shadow: 0 6px 20px rgba(18, 38, 64, .07); scroll-margin-top: 80px; } #sp-pp.sp-sg-app .sp-sg-loading { color: var(--pp-muted); margin: 0; } #sp-pp.sp-sg-app .sp-sg-phead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } #sp-pp.sp-sg-app .sp-sg-dots { display: inline-flex; gap: 5px; } #sp-pp.sp-sg-app .sp-sg-dot { width: 12px; height: 12px; border-radius: 50%; background: #e2e8f0; display: inline-block; } #sp-pp.sp-sg-app .sp-sg-dot.cur { background: #fbbf24; box-shadow: 0 0 0 3px #fef3c7; } #sp-pp.sp-sg-app .sp-sg-dot.ok { background: #16a34a; } #sp-pp.sp-sg-app .sp-sg-dot.no { background: #dc2626; } #sp-pp.sp-sg-app .sp-sg-clock { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--pp-muted); } #sp-pp.sp-sg-app .sp-sg-stem { margin: 8px 0 12px; font-size: 1rem; line-height: 1.55; color: var(--pp-ink); } #sp-pp.sp-sg-app .sp-sg-stem img { max-width: 100%; height: auto; border-radius: 8px; } #sp-pp.sp-sg-app .sp-sg-stem table { border-collapse: collapse; font-size: .9rem; } #sp-pp.sp-sg-app .sp-sg-stem td, #sp-pp.sp-sg-app .sp-sg-stem th { border: 1px solid var(--pp-line); padding: 4px 8px; } #sp-pp.sp-sg-app .sp-sg-opts { display: grid; gap: 8px; } #sp-pp.sp-sg-app .sp-sg-opt { appearance: none; display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 12px; border: 1.5px solid var(--pp-line); border-radius: 10px; background: #fff; color: var(--pp-ink); font: inherit; font-size: .95rem; cursor: pointer; transition: border-color .15s, background .15s; } #sp-pp.sp-sg-app .sp-sg-opt b { flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f1f5f9; font-size: .85rem; } #sp-pp.sp-sg-app .sp-sg-opt:hover:not(:disabled) { border-color: #1D5FD1; background: #f5f9ff; } #sp-pp.sp-sg-app .sp-sg-opt:disabled { cursor: default; } #sp-pp.sp-sg-app .sp-sg-opt.picked { border-color: #94a3b8; } #sp-pp.sp-sg-app .sp-sg-opt.ok { border-color: #16a34a; background: #f0fdf4; } #sp-pp.sp-sg-app .sp-sg-opt.ok b { background: #16a34a; color: #fff; } #sp-pp.sp-sg-app .sp-sg-opt.no { border-color: #dc2626; background: #fef2f2; } #sp-pp.sp-sg-app .sp-sg-opt.no b { background: #dc2626; color: #fff; } #sp-pp.sp-sg-app .sp-sg-fb { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: #f8fafc; border-left: 4px solid #16a34a; } #sp-pp.sp-sg-app .sp-sg-fb.no { border-left-color: #dc2626; } #sp-pp.sp-sg-app .sp-sg-fb p { margin: 0 0 6px; font-size: .92rem; } #sp-pp.sp-sg-app .sp-sg-fb a { font-weight: 700; font-size: .88rem; } #sp-pp.sp-sg-app .sp-sg-pearl { color: #78350f; } #sp-pp.sp-sg-app .sp-sg-pnav { margin-top: 12px; display: flex; justify-content: flex-end; } #sp-pp.sp-sg-app .sp-sg-q-rev { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--pp-line); } #sp-pp.sp-sg-app .sp-sg-sum { text-align: center; display: grid; gap: 8px; justify-items: center; } #sp-pp.sp-sg-app .sp-sg-sumbig { display: grid; justify-items: center; } #sp-pp.sp-sg-app .sp-sg-sumbig span { font-size: 2.2rem; line-height: 1; } #sp-pp.sp-sg-app .sp-sg-sumbig b { font-size: 2.6rem; font-weight: 900; color: #1D5FD1; line-height: 1.1; } #sp-pp.sp-sg-app .sp-sg-sumbig small { color: var(--pp-muted); font-weight: 700; } #sp-pp.sp-sg-app .sp-sg-sum .sp-sg-row { justify-content: center; } #sp-pp.sp-sg-app .sp-sg-flip { appearance: none; position: relative; display: block; width: 100%; min-height: 170px; border: 0; padding: 0; background: none; cursor: pointer; perspective: 1000px; font: inherit; } #sp-pp.sp-sg-app .sp-sg-face { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 8px; padding: 22px; border-radius: 14px; font-size: 1.08rem; font-weight: 700; line-height: 1.45; backface-visibility: hidden; transition: transform .45s; text-align: center; } #sp-pp.sp-sg-app .sp-sg-face.front { background: linear-gradient(135deg, #1D5FD1, #36BCB1); color: #fff; } #sp-pp.sp-sg-app .sp-sg-face.front small { font-size: .75rem; font-weight: 700; opacity: .8; text-transform: uppercase; letter-spacing: .06em; } #sp-pp.sp-sg-app .sp-sg-face.back { background: #fffbeb; color: #1f2937; border: 2px solid #fde68a; transform: rotateY(180deg); } #sp-pp.sp-sg-app .sp-sg-flip.is-flipped .front { transform: rotateY(180deg); } #sp-pp.sp-sg-app .sp-sg-flip.is-flipped .back { transform: rotateY(360deg); } #sp-pp.sp-sg-app .sp-sg-cardbtns { margin-top: 12px; justify-content: center; } #sp-pp.sp-sg-app .sp-sg-fboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } #sp-pp.sp-sg-app .sp-sg-fboard li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 44px auto; gap: 10px; align-items: center; margin: 0; padding: 8px 10px; border-radius: 10px; background: #f8fafc; } #sp-pp.sp-sg-app .sp-sg-fboard li::before { display: none; content: none; } #sp-pp.sp-sg-app .sp-sg-fboard li.me { background: var(--pp-tint); } #sp-pp.sp-sg-app .sp-sg-time { font-variant-numeric: tabular-nums; color: var(--pp-muted); font-size: .85rem; text-align: right; } #sp-pp.sp-sg-app .sp-sg-fboard .sp-sg-flame .sp-pp-ico, #sp-pp.sp-sg-app .sp-sg-board .sp-sg-flame .sp-pp-ico { width: 13px; height: 13px; vertical-align: -2px; } #sp-pp.sp-sg-app .sp-sg-dailymini > *:not(.sp-pp-card-head) { margin: 0 20px 18px; } #sp-pp.sp-sg-app .sp-sg-dm-row { display: flex; gap: 14px; align-items: center; } #sp-pp.sp-sg-app .sp-sg-dm-row p { margin: 6px 0 0; } #sp-pp.sp-sg-app .sp-sg-dm-go { display: inline-flex; align-items: center; gap: 6px; } #sp-pp.sp-sg-app .sp-sg-dm-go .sp-pp-ico { width: 16px; height: 16px; } #sp-pp.sp-sg-app .sp-sg-dm-done { color: #065f46; } /* rotations */ #sp-pp.sp-sg-app .sp-sg-rotform { grid-template-columns: minmax(0, 1fr) minmax(0, 180px) auto; align-items: end; max-width: 640px; } #sp-pp.sp-sg-app .sp-sg-form input[type=date], #sp-pp.sp-sg-app .sp-sg-form input[type=url], #sp-pp.sp-sg-app .sp-sg-form textarea { width: 100%; min-height: 40px; margin: 0; padding: 8px 12px; border: 1px solid var(--pp-line); border-radius: 8px; background: #fff; color: var(--pp-ink); font: inherit; font-size: .95rem; box-shadow: none; } #sp-pp.sp-sg-app .sp-sg-rotme { margin-top: 6px; padding: 10px 14px; border-radius: 10px; background: #f0fdfa; border: 1px solid #99f6e4; } #sp-pp.sp-sg-app .sp-sg-buddies { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #fff7ed; border: 1px solid #fed7aa; font-size: .92rem; } #sp-pp.sp-sg-app .sp-sg-rotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 16px; } #sp-pp.sp-sg-app .sp-sg-rot { display: grid; gap: 10px; align-content: start; padding: 14px; border: 1px solid var(--pp-line); border-radius: 12px; background: #fff; } #sp-pp.sp-sg-app .sp-sg-rot.mine { border-color: #36BCB1; box-shadow: 0 0 0 3px #ccfbf1; } #sp-pp.sp-sg-app .sp-sg-rot-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; } #sp-pp.sp-sg-app .sp-sg-rot-ppl { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; font-size: .85rem; } #sp-pp.sp-sg-app .sp-sg-pill { padding: 3px 9px; border-radius: 999px; background: #f1f5f9; font-size: .8rem; font-weight: 700; } #sp-pp.sp-sg-app .sp-sg-pill.me { background: #ccfbf1; color: #115e59; } #sp-pp.sp-sg-app .sp-sg-rot-a { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .85rem; font-weight: 700; } /* community */ #sp-pp.sp-sg-app .sp-sg-add { margin-top: 6px; } #sp-pp.sp-sg-app .sp-sg-add > summary { list-style: none; display: inline-flex; cursor: pointer; } #sp-pp.sp-sg-app .sp-sg-add > summary::-webkit-details-marker { display: none; } #sp-pp.sp-sg-app .sp-sg-add form + form { margin-top: 10px; } #sp-pp.sp-sg-app .sp-sg-shelflist, #sp-pp.sp-sg-app .sp-sg-feed { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; } #sp-pp.sp-sg-app .sp-sg-shelflist li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; margin: 0; padding: 12px; border: 1px solid var(--pp-line); border-radius: 12px; background: #fff; } #sp-pp.sp-sg-app .sp-sg-shelflist li::before, #sp-pp.sp-sg-app .sp-sg-feed li::before { display: none; content: none; } #sp-pp.sp-sg-app .sp-sg-shelflist li.pin { border-color: #fde68a; background: #fffdf5; } #sp-pp.sp-sg-app .sp-sg-kind { font-style: normal; font-size: 1.4rem; line-height: 1; } #sp-pp.sp-sg-app .sp-sg-shelflist p { margin: 4px 0; font-size: .9rem; color: #334155; } #sp-pp.sp-sg-app .sp-sg-shelflist small { color: var(--pp-muted); } #sp-pp.sp-sg-app .sp-sg-role { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: #1c4587; color: #fff; padding: 1px 6px; border-radius: 4px; } #sp-pp.sp-sg-app .sp-sg-acts { display: flex; gap: 12px; margin-top: 6px; } #sp-pp.sp-sg-app .sp-sg-acts form { margin: 0; } #sp-pp.sp-sg-app .sp-sg-feed li { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 10px; background: #f8fafc; font-weight: 700; font-size: .92rem; } #sp-pp.sp-sg-app .sp-sg-feed small { color: var(--pp-muted); font-weight: 500; white-space: nowrap; } #sp-pp.sp-sg-app .sp-sg-lockline { display: flex; gap: 6px; align-items: center; color: var(--pp-muted); } #sp-pp.sp-sg-app .sp-sg-lockline .sp-pp-ico { width: 15px; height: 15px; } #sp-pp.sp-sg-app .sp-sg-nbsteps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: .92rem; } #sp-pp.sp-sg-app .sp-sg-nbsteps code { background: #f1f5f9; padding: 1px 6px; border-radius: 4px; font-size: .85rem; } @media (max-width: 640px) { #sp-pp.sp-sg-app .sp-sg-rotform { grid-template-columns: minmax(0, 1fr); } #sp-pp.sp-sg-app .sp-sg-fboard li { grid-template-columns: 24px minmax(0, 1fr) auto auto; } #sp-pp.sp-sg-app .sp-sg-fboard .sp-sg-time { display: none; } #sp-pp.sp-sg-app .sp-sg-dm-row { flex-direction: column; align-items: flex-start; } #sp-pp.sp-sg-app .sp-sg-player { padding: 12px; } } #sp-pp.sp-sg-app .sp-sg-fstart[hidden], #sp-pp.sp-sg-app .sp-sg-player[hidden], #sp-pp.sp-sg-app .sp-sg-cardbtns[hidden] { display: none !important; } #sp-pp.sp-sg-app .sp-sg-nbsteps li { display: list-item; margin: 0; } #sp-pp.sp-sg-app .sp-sg-nbsteps li::before { content: none; display: none; } #sp-pp.sp-sg-app .sp-sg-nbsteps code { display: inline; white-space: normal; font-family: ui-monospace, Menlo, monospace; } #sp-pp.sp-sg-app .sp-sg-shelflist small { display: block; margin-top: 4px; } #sp-pp.sp-sg-app .sp-sg-add > summary.sp-pp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; background: #1c4587; color: #fff; font-weight: 700; font-size: .92rem; border: 1px solid #1c4587; } #sp-pp.sp-sg-app .sp-sg-add[open] > summary.sp-pp-btn { background: #fff; color: #1c4587; } /* 0.5.2: keep theme button styles off the game buttons */ #sp-pp.sp-sg-app button.sp-sg-opt, #sp-pp.sp-sg-app button.sp-sg-opt:disabled, #sp-pp.sp-sg-app button.sp-sg-opt:hover, #sp-pp.sp-sg-app button.sp-sg-opt:focus { background: #fff !important; color: #1f2937 !important; text-transform: none !important; letter-spacing: normal !important; font-weight: 500 !important; font-size: .95rem !important; line-height: 1.4 !important; box-shadow: none !important; opacity: 1 !important; border: 1.5px solid #e2e8f0 !important; border-radius: 10px !important; padding: 10px 12px !important; height: auto !important; min-height: 0 !important; text-align: left !important; white-space: normal !important; } #sp-pp.sp-sg-app button.sp-sg-opt:hover:not(:disabled) { border-color: #1D5FD1 !important; background: #f5f9ff !important; } #sp-pp.sp-sg-app button.sp-sg-opt b { background: #f1f5f9 !important; color: #1f2937 !important; font-weight: 800 !important; } #sp-pp.sp-sg-app button.sp-sg-opt.picked { border-color: #94a3b8 !important; } #sp-pp.sp-sg-app button.sp-sg-opt.ok { border-color: #16a34a !important; background: #f0fdf4 !important; } #sp-pp.sp-sg-app button.sp-sg-opt.ok b { background: #16a34a !important; color: #fff !important; } #sp-pp.sp-sg-app button.sp-sg-opt.no { border-color: #dc2626 !important; background: #fef2f2 !important; } #sp-pp.sp-sg-app button.sp-sg-opt.no b { background: #dc2626 !important; color: #fff !important; } #sp-pp.sp-sg-app button.sp-sg-flip, #sp-pp.sp-sg-app button.sp-sg-flip:hover, #sp-pp.sp-sg-app button.sp-sg-flip:focus { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; text-transform: none !important; letter-spacing: normal !important; height: auto !important; min-height: 170px !important; color: inherit !important; } #sp-pp.sp-sg-app button.sp-sg-linkbtn, #sp-pp.sp-sg-app button.sp-sg-linkbtn:hover { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; color: #1D5FD1 !important; text-transform: none !important; letter-spacing: normal !important; height: auto !important; min-height: 0 !important; font-size: .85rem !important; } #sp-pp.sp-sg-app button.sp-sg-flip { display: block !important; position: relative !important; width: 100% !important; max-width: none !important; margin: 0 !important; overflow: visible !important; } #sp-pp.sp-sg-app .sp-sg-cardbtns { display: flex !important; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; width: 100%; } #sp-pp.sp-sg-app .sp-sg-cardbtns[hidden] { display: none !important; } /* 0.8: see it in action — QBank-page style: staggered zigzag, blue backing panel, title tab, slide-in + scroll drift */ .sp-sg .sgl .showcase{overflow:hidden} .sp-sg .sgl .showcase .show-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:center;margin:0 0 112px} .sp-sg .sgl .showcase .show-row.flip{grid-template-columns:minmax(0,6fr) minmax(0,5fr)} .sp-sg .sgl .showcase .show-row.flip .show-txt{order:2} .sp-sg .sgl .showcase .show-row:last-of-type{margin-bottom:72px} .sp-sg .sgl .showcase .show-txt{max-width:460px} .sp-sg .sgl .showcase .show-row.flip .show-txt{justify-self:end} .sp-sg .sgl .showcase .show-txt h3{margin:0 0 12px !important;font-size:30px !important;line-height:1.18 !important} .sp-sg .sgl .showcase .show-txt p{font-size:17px;line-height:1.65} .sp-sg .sgl .show-tags{list-style:none !important;margin:14px 0 0 !important;padding:0 !important;display:flex;flex-wrap:wrap;gap:8px} .sp-sg .sgl .show-tags li{margin:0 !important;padding:4px 12px !important;border-radius:999px;background:var(--onacc);color:var(--acc);font-size:13px;font-weight:700;list-style:none !important} .sp-sg .sgl .show-media{position:relative;padding:28px 0 0 28px;max-width:600px;width:100%;justify-self:start} .sp-sg .sgl .show-row.flip .show-media{padding:28px 28px 0 0;justify-self:end} .sp-sg .sgl .show-media.is-tall{max-width:470px} .sp-sg .sgl .show-media:before{content:"";position:absolute;left:0;top:0;width:58%;height:78%;border-radius:18px;background:linear-gradient(160deg,#CFE3FA,#E7F1FD);z-index:0} .sp-sg .sgl .show-row.flip .show-media:before{left:auto;right:0} .sp-sg .sgl .show-frame{position:relative;z-index:1;will-change:transform;transition:transform .12s linear} .sp-sg .sgl .show-tab{position:absolute;z-index:2;top:-16px;left:22px;padding:8px 18px;border-radius:10px;background:linear-gradient(90deg,#163F7A,#1D5FD1);color:#fff;font:800 15px/1.2 "Plus Jakarta Sans",Inter,sans-serif;box-shadow:0 8px 20px rgba(22,63,122,.28);white-space:nowrap} .sp-sg .sgl .showcase .show-img{margin:0;border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px rgba(14,26,43,.16),0 2px 6px rgba(14,26,43,.05)} .sp-sg .sgl .showcase .show-img img{display:block;width:100% !important;height:auto !important;max-width:none !important;margin:0 !important;border-radius:0 !important} /* reveal: rows slide in from their side */ .sp-sg .sgl [data-sg-show] .show-txt,.sp-sg .sgl [data-sg-show] .show-media{opacity:0;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)} .sp-sg .sgl [data-sg-show] .show-txt{transform:translate3d(-40px,0,0)} .sp-sg .sgl [data-sg-show] .show-media{transform:translate3d(80px,0,0);transition-delay:.08s} .sp-sg .sgl [data-sg-show].flip .show-txt{transform:translate3d(40px,0,0)} .sp-sg .sgl [data-sg-show].flip .show-media{transform:translate3d(-80px,0,0)} .sp-sg .sgl [data-sg-show].is-in .show-txt,.sp-sg .sgl [data-sg-show].is-in .show-media{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.sp-sg .sgl [data-sg-show] .show-txt,.sp-sg .sgl [data-sg-show] .show-media{opacity:1;transform:none;transition:none}} .sp-sg .sgl .btns.center{justify-content:center} @media (max-width:1024px){.sp-sg .sgl .showcase .show-row,.sp-sg .sgl .showcase .show-row.flip{gap:40px}} @media (max-width:820px){ .sp-sg .sgl .showcase .show-row,.sp-sg .sgl .showcase .show-row.flip{grid-template-columns:1fr;gap:28px;margin-bottom:64px} .sp-sg .sgl .showcase .show-row.flip .show-txt{order:0;justify-self:start} .sp-sg .sgl .showcase .show-txt{max-width:none} .sp-sg .sgl .show-media,.sp-sg .sgl .show-row.flip .show-media{justify-self:center;padding:22px 0 0 14px} .sp-sg .sgl .show-row.flip .show-media:before{left:0;right:auto} .sp-sg .sgl .showcase .show-txt h3{font-size:24px !important} .sp-sg .sgl [data-sg-show] .show-txt,.sp-sg .sgl [data-sg-show] .show-media,.sp-sg .sgl [data-sg-show].flip .show-txt,.sp-sg .sgl [data-sg-show].flip .show-media{transform:translate3d(0,24px,0)} .sp-sg .sgl [data-sg-show].is-in .show-txt,.sp-sg .sgl [data-sg-show].is-in .show-media{transform:none} } /* hero exam pills */ .sp-sg .sgl .hero-exams{list-style:none !important;display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 28px !important;padding:0 !important} .sp-sg .sgl .hero-exams li{margin:0 !important;list-style:none !important;padding:6px 14px !important;border-radius:999px;background:#fff;border:1px solid var(--line2);font-size:14px;font-weight:700;color:var(--ink)} /* exam path */ .sp-sg .sgl .path .wrap{padding-top:72px;padding-bottom:72px} .sp-sg .sgl .path-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;list-style:none !important;margin:0 !important;padding:0 !important;position:relative} .sp-sg .sgl .path-steps:before{content:"";position:absolute;left:8%;right:8%;top:38px;height:3px;border-radius:3px;background:linear-gradient(90deg,#36BCB1,#1D5FD1,#163F7A);z-index:0} .sp-sg .sgl .path-steps li{position:relative;z-index:1;list-style:none !important;margin:0 !important;background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px 24px !important;display:flex;flex-direction:column;gap:4px;box-shadow:0 10px 30px rgba(14,26,43,.06)} .sp-sg .sgl .path-steps .num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#fff;font:800 16px/1 "Plus Jakarta Sans",Inter,sans-serif;margin:0 0 10px} .sp-sg .sgl .path-steps li:first-child .num{background:#36BCB1}.sp-sg .sgl .path-steps li:last-child .num{background:#163F7A} .sp-sg .sgl .path-steps small{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--t3)} .sp-sg .sgl .path-steps strong{font:800 22px/1.2 "Plus Jakarta Sans",Inter,sans-serif;color:var(--ink)} .sp-sg .sgl .path-steps .d{font-size:15px;color:var(--t3);line-height:1.55;margin-top:4px} /* group vs group illustration */ .sp-sg .sgl .gvg-mock{padding:26px 22px 20px;display:grid;gap:12px;background:#fff;font-family:Inter,system-ui,sans-serif;color:#122640} .sp-sg .sgl .gvg-top{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center} .sp-sg .sgl .gvg-badge{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#163F7A,#1D5FD1);color:#fff;font:900 14px/1 "Plus Jakarta Sans",Inter,sans-serif} .sp-sg .sgl .gvg-top b{display:block;font-size:17px} .sp-sg .sgl .gvg-top small{font-size:13px;color:#5a6b80} .sp-sg .sgl .gvg-lead{font-size:12px;font-weight:800;color:#0f766e;background:#ccfbf1;border-radius:999px;padding:4px 10px} .sp-sg .sgl .gvg-msg{margin:0;font-size:14px;font-style:italic;color:#5a6b80} .sp-sg .sgl .gvg-bar{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:14px;font-weight:700} .sp-sg .sgl .gvg-bar i{height:12px;border-radius:999px;background:#eef2f7;overflow:hidden} .sp-sg .sgl .gvg-bar em{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#818cf8,#4338ca)} .sp-sg .sgl .gvg-bar.us em{background:linear-gradient(90deg,#5eead4,#0f766e)} .sp-sg .sgl .gvg-bar small{font-weight:500;color:#5a6b80} .sp-sg .sgl .gvg-cup{margin-top:6px;border-top:1px solid #e3e8ef;padding-top:14px} .sp-sg .sgl .gvg-cuph{margin:0 0 8px;font-weight:800;color:#122640;font-size:15px} .sp-sg .sgl .gvg-cup ol{list-style:none !important;margin:0 !important;padding:0 !important;display:grid;gap:6px} .sp-sg .sgl .gvg-cup li{list-style:none !important;margin:0 !important;display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;padding:7px 10px !important;border-radius:10px;background:#f8fafc;font-size:14px} .sp-sg .sgl .gvg-cup li.us{background:#f0fdfa;box-shadow:inset 3px 0 0 #36BCB1} .sp-sg .sgl .gvg-name small{display:block;font-size:12px;color:#5a6b80} .sp-sg .sgl .gvg-num{font-size:13px;color:#5a6b80}.sp-sg .sgl .gvg-num b{color:#122640;font-size:15px} .sp-sg .sgl .gvg-rank{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e7eef6;font-size:12px;font-weight:900} .sp-sg .sgl .gvg-rank.r1{background:#f6c945}.sp-sg .sgl .gvg-rank.r2{background:#d5dde7}.sp-sg .sgl .gvg-rank.r3{background:#e9b48a} .sp-sg .sgl .gvg-prize{margin:10px 0 0;font-size:13px;font-weight:700;color:#7c4a03;background:#fef3c7;border-radius:8px;padding:8px 10px} /* Group Cup band */ .sp-sg .sgl .cup .wrap{padding-top:72px;padding-bottom:72px} .sp-sg .sgl .cup-in{display:flex;gap:36px;align-items:center;max-width:960px;margin:0 auto} .sp-sg .sgl .cup-trophy{flex:0 0 120px;height:120px;border-radius:50%;display:grid;place-items:center;font-size:62px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)} .sp-sg .sgl .cup .eyebrow{color:#BFD6FF} .sp-sg .sgl .cup h2{color:#fff !important;font-size:36px !important;line-height:1.15 !important;margin:0 0 14px !important} .sp-sg .sgl .cup p{color:var(--onacc);font-size:18px;margin:0 0 24px} @media (max-width:820px){ .sp-sg .sgl .path-steps{grid-template-columns:1fr} .sp-sg .sgl .path-steps:before{left:40px;right:auto;top:20px;bottom:20px;width:3px;height:auto} .sp-sg .sgl .cup-in{flex-direction:column;text-align:center}.sp-sg .sgl .cup .btns{justify-content:center} .sp-sg .sgl .cup h2{font-size:28px !important} .sp-sg .sgl .gvg-bar{grid-template-columns:86px 1fr auto} } /* 0.8 app: group vs group, Group Cup, header badge */ #sp-pp.sp-sg-app a.sp-sg-countdown { text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } #sp-pp.sp-sg-app a.sp-sg-countdown:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(22, 63, 122, .32); } #sp-pp.sp-sg-app .sp-sg-chip-vs { background: linear-gradient(135deg, #0f766e, #36BCB1); } #sp-pp.sp-sg-app .sp-sg-chip-vs span { color: #d9fbf6; text-transform: none; letter-spacing: 0; max-width: 190px; } #sp-pp.sp-sg-app .sp-sg-chip-cup { background: linear-gradient(135deg, #92400e, #d97706); } #sp-pp.sp-sg-app .sp-sg-chip-cup span { color: #fef3c7; } #sp-pp.sp-sg-app .sp-sg-pad { margin-left: 20px; margin-right: 20px; } #sp-pp.sp-sg-app .sp-sg-gvg .sp-sg-edit, #sp-pp.sp-sg-app .sp-sg-vs-list { margin-left: 20px; margin-right: 20px; } #sp-pp.sp-sg-app .sp-sg-vs-list { display: grid; gap: 12px; margin-bottom: 14px; } #sp-pp.sp-sg-app .sp-sg-vs { border: 1px solid var(--pp-line); border-radius: 14px; padding: 12px 14px; background: #fff; } #sp-pp.sp-sg-app .sp-sg-vs.is-active { border-color: #99f6e4; background: linear-gradient(180deg, #f0fdfa, #fff); } #sp-pp.sp-sg-app .sp-sg-vs.is-pending { border-style: dashed; } #sp-pp.sp-sg-app .sp-sg-vs.is-in { border-color: #f59e0b; border-style: solid; background: #fffbeb; } #sp-pp.sp-sg-app .sp-sg-vs.is-done { background: #f8fafc; } #sp-pp.sp-sg-app .sp-sg-vs-head { display: flex; gap: 10px; align-items: center; } #sp-pp.sp-sg-app .sp-sg-vs-head small { display: block; color: var(--pp-muted); font-size: .8rem; } #sp-pp.sp-sg-app .sp-sg-vs-badge { flex: 0 0 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #163F7A, #1D5FD1); color: #fff; font-weight: 900; font-size: .8rem; } #sp-pp.sp-sg-app .sp-sg-vs-bars li { grid-template-columns: minmax(80px, 36%) 1fr auto; } #sp-pp.sp-sg-app .sp-sg-vs-bars b small { font-weight: 500; color: var(--pp-muted); font-size: .75rem; } #sp-pp.sp-sg-app .sp-sg-vs .sp-sg-row { margin-top: 10px; } #sp-pp.sp-sg-app .sp-sg-code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #f1f5f9; margin: 8px 0 12px; } #sp-pp.sp-sg-app .sp-sg-code span { font-size: .82rem; color: var(--pp-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } #sp-pp.sp-sg-app .sp-sg-code b { font-family: ui-monospace, Menlo, monospace; font-size: 1.15rem; letter-spacing: .12em; color: var(--pp-ink); } #sp-pp.sp-sg-app .sp-sg-prize { display: flex; gap: 10px; align-items: flex-start; margin: 0 20px 12px; padding: 10px 12px; border-radius: 10px; background: #fef3c7; } #sp-pp.sp-sg-app .sp-sg-prize .sp-pp-ico { flex: 0 0 20px; width: 20px; height: 20px; stroke: #92400e; margin-top: 2px; } #sp-pp.sp-sg-app .sp-sg-prize p { margin: 0; color: #7c4a03; font-weight: 600; font-size: .9rem; } .sp-sg .sgl .hero-cover{margin:-10px 0 28px;font-size:17px;color:var(--t2)} .sp-sg .sgl .hero-cover b{color:var(--ink)} /* 0.8.1 feedback */ #sp-pp.sp-sg-app .sp-sg-fbcard { max-width: 760px; } #sp-pp.sp-sg-app .sp-sg-fbhead { display: flex; gap: 14px; align-items: flex-start; padding: 20px 20px 4px; } #sp-pp.sp-sg-app .sp-sg-fbhead h2 { margin: 0 0 4px; font-size: 1.15rem; } #sp-pp.sp-sg-app .sp-sg-fbhead p { margin: 0; } #sp-pp.sp-sg-app .sp-sg-fbava { flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #163F7A, #1D5FD1); color: #fff; font-weight: 900; } #sp-pp.sp-sg-app .sp-sg-fbform { padding: 8px 20px 20px; } #sp-pp.sp-sg-app .sp-sg-moods { border: 0; padding: 0; margin: 6px 0 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } #sp-pp.sp-sg-app .sp-sg-moods legend { font-weight: 700; margin-bottom: 8px; width: 100%; } #sp-pp.sp-sg-app .sp-sg-moods label { margin: 0; cursor: pointer; } #sp-pp.sp-sg-app .sp-sg-moods input { position: absolute; opacity: 0; pointer-events: none; } #sp-pp.sp-sg-app .sp-sg-moods span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; border: 1.5px solid var(--pp-line); background: #fff; font-size: 1.6rem; transition: transform .12s ease, border-color .12s ease, background .12s ease; } #sp-pp.sp-sg-app .sp-sg-moods label:hover span { transform: translateY(-2px); border-color: #93c5fd; } #sp-pp.sp-sg-app .sp-sg-moods input:checked + span { border-color: #1D5FD1; background: #eff6ff; box-shadow: 0 0 0 3px rgba(29, 95, 209, .15); } #sp-pp.sp-sg-app .sp-sg-moods input:focus-visible + span { outline: 2px solid #1D5FD1; outline-offset: 2px; } #sp-pp.sp-sg-app .sp-sg-fbform textarea { width: 100%; } #sp-pp.sp-sg-app .sp-sg-fbnudge { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; padding: 14px 18px; border-radius: 14px; border: 1px dashed #93c5fd; background: #f5f9ff; color: var(--pp-ink); text-decoration: none; } #sp-pp.sp-sg-app .sp-sg-fbnudge:hover { border-style: solid; background: #eff6ff; } #sp-pp.sp-sg-app .sp-sg-fbnudge > span:first-child { font-size: 1.4rem; } #sp-pp.sp-sg-app .sp-sg-fbnudge > span:nth-child(2) { flex: 1 1 260px; } #sp-pp.sp-sg-app .sp-sg-fbgo { font-weight: 800; color: #1D5FD1; } /* ---------- 0.9.0 self-serve groups ---------- */ .sp-sg .sgl .selfserve{max-width:760px;margin:0 0 56px} .sp-sg .sgl .selfserve p{font-size:16px;line-height:1.55;color:var(--ink);margin:0 0 14px} .sp-sg .sgl .sec-head-2{margin:8px 0 28px;padding-top:40px;border-top:1px solid var(--line)} .sp-sg .sgl .join .join-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:start} .sp-sg .sgl .join h1{font:800 clamp(30px,4vw,44px)/1.1 "Plus Jakarta Sans",Inter,sans-serif;color:var(--ink);margin:6px 0 12px} .sp-sg .sgl .join .lead{font-size:17px;color:var(--t2);margin:0 0 20px} .sp-sg .sgl .join .join-list{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px} .sp-sg .sgl .join .join-list li{margin:0;font-size:16px;line-height:1.5;color:var(--ink)} .sp-sg .sgl .join .join-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 8px 28px rgba(16,24,40,.08)} .sp-sg .sgl .join .join-box .h2-24{margin:0 0 14px} .sp-sg .sgl .join .join-box .reqform{gap:14px} .sp-sg .sgl .join .join-or{margin-top:28px !important;padding-top:24px;border-top:1px solid var(--line)} @media (max-width:860px){.sp-sg .sgl .join .join-grid{grid-template-columns:1fr;gap:28px}.sp-sg .sgl .join .join-box{padding:20px}} #sp-pp.sp-sg-app .sp-sg-lockchip { margin-left: auto; display: inline-flex; color: var(--pp-muted); opacity: .8; } #sp-pp.sp-sg-app .sp-sg-lockchip .sp-pp-ico { width: 14px; height: 14px; flex-basis: 14px; } #sp-pp.sp-sg-app .sp-sg-guest { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 22px 24px; background: linear-gradient(135deg, #EEF4FF 0%, #F5FAFF 100%); border-color: #C7D7FE; } #sp-pp.sp-sg-app .sp-sg-guest-txt { flex: 1 1 420px; } #sp-pp.sp-sg-app .sp-sg-guest h2 { margin: 4px 0 6px; font-size: 1.25rem; color: var(--pp-ink); } #sp-pp.sp-sg-app .sp-sg-guest p { margin: 0; color: var(--pp-ink); line-height: 1.55; } #sp-pp.sp-sg-app .sp-sg-glock { display: block !important; text-align: center; padding: 40px 28px; max-width: 680px; margin: 0 auto; } #sp-pp.sp-sg-app .sp-sg-glock h2 { margin: 10px 0 8px; font-size: 1.35rem; color: var(--pp-ink); } #sp-pp.sp-sg-app .sp-sg-glock p { color: var(--pp-muted); line-height: 1.6; margin: 0 auto 16px; max-width: 520px; } #sp-pp.sp-sg-app .sp-sg-glock .sp-sg-row { justify-content: center; } #sp-pp.sp-sg-app .sp-sg-glock-ico { display: inline-flex; width: 52px; height: 52px; border-radius: 50%; align-items: center; justify-content: center; background: #EEF4FF; color: var(--pp-brand, #1c4587); } #sp-pp.sp-sg-app .sp-sg-glock-ico .sp-pp-ico { width: 24px; height: 24px; flex-basis: 24px; } #sp-pp.sp-sg-app .sp-sg-invitelink { display: flex; gap: 10px; margin: 6px 20px 8px; } #sp-pp.sp-sg-app .sp-sg-invitelink input { flex: 1; min-width: 0; font: 600 15px/1.3 Lato, Inter, sans-serif; padding: 10px 12px; border: 1px solid var(--pp-line); border-radius: 8px; background: #F8FAFC; color: var(--pp-ink); } #sp-pp.sp-sg-app .sp-sg-invitecard > .sp-sg-small, #sp-pp.sp-sg-app .sp-sg-invitecard > details, #sp-pp.sp-sg-app .sp-sg-invitecard > form { margin-left: 20px; margin-right: 20px; } #sp-pp.sp-sg-app .sp-sg-invitecard > form { margin-bottom: 18px; } #sp-pp.sp-sg-app .sp-sg-joincode { font-family: ui-monospace, Menlo, monospace; letter-spacing: .12em; font-size: 1.05em; color: var(--pp-ink); } #sp-pp.sp-sg-app .sp-sg-more-d { margin: 10px 0; } #sp-pp.sp-sg-app .sp-sg-more-d > summary { cursor: pointer; font-weight: 700; color: var(--pp-brand, #1c4587); } #sp-pp.sp-sg-app .sp-sg-more-d textarea { width: 100%; margin-top: 8px; border: 1px solid var(--pp-line); border-radius: 8px; padding: 10px; font: 400 14px/1.45 Lato, Inter, sans-serif; } #sp-pp.sp-sg-app .sp-sg-inline { display: inline; margin: 0; } #sp-pp.sp-sg-app button.sp-sg-linkbtn { background: none !important; border: 0 !important; padding: 2px 6px !important; margin: 0 !important; color: var(--pp-brand, #1c4587) !important; font: 700 13px/1.3 Lato, Inter, sans-serif !important; text-transform: none !important; cursor: pointer; box-shadow: none !important; min-height: 0 !important; width: auto !important; } #sp-pp.sp-sg-app button.sp-sg-linkbtn.sp-sg-danger { color: #B42318 !important; } #sp-pp.sp-sg-app button.sp-sg-small-btn { font-size: 13px !important; padding: 6px 12px !important; } #sp-pp.sp-sg-app .sp-sg-actions { white-space: nowrap; text-align: right; } #sp-pp.sp-sg-app .sp-sg-dangerzone { margin: 16px 20px 18px; } #sp-pp.sp-sg-app .sp-sg-dangerzone > summary { color: #B42318; } #sp-pp.sp-sg-app button.sp-sg-danger-btn { background: #B42318 !important; border-color: #B42318 !important; color: #fff !important; } #sp-pp.sp-sg-app .sp-sg-report > form, #sp-pp.sp-sg-app .sp-sg-report > details { margin: 6px 20px 16px; display: block; } @media (max-width: 600px) { #sp-pp.sp-sg-app .sp-sg-invitelink { flex-direction: column; } } .sp-sg .sgl .reqform label[hidden]{display:none !important} .sp-sg .sgl .reqform label > span:first-child{color:var(--ink)} #sp-pp.sp-sg-app .sp-sg-adminadd { margin: 6px 20px 16px; } /* ---------- 0.9.5 Feedback button + star form (replaces Doorbell on study group pages) ---------- */ #sp-sgfb-pill{position:fixed;left:20px;bottom:20px;z-index:99970;display:inline-flex !important;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px !important;margin:0 !important;border:1px solid #D5DEEA !important;border-radius:999px !important;background:#fff !important;color:#14325C !important;font:800 14px/1 Lato,'Helvetica Neue',Arial,sans-serif !important;cursor:pointer;box-shadow:0 6px 18px rgba(16,42,84,.16) !important;text-transform:none !important;letter-spacing:0 !important;width:auto !important} #sp-sgfb-pill:hover,#sp-sgfb-pill:focus-visible{background:#F3F6FA !important;outline:2px solid #14325C;outline-offset:2px} #sp-sgfb-pill svg{width:18px;height:18px;flex:none} #sp-sgfb-panel{position:fixed;left:20px;bottom:76px;z-index:99975;width:350px;max-width:calc(100vw - 32px);padding:18px 18px 16px;border:1px solid #D5DEEA;border-radius:16px;background:#fff;box-shadow:0 14px 36px rgba(16,42,84,.22)} #sp-sgfb-panel[hidden]{display:none !important} #sp-sgfb-x{position:absolute;top:10px;right:10px;width:32px !important;height:32px !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:8px !important;background:transparent !important;color:#4A5568 !important;font-size:22px !important;line-height:1 !important;cursor:pointer;box-shadow:none !important;min-height:0 !important} #sp-sgfb-x:hover{background:#F3F6FA !important} .sp-sgfb{color:#1A2433;font-family:Lato,'Helvetica Neue',Arial,sans-serif} .sp-sgfb .sp-sgfb-h{margin:0 28px 4px 0 !important;font:900 17px/1.25 Lato,'Helvetica Neue',Arial,sans-serif !important;color:#14325C !important} .sp-sgfb .sp-sgfb-sub{margin:0 0 12px !important;font-size:13.5px !important;line-height:1.45 !important;color:#4A5568 !important} .sp-sgfb-stars{display:flex;gap:4px;margin:0 0 12px} .sp-sgfb-stars button{width:44px !important;height:44px !important;padding:0 !important;margin:0 !important;border:0 !important;border-radius:10px !important;background:transparent !important;color:#C3CEDD !important;cursor:pointer;line-height:0 !important;box-shadow:none !important;min-height:0 !important} .sp-sgfb-stars button svg{width:32px;height:32px;fill:currentColor !important} .sp-sgfb-stars button.on{color:#F2B705 !important} .sp-sgfb-stars button:focus-visible{outline:2px solid #14325C} .sp-sgfb .sp-sgfb-text{display:block;width:100% !important;box-sizing:border-box;min-height:84px;padding:10px 12px !important;margin:0 0 10px !important;border:1px solid #C3CEDD !important;border-radius:10px !important;font:15px/1.4 Lato,'Helvetica Neue',Arial,sans-serif !important;color:#1A2433 !important;background:#fff !important;resize:vertical} .sp-sgfb .sp-sgfb-text:focus{outline:2px solid #14325C;border-color:#14325C !important} .sp-sgfb .sp-sgfb-reply{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:13.5px;color:#4A5568;font-weight:400} .sp-sgfb .sp-sgfb-send{display:block;width:100% !important;min-height:44px;margin:0 !important;border:0 !important;border-radius:10px !important;background:#14325C !important;color:#fff !important;font:900 15px/1 Lato,'Helvetica Neue',Arial,sans-serif !important;cursor:pointer;text-transform:none !important} .sp-sgfb .sp-sgfb-send[disabled]{opacity:.45 !important;cursor:default} .sp-sgfb .sp-sgfb-msg{margin:10px 0 0 !important;font-size:13px !important;color:#4A5568 !important} .sp-sgfb .sp-sgfb-msg.err{color:#B42318 !important} .sp-sgfb .sp-sgfb-note{margin:10px 0 0 !important;font-size:12px !important;color:#6B7A90 !important} #sp-sgfb-tab{max-width:520px;padding:4px 20px 20px} @media (max-width:600px){#sp-sgfb-pill{left:12px;bottom:12px}#sp-sgfb-panel{left:16px;right:16px;bottom:68px;width:auto}} @media print{#sp-sgfb-pill,#sp-sgfb-panel{display:none !important}} /* ---------- 0.9.7 review fixes ---------- */ /* The theme wraps selects in .selection-box with a 48px arrow box that hangs below our 40px selects. */ #sp-pp .selection-box::after, #sp-pp .selection-box::before, .sp-sg .selection-box::after, .sp-sg .selection-box::before { display: none !important; } #sp-pp .selection-box, .sp-sg .selection-box { height: auto !important; } /* Feedback button never sits on top of the open mobile menu. */ body.sp-sg-nav-open #sp-sgfb-pill, body.sp-sg-nav-open #sp-sgfb-panel { display: none !important; } /* Bigger tap targets for small links. */ #sp-pp.sp-sg-app .sp-sg-more { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 8px; margin: -6px -8px; } #sp-pp.sp-sg-app details > summary { min-height: 36px; display: flex; align-items: center; } /* Locked badges: readable, still clearly not earned. */ #sp-pp.sp-sg-app .sp-sg-badge { color: #475569; filter: grayscale(1); opacity: .85; } #sp-pp.sp-sg-app .sp-sg-badge.on { opacity: 1; } /* Self-serve invite banner at the top of Overview. */ #sp-pp.sp-sg-app .sp-sg-invitebanner { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 18px; background: linear-gradient(135deg, #ECFDF3 0%, #F6FEF9 100%); border: 1px solid #ABEFC6; border-radius: 14px; } #sp-pp.sp-sg-app .sp-sg-invitebanner h2 { margin: 0 0 4px; font-size: 1.15rem; color: var(--pp-ink); } #sp-pp.sp-sg-app .sp-sg-invitebanner p { margin: 0; color: var(--pp-ink); line-height: 1.5; max-width: 620px; } #sp-pp.sp-sg-app .sp-sg-invitebanner .sp-sg-ib-txt { flex: 1 1 360px; } #sp-pp.sp-sg-app .sp-sg-invitebanner .sp-sg-row { gap: 8px; flex-wrap: wrap; } #sp-pp.sp-sg-app .sp-sg-invitebanner input.sg-copytext { position: absolute; left: -9999px; width: 1px; height: 1px; } /* Invite page: free signup first. */ .sp-sg .sgl .join .join-login { margin: 0 0 18px; font-size: 15px; color: var(--ink); } .sp-sg .sgl .join .join-login a { font-weight: 700; } .sp-sg .sgl .join .pw-wrap { position: relative; display: block; } .sp-sg .sgl .join .pw-wrap input { padding-right: 70px !important; } .sp-sg .sgl .join .pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none !important; border: 0 !important; color: var(--acc) !important; font: 700 14px/1 Inter, sans-serif !important; cursor: pointer; padding: 8px !important; box-shadow: none !important; min-height: 0 !important; width: auto !important; text-transform: none !important; } /* Landing: the group-pricing form tucks behind a toggle. */ .sp-sg .sgl details.quote-d { max-width: 760px; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 28px; } .sp-sg .sgl details.quote-d > summary { cursor: pointer; font: 700 18px/1.3 "Plus Jakarta Sans", Inter, sans-serif; color: var(--ink); list-style: none; } .sp-sg .sgl details.quote-d > summary::-webkit-details-marker { display: none; } .sp-sg .sgl details.quote-d > summary span { color: var(--acc); } .sp-sg .sgl details.quote-d[open] > summary { margin-bottom: 18px; } .sp-sgfb .sp-sgfb-email{display:block;width:100% !important;box-sizing:border-box;min-height:42px;padding:8px 12px !important;margin:0 0 12px !important;border:1px solid #C3CEDD !important;border-radius:10px !important;font:15px/1.4 Lato,'Helvetica Neue',Arial,sans-serif !important;color:#1A2433 !important;background:#fff !important} .sp-sgfb .sp-sgfb-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden} /* Our own dropdown arrow (the theme's arrow box is hidden above). */ #sp-pp.sp-sg-app select, .sp-sg .sgl .reqform select { -webkit-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px 8px !important; padding-right: 36px !important; }