/* Start Mini Circular Icons */
.mini-circle {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
/* End Mini Circular Icons */

/* Start Radial Percentage Indicator */
.radial {
    --size: 92px;
    --thickness: 10px;
    --track: #e5e7eb;
    --color: #2563eb;
    width: var(--size);
    height: var(--size);
    position: relative;
    border-radius: 9999px;
    background:
        radial-gradient(farthest-side, white calc(100% - var(--thickness)), transparent 0 99.9%, white 0),
        conic-gradient(var(--color) calc(var(--p, 0) * 1%), var(--track) 0);
    box-shadow: 0 6px 20px rgba(37,99,235,0.15), inset 0 0 0 1px rgba(0,0,0,0.04);
    transition: background 0.6s ease;
}

.radial .percent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}
/* End Radial Percentage Indicator */

/* Start Linear Progress */
.progress {
    --height: 8px;
    background: #eef2ff;
    border-radius: 9999px;
    height: var(--height);
    overflow: hidden;
    position: relative;
}

.progress .fill {
    background: linear-gradient(90deg, #60a5fa, #2563eb);
    width: 0%;
    height: 100%;
    border-radius: inherit;
    transition: width 0.9s ease;
}
/* End Linear Progress */

/* Start Responsive Adjustments */
@media (max-width: 640px) {
    .radial { --size: 84px; --thickness: 9px; }
    .mini-circle { width: 56px; height: 56px; }
}
/* End Responsive Adjustments */

/* Start History Slider Dots */
.history-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: #c7d2fe;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
    transition: transform .2s ease, background .2s ease;
}

.history-dot[aria-current="true"] {
    background: #2563eb;
    transform: scale(1.15);
}
/* End History Slider Dots */

/* Start ISO Square */
.iso-square {
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 4 / 3;
    min-height: 180px;
    padding: 8px;
    background: #ffffff;
}

.iso-square img {
    object-fit: contain;
}

@media (max-width: 1024px) {
    .iso-square { max-width: 240px; min-height: 170px; }
}

@media (max-width: 768px) {
    .iso-square { max-width: 200px; min-height: 150px; }
}

@media (max-width: 640px) {
    .iso-square { max-width: 160px; min-height: 130px; }
}
/* End ISO Square */

/* Start Chairmen Stage */
.chairmen-stage {
    position: relative;
    min-height: 360px;
    overflow: hidden;
}

.chairmen-stage .chairman-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.75);
    opacity: 0;
    transition: transform .45s ease, opacity .35s ease;
    text-align: center;
}

.chairmen-stage .chairman-item .photo {
    width: 120px;
    height: 120px;
    border-radius: 9999px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
    margin: 0 auto;
}

.chairmen-stage .chairman-item .photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chairmen-stage .chairman-item .caption {
    margin-top: .5rem;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s ease, transform .3s ease;
}

.chairmen-stage .chairman-item.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 3;
}

.chairmen-stage .chairman-item.active .photo { width: 180px; height: 180px; }
.chairmen-stage .chairman-item.active .caption { opacity: 1; transform: translateY(0); }

.chairmen-stage .chairman-item.prev,
.chairmen-stage .chairman-item.next {
    opacity: 1;
    z-index: 2;
}

.chairmen-stage .chairman-item.prev { transform: translate(calc(-50% - 280px), -50%) scale(.9); }
.chairmen-stage .chairman-item.next { transform: translate(calc(-50% + 280px), -50%) scale(.9); }

@media (max-width: 768px) {
    .chairmen-stage { min-height: 300px; }
    .chairmen-stage .chairman-item .photo { width: 96px; height: 96px; }
    .chairmen-stage .chairman-item.active .photo { width: 140px; height: 140px; }
    .chairmen-stage .chairman-item.prev { transform: translate(calc(-50% - 200px), -50%) scale(.9); }
    .chairmen-stage .chairman-item.next { transform: translate(calc(-50% + 200px), -50%) scale(.9); }
}

@media (max-width: 480px) {
    .chairmen-stage { min-height: 260px; padding: 8px 12px; }
    .chairmen-stage .chairman-item.prev,
    .chairmen-stage .chairman-item.next { display: none; }
    .chairmen-stage .chairman-item.active .photo { width: 128px; height: 128px; }
    .chairmen-stage .chairman-item { width: 92%; max-width: 280px; }
    .chairmen-stage .chairman-item .caption { padding: 0 4px; }
    .chairmen-stage .chairman-item .caption h4 { font-size: 0.95rem; line-height: 1.2; }
    .chairmen-stage .chairman-item .caption p { font-size: 0.8rem; line-height: 1.25; }
    .chairmen-stage .chairman-item .caption h4,
    .chairmen-stage .chairman-item .caption p { word-break: break-word; overflow-wrap: anywhere; }
}
/* End Chairmen Stage */

/* Start Utilities */
.no-select,
.no-select * {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.grab-zone:hover {
    cursor: -webkit-grab;
    cursor: grab;
}

.grab-zone.grabbing,
.grab-zone.grabbing * {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}
/* End Utilities */

/* Start Navigation Buttons */
@media (max-width: 768px) {
    #history-prev, #history-next,
    #iso-prev, #iso-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
    
    #history-prev, #iso-prev {
        left: 8px;
    }
    
    #history-next, #iso-next {
        right: 8px;
    }
    
    #history-prev, #history-next,
    #iso-prev, #iso-next {
        min-width: 44px;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    
    #history-prev:hover, #history-next:hover,
    #iso-prev:hover, #iso-next:hover {
        background: rgba(255, 255, 255, 1) !important;
        transform: translateY(-50%) scale(1.05);
    }
}
/* End Navigation Buttons */