/* Basic theme + dark-mode support */
:root{--bg:#111;--card:#0a0a0a;--accent:#417053;--muted:gray;--grn:#2a4a36;--orn:#d8bb7f;--text:white;--gradV:rgba(255,255,255,0.0),rgba(255,255,255,0.05);--gradH:rgba(255,255,255,0.05),rgba(255,255,255,0.3);--transbg:rgba(58,58,58,0.1);}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}
button, input{color:var(--accent);background:var(--bg);border:solid 2px var(--accent);padding:0.5em 1em;border-radius:1em;margin: 8px 0px;}
input{width:100%;padding:8px;}
.top{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:2px solid var(--transbg)}
.brand{font-weight:800}
.container{max-width:1100px;margin:20px auto;display:grid;grid-template-columns:1fr 320px;gap:18px;padding:0 12px}
.card-container { display: flex; overflow: auto}
.card-container .card { width: 100%; flex-shrink: 0; flex-grow: 1;}
.card{background:var(--card);padding:28px;border-radius:18px;box-shadow:0 8px 40px rgba(0,0,0,0.1)}
.card-container .card + .card { background: color-mix(in srgb, var(--card), var(--bg)); margin-left: 18px; }
.row{display:flex;justify-content:space-between;align-items:center}
/*.big{font-size:48px;font-weight:800}*/
.big { display: flex;width: 160px; height: 160px; border-radius: 50%; background: conic-gradient(var(--grn) var(--progress), var(--transbg) 0%); font-size: 0; animation: .88s ease-out turn_in reverse;}
.big::after {content: attr(day-progress); display: flex; justify-content: center; flex-direction: column; width: 100%; margin: 15px; border-radius: 50%; background: var(--card); font-size: 32px; text-align: center; font-weight:800; color: var(--accent) }


@keyframes turn_in {
  5% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .95), var(--transbg) 0deg);
  }
  10% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .9), var(--transbg) 0deg);
  }
  15% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .85), var(--transbg) 0deg);
  }
  20% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .8), var(--transbg) 0deg);
  }
  25% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .75), var(--transbg) 0deg);
  }
  30% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .7), var(--transbg) 0deg);
  }
  35% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .65), var(--transbg) 0deg);
  }
  40% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .6), var(--transbg) 0deg);
  }
  45% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .55), var(--transbg) 0deg);
  }
  50% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .5), var(--transbg) 0deg);
  }
  55% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .45), var(--transbg) 0deg);
  }
  60% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .4), var(--transbg) 0deg);
  }
  65% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .35), var(--transbg) 0deg);
  }
  70% {
    background: conic-gradient(var(--grn) calc(var(--progress) * 0.3), var(--transbg) 0deg);
  }
  75% {
    background: conic-gradient(var(--grn) calc(var(--progress) * 0.25), var(--transbg) 0deg);
  }
  80% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .2), var(--transbg) 0deg);
    }
  85% {
    background: conic-gradient(var(--grn) calc(var(--progress) * .15), var(--transbg) 0deg);
    }
  90% {
      background: conic-gradient(var(--grn) calc(var(--progress) * .1), var(--transbg) 0deg);
    }
  95% {
      background: conic-gradient(var(--grn) calc(var(--progress) * .05), var(--transbg) 0deg);
    }
100% {
    background: conic-gradient(var(--transbg) 0deg);
  }
}

.since { white-space: pre; font-size: 0.8em; }
.since div { padding:8px 10px;border-radius:8px;background:linear-gradient(180deg,var(--gradV));min-width:110px;text-align:center}
.since div span { font-variant-caps: all-small-caps; }
.since div h3, .since div h4 { margin: 10px auto; font-size: 2em; }
.since div h4 { font-size: 1.2em; }
.muted{color:var(--muted)}
.muted.small{font-size:13px}
.counter-label { font-size: 14px; font-weight: 500; color: var(--muted, #888); margin-top: 4px; text-align: center;}
.milestones{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items: center;justify-content: center;align-content: start;overflow:hidden;transition: max-height 0.38s linear;}
.milestone{padding:8px 10px;border-radius:8px;background:linear-gradient(180deg,var(--gradV));min-width:110px;text-align:center}
.milestone .day{font-weight:700;margin-bottom:0.5em;}
.milestones .passed{color:var(--bg);font-weight:700;line-height:2.5em;background:var(--grn);border-radius:1em;}
.milestones .hidden{display: none;}
.milestones .visible{display: inline-block;}
.milestones .future{color:var(--muted);line-height:2.5em;text-shadow:var(--bg) 0px 0px 5px;border-radius:1em;background:var(--transbg);}
.milestones .future div{background:linear-gradient(90deg,var(--gradH));height:2.5em;border-radius:1em;background-repeat:no-repeat;}
.milestones .future:hover div{background-image:linear-gradient(90deg,var(--grn));}
.milestones-legend, .grid-legend{text-align:center;padding:1em 0;color:var(--muted);font-variant-caps: all-small-caps;}
hr{border:0;height:1px;background:var(--transbg);margin:12px 0}
.side .small{font-size:13px}
.login-page{display:flex;align-items:center;justify-content:center;height:100vh;background-color:var(--bg);background-repeat: no-repeat; background-image: url("zmq.svg");background-position: 50% 50%;background-size: 30vh; }
.login-box{padding:38px;border-radius:18px;width:380px;text-align:center;backdrop-filter: blur(25px) saturate(50%);border:solid 2px var(--transbg);box-shadow:rgba(0,0,0,0.38) 0px 3px 38px, rgba(0,0,0,1) 0px 0px 88px;;}
.login-box h1{font-size:2em; margin:8px auto; padding:0 0 18px;}
.error{background:var(--orn); padding:8px; color: var(--text);margin-bottom:8px;border-radius:1em;}
.muted.link{color:var(--muted);text-decoration:none}
.day-grid{display:grid;grid-template-columns:100px repeat(7,40px);gap:10px;justify-content:start;margin-top:12px;align-items: center;justify-content: center;align-content: end;overflow:hidden;transition: max-height 0.38s linear;}
.day-square{width:40px;height:40px;border-radius:1em;box-sizing:border-box;line-height:40px;font-size:1em;text-align:center;}
.day-passed{background-color:var(--grn);border:2px solid var(--grn);color:var(--bg);}
.day-passed:nth-child(8n+8){background-color:var(--orn);border:2px solid var(--orn)}
.day-future{background:rgba(255,255,255,0.05);border:2px solid var(--transbg); filter: blur(0.05em); transition:all 0.38s linear;}
.day-future:hover{filter: blur(0);}
.week-square{width:100px;height:40px;border-radius:1em;box-sizing:border-box;line-height:40px;text-align:center;font-weight:700;text-transform:uppercase;font-size:0.8em;color:var(--muted)}
.week-passed{background-color:var(--grn);color:var(--bg);}
.toggle { display: block; margin: 2em auto 1em; font-variant-caps: all-small-caps; text-align: center; padding: 0.5em 1em; cursor: pointer; background-color:var(--bg); border-radius: 1em; border: solid 2px var(--bg); transition: border-color 0.38s, color 0.38s linear; }
.toggle:hover { border-color:var(--grn); color:var(--grn);  }

.toast-container { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 9999; }

.toast { background: var(--card); color: #fff; padding: 12px 18px;  border-radius: 8px; box-shadow:0 8px 40px rgba(0,0,0,0.1); opacity: 0; transform: translateY(20px); animation: slideIn 0.3s forwards, fadeOut 0.5s 6s forwards; font-size: 18px; cursor: pointer; }

.toast.success { color: var(--grn); }
.toast.info { color: var(--grn); }
.toast.warning { color: var(--orn); }
.toast.error { color: var(--orn) }

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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


.small{font-size:13px}
#logoutLink{color:var(--muted);text-decoration:none;font-size:12px;}

/* light mode */
.light body, .light :root {
	--bg:#e2e2e2;--card:#eee;--accent:#334d1b;--muted:#0E1D06;--grn:#70A73F;--orn:#dd532c;--text:#333;--gradV:rgba(0,0,0,0.0),rgba(0,0,0,0.05);--gradH:rgba(0,0,0,0.05),rgba(0,0,0,0.3);--transbg:rgba(0,0,0,0.1);
	.day-future{background:rgba(0,0,0,0.05);}
}

.alt {
	--bg:#0E1D06;--card:#0E2006;--accent:#9ABF4B;--muted:#DEF2B3;--grn:#70A73F;--orn:#BF7C2A;--text:#e6f0ff;--gradV:rgba(255,255,255,0.0),rgba(255,255,255,0.05);--gradH:rgba(255,255,255,0.05),rgba(255,255,255,0.3);--transbg:rgba(255,255,255,0.1);
}

@media(max-width:920px){
	.container{grid-template-columns:1fr;}
	.milestones{gap:6px;}
	.milestone{min-width:30%;}
	.day-grid{grid-template-columns:80px repeat(7,30px);gap:6px;padding-bottom:10px;}
	.day-square{width:30px;height:30px;border-radius:8px;line-height:28px;font-size:0.7em;}	
	.week-square{width:80px;height:30px;font-size:0.7em;line-height:30px;}	
	.row {display:grid;grid-template-columns:repeat(2,40%);gap:10px;}
}