/* Components */
.glass {
  background: var(--color-layer);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card-title {
  font-size:.78rem; letter-spacing:1px; text-transform:uppercase;
  font-weight:600; color:var(--color-muted);
}

.card-grid { display:grid; gap:1.5rem; }
.subject-grid { 
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); 
  margin-top:1.4rem; 
}

.subject-card {
  background:var(--color-bg-alt);
  padding:1.45rem 1.25rem 1.55rem;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap:.55rem;
  position:relative; isolation:isolate;
  transition: transform var(--trans), box-shadow var(--trans), background var(--trans);
  overflow:hidden;
}
.subject-card::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4), transparent 65%);
  opacity:0; transition: opacity var(--trans);
  pointer-events:none;
}
.subject-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.subject-card:hover::before { opacity:1; }
.subject-card:focus-visible { box-shadow: var(--shadow-focus); }
.subject-ribbon {
  position:absolute; top:10px; right:-45px; transform: rotate(35deg);
  background:linear-gradient(135deg,#ff9a9e,#fad0c4);
  color:#333; font-size:.55rem; font-weight:600;
  padding:.25rem 2.1rem;
  letter-spacing:1px; box-shadow:0 2px 6px rgba(0,0,0,.25);
}

.subject-icon {
  font-size:1.95rem; width:54px; height:54px; display:grid; place-items:center;
  color:#fff; border-radius:14px;
  box-shadow:0 8px 18px -6px rgba(0,0,0,.4);
}
.gradient-1 { background:linear-gradient(135deg,#667eea,#764ba2); }
.gradient-2 { background:linear-gradient(135deg,#36d1dc,#5b86e5); }
.gradient-3 { background:linear-gradient(135deg,#f7971e,#ffd200); }
.gradient-4 { background:linear-gradient(135deg,#11998e,#38ef7d); }
.gradient-5 { background:linear-gradient(135deg,#ff9a9e,#fecfef); }
.gradient-6 { background:linear-gradient(135deg,#a8edea,#fed6e3); }
.gradient-7 { background:linear-gradient(135deg,#fdbb2d,#22c1c3); }

.subject-name { font-size:1.08rem; font-weight:600; }
.subject-desc { font-size:.78rem; color:var(--color-muted); flex-grow:1; }

.btn {
  --btn-bg: var(--color-primary);
  --btn-bg-hover: var(--color-primary-accent);
  --btn-color: #fff;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-weight:600; font-size:.85rem;
  letter-spacing:.4px;
  padding:.7rem 1.25rem;
  border-radius:999px;
  background:var(--btn-bg); color:var(--btn-color);
  border:none;
  box-shadow: var(--shadow-sm);
  transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
  text-decoration:none; position:relative; overflow:hidden;
}
.btn:hover { background:var(--btn-bg-hover); }
.btn:active { transform: translateY(2px); }
.btn.ghost {
  --btn-bg: var(--color-bg-alt);
  --btn-bg-hover: #eef2f9;
  --btn-color: var(--color-primary);
  border:1px solid var(--color-border); box-shadow:none;
}
.btn.small { padding:.55rem 1rem; font-size:.75rem; }
.btn.tiny { padding:.4rem .75rem; font-size:.65rem; font-weight:500; }

.fade-in { opacity:0; animation: fadeIn .8s ease forwards; }
.fade-in-delay { opacity:0; animation: fadeIn .8s .15s ease forwards; }
.fade-in-delay2 { opacity:0; animation: fadeIn .8s .3s ease forwards; }
@keyframes fadeIn {
  from { opacity:0; transform: translateY(22px); }
  to { opacity:1; transform: translateY(0); }
}

/* Intersection animation */
.obs { opacity:0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); }
.obs._in { opacity:1; transform: translateY(0); }

/* Scroll progress bar */
.scroll-progress-bar {
  position:fixed; top:0; left:0; height:3px; width:100vw; background:rgba(0,0,0,.06); z-index:120;
}
.scroll-progress-fill {
  height:100%; width:0; background:linear-gradient(90deg,#667eea,#764ba2);
  transition: width .15s linear;
}

/* Back to top */
.backtotop {
  position:fixed; right:22px; bottom:24px;
  width:56px; height:56px;
  border:none;
  background:var(--color-bg-alt);
  border-radius:50%;
  box-shadow: var(--shadow-md);
  display:grid; place-items:center;
  cursor:pointer;
  overflow:hidden;
  transition: transform var(--trans), background var(--trans), opacity var(--trans);
  opacity:0; pointer-events:none; z-index:90;
}
.backtotop.visible { opacity:1; pointer-events:auto; }
.backtotop:hover { background:#eef2f9; }
.btp-icon { position:absolute; font-size:1.2rem; }
.progress-ring { width:56px; height:56px; transform: rotate(-90deg); }
.progress-ring__bg,
.progress-ring__value {
  fill:none; stroke:#e2e8f0; stroke-width:4; stroke-linecap:round;
}
.progress-ring__value { stroke: var(--color-primary); stroke-dasharray:100 100; stroke-dashoffset:100; transition: stroke-dashoffset .15s linear; }

/* Friend inline */
.friend-inline {
  display:flex; flex-wrap:wrap; gap:.75rem;
  font-size:.7rem;
}
.friend-inline a {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem .7rem;
  background:var(--color-bg-alt);
  border:1px solid var(--color-border);
  border-radius: 999px;
  transition: background var(--trans), transform var(--trans);
  box-shadow: var(--shadow-sm);
}
.friend-inline a img {
  width:26px; height:26px; border-radius:50%; object-fit:cover;
}
.friend-inline a:hover { background:#eef2f9; transform: translateY(-3px); }

/* Mobile Optimizations */
@media (max-width:768px) {
  .subject-grid { 
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); 
    gap:1.2rem; 
  }
  .subject-card { 
    padding:1.2rem 1rem 1.3rem; 
  }
  .friend-inline { 
    gap:.5rem; 
  }
  .friend-inline a { 
    padding:.4rem .6rem; 
    font-size:.65rem; 
  }
}

@media (max-width:520px) {
  .subject-grid { 
    grid-template-columns:1fr; 
    gap:1rem; 
  }
  .subject-card { 
    padding:1rem .8rem 1.1rem; 
  }
  .subject-icon { 
    width:48px; height:48px; 
    font-size:1.7rem; 
  }
  .backtotop { 
    right:16px; bottom:18px; 
    width:48px; height:48px; 
  }
  .friend-inline a { 
    padding:.35rem .5rem; 
  }
}