.aiv-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 4px;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
}
.aiv-stage { position: absolute; top:0;left:0;right:0;bottom:0; }
.aiv-overlay { position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;pointer-events:none; }
.aiv-caption {
    position:absolute;bottom:0;left:0;right:0;z-index:11;
    padding:10px 16px 58px;
    background:linear-gradient(transparent,rgba(0,0,0,.6));
    color:#fff;font-size:clamp(12px,1.5vw,15px);pointer-events:none;
}
.aiv-controls {
    position:absolute;bottom:10px;left:50%;transform:translateX(-50%);
    z-index:12;display:flex;align-items:center;gap:4px;
    background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
    border-radius:40px;padding:4px 10px;
    opacity:0;transition:opacity .25s;white-space:nowrap;
}
.aiv-wrapper:hover .aiv-controls,
.aiv-wrapper:focus-within .aiv-controls { opacity:1; }
.aiv-btn {
    background:transparent;border:none;color:#fff;cursor:pointer;
    width:32px;height:32px;font-size:16px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    border-radius:50%;padding:0;transition:background .15s;flex-shrink:0;
}
.aiv-btn:hover { background:rgba(255,255,255,.2); }
.aiv-dots {
    position:absolute;bottom:50px;left:50%;transform:translateX(-50%);
    z-index:12;display:flex;gap:6px;
    opacity:0;transition:opacity .25s;
}
.aiv-wrapper:hover .aiv-dots,
.aiv-wrapper:focus-within .aiv-dots { opacity:1; }
.aiv-dot {
    width:8px;height:8px;border-radius:50%;
    background:rgba(255,255,255,.4);border:none;cursor:pointer;padding:0;
    transition:background .2s,transform .2s;
}
.aiv-dot.active { background:#fff;transform:scale(1.35); }
.aiv-dot:hover  { background:rgba(255,255,255,.75); }
.aiv-loader {
    position:absolute;top:0;left:0;right:0;bottom:0;
    display:flex;align-items:center;justify-content:center;
    z-index:20;background:#111;transition:opacity .4s;
}
.aiv-spinner {
    width:32px;height:32px;
    border:3px solid rgba(255,255,255,.15);border-top-color:#fff;
    border-radius:50%;animation:aiv-spin .7s linear infinite;
}
@keyframes aiv-spin { to { transform:rotate(360deg); } }
.aiv-error {
    padding:10px 14px;background:#fef2f2;
    border:1px solid #fecaca;color:#dc2626;border-radius:6px;font-size:14px;
}
.aiv-wrapper:fullscreen,
.aiv-wrapper:-webkit-full-screen {
    border-radius:0;height:100vh!important;
    padding-bottom:0!important;width:100vw!important;
}