* { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark *::-webkit-scrollbar-thumb { background: #334155; }
.dark *::-webkit-scrollbar-thumb:hover { background: #475569; }

.module-switch {
  position: relative;
  display: inline-flex;
  gap: .25rem;
  padding: .3rem;
  border-radius: 99px;
  border: 1px solid #e2e8f0;
  background: #f1f5f9;
}
.dark .module-switch { border-color: #334155; background: #1e293b; }
.module-thumb {
  position: absolute;
  top: .3rem; left: 0; bottom: .3rem;
  width: 0;
  border-radius: 99px;
  background: #0d9488;
  box-shadow: 0 4px 14px rgb(13 148 136 / .35);
  transition: transform .3s cubic-bezier(.3,.7,.3,1), width .3s cubic-bezier(.3,.7,.3,1);
}
.module-tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.1rem;
  border-radius: 99px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #64748b;
  white-space: nowrap;
  transition: color .25s;
}
.module-tab:hover { color: #0f172a; }
.dark .module-tab { color: #94a3b8; }
.dark .module-tab:hover { color: #fff; }
.module-tab.is-active { color: #fff; }
.dark .module-tab.is-active { color: #fff; }
@media (max-width: 480px) {
  .module-tab { padding: .5rem .8rem; font-size: .7rem; }
  .module-tab i { display: none; }
}

.module-view {
  transition: opacity .18s ease, transform .18s ease;
}
.module-view.is-switching {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.select-field {
  height: 2.25rem;
  border-radius: 0.65rem;
  border: 1px solid #e2e8f0;
  background-color: #f8fafc;
  padding: 0 2rem 0 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
  outline: none;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
}
.select-field:focus { border-color: #14b8a6; box-shadow: 0 0 0 4px rgb(20 184 166 / .15); }
.dark .select-field { border-color: #334155; background-color: #1e293b; color: #e2e8f0; }

.view-btn {
  display: grid; place-items: center;
  height: 2.1rem; width: 2.4rem;
  border-radius: 0.6rem;
  font-size: .8rem;
  color: #64748b;
  transition: all .15s;
}
.view-btn:hover { color: #0f172a; }
.dark .view-btn:hover { color: #fff; }
.view-btn.is-active { background: #fff; color: #0f766e; box-shadow: 0 1px 3px rgb(15 23 42 / .12); }
.dark .view-btn.is-active { background: #0f172a; color: #2dd4bf; }

.week-rail {
  display: flex; gap: .5rem;
  overflow-x: auto;
  padding: .25rem .1rem .6rem;
  scroll-snap-type: x proximity;
}
.week-chip {
  scroll-snap-align: start;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .85rem;
  border-radius: 99px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  font-size: .75rem; font-weight: 800;
  color: #475569;
  cursor: pointer;
  transition: all .18s cubic-bezier(.2,.7,.3,1.2);
  white-space: nowrap;
}
.week-chip:hover { border-color: #5eead4; color: #0f766e; transform: translateY(-1px); }
.week-chip.is-active {
  background: #0d9488; border-color: #0d9488; color: #fff;
  box-shadow: 0 4px 14px rgb(13 148 136 / .35);
}
.week-chip .chip-count {
  font-size: .65rem; font-weight: 800;
  padding: .05rem .4rem; border-radius: 99px;
  background: rgb(15 23 42 / .07); color: inherit;
}
.week-chip.is-active .chip-count { background: rgb(255 255 255 / .22); }
.dark .week-chip { border-color: #334155; background: #1e293b; color: #94a3b8; }
.dark .week-chip:hover { border-color: #14b8a6; color: #2dd4bf; }
.dark .week-chip.is-active { background: #0d9488; color: #fff; }

.file-card {
  animation: cardIn .35s cubic-bezier(.2,.7,.3,1) backwards;
}
.file-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgb(15 23 42 / .12); }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.file-card:nth-child(1) { animation-delay: .02s } .file-card:nth-child(2) { animation-delay: .05s }
.file-card:nth-child(3) { animation-delay: .08s } .file-card:nth-child(4) { animation-delay: .11s }
.file-card:nth-child(5) { animation-delay: .14s } .file-card:nth-child(6) { animation-delay: .17s }
.file-card:nth-child(7) { animation-delay: .20s } .file-card:nth-child(8) { animation-delay: .23s }
.file-card:nth-child(9) { animation-delay: .26s } .file-card:nth-child(10){ animation-delay: .29s }
.file-card:nth-child(11){ animation-delay: .32s } .file-card:nth-child(12){ animation-delay: .35s }

.action-btn {
  display: inline-grid; place-items: center;
  height: 2.1rem; width: 2.1rem;
  border-radius: .6rem;
  font-size: .78rem;
  color: #64748b;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: all .15s;
}
.action-btn:hover { border-color: #14b8a6; color: #0f766e; background: #f0fdfa; }
.action-btn:active { transform: scale(.92); }
.dark .action-btn { border-color: #334155; background: #1e293b; color: #94a3b8; }
.dark .action-btn:hover { border-color: #14b8a6; color: #2dd4bf; background: rgb(13 148 136 / .12); }

.action-btn-ghost {
  border-color: rgb(255 255 255 / .35);
  background: rgb(255 255 255 / .16);
  color: #fff;
  backdrop-filter: blur(4px);
}
.action-btn-ghost:hover { border-color: #fff; background: rgb(255 255 255 / .28); color: #fff; }

.cover-fallback-icon {
  display: grid; place-items: center;
  height: 100%; width: 100%;
  font-size: 2.4rem;
}
.cover-img, .cover-canvas {
  height: 100%; width: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .3s ease;
}
.cover-pdf {
  position: relative;
  display: grid; place-items: center;
  height: 100%; width: 100%;
  background: linear-gradient(180deg, #f8fafc, #eef2f6);
}
.dark .cover-pdf { background: linear-gradient(180deg, #0f172a, #1e293b); }
.cover-pdf.cover-fallback .cover-fallback-icon { opacity: 1; }
.cover-pdf canvas.cover-canvas { position: absolute; inset: 0; }

.skeleton {
  position: relative; overflow: hidden;
  background: #e2e8f0; border-radius: .6rem;
}
.dark .skeleton { background: #1e293b; }
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent);
  animation: shimmer 1.4s infinite;
}
.dark .skeleton::after {
  background: linear-gradient(90deg, transparent, rgb(148 163 184 / .12), transparent);
}
@keyframes shimmer { to { transform: translateX(100%); } }

.toast {
  display: flex; align-items: center; gap: .7rem;
  padding: .8rem 1rem;
  border-radius: .8rem;
  background: #0f172a; color: #f8fafc;
  font-size: .8rem; font-weight: 700;
  box-shadow: 0 10px 30px rgb(15 23 42 / .35);
  animation: toastIn .25s cubic-bezier(.2,.7,.3,1.2);
}
.dark .toast { background: #f8fafc; color: #0f172a; }
.toast.is-leaving { animation: toastOut .2s ease forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(8px)  scale(.96); } }

.spinner {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: 3px solid rgb(13 148 136 / .2);
  border-top-color: #0d9488;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

.table-row { transition: background-color .12s; }
.table-row:hover { background: #f0fdfa; }
.dark .table-row:hover { background: rgb(13 148 136 / .08); }

[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%);
  padding: .3rem .6rem;
  border-radius: .45rem;
  background: #0f172a; color: #fff;
  font-size: .66rem; font-weight: 700; white-space: nowrap;
  pointer-events: none; z-index: 50;
  animation: tipIn .15s ease;
}
@keyframes tipIn { from { opacity: 0; transform: translate(-50%, 3px); } }

:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; border-radius: .4rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}