:root{
  --tef-bg:#63A2C9;
  --tef-card:#ffffff;
  --tef-muted:#eef4f8;
  --tef-text:#0b2540;
  --tef-chip:#e8f0f7;
  --tef-chipText:#0d3a5c;
  --tef-accent:#1f5f9a;
  --tef-accentDark:#184a78;
  --tef-shadow:0 8px 28px rgba(13,58,92,.15);
  --tef-shadowHover:0 12px 40px rgba(13,58,92,.25);
  --tef-radius:18px;
  --tef-transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  --tef-math:#e63946;
  --tef-ela:#f77f00;
  --tef-science:#06a77d;
  --tef-social:#7209b7;
  --tef-general:#457b9d;
}

[data-tef]{

  padding:32px 0 !important;
}

.tef-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
  color:var(--tef-text);
  line-height:1.6;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  animation:tefFadeIn 0.6s ease-out;
}

@keyframes tefFadeIn{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}

.tef-page-header{
  text-align:center;
  margin-bottom:40px;
  color:#fff;
}
.tef-page-header h1{
	display: none;
  font-size:clamp(28px, 5vw, 42px);
  font-weight:800;
  margin:0 0 12px;
  color:var(--tef-accent)
}
.tef-page-header p{
display: none;
  font-size:18px;
  opacity:.95;
  margin:0;
    color:var(--tef-text)
}

.tef-toolbar{
  display:flex;
  justify-content:center;
  margin-bottom:24px;
}

.tef-toolbar-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:16px;
}

.tef-active-filters{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
  min-height:32px;
}
.tef-filter-chip{
  background:#fff;
  color:var(--tef-accent);
  border-radius:999px;
  padding:6px 14px;
  font-size:14px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:var(--tef-shadow);
  animation:tefSlideIn 0.3s ease-out;
}
@keyframes tefSlideIn{
  from{opacity:0; transform:scale(0.9)}
  to{opacity:1; transform:scale(1)}
}
.tef-filter-chip button{
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  margin-left:4px;
  color:var(--tef-accent);
  font-size:18px;
  line-height:1;
  opacity:.7;
  transition:var(--tef-transition);
}
.tef-filter-chip button:hover{
  opacity:1;
  transform:scale(1.2);
}

.tef-search{
  flex:1 1 520px;
  background:#fff;
  border-radius:999px;
  padding:12px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:var(--tef-shadow);
  transition:var(--tef-transition);
}
.tef-search:focus-within{
  box-shadow:var(--tef-shadowHover);
  transform:translateY(-2px);
}
.tef-search input{
  border:none;
  outline:none;
  font-size:18px;
  width:100%;
  color:var(--tef-text);
  background:transparent;
}
.tef-search input::placeholder{ color:#8b9db0; }

.tef-pill{
  background:#fff;
  border-radius:999px;
  padding:10px 16px;
  box-shadow:var(--tef-shadow);
  display:flex;
  align-items:center;
  gap:8px;
  transition:var(--tef-transition);
  position:relative;
}
.tef-pill:hover{
  box-shadow:var(--tef-shadowHover);
  transform:translateY(-1px);
}
.tef-pill select{
  border:none;
  outline:none;
  font-size:16px;
  background:transparent;
  color:var(--tef-text);
  cursor:pointer;
  appearance:none;
  padding-right:20px;
}
.tef-pill::after{
  content:"▼";
  position:absolute;
  right:16px;
  font-size:10px;
  color:var(--tef-accent);
  pointer-events:none;
  opacity:.6;
}

.tef-btn{
  border:none;
  border-radius:999px;
  padding:12px 24px;
  background:var(--tef-accent);
  color:#fff;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  box-shadow:var(--tef-shadow);
  transition:var(--tef-transition);
  white-space:nowrap;
}
.tef-btn:hover{
  background:var(--tef-accentDark);
  transform:translateY(-2px);
  box-shadow:var(--tef-shadowHover);
}
.tef-btn:active{ transform:translateY(0); }
.tef-btn.tef-secondary{
  background:#fff;
  color:var(--tef-accent);
  border:2px solid var(--tef-accent);
}
.tef-btn.tef-secondary:hover{
  background:var(--tef-accent);
  color:#fff;
}

.tef-count{
  color:#fff;
  font-weight:600;
  font-size:16px;
  margin:20px 0 16px;
  text-shadow:0 1px 3px rgba(0,0,0,.1);
}

.tef-grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  margin-bottom:40px;
}

.tef-card{
  background:var(--tef-card);
  border-radius:var(--tef-radius);
  overflow:hidden;
  box-shadow:var(--tef-shadow);
  display:flex;
  flex-direction:column;
  transition:var(--tef-transition);
  animation:tefFadeInUp 0.5s ease-out backwards;
}
@keyframes tefFadeInUp{
  from{opacity:0; transform:translateY(20px)}
  to{opacity:1; transform:translateY(0)}
}
.tef-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--tef-shadowHover);
}

.tef-thumb{
  height:240px;
  background:linear-gradient(135deg, #e8eef5 0%, #d8e5f1 100%);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tef-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:var(--tef-transition);
}
.tef-card:hover .tef-thumb img{ transform:scale(1.05); }
.tef-thumb span{
  position:absolute;
  top:12px;
  left:12px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  opacity:.65;
}

.tef-content{
  padding:24px;
  flex:1;
  display:flex;
  flex-direction:column;
}
.tef-title{
  font-size:22px;
  line-height:1.3;
  margin:0 0 14px;
  font-weight:700;
  color:var(--tef-text);
}
.tef-chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.tef-chip{
  background:var(--tef-chip);
  color:var(--tef-chipText);
  border-radius:999px;
  padding:6px 12px;
  font-size:13px;
  font-weight:600;
  transition:var(--tef-transition);
}
.tef-chip[data-subject="Math"]{background:#ffe5e8; color:var(--tef-math)}
.tef-chip[data-subject="ELA"]{background:#fff4e6; color:var(--tef-ela)}
.tef-chip[data-subject="Science"]{background:#e6f7f2; color:var(--tef-science)}
.tef-chip[data-subject="Social Studies"]{background:#f3e8ff; color:var(--tef-social)}
.tef-chip[data-subject="General"]{background:#e6f0f7; color:var(--tef-general)}

.tef-card-footer{
  margin-top:auto;
  padding:0 24px 24px;
}
.tef-cta{
  display:block;
  text-align:center;
  font-weight:700;
  text-decoration:none;
  background:#e6f0ff;
  color:var(--tef-accent);
  padding:12px 18px;
  border-radius:8px;
  border:1px solid #c3d4ff;
  transition:var(--tef-transition);
  font-size:15px;
}
.tef-cta:hover{
  background:#d5e4ff;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(31,95,154,.18);
}
.tef-cta:active{ transform:translateY(0); }

.tef-load-more-wrap{
  text-align:center;
  margin-bottom:40px;
}

.tef-empty[hidden],
#tef-empty[hidden]{
  display:none !important;
}

.tef-empty{
  background:rgba(255,255,255,.2);
  border:2px dashed rgba(255,255,255,.5);
  padding:48px 24px;
  border-radius:var(--tef-radius);
  text-align:center;
  color:#fff;
  margin:40px 0;
}
.tef-empty h3{ font-size:24px; margin:0 0 12px; }
.tef-empty p{ font-size:16px; margin:0; opacity:.9; }
.tef-subtle{ font-size:14px; opacity:.8; margin-top:12px; }

.tef-skeleton{
  opacity:.8;
  pointer-events:none;
}

@media (max-width:768px){
  .tef-wrap{ padding:0 12px; }
  .tef-search{ width:100%; }
  .tef-grid{ grid-template-columns:1fr; gap:20px; }
  .tef-page-header h1{ font-size:24px; }
  .tef-page-header p{ font-size:16px; }
  .tef-thumb{ height:200px; }
}
@media (max-width:480px){
  .tef-toolbar-row{ flex-direction:column; align-items:stretch; }
  .tef-pill, .tef-btn{ width:100%; }
  .tef-btn{ text-align:center; }
}