@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {

  font-family: 'Poppins', sans-serif;

  background:
    linear-gradient(
      to bottom right,
      #f8fafc,
      #eef2ff
    );

  color: #111827;

  min-height: 100vh;

  overflow-x: hidden;
}

/* =========================
   SCREEN SYSTEM
========================= */

.screen {

  display: none;

  min-height: 100vh;

  justify-content: center;

  align-items: center;

  padding: 40px;
}

.screen.active {

  display: flex;
}

/* =========================
   DASHBOARD
========================= */

.dashboard {

  display: none;

  min-height: 100vh;

  padding: 70px 40px;
}

.dashboard.active {

  display: flex;

  flex-direction: column;
}

/* =========================
   CARDS
========================= */

.card {

  width: 100%;

  max-width: 520px;

  background: rgba(255,255,255,0.72);

  backdrop-filter: blur(14px);

  padding: 42px;

  border-radius: 36px;

  box-shadow:
    0 10px 40px rgba(0,0,0,0.05);
}

.card h1 {

  font-size: 40px;

  margin-bottom: 12px;

  letter-spacing: -1px;
}

.card p {

  color: #6b7280;

  line-height: 1.7;

  margin-bottom: 24px;
}

/* =========================
   INPUTS
========================= */

input,
select,
textarea {

  width: 100%;

  padding: 16px;

  margin-top: 14px;

  border: none;

  border-radius: 18px;

  background: #f3f4f6;

  font-size: 15px;

  outline: none;

  font-family: 'Poppins', sans-serif;
}

textarea {

  resize: none;
}

/* =========================
   BUTTONS
========================= */

button {

  width: 100%;

  padding: 16px;

  margin-top: 20px;

  border: none;

  border-radius: 18px;

  background: #4f46e5;

  color: white;

  font-size: 15px;

  font-weight: 500;

  cursor: pointer;

  transition: 0.25s ease;

  font-family: 'Poppins', sans-serif;
}

button:hover {

  transform: translateY(-2px);

  opacity: 0.92;
}

.secondary-btn {

  background: rgba(255,255,255,0.72);

  color: #4338ca;

  box-shadow:
    inset 0 0 0 1px rgba(79,70,229,0.12);
}

.auth-card {

  text-align: center;
}

.auth-actions {

  display: grid;

  grid-template-columns: 1fr;

  gap: 2px;
}

/* =========================
   LOADING
========================= */

.loading {

  flex-direction: column;

  text-align: center;
}

.loading h2 {

  max-width: 500px;

  line-height: 1.6;

  font-weight: 500;
}

.spinner {

  width: 70px;

  height: 70px;

  border: 6px solid #dbeafe;

  border-top: 6px solid #4f46e5;

  border-radius: 50%;

  margin-bottom: 24px;

  animation: spin 1s linear infinite;
}

@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}

/* =========================
   TOPBAR
========================= */

.topbar {

  position: relative;

  display: flex;

  justify-content: center;

  margin-bottom: 48px;
}

.dashboard-greeting {

  position: absolute;

  top: -38px;

  right: 0;

  font-size: 15px;

  font-weight: 500;

  color: #374151;

  background: rgba(255,255,255,0.68);

  backdrop-filter: blur(14px);

  padding: 10px 16px;

  border-radius: 18px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.04);
}

.quote-card {

  width: 100%;

  max-width: 420px;

  background: rgba(255,255,255,0.58);

  backdrop-filter: blur(14px);

  padding: 18px 24px;

  border-radius: 24px;

  text-align: center;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.035);
}

.quote-card p {

  font-size: 15px;

  color: #6b7280;

  font-style: italic;

  margin-bottom: 0;
}

/* =========================
   DASHBOARD LAYOUT
========================= */

.dashboard-layout {

  display: grid;

  grid-template-columns: 2fr 1fr;

  gap: 30px;

  align-items: start;
}

/* =========================
   TILE GRID
========================= */

.tiles {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 28px;
}

/* =========================
   TILE
========================= */

.tile {

  background: rgba(255,255,255,0.65);

  backdrop-filter: blur(14px);

  min-height: 240px;

  padding: 40px;

  border-radius: 40px;

  cursor: pointer;

  transition: 0.35s ease;

  display: flex;

  flex-direction: column;

  justify-content: center;

  box-shadow:
    0 10px 40px rgba(0,0,0,0.04);
}

.tile:hover {

  transform: translateY(-8px);

  box-shadow:
    0 20px 50px rgba(0,0,0,0.08);
}

.tile h3 {

  font-size: 30px;

  margin-bottom: 16px;

  font-weight: 600;

  letter-spacing: -1px;
}

.tile p {

  color: #6b7280;

  line-height: 1.8;

  font-size: 15px;
}

/* =========================
   RIGHT TASK PANEL
========================= */

.dashboard-tasks {

  background: rgba(255,255,255,0.65);

  backdrop-filter: blur(14px);

  padding: 30px;

  border-radius: 36px;

  box-shadow:
    0 10px 40px rgba(0,0,0,0.04);
}

.dashboard-tasks h2 {

  margin-bottom: 10px;
}

.dashboard-tasks p {

  color: #6b7280;

  margin-bottom: 24px;
}

/* =========================
   TASK LISTS
========================= */

#taskList,
#dashboardTaskList {

  list-style: none;
}

#taskList li,
.dashboard-task {

  background: #f3f4f6;

  border-radius: 18px;

  padding: 14px 16px;

  margin-top: 12px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 14px;
}

.task-row,
.dashboard-task {

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.task-text {

  flex: 1;

  min-width: 0;

  line-height: 1.5;

  word-break: break-word;
}

.empty-state {

  color: #6b7280;

  line-height: 1.7;

  margin-top: 16px;
}

/* =========================
   TASK BUTTONS
========================= */

.task-actions {

  display: flex;

  gap: 8px;

  flex-shrink: 0;
}

.tick-btn,
.delete-btn {

  width: 38px !important;

  height: 38px !important;

  padding: 0 !important;

  border-radius: 12px !important;

  margin-top: 0 !important;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 16px;
}

.tick-btn {

  background: #22c55e;
}

.delete-btn {

  background: #ef4444;
}

.dashboard-task .tick-btn {

  width: 34px !important;

  height: 34px !important;
}

/* =========================
   COMPLETED
========================= */

.completed {

  text-decoration: line-through;

  opacity: 0.72;
}

.completed-row {

  background: #dcfce7 !important;

  box-shadow:
    0 10px 24px rgba(34,197,94,0.1);
}

.task-celebration {

  background: #bbf7d0 !important;

  box-shadow:
    0 10px 26px rgba(34,197,94,0.16);

  animation: taskComplete 0.45s ease;
}

/* =========================
   SUBJECTS
========================= */

.subject-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 16px;

  margin-top: 24px;
}

.subject {

  background: #eef2ff;

  color: #4338ca;

  padding: 18px;

  border-radius: 20px;

  text-align: center;

  font-weight: 600;

  transition: 0.25s ease;
}

.subject:hover {

  transform: scale(1.03);
}

/* =========================
   LONG TERM PLANNER
========================= */

.planner-card {

  max-width: 920px;
}

.planner-section {

  background: rgba(255,255,255,0.46);

  border-radius: 24px;

  padding: 22px;

  margin-top: 18px;
}

.planner-section h2 {

  font-size: 20px;

  margin-bottom: 12px;
}

.planner-section h3 {

  font-size: 15px;

  margin-bottom: 10px;

  color: #374151;
}

.planner-field-label {

  display: block;

  margin-top: 14px;

  color: #6b7280;

  font-size: 13px;

  font-weight: 500;
}

.planner-note {

  color: #6b7280;

  background: #f3f4f6;

  padding: 14px 16px;

  border-radius: 16px;

  margin-top: 14px;

  line-height: 1.6;
}

.success-note {

  background: #dcfce7;

  color: #166534;
}

.warning-note {

  background: #fee2e2;

  color: #991b1b;
}

.chapter-checklist {

  max-height: 360px;

  overflow-y: auto;

  margin-top: 14px;

  padding-right: 6px;
}

.chapter-item {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  background: #f3f4f6;

  padding: 12px 14px;

  border-radius: 14px;

  margin-top: 10px;

  line-height: 1.5;
}

.chapter-item input {

  width: auto;

  margin-top: 4px;
}

.revision-subject {

  background: #f3f4f6;

  border-radius: 16px;

  padding: 14px;

  margin-top: 12px;
}

.revision-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));

  gap: 10px;
}

.revision-grid input {

  margin-top: 0;
}

.subject-order-row,
.calendar-row {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 16px;

  background: #f3f4f6;

  border-radius: 16px;

  padding: 12px 14px;

  margin-top: 10px;
}

.subject-order-actions {

  display: flex;

  gap: 8px;
}

.subject-order-actions button {

  width: 36px;

  height: 36px;

  padding: 0;

  margin-top: 0;

  border-radius: 12px;
}

.planner-calendar {

  margin-top: 18px;
}

.calendar-row {

  align-items: flex-start;
}

.calendar-row span {

  color: #6b7280;

  min-width: 190px;

  font-size: 14px;
}

.calendar-row strong {

  flex: 1;

  color: #111827;
}

.mock-row {

  background: #eef2ff;
}

/* =========================
   STUDY CALENDAR
========================= */

.calendar-card {

  max-width: 1100px;
}

.calendar-toolbar {

  display: grid;

  grid-template-columns: 130px 1fr 130px;

  gap: 14px;

  align-items: center;

  margin-top: 12px;

  margin-bottom: 18px;
}

.calendar-toolbar h2 {

  text-align: center;

  font-size: 24px;
}

.calendar-toolbar button {

  margin-top: 0;

  padding: 12px;
}

.study-calendar-grid {

  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

  gap: 1px;

  overflow: hidden;

  border-radius: 22px;

  background: rgba(209,213,219,0.8);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.04);
}

.calendar-day-label {

  background: rgba(255,255,255,0.86);

  padding: 12px;

  text-align: center;

  color: #6b7280;

  font-size: 13px;

  font-weight: 600;
}

.study-calendar-day {

  min-height: 124px;

  background: rgba(255,255,255,0.72);

  padding: 10px;

  display: flex;

  flex-direction: column;

  gap: 6px;
}

.subject-shaded-day {

  background: rgba(255,255,255,0.82);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.9),
      color-mix(in srgb, var(--subject-color) 24%, white)
    );

  box-shadow:
    inset 4px 0 0 var(--subject-color);
}

.muted-calendar-day {

  background: rgba(243,244,246,0.72);
}

.calendar-date-number {

  color: #374151;

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 2px;
}

.calendar-event {

  padding: 5px 0;

  border-radius: 0;

  font-size: 12.5px;

  line-height: 1.35;

  white-space: normal;

  overflow: hidden;

  color: #111827;

  font-weight: 600;
}

.revision-event {

  background: transparent;
}

.mock-event {

  background: transparent;

  color: #4338ca;
}

.calendar-more {

  color: #6b7280;

  font-size: 12px;
}

/* =========================
   POMODORO
========================= */

.pomodoro-box {

  text-align: center;
}

.timer {

  font-size: 72px;

  font-weight: 700;

  margin: 24px 0;

  letter-spacing: -2px;
}

.pomodoro-input {

  text-align: center;

  max-width: 220px;

  margin-left: auto;

  margin-right: auto;
}

.end-btn {

  background: #ef4444;
}

.pomodoro-focus-screen {

  background:
    linear-gradient(
      to bottom right,
      #f8fafc,
      #eef2ff
    );
}

.focus-session-panel {

  width: 100%;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 40px;
}

.focus-session-panel p {

  color: #6b7280;

  margin-bottom: 22px;
}

.focus-timer {

  font-size: 120px;

  font-weight: 700;

  letter-spacing: -2px;

  margin-bottom: 34px;
}

.focus-actions {

  width: 100%;

  max-width: 360px;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;
}

.focus-actions button {

  margin-top: 0;
}

.confirm-overlay {

  position: fixed;

  inset: 0;

  z-index: 1000;

  display: none;

  justify-content: center;

  align-items: center;

  padding: 28px;

  background: rgba(17,24,39,0.24);

  backdrop-filter: blur(8px);
}

.confirm-overlay.active {

  display: flex;
}

.confirm-card {

  width: 100%;

  max-width: 420px;

  background: rgba(255,255,255,0.86);

  backdrop-filter: blur(16px);

  padding: 32px;

  border-radius: 28px;

  text-align: center;

  box-shadow:
    0 18px 50px rgba(0,0,0,0.1);
}

.confirm-card h2 {

  margin-bottom: 10px;
}

.confirm-card p {

  color: #6b7280;

  margin-bottom: 24px;
}

.confirm-actions {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;
}

.confirm-actions button {

  margin-top: 0;
}

.stats-session-list {

  list-style: none;

  margin-top: 18px;

  margin-bottom: 8px;
}

.stats-session-list li {

  background: #f3f4f6;

  color: #4b5563;

  padding: 12px 14px;

  border-radius: 14px;

  margin-top: 10px;

  text-align: left;

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 16px;

  align-items: center;
}

.stats-session-list li strong {

  color: #111827;

  font-size: 15px;

  font-weight: 600;

  text-align: right;
}

/* =========================
   STATISTICS
========================= */

.stats-card {

  max-width: 780px;
}

.stats-split {

  display: grid;

  grid-template-columns: 1fr 1px 1fr;

  gap: 28px;

  align-items: start;

  margin-top: 20px;
}

.stats-column h2 {

  font-size: 22px;

  margin-bottom: 18px;
}

.stats-divider {

  width: 1px;

  min-height: 260px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(107,114,128,0.28),
      transparent
    );
}

.stat-line {

  background: #f3f4f6;

  color: #374151;

  padding: 14px 16px;

  border-radius: 16px;

  margin-top: 12px;

  font-size: 15px;

  font-weight: 500;

  display: grid;

  grid-template-columns: 1fr auto;

  gap: 16px;

  align-items: center;
}

.stat-line strong {

  color: #111827;

  font-size: 17px;

  font-weight: 600;

  text-align: right;
}

/* =========================
   PROGRESS TRACKER
========================= */

.progress-card {

  max-width: 820px;
}

.progress-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px;

  margin-top: 20px;
}

.progress-panel {

  background: rgba(255,255,255,0.46);

  border-radius: 24px;

  padding: 22px;
}

.progress-panel h2 {

  font-size: 22px;

  margin-bottom: 16px;
}

.progress-wide {

  grid-column: 1 / -1;
}

/* =========================
   CELEBRATION
========================= */

.celebrate {

  animation: pop 0.4s ease;
}

.confetti-piece {

  position: fixed;

  z-index: 999;

  pointer-events: none;

  border-radius: 3px;

  opacity: 0;

  animation: confettiFall 0.85s ease-out forwards;
}

@keyframes pop {

  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.01);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes taskComplete {

  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.015);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes confettiFall {

  0% {
    opacity: 0;
    transform:
      translate(0, 0)
      rotate(0deg)
      scale(0.8);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(var(--x-move), var(--y-move))
      rotate(var(--rotation))
      scale(1);
  }
}

/* =========================
   MOBILE
========================= */

@media(max-width: 900px) {

  .dashboard-layout {

    grid-template-columns: 1fr;
  }

  .tiles {

    grid-template-columns: 1fr;
  }

  .topbar {

    flex-direction: column;

    align-items: center;

    gap: 18px;
  }

  .dashboard-greeting {

    position: static;

    align-self: flex-end;
  }

  .quote-card {

    max-width: 100%;
  }

  .tile {

    min-height: 180px;
  }

  .focus-timer {

    font-size: 72px;
  }

  .focus-actions,
  .confirm-actions {

    grid-template-columns: 1fr;
  }

  .stats-split {

    grid-template-columns: 1fr;

    gap: 18px;
  }

  .progress-grid {

    grid-template-columns: 1fr;
  }

  .progress-wide {

    grid-column: auto;
  }

  .stats-divider {

    min-height: 1px;

    width: 100%;

    background:
      linear-gradient(
        to right,
        transparent,
        rgba(107,114,128,0.28),
        transparent
      );
  }

  .calendar-toolbar {

    grid-template-columns: 1fr;
  }

  .study-calendar-grid {

    grid-template-columns: 1fr;
  }

  .calendar-day-label {

    display: none;
  }

  .study-calendar-day {

    min-height: auto;
  }
}
/* ===== PASTE THIS AT THE BOTTOM OF YOUR style.css ===== */

/* Topbar actions */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.topbar-btn {
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
}

/* Admin panel */
.admin-card {
  width: 100%;
  max-width: 700px;
}

.admin-user-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

.admin-user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.admin-user-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.admin-user-info strong {
  font-size: 15px;
  color: #111827;
}

.admin-user-info span {
  font-size: 13px;
  color: #6b7280;
}


/* DARK MODE */
body.dark-mode{
background:#0f172a;
color:#f8fafc;
}
body.dark-mode .card,
body.dark-mode .tile,
body.dark-mode .dashboard-tasks,
body.dark-mode .planner-section,
body.dark-mode .quote-card,
body.dark-mode .dashboard-greeting,
body.dark-mode .study-calendar-day,
body.dark-mode .calendar-day-label,
body.dark-mode .confirm-card{
background:rgba(30,41,59,0.92)!important;
color:#f8fafc!important;
}
body.dark-mode p,
body.dark-mode span,
body.dark-mode strong,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode .calendar-event,
body.dark-mode .calendar-date-number,
body.dark-mode .stat-line,
body.dark-mode .planner-note,
body.dark-mode .chapter-item,
body.dark-mode .stats-session-list li{
color:#f8fafc!important;
}
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .stat-line,
body.dark-mode .chapter-item,
body.dark-mode .revision-subject,
body.dark-mode .subject-order-row,
body.dark-mode .calendar-row,
body.dark-mode #taskList li,
body.dark-mode .dashboard-task,
body.dark-mode .stats-session-list li{
background:#1e293b!important;
color:#f8fafc!important;
}
.dark-toggle-btn{
position:absolute;
top:-65px;
left:0;
width:auto;
padding:10px 14px;
z-index:5;
}
.chapter-controls{
display:flex;
gap:10px;
margin-top:14px;
}
.compact-btn{
margin-top:0;
width:auto;
padding:10px 14px;
}

.dark-mode .focus-timer {
  color: #111827 !important;
}

.dark-mode .focus-session-panel p {
  color: #374151 !important;
}