.update-body { overflow:auto; min-height:100dvh; height:auto; }
.update-shell { position:relative; z-index:1; display:grid; gap:18px; max-width:1060px; margin:0 auto; padding:28px clamp(16px,4vw,44px) 48px; }
.update-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; padding:0 0 20px; border-bottom:1px solid var(--line); }
.update-header h1 { margin:8px 0 7px; font-size:clamp(28px,4vw,46px); letter-spacing:-.04em; }
.update-header p,.update-footnote { color:var(--muted); font-size:12px; line-height:1.6; }
.update-header a { flex:none; padding:10px 14px; border:1px solid var(--line); border-radius:10px; color:var(--text); text-decoration:none; font-size:11px; }
.update-header a:hover { border-color:var(--mint); color:var(--mint); }
.update-hero,.update-timeline { border:1px solid var(--line); border-radius:18px; background:var(--panel); backdrop-filter:blur(20px); }
.update-hero { padding:clamp(20px,3vw,32px); }
.update-hero-top,.update-progress-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.update-hero-top { color:var(--muted); font:11px "Cascadia Mono",Consolas,monospace; }
.update-state { display:inline-flex; align-items:center; gap:9px; color:var(--mint); letter-spacing:.1em; }
.update-state.phase-change,.update-hero h2.phase-change { animation:motion-enter 220ms var(--motion-enter-ease) both; }
.update-state::before { content:''; width:8px; height:8px; border-radius:50%; background:currentColor; }
.update-state[data-phase="checking"]::before,.update-state[data-phase="downloading"]::before,.update-state[data-phase="restarting"]::before { animation:update-pulse 2.8s ease-in-out infinite; }
.update-state[data-phase="failed"],.update-state[data-phase="rolled_back"] { color:var(--red); }
.update-hero h2 { margin:22px 0 8px; font-size:clamp(22px,3vw,34px); letter-spacing:-.03em; }
.update-hero p { color:var(--muted); font-size:13px; line-height:1.65; max-width:70ch; }
.update-progress-track { height:10px; margin:25px 0 12px; overflow:hidden; border:1px solid var(--line); border-radius:99px; background:var(--bg); }
.update-progress-track span { display:block; width:0; height:100%; border-radius:99px; background:var(--mint); transition:width 180ms var(--motion-ease); }
.update-hero:has(.update-state[data-phase="failed"]) .update-progress-track span,.update-hero:has(.update-state[data-phase="rolled_back"]) .update-progress-track span { background:var(--red); }
.update-progress-meta { color:var(--muted); font:11px "Cascadia Mono",Consolas,monospace; }
.update-progress-meta span:first-child { color:var(--mint); }
.update-versions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.update-versions article { display:grid; gap:9px; min-width:0; padding:19px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); }
.update-versions article > span { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.12em; }
.update-versions strong { color:var(--mint); font-size:20px; overflow-wrap:anywhere; }
.update-versions code,.update-versions small { color:var(--muted); font:11px/1.45 "Cascadia Mono",Consolas,monospace; overflow-wrap:anywhere; }
.update-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.update-actions button { min-height:42px; }
.update-actions > span { margin-left:auto; color:var(--muted); font-size:11px; }
.update-readiness { margin:-7px 0 0; color:var(--muted); font-size:11px; line-height:1.6; }
.update-timeline-heading { display:flex; justify-content:space-between; align-items:end; gap:15px; padding:20px 24px; border-bottom:1px solid var(--line); }
.update-timeline-heading h2 { margin-top:6px; font-size:18px; }
.update-timeline-heading > span { color:var(--muted); font-size:11px; }
#timeline-list { display:grid; gap:0; max-height:480px; overflow:auto; margin:0; padding:10px 24px 18px 58px; list-style:none; }
#timeline-list li { position:relative; padding:13px 0 13px 20px; border-left:1px solid var(--line); }
#timeline-list li.timeline-enter { animation:motion-enter 220ms var(--motion-enter-ease) both; }
#timeline-list li::before { content:''; position:absolute; left:-5px; top:18px; width:9px; height:9px; border-radius:50%; background:var(--mint); }
#timeline-list li:last-child { border-left-color:transparent; }
#timeline-list li[data-phase="failed"]::before,#timeline-list li[data-phase="rolled_back"]::before { background:var(--red); }
#timeline-list strong { display:block; margin-bottom:4px; color:var(--text); font-size:12px; font-weight:600; }
#timeline-list time { color:var(--muted); font:10px "Cascadia Mono",Consolas,monospace; }
#timeline-list .timeline-empty { color:var(--muted); font-size:12px; }
#timeline-list .timeline-empty::before { background:var(--muted); }
.update-footnote { margin:0; }
.update-error { min-height:1.5em; color:var(--red); }
.confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@keyframes update-pulse { 50% { opacity:.64; } }
@media (max-width:680px) { .update-header { flex-direction:column; } .update-versions { grid-template-columns:1fr; } .update-actions > span { width:100%; margin-left:0; } #timeline-list { padding-left:34px; } }
@media (prefers-reduced-motion:reduce) { .update-state::before { animation:none!important; } .update-progress-track span { transition:none; } }