.phase-loading{
display:flex;
align-items:center;
gap:10px;
color:var(--cl3);
font-size:0.95rem;
font-family:var(--ff2);
padding:12px 0;
}
.phase-spinner{
width:18px;
height:18px;
border:2px solid var(--bc1);
border-top-color:var(--ac1);
border-radius:50%;
animation:spin 700ms linear infinite;
}
.spinner{
width:40px;
height:40px;
border:3px solid var(--bc1);
border-top-color:var(--ac1);
border-radius:50%;
animation:spin 700ms linear infinite;
margin:0 auto 16px;
}
.error-msg{
width:100%;
max-width:var(--pw1);
margin-top:20px;
padding:16px 20px;
background:rgba(240,85,51,0.1);
border-left:3px solid var(--ac1);
color:var(--ac1-light);
font-size:0.95rem;
display:none;
font-family:var(--ff2);
border-radius:var(--br1);
}
.error-msg.active{
display:block;
}
.toast-container{
position:fixed;
top:20px;
right:20px;
z-index:1000;
display:flex;
flex-direction:column;
gap:8px;
}
.toast{
padding:12px 20px;
background:var(--bg2);
color:var(--cl1);
font-size:0.9rem;
font-family:var(--ff2);
animation:fadeIn 100ms ease;
border-radius:var(--br2);
display:flex;
align-items:center;
gap:10px;
}
.toast::before{
content:'';
width:10px;
height:10px;
border-radius:50%;
background:var(--cl3);
flex-shrink:0;
}
.toast.success::before{
background:#22c55e;
}
.toast.error::before{
background:var(--ac1);
}
.toast.out{
opacity:0;
transition:opacity 100ms;
}
.lightbox{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.85);
z-index:2000;
align-items:center;
justify-content:center;
cursor:pointer;
}
.lightbox.active{
display:flex;
}
.lb-img{
max-width:90vw;
max-height:90vh;
object-fit:contain;
pointer-events:none;
background:rgba(128,128,128,0.15);
border-radius:4px;
padding:8px;
}
@keyframes fadeIn{
from{
opacity:0;
transform:translateY(8px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@keyframes spin{
to{
transform:rotate(360deg);
}
}code{
font-family:var(--ff3);
background:var(--bg3);
padding:2px 6px;
border-radius:4px;
font-size:0.9em;
color:var(--ac1-light);
}
pre{
background:var(--bg2);
border:1px solid var(--bc1);
border-radius:var(--br2);
padding:12px 16px;
overflow-x:auto;
margin:8px 0;
}
pre code{
background:none;
padding:0;
border-radius:0;
font-size:0.85em;
color:var(--cl1);
}