.boot-overlay[hidden] { display: none; }
body.boot-active { overflow: hidden; }
.boot-overlay { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; padding: clamp(14px, 4vw, 48px); overflow: hidden; background: #030504; color: #9bf5a7; font-family: var(--mono); }
.boot-overlay::before { position: absolute; inset: 0; background: linear-gradient(rgba(77,173,91,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(77,173,91,.025) 1px, transparent 1px); background-size: 32px 32px; content: ""; pointer-events: none; }
.boot-overlay::after { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.16) 4px); content: ""; pointer-events: none; }
.boot-overlay.is-closing { opacity: 0; transition: opacity .5s ease; }
.boot-frame { position: relative; z-index: 1; width: min(900px, 100%); padding: clamp(17px, 3vw, 30px); border: 1px solid rgba(105,202,119,.3); background: rgba(5,10,7,.94); box-shadow: 0 0 70px rgba(25,106,42,.12), inset 0 0 50px rgba(30,88,42,.06); }
.boot-header { display: flex; align-items: center; gap: 15px; }
.boot-logo { width: 54px; height: 54px; flex: 0 0 auto; border: 1px solid rgba(194,36,54,.72); object-fit: cover; }
.boot-heading { flex: 1; min-width: 0; }
.boot-heading p { margin: 0 0 5px; color: #7edc8b; font: 8px var(--mono); }
.boot-heading h2 { margin: 0; color: #edf5ed; font: 600 clamp(17px, 3vw, 24px)/1 var(--display); }
.boot-status { display: flex; align-items: center; color: #80cb8b; font: 8px var(--mono); gap: 7px; }
.boot-led { width: 7px; height: 7px; border-radius: 50%; background: #59d36c; box-shadow: 0 0 10px rgba(89,211,108,.8); animation: boot-pulse 1.1s steps(2,end) infinite; }
.boot-rule { height: 1px; margin: 17px 0 13px; background: rgba(111,196,124,.27); }
.boot-context { display: grid; grid-template-columns: 1fr 1fr 1fr; color: #67896b; font: 8px var(--mono); gap: 8px; }
.boot-context b { color: #a4dfa9; font-weight: 400; }
.boot-screen { height: clamp(220px, 38vh, 340px); display: flex; flex-direction: column; justify-content: flex-end; margin-top: 13px; padding: 12px 0; overflow: hidden; border-top: 1px solid rgba(111,196,124,.12); border-bottom: 1px solid rgba(111,196,124,.12); }
.boot-log { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; gap: 6px; }
.boot-log-line { display: flex; align-items: baseline; min-height: 16px; color: #91df9a; font: 9px/1.5 var(--mono); animation: boot-line-in .2s ease-out both; gap: 9px; }
.boot-log-time { flex: 0 0 auto; color: #53785a; }
.boot-log-line.is-warning { color: #ff6976; }
.boot-log-line.is-muted { color: #708a73; }
.boot-current { display: flex; align-items: center; margin: 9px 0 0; color: #b8efbd; font: 9px var(--mono); gap: 7px; }
.boot-caret { width: 7px; height: 13px; background: #8fee9a; animation: boot-caret .8s steps(2,end) infinite; }
.boot-footer { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; margin-top: 16px; gap: 20px; }
.boot-progress-group { min-width: 0; }
.boot-progress-label { display: flex; justify-content: space-between; margin-bottom: 7px; color: #789d7c; font: 8px var(--mono); gap: 10px; }
.boot-progress { height: 4px; overflow: hidden; background: #16231a; }
.boot-progress span { width: 0; height: 100%; display: block; background: #69d879; box-shadow: 0 0 12px rgba(105,216,121,.45); transition: width .15s linear; }
.boot-skip { min-height: 34px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid rgba(116,196,126,.4); background: transparent; color: #a4dfa9; cursor: pointer; font: 8px var(--mono); gap: 13px; }
.boot-skip:hover { border-color: #93e99c; background: rgba(105,216,121,.08); }
.boot-disclaimer { margin: 14px 0 0; color: #526d56; font: 7px var(--mono); text-align: right; }
@keyframes boot-pulse { 50% { opacity: .3; } }
@keyframes boot-caret { 50% { opacity: 0; } }
@keyframes boot-line-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
    .boot-frame { padding: 16px; }
    .boot-header { gap: 10px; }
    .boot-logo { width: 42px; height: 42px; }
    .boot-status { max-width: 78px; font-size: 7px; line-height: 1.5; }
    .boot-context { grid-template-columns: 1fr 1fr; font-size: 7px; }
    .boot-context span:last-child { grid-column: 1/-1; }
    .boot-screen { height: min(39vh, 300px); }
    .boot-log-line { font-size: 8px; }
    .boot-footer { grid-template-columns: minmax(0,1fr) auto; gap: 10px; }
    .boot-skip { padding: 0 8px; gap: 7px; }
    .boot-disclaimer { font-size: 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .boot-overlay, .boot-overlay *, .boot-overlay *::before, .boot-overlay *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}