:root{
  --bg: #f8fafc;         /* پس‌زمینه */
  --surface: #ffffff;    /* کارت‌ها */
  --text: #0f172a;       /* متن اصلی */
  --muted: #64748b;      /* متن ثانویه */
  --primary: #2563eb;    /* آبی 600 */
  --primary-500:#3b82f6; /* آبی 500 */
  --success:#16a34a;     /* سبز */
  --warning:#f59e0b;     /* کهربایی */
  --danger:#ef4444;      /* قرمز */
  --border:#e2e8f0;      /* خاکستری روشن */
  --radius:14px;
  --shadow: 0 2px 8px rgba(2,6,23,0.04); /* Reduced shadow for better performance */
}
*{ box-sizing:border-box }
html, body{ height:100% }
body{
  margin:0;
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background:var(--bg);
  color:var(--text);
  /* Reduced animations for better performance */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Notification System */
#notification-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.notification {
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  animation: fadeIn 0.3s ease-out, fadeOut 0.3s ease-in 2.7s forwards;
}

.notification.error {
  background-color: var(--danger);
}

.notification.success {
  background-color: var(--success);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-20px); }
}

.app{ 
  min-height:100vh; 
  display:flex; 
  flex-direction:column; 
  padding-bottom:72px; 
  width:100%;
  max-width: 100vw;
  overflow-x: hidden;
}

header{
  position:sticky; top:0; z-index:10;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1000px; 
  margin:0 auto; 
  padding:10px 16px;
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:10px;
  width: 100%;
}
.brand{ 
  display:flex; 
  align-items:center; 
  gap:10px; 
  font-weight:900; 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand i{
  width:10px; height:10px; border-radius:50%; background:var(--primary);
  box-shadow:0 0 0 4px rgba(37,99,235,0.15);
}
.today{ 
  color:var(--muted); 
  font-size:13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

main{
  flex:1; 
  max-width:1000px; 
  margin:0 auto; 
  width:100%; 
  padding:16px;
  display:grid; 
  gap:16px;
  box-sizing: border-box;
}

/* Views */
.view{ display:none }
.view.active{ display:block }

/* Cards */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}
.card-title{ 
  font-weight:800; 
  margin-bottom:6px;
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* Timer */
.timer-wrap{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:8px; }
.current-topic{ min-height:22px; color:var(--muted); text-align:center }
.timer{
  font-variant-numeric: tabular-nums;
  font-weight:900; font-size:42px; letter-spacing:.5px; text-align:center;
  padding:14px 18px; min-width:260px;
  border:1px solid var(--border); border-radius:16px; background:#fff;
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
.controls{ 
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
  justify-content:center;
  width: 100%;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none;
  padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  background:#fff; color:var(--text); font-weight:700;
  transition: background-color 0.1s, border-color 0.1s; /* Simpler transition for better performance */
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  will-change: background-color, border-color; /* Hint for browser optimization */
}
.btn:hover{ background-color: #f8fafc; } /* Simpler hover effect */
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn.primary{ background:var(--primary); color:#fff; border-color:transparent }
.btn.warn{ background:#fff3; color:#fff; background:linear-gradient(90deg,#f59e0b,#ef4444); border-color:transparent }
.btn.ghost{ background:#fff }

/* Simple list */
.list{ display:flex; flex-direction:column; gap:8px }
.row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#fff;
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
.row small{ color:var(--muted) }

/* Calendar */
.calendar{ display:grid; gap:12px; }
.cal-header{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:#fff;
}
.cal-nav{ display:flex; align-items:center; gap:8px }
.icon-btn{
  width:36px; height:36px; display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--border); border-radius:10px; background:#fff;
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
.cal-title{ 
  font-weight:800;
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
.weekdays, .days{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.weekday{ 
  text-align:center; 
  color:var(--muted); 
  font-size:11px;
  font-weight: 700;
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
.day{
  min-height:30px; 
  background:#fff; 
  border:1px solid var(--border); 
  border-radius:10px; 
  padding:4px;
  display:flex; 
  flex-direction:column; 
  gap:3px; 
  cursor:pointer; 
  transition: border-color 0.1s; /* Simplified transition */
  min-width: 0;
  position: relative;
}
.day:hover{ border-color:#bfd2ff }
.day-number{ 
  font-weight:800; 
  font-size:12px; 
  text-align: center;
  align-self: center;
}
.today-cell{ 
  position:relative;
  border: 2px solid var(--primary);
  border-radius: 10px;
}
.chip{
  display:inline-block; 
  font-size:9px; 
  padding:2px 4px; 
  border-radius:6px;
  background:#eef2ff; 
  color:#1e40af; 
  border:1px solid #c7d2fe;
  align-self:center;
  margin-top:auto;
  max-width:100%;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  line-height: 1;
}
.empty{ visibility:hidden }

/* Calendar grid responsiveness */
.days {
  grid-template-columns: repeat(7, 1fr);
}

/* Stats layout */
.stats-container {
  display: grid;
  gap: 16px;
}
.chart-card {
  padding: 24px;
}
.chart-wrapper {
  position: relative;
  height: 300px; /* Provides a stable container for the chart */
}
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.kpi-card {
  text-align: center;
  padding: 20px;
}
.kpi-label {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 8px;
}
.kpi-value {
  font-weight: 800;
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) {
  .stats-container {
    grid-template-columns: 2fr 1fr;
  }
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .chart-card {
    grid-column: 1 / -1; /* Chart takes full width */
  }
}

/* Leaderboard Styles */
.leaderboard-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.leaderboard-rank {
  font-weight: 800;
  font-size: 16px;
  width: 30px;
  text-align: center;
  color: var(--muted);
}
.leaderboard-details {
  flex: 1;
  overflow: hidden;
}
.leaderboard-name {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leaderboard-time {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.leaderboard-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 14px;
}
.leaderboard-change.up {
  color: #16a34a; /* Green */
}
.leaderboard-change.down {
  color: #ef4444; /* Red */
}
.leaderboard-change.stable {
  color: var(--muted);
}
.leaderboard-separator {
  text-align: center;
  font-size: 24px;
  color: var(--muted);
  margin: 8px 0;
}

/* Bottom nav */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:#ffffff; border-top:1px solid var(--border);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  width: 100%;
  box-sizing: border-box;
}
.nav-inner{ 
  max-width:800px; 
  margin:0 auto; 
  display:flex; /* Changed from grid to flex */
  gap:8px; 
  padding:8px 4px; /* Reduced horizontal padding */
  width: 100%;
  box-sizing: border-box;
}
.nav-item{
  display:flex; 
  flex-direction:column; 
  align-items:center; 
  justify-content:center; 
  gap:4px;
  padding:8px 6px; 
  border-radius:12px; 
  cursor:pointer; 
  user-select:none; 
  color:#0f172a;
  font-size: 12px;
  min-height: 50px;
  flex: 1 1 0; /* Added flex properties to make items flexible */
  text-align: center; /* Center text for better look */
}
.nav-item.active{ color:var(--primary); background:#eff6ff; border:1px solid #bfdbfe }
.nav-item svg{ width:20px; height:20px }

/* Modal (start) */
.modal{ position:fixed; inset:0; display:none; place-items:center; z-index:30 }
.modal.open{ display:grid }
.backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.25) }
.sheet{
  position:relative; 
  width: min(520px, 95vw);  /* Made more responsive */
  max-width: 95vw;          /* Added max-width */
  background:#fff; 
  border:1px solid var(--border); 
  border-radius:16px; 
  padding:16px; 
  box-shadow:var(--shadow);
  z-index:1;
  box-sizing: border-box;
}
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px }
.field label{ 
  color:#334155; 
  font-weight:700; 
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
.input{ 
  width:100%; 
  background:#fff; 
  border:1px solid var(--border); 
  border-radius:12px; 
  padding:12px; 
  outline:none; 
  font-size:14px;
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
.actions{ 
  display:flex; 
  gap:8px; 
  justify-content:flex-end;
  flex-wrap: wrap;
}

/* Day panel (bottom sheet) */
.day-panel {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  visibility: hidden; /* Use visibility for transitions */
  transition: visibility 0.3s;
}
.day-panel.open {
  visibility: visible;
}
.day-panel .backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.day-panel.open .backdrop {
  opacity: 1;
}
.day-sheet {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
  background: #f8fafc; /* Match app background */
  border-top: 1px solid var(--border);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.1);
  padding: 14px;
  box-sizing: border-box;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.day-panel.open .day-sheet {
  transform: translateY(0);
}
.day-head { 
  display:flex; 
  align-items:center; 
  justify-content:space-between; 
  gap:10px; 
  margin-bottom:12px;
  flex-wrap: wrap;
}
.close-x{
  width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--border); background:#fff; cursor:pointer;
  transition: background-color 0.2s;
}
.close-x:hover {
  background-color: #f1f5f9;
}
.pill{ 
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  padding:6px 12px; 
  border-radius:999px; 
  font-size:13px; 
  background:#eff6ff; 
  color:#1e40af; 
  border:1px solid #bfdbfe;
  font-family:"Vazirmatn", system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}
.btn-delete {
  background: none;
  border: none;
  padding: 6px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color 0.2s;
}
.btn-delete:hover {
  background-color: #fee2e2;
}
.btn-delete svg {
  width: 20px;
  height: 20px;
  color: var(--danger);
}

/* Responsive tweaks */
@media (max-width:699px) {
  .day {
    min-height: 25px;
    padding: 3px;
  }
  .day-number {
    font-size: 11px;
  }
  .chip {
    font-size: 8px;
    padding: 1px 3px;
  }
  .timer {
    font-size: 32px;
    padding: 10px 14px;
    min-width: 180px;
    width: 100%;
    max-width: 300px;
  }
  .controls {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .btn {
    width: 100%;
    max-width: 300px;
    margin: 4px 0;
  }
  main {
    padding: 12px 8px;
  }
  .header-inner {
    padding: 8px 12px;
    flex-wrap: wrap;
  }
  .bottom-nav {
    padding: 4px;
  }
  .nav-inner {
    grid-template-columns: repeat(3, 1fr);
  }
  .card {
    padding: 12px;
  }
  .current-topic {
    font-size: 14px;
    word-break: break-word;
    text-align: center;
  }
  .hint {
    font-size: 11px;
    padding: 0 10px;
  }
}

@media (max-width:400px) {
  .day {
    min-height: 20px;
    padding: 2px;
  }
  .day-number {
    font-size: 10px;
  }
  .chip {
    font-size: 7px;
    padding: 1px 2px;
  }
  .timer {
    font-size: 24px;
    padding: 8px 10px;
    min-width: 150px;
  }
  .btn {
    padding: 10px;
    font-size: 14px;
  }
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .brand {
    align-self: center;
    width: 100%;
    justify-content: center;
  }
  .today {
    align-self: center;
    width: 100%;
    text-align: center;
  }
  .cal-title {
    font-size: 14px;
  }
  .icon-btn {
    width: 30px;
    height: 30px;
  }
  .sheet {
    width: 98vw;
    padding: 12px;
  }
  .day-sheet {
    padding: 10px;
  }
  .close-x {
    width: 36px;
    height: 36px;
  }
  .nav-item {
    padding: 6px 4px;
    font-size: 10px;
    min-height: 45px;
  }
  .nav-item svg { 
    width: 18px; 
    height: 18px 
  }
}

/* Tablet responsiveness */
@media (min-width:700px) and (max-width:1024px) {
  .day {
    min-height: 35px;
    padding: 5px;
  }
  .day-number {
    font-size: 13px;
  }
  .chip {
    font-size: 10px;
  }
}

/* Subject Stats Filter */
.filter-group {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.filter-btn {
  background: none;
  border: 1px solid transparent;
  padding: 6px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
  transition: background-color 0.2s, color 0.2s;
}
.filter-btn:hover {
  color: var(--text);
}
.filter-btn.active {
  background-color: var(--primary);
  color: #fff;
}