#home-app {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 16px;
  box-sizing: border-box;
}

@media (max-width: 480px) {
  #home-app .card {
    padding: 16px;
  }

  #home-app button {
    padding: 12px;
    font-size: 15px;
  }

  .toggle-row span {
    font-size: 15px;
  }

  .season-title {
    font-size: 16px;
  }

  .task-item {
    font-size: 14px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  #home-app {
    max-width: 520px;
    padding: 18px;
  }
}

@media (min-width: 769px) {
  #home-app {
    max-width: 580px;
  }
}

#home-app .card {
  background: var(--e-global-color-background);
  padding: 22px;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.07);
  margin-bottom: 22px;
}
body.dark-mode #home-app .card {
  background:#1E1E1E !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

#home-app .tabs {
  display:flex;
  background:var(--e-global-color-background);
  border-radius:14px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  margin-bottom:20px;
}
#home-app .tab {
  flex:1;
  padding:10px 0;
  text-align:center;
  cursor:pointer;
  border-radius:12px;
  font-weight:600;
  color:var(--e-global-color-text);
}
#home-app .tab.active {
  background:#2A63F0;
  color:white !important;
}
.hidden{display:none}

.toggle-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
}
.switch{
  position:relative;
  width:46px;
  height:26px;
}
.switch input{display:none}
.slider{
  position:absolute;
  inset:0;
  border-radius:26px;
  background:rgba(0,0,0,0.25);
  transition:.3s;
}
.slider:before{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  left:2px;
  bottom:2px;
  background:white;
  border-radius:50%;
  transition:.3s;
}
input:checked+.slider{background:#2A63F0}
input:checked+.slider:before{transform:translateX(20px)}

.summary-box{
  padding:16px;
  border-radius:16px;
  background:var(--e-global-color-background);
  border:1px solid rgba(0,0,0,0.06);
  margin-bottom:20px;
  font-size:14px;
}
body.dark-mode .summary-box{
  background:#252525;
  border:1px solid rgba(255,255,255,0.12);
}

.season-block{
  padding:16px 18px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,0.08);
  margin-bottom:18px;
  background:#fafafa;
}
body.dark-mode .season-block{
  background:#000 !important;
  border-color:#333 !important;
}

.season-title{
  font-weight:700;
  margin-bottom:10px;
  display:flex;
  gap:8px;
  align-items:center;
  font-size:17px;
  color:#000;
}
body.dark-mode .season-title{
  color:#fff !important;
}

.task-item{
  margin-bottom:10px;
  font-size:15px;
  color:#000;
}
.task-item div{
  color:#000;
}
body.dark-mode .task-item,
body.dark-mode .task-item div{
  color:#f5f5f5 !important;
}

.badge{
  padding:4px 8px;
  font-size:11px;
  border-radius:7px;
  font-weight:600;
  margin-left:10px;
}
.high{background:#ffe0e0;color:#b00000}
.med{background:#fff4cc;color:#9a7400}
.low{background:#e5ffe5;color:#187d18}
.core{background:#efefef;color:#444}

body.dark-mode .badge.high,
body.dark-mode .badge.med,
body.dark-mode .badge.low,
body.dark-mode .badge.core{
  color:#ffffff !important;
}

.progress-check{transform:scale(1.2);margin-right:10px}

#home-app button{
  width:100%;
  padding:14px;
  border-radius:14px;
  font-size:16px;
  font-weight:600;
  background:#2A63F0;
  color:white;
  border:none;
  margin-top:14px;
  cursor:pointer;
}
#home-app button:hover{opacity:0.9}

.icon-btn{
  background:#111 !important;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}
.icon-btn span{
  display:inline-block;
}