.hub-hero {
position:relative; display:flex; gap:26px; align-items:center; padding:30px;
background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:24px; overflow:hidden; margin-bottom:34px;
}
.hub-hero::after { content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(420px 220px at 88% 0%, var(--scene-glow), transparent 70%); }
.hub-face {
width:104px; height:104px; flex-shrink:0; border-radius:50%; overflow:hidden; position:relative; z-index:1;
background-size:cover; background-position:center top; box-shadow:0 0 0 2px var(--warm-glow-soft), 0 10px 30px rgba(0,0,0,0.3);
filter:sepia(0.1) contrast(1.02);
}
.hub-hero-body { position:relative; z-index:1; flex:1; min-width:0; }
.hub-greet-name { font-family:'Fraunces',serif; font-size:14px; color:var(--warm-glow); font-weight:600; letter-spacing:.02em; }
.hub-greet { font-family:'Fraunces',serif; font-size:clamp(22px,3.4vw,30px); font-weight:400; line-height:1.22; margin:6px 0 4px; }
.hub-greet em { font-style:italic; color:var(--warm-glow); }
.hub-greet-sub { color:var(--text-dim); font-size:15px; line-height:1.55; max-width:560px; }
.hub-hero-actions { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.hub-bar { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:30px; }
.hub-stat {
flex:1; min-width:170px; display:flex; align-items:center; gap:14px; padding:18px 20px;
background:var(--panel-bg); border:1px solid var(--panel-border); border-radius:16px;
}
.hub-stat-ic { width:42px; height:42px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center;
background:var(--hover-tint); color:var(--warm-glow); }
.hub-stat-ic svg { width:20px; height:20px; }
.hub-stat-n { font-family:'Fraunces',serif; font-size:22px; font-weight:500; line-height:1.05; }
.hub-stat-l { font-size:12.5px; color:var(--text-dim); margin-top:2px; }
.hub-section-h { font-family:'Fraunces',serif; font-size:24px; font-weight:500; margin:0 0 18px; }
.hub-loading { padding:40px 0; text-align:center; color:var(--text-faint); }
/* pacing pill on the hero */
.pace-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:999px;
font-size:12.5px; font-weight:700; letter-spacing:.01em; margin-bottom:12px; }
.pace-pill .dot { width:8px; height:8px; border-radius:50%; }
.pace-on { background:rgba(76,150,90,0.14); color:#3c7a4c; }
.pace-on .dot { background:#4c965a; }
.pace-behind { background:rgba(190,110,40,0.16); color:#b06a26; }
.pace-behind .dot { background:#c8801f; }
.pace-done { background:var(--hover-tint); color:var(--warm-glow); }
.pace-done .dot { background:var(--warm-glow); }
.pace-momentum { background:var(--hover-tint); color:var(--text-dim); }
.pace-momentum .dot { background:var(--text-dim); }
html[data-theme="dark"] .pace-on { background:rgba(120,200,140,0.14); color:#8fd6a3; }
html[data-theme="dark"] .pace-behind { background:rgba(230,160,80,0.16); color:#f0b070; }
/* "what matters most next" focus card */
.focus-card { display:flex; align-items:center; gap:16px; padding:18px 20px; margin-bottom:30px;
background:var(--panel-bg); border:1px solid var(--panel-border); border-left:3px solid var(--warm-glow);
border-radius:16px; }
.focus-ic { width:40px; height:40px; flex-shrink:0; border-radius:11px; display:flex; align-items:center;
justify-content:center; background:var(--hover-tint); color:var(--warm-glow); }
.focus-ic svg { width:20px; height:20px; }
.focus-body { flex:1; min-width:0; }
.focus-kicker { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--warm-glow); }
.focus-title { font-family:'Fraunces',serif; font-size:18px; margin:3px 0 2px; line-height:1.25; }
.focus-sub { font-size:13.5px; color:var(--text-dim); }
.focus-card .btn { flex-shrink:0; }
@media (max-width:640px){ .focus-card { flex-wrap:wrap; } .focus-card .btn { width:100%; } }
My Semester
Your classes, all in one room