/* ==========================================================================
   PNLE-REVIEW — Components
   Cards, buttons, controls and every dashboard widget.
   ========================================================================== */

/* ============================== Generic ============================== */
.card {
  position: relative;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.card__head--top { align-items: flex-start; margin-bottom: 0; }
.card__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
}
.card__title .icon { width: 19px; height: 19px; color: var(--primary); }
.card__title--lg { font-size: 16px; }
.card__sub {
  margin-top: 4px;
  padding-left: 29px;
  font-size: 11px;
  color: var(--text-2);
}
.card__flowers {
  position: absolute;
  pointer-events: none;
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.link-more .icon { width: 13px; height: 13px; }
.link-more:hover { color: var(--primary); }
.link-more--sm { font-size: 10px; }

.pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 500;
  color: var(--primary-600);
  background: var(--primary-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 7px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn--primary {
  padding: 6px 20px;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(180deg, #4b7cd9 0%, #2f5fbe 100%);
  box-shadow: var(--shadow-primary);
}
.btn--primary:hover { transform: translateY(-1px); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { color: var(--primary); background: var(--primary-softer); }
.icon-btn--ghost { width: 26px; height: 26px; }
.icon-btn--ghost .icon { width: 15px; height: 15px; }
.icon-btn--round {
  border-radius: 50%;
  color: var(--text-2);
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-sm);
}
.icon-btn--round .icon { width: 15px; height: 15px; }
.icon-btn--raised { width: 38px; height: 38px; box-shadow: var(--shadow); }
.icon-btn--raised .icon { width: 19px; height: 19px; }

/* Colour helpers */
.c-blue { color: var(--blue); }
.c-purple { color: var(--purple); }
.c-orange { color: var(--orange); }
.c-orange.icon--filled { fill-opacity: 1; }

.tone-blue { background: var(--tone-blue); color: var(--blue); }
.tone-purple { background: var(--tone-purple); color: #8a63d2; }
.tone-pink { background: var(--tone-pink); color: var(--pink); }
.tone-green { background: var(--tone-green); color: #36a271; }

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.dot--teal { background: var(--teal); }
.dot--blue,
.dot--study { background: var(--blue); }
.dot--purple { background: var(--purple); }
.dot--pink { background: var(--pink); }
.dot--rose,
.dot--deadline { background: var(--rose); }
.dot--exam { background: #8fb3ec; }

.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--track);
  overflow: hidden;
}
.bar__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  transition: width 0.9s cubic-bezier(.2, .8, .2, 1);
}
.fill--blue { background: linear-gradient(90deg, #3c6ed0, #6b9be9); }
.fill--purple { background: linear-gradient(90deg, #9172dc, #b9a0ef); }
.fill--pink { background: linear-gradient(90deg, #e2659a, #f095bb); }
.fill--rose { background: linear-gradient(90deg, #ec86b4, #f6b2cf); }
.fill--teal { background: linear-gradient(90deg, #3fae95, #6fcdb6); }
.fill--orange { background: linear-gradient(90deg, #f29d3c, #f8c27a); }

/* ============================== Top bar ============================== */
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 320px;
  height: 35px;
  padding: 0 8px 0 13px;
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: 9px;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search:focus-within { border-color: var(--primary); box-shadow: var(--focus); }
.search__icon { width: 17px; height: 17px; color: var(--muted); }
.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
  color: var(--text);
}
.search__input::placeholder { color: var(--muted); }
.search__kbd {
  padding: 2px 7px;
  font-family: var(--font);
  font-size: 9.5px;
  color: var(--muted);
  background: var(--subtle);
  border: 1px solid var(--line);
  border-radius: 5px;
}

.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 4px;
  border-radius: 999px;
  transition: background-color 0.15s ease;
}
.profile:hover { background: var(--primary-softer); }
.avatar {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: linear-gradient(160deg, #b2c9f3 0%, #6a90da 100%);
  overflow: hidden;
}
.avatar svg { width: 37px; height: 37px; fill: #fff; opacity: 0.95; }
.profile__name { font-size: 14px; font-weight: 600; color: var(--text); }
.profile__chev { width: 16px; height: 16px; margin-left: 10px; color: var(--text-2); }

/* ============================== Sidebar card ============================== */
.motivation-card {
  position: relative;
  margin-top: 48px;
  height: 116px;
  padding: 24px 12px 0 34px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #ebe6f8 0%, #e0e6f8 100%);
  border: 1px solid var(--panel-border);
  overflow: hidden;
}
:root[data-theme="dark"] .motivation-card { background: linear-gradient(135deg, #2b2952 0%, #22305a 100%); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .motivation-card { background: linear-gradient(135deg, #2b2952 0%, #22305a 100%); }
}
.motivation-card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.motivation-card__title,
.motivation-card__sub { position: relative; }
.motivation-card__title { font-size: 23px; font-weight: 600; letter-spacing: 0.5px; }
.motivation-card__sub { margin-top: 2px; font-size: 14.5px; }
.quote-mark { opacity: 0.6; }
.motivation-card__quote {
  position: relative;
  padding-top: 4px;
  font-size: 19px;
  line-height: 1.35;
  text-align: center;
}
.motivation-card__quote .note-heart { display: inline-block; vertical-align: middle; }
.motivation-card__heart {
  position: absolute;
  top: 46px;
  right: 18px;
  width: 13px;
  height: 13px;
  color: #8e7fd9;
  fill: currentColor;
}

/* ============================== PNLE Progress ============================== */
.progress-card {
  display: flex;
  min-height: 290px;
  padding: 0;
}
.progress-card__art {
  flex: 0 0 25%;
  max-width: 146px;
  background: url("../assests/images/hero-daisies.svg") center / cover no-repeat;
}
.progress-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 14px 16px 14px 22px;
}
.progress-card__body .card__head { margin-bottom: 4px; padding-top: 2px; }
.progress-card__body .card__title { font-size: 16px; }
.progress-card__main {
  display: flex;
  align-items: center;
  gap: 26px;
  flex: 1;
  padding: 0 0 12px 6px;
}

.ring {
  position: relative;
  flex: none;
  width: 116px;
  height: 116px;
}
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring__track { stroke: var(--track); }
.ring__value {
  stroke-linecap: round;
  stroke-dasharray: 0 314.16;
  transition: stroke-dasharray 1.1s cubic-bezier(.2, .8, .2, 1);
}
.ring__label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
}

.np-legend {
  display: grid;
  gap: 11px;
  flex: 1;
  min-width: 0;
}
.np-legend li {
  display: grid;
  grid-template-columns: 8px 44px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: var(--text-2);
}
.np-legend .dot { width: 8px; height: 8px; }
.np-legend__pct { text-align: right; font-size: 11px; }

.progress-card__foot {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.mini-stat {
  display: flex;
  flex-direction: column;
  min-width: 108px;
  padding: 9px 16px 9px 12px;
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.mini-stat + .mini-stat { min-width: 140px; }
.mini-stat__label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  white-space: nowrap;
  color: var(--text-2);
}
.mini-stat__label .icon { width: 16px; height: 16px; color: var(--text-2); }
.mini-stat__value {
  margin-top: 6px;
  padding-left: 25px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}
.mini-stat__meta { padding-left: 25px; font-size: 9px; color: var(--muted); }

.progress-card__note {
  position: relative;
  flex: 1;
  min-width: 120px;
  padding: 8px 0 0 18px;
  border-left: 1px solid var(--line);
}
.progress-card__note p {
  font-size: 17px;
  line-height: 1.3;
  transform: rotate(-12deg);
  transform-origin: 0 100%;
  margin-top: 4px;
}
.note-heart {
  width: 13px;
  height: 13px;
  color: var(--primary);
  fill: currentColor;
  fill-opacity: 0.35;
}
.progress-card__note .note-heart { position: absolute; left: 76px; bottom: 6px; }
.note-flower {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 28px;
  height: 28px;
}

/* ============================== Quick Actions ============================== */
.quick-actions { display: flex; flex-direction: column; padding: 16px 16px; }
.qa-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 13px;
}
.qa-tile {
  display: flex;
  flex-direction: column;
  min-height: 104px;
  padding: 12px 14px 11px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--card-solid) 0%, var(--subtle) 100%);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qa-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.qa-tile--purple { background: var(--tint-rose); border-color: var(--tint-rose-border); }
.qa-tile--pink { background: var(--tint-pink); border-color: var(--tint-pink-border); }
.qa-tile__icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.qa-tile__icon .icon { width: 22px; height: 22px; stroke-width: 1.8; }
.qa-tile strong {
  margin-top: 12px;
  font-size: 12px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--text);
}
.qa-tile span:last-child {
  margin-top: 4px;
  font-size: 10px;
  white-space: nowrap;
  color: var(--muted);
}

/* ============================== Calendar ============================== */
.calendar-card { display: flex; flex-direction: column; padding: 16px 16px 12px; }
.calendar { flex: 1; display: flex; flex-direction: column; }
.calendar-card__flowers { top: -4px; right: -4px; width: 96px; }
.calendar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 8px;
}
.calendar__month { font-size: 13px; font-weight: 500; color: var(--text); }
.calendar__nav { display: flex; gap: 8px; }
.calendar__nav .icon-btn { width: 22px; height: 22px; color: var(--text-2); }
.calendar__nav .icon { width: 15px; height: 15px; }
.calendar__weekdays,
.calendar__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
}
.calendar__weekdays {
  margin: 14px 0 6px;
  font-size: 10px;
  color: var(--muted);
}
.calendar__days { flex: 1; row-gap: 5px; align-content: space-around; }
.day {
  position: relative;
  display: grid;
  place-items: center;
  height: 24px;
  font-size: 11px;
  color: var(--text-2);
}
.day__num {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  transition: background-color 0.15s ease;
}
button.day:hover .day__num { background: var(--primary-softer); }
.day--study .day__num,
.day--exam .day__num,
.day--deadline .day__num { color: #fff; font-weight: 600; }
.day--study .day__num { background: #4f84e0 !important; }
.day--exam .day__num { background: #5a8de4 !important; }
.day--deadline .day__num { background: var(--rose) !important; }
.day--today .day__num {
  color: #fff;
  font-weight: 600;
  background: #2f5fbe !important;
  box-shadow: 0 0 0 2px var(--card-solid), 0 0 0 3.5px #a9c2f0;
}
.day--selected:not(.day--today) .day__num { box-shadow: 0 0 0 1.5px var(--primary); }
.day__marker {
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
}
.day__marker--study { background: var(--blue); }
.day__marker--deadline { background: var(--rose); }
.day__marker--exam { background: #8fb3ec; }

.calendar-legend {
  display: flex;
  gap: 22px;
  margin-top: 12px;
  padding-left: 8px;
  font-size: 10.5px;
  color: var(--text-2);
}
.calendar-legend li { display: flex; align-items: center; gap: 7px; }

/* ============================== NP Readiness ============================== */
.readiness { display: flex; flex-direction: column; padding: 16px 16px 14px 18px; }
.readiness-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.np-card {
  display: flex;
  flex-direction: column;
  min-height: 140px;
  padding: 11px 11px 11px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.np-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.np-card--green { background: var(--tint-green); border-color: var(--tint-green-border); }
.np-card--orange { background: var(--tint-orange); border-color: var(--tint-orange-border); }
.np-card--pink { background: var(--tint-pink); border-color: var(--tint-pink-border); }
.np-card--rose { background: var(--tint-rose); border-color: var(--tint-rose-border); }
.np-card__name { font-size: 12px; font-weight: 600; color: var(--text); }
.np-card__pct { margin-top: 10px; font-size: 18px; font-weight: 500; color: var(--text); }
.np-card .bar { height: 6px; margin-top: 10px; }
.np-card__status { margin-top: 14px; font-size: 10.5px; color: var(--text-2); }
.np-card__topics { margin-top: auto; padding-top: 10px; font-size: 10.5px; color: var(--text-2); }

/* ============================== Due Today ============================== */
.due-today { display: flex; flex-direction: column; padding: 14px 16px 10px 18px; }
.due-list { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.due-today .card__head { margin-bottom: 4px; }
.due-list li {
  display: grid;
  grid-template-columns: 15px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 2px 8px;
  border-bottom: 1px solid var(--line);
}
.due-list li:last-child { border-bottom: 0; }
.due-list__title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  color: var(--text);
  transition: color 0.15s ease;
}
.due-list__date { display: block; margin-top: 5px; font-size: 10.5px; color: var(--muted); }
.due-list li.is-done .due-list__title { color: var(--muted); text-decoration: line-through; }

.checkbox {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 1.5px solid #8ea3cf;
  border-radius: 3px;
  background: var(--card-solid);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.checkbox::after {
  content: "";
  width: 4px;
  height: 8px;
  margin-top: -2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}
.checkbox:checked { background: var(--primary); border-color: var(--primary); }
.checkbox:checked::after { transform: rotate(45deg) scale(1); }
.checkbox--round { border-radius: 50%; width: 14px; height: 14px; border-color: #a6b5d6; }
.checkbox--round::after { width: 3px; height: 6px; border-width: 0 1.6px 1.6px 0; }

.tag {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 500;
  white-space: nowrap;
}
.tag--study { color: var(--primary-600); background: var(--tone-blue); }
.tag--assignment { color: var(--pink); background: var(--tone-pink); }

/* ============================== Quote ============================== */
.quote-card {
  min-height: 210px;
  padding: 0;
}
.quote-card__art {
  position: absolute;
  inset: 0 auto 0 0;
  width: 62%;
  background: url("../assests/images/quote-tulips.svg") left center / cover no-repeat;
}
.quote-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, transparent 30%, var(--card-solid) 52%);
  pointer-events: none;
}
.quote-card__text {
  position: absolute;
  z-index: 1;
  top: 30px;
  left: 43%;
  right: 10px;
  font-size: 19.5px;
  line-height: 1.42;
}
.quote-card__heart {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 10px;
  vertical-align: middle;
  color: var(--primary);
  fill: currentColor;
  fill-opacity: 0.4;
}
.quote-card__heart-outline {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 18px;
  width: 18px;
  height: 18px;
  color: #9db3e6;
  stroke-width: 1.3;
}

/* ============================== Library ============================== */
.library { display: flex; flex-direction: column; padding: 14px 18px 14px; }
.library > .tab-panel { flex: 1; }
.library__flowers { top: 40px; right: 22px; width: 76px; transform: scaleX(-1) rotate(-10deg); }
.library .card__head { margin-bottom: 0; }

.tabs {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 6px;
  margin: 10px 0 10px;
}
.tabs__btn {
  padding: 4px 13px;
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--subtle-2);
  border: 1px solid transparent;
  border-radius: 7px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tabs__btn:hover { color: var(--primary-600); }
.tabs__btn.is-active {
  font-weight: 500;
  color: var(--primary-600);
  background: var(--primary-soft);
  border-color: #c4d4f4;
}

.library__body {
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
  gap: 16px;
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: start;
  gap: 4px;
  min-height: 128px;
  padding: 12px;
  font-size: 10px;
  text-align: center;
  color: var(--text-2);
  border: 1.5px dashed #b6c5e5;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dropzone:hover,
.dropzone.is-dragover { background: var(--primary-softer); border-color: var(--primary); }
.dropzone__icon { width: 30px; height: 30px; margin-bottom: 8px; stroke-width: 1.5; color: var(--text-2); }
.dropzone .btn { margin-top: 6px; }

.subhead { font-size: 10.5px; font-weight: 600; color: var(--text); }
.subhead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 7px 0 10px;
}
.mode-btn {
  padding: 7px 4px 6px;
  text-align: center;
  background: var(--tone-blue);
  border: 1px solid #cfdcf5;
  border-radius: 8px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.mode-btn strong { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-2); }
.mode-btn small { display: block; font-size: 8.5px; color: var(--muted); }
.mode-btn:hover { border-color: var(--primary); }
.mode-btn.is-active { background: #c9ece2; border-color: #9fd7c7; }
.mode-btn.is-active strong { color: #1f6b5a; }
.mode-btn.is-active small { color: #3f8a78; }
:root[data-theme="dark"] .mode-btn { border-color: var(--card-border); }
:root[data-theme="dark"] .mode-btn.is-active { background: #1f4a45; border-color: #2f6b61; }
:root[data-theme="dark"] .mode-btn.is-active strong,
:root[data-theme="dark"] .mode-btn.is-active small { color: #bfeee2; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mode-btn { border-color: var(--card-border); }
  :root:not([data-theme="light"]) .mode-btn.is-active { background: #1f4a45; border-color: #2f6b61; }
  :root:not([data-theme="light"]) .mode-btn.is-active strong,
  :root:not([data-theme="light"]) .mode-btn.is-active small { color: #bfeee2; }
}

.pdf-list { margin-top: 4px; }
.pdf-list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 9.5px;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.pdf-list li:last-child { border-bottom: 0; }
.pdf-list__icon { width: 13px; height: 13px; color: #fff; fill: var(--red); stroke: #fff; stroke-width: 1.6; }
.pdf-list__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-list__date { margin-right: 18px; font-size: 9px; color: var(--muted); }
.pdf-list__actions { display: flex; gap: 6px; }
.pdf-list__actions button { color: var(--muted); transition: color 0.15s ease; }
.pdf-list__actions button:hover { color: var(--primary); }
.pdf-list__actions .icon { width: 12px; height: 12px; }
.pdf-list--full li { padding: 9px 0; font-size: 12px; grid-template-columns: 16px minmax(0, 1fr) auto auto; }
.pdf-list--full .pdf-list__icon { width: 16px; height: 16px; }
.pdf-list--full .pdf-list__date { font-size: 11px; }
.pdf-list__empty { padding: 14px 0; font-size: 11px; color: var(--muted); }

/* ============================== Recent Activity ============================== */
.activity { display: flex; flex-direction: column; padding: 14px 16px 10px 18px; }
.activity-list { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.activity .card__head { margin-bottom: 6px; }
.activity-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 7px 0 8px;
}
.activity-list__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}
.activity-list__icon .icon { width: 17px; height: 17px; }
.activity-list__text { font-size: 11px; color: var(--text); }
.activity-list__meta { margin-top: 6px; font-size: 10px; color: var(--muted); }

/* ============================== Study Cards ============================== */
.study-cards { display: flex; flex-direction: column; padding: 14px 14px 10px 16px; }
.sc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 10px;
}
.sc-tile {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 8px;
  min-height: 75px;
  padding: 12px 8px 10px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sc-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.sc-tile__icon { grid-row: 1 / 3; width: 22px; height: 22px; stroke-width: 1.8; }
.sc-tile strong { white-space: nowrap; letter-spacing: -0.1px; font-size: 10px; font-weight: 600; color: var(--text); }
.sc-tile span { margin-top: 7px; font-size: 8.5px; line-height: 1.6; color: var(--muted); }
.tint-blue { background: var(--tint-blue); border-color: #d6e3fa; }
.tint-purple { background: var(--tint-purple); border-color: #e3daf7; }
.tint-sky { background: var(--tint-sky); border-color: #d3e6f5; }
.tint-peach { background: var(--tint-peach); border-color: #f7e2c3; }
:root[data-theme="dark"] .sc-tile { border-color: var(--card-border); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sc-tile { border-color: var(--card-border); }
}

.study-cards__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: auto;
  padding: 10px 52px 2px 0;
}
.study-cards__foot p { font-size: 16px; transform: rotate(-8deg); }
.study-cards__flowers {
  position: absolute;
  right: -18px;
  bottom: -14px;
  width: 64px;
  transform: rotate(-12deg);
}

/* ============================== Upcoming Tasks ============================== */
.upcoming {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 10px 18px 10px 18px;
}
.upcoming__title { font-size: 14px; padding-top: 2px; white-space: nowrap; }
.upcoming-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.upcoming-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 14px;
  background: var(--subtle);
  border-radius: 8px;
}
.upcoming-list__title { display: block; font-size: 9.5px; color: var(--text); }
.upcoming-list__date { display: block; margin-top: 4px; font-size: 9.5px; color: var(--muted); }
.upcoming-list li.is-done .upcoming-list__title { color: var(--muted); text-decoration: line-through; }
.upcoming__more { padding-top: 2px; font-size: 11px; }

/* ============================== Widget breakpoints ============================== */
@media (max-width: 1320px) {
  .upcoming-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .progress-card { flex-direction: column; }
  .progress-card__art { flex-basis: 120px; max-width: none; }
  .progress-card__main { flex-direction: column; align-items: stretch; gap: 16px; }
  .ring { align-self: center; }
  .progress-card__foot { flex-wrap: wrap; }
  .progress-card__note { flex-basis: 100%; min-height: 70px; border-left: 0; padding-left: 4px; }
  .readiness-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .library__body { grid-template-columns: minmax(0, 1fr); }
  .upcoming { grid-template-columns: 1fr auto; }
  .upcoming-list { grid-column: 1 / -1; grid-row: 2; grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .tabs { flex-wrap: wrap; }
}

/* ============================== Shared additions ============================== */
.icon--solid { fill: currentColor; fill-opacity: 1; }
.tone-orange { background: var(--tint-peach); color: var(--orange); }
.qa-tile--lavender { background: linear-gradient(180deg, var(--tint-purple), var(--subtle)); border-color: #e3daf7; }
.qa-tile--peach { background: var(--tint-peach); border-color: #f7e2c3; }
:root[data-theme="dark"] .qa-tile--lavender,
:root[data-theme="dark"] .qa-tile--peach { border-color: var(--card-border); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .qa-tile--lavender,
  :root:not([data-theme="light"]) .qa-tile--peach { border-color: var(--card-border); }
}

.btn--outline {
  padding: 4px 12px;
  font-size: 10.5px;
  color: var(--primary-600);
  background: var(--card-solid);
  border: 1px solid #c9d6f2;
}
.btn--outline .icon { width: 12px; height: 12px; }
.btn--outline:hover { background: var(--primary-softer); }
:root[data-theme="dark"] .btn--outline { border-color: var(--card-border); }

/* Compact search field (inside cards) */
.search--sm { width: 180px; height: 32px; padding: 0 10px; gap: 8px; box-shadow: none; }
.search--sm .search__icon { width: 14px; height: 14px; }
.search--sm .search__input { font-size: 11px; }

/* Native select with custom chevron */
.select { position: relative; display: inline-flex; }
.select select {
  appearance: none;
  -webkit-appearance: none;
  height: 32px;
  padding: 0 32px 0 14px;
  font: inherit;
  font-size: 11px;
  color: var(--text);
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  cursor: pointer;
  outline: 0;
}
.select select:focus-visible { border-color: var(--primary); box-shadow: var(--focus); }
.select .icon {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  color: var(--text-2);
  pointer-events: none;
}

/* Dropdown menu (positioned by JS) */
.menu {
  position: fixed;
  z-index: 50;
  min-width: 170px;
  padding: 4px;
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(30, 50, 100, 0.18);
}
.menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  font-size: 11px;
  text-align: left;
  color: var(--text-2);
  border-radius: 7px;
}
.menu button:hover,
.menu button:focus-visible { background: var(--primary-softer); color: var(--text); box-shadow: none; }
.menu .icon { width: 14px; height: 14px; }
.menu .menu__danger { color: var(--red); }

/* Toast */
.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 24px;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  font-size: 12px;
  color: #fff;
  background: #1c3163;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(20, 35, 80, 0.3);
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
:root[data-theme="dark"] .toast { color: #1b2644; background: #e6ecfb; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toast { color: #1b2644; background: #e6ecfb; }
}

/* ============================== Filter chips ============================== */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.chip {
  padding: 5px 16px;
  font-size: 11.5px;
  color: var(--text-2);
  background: var(--subtle-2);
  border: 1px solid transparent;
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.chip:hover { color: var(--primary-600); border-color: #c4d4f4; }
.chip.is-active { color: #fff; font-weight: 500; background: var(--primary); }

/* ============================== Answer options + rationale ==============================
   Used by the exam runner and Mistakes review. */
.options { display: grid; gap: 10px; margin-top: 18px; }
.option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 13px 16px;
  font-size: 13.5px;
  text-align: left;
  color: var(--text-2);
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.option:not(:disabled):hover { border-color: var(--primary); background: var(--primary-softer); }
.option:disabled { cursor: default; }
.option__key {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--subtle-2);
  border-radius: 50%;
}
.option__text { flex: 1; }
.option__mark { width: 18px; height: 18px; }
.option.is-selected { border-color: var(--primary); background: var(--primary-softer); color: var(--text); }
.option.is-selected .option__key { color: #fff; background: var(--primary); }
.option.is-correct { border-color: #6cc4a8; background: var(--tone-green); color: var(--text); }
.option.is-correct .option__key { color: #fff; background: #36a271; }
.option.is-correct .option__mark { color: #36a271; }
.option.is-wrong { border-color: #ee9bb8; background: var(--tone-pink); }
.option.is-wrong .option__key { color: #fff; background: var(--pink); }
.option.is-wrong .option__mark { color: var(--pink); }

.rationale {
  margin-top: 16px;
  padding: 13px 16px;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-2);
  background: var(--subtle);
  border-left: 3px solid var(--primary);
  border-radius: 0 10px 10px 0;
}
.rationale strong { display: block; margin-bottom: 4px; color: var(--text); }
.rationale.is-right { border-left-color: #36a271; }
.rationale.is-wrong { border-left-color: var(--pink); }

/* ============================== Dialog ============================== */
.modal {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  color: var(--text-2);
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(20, 35, 80, 0.3);
}
.modal::backdrop { background: rgba(20, 30, 60, 0.35); backdrop-filter: blur(2px); }
.modal__body { padding: 20px 22px; font-family: var(--font); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.modal__eyebrow { font-size: 11px; color: var(--muted); }
.modal__head h2 { margin-top: 2px; font-size: 17px; font-weight: 600; color: var(--text); }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* Soft (tinted) button, e.g. table row actions */
.btn--soft {
  padding: 5px 18px;
  font-size: 11px;
  color: var(--primary-600);
  background: var(--tone-blue);
}
.btn--soft:hover { background: var(--primary-soft); }

/* Task type tags (Due Today, Tasks page) */
.tag--review { color: #8a63d2; background: var(--tone-purple); }
.tag--exam { color: #c4741a; background: var(--tint-peach); }
.tag--deadline { color: var(--pink); background: var(--tone-pink); }
.tag--assignment { color: var(--primary-600); background: var(--tone-blue); }
.tag--study { color: #2f8f6a; background: var(--tone-green); }
.due-list__empty { padding: 20px 0; font-size: 11.5px; color: var(--muted); }

/* ============================== Forms ==============================
   Labelled fields (Tasks dialog, profile editor, login). */
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field > span:first-child { font-size: 11.5px; font-weight: 500; color: var(--text); }
.form-field input {
  height: 36px;
  padding: 0 12px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  outline: 0;
}
.form-field input:focus { border-color: var(--primary); box-shadow: var(--focus); }
.form-field .select--block select { height: 36px; font-size: 12.5px; }
.btn--block { width: 100%; padding: 12px; font-size: 13px; }

/* ============================== Account menu + profile ============================== */
.account-menu { min-width: 250px; max-width: 290px; }
.account-menu__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.account-menu__head > span:last-child { min-width: 0; }
.account-menu__head strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text); }
.account-menu__head small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); overflow-wrap: anywhere; }
.account-menu__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(160deg, #8fb0ee, #4c7fdc);
  border-radius: 50%;
}
.account-menu__sync {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 4px 6px;
  padding: 7px 9px;
  font-size: 10.5px;
  color: #24835b;
  background: var(--tone-green);
  border-radius: 8px;
}
.account-menu__sync.is-pending { color: #b26a12; background: var(--tint-peach); }
.account-menu__sync .icon { width: 13px; height: 13px; flex: none; }
.account-menu__sync span { flex: 1; }
.account-menu__sync button {
  width: auto !important;
  padding: 2px 8px !important;
  font-size: 10px !important;
  font-weight: 600;
  color: inherit !important;
  background: rgba(255, 255, 255, 0.6) !important;
  border-radius: 6px !important;
}
.account-menu__sync button:disabled { opacity: 0.6; }
.menu__sep { height: 1px; margin: 4px 6px; background: var(--line); }
.menu button:disabled { opacity: 0.6; cursor: default; }
.profile-form__note.is-error { color: var(--pink); }
.menu a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  font-size: 11px;
  color: var(--text-2);
  border-radius: 7px;
}
.menu a:hover { background: var(--primary-softer); color: var(--text); }
.modal--profile { width: min(440px, calc(100vw - 32px)); }
.profile-form { display: flex; flex-direction: column; gap: 14px; }
.profile-form__note { font-size: 11px; color: var(--muted); }

/* ============================== Confirmation modal ==============================
   PNLE.ui.confirm(): floating card that pops in over a blurred backdrop. */
.btn--danger {
  padding: 6px 20px;
  color: #fff;
  background: linear-gradient(180deg, #e9688f 0%, #d1466f 100%);
  box-shadow: 0 6px 14px rgba(209, 70, 111, 0.28);
}
.btn--danger:hover { transform: translateY(-1px); }

.modal--confirm {
  width: min(400px, calc(100vw - 32px));
  border: 0;
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(20, 35, 80, 0.35);
  animation: confirm-in 0.22s cubic-bezier(.2, 1.2, .4, 1);
}
.modal--confirm::backdrop { animation: confirm-fade 0.2s ease; }
.modal--confirm.is-closing { animation: confirm-out 0.16s ease forwards; }
.modal--confirm.is-closing::backdrop { animation: confirm-fade 0.16s ease reverse forwards; }
@keyframes confirm-in { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes confirm-out { to { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes confirm-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .modal--confirm, .modal--confirm::backdrop, .modal--confirm.is-closing { animation: none; }
}

.confirm-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 26px 22px;
  text-align: center;
  font-family: var(--font);
}
.confirm-box__icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 14px;
  color: var(--primary-600);
  background: var(--primary-soft);
  border-radius: 50%;
  box-shadow: 0 0 0 8px var(--primary-softer);
}
.confirm-box__icon .icon { width: 26px; height: 26px; }
.modal--confirm.is-danger .confirm-box__icon { color: var(--pink); background: var(--tone-pink); box-shadow: 0 0 0 8px rgba(228, 97, 143, 0.1); }
.confirm-box h2 { font-size: 17px; font-weight: 600; color: var(--text); }
.confirm-box p { margin-top: 8px; font-size: 12.5px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
.confirm-box__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 22px;
}
.confirm-box__actions .btn { justify-content: center; padding-top: 10px; padding-bottom: 10px; }

/* ============================== Empty states ============================== */
.chart-empty,
.activity-list__empty,
.upcoming-list__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 12px;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  color: var(--muted);
}
.line-chart .chart-empty { position: absolute; inset: 0; }
.activity-list__empty { flex-direction: column; flex: 1; }
.activity-list__empty .icon { width: 22px; height: 22px; color: var(--primary); }
.upcoming-list__empty { grid-column: 1 / -1; padding: 10px; background: var(--subtle); border-radius: 8px; }
.chart-empty a, .activity-list__empty a, .upcoming-list__empty a, .due-list__empty a,
.results-table__empty a, .overall__caption a { color: var(--primary); font-weight: 500; text-decoration: underline; }

/* "Set exam date" in Home's countdown */
.link-set {
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  text-decoration: underline;
}

/* ============================== Generate questions dialog ============================== */
.modal--generate { width: min(480px, calc(100vw - 32px)); }

/* Folder colours (Library folders, folder picker) */
.folder--blue { color: #4f7fd8; }
.folder--orange { color: #f2a04a; }
.folder--amber { color: #f1b65a; }
.folder--teal { color: #3fae95; }
.folder--brown { color: #b08a5a; }
.folder--purple { color: #8f6bd8; }
.folder--indigo { color: #5a6fd6; }
.folder--gray { color: var(--muted); }

/* Folder picker (upload "Save to…", "Move to folder") */
.modal--folder { width: min(440px, calc(100vw - 32px)); }
.folder-pick .modal__eyebrow { display: flex; align-items: center; gap: 5px; color: var(--primary); }
.folder-pick .modal__eyebrow .icon { width: 13px; height: 13px; }
.folder-pick .modal__head { margin-bottom: 6px; }
.folder-pick__msg { margin: -4px 0 12px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.folder-pick__list { display: flex; flex-direction: column; gap: 6px; max-height: min(340px, 50vh); overflow-y: auto; padding: 2px; }
.folder-pick__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  color: var(--text);
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.folder-pick__row:hover { border-color: var(--primary); }
.folder-pick__row input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.folder-pick__row:has(input:checked) { background: var(--primary-softer); border-color: var(--primary); }
.folder-pick__row:has(input:focus-visible) { box-shadow: var(--focus); }
.folder-pick__row .folder-row__icon .icon { width: 17px; height: 17px; }
.folder-pick__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-pick__tag { flex: none; padding: 2px 8px; font-size: 10.5px; font-weight: 600; color: var(--primary-600); background: var(--primary-soft); border-radius: 999px; }
.gen { display: flex; flex-direction: column; gap: 16px; }
.gen .modal__eyebrow { display: flex; align-items: center; gap: 5px; color: #8a63d2; }
.gen .modal__eyebrow .icon { width: 13px; height: 13px; }
.gen__form { display: flex; flex-direction: column; gap: 14px; }
.gen__form .form-field small { font-weight: 400; color: var(--muted); }
.gen__counts { margin: 0; padding: 0; border: 0; }
.gen__counts .segmented { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 8px; }
.gen__counts label { position: relative; }
.gen__counts label input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.gen__counts label span {
  display: block;
  padding: 9px 0;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--text-2);
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.gen__counts input:checked + span { color: var(--primary-600); background: var(--primary-softer); border-color: var(--primary); }
.gen__counts input:focus-visible + span { box-shadow: var(--focus); }
.gen__custom { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.gen__custom[hidden] { display: none; }
.gen__custom input { width: 120px; font-variant-numeric: tabular-nums; }
.gen__custom small { font-size: 11.5px; color: var(--muted); }
.gen__note { font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.gen__error,
.gen__notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  border-radius: 10px;
}
.gen__error { color: #b3264f; background: var(--tone-pink); }
.gen__notice { color: var(--text-2); background: var(--subtle); }
.gen__error .icon, .gen__notice .icon { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.gen__notice .icon { color: var(--primary); }
.gen__notice--error { color: #b3264f; background: var(--tone-pink); }
.gen__notice--error .icon { color: inherit; }
.gen__working .gen__time { color: var(--muted); }

.gen__working,
.gen__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 8px 6px;
  text-align: center;
}
.gen__working strong, .gen__done strong { font-size: 14.5px; color: var(--text); }
.gen__working small { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--primary-600); }
.gen__progress { align-self: stretch; height: 6px; margin: 4px 12px 0; }
.gen__progress .bar__fill { background: var(--primary); }
.gen__working p, .gen__done p { font-size: 12px; color: var(--muted); }
.gen__spinner {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border: 4px solid var(--primary-soft);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: gen-spin 0.9s linear infinite;
}
@keyframes gen-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gen__spinner { animation-duration: 3s; } }
.gen__done > .icon {
  width: 52px;
  height: 52px;
  padding: 13px;
  color: #1f7a52;
  background: var(--tone-green);
  border-radius: 50%;
  stroke-width: 2.5;
}

.gen__head-actions { display: flex; gap: 4px; }
.gen .modal__actions .btn .icon { width: 15px; height: 15px; }

/* Minimized generation: a floating pill (bottom right) that reopens the dialog */
.gen-pill {
  position: fixed;
  z-index: 90;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(340px, calc(100vw - 32px));
  padding: 10px 14px 10px 10px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(20, 35, 80, 0.22);
  cursor: pointer;
  animation: gen-pill-in 0.25s ease;
}
.gen-pill:hover { border-color: var(--primary); }
.gen-pill:focus-visible { outline: 0; box-shadow: var(--focus), 0 12px 32px rgba(20, 35, 80, 0.22); }
.gen-pill__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--primary);
  background: var(--primary-softer);
  border-radius: 50%;
}
.gen-pill__icon .gen__spinner { width: 20px; height: 20px; margin: 0; border-width: 3px; }
.gen-pill__icon .icon { width: 17px; height: 17px; }
.gen-pill.is-done .gen-pill__icon { color: #1f7a52; background: var(--tone-green); }
.gen-pill.is-error .gen-pill__icon { color: var(--red); background: var(--tone-pink); }
.gen-pill__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gen-pill__text strong { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.gen-pill__text small { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); }
.gen-pill > .icon { flex: none; width: 15px; height: 15px; color: var(--muted); }
@keyframes gen-pill-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .gen-pill { animation: none; } }
@media (max-width: 600px) { .gen-pill { right: 16px; bottom: 16px; } }

/* "Start" link on Home's Generated Sets list */
.pdf-list__start { font-size: 10.5px; font-weight: 600; color: var(--primary); }
.pdf-list__start:hover { text-decoration: underline; }

/* Full-width select (forms, dialogs) */
.select--block { display: flex; }
.select--block select { width: 100%; height: 36px; font-size: 12.5px; }

/* ============================== PDF viewer ==============================
   Full-window viewer for your PDFs (PNLE.pdfs.open); "Exit" returns to the page. */
.pdf-viewer {
  width: calc(100vw - 32px);
  max-width: none;
  height: calc(100vh - 32px);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  background: var(--card-solid);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(10, 20, 50, 0.45);
}
.pdf-viewer[open] { display: flex; flex-direction: column; }
.pdf-viewer::backdrop { background: rgba(10, 18, 40, 0.6); backdrop-filter: blur(3px); }
.pdf-viewer__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-family: var(--font);
  border-bottom: 1px solid var(--line);
}
.pdf-viewer__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; color: var(--red); background: var(--tone-pink); border-radius: 9px; }
.pdf-viewer__icon .icon { width: 18px; height: 18px; }
.pdf-viewer__title { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.pdf-viewer__title strong { overflow: hidden; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pdf-viewer__title small { font-size: 11.5px; color: var(--muted); }
.pdf-viewer__bar .btn { gap: 7px; }
.pdf-viewer__bar .btn .icon { width: 15px; height: 15px; }
.pdf-viewer__exit { padding-inline: 22px; font-size: 14px; font-weight: 600; }
.pdf-viewer__body { position: relative; flex: 1; min-height: 0; background: #525659; }
.pdf-viewer__body iframe { display: block; width: 100%; height: 100%; border: 0; }
.pdf-viewer__state {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font);
  font-size: 13px;
  color: #e8ecf6;
  text-align: center;
}
.pdf-viewer__state.is-error .icon { width: 32px; height: 32px; color: #ffb4c4; }
@media (max-width: 600px) {
  .pdf-viewer { width: 100vw; height: 100vh; border-radius: 0; }
  .pdf-viewer__bar [data-viewer-download] { display: none; }
}

/* ============================== Select & delete ==============================
   PNLE.ui.bulk: a "Select" button turns on row checkboxes and this bar. */
.btn--select { gap: 7px; padding: 6px 12px; font-size: 11.5px; }
.btn--select .icon { width: 13px; height: 13px; }
.btn--select.is-active { color: var(--primary-600); background: var(--primary-softer); border-color: var(--primary); }
.btn--select[hidden] { display: none; }
.select-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 8px;
  padding: 8px 12px;
  background: var(--primary-softer);
  border: 1px solid var(--card-border);
  border-radius: 10px;
}
.select-bar[hidden] { display: none; }
.select-bar__all { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--text); cursor: pointer; }
.select-bar__count { flex: 1; font-size: 11.5px; color: var(--muted); }
.select-bar .btn--filter { gap: 6px; padding: 6px 12px; font-size: 11.5px; }
.select-bar .btn--filter .icon { width: 13px; height: 13px; }
.select-bar input, .exam-row__check input, .bulk-check input { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
.btn--danger:disabled { opacity: 0.45; cursor: not-allowed; }
.bulk-check { display: inline-grid; place-items: center; width: 22px; height: 22px; cursor: pointer; }
[data-bulk-id].is-picked, [data-bulk-id].is-picked > td { background: var(--primary-soft); }
.is-bulk [data-bulk-id] { cursor: pointer; }

/* Generate dialog: browser storage note */
.gen__storage { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.gen__storage .icon { flex: none; width: 13px; height: 13px; }
.gen__storage.is-warn { color: #b3264f; font-weight: 500; }

/* NP Readiness: the PNLE passing rule (75% average, no test under 60%) */
.readiness-verdict {
  margin-left: 10px;
  padding: 3px 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--subtle);
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
  margin-right: auto;
}
.readiness-verdict.is-pass { color: #1f7a52; background: var(--tone-green); }
.readiness-verdict.is-warn { color: #9a5b12; background: var(--tint-peach); }
.readiness-verdict.is-risk { color: #b3264f; background: var(--tone-pink); }
.np-card.is-risk .np-card__status { color: #e0567a; font-weight: 600; }
.readiness .card__head { gap: 6px; }