/* ─── APP SHELL ─── */
#app-view{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
@keyframes appIn{from{opacity:0}to{opacity:1}}

/* ─── BOOT ENTRANCE ANIMATIONS ─── */
@keyframes hdrTitleIn{
  from{opacity:0;transform:translateY(-22px)}
  to{opacity:1;transform:none}
}
@keyframes hdrBtnsIn{
  from{opacity:0;transform:translateX(16px)}
  to{opacity:1;transform:none}
}
@keyframes tabBounceIn{
  from{opacity:0;transform:translateY(10px) scale(.88)}
  to{opacity:1;transform:none}
}
@keyframes riseIn{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}
@keyframes navBounceIn{
  from{opacity:0;transform:translateY(40px) scale(.84)}
  to{opacity:1;transform:none}
}
@keyframes seclblIn{
  from{opacity:0;transform:translateX(-12px)}
  to{opacity:1;transform:none}
}

/* ─── VIEW TRANSITIONS ─── */
.view{width:100%}
.view.v-hidden{display:none}
@keyframes slideFromRight{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes slideFromLeft{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.anim-r{animation:slideFromRight .26s cubic-bezier(0.4,0,0.2,1) both}
.anim-l{animation:slideFromLeft .26s cubic-bezier(0.4,0,0.2,1) both}

/* ─── BOTTOM NAV ─── */
#bottom-nav{
  position:fixed;
  bottom:calc(18px + env(safe-area-inset-bottom));
  left:50%;transform:translateX(-50%);
  z-index:1000;
}
.bn-pill{
  display:flex;align-items:center;gap:3px;padding:6px;
  border-radius:100px;
  background:rgba(245,244,242,.55);
  backdrop-filter:blur(48px) saturate(220%) brightness(1.08);
  -webkit-backdrop-filter:blur(48px) saturate(220%) brightness(1.08);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 8px 36px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.09),
             inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.04);
}
.bn-btn{
  width:48px;height:48px;border-radius:100px;
  border:none;background:none;color:var(--t2);
  display:flex;align-items:center;justify-content:center;
  touch-action:manipulation;user-select:none;-webkit-user-select:none;
  transition:background .18s,color .18s,transform .22s cubic-bezier(0.34,1.56,0.64,1);
}
.bn-btn svg{width:22px;height:22px;flex-shrink:0}
.bn-btn.active{background:var(--t1);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12)}
.bn-btn:active{transform:scale(0.86)}

/* ─── HEADER ─── */
.hdr{
  max-width:680px;margin:0 auto;
  padding:calc(20px + env(safe-area-inset-top)) 22px 0;
  display:flex;align-items:flex-start;justify-content:space-between;
}
.hdr-date{font-size:12px;color:var(--t2);font-weight:500;margin-bottom:3px;letter-spacing:.02em}
.hdr-title{font-size:18px;font-weight:600;letter-spacing:-.2px;line-height:1.2;color:var(--t2);user-select:none;-webkit-user-select:none}
.hdr-r{display:flex;gap:2px;padding-top:6px}
.hbtn{
  position:relative;
  width:36px;height:36px;border:none;background:none;border-radius:var(--rs);
  color:var(--t2);display:flex;align-items:center;justify-content:center;touch-action:manipulation;
  transition:background .14s,color .14s,transform .2s cubic-bezier(0.34,1.5,0.64,1);
}
@media(hover:hover){.hbtn:hover{background:var(--hov);color:var(--t1)}}
.hbtn:active{transform:scale(0.82)}
.hbtn.on{color:var(--blue);background:var(--blue-bg)}
.notify-dot{
  position:absolute;top:7px;right:7px;
  width:8px;height:8px;border-radius:50%;
  background:var(--red);border:2px solid var(--sur);
}
/* ─── NOTIFICATION PANEL (Apple-style floating) ─── */
@keyframes npDrop{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
.notification-panel{
  position:fixed;
  top:calc(env(safe-area-inset-top) + 60px);
  right:14px;
  width:308px;
  max-width:calc(100vw - 20px);
  max-height:min(400px,calc(100dvh - env(safe-area-inset-top) - 96px));
  z-index:350;
  display:flex;flex-direction:column;
  background:rgba(252,251,250,.97);
  backdrop-filter:blur(40px) saturate(200%) brightness(1.04);
  -webkit-backdrop-filter:blur(40px) saturate(200%) brightness(1.04);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  box-shadow:0 18px 52px rgba(0,0,0,.15),0 4px 12px rgba(0,0,0,.07),
             inset 0 1px 0 rgba(255,255,255,.9);
  overflow:hidden;
  animation:npDrop .22s cubic-bezier(0.34,1.12,0.64,1) both;
}
.notification-panel.hidden{display:none}
.np-head{
  flex-shrink:0;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:13px 16px 11px;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.np-head div{display:flex;flex-direction:column;gap:1px;min-width:0}
.np-head strong{font-size:13px;font-weight:800;color:var(--t1);letter-spacing:-.1px}
.np-head > div > span{font-size:10px;font-weight:600;color:var(--t3)}
.np-head button{
  flex-shrink:0;border:none;background:none;font-family:inherit;cursor:pointer;
  color:var(--blue);padding:4px 0;
  font-size:11px;font-weight:700;touch-action:manipulation;
}
.np-list{
  flex:1;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;min-height:0;
}
.np-item{
  display:flex;align-items:flex-start;gap:9px;
  padding:10px 14px;border:none;
  border-bottom:1px solid rgba(0,0,0,.05);
  background:transparent;width:100%;text-align:left;
  cursor:pointer;touch-action:manipulation;
  transition:background .1s;font-family:inherit;
}
.np-item:last-child{border-bottom:none}
@media(hover:hover){.np-item:hover{background:rgba(0,0,0,.03)}}
.np-item:active{background:rgba(0,0,0,.05)}
.np-item.unread{background:rgba(35,131,226,.05)}
.np-mark{
  width:7px;height:7px;border-radius:50%;background:transparent;
  flex-shrink:0;margin-top:4px;
}
.np-item.unread .np-mark{background:var(--blue)}
.np-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.np-copy strong{font-size:12.5px;font-weight:700;color:var(--t1);line-height:1.35}
.np-copy span{font-size:11.5px;font-weight:500;color:var(--t2);line-height:1.4}
.np-copy time{font-size:10px;color:var(--t3);margin-top:1px}
.np-empty{padding:24px 16px;text-align:center;color:var(--t3);font-size:12px;font-weight:600}

/* ─── TABS ─── */
.tabs{
  max-width:680px;margin:0 auto;
  padding:14px 22px 0;display:flex;gap:4px;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:7px 15px;border-radius:100px;font-size:13px;font-weight:500;
  cursor:pointer;border:none;background:none;color:var(--t2);touch-action:manipulation;
  transition:background .16s,color .16s,transform .2s cubic-bezier(0.34,1.5,0.64,1);
  display:flex;align-items:center;gap:5px;line-height:1;
  white-space:nowrap;flex-shrink:0;user-select:none;-webkit-user-select:none;
}
.tab.active{background:var(--t1);color:#fff}
@media(hover:hover){.tab:not(.active):hover{background:var(--hov);color:var(--t1)}}
.tab:active{transform:scale(0.93)}
.tab-cnt{font-size:11px;font-weight:700;min-width:16px;height:16px;line-height:16px;text-align:center;border-radius:100px;padding:0 4px}
.tab.active .tab-cnt{background:rgba(255,255,255,.2);color:#fff}
.tab:not(.active) .tab-cnt{background:var(--bor);color:var(--t2)}
.trash-clear{
  padding:7px 14px;border-radius:100px;font-size:13px;font-weight:700;
  cursor:pointer;border:none;background:var(--red);color:#fff;touch-action:manipulation;
  transition:opacity .16s,transform .2s cubic-bezier(0.34,1.5,0.64,1);
  white-space:nowrap;flex-shrink:0;line-height:1;
}
@media(hover:hover){.trash-clear:hover{opacity:.82}}
.trash-clear:active{transform:scale(.93)}

/* ─── ADD TRIGGER ─── */
.add-wrap{max-width:680px;margin:14px auto 8px;padding:0 14px}
.add-trig{
  display:flex;align-items:center;gap:10px;padding:13px 16px;
  border:1.5px dashed var(--bor);border-radius:var(--r);
  cursor:pointer;color:var(--t2);font-size:14px;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transition:border-color .15s,color .15s,background .15s,transform .2s cubic-bezier(0.34,1.5,0.64,1);
}
.add-trig span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
#quick-add-input{
  flex:1;min-width:0;background:transparent;border:none;outline:none;
  color:inherit;font:inherit;font-size:14px;
  padding:0;cursor:text;
}
#quick-add-input::placeholder{color:var(--t2);opacity:1}
#quick-add-input:disabled{opacity:.5}
.add-plus{cursor:pointer;border:none;padding:0}
@media(hover:hover){
  .add-trig:hover{border-color:var(--t1);color:var(--t1);background:var(--hov)}
  .add-trig:hover .add-plus{background:var(--t1);color:#fff}
}
.add-trig:active{transform:scale(0.984)}
.add-plus{
  width:22px;height:22px;border-radius:50%;background:var(--bor);color:var(--t2);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:300;line-height:1;flex-shrink:0;
  transition:background .15s,color .15s;
}