:root{
  font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;
  color:#f4f8ff;--accent:#8fe7ff;--night:#071b45;
}
*{box-sizing:border-box}
body{
  margin:0;min-height:100vh;overflow:hidden;
  background:
    radial-gradient(circle at 48% -8%,rgba(77,191,255,.4),transparent 34%),
    radial-gradient(circle at 92% 86%,rgba(128,91,210,.22),transparent 31%),
    linear-gradient(155deg,#061632 0%,#0b3470 48%,#166798 100%);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.18;mix-blend-mode:screen;
  background-image:radial-gradient(rgba(255,255,255,.7) .55px,transparent .8px);
  background-size:5px 5px;
}
button,input,textarea{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
.app{
  width:min(100%,520px);height:100dvh;margin:auto;padding:26px 22px 18px;
  display:grid;grid-template-rows:auto auto 1fr auto;gap:17px;position:relative;
}
header{display:flex;justify-content:space-between;align-items:center;padding:0 3px}
header small{display:block;color:rgba(220,238,255,.58);letter-spacing:.3em;font-size:9px}
h1{font:400 26px Georgia,"Songti SC",serif;letter-spacing:.2em;margin:4px 0 0;text-shadow:0 0 24px rgba(166,224,255,.3)}
.round,.plus{
  width:41px;height:41px;border:1px solid rgba(224,244,255,.25);border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(255,255,255,.05));
  color:rgba(237,249,255,.8);box-shadow:inset 0 1px rgba(255,255,255,.18),0 10px 28px rgba(1,12,37,.16);
  backdrop-filter:blur(12px);cursor:pointer;
}
nav{display:flex;gap:10px;position:relative;z-index:12}
#habits{display:flex;gap:8px;overflow:auto;flex:1;scrollbar-width:none}
#habits::-webkit-scrollbar{display:none}
.pill{
  height:40px;white-space:nowrap;padding:0 15px;border:1px solid rgba(221,243,255,.18);border-radius:22px;
  background:rgba(210,235,255,.07);color:rgba(225,241,255,.58);backdrop-filter:blur(9px);cursor:pointer;transition:.3s ease;
}
.pill:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--c);margin-right:8px;box-shadow:0 0 12px var(--c)}
.pill.active{
  color:#f5fbff;background:rgba(226,244,255,.18);border-color:rgba(238,249,255,.42);
  box-shadow:inset 0 1px rgba(255,255,255,.22),0 9px 25px rgba(1,14,45,.2),0 0 19px color-mix(in srgb,var(--c) 22%,transparent);
  transform:translateY(-1px);
}
#sky{
  position:relative;overflow:hidden;border-radius:42px;padding:28px 18px 20px;isolation:isolate;
  background:
    linear-gradient(180deg,rgba(69,157,218,.13),rgba(8,29,73,.2)),
    radial-gradient(circle at 50% 35%,rgba(130,219,255,.11),transparent 48%);
  border:1px solid rgba(215,241,255,.2);
  box-shadow:inset 0 1px rgba(255,255,255,.18),inset 0 -40px 80px rgba(4,15,47,.2),0 28px 75px rgba(1,10,34,.27);
  backdrop-filter:blur(5px);
}
#sky:before{
  content:"";position:absolute;inset:-30%;z-index:-2;opacity:.62;
  background:
    radial-gradient(ellipse at 47% 48%,rgba(74,192,255,.19),transparent 35%),
    conic-gradient(from 170deg at 50% 48%,transparent,rgba(124,214,255,.07),transparent 20%,rgba(202,170,255,.07),transparent 43%);
  animation:skyBreath 14s ease-in-out infinite alternate;
}
#sky:after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:-17%;height:38%;z-index:-1;
  background:radial-gradient(ellipse at 50% 0%,rgba(104,199,213,.18),transparent 60%),linear-gradient(180deg,transparent,rgba(3,13,39,.3));
  filter:blur(8px);
}
.glow{position:absolute;border-radius:50%;filter:blur(22px);opacity:.3;pointer-events:none;animation:aurora 12s ease-in-out infinite alternate}
.g1{width:230px;height:230px;background:#5fd1ff;right:-100px;top:-95px}
.g2{width:190px;height:190px;background:#9577e6;left:-90px;bottom:-75px;animation-delay:-5s}
.star-field{position:absolute;z-index:1;inset:0;pointer-events:none}
.star{
  position:absolute;width:var(--s);height:var(--s);border-radius:50%;
  background:rgba(239,250,255,.95);box-shadow:0 0 5px #fff,0 0 13px rgba(130,222,255,.8);
  opacity:.18;animation:twinkle var(--t) ease-in-out var(--d) infinite;
}
.star.cross:before,.star.cross:after{content:"";position:absolute;left:50%;top:50%;background:rgba(242,251,255,.75);transform:translate(-50%,-50%)}
.star.cross:before{width:1px;height:12px}.star.cross:after{height:1px;width:12px}
.page-head{position:relative;z-index:3;text-align:center;height:86px}
.page-head span{display:block;font:400 19px Georgia,"Songti SC",serif;letter-spacing:.1em;color:rgba(242,250,255,.92);text-shadow:0 0 22px rgba(130,218,255,.26)}
.page-head strong{display:block;margin:8px 0 5px;color:rgba(211,235,255,.5);font-size:10px;letter-spacing:.26em;font-weight:400}
.page-head i{font-style:normal;font-size:9px;color:rgba(213,237,255,.36);letter-spacing:.1em}
.calendar{
  position:relative;z-index:2;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,1fr);
  height:calc(100% - 88px);min-height:330px;align-items:center;justify-items:center;
}
.day-cell{position:relative;width:48px;height:48px;display:grid;place-items:center}
.day-cell.blank{pointer-events:none}
.day-number{
  position:absolute;width:42px;height:42px;border:1px solid transparent;border-radius:50%;background:transparent;
  color:rgba(220,239,255,.22);font:400 16px Georgia,serif;cursor:pointer;transition:.3s ease;
}
.day-number:hover:not(:disabled){color:rgba(239,249,255,.65);background:rgba(210,240,255,.06)}
.day-cell.future .day-number{opacity:.25;cursor:default}
.day-cell.today:not(.done) .day-number{color:rgba(231,245,255,.68);text-shadow:0 0 12px rgba(142,217,255,.45)}
.day-cell.today:not(.done) .day-number:after{
  content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:#c9efff;bottom:5px;left:50%;box-shadow:0 0 8px #8bdeff;
}
.day-cell.done .day-number{
  opacity:1;color:rgba(245,251,255,.94);font-weight:700;
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.28),color-mix(in srgb,var(--accent) 28%,rgba(61,119,170,.2)));
  border-color:color-mix(in srgb,var(--accent) 55%,rgba(255,255,255,.36));
  box-shadow:inset 0 0 13px rgba(255,255,255,.13),0 0 16px color-mix(in srgb,var(--accent) 42%,transparent);
}
.day-cell.done .day-number:after{
  content:"";position:absolute;width:5px;height:5px;left:50%;bottom:2px;transform:translateX(-50%);border-radius:50%;
  background:#e8faff;box-shadow:0 0 9px var(--accent);
}
.floating-bubbles{position:absolute;z-index:8;inset:96px 8px 8px;pointer-events:none;overflow:visible;border-radius:34px}
.floating-bubbles .bubble{
  pointer-events:auto;position:absolute;width:var(--size,88px);height:var(--size,88px);border-radius:50%;cursor:pointer;user-select:none;
  border:1.5px solid rgba(241,251,255,.76);
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.98) 0 6%,rgba(255,255,255,.58) 13%,transparent 25%),
    radial-gradient(circle at 68% 76%,rgba(128,100,222,.38),transparent 45%),
    radial-gradient(circle at 45% 48%,color-mix(in srgb,var(--accent) 72%,white),color-mix(in srgb,var(--accent) 72%,#5264a2));
  box-shadow:
    inset 14px 15px 27px rgba(255,255,255,.42),inset -18px -20px 34px rgba(19,38,86,.27),
    0 24px 48px rgba(1,12,39,.38),0 0 28px color-mix(in srgb,var(--accent) 48%,transparent);
  backdrop-filter:blur(3px);will-change:left,top;animation:bubbleBorn .9s cubic-bezier(.16,.86,.2,1.18) both,bubbleAura 4.5s ease-in-out 1s infinite alternate;
}
.floating-bubbles .bubble:before{
  content:"";position:absolute;width:29%;height:14%;border-radius:50%;left:20%;top:14%;
  background:rgba(255,255,255,.78);transform:rotate(-25deg);filter:blur(.8px);
}
.floating-bubbles .bubble:after{
  content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
}
.floating-bubbles .bubble-date{
  position:absolute;inset:0;display:grid;place-items:center;color:rgba(241,249,255,.84);
  font:600 18px Georgia,serif;text-shadow:0 2px 10px rgba(16,39,85,.6),0 0 8px rgba(255,255,255,.35);
}
.floating-bubbles .bubble.note{box-shadow:inset 14px 15px 27px rgba(255,255,255,.5),inset -18px -20px 34px rgba(19,38,86,.3),0 25px 52px rgba(1,12,39,.44),0 0 40px color-mix(in srgb,var(--accent) 68%,transparent)}
.floating-bubbles .bubble.note:after{content:"✦";inset:auto;right:13%;bottom:9%;border:0;color:#fff;font-size:14px;text-shadow:0 0 10px #fff}
.floating-bubbles .bubble.welcome{animation:welcomeFloat 1.35s cubic-bezier(.15,.8,.15,1) both,bubbleAura 4.5s 1.35s ease-in-out infinite alternate}
#empty{position:absolute;z-index:9;top:53%;left:50%;transform:translate(-50%,-50%);text-align:center;color:rgba(216,237,255,.43);font:14px/1.8 Georgia,"Songti SC",serif;letter-spacing:.07em}
footer{display:flex;justify-content:space-between;align-items:center;padding:0 3px;color:rgba(214,235,255,.5);font-size:10px;letter-spacing:.04em}
footer button{border:0;background:none;color:rgba(228,243,255,.68);cursor:pointer}
dialog{
  width:min(calc(100% - 34px),430px);padding:0;color:#f1f8ff;border:1px solid rgba(224,244,255,.25);border-radius:29px;
  background:linear-gradient(155deg,rgba(18,54,103,.96),rgba(18,33,76,.96));box-shadow:0 35px 100px rgba(0,7,28,.55);backdrop-filter:blur(24px);
}
dialog::backdrop{background:rgba(1,9,30,.52);backdrop-filter:blur(8px)}
form{padding:31px;position:relative}.close{position:absolute;right:17px;top:13px;border:0;background:none;font-size:25px;color:rgba(226,241,255,.6);cursor:pointer}
form small{color:rgba(209,235,255,.5);letter-spacing:.12em}form h2{font:400 23px/1.4 Georgia,"Songti SC",serif;margin:8px 0 24px}
label{display:block;color:rgba(216,236,255,.65);font-size:11px;margin-bottom:20px}
input,textarea{display:block;width:100%;margin-top:9px;padding:14px;border:1px solid rgba(206,235,255,.16);border-radius:15px;background:rgba(225,243,255,.08);color:#f4f9ff;outline:none}
input::placeholder,textarea::placeholder{color:rgba(214,235,255,.32)}textarea{min-height:130px;resize:vertical;line-height:1.7}
.primary{width:100%;padding:14px;border:1px solid rgba(235,248,255,.18);border-radius:15px;background:linear-gradient(115deg,rgba(99,186,231,.75),rgba(112,99,197,.72));color:#fff;box-shadow:0 12px 30px rgba(3,18,53,.27);cursor:pointer}
.dot{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.65);background:var(--c);margin:12px 9px 0 0;cursor:pointer;box-shadow:0 0 12px color-mix(in srgb,var(--c) 55%,transparent)}
.dot.selected{outline:2px solid rgba(220,242,255,.72);outline-offset:3px}
#toast{position:fixed;z-index:30;left:50%;bottom:70px;transform:translate(-50%,20px);padding:10px 18px;border:1px solid rgba(232,247,255,.2);border-radius:22px;background:rgba(4,22,58,.78);color:#f1f8ff;font-size:11px;box-shadow:0 15px 38px rgba(0,9,32,.34);backdrop-filter:blur(12px);opacity:0;transition:.35s;pointer-events:none}
#toast.show{opacity:1;transform:translate(-50%,0)}
#fireworks{position:absolute;z-index:15;inset:0;width:100%;height:100%;pointer-events:none}
#celebrate{position:fixed;z-index:20;inset:0;display:grid;place-content:center;text-align:center;color:#fff;text-shadow:0 3px 24px #07142f;opacity:0;pointer-events:none}
#celebrate h2{font:400 28px Georgia,"Songti SC",serif;margin:8px}#celebrate small{letter-spacing:.18em;color:rgba(235,249,255,.78)}#celebrate.show{animation:text 3.7s}
@keyframes skyBreath{to{transform:scale(1.12) rotate(6deg);opacity:.8}}
@keyframes aurora{to{transform:translate(35px,25px) scale(1.16);opacity:.42}}
@keyframes twinkle{0%,100%{opacity:.12;transform:scale(.55)}50%{opacity:.95;transform:scale(1.3)}}
@keyframes bubbleBorn{from{opacity:0;transform:scale(.12) translateY(35px);filter:blur(5px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}
@keyframes bubbleAura{from{filter:brightness(.94) saturate(.9)}to{filter:brightness(1.12) saturate(1.16)}}
@keyframes welcomeFloat{0%{opacity:0;transform:scale(.08)}58%{opacity:1;transform:scale(1.65)}100%{opacity:1;transform:scale(1)}}
@keyframes text{0%,100%{opacity:0;transform:scale(.94)}20%,75%{opacity:1;transform:scale(1)}}
@media(max-height:680px){.app{padding-top:14px;gap:10px}.page-head{height:67px}.calendar{height:calc(100% - 68px);min-height:280px}.day-cell{height:42px}.floating-bubbles{top:74px}}
@media(min-width:700px){body{padding:18px}.app{height:calc(100dvh - 36px);border-radius:38px;background:rgba(103,181,224,.04);box-shadow:0 35px 110px rgba(0,8,31,.3)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* 明亮高空主题：远景云气、中景碎光、近景泡泡 */
:root{color:#385b73;--night:#dff5ff}
body{
  color:#385b73;
  background:
    radial-gradient(circle at 14% 5%,rgba(255,255,255,.98) 0 10%,transparent 37%),
    radial-gradient(circle at 92% 15%,rgba(233,218,255,.72),transparent 34%),
    radial-gradient(ellipse at 50% 100%,rgba(255,244,220,.55),transparent 44%),
    linear-gradient(158deg,#eafaff 0%,#bfeafb 42%,#cbdffc 72%,#eee6ff 100%);
}
body:before{opacity:.14;mix-blend-mode:soft-light;background-image:radial-gradient(rgba(79,128,165,.48) .48px,transparent .7px);background-size:5px 5px}
.app:before{
  content:"";position:absolute;z-index:-1;width:390px;height:390px;left:-190px;top:28%;
  border-radius:50%;background:rgba(255,255,255,.3);filter:blur(58px);animation:cloudPass 20s ease-in-out infinite alternate;
}
header small{color:rgba(65,98,123,.5)}
h1{color:#3f617b;text-shadow:0 5px 25px rgba(255,255,255,.72)}
.round,.plus{
  color:rgba(55,88,116,.75);border-color:rgba(255,255,255,.78);
  background:linear-gradient(145deg,rgba(255,255,255,.68),rgba(235,248,255,.3));
  box-shadow:inset 0 1px rgba(255,255,255,.9),0 12px 32px rgba(77,121,153,.13);
}
.pill{color:rgba(60,90,115,.52);border-color:rgba(255,255,255,.72);background:rgba(255,255,255,.28)}
.pill.active{
  color:#395d77;background:rgba(255,255,255,.62);border-color:rgba(255,255,255,.92);
  box-shadow:inset 0 1px #fff,0 10px 28px rgba(72,117,150,.14),0 0 22px color-mix(in srgb,var(--c) 26%,transparent);
}
#sky{
  perspective:900px;
  background:
    radial-gradient(ellipse at 50% 18%,rgba(255,255,255,.66),transparent 33%),
    radial-gradient(ellipse at 20% 75%,rgba(159,225,241,.2),transparent 43%),
    linear-gradient(180deg,rgba(255,255,255,.35),rgba(215,239,252,.18) 52%,rgba(240,231,255,.25));
  border-color:rgba(255,255,255,.76);
  box-shadow:inset 0 1px rgba(255,255,255,.95),inset 0 -30px 80px rgba(128,166,205,.07),0 30px 75px rgba(72,115,150,.16);
  backdrop-filter:blur(7px);
}
#sky:before{
  inset:-20%;opacity:.88;
  background:
    radial-gradient(ellipse at 50% 43%,rgba(255,255,255,.64) 0 4%,transparent 34%),
    radial-gradient(ellipse at 15% 68%,rgba(193,237,250,.48),transparent 36%),
    radial-gradient(ellipse at 88% 63%,rgba(218,201,255,.36),transparent 34%),
    conic-gradient(from 165deg at 50% 47%,transparent,rgba(112,204,235,.12),transparent 21%,rgba(187,155,235,.1),transparent 45%);
  filter:blur(10px);animation:airyBreath 18s ease-in-out infinite alternate;
}
#sky:after{
  left:-25%;right:-25%;bottom:-19%;height:48%;
  background:
    radial-gradient(ellipse at 52% 0%,rgba(255,255,255,.72),transparent 45%),
    linear-gradient(180deg,transparent,rgba(190,220,242,.24));
  filter:blur(14px);animation:horizonFloat 16s ease-in-out infinite alternate;
}
.glow{opacity:.35;filter:blur(30px)}
.g1{background:#8fe8ff}.g2{background:#d1b9ff}
.star-field{
  opacity:.84;transform:translateZ(-65px) scale(1.08);transform-origin:center;
  animation:starFieldDrift 30s ease-in-out infinite alternate;
}
.star{background:rgba(255,255,255,.98);box-shadow:0 0 5px #fff,0 0 14px rgba(75,164,213,.66)}
.star.cross:before,.star.cross:after{background:rgba(255,255,255,.88);box-shadow:0 0 8px rgba(82,171,219,.5)}
.page-head span{color:#446981;text-shadow:0 3px 24px rgba(255,255,255,.9)}
.page-head strong{color:rgba(64,99,126,.5)}
.page-head i{color:rgba(64,99,126,.42)}
.calendar{opacity:.72;transform:translateZ(-32px) scale(1.025);filter:blur(.12px)}
.day-number{color:rgba(51,85,112,.34)}
.day-number:hover:not(:disabled){color:rgba(49,81,108,.75);background:rgba(255,255,255,.3)}
.day-cell.today:not(.done) .day-number{color:rgba(45,78,106,.72);text-shadow:0 0 12px rgba(255,255,255,.9)}
.day-cell.done .day-number{
  color:rgba(43,75,103,.9);
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.88),color-mix(in srgb,var(--accent) 34%,rgba(255,255,255,.52)));
  border-color:rgba(255,255,255,.92);
  box-shadow:inset 0 0 13px rgba(255,255,255,.8),0 0 19px color-mix(in srgb,var(--accent) 55%,transparent);
}
.floating-bubbles{transform:translateZ(85px)}
.floating-bubbles .bubble{
  border-color:rgba(255,255,255,.95);
  background:
    radial-gradient(circle at 29% 18%,rgba(255,255,255,1) 0 6%,rgba(255,255,255,.72) 13%,transparent 25%),
    radial-gradient(circle at 70% 77%,rgba(176,143,238,.32),transparent 45%),
    radial-gradient(circle at 45% 48%,color-mix(in srgb,var(--accent) 68%,white),color-mix(in srgb,var(--accent) 68%,#8da3d4));
  box-shadow:inset 14px 15px 27px rgba(255,255,255,.68),inset -18px -20px 34px rgba(65,91,140,.18),0 24px 48px rgba(59,96,128,.24),0 0 34px color-mix(in srgb,var(--accent) 52%,transparent);
}
.floating-bubbles .bubble-date{color:rgba(52,79,111,.74);text-shadow:0 2px 10px rgba(255,255,255,.86)}
.floating-bubbles .bubble.note{box-shadow:inset 14px 15px 27px rgba(255,255,255,.72),inset -18px -20px 34px rgba(65,91,140,.2),0 26px 52px rgba(59,96,128,.3),0 0 44px color-mix(in srgb,var(--accent) 67%,transparent)}
.floating-bubbles .bubble.breathing{
  z-index:12;
  animation:bubbleBreath 1.35s cubic-bezier(.22,.72,.25,1) both!important;
}
#empty{color:rgba(57,91,117,.5);text-shadow:0 2px 14px rgba(255,255,255,.8)}
footer{color:rgba(57,88,113,.53)}
footer button{color:rgba(51,83,110,.72)}
dialog{
  color:#385b73;border-color:rgba(255,255,255,.9);
  background:linear-gradient(155deg,rgba(248,253,255,.96),rgba(231,243,255,.94));
  box-shadow:0 35px 100px rgba(77,108,139,.25);
}
dialog::backdrop{background:rgba(99,137,166,.25)}
.close{color:rgba(55,87,113,.5)}form small{color:rgba(55,89,116,.48)}label{color:rgba(54,86,112,.62)}
input,textarea{border-color:rgba(78,119,151,.16);background:rgba(255,255,255,.68);color:#385b73}
input::placeholder,textarea::placeholder{color:rgba(61,93,119,.34)}
.primary{border-color:rgba(255,255,255,.75);background:linear-gradient(115deg,rgba(91,182,220,.84),rgba(147,127,214,.72));box-shadow:0 12px 30px rgba(81,122,156,.2)}
#toast{color:#f7fbff;background:rgba(63,101,132,.76);border-color:rgba(255,255,255,.5);box-shadow:0 15px 38px rgba(62,99,129,.22)}
@keyframes airyBreath{0%{transform:translate3d(-2%,-1%,0) scale(1)}100%{transform:translate3d(4%,3%,0) scale(1.12) rotate(5deg)}}
@keyframes horizonFloat{to{transform:translateY(-12%) scaleX(1.08);opacity:.72}}
@keyframes starFieldDrift{0%{transform:translate3d(-2%,-1%,-65px) scale(1.08)}100%{transform:translate3d(3%,2%,-65px) scale(1.13)}}
@keyframes cloudPass{to{transform:translate(170px,-40px) scale(1.3);opacity:.5}}
@keyframes bubbleBreath{
  0%{transform:scale(1);filter:brightness(1);box-shadow:inset 14px 15px 27px rgba(255,255,255,.68),0 24px 48px rgba(59,96,128,.24),0 0 30px color-mix(in srgb,var(--accent) 50%,transparent)}
  34%{transform:scale(1.16);filter:brightness(1.1);box-shadow:inset 18px 19px 31px rgba(255,255,255,.78),0 30px 58px rgba(59,96,128,.26),0 0 58px color-mix(in srgb,var(--accent) 75%,transparent)}
  66%{transform:scale(.96);filter:brightness(.98)}
  100%{transform:scale(1);filter:brightness(1)}
}
/* 场景重构：以真实意象建立远—中—近的空间关系 */
body{
  background:
    radial-gradient(circle at 50% -12%,rgba(255,255,255,1) 0 7%,transparent 30%),
    linear-gradient(180deg,#d9f5ff 0%,#a8dff5 36%,#b8cfee 67%,#e8dff1 100%);
}
.app{isolation:isolate}
.app:before{display:none}
#sky{
  margin:0 -12px;padding-left:30px;padding-right:30px;
  border:0;border-radius:54px;background:transparent;box-shadow:none;backdrop-filter:none;
  perspective:760px;transform-style:preserve-3d;overflow:hidden;
}
#sky:before{
  z-index:1;inset:0;opacity:1;filter:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.4),transparent 21%),
    radial-gradient(ellipse at 50% 54%,rgba(255,255,255,.24),transparent 44%);
  animation:none;pointer-events:none;
}
#sky:after{
  z-index:3;left:-20%;right:-20%;bottom:-14%;height:38%;filter:blur(17px);
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.62),rgba(215,226,248,.28) 42%,transparent 72%);
}
.depth-scene{
  position:absolute;z-index:0;inset:-4%;pointer-events:none;overflow:hidden;
  transform-style:preserve-3d;
}
.photo-depth{
  position:absolute;inset:-15%;z-index:-5;
  background:
    linear-gradient(180deg,rgba(223,248,255,.32),rgba(195,229,245,.36) 50%,rgba(225,217,239,.42)),
    url("./assets/freedom-sky.jpg") center 59%/cover no-repeat;
  background-blend-mode:screen;
  opacity:.52;filter:brightness(1.38) saturate(.72) contrast(.82) blur(.35px);
  transform:translateZ(-210px) scale(1.44);
  animation:photoBreathe 24s ease-in-out infinite alternate;
}
.far-planet{
  position:absolute;z-index:-2;width:220px;height:220px;right:-58px;top:2%;border-radius:50%;
  background:
    radial-gradient(circle at 35% 28%,rgba(255,255,255,.9),rgba(226,239,255,.46) 25%,rgba(167,199,234,.18) 62%,rgba(143,158,215,.08) 72%,transparent 74%);
  box-shadow:-18px 8px 45px rgba(255,255,255,.34),0 0 75px rgba(139,191,230,.2);
  opacity:.72;transform:translateZ(-170px) scale(1.28);
}
.far-planet:after{
  content:"";position:absolute;inset:20%;border-radius:50%;
  background:radial-gradient(ellipse at 65% 58%,rgba(135,165,205,.13),transparent 35%),radial-gradient(ellipse at 30% 70%,rgba(150,164,205,.12),transparent 28%);
  filter:blur(3px);
}
.cosmic-arc{
  position:absolute;z-index:-1;border:1px solid rgba(255,255,255,.27);border-radius:50%;
  box-shadow:0 0 18px rgba(255,255,255,.13);transform-origin:center;
}
.arc-one{width:560px;height:180px;left:-84px;top:14%;transform:translateZ(-105px) rotate(-13deg)}
.arc-two{width:430px;height:310px;right:-190px;top:5%;border-color:rgba(147,190,226,.17);transform:translateZ(-75px) rotate(18deg)}
.vanishing-light{
  position:absolute;z-index:-1;left:0;right:0;top:0;height:72%;
  clip-path:polygon(43% 100%,57% 100%,82% 0,18% 0);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),rgba(255,255,255,.31),rgba(255,255,255,.15),transparent);
  filter:blur(13px);opacity:.72;transform:translateZ(-90px);
}
.mountain{position:absolute;left:-8%;right:-8%;bottom:15%;height:25%;transform-origin:center bottom}
.mountain-far{
  z-index:-1;opacity:.24;filter:blur(2px);
  background:linear-gradient(180deg,rgba(111,160,190,.28),rgba(127,151,190,.18));
  clip-path:polygon(0 80%,8% 66%,15% 72%,25% 40%,33% 61%,43% 28%,51% 55%,62% 35%,72% 65%,84% 36%,93% 66%,100% 50%,100% 100%,0 100%);
  transform:translateZ(-95px) scale(1.18);
}
.mountain-mid{
  z-index:0;bottom:8%;height:22%;opacity:.18;filter:blur(1px);
  background:linear-gradient(180deg,rgba(102,142,177,.32),rgba(126,136,180,.18));
  clip-path:polygon(0 73%,12% 48%,23% 67%,36% 35%,48% 70%,59% 43%,69% 61%,82% 29%,91% 58%,100% 44%,100% 100%,0 100%);
  transform:translateZ(-35px) scale(1.08);
}
.cloud-ocean{position:absolute;left:-24%;right:-24%;border-radius:50%;pointer-events:none}
.cloud-far{
  z-index:0;bottom:3%;height:24%;opacity:.63;filter:blur(14px);
  background:
    radial-gradient(ellipse at 12% 60%,rgba(255,255,255,.66),transparent 25%),
    radial-gradient(ellipse at 34% 35%,rgba(255,255,255,.75),transparent 27%),
    radial-gradient(ellipse at 58% 58%,rgba(246,249,255,.7),transparent 28%),
    radial-gradient(ellipse at 83% 38%,rgba(255,255,255,.72),transparent 28%);
  transform:translateZ(-12px) scale(1.12);animation:cloudSea 22s ease-in-out infinite alternate;
}
.cloud-near{
  z-index:2;bottom:-12%;height:29%;opacity:.55;filter:blur(22px);
  background:
    radial-gradient(ellipse at 15% 30%,rgba(255,255,255,.86),transparent 27%),
    radial-gradient(ellipse at 47% 42%,rgba(247,244,255,.9),transparent 31%),
    radial-gradient(ellipse at 78% 25%,rgba(255,255,255,.82),transparent 29%);
  transform:translateZ(42px) scale(1.18);animation:cloudNear 16s ease-in-out infinite alternate;
}
.distant-birds{position:absolute;z-index:1;left:18%;top:25%;width:100px;height:45px;opacity:.4;transform:translateZ(-35px)}
.distant-birds i{position:absolute;width:13px;height:6px;border-top:1.5px solid rgba(50,87,115,.55);border-radius:50%;transform:rotate(8deg)}
.distant-birds i:after{content:"";position:absolute;width:13px;height:6px;left:10px;top:-2px;border-top:1.5px solid rgba(50,87,115,.55);border-radius:50%;transform:rotate(-17deg)}
.distant-birds i:nth-child(2){left:38px;top:18px;transform:scale(.7) rotate(-4deg)}
.distant-birds i:nth-child(3){left:72px;top:5px;transform:scale(.5) rotate(11deg)}
.glow{z-index:2}
.star-field{z-index:2;opacity:.78;transform:translateZ(-55px) scale(1.12)}
.page-head{z-index:5;transform:translateZ(8px)}
.calendar{z-index:4;opacity:.69;transform:translateZ(-14px) scale(1.01)}
.floating-bubbles{z-index:10;transform:translateZ(110px)}
footer{position:relative;z-index:8}
@keyframes photoBreathe{0%{transform:translate3d(-1%,0,-210px) scale(1.44)}100%{transform:translate3d(2%,-2%,-210px) scale(1.5)}}
@keyframes cloudSea{to{transform:translate3d(5%,-5px,-12px) scale(1.16)}}
@keyframes cloudNear{to{transform:translate3d(-4%,-10px,42px) scale(1.23)}}
.far-planet,.mountain-far,.mountain-mid,.cloud-near,.star-field{transition:margin .8s cubic-bezier(.2,.75,.25,1)}
.photo-depth{transition:background-position 1.1s cubic-bezier(.2,.75,.25,1)}
/* 使用新参考图本身构成三段式景深，并降低摄影写实感 */
.depth-scene{inset:0;overflow:hidden}
.photo-depth,.photo-mid,.photo-front{
  position:absolute;inset:0;
  background-image:url("./assets/celestial-cloudscape.png");
  background-repeat:no-repeat;background-position:center 46%;pointer-events:none;
}
.photo-depth{
  z-index:-5;opacity:.88;background-size:112% auto;
  filter:saturate(.72) contrast(.78) brightness(1.22) blur(1.4px);
  transform:translateZ(-150px) scale(1.2);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 11%,#000 77%,transparent 96%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 11%,#000 77%,transparent 96%);
  animation:newPhotoFar 28s ease-in-out infinite alternate;
}
.photo-mid{
  z-index:-2;opacity:.62;background-size:106% auto;background-position:center 48%;
  filter:saturate(.68) contrast(.82) brightness(1.16) blur(.65px);
  clip-path:polygon(0 36%,100% 36%,100% 82%,0 88%);
  transform:translateZ(-38px) scale(1.08);
  -webkit-mask-image:linear-gradient(180deg,transparent 30%,#000 48%,#000 74%,transparent 91%);
  mask-image:linear-gradient(180deg,transparent 30%,#000 48%,#000 74%,transparent 91%);
  animation:newPhotoMid 19s ease-in-out infinite alternate;
}
.photo-front{
  z-index:2;opacity:.44;background-size:101% auto;background-position:center 51%;
  filter:saturate(.6) contrast(.88) brightness(1.05) blur(.25px);
  clip-path:polygon(0 60%,100% 60%,100% 100%,0 100%);
  transform:translateZ(54px) scale(1.05);
  -webkit-mask-image:linear-gradient(180deg,transparent 53%,#000 69%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 53%,#000 69%,#000 100%);
  animation:newPhotoFront 14s ease-in-out infinite alternate;
}
.paint-wash{
  position:absolute;z-index:3;inset:0;pointer-events:none;opacity:.72;
  background:
    radial-gradient(ellipse at 50% 46%,rgba(255,251,232,.33),transparent 20%),
    radial-gradient(ellipse at 22% 54%,rgba(163,218,245,.22),transparent 35%),
    radial-gradient(ellipse at 82% 60%,rgba(192,171,235,.18),transparent 34%),
    linear-gradient(180deg,rgba(225,247,255,.3),transparent 34%,rgba(225,217,242,.12) 78%,rgba(246,237,246,.3));
  mix-blend-mode:screen;
}
.paint-wash:after{
  content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:soft-light;
  background-image:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.8) 0 .6px,transparent .9px),
    radial-gradient(circle at 70% 60%,rgba(76,112,150,.38) 0 .45px,transparent .75px);
  background-size:4px 4px,5px 5px;
}
.far-planet,.cosmic-arc,.mountain,.cloud-ocean,.distant-birds,.vanishing-light{display:none}
#sky:before{
  z-index:4;
  background:
    linear-gradient(180deg,rgba(228,248,255,.4),transparent 20%),
    radial-gradient(ellipse at 50% 48%,rgba(255,252,232,.3),transparent 22%),
    linear-gradient(90deg,rgba(181,225,246,.16),transparent 35%,transparent 65%,rgba(205,188,238,.13));
}
#sky:after{z-index:4;bottom:-18%;height:36%;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.78),rgba(212,224,244,.24) 47%,transparent 73%)}
.glow{z-index:5}.star-field{z-index:5}.page-head{z-index:7}.calendar{z-index:6}.floating-bubbles{z-index:12}
@keyframes newPhotoFar{0%{transform:translate3d(-1%,0,-150px) scale(1.2)}100%{transform:translate3d(1.5%,-1.5%,-150px) scale(1.25)}}
@keyframes newPhotoMid{0%{transform:translate3d(1%,0,-38px) scale(1.08)}100%{transform:translate3d(-2%,1.2%,-38px) scale(1.12)}}
@keyframes newPhotoFront{0%{transform:translate3d(-1%,0,54px) scale(1.05)}100%{transform:translate3d(2%,-1%,54px) scale(1.09)}}
/* 全界面统一场景：背景跨越标题、事项、日历与底部，不再局限于中间区域 */
html,body{width:100%;height:100%}
body{position:relative;isolation:isolate;background:#c7e7f5}
.depth-scene{
  position:fixed;z-index:0;inset:0;width:100vw;height:100dvh;overflow:hidden;
  pointer-events:none;transform-style:preserve-3d;
}
.app{position:relative;z-index:2;isolation:auto;background:transparent!important;box-shadow:none!important;border-radius:0!important}
.photo-depth,.photo-mid,.photo-front{
  position:absolute;inset:-3%;background-size:cover;background-position:center center;
}
.photo-depth{
  opacity:.84;filter:saturate(.67) contrast(.78) brightness(1.2) blur(1.1px);
  transform:scale(1.08);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 84%,transparent 100%);
}
.photo-mid{
  opacity:.46;background-position:center 57%;background-size:cover;
  clip-path:polygon(0 34%,100% 34%,100% 88%,0 92%);
  filter:saturate(.65) contrast(.82) brightness(1.14) blur(.55px);
}
.photo-front{
  opacity:.38;background-position:center 64%;background-size:cover;
  clip-path:polygon(0 61%,100% 61%,100% 100%,0 100%);
  filter:saturate(.58) contrast(.88) brightness(1.03);
}
.paint-wash{position:fixed;inset:0}
#sky{
  margin:0;padding-left:18px;padding-right:18px;
  overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none;
  backdrop-filter:none;perspective:none;transform-style:flat;isolation:auto;
}
#sky:before,#sky:after{display:none}
.glow{opacity:.18}
.star-field{z-index:1;opacity:.72;transform:none}
.page-head{z-index:4;transform:none}
.calendar{z-index:3;transform:none}
.floating-bubbles{z-index:8;transform:none;overflow:visible}
header,nav,footer{position:relative;z-index:10}
@media(max-width:600px){
  .photo-depth,.photo-mid,.photo-front{background-position:center center;background-size:auto 105%;left:-36%;right:-36%}
  .photo-mid{background-position:center 57%}
  .photo-front{background-position:center 64%}
}
/* 手机 App 暮蓝主题：统一背景、低亮度、远处淡银河 */
body{padding:0!important;background:#102638;color:#dbe8ed}
.depth-scene{
  position:fixed;left:50%;right:auto;top:0;bottom:0;width:min(100vw,430px);height:100dvh;
  transform:translateX(-50%);background:linear-gradient(180deg,#17364e 0%,#315b70 52%,#5d7180 100%);
}
.app{width:min(100%,430px);max-width:430px;height:100dvh!important;padding:calc(24px + env(safe-area-inset-top)) 20px calc(17px + env(safe-area-inset-bottom));}
.photo-depth{
  inset:-2%;opacity:.61;background-size:auto 102%;background-position:center 49%;
  filter:saturate(.5) contrast(.76) brightness(.76) blur(1.25px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 78%,transparent 100%);
}
.photo-mid{
  opacity:.2;background-size:auto 102%;background-position:center 58%;
  filter:saturate(.42) contrast(.74) brightness(.74) blur(.8px);
}
.photo-front{
  opacity:.24;background-size:auto 102%;background-position:center 65%;
  filter:saturate(.38) contrast(.78) brightness(.68) blur(.35px);
}
.paint-wash{
  position:absolute;inset:0;opacity:1;mix-blend-mode:normal;
  background:
    linear-gradient(180deg,rgba(14,38,58,.28) 0%,rgba(22,53,71,.32) 38%,rgba(52,75,88,.2) 67%,rgba(37,48,62,.42) 100%),
    radial-gradient(ellipse at 50% 47%,rgba(170,205,214,.09),transparent 30%);
}
.paint-wash:after{opacity:.09;mix-blend-mode:soft-light}
.milky-way{
  position:absolute;z-index:-3;width:168%;height:24%;left:-34%;top:10%;
  transform:rotate(-14deg);
  opacity:.56;mix-blend-mode:screen;filter:blur(.35px);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,rgba(0,0,0,.86) 38%,transparent 78%);
  mask-image:radial-gradient(ellipse at center,#000 0%,rgba(0,0,0,.86) 38%,transparent 78%);
  background-image:
    radial-gradient(circle,rgba(238,242,255,.86) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(206,224,244,.7) 0 .7px,transparent 1.2px),
    radial-gradient(circle,rgba(255,255,255,.58) 0 .6px,transparent 1.1px),
    linear-gradient(180deg,transparent,rgba(191,211,231,.16) 38%,rgba(226,228,245,.22) 52%,rgba(176,201,226,.12) 67%,transparent);
  background-size:47px 39px,71px 53px,29px 31px,100% 100%;
  animation:galaxyDrift 38s ease-in-out infinite alternate;
}
.milky-way:before{
  content:"";position:absolute;left:8%;right:8%;top:34%;height:34%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(216,222,241,.2),rgba(155,192,219,.08) 48%,transparent 72%);
  filter:blur(12px);
}
.milky-way:after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 46%,rgba(255,255,255,.78) 0 1.2px,transparent 1.8px),
    radial-gradient(circle at 41% 53%,rgba(235,241,255,.7) 0 1px,transparent 1.6px),
    radial-gradient(circle at 63% 38%,rgba(255,255,255,.64) 0 1px,transparent 1.5px),
    radial-gradient(circle at 82% 56%,rgba(227,237,252,.7) 0 1.2px,transparent 1.8px);
}
.glow{display:none}
.star-field{opacity:.48}
.star{background:rgba(234,244,249,.75);box-shadow:0 0 5px rgba(233,244,250,.7),0 0 11px rgba(143,186,207,.4)}
header small{color:rgba(215,231,237,.48)}
h1{color:#e4eef1;text-shadow:0 4px 22px rgba(4,21,34,.28)}
.round,.plus{
  color:rgba(226,239,243,.78);border-color:rgba(224,238,243,.24);
  background:linear-gradient(145deg,rgba(224,239,244,.16),rgba(212,230,236,.06));
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 10px 28px rgba(5,20,32,.15);
}
.pill{color:rgba(222,235,239,.52);border-color:rgba(222,237,242,.18);background:rgba(218,236,241,.07)}
.pill.active{
  color:#edf5f6;background:rgba(220,236,241,.16);border-color:rgba(232,243,246,.33);
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 10px 25px rgba(7,25,38,.17),0 0 18px color-mix(in srgb,var(--c) 16%,transparent);
}
.page-head span{color:rgba(232,241,243,.9);text-shadow:0 3px 18px rgba(12,36,50,.36)}
.page-head strong{color:rgba(215,229,234,.46)}
.page-head i{color:rgba(216,230,234,.38)}
.calendar{opacity:.72}
.day-number{color:rgba(220,233,237,.3)}
.day-number:hover:not(:disabled){color:rgba(238,246,247,.7);background:rgba(226,239,243,.08)}
.day-cell.today:not(.done) .day-number{color:rgba(238,246,247,.76);text-shadow:0 0 10px rgba(188,220,230,.35)}
.day-cell.done .day-number{
  color:rgba(243,249,249,.92);
  background:radial-gradient(circle at 35% 25%,rgba(255,255,255,.3),color-mix(in srgb,var(--accent) 28%,rgba(111,153,165,.18)));
  border-color:rgba(225,240,244,.48);
  box-shadow:inset 0 0 12px rgba(255,255,255,.16),0 0 16px color-mix(in srgb,var(--accent) 34%,transparent);
}
.floating-bubbles .bubble{
  border-color:rgba(235,246,247,.72);
  filter:saturate(.72) brightness(.86);
  box-shadow:inset 14px 15px 27px rgba(255,255,255,.38),inset -18px -20px 34px rgba(34,63,82,.2),0 22px 46px rgba(8,30,43,.25),0 0 28px color-mix(in srgb,var(--accent) 32%,transparent);
}
.floating-bubbles .bubble-date{color:rgba(234,243,244,.75);text-shadow:0 2px 9px rgba(15,39,53,.55)}
#empty{color:rgba(221,233,236,.46);text-shadow:0 2px 13px rgba(10,31,44,.4)}
footer{color:rgba(220,233,237,.48)}
footer button{color:rgba(229,239,241,.68)}
dialog{
  color:#e8f1f3;border-color:rgba(225,239,243,.25);
  background:linear-gradient(155deg,rgba(36,68,87,.96),rgba(28,51,70,.97));
  box-shadow:0 35px 90px rgba(7,22,34,.42);
}
dialog::backdrop{background:rgba(14,35,49,.48)}
.close{color:rgba(226,238,241,.55)}form small,label{color:rgba(222,235,239,.55)}
input,textarea{border-color:rgba(220,236,241,.14);background:rgba(222,238,242,.08);color:#edf4f5}
input::placeholder,textarea::placeholder{color:rgba(218,232,236,.3)}
@keyframes galaxyDrift{0%{transform:translateX(-1.5%) rotate(-14deg)}100%{transform:translateX(2%) rotate(-13deg)}}
@media(min-width:431px){body:before{content:"";position:fixed;left:50%;top:0;width:430px;height:100%;transform:translateX(-50%);box-shadow:0 0 80px rgba(2,15,24,.45);pointer-events:none}}
/* 蓝调时刻：移除云海，只保留深空、天体与宁静色域 */
body{background:#132a42;color:#dce9ee}
.depth-scene{
  background:
    radial-gradient(ellipse at 50% 33%,rgba(75,123,163,.38),transparent 40%),
    linear-gradient(180deg,#183a5d 0%,#315f80 42%,#344f70 66%,#1b3049 100%);
}
.photo-depth{
  display:block;inset:-2%;opacity:.58;
  background-size:auto 76%;background-position:center top;
  filter:saturate(.48) contrast(.72) brightness(.73) blur(.8px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 35%,rgba(0,0,0,.62) 49%,transparent 66%);
  mask-image:linear-gradient(180deg,#000 0%,#000 35%,rgba(0,0,0,.62) 49%,transparent 66%);
  animation:blueSkyDrift 32s ease-in-out infinite alternate;
}
.photo-mid,.photo-front{display:none}
.paint-wash{
  background:
    radial-gradient(ellipse at 50% 38%,rgba(117,157,188,.12),transparent 32%),
    radial-gradient(ellipse at 82% 22%,rgba(111,91,170,.09),transparent 28%),
    linear-gradient(180deg,rgba(13,41,65,.2) 0%,rgba(35,69,96,.3) 42%,rgba(39,58,84,.56) 70%,rgba(15,31,49,.72) 100%);
}
.paint-wash:after{opacity:.06}
.milky-way{opacity:.48;top:9%;filter:blur(.55px) saturate(.75)}
.star-field{opacity:.56;filter:saturate(.7)}
.page-head span{color:rgba(228,239,244,.9)}
.page-head strong,.page-head i{color:rgba(207,223,232,.43)}
.calendar{opacity:.73}
.day-number{color:rgba(212,228,236,.29)}
.day-cell.today:not(.done) .day-number{color:rgba(231,241,245,.72)}
.day-cell.done .day-number{
  color:rgba(240,247,249,.9);
  background:linear-gradient(145deg,rgba(221,240,247,.2),rgba(142,185,208,.08));
  border-color:rgba(223,240,246,.42);
  backdrop-filter:blur(7px);
  box-shadow:inset 1px 1px rgba(255,255,255,.25),inset -1px -1px rgba(105,145,174,.15),0 0 15px color-mix(in srgb,var(--accent) 25%,transparent);
}
/* 控件采用克制的半透明玻璃，而非实色按钮 */
.round,.plus{
  border:1px solid rgba(226,242,248,.28);
  background:linear-gradient(145deg,rgba(226,241,247,.16),rgba(137,178,202,.055));
  backdrop-filter:blur(15px) saturate(1.18);
  box-shadow:inset 1px 1px rgba(255,255,255,.24),inset -1px -1px rgba(75,111,139,.13),0 10px 27px rgba(4,19,33,.17);
}
.pill{
  border:1px solid rgba(221,238,245,.2);
  background:linear-gradient(135deg,rgba(222,239,245,.12),rgba(121,164,193,.045));
  backdrop-filter:blur(13px) saturate(1.15);
  box-shadow:inset 1px 1px rgba(255,255,255,.12);
}
.pill.active{
  color:#edf5f7;border-color:rgba(231,244,248,.36);
  background:linear-gradient(135deg,rgba(229,242,247,.2),rgba(125,168,196,.075));
  box-shadow:inset 1px 1px rgba(255,255,255,.23),inset -1px -1px rgba(73,109,138,.1),0 9px 24px rgba(4,20,34,.17),0 0 16px color-mix(in srgb,var(--c) 13%,transparent);
}
/* 近景泡泡：折射玻璃、虹彩边缘与真实球面高光 */
.floating-bubbles .bubble{
  opacity:.94;
  border:1.25px solid rgba(234,247,250,.6);
  background:
    radial-gradient(circle at 27% 17%,rgba(255,255,255,.92) 0 3%,rgba(255,255,255,.42) 7%,transparent 18%),
    radial-gradient(circle at 72% 77%,rgba(185,151,236,.16),transparent 36%),
    radial-gradient(circle at 36% 68%,rgba(95,207,228,.12),transparent 42%),
    conic-gradient(from 210deg,rgba(97,195,225,.1),rgba(179,137,224,.1),rgba(235,164,203,.07),rgba(111,196,217,.11),rgba(97,195,225,.1)),
    linear-gradient(145deg,rgba(218,239,246,.19),rgba(117,161,194,.055));
  backdrop-filter:blur(9px) saturate(1.28) brightness(1.04);
  box-shadow:
    inset 10px 11px 22px rgba(255,255,255,.18),
    inset -13px -15px 27px rgba(66,101,135,.14),
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 18px 38px rgba(3,19,32,.23),
    0 0 24px color-mix(in srgb,var(--accent) 21%,transparent);
  filter:none;
}
.floating-bubbles .bubble:before{
  width:29%;height:12%;left:19%;top:13%;
  background:linear-gradient(90deg,rgba(255,255,255,.72),rgba(255,255,255,.2));
  filter:blur(.7px);
}
.floating-bubbles .bubble:after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  border:1px solid rgba(224,243,248,.14);
  box-shadow:inset -5px -6px 13px rgba(95,142,176,.08),inset 4px 5px 10px rgba(255,255,255,.09);
}
.floating-bubbles .bubble-date{
  color:rgba(229,240,244,.72);
  text-shadow:0 2px 8px rgba(8,29,45,.58),0 0 10px rgba(179,216,229,.12);
}
.floating-bubbles .bubble.note{
  box-shadow:
    inset 10px 11px 22px rgba(255,255,255,.22),
    inset -13px -15px 27px rgba(66,101,135,.17),
    0 19px 41px rgba(3,19,32,.25),
    0 0 31px color-mix(in srgb,var(--accent) 31%,transparent);
}
.floating-bubbles .bubble.breathing{animation:bubbleGlassBreath 1.45s cubic-bezier(.22,.72,.25,1) both!important}
dialog{
  border-color:rgba(223,239,245,.24);
  background:linear-gradient(155deg,rgba(43,76,98,.84),rgba(27,50,72,.9));
  backdrop-filter:blur(24px) saturate(1.08);
}
@keyframes blueSkyDrift{0%{transform:translateX(-1%) scale(1.04)}100%{transform:translateX(1.2%) scale(1.08)}}
@keyframes bubbleGlassBreath{
  0%,100%{transform:scale(1);backdrop-filter:blur(9px) saturate(1.28);box-shadow:inset 10px 11px 22px rgba(255,255,255,.18),inset -13px -15px 27px rgba(66,101,135,.14),0 18px 38px rgba(3,19,32,.23),0 0 24px color-mix(in srgb,var(--accent) 21%,transparent)}
  38%{transform:scale(1.14);backdrop-filter:blur(12px) saturate(1.4);box-shadow:inset 13px 14px 26px rgba(255,255,255,.24),inset -16px -18px 31px rgba(66,101,135,.17),0 23px 45px rgba(3,19,32,.25),0 0 39px color-mix(in srgb,var(--accent) 32%,transparent)}
  68%{transform:scale(.975)}
}
/* 打卡项数量增长时只在事项栏内部横向滚动，禁止撑开 App */
.app{min-width:0;max-width:430px;overflow:hidden}
nav{
  width:100%;max-width:100%;min-width:0;overflow:hidden;
  display:flex;align-items:center;flex-wrap:nowrap;
}
#habits{
  flex:1 1 0;width:0;min-width:0;max-width:100%;
  display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
  padding:2px 4px 7px 2px;scrollbar-width:none;
  overscroll-behavior-inline:contain;scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,#000 0%,#000 91%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 91%,transparent 100%);
}
#habits::-webkit-scrollbar{display:none}
.pill{
  flex:0 0 auto;max-width:156px;overflow:hidden;text-overflow:ellipsis;
  scroll-snap-align:center;
}
.plus{flex:0 0 41px;width:41px;min-width:41px;position:relative;z-index:2}
/* 功能分区与高级蓝调玻璃系统 */
.depth-scene{
  background:
    radial-gradient(ellipse at 78% 78%,rgba(103,103,157,.16),transparent 34%),
    radial-gradient(ellipse at 48% 30%,rgba(70,113,151,.28),transparent 43%),
    linear-gradient(165deg,#10263c 0%,#233f5b 46%,#3e526c 72%,#202f48 100%);
}
.paint-wash{
  background:
    radial-gradient(ellipse at 48% 30%,rgba(124,159,183,.09),transparent 37%),
    radial-gradient(ellipse at 89% 79%,rgba(130,109,173,.13),transparent 32%),
    linear-gradient(180deg,rgba(10,30,48,.2),rgba(30,53,77,.32) 48%,rgba(26,38,60,.58));
}
/* 第一功能块：事项选择 */
nav{
  padding:8px 8px 3px 10px;gap:8px;border-radius:25px;
  border:1px solid rgba(224,239,245,.2);
  background:linear-gradient(135deg,rgba(219,237,244,.13),rgba(117,151,178,.045));
  backdrop-filter:blur(18px) saturate(1.12);
  box-shadow:inset 1px 1px rgba(255,255,255,.15),inset -1px -1px rgba(71,101,129,.09),0 13px 32px rgba(4,18,31,.13);
}
#habits{padding-bottom:5px}
.pill{height:38px;border-color:transparent;background:transparent;box-shadow:none}
.pill.active{
  background:linear-gradient(135deg,rgba(231,243,247,.2),rgba(127,163,189,.075));
  border-color:rgba(228,241,246,.27);
  box-shadow:inset 1px 1px rgba(255,255,255,.2),0 7px 19px rgba(4,18,31,.12);
}
.plus{width:38px;height:38px;min-width:38px;flex-basis:38px}
/* 第二功能块：月份日期与漂浮泡泡 */
#sky{
  margin:0;overflow:hidden;padding:25px 17px 18px;border-radius:34px;
  border:1px solid rgba(224,239,245,.2);
  background:
    radial-gradient(ellipse at 50% 36%,rgba(190,218,229,.075),transparent 42%),
    linear-gradient(155deg,rgba(211,232,240,.105),rgba(95,127,156,.025));
  backdrop-filter:blur(15px) saturate(1.08);
  box-shadow:inset 1px 1px rgba(255,255,255,.14),inset -1px -1px rgba(67,95,124,.08),0 20px 46px rgba(3,17,29,.14);
}
.page-head{height:82px}
.calendar{height:calc(100% - 84px)}
/* 银河与星体退到右下角，向画布之外延展 */
.milky-way{
  width:142%;height:21%;left:13%;right:auto;top:auto;bottom:3%;
  opacity:.43;transform:rotate(-23deg);transform-origin:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.75) 18%,#000 52%,rgba(0,0,0,.7) 82%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.75) 18%,#000 52%,rgba(0,0,0,.7) 82%,transparent 100%);
  animation:galaxyLowerDrift 42s ease-in-out infinite alternate;
}
.far-planet{
  display:block!important;z-index:-1;width:205px;height:205px;left:auto;right:-86px;top:auto;bottom:-48px;
  opacity:.38;transform:none;
  background:
    radial-gradient(circle at 34% 28%,rgba(225,237,249,.5),rgba(150,174,207,.17) 34%,rgba(111,118,171,.1) 61%,rgba(71,81,125,.03) 72%,transparent 74%);
  border:1px solid rgba(203,220,239,.12);
  box-shadow:-18px -14px 48px rgba(157,191,221,.08),0 0 70px rgba(113,104,177,.08);
}
.far-planet:after{opacity:.55}
.danger-btn{
  width:100%;margin-top:11px;padding:13px;border-radius:15px;cursor:pointer;
  color:rgba(255,216,218,.82);border:1px solid rgba(239,164,171,.17);
  background:rgba(163,72,85,.11);
}
.danger-btn:hover{background:rgba(171,72,86,.18)}
@keyframes galaxyLowerDrift{
  0%{transform:translate3d(-1%,1%,0) rotate(-23deg)}
  100%{transform:translate3d(3%,-2%,0) rotate(-21.5deg)}
}
/* 月雾蓝调：统一低饱和色彩与珍珠玻璃材质 */
:root{color:#d9e5e5;--accent:#94c8c7}
body{background:#101827;color:#d9e5e5}
.depth-scene{
  background:
    radial-gradient(ellipse at 77% 78%,rgba(141,127,164,.13),transparent 32%),
    radial-gradient(ellipse at 45% 30%,rgba(94,146,158,.19),transparent 40%),
    linear-gradient(160deg,#17263a 0%,#284759 45%,#50596d 75%,#252c3d 100%);
}
.photo-depth{
  opacity:.38;filter:saturate(.34) contrast(.7) brightness(.67) blur(1px);
}
.paint-wash{
  background:
    radial-gradient(ellipse at 46% 31%,rgba(151,188,190,.07),transparent 34%),
    radial-gradient(ellipse at 82% 80%,rgba(159,143,178,.1),transparent 29%),
    linear-gradient(180deg,rgba(13,28,43,.25),rgba(35,59,70,.38) 48%,rgba(43,43,61,.61));
}
.milky-way{opacity:.32;filter:blur(.7px) saturate(.35)}
.milky-way:before{opacity:.56}
.far-planet{
  opacity:.26;
  background:radial-gradient(circle at 34% 28%,rgba(226,235,237,.34),rgba(157,175,195,.12) 34%,rgba(125,119,159,.07) 62%,transparent 74%);
  border-color:rgba(217,229,232,.08);
  box-shadow:-15px -12px 44px rgba(176,202,208,.04),0 0 68px rgba(146,129,170,.05);
}
.star{background:rgba(226,237,237,.66);box-shadow:0 0 5px rgba(226,237,237,.55),0 0 10px rgba(147,185,190,.22)}
header small{color:rgba(213,227,226,.43)}
h1{color:#e1eaea;text-shadow:0 4px 21px rgba(5,15,25,.25)}
/* 两个功能区采用同一块中性珍珠玻璃 */
nav,#sky{
  border-color:rgba(219,233,232,.16);
  background:
    linear-gradient(145deg,rgba(218,233,232,.09),rgba(112,142,151,.025));
  backdrop-filter:blur(21px) saturate(.9);
  box-shadow:inset 1px 1px rgba(255,255,255,.1),inset -1px -1px rgba(48,72,85,.07),0 16px 38px rgba(4,13,22,.12);
}
.round,.plus{
  color:rgba(223,235,234,.7);border-color:rgba(218,232,231,.19);
  background:linear-gradient(145deg,rgba(218,233,232,.1),rgba(100,130,142,.025));
  backdrop-filter:blur(17px) saturate(.9);
  box-shadow:inset 1px 1px rgba(255,255,255,.11),0 8px 22px rgba(4,13,22,.1);
}
.pill{color:rgba(214,228,227,.45)}
.pill:before{box-shadow:0 0 8px color-mix(in srgb,var(--c) 44%,transparent)}
.pill.active{
  color:#e3eceb;border-color:rgba(221,234,233,.2);
  background:linear-gradient(145deg,rgba(223,235,234,.13),rgba(113,143,153,.035));
  box-shadow:inset 1px 1px rgba(255,255,255,.12),0 7px 18px rgba(4,13,22,.1);
}
.page-head span{color:rgba(224,234,234,.84);text-shadow:0 3px 17px rgba(4,16,25,.25)}
.page-head strong{color:rgba(206,221,221,.4)}
.page-head i{color:rgba(204,220,220,.34)}
.day-number{color:rgba(207,222,222,.25)}
.day-number:hover:not(:disabled){color:rgba(227,237,237,.64);background:rgba(219,232,231,.055)}
.day-cell.today:not(.done) .day-number{color:rgba(229,238,237,.68);text-shadow:0 0 10px rgba(158,195,196,.2)}
.day-cell.done .day-number{
  color:rgba(231,240,239,.83);
  background:linear-gradient(145deg,rgba(218,233,232,.13),color-mix(in srgb,var(--accent) 15%,rgba(92,117,128,.035)));
  border-color:rgba(219,233,232,.25);
  box-shadow:inset 1px 1px rgba(255,255,255,.13),0 0 13px color-mix(in srgb,var(--accent) 18%,transparent);
}
/* 泡泡以无色玻璃为主，去除廉价的彩色发光感 */
.floating-bubbles .bubble{
  opacity:.9;border:1px solid rgba(228,239,238,.46);
  background:
    radial-gradient(circle at 27% 17%,rgba(255,255,255,.72) 0 2.8%,rgba(255,255,255,.27) 7%,transparent 18%),
    radial-gradient(circle at 70% 77%,rgba(184,168,205,.075),transparent 38%),
    radial-gradient(circle at 35% 70%,rgba(131,190,190,.06),transparent 43%),
    linear-gradient(145deg,rgba(218,233,232,.105),rgba(93,124,139,.025));
  backdrop-filter:blur(10px) saturate(.92) brightness(1.01);
  box-shadow:
    inset 9px 10px 20px rgba(255,255,255,.11),
    inset -12px -14px 25px rgba(52,79,95,.09),
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 17px 35px rgba(3,12,20,.2),
    0 0 20px color-mix(in srgb,var(--accent) 13%,transparent);
}
.floating-bubbles .bubble:before{background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.1))}
.floating-bubbles .bubble:after{border-color:rgba(220,234,233,.08);box-shadow:inset -5px -6px 12px rgba(66,93,109,.055),inset 4px 5px 9px rgba(255,255,255,.055)}
.floating-bubbles .bubble-date{color:rgba(221,232,231,.62);text-shadow:0 2px 7px rgba(4,17,26,.48)}
.floating-bubbles .bubble.note{
  box-shadow:inset 9px 10px 20px rgba(255,255,255,.14),inset -12px -14px 25px rgba(52,79,95,.11),0 18px 37px rgba(3,12,20,.21),0 0 24px color-mix(in srgb,var(--accent) 19%,transparent);
}
#empty{color:rgba(211,225,224,.4)}
footer{color:rgba(210,224,223,.42)}
footer button{color:rgba(219,231,230,.58)}
dialog{
  color:#dfe9e8;border-color:rgba(218,231,230,.18);
  background:linear-gradient(155deg,rgba(42,67,78,.91),rgba(29,45,61,.94));
  backdrop-filter:blur(26px) saturate(.85);
  box-shadow:0 32px 80px rgba(3,12,20,.36);
}
dialog::backdrop{background:rgba(11,24,34,.47)}
.close{color:rgba(218,231,230,.5)}
form small,label{color:rgba(208,222,221,.48)}
input,textarea{border-color:rgba(214,229,228,.12);background:rgba(216,231,230,.055);color:#e4edec}
input::placeholder,textarea::placeholder{color:rgba(207,222,221,.26)}
.primary{
  border-color:rgba(222,234,233,.19);
  background:linear-gradient(125deg,rgba(111,162,166,.72),rgba(105,119,150,.62));
  box-shadow:0 11px 27px rgba(4,14,23,.18);
}
.danger-btn{color:rgba(221,183,186,.72);border-color:rgba(208,147,154,.12);background:rgba(130,66,77,.08)}
#toast{background:rgba(35,58,69,.76);border-color:rgba(219,232,231,.22);color:#e2ebea}
/* 暮光晴蓝：提高天空亮度与通透度，减少墨色和灰感 */
body{background:#203d58;color:#e4eef1}
.depth-scene{
  background:
    radial-gradient(ellipse at 48% 35%,rgba(132,187,207,.22),transparent 42%),
    radial-gradient(ellipse at 82% 80%,rgba(162,151,197,.15),transparent 32%),
    linear-gradient(165deg,#284e6e 0%,#47738a 44%,#6d7896 75%,#405671 100%);
}
.photo-depth{
  opacity:.46;
  filter:saturate(.46) contrast(.72) brightness(.82) blur(.85px);
}
.paint-wash{
  background:
    radial-gradient(ellipse at 46% 34%,rgba(159,204,216,.1),transparent 38%),
    radial-gradient(ellipse at 83% 80%,rgba(181,166,211,.11),transparent 31%),
    linear-gradient(180deg,rgba(28,65,91,.12),rgba(61,101,121,.2) 47%,rgba(67,67,96,.36));
}
.milky-way{opacity:.37;filter:blur(.6px) saturate(.48)}
.far-planet{opacity:.3}
.star-field{opacity:.59}
.star{background:rgba(237,245,247,.73);box-shadow:0 0 5px rgba(238,246,248,.62),0 0 11px rgba(170,211,220,.28)}
h1{color:#edf4f5}
header small{color:rgba(225,237,239,.52)}
nav,#sky{
  border-color:rgba(232,243,246,.21);
  background:linear-gradient(145deg,rgba(226,240,245,.12),rgba(145,179,195,.035));
  backdrop-filter:blur(20px) saturate(.96);
  box-shadow:inset 1px 1px rgba(255,255,255,.14),inset -1px -1px rgba(69,101,124,.06),0 16px 37px rgba(17,38,56,.1);
}
.round,.plus{
  color:rgba(235,244,246,.78);border-color:rgba(230,242,245,.23);
  background:linear-gradient(145deg,rgba(229,241,245,.13),rgba(135,171,190,.03));
}
.pill{color:rgba(226,237,239,.54)}
.pill.active{
  color:#f0f6f7;border-color:rgba(234,244,246,.25);
  background:linear-gradient(145deg,rgba(234,244,246,.17),rgba(151,183,198,.045));
}
.page-head span{color:rgba(237,244,245,.91)}
.page-head strong{color:rgba(225,235,237,.48)}
.page-head i{color:rgba(222,233,235,.42)}
.day-number{color:rgba(224,235,237,.33)}
.day-number:hover:not(:disabled){color:rgba(241,247,248,.73);background:rgba(233,242,244,.07)}
.day-cell.today:not(.done) .day-number{color:rgba(242,247,248,.78)}
.day-cell.done .day-number{
  color:rgba(242,248,248,.9);
  background:linear-gradient(145deg,rgba(232,243,244,.17),color-mix(in srgb,var(--accent) 19%,rgba(126,159,173,.04)));
  border-color:rgba(235,244,246,.29);
}
.floating-bubbles .bubble{
  opacity:.93;border-color:rgba(239,247,248,.53);
  background:
    radial-gradient(circle at 27% 17%,rgba(255,255,255,.82) 0 2.8%,rgba(255,255,255,.32) 7%,transparent 18%),
    radial-gradient(circle at 70% 77%,rgba(197,181,219,.085),transparent 38%),
    radial-gradient(circle at 35% 70%,rgba(149,207,211,.075),transparent 43%),
    linear-gradient(145deg,rgba(230,241,243,.13),rgba(126,161,181,.03));
  backdrop-filter:blur(10px) saturate(1.02) brightness(1.04);
  box-shadow:inset 9px 10px 20px rgba(255,255,255,.14),inset -12px -14px 25px rgba(65,95,116,.085),0 18px 36px rgba(13,33,49,.17),0 0 21px color-mix(in srgb,var(--accent) 16%,transparent);
}
.floating-bubbles .bubble-date{color:rgba(234,242,243,.72)}
footer{color:rgba(225,235,237,.5)}
footer button{color:rgba(235,242,243,.68)}
dialog{
  color:#ebf2f3;border-color:rgba(231,241,243,.22);
  background:linear-gradient(155deg,rgba(66,99,116,.9),rgba(46,70,94,.93));
}
input,textarea{background:rgba(232,242,244,.07)}
#toast{background:rgba(57,88,104,.76)}
/* 黎明破晓蓝：移除照片遮罩断层，使用连续天空渐变 */
body{background:#315978;color:#f0f5f5}
.depth-scene{
  background:
    radial-gradient(ellipse at 46% 88%,rgba(255,224,205,.35) 0%,rgba(229,211,214,.16) 18%,transparent 42%),
    radial-gradient(ellipse at 88% 72%,rgba(190,183,220,.16),transparent 34%),
    radial-gradient(ellipse at 18% 36%,rgba(147,199,219,.16),transparent 38%),
    linear-gradient(180deg,#315d84 0%,#4f7e9c 38%,#7ea2b5 68%,#abb9c5 86%,#b9b6c4 100%);
}
.photo-depth,.photo-mid,.photo-front{display:none!important}
.paint-wash{
  opacity:1;mix-blend-mode:normal;
  background:
    radial-gradient(ellipse at 50% 84%,rgba(255,228,210,.13),transparent 34%),
    linear-gradient(180deg,rgba(34,79,112,.03),rgba(92,132,151,.04) 55%,rgba(124,118,148,.08));
}
.paint-wash:after{opacity:.035}
.milky-way{opacity:.22;filter:blur(.75px) saturate(.25)}
.far-planet{
  opacity:.21;
  background:radial-gradient(circle at 34% 28%,rgba(241,246,247,.39),rgba(186,201,217,.11) 35%,rgba(147,139,178,.06) 62%,transparent 74%);
}
.star-field{opacity:.42}
.star{background:rgba(246,249,249,.75);box-shadow:0 0 5px rgba(246,249,249,.62),0 0 10px rgba(187,220,226,.25)}
h1{color:#f6f8f8;text-shadow:0 4px 18px rgba(24,55,75,.22)}
header small{color:rgba(239,246,246,.57)}
nav,#sky{
  border-color:rgba(242,248,248,.27);
  background:linear-gradient(145deg,rgba(234,244,245,.15),rgba(123,159,178,.035));
  backdrop-filter:blur(20px) saturate(.94);
  box-shadow:inset 1px 1px rgba(255,255,255,.18),inset -1px -1px rgba(70,105,126,.055),0 15px 35px rgba(30,66,87,.1);
}
.round,.plus{
  color:rgba(246,249,249,.82);border-color:rgba(240,247,247,.28);
  background:linear-gradient(145deg,rgba(238,246,247,.16),rgba(131,167,185,.03));
}
.pill{color:rgba(240,246,246,.63)}
.pill.active{
  color:#f8faf9;border-color:rgba(244,249,249,.31);
  background:linear-gradient(145deg,rgba(242,248,248,.21),rgba(145,177,191,.045));
}
.page-head span{color:rgba(248,250,249,.95);text-shadow:0 3px 15px rgba(28,62,82,.22)}
.page-head strong{color:rgba(239,245,245,.57)}
.page-head i{color:rgba(236,243,243,.5)}
.day-number{color:rgba(237,244,244,.44);text-shadow:0 1px 8px rgba(45,75,94,.12)}
.day-number:hover:not(:disabled){color:rgba(251,252,252,.82);background:rgba(243,248,248,.09)}
.day-cell.today:not(.done) .day-number{color:rgba(252,253,252,.88)}
.day-cell.done .day-number{
  color:rgba(252,253,252,.95);
  background:linear-gradient(145deg,rgba(243,249,249,.23),color-mix(in srgb,var(--accent) 20%,rgba(149,181,191,.05)));
  border-color:rgba(246,250,250,.37);
  box-shadow:inset 1px 1px rgba(255,255,255,.19),0 0 13px color-mix(in srgb,var(--accent) 20%,transparent);
}
.floating-bubbles .bubble{
  opacity:.94;border-color:rgba(248,251,251,.62);
  background:
    radial-gradient(circle at 27% 17%,rgba(255,255,255,.9) 0 2.8%,rgba(255,255,255,.38) 7%,transparent 18%),
    radial-gradient(circle at 70% 77%,rgba(208,193,224,.09),transparent 38%),
    radial-gradient(circle at 35% 70%,rgba(165,216,218,.085),transparent 43%),
    linear-gradient(145deg,rgba(241,247,247,.16),rgba(136,171,187,.03));
  backdrop-filter:blur(10px) saturate(1.01) brightness(1.06);
  box-shadow:inset 9px 10px 20px rgba(255,255,255,.17),inset -12px -14px 25px rgba(76,109,128,.08),0 18px 36px rgba(36,70,89,.15),0 0 21px color-mix(in srgb,var(--accent) 17%,transparent);
}
.floating-bubbles .bubble-date{color:rgba(247,250,249,.8);text-shadow:0 2px 7px rgba(35,68,87,.38)}
footer{color:rgba(239,245,245,.61)}
footer button{color:rgba(248,250,250,.78)}
dialog{
  color:#f3f7f7;border-color:rgba(237,246,246,.28);
  background:linear-gradient(155deg,rgba(83,122,139,.9),rgba(64,89,116,.93));
  box-shadow:0 30px 75px rgba(34,63,82,.28);
}
#toast{background:rgba(67,102,118,.78)}
/* 纯蓝色阶过渡：移除下半部灰紫与暖色偏移 */
.depth-scene{
  background:
    radial-gradient(ellipse at 48% 86%,rgba(197,225,235,.24) 0%,rgba(171,207,222,.1) 20%,transparent 44%),
    radial-gradient(ellipse at 88% 72%,rgba(139,181,207,.13),transparent 35%),
    radial-gradient(ellipse at 18% 36%,rgba(147,199,219,.16),transparent 38%),
    linear-gradient(180deg,#315d84 0%,#4f7e9c 38%,#78a1b8 68%,#9bb8c8 86%,#abc4d1 100%);
}
.paint-wash{
  background:
    radial-gradient(ellipse at 50% 84%,rgba(205,228,236,.11),transparent 35%),
    linear-gradient(180deg,rgba(34,79,112,.03),rgba(92,132,151,.04) 55%,rgba(91,132,157,.09));
}
/* 上下一致的晨前蓝：取消地平线及底部独立配色 */
body{background:#315d84}
.depth-scene{
  background:
    radial-gradient(ellipse at 48% 32%,rgba(130,182,205,.11),transparent 43%),
    radial-gradient(ellipse at 84% 76%,rgba(112,161,188,.07),transparent 39%),
    linear-gradient(180deg,#315d84 0%,#386887 50%,#315d84 100%);
}
.paint-wash{
  background:linear-gradient(180deg,rgba(29,71,103,.025),rgba(53,98,124,.035),rgba(29,71,103,.04));
}
/* 背景选择器 */
.theme-modal form{padding-bottom:27px}
.background-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 17px}
.background-option{
  padding:0 0 9px;overflow:hidden;border-radius:15px;cursor:pointer;
  color:rgba(232,241,241,.7);border:1px solid rgba(222,235,235,.14);
  background:rgba(218,232,232,.045);
}
.background-option span{display:block;height:78px;margin-bottom:8px;background-position:center;background-size:cover}
.background-option b{font-size:10px;font-weight:500;letter-spacing:.04em}
.background-option.selected{color:#fff;border-color:rgba(238,246,246,.5);box-shadow:0 0 0 2px rgba(219,235,235,.08),0 8px 22px rgba(5,17,27,.16)}
.dawn-option span{background:linear-gradient(165deg,#315d84,#386887 52%,#315d84)}
.celestial-option span{background-image:linear-gradient(rgba(35,72,96,.3),rgba(39,59,82,.45)),url("./assets/celestial-cloudscape.png")}
.freedom-option span{background-image:linear-gradient(rgba(34,72,95,.2),rgba(34,50,74,.48)),url("./assets/freedom-sky.jpg")}
.upload-background{
  display:grid;grid-template-columns:38px 1fr;column-gap:10px;align-items:center;
  padding:13px 14px;margin:0 0 11px;border:1px dashed rgba(222,235,235,.25);border-radius:15px;
  background:rgba(218,232,232,.045);cursor:pointer;
}
.upload-background>span{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(225,238,238,.09);font-size:20px}
.upload-background strong{font-size:12px;font-weight:500;color:rgba(236,244,244,.8)}
.upload-background small{font-size:9px;color:rgba(214,226,226,.38)}
.secondary-btn{width:100%;padding:11px;border-radius:13px;cursor:pointer;color:rgba(222,233,233,.58);border:1px solid rgba(217,231,231,.12);background:transparent}
/* 内置图片经过统一蓝调处理，避免影响 UI 可读性 */
body[data-background="celestial"] .photo-depth,
body[data-background="freedom"] .photo-depth,
body[data-background="custom"] .photo-depth{
  display:block!important;inset:-3%;opacity:.48;
  background-size:cover;background-position:center;
  -webkit-mask-image:none;mask-image:none;animation:blueSkyDrift 34s ease-in-out infinite alternate;
}
body[data-background="celestial"] .photo-depth{
  background-image:url("./assets/celestial-cloudscape.png");
  filter:saturate(.45) contrast(.74) brightness(.68) blur(.6px);
}
body[data-background="freedom"] .photo-depth{
  background-image:url("./assets/freedom-sky.jpg");
  filter:saturate(.5) contrast(.76) brightness(.68) blur(.7px);
}
body[data-background="custom"] .photo-depth{
  background-image:var(--custom-background);
  filter:saturate(.58) contrast(.78) brightness(.68) blur(.45px);
}
body[data-background="celestial"] .paint-wash,
body[data-background="freedom"] .paint-wash,
body[data-background="custom"] .paint-wash{
  background:
    linear-gradient(180deg,rgba(25,64,91,.34),rgba(48,91,115,.3) 48%,rgba(29,57,78,.55)),
    radial-gradient(ellipse at 50% 35%,rgba(137,187,200,.09),transparent 38%);
}
body[data-background="custom"] .milky-way,
body[data-background="custom"] .far-planet{opacity:.16}
.upload-background.selected{border-style:solid;border-color:rgba(238,246,246,.46);background:rgba(229,240,241,.1);box-shadow:0 0 0 2px rgba(220,235,235,.06)}
/* 用户所选事项颜色进入泡泡的毛玻璃与发光丝材质 */
.floating-bubbles .bubble{
  overflow:hidden;
  background:
    radial-gradient(circle at 27% 17%,rgba(255,255,255,.92) 0 2.8%,rgba(255,255,255,.4) 7%,transparent 18%),
    radial-gradient(circle at 66% 73%,color-mix(in srgb,var(--bubble-color) 21%,transparent),transparent 44%),
    radial-gradient(circle at 35% 66%,color-mix(in srgb,var(--bubble-color) 14%,rgba(255,255,255,.03)),transparent 51%),
    linear-gradient(145deg,color-mix(in srgb,var(--bubble-color) 13%,rgba(238,247,247,.12)),rgba(132,168,184,.025));
  border-color:color-mix(in srgb,var(--bubble-color) 30%,rgba(246,251,251,.64));
  backdrop-filter:blur(13px) saturate(1.12) brightness(1.06);
  box-shadow:
    inset 9px 10px 20px rgba(255,255,255,.17),
    inset -12px -14px 25px rgba(76,109,128,.075),
    inset 0 0 25px color-mix(in srgb,var(--bubble-color) 10%,transparent),
    0 18px 36px rgba(36,70,89,.14),
    0 0 23px color-mix(in srgb,var(--bubble-color) 23%,transparent);
}
.bubble-filament{
  position:absolute;z-index:2;left:13%;width:74%;height:34%;border-radius:50%;
  pointer-events:none;opacity:.7;
  border-top:1.25px solid color-mix(in srgb,var(--bubble-color) 72%,rgba(255,255,255,.65));
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--bubble-color) 68%,transparent));
  transform-origin:center;
}
.filament-one{top:37%;transform:rotate(-24deg);animation:filamentOneFlow 6.8s ease-in-out infinite alternate}
.filament-two{
  left:18%;top:52%;width:66%;height:26%;opacity:.48;
  border-top-width:.9px;transform:rotate(29deg);
  animation:filamentTwoFlow 8.4s ease-in-out -2.1s infinite alternate;
}
.floating-bubbles .bubble-date{z-index:4}
.floating-bubbles .bubble.note:after{z-index:5}
@keyframes filamentOneFlow{
  0%{transform:translate(-4px,2px) rotate(-29deg) scaleX(.9);opacity:.38}
  48%{transform:translate(3px,-3px) rotate(-17deg) scaleX(1.08);opacity:.82}
  100%{transform:translate(-1px,4px) rotate(-25deg) scaleX(.96);opacity:.52}
}
@keyframes filamentTwoFlow{
  0%{transform:translate(3px,-2px) rotate(34deg) scaleX(.92);opacity:.3}
  55%{transform:translate(-4px,3px) rotate(22deg) scaleX(1.11);opacity:.66}
  100%{transform:translate(2px,-4px) rotate(31deg) scaleX(.98);opacity:.42}
}
/* 天刚亮：浅蓝白晨光主题 */
body{background:#d7e7ef;color:#466576}
.depth-scene{
  background:
    radial-gradient(ellipse at 48% 28%,rgba(255,255,255,.55),transparent 38%),
    radial-gradient(ellipse at 82% 78%,rgba(211,221,238,.2),transparent 34%),
    linear-gradient(180deg,#a9cbe0 0%,#c2d9e5 46%,#dce7eb 78%,#ebedef 100%);
}
.paint-wash{
  background:
    radial-gradient(ellipse at 50% 20%,rgba(255,255,255,.22),transparent 36%),
    linear-gradient(180deg,rgba(216,235,244,.04),rgba(241,246,247,.08) 58%,rgba(244,242,244,.14));
}
.paint-wash:after{opacity:.025}
.milky-way{opacity:.13;filter:blur(.85px) saturate(.18);mix-blend-mode:soft-light}
.far-planet{
  opacity:.13;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.74),rgba(175,197,216,.13) 36%,rgba(153,159,190,.05) 62%,transparent 74%);
  border-color:rgba(131,160,181,.06);
}
.star-field{opacity:.3}
.star{background:rgba(255,255,255,.82);box-shadow:0 0 4px rgba(255,255,255,.78),0 0 9px rgba(99,150,177,.17)}
h1{color:#3e6175;text-shadow:0 3px 18px rgba(255,255,255,.66)}
header small{color:rgba(57,90,109,.48)}
nav,#sky{
  border-color:rgba(255,255,255,.67);
  background:linear-gradient(145deg,rgba(255,255,255,.29),rgba(221,237,243,.12));
  backdrop-filter:blur(20px) saturate(.92);
  box-shadow:inset 1px 1px rgba(255,255,255,.76),inset -1px -1px rgba(102,143,164,.065),0 15px 35px rgba(75,116,137,.09);
}
.round,.plus{
  color:rgba(51,84,103,.68);border-color:rgba(255,255,255,.72);
  background:linear-gradient(145deg,rgba(255,255,255,.42),rgba(215,233,240,.14));
  box-shadow:inset 1px 1px rgba(255,255,255,.8),0 8px 21px rgba(75,116,137,.08);
}
.pill{color:rgba(60,91,109,.52)}
.pill.active{
  color:#385c70;border-color:rgba(255,255,255,.78);
  background:linear-gradient(145deg,rgba(255,255,255,.48),rgba(213,231,238,.17));
  box-shadow:inset 1px 1px rgba(255,255,255,.85),0 7px 17px rgba(78,117,137,.08);
}
.page-head span{color:rgba(54,86,104,.86);text-shadow:0 3px 15px rgba(255,255,255,.72)}
.page-head strong{color:rgba(65,98,116,.52)}
.page-head i{color:rgba(70,101,118,.45)}
.day-number{color:rgba(57,89,107,.36);text-shadow:none}
.day-number:hover:not(:disabled){color:rgba(48,80,99,.78);background:rgba(255,255,255,.2)}
.day-cell.today:not(.done) .day-number{color:rgba(44,77,97,.8);text-shadow:0 1px 9px rgba(255,255,255,.8)}
.day-cell.done .day-number{
  color:rgba(47,78,96,.88);
  background:linear-gradient(145deg,rgba(255,255,255,.49),color-mix(in srgb,var(--accent) 17%,rgba(216,233,238,.15)));
  border-color:rgba(255,255,255,.8);
  box-shadow:inset 1px 1px rgba(255,255,255,.87),0 0 13px color-mix(in srgb,var(--accent) 16%,transparent);
}
.floating-bubbles .bubble{
  opacity:.92;
  border-color:color-mix(in srgb,var(--bubble-color) 25%,rgba(255,255,255,.82));
  background:
    radial-gradient(circle at 27% 17%,rgba(255,255,255,.98) 0 2.8%,rgba(255,255,255,.58) 7%,transparent 18%),
    radial-gradient(circle at 66% 73%,color-mix(in srgb,var(--bubble-color) 18%,transparent),transparent 44%),
    radial-gradient(circle at 35% 66%,color-mix(in srgb,var(--bubble-color) 11%,rgba(255,255,255,.08)),transparent 51%),
    linear-gradient(145deg,color-mix(in srgb,var(--bubble-color) 10%,rgba(255,255,255,.31)),rgba(199,224,233,.08));
  backdrop-filter:blur(13px) saturate(1.04) brightness(1.08);
  box-shadow:inset 9px 10px 20px rgba(255,255,255,.42),inset -12px -14px 25px rgba(81,119,139,.065),inset 0 0 24px color-mix(in srgb,var(--bubble-color) 8%,transparent),0 17px 34px rgba(71,110,130,.13),0 0 21px color-mix(in srgb,var(--bubble-color) 18%,transparent);
}
.floating-bubbles .bubble-date{color:rgba(57,86,103,.69);text-shadow:0 1px 7px rgba(255,255,255,.85)}
.bubble-filament{opacity:.58;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--bubble-color) 48%,transparent))}
footer{color:rgba(58,90,107,.5)}
footer button{color:rgba(53,84,102,.68)}
#empty{color:rgba(57,89,107,.43);text-shadow:0 2px 12px rgba(255,255,255,.68)}
dialog{
  color:#416172;border-color:rgba(255,255,255,.78);
  background:linear-gradient(155deg,rgba(247,251,252,.94),rgba(222,236,242,.94));
  box-shadow:0 28px 70px rgba(75,108,126,.22);
}
dialog::backdrop{background:rgba(75,108,126,.24)}
.close{color:rgba(54,85,102,.48)}
form small,label{color:rgba(58,89,106,.54)}
input,textarea{border-color:rgba(89,128,147,.13);background:rgba(255,255,255,.48);color:#3f5f70}
input::placeholder,textarea::placeholder{color:rgba(63,96,113,.34)}
.primary{border-color:rgba(255,255,255,.72);background:linear-gradient(125deg,rgba(102,162,169,.75),rgba(112,137,170,.66));color:#fff}
.danger-btn{color:rgba(141,72,80,.65);border-color:rgba(164,87,97,.12);background:rgba(165,87,98,.055)}
#toast{background:rgba(70,105,121,.76);color:#f5f8f8;border-color:rgba(255,255,255,.45)}
.background-option{color:rgba(57,88,105,.62);border-color:rgba(109,143,159,.13);background:rgba(255,255,255,.27)}
.background-option.selected{color:#36596d;border-color:rgba(95,134,153,.42);box-shadow:0 0 0 2px rgba(255,255,255,.4),0 8px 20px rgba(78,112,130,.1)}
.upload-background{border-color:rgba(95,134,153,.24);background:rgba(255,255,255,.27)}
.upload-background strong{color:rgba(54,85,102,.78)}
.upload-background small{color:rgba(64,96,113,.44)}
.upload-background>span{background:rgba(255,255,255,.42)}
.secondary-btn{color:rgba(60,91,108,.57);border-color:rgba(91,129,147,.13)}
/* 图片背景也统一提亮为清晨质感 */
body[data-background="celestial"] .photo-depth,
body[data-background="freedom"] .photo-depth,
body[data-background="custom"] .photo-depth{
  opacity:.42;filter:saturate(.42) contrast(.72) brightness(.88) blur(.45px);
}
body[data-background="celestial"] .paint-wash,
body[data-background="freedom"] .paint-wash,
body[data-background="custom"] .paint-wash{
  background:linear-gradient(180deg,rgba(177,211,226,.34),rgba(211,227,233,.28) 52%,rgba(224,227,234,.5));
}
/* 清澈天蓝：以蓝色本身塑造层次，取消大面积雾白 */
body{background:#62a9d4;color:#184f6e}
.depth-scene{
  background:
    radial-gradient(ellipse at 48% 25%,rgba(111,199,233,.32),transparent 40%),
    radial-gradient(ellipse at 85% 78%,rgba(87,159,209,.16),transparent 34%),
    linear-gradient(165deg,#79bfe4 0%,#65add8 48%,#72b5d9 100%);
}
.paint-wash{
  background:
    radial-gradient(ellipse at 46% 24%,rgba(117,201,232,.12),transparent 38%),
    linear-gradient(180deg,rgba(54,151,205,.04),rgba(61,143,190,.08));
}
.paint-wash:after{opacity:.018}
.milky-way{opacity:.17;filter:blur(.75px) saturate(.7);mix-blend-mode:screen}
.far-planet{
  opacity:.16;
  background:radial-gradient(circle at 34% 28%,rgba(194,231,246,.46),rgba(89,155,200,.12) 37%,rgba(92,128,185,.06) 62%,transparent 74%);
}
.star-field{opacity:.34}
.star{background:rgba(208,239,250,.8);box-shadow:0 0 4px rgba(199,234,248,.7),0 0 9px rgba(38,122,174,.18)}
h1{color:#174f73;text-shadow:0 3px 16px rgba(154,211,237,.38)}
header small{color:rgba(23,75,104,.52)}
nav,#sky{
  border-color:rgba(174,219,239,.48);
  background:linear-gradient(145deg,rgba(57,143,188,.14),rgba(85,156,194,.055));
  backdrop-filter:blur(19px) saturate(1.04);
  box-shadow:inset 1px 1px rgba(197,229,242,.32),inset -1px -1px rgba(25,99,142,.06),0 14px 32px rgba(35,106,147,.1);
}
.round,.plus{
  color:rgba(20,79,111,.76);border-color:rgba(169,216,236,.5);
  background:linear-gradient(145deg,rgba(72,155,198,.17),rgba(67,137,179,.06));
  box-shadow:inset 1px 1px rgba(194,228,242,.28),0 8px 20px rgba(31,102,142,.09);
}
.pill{color:rgba(20,75,105,.58)}
.pill.active{
  color:#104d70;border-color:rgba(166,215,235,.57);
  background:linear-gradient(145deg,rgba(95,172,208,.24),rgba(53,134,178,.08));
  box-shadow:inset 1px 1px rgba(196,228,241,.34),0 7px 17px rgba(34,103,143,.09);
}
.page-head span{color:rgba(15,70,101,.9);text-shadow:0 2px 12px rgba(152,210,235,.42)}
.page-head strong{color:rgba(20,77,107,.58)}
.page-head i{color:rgba(22,78,107,.49)}
.day-number{color:rgba(20,75,104,.43);text-shadow:none}
.day-number:hover:not(:disabled){color:rgba(13,67,98,.82);background:rgba(71,153,195,.12)}
.day-cell.today:not(.done) .day-number{color:rgba(11,66,98,.88)}
.day-cell.done .day-number{
  color:rgba(8,62,93,.92);
  background:linear-gradient(145deg,rgba(112,188,219,.31),color-mix(in srgb,var(--accent) 19%,rgba(70,151,190,.08)));
  border-color:rgba(164,215,234,.65);
  box-shadow:inset 1px 1px rgba(198,229,241,.4),0 0 13px color-mix(in srgb,var(--accent) 18%,transparent);
}
.floating-bubbles .bubble{
  opacity:.94;
  border-color:color-mix(in srgb,var(--bubble-color) 31%,rgba(171,221,239,.66));
  background:
    radial-gradient(circle at 27% 17%,rgba(221,246,253,.76) 0 2.8%,rgba(186,230,245,.34) 7%,transparent 18%),
    radial-gradient(circle at 66% 73%,color-mix(in srgb,var(--bubble-color) 22%,transparent),transparent 44%),
    radial-gradient(circle at 35% 66%,color-mix(in srgb,var(--bubble-color) 14%,rgba(82,168,205,.05)),transparent 51%),
    linear-gradient(145deg,color-mix(in srgb,var(--bubble-color) 13%,rgba(104,184,215,.17)),rgba(50,137,181,.045));
  backdrop-filter:blur(12px) saturate(1.14) brightness(1.02);
  box-shadow:inset 9px 10px 20px rgba(197,232,244,.24),inset -12px -14px 25px rgba(23,100,143,.075),inset 0 0 23px color-mix(in srgb,var(--bubble-color) 10%,transparent),0 17px 34px rgba(28,99,139,.13),0 0 21px color-mix(in srgb,var(--bubble-color) 19%,transparent);
}
.floating-bubbles .bubble:before{background:linear-gradient(90deg,rgba(216,243,251,.62),rgba(154,213,235,.13))}
.floating-bubbles .bubble-date{color:rgba(13,67,96,.73);text-shadow:0 1px 6px rgba(159,215,237,.48)}
.bubble-filament{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--bubble-color) 55%,transparent))}
footer{color:rgba(18,73,101,.55)}
footer button{color:rgba(13,68,98,.72)}
#empty{color:rgba(18,74,103,.48);text-shadow:none}
dialog{
  color:#184f6b;border-color:rgba(165,214,234,.54);
  background:linear-gradient(155deg,rgba(126,192,218,.94),rgba(105,169,204,.95));
  box-shadow:0 28px 68px rgba(29,93,130,.24);
}
dialog::backdrop{background:rgba(35,94,126,.25)}
.close{color:rgba(15,65,91,.52)}
form small,label{color:rgba(17,68,95,.58)}
input,textarea{border-color:rgba(38,111,149,.14);background:rgba(124,191,216,.28);color:#124b69}
input::placeholder,textarea::placeholder{color:rgba(20,73,99,.4)}
.primary{border-color:rgba(168,215,233,.58);background:linear-gradient(125deg,rgba(38,134,169,.76),rgba(72,122,171,.68));color:#edf8fb}
.danger-btn{color:rgba(112,45,55,.68);border-color:rgba(129,57,68,.12);background:rgba(133,61,72,.055)}
#toast{background:rgba(28,95,127,.78);color:#e5f5fa;border-color:rgba(164,213,232,.44)}
.background-option{color:rgba(17,68,94,.67);border-color:rgba(41,113,149,.14);background:rgba(96,173,206,.18)}
.background-option.selected{color:#104b6b;border-color:rgba(34,109,147,.4);box-shadow:0 0 0 2px rgba(150,207,229,.3),0 8px 20px rgba(31,94,127,.1)}
.upload-background{border-color:rgba(37,108,145,.25);background:rgba(97,174,206,.18)}
.upload-background strong{color:rgba(16,66,92,.8)}
.upload-background small{color:rgba(18,72,99,.48)}
.upload-background>span{background:rgba(86,163,197,.24)}
.secondary-btn{color:rgba(15,67,94,.6);border-color:rgba(35,105,141,.14)}
/* 图片背景使用天蓝滤镜，不再覆盖乳白蒙层 */
body[data-background="celestial"] .photo-depth,
body[data-background="freedom"] .photo-depth,
body[data-background="custom"] .photo-depth{
  opacity:.4;filter:saturate(.56) contrast(.76) brightness(.8) blur(.4px);
}
body[data-background="celestial"] .paint-wash,
body[data-background="freedom"] .paint-wash,
body[data-background="custom"] .paint-wash{
  background:linear-gradient(180deg,rgba(56,145,194,.3),rgba(71,151,190,.26) 52%,rgba(54,126,170,.4));
}
/* 奶油蓝：柔和粉蓝、暖奶油光与低对比玻璃 */
body{background:#a7c7da;color:#416176}
.depth-scene{
  background:
    radial-gradient(ellipse at 18% 12%,rgba(244,225,190,.25),transparent 35%),
    radial-gradient(ellipse at 78% 76%,rgba(188,185,215,.12),transparent 36%),
    linear-gradient(165deg,#91b9d5 0%,#a8c8dc 48%,#bdd1dc 100%);
}
.paint-wash{
  background:
    radial-gradient(ellipse at 22% 12%,rgba(242,221,188,.12),transparent 36%),
    linear-gradient(180deg,rgba(153,193,216,.04),rgba(181,207,219,.07));
}
.paint-wash:after{opacity:.02}
.milky-way{opacity:.15;filter:blur(.8px) saturate(.35)}
.milky-way:before{background:radial-gradient(ellipse at center,rgba(242,229,209,.16),rgba(173,198,216,.06) 48%,transparent 72%)}
.far-planet{
  opacity:.15;
  background:radial-gradient(circle at 34% 28%,rgba(244,231,210,.48),rgba(169,193,210,.11) 37%,rgba(152,149,183,.05) 62%,transparent 74%);
}
.star-field{opacity:.31}
.star{background:rgba(244,235,219,.74);box-shadow:0 0 4px rgba(244,235,219,.58),0 0 9px rgba(99,142,173,.15)}
h1{color:#3f6179;text-shadow:0 3px 15px rgba(232,220,199,.32)}
header small{color:rgba(57,86,105,.48)}
nav,#sky{
  border-color:rgba(224,219,207,.5);
  background:linear-gradient(145deg,rgba(219,228,228,.22),rgba(144,179,198,.08));
  backdrop-filter:blur(19px) saturate(.9);
  box-shadow:inset 1px 1px rgba(241,229,210,.3),inset -1px -1px rgba(73,106,128,.055),0 14px 31px rgba(68,100,121,.09);
}
.round,.plus{
  color:rgba(58,88,108,.68);border-color:rgba(224,218,205,.54);
  background:linear-gradient(145deg,rgba(225,229,222,.25),rgba(135,174,196,.08));
  box-shadow:inset 1px 1px rgba(243,230,210,.32),0 8px 19px rgba(68,101,122,.08);
}
.pill{color:rgba(59,88,106,.54)}
.pill.active{
  color:#3b6078;border-color:rgba(228,221,207,.58);
  background:linear-gradient(145deg,rgba(228,230,219,.29),rgba(145,179,196,.1));
  box-shadow:inset 1px 1px rgba(244,230,209,.38),0 7px 16px rgba(67,100,120,.08);
}
.page-head span{color:rgba(59,91,111,.87);text-shadow:0 2px 12px rgba(234,220,200,.28)}
.page-head strong{color:rgba(64,94,112,.54)}
.page-head i{color:rgba(67,96,113,.47)}
.day-number{color:rgba(63,92,109,.38)}
.day-number:hover:not(:disabled){color:rgba(54,84,103,.77);background:rgba(213,222,219,.13)}
.day-cell.today:not(.done) .day-number{color:rgba(52,82,101,.82)}
.day-cell.done .day-number{
  color:rgba(55,83,101,.87);
  background:linear-gradient(145deg,rgba(226,227,216,.31),color-mix(in srgb,var(--accent) 16%,rgba(144,178,193,.08)));
  border-color:rgba(229,221,207,.63);
  box-shadow:inset 1px 1px rgba(245,231,210,.4),0 0 12px color-mix(in srgb,var(--accent) 15%,transparent);
}
.floating-bubbles .bubble{
  opacity:.93;
  border-color:color-mix(in srgb,var(--bubble-color) 25%,rgba(232,222,207,.67));
  background:
    radial-gradient(circle at 27% 17%,rgba(246,233,211,.8) 0 2.8%,rgba(232,222,205,.35) 7%,transparent 18%),
    radial-gradient(circle at 66% 73%,color-mix(in srgb,var(--bubble-color) 19%,transparent),transparent 44%),
    radial-gradient(circle at 35% 66%,color-mix(in srgb,var(--bubble-color) 12%,rgba(173,201,213,.05)),transparent 51%),
    linear-gradient(145deg,color-mix(in srgb,var(--bubble-color) 11%,rgba(218,226,219,.19)),rgba(127,167,189,.04));
  backdrop-filter:blur(12px) saturate(.96) brightness(1.03);
  box-shadow:inset 9px 10px 20px rgba(239,227,209,.24),inset -12px -14px 25px rgba(66,101,124,.07),inset 0 0 23px color-mix(in srgb,var(--bubble-color) 9%,transparent),0 17px 33px rgba(64,97,117,.12),0 0 20px color-mix(in srgb,var(--bubble-color) 16%,transparent);
}
.floating-bubbles .bubble:before{background:linear-gradient(90deg,rgba(245,232,212,.64),rgba(209,215,205,.13))}
.floating-bubbles .bubble-date{color:rgba(58,86,103,.68);text-shadow:0 1px 6px rgba(233,222,204,.42)}
footer{color:rgba(59,88,105,.5)}
footer button{color:rgba(55,84,102,.66)}
#empty{color:rgba(61,91,109,.46)}
dialog{
  color:#426075;border-color:rgba(228,220,207,.58);
  background:linear-gradient(155deg,rgba(203,218,220,.95),rgba(172,198,214,.95));
  box-shadow:0 27px 65px rgba(66,96,115,.2);
}
dialog::backdrop{background:rgba(75,103,120,.22)}
.close{color:rgba(55,83,100,.5)}
form small,label{color:rgba(59,88,105,.56)}
input,textarea{border-color:rgba(78,111,131,.12);background:rgba(219,225,218,.26);color:#3f5e72}
input::placeholder,textarea::placeholder{color:rgba(65,94,111,.37)}
.primary{border-color:rgba(230,221,207,.58);background:linear-gradient(125deg,rgba(91,147,158,.7),rgba(101,126,159,.63));color:#f3eee5}
.danger-btn{color:rgba(123,62,69,.65);border-color:rgba(142,72,81,.11);background:rgba(142,73,82,.05)}
#toast{background:rgba(66,98,113,.76);color:#f1ecdf;border-color:rgba(228,219,205,.38)}
.background-option{color:rgba(58,87,104,.66);border-color:rgba(83,115,133,.12);background:rgba(211,222,218,.21)}
.background-option.selected{color:#3d5e74;border-color:rgba(84,118,137,.36);box-shadow:0 0 0 2px rgba(231,221,206,.25),0 8px 19px rgba(66,96,114,.08)}
.upload-background{border-color:rgba(80,113,132,.22);background:rgba(211,222,218,.21)}
.upload-background strong{color:rgba(56,84,101,.77)}
.upload-background small{color:rgba(63,92,109,.45)}
.upload-background>span{background:rgba(216,224,217,.3)}
.secondary-btn{color:rgba(58,87,104,.58);border-color:rgba(80,112,131,.12)}
body[data-background="celestial"] .paint-wash,
body[data-background="freedom"] .paint-wash,
body[data-background="custom"] .paint-wash{
  background:linear-gradient(180deg,rgba(143,183,207,.28),rgba(173,200,211,.25) 52%,rgba(184,198,208,.42));
}
/* 动漫油彩晴空：高纯度天蓝、可见笔触、暖奶油云团 */
body{background:#62afe2;color:#174f78}
.depth-scene{
  background:linear-gradient(180deg,#48a4e2 0%,#68b9e9 48%,#86caef 100%);
}
.milky-way,.far-planet,.star-field{display:none!important}
.photo-depth,.photo-mid,.photo-front{display:none!important}
.anime-paint-sky{position:absolute;z-index:1;inset:0;overflow:hidden;pointer-events:none}
.anime-paint-sky:before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 16% 8%,rgba(171,225,250,.42),transparent 32%),
    radial-gradient(ellipse at 82% 57%,rgba(54,155,220,.2),transparent 41%),
    linear-gradient(155deg,rgba(40,142,215,.13),transparent 37%,rgba(153,216,244,.22));
}
.anime-paint-sky:after{
  content:"";position:absolute;inset:0;opacity:.11;mix-blend-mode:multiply;
  background-image:
    repeating-linear-gradient(167deg,rgba(21,109,176,.28) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(12deg,rgba(235,218,181,.12) 0 1px,transparent 1px 11px);
  filter:blur(.3px);
}
.sky-brush{position:absolute;display:block;height:42px;border-radius:50%;filter:blur(4px);opacity:.5}
.brush-one{width:125%;left:-18%;top:15%;transform:rotate(-11deg);background:linear-gradient(90deg,transparent,#298ed1 22%,#8bd0ef 53%,transparent 88%)}
.brush-two{width:112%;right:-24%;top:49%;transform:rotate(8deg);background:linear-gradient(90deg,transparent,#b5def0 28%,#2d94d5 66%,transparent)}
.brush-three{width:98%;left:-20%;bottom:10%;height:55px;transform:rotate(-7deg);background:linear-gradient(90deg,transparent,#3a9bd5 26%,#9dd7ee 62%,transparent)}
.paint-cloud{position:absolute;display:block;border-radius:50%;filter:blur(1.6px);opacity:.76;animation:paintCloudDrift 24s ease-in-out infinite alternate}
.cloud-one{
  width:310px;height:110px;right:-105px;top:8%;
  background:
    radial-gradient(ellipse at 22% 64%,#eedebf 0 16%,transparent 37%),
    radial-gradient(ellipse at 48% 42%,#f3e5c9 0 23%,transparent 45%),
    radial-gradient(ellipse at 75% 62%,#d7d7cc 0 18%,transparent 40%);
  filter:blur(2px) drop-shadow(-12px 13px 0 rgba(61,145,199,.14));
}
.cloud-two{
  width:360px;height:125px;left:-175px;top:43%;animation-delay:-9s;
  background:
    radial-gradient(ellipse at 24% 56%,#d8dfd8 0 18%,transparent 39%),
    radial-gradient(ellipse at 49% 38%,#f1e2c4 0 22%,transparent 44%),
    radial-gradient(ellipse at 74% 62%,#e9ddc6 0 19%,transparent 41%);
  filter:blur(2px) drop-shadow(15px 14px 0 rgba(37,126,190,.13));
}
.cloud-three{
  width:430px;height:145px;right:-200px;bottom:1%;opacity:.55;animation-delay:-15s;
  background:
    radial-gradient(ellipse at 25% 56%,#e6dcc7 0 19%,transparent 41%),
    radial-gradient(ellipse at 52% 37%,#f2e4ca 0 22%,transparent 44%),
    radial-gradient(ellipse at 78% 61%,#d7dcd5 0 20%,transparent 42%);
}
.paint-wash{
  z-index:2;opacity:1;
  background:
    radial-gradient(ellipse at 18% 10%,rgba(243,216,165,.1),transparent 32%),
    linear-gradient(180deg,rgba(23,132,207,.015),rgba(48,155,215,.035));
}
.paint-wash:after{display:none}
/* 透明蓝功能区，不再覆盖灰白蒙层 */
nav,#sky{
  border-color:rgba(142,204,237,.67);
  background:linear-gradient(145deg,rgba(48,149,213,.13),rgba(102,190,229,.08));
  backdrop-filter:blur(11px) saturate(1.16);
  box-shadow:inset 1px 1px rgba(191,226,243,.35),inset -1px -1px rgba(11,100,169,.07),0 15px 32px rgba(20,101,157,.1);
}
h1{color:#0e5687;text-shadow:0 2px 13px rgba(177,221,241,.42)}
header small{color:rgba(11,76,117,.58)}
.round,.plus{
  color:#135b87;border-color:rgba(144,205,234,.66);
  background:linear-gradient(145deg,rgba(66,163,216,.17),rgba(103,189,225,.09));
  box-shadow:inset 1px 1px rgba(190,227,242,.42),0 8px 19px rgba(20,98,150,.1);
}
.pill{color:rgba(13,77,116,.64)}
.pill.active{
  color:#0a527f;border-color:rgba(142,205,234,.7);
  background:linear-gradient(145deg,rgba(94,181,220,.27),rgba(55,153,208,.12));
  box-shadow:inset 1px 1px rgba(192,227,241,.45),0 7px 16px rgba(19,96,146,.1);
}
.page-head span{color:#0d527e;text-shadow:0 2px 10px rgba(163,214,238,.48);font-weight:500}
.page-head strong{color:rgba(10,75,113,.62)}
.page-head i{color:rgba(11,78,116,.55)}
.day-number{color:rgba(10,75,113,.47);font-weight:500}
.day-number:hover:not(:disabled){color:#074b78;background:rgba(72,164,213,.15)}
.day-cell.today:not(.done) .day-number{color:#064a77;font-weight:700}
.day-cell.done .day-number{
  color:#084b74;
  background:linear-gradient(145deg,rgba(126,200,229,.35),color-mix(in srgb,var(--accent) 18%,rgba(60,159,207,.1)));
  border-color:rgba(142,207,234,.75);
  box-shadow:inset 1px 1px rgba(196,230,242,.48),0 0 12px color-mix(in srgb,var(--accent) 18%,transparent);
}
.floating-bubbles .bubble{
  border-color:color-mix(in srgb,var(--bubble-color) 29%,rgba(157,216,237,.72));
  background:
    radial-gradient(circle at 27% 17%,rgba(227,241,232,.82) 0 2.8%,rgba(177,218,231,.35) 7%,transparent 18%),
    radial-gradient(circle at 66% 73%,color-mix(in srgb,var(--bubble-color) 22%,transparent),transparent 44%),
    linear-gradient(145deg,color-mix(in srgb,var(--bubble-color) 13%,rgba(75,168,209,.17)),rgba(40,137,192,.04));
  backdrop-filter:blur(11px) saturate(1.18);
  box-shadow:inset 9px 10px 20px rgba(201,229,233,.24),inset -12px -14px 25px rgba(18,99,153,.08),0 17px 33px rgba(20,91,138,.15),0 0 20px color-mix(in srgb,var(--bubble-color) 19%,transparent);
}
.floating-bubbles .bubble-date{color:#0b527c;text-shadow:0 1px 5px rgba(174,218,234,.45)}
footer{color:rgba(10,72,108,.61)}
footer button{color:#0b527e}
#empty{color:rgba(10,73,111,.53)}
dialog{
  color:#154f72;border-color:rgba(139,202,231,.7);
  background:linear-gradient(155deg,rgba(126,198,228,.95),rgba(93,176,218,.95));
  box-shadow:0 27px 65px rgba(20,88,131,.24);
}
dialog::backdrop{background:rgba(32,103,145,.24)}
.close{color:rgba(8,68,104,.56)}
form small,label{color:rgba(10,72,108,.61)}
input,textarea{border-color:rgba(12,91,134,.16);background:rgba(118,194,224,.27);color:#0d4c70}
input::placeholder,textarea::placeholder{color:rgba(11,75,111,.43)}
.primary{background:linear-gradient(125deg,#278eb9,#4d80b5);border-color:rgba(145,207,233,.7);color:#eff8f5}
#toast{background:rgba(16,92,133,.8);color:#f1f5e9}
.dawn-option span{background:linear-gradient(165deg,#48a4e2,#68b9e9 48%,#86caef)}
@keyframes paintCloudDrift{0%{transform:translateX(-8px) scale(1)}100%{transform:translateX(18px) translateY(-4px) scale(1.04)}}
/* 图片背景被选择时关闭油彩天空层 */
body[data-background="celestial"] .anime-paint-sky,
body[data-background="freedom"] .anime-paint-sky,
body[data-background="custom"] .anime-paint-sky{display:none}
body[data-background="celestial"] .paint-wash,
body[data-background="freedom"] .paint-wash,
body[data-background="custom"] .paint-wash{
  background:linear-gradient(180deg,rgba(42,139,197,.26),rgba(66,163,207,.24) 52%,rgba(46,132,184,.38));
}

/* Liquid glass bubbles: clear center, thick refractive rim, directional highlights. */
.floating-bubbles .bubble{
  opacity:.97;
  border:1px solid rgba(246,253,255,.68);
  background:
    radial-gradient(ellipse at 25% 17%,rgba(255,255,255,.98) 0 3%,rgba(255,255,255,.62) 4.5%,rgba(255,255,255,.13) 8%,transparent 13%),
    radial-gradient(ellipse at 35% 25%,rgba(255,255,255,.2),transparent 27%),
    radial-gradient(ellipse at 73% 83%,rgba(255,255,255,.48) 0 1.5%,rgba(191,240,247,.2) 5%,transparent 16%),
    radial-gradient(circle at 48% 45%,rgba(255,255,255,.025) 0 51%,rgba(206,238,246,.07) 68%,rgba(117,187,207,.16) 82%,rgba(239,252,254,.34) 91%,transparent 96%),
    conic-gradient(from 205deg at 50% 50%,
      rgba(74,225,222,.25),
      rgba(255,255,255,.02) 15%,
      rgba(178,190,255,.17) 33%,
      rgba(255,255,255,.28) 51%,
      rgba(255,188,228,.13) 68%,
      rgba(91,224,231,.23) 86%,
      rgba(74,225,222,.25));
  -webkit-backdrop-filter:blur(1.2px) saturate(1.28) contrast(1.08) brightness(1.07);
  backdrop-filter:blur(1.2px) saturate(1.28) contrast(1.08) brightness(1.07);
  box-shadow:
    inset 5px 6px 9px rgba(255,255,255,.27),
    inset -7px -8px 12px rgba(38,86,115,.12),
    inset 0 -5px 8px rgba(208,247,251,.16),
    inset 0 0 0 2px rgba(255,255,255,.055),
    0 2px 2px rgba(32,72,96,.08),
    0 13px 24px rgba(31,72,96,.14),
    0 0 2px rgba(255,255,255,.9);
  filter:drop-shadow(-1px 0 1px rgba(77,226,226,.22)) drop-shadow(1px 0 1px rgba(198,167,242,.2));
  transform-origin:center;
  transition:none;
  will-change:translate,border-radius,scale,rotate,filter;
  animation:bubbleBorn .9s cubic-bezier(.16,.86,.2,1.18) both,liquidGlassAura 4.8s ease-in-out 1s infinite alternate;
}
.floating-bubbles .bubble:before{
  width:47%;height:39%;left:9%;top:5%;
  border-radius:55% 45% 58% 42%;
  border-top:3.5px solid rgba(255,255,255,.94);
  border-left:1.5px solid rgba(255,255,255,.3);
  background:transparent;
  box-shadow:-1px -1px 2px rgba(255,255,255,.25);
  transform:rotate(-17deg);
  filter:drop-shadow(0 0 2.5px rgba(255,255,255,.44));
}
.floating-bubbles .bubble:after{
  content:"";
  position:absolute;inset:3px;border-radius:inherit;
  border:1px solid rgba(255,255,255,.2);
  box-shadow:
    inset 3px 3px 5px rgba(255,255,255,.16),
    inset -4px -5px 8px rgba(45,91,120,.08),
    inset 0 -2px 3px rgba(226,250,252,.16),
    0 0 0 1px rgba(121,207,224,.065);
}
.floating-bubbles .bubble-date{
  color:rgba(22,64,87,.78);
  font-weight:650;
  text-shadow:0 1px 1px rgba(255,255,255,.9),0 2px 8px rgba(75,118,140,.16);
  rotate:calc(-1 * var(--wind-angle,0deg));
  transition:none;
}
.bubble-filament{
  border:0;
  opacity:.68;
  filter:drop-shadow(0 0 2px rgba(255,255,255,.28));
}
.filament-one{
  left:auto;right:7%;top:19%;width:29%;height:38%;
  border-right:2px solid rgba(255,255,255,.68);
  border-radius:50%;
  transform:rotate(-19deg);
  animation:dropletGlintOne 7.5s ease-in-out infinite alternate;
}
.filament-two{
  left:17%;top:auto;bottom:5%;width:51%;height:21%;
  border-bottom:2px solid rgba(239,253,255,.72);
  border-radius:50%;
  transform:rotate(-9deg);
  animation:dropletGlintTwo 9s ease-in-out -2.4s infinite alternate;
}
@keyframes dropletGlintOne{
  from{opacity:.42;transform:translate(-1px,1px) rotate(-21deg) scaleY(.9)}
  to{opacity:.78;transform:translate(2px,-1px) rotate(-15deg) scaleY(1.08)}
}
@keyframes dropletGlintTwo{
  from{opacity:.38;transform:translate(1px,-1px) rotate(-12deg) scaleX(.9)}
  to{opacity:.7;transform:translate(-2px,1px) rotate(-6deg) scaleX(1.06)}
}
.floating-bubbles .bubble.note{
  box-shadow:
    inset 3px 4px 7px rgba(255,255,255,.24),
    inset -5px -6px 9px rgba(58,100,126,.09),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 11px 22px rgba(31,72,96,.11),
    0 0 10px color-mix(in srgb,var(--bubble-color) 11%,transparent);
}
.floating-bubbles .bubble.note:after{
  content:"✦";
  inset:auto;right:12%;bottom:9%;
  border:0;box-shadow:none;
  color:rgba(255,255,255,.9);
  font-size:13px;
  text-shadow:0 0 8px rgba(255,255,255,.8);
}
.floating-bubbles .bubble.welcome{
  animation:welcomeFloat 1.35s cubic-bezier(.15,.8,.15,1) both,liquidGlassAura 4.8s 1.35s ease-in-out infinite alternate;
}
@keyframes liquidGlassAura{
  from{
    filter:brightness(.98) saturate(1.04)
      drop-shadow(-1px 0 1px rgba(77,226,226,.2))
      drop-shadow(1px 0 1px rgba(198,167,242,.18));
  }
  to{
    filter:brightness(1.08) saturate(1.14)
      drop-shadow(-1.5px 0 1.5px rgba(77,226,226,.3))
      drop-shadow(1.5px 0 1.5px rgba(198,167,242,.26));
  }
}
/* 最终校色：动漫手绘晴空，保留蓝色纯度并让油彩笔触更清晰 */
.depth-scene{
  background:
    linear-gradient(174deg,rgba(18,126,205,.12),transparent 31%),
    linear-gradient(180deg,#3d9fe0 0%,#5db2e7 43%,#79c5ec 100%);
}
.anime-paint-sky:before{
  background:
    radial-gradient(ellipse at 7% 4%,rgba(160,219,246,.3),transparent 27%),
    radial-gradient(ellipse at 89% 64%,rgba(35,143,211,.19),transparent 38%),
    linear-gradient(158deg,rgba(21,124,203,.18),transparent 34%,rgba(126,205,240,.17));
}
.anime-paint-sky:after{
  opacity:.13;
  background-image:
    repeating-linear-gradient(168deg,rgba(10,104,178,.24) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(9deg,rgba(198,231,244,.14) 0 1px,transparent 1px 9px);
  filter:none;
}
.sky-brush{filter:blur(1.8px);opacity:.43}
.brush-one{height:24px;background:linear-gradient(90deg,transparent,#177fc8 21%,#88cef0 49%,#2e97d7 70%,transparent 91%)}
.brush-two{height:28px;background:linear-gradient(90deg,transparent,#91d0ee 24%,#248bcf 61%,#79c7ea 79%,transparent)}
.brush-three{height:34px;background:linear-gradient(90deg,transparent,#268bc9 24%,#9bd5ef 58%,#318fc9 76%,transparent)}
.paint-cloud{filter:none;opacity:.57}
.cloud-one{
  background:
    radial-gradient(ellipse at 23% 65%,rgba(246,226,187,.88) 0 12%,rgba(235,217,184,.54) 22%,transparent 38%),
    radial-gradient(ellipse at 49% 44%,rgba(251,234,202,.9) 0 17%,rgba(236,220,191,.55) 28%,transparent 45%),
    radial-gradient(ellipse at 76% 63%,rgba(222,225,213,.74) 0 14%,rgba(209,219,215,.36) 25%,transparent 40%);
  filter:drop-shadow(-10px 10px 0 rgba(27,119,184,.12));
}
.cloud-two{
  opacity:.49;
  background:
    radial-gradient(ellipse at 24% 57%,rgba(217,226,218,.73) 0 14%,rgba(207,220,216,.36) 25%,transparent 39%),
    radial-gradient(ellipse at 49% 40%,rgba(249,231,195,.86) 0 16%,rgba(237,218,185,.47) 27%,transparent 44%),
    radial-gradient(ellipse at 74% 62%,rgba(241,225,196,.75) 0 14%,rgba(226,216,198,.35) 25%,transparent 41%);
  filter:drop-shadow(12px 10px 0 rgba(25,115,180,.11));
}
.cloud-three{opacity:.39;filter:none}
nav,#sky{
  background:linear-gradient(145deg,rgba(45,148,210,.19),rgba(113,198,232,.1));
  border-color:rgba(174,219,239,.72);
  backdrop-filter:blur(8px) saturate(1.2);
}
.day-number{color:rgba(5,66,105,.59)}
.page-head strong{color:rgba(5,67,105,.72)}
.page-head i{color:rgba(5,67,105,.64)}
.pill{color:rgba(5,67,105,.73)}
header small{color:rgba(5,65,104,.67)}
footer{color:rgba(5,65,103,.7)}

/* Neutral translucent glass surfaces over the saturated sky. */
nav,
#sky{
  border:1px solid rgba(248,253,255,.6);
  background:
    linear-gradient(145deg,rgba(255,255,255,.27),rgba(238,247,250,.15) 48%,rgba(202,226,237,.2)),
    rgba(241,248,250,.14);
  -webkit-backdrop-filter:blur(19px) saturate(.62) contrast(.96) brightness(1.08);
  backdrop-filter:blur(19px) saturate(.62) contrast(.96) brightness(1.08);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.9),
    inset -1px -1px 0 rgba(59,109,136,.25),
    inset 0 3px 8px rgba(255,255,255,.12),
    inset 0 -8px 16px rgba(82,131,154,.11),
    0 3px 4px rgba(41,88,112,.1),
    0 18px 34px rgba(20,67,94,.14);
}
nav{
  background:
    linear-gradient(145deg,rgba(255,255,255,.34),rgba(238,247,250,.2) 48%,rgba(205,229,238,.26)),
    rgba(242,249,251,.18);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.94),
    inset -1px -1px 0 rgba(59,109,136,.24),
    inset 0 -6px 12px rgba(83,132,155,.1),
    0 3px 4px rgba(41,88,112,.09),
    0 14px 27px rgba(20,67,94,.13);
}
#sky:before{
  opacity:.08;
  mix-blend-mode:screen;
}
#sky:after{
  opacity:.12;
  background:linear-gradient(180deg,transparent,rgba(205,228,236,.3));
}
.round,
.plus{
  border:1px solid rgba(251,254,255,.68);
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.72),transparent 18%),
    linear-gradient(145deg,rgba(255,255,255,.32),rgba(210,234,243,.2));
  -webkit-backdrop-filter:blur(15px) saturate(.64) brightness(1.1);
  backdrop-filter:blur(15px) saturate(.64) brightness(1.1);
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,.86),
    inset -3px -3px 6px rgba(54,108,135,.2),
    inset 0 -5px 8px rgba(83,134,157,.1),
    0 3px 4px rgba(34,79,104,.09),
    0 10px 20px rgba(20,68,97,.12);
  color:rgba(17,73,104,.76);
}
.pill{
  border-color:rgba(255,255,255,.5);
  background:rgba(245,250,252,.13);
  -webkit-backdrop-filter:blur(13px) saturate(.76);
  backdrop-filter:blur(13px) saturate(.76);
  color:rgba(20,72,101,.7);
}
.pill.active{
  border-color:rgba(255,255,255,.66);
  background:linear-gradient(145deg,rgba(255,255,255,.3),rgba(220,239,246,.2));
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.88),
    inset -1px -1px 0 rgba(74,123,148,.2),
    inset 0 -4px 8px rgba(87,137,160,.08),
    0 8px 16px rgba(25,75,104,.1);
  color:rgba(13,66,96,.86);
}
.day-cell.today:not(.done) .day-number{
  border:1px solid rgba(255,255,255,.58);
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(208,233,242,.14));
  -webkit-backdrop-filter:blur(10px) saturate(.75);
  backdrop-filter:blur(10px) saturate(.75);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.8),
    inset -1px -1px 0 rgba(70,121,146,.18),
    inset 0 -4px 7px rgba(87,137,159,.08),
    0 7px 14px rgba(25,75,103,.09);
}

/* Apple-style Liquid Glass surfaces. */
nav,
#sky{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.66);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.45) 0%,
      rgba(255,255,255,.29) 48%,
      rgba(255,255,255,.18) 100%);
  -webkit-backdrop-filter:blur(25px) saturate(1.12) brightness(1.06);
  backdrop-filter:blur(25px) saturate(1.12) brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 1px 0 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(54,104,132,.2),
    inset -1px 0 0 rgba(54,104,132,.14),
    inset 7px 8px 18px rgba(255,255,255,.1),
    inset -9px -11px 22px rgba(45,92,119,.1),
    0 4px 7px rgba(25,68,94,.11),
    0 18px 38px rgba(20,62,91,.15),
    0 0 18px rgba(255,255,255,.13);
}
nav{
  border-radius:999px;
}
#sky{
  border-radius:34px;
}
nav::before,
#sky::before{
  content:"";
  display:block;
  position:absolute;
  z-index:0;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  opacity:.68;
  mix-blend-mode:screen;
  background:
    linear-gradient(132deg,
      rgba(255,255,255,.38) 0%,
      rgba(255,255,255,.16) 18%,
      transparent 39%,
      rgba(255,255,255,.08) 62%,
      transparent 80%);
}
nav > *{
  position:relative;
  z-index:1;
}
#sky::after{
  display:block;
  z-index:0;
  left:2%;right:2%;top:auto;bottom:1px;height:18%;
  opacity:.42;
  border-radius:0 0 32px 32px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.18));
  filter:none;
}
.pill,
.round,
.plus,
.day-cell.today:not(.done) .day-number{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI",sans-serif;
  font-weight:600;
  letter-spacing:-.015em;
}
.pill{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.54);
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.13));
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  backdrop-filter:blur(18px) saturate(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(50,99,126,.14),
    0 6px 15px rgba(20,65,93,.09);
}
.pill.active{
  border-color:rgba(255,255,255,.74);
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.18));
  color:#123f5b;
}

/* Environment-reactive color pipeline: image modes preserve source colors. */
body[data-background="celestial"],
body[data-background="freedom"],
body[data-background="custom"]{
  background:transparent;
}
body[data-background="celestial"] .depth-scene,
body[data-background="freedom"] .depth-scene,
body[data-background="custom"] .depth-scene{
  background:transparent;
}
body[data-background="celestial"] .photo-depth,
body[data-background="freedom"] .photo-depth,
body[data-background="custom"] .photo-depth{
  display:block!important;
  inset:0;
  opacity:1;
  background-size:cover;
  background-position:center;
  filter:none;
  animation:none;
}
body[data-background="celestial"] .paint-wash,
body[data-background="freedom"] .paint-wash,
body[data-background="custom"] .paint-wash{
  display:none!important;
  background:none;
  opacity:0;
}
body[data-background="celestial"] .anime-paint-sky,
body[data-background="freedom"] .anime-paint-sky,
body[data-background="custom"] .anime-paint-sky{
  display:none!important;
}

/* Neutral glass transmits the environment instead of applying a blue grade. */
nav,
#sky{
  border-color:rgba(255,255,255,.62);
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.13));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:
    inset 0 3px 7px rgba(255,255,255,.65),
    inset 0 -5px 10px rgba(70,70,80,.08),
    0 15px 36px rgba(70,70,80,.11),
    0 0 14px rgba(255,255,255,.13);
}
#sky{
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.1));
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
nav::before,
#sky::before{
  opacity:.68;
  mix-blend-mode:screen;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.18) 4%,transparent 14%),
    linear-gradient(128deg,rgba(255,255,255,.22),transparent 31%,rgba(255,255,255,.06) 64%,transparent 82%);
}
nav::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),rgba(255,255,255,.64),rgba(255,255,255,.26),transparent);
}
#sky::after{
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.08));
}
.pill,
.pill.active,
.round,
.plus,
.day-cell.today:not(.done) .day-number{
  border-color:rgba(255,255,255,.62);
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.13));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.64),
    inset 0 -3px 6px rgba(70,70,80,.07),
    0 8px 20px rgba(70,70,80,.09);
}
.round,
.plus{
  background:
    radial-gradient(circle at 31% 20%,rgba(255,255,255,.8),transparent 19%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.07) 0 47%,rgba(255,255,255,.32) 94%);
}
.bubble-visual{
  border-color:rgba(255,255,255,.62);
  background:
    radial-gradient(circle at 35% 25%,
      rgba(255,255,255,.32),
      rgba(255,255,255,.1) 35%,
      rgba(255,255,255,.035) 65%,
      transparent 85%),
    conic-gradient(from 205deg,
      rgba(106,220,214,.08),
      rgba(255,255,255,.02) 20%,
      rgba(174,160,225,.055) 39%,
      rgba(244,163,196,.05) 63%,
      rgba(226,203,135,.045) 78%,
      rgba(106,220,214,.08));
  -webkit-backdrop-filter:blur(1.2px);
  backdrop-filter:blur(1.2px);
  box-shadow:
    inset 2px 2px 5px rgba(255,255,255,.22),
    inset -3px -4px 7px rgba(70,70,80,.055),
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 15px 40px rgba(255,255,255,.16);
}
.light-edge{
  border-bottom-color:rgba(255,255,255,.48);
  box-shadow:0 2px 4px rgba(255,255,255,.1);
}

/* Final cascade: centralized theme propagation and Apple-style type. */
:root{
  --bubble-primary:#5BB8E8;
  --bubble-light:#D8F2FC;
  --bubble-dark:#3187B5;
  --bubble-glow:rgba(91,184,232,.35);
  --bubble-border:rgba(192,234,252,.78);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  font-size:15px;
}
body,button,input,textarea{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  font-weight:400;
}
h1,.page-head span,form h2,#celebrate h2{
  font-family:"Noto Serif SC","Songti SC","STSong",serif;
  font-weight:400;
}
h1{font-size:36px;line-height:1.12;letter-spacing:-1px}
.page-head span{font-size:21px;letter-spacing:.045em}
form h2{font-size:27px;line-height:1.38;letter-spacing:-.02em}
form label{font-size:14px;line-height:1.55;font-weight:400}
form small,.page-head i,footer{font-size:13px;font-weight:400;opacity:.55}
#noteModal{
  color:color-mix(in srgb,var(--bubble-dark) 72%,#243b4a);
  border-color:var(--bubble-border);
  background:
    radial-gradient(circle at 14% 4%,color-mix(in srgb,var(--bubble-light) 32%,transparent),transparent 38%),
    radial-gradient(circle at 90% 92%,color-mix(in srgb,var(--bubble-primary) 14%,transparent),transparent 47%),
    linear-gradient(155deg,rgba(255,255,255,.5),rgba(255,255,255,.22));
  box-shadow:
    inset 0 2px 8px rgba(255,255,255,.8),
    inset 0 -12px 30px color-mix(in srgb,var(--bubble-primary) 8%,transparent),
    0 20px 58px rgba(70,70,80,.12),
    0 0 32px color-mix(in srgb,var(--bubble-glow) 52%,transparent);
}
#noteModal form{padding:34px 31px 31px}
#noteModal small,#noteModal label{color:color-mix(in srgb,var(--bubble-dark) 62%,#3e5662)}
#noteModal small{letter-spacing:.08em}
#noteModal h2{
  color:color-mix(in srgb,var(--bubble-dark) 78%,#243744);
  text-shadow:0 1px 8px rgba(255,255,255,.48);
  margin:9px 0 25px;
}
#noteModal textarea{
  min-height:142px;
  padding:16px;
  color:color-mix(in srgb,var(--bubble-dark) 74%,#233d4b);
  border:1px solid var(--bubble-border);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bubble-light) 25%,rgba(255,255,255,.28)),
    color-mix(in srgb,var(--bubble-primary) 12%,rgba(255,255,255,.14)));
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:
    inset 0 2px 7px rgba(255,255,255,.72),
    inset 0 -9px 24px color-mix(in srgb,var(--bubble-primary) 9%,transparent),
    0 6px 20px color-mix(in srgb,var(--bubble-glow) 30%,transparent);
}
#noteModal textarea::placeholder{color:rgba(30,70,90,.45)}
#noteModal .primary{
  margin-top:2px;
  min-height:50px;
  border:1px solid color-mix(in srgb,var(--bubble-border) 86%,white);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bubble-light) 76%,white),
    color-mix(in srgb,var(--bubble-primary) 91%,white 9%));
  color:color-mix(in srgb,var(--bubble-dark) 78%,#183242);
  letter-spacing:.01em;
  text-shadow:0 1px 4px rgba(255,255,255,.62);
  box-shadow:
    0 10px 30px var(--bubble-glow),
    inset 0 1px 3px rgba(255,255,255,.8),
    inset 0 -5px 12px color-mix(in srgb,var(--bubble-dark) 12%,transparent);
}
#noteModal .close{color:color-mix(in srgb,var(--bubble-dark) 58%,#36505f)}
.dot{
  border-color:var(--bubble-border);
  background:
    radial-gradient(circle at 29% 20%,rgba(255,255,255,.96) 0 7%,rgba(255,255,255,.5) 8% 18%,transparent 31%),
    radial-gradient(circle at 62% 72%,var(--bubble-light),var(--bubble-primary) 58%,var(--bubble-dark) 118%);
}
.bubble-visual{
  border-color:var(--bubble-border);
  background:
    radial-gradient(circle at 31% 20%,rgba(255,255,255,.52),rgba(255,255,255,.13) 24%,transparent 43%),
    radial-gradient(circle at 69% 76%,color-mix(in srgb,var(--bubble-primary) 16%,transparent),transparent 47%),
    conic-gradient(from 205deg,
      color-mix(in srgb,var(--bubble-light) 20%,transparent),
      rgba(255,255,255,.02) 23%,
      color-mix(in srgb,var(--bubble-primary) 10%,transparent) 58%,
      color-mix(in srgb,var(--bubble-dark) 9%,transparent) 82%,
      color-mix(in srgb,var(--bubble-light) 20%,transparent));
  box-shadow:
    inset 2px 2px 6px rgba(255,255,255,.29),
    inset -3px -4px 8px color-mix(in srgb,var(--bubble-dark) 8%,transparent),
    0 15px 40px rgba(255,255,255,.14),
    0 5px 22px color-mix(in srgb,var(--bubble-glow) 46%,transparent);
}

/* Bubble theme system: color behaves as reflected atmosphere, never as a flat fill. */
#colors{
  display:grid;
  grid-template-columns:repeat(6,36px);
  gap:14px 13px;
  margin-top:14px;
}
.dot{
  position:relative;
  width:36px;
  height:36px;
  margin:0;
  padding:0;
  border:1px solid var(--bubble-border);
  border-radius:50%;
  opacity:.72;
  background:
    radial-gradient(circle at 29% 20%,rgba(255,255,255,.96) 0 7%,rgba(255,255,255,.5) 8% 18%,transparent 31%),
    radial-gradient(circle at 62% 72%,var(--bubble-color-light),var(--bubble-color) 58%,var(--bubble-color-dark) 118%);
  box-shadow:
    inset 2px 2px 7px rgba(255,255,255,.82),
    inset -3px -4px 9px color-mix(in srgb,var(--bubble-color-dark) 25%,transparent),
    0 5px 13px color-mix(in srgb,var(--bubble-glow) 68%,transparent);
  transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;
}
.dot::before{
  content:"";
  position:absolute;
  inset:4px 7px auto;
  height:9px;
  border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,0));
  transform:rotate(-18deg);
}
.dot:hover{opacity:.9;transform:translateY(-1px)}
.dot.selected{
  opacity:1;
  transform:scale(1.1);
  outline:2px solid rgba(255,255,255,.9);
  outline-offset:3px;
  box-shadow:
    inset 2px 2px 8px rgba(255,255,255,.9),
    inset -3px -4px 10px color-mix(in srgb,var(--bubble-color-dark) 28%,transparent),
    0 0 0 1px color-mix(in srgb,var(--bubble-color) 35%,transparent),
    0 8px 20px var(--bubble-glow);
}
.bubble-visual{
  border-color:var(--bubble-border);
  background:
    radial-gradient(circle at 31% 20%,rgba(255,255,255,.52),rgba(255,255,255,.13) 24%,transparent 43%),
    radial-gradient(circle at 69% 76%,color-mix(in srgb,var(--bubble-color) 16%,transparent),transparent 47%),
    conic-gradient(from 205deg,
      color-mix(in srgb,var(--bubble-color-light) 20%,transparent),
      rgba(255,255,255,.02) 23%,
      color-mix(in srgb,var(--bubble-color) 10%,transparent) 58%,
      color-mix(in srgb,var(--bubble-color-dark) 9%,transparent) 82%,
      color-mix(in srgb,var(--bubble-color-light) 20%,transparent));
  box-shadow:
    inset 2px 2px 6px rgba(255,255,255,.29),
    inset -3px -4px 8px color-mix(in srgb,var(--bubble-color-dark) 8%,transparent),
    inset 0 0 0 1px rgba(255,255,255,.055),
    0 15px 40px rgba(255,255,255,.14),
    0 5px 22px color-mix(in srgb,var(--bubble-glow) 46%,transparent);
}
#noteModal{
  border-color:var(--bubble-border);
  background:
    radial-gradient(circle at 18% 7%,color-mix(in srgb,var(--bubble-color-light) 30%,transparent),transparent 40%),
    radial-gradient(circle at 92% 88%,color-mix(in srgb,var(--bubble-color) 13%,transparent),transparent 48%),
    linear-gradient(155deg,rgba(255,255,255,.5),rgba(255,255,255,.23));
  box-shadow:
    inset 0 2px 7px rgba(255,255,255,.78),
    inset 0 -10px 28px color-mix(in srgb,var(--bubble-color) 8%,transparent),
    0 20px 58px rgba(70,70,80,.13),
    0 0 28px color-mix(in srgb,var(--bubble-glow) 44%,transparent);
}
#noteModal textarea{
  border-color:var(--bubble-border);
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--bubble-color-light) 25%,rgba(255,255,255,.3)),
      color-mix(in srgb,var(--bubble-color) 12%,rgba(255,255,255,.18)));
  box-shadow:
    inset 0 2px 8px rgba(255,255,255,.62),
    inset 0 -8px 22px color-mix(in srgb,var(--bubble-color) 8%,transparent),
    0 5px 20px color-mix(in srgb,var(--bubble-glow) 26%,transparent);
}
#noteModal .primary{
  border-color:color-mix(in srgb,var(--bubble-border) 82%,white);
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--bubble-color-light) 78%,white),
      color-mix(in srgb,var(--bubble-color) 88%,white 12%));
  color:color-mix(in srgb,var(--bubble-color-dark) 74%,#173247);
  text-shadow:0 1px 4px rgba(255,255,255,.58);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.88),
    inset 0 -4px 10px color-mix(in srgb,var(--bubble-color-dark) 13%,transparent),
    0 12px 28px var(--bubble-glow);
}

/* Central theme API and editorial typography refinement. */
:root{
  --bubble-primary:#5BB8E8;
  --bubble-light:#D8F2FC;
  --bubble-dark:#3187B5;
  --bubble-glow:rgba(91,184,232,.35);
  --bubble-border:rgba(192,234,252,.78);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  font-size:15px;
  font-weight:400;
}
body,
button,
input,
textarea{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  font-weight:400;
}
h1,
.page-head span,
form h2,
#celebrate h2{
  font-family:"Noto Serif SC","Songti SC","STSong",serif;
  font-weight:400;
}
h1{
  font-size:36px;
  line-height:1.12;
  letter-spacing:-1px;
}
.page-head span{
  font-size:21px;
  letter-spacing:.045em;
}
form h2{
  font-size:27px;
  line-height:1.38;
  letter-spacing:-.02em;
}
form label{
  font-size:14px;
  line-height:1.55;
  font-weight:400;
}
form small,
.page-head i,
footer{
  font-size:13px;
  font-weight:400;
  opacity:.55;
}

/* Every themed journal element consumes the same variables. */
#noteModal{
  color:color-mix(in srgb,var(--bubble-dark) 72%,#243b4a);
  border-color:var(--bubble-border);
  background:
    radial-gradient(circle at 14% 4%,color-mix(in srgb,var(--bubble-light) 32%,transparent),transparent 38%),
    radial-gradient(circle at 90% 92%,color-mix(in srgb,var(--bubble-primary) 14%,transparent),transparent 47%),
    linear-gradient(155deg,rgba(255,255,255,.5),rgba(255,255,255,.22));
  box-shadow:
    inset 0 2px 8px rgba(255,255,255,.8),
    inset 0 -12px 30px color-mix(in srgb,var(--bubble-primary) 8%,transparent),
    0 20px 58px rgba(70,70,80,.12),
    0 0 32px color-mix(in srgb,var(--bubble-glow) 52%,transparent);
}
#noteModal form{
  padding:34px 31px 31px;
}
#noteModal small,
#noteModal label{
  color:color-mix(in srgb,var(--bubble-dark) 62%,#3e5662);
}
#noteModal small{
  letter-spacing:.08em;
}
#noteModal h2{
  color:color-mix(in srgb,var(--bubble-dark) 78%,#243744);
  text-shadow:0 1px 8px rgba(255,255,255,.48);
  margin:9px 0 25px;
}
#noteModal textarea{
  min-height:142px;
  padding:16px;
  color:color-mix(in srgb,var(--bubble-dark) 74%,#233d4b);
  border:1px solid var(--bubble-border);
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--bubble-light) 25%,rgba(255,255,255,.28)),
      color-mix(in srgb,var(--bubble-primary) 12%,rgba(255,255,255,.14)));
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:
    inset 0 2px 7px rgba(255,255,255,.72),
    inset 0 -9px 24px color-mix(in srgb,var(--bubble-primary) 9%,transparent),
    0 6px 20px color-mix(in srgb,var(--bubble-glow) 30%,transparent);
}
#noteModal textarea::placeholder{
  color:rgba(30,70,90,.45);
}
#noteModal .primary{
  margin-top:2px;
  min-height:50px;
  border:1px solid color-mix(in srgb,var(--bubble-border) 86%,white);
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--bubble-light) 76%,white),
      color-mix(in srgb,var(--bubble-primary) 91%,white 9%));
  color:color-mix(in srgb,var(--bubble-dark) 78%,#183242);
  letter-spacing:.01em;
  text-shadow:0 1px 4px rgba(255,255,255,.62);
  box-shadow:
    0 10px 30px var(--bubble-glow),
    inset 0 1px 3px rgba(255,255,255,.8),
    inset 0 -5px 12px color-mix(in srgb,var(--bubble-dark) 12%,transparent);
}
#noteModal .close{
  color:color-mix(in srgb,var(--bubble-dark) 58%,#36505f);
}
.dot{
  border-color:var(--bubble-border);
  background:
    radial-gradient(circle at 29% 20%,rgba(255,255,255,.96) 0 7%,rgba(255,255,255,.5) 8% 18%,transparent 31%),
    radial-gradient(circle at 62% 72%,var(--bubble-light),var(--bubble-primary) 58%,var(--bubble-dark) 118%);
}
.bubble-visual{
  border-color:var(--bubble-border);
}

/* Local readability zones for text that floats directly over the environment. */
header{
  position:relative;
  isolation:isolate;
}
header::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-18px;
  top:-14px;
  width:72%;
  height:calc(100% + 28px);
  pointer-events:none;
  border:0;
  background:
    radial-gradient(ellipse at top left,
      rgba(255,255,255,.16),
      rgba(255,255,255,.08) 45%,
      transparent 75%);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  -webkit-mask-image:radial-gradient(ellipse at top left,#000 0 38%,rgba(0,0,0,.72) 58%,transparent 80%);
  mask-image:radial-gradient(ellipse at top left,#000 0 38%,rgba(0,0,0,.72) 58%,transparent 80%);
}
header > *{
  position:relative;
  z-index:1;
}
h1{
  color:rgba(10,45,80,.88);
  text-shadow:0 1px 8px rgba(255,255,255,.35);
}
header small{
  color:rgba(20,60,90,.75);
  text-shadow:0 1px 8px rgba(255,255,255,.35);
}
footer{
  position:relative;
  isolation:isolate;
  color:rgba(20,60,90,.7);
  text-shadow:0 1px 7px rgba(255,255,255,.32);
}
footer::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-12px -14px;
  pointer-events:none;
  border:0;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.13),
      rgba(255,255,255,.06) 48%,
      transparent 78%);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0 34%,rgba(0,0,0,.68) 59%,transparent 82%);
  mask-image:radial-gradient(ellipse at center,#000 0 34%,rgba(0,0,0,.68) 59%,transparent 82%);
}
footer > *{
  position:relative;
  z-index:1;
}
footer button{
  color:rgba(20,60,90,.75);
  text-shadow:0 1px 7px rgba(255,255,255,.32);
}
dialog{
  color:rgba(34,47,58,.9);
  border-color:rgba(255,255,255,.58);
  background:linear-gradient(155deg,rgba(255,255,255,.52),rgba(255,255,255,.27));
  -webkit-backdrop-filter:blur(24px);
  backdrop-filter:blur(24px);
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.62),
    inset 0 -5px 10px rgba(70,70,80,.07),
    0 26px 70px rgba(60,60,75,.16);
}
dialog::backdrop{
  background:rgba(35,35,45,.16);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.close,
form small,
label,
.background-option,
.upload-background,
.upload-background strong,
.upload-background small{
  color:rgba(42,54,64,.68);
}
input,
textarea,
.background-option,
.upload-background{
  border-color:rgba(255,255,255,.48);
  background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.16));
  color:rgba(34,47,58,.88);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* Bright visionOS liquid glass calibration. */
body,
.depth-scene{
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.25),transparent 40%),
    linear-gradient(135deg,#55b9e8,#1675ad);
}
body:before{
  opacity:.2;
  mix-blend-mode:screen;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.72) 0 .6px,transparent .9px);
  background-size:6px 6px;
}
nav{
  height:100px;
  min-height:100px;
  padding:0 16px;
  align-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.7);
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(200,230,250,.25));
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  box-shadow:
    inset 0 1px 5px rgba(255,255,255,.9),
    0 15px 40px rgba(80,180,240,.2);
}
#sky{
  border-radius:40px;
  border:1px solid rgba(255,255,255,.65);
  background:linear-gradient(180deg,rgba(230,245,255,.45),rgba(150,210,240,.3));
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  box-shadow:
    inset 0 1px 8px rgba(255,255,255,.8),
    inset 0 -10px 30px rgba(100,180,220,.15),
    0 20px 60px rgba(50,150,220,.18);
}
nav::before,
#sky::before{
  opacity:.46;
  mix-blend-mode:screen;
  background:
    linear-gradient(132deg,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.18) 18%,
      transparent 40%,
      rgba(205,238,255,.1) 64%,
      transparent 82%);
}
#sky::after{
  opacity:.36;
  background:linear-gradient(180deg,transparent,rgba(120,200,240,.15));
}
.pill{
  height:48px;
  border:1px solid rgba(255,255,255,.66);
  background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(200,230,250,.22));
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:
    inset 0 1px 4px rgba(255,255,255,.82),
    0 9px 24px rgba(80,180,240,.16);
  color:rgba(18,68,101,.76);
}
.pill.active{
  border-color:rgba(255,255,255,.76);
  background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(190,225,247,.25));
  color:#123f5b;
  box-shadow:
    inset 0 1px 5px rgba(255,255,255,.9),
    0 10px 28px rgba(80,180,240,.19);
}
.round,
.plus{
  border:1px solid rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 30% 20%,rgba(255,255,255,.88),transparent 24%),
    radial-gradient(circle at 50% 58%,rgba(255,255,255,.36),rgba(120,200,245,.22));
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  box-shadow:
    inset 0 1px 6px rgba(255,255,255,.9),
    inset 0 -7px 16px rgba(100,180,220,.13),
    0 12px 32px rgba(80,180,240,.2);
  color:#123f5b;
}
.day-number{
  color:rgba(20,80,120,.55);
  text-shadow:0 1px 5px rgba(255,255,255,.3);
}
.day-cell.today:not(.done) .day-number{
  color:rgba(20,80,120,.64);
}
.floating-bubbles .bubble{
  width:90px;
  height:90px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.8);
  background:
    radial-gradient(circle at 30% 20%,
      rgba(255,255,255,.9),
      rgba(255,255,255,.35) 35%,
      rgba(100,200,255,.25));
  -webkit-backdrop-filter:blur(3px) saturate(1.16) brightness(1.08);
  backdrop-filter:blur(3px) saturate(1.16) brightness(1.08);
  box-shadow:
    0 10px 40px rgba(255,255,255,.35),
    inset 0 0 25px rgba(255,255,255,.9);
}
.floating-bubbles .bubble-date{
  color:rgba(20,80,120,.76);
  text-shadow:0 1px 4px rgba(255,255,255,.75);
}

/* Selected date bubble: independent membrane and stable content layers. */
.floating-bubbles .bubble{
  position:absolute;
  width:90px;
  height:90px;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:50%;
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:none;
  filter:none;
  scale:1;
  rotate:0deg;
  will-change:translate;
  animation:bubbleBorn .9s cubic-bezier(.16,.86,.2,1.18) both;
}
.floating-bubbles .bubble.welcome{
  animation:welcomeFloat 1.35s cubic-bezier(.15,.8,.15,1) both;
}
.floating-bubbles .bubble::before,
.floating-bubbles .bubble::after{
  display:none;
}
.bubble-visual{
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.7);
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 35% 25%,
      rgba(255,255,255,.35),
      rgba(255,255,255,.12) 35%,
      rgba(180,230,255,.05) 65%,
      transparent 85%),
    conic-gradient(from 205deg,
      rgba(78,222,226,.17),
      rgba(255,255,255,.025) 20%,
      rgba(151,188,245,.11) 38%,
      rgba(255,180,218,.08) 63%,
      rgba(85,218,225,.15) 84%,
      rgba(78,222,226,.17));
  -webkit-backdrop-filter:blur(1.2px) saturate(1.2) brightness(1.06);
  backdrop-filter:blur(1.2px) saturate(1.2) brightness(1.06);
  box-shadow:
    inset 2px 2px 5px rgba(255,255,255,.24),
    inset -3px -4px 7px rgba(56,117,151,.08),
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 15px 40px rgba(80,180,240,.18);
  transform-origin:center;
  will-change:transform,border-radius,opacity;
  animation:bubbleMembraneBreath 5.4s ease-in-out infinite;
}
.bubble-light{
  position:absolute;
  display:block;
  pointer-events:none;
}
.light-soft{
  left:10%;
  top:8%;
  width:51%;
  height:38%;
  border-radius:55% 45% 58% 42%;
  border-top:2px solid rgba(255,255,255,.7);
  background:radial-gradient(ellipse at 42% 28%,rgba(255,255,255,.26),transparent 68%);
  filter:blur(.35px);
  animation:bubbleSoftHighlight 7.2s ease-in-out -1.1s infinite alternate;
}
.light-bright{
  right:12%;
  top:14%;
  width:12%;
  height:7%;
  border-radius:50%;
  background:rgba(255,255,255,.76);
  box-shadow:0 0 5px rgba(255,255,255,.45);
  filter:blur(.25px);
  animation:bubbleBrightReflection 6.1s ease-in-out -2.3s infinite alternate;
}
.light-edge{
  left:11%;
  right:11%;
  bottom:5%;
  height:28%;
  border-radius:50%;
  border-bottom:1.5px solid rgba(235,252,255,.56);
  box-shadow:0 2px 4px rgba(91,213,226,.11);
  animation:bubbleEdgeReflection 8.6s ease-in-out -.8s infinite alternate;
}
.floating-bubbles .bubble-date{
  position:absolute;
  z-index:5;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(20,70,110,.75);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",sans-serif;
  font-size:18px;
  font-weight:600;
  line-height:1;
  text-shadow:0 1px 3px rgba(255,255,255,.62);
  pointer-events:none;
  transform:none;
  rotate:0deg;
  scale:1;
  filter:none;
}
.floating-bubbles .bubble.note .bubble-date::after{
  content:"✦";
  position:absolute;
  right:13%;
  bottom:11%;
  color:rgba(255,255,255,.8);
  font-size:11px;
  text-shadow:0 0 6px rgba(255,255,255,.65);
}
@keyframes bubbleMembraneBreath{
  0%,100%{transform:scaleX(1) scaleY(1)}
  31%{transform:scaleX(1.015) scaleY(.99)}
  67%{transform:scaleX(.99) scaleY(1.015)}
}
@keyframes bubbleSoftHighlight{
  from{opacity:.5;transform:translate(-1px,1px) rotate(-16deg)}
  to{opacity:.8;transform:translate(2px,-2px) rotate(-11deg)}
}
@keyframes bubbleBrightReflection{
  from{opacity:.54;transform:translate(-2px,1px) scale(.88)}
  to{opacity:.9;transform:translate(1px,-1px) scale(1.08)}
}
@keyframes bubbleEdgeReflection{
  from{opacity:.34;transform:translateX(2px) scaleX(.94)}
  to{opacity:.68;transform:translateX(-2px) scaleX(1.04)}
}

/* Crystal-clear calibration from the supplied Liquid Glass reference. */
nav{
  background:
    radial-gradient(ellipse at 50% 48%,
      rgba(255,255,255,.08) 0 42%,
      rgba(205,237,252,.17) 69%,
      rgba(255,255,255,.46) 91%,
      rgba(125,192,226,.24) 100%),
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(165,218,246,.12));
  -webkit-backdrop-filter:blur(11px) saturate(1.3) brightness(1.12);
  backdrop-filter:blur(11px) saturate(1.3) brightness(1.12);
  box-shadow:
    inset 0 4px 7px rgba(255,255,255,.78),
    inset 0 -6px 10px rgba(53,114,148,.28),
    inset 5px 0 8px rgba(255,255,255,.3),
    inset -5px 0 9px rgba(43,101,135,.2),
    0 5px 8px rgba(55,124,164,.13),
    0 18px 36px rgba(75,165,220,.19),
    0 0 16px rgba(255,255,255,.17);
}
#sky{
  background:
    radial-gradient(ellipse at 50% 45%,
      rgba(255,255,255,.06) 0 48%,
      rgba(199,234,251,.13) 73%,
      rgba(239,250,255,.31) 94%,
      rgba(120,191,227,.2) 100%),
    linear-gradient(180deg,rgba(236,249,255,.22),rgba(127,201,238,.13));
  -webkit-backdrop-filter:blur(10px) saturate(1.24) brightness(1.09);
  backdrop-filter:blur(10px) saturate(1.24) brightness(1.09);
  box-shadow:
    inset 0 4px 8px rgba(255,255,255,.63),
    inset 0 -8px 15px rgba(45,111,148,.22),
    inset 4px 0 8px rgba(255,255,255,.2),
    inset -4px 0 9px rgba(46,107,141,.15),
    0 6px 10px rgba(56,126,166,.11),
    0 22px 48px rgba(70,160,218,.17);
}
nav::before,
#sky::before{
  opacity:.82;
  mix-blend-mode:screen;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.78) 0%,
      rgba(255,255,255,.3) 3%,
      transparent 12%),
    linear-gradient(128deg,
      rgba(255,255,255,.28) 0%,
      transparent 28%,
      rgba(255,255,255,.08) 63%,
      transparent 80%);
}
nav::after{
  content:"";
  position:absolute;
  z-index:0;
  left:8%;right:8%;bottom:3px;height:7px;
  border-radius:50%;
  pointer-events:none;
  opacity:.7;
  background:linear-gradient(90deg,transparent,rgba(164,229,249,.56),rgba(255,255,255,.72),rgba(124,209,239,.48),transparent);
  filter:blur(1.2px);
}
.pill,
.pill.active{
  background:
    radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.08),rgba(208,239,251,.2) 76%,rgba(255,255,255,.39)),
    linear-gradient(180deg,rgba(255,255,255,.22),rgba(156,215,243,.1));
  -webkit-backdrop-filter:blur(8px) saturate(1.24) brightness(1.08);
  backdrop-filter:blur(8px) saturate(1.24) brightness(1.08);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.68),
    inset 0 -3px 6px rgba(52,112,145,.18),
    0 8px 18px rgba(75,164,216,.14);
}
.round,
.plus{
  background:
    radial-gradient(circle at 31% 20%,rgba(255,255,255,.92),transparent 17%),
    radial-gradient(circle at 50% 49%,rgba(255,255,255,.08) 0 44%,rgba(190,231,249,.24) 72%,rgba(255,255,255,.47) 94%);
  -webkit-backdrop-filter:blur(9px) saturate(1.28) brightness(1.1);
  backdrop-filter:blur(9px) saturate(1.28) brightness(1.1);
  box-shadow:
    inset 2px 3px 5px rgba(255,255,255,.74),
    inset -3px -4px 7px rgba(48,109,143,.2),
    0 10px 23px rgba(75,165,220,.16);
}
.round,
.plus{
  border:1px solid rgba(255,255,255,.7);
  background:
    radial-gradient(circle at 31% 20%,rgba(255,255,255,.76),transparent 20%),
    linear-gradient(180deg,rgba(255,255,255,.43),rgba(255,255,255,.17));
  -webkit-backdrop-filter:blur(25px) saturate(1.1);
  backdrop-filter:blur(25px) saturate(1.1);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,.88),
    inset -2px -3px 6px rgba(45,94,121,.17),
    0 4px 7px rgba(23,67,94,.1),
    0 10px 22px rgba(20,62,89,.12),
    0 0 12px rgba(255,255,255,.12);
  color:#123f5b;
}

/* Final neutral material pass: no component may impose a blue grade. */
/* Local readability zones for text that floats directly over the environment. */
header{
  position:relative;
  isolation:isolate;
}
header::before{
  content:"";
  position:absolute;
  z-index:-1;
  left:-18px;
  top:-14px;
  width:72%;
  height:calc(100% + 28px);
  pointer-events:none;
  border:0;
  background:
    radial-gradient(ellipse at top left,
      rgba(255,255,255,.16),
      rgba(255,255,255,.08) 45%,
      transparent 75%);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  -webkit-mask-image:radial-gradient(ellipse at top left,#000 0 38%,rgba(0,0,0,.72) 58%,transparent 80%);
  mask-image:radial-gradient(ellipse at top left,#000 0 38%,rgba(0,0,0,.72) 58%,transparent 80%);
}
header > *{
  position:relative;
  z-index:1;
}
h1{
  color:rgba(10,45,80,.88);
  text-shadow:0 1px 8px rgba(255,255,255,.35);
}
header small{
  color:rgba(20,60,90,.75);
  text-shadow:0 1px 8px rgba(255,255,255,.35);
}
footer{
  position:relative;
  isolation:isolate;
  color:rgba(20,60,90,.7);
  text-shadow:0 1px 7px rgba(255,255,255,.32);
}
footer::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-12px -14px;
  pointer-events:none;
  border:0;
  background:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.13),
      rgba(255,255,255,.06) 48%,
      transparent 78%);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 0 34%,rgba(0,0,0,.68) 59%,transparent 82%);
  mask-image:radial-gradient(ellipse at center,#000 0 34%,rgba(0,0,0,.68) 59%,transparent 82%);
}
footer > *{
  position:relative;
  z-index:1;
}
footer button{
  color:rgba(20,60,90,.75);
  text-shadow:0 1px 7px rgba(255,255,255,.32);
}
nav,
#sky{
  border-color:rgba(255,255,255,.62);
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.13));
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:
    inset 0 3px 7px rgba(255,255,255,.65),
    inset 0 -5px 10px rgba(70,70,80,.08),
    0 15px 36px rgba(70,70,80,.11),
    0 0 14px rgba(255,255,255,.13);
}
#sky{
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.1));
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
nav::before,
#sky::before{
  opacity:.68;
  mix-blend-mode:screen;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.18) 4%,transparent 14%),
    linear-gradient(128deg,rgba(255,255,255,.22),transparent 31%,rgba(255,255,255,.06) 64%,transparent 82%);
}
nav::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),rgba(255,255,255,.64),rgba(255,255,255,.26),transparent);
}
#sky::after{
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.08));
}
.pill,
.pill.active,
.round,
.plus,
.day-cell.today:not(.done) .day-number{
  border-color:rgba(255,255,255,.62);
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,.13));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.64),
    inset 0 -3px 6px rgba(70,70,80,.07),
    0 8px 20px rgba(70,70,80,.09);
}
.round,
.plus{
  background:
    radial-gradient(circle at 31% 20%,rgba(255,255,255,.8),transparent 19%),
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.07) 0 47%,rgba(255,255,255,.32) 94%);
}
.bubble-visual{
  border-color:rgba(255,255,255,.62);
  background:
    radial-gradient(circle at 35% 25%,
      rgba(255,255,255,.32),
      rgba(255,255,255,.1) 35%,
      rgba(255,255,255,.035) 65%,
      transparent 85%),
    conic-gradient(from 205deg,
      rgba(106,220,214,.08),
      rgba(255,255,255,.02) 20%,
      rgba(174,160,225,.055) 39%,
      rgba(244,163,196,.05) 63%,
      rgba(226,203,135,.045) 78%,
      rgba(106,220,214,.08));
  -webkit-backdrop-filter:blur(1.2px);
  backdrop-filter:blur(1.2px);
  box-shadow:
    inset 2px 2px 5px rgba(255,255,255,.22),
    inset -3px -4px 7px rgba(70,70,80,.055),
    inset 0 0 0 1px rgba(255,255,255,.045),
    0 15px 40px rgba(255,255,255,.16);
}
.light-edge{
  border-bottom-color:rgba(255,255,255,.48);
  box-shadow:0 2px 4px rgba(255,255,255,.1);
}

/* Theme and typography must remain the final authority in the cascade. */
body,button,input,textarea{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",sans-serif;
  font-weight:400;
}
h1,.page-head span,form h2,#celebrate h2{
  font-family:"Noto Serif SC","Songti SC","STSong",serif;
  font-weight:400;
}
h1{font-size:36px;line-height:1.12;letter-spacing:-1px}
.page-head span{font-size:21px;letter-spacing:.045em}
form h2{font-size:27px;line-height:1.38;letter-spacing:-.02em}
form label{font-size:14px;line-height:1.55}
form small,.page-head i,footer{font-size:13px;opacity:.55}
#noteModal{
  color:color-mix(in srgb,var(--bubble-dark) 72%,#243b4a);
  border-color:var(--bubble-border);
  background:
    radial-gradient(circle at 14% 4%,color-mix(in srgb,var(--bubble-light) 32%,transparent),transparent 38%),
    radial-gradient(circle at 90% 92%,color-mix(in srgb,var(--bubble-primary) 14%,transparent),transparent 47%),
    linear-gradient(155deg,rgba(255,255,255,.5),rgba(255,255,255,.22));
  box-shadow:
    inset 0 2px 8px rgba(255,255,255,.8),
    inset 0 -12px 30px color-mix(in srgb,var(--bubble-primary) 8%,transparent),
    0 20px 58px rgba(70,70,80,.12),
    0 0 32px color-mix(in srgb,var(--bubble-glow) 52%,transparent);
}
#noteModal form{padding:34px 31px 31px}
#noteModal small,#noteModal label{color:color-mix(in srgb,var(--bubble-dark) 62%,#3e5662)}
#noteModal small{letter-spacing:.08em}
#noteModal h2{
  color:color-mix(in srgb,var(--bubble-dark) 78%,#243744);
  text-shadow:0 1px 8px rgba(255,255,255,.48);
  margin:9px 0 25px;
}
#noteModal textarea{
  min-height:142px;padding:16px;
  color:color-mix(in srgb,var(--bubble-dark) 74%,#233d4b);
  border:1px solid var(--bubble-border);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bubble-light) 25%,rgba(255,255,255,.28)),
    color-mix(in srgb,var(--bubble-primary) 12%,rgba(255,255,255,.14)));
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:
    inset 0 2px 7px rgba(255,255,255,.72),
    inset 0 -9px 24px color-mix(in srgb,var(--bubble-primary) 9%,transparent),
    0 6px 20px color-mix(in srgb,var(--bubble-glow) 30%,transparent);
}
#noteModal textarea::placeholder{color:rgba(30,70,90,.45)}
#noteModal .primary{
  margin-top:2px;min-height:50px;
  border:1px solid color-mix(in srgb,var(--bubble-border) 86%,white);
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--bubble-light) 76%,white),
    color-mix(in srgb,var(--bubble-primary) 91%,white 9%));
  color:color-mix(in srgb,var(--bubble-dark) 78%,#183242);
  letter-spacing:.01em;text-shadow:0 1px 4px rgba(255,255,255,.62);
  box-shadow:
    0 10px 30px var(--bubble-glow),
    inset 0 1px 3px rgba(255,255,255,.8),
    inset 0 -5px 12px color-mix(in srgb,var(--bubble-dark) 12%,transparent);
}
#noteModal .close{color:color-mix(in srgb,var(--bubble-dark) 58%,#36505f)}
.dot{
  border-color:var(--bubble-border);
  background:
    radial-gradient(circle at 29% 20%,rgba(255,255,255,.96) 0 7%,rgba(255,255,255,.5) 8% 18%,transparent 31%),
    radial-gradient(circle at 62% 72%,var(--bubble-light),var(--bubble-primary) 58%,var(--bubble-dark) 118%);
}
.bubble-visual{
  border-color:var(--bubble-border);
  background:
    radial-gradient(circle at 31% 20%,rgba(255,255,255,.52),rgba(255,255,255,.13) 24%,transparent 43%),
    radial-gradient(circle at 69% 76%,color-mix(in srgb,var(--bubble-primary) 16%,transparent),transparent 47%),
    conic-gradient(from 205deg,
      color-mix(in srgb,var(--bubble-light) 20%,transparent),
      rgba(255,255,255,.02) 23%,
      color-mix(in srgb,var(--bubble-primary) 10%,transparent) 58%,
      color-mix(in srgb,var(--bubble-dark) 9%,transparent) 82%,
      color-mix(in srgb,var(--bubble-light) 20%,transparent));
  box-shadow:
    inset 2px 2px 6px rgba(255,255,255,.29),
    inset -3px -4px 8px color-mix(in srgb,var(--bubble-dark) 8%,transparent),
    0 15px 40px rgba(255,255,255,.14),
    0 5px 22px color-mix(in srgb,var(--bubble-glow) 46%,transparent);
}