.time-tool-shell{max-width:760px;margin:1.5rem auto;padding:clamp(1rem,3vw,2rem);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(245,247,250,.88));box-shadow:0 18px 50px rgba(20,30,50,.12);border:1px solid rgba(80,90,110,.12)}
.time-visual{display:grid;grid-template-columns:minmax(110px,180px) 1fr;gap:1.2rem;align-items:center;margin:1.25rem 0}.time-ring{--p:68;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:conic-gradient(currentColor calc(var(--p)*1%),rgba(120,130,150,.16) 0);position:relative}.time-ring:after{content:"";position:absolute;inset:12%;border-radius:50%;background:var(--time-ring-bg,#fff);box-shadow:inset 0 0 0 1px rgba(80,90,110,.08)}.time-ring>span{position:relative;z-index:1;font-size:clamp(1.2rem,4vw,2rem);font-weight:750;text-align:center}.time-track{position:relative;padding:1rem 0}.time-track:before{content:"";position:absolute;left:12px;top:0;bottom:0;width:3px;border-radius:3px;background:linear-gradient(currentColor,rgba(120,130,150,.14))}.time-milestone{position:relative;margin:.8rem 0 .8rem 2.2rem;padding:.8rem 1rem;border-radius:16px;background:rgba(255,255,255,.72);border:1px solid rgba(80,90,110,.1)}.time-milestone:before{content:"";position:absolute;left:-2rem;top:1.1rem;width:11px;height:11px;border-radius:50%;background:currentColor;box-shadow:0 0 0 5px rgba(120,130,150,.12)}
.time-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.time-controls label{display:grid;gap:.35rem}.time-controls input,.time-controls select{width:100%;min-height:46px;padding:.65rem .75rem;border-radius:12px;border:1px solid rgba(80,90,110,.22);background:rgba(255,255,255,.94);font:inherit}.time-actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}.time-actions button{min-height:44px;padding:.65rem 1rem;border-radius:999px;border:1px solid currentColor;background:transparent;font:inherit;font-weight:650;cursor:pointer}.time-result{margin-top:1.1rem;padding:1rem 1.1rem;border-radius:18px;background:rgba(255,255,255,.76);border:1px solid rgba(80,90,110,.12);font-variant-numeric:tabular-nums}.time-result strong{font-size:clamp(1.15rem,4vw,1.65rem)}.time-note{font-size:.94rem;opacity:.82;margin-top:1rem}.time-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .65rem;border-radius:999px;background:rgba(120,130,150,.1);font-size:.84rem;font-weight:650}.calendar-card{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:1rem 0}.calendar-card i{aspect-ratio:1;display:grid;place-items:center;border-radius:8px;background:rgba(120,130,150,.08);font-style:normal;font-size:.72rem}.calendar-card i:nth-child(7n+1),.calendar-card i:nth-child(7n){opacity:.72}@media(max-width:620px){.time-visual{grid-template-columns:1fr}.time-ring{max-width:150px;margin:auto}.time-controls{grid-template-columns:1fr}.time-tool-shell{border-radius:20px}.time-actions button{flex:1 1 42%}}


/* V6.37 time/date visual polish */
.time-tool-shell{position:relative;overflow:hidden}
.time-tool-shell::before,.time-tool-shell::after{content:"";position:absolute;border-radius:999px;pointer-events:none;opacity:.07;background:currentColor}
.time-tool-shell::before{width:16rem;height:16rem;right:-8rem;top:-8rem}
.time-tool-shell::after{width:9rem;height:9rem;left:-4.5rem;bottom:-4.5rem}
.time-badge{letter-spacing:.02em}
.time-ring{position:relative;isolation:isolate;box-shadow:inset 0 0 0 1px rgba(127,127,127,.18)}
.time-ring::after{content:"";position:absolute;inset:10%;border:1px dashed currentColor;border-radius:50%;opacity:.18;z-index:-1}
.time-track{position:relative}
.time-track::before{content:"";position:absolute;left:5%;right:5%;top:50%;height:2px;background:currentColor;opacity:.12;z-index:0}
.time-milestone{position:relative;z-index:1;backdrop-filter:blur(4px)}
.time-result strong{font-variant-numeric:tabular-nums lining-nums}
.date-locale-hint{margin:.65rem 0 0;font-size:.82rem;line-height:1.35;opacity:.68}
@media (prefers-reduced-motion:no-preference){.time-ring{animation:timePulse 5s ease-in-out infinite}@keyframes timePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}}
@media (max-width:640px){.time-track{gap:.4rem}.time-milestone{font-size:.78rem}}