#grad-portal{min-height:70vh;background-color:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;margin:0;padding:0}
#grad-portal *{box-sizing:border-box}
.grad-shell{min-height:70vh;max-width:760px;margin:0 auto;padding:70px 24px 90px;text-align:center}
.grad-brand{font-size:14px;letter-spacing:3px;font-weight:700;margin-bottom:32px;color:#aaa}
.grad-title{font-size:38px;font-weight:800;letter-spacing:1px}
.grad-subtitle{font-size:18px;letter-spacing:4px;color:#bbb;margin-top:8px;margin-bottom:70px}
.grad-prompt{font-size:30px;margin-bottom:20px}
.grad-select,.grad-input{display:block;width:min(420px,100%);margin:12px auto;padding:16px 18px;border:1px solid #555;background:#111;color:#fff;border-radius:3px;font-size:18px;outline:none}
.grad-select:focus,.grad-input:focus{border-color:#fff}
.grad-button,.grad-join-button{display:inline-block;border:1px solid #fff;background:#fff;color:#000;padding:14px 28px;font-size:15px;font-weight:800;letter-spacing:1px;cursor:pointer;border-radius:3px;margin-top:18px}
.grad-button:hover,.grad-join-button:hover{background:#ddd}
.grad-button:disabled,.grad-join-button:disabled{opacity:.5;cursor:wait}
.grad-link-button{display:block;margin:20px auto 0;border:0;background:none;color:#aaa;text-decoration:underline;cursor:pointer;font-size:14px}
.grad-error{color:#ff8080;margin-top:18px;min-height:20px}
.grad-hidden{display:none!important}
.grad-welcome{font-size:22px;font-weight:700;letter-spacing:1px;margin-bottom:30px}
.grad-section-heading{font-size:16px;letter-spacing:2px;color:#aaa;margin:20px 0}
.grad-class-list{display:grid;gap:14px;text-align:left}
.grad-class-card{border:1px solid #333;background:#0b0b0b;padding:22px}
.grad-class-title{font-size:22px;font-weight:700;margin-bottom:10px}
.grad-class-meta,.grad-class-instructor,.grad-class-date{color:#aaa;font-size:14px;margin:5px 0}
.grad-class-tac{margin:10px 0;padding:8px 12px;background:#001a07;border:1px solid #0f6b2a;border-radius:3px;color:#5dff8a;font-size:13px;letter-spacing:.5px}
.grad-class-tac span{font-family:"Courier New",monospace;font-weight:700;letter-spacing:1.5px;margin-left:4px}
.grad-class-countdown{color:#fff;font-size:13px;font-weight:700;letter-spacing:.4px;margin-top:10px}.grad-class-countdown strong{font-variant-numeric:tabular-nums}
.grad-class-action{margin-top:18px}
.grad-status{display:inline-block;padding:10px 13px;font-size:12px;letter-spacing:1px;border:1px solid #444}
.grad-locked{color:#aaa}
.grad-present{color:#b7ffb7;border-color:#355a35}
.grad-message{margin-top:20px;color:#aaa}
.grad-empty{border:1px solid #333;padding:25px;color:#aaa}
@media(max-width:600px){
 .grad-shell{padding:45px 18px 70px}
 .grad-title{font-size:29px}
 .grad-subtitle{font-size:14px;letter-spacing:3px;margin-bottom:50px}
 .grad-prompt{font-size:25px}
 .grad-class-title{font-size:19px}
}

.grad-recording-list{display:grid;gap:12px;margin-top:12px}.grad-recording-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:#111}.grad-recording-title{font-size:18px;font-weight:700;color:#fff}.grad-recording-meta{margin-top:6px;color:#aaa;font-size:13px}.grad-recording-button{display:inline-block;padding:10px 14px;border-radius:8px;background:#fff;color:#000;text-decoration:none;font-weight:700;white-space:nowrap}.grad-recording-button:hover{opacity:.88}@media (max-width:600px){.grad-recording-card{flex-direction:column;align-items:flex-start}.grad-recording-button{width:100%;text-align:center;box-sizing:border-box}}

/* Role selector: override WordPress/theme form styles and keep the selected role visible. */
#grad-portal .grad-select{background:#111!important;color:#fff!important;border:2px solid #555!important;appearance:auto!important;-webkit-appearance:auto!important}
#grad-portal .grad-select.grad-student-selected{color:#20d9ff!important;border-color:#20d9ff!important;background:#071316!important}
#grad-portal .grad-select.grad-instructor-selected{color:#ffd34d!important;border-color:#ffd34d!important;background:#171307!important}
#grad-portal .grad-select option{background:#111!important;color:#fff!important}
#grad-portal .grad-select option[value="student"]{color:#20d9ff!important}
#grad-portal .grad-select option[value="instructor"]{color:#ffd34d!important}


/* Custom role selector: avoids native WordPress/browser select styling so the selected role is always readable. */
#grad-portal .grad-role-options{display:flex;width:min(420px,100%);margin:12px auto;gap:12px}
#grad-portal .grad-role-option{flex:1;min-height:58px;padding:14px 18px;border:2px solid #555!important;border-radius:4px!important;background:#111!important;color:#fff!important;font-size:17px!important;font-weight:800!important;letter-spacing:1px!important;cursor:pointer!important;box-shadow:none!important;text-shadow:none!important}
#grad-portal .grad-role-option:hover{background:#1a1a1a!important;border-color:#aaa!important}
#grad-portal .grad-role-option.grad-role-student-selected{background:#071c21!important;border-color:#20d9ff!important;color:#20d9ff!important}
#grad-portal .grad-role-option.grad-role-instructor-selected{background:#211b07!important;border-color:#ffd34d!important;color:#ffd34d!important}
#grad-portal .grad-role-option:focus-visible{outline:3px solid #fff!important;outline-offset:2px}
@media(max-width:600px){#grad-portal .grad-role-options{flex-direction:column;gap:10px}#grad-portal .grad-role-option{width:100%}}


/* v1.9 role selector: strong theme-resistant text visibility */
#grad-portal .grad-role-option {
    color: #ffffff !important;
    background: #111111 !important;
    border: 2px solid #555555 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}
#grad-portal .grad-role-option.grad-role-student-selected {
    color: #00e5ff !important;
    border-color: #00e5ff !important;
    -webkit-text-fill-color: #00e5ff !important;
}
#grad-portal .grad-role-option.grad-role-instructor-selected {
    color: #ffd54a !important;
    border-color: #ffd54a !important;
    -webkit-text-fill-color: #ffd54a !important;
}


/* v2.3: animated role choices on the GRAD home portal */
#grad-portal .grad-role-option{display:flex;align-items:center;justify-content:center;gap:10px;min-height:72px;transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;color:#fff!important;}
#grad-portal .grad-role-icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;transition:transform .3s ease;}
#grad-portal .grad-role-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
#grad-portal .grad-role-option[data-role="student"] .grad-role-icon{color:#20d9ff;}
#grad-portal .grad-role-option[data-role="instructor"] .grad-role-icon{color:#ffd34d;}
#grad-portal .grad-role-option[data-role="student"]:hover{background:#071c21!important;border-color:#20d9ff!important;color:#20d9ff!important;transform:translateY(-6px) scale(1.025);box-shadow:0 12px 28px rgba(32,217,255,.16);}
#grad-portal .grad-role-option[data-role="instructor"]:hover{background:#211b07!important;border-color:#ffd34d!important;color:#ffd34d!important;transform:translateY(-6px) scale(1.025);box-shadow:0 12px 28px rgba(255,211,77,.16);}
#grad-portal .grad-role-option:hover .grad-role-icon{transform:translateY(-3px) rotate(-6deg) scale(1.12);}
#grad-portal .grad-role-option.grad-role-student-selected{background:#071c21!important;border-color:#20d9ff!important;color:#20d9ff!important;}
#grad-portal .grad-role-option.grad-role-instructor-selected{background:#211b07!important;border-color:#ffd34d!important;color:#ffd34d!important;}
@media(max-width:600px){#grad-portal .grad-role-option{min-height:64px;}}

.grad-toggle-class-button{display:inline-block;border:1px solid #fff;background:#fff;color:#000;padding:14px 20px;font-size:14px;font-weight:800;letter-spacing:1px;cursor:pointer;border-radius:3px;margin:18px 10px 0 0}.grad-toggle-class-button:hover{background:#ddd}.grad-toggle-class-button:disabled{opacity:.5;cursor:wait}.grad-disable-class{background:#333;color:#fff;border-color:#666}.grad-disable-class:hover{background:#444}.grad-status.grad-locked{opacity:.65}

/* Hide the branding hero only after login; keep it visible on the login/home screen. */
body.grad-logged-in #grad-portal .grad-hero,
#grad-portal.grad-logged-in .grad-hero{display:none!important;}

/* v4.46: entrance animations + responsive class-card grid. */
@keyframes gradFadeInUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes gradFadeIn{from{opacity:0}to{opacity:1}}
@keyframes gradPulse{0%,100%{box-shadow:0 0 0 rgba(255,255,255,0)}50%{box-shadow:0 0 0 6px rgba(255,255,255,.08)}}

/* Screens (role select / name entry / dashboard) fade + rise in whenever they
   become visible; this restarts automatically each time display goes from
   none to visible, so no JS hook is required for the login flow itself. */
#grad-portal .grad-screen:not(.grad-hidden){animation:gradFadeInUp .45s cubic-bezier(.2,.8,.2,1) both}

/* The ARITHMETIC SOLUTIONS / GRAD FOUNDATION branding block on the
   login/role screens; hidden entirely post-login via .grad-logged-in above. */
#grad-portal .grad-hero{animation:gradFadeIn .6s ease both}

/* Post-login: welcome line + class cards animate in together. */
#grad-portal .grad-welcome{animation:gradFadeInUp .45s ease both}
#grad-portal .grad-dashboard-content.grad-animate-in .grad-class-card,
#grad-portal .grad-dashboard-content .grad-class-card{animation:gradFadeInUp .45s cubic-bezier(.2,.8,.2,1) both}
#grad-portal .grad-dashboard-content .grad-section-heading{animation:gradFadeIn .5s ease both}
#grad-portal .grad-dashboard-content .grad-class-list .grad-class-card:nth-child(1){animation-delay:.05s}
#grad-portal .grad-dashboard-content .grad-class-list .grad-class-card:nth-child(2){animation-delay:.12s}
#grad-portal .grad-dashboard-content .grad-class-list .grad-class-card:nth-child(3){animation-delay:.19s}
#grad-portal .grad-dashboard-content .grad-class-list .grad-class-card:nth-child(4){animation-delay:.26s}
#grad-portal .grad-dashboard-content .grad-class-list .grad-class-card:nth-child(n+5){animation-delay:.32s}
#grad-portal .grad-dashboard-content .grad-recording-list .grad-recording-card{animation:gradFadeInUp .45s ease both}
#grad-portal .grad-dashboard-content .grad-recording-list .grad-recording-card:nth-child(1){animation-delay:.1s}
#grad-portal .grad-dashboard-content .grad-recording-list .grad-recording-card:nth-child(2){animation-delay:.16s}
#grad-portal .grad-dashboard-content .grad-recording-list .grad-recording-card:nth-child(n+3){animation-delay:.22s}

/* Subtle live-card affordance: a live, joinable class breathes gently so it
   stands out from upcoming/locked cards without being distracting. */
#grad-portal .grad-class-card:has(.grad-join-button){animation:gradFadeInUp .45s cubic-bezier(.2,.8,.2,1) both,gradPulse 2.6s ease-in-out .5s infinite}

/* Smooth, gentle hover lift on class cards (desktop pointers only). */
@media (hover:hover) and (pointer:fine){
    #grad-portal .grad-class-card{transition:transform .2s ease,border-color .2s ease}
    #grad-portal .grad-class-card:hover{transform:translateY(-3px);border-color:#555}
}

/* Respect reduced-motion preferences: disable all decorative animation. */
@media (prefers-reduced-motion:reduce){
    #grad-portal *,#grad-portal *::before,#grad-portal *::after{animation:none!important;transition:none!important}
}

/* Responsive class-card grid: single column on phones, a fluid multi-column
   grid on tablets/desktops so returning students/instructors with several
   classes see them side by side instead of one long stack. */
#grad-portal .grad-class-list{grid-template-columns:1fr}
@media(min-width:640px){
    .grad-shell{max-width:920px}
    #grad-portal .grad-class-list{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}
@media(min-width:1000px){
    .grad-shell{max-width:1080px}
}

/* Class day/time: bold white labels, red separator, neon-green clock. */
#grad-portal .grad-class-time{font-weight:800;color:#fff;font-size:15px;letter-spacing:.25px}
#grad-portal .grad-time-day,#grad-portal .grad-time-zone{color:#fff;font-weight:800}
#grad-portal .grad-time-dot{color:#ff3b3b;font-weight:900}
#grad-portal .grad-time-clock{color:#39ff14;font-weight:900;font-variant-numeric:tabular-nums;text-shadow:0 0 5px rgba(57,255,20,.75),0 0 12px rgba(57,255,20,.45)}