*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,sans-serif;display:flex;flex-direction:column;min-height:100vh;background:#f8f9fa;color:#212529}
body.theme-dark{background:#121212;color:#e9ecef}
.main-wrapper{display:flex;flex:1;flex-direction:column;align-items:center}
.main-content{margin:8rem auto;padding:1.5rem;width:100%;max-width:60rem}
#content{background:#fafafa;border:1px solid #e0e0e0;display:flex;justify-content:space-between;padding:12px 16px;flex-wrap:wrap;align-items:center}
body.theme-dark #content{background:#232323;border-color:#444}
.cb-lb{display:flex;align-items:center;gap:12px;cursor:pointer;position:relative}
.cb-lb input{opacity:0;width:24px;height:24px;position:absolute;cursor:pointer}
.cb-i{width:24px;height:24px;border:2px solid #6d6d6d;border-radius:3px;background:#fff}
body.theme-dark .cb-i{background:#222;border-color:#dadada}
.cb-lb input:checked ~ .cb-i:after{content:"";position:absolute;left:6px;top:1px;width:8px;height:14px;border:solid #c44d0e;border-width:0 3px 3px 0;transform:rotate(45deg)}
.cb-lb-t{font-size:16px}
.cb-container{display:none;align-items:center;gap:12px;grid-template-columns:30px auto}
#spinner-i{animation:spin 1s linear infinite;width:30px;height:30px}
@keyframes spin{to{transform:rotate(360deg)}}
.footer{margin:0 auto;padding:1rem;text-align:center;font-size:12px}
#branding{text-align:right}
#logo{height:25px}
.ray-id code{background:rgba(0,0,0,0.1);padding:2px 6px;border-radius:4px}

/* Расширенный контейнер для анимации инструкции */
#instruction .cb-container {
    gap: 16px;
    grid-template-columns: 44px auto;
    margin-left: 8px;
}

#instruction svg {
    width: 44px;
    height: 44px;
    overflow: visible;
}

#instruction .timeout-circle {
    fill: none;
    stroke: #c44d0e;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 94.2;
    stroke-dashoffset: 94.2;
    transform-origin: 50% 50%;
    animation: circle-dash 1.5s ease-in-out infinite;
}

#instruction .timeout-p1 {
    fill: #c44d0e;
    transform-origin: 50% 50%;
    animation: hand-spin 1.5s ease-in-out infinite;
}

@keyframes circle-dash {
    0% {
        stroke-dashoffset: 94.2;
        transform: rotate(0deg);
    }
    50% {
        stroke-dashoffset: 23.55;
        transform: rotate(180deg);
    }
    100% {
        stroke-dashoffset: 94.2;
        transform: rotate(360deg);
    }
}

@keyframes hand-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}