/* Watery background - gradient + subtle animated ripples and bubbles */
:root{
  --blue1:#00c2ff;
  --blue2:#0096ff;
  --blue3:#0ea5e9;
  --deep:#0b4a6f;
  --ink:#022b42;
  --foam:#e6f7ff;
  --in:#0ea66c;
  --out:#e67a18;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--ink);
  overflow-x:hidden;
  background:#0ea5e9;
}

/* container card */
.card{
  position:relative;
  margin:12vh auto 6vh;
  width:min(560px,92vw);
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  border-radius:18px;
  box-shadow:0 16px 40px rgba(2,43,66,.25);
  padding:20px 18px 16px;
  z-index:2;
}

h1{
  margin:0 0 6px 0;
  font-size:28px;
  color:var(--ink);
}

.totals{
  font-weight:700;
  color:var(--ink);
  margin-bottom:10px;
}

.mode-row{
  display:flex;
  gap:10px;
  margin:6px 0 10px;
}

.entry-row{
  display:grid;
  grid-template-columns: 1fr auto auto;
  gap:10px;
  align-items:center;
  margin-bottom:6px;
}

input[type="number"]{
  width:100%;
  padding:14px 12px;
  font-size:18px;
  border:2px solid var(--blue3);
  border-radius:12px;
  background:white;
  outline:none;
}
input[type="number"]:focus{ box-shadow:0 0 0 3px rgba(14,165,233,.25); }

/* buttons */
.btn{
  border:0;
  cursor:pointer;
  padding:13px 14px;
  font-size:16px;
  border-radius:12px;
  color:white;
  transition: transform .08s ease, box-shadow .12s ease, opacity .12s ease;
  user-select:none;
}
.btn:active{ transform:translateY(1px); opacity:.92; }

.btn-mode{
  flex:1 1 0;
  background:linear-gradient(135deg, var(--blue2), var(--blue1));
  box-shadow:0 6px 16px rgba(0,194,255,.35);
}
.btn-mode.btn-on{
  background:linear-gradient(135deg, #11cf8b, #06b176);
  box-shadow:0 8px 18px rgba(6,177,118,.35);
}

.btn-save{
  background:linear-gradient(135deg, var(--blue3), var(--blue2));
  box-shadow:0 8px 18px rgba(14,165,233,.35);
  white-space:nowrap;
}

.btn-voice{
  background:linear-gradient(135deg, #7cc2ff, #2aa1ff);
  box-shadow:0 8px 18px rgba(42,161,255,.35);
  white-space:nowrap;
}

/* status + log */
.status{ min-height:20px; margin:4px 2px 0; color:var(--ink); }

.log-title{ margin:14px 2px 6px; font-size:16px; color:var(--ink); }

.log{
  max-height:240px;
  overflow:auto;
  padding-right:2px;
}
.entry{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.7);
  border-left:5px solid var(--blue3);
  border-radius:10px;
  padding:8px 10px;
  margin:6px 0;
  box-shadow:0 1px 0 rgba(2,43,66,.05);
}
.entry.in{ border-color:var(--in); }
.entry.out{ border-color:var(--out); }
.e-left{ font-weight:600; }
.e-left span{
  display:inline-block; min-width:76px;
}
.e-right{
  font-size:12px; color:#2b5a77; opacity:.9;
}

/* background layers */
.water-bg{ position:fixed; inset:0; z-index:1; pointer-events:none; }
.water-bg .grad{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(255,255,255,.22) 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 5%, rgba(255,255,255,.18) 0%, transparent 62%),
    linear-gradient(180deg, #7fd9ff 0%, #3fb9f8 35%, #1d8de0 70%, #0b5aa1 100%);
  animation:shift 14s ease-in-out infinite alternate;
}
@keyframes shift{
  0%{ filter:hue-rotate(0deg) saturate(1); }
  100%{ filter:hue-rotate(-6deg) saturate(1.05); }
}

/* gentle ripples */
.ripples{
  position:absolute; inset:0;
  background:
    radial-gradient(120px 60px at 20% 75%, rgba(255,255,255,.18) 0 35%, transparent 36%) repeat,
    radial-gradient(140px 70px at 70% 82%, rgba(255,255,255,.16) 0 35%, transparent 36%) repeat;
  background-size: 420px 180px, 520px 220px;
  animation: drift 12s linear infinite;
  opacity:.55;
}
@keyframes drift{
  to{ background-position: 420px 0, -520px 0; }
}

/* bubbles */
.bubbles{ position:absolute; inset:0; overflow:hidden; }
.bubbles span{
  position:absolute; bottom:-40px; left:var(--x,10%);
  width:var(--s,12px); height:var(--s,12px); border-radius:50%;
  background:rgba(255,255,255,.55);
  filter:blur(.2px);
  animation: rise var(--t,10s) linear infinite;
}
.bubbles span:nth-child(1){ --x:15%; --s:10px; --t:9s; }
.bubbles span:nth-child(2){ --x:35%; --s:14px; --t:11s; }
.bubbles span:nth-child(3){ --x:55%; --s:11px; --t:10.5s; }
.bubbles span:nth-child(4){ --x:75%; --s:13px; --t:12s; }
.bubbles span:nth-child(5){ --x:88%; --s:9px;  --t:8.5s; }
@keyframes rise{
  from{ transform:translateY(0) translateX(0); opacity:.8; }
  to{ transform:translateY(-115vh) translateX(-10px); opacity:0; }
}

/* small screens */
@media (max-width:420px){
  .entry-row{ grid-template-columns: 1fr auto; }
  .btn-voice{ grid-column: 1 / -1; }
}