:root{
  --bg1:#0f172a;
  --bg2:#1e293b;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --brand:#2563eb;
  --brand-2:#60a5fa;
  --card:#0b1220aa;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--text);
  background: linear-gradient(120deg, var(--bg1), var(--bg2));
  background-size: 200% 200%;
  animation: bgShift 12s ease-in-out infinite;
}

@keyframes bgShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.container{max-width:1100px;margin:0 auto;padding:1rem}

header{
  position:sticky;top:0;z-index:50;
  backdrop-filter: blur(8px);
  background: rgba(8,12,22,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 0;
}

.brand{display:flex;align-items:center;gap:.6rem}
.brand img{height:36px}
.brand span{font-weight:700;letter-spacing:.5px}

.nav-links{
  display:flex;align-items:center;gap:1rem;
}

.nav-links a{
  text-decoration:none;color:var(--text);padding:.5rem .8rem;border-radius:12px;
}
.nav-links a:hover{background:#ffffff14}

.theme-toggle, .menu-toggle{
  border:none;background:#ffffff10;color:var(--text);padding:.6rem .8rem;border-radius:12px;cursor:pointer
}

.menu-toggle{display:none}

.hero{
  display:grid;grid-template-columns:1.2fr .8fr;gap:1.25rem;align-items:stretch;
  margin:1.2rem 0;
}

.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:18px;padding:1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.card h2{margin:.2rem 0 1rem;font-size:1.2rem}
.time{
  font-size:3rem;font-weight:700;letter-spacing:1px;margin:.4rem 0;
}
.sub{color:var(--muted);font-size:.95rem}

.controls{display:flex;gap:.5rem;flex-wrap:wrap;margin:.5rem 0}
button.btn{
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:white;border:none;padding:.6rem .9rem;border-radius:12px;cursor:pointer;font-weight:600
}
button.btn:active{transform:translateY(1px)}

.grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem
}

.note-area{
  width:100%;min-height:140px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:#0b1220; color:var(--text); padding:.8rem; resize:vertical
}

.list{display:flex;flex-direction:column;gap:.6rem;margin-top:.6rem}
.item{
  display:flex;align-items:center;justify-content:space-between;
  background:#0b1220;border:1px solid rgba(255,255,255,.06);
  border-radius:12px;padding:.6rem .8rem
}
.item span{opacity:.9}
.item .actions{display:flex;gap:.4rem}
.item button{background:#ffffff10;color:var(--text);border:none;padding:.4rem .6rem;border-radius:10px;cursor:pointer}

footer{
  margin-top:2rem;padding:2rem 0;color:var(--muted);font-size:.9rem;text-align:center
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  .menu-toggle{display:inline-flex}
  .nav-links{display:none;position:absolute;top:64px;right:12px;flex-direction:column;background:#0b1220; padding:.6rem;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
  .nav-links.show{display:flex}
  .grid{grid-template-columns:1fr}
}
/* Light theme */
body.light{
  --bg1:#eff6ff;
  --bg2:#e0f2fe;
  --text:#0b1220;
  --muted:#334155;
  --card:#ffffffcc;
}