.tools-summary { background: rgba(17, 24, 39, .52); }
.tool-card { min-height: 205px; display: flex; flex-direction: column; padding: 1.7rem; text-align: left; }
.tool-card__icon { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: .75rem; background: rgba(59,130,246,.12); color: #93c5fd; font-size: 1.3rem; }
.tool-card__open { margin-top: auto; padding-top: 1.2rem; color: #93c5fd; font-size: .82rem; font-weight: 600; }
.tool-modal { position: fixed; z-index: 70; inset: 0; display: grid; place-items: center; padding: 1rem; }
.tool-modal.hidden { display: none; }
.tool-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(5px); }
.tool-modal__panel { position: relative; z-index: 1; width: min(100%, 41rem); max-height: min(90vh, 52rem); overflow-y: auto; padding: clamp(1.5rem, 5vw, 2.5rem); background: #111318; border-color: rgba(148,163,184,.24); }
.journal-dialog { position: fixed; z-index: 80; inset: 0; display: grid; place-items: center; padding: 1rem; }
.journal-dialog.hidden { display: none; }
.journal-dialog__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(5px); }
.journal-dialog__panel { position: relative; z-index: 1; width: min(100%, 22rem); padding: 1.5rem; background: #101620; border-color: rgba(255,255,255,.24); }
.journal-dialog__ok { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 1.5rem 0 0 auto; border-radius: 50%; background: white; color: #05345d; font-weight: 700; }
.tool-close { position: absolute; right: 1rem; top: .8rem; color: #a3a3a3; font-size: 2rem; line-height: 1; }
.tool-title { max-width: 31rem; font-family: "Space Grotesk", sans-serif; color: white; font-size: clamp(1.9rem, 6vw, 2.7rem); font-weight: 700; line-height: 1.1; }
.tool-copy { margin-top: 1rem; color: #a3a3a3; line-height: 1.65; }
.tool-action { width: 100%; margin-top: 1.5rem; }
.tool-action + .tool-action { margin-top: .75rem; }
.tool-status { min-height: 11rem; display: grid; place-items: center; margin-top: 1.75rem; padding: 1.5rem; text-align: center; border: 1px solid rgba(255,255,255,.08); border-radius: .9rem; background: rgba(255,255,255,.025); }
.tool-timer { font-family: "Space Grotesk", sans-serif; font-size: clamp(3.3rem, 14vw, 5rem); font-weight: 700; line-height: 1; color: white; font-variant-numeric: tabular-nums; }
.tool-label { margin-top: .8rem; color: #93c5fd; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.tool-orb { display: grid; place-items: center; width: 8rem; height: 8rem; border-radius: 999px; background: #2563eb; box-shadow: 0 0 45px rgba(59,130,246,.45); transition: transform 1s ease-in-out, opacity .3s; }
.tool-orb__count { color: white; font-family: "Space Grotesk", sans-serif; font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tool-kegel-status, .tool-breath-status { display: grid; justify-items: center; width: 100%; }
.tool-orb.release { transform: scale(.58); opacity: .55; }.tool-orb.squeeze { transform: scale(1); }
.tool-square { border-radius: 1.2rem; }.tool-square.inhale { transform: scale(1); }.tool-square.exhale { transform: scale(.6); }
.progress-track { height: .35rem; overflow: hidden; border-radius: 99px; background: #1f2937; }.progress-track > span { display: block; height: 100%; background: #60a5fa; transition: width .25s; }
.option-button { width: 100%; margin-top: .7rem; padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: .6rem; color: #e5e5e5; text-align: left; transition: .2s; }.option-button:hover { border-color: #60a5fa; background: rgba(59,130,246,.1); }
.journal-input { width: 100%; min-height: 9rem; margin-top: 1.25rem; resize: vertical; }
.tool-account-prompt { border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.5rem; }
.tool-saved-link { text-decoration: none; }
.squeeze-stage { margin-top: 1.75rem; padding: 1.5rem; text-align: center; border: 1px solid rgba(255,255,255,.08); border-radius: .9rem; background: rgba(255,255,255,.025); }
.squeeze-stage .tool-label { margin-top: 0; }
.squeeze-meter { position: relative; width: min(100%, 28rem); height: 12rem; margin: 1.5rem auto; overflow: hidden; border: 1px solid rgba(147,197,253,.2); border-radius: 1rem; background: rgba(255,255,255,.07); }
.squeeze-meter > span { position: absolute; right: 0; bottom: 0; left: 0; display: block; min-height: 0; background: linear-gradient(180deg, #60a5fa, #2563eb); box-shadow: 0 -8px 30px rgba(96,165,250,.32); transition: height 900ms ease-in-out; }
.squeeze-meter--draining > span { background: linear-gradient(180deg, #93c5fd, #2563eb); }
.squeeze-instruction { display: inline-block; max-width: 30rem; padding: .8rem 1rem; border-radius: .75rem; background: #05345d; color: #f1f2f3; font-size: .85rem; font-weight: 600; }
.relax-wave { position: relative; width: min(100%, 28rem); height: 12rem; margin: 1.5rem auto; overflow: hidden; border: 1px solid rgba(147,197,253,.2); border-radius: 1rem; background: linear-gradient(180deg, rgba(5,52,93,.8), rgba(17,24,39,.35)); }
.relax-wave::before, .relax-wave::after { content: ""; position: absolute; top: 50%; left: 50%; width: 3.5rem; height: 3.5rem; border: 2px solid rgba(96,165,250,.75); border-radius: 50%; transform: translate(-50%, -50%) scale(.3); animation: relax-pulse 3.2s ease-out infinite; }
.relax-wave::after { animation-delay: 1.6s; }
@keyframes relax-pulse { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(5.5); } }
.meditation-ring { display: grid; place-items: center; width: 11.25rem; height: 11.25rem; margin: .5rem auto 0; border-radius: 50%; background: conic-gradient(#60a5fa var(--progress), rgba(115,115,115,.18) 0); }
.meditation-ring::before { content: ""; grid-area: 1 / 1; width: 8.9rem; height: 8.9rem; border-radius: 50%; background: #111318; }
.meditation-ring > span { z-index: 1; grid-area: 1 / 1; color: white; font-family: "Space Grotesk", sans-serif; font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.history-cards { display: grid; gap: .9rem; margin-top: 1.75rem; }
.history-card { padding: 1.25rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1.25rem; background: rgba(255,255,255,.055); }
.history-card__heading { display: flex; align-items: center; gap: .7rem; }
.history-card__icon { color: #60a5fa; font-size: 1.55rem; line-height: 1; }
.history-card h3 { color: white; font-family: "Space Grotesk", sans-serif; font-size: 1.25rem; font-weight: 700; }
.history-card > p { margin-top: .45rem; color: #a3a3a3; font-size: .88rem; }
.history-chart { display: flex; align-items: end; gap: .35rem; height: 5rem; margin-top: 1.25rem; }
.history-chart__bar { flex: 1; min-width: .65rem; border-radius: .42rem .42rem .2rem .2rem; background: linear-gradient(90deg, #5796e0, #5f9be1); transition: height .3s ease; }
.history-empty { margin-top: 1.75rem; padding: 1.5rem; border: 1px solid rgba(255,255,255,.08); border-radius: 1rem; color: #a3a3a3; text-align: center; }
.tutorial-step { margin-top: 1.5rem; color: white; font-size: 1.1rem; line-height: 1.65; }