.tool-stage { min-height: 320px; display: none; flex-direction: column; justify-content: space-between; }
.tool-stage.is-active { display: flex; animation: shinyFadeIn .4s ease-out forwards; }

.tool-stage .tool-btn { margin-top: 28px; }
.tool-stage textarea { width: 100%; max-width: 700px; min-height: 110px; margin: 20px auto 0; padding: 16px 18px; resize: vertical; color: var(--text); background: rgba(10,17,22,.72); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font); font-size: .95rem; font-weight: 300; line-height: 1.5; outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.tool-stage textarea::placeholder { color: var(--muted); }
.tool-stage textarea:focus { border-color: var(--border-strong); box-shadow: 0 0 20px var(--glow-purple); }

.complete-icon { display: inline-block; margin-right: 6px; }

#continueAfterTimer:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.ct-timer { --ct-size: 210px; --ct-ring-bg: #022c22; --ct-ring-fill: #064e3b; --ct-core-bg: #0a1116; --ct-text: #eafff7; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 22px; margin: 24px auto 8px; text-align: center; user-select: none; position: relative; }

.ct-ring { width: var(--ct-size); height: var(--ct-size); border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--ct-ring-fill) var(--progress), var(--ct-ring-bg) var(--progress)); box-shadow: 0 0 32px rgba(16,185,129,.22), 0 0 12px rgba(16,185,129,.35) inset; transition: box-shadow .3s ease; }

.ct-ring::before { content: ""; position: absolute; top: 50%; left: 50%; width: calc(var(--ct-size) - 48px); height: calc(var(--ct-size) - 48px); transform: translate(-50%,-50%); border-radius: 50%; background: var(--ct-core-bg); box-shadow: inset 0 0 22px rgba(0,0,0,.55); pointer-events: none; }

.ct-ring.is-complete { box-shadow: 0 0 34px rgba(52,211,153,.28), 0 0 14px rgba(52,211,153,.38) inset; }

.ct-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: calc(var(--ct-size) * .24); font-weight: 600; color: var(--ct-text); letter-spacing: -.01em; pointer-events: none; }

.ct-btn { width: 170px; min-width: 170px; padding: 14px 32px; background: #022c22; color: #34d399; border: 1.5px solid #34d399; border-radius: 4px; font-family: var(--font); font-size: .92rem; font-weight: 500; letter-spacing: .03em; cursor: pointer; box-shadow: none; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; }

.ct-btn:hover { transform: translateY(-1px); background: rgba(52,211,153,.10); color: #34d399; border-color: #34d399; }

.ct-btn:active { transform: translateY(0); }
.ct-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

@keyframes shinyFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 768px) {
    .tool-stage { min-height: 300px; }
    .ct-timer { --ct-size: 190px; }
}

@media (max-width: 480px) {
    .tool-stage { min-height: 280px; }
    .ct-timer { --ct-size: 175px; gap: 18px; }
    .ct-btn { width: 100%; min-width: 0; max-width: 170px; }
}