/* Audio controls inherit the approved optical-lens and compact music-dock styling. */
.ending-transport{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:16px;min-width:0;padding:4px 0 8px}
.ending-play{position:relative;display:grid;place-items:center;flex:none;width:56px;height:56px;border:1px solid #c3bdce85;border-radius:50%;padding:0;color:#f0e7f8;background:linear-gradient(145deg,#5b506070,#241f2be8 60%);box-shadow:inset 0 1px 1px #fff3,inset 0 -2px 5px #0005;cursor:pointer;transition:transform 130ms cubic-bezier(.22,1,.36,1),border-color 180ms ease,background-color 180ms ease} /* taste-skill-ignore: user-approved glass bearing control with restrained metal edging. */
.ending-play::before{content:"";position:absolute;inset:3px;border:1px solid #d8c9e11f;border-radius:inherit;pointer-events:none;transition:border-color 180ms ease}
.ending-play svg{width:21px;height:21px;fill:currentColor}
.ending-play:active:not(:disabled){transform:scale(.95)}
.ending-play:disabled{opacity:.55;cursor:default}
.ending-transport[data-status=playing] .ending-play,.ending-transport[data-status=intro] .ending-play{border-color:#d3b3efba}
#page-profile .ending-track{min-width:0;align-self:center}
#page-profile .ending-track h2{margin:0 0 5px;font:400 clamp(18px,1.5vw,22px)/1.5 var(--serif);letter-spacing:-.025em;text-align:left;text-wrap:pretty;overflow-wrap:anywhere}
#page-profile .ending-track .ending-audio-status{margin:0;min-height:20px;color:#b9adc8;font:12px/1.65 'Noto Sans KR',sans-serif;text-shadow:none;overflow-wrap:anywhere}
.ending-volume{display:flex;align-items:center;gap:4px;width:136px}
.ending-volume button{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;padding:10px;color:#cabcd7;background:transparent;cursor:pointer;transition:color 150ms ease,background-color 150ms ease,transform 130ms cubic-bezier(.22,1,.36,1)}
.ending-volume button:active{transform:scale(.94)}
.ending-volume svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ending-volume input{--ending-level:35%;appearance:none;-webkit-appearance:none;display:block;min-width:0;width:88px;height:44px;margin:0;background:transparent;cursor:pointer;border:0;padding:0;touch-action:pan-y}
.ending-volume input::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#c4a5e3 var(--ending-level),#b6a0c534 var(--ending-level))} /* taste-skill-ignore: hard-stop fill reports the actual volume, not decorative shading. */
.ending-volume input::-moz-range-track{height:3px;border-radius:3px;background:linear-gradient(to right,#c4a5e3 var(--ending-level),#b6a0c534 var(--ending-level))} /* taste-skill-ignore: Firefox volume progress fill. */
.ending-volume input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border:1px solid #f6eefb;border-radius:50%;background:linear-gradient(135deg,#f0e9f5,#a397b1);box-shadow:0 1px 3px #0006} /* taste-skill-ignore: approved small machined-metal thumb; the 44px input is the touch target. */
.ending-volume input::-moz-range-thumb{width:10px;height:10px;border:1px solid #f6eefb;border-radius:50%;background:linear-gradient(135deg,#f0e9f5,#a397b1);box-shadow:0 1px 3px #0006} /* taste-skill-ignore: Firefox rendering of the same metal thumb. */
.ending-transport :is(button,input):focus-visible{outline:2px solid #ddc5f2;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.ending-play:hover:not(:disabled){border-color:#eee1fb;background-color:#6b507e}.ending-play:hover:not(:disabled)::before{border-color:#debcf75e}.ending-volume button:hover{color:#f4e9ff;background-color:#d4b2ee0c}}
@media(min-width:1051px) and (max-width:1230px){.ending-transport{column-gap:12px;grid-template-columns:52px minmax(0,1fr) auto}.ending-play{width:52px;height:52px}.ending-volume{width:124px}.ending-volume input{width:76px}}
@media(max-width:420px){.ending-transport{grid-template-columns:52px minmax(0,1fr);column-gap:14px;row-gap:4px}.ending-play{width:52px;height:52px}.ending-volume{grid-column:2;justify-self:start;margin-left:-10px}.ending-volume input{width:104px}.ending-volume{width:152px}}
@media(prefers-reduced-motion:reduce){.ending-transport :is(button,input),.ending-play::before{transition:none}}
.ending-record-control{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:76px;height:76px;padding:8px;border:1px solid #eee4ff80;border-radius:50%;background:#28212ee8;color:#f2ebfa;cursor:pointer;transition:background 160ms ease,transform 160ms ease}
.ending-record-control[hidden]{display:none}
.ending-record-control:hover{background:#3e324c}
.ending-record-control:active{transform:scale(.96)}
.ending-record-control:focus-visible{outline:2px solid #eadcff;outline-offset:5px}
.ending-record-control svg{width:22px;height:22px;fill:currentColor}
.ending-record-control span{font:12px 'Noto Sans KR',sans-serif}
.music-details .ending-dock-details{display:none}
.music-details.is-ending .ending-dock-details{display:block;padding:4px 0 12px}
.music-details.is-ending .music-video,.music-details.is-ending .music-controls{display:none}
.ending-dock-title{margin:4px 0 16px;color:#eee6f3;font-size:16px}
.ending-dock-details label{display:block;margin-bottom:8px;font-size:12px;color:#c8bed1}
.ending-dock-details input{width:100%;accent-color:#ba9fd5;cursor:pointer}
.ending-time{display:flex;justify-content:space-between;margin:6px 0 18px;font-size:12px;font-variant-numeric:tabular-nums;color:#c8bed1}
.music-details.is-ending #endingRestart{display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;min-height:44px;padding:8px 16px;border:1px solid #c9b1dc55;border-radius:22px;font:12px/1.5 'Noto Sans KR',sans-serif;white-space:nowrap}
.music-details.is-ending{max-height:calc(100dvh - 110px);overflow:auto}
.ending-audio-editor fieldset{border:0;padding:0;margin:0;display:grid;gap:12px;min-width:0}
.ending-audio-editor label{font-size:14px}
.ending-audio-editor input[type="text"],.ending-audio-editor input:not([type]){width:100%}
.ending-audio-editor input[type="file"]{width:100%;min-width:0}
.ending-audio-editor .ending-admin-help{margin:0;font-size:13px;line-height:1.7;color:#bbb2c5}
.ending-audio-editor #endingAudioFileInfo{margin:0;overflow-wrap:anywhere;font-size:14px}
.ending-audio-editor audio{width:100%;height:44px}
.ending-audio-editor .ending-effects-option{display:flex;align-items:center;gap:10px;min-height:44px}
.ending-audio-editor .ending-effects-option input{width:18px;height:18px;margin:0}
.ending-admin-actions{display:flex;gap:8px;flex-wrap:wrap}
.ending-audio-editor .btn{min-height:44px;background:#27232f;color:#eee6f3;border:1px solid #766781;text-shadow:none}
.ending-audio-editor .btn.primary{background:#bba0d3;color:#201728;border-color:#bba0d3}
.ending-audio-editor .btn:disabled{opacity:.45;cursor:default}
.ending-audio-editor .btn:focus-visible{outline:2px solid #e0caef;outline-offset:3px}
#endingAudioProgress{margin-top:16px;display:flex;align-items:center;flex-wrap:wrap;gap:12px}
#endingAudioProgress[hidden],#endingAudioRemoveConfirm[hidden]{display:none}
#endingAudioProgress progress{width:min(100%,220px);accent-color:#bfa2d8}
#endingAudioAdminStatus{margin:12px 0 0;font-size:13px;line-height:1.6}
#endingAudioRemoveConfirm{border-top:1px solid #8883;padding-top:10px;margin-top:14px}
@media(max-width:600px){.ending-record-control{width:64px;height:64px}.ending-admin-actions{display:grid;grid-template-columns:1fr}.ending-audio-editor .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.ending-record-control{transition:none}}