/* ===== KSR STUDY — Shared App Shell CSS ===== */

/* Mobile app feel */
* { -webkit-tap-highlight-color: transparent; }
body { padding-bottom: 72px !important; overscroll-behavior-y: none; }

/* ── Bottom Navigation Bar ── */
#ksr-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 62px; z-index: 9999;
  background: rgba(6,6,20,.96);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -6px 28px rgba(0,0,0,.5);
  display: flex; align-items: stretch;
}
.kbn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; color: #475569;
  transition: color .15s, transform .1s;
  padding: 4px 2px; position: relative;
}
.kbn em  { font-size: 18px; font-style: normal; line-height: 1; }
.kbn b   { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.kbn:active { transform: scale(.85); }

/* Active indicator line at top */
.kbn::before {
  content: ''; position: absolute; top: 0; left: 25%; right: 25%;
  height: 2px; border-radius: 0 0 3px 3px;
  background: currentColor; opacity: 0; transition: opacity .18s;
}
.kbn.active::before { opacity: 1; }

/* Per-subject active colors */
[data-id="physics"].active  { color: #4f6ef7; }
[data-id="chemistry"].active{ color: #10b981; }
[data-id="math"].active     { color: #f97316; }
[data-id="it"].active       { color: #06b6d4; }
[data-id="english"].active  { color: #ec4899; }

/* ── View slide-in animation ── */
.ksr-fade {
  animation: ksrSlide .2s cubic-bezier(.25,.46,.45,.94) both;
}
@keyframes ksrSlide {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── Page load fade-in ── */
@keyframes ksrPageIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
.page, main { animation: ksrPageIn .28s ease both; }

/* ── Extra buttons added by app.js ── */
.yt-btn  { color: #64748b !important; }
.bk-btn  { color: #64748b !important; }
.done-btn{ color: #64748b !important; }
.bk-btn.active  { color: #eab308 !important; border-color: rgba(234,179,8,.4) !important; }
.done-btn.active{ color: #10b981 !important; border-color: rgba(16,185,129,.4) !important; }