/* Compact, framed home lists and sidebar tools. */
.ktp-popular-grid {
  --ktp-ranking-row-height: 70px;
  padding: 20px;
  gap: 22px;
  border: 1px solid #d5c2e5;
  border-top: 4px solid var(--ktp-purple);
  border-radius: 20px;
  background: linear-gradient(115deg, #faf3ff, #f0faf6);
  align-items: stretch;
}
.ktp-popular { display: grid; grid-template-rows: auto 1fr; }
.ktp-popular__list {
  display: grid;
  grid-auto-rows: var(--ktp-ranking-row-height);
  align-content: start;
  min-height: calc(var(--ktp-ranking-row-height) * 5 + 2px);
}
.ktp-popular__header { gap: 10px; padding-bottom: 14px; margin-bottom: 14px; }
.ktp-popular__icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 11px; }
.ktp-popular__heading h2 { font-size: clamp(19px, 1.4vw, 24px); }
.ktp-popular__heading p { font-size: 12px; }
.ktp-popular__total { font-size: 11px; }
.ktp-popular__row { height: var(--ktp-ranking-row-height); min-height: var(--ktp-ranking-row-height); padding: 11px 13px; gap: 9px; grid-template-columns: 24px minmax(0, 1fr) auto; }
.ktp-popular__title {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 14px;
}
.ktp-popular__title:focus-visible { outline-offset: -2px; }
.ktp-popular__metric strong { font-size: 16px; }
.ktp-popular__metric time { font-size: 12px; font-weight: 800; color: var(--ktp-teal); }
.ktp-popular--latest .ktp-popular__icon { color: var(--ktp-teal); background: #edf8f3; border-color: #bfddd3; }
.ktp-popular--latest .ktp-popular__rank { color: var(--ktp-teal); }
.ktp-popular--latest .ktp-popular__title:hover { color: var(--ktp-teal); }
.ktp-popular__empty { min-height: calc(var(--ktp-ranking-row-height) * 5 + 2px); }
/* Share the header and list tracks so both white frames start and end together. */
@supports (grid-template-rows: subgrid) {
  .ktp-popular-grid { grid-template-rows: auto 1fr; row-gap: 0; }
  .ktp-popular { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}

.ktp-side-panel {
  --panel-accent: var(--ktp-teal);
  --panel-tint: #eaf6f0;
  min-width: 0;
  border: 1px solid #bed8cf;
  border-top: 4px solid var(--panel-accent);
  border-radius: 17px;
  background: #fffdf8;
  box-shadow: 0 4px 0 rgba(73, 49, 22, .05);
  overflow: hidden;
}
.ktp-side-panel__heading {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 13px;
  border-bottom: 1px solid #dae7de;
  background: var(--panel-tint);
}
.ktp-side-panel__icon { display: flex; flex: 0 0 25px; color: var(--panel-accent); }
.ktp-side-panel__icon svg { width: 23px; height: 23px; }
.ktp-side-panel__title { min-width: 0; margin: 0; font-size: 21px; line-height: 1.2; color: var(--panel-accent); }
.ktp-side-panel__body { padding: 14px; }
.ktp-panel-empty { margin: 0; color: var(--ktp-muted); font-size: 13px; line-height: 1.6; }

.ktp-member-panel form p { margin: 0 0 12px; }
.ktp-member-panel form label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 800; }
.ktp-member-panel input[type=text],
.ktp-member-panel input[type=password] {
  width: 100%; min-width: 0; min-height: 42px;
  padding: 8px 10px; border: 1px solid #cfdbd3; border-radius: 9px;
  color: var(--ktp-ink); background: #fff; font-size: 15px;
}
.ktp-member-panel .login-remember label { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 650; }
.ktp-member-panel input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--ktp-teal); }
.ktp-member-panel input[type=submit] {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 0; border-radius: 10px;
  color: #fff; background: var(--ktp-teal); font-size: 15px; cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1);
}
.ktp-member-panel input[type=submit]:hover { filter: brightness(.94); }
.ktp-member-links { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; padding-top: 3px; font-size: 12px; font-weight: 800; }
.ktp-member-links a { color: var(--ktp-teal); }
.ktp-member-profile { display: flex; gap: 10px; align-items: center; margin-bottom: 15px; }
.ktp-member-avatar { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ktp-purple); background: #eee2f9; font-size: 24px; font-weight: 900; }
.ktp-member-profile p { min-width: 0; margin: 0; font-size: 13px; }
.ktp-member-profile strong { display: block; font-size: 16px; overflow-wrap: anywhere; }

.ktp-lgs-panel { --panel-accent: var(--ktp-purple); --panel-tint: #f4ebfb; border-color: #d7c6e5; }
.ktp-lgs-panel .ktp-side-panel__heading { border-bottom-color: #e5d8ee; }
.ktp-lgs-panel .ktp-side-panel__title { font-size: 19px; }
.ktp-countdown-date { margin: 0 0 11px; text-align: center; font-size: 12px; font-weight: 750; color: var(--ktp-muted); }
.ktp-countdown-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ktp-countdown-cell { min-width: 0; padding: 8px 5px 6px; text-align: center; border: 1px solid #e0cdec; border-radius: 10px; background: #f8f0fd; }
.ktp-countdown-value { display: block; color: var(--ktp-purple); font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ktp-countdown-unit { display: block; font-size: 11px; font-weight: 800; color: #655173; }
.ktp-countdown-message { margin: 11px 0 0; font-size: 12px; line-height: 1.5; color: var(--ktp-muted); text-align: center; }

.ktp-social-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ktp-social-link {
  --social-color: var(--ktp-purple);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-width: 0; min-height: 71px; padding: 10px 4px; border: 1px solid #e1d4e9; border-radius: 11px;
  color: var(--social-color); background: #fbf6ff; text-decoration: none; font-size: 12px; font-weight: 850;
}
.ktp-social-link svg { width: 25px; height: 25px; }
.ktp-social-link--whatsapp { --social-color: var(--ktp-teal); background: #eff9f2; border-color: #c6e0d1; }
.ktp-social-link--youtube { --social-color: #b15b0d; background: #fff4d9; border-color: #edd9ab; }
.ktp-social-link--instagram { --social-color: var(--ktp-berry); background: #fff0f5; border-color: #efd0dc; }
.ktp-social-link:hover { border-color: currentColor; text-decoration: none; }

.ktp-watch-panel { --panel-accent: var(--ktp-purple); --panel-tint: #f4ebfb; --ktp-watch-row-height: 80px; border-color: #d7c6e5; }
.ktp-watch-panel .ktp-side-panel__heading { border-bottom-color: #e5d8ee; }
.ktp-watch__viewport { height: calc(var(--ktp-watch-row-height) * var(--ktp-watch-visible)); overflow-y: auto; overflow-x: hidden; }
.ktp-watch-panel--enhanced .ktp-watch__viewport { overflow: hidden; }
.ktp-watch__track { list-style: none; margin: 0; padding: 0; }
.ktp-watch-panel--enhanced .ktp-watch__track { will-change: transform; }
.ktp-watch__item { height: var(--ktp-watch-row-height); box-sizing: border-box; border-bottom: 1px solid #e9dfee; }
.ktp-watch__link { display: flex; width: 100%; height: 100%; align-items: center; gap: 9px; padding: 10px 12px; color: var(--ktp-ink); text-decoration: none; }
.ktp-watch__link:hover { background: #f7f0fc; text-decoration: none; }
.ktp-watch__link:focus-visible { outline-offset: -3px; }
.ktp-watch__thumbnail { display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 44px; color: var(--ktp-purple); background: #efe4f9; border-radius: 8px; overflow: hidden; }
.ktp-watch__thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.ktp-watch__placeholder { width: 40px; height: 30px; }
.ktp-watch__copy { display: block; min-width: 0; }
.ktp-watch__title { display: block; font-size: 14px; font-weight: 850; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ktp-watch__hint { display: block; margin-top: 4px; font-size: 11px; font-weight: 750; color: var(--ktp-purple); }
.ktp-watch__controls { display: flex; gap: 7px; padding: 9px 12px; background: #faf5fe; }
.ktp-watch__control { flex: 1; min-height: 32px; padding: 5px 7px; border: 1px solid #d9c3e8; border-radius: 8px; color: var(--ktp-purple); background: #fffdfd; font-size: 12px; font-weight: 800; }
.ktp-watch__control:hover { background: #eee1f8; }
.ktp-watch__all { display: block; padding: 9px 12px; border-top: 1px solid #e5d8ee; text-align: center; color: var(--ktp-purple); font-size: 13px; font-weight: 800; text-decoration: none; }
.ktp-watch__all:hover { text-decoration: underline; }
.ktp-watch-panel > .ktp-panel-empty { padding: 16px; }

@media (min-width: 1800px) {
  .ktp-popular-grid { padding: 24px; gap: 26px; }
  .ktp-popular__row { padding-inline: 16px; }
  .ktp-popular__title { font-size: 15px; }
}
@media (min-width: 921px) and (max-width: 1100px) {
  .ktp-home-layout { grid-template-areas: 'grades center' 'grades teacher'; grid-template-rows: auto auto; }
  .ktp-home-grades { grid-area: grades; }
  .ktp-home-center { grid-area: center; }
  .ktp-home-teacher { grid-area: teacher; }
}
@media (min-width: 681px) and (max-width: 1100px) {
  .ktp-member-panel { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .ktp-popular-grid { --ktp-ranking-row-height: 64px; padding: 15px 12px; gap: 24px; border-radius: 16px; grid-template-rows: none; }
  .ktp-popular { grid-row: auto; grid-template-rows: auto 1fr; }
  .ktp-popular__heading h2 { font-size: 22px; }
  .ktp-popular__row { padding-inline: 10px; grid-template-columns: 21px minmax(0, 1fr) auto; gap: 7px; }
  .ktp-popular__title { font-size: 13px; }
  .ktp-popular__metric time { font-size: 11px; }
  .ktp-popular__metric strong { font-size: 14px; }
  .ktp-side-panel__title { font-size: 22px; }
  .ktp-countdown-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ktp-countdown-value { font-size: 25px; }
}
@media print {
  .ktp-popular-grid { border-color: #aaa; background: #fff; }
  .ktp-side-panel { display: none; }
}