@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800;900&display=swap');

:root{
  --bg:#140914;
  --glass:rgba(20,24,39,.46);
  --glass-strong:rgba(22,27,45,.60);
  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.18);
  --text:#f7f8fc;
  --muted:#aeb6c8;
  --muted2:#7f8aa0;
  --accent:#a88cff;
  --accent2:#6b50ff;
  --green:#61e3a2;
  --shadow:0 24px 80px rgba(0,0,0,.34);
}

*{box-sizing:border-box}
html,body{
  width:100%;
  height:100%;
  min-height:100%;
  overflow:hidden;
  font-family:Montserrat,sans-serif;
  color:var(--text);
  background:
    radial-gradient(72% 82% at 8% 8%, rgba(255,185,205,.36), transparent 62%),
    radial-gradient(60% 70% at 94% 12%, rgba(143,73,148,.34), transparent 64%),
    radial-gradient(68% 78% at 48% 112%, rgba(89,24,87,.42), transparent 64%),
    linear-gradient(135deg,#2a1323 0%,#34152b 30%,#25122b 62%,#170b1d 100%);
  background-size:145% 145%,155% 155%,150% 150%,220% 220%;
  background-position:0% 0%,100% 0%,50% 100%,0% 50%;
  animation:backgroundFlow 16s ease-in-out infinite alternate;
}

@keyframes backgroundFlow{
  0%{background-position:0% 0%,100% 0%,50% 100%,0% 50%;}
  50%{background-position:22% 16%,78% 28%,40% 78%,70% 20%;}
  100%{background-position:48% 34%,52% 12%,64% 54%,100% 50%;}
}
button,input{font:inherit}
button{cursor:pointer}

.page{
  width:100%;
  height:100dvh;
  padding:16px 18px;
  display:grid;
  grid-template-rows:46px minmax(0,1fr) minmax(210px,26vh);
  gap:12px;
  overflow:hidden;
}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.today{font-size:24px;font-weight:800;letter-spacing:.04em}
.top-actions{display:flex;align-items:center;gap:10px}
.streak-pill,.goal-pill{
  height:42px;border:1px solid var(--line2);border-radius:13px;
  background:rgba(18,22,36,.46);color:var(--text);display:flex;align-items:center;
  gap:7px;padding:0 14px;font-weight:800;backdrop-filter:blur(20px) saturate(145%);
  -webkit-backdrop-filter:blur(20px) saturate(145%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.12)
}
.streak-pill{font-size:17px;min-width:82px;justify-content:center;text-align:center}
.fire{font-size:20px;line-height:1}
.goal-pill{font-size:12px;background:linear-gradient(110deg,rgba(16,22,37,.60),rgba(72,58,143,.48),rgba(16,22,37,.60));background-size:220% 100%;transition:background-position .75s cubic-bezier(.22,.61,.36,1),border-color .45s ease,box-shadow .45s ease,filter .45s ease}
.goal-pill:hover{border-color:rgba(168,140,255,.58);background-position:100% 50%;box-shadow:0 12px 32px rgba(106,76,238,.18);filter:brightness(1.06)}

.panel{
  min-height:0;
  border:1px solid var(--line);
  background:linear-gradient(120deg,rgba(31,38,61,.54),rgba(10,15,27,.38),rgba(65,54,108,.40),rgba(10,15,27,.40));
  background-size:220% 100%;
  border-radius:22px;
  box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(26px) saturate(145%);
  -webkit-backdrop-filter:blur(26px) saturate(145%);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.panel::after{
  content:"";
  position:absolute;
  top:-18%;
  bottom:-18%;
  left:0;
  width:42%;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 0%,
    rgba(255,225,240,0) 22%,
    rgba(255,220,238,.045) 38%,
    rgba(255,245,250,.16) 50%,
    rgba(191,123,207,.07) 62%,
    rgba(255,255,255,0) 82%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(12px);
  opacity:0;
  transform:translate3d(-190%,0,0) skewX(-10deg);
  will-change:transform,opacity;
  animation:panelSheen 3.2s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.panel > *{position:relative;z-index:1}
@keyframes panelSheen{
  0%,10%{transform:translate3d(-190%,0,0) skewX(-10deg);opacity:0;}
  34%{opacity:.16;}
  50%{transform:translate3d(150%,0,0) skewX(-10deg);opacity:.20;}
  66%{opacity:.12;}
  90%,100%{transform:translate3d(190%,0,0) skewX(-10deg);opacity:0;}
}

.initial-reveal{opacity:0;transform:translateY(10px);animation:pageReveal .72s cubic-bezier(.22,.8,.25,1) var(--delay) forwards}
.day-entry{opacity:0;transform:translateY(10px);animation:dayReveal .6s cubic-bezier(.22,.8,.25,1) var(--delay) forwards}
@keyframes pageReveal{to{opacity:1;transform:none}}
@keyframes dayReveal{to{opacity:1;transform:none}}

.initial-reveal{opacity:0;transform:translateY(10px);animation:pageReveal .72s cubic-bezier(.22,.8,.25,1) var(--delay) forwards}
.day-entry{opacity:0;transform:translateY(10px);animation:dayReveal .6s cubic-bezier(.22,.8,.25,1) var(--delay) forwards}
@keyframes pageReveal{to{opacity:1;transform:none}}
@keyframes dayReveal{to{opacity:1;transform:none}}

.hero-grid{min-height:0;display:grid;grid-template-columns:1.20fr .80fr;gap:14px}
.timer-panel,.today-panel{display:flex;flex-direction:column;justify-content:center}
.timer-panel{padding:22px 34px;text-align:center;align-items:center;position:relative;overflow:hidden}

.timer{position:relative;margin-top:4px;font-size:clamp(88px,15vh,190px);line-height:.88;font-weight:900;letter-spacing:.085em;font-variant-numeric:tabular-nums}
.main-button{position:relative;margin-top:30px;width:min(380px,100%);height:60px;border:1px solid rgba(255,255,255,.10);border-radius:15px;color:#fff;background:linear-gradient(110deg,#8b6cff 0%,#6f53f2 42%,#b58dff 72%,#7a5cf5 100%);background-size:240% 100%;font-size:14px;font-weight:900;letter-spacing:.12em;box-shadow:0 16px 34px rgba(101,69,238,.23);transition:background-position .75s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease,filter .45s ease,border-color .45s ease}
.main-button:hover{background-position:100% 50%;filter:brightness(1.05);box-shadow:0 18px 40px rgba(101,69,238,.30);border-color:rgba(255,255,255,.22)}
.main-button:active{background-position:45% 50%;filter:brightness(.99);box-shadow:0 10px 22px rgba(101,69,238,.18)}
.main-button:disabled{opacity:.55;cursor:default}
.timer-panel.running .main-button{color:#fff;background:linear-gradient(110deg,#258d63 0%,#2baf78 45%,#63d2a2 72%,#258d63 100%);background-size:240% 100%;box-shadow:0 16px 34px rgba(41,150,107,.18)}
.timer-panel.running .main-button:hover{box-shadow:0 18px 38px rgba(41,150,107,.26)}

.today-panel{padding:24px 28px}
.panel-head h1,.panel-head h2{margin:0;font-weight:800;letter-spacing:.01em}
.panel-head h1{font-size:25px}.panel-head h2{font-size:20px}
.today-content{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding-top:8px;text-align:center}
.today-ring-large{width:min(310px,60%);max-width:310px;min-width:230px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) var(--p),#252b38 0);position:relative;box-shadow:inset 0 0 36px rgba(0,0,0,.28),0 18px 50px rgba(73,45,180,.15)}
.today-ring-large:before{content:"";position:absolute;inset:18px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#171c27,#0f131b 72%);border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 0 25px rgba(0,0,0,.35)}
.today-ring-large>div{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px}
.today-ring-large strong{font-size:48px;letter-spacing:.02em;line-height:1}.today-ring-large span{font-size:10px;color:var(--muted);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.today-total{display:flex;align-items:baseline;gap:8px}.today-total span{font-size:34px;font-weight:900;letter-spacing:.03em}.today-total small{font-size:13px;color:var(--muted);font-weight:800;letter-spacing:.02em}

.days-panel{padding:12px 18px 10px;display:flex;flex-direction:column;overflow:hidden}
.days-panel .panel-head{flex:0 0 auto}
.days-viewport{flex:1;min-height:0;margin-top:6px;overflow:hidden}
.days-strip{height:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;width:100%;align-items:stretch;padding:0 0 2px}
.day-item{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 7px;border-radius:16px;border:1px solid transparent}
.day-item.today{background:rgba(168,140,255,.07);border-color:rgba(168,140,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.day-circle{--p:0%;--color:#ff4d4d;width:clamp(120px,10vw,160px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--color) var(--p),#242a35 0);position:relative;box-shadow:0 10px 26px rgba(0,0,0,.16)}
.day-circle:before{content:"";position:absolute;inset:10px;border-radius:50%;background:rgba(14,18,27,.96);border:1px solid rgba(255,255,255,.05)}
.day-circle>div{position:relative;font-weight:900}.day-circle strong{font-size:19px}
.day-date{margin-top:10px;color:#f0f2f7;font-size:15px;font-weight:800;text-align:center;line-height:1.15;white-space:nowrap;letter-spacing:.01em}
.day-minutes{margin-top:4px;color:#a7b0c2;font-size:13px;font-weight:700}

.goal-modal[hidden]{display:none}.goal-modal{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.66);backdrop-filter:blur(9px)}.modal{position:relative;width:min(430px,100%);padding:26px;border:1px solid var(--line2);border-radius:20px;background:rgba(18,22,33,.56);box-shadow:var(--shadow);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%)}.modal h2{font-size:21px;line-height:1.25;margin:8px 0 18px}.modal input{width:100%;height:50px;border:1px solid var(--line);border-radius:13px;background:rgba(8,12,18,.44);color:var(--text);padding:0 14px;outline:none;font-weight:800}.modal input:focus{border-color:rgba(154,124,255,.5);box-shadow:0 0 0 3px rgba(154,124,255,.08)}.modal input::-webkit-inner-spin-button,.modal input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.modal input[type=number]{-moz-appearance:textfield}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.secondary,.primary{height:44px;padding:0 16px;border-radius:12px;font-weight:800;border:1px solid var(--line2);transition:background-position .75s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease,border-color .45s ease,filter .45s ease;color:#fff;background-size:220% 100%}.secondary{background:linear-gradient(110deg,rgba(31,37,49,.68),rgba(70,77,96,.38),rgba(31,37,49,.68))}.primary{background:linear-gradient(110deg,#8b6cff,#6f53f2,#b58dff,#7a5cf5);border:0}.secondary:hover,.primary:hover{background-position:100% 50%;box-shadow:0 12px 26px rgba(101,69,238,.16);filter:brightness(1.05);border-color:rgba(255,255,255,.22)}

.ripple{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  width:22px;
  height:22px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle, rgba(255,245,250,.22) 0%, rgba(255,210,232,.10) 28%, rgba(255,255,255,0) 68%);
  filter:blur(2.5px);
  opacity:0;
  will-change:transform,opacity,filter;
  animation:rippleWave 460ms cubic-bezier(.22,.72,.2,1) forwards;
}
@keyframes rippleWave{
  0%{transform:translate(-50%,-50%) scale(0.5);opacity:0;}
  18%{opacity:.32;}
  48%{opacity:.18;}
  100%{transform:translate(-50%,-50%) scale(11);opacity:0;filter:blur(5px);}
}

@media(max-width:1150px){.timer{font-size:clamp(92px,11vw,154px)}.day-circle{width:clamp(100px,8vw,130px)}}
@media(max-width:900px){html,body{overflow:auto;height:auto;min-height:100%}.page{height:auto;min-height:100vh;padding:14px;grid-template-rows:auto;gap:12px;overflow:visible}.hero-grid{grid-template-columns:1fr}.timer{font-size:clamp(64px,16vw,108px)}.today-content{padding-top:24px}.days-panel{min-height:300px}.days-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.day-circle{width:90px}.today{font-size:20px}.today-ring-large{width:220px;max-width:220px;min-width:0}.today-ring-large strong{font-size:36px}}
@media(max-width:560px){.days-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.day-circle{width:84px}.streak-pill{min-width:74px}.topbar{gap:8px}.top-actions{gap:8px}.goal-pill{padding:0 10px}.day-date{font-size:13px}.day-minutes{font-size:12px}}