.tutorial-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999!important;pointer-events:all!important}.tutorial-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--overlay-dark);backdrop-filter:none}.tutorial-spotlight{position:absolute;border:4px solid var(--accent-success);border-radius:var(--border-radius-md);box-shadow:0 0 40px #4caf50,0 0 20px rgba(255,255,255,.8),inset 0 0 0 3px rgba(255,255,255,.5);pointer-events:none;transition:all var(--transition-normal) ease;opacity:0;transform:scale(.95)}.tutorial-spotlight.active{opacity:1;transform:scale(1)}.tutorial-highlighted{position:relative;z-index:9999!important;pointer-events:auto!important;filter:brightness(1.2) contrast(1.15)!important;box-shadow:0 0 30px rgba(76,175,80,.8),0 0 10px rgba(255,255,255,.5)!important}.tutorial-box{position:absolute;width:420px;max-width:90vw;background:var(--bg-white);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-2xl);z-index:1000000!important;animation:tutorial-enter var(--transition-normal) ease;pointer-events:auto!important}@keyframes tutorial-enter{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.tutorial-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-5);border-bottom:1px solid var(--border-medium)}.tutorial-title{margin:0;font-size:var(--font-md);font-weight:var(--font-weight-semibold);color:var(--text-primary)}.tutorial-close{background:0 0;border:none;font-size:var(--font-lg);color:var(--text-muted);cursor:pointer;padding:var(--space-1);width:32px;height:32px;border-radius:var(--border-radius-circle);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.tutorial-close:hover{background:var(--bg-light);color:var(--text-primary)}.tutorial-body{padding:var(--space-5)}.tutorial-content h4{margin:0 0 var(--space-3) 0;font-size:var(--font-base);font-weight:var(--font-weight-semibold);color:var(--accent-success)}.tutorial-text{font-size:var(--font-sm);line-height:1.6;color:var(--text-secondary);margin-bottom:var(--space-4)}.tutorial-text p{margin:0 0 10px}.tutorial-text ul{margin:10px 0;padding-left:20px}.tutorial-text li{margin:5px 0}.tutorial-text strong{color:var(--text-primary);font-weight:var(--font-weight-semibold)}.tutorial-text code{background:var(--bg-light);padding:2px 6px;border-radius:var(--border-radius-sm);font-family:'Courier New',monospace;font-size:var(--font-xs)}.tutorial-progress{margin-top:var(--space-4)}.tutorial-progress-bar{width:100%;height:6px;background:var(--border-medium);border-radius:var(--border-radius-sm);overflow:hidden;margin-bottom:var(--space-2)}.tutorial-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-success),#66bb6a);border-radius:var(--border-radius-sm);transition:width var(--transition-normal) ease}.tutorial-progress-text{font-size:var(--font-xs);color:var(--text-muted);text-align:center;display:block}.tutorial-footer{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-5);border-top:1px solid var(--border-medium);gap:var(--space-3)}.tutorial-nav{display:flex;gap:var(--space-2)}.tutorial-btn{padding:var(--space-2-5) var(--space-5);border:none;border-radius:var(--border-radius-md);font-size:var(--font-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:var(--space-2)}.tutorial-btn:disabled{opacity:.5;cursor:not-allowed}.tutorial-btn-skip{background:0 0;color:var(--text-muted)}.tutorial-btn-skip:hover:not(:disabled){color:var(--text-primary);background:var(--bg-light)}.tutorial-btn-prev{background:var(--bg-light);color:var(--text-primary)}.tutorial-btn-prev:hover:not(:disabled){background:var(--border-medium)}.tutorial-btn-next{background:var(--accent-success);color:var(--text-white)}.tutorial-btn-next:hover:not(:disabled){background:#45a049;box-shadow:var(--shadow-md)}.tutorial-btn-finish{background:var(--accent-info)}.tutorial-btn-finish:hover:not(:disabled){background:#1976d2}.tutorial-success{text-align:center;padding:var(--space-5)}.tutorial-success i{font-size:48px;color:var(--accent-success);margin-bottom:var(--space-4);display:block}.tutorial-success p{font-size:var(--font-base);color:var(--text-primary);margin:0}body.tutorial-active{overflow:hidden}@media (max-width:768px){.tutorial-box{width:calc(100vw - 32px);top:auto!important;left:16px!important;right:16px!important;bottom:16px!important;transform:none!important}.tutorial-footer{flex-direction:column}.tutorial-nav{width:100%}.tutorial-btn{flex:1}.tutorial-btn-skip{width:100%}}@media (prefers-color-scheme:dark){.tutorial-box{background:#2a2a2a;color:#e0e0e0}.tutorial-header{border-bottom-color:#444}.tutorial-title{color:#e0e0e0}.tutorial-text{color:#bbb}.tutorial-text code{background:#1a1a1a}.tutorial-footer{border-top-color:#444}.tutorial-btn-prev{background:#444;color:#e0e0e0}.tutorial-btn-prev:hover:not(:disabled){background:#555}}@keyframes tutorial-pulse{0%,100%{box-shadow:0 0 0 0 rgba(76,175,80,.7)}50%{box-shadow:0 0 0 10px rgba(76,175,80,0)}}.tutorial-highlighted{animation:2s infinite tutorial-pulse}body.tutorial-active *{pointer-events:none!important;user-select:none!important}body.tutorial-active .tutorial-box,body.tutorial-active .tutorial-box *,body.tutorial-active .tutorial-overlay,body.tutorial-active .tutorial-overlay *{pointer-events:auto!important;user-select:auto!important}