:root {
  --accent: #007AFF;
  --accent-soft: rgba(0,122,255,0.12);
  --red: #FF3B30;
  --green: #34C759;
  --text: #1C1C1E;
  --text2: #8E8E93;
  --radius: 18px;
  --radius-sm: 14px;
  --safe-top: env(safe-area-inset-top, 20px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Rounded", "Helvetica Neue", sans-serif;
  background: #F2F2F7;
  color: var(--text);
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* ── Soft animated orbs ── */
.bg-orbs { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px); opacity: 0.35;
  animation: float 25s ease-in-out infinite;
}
.orb-1 { width: 320px; height: 320px; background: #007AFF; top: -100px; left: -80px; animation-delay: 0s; }
.orb-2 { width: 280px; height: 280px; background: #5AC8FA; top: 25%; right: -100px; animation-delay: -6s; }
.orb-3 { width: 260px; height: 260px; background: #34C759; bottom: 15%; left: -60px; animation-delay: -12s; }
.orb-4 { width: 200px; height: 200px; background: #007AFF; bottom: -80px; right: 40px; animation-delay: -18s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -25px) scale(1.08); }
  50% { transform: translate(-15px, 40px) scale(0.95); }
  75% { transform: translate(25px, 15px) scale(1.03); }
}

/* ── Status bar ── */
.status-bar { height: calc(var(--safe-top) + 8px); position: relative; z-index: 1; }

/* ── Tab bar — light glass ── */
.tab-bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px;
  display: flex; justify-content: space-around;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border-top: 0.5px solid rgba(0,0,0,0.08);
  padding: 8px 0 calc(8px + var(--safe-bottom));
  z-index: 100;
}
.tab-item {
  background: none; border: none; display: flex; flex-direction: column;
  align-items: center; gap: 3px; color: var(--text2); font-size: 10px;
  cursor: pointer; padding: 4px 16px; transition: color .25s, transform .2s;
}
.tab-item.active { color: var(--accent); }
.tab-item:active { transform: scale(0.9); }
.tab-icon { font-size: 22px; }
.tab-item.active .tab-icon { filter: drop-shadow(0 0 6px rgba(0,122,255,0.35)); }

/* ── Pages ── */
.page { display: none; padding-bottom: 100px; position: relative; z-index: 1; }
.page.active { display: block; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.page-header { padding: 12px 20px 8px; }
.page-header h1 {
  font-size: 34px; font-weight: 800; color: var(--text);
}

.page-body { padding: 0 16px; }

/* ── Inputs — light glass ── */
.input-row { display: flex; gap: 10px; margin-bottom: 14px; }
.input-row input[type="text"] {
  flex: 1; padding: 14px 16px;
  border: 0.5px solid rgba(0,0,0,0.1); border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  font-size: 16px; color: var(--text);
  transition: border-color .25s, box-shadow .25s;
}
.input-row input::placeholder { color: var(--text2); }
.input-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}

textarea {
  width: 100%; min-height: 140px; resize: vertical;
  padding: 14px 16px; border: 0.5px solid rgba(0,0,0,0.1);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  font-size: 15px; line-height: 1.5; color: var(--text);
  font-family: inherit; margin-bottom: 12px;
  transition: border-color .25s, box-shadow .25s;
}
textarea::placeholder { color: var(--text2); }
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,122,255,0.15);
}

/* ── Buttons ── */
.btn-primary {
  background: var(--accent); color: #fff; border: none;
  padding: 12px 22px; border-radius: var(--radius-sm);
  font-size: 16px; font-weight: 600; cursor: pointer;
  position: relative; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,122,255,0.3);
  transition: transform .15s, box-shadow .2s;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 60%);
  pointer-events: none;
}
.btn-primary:active { transform: scale(0.96); box-shadow: 0 2px 6px rgba(0,122,255,0.25); }
.btn-primary.full { width: 100%; margin-bottom: 20px; }

.btn-glass {
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(0,0,0,0.08);
  color: var(--accent); padding: 12px 22px; border-radius: var(--radius-sm);
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background .2s, transform .15s;
}
.btn-glass:active { transform: scale(0.96); background: rgba(255,255,255,0.8); }

/* ── Todo list ── */
.list { list-style: none; }
.list li {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 0.5px solid rgba(0,0,0,0.06);
  padding: 14px 16px; border-radius: var(--radius-sm);
  margin-bottom: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  transition: transform .2s, opacity .2s;
}
.list li:active { transform: scale(0.98); }
.list li.done { opacity: 0.45; }
.list li.done .todo-text { text-decoration: line-through; color: var(--text2); }

.todo-check {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.12); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .25s;
  background: rgba(255,255,255,0.5);
}
.list li.done .todo-check {
  background: var(--green); border-color: transparent;
  box-shadow: 0 0 10px rgba(52,199,89,0.35);
}
.list li.done .todo-check::after { content: "\2713"; color: #fff; font-size: 14px; font-weight: 700; }

.todo-text { flex: 1; font-size: 16px; color: var(--text); }
.todo-delete {
  background: none; border: none; color: var(--red);
  font-size: 18px; cursor: pointer; opacity: .4;
  transition: opacity .2s;
}
.todo-delete:active { opacity: 1; }

.empty-hint {
  text-align: center; color: var(--text2); margin-top: 40px; font-size: 15px;
}

/* ── Memo cards ── */
.memo-card {
  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 0.5px solid rgba(0,0,0,0.06);
  border-left: 4px solid var(--accent);
  padding: 16px; border-radius: var(--radius-sm);
  margin-bottom: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  position: relative;
}
.memo-card h3 { font-size: 16px; margin-bottom: 6px; color: var(--text); }
.memo-card p { font-size: 14px; color: #636366; white-space: pre-wrap; word-break: break-word; }
.memo-card .memo-time { font-size: 11px; color: var(--text2); margin-top: 8px; }
.memo-card .memo-del {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none; color: var(--red);
  font-size: 16px; cursor: pointer; opacity: .4;
  transition: opacity .2s;
}
.memo-card .memo-del:active { opacity: 1; }

/* ── Timer ── */
.timer-body {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 30px;
}
.timer-ring { position: relative; width: 240px; height: 240px; margin-bottom: 28px; }
.timer-ring svg {
  width: 100%; height: 100%; transform: rotate(-90deg);
  filter: drop-shadow(0 0 16px rgba(0,122,255,0.2));
}
.ring-bg { fill: none; stroke: rgba(0,0,0,0.06); stroke-width: 8; }
.ring-fg {
  fill: none; stroke: var(--accent); stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 565.48; stroke-dashoffset: 0;
  transition: stroke-dashoffset .5s ease;
}
.timer-display {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; font-weight: 200; letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.timer-controls { display: flex; gap: 12px; margin-bottom: 24px; }

.timer-presets { display: flex; gap: 10px; }
.preset {
  padding: 10px 18px; border-radius: 24px;
  border: 0.5px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  font-size: 14px; cursor: pointer; color: var(--text2);
  transition: all .25s;
}
.preset.active {
  background: var(--accent); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(0,122,255,0.3);
}
.preset:active { transform: scale(0.95); }