/* SAT Math Practice Hub 4.0.16 — student achievement dashboard (Grade 10 and Grade 11). Self-contained: works with or without the Graph Paper skin. */
.si-wrap{--si-ink:#14123f;--si-muted:#5b6478;--si-line:#e3e7f3;--si-indigo:#4f46e5;--si-sky:#0ea5e9;--si-mint:#10b981;--si-amber:#f59e0b;--si-rose:#e11d48;--si-violet:#8b5cf6;
  display:grid;gap:18px;color:var(--si-ink);font-family:inherit;min-width:0}
.si-wrap *{box-sizing:border-box}
.si-card{position:relative;min-width:0;padding:20px 22px;border:1px solid var(--si-line);border-radius:24px;background:#fff;box-shadow:0 14px 40px rgba(20,18,63,.07);animation:siRise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0)*90ms)}
.si-card h3{margin:0 0 4px;font-size:1.15rem;font-weight:800;letter-spacing:-.01em;color:var(--si-ink)}
.si-card .si-sub{margin:0 0 14px;color:var(--si-muted);font-size:.875rem;line-height:1.45}
.si-grid-3{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px}
.si-grid-2{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}

/* Banner: big count with a live activity line */
.si-banner{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;min-height:120px;padding:22px 28px 30px;border-radius:24px;color:#fff;
  background:radial-gradient(600px 220px at 85% -40%,rgba(255,255,255,.22),transparent 70%),linear-gradient(115deg,#1d4ed8,#2563eb 45%,#0ea5e9);box-shadow:0 18px 44px rgba(29,78,216,.25);animation:siRise .6s both}
.si-banner-copy{position:relative;z-index:1}
.si-banner-copy small{display:block;color:#dbeafe;font-size:.8rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.si-banner-copy strong{display:block;margin-top:2px;font-size:clamp(2.4rem,5vw,3.4rem);font-weight:900;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.si-banner-copy span{display:block;margin-top:4px;color:#e0f2fe;font-size:.9rem;font-weight:600}
.si-banner-chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px}
.si-chip{padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:siRise .5s both;animation-delay:calc(.3s + var(--k,0)*.1s)}
.si-chip b{display:block;font-size:1.35rem;font-weight:900;line-height:1.1}
.si-chip small{color:#dbeafe;font-size:.72rem;font-weight:700}
.si-spark{position:absolute;left:0;right:0;bottom:0;width:100%;height:56px;pointer-events:none}
.si-spark .ln{stroke:rgba(255,255,255,.75);stroke-width:2;fill:none;stroke-dasharray:1200;stroke-dashoffset:1200;animation:siDraw 2s .4s ease-out forwards}
.si-spark .ar{fill:rgba(255,255,255,.14);animation:siFade 1s 1.2s both}

/* Concentric progress rings */
.si-rings{display:flex;align-items:center;gap:18px}
.si-rings svg{flex:0 0 auto;width:150px;height:150px}
.si-rings .trk{stroke:#eef1f8}
.si-rings .arc{stroke-linecap:round;animation:siDash 1.4s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(.3s + var(--k,0)*.2s)}
.si-rings-legend{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.si-rings-legend li{display:grid;grid-template-columns:12px 1fr;gap:2px 9px;align-items:center;animation:siRise .5s both;animation-delay:calc(.4s + var(--k,0)*.12s)}
.si-rings-legend i{width:12px;height:12px;border-radius:50%}
.si-rings-legend b{font-size:1.15rem;font-weight:900;color:var(--si-ink);font-variant-numeric:tabular-nums}
.si-rings-legend small{grid-column:2;color:var(--si-muted);font-size:.75rem;font-weight:700}

/* Score trend line */
.si-trend-chart{width:100%;height:auto;overflow:visible}
.si-trend-chart .g{stroke:#eef1f8;stroke-width:1}
.si-trend-chart .lbl{fill:var(--si-muted);font-size:10px;font-weight:700}
.si-trend-chart .ln{fill:none;stroke:var(--si-indigo);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:1000;animation:siDraw 1.6s .3s ease-out forwards}
.si-trend-chart .ar{fill:url(#siTrendFill);animation:siFade .8s 1s both}
.si-trend-chart .pt{fill:#fff;stroke:var(--si-indigo);stroke-width:2.5;animation:siPop .4s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.6s + var(--k,0)*.12s)}
.si-trend-chart .pt.last{fill:var(--si-indigo)}
.si-trend-meta{display:flex;justify-content:space-between;margin-top:6px;color:var(--si-muted);font-size:.78rem;font-weight:700}
.si-ring-legend{display:grid;gap:8px;font-size:.875rem;color:var(--si-muted);font-weight:700}

/* Activity strip */
.si-days{display:grid;grid-template-columns:repeat(14,1fr);gap:5px;margin-top:6px}
.si-day{aspect-ratio:1;border-radius:6px;background:#eef1f8;animation:siPop .4s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--k,0)*35ms + .3s)}
.si-day.l1{background:#c7d2fe}.si-day.l2{background:#818cf8}.si-day.l3{background:#4338ca}
.si-days-legend{display:flex;justify-content:space-between;margin-top:6px;color:var(--si-muted);font-size:.72rem;font-weight:700}
.si-streak{display:flex;gap:10px;margin-top:12px}
.si-streak div{flex:1;padding:10px 12px;border-radius:14px;background:#f6f7fd}
.si-streak strong{display:block;font-size:1.3rem;font-weight:900}
.si-streak small{color:var(--si-muted);font-size:.75rem;font-weight:700}

/* Domain bars */
.si-bars{display:grid;gap:9px}
.si-bar{display:grid;grid-template-columns:minmax(80px,42%) minmax(40px,1fr) auto;align-items:center;gap:10px;font-size:.85rem;font-weight:700;color:var(--si-ink)}
.si-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.si-bar i{position:relative;height:10px;border-radius:99px;background:#eef1f8;overflow:hidden}
.si-bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:inherit;background:linear-gradient(90deg,var(--c1,#818cf8),var(--c2,#4f46e5));transform-origin:left;animation:siBar 1.1s cubic-bezier(.2,.9,.25,1) both;animation-delay:calc(var(--k,0)*70ms + .3s)}
.si-bar.done i{--c1:#6ee7b7;--c2:#059669}
.si-bar b{text-align:right;color:var(--si-muted);font-variant-numeric:tabular-nums}

/* Suggestions */
.si-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.si-step{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--si-line);border-radius:16px;background:#fbfbff;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.si-step:hover{transform:translateX(4px);border-color:#c7d2fe;box-shadow:0 8px 20px rgba(79,70,229,.1)}
.si-step-icon{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:12px;color:#fff;font-weight:900;background:var(--c,#4f46e5)}
.si-step div{flex:1;min-width:0}
.si-step strong{display:block;font-size:.95rem;font-weight:800;color:var(--si-ink)}
.si-step small{display:block;color:var(--si-muted);font-size:.8rem;line-height:1.4}
.si-step button,.si-step .si-go{flex:0 0 auto;padding:8px 14px;border:0;border-radius:999px;background:var(--si-indigo);color:#fff;font:inherit;font-size:.8rem;font-weight:800;cursor:pointer;transition:transform .2s,background .2s}
.si-step button:hover{transform:scale(1.05);background:#4338ca}
.si-step button:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* Badges */
.si-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.si-badge{display:grid;justify-items:center;gap:6px;padding:12px 8px;border-radius:18px;text-align:center;background:#f8f9fe;border:1px dashed #d6dbea;animation:siPop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--k,0)*80ms + .4s)}
.si-badge svg{width:46px;height:46px}
.si-badge strong{font-size:.78rem;font-weight:800;line-height:1.25;color:var(--si-ink)}
.si-badge small{font-size:.7rem;color:var(--si-muted);font-weight:700}
.si-badge.is-earned{background:linear-gradient(160deg,#fffbeb,#fff);border:1px solid #fcd34d}
.si-badge.is-earned svg{animation:siShine 3s 1.5s ease-in-out infinite}
.si-badge:not(.is-earned) svg{filter:grayscale(1);opacity:.45}

/* Strategies */
.si-tips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.si-tip{position:relative;padding:16px;border-radius:18px;background:linear-gradient(160deg,var(--t1,#eef2ff),#fff 70%);border:1px solid var(--si-line);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.si-tip:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(20,18,63,.1)}
.si-tip span{display:grid;place-items:center;width:40px;height:40px;margin-bottom:10px;border-radius:12px;background:#fff;box-shadow:0 6px 14px rgba(20,18,63,.08);font-size:20px}
.si-tip strong{display:block;font-size:.95rem;font-weight:800;color:var(--si-ink)}
.si-tip p{margin:6px 0 0;color:var(--si-muted);font-size:.82rem;line-height:1.5}

.si-empty{margin:0;color:var(--si-muted);font-size:.875rem}

@keyframes siFade{from{opacity:0}to{opacity:1}}
@keyframes siDraw{to{stroke-dashoffset:0}}
@keyframes siRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes siFlip{0%{opacity:0;transform:rotateX(90deg)}100%{opacity:1;transform:none}}
@keyframes siWave{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
@keyframes siGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes siFlag{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes siDrift{from{transform:translateX(-8px)}to{transform:translateX(10px)}}
@keyframes siDash{from{stroke-dashoffset:var(--len,400)}}
@keyframes siPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes siBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes siShine{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-6deg) scale(1.08)}}

@media (max-width:1100px){.si-grid-3{grid-template-columns:1fr 1fr}.si-grid-3>:first-child{grid-column:1/-1}.si-tips{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.si-grid-3,.si-grid-2{grid-template-columns:1fr}.si-grid-3>:first-child{grid-column:auto}.si-rings{flex-wrap:wrap;justify-content:center}.si-banner{justify-content:center;text-align:center}.si-bar{grid-template-columns:minmax(80px,45%) minmax(40px,1fr) auto}.si-tips{grid-template-columns:1fr}.si-step{flex-wrap:wrap}.si-step button{margin-left:50px}}
@media (prefers-reduced-motion:reduce){.si-wrap *,.si-wrap *::before,.si-wrap *::after{animation:none!important;transition:none!important}.si-wrap .ln{stroke-dashoffset:0!important}}
@media print{.si-wrap{display:none}}