/* AquaReminder - Modern SVG + Dark Mode */
:root{
  --bg1:#1e7fe5;
  --bg2:#6dd5ff;
  --bg3:#ffd27a;

  --text:#0c2b4f;
  --muted:rgba(12,43,79,.78);

  --card:rgba(255,255,255,.82);
  --card2:rgba(255,255,255,.68);
  --border:rgba(255,255,255,.62);

  --shadow: 0 18px 40px rgba(6, 40, 89, .18);
  --shadow2: 0 10px 22px rgba(6, 40, 89, .14);

  --accent1:#1e7fe5;
  --accent2:#6dd5ff;

  --radius:22px;
}

html[data-theme="dark"]{
  --bg1:#061a2d;
  --bg2:#072a4a;
  --bg3:#0a3a6a;

  --text:#eaf2ff;
  --muted:rgba(234,242,255,.78);

  --card:rgba(14, 24, 40, .72);
  --card2:rgba(14, 24, 40, .56);
  --border:rgba(255,255,255,.10);

  --shadow: 0 18px 42px rgba(0,0,0,.42);
  --shadow2: 0 10px 22px rgba(0,0,0,.34);

  --accent1:#4fa3ff;
  --accent2:#8be0ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  overflow-x:hidden;
  background: linear-gradient(135deg, var(--bg1), var(--bg2) 55%, var(--bg3));
}

/* ambient */
.bg{position:fixed; inset:0; z-index:-2;}
.sparkles{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.55) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 14%, rgba(255,255,255,.40) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 62%, rgba(255,255,255,.40) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 76%, rgba(255,255,255,.50) 0 2px, transparent 3px);
  opacity:.55;
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes twinkle { from{opacity:.45; transform:scale(1)} to{opacity:.70; transform:scale(1.02)} }
.bubbles{
  position:absolute; inset:-40px;
  background:
    radial-gradient(circle at 10% 30%, rgba(255,255,255,.28) 0 10px, transparent 11px),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.22) 0 14px, transparent 15px),
    radial-gradient(circle at 55% 40%, rgba(255,255,255,.16) 0 18px, transparent 19px),
    radial-gradient(circle at 80% 75%, rgba(255,255,255,.18) 0 12px, transparent 13px),
    radial-gradient(circle at 90% 20%, rgba(255,255,255,.14) 0 22px, transparent 23px);
  animation: floaty 14s linear infinite;
  opacity:.45;
}
@keyframes floaty { from{transform:translateY(0)} to{transform:translateY(-120px)} }

/* icons */
.ic{width:22px;height:22px;display:block}
.bigBtn .ic{width:22px;height:22px}
.iconBtn .ic{width:22px;height:22px}

/* topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 14px 16px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  backdrop-filter: blur(10px);
}
.brand{display:flex; align-items:center; gap:12px;}
.logo{
  width:52px; height:52px;
  border-radius: 18px;
  box-shadow: var(--shadow2);
  background: var(--card2);
  padding:6px;
  border: 1px solid var(--border);
}
.brandText h1{margin:0;font-size:24px;letter-spacing:.2px}
.brandText .tag{margin:2px 0 0; font-size: 13px; color: var(--muted); font-weight: 650;}

.iconBtn{
  border: 1px solid var(--border);
  background: var(--card2);
  box-shadow: var(--shadow2);
  border-radius: 16px;
  width:46px; height:46px;
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .14s ease, filter .14s ease;
}
.iconBtn:hover{transform: translateY(-1px); filter: brightness(1.02)}
.iconBtn:active{transform: translateY(1px) scale(.98)}

.wrap{max-width: 720px; margin: 0 auto; padding: 8px 14px 22px;}
.card{
  background: var(--card);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.hero{display:flex; gap:14px; padding: 14px; align-items:stretch;}
.heroLeft{flex: 1 1 auto;}

.speech{
  background: var(--card);
  border-radius: 20px;
  padding: 12px 12px 10px;
  position:relative;
  box-shadow: var(--shadow2);
  border: 1px solid var(--border);
}
.bubbleTail{
  position:absolute;
  left: 18px;
  bottom:-10px;
  width: 22px; height: 22px;
  background: var(--card);
  transform: rotate(45deg);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.speech h2{margin:0; font-size: 20px;}
.speech p{margin:6px 0 0; color: var(--muted); font-weight: 650;}

.statusRow{display:flex; gap:10px; margin-top: 12px;}
.status{
  flex: 1 1 auto;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 10px 12px;
  box-shadow: var(--shadow2);
}
.status.mini{flex: 0 0 140px}
.label{font-size: 12px; color: var(--muted); font-weight:800; letter-spacing:.3px; text-transform: uppercase;}
.value{font-size: 18px; font-weight: 900; margin-top:2px;}

.progressCard{
  margin-top: 12px;
  padding: 12px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow2);
}

.progressTrack{
  height: 16px;
  border-radius: 999px;
  background: rgba(12,43,79,.12);
  overflow:hidden;
  position:relative;
}
html[data-theme="dark"] .progressTrack{ background: rgba(234,242,255,.12); }

.progressFill{
  height:100%;
  width:0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  position:relative;
  transition: width .35s ease;
}
.wave{
  position:absolute; inset:-16px -40px -16px -40px;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,.45) 0 8px, transparent 9px),
    radial-gradient(circle at 60% 45%, rgba(255,255,255,.25) 0 10px, transparent 11px),
    radial-gradient(circle at 85% 55%, rgba(255,255,255,.35) 0 7px, transparent 8px);
  opacity:.55;
  animation: waveMove 3.2s linear infinite;
}
@keyframes waveMove { from{transform:translateX(0)} to{transform:translateX(80px)} }

.cups{display:flex; gap:8px; margin-top: 10px; flex-wrap:wrap;}
.cupIcon{
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  display:grid; place-items:center;
  box-shadow: 0 8px 16px rgba(6,40,89,.10);
  overflow:hidden;
  position:relative;
}
html[data-theme="dark"] .cupIcon{ box-shadow: 0 8px 16px rgba(0,0,0,.28); }
.cupIcon img{width: 28px; height: 28px; opacity:.92}
.cupIcon.done::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(30,127,229,.08), rgba(30,127,229,.28));
}

.actions{margin-top: 14px;}
.bigBtn{
  width:100%;
  border: 1px solid var(--border);
  padding: 14px 14px;
  border-radius: 18px;
  cursor:pointer;
  font-weight: 900;
  color: var(--text);
  box-shadow: var(--shadow);
  background: var(--card);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size: 16px;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.bigBtn small{font-weight: 800; opacity:.85}
.bigBtn:hover{transform: translateY(-1px); filter: brightness(1.02)}
.bigBtn:active{transform: translateY(1px) scale(.985); box-shadow: var(--shadow2)}
.bigBtn .chev{font-size: 24px; opacity:.55; margin-left:auto}

.grid2{display:grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px;}
@media (min-width: 560px){ .grid2{grid-template-columns: 1fr 1fr;} }

.footerCard{margin-top: 14px; padding: 12px;}
.nextRow{display:flex; align-items:center; justify-content:space-between; gap: 10px;}
.nextLeft{display:flex; gap:10px; align-items:center;}
.miniIcon{font-size: 20px}

.pillBtn{
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  cursor:pointer;
  background: var(--card);
  box-shadow: var(--shadow2);
  transition: transform .14s ease, filter .14s ease;
}
.pillBtn:hover{transform: translateY(-1px); filter: brightness(1.02)}
.pillBtn:active{transform: translateY(1px) scale(.985)}
.hint{margin-top: 10px; font-weight: 800; color: var(--muted);}

/* modals */
.backdrop{position: fixed; inset:0; background: rgba(8,25,44,.35); backdrop-filter: blur(6px); z-index: 20;}
.modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(560px, calc(100vw - 24px));
  background: var(--card);
  border-radius: 22px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  z-index: 21;
  overflow:hidden;
}
.modalHeader{display:flex; align-items:center; justify-content:space-between; padding: 12px 12px; background: var(--card2);}
.modalHeader h3{margin:0; font-size: 18px}
.modalBody{padding: 12px;}
.modalFooter{padding: 12px; display:flex; justify-content:flex-end; gap:10px; background: var(--card2);}

.fieldRow{display:flex; flex-direction:column; gap:6px; margin-bottom: 10px;}
.fieldRow label{font-weight: 900; color: var(--text)}
.fieldRow input, .fieldRow select{
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px solid rgba(12,43,79,.18);
  background: rgba(255,255,255,.70);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  outline:none;
}
html[data-theme="dark"] .fieldRow input, html[data-theme="dark"] .fieldRow select{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.14);
}
.row2{display:flex; align-items:center; gap:8px}
.dash{font-weight: 900; opacity:.7}
.small{margin:0; font-size: 12px; opacity:.78; font-weight:700}

.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(6,40,89,.10);
  transition: transform .14s ease, filter .14s ease;
}
.chip:hover{transform: translateY(-1px); filter: brightness(1.02)}
.chip:active{transform: translateY(1px) scale(.985)}

.toast{
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  z-index: 50;
}

.confetti{position: fixed; inset:0; pointer-events:none; z-index: 60;}
.confetti i{
  position:absolute;
  width: 10px; height: 14px;
  background: rgba(255,255,255,.85);
  border-radius: 3px;
  opacity:.9;
  animation: fall 1.2s ease-out forwards;
}
@keyframes fall{
  from{transform: translateY(-20px) rotate(0deg); opacity:1}
  to{transform: translateY(110vh) rotate(360deg); opacity:0}
}

.hidden{display:none !important}
@media (max-width:420px){
  .brandText h1{font-size:22px}
  .value{font-size:16px}
}