/* ===== TUTORIAL OVERLAY ===== */
.tutorial-overlay{position:fixed;inset:0;z-index:500;opacity:0;transition:opacity .3s ease;pointer-events:none}
.tutorial-overlay.open{opacity:1;pointer-events:auto}
.tutorial-overlay.closing{opacity:0;pointer-events:none}

.tutorial-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.65)}

.tutorial-spotlight{position:absolute;border-radius:12px;box-shadow:0 0 0 9999px rgba(0,0,0,.65);z-index:1;transition:all .4s cubic-bezier(.22,1,.36,1);pointer-events:none}

.tutorial-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.95);z-index:2;background:#fff;border-radius:20px;padding:36px 32px 28px;width:380px;max-width:90vw;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.2);transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s ease;opacity:0}
.tutorial-overlay.open .tutorial-card{transform:translate(-50%,-50%) scale(1);opacity:1}

.tutorial-skip{position:absolute;top:12px;right:16px;background:none;border:none;font-size:12px;font-weight:700;color:#999;cursor:pointer;font-family:inherit;padding:4px 8px;border-radius:6px;transition:.2s}
.tutorial-skip:hover{background:#f0f0f0;color:#333}

.tutorial-icon{font-size:40px;margin-bottom:12px;line-height:1}
.tutorial-title{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;color:#0F0F0F}
.tutorial-body{font-size:13.5px;line-height:1.6;color:#555;margin-bottom:20px}

.tutorial-dots{display:flex;gap:6px;justify-content:center;margin-bottom:20px}
.tutorial-dot{width:8px;height:8px;border-radius:50%;background:#ddd;cursor:pointer;transition:.2s}
.tutorial-dot.active{background:#FF3D00;transform:scale(1.3)}
.tutorial-dot.done{background:#999}

.tutorial-nav{display:flex;gap:10px;justify-content:center}
.tutorial-prev,.tutorial-next{padding:10px 24px;font-size:13px;font-weight:800;border-radius:10px;border:none;cursor:pointer;font-family:inherit;transition:.2s}
.tutorial-prev{background:#f0f0f0;color:#333}
.tutorial-prev:hover{background:#e0e0e0}
.tutorial-next{background:#FF3D00;color:#fff}
.tutorial-next:hover{filter:brightness(1.1)}

/* ===== AUTO-CYCLE OVERLAY ===== */
.cycle-overlay{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:150;padding:16px 28px;background:rgba(15,15,15,.92);color:#fff;border-radius:40px;font-size:14px;font-weight:700;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 32px rgba(0,0,0,.3);animation:cycleFloat 2s ease infinite;transition:opacity .3s,transform .3s}
.cycle-overlay.fade-out{opacity:0;transform:translateX(-50%) translateY(10px)}
.cycle-inner{display:flex;align-items:center;gap:10px}
.cycle-overlay kbd{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:6px;font-size:11px;font-weight:800;font-family:inherit;box-shadow:0 1px 0 rgba(255,255,255,.1)}
@keyframes cycleFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}