/* StudyLand V3.1 Flip Timer — visual-only UI; the original Focus interval and RPC remain unchanged. */
.timer-style-picker{display:flex;justify-content:center;align-items:center;width:fit-content;max-width:100%;margin:13px auto 3px;padding:4px;gap:4px;border-radius:14px;background:rgba(29,47,75,.17);border:1px solid rgba(255,255,255,.36)}
.timer-style-option{border:0;border-radius:10px;background:transparent;color:inherit;font:700 13px/1.2 system-ui,sans-serif;padding:9px 14px;min-height:38px;cursor:pointer;transition:background-color .2s,box-shadow .2s}
.timer-style-option.active{background:#fff;color:#24436b;box-shadow:0 2px 14px rgba(0,0,0,.11)}
.timer-style-option:focus-visible{outline:3px solid #73c7ff;outline-offset:2px}
.timer-wrap[hidden],.flip-timer-wrap[hidden],.flip-clock-unit[hidden],#studioPanel .flip-config[hidden]{display:none!important}
.flip-timer-wrap{--flip-min-bg:222,153,178;--flip-sec-bg:222,153,178;--flip-min-alpha:.89;--flip-sec-alpha:.89;--flip-ink:#fff;--flip-line:rgba(104,47,75,.25);--flip-font:system-ui,Arial,sans-serif;--flip-font-size:clamp(72px,9vw,162px);--flip-radius:22px;--flip-speed:520ms;--flip-shadow:0 15px 38px rgba(18,16,57,.32);max-width:100%;margin:20px auto 16px;min-height:310px;display:flex;flex-direction:column;justify-content:center;gap:13px;padding:6px 0;color:var(--flip-ink)}
.flip-clock{display:flex;align-items:center;justify-content:center;gap:clamp(7px,1vw,18px);max-width:100%;margin:auto auto 0;white-space:nowrap}
.flip-clock-unit{min-width:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.flip-card{position:relative;isolation:isolate;flex:none;display:block;width:clamp(114px,16vw,220px);height:clamp(148px,21vw,258px);border-radius:var(--flip-radius);font-family:var(--flip-font);font-size:min(var(--flip-font-size),clamp(49px,12vw,172px));font-variant-numeric:tabular-nums;line-height:1;font-weight:800;color:var(--flip-ink);filter:none;box-shadow:var(--flip-shadow);perspective:1300px}
.flip-card[data-part="minute"]{--flip-card-rgb:var(--flip-min-bg);--flip-card-alpha:var(--flip-min-alpha)}
.flip-card[data-part="second"]{--flip-card-rgb:var(--flip-sec-bg);--flip-card-alpha:var(--flip-sec-alpha)}
.flip-card[data-part="hour"]{--flip-card-rgb:var(--flip-min-bg);--flip-card-alpha:var(--flip-min-alpha)}
.flip-surface,.flip-flap{position:absolute;left:0;width:100%;height:50%;overflow:hidden;background:rgba(var(--flip-card-rgb),var(--flip-card-alpha));backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.flip-surface span,.flip-flap span{position:absolute;height:200%;width:100%;display:flex;align-items:center;justify-content:center;left:0;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;color:var(--flip-ink);font-variant-numeric:tabular-nums;letter-spacing:-.065em;text-shadow:0 2px 5px rgba(0,0,0,.06);white-space:nowrap}
.flip-top,.flip-flap-top{top:0;border-radius:var(--flip-radius) var(--flip-radius) 0 0;border-bottom:1px solid var(--flip-line)}
.flip-bottom,.flip-flap-bottom{bottom:0;border-radius:0 0 var(--flip-radius) var(--flip-radius);border-top:1px solid rgba(255,255,255,.24)}
.flip-top span,.flip-flap-top span{top:0}
.flip-bottom span,.flip-flap-bottom span{bottom:0}
.flip-flap{display:none}
.flip-card.is-flipping .flip-flap{display:flex}
.flip-flap-top{z-index:5;transform-origin:center bottom;animation:flipOut calc(var(--flip-speed)/2) ease-in forwards}
.flip-flap-bottom{z-index:4;transform-origin:center top;transform:rotateX(90deg);animation:flipIn calc(var(--flip-speed)/2) ease-out calc(var(--flip-speed)/2) forwards}
.flip-clock-colon{font:800 clamp(21px,2.8vw,43px)/1 var(--flip-font);align-self:center;margin:-18px -6px 0;color:var(--flip-ink);text-shadow:0 2px 6px rgba(0,0,0,.14)}
.flip-unit-label{font:800 11px/1.2 system-ui,sans-serif;letter-spacing:.20em;color:inherit;text-shadow:0 1px 5px rgba(0,0,0,.45)}
.flip-timer-foot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;margin:2px auto 0;color:inherit;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.flip-timer-foot span{font-size:29px;line-height:1.2}
.flip-timer-foot small{font-size:12px;color:inherit;opacity:.93}
.flip-card.is-flipping:before,.flip-card.is-flipping:after{pointer-events:none}
.flip-card:after{position:absolute;content:"";top:50%;left:2px;right:2px;height:1px;background:var(--flip-line);z-index:7;pointer-events:none;opacity:.8}
@keyframes flipOut{from{transform:rotateX(0deg)}to{transform:rotateX(-90deg)}}
@keyframes flipIn{from{transform:rotateX(90deg)}to{transform:rotateX(0deg)}}
@media(max-width:1100px){.flip-timer-wrap{--flip-font-size:clamp(66px,11vw,146px)}.flip-card{width:clamp(120px,23vw,210px);height:clamp(154px,26vw,244px)}}
@media(max-width:620px){.flip-clock{gap:6px}.flip-card{width:clamp(76px,21vw,148px);height:clamp(112px,28vw,170px)}.flip-timer-wrap{--flip-font-size:clamp(49px,13vw,95px);min-height:220px}.flip-clock-colon{font-size:17px;margin:-10px -2px 0}.flip-unit-label{font-size:9px}.timer-style-option{padding:8px 10px}}
@media(max-width:395px){.flip-card{width:72px;height:106px}.flip-clock{gap:5px}.flip-timer-wrap{--flip-font-size:47px}}
@media(prefers-reduced-motion:reduce){.flip-card.is-flipping .flip-flap{animation:none!important;display:none!important}}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Studio controls for Flip Timer */
#studioPanel .flip-config .studio-cols{grid-template-columns:1fr 1fr}
#studioPanel .flip-config .flip-color-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#studioPanel .flip-config small{font-size:11px;color:#64726a}
#studioPanel .flip-config .flip-section-note{font-size:11px;color:#64726a;margin:0}
#studioPanel .flip-config select,#studioPanel .flip-config input{max-width:100%}
/* For 1h+ sessions show hours, minutes, seconds without cropping on phones. */
@media (max-width:620px){
  .flip-clock:has(#flipHoursGroup:not([hidden])) .flip-card{width:clamp(52px,15vw,86px);height:clamp(86px,24vw,132px);font-size:min(var(--flip-font-size),clamp(36px,9vw,72px))}
  .flip-clock:has(#flipHoursGroup:not([hidden])){gap:4px}
  .flip-clock:has(#flipHoursGroup:not([hidden])) .flip-clock-colon{font-size:15px;margin-inline:0}
}