/* Splash screen */
#splash {
  position:fixed; inset:0;
  display:flex; justify-content:center; align-items:center; flex-direction:column;
  background:linear-gradient(-45deg,#43cea2,#185a9d,#ff6a00,#ee0979);
  background-size:400% 400%; animation: gradient 8s ease infinite;
  color:#fff; font-size:2em; z-index:1000;
  animation: fadeOut 2.5s forwards; animation-delay:2s;
}
#splash h1 { font-size:3em; margin-bottom:0.3em; animation: pop 1s; }
@keyframes fadeOut { to { opacity:0; visibility:hidden; } }
@keyframes pop { from{transform:scale(0.8);} to{transform:scale(1);} }
@keyframes gradient { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

/* RoutineX Styles — Minimal, clean, modern */
:root{
  --bg1: #0f172a;
  --bg2: #111827;
  --fg: #e5e7eb;
  --muted: #9ca3af;
  --primary: #60a5fa;
  --accent: #34d399;
  --danger: #f87171;
  --card: rgba(255,255,255,0.06);
  --outline: rgba(255,255,255,0.12);
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji;
  color: var(--fg);
  background: radial-gradient(1200px 800px at 70% 10%, #0b1220, var(--bg2));
  overflow-x: hidden;
}

/* Calm animated background: layered waves */
.bg-animated{ position: fixed; inset:0; z-index:-1; overflow:hidden; }
.wave{ position:absolute; width:200%; height:60%; left:-50%; filter: blur(40px); opacity:0.25; }
.wave1{ background: radial-gradient(800px 400px at 30% 50%, #2563eb, transparent),
                     radial-gradient(600px 300px at 70% 40%, #22c55e, transparent);
        top:-10%; animation: drift1 30s ease-in-out infinite; }
.wave2{ background: radial-gradient(700px 350px at 40% 60%, #7c3aed, transparent),
                     radial-gradient(500px 250px at 60% 30%, #06b6d4, transparent);
        top:10%; animation: drift2 40s ease-in-out infinite; }
.wave3{ background: radial-gradient(900px 450px at 50% 50%, #f59e0b, transparent);
        top:20%; animation: drift3 55s ease-in-out infinite; }

@keyframes drift1{ 0%,100%{transform: translateY(0)} 50%{transform: translateY(20px)} }
@keyframes drift2{ 0%,100%{transform: translateY(0)} 50%{transform: translateY(-30px)} }
@keyframes drift3{ 0%,100%{transform: translateY(0)} 50%{transform: translateY(25px)} }

.container{
  max-width: 1000px;
  margin: 32px auto;
  padding: 16px;
}

.header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 16px;
}
.app-title{ font-size: clamp(24px, 4vw, 36px); margin:0; letter-spacing:0.5px; }
.credits{ font-size: 12px; color: var(--muted); opacity:0.8; }

.toolbar{
  display:flex; flex-wrap:wrap; gap:12px;
  background: var(--card);
  border:1px solid var(--outline);
  padding: 12px;
  border-radius: 16px;
  backdrop-filter: blur(8px);
}
.profile-group{ display:flex; align-items:center; gap:8px; }
.profile-group label{ color: var(--muted); font-size: 14px; }
.controls{ margin-left:auto; display:flex; gap:8px; flex-wrap: wrap; }

.btn{
  background: transparent;
  color: var(--fg);
  border:1px solid var(--outline);
  padding: 8px 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,0.3); }
.btn:active{ transform: translateY(0); }
.btn.primary{ background: var(--primary); border-color: transparent; color:#0b1020; }
.btn.accent{ background: var(--accent); border-color: transparent; color:#062014; }
.btn.danger{ background: transparent; border-color: rgba(248,113,113,0.6); color: #fecaca; }

.timer-area{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  margin: 16px 0;
}
.progress-wrap{
  background: var(--card);
  border:1px solid var(--outline);
  border-radius: 20px;
  padding: 16px;
  display: grid;
  place-items: center;
}
.progress{
  width: 100%; height: auto;
}
.progress .track{
  fill: none;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 8;
}
.progress .indicator{
  fill:none;
  stroke: var(--primary);
  stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset .2s linear;
}
.time-text{ font-size: 18px; fill: var(--fg); }
.task-text{ font-size: 8px; fill: var(--muted); }

.next-up{
  background: var(--card);
  border:1px solid var(--outline);
  border-radius: 20px;
  padding: 16px;
  min-height: 80px;
  font-size: 14px;
  display:flex; align-items:center;
  line-height:1.5;
}

.tasks{
  background: var(--card);
  border:1px solid var(--outline);
  border-radius: 20px;
  padding: 16px;
}
.tasks h2{ margin: 0 0 8px 0; font-size: 18px; }
.task-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.task-item{
  display:grid;
  grid-template-columns: 28px 1fr auto;
  align-items:center;
  gap:8px;
  padding: 10px;
  border:1px dashed var(--outline);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.drag-handle{ cursor: grab; user-select:none; opacity:.8; }
.task-name{ font-size: 14px; }
.task-duration{ font-size: 12px; color: var(--muted); }
.task-actions{ display:flex; gap:6px; }
.icon-btn{
  border:1px solid var(--outline);
  background: transparent;
  color: var(--fg);
  padding:6px 8px;
  border-radius: 8px;
  cursor:pointer;
}

.hint{ margin-top:8px; color: var(--muted); font-size: 12px; }

.footer{
  display:flex; justify-content:space-between; align-items:center;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
}

dialog{
  border:none;
  padding:0;
  border-radius: 16px;
  background: var(--bg2);
  color: var(--fg);
  border:1px solid var(--outline);
  width: min(90vw, 420px);
}
dialog::backdrop{ background: rgba(0,0,0,.4); backdrop-filter: blur(2px); }
#taskForm{ padding: 16px; display:flex; flex-direction:column; gap:10px; }
#taskForm h3{ margin:0 0 8px 0; }
#taskForm label{ display:flex; flex-direction:column; gap:6px; font-size: 14px; }
#taskForm input{ padding:10px; border-radius: 10px; border:1px solid var(--outline); background:rgba(255,255,255,0.04); color: var(--fg); }
.dialog-actions{ display:flex; justify-content:flex-end; gap:8px; padding-top:8px; }

@media (max-width: 820px){
  .timer-area{ grid-template-columns: 1fr; }
}