:root{
  --bg:#07379c;
  --panel:#121a2b;
  --panel2:#0f1626;
  --text:#eaf1ff;
  --muted:rgba(234,241,255,.72);
  --yellow:#ffd400;
  --cyan:#3df2ff;
  --pink:#ff4fd8;
  --green:#4dff88;
  --purple:#7c5cff;
  --radius:18px;
  --shadow: 0 0 26px rgba(255,212,0,.14), 0 0 26px rgba(61,242,255,.08);
  --border: 1px solid rgba(255,255,255,.08);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, sans-serif;
  background:
    linear-gradient(135deg, #072b84 0%, #0643b7 52%, #062a83 100%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  justify-content:center;
}

.stars{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.45;
  background:
    radial-gradient(1000px 520px at 18% 8%, rgba(35,185,255,.18), transparent 60%),
    radial-gradient(900px 520px at 86% 12%, rgba(255,212,0,.08), transparent 64%),
    radial-gradient(800px 520px at 50% 100%, rgba(61,242,255,.10), transparent 58%);
  filter:none;
}

.app{
  width:100%;
  max-width:560px;
  min-height:100vh;
  position:relative;
  z-index:1;
}

.card{
  background: linear-gradient(180deg, rgba(18,26,43,.92), rgba(15,22,38,.92));
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.muted{ color:var(--muted); }

.divider{
  border:none;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  margin:18px 0;
}

.callout,
.toast,
.block,
.emailText,
.settingRow{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.seg{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.segBtn,
.dangerBtn,
.tipBtn,
.copyBtn{
  border-radius:14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, filter .12s ease;
}

.segBtn:hover,
.dangerBtn:hover,
.tipBtn:hover,
.copyBtn:hover{ filter: brightness(1.06); }

.segBtn:active,
.dangerBtn:active,
.tipBtn:active,
.copyBtn:active{ transform: scale(.99); }

.segBtn.active{
  border-color: rgba(255,212,0,.30);
  background: linear-gradient(135deg, rgba(255,212,0,.20), rgba(124,92,255,.12));
}

.btnRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.btn{
  flex:1;
  min-width:160px;
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color:var(--text);
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  transition: transform .12s ease, filter .12s ease, box-shadow .16s ease;
  will-change: transform;
}

.btn:active{ transform: translateY(1px) scale(.99); }

.btnPrimary{
  position:relative;
  overflow:hidden;
  background: var(--yellow);
  color:#0b0f1a;
  border:none;
  box-shadow:
    0 14px 28px rgba(0,0,0,.45),
    0 0 26px rgba(255,212,0,.18);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}

.btnPrimary:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    0 16px 34px rgba(0,0,0,.50),
    0 0 34px rgba(255,212,0,.22);
}

.btnPrimary:active{
  transform: translateY(1px) scale(.99);
  box-shadow:
    0 10px 20px rgba(0,0,0,.42),
    0 0 20px rgba(255,212,0,.16);
}

.btnPrimary::after,
.primary::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:50%;
  height:180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(18deg);
  opacity:0;
  pointer-events:none;
}

.btnPrimary:hover::after,
.primary:hover::after{
  opacity:1;
  animation: shine .7s ease-out forwards;
}

@keyframes shine{
  from{ left:-60%; }
  to{ left:120%; }
}

.page-app .app{
  padding:18px 16px 150px;
}

.page-app .hero{
  padding:0;
  aspect-ratio:1 / 1;
  height:auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.page-app .heroGlow{
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(420px 240px at 50% 55%, rgba(255,212,0,.14), transparent 62%),
    radial-gradient(540px 280px at 50% 55%, rgba(61,242,255,.10), transparent 72%),
    radial-gradient(520px 260px at 50% 55%, rgba(124,92,255,.10), transparent 78%);
  pointer-events:none;
}

.page-app .moodWrap{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:0;
  filter:
    drop-shadow(0 0 28px rgba(255,212,0,.28))
    drop-shadow(0 0 42px rgba(61,242,255,.16));
}

.page-app .mood{
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  background:transparent;
  transition: transform .2s ease;
  will-change: transform;
}

.page-app .heroProgress{
  width:min(90%, 420px);
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
}

.page-app .heroLevelLabel{
  flex:none;
  min-width:72px;
  color:rgba(234,241,255,.96);
  font-size:.86rem;
  font-weight:1000;
  white-space:nowrap;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(4,8,18,.62);
  box-shadow:0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}

.page-app .heroProgressTrack{
  flex:1;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(4,8,18,.55);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.35);
}

.page-app .heroProgressFill{
  width:0%;
  height:100%;
  border-radius:inherit;
  background: linear-gradient(90deg, var(--yellow), var(--cyan));
  box-shadow: 0 0 18px rgba(255,212,0,.28);
  transition: width .24s ease;
}

.page-app .heroProgressLabel{
  min-width:82px;
  padding:6px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(4,8,18,.62);
  box-shadow:0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  text-align:right;
  font-weight:900;
  color:rgba(234,241,255,.96);
  white-space:nowrap;
}

.page-app .heroProgressDelta{
  font-size:.82rem;
  font-weight:1000;
}

.page-app .heroProgressDelta.positive{
  color:rgba(125,255,168,.96);
}

.page-app .heroProgressDelta.negative{
  color:rgba(255,198,198,.96);
}

.page-app .debugPanel{
  margin-top:14px;
  padding:10px;
  display:flex;
  justify-content:center;
  gap:10px;
}

.page-app .debugPanel[hidden]{
  display:none;
}

.page-app .debugBtn{
  width:52px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.09);
  color:rgba(234,241,255,.94);
  cursor:pointer;
  font-size:1.3rem;
  font-weight:1000;
  line-height:1;
  transition:transform .12s ease, filter .12s ease, border-color .12s ease;
}

.page-app .debugBtn:hover{
  filter:brightness(1.08);
  border-color:rgba(61,242,255,.30);
}

.page-app .debugBtn:active{
  transform:scale(.96);
}

.page-app .completionPanel{
  margin-top:14px;
  padding:14px;
  display:none;
}

.page-app .completionPanel.visible{
  display:block;
}

.page-app .completionTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.page-app .completionTitle{
  margin:0;
  font-size:1.05rem;
  line-height:1.15;
  font-weight:1000;
  color:rgba(255,238,151,.98);
}

.page-app .completionText{
  margin:5px 0 0;
  color:rgba(234,241,255,.72);
  font-size:.92rem;
  line-height:1.3;
}

.page-app .completionDismiss{
  flex:none;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:rgba(234,241,255,.82);
  cursor:pointer;
  font-size:1.45rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease, filter .12s ease;
}

.page-app .completionDismiss:hover{ filter:brightness(1.08); }
.page-app .completionDismiss:active{ transform:scale(.96); }

.page-app .completionPrimary{
  width:100%;
  min-height:48px;
  border:none;
  border-radius:16px;
  background:var(--yellow);
  color:#07101f;
  cursor:pointer;
  font-weight:1000;
  box-shadow:
    0 14px 28px rgba(0,0,0,.42),
    0 0 24px rgba(255,212,0,.16);
  text-shadow:0 1px 0 rgba(255,255,255,.32);
  transition:transform .12s ease, filter .12s ease, box-shadow .16s ease;
}

.page-app .completionPrimary:hover{
  filter:brightness(1.04);
  transform:translateY(-1px);
}

.page-app .completionPrimary:active{
  transform:translateY(1px) scale(.99);
}

.page-app .list{ margin-top:14px; padding:14px; }

.page-app .listHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.page-app .headerActions,
.page-app .metaWrap{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.page-app .headerActions{
  flex:none;
}

.page-app .title{
  font-weight:900;
  letter-spacing:.3px;
  font-size:1.05rem;
  margin:0;
  min-height:1.1em;
  line-height:1.2;
}

.page-app .meta{
  color:var(--muted);
  font-size:.9rem;
  margin-top:2px;
}

.page-app .headerBtn{
  min-width:34px;
  height:34px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color:var(--text);
  cursor:pointer;
  font-size:.82rem;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.page-app .headerBtn:hover{ filter: brightness(1.08); }
.page-app .headerBtn:active{ transform: scale(.98); }
.page-app .headerBtn[hidden]{ display:none !important; }

.page-app .headerBtnIcon{
  font-size:1rem;
  line-height:1;
}

.page-app .headerBtnCount{
  font-size:.76rem;
  color: rgba(234,241,255,.86);
}

.page-app .subline{
  color: rgba(234,241,255,.60);
  font-size:.86rem;
  margin-top:4px;
  line-height:1.2;
}

.page-app .tip{
  margin:10px 0 12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(255,212,0,.10), rgba(61,242,255,.06));
  color: rgba(234,241,255,.92);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.page-app .tipText{
  font-size:.93rem;
  line-height:1.25;
  color: rgba(234,241,255,.80);
}

.page-app .tipActions{
  display:flex;
  gap:8px;
  align-items:flex-start;
  flex:none;
}

.page-app .tipBtn{
  padding:10px 12px;
  white-space:nowrap;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.page-app .items{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.page-app .item{
  background: rgba(255,255,255,.03);
  border: var(--border);
  border-radius:14px;
  padding:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
}

.page-app .item.dim{
  opacity:.40;
  filter: saturate(.9);
}

.page-app .item.overdue{
  border-color: rgba(255,91,91,.42);
  background:
    linear-gradient(135deg, rgba(255,69,69,.18), rgba(255,255,255,.03) 62%),
    rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,91,91,.08);
}

.page-app .item:focus-visible{
  outline:none;
  border-color: rgba(61,242,255,.55);
  box-shadow:
    var(--shadow),
    0 0 0 3px rgba(61,242,255,.12);
}

.page-app .item.done .name{
  text-decoration: line-through;
  color: rgba(234,241,255,.60);
}

.page-app .item::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:14px;
  pointer-events:none;
  opacity:0;
  background: linear-gradient(90deg, rgba(61,242,255,.22), rgba(255,212,0,.20), rgba(124,92,255,.18));
  transition: opacity .18s ease;
  mix-blend-mode: screen;
}

.page-app .item.flash::after{
  opacity:.8;
  animation: flashOut .55s ease-out forwards;
}

@keyframes flashOut{
  0%{ opacity:.85; }
  100%{ opacity:0; }
}

.page-app .nameWrap{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
  min-width:0;
}

.page-app .name{
  font-size:1rem;
  line-height:1.2;
  margin:0;
  word-break: break-word;
}

.page-app .overdueLine{
  margin:0;
  color: rgba(255,198,198,.92);
  font-size:.78rem;
  font-weight:800;
  line-height:1.2;
}

.page-app .metaTagRow{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.page-app .tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  font-size:.75rem;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(234,241,255,.78);
  line-height:1.2;
  white-space:nowrap;
}

.page-app .pointBadge{
  flex:none;
  min-width:34px;
  padding:5px 8px;
  border-radius:10px;
  border:1px solid rgba(255,212,0,.28);
  background: rgba(255,212,0,.10);
  color: rgba(255,238,151,.96);
  font-size:.78rem;
  font-weight:800;
  line-height:1;
  text-align:center;
  white-space:nowrap;
}

.page-app .scoreStack{
  display:flex;
  flex:none;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
}

.page-app .penaltyBadge{
  border-color: rgba(255,91,91,.34);
  background: rgba(255,69,69,.13);
  color: rgba(255,205,205,.96);
}

.page-app .btnGroup{
  display:flex;
  gap:8px;
  flex:none;
  align-items:center;
}

.page-app .action{
  flex:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border: var(--border);
  background: rgba(0,0,0,.20);
  color: var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
  font-size:1.1rem;
}

.page-app .action:hover{ filter: brightness(1.1); }
.page-app .action:active{ transform: scale(.96); }

.page-app .action.check{
  background: linear-gradient(135deg, rgba(77,255,136,.25), rgba(61,242,255,.18));
  box-shadow: 0 0 14px rgba(77,255,136,.12);
}

.page-app .action.delete{
  background: linear-gradient(135deg, rgba(255,79,216,.22), rgba(124,92,255,.14));
  box-shadow: 0 0 14px rgba(255,79,216,.10);
  cursor:pointer;
}

.page-app .action.compactDelete{
  width:34px;
  height:28px;
  border-radius:10px;
  font-size:.78rem;
  font-weight:800;
  line-height:1;
}

.page-app .empty{
  color:var(--muted);
  padding:14px 10px;
  text-align:center;
  border: var(--border);
  border-radius:14px;
  background: rgba(255,255,255,.02);
}

.page-app .empty a{
  color: rgba(61,242,255,.90);
  text-decoration:none;
  font-weight:900;
}

.page-app .empty a:hover{
  text-decoration:underline;
  color: rgba(61,242,255,1);
}

.page-app .legal{
  margin-top:10px;
  text-align:center;
}

.page-app .legalLink{
  font-size:.85rem;
  color: rgba(234,241,255,.45);
  text-decoration:none;
}

.page-app .legalLink:hover{
  color: rgba(234,241,255,.75);
  text-decoration:underline;
}

.page-app .fabBar{
  position:fixed;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  display:flex;
  align-items:flex-end;
  gap:10px;
  z-index:6;
  padding:0 10px;
}

.page-app .fabMini{
  width:50px;
  height:50px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(8,14,26,.78);
  color:var(--text);
  border-radius:18px;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 22px rgba(0,0,0,.38);
  transition: transform .12s ease, filter .12s ease, box-shadow .16s ease;
  will-change: transform;
  transform: translateY(10px);
  text-decoration:none;
  position:relative;
}

.page-app .fabBadge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--yellow);
  color:#07101f;
  border:1px solid rgba(11,15,26,.28);
  box-shadow: 0 8px 16px rgba(0,0,0,.32);
  font-size:.75rem;
  font-weight:1000;
  line-height:1;
}

.page-app .fabMini:hover{
  filter: brightness(1.06);
  transform: translateY(8px);
  box-shadow: 0 12px 26px rgba(0,0,0,.42);
}

.page-app .fabMini:active{
  transform: translateY(11px) scale(.99);
}

.page-app .fabMini.active{
  border-color: rgba(255,212,0,.30);
  box-shadow: 0 12px 26px rgba(0,0,0,.42), 0 0 18px rgba(255,212,0,.14);
}

.page-app .fabMini.active::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:18px;
  pointer-events:none;
  opacity:.65;
  background: radial-gradient(140px 80px at 50% 20%, rgba(255,212,0,.20), transparent 60%);
}

.page-app .fabMiniIcon{
  width:22px;
  height:22px;
  display:inline-block;
}

.page-app .overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:16px;
  z-index:10;
}

.page-app .overlay.open{ display:flex; }

.page-app .sheet{
  width:100%;
  max-width:560px;
  border-radius:22px;
  border: var(--border);
  background: linear-gradient(180deg, rgba(18,26,43,.98), rgba(15,22,38,.98));
  box-shadow: 0 24px 55px rgba(0,0,0,.55);
  padding:14px;
  margin-bottom: env(safe-area-inset-bottom, 0);
}

.page-app .sheetTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.page-app .sheetTitle{
  margin:0;
  font-weight:900;
  letter-spacing:.2px;
}

.page-app .close{
  background: rgba(255,255,255,.06);
  border: var(--border);
  color: var(--text);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;
}

.page-app .field,
.page-app .select{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
}

.page-app .field{
  padding:14px;
  font-size:1.05rem;
}

.page-app .select{
  flex:1;
  min-width:160px;
  padding:12px;
  font-size:1rem;
}

.page-app .field:focus,
.page-app .select:focus{
  border-color: rgba(61,242,255,.55);
  box-shadow: 0 0 0 3px rgba(61,242,255,.12);
}

.page-app .row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  flex-wrap:wrap;
}

.page-app .seg{
  gap:10px;
  width:100%;
  margin-top:10px;
}

.page-app .segBtn{
  flex:1;
  padding:12px;
  border-radius:16px;
  font-weight:900;
  letter-spacing:.2px;
}

.page-app .sheetActions{
  display:flex;
  gap:10px;
  margin-top:10px;
}

.page-app .primary{
  flex:1;
  padding:14px;
  border-radius:16px;
  border:none;
  cursor:pointer;
  font-weight:1000;
  letter-spacing:.8px;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  background: var(--yellow);
  color:#0b0f1a !important;
  -webkit-text-fill-color:#0b0f1a !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.45),
    0 0 26px rgba(255,212,0,.18);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s ease, filter .12s ease, box-shadow .16s ease;
  will-change: transform;
  forced-color-adjust:none;
  color-scheme:light;
}

.page-app .primary:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    0 16px 34px rgba(0,0,0,.50),
    0 0 34px rgba(255,212,0,.22);
}

.page-app .primary:active{
  transform: translateY(1px) scale(.99);
  box-shadow:
    0 10px 20px rgba(0,0,0,.42),
    0 0 20px rgba(255,212,0,.16);
}

.page-app .secondary{
  padding:14px;
  border-radius:16px;
  border: var(--border);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
}

.page-app .toast{
  position:fixed;
  left:50%;
  bottom:122px;
  transform: translateX(-50%);
  padding:10px 12px;
  border-radius:14px;
  border: var(--border);
  background: rgba(15,22,38,.92);
  color: var(--text);
  box-shadow: 0 14px 34px rgba(0,0,0,.38);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  z-index:9;
  font-size:.95rem;
}

.page-app .toast.show{
  opacity:1;
  transform: translateX(-50%) translateY(-6px);
}

.page-help .app,
.page-imprint .app{
  padding:18px 16px 24px;
}

.page-help .card,
.page-imprint .card{
  padding:14px;
}

.page-help h1,
.page-imprint h1{
  margin:0 0 10px;
  font-size:1.25rem;
  letter-spacing:.2px;
}

.page-help h2{
  margin:18px 0 8px;
  font-size:1.05rem;
}

.page-imprint h2{
  margin:16px 0 8px;
  font-size:1.05rem;
}

.page-help p,
.page-help li{
  color:rgba(234,241,255,.82);
  line-height:1.35;
}

.page-imprint p{
  color:rgba(234,241,255,.82);
  line-height:1.35;
  margin:6px 0;
}

.page-help .callout{
  margin-top:10px;
  padding:12px;
  border-radius:14px;
  color: rgba(234,241,255,.86);
}

.page-help .settingsGrid{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
}

.page-help .settingRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:12px;
  border-radius:14px;
}

.page-help .settingLabel{
  font-weight:900;
  letter-spacing:.2px;
  color: rgba(234,241,255,.92);
}

.page-help .settingHint{
  width:100%;
  color: rgba(234,241,255,.68);
  font-size:.9rem;
  margin-top:4px;
  line-height:1.25;
}

.page-help .segBtn{
  padding:10px 12px;
  font-weight:900;
}

.page-help select.segBtn{
  appearance:none;
  -webkit-appearance:none;
  padding-right:34px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(234,241,255,.75) 50%),
    linear-gradient(135deg, rgba(234,241,255,.75) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

.page-help .dangerBtn{
  padding:10px 12px;
  background: rgba(255,79,216,.14);
  font-weight:900;
}

.page-help .btnRow{ margin-top:16px; }

.page-help .toast{
  margin-top:10px;
  display:none;
  padding:10px 12px;
  border-radius:14px;
  color: rgba(234,241,255,.86);
}

.page-help .toast.show{ display:block; }

.page-imprint .block{
  padding:10px 12px;
  border-radius:14px;
  color: rgba(234,241,255,.86);
  white-space:pre-line;
}

.page-imprint .emailRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}

.page-imprint .emailText{
  padding:10px 12px;
  border-radius:14px;
  color: rgba(234,241,255,.92);
  user-select:text;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:.95rem;
}

.page-imprint .copyBtn{
  padding:10px 12px;
  font-weight:800;
  white-space:nowrap;
  will-change: transform;
}

.page-imprint .toast{
  margin-top:10px;
  display:none;
  padding:10px 12px;
  border-radius:14px;
  color: rgba(234,241,255,.86);
}

.page-imprint .toast.show{ display:block; }

.page-imprint .btnRow{ margin-top:14px; }

@media (prefers-reduced-motion: reduce){
  .btn,
  .btnPrimary,
  .btnPrimary::after,
  .segBtn,
  .dangerBtn,
  .copyBtn,
  .page-app .fabMini,
  .page-app .primary{
    transition:none !important;
    animation:none !important;
  }

  .page-app .primary::after{
    display:none !important;
  }
}

/* Beta: one mobile view, three tablet columns, five wide desktop columns. */
.page-app .sideColumns { display:contents; }
.page-app .notesColumn, .page-app .calendarColumn, .page-app .placeholderColumn, .page-app .listColumn { display:none; min-width:0; }
.page-app .notesColumn.is-active, .page-app .calendarColumn.is-active, .page-app .placeholderColumn.is-active, .page-app .listColumn.is-active { display:block; }
.page-app .columnHeader { display:none; }
.page-app .placeholderContent { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:220px; border:1px dashed rgba(234,241,255,.18); border-radius:14px; background:rgba(255,255,255,.025); color:var(--muted); }
.page-app .placeholderIcon { width:36px; height:36px; opacity:.55; }
.page-app .placeholderContent p { margin:14px 0 0; font-size:.9rem; }
@media (max-width:767px){
  html.page-app-root { height:100%; overflow:hidden; }
  html.page-app-root body.page-app { height:100%; min-height:0; overflow:hidden; position:relative; }
  @supports (height:100dvh){
    html.page-app-root,
    html.page-app-root body.page-app { height:100dvh; }
  }
  .page-app .app { height:100%; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:none; -webkit-overflow-scrolling:touch; padding-bottom:128px; }
  .page-app .list { margin-top:0; padding:0; border:0; background:none; box-shadow:none; backdrop-filter:none; }
  .page-app .taskListContent { position:relative; margin-top:14px; padding:14px; }
  .page-app .app:not([data-active-view="todo"]) .taskListContent { display:none; }
  .page-app .sideColumnsRight .listColumn.is-active {
    margin-top:14px;
    padding:14px;
    border:var(--border);
    border-radius:var(--radius);
    background:linear-gradient(180deg,rgba(18,26,43,.92),rgba(15,22,38,.92));
    box-shadow:var(--shadow);
    backdrop-filter:blur(8px);
  }
  .page-app .fabBar { position:absolute; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:50px; left:max(16px,calc((100% - 420px)/2)); right:max(16px,calc((100% - 420px)/2)); width:auto; gap:8px; padding:0; justify-items:center; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); transform:translateY(var(--mobile-dock-shift, 0px)); backface-visibility:visible; will-change:auto; }
  .page-app .fabBar .fabMini { width:100%; max-width:56px; transform:none; }
  .page-app .fabBar .fabMini:hover,
  .page-app .fabBar .fabMini:active { transform:none; }
  @supports (height:100dvh){
    .page-app .fabBar { top:calc(100dvh - 58px - env(safe-area-inset-bottom, 0px)); bottom:auto; }
  }
  .page-app .viewTab { grid-row:1; }
  .page-app #tabCalendar { grid-column:1; }
  .page-app #tabNotes { grid-column:2; }
  .page-app #tabTodo { grid-column:3; }
  .page-app #tabDaily { grid-column:4; }
  .page-app #tabShopping { grid-column:5; }
  .page-app #btnHelp { grid-row:1; grid-column:6; }
  .page-app .taskListContent > .listHeader { display:none; }
  .page-app .listColumn.is-active .columnHeader { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; margin-bottom:12px; }
  .page-app .listColumn .columnHeader .title { flex:1 1 120px; overflow-wrap:anywhere; }
  .page-app .listColumn .columnActions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
  .page-app .listColumn .columnAdd { min-width:40px; min-height:40px; font-size:1.4rem; }
}

@media (min-width:768px){
  .page-app .app { --column-count:3; --column-gap:24px; width:90%; max-width:none; padding-left:0; padding-right:0; }
  .page-app .list { margin-top:0; }
  .page-app .centerColumn { grid-column:2; min-width:0; }
  .page-app .hero { width:100%; margin-inline:auto; }
  .page-app .taskListContent { margin-top:14px; border:0; border-radius:0; background:none; box-shadow:none; backdrop-filter:none; }
  .page-app .completionPanel, .page-app .debugPanel { max-width:560px; margin-inline:auto; }
  .page-app .listColumns { display:grid; grid-template-columns:repeat(var(--column-count),minmax(0,1fr)); gap:var(--column-gap); align-items:start; }
  .page-app .sideColumns { display:flex; flex-direction:column; gap:24px; min-width:0; }
  .page-app .notesColumn, .page-app .calendarColumn, .page-app .listColumn, .page-app .placeholderColumn { display:block; position:relative; }
  .page-app .sideColumnsLeft { grid-column:1; }
  .page-app .sideColumnsRight { grid-column:3; }
  .page-app .sideColumns > section + section { padding-top:12px; border-top:var(--border); }
  .page-app .columnHeader { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; min-height:76px; margin-bottom:12px; }
  .page-app .columnHeader .title { flex:1 1 120px; overflow-wrap:anywhere; }
  .page-app .columnActions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
  .page-app .columnAdd { font-size:1.4rem; min-width:40px; min-height:40px; }
  .page-app .taskListContent > .listHeader { display:none; }
  .page-app .fabBar .viewTab { display:none; }
}

@media (min-width:1440px){
  .page-app .app { --column-count:5; }
  .page-app .listColumns { align-items:stretch; }
  .page-app .sideColumns { display:contents; }
  .page-app .centerColumn { grid-column:3; position:relative; }
  .page-app .sideColumns > section + section { padding-top:0; border-top:0; }
  .page-app .centerColumn::before, .page-app .sideColumnsRight .listColumn::before, .page-app [data-view="notes"]::before { content:""; position:absolute; top:0; bottom:0; left:-12px; border-left:var(--border); }
}

/* Zumo-One month and day views. */
.page-app .calendarColumn .calendarShell{
  position:relative;
  z-index:1;
  width:100%;
}

.page-app .calendarColumn .calendarHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.page-app .calendarColumn .calendarHeaderCenter{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  flex:1;
}

.page-app .calendarColumn .calendarMonthLabel{
  font-size:1.1rem;
  font-weight:900;
  letter-spacing:.3px;
}

.page-app .calendarColumn .calendarYearSelect,
.page-app .calendarColumn .calNavBtn{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.18);
  color:var(--text);
  border-radius:14px;
}

.page-app .calendarColumn .calendarYearSelect{
  padding:10px 12px;
  font-weight:800;
}

.page-app .calendarColumn .calNavBtn{
  width:42px;
  height:42px;
  font-size:1.5rem;
  cursor:pointer;
}

.page-app .calendarColumn .calendarWeekdays,
.page-app .calendarColumn .calendarGrid{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:8px;
}

.page-app .calendarColumn .calendarWeekdays{
  margin-bottom:8px;
}

.page-app .calendarColumn .calendarWeekday{
  text-align:center;
  color:rgba(234,241,255,.60);
  font-size:.82rem;
  font-weight:800;
}

.page-app .calendarColumn .calendarDay{
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease, box-shadow .16s ease;
}

.page-app .calendarColumn .calendarDay:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
}

.page-app .calendarColumn .calendarDay.active{
  background:linear-gradient(135deg, rgba(255,212,0,.34), rgba(61,242,255,.20));
  color:#07101f;
  box-shadow:0 10px 20px rgba(0,0,0,.28);
}

.page-app .calendarColumn .calendarDay.today{
  border-color:rgba(61,242,255,.55);
}

.page-app .calendarColumn .calendarDay.hasEvent{
  box-shadow: inset 0 -3px 0 rgba(255,212,0,.95);
}

.page-app .calendarColumn .calendarDay.mutedDay{
  background:transparent;
  border-color:transparent;
  pointer-events:none;
}

.page-app .calendarColumn .allDaySection{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.page-app .calendarColumn .allDayHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.page-app .calendarColumn .allDayHeading{
  margin:0;
  font-size:1rem;
  font-weight:900;
}

.page-app .calendarColumn .allDayControls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.page-app .calendarColumn .allDayInput{
  flex:2 1 220px;
}

.page-app .calendarColumn .allDayRepeat{
  flex:1 1 150px;
}

.page-app .calendarColumn .timeGrid{
  gap:8px;
}

.page-app .calendarColumn .timeRow{
  display:grid;
  grid-template-columns:72px minmax(0, 1fr);
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.page-app .calendarColumn .timeLabel{
  color:rgba(234,241,255,.72);
  font-size:.88rem;
  font-weight:800;
}

.page-app .calendarColumn .timeInput{
  width:100%;
  border:none;
  outline:none;
  border-radius:12px;
  background:rgba(0,0,0,.18);
  color:var(--text);
  padding:12px 14px;
  font-size:.96rem;
}

.page-app .calendarColumn .timeInput:focus{
  box-shadow:0 0 0 2px rgba(61,242,255,.16);
}


.page-app .calendarColumn .calendarHeader { gap:4px; }
.page-app .calendarColumn .calendarHeaderCenter { gap:4px; min-width:0; }
.page-app .calendarColumn .calendarMonthLabel { font-size:1rem; overflow-wrap:anywhere; }
.page-app .calendarColumn .calendarYearSelect { padding:6px; max-width:100%; }
.page-app .calendarColumn .calNavBtn { width:30px; min-height:36px; flex-shrink:0; }
.page-app .calendarColumn .calendarWeekdays,
.page-app .calendarColumn .calendarGrid { gap:3px; }
.page-app .calendarColumn .calendarWeekdays { text-align:center; font-size:.7rem; color:var(--muted); }
.page-app .calendarColumn .calendarDay { min-width:0; min-height:32px; padding:2px; border-radius:8px; }
.page-app .calendarColumn .calendarDay.active { color:var(--text); border-color:var(--yellow); }
.page-app .calendarColumn .calendarDayView { margin-top:22px; }
.page-app .calendarColumn .calendarSelectedDate { margin:6px 0; font-weight:700; }
.page-app .calendarColumn .allDaySection { margin-top:14px; padding:10px; }
.page-app .calendarColumn .field,
.page-app .calendarColumn .select { width:100%; min-width:0; margin:0; padding:10px 8px; }
.page-app .calendarColumn .calendarInterval { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:14px 0 10px; font-size:.85rem; }
.page-app .calendarColumn .calendarInterval .select { width:auto; flex:1; }
.page-app .calendarColumn .timeGrid { display:grid; max-height:520px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:rgba(234,241,255,.3) transparent; }
.page-app .calendarColumn .timeRow { grid-template-columns:40px minmax(0,1fr); gap:6px; padding:5px; border-radius:10px; }
.page-app .calendarColumn .timeLabel { font-size:.75rem; }
.page-app .calendarColumn .timeInput { min-width:0; padding:10px 6px; font:inherit; font-size:.88rem; }
.page-app .calendarColumn button:focus-visible,
.page-app .calendarColumn input:focus-visible,
.page-app .calendarColumn select:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
@media (max-width:767px){
  .page-app .calendarColumn { padding:14px; border:var(--border); border-radius:var(--radius); background:linear-gradient(180deg,rgba(18,26,43,.92),rgba(15,22,38,.92)); }
  .page-app .calendarColumn .columnHeader { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
  .page-app .calendarColumn .calendarDay { min-height:40px; }
  .page-app .app[data-active-view="calendar"] .hero,
  .page-app .app[data-active-view="calendar"] .completionPanel,
  .page-app .app[data-active-view="calendar"] .debugPanel,
  .page-app .app[data-active-view="calendar"] .listHeader > :first-child { display:none; }
}

/* Expandable note editors inside the shared column layout. */
.page-app .notesHint { margin:0 0 14px; }
.page-app .notesAdd { min-width:40px; min-height:40px; font-size:1.4rem; }
.page-app .notesItems { display:grid; gap:12px; }
.page-app .noteItem { min-width:0; border:var(--border); border-radius:14px; background:rgba(255,255,255,.03); overflow:hidden; }
.page-app .noteItem.expanded { border-color:rgba(61,242,255,.3); }
.page-app .noteHeader { display:flex; align-items:flex-start; gap:6px; padding:10px; }
.page-app .noteToggle { flex:1; min-width:0; border:0; background:none; color:var(--text); text-align:left; cursor:pointer; font:inherit; padding:4px 0; }
.page-app .noteTitle, .page-app .notePreview { display:block; overflow-wrap:anywhere; white-space:pre-wrap; }
.page-app .noteTitle { font-size:1rem; }
.page-app .notePreview { color:var(--muted); font-size:.85rem; margin-top:6px; }
.page-app .noteEditorWrap { padding:0 10px 12px; }
.page-app .noteEditorWrap[hidden] { display:none; }
.page-app .noteTitleLabel { display:block; color:var(--muted); font-size:.8rem; }
.page-app .notesColumn .field { width:100%; min-width:0; padding:10px; margin:6px 0 10px; font:inherit; font-size:.9rem; }
.page-app .notesColumn .noteEditor { display:block; min-height:180px; resize:vertical; line-height:1.5; }
.page-app .voiceBtn { width:100%; padding:10px; border:var(--border); border-radius:12px; background:rgba(0,0,0,.18); color:var(--text); cursor:pointer; font:inherit; font-size:.8rem; }
.page-app .voiceBtn.listening { border-color:var(--pink); color:var(--pink); }
.page-app .notesColumn button:focus-visible, .page-app .notesColumn input:focus-visible, .page-app .notesColumn textarea:focus-visible { outline:2px solid var(--cyan); outline-offset:-2px; }
.page-app .noteDialog { width:min(500px,calc(100% - 32px)); max-height:calc(100dvh - 32px); padding:0; border:var(--border); border-radius:var(--radius); background:var(--panel); color:var(--text); }
.page-app .noteDialog::backdrop { background:rgba(0,0,0,.65); backdrop-filter:blur(4px); }
.page-app .noteDialog .sheet { width:100%; margin:0; border:0; border-radius:0; max-height:none; }
.page-app .noteDialogLabel { display:block; margin-top:18px; font-size:.9rem; }
.page-app .noteDialogLabel .field { width:100%; margin-top:8px; }
@media (max-width:767px){
  .page-app .notesColumn { padding:14px; border:var(--border); border-radius:var(--radius); background:linear-gradient(180deg,rgba(18,26,43,.92),rgba(15,22,38,.92)); }
  .page-app .notesColumn .columnHeader { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
  .page-app .app[data-active-view="notes"] .hero,
  .page-app .app[data-active-view="notes"] .completionPanel,
  .page-app .app[data-active-view="notes"] .debugPanel,
  .page-app .app[data-active-view="notes"] .listHeader > :first-child { display:none; }
}

.page-app #tabNotesCount[hidden] { display:none; }