.smart-reminder-host {
display: grid;
gap: 10px;
width: min(560px, calc(100% - 32px));
position: fixed;
top: max(96px, calc(var(--nav-offset, 96px) + 12px));
left: 50%;
transform: translateX(-50%);
z-index: 1200;
animation: smartReminderPop 180ms ease-out;
}
.smart-reminder-host[hidden] {
display: none;
}
.smart-reminder-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(10, 132, 255, 0.18);
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 26px 70px rgba(15, 23, 42, 0.20), 0 0 0 9999px rgba(15, 23, 42, 0.16), 0 0 0 4px rgba(10, 132, 255, 0.08);
backdrop-filter: blur(18px);
}
.smart-reminder-card > div:first-child {
display: grid;
gap: 4px;
min-width: 0;
}
.smart-reminder-label {
color: var(--accent-strong);
font-size: 11px;
font-weight: 850;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.smart-reminder-card strong {
color: var(--text);
font-size: 14px;
line-height: 1.35;
}
.smart-reminder-actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.smart-reminder-actions button {
padding: 8px 11px;
border-radius: 12px;
box-shadow: none;
}
.smart-reminder-examSoftUpload {
border-color: rgba(255, 149, 0, 0.24);
box-shadow: 0 26px 70px rgba(15, 23, 42, 0.20), 0 0 0 9999px rgba(15, 23, 42, 0.16), 0 0 0 4px rgba(255, 149, 0, 0.08);
}
.smart-reminder-examSoftUpload .smart-reminder-label {
color: #9f5b00;
}
@keyframes smartReminderPop {
from {
opacity: 0;
transform: translate(-50%, -8px) scale(0.98);
}
to {
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
}
@media (max-width: 700px) {
.smart-reminder-host {
top: 18px;
}
.smart-reminder-card,
.smart-reminder-actions {
align-items: stretch;
flex-direction: column;
}
.smart-reminder-actions button {
width: 100%;
}
}